diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 08d350c62ac757..132ea2605a154b 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -275,6 +275,7 @@ packages/react-components/react-virtualizer/stories @microsoft/xc-uxe @Mitch-At- packages/react-components/react-skeleton/library @microsoft/cxe-prg @marcosmoura packages/react-components/react-skeleton/stories @microsoft/cxe-prg @marcosmoura packages/tokens @microsoft/teams-prg +packages/semantic-tokens @microsoft/xc-uxe packages/react-components/react-tags/library @microsoft/cxe-prg @microsoft/teams-prg @ValentinaKozlova packages/react-components/react-tags/stories @microsoft/cxe-prg @microsoft/teams-prg @ValentinaKozlova packages/react-components/react-migration-v0-v9/library @microsoft/teams-prg @@ -332,6 +333,8 @@ packages/react-components/component-selector-preview/library @microsoft/teams-pr packages/react-components/component-selector-preview/stories @microsoft/teams-prg packages/react-components/react-menu-grid-preview/library @microsoft/teams-prg packages/react-components/react-menu-grid-preview/stories @microsoft/teams-prg +packages/react-components/semantic-style-hooks-preview/library @microsoft/xc-uxe +packages/react-components/semantic-style-hooks-preview/stories @microsoft/xc-uxe # <%= NX-CODEOWNER-PLACEHOLDER %> ## Components diff --git a/change/@fluentui-semantic-style-hooks-preview-2fefb723-8232-43c0-aa3f-417c55d0949a.json b/change/@fluentui-semantic-style-hooks-preview-2fefb723-8232-43c0-aa3f-417c55d0949a.json new file mode 100644 index 00000000000000..440c1dc64fd1ac --- /dev/null +++ b/change/@fluentui-semantic-style-hooks-preview-2fefb723-8232-43c0-aa3f-417c55d0949a.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Implement semantic style hooks framework", + "packageName": "@fluentui/semantic-style-hooks-preview", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-semantic-tokens-ab69ccc6-b777-4bb6-909a-c406cc6406d2.json b/change/@fluentui-semantic-tokens-ab69ccc6-b777-4bb6-909a-c406cc6406d2.json new file mode 100644 index 00000000000000..58168853267ce8 --- /dev/null +++ b/change/@fluentui-semantic-tokens-ab69ccc6-b777-4bb6-909a-c406cc6406d2.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat: Initial semantic token package scaffolding", + "packageName": "@fluentui/semantic-tokens", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/nx.json b/nx.json index f81e1f589f7ac7..9620d453ccae7a 100644 --- a/nx.json +++ b/nx.json @@ -144,6 +144,7 @@ "scripts/**/*", "packages/eslint-plugin/**", "packages/tokens/**", + "packages/semantic-tokens/**", "packages/react-conformance/**", "packages/react-components/**/*", "packages/charts/react-charts/**/*" diff --git a/packages/react-components/semantic-style-hooks-preview/library/.babelrc.json b/packages/react-components/semantic-style-hooks-preview/library/.babelrc.json new file mode 100644 index 00000000000000..630deaf765c49f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/.babelrc.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../.babelrc-v9.json", + "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] +} diff --git a/packages/react-components/semantic-style-hooks-preview/library/.eslintrc.json b/packages/react-components/semantic-style-hooks-preview/library/.eslintrc.json new file mode 100644 index 00000000000000..ceea884c70dccc --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/.eslintrc.json @@ -0,0 +1,4 @@ +{ + "extends": ["plugin:@fluentui/eslint-plugin/react"], + "root": true +} diff --git a/packages/react-components/semantic-style-hooks-preview/library/.swcrc b/packages/react-components/semantic-style-hooks-preview/library/.swcrc new file mode 100644 index 00000000000000..b4ffa86dee3067 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/.swcrc @@ -0,0 +1,30 @@ +{ + "$schema": "https://json.schemastore.org/swcrc", + "exclude": [ + "/testing", + "/**/*.cy.ts", + "/**/*.cy.tsx", + "/**/*.spec.ts", + "/**/*.spec.tsx", + "/**/*.test.ts", + "/**/*.test.tsx" + ], + "jsc": { + "parser": { + "syntax": "typescript", + "tsx": true, + "decorators": false, + "dynamicImport": false + }, + "externalHelpers": true, + "transform": { + "react": { + "runtime": "classic", + "useSpread": true + } + }, + "target": "es2019" + }, + "minify": false, + "sourceMaps": true +} diff --git a/packages/react-components/semantic-style-hooks-preview/library/LICENSE b/packages/react-components/semantic-style-hooks-preview/library/LICENSE new file mode 100644 index 00000000000000..ba9922bffd0382 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/LICENSE @@ -0,0 +1,15 @@ +@fluentui/semantic-style-hooks-preview + +Copyright (c) Microsoft Corporation + +All rights reserved. + +MIT License + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED _AS IS_, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-components/semantic-style-hooks-preview/library/README.md b/packages/react-components/semantic-style-hooks-preview/library/README.md new file mode 100644 index 00000000000000..22a3a83d39656c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/README.md @@ -0,0 +1,44 @@ +# @fluentui/semantic-style-hooks-preview + +WARNING: Semantic tokens and their style hooks are undergoing rapid transformation as we prepare to build out AI adjacent design systems - we expect many breaking changes to occur in this preview release to the token names, however the overall structure and fallback implementation should remain consistent. + +**Semantic Style Hooks components for [Fluent UI React](https://react.fluentui.dev/)** + +These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. + +** Semantic Token Migration Guide ** + +This package exports custom style hooks (see https://react.fluentui.dev/?path=/docs/concepts-developer-advanced-styling-techniques--docs) that enable semantic tokens (@fluentui/semantic-tokens) usage in Fluent core component styles. + +The SEMANTIC_STYLE_HOOKS object can be directly passed in to the FluentProvider: + +``` +import { SEMANTIC_STYLE_HOOKS } from '@fluentui/semantic-style-hooks-preview'; + + + {// app code} + +``` + +If no FluentProvider is present, the CustomStyleHooksProvider can be used directly: + +``` +import { CustomStyleHooksProvider_unstable as CustomStyleHooksProvider } from '@fluentui/react-shared-contexts'; +import { SEMANTIC_STYLE_HOOKS } from '@fluentui/semantic-style-hooks-preview'; + + + {// app code} + +``` + +You can also opt in to specific component semantic styles via the flat exports for further scoping - if you use custom style hooks in your app already, we recommend calling these functions at the top of existing style hooks instead. + +Legacy themes and tokens will continue to work once enabled thanks to the CSSVar fallback system - feel free to continue using existing token themes and optionally add semantic token values as we build out more tooling to assist with the generation of semantic token themes in the future. + +** Bundle Size ** + +Please note, that the bundle size of these style hooks has not yet been optimized, as this package serves as an intermediate step until semantic tokens are stabilized and can be merged in the underlying styles files of each component. + +** Deprecation Plan ** + +Once semantic tokens have been tested, stabilized, and confirmed backwards compatible, they will be optimized and enabled in the base component packages by default. At this point, the semantic style hooks package will be deprecated - please use this package to test and raise any issues prior to enable a smooth transition. diff --git a/packages/react-components/semantic-style-hooks-preview/library/config/api-extractor.json b/packages/react-components/semantic-style-hooks-preview/library/config/api-extractor.json new file mode 100644 index 00000000000000..8d482156d10d53 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/config/api-extractor.json @@ -0,0 +1,5 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "@fluentui/scripts-api-extractor/api-extractor.common.v-next.json", + "mainEntryPointFilePath": "/../../../../../../dist/out-tsc/types/packages/react-components//library/src/index.d.ts" +} diff --git a/packages/react-components/semantic-style-hooks-preview/library/config/tests.js b/packages/react-components/semantic-style-hooks-preview/library/config/tests.js new file mode 100644 index 00000000000000..2e211ae9e21420 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/config/tests.js @@ -0,0 +1 @@ +/** Jest test setup file. */ diff --git a/packages/react-components/semantic-style-hooks-preview/library/docs/Spec.md b/packages/react-components/semantic-style-hooks-preview/library/docs/Spec.md new file mode 100644 index 00000000000000..b0bbe7444a92df --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/docs/Spec.md @@ -0,0 +1,63 @@ +# @fluentui/semantic-style-hooks-preview Spec + +## Background + +_Description and use cases of this component_ + +## Prior Art + +_Include background research done for this component_ + +- _Link to Open UI research_ +- _Link to comparison of v7 and v0_ +- _Link to GitHub epic issue for the converged component_ + +## Sample Code + +_Provide some representative example code that uses the proposed API for the component_ + +## Variants + +_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._ + +## API + +_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_ + +## Structure + +- _**Public**_ +- _**Internal**_ +- _**DOM** - how the component will be rendered as HTML elements_ + +## Migration + +_Describe what will need to be done to upgrade from the existing implementations:_ + +- _Migration from v8_ +- _Migration from v0_ + +## Behaviors + +_Explain how the component will behave in use, including:_ + +- _Component States_ +- _Interaction_ + - _Keyboard_ + - _Cursor_ + - _Touch_ + - _Screen readers_ + +## Accessibility + +Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document. + +- Decide whether to use **native element** or folow **ARIA** and provide reasons +- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible. +- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props. +- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used +- Specify texts for **state change announcements** - [ARIA live regions + ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...) +- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them +- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation) +- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases) 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 new file mode 100644 index 00000000000000..e2f33eaa620119 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -0,0 +1,425 @@ +## API Report File for "@fluentui/semantic-style-hooks-preview" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { AccordionHeaderState } from '@fluentui/react-accordion'; +import { AvatarState } from '@fluentui/react-avatar'; +import { BadgeState } from '@fluentui/react-badge'; +import { BreadcrumbButtonState } from '@fluentui/react-breadcrumb'; +import { BreadcrumbDividerState } from '@fluentui/react-breadcrumb'; +import { BreadcrumbItemState } from '@fluentui/react-breadcrumb'; +import { BreadcrumbState } from '@fluentui/react-breadcrumb'; +import { ButtonState } from '@fluentui/react-button'; +import { CheckboxState } from '@fluentui/react-checkbox'; +import { CompoundButtonState } from '@fluentui/react-button'; +import { DataGridBodyState } from '@fluentui/react-table'; +import { DataGridCellState } from '@fluentui/react-table'; +import { DataGridHeaderCellState } from '@fluentui/react-table'; +import { DataGridHeaderState } from '@fluentui/react-table'; +import { DataGridRowState } from '@fluentui/react-table'; +import { DataGridSelectionCellState } from '@fluentui/react-table'; +import { DataGridState } from '@fluentui/react-table'; +import { DialogActionsState } from '@fluentui/react-dialog'; +import { DialogBodyState } from '@fluentui/react-dialog'; +import { DialogContentState } from '@fluentui/react-dialog'; +import { DialogSurfaceState } from '@fluentui/react-dialog'; +import { DialogTitleState } from '@fluentui/react-dialog'; +import { DividerState } from '@fluentui/react-divider'; +import type { DrawerBodyState } from '@fluentui/react-drawer'; +import { DrawerFooterState } from '@fluentui/react-drawer'; +import { DrawerHeaderState } from '@fluentui/react-drawer'; +import { FieldState } from '@fluentui/react-field'; +import { FlatTreeState } from '@fluentui/react-tree'; +import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider'; +import { ImageState } from '@fluentui/react-image'; +import { InfoButtonState } from '@fluentui/react-infolabel'; +import { InfoLabelState } from '@fluentui/react-infolabel'; +import { InlineDrawerState } from '@fluentui/react-drawer'; +import { InputState } from '@fluentui/react-input'; +import { LabelState } from '@fluentui/react-label'; +import { LinkState } from '@fluentui/react-link'; +import { ListItemState } from '@fluentui/react-list'; +import { MenuButtonState } from '@fluentui/react-button'; +import { MenuDividerState } from '@fluentui/react-menu'; +import { MenuGroupHeaderState } from '@fluentui/react-menu'; +import { MenuItemState } from '@fluentui/react-menu'; +import { MenuItemSwitchState } from '@fluentui/react-menu'; +import { MenuPopoverState } from '@fluentui/react-menu'; +import { MenuSplitGroupState } from '@fluentui/react-menu'; +import { MessageBarActionsState } from '@fluentui/react-message-bar'; +import { MessageBarBodyState } from '@fluentui/react-message-bar'; +import { MessageBarState } from '@fluentui/react-message-bar'; +import { MessageBarTitleState } from '@fluentui/react-message-bar'; +import { PersonaState } from '@fluentui/react-persona'; +import { PresenceBadgeState } from '@fluentui/react-badge'; +import { ProgressBarState } from '@fluentui/react-progress'; +import { RadioState } from '@fluentui/react-radio'; +import { RatingDisplayState } from '@fluentui/react-rating'; +import { RatingItemState } from '@fluentui/react-rating'; +import { SearchBoxState } from '@fluentui/react-search'; +import { SliderState } from '@fluentui/react-slider'; +import { SpinButtonState } from '@fluentui/react-spinbutton'; +import { SpinnerState } from '@fluentui/react-spinner'; +import { SplitButtonState } from '@fluentui/react-button'; +import { SwitchState } from '@fluentui/react-switch'; +import { TableBodyState } from '@fluentui/react-table'; +import { TableCellActionsState } from '@fluentui/react-table'; +import { TableCellLayoutState } from '@fluentui/react-table'; +import { TableCellState } from '@fluentui/react-table'; +import { TableHeaderCellState } from '@fluentui/react-table'; +import { TableHeaderState } from '@fluentui/react-table'; +import { TableResizeHandleState } from '@fluentui/react-table'; +import { TableRowState } from '@fluentui/react-table'; +import { TableSelectionCellState } from '@fluentui/react-table'; +import { TableState } from '@fluentui/react-table'; +import { TabListState } from '@fluentui/react-tabs'; +import { TabState } from '@fluentui/react-tabs'; +import { TeachingPopoverBodyState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselCardState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselFooterButtonState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselFooterState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselNavButtonState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselNavState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselPageCountState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverFooterState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverHeaderState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverSurfaceState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverTitleState } from '@fluentui/react-teaching-popover'; +import { TextareaState } from '@fluentui/react-textarea'; +import { TextState } from '@fluentui/react-text'; +import { ToastBodyState } from '@fluentui/react-toast'; +import { ToastContainerState } from '@fluentui/react-toast'; +import { ToastFooterState } from '@fluentui/react-toast'; +import { ToastState } from '@fluentui/react-toast'; +import { ToastTitleState } from '@fluentui/react-toast'; +import { ToggleButtonState } from '@fluentui/react-button'; +import { ToolbarDividerState } from '@fluentui/react-toolbar'; +import { ToolbarGroupState } from '@fluentui/react-toolbar'; +import { ToolbarRadioButtonState } from '@fluentui/react-toolbar'; +import { ToolbarState } from '@fluentui/react-toolbar'; +import { ToolbarToggleButtonState } from '@fluentui/react-toolbar'; +import { TreeItemLayoutState } from '@fluentui/react-tree'; +import { TreeItemState } from '@fluentui/react-tree'; +import { TreeState } from '@fluentui/react-tree'; + +// @public (undocumented) +export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks; + +// @public +export const useSemanticAccordionHeaderStyles: (_state: unknown) => AccordionHeaderState; + +// @public (undocumented) +export const useSemanticAvatarStyles: (_state: unknown) => AvatarState; + +// @public +export const useSemanticBadgeStyles: (_state: unknown) => BadgeState; + +// @public +export const useSemanticBreadcrumbButtonStyles: (_state: unknown) => BreadcrumbButtonState; + +// @public +export const useSemanticBreadcrumbDividerStyles: (_state: unknown) => BreadcrumbDividerState; + +// @public +export const useSemanticBreadcrumbItemStyles: (_state: unknown) => BreadcrumbItemState; + +// @public +export const useSemanticBreadcrumbStyles: (_state: unknown) => BreadcrumbState; + +// @public (undocumented) +export const useSemanticButtonStyles: (_state: unknown) => ButtonState; + +// @public +export const useSemanticCheckboxStyles: (_state: unknown) => CheckboxState; + +// @public (undocumented) +export const useSemanticCompoundButtonStyles: (_state: unknown) => CompoundButtonState; + +// @public +export const useSemanticDataGridBodyStyles: (_state: unknown) => DataGridBodyState; + +// @public +export const useSemanticDataGridCellStyles: (_state: unknown) => DataGridCellState; + +// @public +export const useSemanticDataGridHeaderCellStyles: (_state: unknown) => DataGridHeaderCellState; + +// @public +export const useSemanticDataGridHeaderStyles: (_state: unknown) => DataGridHeaderState; + +// @public +export const useSemanticDataGridRowStyles: (_state: unknown) => DataGridRowState; + +// @public +export const useSemanticDataGridSelectionCellStyles: (_state: unknown) => DataGridSelectionCellState; + +// @public +export const useSemanticDataGridStyles: (_state: unknown) => DataGridState; + +// @public +export const useSemanticDialogActionsStyles: (_state: unknown) => DialogActionsState; + +// @public +export const useSemanticDialogBodyStyles: (_state: unknown) => DialogBodyState; + +// @public +export const useSemanticDialogContentStyles: (_state: unknown) => DialogContentState; + +// @public +export const useSemanticDialogSurfaceStyles: (_state: unknown) => DialogSurfaceState; + +// @public +export const useSemanticDialogTitleStyles: (_state: unknown) => DialogTitleState; + +// @public (undocumented) +export const useSemanticDividerStyles: (_state: unknown) => DividerState; + +// @public +export const useSemanticDrawerBodyStyles: (_state: unknown) => DrawerBodyState; + +// @public +export const useSemanticDrawerFooterStyles: (_state: unknown) => DrawerFooterState; + +// @public +export const useSemanticDrawerHeaderStyles: (_state: unknown) => DrawerHeaderState; + +// @public +export const useSemanticFieldStyles: (_state: unknown) => FieldState; + +// @public (undocumented) +export const useSemanticFlatTreeStyles: (_state: unknown) => FlatTreeState; + +// @public (undocumented) +export const useSemanticImageStyles: (_state: unknown) => ImageState; + +// @public +export const useSemanticInfoButtonStyles: (_state: unknown) => InfoButtonState; + +// @public +export const useSemanticInfoLabelStyles: (_state: unknown) => InfoLabelState; + +// @public +export const useSemanticInlineDrawerStyles: (_state: unknown) => InlineDrawerState; + +// @public +export const useSemanticInputStyles: (_state: unknown) => InputState; + +// @public +export const useSemanticLabelStyles: (_state: unknown) => LabelState; + +// @public (undocumented) +export const useSemanticLinkStyles: (_state: unknown) => LinkState; + +// @public +export const useSemanticListItemStyles: (_state: unknown) => ListItemState; + +// @public (undocumented) +export const useSemanticMenuButtonStyles: (_state: unknown) => MenuButtonState; + +// @public (undocumented) +export const useSemanticMenuDividerStyles: (_state: unknown) => MenuDividerState; + +// @public (undocumented) +export const useSemanticMenuGroupHeaderStyles: (_state: unknown) => MenuGroupHeaderState; + +// @public +export const useSemanticMenuItemStyles: (_state: unknown) => MenuItemState; + +// @public +export const useSemanticMenuItemSwitchStyles: (_state: unknown) => MenuItemSwitchState; + +// @public +export const useSemanticMenuPopoverStyles: (_state: unknown) => MenuPopoverState; + +// @public +export const useSemanticMenuSplitGroupStyles: (_state: unknown) => MenuSplitGroupState; + +// @public +export const useSemanticMessageBarActionsStyles: (_state: unknown) => MessageBarActionsState; + +// @public +export const useSemanticMessageBarBodyStyles: (_state: unknown) => MessageBarBodyState; + +// @public +export const useSemanticMessageBarStyles: (_state: unknown) => MessageBarState; + +// @public +export const useSemanticMessageBarTitleStyles: (_state: unknown) => MessageBarTitleState; + +// @public +export const useSemanticOverlayDrawerSurfaceStyles: (_state: unknown) => DialogSurfaceState; + +// @public +export const useSemanticPersonaStyles: (_state: unknown) => PersonaState; + +// @public +export const useSemanticPresenceBadgeStyles: (_state: unknown) => PresenceBadgeState; + +// @public +export const useSemanticProgressBarStyles: (_state: unknown) => ProgressBarState; + +// @public +export const useSemanticRadioStyles: (_state: unknown) => RadioState; + +// @public +export const useSemanticRatingDisplayStyles: (_state: unknown) => RatingDisplayState; + +// @public +export const useSemanticRatingItemStyles: (_state: unknown) => RatingItemState; + +// @public +export const useSemanticSearchBoxStyles: (_state: unknown) => SearchBoxState; + +// @public +export const useSemanticSliderStyles: (_state: unknown) => SliderState; + +// @public +export const useSemanticSpinButtonStyles: (_state: unknown) => SpinButtonState; + +// @public +export const useSemanticSpinnerStyles: (_state: unknown) => SpinnerState; + +// @public (undocumented) +export const useSemanticSplitButtonStyles: (_state: unknown) => SplitButtonState; + +// @public +export const useSemanticSwitchStyles: (_state: unknown) => SwitchState; + +// @public +export const useSemanticTabButtonStyles_unstable: (state: TabState, slot: TabState["root"]) => TabState; + +// @public +export const useSemanticTabContentStyles_unstable: (state: TabState) => TabState; + +// @public +export const useSemanticTabIndicatorStyles_unstable: (state: TabState) => TabState; + +// @public +export const useSemanticTableBodyStyles: (_state: unknown) => TableBodyState; + +// @public +export const useSemanticTableCellActionsStyles: (_state: unknown) => TableCellActionsState; + +// @public +export const useSemanticTableCellLayoutStyles: (_state: unknown) => TableCellLayoutState; + +// @public +export const useSemanticTableCellStyles: (_state: unknown) => TableCellState; + +// @public +export const useSemanticTableHeaderCellStyles: (_state: unknown) => TableHeaderCellState; + +// @public +export const useSemanticTableHeaderStyles: (_state: unknown) => TableHeaderState; + +// @public +export const useSemanticTableResizeHandleStyles: (_state: unknown) => TableResizeHandleState; + +// @public +export const useSemanticTableRowStyles: (_state: unknown) => TableRowState; + +// @public +export const useSemanticTableSelectionCellStyles: (_state: unknown) => TableSelectionCellState; + +// @public +export const useSemanticTableStyles: (_state: unknown) => TableState; + +// @public +export const useSemanticTabListStyles: (_state: unknown) => TabListState; + +// @public +export const useSemanticTabStyles: (_state: unknown) => TabState; + +// @public +export const useSemanticTeachingPopoverBodyStyles: (_state: unknown) => TeachingPopoverBodyState; + +// @public +export const useSemanticTeachingPopoverCarouselCardStyles: (_state: unknown) => TeachingPopoverCarouselCardState; + +// @public +export const useSemanticTeachingPopoverCarouselFooterButtonStyles: (_state: unknown) => TeachingPopoverCarouselFooterButtonState; + +// @public +export const useSemanticTeachingPopoverCarouselFooterStyles: (_state: unknown) => TeachingPopoverCarouselFooterState; + +// @public +export const useSemanticTeachingPopoverCarouselNavButtonStyles: (_state: unknown) => TeachingPopoverCarouselNavButtonState; + +// @public +export const useSemanticTeachingPopoverCarouselNavStyles: (_state: unknown) => TeachingPopoverCarouselNavState; + +// @public +export const useSemanticTeachingPopoverCarouselPageCountStyles: (_state: unknown) => TeachingPopoverCarouselPageCountState; + +// @public +export const useSemanticTeachingPopoverCarouselStyles: (_state: unknown) => TeachingPopoverCarouselState; + +// @public +export const useSemanticTeachingPopoverFooterStyles: (_state: unknown) => TeachingPopoverFooterState; + +// @public +export const useSemanticTeachingPopoverHeaderStyles: (_state: unknown) => TeachingPopoverHeaderState; + +// @public +export const useSemanticTeachingPopoverSurfaceStyles: (_state: unknown) => TeachingPopoverSurfaceState; + +// @public +export const useSemanticTeachingPopoverTitleStyles: (_state: unknown) => TeachingPopoverTitleState; + +// @public +export const useSemanticTextareaStyles: (_state: unknown) => TextareaState; + +// @public +export const useSemanticTextStyles: (_state: unknown) => TextState; + +// @public +export const useSemanticToastBodyStyles: (_state: unknown) => ToastBodyState; + +// @public +export const useSemanticToastContainerStyles: (_state: unknown) => ToastContainerState; + +// @public +export const useSemanticToastFooterStyles: (_state: unknown) => ToastFooterState; + +// @public +export const useSemanticToastStyles: (_state: unknown) => ToastState; + +// @public +export const useSemanticToastTitleStyles: (_state: unknown) => ToastTitleState; + +// @public (undocumented) +export const useSemanticToggleButtonStyles: (_state: unknown) => ToggleButtonState; + +// @public +export const useSemanticToolbarButtonStyles: (_state: unknown) => void; + +// @public +export const useSemanticToolbarDividerStyles: (_state: unknown) => ToolbarDividerState; + +// @public +export const useSemanticToolbarGroupStyles: (_state: unknown) => ToolbarGroupState; + +// @public +export const useSemanticToolbarRadioButtonStyles: (_state: unknown) => ToolbarRadioButtonState; + +// @public +export const useSemanticToolbarStyles: (_state: unknown) => ToolbarState; + +// @public +export const useSemanticToolbarToggleButtonStyles: (_state: unknown) => ToolbarToggleButtonState; + +// @public +export const useSemanticTreeItemLayoutStyles: (_state: unknown) => TreeItemLayoutState; + +// @public +export const useSemanticTreeItemStyles: (_state: unknown) => TreeItemState; + +// @public (undocumented) +export const useSemanticTreeStyles: (_state: unknown) => TreeState; + +// (No @packageDocumentation comment for this package) + +``` diff --git a/packages/react-components/semantic-style-hooks-preview/library/jest.config.js b/packages/react-components/semantic-style-hooks-preview/library/jest.config.js new file mode 100644 index 00000000000000..d4681dc8a030c0 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/jest.config.js @@ -0,0 +1,34 @@ +// @ts-check +/* eslint-disable */ + +const { readFileSync } = require('node:fs'); +const { join } = require('node:path'); + +// Reading the SWC compilation config and remove the "exclude" +// for the test files to be compiled by SWC +const { exclude: _, ...swcJestConfig } = JSON.parse(readFileSync(join(__dirname, '.swcrc'), 'utf-8')); + +// disable .swcrc look-up by SWC core because we're passing in swcJestConfig ourselves. +// If we do not disable this, SWC Core will read .swcrc and won't transform our test files due to "exclude" +if (swcJestConfig.swcrc === undefined) { + swcJestConfig.swcrc = false; +} + +// Uncomment if using global setup/teardown files being transformed via swc +// https://nx.dev/packages/jest/documents/overview#global-setup/teardown-with-nx-libraries +// jest needs EsModule Interop to find the default exported setup/teardown functions +// swcJestConfig.module.noInterop = false; + +/** + * @type {import('@jest/types').Config.InitialOptions} + */ +module.exports = { + displayName: 'semantic-style-hooks-preview', + preset: '../../../../jest.preset.js', + transform: { + '^.+\\.tsx?$': ['@swc/jest', swcJestConfig], + }, + coverageDirectory: './coverage', + setupFilesAfterEnv: ['./config/tests.js'], + snapshotSerializers: ['@griffel/jest-serializer'], +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json new file mode 100644 index 00000000000000..65124edb5605bf --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -0,0 +1,98 @@ +{ + "name": "@fluentui/semantic-style-hooks-preview", + "version": "0.0.0", + "description": "New fluentui react package", + "main": "lib-commonjs/index.js", + "module": "lib/index.js", + "typings": "./dist/index.d.ts", + "sideEffects": false, + "files": [ + "*.md", + "dist/*.d.ts", + "lib", + "lib-commonjs" + ], + "repository": { + "type": "git", + "url": "https://github.com/microsoft/fluentui" + }, + "license": "MIT", + "devDependencies": { + "@fluentui/eslint-plugin": "*", + "@fluentui/react-conformance": "*", + "@fluentui/react-conformance-griffel": "*", + "@fluentui/scripts-api-extractor": "*" + }, + "dependencies": { + "@fluentui/react-accordion": "^9.6.8", + "@fluentui/react-avatar": "^9.7.6", + "@fluentui/react-badge": "^9.2.54", + "@fluentui/react-breadcrumb": "^9.1.6", + "@fluentui/react-button": "^9.4.6", + "@fluentui/react-checkbox": "^9.3.6", + "@fluentui/react-dialog": "^9.12.8", + "@fluentui/react-divider": "^9.2.86", + "@fluentui/react-drawer": "^9.7.8", + "@fluentui/react-field": "^9.2.6", + "@fluentui/react-input": "^9.5.6", + "@fluentui/react-icons": "^2.0.245", + "@fluentui/react-image": "^9.1.84", + "@fluentui/react-infolabel": "^9.2.0", + "@fluentui/react-jsx-runtime": "^9.0.54", + "@fluentui/react-label": "^9.1.87", + "@fluentui/react-link": "^9.4.6", + "@fluentui/react-list": "^9.1.6", + "@fluentui/react-motion": "^9.7.2", + "@fluentui/react-menu": "^9.16.6", + "@fluentui/react-message-bar": "^9.4.7", + "@fluentui/react-positioning": "^9.16.7", + "@fluentui/react-persona": "^9.3.6", + "@fluentui/react-popover": "^9.10.6", + "@fluentui/react-progress": "^9.2.6", + "@fluentui/react-provider": "^9.20.6", + "@fluentui/react-radio": "^9.3.6", + "@fluentui/react-rating": "^9.1.6", + "@fluentui/react-search": "^9.1.6", + "@fluentui/react-shared-contexts": "^9.23.1", + "@fluentui/react-slider": "^9.3.7", + "@fluentui/react-spinbutton": "^9.3.6", + "@fluentui/react-spinner": "^9.5.11", + "@fluentui/react-switch": "^9.2.6", + "@fluentui/react-table": "^9.16.6", + "@fluentui/react-tabs": "^9.7.6", + "@fluentui/react-tabster": "^9.24.6", + "@fluentui/react-teaching-popover": "^9.4.5", + "@fluentui/react-text": "^9.4.36", + "@fluentui/react-textarea": "^9.4.6", + "@fluentui/react-theme": "^9.1.24", + "@fluentui/react-toast": "^9.4.8", + "@fluentui/react-toolbar": "^9.4.5", + "@fluentui/react-tooltip": "^9.6.6", + "@fluentui/react-tree": "^9.10.9", + "@fluentui/react-utilities": "^9.19.0", + "@fluentui/semantic-tokens": "^0.0.1", + "@griffel/react": "^1.5.22", + "@swc/helpers": "^0.5.1" + }, + "peerDependencies": { + "@types/react": ">=16.14.0 <19.0.0", + "@types/react-dom": ">=16.9.0 <19.0.0", + "react": ">=16.14.0 <19.0.0", + "react-dom": ">=16.14.0 <19.0.0" + }, + "exports": { + ".": { + "types": "./dist/index.d.ts", + "node": "./lib-commonjs/index.js", + "import": "./lib/index.js", + "require": "./lib-commonjs/index.js" + }, + "./package.json": "./package.json" + }, + "beachball": { + "disallowedChangeTypes": [ + "major", + "prerelease" + ] + } +} diff --git a/packages/react-components/semantic-style-hooks-preview/library/project.json b/packages/react-components/semantic-style-hooks-preview/library/project.json new file mode 100644 index 00000000000000..40d7448b534919 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/project.json @@ -0,0 +1,8 @@ +{ + "name": "semantic-style-hooks-preview", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "sourceRoot": "packages/react-components/semantic-style-hooks-preview/library/src", + "tags": ["platform:web", "vNext"], + "implicitDependencies": [] +} diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Accordion/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Accordion/index.ts new file mode 100644 index 00000000000000..c45968b9876de8 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Accordion/index.ts @@ -0,0 +1 @@ +export { useSemanticAccordionHeaderStyles } from './useSemanticAccordionHeaderStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Accordion/useSemanticAccordionHeaderStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Accordion/useSemanticAccordionHeaderStyles.styles.ts new file mode 100644 index 00000000000000..d8bf14efef9034 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Accordion/useSemanticAccordionHeaderStyles.styles.ts @@ -0,0 +1,185 @@ +import { shorthands, makeStyles, mergeClasses } from '@griffel/react'; +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { accordionHeaderClassNames, type AccordionHeaderState } from '@fluentui/react-accordion'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const paddingCtrlHorizontalDefaultNudge = `max(calc(${semanticTokens.paddingCtrlHorizontalDefault} - 2px), 2px)`; + +const useStyles = makeStyles({ + // TODO: this should be extracted to another package + resetButton: { + boxSizing: 'content-box', + backgroundColor: 'inherit', + color: 'inherit', + fontFamily: 'inherit', + fontSize: 'inherit', + lineHeight: 'normal', + overflow: 'visible', + padding: '0', + WebkitAppearance: 'button', + textAlign: 'unset', + }, + focusIndicator: createFocusOutlineStyle({ + style: { + outlineRadius: semanticTokens.ctrlListCornerRest, + outlineOffset: semanticTokens._ctrlAccordionFocusInnerStrokeWidth, + outlineColor: semanticTokens._ctrlAccordionFocusOuterStroke, + outlineWidth: semanticTokens.ctrlFocusOuterStrokeWidth, + }, + }), + root: { + color: semanticTokens._ctrlAccordionForegroundRest, + backgroundColor: semanticTokens._ctrlAccordionBackgroundRest, + margin: '0', + borderRadius: semanticTokens.ctrlListCornerRest, + + ':hover': { + color: semanticTokens._ctrlAccordionForegroundHover, + }, + + ':hover:active': { + color: semanticTokens._ctrlAccordionForegroundPressed, + }, + }, + rootDisabled: { + backgroundImage: 'none', + color: semanticTokens.foregroundCtrlOnTransparentDisabled, + }, + rootInline: { + display: 'inline-block', + }, + button: { + position: 'relative', + width: '100%', + ...shorthands.borderWidth('0'), + padding: `${semanticTokens._ctrlAccordionPaddingTextTop} ${semanticTokens.paddingCtrlHorizontalDefault} ${semanticTokens._ctrlAccordionPaddingTextBottom} ${paddingCtrlHorizontalDefaultNudge}`, + minHeight: semanticTokens.sizeCtrlDefault, + display: 'flex', + alignItems: 'center', + cursor: 'pointer', + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, + boxSizing: 'border-box', + }, + buttonSmall: { + minHeight: semanticTokens.sizeCtrlSmDefault, + fontSize: semanticTokens.textGlobalCaption1FontSize, + paddingTop: semanticTokens.paddingCtrlSmTextTop, + paddingBottom: semanticTokens.paddingCtrlSmTextBottom, + }, + buttonLarge: { + minHeight: semanticTokens.sizeCtrlLgDefault, + lineHeight: semanticTokens.textGlobalBody2LineHeight, + fontSize: semanticTokens.textGlobalBody2FontSize, + paddingTop: semanticTokens.paddingCtrlLgTextTop, + paddingBottom: semanticTokens.paddingCtrlLgTextBottom, + }, + buttonExtraLarge: { + minHeight: semanticTokens.sizeCtrlLgDefault, + lineHeight: semanticTokens.textGlobalBody1LineHeight, + fontSize: semanticTokens.textGlobalBody1FontSize, + paddingTop: semanticTokens.paddingCtrlLgTextTop, + paddingBottom: semanticTokens.paddingCtrlLgTextBottom, + }, + buttonInline: { + display: 'inline-flex', + }, + buttonExpandIconEndNoIcon: { + paddingLeft: semanticTokens.paddingCtrlHorizontalDefault, + }, + buttonExpandIconEnd: { + paddingRight: paddingCtrlHorizontalDefaultNudge, + }, + buttonDisabled: { + cursor: 'not-allowed', + }, + expandIcon: { + height: semanticTokens.ctrlChoiceBaseSize, + width: semanticTokens.ctrlChoiceBaseSize, + display: 'flex', + alignItems: 'center', + lineHeight: semanticTokens.textGlobalBody1LineHeight, + fontSize: semanticTokens.sizeCtrlIcon, + '> *': { + height: semanticTokens.sizeCtrlIcon, + width: semanticTokens.sizeCtrlIcon, + }, + }, + expandIconStart: { + paddingRight: semanticTokens.gapInsideCtrlDefault, + }, + expandIconEnd: { + flexGrow: 1, + flexShrink: 1, + flexBasis: '0%', + display: 'flex', + justifyContent: 'flex-end', + paddingLeft: semanticTokens.gapInsideCtrlDefault, + }, + icon: { + height: '100%', + display: 'flex', + alignItems: 'center', + paddingRight: semanticTokens.gapInsideCtrlDefault, + lineHeight: semanticTokens.textGlobalBody1LineHeight, + fontSize: semanticTokens.textGlobalBody1FontSize, + }, +}); + +/** Applies style classnames to slots */ +export const useSemanticAccordionHeaderStyles = (_state: unknown): AccordionHeaderState => { + 'use no memo'; + + const state = _state as AccordionHeaderState; + + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + accordionHeaderClassNames.root, + styles.root, + state.inline && styles.rootInline, + state.disabled && styles.rootDisabled, + getSlotClassNameProp_unstable(state.root), + ); + + state.button.className = mergeClasses( + state.button.className, + accordionHeaderClassNames.button, + styles.resetButton, + styles.button, + styles.focusIndicator, + state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon, + state.expandIconPosition === 'end' && styles.buttonExpandIconEnd, + state.inline && styles.buttonInline, + state.size === 'small' && styles.buttonSmall, + state.size === 'large' && styles.buttonLarge, + state.size === 'extra-large' && styles.buttonExtraLarge, + state.disabled && styles.buttonDisabled, + getSlotClassNameProp_unstable(state.button), + ); + + if (state.expandIcon) { + state.expandIcon.className = mergeClasses( + state.expandIcon.className, + accordionHeaderClassNames.expandIcon, + styles.expandIcon, + state.expandIconPosition === 'start' && styles.expandIconStart, + state.expandIconPosition === 'end' && styles.expandIconEnd, + getSlotClassNameProp_unstable(state.expandIcon), + ); + } + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + accordionHeaderClassNames.icon, + styles.icon, + getSlotClassNameProp_unstable(state.icon), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Avatar/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Avatar/index.ts new file mode 100644 index 00000000000000..fa4d8569fb8d58 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Avatar/index.ts @@ -0,0 +1 @@ +export { useSemanticAvatarStyles } from './useSemanticAvatarStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Avatar/useSemanticAvatarStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Avatar/useSemanticAvatarStyles.styles.ts new file mode 100644 index 00000000000000..21c4066653dcb3 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Avatar/useSemanticAvatarStyles.styles.ts @@ -0,0 +1,625 @@ +import { tokens } from '@fluentui/react-theme'; +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { avatarClassNames, type AvatarState } from '@fluentui/react-avatar'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +// CSS variables used internally in Avatar's styles +const vars = { + badgeRadius: '--fui-Avatar-badgeRadius', + badgeGap: '--fui-Avatar-badgeGap', + badgeAlign: '--fui-Avatar-badgeAlign', + ringWidth: '--fui-Avatar-ringWidth', +}; + +const useRootClassName = makeResetStyles({ + display: 'inline-block', + flexShrink: 0, + position: 'relative', + verticalAlign: 'middle', + borderRadius: semanticTokens.ctrlAvatarCornerItem, + fontFamily: semanticTokens.textStyleDefaultHeaderFontFamily, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + fontSize: semanticTokens.ctrlAvatarTextFontSize, + width: semanticTokens.ctrlAvatarSize, + height: semanticTokens.ctrlAvatarSize, + + // ::before is the ring, and ::after is the shadow. + // These are not displayed by default; the ring and shadow classes set content: "" to display them when appropriate. + '::before,::after': { + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + zIndex: -1, + margin: `calc(-2 * var(${vars.ringWidth}, 0px))`, + borderRadius: 'inherit', + transitionProperty: 'margin, opacity', + transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`, + transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`, + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + }, + }, + '::before': { + borderStyle: 'solid', + borderWidth: `var(${vars.ringWidth})`, + }, +}); + +const useImageClassName = makeResetStyles({ + position: 'absolute', + top: 0, + left: 0, + width: '100%', + height: '100%', + + borderRadius: 'inherit', + objectFit: 'cover', + verticalAlign: 'top', +}); + +const useIconInitialsClassName = makeResetStyles({ + position: 'absolute', + boxSizing: 'border-box', + top: 0, + left: 0, + width: '100%', + height: '100%', + lineHeight: semanticTokens.ctrlAvatarTextLineHeight, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeLayer}`, + + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + verticalAlign: 'center', + textAlign: 'center', + userSelect: 'none', + borderRadius: 'inherit', +}); + +/** + * Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`. + * This creates a transparent gap between the badge and Avatar. + * + * Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element. + */ +const badgeMask = (margin?: string) => { + // Center the cutout at the badge's radius away from the edge. + // The ring (::before) also has a 2 * ringWidth margin that also needs to be offset. + const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`; + // radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px + // to "fade" from transparent to opaque over a half-pixel and ease the transition. + const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`; + const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`; + + return ( + `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + + `transparent ${innerRadius}, ${semanticTokens.ctrlAvatarPresenceBadgeBackgroundBehindBadge} ${outerRadius})` + ); +}; + +const useStyles = makeStyles({ + textCaption2Strong: { fontSize: semanticTokens.textGlobalCaption2FontSize }, + textCaption1Strong: { fontSize: semanticTokens.textGlobalCaption1FontSize }, + textSubtitle2: { fontSize: semanticTokens.textGlobalBody2FontSize }, + textSubtitle1: { fontSize: semanticTokens.textGlobalBody1FontSize }, + textTitle3: { fontSize: semanticTokens.textGlobalSubtitle2FontSize }, + + squareSmall: { borderRadius: semanticTokens._ctrlAvatarCornerGroupSm }, + squareMedium: { borderRadius: semanticTokens._ctrlAvatarCornerGroupMd }, + squareLarge: { borderRadius: semanticTokens._ctrlAvatarCornerGroupLg }, + squareXLarge: { borderRadius: semanticTokens._ctrlAvatarCornerGroupXLg }, + + activeOrInactive: { + transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation + transitionProperty: 'transform, opacity', + transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`, + transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`, + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + }, + }, + + ring: { + // Show the ::before pseudo-element, which is the ring + '::before': { content: '""' }, + }, + ringBadgeCutout: { + '::before': { maskImage: badgeMask(/*margin =*/ `2 * var(${vars.ringWidth})`) }, + }, + ringThick: { + [vars.ringWidth]: semanticTokens._ctrlAvatarActiveRingStrokeWidthSm, + }, + ringThicker: { + [vars.ringWidth]: semanticTokens._ctrlAvatarActiveRingStrokeWidthMd, + }, + ringThickest: { + [vars.ringWidth]: semanticTokens._ctrlAvatarActiveRingStrokeWidthLg, + }, + + shadow: { + // Show the ::after pseudo-element, which is the shadow + '::after': { content: '""' }, + }, + shadow4: { + '::after': { boxShadow: tokens.shadow4 }, + }, + shadow8: { + '::after': { boxShadow: tokens.shadow8 }, + }, + shadow16: { + '::after': { boxShadow: tokens.shadow16 }, + }, + shadow28: { + '::after': { boxShadow: tokens.shadow28 }, + }, + + inactive: { + opacity: '0.8', + transform: 'scale(0.875)', + transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`, + + '::before,::after': { + margin: 0, + opacity: 0, + transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`, + }, + }, + + // Applied to the badge slot + badge: { + position: 'absolute', + bottom: 0, + right: 0, + }, + + // Applied to the image, initials, or icon slot when there is a badge + badgeCutout: { + maskImage: badgeMask(), + }, + + // Applied to the root when there is a badge + badgeAlign: { + // Griffel won't auto-flip the "right" alignment to "left" in RTL if it is inline in the maskImage, + // so split it out into a css variable that will auto-flip. + [vars.badgeAlign]: 'right', + }, + + // Badge size: applied to root when there is a badge + tiny: { + [vars.badgeRadius]: '3px', + [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthSm, + }, + 'extra-small': { + [vars.badgeRadius]: '5px', + [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthSm, + }, + small: { + [vars.badgeRadius]: '6px', + [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthSm, + }, + medium: { + [vars.badgeRadius]: '8px', + [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthSm, + }, + large: { + [vars.badgeRadius]: '10px', + [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthLg, + }, + 'extra-large': { + [vars.badgeRadius]: '14px', + [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthLg, + }, + + icon12: { fontSize: '12px' }, + icon16: { fontSize: '16px' }, + icon20: { fontSize: '20px' }, + icon24: { fontSize: '24px' }, + icon28: { fontSize: '28px' }, + icon32: { fontSize: '32px' }, + icon48: { fontSize: '48px' }, +}); + +export const useSizeStyles = makeStyles({ + 16: { width: '16px', height: '16px' }, + 20: { width: '20px', height: '20px' }, + 24: { width: '24px', height: '24px' }, + 28: { width: '28px', height: '28px' }, + 32: { width: '32px', height: '32px' }, + 36: { width: '36px', height: '36px' }, + 40: { width: '40px', height: '40px' }, + 48: { width: '48px', height: '48px' }, + 56: { width: '56px', height: '56px' }, + 64: { width: '64px', height: '64px' }, + 72: { width: '72px', height: '72px' }, + 96: { width: '96px', height: '96px' }, + 120: { width: '120px', height: '120px' }, + 128: { width: '128px', height: '128px' }, +}); + +const useColorStyles = makeStyles({ + neutral: { + color: semanticTokens.ctrlAvatarForeground, + backgroundColor: semanticTokens.ctrlAvatarBackground, + }, + brand: { + color: tokens.colorNeutralForegroundStaticInverted, + backgroundColor: tokens.colorBrandBackgroundStatic, + }, + 'dark-red': { + color: tokens.colorPaletteDarkRedForeground2, + backgroundColor: tokens.colorPaletteDarkRedBackground2, + }, + cranberry: { + color: tokens.colorPaletteCranberryForeground2, + backgroundColor: tokens.colorPaletteCranberryBackground2, + }, + red: { + color: tokens.colorPaletteRedForeground2, + backgroundColor: tokens.colorPaletteRedBackground2, + }, + pumpkin: { + color: tokens.colorPalettePumpkinForeground2, + backgroundColor: tokens.colorPalettePumpkinBackground2, + }, + peach: { + color: tokens.colorPalettePeachForeground2, + backgroundColor: tokens.colorPalettePeachBackground2, + }, + marigold: { + color: tokens.colorPaletteMarigoldForeground2, + backgroundColor: tokens.colorPaletteMarigoldBackground2, + }, + gold: { + color: tokens.colorPaletteGoldForeground2, + backgroundColor: tokens.colorPaletteGoldBackground2, + }, + brass: { + color: tokens.colorPaletteBrassForeground2, + backgroundColor: tokens.colorPaletteBrassBackground2, + }, + brown: { + color: tokens.colorPaletteBrownForeground2, + backgroundColor: tokens.colorPaletteBrownBackground2, + }, + forest: { + color: tokens.colorPaletteForestForeground2, + backgroundColor: tokens.colorPaletteForestBackground2, + }, + seafoam: { + color: tokens.colorPaletteSeafoamForeground2, + backgroundColor: tokens.colorPaletteSeafoamBackground2, + }, + 'dark-green': { + color: tokens.colorPaletteDarkGreenForeground2, + backgroundColor: tokens.colorPaletteDarkGreenBackground2, + }, + 'light-teal': { + color: tokens.colorPaletteLightTealForeground2, + backgroundColor: tokens.colorPaletteLightTealBackground2, + }, + teal: { + color: tokens.colorPaletteTealForeground2, + backgroundColor: tokens.colorPaletteTealBackground2, + }, + steel: { + color: tokens.colorPaletteSteelForeground2, + backgroundColor: tokens.colorPaletteSteelBackground2, + }, + blue: { + color: tokens.colorPaletteBlueForeground2, + backgroundColor: tokens.colorPaletteBlueBackground2, + }, + 'royal-blue': { + color: tokens.colorPaletteRoyalBlueForeground2, + backgroundColor: tokens.colorPaletteRoyalBlueBackground2, + }, + cornflower: { + color: tokens.colorPaletteCornflowerForeground2, + backgroundColor: tokens.colorPaletteCornflowerBackground2, + }, + navy: { + color: tokens.colorPaletteNavyForeground2, + backgroundColor: tokens.colorPaletteNavyBackground2, + }, + lavender: { + color: tokens.colorPaletteLavenderForeground2, + backgroundColor: tokens.colorPaletteLavenderBackground2, + }, + purple: { + color: tokens.colorPalettePurpleForeground2, + backgroundColor: tokens.colorPalettePurpleBackground2, + }, + grape: { + color: tokens.colorPaletteGrapeForeground2, + backgroundColor: tokens.colorPaletteGrapeBackground2, + }, + lilac: { + color: tokens.colorPaletteLilacForeground2, + backgroundColor: tokens.colorPaletteLilacBackground2, + }, + pink: { + color: tokens.colorPalettePinkForeground2, + backgroundColor: tokens.colorPalettePinkBackground2, + }, + magenta: { + color: tokens.colorPaletteMagentaForeground2, + backgroundColor: tokens.colorPaletteMagentaBackground2, + }, + plum: { + color: tokens.colorPalettePlumForeground2, + backgroundColor: tokens.colorPalettePlumBackground2, + }, + beige: { + color: tokens.colorPaletteBeigeForeground2, + backgroundColor: tokens.colorPaletteBeigeBackground2, + }, + mink: { + color: tokens.colorPaletteMinkForeground2, + backgroundColor: tokens.colorPaletteMinkBackground2, + }, + platinum: { + color: tokens.colorPalettePlatinumForeground2, + backgroundColor: tokens.colorPalettePlatinumBackground2, + }, + anchor: { + color: tokens.colorPaletteAnchorForeground2, + backgroundColor: tokens.colorPaletteAnchorBackground2, + }, +}); + +const useRingColorStyles = makeStyles({ + neutral: { + '::before': { color: tokens.colorBrandStroke1 }, + }, + brand: { + '::before': { color: tokens.colorBrandStroke1 }, + }, + 'dark-red': { + '::before': { color: tokens.colorPaletteDarkRedBorderActive }, + }, + cranberry: { + '::before': { color: tokens.colorPaletteCranberryBorderActive }, + }, + red: { + '::before': { color: tokens.colorPaletteRedBorderActive }, + }, + pumpkin: { + '::before': { color: tokens.colorPalettePumpkinBorderActive }, + }, + peach: { + '::before': { color: tokens.colorPalettePeachBorderActive }, + }, + marigold: { + '::before': { color: tokens.colorPaletteMarigoldBorderActive }, + }, + gold: { + '::before': { color: tokens.colorPaletteGoldBorderActive }, + }, + brass: { + '::before': { color: tokens.colorPaletteBrassBorderActive }, + }, + brown: { + '::before': { color: tokens.colorPaletteBrownBorderActive }, + }, + forest: { + '::before': { color: tokens.colorPaletteForestBorderActive }, + }, + seafoam: { + '::before': { color: tokens.colorPaletteSeafoamBorderActive }, + }, + 'dark-green': { + '::before': { color: tokens.colorPaletteDarkGreenBorderActive }, + }, + 'light-teal': { + '::before': { color: tokens.colorPaletteLightTealBorderActive }, + }, + teal: { + '::before': { color: tokens.colorPaletteTealBorderActive }, + }, + steel: { + '::before': { color: tokens.colorPaletteSteelBorderActive }, + }, + blue: { + '::before': { color: tokens.colorPaletteBlueBorderActive }, + }, + 'royal-blue': { + '::before': { color: tokens.colorPaletteRoyalBlueBorderActive }, + }, + cornflower: { + '::before': { color: tokens.colorPaletteCornflowerBorderActive }, + }, + navy: { + '::before': { color: tokens.colorPaletteNavyBorderActive }, + }, + lavender: { + '::before': { color: tokens.colorPaletteLavenderBorderActive }, + }, + purple: { + '::before': { color: tokens.colorPalettePurpleBorderActive }, + }, + grape: { + '::before': { color: tokens.colorPaletteGrapeBorderActive }, + }, + lilac: { + '::before': { color: tokens.colorPaletteLilacBorderActive }, + }, + pink: { + '::before': { color: tokens.colorPalettePinkBorderActive }, + }, + magenta: { + '::before': { color: tokens.colorPaletteMagentaBorderActive }, + }, + plum: { + '::before': { color: tokens.colorPalettePlumBorderActive }, + }, + beige: { + '::before': { color: tokens.colorPaletteBeigeBorderActive }, + }, + mink: { + '::before': { color: tokens.colorPaletteMinkBorderActive }, + }, + platinum: { + '::before': { color: tokens.colorPalettePlatinumBorderActive }, + }, + anchor: { + '::before': { color: tokens.colorPaletteAnchorBorderActive }, + }, +}); + +export const useSemanticAvatarStyles = (_state: unknown): AvatarState => { + 'use no memo'; + + const state = _state as AvatarState; + + const { size, shape, active, activeAppearance, color } = state; + + const rootClassName = useRootClassName(); + const imageClassName = useImageClassName(); + const iconInitialsClassName = useIconInitialsClassName(); + const styles = useStyles(); + const sizeStyles = useSizeStyles(); + const colorStyles = useColorStyles(); + const ringColorStyles = useRingColorStyles(); + + const rootClasses = [rootClassName, size !== 32 && sizeStyles[size]]; + + if (state.badge) { + rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']); + } + + if (size <= 24) { + rootClasses.push(styles.textCaption2Strong); + } else if (size <= 28) { + rootClasses.push(styles.textCaption1Strong); + } else if (size <= 40) { + // Default text size included in useRootClassName + } else if (size <= 56) { + rootClasses.push(styles.textSubtitle2); + } else if (size <= 96) { + rootClasses.push(styles.textSubtitle1); + } else { + rootClasses.push(styles.textTitle3); + } + + if (shape === 'square') { + if (size <= 24) { + rootClasses.push(styles.squareSmall); + } else if (size <= 48) { + rootClasses.push(styles.squareMedium); + } else if (size <= 72) { + rootClasses.push(styles.squareLarge); + } else { + rootClasses.push(styles.squareXLarge); + } + } + + if (active === 'active' || active === 'inactive') { + rootClasses.push(styles.activeOrInactive); + + if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') { + rootClasses.push(styles.ring, ringColorStyles[color]); + if (state.badge) { + rootClasses.push(styles.ringBadgeCutout); + } + + if (size <= 48) { + rootClasses.push(styles.ringThick); + } else if (size <= 64) { + rootClasses.push(styles.ringThicker); + } else { + rootClasses.push(styles.ringThickest); + } + } + + if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') { + rootClasses.push(styles.shadow); + if (size <= 28) { + rootClasses.push(styles.shadow4); + } else if (size <= 48) { + rootClasses.push(styles.shadow8); + } else if (size <= 64) { + rootClasses.push(styles.shadow16); + } else { + rootClasses.push(styles.shadow28); + } + } + + // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them + if (active === 'inactive') { + rootClasses.push(styles.inactive); + } + } + + state.root.className = mergeClasses( + avatarClassNames.root, + ...rootClasses, + state.root.className, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.badge) { + state.badge.className = mergeClasses( + state.badge.className, + avatarClassNames.badge, + styles.badge, + getSlotClassNameProp_unstable(state.badge), + ); + } + + if (state.image) { + state.image.className = mergeClasses( + state.image.className, + avatarClassNames.image, + imageClassName, + colorStyles[color], + state.badge && styles.badgeCutout, + getSlotClassNameProp_unstable(state.image), + ); + } + + if (state.initials) { + state.initials.className = mergeClasses( + state.initials.className, + avatarClassNames.initials, + iconInitialsClassName, + colorStyles[color], + state.badge && styles.badgeCutout, + getSlotClassNameProp_unstable(state.initials), + ); + } + + if (state.icon) { + let iconSizeClass; + if (size <= 16) { + iconSizeClass = styles.icon12; + } else if (size <= 24) { + iconSizeClass = styles.icon16; + } else if (size <= 40) { + iconSizeClass = styles.icon20; + } else if (size <= 48) { + iconSizeClass = styles.icon24; + } else if (size <= 56) { + iconSizeClass = styles.icon28; + } else if (size <= 72) { + iconSizeClass = styles.icon32; + } else { + iconSizeClass = styles.icon48; + } + + state.icon.className = mergeClasses( + state.icon.className, + avatarClassNames.icon, + iconInitialsClassName, + iconSizeClass, + colorStyles[color], + state.badge && styles.badgeCutout, + getSlotClassNameProp_unstable(state.icon), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/index.ts new file mode 100644 index 00000000000000..e9cc09f99f64a8 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/index.ts @@ -0,0 +1,2 @@ +export { useSemanticBadgeStyles } from './useSemanticBadgeStyles.styles'; +export { useSemanticPresenceBadgeStyles } from './useSemanticPresenceBadgeStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticBadgeStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticBadgeStyles.styles.ts new file mode 100644 index 00000000000000..85b0d5103f2d42 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticBadgeStyles.styles.ts @@ -0,0 +1,352 @@ +import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { badgeClassNames, type BadgeState } from '@fluentui/react-badge'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to. +// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon. + +const useRootClassName = makeResetStyles({ + display: 'inline-flex', + boxSizing: 'border-box', + alignItems: 'center', + justifyContent: 'center', + position: 'relative', + fontFamily: semanticTokens.textStyleDefaultHeaderFontFamily, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + fontSize: semanticTokens.textRampLegalFontSize, + lineHeight: semanticTokens.textRampLegalLineHeight, + height: '20px', + minWidth: '20px', + padding: `0 calc(${semanticTokens.ctrlBadgePadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + borderRadius: semanticTokens.cornerCircular, + // Use a transparent stroke (rather than no border) so the border is visible in high contrast + borderColor: semanticTokens._ctrlBadgeNullColor, + + '::after': { + content: '""', + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + borderStyle: 'solid', + borderColor: 'inherit', + borderWidth: semanticTokens.strokeWidthDefault, + borderRadius: 'inherit', + }, +}); + +const useRootStyles = makeStyles({ + fontSmallToTiny: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontWeight: semanticTokens._ctrlBadgeTextStyleSemiBoldWeight, + fontSize: semanticTokens.textRampSmLegalFontSize, + lineHeight: semanticTokens.textRampSmLegalLineHeight, + }, + + // size + + tiny: { + width: '6px', + height: '6px', + fontSize: '4px', + lineHeight: '4px', + minWidth: 'unset', + padding: 'unset', + }, + 'extra-small': { + width: '10px', + height: '10px', + fontSize: '6px', + lineHeight: '6px', + minWidth: 'unset', + padding: 'unset', + }, + small: { + minWidth: '16px', + height: '16px', + padding: `0 calc(${semanticTokens.ctrlBadgeSmPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + medium: { + // Set by useRootClassName + }, + large: { + fontSize: semanticTokens.textRampLgLegalFontSize, + lineHeight: semanticTokens.textRampLgLegalLineHeight, + minWidth: '24px', + height: '24px', + padding: `0 calc(${semanticTokens.ctrlBadgeLgPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + 'extra-large': { + fontSize: semanticTokens.textRampLgLegalFontSize, + lineHeight: semanticTokens.textRampLgLegalLineHeight, + minWidth: '32px', + height: '32px', + padding: `0 calc(${semanticTokens._ctrlBadgeXLPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + + // shape + + square: { borderRadius: semanticTokens.cornerZero }, + rounded: { borderRadius: semanticTokens.ctrlBadgeCorner }, + roundedSmallToTiny: { borderRadius: semanticTokens._ctrlBadgeSmallTinyCorner }, + circular: { + // Set by useRootClassName + }, + // hide the border when appearance is "ghost" + + borderGhost: { + // The border is applied in an ::after pseudo-element because it should not affect layout. + // The padding and size of the badge should be the same regardless of whether or not it has a border. + '::after': { + display: 'none', + }, + }, + + // appearance: filled + + filled: { + // Set by useRootClassName + }, + 'filled-brand': { + backgroundColor: semanticTokens.statusBrandBackground, + color: semanticTokens.statusBrandForeground, + }, + 'filled-danger': { + backgroundColor: semanticTokens.statusDangerBackground, + color: semanticTokens.statusDangerForeground, + }, + 'filled-important': { + backgroundColor: semanticTokens.statusImportantBackground, + color: semanticTokens.statusImportantForeground, + }, + 'filled-informative': { + backgroundColor: semanticTokens.statusInformativeBackground, + color: semanticTokens.statusInformativeForeground, + }, + 'filled-severe': { + backgroundColor: tokens.colorPaletteDarkOrangeBackground3, // Missing semantic token equivalent + color: tokens.colorNeutralForegroundOnBrand, + }, + 'filled-subtle': { + backgroundColor: tokens.colorNeutralBackground1, // Missing semantic token equivalent + color: tokens.colorNeutralForeground1, + }, + 'filled-success': { + backgroundColor: semanticTokens.statusSuccessBackground, + color: semanticTokens.statusSuccessForeground, + }, + 'filled-warning': { + backgroundColor: semanticTokens._ctrlBadgeStatusWarningBackground, + color: semanticTokens.statusWarningForeground, + }, + + // appearance: ghost + + ghost: { + // No shared colors between ghost appearances + }, + 'ghost-brand': { + color: semanticTokens.statusBrandTintForeground, + }, + 'ghost-danger': { + color: semanticTokens.statusDangerTintForeground, + }, + 'ghost-important': { + color: semanticTokens.statusImportantTintForeground, + }, + 'ghost-informative': { + color: semanticTokens.statusInformativeTintForeground, + }, + 'ghost-severe': { + color: tokens.colorPaletteDarkOrangeForeground3, // Missing semantic token equivalent + }, + 'ghost-subtle': { + color: tokens.colorNeutralForegroundStaticInverted, // Missing semantic token equivalents + }, + 'ghost-success': { + color: semanticTokens._ctrlBadgeStatusSuccessTintForeground3, + }, + 'ghost-warning': { + color: semanticTokens._ctrlBadgeStatusWarningTintForeground2, + }, + + // appearance: outline + + outline: { + ...shorthands.borderColor('currentColor'), + }, + 'outline-brand': { + color: semanticTokens.statusBrandTintForeground, + }, + 'outline-danger': { + color: semanticTokens.statusDangerTintForeground, + ...shorthands.borderColor(semanticTokens.statusDangerStroke), + }, + 'outline-important': { + color: semanticTokens.statusImportantTintForeground, + ...shorthands.borderColor(semanticTokens.statusImportantStroke), + }, + 'outline-informative': { + color: semanticTokens.statusInformativeTintForeground, + ...shorthands.borderColor(semanticTokens.statusInformativeStroke), + }, + 'outline-severe': { + color: tokens.colorPaletteDarkOrangeForeground3, // Missing semantic token equivalent + }, + 'outline-subtle': { + color: tokens.colorNeutralForegroundStaticInverted, // Missing semantic token equivalent + }, + 'outline-success': { + color: semanticTokens._ctrlBadgeStatusSuccessTintForeground3, + ...shorthands.borderColor(semanticTokens.statusSuccessStroke), + }, + 'outline-warning': { + color: semanticTokens._ctrlBadgeStatusWarningTintForeground2, + }, + + // appearance: tint + + tint: { + // No shared colors between tint appearances + }, + 'tint-brand': { + backgroundColor: semanticTokens.statusBrandTintBackground, + color: semanticTokens._ctrlBadgeStatusBrandTintForeground, + ...shorthands.borderColor(semanticTokens.statusBrandTintStroke), + }, + 'tint-danger': { + backgroundColor: semanticTokens._ctrlBadgeStatusDangerTintBackground, + color: semanticTokens._ctrlBadgeStatusDangerTintForeground, + ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusDangerTintStroke), + }, + 'tint-important': { + backgroundColor: semanticTokens._ctrlBadgeStatusImportantTintBackground, + color: semanticTokens._ctrlBadgeStatusImportantTintForeground, + ...shorthands.borderColor(semanticTokens.statusImportantTintStroke), + }, + 'tint-informative': { + backgroundColor: semanticTokens.statusInformativeTintBackground, + color: semanticTokens.statusInformativeTintForeground, + ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusInformativeTintStroke), + }, + 'tint-severe': { + //come back to this + backgroundColor: tokens.colorPaletteDarkOrangeBackground1, + color: tokens.colorPaletteDarkOrangeForeground1, + ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1), + }, + 'tint-subtle': { + //come back to this + backgroundColor: tokens.colorNeutralBackground1, + color: tokens.colorNeutralForeground3, + ...shorthands.borderColor(tokens.colorNeutralStroke2), + }, + 'tint-success': { + backgroundColor: semanticTokens._ctrlBadgeStatusSuccessTintBackground, + color: semanticTokens._ctrlBadgeStatusSuccessTintForeground, + ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusSuccessTintStroke), + }, + 'tint-warning': { + backgroundColor: semanticTokens._ctrlBadgeStatusWarningTintBackground, + color: semanticTokens._ctrlBadgeStatusWarningTintForeground, + ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusWarningTintStroke), + }, +}); + +const useIconRootClassName = makeResetStyles({ + display: 'flex', + lineHeight: '1', + margin: `0 calc(-1 * ${semanticTokens._ctrlBadgePaddingTextSide})`, // Remove text padding added to root + fontSize: '12px', +}); + +const useIconStyles = makeStyles({ + beforeText: { + marginRight: `calc(${semanticTokens._ctrlBadgePaddingRightSide} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + afterText: { + marginLeft: `calc(${semanticTokens._ctrlBadgePaddingLeftSide} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + + beforeTextXL: { + marginRight: `calc(${semanticTokens._ctrlBadgePaddingRightSideXL} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + afterTextXL: { + marginLeft: `calc(${semanticTokens._ctrlBadgePaddingLeftSideXL} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + + // size + + tiny: { + fontSize: '6px', + }, + 'extra-small': { + fontSize: '10px', + }, + small: { + fontSize: '12px', + }, + medium: { + // Set by useIconRootClassName + }, + large: { + fontSize: '16px', + }, + 'extra-large': { + fontSize: '20px', + }, +}); + +/** + * Applies style classnames to slots + */ +export const useSemanticBadgeStyles = (_state: unknown): BadgeState => { + 'use no memo'; + + const state = _state as BadgeState; + const rootClassName = useRootClassName(); + const rootStyles = useRootStyles(); + + const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny'; + + state.root.className = mergeClasses( + state.root.className, + badgeClassNames.root, + rootClassName, + smallToTiny && rootStyles.fontSmallToTiny, + rootStyles[state.size], + rootStyles[state.shape], + state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, + state.appearance === 'ghost' && rootStyles.borderGhost, + rootStyles[state.appearance], + rootStyles[`${state.appearance}-${state.color}` as const], + getSlotClassNameProp_unstable(state.root), + ); + + const iconRootClassName = useIconRootClassName(); + const iconStyles = useIconStyles(); + if (state.icon) { + let iconPositionClass; + if (state.root.children) { + if (state.size === 'extra-large') { + iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL; + } else { + iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText; + } + } + + state.icon.className = mergeClasses( + state.icon.className, + badgeClassNames.icon, + iconRootClassName, + iconPositionClass, + iconStyles[state.size], + getSlotClassNameProp_unstable(state.icon), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts new file mode 100644 index 00000000000000..b5363ebb356ab0 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts @@ -0,0 +1,142 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { presenceBadgeClassNames, type PresenceBadgeState, type PresenceBadgeStatus } from '@fluentui/react-badge'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const getIsBusy = (status: PresenceBadgeStatus): boolean => { + if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') { + return true; + } + + return false; +}; + +const useRootClassName = makeResetStyles({ + display: 'inline-flex', + boxSizing: 'border-box', + alignItems: 'center', + justifyContent: 'center', + + borderRadius: semanticTokens.cornerCircular, + backgroundColor: semanticTokens.statusImportantForeground, + + // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background. + // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background + // using padding and backgroundClip. The icon has margin: -1px to account for the padding. + // (* except size="tiny", where backgroundClip is unset) + padding: '1px', + backgroundClip: 'content-box', +}); + +const useIconClassName = makeResetStyles({ + display: 'flex', + margin: '-1px', +}); + +const useStyles = makeStyles({ + statusBusy: { + color: semanticTokens._ctrlBadgeStatusBusyTintForeground, + }, + statusAway: { + color: semanticTokens.statusAwayForeground, + }, + statusAvailable: { + color: semanticTokens._ctrlBadgeStatusAvailableTintForeground, + }, + statusOffline: { + color: semanticTokens.statusInformativeTintForeground, + }, + statusOutOfOffice: { + color: semanticTokens.statusOofForeground, + }, + statusUnknown: { + color: semanticTokens.statusInformativeForeground, + }, + outOfOffice: { + color: semanticTokens.statusImportantForeground, + }, + outOfOfficeAvailable: { + color: semanticTokens._ctrlBadgeStatusAvailableTintForeground, + }, + outOfOfficeBusy: { + color: semanticTokens._ctrlBadgeStatusBusyTintForeground, + }, + outOfOfficeUnknown: { + color: semanticTokens.statusInformativeForeground, + }, + + // Icons are not resizeable, and these sizes are currently missing + // use `!important` to size the currently available icons to the missing ones + // + tiny: { + aspectRatio: '1', + width: '6px', + backgroundClip: 'unset', // tiny icons have a border less than 1px wide, and can't use the backgroundClip fix + '& svg': { + width: '6px !important', + height: '6px !important', + }, + }, + large: { + aspectRatio: '1', + width: '20px', + '& svg': { + width: '20px !important', + height: '20px !important', + }, + }, + extraLarge: { + aspectRatio: '1', + width: '28px', + '& svg': { + width: '28px !important', + height: '28px !important', + }, + }, +}); + +/** + * Applies style classnames to slots + */ +export const useSemanticPresenceBadgeStyles = (_state: unknown): PresenceBadgeState => { + 'use no memo'; + + const state = _state as PresenceBadgeState; + const rootClassName = useRootClassName(); + const iconClassName = useIconClassName(); + const styles = useStyles(); + const isBusy = getIsBusy(state.status); + state.root.className = mergeClasses( + state.root.className, + presenceBadgeClassNames.root, + rootClassName, + isBusy && styles.statusBusy, + state.status === 'away' && styles.statusAway, + state.status === 'available' && styles.statusAvailable, + state.status === 'offline' && styles.statusOffline, + state.status === 'out-of-office' && styles.statusOutOfOffice, + state.status === 'unknown' && styles.statusUnknown, + state.outOfOffice && styles.outOfOffice, + state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, + state.outOfOffice && isBusy && styles.outOfOfficeBusy, + state.outOfOffice && + (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && + styles.statusOutOfOffice, + state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, + state.size === 'tiny' && styles.tiny, + state.size === 'large' && styles.large, + state.size === 'extra-large' && styles.extraLarge, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + presenceBadgeClassNames.icon, + iconClassName, + getSlotClassNameProp_unstable(state.icon), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/index.ts new file mode 100644 index 00000000000000..83d868c0f4a3d7 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/index.ts @@ -0,0 +1,4 @@ +export { useSemanticBreadcrumbStyles } from './useSemanticBreadcrumbStyles.styles'; +export { useSemanticBreadcrumbButtonStyles } from './useSemanticBreadcrumbButtonStyles.styles'; +export { useSemanticBreadcrumbDividerStyles } from './useSemanticBreadcrumbDividerStyles.styles'; +export { useSemanticBreadcrumbItemStyles } from './useSemanticBreadcrumbItemStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts new file mode 100644 index 00000000000000..3fa35c74804fbd --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts @@ -0,0 +1,156 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { breadcrumbButtonClassNames, type BreadcrumbButtonState } from '@fluentui/react-breadcrumb'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { buttonClassNames } from '@fluentui/react-button'; +import { useSemanticButtonStyles } from '../Button/useSemanticButtonStyles.styles'; +import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * CSS variable names used internally for styling in the Breadcrumb. + */ +const breadcrumbCSSVars = { + breadcrumbIconSizeVar: '--fui-Breadcrumb--icon-size', + breadcrumbIconLineHeightVar: '--fui-Breadcrumb--icon-line-height', +}; + +const useIconStyles = makeStyles({ + base: { + fontSize: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, + height: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, + lineHeight: `var(${breadcrumbCSSVars.breadcrumbIconLineHeightVar})`, + width: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, + marginRight: semanticTokens.gapInsideCtrlSmDefault, + }, + small: { + [breadcrumbCSSVars.breadcrumbIconSizeVar]: '12px', + [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: semanticTokens.textGlobalCaption1LineHeight, + }, + medium: { + [breadcrumbCSSVars.breadcrumbIconSizeVar]: semanticTokens._ctrlBreadcrumbSizeSmIcon, + [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: semanticTokens.textGlobalBody2LineHeight, + }, + large: { + [breadcrumbCSSVars.breadcrumbIconSizeVar]: semanticTokens.sizeCtrlIcon, + [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: semanticTokens.textGlobalSubtitle2LineHeight, + }, +}); + +const defaultButtonStyles = { + backgroundColor: semanticTokens.nullColor, + color: semanticTokens.foregroundCtrlOnTransparentRest, + cursor: 'auto', +}; + +const currentIconStyles = { + ...defaultButtonStyles, + [`& .${buttonClassNames.icon}`]: { + color: 'unset', + }, + [`& .${iconFilledClassName}`]: { + display: 'none', + }, + [`& .${iconRegularClassName}`]: { + display: 'inline', + }, +}; + +const useStyles = makeStyles({ + root: { + minWidth: 'unset', + textWrap: 'nowrap', + }, + small: { + height: '24px', + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption1FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + padding: semanticTokens.gapInsideCtrlToLabel, + }, + medium: { + height: semanticTokens._ctrlBreadcrumbSizeDefault, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + padding: semanticTokens.gapInsideCtrlToLabel, + }, + large: { + height: semanticTokens._ctrlBreadcrumbSizeLgDefault, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalBody2FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalBody2LineHeight, + padding: semanticTokens.gapInsideCtrlLgToLabel, + }, + current: { + ':hover': { + ...currentIconStyles, + }, + ':hover:active': { + ...currentIconStyles, + }, + ':disabled': { + ...currentIconStyles, + }, + }, + currentSmall: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption1FontSize, + fontWeight: semanticTokens.textCtrlButtonWeightDefault, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + }, + currentMedium: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textCtrlButtonWeightDefault, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + }, + currentLarge: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampLgItemBodyFontSize, + fontWeight: semanticTokens.textCtrlButtonWeightDefault, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + }, +}); + +/** + * Apply styling to the BreadcrumbButton slots based on the state + */ +export const useSemanticBreadcrumbButtonStyles = (_state: unknown): BreadcrumbButtonState => { + 'use no memo'; + + const state = _state as BreadcrumbButtonState; + + const styles = useStyles(); + const iconStyles = useIconStyles(); + + const currentSizeMap = { + small: styles.currentSmall, + medium: styles.currentMedium, + large: styles.currentLarge, + }; + state.root.className = mergeClasses( + state.root.className, + breadcrumbButtonClassNames.root, + styles[state.size], + styles.root, + state.current && currentSizeMap[state.size], + state.current && styles.current, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + iconStyles.base, + iconStyles[state.size], + getSlotClassNameProp_unstable(state.icon), + ); + } + + useSemanticButtonStyles(state); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbDividerStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbDividerStyles.styles.ts new file mode 100644 index 00000000000000..5b1eadeb9204fd --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbDividerStyles.styles.ts @@ -0,0 +1,46 @@ +import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react'; +import { breadcrumbDividerClassNames, type BreadcrumbDividerState } from '@fluentui/react-breadcrumb'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * Styles for the root slot + */ +const useStyles = makeResetStyles({ + display: 'flex', +}); + +const useIconStyles = makeStyles({ + small: { + fontSize: '12px', + }, + medium: { + fontSize: semanticTokens._ctrlBreadcrumbSizeSmIcon, + }, + large: { + fontSize: semanticTokens.sizeCtrlIcon, + }, +}); + +/** + * Apply styling to the BreadcrumbDivider slots based on the state + */ +export const useSemanticBreadcrumbDividerStyles = (_state: unknown): BreadcrumbDividerState => { + 'use no memo'; + + const state = _state as BreadcrumbDividerState; + + const styles = useStyles(); + const iconStyles = useIconStyles(); + const { size = 'medium' } = state; + + state.root.className = mergeClasses( + state.root.className, + breadcrumbDividerClassNames.root, + styles, + iconStyles[size], + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbItemStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbItemStyles.styles.ts new file mode 100644 index 00000000000000..1972465bc8201a --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbItemStyles.styles.ts @@ -0,0 +1,32 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { breadcrumbItemClassNames, type BreadcrumbItemState } from '@fluentui/react-breadcrumb'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useBreadcrumbItemResetStyles = makeResetStyles({ + display: 'flex', + alignItems: 'center', + color: semanticTokens.foregroundContentNeutralSecondary, + boxSizing: 'border-box', + textWrap: 'nowrap', +}); + +/** + * Apply styling to the BreadcrumbItem slots based on the state + */ +export const useSemanticBreadcrumbItemStyles = (_state: unknown): BreadcrumbItemState => { + 'use no memo'; + + const state = _state as BreadcrumbItemState; + + const resetStyles = useBreadcrumbItemResetStyles(); + + state.root.className = mergeClasses( + state.root.className, + breadcrumbItemClassNames.root, + resetStyles, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbStyles.styles.ts new file mode 100644 index 00000000000000..729929dd619bfb --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbStyles.styles.ts @@ -0,0 +1,36 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { breadcrumbClassNames, type BreadcrumbState } from '@fluentui/react-breadcrumb'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useListClassName = makeResetStyles({ + listStyleType: 'none', + display: 'flex', + alignItems: 'center', + margin: 0, + padding: 0, +}); + +/** + * Apply styling to the Breadcrumb slots based on the state + */ +export const useSemanticBreadcrumbStyles = (_state: unknown): BreadcrumbState => { + 'use no memo'; + + const state = _state as BreadcrumbState; + + const listBaseClassName = useListClassName(); + state.root.className = mergeClasses( + state.root.className, + breadcrumbClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + if (state.list) { + state.list.className = mergeClasses( + state.list.className, + listBaseClassName, + breadcrumbClassNames.list, + getSlotClassNameProp_unstable(state.list), + ); + } + return state; +}; 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..15da0f602447f5 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticButtonStyles.styles.ts @@ -0,0 +1,659 @@ +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 buttonSpacingSmall = '3px'; +const buttonSpacingSmallWithIcon = '1px'; +const buttonSpacingMedium = '5px'; +const buttonSpacingLarge = '8px'; +const buttonSpacingLargeWithIcon = '7px'; + +const paddingSmHorizontalNoIcon = `calc(${semanticTokens.paddingCtrlSmHorizontalDefault} + ${semanticTokens.paddingCtrlTextSide})`; +const paddingHorizontalNoIcon = `calc(${semanticTokens.paddingCtrlHorizontalDefault} + ${semanticTokens.paddingCtrlTextSide})`; +const paddingLgHorizontalNoIcon = `calc(${semanticTokens.paddingCtrlLgHorizontalDefault} + ${semanticTokens.paddingCtrlTextSide})`; + +/* 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.ctrlFocusInnerStrokeWidth} + 0.25px)`; + +const minButtonWidth = `max(${semanticTokens.sizeCtrlDefault}, 96px)`; +const minButtonSmWidth = `max(${semanticTokens.sizeCtrlSmDefault}, 64px)`; +const minButtonLgWidth = `max(${semanticTokens.sizeCtrlLgDefault}, 96px)`; + +const useRootBaseClassName = makeResetStyles({ + alignItems: 'center', + boxSizing: 'border-box', + display: 'inline-flex', + justifyContent: 'center', + textDecorationLine: 'none', + verticalAlign: 'middle', + + margin: 0, + overflow: 'hidden', + + backgroundColor: semanticTokens.backgroundCtrlNeutralRest, + color: semanticTokens.foregroundCtrlNeutralPrimaryRest, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeCtrlOnNeutralRest}`, + + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + outlineStyle: 'none', + + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlNeutralHover, + borderColor: semanticTokens.strokeCtrlOnNeutralHover, + color: semanticTokens.foregroundCtrlNeutralPrimaryHover, + + cursor: 'pointer', + }, + + ':hover:active': { + backgroundColor: semanticTokens.backgroundCtrlNeutralPressed, + borderColor: semanticTokens.strokeCtrlOnNeutralPressed, + color: semanticTokens.foregroundCtrlNeutralPrimaryPressed, + + outlineStyle: 'none', + }, + + padding: `${semanticTokens.paddingCtrlTextTop} ${paddingHorizontalNoIcon} ${semanticTokens.paddingCtrlTextBottom} ${paddingHorizontalNoIcon}`, + minWidth: minButtonWidth, + borderRadius: semanticTokens.cornerCtrlRest, + + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textCtrlButtonWeightDefault, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + + // 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.ctrlFocusInnerStroke, + borderRadius: semanticTokens.cornerCtrlRest, + borderWidth: '1px', + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusOuterStroke}`, + boxShadow: `0 0 0 ${semanticTokens.ctrlFocusInnerStrokeWidth} ${semanticTokens.ctrlFocusInnerStroke} + inset + `, + zIndex: 1, + }), + + // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642) + '@supports (-moz-appearance:button)': { + ...createCustomFocusIndicatorStyle({ + boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.ctrlFocusInnerStroke} + inset + `, + }), + }, +}); + +const useIconBaseClassName = makeResetStyles({ + alignItems: 'center', + display: 'inline-flex', + justifyContent: 'center', + + fontSize: semanticTokens.sizeCtrlIcon, + height: semanticTokens.sizeCtrlIcon, + width: semanticTokens.sizeCtrlIcon, + + [iconSpacingVar]: `calc(${semanticTokens._ctrlButtonGapInsideDefault} + ${semanticTokens.paddingCtrlTextSide})`, +}); + +const useRootStyles = makeStyles({ + // Appearance variations + outline: { + backgroundColor: semanticTokens.backgroundCtrlOutlineRest, + border: `${semanticTokens.strokeWidthCtrlOutlineRest} solid ${semanticTokens.strokeCtrlOnOutlineRest}`, + color: semanticTokens.foregroundCtrlOnOutlineRest, + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlOutlineHover, + border: `${semanticTokens.strokeWidthCtrlOutlineHover} solid ${semanticTokens.strokeCtrlOnOutlineHover}`, + color: semanticTokens.foregroundCtrlOnOutlineHover, + }, + + ':hover:active': { + backgroundColor: semanticTokens.backgroundCtrlOutlinePressed, + border: `${semanticTokens.strokeWidthCtrlOutlinePressed} solid ${semanticTokens.strokeCtrlOnOutlinePressed}`, + color: semanticTokens.foregroundCtrlOnOutlinePressed, + }, + }, + + primary: { + backgroundColor: semanticTokens.backgroundCtrlBrandRest, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandRest), + color: semanticTokens.foregroundCtrlOnBrandRest, + + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlBrandHover, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandHover), + color: semanticTokens.foregroundCtrlOnBrandHover, + }, + + ':hover:active': { + backgroundColor: semanticTokens.backgroundCtrlBrandPressed, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandPressed), + color: semanticTokens.foregroundCtrlOnBrandPressed, + }, + + '@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: { + /* The secondary styles are exactly the same as the base styles. */ + }, + subtle: { + backgroundColor: semanticTokens.backgroundCtrlSubtleRest, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleRest), + color: semanticTokens.foregroundCtrlOnSubtleRest, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnSubtleRest, + }, + + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleHover), + color: semanticTokens.foregroundCtrlOnSubtleHover, + [`& .${iconFilledClassName}`]: { + display: 'inline', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnSubtleHover, + }, + }, + + ':hover:active': { + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtlePressed), + color: semanticTokens.foregroundCtrlOnSubtlePressed, + [`& .${iconFilledClassName}`]: { + display: 'inline', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnSubtlePressed, + }, + }, + + '@media (forced-colors: active)': { + ':hover': { + color: 'Highlight', + + [`& .${buttonClassNames.icon}`]: { + color: 'Highlight', + }, + }, + ':hover:active': { + color: 'Highlight', + + [`& .${buttonClassNames.icon}`]: { + color: 'Highlight', + }, + }, + }, + }, + transparent: { + backgroundColor: tokens.colorTransparentBackground, + ...shorthands.borderColor('transparent'), + color: semanticTokens.foregroundCtrlOnTransparentRest, + + ':hover': { + backgroundColor: tokens.colorTransparentBackgroundHover, + ...shorthands.borderColor('transparent'), + color: semanticTokens.foregroundCtrlOnTransparentHover, + [`& .${iconFilledClassName}`]: { + display: 'inline', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + }, + + ':hover:active': { + backgroundColor: tokens.colorTransparentBackgroundPressed, + ...shorthands.borderColor('transparent'), + color: semanticTokens.foregroundCtrlOnTransparentPressed, + [`& .${iconFilledClassName}`]: { + display: 'inline', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + }, + + '@media (forced-colors: active)': { + ':hover': { + backgroundColor: tokens.colorTransparentBackground, + color: 'Highlight', + }, + ':hover:active': { + backgroundColor: tokens.colorTransparentBackground, + color: 'Highlight', + }, + }, + }, + + // Shape variations + circular: { borderRadius: semanticTokens.cornerCircular }, + rounded: { + /* The borderRadius rounded styles are handled in the size variations */ + }, + square: { borderRadius: semanticTokens.cornerZero }, + + // Size variations + small: { + minWidth: minButtonSmWidth, + padding: `${buttonSpacingSmall} ${paddingSmHorizontalNoIcon}`, + borderRadius: semanticTokens.cornerCtrlSmRest, + + fontSize: semanticTokens.textRampSmItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + }, + smallWithIcon: { + paddingBottom: buttonSpacingSmallWithIcon, + paddingTop: buttonSpacingSmallWithIcon, + }, + smallWithIconBefore: { + paddingRight: paddingSmHorizontalNoIcon, + paddingLeft: semanticTokens.paddingCtrlSmHorizontalDefault, + }, + smallWithIconAfter: { + paddingRight: semanticTokens.paddingCtrlSmHorizontalDefault, + paddingLeft: paddingSmHorizontalNoIcon, + }, + medium: { + /* defined in base styles */ + }, + mediumWithIconBefore: { + paddingRight: paddingHorizontalNoIcon, + paddingLeft: semanticTokens.paddingCtrlHorizontalDefault, + }, + mediumWithIconAfter: { + paddingRight: semanticTokens.paddingCtrlHorizontalDefault, + paddingLeft: paddingHorizontalNoIcon, + }, + large: { + minWidth: minButtonLgWidth, + padding: `${buttonSpacingLarge} ${paddingLgHorizontalNoIcon}`, + borderRadius: semanticTokens.cornerCtrlLgRest, + + fontSize: semanticTokens.textRampLgItemBodyFontSize, + fontWeight: semanticTokens.textCtrlButtonWeightDefault, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + }, + largeWithIcon: { + paddingBottom: buttonSpacingLargeWithIcon, + paddingTop: buttonSpacingLargeWithIcon, + }, + largeWithIconBefore: { + paddingRight: paddingLgHorizontalNoIcon, + paddingLeft: semanticTokens.paddingCtrlLgHorizontalDefault, + }, + largeWithIconAfter: { + paddingRight: semanticTokens.paddingCtrlLgHorizontalDefault, + paddingLeft: paddingLgHorizontalNoIcon, + }, +}); + +const useRootDisabledStyles = makeStyles({ + // Base styles + base: { + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + cursor: 'not-allowed', + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnNeutralDisabled, + }, + + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + + cursor: 'not-allowed', + + [`& .${iconFilledClassName}`]: { + display: 'none', + }, + [`& .${iconRegularClassName}`]: { + display: 'inline', + }, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnNeutralDisabled, + }, + }, + + ':hover:active': { + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + + cursor: 'not-allowed', + + [`& .${iconFilledClassName}`]: { + display: 'none', + }, + [`& .${iconRegularClassName}`]: { + display: 'inline', + }, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnNeutralDisabled, + }, + }, + }, + + // 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: tokens.colorTransparentBackground, + color: semanticTokens.foregroundCtrlOnOutlineDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnOutlineDisabled), + + ':hover': { + backgroundColor: tokens.colorTransparentBackground, + }, + + ':hover:active': { + backgroundColor: tokens.colorTransparentBackground, + }, + }, + primary: { + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandDisabled), + + ':hover': { + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandDisabled), + }, + + ':hover:active': { + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandDisabled), + }, + }, + secondary: { + color: semanticTokens.foregroundCtrlNeutralSecondaryDisabled, + }, + subtle: { + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleDisabled), + + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnSubtleDisabled, + }, + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleDisabled), + }, + + ':hover:active': { + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleDisabled), + }, + }, + transparent: { + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlOnTransparentDisabled, + }, + color: semanticTokens.foregroundCtrlOnTransparentDisabled, + backgroundColor: tokens.colorTransparentBackground, + ...shorthands.borderColor('transparent'), + + ':hover': { + backgroundColor: tokens.colorTransparentBackground, + ...shorthands.borderColor('transparent'), + }, + + ':hover:active': { + backgroundColor: tokens.colorTransparentBackground, + ...shorthands.borderColor('transparent'), + }, + }, +}); + +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.cornerZero }), + // Primary styles + primary: { + ...createCustomFocusIndicatorStyle({ + ...shorthands.borderColor(semanticTokens.ctrlFocusInnerStroke), + boxShadow: `${tokens.shadow2}, 0 0 0 ${semanticTokens.ctrlFocusInnerStrokeWidth} ${semanticTokens.ctrlFocusInnerStroke} inset, 0 0 0 ${semanticTokens.ctrlFocusOuterStrokeWidth} ${semanticTokens.strokeCtrlOnActiveBrandRest} inset`, + ':hover': { + boxShadow: `${tokens.shadow2}, 0 0 0 ${semanticTokens.ctrlFocusInnerStrokeWidth} ${semanticTokens.ctrlFocusInnerStroke} inset`, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandHover), + }, + }), + + // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642) + '@supports (-moz-appearance:button)': { + ...createCustomFocusIndicatorStyle({ + // TODO: Replace shadow2 with semantic shadow + boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.ctrlFocusInnerStroke} inset, 0 0 0 ${semanticTokens.ctrlFocusOuterStrokeWidth} ${semanticTokens.strokeCtrlOnActiveBrandRest} inset`, + ':hover': { + boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.strokeCtrlOnActiveBrandHover} inset`, + }, + }), + }, + }, + // Size variations + small: createCustomFocusIndicatorStyle({ + borderRadius: `calc(${semanticTokens.cornerCtrlSmRest} - ${semanticTokens.ctrlFocusOuterStrokeWidth})`, + }), + medium: { + /* defined in base styles */ + }, + large: createCustomFocusIndicatorStyle({ + borderRadius: `calc(${semanticTokens.cornerCtrlLgRest} + ${semanticTokens.ctrlFocusOuterStrokeWidth})`, + }), +}); + +const useRootIconOnlyStyles = makeStyles({ + // Size variations + small: { + padding: `${buttonSpacingSmallWithIcon} ${semanticTokens.paddingCtrlSmHorizontalIconOnly}`, + minWidth: '24px', + maxWidth: '24px', + }, + medium: { + padding: `${buttonSpacingMedium} ${semanticTokens.paddingCtrlHorizontalIconOnly}`, + minWidth: '32px', + maxWidth: '32px', + }, + large: { + padding: `${buttonSpacingLargeWithIcon} ${semanticTokens.paddingCtrlLgHorizontalIconOnly}`, + + minWidth: '40px', + maxWidth: '40px', + }, +}); + +const useIconStyles = makeStyles({ + // Size variations + small: { + fontSize: semanticTokens.sizeCtrlSmIcon, + height: semanticTokens.sizeCtrlSmIcon, + width: semanticTokens.sizeCtrlSmIcon, + + [iconSpacingVar]: `calc(${semanticTokens.gapInsideCtrlSmDefault} + ${semanticTokens.paddingCtrlTextSide})`, + }, + medium: { + /* defined in base styles */ + }, + large: { + fontSize: semanticTokens.sizeCtrlLgIcon, + height: semanticTokens.sizeCtrlLgIcon, + width: semanticTokens.sizeCtrlLgIcon, + + [iconSpacingVar]: `calc(${semanticTokens.gapInsideCtrlLgDefault} + ${semanticTokens.paddingCtrlTextSide})`, + }, + + // 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.highContrast, + appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], + + // Focus styles + appearance === 'primary' && rootFocusStyles.primary, + 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..8c2ab9b5894f54 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticCompoundButtonStyles.styles.ts @@ -0,0 +1,316 @@ +import { tokens } from '@fluentui/react-theme'; +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 useRootStyles = makeStyles({ + // Base styles + base: { + height: 'auto', + + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlNeutralSecondaryRest, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlNeutralSecondaryHover, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlNeutralSecondaryPressed, + }, + }, + }, + + // High contrast styles + highContrast: { + '@media (forced-colors: active)': { + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'Highlight', + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'Highlight', + }, + }, + }, + }, + + // Appearance variations + outline: { + /* No styles */ + }, + primary: { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlOnBrandRest, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlOnBrandHover, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlOnBrandPressed, + }, + }, + + '@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.foregroundCtrlOnSubtleRest, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlOnSubtleHover, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlOnSubtlePressed, + }, + }, + + '@media (forced-colors: active)': { + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'Canvas', + }, + }, + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'Canvas', + }, + }, + }, + }, + transparent: { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlOnTransparentRest, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlOnTransparentHover, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlOnTransparentPressed, + }, + }, + }, + + // Size variations + small: { + padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`, + + fontSize: semanticTokens.textRampItemBodyFontSize, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + }, + medium: { + padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`, + + fontSize: semanticTokens.textRampItemBodyFontSize, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + }, + large: { + padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`, + + fontSize: semanticTokens.textRampLgItemBodyFontSize, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + }, + + // Disabled styles + disabled: { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + }, + }, + + // 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 useRootIconOnlyStyles = makeStyles({ + // Size variations + small: { + padding: tokens.spacingHorizontalXS, + + maxWidth: '48px', + minWidth: '48px', + }, + medium: { + padding: tokens.spacingHorizontalSNudge, + + maxWidth: '52px', + minWidth: '52px', + }, + large: { + padding: tokens.spacingHorizontalS, + + maxWidth: '56px', + minWidth: '56px', + }, +}); + +const useIconStyles = makeStyles({ + // Base styles + base: { + fontSize: '40px', + height: '40px', + width: '40px', + }, + + // Icon position variations + before: { + marginRight: tokens.spacingHorizontalM, + }, + after: { + marginLeft: tokens.spacingHorizontalM, + }, +}); + +const useContentContainerStyles = makeStyles({ + // Base styles + base: { + display: 'flex', + flexDirection: 'column', + textAlign: 'left', + }, +}); + +const useSecondaryContentStyles = makeStyles({ + // Base styles + base: { + lineHeight: '100%', + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + }, + + // Size variations + small: { + fontSize: semanticTokens.textRampSmItemBodyFontSize, + }, + medium: { + fontSize: semanticTokens.textRampSmItemBodyFontSize, + }, + large: { + fontSize: semanticTokens.textRampItemBodyFontSize, + }, +}); + +export const useSemanticCompoundButtonStyles = (_state: unknown): CompoundButtonState => { + 'use no memo'; + + const state = _state as CompoundButtonState; + + const rootStyles = useRootStyles(); + const rootIconOnlyStyles = useRootIconOnlyStyles(); + const iconStyles = useIconStyles(); + const contentContainerStyles = useContentContainerStyles(); + const secondaryContentStyles = useSecondaryContentStyles(); + + const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = 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) && rootStyles.disabled, + (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, + state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], + getSlotClassNameProp_unstable(state.icon), + ); + } + + if (state.secondaryContent) { + state.secondaryContent.className = mergeClasses( + state.secondaryContent.className, + compoundButtonClassNames.secondaryContent, + secondaryContentStyles.base, + secondaryContentStyles[size], + getSlotClassNameProp_unstable(state.secondaryContent), + ); + } + + useSemanticButtonStyles(state); + + 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..99a57fe2ebc593 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticMenuButtonStyles.styles.ts @@ -0,0 +1,155 @@ +import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; +import { tokens } from '@fluentui/react-theme'; +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(tokens.colorNeutralStroke1Selected), + ...shorthands.borderWidth(semanticTokens.strokeWidthCtrlOutlineSelected), + color: tokens.colorNeutralForeground1Selected, + + // Ensure state is retained over base hover + ':hover': { + ...shorthands.borderColor(tokens.colorNeutralStroke1Selected), + ...shorthands.borderWidth(semanticTokens.strokeWidthCtrlOutlineSelected), + color: tokens.colorNeutralForeground1Selected, + }, + + // Ensure state is retained over base hover active + ':hover:active': { + ...shorthands.borderColor(tokens.colorNeutralStroke1Selected), + ...shorthands.borderWidth(semanticTokens.strokeWidthCtrlOutlineSelected), + color: tokens.colorNeutralForeground1Selected, + }, + }, + primary: { + backgroundColor: tokens.colorBrandBackgroundSelected, + }, + secondary: { + backgroundColor: tokens.colorNeutralBackground1Selected, + ...shorthands.borderColor(tokens.colorNeutralStroke1Selected), + color: tokens.colorNeutralForeground1Selected, + }, + subtle: { + backgroundColor: tokens.colorSubtleBackgroundSelected, + color: tokens.colorNeutralForeground2Selected, + }, + transparent: { + backgroundColor: tokens.colorTransparentBackgroundSelected, + color: tokens.colorNeutralForeground2BrandSelected, + }, +}); + +const useIconExpandedStyles = makeStyles({ + // Appearance variations + outline: { + color: tokens.colorNeutralForeground1Selected, + }, + primary: { + /* The primary styles are exactly the same as the base styles. */ + }, + secondary: { + color: tokens.colorNeutralForeground1Selected, + }, + subtle: { + color: tokens.colorNeutralForeground2BrandSelected, + }, + transparent: { + color: tokens.colorNeutralForeground2BrandSelected, + }, + highContrast: { + // High contrast styles + '@media (forced-colors: active)': { + ':hover': { + color: 'Highlight', + }, + }, + }, +}); + +const useMenuIconStyles = makeStyles({ + base: { + lineHeight: 0, + }, + + // Size appearance + small: { + fontSize: '12px', + height: '12px', + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + width: '12px', + }, + medium: { + fontSize: '12px', + height: '12px', + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + width: '12px', + }, + large: { + fontSize: '16px', + height: '16px', + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + width: '16px', + }, + + // Not-icon only + notIconOnly: { + marginLeft: semanticTokens.gapInsideCtrlSmDefault, + }, +}); + +export const useSemanticMenuButtonStyles = (_state: unknown): MenuButtonState => { + 'use no memo'; + + const state = _state as MenuButtonState; + + const rootExpandedStyles = useRootExpandedStyles(); + const iconExpandedStyles = useIconExpandedStyles(); + const menuIconStyles = useMenuIconStyles(); + + 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), + ); + } + + useSemanticButtonStyles({ ...state, iconPosition: 'before' }); + + 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..dfbd5e4c996142 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticSplitButtonStyles.styles.ts @@ -0,0 +1,225 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { tokens } from '@fluentui/react-theme'; +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, + }, + + [`& .${splitButtonClassNames.menuButton}`]: { + borderLeftWidth: 0, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + minWidth: MIN_TARGET_SIZE, + }, + }, + + // Appearance variations + outline: { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.strokeCtrlDividerOnOutline, + }, + + ':hover': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.strokeCtrlDividerOnOutline, + }, + + [`& .${splitButtonClassNames.menuButton}`]: { borderLeftWidth: 0 }, + }, + + ':hover:active': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.strokeCtrlDividerOnOutline, + }, + [`& .${splitButtonClassNames.menuButton}`]: { borderLeftWidth: 0 }, + }, + }, + primary: { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.strokeCtrlDividerOnBrand, + }, + + ':hover': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.strokeCtrlDividerOnBrand, + }, + }, + + ':hover:active': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.strokeCtrlDividerOnBrand, + }, + }, + + '@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.strokeCtrlDividerOnSubtle, + }, + + ':hover': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.strokeCtrlDividerOnSubtle, + }, + }, + + ':hover:active': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.strokeCtrlDividerOnSubtle, + }, + }, + }, + transparent: { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: tokens.colorTransparentBackground, + }, + + ':hover': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: tokens.colorTransparentBackgroundHover, + }, + }, + + ':hover:active': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: tokens.colorTransparentBackgroundPressed, + }, + }, + }, + + // Shape variations + circular: {}, + rounded: {}, + square: {}, + + // Disabled styles + disabled: { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.strokeCtrlOnNeutralDisabled, + }, + + ':hover': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.strokeCtrlOnNeutralDisabled, + }, + }, + + ':hover:active': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.strokeCtrlOnNeutralDisabled, + }, + }, + }, + + // 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..3114ebf903d277 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticToggleButtonStyles.styles.ts @@ -0,0 +1,296 @@ +import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { tokens } from '@fluentui/react-theme'; +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: tokens.colorNeutralBackground1Selected, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralRest), + color: tokens.colorNeutralForeground1Selected, + ...shorthands.borderWidth(semanticTokens.strokeWidthDefault), + + [`& .${iconFilledClassName}`]: { + display: 'inline', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlNeutralHover, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralHover), + color: semanticTokens.foregroundCtrlNeutralPrimaryHover, + }, + + ':hover:active': { + backgroundColor: semanticTokens.backgroundCtrlNeutralPressed, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralPressed), + color: semanticTokens.foregroundCtrlNeutralPrimaryPressed, + }, + }, + + // 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: tokens.colorTransparentBackgroundSelected, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnOutlineRest), + ...shorthands.borderWidth(semanticTokens.strokeWidthCtrlOutlineSelected), + + ':hover': { + backgroundColor: tokens.colorTransparentBackgroundHover, + ...shorthands.borderColor(tokens.colorNeutralStroke1Selected), + ...shorthands.borderWidth(semanticTokens.strokeWidthCtrlOutlineSelected), + }, + + ':hover:active': { + ...shorthands.borderColor(tokens.colorNeutralStroke1Selected), + ...shorthands.borderWidth(semanticTokens.strokeWidthCtrlOutlineSelected), + backgroundColor: tokens.colorTransparentBackgroundPressed, + }, + + ...createCustomFocusIndicatorStyle({ + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralRest), + }), + }, + primary: { + backgroundColor: tokens.colorBrandBackgroundSelected, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForegroundOnBrand, + + ':hover': { + backgroundColor: tokens.colorBrandBackgroundHover, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForegroundOnBrand, + }, + + ':hover:active': { + backgroundColor: tokens.colorBrandBackgroundPressed, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForegroundOnBrand, + }, + }, + secondary: { + /* The secondary styles are exactly the same as the base styles. */ + }, + subtle: { + backgroundColor: tokens.colorSubtleBackgroundSelected, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForeground2Selected, + + [`& .${buttonClassNames.icon}`]: { + color: tokens.colorNeutralForeground2BrandSelected, + }, + + ':hover': { + backgroundColor: tokens.colorSubtleBackgroundHover, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForeground2Hover, + }, + + ':hover:active': { + backgroundColor: tokens.colorSubtleBackgroundPressed, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForeground2Pressed, + }, + }, + transparent: { + backgroundColor: tokens.colorTransparentBackgroundSelected, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForeground2BrandSelected, + + ':hover': { + backgroundColor: tokens.colorTransparentBackgroundHover, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForeground2BrandHover, + }, + + ':hover:active': { + backgroundColor: tokens.colorTransparentBackgroundPressed, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForeground2BrandPressed, + }, + }, +}); + +const useRootDisabledStyles = makeStyles({ + // Base styles + base: { + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + + ':hover:active': { + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + }, + + // Appearance variations + outline: { + /* No styles */ + }, + primary: { + ...shorthands.borderColor('transparent'), + + ':hover': { + ...shorthands.borderColor('transparent'), + }, + + ':hover:active': { + ...shorthands.borderColor('transparent'), + }, + }, + secondary: { + /* The secondary styles are exactly the same as the base styles. */ + }, + subtle: { + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + ...shorthands.borderColor('transparent'), + + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + ...shorthands.borderColor('transparent'), + }, + + ':hover:active': { + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + ...shorthands.borderColor('transparent'), + }, + }, + transparent: { + backgroundColor: tokens.colorTransparentBackground, + ...shorthands.borderColor('transparent'), + + ':hover': { + backgroundColor: tokens.colorTransparentBackgroundHover, + ...shorthands.borderColor('transparent'), + }, + + ':hover:active': { + backgroundColor: tokens.colorTransparentBackgroundPressed, + ...shorthands.borderColor('transparent'), + }, + }, +}); + +const useIconCheckedStyles = makeStyles({ + // Appearance variations + subtleOrTransparent: { + color: tokens.colorNeutralForeground2BrandSelected, + }, + // 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; + + 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, + checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, + iconCheckedStyles.highContrast, + getSlotClassNameProp_unstable(state.icon), + ); + } + + useSemanticButtonStyles(state); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Checkbox/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Checkbox/index.ts new file mode 100644 index 00000000000000..29d123d31c110c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Checkbox/index.ts @@ -0,0 +1 @@ +export { useSemanticCheckboxStyles } from './useSemanticCheckboxStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Checkbox/useSemanticCheckboxStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Checkbox/useSemanticCheckboxStyles.styles.ts new file mode 100644 index 00000000000000..f41df4c42bacbb --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Checkbox/useSemanticCheckboxStyles.styles.ts @@ -0,0 +1,240 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; +import { tokens } from '@fluentui/react-theme'; +import { type CheckboxState, checkboxClassNames } from '@fluentui/react-checkbox'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +// CSS variables used internally in Checkbox's styles +const vars = { + indicatorColor: '--fui-Checkbox__indicator--color', + indicatorBorderColor: '--fui-Checkbox__indicator--borderColor', + indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor', +} as const; + +// The indicator size is used by the indicator and label styles +const indicatorSizeMedium = '16px'; +const indicatorSizeLarge = '20px'; + +const useRootBaseClassName = makeResetStyles({ + position: 'relative', + display: 'inline-flex', + cursor: 'pointer', + verticalAlign: 'middle', + color: semanticTokens._ctrlCheckboxForegroundUnchecked, + ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }), +}); + +const useRootStyles = makeStyles({ + unchecked: { + ':hover': { + color: semanticTokens._ctrlCheckboxForegroundUncheckedHover, + [vars.indicatorBorderColor]: semanticTokens.ctrlChoiceBaseStrokeHover, + }, + + ':active': { + color: semanticTokens.foregroundContentNeutralPrimary, + [vars.indicatorBorderColor]: semanticTokens.ctrlChoiceBaseStrokePressed, + }, + }, + + checked: { + color: semanticTokens.foregroundContentNeutralPrimary, + [vars.indicatorBackgroundColor]: semanticTokens.backgroundCtrlActiveBrandRest, + [vars.indicatorColor]: semanticTokens.foregroundCtrlOnActiveBrandRest, + [vars.indicatorBorderColor]: semanticTokens._ctrlCheckboxBorderColorChecked, + + ':hover': { + [vars.indicatorBackgroundColor]: semanticTokens.backgroundCtrlActiveBrandHover, + [vars.indicatorBorderColor]: semanticTokens._ctrlCheckboxBorderColorCheckedHover, + }, + + ':active': { + [vars.indicatorBackgroundColor]: semanticTokens.backgroundCtrlActiveBrandPressed, + [vars.indicatorBorderColor]: semanticTokens._ctrlCheckboxIndicatorBorderColorCheckedPressed, + }, + }, + + mixed: { + color: semanticTokens.foregroundContentNeutralPrimary, + [vars.indicatorBorderColor]: semanticTokens._ctrlCheckboxIndicatorBorderColorMixed, + [vars.indicatorColor]: semanticTokens._ctrlCheckboxIndicatorColorMixed, + + ':hover': { + [vars.indicatorBorderColor]: semanticTokens._ctrlCheckboxIndicatorBorderColorMixedHover, + [vars.indicatorColor]: semanticTokens._ctrlCheckboxIndicatorColorMixedHover, + }, + + ':active': { + [vars.indicatorBorderColor]: semanticTokens._ctrlCheckboxIndicatorBorderColorMixedPressed, + [vars.indicatorColor]: semanticTokens._ctrlCheckboxIndicatorColorMixedPressed, + }, + }, + + disabled: { + cursor: 'default', + + color: semanticTokens.foregroundCtrlOnTransparentDisabled, + [vars.indicatorBorderColor]: semanticTokens.ctrlChoiceBaseStrokeDisabled, + [vars.indicatorColor]: semanticTokens.foregroundCtrlOnActiveBrandDisabled, + + '@media (forced-colors: active)': { + color: 'GrayText', + [vars.indicatorColor]: 'GrayText', + }, + }, +}); + +const useInputBaseClassName = makeResetStyles({ + boxSizing: 'border-box', + cursor: 'inherit', + height: '100%', + margin: 0, + opacity: 0, + position: 'absolute', + top: 0, + // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it. + // This is done so that clicking on that "empty space" still toggles the checkbox. + width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`, +}); + +const useInputStyles = makeStyles({ + before: { + right: 0, + }, + after: { + left: 0, + }, + + large: { + width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`, + }, +}); + +const useIndicatorBaseClassName = makeResetStyles({ + alignSelf: 'flex-start', + boxSizing: 'border-box', + flexShrink: 0, + + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + overflow: 'hidden', + + color: `var(${vars.indicatorColor})`, + backgroundColor: `var(${vars.indicatorBackgroundColor})`, + borderColor: `var(${vars.indicatorBorderColor}, ${semanticTokens.ctrlChoiceBaseStrokeRest})`, + borderStyle: 'solid', + borderWidth: semanticTokens.strokeWidthDefault, + borderRadius: semanticTokens.ctrlChoiceCheckboxCorner, + margin: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`, + fill: 'currentColor', + pointerEvents: 'none', + + fontSize: '12px', + height: indicatorSizeMedium, + width: indicatorSizeMedium, +}); + +const useIndicatorStyles = makeStyles({ + large: { + fontSize: '16px', + height: indicatorSizeLarge, + width: indicatorSizeLarge, + }, + + circular: { borderRadius: semanticTokens.cornerCircular }, +}); + +// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles. +const useLabelStyles = makeStyles({ + base: { + alignSelf: 'center', + color: 'inherit', + cursor: 'inherit', + padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`, + }, + + before: { + paddingRight: tokens.spacingHorizontalXS, + }, + after: { + paddingLeft: tokens.spacingHorizontalXS, + }, + + // Use a (negative) margin to account for the difference between the indicator's height and the label's line height. + // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps. + medium: { + marginTop: `calc((${indicatorSizeMedium} - ${semanticTokens.textRampItemBodyLineHeight}) / 2)`, + marginBottom: `calc((${indicatorSizeMedium} - ${semanticTokens.textRampItemBodyLineHeight}) / 2)`, + }, + large: { + marginTop: `calc((${indicatorSizeLarge} - ${semanticTokens.textRampItemBodyLineHeight}) / 2)`, + marginBottom: `calc((${indicatorSizeLarge} - ${semanticTokens.textRampItemBodyLineHeight}) / 2)`, + }, +}); + +/** + * Apply styling to the Checkbox slots based on the state + */ +export const useSemanticCheckboxStyles = (_state: unknown): CheckboxState => { + 'use no memo'; + + const state = _state as CheckboxState; + + const { checked, disabled, labelPosition, shape, size } = state; + + const rootBaseClassName = useRootBaseClassName(); + const rootStyles = useRootStyles(); + state.root.className = mergeClasses( + state.root.className, + checkboxClassNames.root, + rootBaseClassName, + disabled + ? rootStyles.disabled + : checked === 'mixed' + ? rootStyles.mixed + : checked + ? rootStyles.checked + : rootStyles.unchecked, + getSlotClassNameProp_unstable(state.root), + ); + + const inputBaseClassName = useInputBaseClassName(); + const inputStyles = useInputStyles(); + state.input.className = mergeClasses( + state.input.className, + checkboxClassNames.input, + inputBaseClassName, + size === 'large' && inputStyles.large, + inputStyles[labelPosition], + getSlotClassNameProp_unstable(state.input), + ); + + const indicatorBaseClassName = useIndicatorBaseClassName(); + const indicatorStyles = useIndicatorStyles(); + if (state.indicator) { + state.indicator.className = mergeClasses( + state.indicator.className, + checkboxClassNames.indicator, + indicatorBaseClassName, + size === 'large' && indicatorStyles.large, + shape === 'circular' && indicatorStyles.circular, + getSlotClassNameProp_unstable(state.indicator), + ); + } + + const labelStyles = useLabelStyles(); + if (state.label) { + state.label.className = mergeClasses( + state.label.className, + checkboxClassNames.label, + labelStyles.base, + labelStyles[size], + labelStyles[labelPosition], + getSlotClassNameProp_unstable(state.label), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/index.ts new file mode 100644 index 00000000000000..5ebb22f5989f1f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/index.ts @@ -0,0 +1,5 @@ +export { useSemanticDialogActionsStyles } from './useSemanticDialogActionsStyles.styles'; +export { useSemanticDialogBodyStyles } from './useSemanticDialogBodyStyles.styles'; +export { useSemanticDialogContentStyles } from './useSemanticDialogContentStyles.styles'; +export { useSemanticDialogSurfaceStyles } from './useSemanticDialogSurfaceStyles.styles'; +export { useSemanticDialogTitleStyles } from './useSemanticDialogTitleStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogActionsStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogActionsStyles.styles.ts new file mode 100644 index 00000000000000..1ba75def7666cc --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogActionsStyles.styles.ts @@ -0,0 +1,75 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { + type DialogActionsState, + dialogActionsClassNames, + DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, +} from '@fluentui/react-dialog'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useResetStyles = makeResetStyles({ + gap: semanticTokens.gapBetweenCtrlDefault, + height: 'fit-content', + boxSizing: 'border-box', + display: 'flex', + gridRowStart: 3, + gridRowEnd: 3, + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + flexDirection: 'column', + justifySelf: 'stretch', + }, +}); + +const useStyles = makeStyles({ + gridPositionEnd: { + justifySelf: 'end', + gridColumnStart: 2, + gridColumnEnd: 4, + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + gridColumnStart: 1, + gridRowStart: 4, + gridRowEnd: 'auto', + }, + }, + gridPositionStart: { + justifySelf: 'start', + gridColumnStart: 1, + gridColumnEnd: 2, + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + gridColumnEnd: 4, + gridRowStart: 3, + gridRowEnd: 'auto', + }, + }, + fluidStart: { + gridColumnEnd: 4, + }, + fluidEnd: { + gridColumnStart: 1, + }, +}); + +/** + * Apply styling to the DialogActions slots based on the state + */ +export const useSemanticDialogActionsStyles = (_state: unknown): DialogActionsState => { + 'use no memo'; + + const state = _state as DialogActionsState; + const resetStyles = useResetStyles(); + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + dialogActionsClassNames.root, + resetStyles, + state.position === 'start' && styles.gridPositionStart, + state.position === 'end' && styles.gridPositionEnd, + state.fluid && state.position === 'start' && styles.fluidStart, + state.fluid && state.position === 'end' && styles.fluidEnd, + getSlotClassNameProp_unstable(state.root), + ); + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogBodyStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogBodyStyles.styles.ts new file mode 100644 index 00000000000000..c77092839d5748 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogBodyStyles.styles.ts @@ -0,0 +1,55 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { + dialogBodyClassNames, + DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, + DIALOG_MEDIA_QUERY_SHORT_SCREEN, + type DialogBodyState, +} from '@fluentui/react-dialog'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useResetStyles = makeResetStyles({ + overflow: 'unset', + rowGap: semanticTokens._ctrlDialogGapBetweenContentMedium, + columnGap: semanticTokens.gapBetweenContentSmall, + display: 'grid', + maxHeight: `calc(100vh - 2 * ${semanticTokens.paddingContentLarge})`, + boxSizing: 'border-box', + gridTemplateRows: 'auto 1fr', + gridTemplateColumns: '1fr 1fr auto', + + '@supports (height: 1dvh)': { + maxHeight: `calc(100dvh - 2 * ${semanticTokens.paddingContentLarge})`, + }, + + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + maxWidth: '100vw', + gridTemplateRows: 'auto 1fr auto', + }, + + [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: { + maxHeight: 'unset', + }, +}); + +/** + * Apply styling to the DialogBody slots based on the state + */ +export const useSemanticDialogBodyStyles = (_state: unknown): DialogBodyState => { + 'use no memo'; + + const state = _state as DialogBodyState; + const resetStyles = useResetStyles(); + + state.root.className = mergeClasses( + state.root.className, + dialogBodyClassNames.root, + resetStyles, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogContentStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogContentStyles.styles.ts new file mode 100644 index 00000000000000..bf71aa2780a184 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogContentStyles.styles.ts @@ -0,0 +1,49 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { + dialogContentClassNames, + type DialogContentState, + DIALOG_MEDIA_QUERY_SHORT_SCREEN, +} from '@fluentui/react-dialog'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useStyles = makeResetStyles({ + padding: tokens.strokeWidthThick, + margin: `calc(${tokens.strokeWidthThick} * -1)`, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampReadingBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampReadingBodyLineHeight, + overflowY: 'auto', + minHeight: '32px', + boxSizing: 'border-box', + gridRowStart: 2, + gridRowEnd: 2, + gridColumnStart: 1, + gridColumnEnd: 4, + + [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: { + overflowY: 'unset', + }, +}); + +/** + * Apply styling to the DialogContent slots based on the state + */ +export const useSemanticDialogContentStyles = (_state: unknown): DialogContentState => { + 'use no memo'; + + const state = _state as DialogContentState; + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + dialogContentClassNames.root, + styles, + getSlotClassNameProp_unstable(state.root), + ); + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogSurfaceStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogSurfaceStyles.styles.ts new file mode 100644 index 00000000000000..0925c32914f178 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogSurfaceStyles.styles.ts @@ -0,0 +1,103 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; +import { + dialogSurfaceClassNames, + DialogSurfaceState, + DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, + DIALOG_MEDIA_QUERY_SHORT_SCREEN, +} from '@fluentui/react-dialog'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useRootBaseStyle = makeResetStyles({ + ...createFocusOutlineStyle(), + inset: 0, + padding: semanticTokens.paddingContentLarge, + margin: 'auto', + borderStyle: 'none', + overflow: 'unset', + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlDialogStroke}`, + borderRadius: semanticTokens.ctrlDialogBaseCorner, + + display: 'block', + userSelect: 'unset', + visibility: 'unset', + position: 'fixed', + height: 'fit-content', + maxWidth: '600px', + maxHeight: '100vh', + boxSizing: 'border-box', + backgroundColor: semanticTokens.ctrlDialogLayerBackground, + color: semanticTokens.foregroundContentNeutralPrimary, + // Same styles as DialogSurfaceMotion last keyframe, + // to ensure dialog will be properly styled when surfaceMotion is opted-out + boxShadow: semanticTokens.ctrlDialogBaseShadow, + + '@supports (height: 1dvh)': { + maxHeight: '100dvh', + }, + + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + maxWidth: '100vw', + }, + + [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: { + overflowY: 'auto', + // We need to offset the scrollbar by adding transparent borders otherwise + // it conflicts with the border radius. + paddingRight: `calc(${semanticTokens.paddingContentLarge} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`, + borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + }, +}); + +const useBackdropBaseStyle = makeResetStyles({ + inset: '0px', + backgroundColor: semanticTokens.backgroundSmoke, + position: 'fixed', +}); + +const useStyles = makeStyles({ + nestedDialogBackdrop: { + backgroundColor: semanticTokens.nullColor, + }, +}); + +/** + * Apply styling to the DialogSurface slots based on the state + */ +export const useSemanticDialogSurfaceStyles = (_state: unknown): DialogSurfaceState => { + 'use no memo'; + + const state = _state as DialogSurfaceState; + const { isNestedDialog, root, backdrop } = state; + + const rootBaseStyle = useRootBaseStyle(); + + const backdropBaseStyle = useBackdropBaseStyle(); + const styles = useStyles(); + + root.className = mergeClasses( + root.className, + dialogSurfaceClassNames.root, + rootBaseStyle, + getSlotClassNameProp_unstable(root), + ); + + if (backdrop) { + backdrop.className = mergeClasses( + backdrop.className, + dialogSurfaceClassNames.backdrop, + backdropBaseStyle, + isNestedDialog && styles.nestedDialogBackdrop, + getSlotClassNameProp_unstable(backdrop), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogTitleStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogTitleStyles.styles.ts new file mode 100644 index 00000000000000..5370b4cb506979 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogTitleStyles.styles.ts @@ -0,0 +1,89 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { dialogTitleClassNames, type DialogTitleState } from '@fluentui/react-dialog'; +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useRootResetStyles = makeResetStyles({ + fontFamily: semanticTokens.textStyleDefaultHeaderFontFamily, + fontSize: semanticTokens.textRampSectionHeaderFontSize, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + lineHeight: semanticTokens.textRampSectionHeaderLineHeight, + margin: 0, + gridRowStart: 1, + gridRowEnd: 1, + gridColumnStart: 1, + gridColumnEnd: 3, +}); + +const useStyles = makeStyles({ + rootWithoutAction: { + gridColumnEnd: 4, + }, +}); + +/** + * Styles for the action slot + */ +const useActionResetStyles = makeResetStyles({ + gridRowStart: 1, + gridRowEnd: 1, + gridColumnStart: 3, + justifySelf: 'end', + alignSelf: 'start', +}); + +/** + * Styles to be applied on internal elements used by default action on non-modal Dialog + * @internal + */ +export const useDialogTitleInternalStyles = makeResetStyles({ + ...createFocusOutlineStyle(), + overflow: 'visible', + padding: 0, + borderStyle: 'none', + position: 'relative', + boxSizing: 'content-box', + backgroundColor: 'inherit', + color: 'inherit', + fontFamily: 'inherit', + fontSize: 'inherit', + cursor: 'pointer', + lineHeight: 0, + WebkitAppearance: 'button', + textAlign: 'unset', +}); + +/** + * Apply styling to the DialogTitle slots based on the state + */ +export const useSemanticDialogTitleStyles = (_state: unknown): DialogTitleState => { + 'use no memo'; + + const state = _state as DialogTitleState; + const rootResetStyles = useRootResetStyles(); + const actionResetStyles = useActionResetStyles(); + const styles = useStyles(); + + state.root.className = mergeClasses( + state.root.className, + dialogTitleClassNames.root, + rootResetStyles, + !state.action && styles.rootWithoutAction, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.action) { + state.action.className = mergeClasses( + state.action.className, + dialogTitleClassNames.action, + actionResetStyles, + getSlotClassNameProp_unstable(state.action), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Divider/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Divider/index.ts new file mode 100644 index 00000000000000..ae7b6861aa3956 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Divider/index.ts @@ -0,0 +1 @@ +export { useSemanticDividerStyles } from './useSemanticDividerStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Divider/useSemanticDividerStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Divider/useSemanticDividerStyles.styles.ts new file mode 100644 index 00000000000000..865c3f5d8c1446 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Divider/useSemanticDividerStyles.styles.ts @@ -0,0 +1,280 @@ +import { mergeClasses, shorthands, makeStyles } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { dividerClassNames, type DividerState } from '@fluentui/react-divider'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useBaseStyles = makeStyles({ + // Base styles + base: { + alignItems: 'center', + boxSizing: 'border-box', + display: 'flex', + flexDirection: 'row', + flexGrow: 1, + position: 'relative', + + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption1FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + letterSpacing: semanticTokens.textStyleDefaultRegularLetterSpacing, + textAlign: 'center', + + '::before': { + boxSizing: 'border-box', + display: 'flex', + flexGrow: 1, + }, + + '::after': { + boxSizing: 'border-box', + display: 'flex', + flexGrow: 1, + }, + }, + + // Childless styles + childless: { + '::before': { + marginBottom: 0, + marginRight: 0, + }, + + '::after': { + marginLeft: 0, + marginTop: 0, + }, + }, + + // Alignment variations + start: { + '::after': { + content: '""', + }, + }, + center: { + '::before': { + content: '""', + }, + '::after': { + content: '""', + }, + }, + end: { + '::before': { + content: '""', + }, + }, + + // Appearance variations + brand: { + color: semanticTokens.foregroundContentBrandPrimary, + + '::before': { + ...shorthands.borderColor(semanticTokens.strokeDividerBrand), + }, + + '::after': { + ...shorthands.borderColor(semanticTokens.strokeDividerBrand), + }, + }, + default: { + color: semanticTokens.foregroundContentNeutralSecondary, + + '::before': { + ...shorthands.borderColor(semanticTokens.strokeDividerDefault), + }, + + '::after': { + ...shorthands.borderColor(semanticTokens.strokeDividerDefault), + }, + }, + subtle: { + color: semanticTokens._ctrlDividerForegroundSubtle, + + '::before': { + ...shorthands.borderColor(semanticTokens.strokeDividerSubtle), + }, + + '::after': { + ...shorthands.borderColor(semanticTokens.strokeDividerSubtle), + }, + }, + strong: { + color: semanticTokens.foregroundContentNeutralPrimary, + + '::before': { + ...shorthands.borderColor(semanticTokens.strokeDividerStrong), + }, + + '::after': { + ...shorthands.borderColor(semanticTokens.strokeDividerStrong), + }, + }, +}); + +const useHorizontalStyles = makeStyles({ + // Base styles + base: { + width: '100%', + + '::before': { + borderTopStyle: 'solid', + borderTopWidth: semanticTokens.strokeWidthDividerDefault, + minWidth: semanticTokens.ctrlDividerFixedLineLength, + }, + + '::after': { + borderTopStyle: 'solid', + borderTopWidth: semanticTokens.strokeWidthDividerDefault, + minWidth: semanticTokens.ctrlDividerFixedLineLength, + }, + }, + + // Inset styles + inset: { + paddingLeft: semanticTokens.paddingCtrlHorizontalDefault, + paddingRight: semanticTokens.paddingCtrlHorizontalDefault, + }, + + // Alignment variations + start: { + '::before': { + content: '""', + marginRight: semanticTokens.paddingCtrlHorizontalDefault, + maxWidth: semanticTokens.ctrlDividerFixedLineLength, + }, + + '::after': { + marginLeft: semanticTokens.paddingCtrlHorizontalDefault, + }, + }, + center: { + '::before': { + marginRight: semanticTokens.paddingCtrlHorizontalDefault, + }, + '::after': { + marginLeft: semanticTokens.paddingCtrlHorizontalDefault, + }, + }, + end: { + '::before': { + marginRight: semanticTokens.paddingCtrlHorizontalDefault, + }, + '::after': { + content: '""', + marginLeft: semanticTokens.paddingCtrlHorizontalDefault, + maxWidth: semanticTokens.ctrlDividerFixedLineLength, + }, + }, +}); + +const useVerticalStyles = makeStyles({ + // Base styles + base: { + flexDirection: 'column', + minHeight: '20px', + + '::before': { + borderRightStyle: 'solid', + borderRightWidth: semanticTokens.strokeWidthDividerDefault, + minHeight: semanticTokens.ctrlDividerFixedLineLength, + }, + + '::after': { + borderRightStyle: 'solid', + borderRightWidth: semanticTokens.strokeWidthDividerDefault, + minHeight: semanticTokens.ctrlDividerFixedLineLength, + }, + }, + + // Inset styles + inset: { + marginTop: semanticTokens.paddingCtrlHorizontalDefault, + marginBottom: semanticTokens.paddingCtrlHorizontalDefault, + }, + + // With children styles + withChildren: { + minHeight: '84px', + }, + + // Alignment variations + start: { + '::before': { + content: '""', + marginBottom: semanticTokens.paddingCtrlHorizontalDefault, + maxHeight: semanticTokens.ctrlDividerFixedLineLength, + }, + + '::after': { + marginTop: semanticTokens.paddingCtrlHorizontalDefault, + }, + }, + center: { + '::before': { + marginBottom: semanticTokens.paddingCtrlHorizontalDefault, + }, + '::after': { + marginTop: semanticTokens.paddingCtrlHorizontalDefault, + }, + }, + end: { + '::before': { + marginBottom: semanticTokens.paddingCtrlHorizontalDefault, + }, + '::after': { + content: '""', + marginTop: semanticTokens.paddingCtrlHorizontalDefault, + maxHeight: semanticTokens.ctrlDividerFixedLineLength, + }, + }, +}); + +export const useSemanticDividerStyles = (_state: unknown): DividerState => { + 'use no memo'; + + const state = _state as DividerState; + + const baseStyles = useBaseStyles(); + const horizontalStyles = useHorizontalStyles(); + const verticalStyles = useVerticalStyles(); + + const { alignContent, appearance, inset, vertical } = state; + + state.root.className = mergeClasses( + state.root.className, + dividerClassNames.root, + + // Base styles + baseStyles.base, + baseStyles[alignContent], + appearance && baseStyles[appearance], + + // Horizontal styles + !vertical && horizontalStyles.base, + !vertical && inset && horizontalStyles.inset, + !vertical && horizontalStyles[alignContent], + + // Vertical styles + vertical && verticalStyles.base, + vertical && inset && verticalStyles.inset, + vertical && verticalStyles[alignContent], + vertical && state.root.children !== undefined && verticalStyles.withChildren, + + // Childless styles + state.root.children === undefined && baseStyles.childless, + + getSlotClassNameProp_unstable(state.root), + ); + + if (state.wrapper) { + state.wrapper.className = mergeClasses( + state.wrapper.className, + dividerClassNames.wrapper, + getSlotClassNameProp_unstable(state.wrapper), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/index.ts new file mode 100644 index 00000000000000..b68e642906b2ec --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/index.ts @@ -0,0 +1,5 @@ +export { useSemanticInlineDrawerStyles } from './useSemanticInlineDrawerStyles.styles'; +export { useSemanticDrawerBodyStyles } from './useSemanticDrawerBodyStyles.styles'; +export { useSemanticDrawerHeaderStyles } from './useSemanticDrawerHeaderStyles.styles'; +export { useSemanticDrawerFooterStyles } from './useSemanticDrawerFooterStyles.styles'; +export { useSemanticOverlayDrawerSurfaceStyles } from './useSemanticOverlayDrawerSurfaceStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/semanticDrawSeparatorStyles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/semanticDrawSeparatorStyles.ts new file mode 100644 index 00000000000000..57319686a8a5a8 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/semanticDrawSeparatorStyles.ts @@ -0,0 +1,16 @@ +import { tokens } from '@fluentui/react-theme'; +import { GriffelStyle } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +export const drawerSeparatorStyles: GriffelStyle = { + height: '1px', + position: 'absolute', + right: 0, + left: 0, + opacity: 0, + backgroundColor: semanticTokens.strokeDividerStrong, + transitionDuration: tokens.durationNormal, + transitionProperty: 'opacity', + transitionTimingFunction: tokens.curveEasyEase, + content: '""', +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/semanticDrawerMotion.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/semanticDrawerMotion.ts new file mode 100644 index 00000000000000..59058aecd25e8e --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/semanticDrawerMotion.ts @@ -0,0 +1,134 @@ +import { createPresenceComponent, motionTokens } from '@fluentui/react-motion'; +import { tokens } from '@fluentui/react-theme'; +import { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +import type { DrawerProps } from '@fluentui/react-drawer'; +import { drawerCSSVars } from './useSemanticDrawerBaseStyles.styles'; + +export type DrawerMotionParams = Required< + Pick & Pick +>; +export type OverlayDrawerSurfaceMotionParams = Required>; + +const durations: Record, number> = { + small: motionTokens.durationGentle, + medium: motionTokens.durationSlow, + large: motionTokens.durationSlower, + full: motionTokens.durationUltraSlow, +}; + +/** + * @internal + */ +export function getPositionTransform( + position: DrawerProps['position'], + sizeVar: string, + dir: FluentProviderContextValue['dir'], +) { + const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`; + const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`; + const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`; + + if (position === 'start') { + return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform; + } + + if (position === 'end') { + return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform; + } + + if (position === 'bottom') { + return bottomToTopTransform; + } + + return 'translate3d(0, 0, 0)'; +} + +/** + * @internal + */ +export const InlineDrawerMotion = createPresenceComponent(({ position, size, dir }) => { + const keyframes: Keyframe[] = [ + { + /** + * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs + * The work will be done in the #32817 + */ + transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir), + opacity: 0, + }, + { transform: 'translate3d(0, 0, 0)', opacity: 1 }, + ]; + const duration = durations[size]; + + return { + enter: { + keyframes, + duration, + easing: motionTokens.curveDecelerateMid, + }, + exit: { + keyframes: [...keyframes].reverse(), + duration, + easing: motionTokens.curveAccelerateMin, + }, + }; +}); + +/** + * @internal + */ +export const OverlayDrawerMotion = createPresenceComponent(({ position, size, dir }) => { + const keyframes: Keyframe[] = [ + { + /** + * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs + * The work will be done in the #32817 + */ + transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir), + boxShadow: `0px ${tokens.colorTransparentBackground}`, + opacity: 0, + }, + { + transform: 'translate3d(0, 0, 0)', + boxShadow: semanticTokens.shadowFlyout, + opacity: 1, + }, + ]; + const duration = durations[size]; + + return { + enter: { + keyframes, + duration, + easing: motionTokens.curveDecelerateMid, + }, + exit: { + keyframes: [...keyframes].reverse(), + duration, + easing: motionTokens.curveAccelerateMin, + }, + }; +}); + +/** + * @internal + */ +export const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => { + const keyframes = [{ opacity: 0 }, { opacity: 1 }]; + const duration = durations[size]; + + return { + enter: { + keyframes, + easing: motionTokens.curveLinear, + duration, + }, + exit: { + keyframes: [...keyframes].reverse(), + easing: motionTokens.curveLinear, + duration, + }, + }; +}); diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerBaseStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerBaseStyles.styles.ts new file mode 100644 index 00000000000000..0dd03a82db1553 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerBaseStyles.styles.ts @@ -0,0 +1,104 @@ +import { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * CSS variable names used internally for uniform styling in Drawer. + */ +export const drawerCSSVars = { + drawerSizeVar: '--fui-Drawer--size', +}; + +/** + * Default shared styles for the Drawer component + */ +export const drawerDefaultStyles: GriffelResetStyle = { + overflow: 'hidden', + + width: `var(${drawerCSSVars.drawerSizeVar})`, + maxWidth: '100vw', + height: 'auto', + maxHeight: '100vh', + boxSizing: 'border-box', + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + justifyContent: 'flex-start', + backgroundColor: semanticTokens.backgroundFlyoutSolid, + color: semanticTokens.foregroundContentNeutralPrimary, +}; + +/** + * Shared dynamic styles for the Drawer component + */ +const useDrawerStyles = makeStyles({ + /* Positioning */ + start: { + borderRight: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.nullColor}`, + + left: 0, + right: 'auto', + borderEndEndRadius: semanticTokens.cornerFlyoutRest, + borderStartEndRadius: semanticTokens.cornerFlyoutRest, + }, + end: { + borderLeft: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.nullColor}`, + + right: 0, + left: 'auto', + borderStartStartRadius: semanticTokens.cornerFlyoutRest, + borderEndStartRadius: semanticTokens.cornerFlyoutRest, + }, + bottom: { + bottom: 0, + top: 'auto', + borderTopRightRadius: semanticTokens.cornerFlyoutRest, + borderTopLeftRadius: semanticTokens.cornerFlyoutRest, + }, + + /* Sizes */ + small: { + [drawerCSSVars.drawerSizeVar]: '320px', + }, + medium: { + [drawerCSSVars.drawerSizeVar]: '592px', + }, + large: { + [drawerCSSVars.drawerSizeVar]: '940px', + }, + full: { + [drawerCSSVars.drawerSizeVar]: '100vw', + }, +}); + +export const useDrawerBottomBaseStyles = makeStyles({ + /* Sizes for position bottom */ + small: { + [drawerCSSVars.drawerSizeVar]: '320px', + }, + medium: { + [drawerCSSVars.drawerSizeVar]: '592px', + }, + large: { + [drawerCSSVars.drawerSizeVar]: '940px', + }, + full: { + [drawerCSSVars.drawerSizeVar]: '100%', + }, +}); + +export const useSemanticDrawerBaseClassNames = ({ + position, + size, +}: { + position: 'start' | 'end' | 'bottom'; + size: 'small' | 'medium' | 'large' | 'full'; +}) => { + const baseStyles = useDrawerStyles(); + const bottomBaseStyles = useDrawerBottomBaseStyles(); + + return mergeClasses( + baseStyles[position], + position === 'bottom' && bottomBaseStyles[size], + position !== 'bottom' && baseStyles[size], + ); +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerBodyStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerBodyStyles.styles.ts new file mode 100644 index 00000000000000..ee9e9c6a466280 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerBodyStyles.styles.ts @@ -0,0 +1,45 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import type { DrawerBodyState } from '@fluentui/react-drawer'; +import { drawerBodyClassNames } from '@fluentui/react-drawer'; + +/** + * Styles for the root slot + */ +const useStyles = makeResetStyles({ + padding: `0 ${semanticTokens.paddingContentLarge}`, + flex: 1, + alignSelf: 'stretch', + position: 'relative', + zIndex: 1, + overflow: 'auto', + + ':last-child': { + paddingBottom: `calc(${semanticTokens.paddingContentLarge} + 1px)`, + }, + + ':first-child': { + paddingTop: `calc(${semanticTokens.paddingContentLarge} + 1px)`, + }, +}); + +/** + * Apply styling to the DrawerBody slots based on the state + */ +export const useSemanticDrawerBodyStyles = (_state: unknown): DrawerBodyState => { + 'use no memo'; + + const state = _state as DrawerBodyState; + + const styles = useStyles(); + + state.root.className = mergeClasses( + state.root.className, + drawerBodyClassNames.root, + styles, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerFooterStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerFooterStyles.styles.ts new file mode 100644 index 00000000000000..713bcb3611dfea --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerFooterStyles.styles.ts @@ -0,0 +1,60 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { drawerSeparatorStyles } from './semanticDrawSeparatorStyles'; + +import { drawerFooterClassNames, type DrawerFooterState } from '@fluentui/react-drawer'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useStyles = makeResetStyles({ + width: '100%', + maxWidth: '100%', + padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`, + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + columnGap: tokens.spacingHorizontalS, + boxSizing: 'border-box', + position: 'relative', + zIndex: 2, +}); + +const useDrawerFooterStyles = makeStyles({ + separator: { + '::before': { + ...drawerSeparatorStyles, + top: 0, + }, + }, + + separatorVisible: { + '::before': { + opacity: 1, + }, + }, +}); + +/** + * Apply styling to the DrawerFooter slots based on the state + */ +export const useSemanticDrawerFooterStyles = (_state: unknown): DrawerFooterState => { + 'use no memo'; + + const state = _state as DrawerFooterState; + + const styles = useStyles(); + const rootStyles = useDrawerFooterStyles(); + + state.root.className = mergeClasses( + state.root.className, + drawerFooterClassNames.root, + styles, + state.scrollState !== 'none' && rootStyles.separator, + ['middle', 'top'].includes(state.scrollState) && rootStyles.separatorVisible, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerHeaderStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerHeaderStyles.styles.ts new file mode 100644 index 00000000000000..678247dfe56910 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerHeaderStyles.styles.ts @@ -0,0 +1,59 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { drawerSeparatorStyles } from './semanticDrawSeparatorStyles'; +import { drawerHeaderClassNames, type DrawerHeaderState } from '@fluentui/react-drawer'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useStyles = makeResetStyles({ + width: '100%', + maxWidth: '100%', + padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`, + gap: tokens.spacingHorizontalS, + alignSelf: 'stretch', + display: 'flex', + flexDirection: 'column', + boxSizing: 'border-box', + position: 'relative', + zIndex: 2, +}); + +const useDrawerHeaderStyles = makeStyles({ + separator: { + '::after': { + ...drawerSeparatorStyles, + bottom: 0, + }, + }, + + separatorVisible: { + '::after': { + opacity: 1, + }, + }, +}); + +/** + * Apply styling to the DrawerHeader slots based on the state + */ +export const useSemanticDrawerHeaderStyles = (_state: unknown): DrawerHeaderState => { + 'use no memo'; + + const state = _state as DrawerHeaderState; + + const styles = useStyles(); + const rootStyles = useDrawerHeaderStyles(); + + state.root.className = mergeClasses( + state.root.className, + drawerHeaderClassNames.root, + styles, + state.scrollState !== 'none' && rootStyles.separator, + ['middle', 'bottom'].includes(state.scrollState) && rootStyles.separatorVisible, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticInlineDrawerStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticInlineDrawerStyles.styles.ts new file mode 100644 index 00000000000000..d55e6a60024234 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticInlineDrawerStyles.styles.ts @@ -0,0 +1,79 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +import { + drawerCSSVars, + drawerDefaultStyles, + useSemanticDrawerBaseClassNames, +} from './useSemanticDrawerBaseStyles.styles'; +import { inlineDrawerClassNames, type InlineDrawerState } from '@fluentui/react-drawer'; + +const useDrawerResetStyles = makeResetStyles({ + ...drawerDefaultStyles, + position: 'relative', +}); + +/** + * Styles for the root slot + */ +const borderValue = ` ${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeFlyout}`; +const useDrawerRootStyles = makeStyles({ + /* Separator */ + separatorStart: { borderRight: borderValue }, + separatorEnd: { borderLeft: borderValue }, + separatorBottom: { borderTop: borderValue }, + + /* Positioning */ + start: {}, + end: {}, + bottom: { + width: '100%', + height: `var(${drawerCSSVars.drawerSizeVar})`, + }, +}); + +function getSeparatorClass(state: InlineDrawerState, classNames: ReturnType) { + if (!state.separator) { + return undefined; + } + + switch (state.position) { + case 'start': + return classNames.separatorStart; + + case 'end': + return classNames.separatorEnd; + + case 'bottom': + return classNames.separatorBottom; + + default: + return undefined; + } +} + +/** + * Apply styling to the InlineDrawer slots based on the state + */ +export const useSemanticInlineDrawerStyles = (_state: unknown): InlineDrawerState => { + 'use no memo'; + + const state = _state as InlineDrawerState; + + const resetStyles = useDrawerResetStyles(); + const baseClassNames = useSemanticDrawerBaseClassNames(state); + const rootStyles = useDrawerRootStyles(); + + state.root.className = mergeClasses( + state.root.className, + inlineDrawerClassNames.root, + resetStyles, + baseClassNames, + getSeparatorClass(state, rootStyles), + rootStyles[state.position], + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticOverlayDrawerSurfaceStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticOverlayDrawerSurfaceStyles.styles.ts new file mode 100644 index 00000000000000..dfaa85d301a939 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticOverlayDrawerSurfaceStyles.styles.ts @@ -0,0 +1,43 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { type DialogSurfaceState } from '@fluentui/react-dialog'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the backdrop slot + */ +const useBackdropResetStyles = makeResetStyles({ + inset: '0px', + position: 'fixed', + backgroundColor: tokens.colorBackgroundOverlay, +}); + +const useBackdropStyles = makeStyles({ + nested: { + backgroundColor: semanticTokens.nullColor, + }, +}); + +/** + * Apply styling to the OverlayDrawerSurface slots based on the state + */ +export const useSemanticOverlayDrawerSurfaceStyles = (_state: unknown): DialogSurfaceState => { + 'use no memo'; + + const state = _state as DialogSurfaceState; + + const backdropResetStyles = useBackdropResetStyles(); + const backdropStyles = useBackdropStyles(); + + if (state.backdrop) { + state.backdrop.className = mergeClasses( + state.backdrop.className, + backdropResetStyles, + state.isNestedDialog && backdropStyles.nested, + getSlotClassNameProp_unstable(state.backdrop), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/index.ts new file mode 100644 index 00000000000000..67b452f56ac58f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/index.ts @@ -0,0 +1 @@ +export { useSemanticFieldStyles } from './useSemanticFieldStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/useSemanticFieldStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/useSemanticFieldStyles.styles.ts new file mode 100644 index 00000000000000..ec57da32ecfe3c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/useSemanticFieldStyles.styles.ts @@ -0,0 +1,179 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { type FieldState, fieldClassNames } from '@fluentui/react-field'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +// Size of the icon in the validation message +const iconSize = '12px'; + +/** + * Styles for the root slot + */ +const useRootStyles = makeStyles({ + base: { + display: 'grid', + }, + + // In horizontal layout, the field is a grid with the label taking up the entire first column. + // The last row is slack space in case the label is taller than the rest of the content. + horizontal: { + gridTemplateColumns: '33% 1fr', + gridTemplateRows: 'auto auto auto 1fr', + }, + + // In horizontal layout without a label, replace the label's column with padding. + // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned. + horizontalNoLabel: { + paddingLeft: '33%', + gridTemplateColumns: '1fr', + }, +}); + +const useLabelStyles = makeStyles({ + vertical: { + paddingTop: semanticTokens._ctrlFieldPaddingCtrlTextTop, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlTextBottom, + marginBottom: semanticTokens.gapBetweenContentXSmall, + }, + + verticalLarge: { + paddingTop: semanticTokens._ctrlFieldPaddingCtrlLgTextTop, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlLgTextBottom, + marginBottom: semanticTokens._ctrlFieldGapBetweenContentXSmall, + }, + + horizontal: { + paddingTop: semanticTokens._ctrlFieldPaddingCtrlTextTopHorizontal, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlTextBottomHorizontal, + marginRight: semanticTokens._ctrlFieldPaddingCtrlTextSide, + gridRowStart: '1', + gridRowEnd: '-1', + }, + + horizontalSmall: { + paddingTop: semanticTokens._ctrlFieldPaddingCtrlSmTextTop, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlSmTextBottom, + }, + + horizontalLarge: { + // To align the label text with the Input text, it should be centered within the 40px height of the Input. + // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token. + paddingTop: semanticTokens._ctrlFieldPaddingCtrlLgTextTopHorizontal, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlLgTextBottomHorizontal, + }, +}); + +const useSecondaryTextBaseClassName = makeResetStyles({ + marginTop: semanticTokens.gapBetweenContentXSmall, + color: semanticTokens._ctrlFieldForegroundCtrlNeutralSecondaryRest, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontSize: semanticTokens.textRampMetadataFontSize, + lineHeight: semanticTokens.textRampMetadataLineHeight, +}); + +const useSecondaryTextStyles = makeStyles({ + error: { + color: semanticTokens._ctrlFieldStatusDangerTintForeground, + }, + + withIcon: { + // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon. + paddingLeft: `calc(${iconSize} + ${semanticTokens.gapBetweenTextSmall})`, + }, +}); + +const useValidationMessageIconBaseClassName = makeResetStyles({ + display: 'inline-block', + fontSize: iconSize, + // Negative left margin puts the icon in the gutter of the validation message div's withIcon style. + marginLeft: `calc(-${iconSize} - ${semanticTokens.gapBetweenTextSmall})`, + marginRight: semanticTokens.gapBetweenTextSmall, + // Line height of 0 prevents the verticalAlign from affecting the line height of the text. + lineHeight: '0', + // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding). + verticalAlign: '-1px', +}); + +const useValidationMessageIconStyles = makeStyles({ + error: { + color: semanticTokens._ctrlFieldStatusDangerTintForeground, + }, + warning: { + color: semanticTokens._ctrlFieldStatusWarningTintForeground, + }, + success: { + color: semanticTokens._ctrlFieldStatusSuccessTintForeground, + }, +}); + +/** + * Apply styling to the Field slots based on the state + */ +export const useSemanticFieldStyles = (_state: unknown): FieldState => { + 'use no memo'; + + const state = _state as FieldState; + const { validationState, size } = state; + const horizontal = state.orientation === 'horizontal'; + + const rootStyles = useRootStyles(); + state.root.className = mergeClasses( + state.root.className, + fieldClassNames.root, + rootStyles.base, + horizontal && rootStyles.horizontal, + horizontal && !state.label && rootStyles.horizontalNoLabel, + getSlotClassNameProp_unstable(state.root), + ); + + const labelStyles = useLabelStyles(); + if (state.label) { + state.label.className = mergeClasses( + state.label.className, + fieldClassNames.label, + horizontal && labelStyles.horizontal, + horizontal && size === 'small' && labelStyles.horizontalSmall, + horizontal && size === 'large' && labelStyles.horizontalLarge, + !horizontal && labelStyles.vertical, + !horizontal && size === 'large' && labelStyles.verticalLarge, + getSlotClassNameProp_unstable(state.label), + ); + } + + const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName(); + const validationMessageIconStyles = useValidationMessageIconStyles(); + if (state.validationMessageIcon) { + state.validationMessageIcon.className = mergeClasses( + state.validationMessageIcon.className, + fieldClassNames.validationMessageIcon, + validationMessageIconBaseClassName, + validationState !== 'none' && validationMessageIconStyles[validationState], + getSlotClassNameProp_unstable(state.validationMessageIcon), + ); + } + + const secondaryTextBaseClassName = useSecondaryTextBaseClassName(); + const secondaryTextStyles = useSecondaryTextStyles(); + if (state.validationMessage) { + state.validationMessage.className = mergeClasses( + state.validationMessage.className, + fieldClassNames.validationMessage, + secondaryTextBaseClassName, + validationState === 'error' && secondaryTextStyles.error, + !!state.validationMessageIcon && secondaryTextStyles.withIcon, + getSlotClassNameProp_unstable(state.validationMessage), + ); + } + + if (state.hint) { + state.hint.className = mergeClasses( + state.hint.className, + fieldClassNames.hint, + secondaryTextBaseClassName, + getSlotClassNameProp_unstable(state.hint), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Image/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Image/index.ts new file mode 100644 index 00000000000000..9c2c5843cbe2a3 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Image/index.ts @@ -0,0 +1 @@ +export { useSemanticImageStyles } from './useSemanticImageStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Image/useSemanticImageStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Image/useSemanticImageStyles.styles.ts new file mode 100644 index 00000000000000..52b5529f81d7b4 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Image/useSemanticImageStyles.styles.ts @@ -0,0 +1,89 @@ +import { shorthands, mergeClasses, makeStyles } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { imageClassNames, type ImageState } from '@fluentui/react-image'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useStyles = makeStyles({ + // Base styles + base: { + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralRest), + borderRadius: semanticTokens.cornerZero, + + boxSizing: 'border-box', + display: 'inline-block', + }, + + // Bordered styles + bordered: { + ...shorthands.borderStyle('solid'), + ...shorthands.borderWidth(semanticTokens.strokeWidthDefault), + }, + + // Shape variations + circular: { borderRadius: semanticTokens.cornerCircular }, + rounded: { borderRadius: semanticTokens.cornerCtrlRest }, + square: { + /* The square styles are exactly the same as the base styles. */ + }, + + // Shadow styles + shadow: { + boxShadow: tokens.shadow4, + }, + + // Fit variations + center: { + objectFit: 'none', + objectPosition: 'center', + height: '100%', + width: '100%', + }, + contain: { + objectFit: 'contain', + objectPosition: 'center', + height: '100%', + width: '100%', + }, + default: { + /* The default styles are exactly the same as the base styles. */ + }, + cover: { + objectFit: 'cover', + objectPosition: 'center', + height: '100%', + width: '100%', + }, + none: { + objectFit: 'none', + objectPosition: 'left top', + height: '100%', + width: '100%', + }, + + // Block styles + block: { + width: '100%', + }, +}); + +export const useSemanticImageStyles = (_state: unknown): ImageState => { + 'use no memo'; + + const state = _state as ImageState; + const styles = useStyles(); + + state.root.className = mergeClasses( + state.root.className, + imageClassNames.root, + styles.base, + state.block && styles.block, + state.bordered && styles.bordered, + state.shadow && styles.shadow, + styles[state.fit], + styles[state.shape], + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/index.ts new file mode 100644 index 00000000000000..d9dba62f5300d9 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/index.ts @@ -0,0 +1,2 @@ +export { useSemanticInfoButtonStyles } from './useSemanticInfoButtonStyles.styles'; +export { useSemanticInfoLabelStyles } from './useSemanticInfoLabelStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts new file mode 100644 index 00000000000000..0a6c21390b64ab --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts @@ -0,0 +1,141 @@ +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; +import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { infoButtonClassNames, type InfoButtonState } from '@fluentui/react-infolabel'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * Styles for the root slot + */ +const useButtonStyles = makeStyles({ + base: { + alignItems: 'center', + boxSizing: 'border-box', + display: 'inline-flex', + justifyContent: 'center', + textDecorationLine: 'none', + verticalAlign: 'middle', + position: 'relative', + + backgroundColor: semanticTokens.nullColor, + color: semanticTokens.foregroundCtrlOnTransparentRest, + + ...shorthands.borderStyle('none'), + borderRadius: semanticTokens.cornerCtrlRest, + margin: '0', + padding: semanticTokens.gapInsideCtrlSmDefault, + + [`& .${iconFilledClassName}`]: { + display: 'none', + }, + [`& .${iconRegularClassName}`]: { + display: 'inline-flex', + }, + + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlOutlineHover, + color: semanticTokens.foregroundCtrlOnTransparentHover, + cursor: 'pointer', + + [`& .${iconFilledClassName}`]: { + display: 'inline-flex', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + }, + ':hover:active': { + backgroundColor: semanticTokens.backgroundCtrlOutlinePressed, + color: semanticTokens.foregroundCtrlOnTransparentPressed, + }, + }, + + selected: { + backgroundColor: semanticTokens.nullColor, + color: semanticTokens._ctrlInfoLabelForegroundColorSelected, + + [`& .${iconFilledClassName}`]: { + display: 'inline-flex', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + + '@media (forced-colors: active)': { + backgroundColor: 'Highlight', + color: 'Canvas', + }, + }, + + highContrast: { + '@media (forced-colors: active)': { + color: 'CanvasText', + + ':hover,:hover:active': { + forcedColorAdjust: 'none', + backgroundColor: 'Highlight', + color: 'Canvas', + }, + }, + }, + + focusIndicator: createFocusOutlineStyle(), + + large: { + padding: semanticTokens.gapBetweenContentXSmall, + }, +}); + +const usePopoverSurfaceStyles = makeStyles({ + base: { + maxWidth: '264px', + }, + smallMedium: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption1FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + }, + large: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + }, +}); + +/** + * Apply styling to the InfoButton slots based on the state + */ +export const useSemanticInfoButtonStyles = (_state: unknown): InfoButtonState => { + 'use no memo'; + + const state = _state as InfoButtonState; + + const { size } = state; + const { open } = state.popover; + const buttonStyles = useButtonStyles(); + const popoverSurfaceStyles = usePopoverSurfaceStyles(); + + state.info.className = mergeClasses( + state.info.className, + infoButtonClassNames.info, + popoverSurfaceStyles.base, + size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, + getSlotClassNameProp_unstable(state.info), + ); + + state.root.className = mergeClasses( + state.root.className, + infoButtonClassNames.root, + buttonStyles.base, + buttonStyles.highContrast, + buttonStyles.focusIndicator, + open && buttonStyles.selected, + size === 'large' && buttonStyles.large, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts new file mode 100644 index 00000000000000..109279599bccd0 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts @@ -0,0 +1,64 @@ +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { makeStyles, mergeClasses } from '@griffel/react'; +import { infoLabelClassNames, type InfoLabelState } from '@fluentui/react-infolabel'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useLabelStyles = makeStyles({ + base: { + verticalAlign: 'top', + cursor: 'inherit', + color: 'inherit', + }, +}); + +const useInfoButtonStyles = makeStyles({ + base: { + verticalAlign: 'top', + + // Negative margin to align with the text + marginTop: `calc(0px - ${semanticTokens.gapBetweenContentXSmall})`, + marginBottom: `calc(0px - ${semanticTokens.gapBetweenContentXSmall})`, + }, + + large: { + // Negative margin to align with the text + marginTop: '-1px', + marginBottom: '-1px', + }, +}); + +/** + * Apply styling to the InfoLabel slots based on the state + */ +export const useSemanticInfoLabelStyles = (_state: unknown): InfoLabelState => { + 'use no memo'; + + const state = _state as InfoLabelState; + + state.root.className = mergeClasses( + state.root.className, + infoLabelClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + const labelStyles = useLabelStyles(); + state.label.className = mergeClasses( + state.label.className, + infoLabelClassNames.label, + labelStyles.base, + getSlotClassNameProp_unstable(state.label), + ); + + const infoButtonStyles = useInfoButtonStyles(); + if (state.infoButton) { + state.infoButton.className = mergeClasses( + state.infoButton.className, + infoLabelClassNames.infoButton, + infoButtonStyles.base, + state.size === 'large' && infoButtonStyles.large, + getSlotClassNameProp_unstable(state.infoButton), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Input/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Input/index.ts new file mode 100644 index 00000000000000..a7072a5cbf0f34 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Input/index.ts @@ -0,0 +1 @@ +export { useSemanticInputStyles } from './useSemanticInputStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Input/useSemanticInputStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Input/useSemanticInputStyles.styles.ts new file mode 100644 index 00000000000000..2d43a285d23273 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Input/useSemanticInputStyles.styles.ts @@ -0,0 +1,392 @@ +import { tokens, typographyStyles } from '@fluentui/react-theme'; +import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { inputClassNames, type InputState } from '@fluentui/react-input'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +// Maintaining the correct corner radius: +// Use the whole border-radius as the height and only put radii on the bottom corners. +// (Otherwise the radius would be automatically reduced to fit available space.) +// max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0. +const inputBottomFocusBorderStroke = `max(${semanticTokens.ctrlInputBottomLineStrokeWidthSelected}, ${semanticTokens.cornerCtrlRest})`; + +// TODO(sharing) should these be shared somewhere? +const fieldHeights = { + small: '24px', + medium: '32px', + large: '40px', +}; + +// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target. +// If there is contentBefore or contentAfter, then the root and input slots use their individual padding. +const horizontalPadding = { + root: { + small: tokens.spacingHorizontalSNudge, + medium: tokens.spacingHorizontalMNudge, + large: tokens.spacingHorizontalM, + }, + input: { + small: tokens.spacingHorizontalXXS, + medium: tokens.spacingHorizontalXXS, + large: tokens.spacingHorizontalSNudge, + }, + combined: { + small: tokens.spacingHorizontalS, // SNudge + XXS + medium: tokens.spacingHorizontalM, // MNudge + XXS + large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`, + }, +}; + +const useRootClassName = makeResetStyles({ + display: 'inline-flex', + alignItems: 'center', + flexWrap: 'nowrap', + gap: tokens.spacingHorizontalXXS, + borderRadius: semanticTokens.cornerCtrlRest, // used for all but underline + position: 'relative', + boxSizing: 'border-box', + verticalAlign: 'middle', + + // size: medium (default) + minHeight: fieldHeights.medium, + ...typographyStyles.body1, + + // appearance: outline (default) + backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, + border: `1px solid ${semanticTokens.ctrlInputStrokeRest}`, + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeRest, + + // This is all for the bottom focus border. + // It's supposed to be 2px flat all the way across and match the radius of the field's corners. + '::after': { + boxSizing: 'border-box', + content: '""', + position: 'absolute', + left: '-1px', + bottom: '-1px', + right: '-1px', + + // Maintaining the correct corner radius: + // Use the whole border-radius as the height and only put radii on the bottom corners. + // (Otherwise the radius would be automatically reduced to fit available space.) + // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0. + height: inputBottomFocusBorderStroke, + borderBottomLeftRadius: semanticTokens.cornerCtrlRest, + borderBottomRightRadius: semanticTokens.cornerCtrlRest, + + // Flat 2px border: + // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off. + // (This could be done without trimming using `background: linear-gradient(...)`, but using + // borderBottom makes it easier for people to override the color if needed.) + borderBottom: `2px solid ${semanticTokens.ctrlInputBottomLineStrokeSelected}`, + clipPath: 'inset(calc(100% - 2px) 0 0 0)', + + // Animation for focus OUT + transform: 'scaleX(0)', + transitionProperty: 'transform', + transitionDuration: tokens.durationUltraFast, + transitionDelay: tokens.curveAccelerateMid, + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + transitionDelay: '0.01ms', + }, + }, + ':focus-within::after': { + // Animation for focus IN + transform: 'scaleX(1)', + transitionProperty: 'transform', + transitionDuration: tokens.durationNormal, + transitionDelay: tokens.curveDecelerateMid, + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + transitionDelay: '0.01ms', + }, + }, + ':focus-within:active::after': { + // This is if the user clicks the field again while it's already focused + borderBottomColor: semanticTokens._ctrlInputBottomLineStrokeBrandPressed, + }, + ':focus-within': { + outline: '2px solid transparent', + }, +}); + +const useRootStyles = makeStyles({ + small: { + minHeight: fieldHeights.small, + ...typographyStyles.caption1, + }, + medium: { + // included in rootBaseStyles + }, + large: { + minHeight: fieldHeights.large, + ...typographyStyles.body2, + gap: tokens.spacingHorizontalSNudge, + }, + outline: { + // included in rootBaseStyles + }, + outlineInteractive: { + ':hover': { + ...shorthands.borderColor(semanticTokens.ctrlInputStrokeHover), + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeHover, + ':focus-within': { + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected, + }, + }, + // DO NOT add a space between the selectors! It changes the behavior of make-styles. + ':active,:focus-within': { + ...shorthands.borderColor(semanticTokens.ctrlInputStrokePressed), + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokePressed, + }, + }, + underline: { + backgroundColor: semanticTokens.nullColor, + borderRadius: '0', // corners look strange if rounded + // border is specified in rootBaseStyles, but we only want a bottom border here + borderTopStyle: 'none', + borderRightStyle: 'none', + borderLeftStyle: 'none', + // Make the focus underline (::after) match the width of the bottom border + '::after': { + left: 0, + right: 0, + }, + }, + underlineInteractive: { + ':hover': { + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeHover, + }, + // DO NOT add a space between the selectors! It changes the behavior of make-styles. + ':active,:focus-within': { + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected, + }, + '::after': { + // remove rounded corners from focus underline + borderRadius: '0', + }, + }, + filled: { + ...shorthands.borderColor(semanticTokens.ctrlFocusOuterStroke), + }, + filledInteractive: { + // DO NOT add a space between the selectors! It changes the behavior of make-styles. + ':hover,:focus-within': { + // also handles pressed border color (:active) + ...shorthands.borderColor(semanticTokens._ctrlFocusOuterStrokeInteractive), + }, + }, + invalid: { + ':not(:focus-within),:hover:not(:focus-within)': { + ...shorthands.borderColor(semanticTokens.ctrlInputBackgroundError), + }, + }, + 'filled-darker': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, + }, + 'filled-lighter': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, + }, + // This shadow appearance is deprecated and will be removed in a future release. + 'filled-darker-shadow': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, + boxShadow: tokens.shadow2, + }, + // This shadow appearance is deprecated and will be removed in a future release. + 'filled-lighter-shadow': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, + boxShadow: tokens.shadow2, + }, + disabled: { + cursor: 'not-allowed', + backgroundColor: semanticTokens.nullColor, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + '@media (forced-colors: active)': { + ...shorthands.borderColor('GrayText'), + }, + // remove the focus border + '::after': { + content: 'unset', + }, + // remove the focus outline + ':focus-within': { + outlineStyle: 'none', + }, + }, + smallWithContentBefore: { + paddingLeft: horizontalPadding.root.small, + }, + smallWithContentAfter: { + paddingRight: horizontalPadding.root.small, + }, + mediumWithContentBefore: { + paddingLeft: horizontalPadding.root.medium, + }, + mediumWithContentAfter: { + paddingRight: horizontalPadding.root.medium, + }, + largeWithContentBefore: { + paddingLeft: horizontalPadding.root.large, + }, + largeWithContentAfter: { + paddingRight: horizontalPadding.root.large, + }, +}); + +const useInputClassName = makeResetStyles({ + alignSelf: 'stretch', + boxSizing: 'border-box', + flexGrow: 1, + minWidth: 0, // required to make the input shrink to fit the wrapper + borderStyle: 'none', // input itself never has a border (this is handled by inputWrapper) + padding: `0 ${horizontalPadding.combined.medium}`, + color: semanticTokens.foregroundContentNeutralPrimary, + // Use literal "transparent" (not from the theme) to always let the color from the root show through + backgroundColor: 'transparent', + + '::placeholder': { + color: semanticTokens._ctrlInputNeutralForegroundPlaceholder, + opacity: 1, // browser style override + }, + + outlineStyle: 'none', // disable default browser outline + + // Inherit typography styles from root + fontFamily: 'inherit', + fontSize: 'inherit', + fontWeight: 'inherit', + lineHeight: 'inherit', +}); + +const useInputElementStyles = makeStyles({ + small: { + paddingLeft: horizontalPadding.combined.small, + paddingRight: horizontalPadding.combined.small, + }, + medium: { + // Included in useInputClassName + }, + large: { + paddingLeft: horizontalPadding.combined.large, + paddingRight: horizontalPadding.combined.large, + }, + smallWithContentBefore: { + paddingLeft: horizontalPadding.input.small, + }, + smallWithContentAfter: { + paddingRight: horizontalPadding.input.small, + }, + mediumWithContentBefore: { + paddingLeft: horizontalPadding.input.medium, + }, + mediumWithContentAfter: { + paddingRight: horizontalPadding.input.medium, + }, + largeWithContentBefore: { + paddingLeft: horizontalPadding.input.large, + }, + largeWithContentAfter: { + paddingRight: horizontalPadding.input.large, + }, + disabled: { + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + backgroundColor: semanticTokens.nullColor, + cursor: 'not-allowed', + '::placeholder': { + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + }, +}); + +const useContentClassName = makeResetStyles({ + boxSizing: 'border-box', + color: semanticTokens.foregroundCtrlIconOnNeutralRest, // "icon color" in design spec + display: 'flex', + // special case styling for icons (most common case) to ensure they're centered vertically + // size: medium (default) + '> svg': { fontSize: '20px' }, +}); + +const useContentStyles = makeStyles({ + disabled: { + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + // Ensure resizable icons show up with the proper font size + small: { + '> svg': { fontSize: '16px' }, + }, + medium: { + // included in useContentClassName + }, + large: { + '> svg': { fontSize: '24px' }, + }, +}); + +/** + * Apply styling to the Input slots based on the state + */ +export const useSemanticInputStyles = (_state: unknown): InputState => { + 'use no memo'; + + const state = _state as InputState; + const { size, appearance } = state; + const disabled = state.input.disabled; + const invalid = `${state.input['aria-invalid']}` === 'true'; + const filled = appearance.startsWith('filled'); + + const rootStyles = useRootStyles(); + const inputStyles = useInputElementStyles(); + const contentStyles = useContentStyles(); + + state.root.className = mergeClasses( + state.root.className, + inputClassNames.root, + useRootClassName(), + rootStyles[size], + state.contentBefore && rootStyles[`${size}WithContentBefore`], + state.contentAfter && rootStyles[`${size}WithContentAfter`], + rootStyles[appearance], + !disabled && appearance === 'outline' && rootStyles.outlineInteractive, + !disabled && appearance === 'underline' && rootStyles.underlineInteractive, + !disabled && filled && rootStyles.filledInteractive, + filled && rootStyles.filled, + !disabled && invalid && rootStyles.invalid, + disabled && rootStyles.disabled, + getSlotClassNameProp_unstable(state.root), + ); + + state.input.className = mergeClasses( + state.input.className, + inputClassNames.input, + useInputClassName(), + inputStyles[size], + state.contentBefore && inputStyles[`${size}WithContentBefore`], + state.contentAfter && inputStyles[`${size}WithContentAfter`], + disabled && inputStyles.disabled, + getSlotClassNameProp_unstable(state.input), + ); + + const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]]; + if (state.contentBefore) { + state.contentBefore.className = mergeClasses( + state.contentBefore.className, + inputClassNames.contentBefore, + ...contentClasses, + getSlotClassNameProp_unstable(state.contentBefore), + ); + } + if (state.contentAfter) { + state.contentAfter.className = mergeClasses( + state.contentAfter.className, + inputClassNames.contentAfter, + ...contentClasses, + getSlotClassNameProp_unstable(state.contentAfter), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Label/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Label/index.ts new file mode 100644 index 00000000000000..7c6b0a3eed31f4 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Label/index.ts @@ -0,0 +1 @@ +export { useSemanticLabelStyles } from './useSemanticLabelStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Label/useSemanticLabelStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Label/useSemanticLabelStyles.styles.ts new file mode 100644 index 00000000000000..fff88db1963a14 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Label/useSemanticLabelStyles.styles.ts @@ -0,0 +1,80 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { labelClassNames, type LabelState } from '@fluentui/react-label'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the label + */ +const useStyles = makeStyles({ + root: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + color: semanticTokens.foregroundContentNeutralPrimary, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + }, + + disabled: { + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + '@media (forced-colors: active)': { + color: 'GrayText', + }, + }, + + required: { + color: semanticTokens.statusDangerTintForeground, + paddingLeft: tokens.spacingHorizontalXS, + }, + + small: { + fontSize: semanticTokens.textGlobalCaption1FontSize, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + }, + + medium: { + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, + }, + + large: { + fontSize: semanticTokens.textGlobalBody2FontSize, + lineHeight: semanticTokens.textGlobalBody2LineHeight, + fontWeight: tokens.fontWeightSemibold, + }, + + semibold: { + fontWeight: tokens.fontWeightSemibold, + }, +}); + +/** + * Apply styling to the Label slots based on the state + */ +export const useSemanticLabelStyles = (_state: unknown): LabelState => { + 'use no memo'; + + const state = _state as LabelState; + + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + labelClassNames.root, + styles.root, + state.disabled && styles.disabled, + styles[state.size], + state.weight === 'semibold' && styles.semibold, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.required) { + state.required.className = mergeClasses( + state.required.className, + labelClassNames.required, + styles.required, + state.disabled && styles.disabled, + getSlotClassNameProp_unstable(state.required), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Link/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Link/index.ts new file mode 100644 index 00000000000000..d42201fedd3d1a --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Link/index.ts @@ -0,0 +1 @@ +export { useSemanticLinkStyles } from './useSemanticLinkStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Link/useSemanticLinkStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Link/useSemanticLinkStyles.styles.ts new file mode 100644 index 00000000000000..2655267222b432 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Link/useSemanticLinkStyles.styles.ts @@ -0,0 +1,125 @@ +import { shorthands, makeStyles, mergeClasses } from '@griffel/react'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { tokens } from '@fluentui/react-theme'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { linkClassNames, type LinkState } from '@fluentui/react-link'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useStyles = makeStyles({ + focusIndicator: createCustomFocusIndicatorStyle({ + textDecorationColor: semanticTokens.ctrlFocusInnerStroke, + textDecorationLine: 'underline', + textDecorationStyle: 'double', + outlineStyle: 'none', + }), + // Common styles. + root: { + ':focus-visible': { + outlineStyle: 'none', + }, + backgroundColor: 'transparent', + boxSizing: 'border-box', + color: semanticTokens.ctrlLinkForegroundBrandRest, + cursor: 'pointer', + display: 'inline', + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalBody3FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + margin: '0', + padding: '0', + overflow: 'inherit', + textAlign: 'left', + textDecorationLine: 'none', + textDecorationThickness: semanticTokens.strokeWidthDefault, + textOverflow: 'inherit', + userSelect: 'text', + + ':hover': { + textDecorationLine: 'underline', + color: semanticTokens.ctrlLinkForegroundBrandHover, + }, + + ':active': { + textDecorationLine: 'underline', + color: semanticTokens.ctrlLinkForegroundBrandPressed, + }, + }, + // Overrides when the Link renders as a button. + button: { + ...shorthands.borderStyle('none'), + }, + // Overrides when an href is present so the Link renders as an anchor. + href: { + fontSize: 'inherit', + }, + // Overrides when the Link appears subtle. + subtle: { + color: semanticTokens.ctrlLinkForegroundNeutralRest, + + ':hover': { + textDecorationLine: 'underline', + color: semanticTokens.ctrlLinkForegroundNeutralHover, + }, + + ':active': { + textDecorationLine: 'underline', + color: semanticTokens.ctrlLinkForegroundNeutralPressed, + }, + }, + // Overrides when the Link is rendered inline within text. + inline: { + textDecorationLine: 'underline', + }, + // Overrides when the Link is disabled. + disabled: { + textDecorationLine: 'none', + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + cursor: 'not-allowed', + + ':hover': { + textDecorationLine: 'none', + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + + ':active': { + textDecorationLine: 'none', + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + }, + + // Semantic-tokens does not include inverted tokens, use existing tokens for now. + inverted: { + color: tokens.colorBrandForegroundInverted, + ':hover': { + color: tokens.colorBrandForegroundInvertedHover, + }, + ':active': { + color: tokens.colorBrandForegroundInvertedPressed, + }, + }, +}); + +export const useSemanticLinkStyles = (_state: unknown): LinkState => { + 'use no memo'; + + const state = _state as LinkState; + + const styles = useStyles(); + const { appearance, disabled, inline, root, backgroundAppearance } = state; + + state.root.className = mergeClasses( + state.root.className, + linkClassNames.root, + styles.root, + styles.focusIndicator, + root.as === 'a' && root.href && styles.href, + root.as === 'button' && styles.button, + appearance === 'subtle' && styles.subtle, + backgroundAppearance === 'inverted' && styles.inverted, + inline && styles.inline, + disabled && styles.disabled, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/List/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/List/index.ts new file mode 100644 index 00000000000000..e327e1b23a29ba --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/List/index.ts @@ -0,0 +1 @@ +export { useSemanticListItemStyles } from './useSemanticListItemStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/List/useSemanticListItemStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/List/useSemanticListItemStyles.styles.ts new file mode 100644 index 00000000000000..327599a3b5a1e6 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/List/useSemanticListItemStyles.styles.ts @@ -0,0 +1,93 @@ +import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { listItemClassNames, type ListItemState } from '@fluentui/react-list'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseStyles = makeResetStyles({ + padding: 0, + margin: 0, + textIndent: 0, + listStyleType: 'none', + ...createCustomFocusIndicatorStyle( + { + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens._ctrlListItemStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + }, + { selector: 'focus' }, + ), + color: semanticTokens._ctrlListForegroundColorRest, + backgroundColor: semanticTokens._ctrlListBackgroundColorRest, + fontSize: semanticTokens.textRampItemBodyFontSize, + lineHeight: semanticTokens.textRampItemBodyLineHeight, +}); + +const useCheckmarkBaseStyles = makeStyles({ + root: { + alignSelf: 'center', + + '& .fui-Checkbox__indicator': { margin: '4px' }, + }, +}); +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + rootClickableOrSelectable: { + display: 'flex', + cursor: 'pointer', + ':hover': { + color: semanticTokens._ctrlListForegroundColorHover, + backgroundColor: semanticTokens._ctrlListBackgroundColorHover, + ...createCustomFocusIndicatorStyle( + { + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens._ctrlListItemStroke}`, + borderRadius: semanticTokens.cornerCtrlHover, + }, + { selector: 'focus' }, + ), + }, + ':active': { + color: semanticTokens._ctrlListForegroundColorPressed, + backgroundColor: semanticTokens._ctrlListBackgroundColorPressed, + ...createCustomFocusIndicatorStyle( + { + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens._ctrlListItemStroke}`, + borderRadius: semanticTokens.cornerCtrlPressed, + }, + { selector: 'focus' }, + ), + }, + }, +}); + +/** + * Apply styling to the ListItem slots based on the state + */ +export const useSemanticListItemStyles = (_state: unknown): ListItemState => { + 'use no memo'; + + const state = _state as ListItemState; + const rootBaseStyles = useRootBaseStyles(); + const checkmarkBaseStyles = useCheckmarkBaseStyles(); + const styles = useStyles(); + + state.root.className = mergeClasses( + state.root.className, + listItemClassNames.root, + rootBaseStyles, + (state.selectable || state.navigable) && styles.rootClickableOrSelectable, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.checkmark) { + state.checkmark.className = mergeClasses( + state.checkmark.className, + listItemClassNames.checkmark, + checkmarkBaseStyles.root, + getSlotClassNameProp_unstable(state.checkmark), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/index.ts new file mode 100644 index 00000000000000..b78aa2b73d5a69 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/index.ts @@ -0,0 +1,6 @@ +export { useSemanticMenuDividerStyles } from './useSemanticMenuDividerStyles.styles'; +export { useSemanticMenuGroupHeaderStyles } from './useSemanticMenuGroupHeaderStyles.styles'; +export { useSemanticMenuItemStyles } from './useSemanticMenuItemStyles.styles'; +export { useSemanticMenuItemSwitchStyles } from './useSemanticMenuItemSwitchStyles.styles'; +export { useSemanticMenuPopoverStyles } from './useSemanticMenuPopoverStyles.styles'; +export { useSemanticMenuSplitGroupStyles } from './useSemanticMenuSplitGroupStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuDividerStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuDividerStyles.styles.ts new file mode 100644 index 00000000000000..9fe2f5a3f3fbed --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuDividerStyles.styles.ts @@ -0,0 +1,27 @@ +import { mergeClasses, makeStyles } from '@griffel/react'; +import { menuDividerClassNames, type MenuDividerState } from '@fluentui/react-menu'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useStyles = makeStyles({ + root: { + margin: '4px -5px 4px -5px', + width: 'auto', + borderBottom: `${semanticTokens.strokeWidthDividerDefault} solid ${semanticTokens.strokeDividerDefault}`, + }, +}); + +export const useSemanticMenuDividerStyles = (_state: unknown): MenuDividerState => { + 'use no memo'; + + const state = _state as MenuDividerState; + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + menuDividerClassNames.root, + styles.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuGroupHeaderStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuGroupHeaderStyles.styles.ts new file mode 100644 index 00000000000000..e44cf37ec8f481 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuGroupHeaderStyles.styles.ts @@ -0,0 +1,32 @@ +import { mergeClasses, makeStyles } from '@griffel/react'; +import { menuGroupHeaderClassNames, type MenuGroupHeaderState } from '@fluentui/react-menu'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useStyles = makeStyles({ + root: { + fontSize: semanticTokens.textRampMetadataFontSize, + color: semanticTokens._ctrlMenuGroupHeaderColor, + paddingLeft: semanticTokens._ctrlMenuGroupHeaderPaddingHorizontal, + paddingRight: semanticTokens._ctrlMenuGroupHeaderPaddingHorizontal, + fontWeight: semanticTokens._ctrlMenuGroupHeaderFontWeight, + height: semanticTokens._ctrlMenuGroupHeaderHeight, + display: 'flex', + alignItems: 'center', + }, +}); + +export const useSemanticMenuGroupHeaderStyles = (_state: unknown): MenuGroupHeaderState => { + 'use no memo'; + + const state = _state as MenuGroupHeaderState; + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + menuGroupHeaderClassNames.root, + styles.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemStyles.styles.ts new file mode 100644 index 00000000000000..cefbc32ae082c6 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemStyles.styles.ts @@ -0,0 +1,319 @@ +import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react'; +import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; +import { + useCheckmarkStyles_unstable, + type MenuItemState, + type MenuItemCheckboxState, + menuItemClassNames, +} from '@fluentui/react-menu'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseStyles = makeResetStyles({ + borderRadius: semanticTokens.ctrlListCornerRest, + borderWidth: semanticTokens.strokeWidthDefault, + position: 'relative', + color: semanticTokens.foregroundCtrlOnSubtleRest, + backgroundColor: semanticTokens.backgroundCtrlSubtleRest, + paddingRight: semanticTokens._ctrlMenuItemPaddingX, + paddingLeft: semanticTokens._ctrlMenuItemPaddingX, + paddingTop: semanticTokens._ctrlMenuItemPaddingTop, + paddingBottom: semanticTokens._ctrlMenuItemPaddingBottom, + boxSizing: 'border-box', + maxWidth: '290px', + minHeight: semanticTokens._ctrlMenuItemSizeDefault, + flexShrink: 0, + display: 'flex', + alignItems: 'start', + fontSize: semanticTokens.textRampItemBodyFontSize, + cursor: 'pointer', + gap: semanticTokens._ctrlMenuItemGapInsideDefault, + + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + color: semanticTokens.foregroundCtrlOnSubtleHover, + borderRadius: semanticTokens.ctrlListCornerHover, + + [`& .${iconFilledClassName}`]: { + display: 'inline', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + [`& .${menuItemClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnSubtleHover, + }, + + [`& .${menuItemClassNames.subText}`]: { + color: semanticTokens._ctrlMenuItemSubTextForegroundHover, + }, + }, + + ':hover:active': { + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + color: semanticTokens.foregroundCtrlOnSubtlePressed, + + [`& .${menuItemClassNames.subText}`]: { + color: semanticTokens._ctrlMenuItemSubTextForegroundPressed, + }, + }, + + // High contrast styles + '@media (forced-colors: active)': { + ':hover': { + backgroundColor: 'Canvas', + borderColor: 'Highlight', + color: 'Highlight', + }, + ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }), + }, + + userSelect: 'none', + ...createFocusOutlineStyle(), +}); + +const useContentBaseStyles = makeResetStyles({ + paddingLeft: semanticTokens._ctrlMenuItemContentPaddingX, + paddingRight: semanticTokens._ctrlMenuItemContentPaddingX, + backgroundColor: 'transparent', + flexGrow: 1, +}); + +const useSecondaryContentBaseStyles = makeResetStyles({ + paddingLeft: semanticTokens._ctrlMenuItemContentPaddingX, + paddingRight: semanticTokens._ctrlMenuItemContentPaddingX, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens._ctrlMenuItemSecondaryContentFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalBody3LineHeight, + color: semanticTokens._ctrlMenuItemSecondaryContentForegroundRest, + ':hover': { + color: semanticTokens._ctrlMenuItemSecondaryContentForegroundHover, + }, + ':focus': { + color: semanticTokens._ctrlMenuItemSecondaryContentForegroundHover, + }, +}); + +const useIconBaseStyles = makeResetStyles({ + width: semanticTokens.sizeCtrlIcon, + height: semanticTokens.sizeCtrlIcon, + fontSize: semanticTokens.sizeCtrlIcon, + lineHeight: 0, + alignItems: 'center', + display: 'inline-flex', + justifyContent: 'center', + flexShrink: 0, +}); + +const useSubmenuIndicatorBaseStyles = makeResetStyles({ + width: semanticTokens.sizeCtrlIconSecondary, + height: semanticTokens.sizeCtrlIconSecondary, + fontSize: semanticTokens.sizeCtrlIconSecondary, + lineHeight: 0, + alignItems: 'center', + display: 'inline-flex', + justifyContent: 'center', +}); + +const useSubtextBaseStyles = makeResetStyles({ + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption2FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalCaption2LineHeight, + color: semanticTokens._ctrlMenuItemSecondaryContentForegroundRest, +}); + +const useStyles = makeStyles({ + checkmark: { + marginTop: '2px', + }, + + splitItemMain: { + flexGrow: 1, + }, + + splitItemTrigger: { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + paddingLeft: 0, + '::before': { + content: '""', + width: semanticTokens.strokeWidthDefault, + height: '24px', + backgroundColor: semanticTokens.strokeCtrlOnNeutralRest, + }, + }, + disabled: { + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + ':hover': { + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + cursor: 'not-allowed', + [`& .${iconFilledClassName}`]: { + display: 'none', + }, + [`& .${iconRegularClassName}`]: { + display: 'inline', + }, + [`& .${menuItemClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnSubtleDisabled, + }, + [`& .${menuItemClassNames.subText}`]: { + color: semanticTokens.foregroundCtrlIconOnSubtleDisabled, + }, + }, + + ':hover:active': { + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + [`& .${menuItemClassNames.subText}`]: { + color: semanticTokens.foregroundCtrlIconOnSubtleDisabled, + }, + }, + + ':focus': { + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + }, + + '@media (forced-colors: active)': { + color: 'GrayText', + ':hover': { + color: 'GrayText', + backgroundColor: 'Canvas', + [`& .${menuItemClassNames.icon}`]: { + color: 'GrayText', + backgroundColor: 'Canvas', + }, + [`& .${menuItemClassNames.subText}`]: { + color: 'GrayText', + }, + }, + ':hover:active': { + color: 'GrayText', + backgroundColor: 'Canvas', + [`& .${menuItemClassNames.subText}`]: { + color: 'GrayText', + }, + }, + ':focus': { + color: 'GrayText', + backgroundColor: 'Canvas', + }, + }, + }, +}); + +const useSubTextStyles = makeStyles({ + disabled: { + color: semanticTokens.foregroundCtrlIconOnSubtleDisabled, + + '@media (forced-colors: active)': { + color: 'GrayText', + }, + }, +}); + +const useMultilineStyles = makeStyles({ + content: { + display: 'flex', + flexDirection: 'column', + }, + + secondaryContent: { + alignSelf: 'center', + }, + + submenuIndicator: { + alignSelf: 'center', + }, +}); + +/** Applies style classnames to slots */ +export const useSemanticMenuItemStyles = (_state: unknown): MenuItemState => { + 'use no memo'; + + const state = _state as MenuItemState; + const styles = useStyles(); + const rootBaseStyles = useRootBaseStyles(); + const contentBaseStyles = useContentBaseStyles(); + const secondaryContentBaseStyles = useSecondaryContentBaseStyles(); + const iconBaseStyles = useIconBaseStyles(); + const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles(); + const multilineStyles = useMultilineStyles(); + const subtextBaseStyles = useSubtextBaseStyles(); + const subTextStyles = useSubTextStyles(); + const multiline = !!state.subText; + state.root.className = mergeClasses( + state.root.className, + menuItemClassNames.root, + rootBaseStyles, + state.disabled && styles.disabled, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.content) { + state.content.className = mergeClasses( + state.content.className, + menuItemClassNames.content, + contentBaseStyles, + multiline && multilineStyles.content, + getSlotClassNameProp_unstable(state.content), + ); + } + + if (state.checkmark) { + state.checkmark.className = mergeClasses( + state.checkmark.className, + menuItemClassNames.checkmark, + styles.checkmark, + getSlotClassNameProp_unstable(state.checkmark), + ); + } + + if (state.secondaryContent) { + state.secondaryContent.className = mergeClasses( + state.secondaryContent.className, + menuItemClassNames.secondaryContent, + secondaryContentBaseStyles, + state.disabled && styles.disabled, + multiline && multilineStyles.secondaryContent, + getSlotClassNameProp_unstable(state.secondaryContent), + ); + } + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + menuItemClassNames.icon, + iconBaseStyles, + getSlotClassNameProp_unstable(state.icon), + ); + } + + if (state.submenuIndicator) { + state.submenuIndicator.className = mergeClasses( + state.submenuIndicator.className, + menuItemClassNames.submenuIndicator, + submenuIndicatorBaseStyles, + multiline && multilineStyles.submenuIndicator, + getSlotClassNameProp_unstable(state.submenuIndicator), + ); + } + + if (state.subText) { + state.subText.className = mergeClasses( + state.subText.className, + menuItemClassNames.subText, + state.disabled && subTextStyles.disabled, + subtextBaseStyles, + getSlotClassNameProp_unstable(state.subText), + ); + } + + useCheckmarkStyles_unstable(state as MenuItemCheckboxState); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemSwitchStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemSwitchStyles.styles.ts new file mode 100644 index 00000000000000..c7fe9dd9b61e70 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemSwitchStyles.styles.ts @@ -0,0 +1,170 @@ +import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { menuItemSwitchClassNames, type MenuItemSwitchState, useMenuItemStyles_unstable } from '@fluentui/react-menu'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +export const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled'; + +const thumbHeight = `calc(${semanticTokens.ctrlChoiceSwitchHeight} - (${semanticTokens.ctrlChoiceSwitchPaddingRest} * 2))`; + +const useSwitchIndicatorBaseClassName = makeResetStyles({ + borderRadius: semanticTokens.ctrlChoiceSwitchCorner, + border: `${semanticTokens.strokeWidthCtrlOutlineRest} solid ${semanticTokens.ctrlChoiceBaseStrokeRest}`, + lineHeight: 0, + boxSizing: 'border-box', + fill: 'currentColor', + flexShrink: 0, + height: semanticTokens.ctrlChoiceSwitchHeight, + transitionDuration: tokens.durationNormal, + transitionTimingFunction: tokens.curveEasyEase, + transitionProperty: 'background, border, color', + width: semanticTokens.ctrlChoiceSwitchWidth, + marginRight: semanticTokens.gapInsideCtrlSmDefault, + color: semanticTokens.backgroundCtrlShapeSafeNeutralRest, + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + }, + + '> *': { + position: 'relative', + height: thumbHeight, + width: semanticTokens.ctrlChoiceSwitchThumbWidthRest, + fontSize: thumbHeight, + top: `calc(50% - ${thumbHeight} / 2)`, + transitionDuration: tokens.durationNormal, + transitionTimingFunction: tokens.curveEasyEase, + transitionProperty: 'transform', + }, + + ':hover': { + color: semanticTokens.backgroundCtrlShapeSafeNeutralHover, + borderColor: semanticTokens.ctrlChoiceBaseStrokeHover, + }, + + ':hover:active': { + color: semanticTokens.backgroundCtrlShapeSafeNeutralPressed, + borderColor: semanticTokens.ctrlChoiceBaseStrokePressed, + }, + [`& .${circleFilledClassName}`]: { + transitionDuration: tokens.durationNormal, + transitionTimingFunction: tokens.curveEasyEase, + transitionProperty: 'transform', + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + }, + }, +}); + +const useSwitchIndicatorStyles = makeStyles({ + checked: { + [`& .${circleFilledClassName}`]: { + transform: `translateX(calc(${semanticTokens.ctrlChoiceSwitchWidth} - ${semanticTokens.ctrlChoiceSwitchThumbWidthRest} - ${semanticTokens.ctrlChoiceSwitchPaddingRest}))`, + ':dir(rtl)': { + // Inverse animation for RTL (Griffel doesn't support flipping CSSVars) + transform: `translateX(calc(-1 * (${semanticTokens.ctrlChoiceSwitchWidth} - ${semanticTokens.ctrlChoiceSwitchThumbWidthRest} - ${semanticTokens.ctrlChoiceSwitchPaddingRest})))`, + }, + }, + + backgroundColor: semanticTokens.backgroundCtrlActiveBrandRest, + color: semanticTokens.foregroundCtrlOnActiveBrandRest, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandRest), + + ':hover': { + color: semanticTokens.foregroundCtrlOnActiveBrandHover, + backgroundColor: semanticTokens.backgroundCtrlActiveBrandHover, + ...shorthands.borderColor(semanticTokens._ctrlSwitchStrokeOnActiveBrandHover), + }, + + ':hover:active': { + color: semanticTokens.foregroundCtrlOnActiveBrandPressed, + backgroundColor: semanticTokens.backgroundCtrlActiveBrandPressed, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandPressed), + }, + }, +}); + +const useMultilineStyles = makeStyles({ + switch: { + alignSelf: 'center', + }, +}); + +/** + * Apply styling to the MenuItemSwitch slots based on the state + */ +export const useSemanticMenuItemSwitchStyles = (_state: unknown): MenuItemSwitchState => { + 'use no memo'; + + const state = _state as MenuItemSwitchState; + const { checked, subText } = state; + const multiline = !!subText; + const switchIndicatorStyles = useSwitchIndicatorStyles(); + const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName(); + const multilineStyles = useMultilineStyles(); + state.root.className = mergeClasses( + state.root.className, + menuItemSwitchClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + if (state.content) { + state.content.className = mergeClasses( + state.content.className, + menuItemSwitchClassNames.content, + getSlotClassNameProp_unstable(state.content), + ); + } + + if (state.secondaryContent) { + state.secondaryContent.className = mergeClasses( + state.secondaryContent.className, + menuItemSwitchClassNames.secondaryContent, + getSlotClassNameProp_unstable(state.secondaryContent), + ); + } + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + menuItemSwitchClassNames.icon, + getSlotClassNameProp_unstable(state.icon), + ); + } + + if (state.subText) { + state.subText.className = mergeClasses( + state.subText.className, + menuItemSwitchClassNames.subText, + getSlotClassNameProp_unstable(state.subText), + ); + } + + if (state.switchIndicator) { + state.switchIndicator.className = mergeClasses( + state.switchIndicator.className, + menuItemSwitchClassNames.switchIndicator, + switchIndicatorBaseStyles, + checked && switchIndicatorStyles.checked, + multiline && multilineStyles.switch, + getSlotClassNameProp_unstable(state.switchIndicator), + ); + } + + useMenuItemStyles_unstable({ + ...state, + components: { + // eslint-disable-next-line @typescript-eslint/no-deprecated + ...state.components, + checkmark: 'span', + submenuIndicator: 'span', + }, + checkmark: undefined, + submenuIndicator: undefined, + hasSubmenu: false, + persistOnClick: true, + }); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuPopoverStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuPopoverStyles.styles.ts new file mode 100644 index 00000000000000..344e50184a3cab --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuPopoverStyles.styles.ts @@ -0,0 +1,43 @@ +import { mergeClasses, makeStyles } from '@griffel/react'; +import { menuPopoverClassNames, type MenuPopoverState } from '@fluentui/react-menu'; +import { createSlideStyles } from '@fluentui/react-positioning'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useStyles = makeStyles({ + root: { + borderRadius: semanticTokens._ctrlMenuPopoverCornerFlyoutRest, + backgroundColor: semanticTokens.materialAcrylicDefaultSolid, + color: semanticTokens.foregroundContentNeutralPrimary, + boxSizing: 'border-box', + minWidth: '138px', + maxWidth: '300px', + overflowX: 'hidden', + width: 'max-content', + boxShadow: semanticTokens._ctrlMenuPopoverShadowFlyout, + padding: semanticTokens.paddingFlyoutDefault, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens._ctrlMenuPopoverStrokeFlyout}`, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + ...createSlideStyles(10), + }, +}); + +/** + * Apply styling to the Menu slots based on the state + */ +export const useSemanticMenuPopoverStyles = (_state: unknown): MenuPopoverState => { + 'use no memo'; + + const state = _state as MenuPopoverState; + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + menuPopoverClassNames.root, + styles.root, + getSlotClassNameProp_unstable(state.root), + ); + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuSplitGroupStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuSplitGroupStyles.styles.ts new file mode 100644 index 00000000000000..ee93e9f2dc2033 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuSplitGroupStyles.styles.ts @@ -0,0 +1,52 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { menuItemClassNames, menuSplitGroupClassNames, type MenuSplitGroupState } from '@fluentui/react-menu'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +export const menuSplitGroupMultilineAttr = 'data-multiline'; + +/** + * Styles for the root slot + * TODO - remove the use of nested combinators to style child menu items + */ +const useStyles = makeStyles({ + root: { + [`[${menuSplitGroupMultilineAttr}]`]: { + [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: { + alignSelf: 'center', + }, + }, + display: 'flex', + [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: { + flex: 1, + }, + [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + paddingLeft: 0, + '::before': { + content: '""', + width: semanticTokens.strokeWidthDefault, + height: '20px', + backgroundColor: semanticTokens.strokeCtrlOnNeutralRest, + }, + }, + }, +}); + +/** + * Apply styling to the MenuSplitGroup slots based on the state + */ +export const useSemanticMenuSplitGroupStyles = (_state: unknown): MenuSplitGroupState => { + 'use no memo'; + + const state = _state as MenuSplitGroupState; + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + menuSplitGroupClassNames.root, + styles.root, + getSlotClassNameProp_unstable(state.root), + ); + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/index.ts new file mode 100644 index 00000000000000..40a00f62d01449 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/index.ts @@ -0,0 +1,4 @@ +export { useSemanticMessageBarStyles } from './useSemanticMessageBarStyles.styles'; +export { useSemanticMessageBarBodyStyles } from './useSemanticMessageBarBodyStyles.styles'; +export { useSemanticMessageBarActionsStyles } from './useSemanticMessageBarActionsStyles.styles'; +export { useSemanticMessageBarTitleStyles } from './useSemanticMessageBarTitleStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarActionsStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarActionsStyles.styles.ts new file mode 100644 index 00000000000000..cb81a7ac24df2d --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarActionsStyles.styles.ts @@ -0,0 +1,63 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { messageBarActionsClassNames, type MessageBarActionsState } from '@fluentui/react-message-bar'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useRootBaseStyles = makeResetStyles({ + gridArea: 'secondaryActions', + display: 'flex', + columnGap: semanticTokens.gapBetweenCtrlDefault, + paddingRight: semanticTokens.gapBetweenCtrlDefault, +}); + +const useContainerActionBaseStyles = makeResetStyles({ + gridArea: 'actions', +}); + +const useMultilineStyles = makeStyles({ + root: { + justifyContent: 'end', + marginTop: semanticTokens._ctrlMessageBarSpacingTop, + marginBottom: semanticTokens.paddingContentAlignDefault, + marginRight: '0px', + paddingRight: semanticTokens._ctrlMessageBarActionsMultilinePaddingRight, + }, + + noActions: { + display: 'none', + }, +}); + +/** + * Apply styling to the MessageBarActions slots based on the state + */ +export const useSemanticMessageBarActionsStyles = (_state: unknown): MessageBarActionsState => { + 'use no memo'; + + const state = _state as MessageBarActionsState; + const rootBaseStyles = useRootBaseStyles(); + const containerActionBaseStyles = useContainerActionBaseStyles(); + const multilineStyles = useMultilineStyles(); + state.root.className = mergeClasses( + state.root.className, + messageBarActionsClassNames.root, + rootBaseStyles, + state.layout === 'multiline' && multilineStyles.root, + !state.hasActions && multilineStyles.noActions, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.containerAction) { + state.containerAction.className = mergeClasses( + state.containerAction.className, + messageBarActionsClassNames.containerAction, + containerActionBaseStyles, + getSlotClassNameProp_unstable(state.containerAction), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarBodyStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarBodyStyles.styles.ts new file mode 100644 index 00000000000000..b267d39344822c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarBodyStyles.styles.ts @@ -0,0 +1,31 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { messageBarBodyClassNames, type MessageBarBodyState } from '@fluentui/react-message-bar'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseStyles = makeResetStyles({ + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + gridArea: 'body', + paddingRight: semanticTokens.gapBetweenCtrlDefault, +}); + +/** + * Apply styling to the MessageBarBody slots based on the state + */ +export const useSemanticMessageBarBodyStyles = (_state: unknown): MessageBarBodyState => { + 'use no memo'; + + const state = _state as MessageBarBodyState; + const rootBaseStyles = useRootBaseStyles(); + state.root.className = mergeClasses( + state.root.className, + messageBarBodyClassNames.root, + rootBaseStyles, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarStyles.styles.ts new file mode 100644 index 00000000000000..22f31adce29790 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarStyles.styles.ts @@ -0,0 +1,134 @@ +import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { messageBarClassNames, type MessageBarState } from '@fluentui/react-message-bar'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseStyles = makeResetStyles({ + whiteSpace: 'nowrap', + display: 'grid', + gridTemplateColumns: 'auto 1fr auto auto', + gridTemplateRows: '1fr', + gridTemplateAreas: '"icon body secondaryActions actions"', + paddingLeft: semanticTokens._ctrlMessageBarPaddingContentAlignDefault, + paddingRight: semanticTokens.paddingContentAlignOutdentIconOnSubtle, + paddingTop: semanticTokens._ctrlMessageBarPaddingVertical, + paddingBottom: semanticTokens._ctrlMessageBarPaddingVertical, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.statusInformativeTintStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + alignItems: 'center', + minHeight: '36px', + boxSizing: 'border-box', + backgroundColor: semanticTokens.statusImportantTintBackground, +}); + +const useIconBaseStyles = makeResetStyles({ + gridArea: 'icon', + fontSize: semanticTokens.textGlobalBody1FontSize, + marginRight: semanticTokens.gapInsideCtrlDefault, + color: semanticTokens.foregroundCtrlIconOnNeutralRest, + height: semanticTokens.textRampItemHeaderLineHeight, + display: 'flex', + alignItems: 'center', +}); + +const useReflowSpacerBaseStyles = makeResetStyles({ + marginBottom: semanticTokens._ctrlMessageBarReflowSpacerMarginBottom, + gridArea: 'secondaryActions', +}); + +const useStyles = makeStyles({ + rootMultiline: { + whiteSpace: 'normal', + alignItems: 'start', + paddingTop: semanticTokens._ctrlMessageBarSpacingTop, + gridTemplateColumns: 'auto 1fr auto', + gridTemplateAreas: ` + "icon body actions" + "secondaryActions secondaryActions secondaryActions" + `, + }, + + square: { + borderRadius: '0', + }, +}); + +const useIconIntentStyles = makeStyles({ + info: { + /** already in base reset styles */ + }, + error: { + color: semanticTokens._ctrlMessageBarErrorIconColor, + }, + warning: { + color: semanticTokens.statusWarningTintForeground, + }, + success: { + color: semanticTokens.statusSuccessTintForeground, + }, +}); + +const useRootIntentStyles = makeStyles({ + info: { + /** already in base reset styles */ + }, + error: { + backgroundColor: semanticTokens.statusDangerTintBackground, + ...shorthands.borderColor(semanticTokens.statusDangerTintStroke), + }, + warning: { + backgroundColor: semanticTokens.statusWarningTintBackground, + ...shorthands.borderColor(semanticTokens.statusWarningTintStroke), + }, + success: { + backgroundColor: semanticTokens.statusSuccessTintBackground, + ...shorthands.borderColor(semanticTokens.statusSuccessTintStroke), + }, +}); + +/** + * Apply styling to the MessageBar slots based on the state + */ +export const useSemanticMessageBarStyles = (_state: unknown): MessageBarState => { + 'use no memo'; + + const state = _state as MessageBarState; + const rootBaseStyles = useRootBaseStyles(); + const iconBaseStyles = useIconBaseStyles(); + const iconIntentStyles = useIconIntentStyles(); + const rootIntentStyles = useRootIntentStyles(); + const reflowSpacerStyles = useReflowSpacerBaseStyles(); + const styles = useStyles(); + + state.root.className = mergeClasses( + state.root.className, + messageBarClassNames.root, + rootBaseStyles, + state.layout === 'multiline' && styles.rootMultiline, + state.shape === 'square' && styles.square, + rootIntentStyles[state.intent], + state.transitionClassName, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + messageBarClassNames.icon, + iconBaseStyles, + iconIntentStyles[state.intent], + getSlotClassNameProp_unstable(state.icon), + ); + } + + if (state.bottomReflowSpacer) { + state.bottomReflowSpacer.className = mergeClasses( + state.bottomReflowSpacer.className, + messageBarClassNames.bottomReflowSpacer, + reflowSpacerStyles, + getSlotClassNameProp_unstable(state.bottomReflowSpacer), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarTitleStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarTitleStyles.styles.ts new file mode 100644 index 00000000000000..97bd2865baa326 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarTitleStyles.styles.ts @@ -0,0 +1,36 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { messageBarTitleClassNames, type MessageBarTitleState } from '@fluentui/react-message-bar'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useRootBaseStyles = makeResetStyles({ + fontFamily: semanticTokens.textStyleDefaultHeaderFontFamily, + fontSize: semanticTokens.textRampItemHeaderFontSize, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + lineHeight: semanticTokens._ctrlMessageBarTitleLineHeight, + + '::after': { + content: '" "', + }, +}); + +/** + * Apply styling to the MessageBarTitle slots based on the state + */ +export const useSemanticMessageBarTitleStyles = (_state: unknown): MessageBarTitleState => { + 'use no memo'; + + const state = _state as MessageBarTitleState; + const rootBaseStyles = useRootBaseStyles(); + state.root.className = mergeClasses( + state.root.className, + messageBarTitleClassNames.root, + rootBaseStyles, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Persona/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Persona/index.ts new file mode 100644 index 00000000000000..197b3b0c1f28c4 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Persona/index.ts @@ -0,0 +1 @@ +export { useSemanticPersonaStyles } from './useSemanticPersonaStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Persona/useSemanticPersonaStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Persona/useSemanticPersonaStyles.styles.ts new file mode 100644 index 00000000000000..5b66062de4959e --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Persona/useSemanticPersonaStyles.styles.ts @@ -0,0 +1,303 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { personaClassNames, type PersonaState } from '@fluentui/react-persona'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const avatarSpacing = `--fui-Persona__avatar--spacing`; + +const useRootClassName = makeResetStyles({ + display: 'inline-grid', + gridAutoRows: 'max-content', + gridAutoFlow: 'column', + justifyItems: 'start', + gridTemplateColumns: 'max-content [middle] auto', +}); + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + beforeAfterCenter: { + // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines + gridTemplateRows: + '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr', + }, + + after: { + // Intentionally empty + }, + before: { + justifyItems: 'end', + gridTemplateColumns: 'auto [middle] max-content', + }, + below: { + gridAutoFlow: 'unset', + justifyItems: 'center', + gridTemplateColumns: 'unset', + }, + + media: { + gridRowStart: 'span 5', + }, + + mediaBeforeAfterCenter: { + gridRowStart: 'span 6', + }, + + start: { + alignSelf: 'start', + }, + center: { + alignSelf: 'center', + }, + + afterAlignToPrimary: { + alignSelf: 'center', + gridRowStart: 'unset', + gridColumnEnd: 'middle', + }, + beforeAlignToPrimary: { + alignSelf: 'center', + gridRowStart: 'unset', + gridColumnStart: 'middle', + }, + + secondLineSpacing: { + marginTop: '-2px', + }, + + primary: { gridRowStart: 'primary' }, + secondary: { gridRowStart: 'secondary' }, + tertiary: { gridRowStart: 'tertiary' }, + quaternary: { gridRowStart: 'quaternary' }, +}); + +const useAvatarSpacingStyles = makeStyles({ + 'extra-small': { + [avatarSpacing]: semanticTokens.gapInsideCtrlToLabel, + }, + small: { + [avatarSpacing]: semanticTokens.gapInsideCtrlLgToLabel, + }, + medium: { + [avatarSpacing]: semanticTokens.gapInsideCtrlLgToLabel, + }, + large: { + [avatarSpacing]: tokens.spacingHorizontalMNudge, + }, + 'extra-large': { + [avatarSpacing]: tokens.spacingHorizontalMNudge, + }, + huge: { + [avatarSpacing]: semanticTokens.paddingCtrlHorizontalDefault, + }, + after: { + marginRight: `var(${avatarSpacing})`, + }, + below: { + marginBottom: `var(${avatarSpacing})`, + }, + before: { + marginLeft: `var(${avatarSpacing})`, + }, +}); + +const usePresenceSpacingStyles = makeStyles({ + small: { + [avatarSpacing]: semanticTokens.gapInsideCtrlToLabel, + }, +}); + +/** + * Apply styling to the Persona slots based on the state + */ +export const useSemanticPersonaStyles = (_state: unknown): PersonaState => { + 'use no memo'; + + const state = _state as PersonaState; + + const { presenceOnly, size, textAlignment, textPosition } = state; + + const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge'; + const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center'; + const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary); + + const rootClassName = useRootClassName(); + const styles = useStyles(); + const avatarSpacingStyles = useAvatarSpacingStyles(); + const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() }; + + state.root.className = mergeClasses( + state.root.className, + personaClassNames.root, + rootClassName, + alignBeforeAfterCenter && styles.beforeAfterCenter, + styles[textPosition], + getSlotClassNameProp_unstable(state.root), + ); + + if (state.avatar) { + state.avatar.className = mergeClasses( + state.avatar.className, + personaClassNames.avatar, + textPosition !== 'below' && styles.media, + alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, + styles[textAlignment], + avatarSpacingStyles[size], + avatarSpacingStyles[textPosition], + getSlotClassNameProp_unstable(state.avatar), + ); + } + + if (state.presence) { + state.presence.className = mergeClasses( + state.presence.className, + personaClassNames.presence, + textPosition !== 'below' && styles.media, + alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, + styles[textAlignment], + presenceSpacingStyles[size], + presenceSpacingStyles[textPosition], + textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, + textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, + getSlotClassNameProp_unstable(state.presence), + ); + } + + if (state.primaryText) { + state.primaryText.className = mergeClasses( + state.primaryText.className, + personaClassNames.primaryText, + alignBeforeAfterCenter && styles.primary, + primaryTextClassName, + getSlotClassNameProp_unstable(state.primaryText), + ); + } + + if (state.secondaryText) { + state.secondaryText.className = mergeClasses( + state.secondaryText.className, + personaClassNames.secondaryText, + alignBeforeAfterCenter && styles.secondary, + optionalTextClassName, + styles.secondLineSpacing, + getSlotClassNameProp_unstable(state.secondaryText), + ); + } + + if (state.tertiaryText) { + state.tertiaryText.className = mergeClasses( + state.tertiaryText.className, + personaClassNames.tertiaryText, + alignBeforeAfterCenter && styles.tertiary, + optionalTextClassName, + getSlotClassNameProp_unstable(state.tertiaryText), + ); + } + + if (state.quaternaryText) { + state.quaternaryText.className = mergeClasses( + state.quaternaryText.className, + personaClassNames.quaternaryText, + alignBeforeAfterCenter && styles.quaternary, + optionalTextClassName, + getSlotClassNameProp_unstable(state.quaternaryText), + ); + } + + return state; +}; + +const usePrimaryTextBaseClassName = makeResetStyles({ + display: 'block', + color: semanticTokens.foregroundContentNeutralPrimary, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.ctrlAvatarTextFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalBody3LineHeight, +}); + +const useOptionalTextBaseClassName = makeResetStyles({ + display: 'block', + color: semanticTokens.foregroundContentNeutralSecondary, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption1FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, +}); + +const useTextStyles = makeStyles({ + beforeAlignToPrimary: { + gridColumnEnd: 'middle', + }, + afterAlignToPrimary: { + gridColumnStart: 'middle', + }, + + body1: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.ctrlAvatarTextFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalBody3LineHeight, + }, + caption1: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption1FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + }, + subtitle2: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalBody2FontSize, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + lineHeight: semanticTokens.textGlobalBody2LineHeight, + }, +}); + +const useTextClassNames = ( + state: PersonaState, + alignToPrimary: boolean, +): { + primaryTextClassName: string; + optionalTextClassName: string; +} => { + const { presenceOnly, size, textPosition } = state; + const primaryTextBaseClassName = usePrimaryTextBaseClassName(); + const optionalTextBaseClassName = useOptionalTextBaseClassName(); + const textStyles = useTextStyles(); + + let primaryTextSize; + let alignToPrimaryClassName; + + if (presenceOnly) { + if (size === 'extra-small') { + primaryTextSize = state.numTextLines <= 1 && textStyles.caption1; + } else if (size === 'extra-large' || size === 'huge') { + primaryTextSize = textStyles.subtitle2; + } + + if (alignToPrimary) { + if (textPosition === 'before') { + alignToPrimaryClassName = textStyles.beforeAlignToPrimary; + } else if (textPosition === 'after') { + alignToPrimaryClassName = textStyles.afterAlignToPrimary; + } + } + } else { + if (size === 'huge') { + primaryTextSize = textStyles.subtitle2; + } else if (size === 'extra-large') { + primaryTextSize = textStyles.subtitle2; + } + } + + return { + primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName), + optionalTextClassName: mergeClasses( + optionalTextBaseClassName, + !presenceOnly && size === 'huge' && textStyles.body1, + alignToPrimaryClassName, + ), + }; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Popover/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Popover/index.ts new file mode 100644 index 00000000000000..b2e34657a7ccf8 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Popover/index.ts @@ -0,0 +1 @@ +export { useSemanticPopoverSurfaceStyles } from './useSemanticPopoverStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Popover/useSemanticPopoverStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Popover/useSemanticPopoverStyles.styles.ts new file mode 100644 index 00000000000000..4616753b6e41e7 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Popover/useSemanticPopoverStyles.styles.ts @@ -0,0 +1,90 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning'; +import { tokens } from '@fluentui/react-theme'; +import type { PopoverSize, PopoverSurfaceState } from '@fluentui/react-popover'; +import { popoverSurfaceClassNames } from '@fluentui/react-popover'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +export const arrowHeights: Record = { + small: 6, + medium: 8, + large: 8, +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + color: semanticTokens.foregroundContentNeutralPrimary, + backgroundColor: semanticTokens.backgroundFlyoutSolid, + borderRadius: semanticTokens.cornerCtrlRest, + border: `1px solid ${semanticTokens.strokeLayer}`, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalBody3FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalBody3LineHeight, + ...createSlideStyles(10), + + // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter + filter: semanticTokens._ctrlPopoverShadowFilter, + }, + + inline: { + // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input. + // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen. + zIndex: 1, + }, + + inverted: { + backgroundColor: tokens.colorNeutralBackgroundStatic, + color: tokens.colorNeutralForegroundStaticInverted, + }, + + brand: { + backgroundColor: semanticTokens.backgroundCtrlBrandRest, + color: semanticTokens.foregroundCtrlOnBrandRest, + }, + + smallPadding: { padding: semanticTokens.paddingContentSmall }, + + mediumPadding: { padding: semanticTokens.paddingContentMedium }, + + largePadding: { padding: semanticTokens._ctrlPopoverPaddingContentLarge }, + + smallArrow: createArrowHeightStyles(arrowHeights.small), + mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium), + arrow: createArrowStyles({ arrowHeight: undefined }), +}); + +/** + * Apply styling to the PopoverSurface slots based on the state + */ +export const useSemanticPopoverSurfaceStyles = (_state: unknown): PopoverSurfaceState => { + 'use no memo'; + + const state = _state as PopoverSurfaceState; + + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + popoverSurfaceClassNames.root, + styles.root, + state.inline && styles.inline, + state.size === 'small' && styles.smallPadding, + state.size === 'medium' && styles.mediumPadding, + state.size === 'large' && styles.largePadding, + state.appearance === 'inverted' && styles.inverted, + state.appearance === 'brand' && styles.brand, + getSlotClassNameProp_unstable(state.root), + ); + + state.arrowClassName = mergeClasses( + state.arrowClassName, + styles.arrow, + state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow, + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/ProgressBar/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/ProgressBar/index.ts new file mode 100644 index 00000000000000..96cb2329fd629b --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/ProgressBar/index.ts @@ -0,0 +1 @@ +export { useSemanticProgressBarStyles } from './useSemanticProgressBarStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/ProgressBar/useSemanticProgressBarStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/ProgressBar/useSemanticProgressBarStyles.styles.ts new file mode 100644 index 00000000000000..3fcf2f625ebc49 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/ProgressBar/useSemanticProgressBarStyles.styles.ts @@ -0,0 +1,146 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { tokens } from '@fluentui/react-theme'; +import { progressBarClassNames, type ProgressBarState } from '@fluentui/react-progress'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +// If the percentComplete is near 0, don't animate it. +// This prevents animations on reset to 0 scenarios. +const ZERO_THRESHOLD = 0.01; + +const indeterminateProgressBar = { + '0%': { + left: '-33%', // matches indeterminate bar width + }, + '100%': { + left: '100%', + }, +}; + +/** + * Styles for the root slot + */ +const useRootStyles = makeStyles({ + root: { + display: 'block', + backgroundColor: semanticTokens.ctrlProgressBackgroundEmpty, + width: '100%', + overflow: 'hidden', + + '@media screen and (forced-colors: active)': { + backgroundColor: 'CanvasText', + }, + }, + rounded: { + borderRadius: semanticTokens.ctrlProgressCorner, + }, + square: { + borderRadius: semanticTokens.cornerZero, + }, + medium: { + height: semanticTokens.ctrlProgressHeightEmpty, + }, + large: { + height: semanticTokens.ctrlProgressLgHeightEmpty, + }, +}); + +/** + * Styles for the ProgressBar bar + */ +const useBarStyles = makeStyles({ + base: { + '@media screen and (forced-colors: active)': { + backgroundColor: 'Highlight', + }, + borderRadius: 'inherit', + }, + medium: { + height: semanticTokens.ctrlProgressHeightFilled, + }, + large: { + height: semanticTokens.ctrlProgressLgHeightFilled, + }, + nonZeroDeterminate: { + transitionProperty: 'width', + transitionDuration: '0.3s', + transitionTimingFunction: 'ease', + }, + indeterminate: { + maxWidth: '33%', + position: 'relative', + backgroundImage: `linear-gradient( + to right, + ${semanticTokens.ctrlProgressBackgroundEmpty} 0%, + ${tokens.colorTransparentBackground} 50%, + ${semanticTokens.ctrlProgressBackgroundEmpty} 100% + )`, + animationName: indeterminateProgressBar, + animationDuration: '3s', + animationTimingFunction: 'linear', + animationIterationCount: 'infinite', + '@media screen and (prefers-reduced-motion: reduce)': { + animationDuration: '0.01ms', + animationIterationCount: '1', + }, + }, + + brand: { + backgroundColor: semanticTokens.ctrlProgressBackgroundFilled, + }, + + error: { + backgroundColor: semanticTokens.statusDangerBackground, + }, + warning: { + backgroundColor: semanticTokens.statusWarningBackground, + }, + success: { + backgroundColor: semanticTokens.statusSuccessBackground, + }, +}); + +/** + * Apply styling to the ProgressBar slots based on the state + */ +export const useSemanticProgressBarStyles = (_state: unknown): ProgressBarState => { + 'use no memo'; + + const state = _state as ProgressBarState; + + const { color, max, shape, thickness, value } = state; + const rootStyles = useRootStyles(); + const barStyles = useBarStyles(); + + state.root.className = mergeClasses( + state.root.className, + progressBarClassNames.root, + rootStyles.root, + rootStyles[shape], + rootStyles[thickness], + getSlotClassNameProp_unstable(state.root), + ); + + if (state.bar) { + state.bar.className = mergeClasses( + state.bar.className, + progressBarClassNames.bar, + barStyles.base, + barStyles.brand, + barStyles[thickness], + value === undefined && barStyles.indeterminate, + value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, + color && value !== undefined && barStyles[color], + getSlotClassNameProp_unstable(state.bar), + ); + } + + if (state.bar && value !== undefined) { + state.bar.style = { + width: Math.min(100, Math.max(0, (value / max) * 100)) + '%', + ...state.bar.style, + }; + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Radio/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Radio/index.ts new file mode 100644 index 00000000000000..ffcda3d4df597c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Radio/index.ts @@ -0,0 +1 @@ +export { useSemanticRadioStyles } from './useSemanticRadioStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Radio/useSemanticRadioStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Radio/useSemanticRadioStyles.styles.ts new file mode 100644 index 00000000000000..6c0be220819d0d --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Radio/useSemanticRadioStyles.styles.ts @@ -0,0 +1,264 @@ +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; +import { tokens } from '@fluentui/react-theme'; +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { radioClassNames, type RadioState } from '@fluentui/react-radio'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseClassName = makeResetStyles({ + display: 'inline-flex', + position: 'relative', + ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }), +}); + +const useRootStyles = makeStyles({ + vertical: { + flexDirection: 'column', + alignItems: 'center', + }, +}); + +const useInputBaseClassName = makeResetStyles({ + position: 'absolute', + left: 0, + top: 0, + width: `calc(${semanticTokens._ctrlRadioChoiceBaseSize} + 2 * ${semanticTokens.ctrlChoicePaddingHorizontal})`, + height: '100%', + boxSizing: 'border-box', + margin: 0, + opacity: 0, + + ':enabled': { + cursor: 'pointer', + [`& ~ .${radioClassNames.label}`]: { + cursor: 'pointer', + }, + }, + + // Colors for the unchecked state + ':enabled:not(:checked)': { + [`& ~ .${radioClassNames.label}`]: { + color: semanticTokens._ctrlRadioForegroundContentNeutralRest, + }, + [`& ~ .${radioClassNames.indicator}`]: { + borderColor: semanticTokens.ctrlChoiceBaseStrokeRest, + backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundRest, + '@media (forced-colors: active)': { + borderColor: 'ButtonBorder', + }, + }, + + ':hover': { + [`& ~ .${radioClassNames.label}`]: { + color: semanticTokens._ctrlRadioForegroundContentNeutralHover, + }, + [`& ~ .${radioClassNames.indicator}`]: { + borderColor: semanticTokens.ctrlChoiceBaseStrokeHover, + backgroundColor: semanticTokens._ctrlRadioBaseBackgroundHover, + }, + }, + + ':hover:active': { + [`& ~ .${radioClassNames.label}`]: { + color: semanticTokens.foregroundContentNeutralPrimary, + }, + [`& ~ .${radioClassNames.indicator}`]: { + borderColor: semanticTokens.ctrlChoiceBaseStrokePressed, + backgroundColor: semanticTokens._ctrlRadioBaseBackgroundPressed, + }, + }, + }, + + // Colors for the checked state + ':enabled:checked': { + [`& ~ .${radioClassNames.label}`]: { + color: semanticTokens.foregroundContentNeutralPrimary, + }, + [`& ~ .${radioClassNames.indicator}`]: { + borderColor: semanticTokens._ctrlRadioStrokeOnActiveBrandRest, + color: semanticTokens._ctrlRadioForegroundOnActiveBrandRest, + backgroundColor: semanticTokens._ctrlRadioBackgroundActiveBrandRest, + '@media (forced-colors: active)': { + borderColor: 'Highlight', + color: 'Highlight', + '::after': { + backgroundColor: 'Highlight', + }, + }, + }, + + ':hover': { + [`& ~ .${radioClassNames.indicator}`]: { + borderColor: semanticTokens._ctrlRadioStrokeOnActiveBrandHover, + color: semanticTokens._ctrlRadioForegroundOnActiveBrandHover, + backgroundColor: semanticTokens._ctrlRadioBackgroundActiveBrandHover, + }, + }, + + ':hover:active': { + [`& ~ .${radioClassNames.indicator}`]: { + borderColor: semanticTokens._ctrlRadioStrokeOnActiveBrandPressed, + color: semanticTokens._ctrlRadioForegroundOnActiveBrandPressed, + backgroundColor: semanticTokens._ctrlRadioBackgroundActiveBrandPressed, + }, + }, + }, + + // Colors for the disabled state + ':disabled': { + [`& ~ .${radioClassNames.label}`]: { + color: semanticTokens._ctrlRadioForegroundContentDisabled, + cursor: 'default', + '@media (forced-colors: active)': { + color: 'GrayText', + }, + }, + ':checked': { + [`& ~ .${radioClassNames.indicator}`]: { + backgroundColor: semanticTokens._ctrlRadioBackgroundActiveDisabled, + }, + }, + ':not(:checked)': { + [`& ~ .${radioClassNames.indicator}`]: { + backgroundColor: semanticTokens._ctrlRadioBaseBackgroundDisabled, + }, + }, + [`& ~ .${radioClassNames.indicator}`]: { + borderColor: semanticTokens.ctrlChoiceBaseStrokeDisabled, + color: semanticTokens._ctrlRadioForegroundOnActiveDisabled, + '@media (forced-colors: active)': { + borderColor: 'GrayText', + color: 'GrayText', + '::after': { + backgroundColor: 'GrayText', + }, + }, + }, + }, +}); + +const useInputStyles = makeStyles({ + below: { + width: '100%', + height: `calc(${semanticTokens._ctrlRadioChoiceBaseSize} + 2 * ${semanticTokens.ctrlChoicePaddingVertical})`, + }, + + // If the indicator has no children, use the ::after pseudo-element for the checked state + defaultIndicator: { + [`:checked ~ .${radioClassNames.indicator}::after`]: { + content: '""', + }, + }, + + // If the indicator has a child, hide it until the radio is checked + customIndicator: { + [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: { + opacity: '0', + }, + }, +}); + +const useIndicatorBaseClassName = makeResetStyles({ + position: 'relative', + width: semanticTokens._ctrlRadioChoiceBaseSize, + height: semanticTokens._ctrlRadioChoiceBaseSize, + fontSize: '12px', + boxSizing: 'border-box', + flexShrink: 0, + + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + overflow: 'hidden', + + border: `${semanticTokens.strokeWidthCtrlOutlineRest} solid`, + borderRadius: semanticTokens.ctrlChoiceRadioCorner, + margin: `${semanticTokens.ctrlChoicePaddingVertical} ${semanticTokens.ctrlChoicePaddingHorizontal}`, + fill: 'currentColor', + pointerEvents: 'none', + + '::after': { + position: 'absolute', + width: semanticTokens.ctrlChoiceRadioDotSizeRest, + height: semanticTokens.ctrlChoiceRadioDotSizeRest, + borderRadius: semanticTokens.ctrlChoiceRadioCorner, + // Use a transform to avoid pixel rounding errors at 125% DPI + // https://github.com/microsoft/fluentui/issues/30025 + transform: 'scale(0.625)', + backgroundColor: 'currentColor', + }, +}); + +// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles. +const useLabelStyles = makeStyles({ + base: { + alignSelf: 'center', + padding: `${semanticTokens._ctrlRadioPaddingVertical} ${tokens.spacingHorizontalS}`, + }, + + after: { + paddingLeft: tokens.spacingHorizontalXS, + + // Use a (negative) margin to account for the difference between the indicator's height and the label's line height. + // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps. + marginTop: `calc((${semanticTokens._ctrlRadioChoiceBaseSize} - ${semanticTokens.textRampItemBodyLineHeight}) / 2)`, + marginBottom: `calc((${semanticTokens._ctrlRadioChoiceBaseSize} - ${semanticTokens.textRampItemBodyLineHeight}) / 2)`, + }, + + below: { + paddingTop: semanticTokens._ctrlRadioPaddingTextTop, + textAlign: 'center', + }, +}); + +/** + * Apply styling to the Radio slots based on the state + */ +export const useSemanticRadioStyles = (_state: unknown): RadioState => { + 'use no memo'; + + const state = _state as RadioState; + const { labelPosition } = state; + + const rootBaseClassName = useRootBaseClassName(); + const rootStyles = useRootStyles(); + state.root.className = mergeClasses( + state.root.className, + radioClassNames.root, + rootBaseClassName, + labelPosition === 'below' && rootStyles.vertical, + getSlotClassNameProp_unstable(state.root), + ); + + const inputBaseClassName = useInputBaseClassName(); + const inputStyles = useInputStyles(); + state.input.className = mergeClasses( + state.input.className, + radioClassNames.input, + inputBaseClassName, + labelPosition === 'below' && inputStyles.below, + state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, + getSlotClassNameProp_unstable(state.input), + ); + + const indicatorBaseClassName = useIndicatorBaseClassName(); + state.indicator.className = mergeClasses( + state.indicator.className, + radioClassNames.indicator, + indicatorBaseClassName, + getSlotClassNameProp_unstable(state.indicator), + ); + + const labelStyles = useLabelStyles(); + if (state.label) { + state.label.className = mergeClasses( + state.label.className, + radioClassNames.label, + labelStyles.base, + labelStyles[labelPosition], + getSlotClassNameProp_unstable(state.label), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/index.ts new file mode 100644 index 00000000000000..96e32a10a00768 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/index.ts @@ -0,0 +1,2 @@ +export { useSemanticRatingDisplayStyles } from './useSemanticRatingDisplayStyles.styles'; +export { useSemanticRatingItemStyles } from './useSemanticRatingItemStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/useSemanticRatingDisplayStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/useSemanticRatingDisplayStyles.styles.ts new file mode 100644 index 00000000000000..8da4071c6706dd --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/useSemanticRatingDisplayStyles.styles.ts @@ -0,0 +1,84 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { ratingDisplayClassNames, type RatingDisplayState } from '@fluentui/react-rating'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ + +const useRootClassName = makeResetStyles({ + display: 'flex', + flexWrap: 'wrap', + alignItems: 'center', +}); + +const useLabelClassName = makeResetStyles({ + color: semanticTokens.foregroundCtrlNeutralPrimaryRest, + marginLeft: semanticTokens.gapInsideCtrlSmToLabel, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampSmItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, +}); + +const useLabelStyles = makeStyles({ + large: { + fontSize: semanticTokens.textRampItemBodyFontSize, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + marginLeft: semanticTokens.gapInsideCtrlToLabel, + }, + extraLarge: { + fontSize: semanticTokens.textRampLgItemBodyFontSize, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + marginLeft: semanticTokens.gapInsideCtrlLgToLabel, + }, + strong: { + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + }, + divider: { + '::before': { + content: '"· "', + }, + }, +}); + +/** + * Apply styling to the RatingDisplay slots based on the state + */ +export const useSemanticRatingDisplayStyles = (_state: unknown): RatingDisplayState => { + 'use no memo'; + + const state = _state as RatingDisplayState; + + const { size } = state; + const rootClassName = useRootClassName(); + state.root.className = mergeClasses(ratingDisplayClassNames.root, rootClassName, state.root.className); + const labelClassName = useLabelClassName(); + const labelStyles = useLabelStyles(); + + if (state.valueText) { + state.valueText.className = mergeClasses( + ratingDisplayClassNames.valueText, + labelClassName, + labelStyles.strong, + size === 'large' && labelStyles.large, + size === 'extra-large' && labelStyles.extraLarge, + state.valueText.className, + getSlotClassNameProp_unstable(state.valueText), + ); + } + if (state.countText) { + state.countText.className = mergeClasses( + ratingDisplayClassNames.countText, + labelClassName, + size === 'large' && labelStyles.large, + size === 'extra-large' && labelStyles.extraLarge, + state.valueText && labelStyles.divider, + state.countText.className, + getSlotClassNameProp_unstable(state.countText), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/useSemanticRatingItemStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/useSemanticRatingItemStyles.styles.ts new file mode 100644 index 00000000000000..6854f81eb73110 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/useSemanticRatingItemStyles.styles.ts @@ -0,0 +1,178 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; +import { ratingItemClassNames, type RatingItemState } from '@fluentui/react-rating'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + position: 'relative', + ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }), + }, + small: { + fontSize: '12px', + width: '12px', + height: '12px', + }, + + medium: { + fontSize: '16px', + width: '16px', + height: '16px', + }, + + large: { + fontSize: '20px', + width: '20px', + height: '20px', + }, + + 'extra-large': { + fontSize: '28px', + width: '28px', + height: '28px', + }, +}); + +const useInputBaseClassName = makeResetStyles({ + position: 'absolute', + left: 0, + top: 0, + right: 0, + bottom: 0, + boxSizing: 'border-box', + margin: 0, + opacity: 0, + cursor: 'pointer', + height: '100%', +}); + +const useInputStyles = makeStyles({ + lowerHalf: { + right: '50%', + }, + upperHalf: { + left: '50%', + }, +}); + +const useIndicatorBaseClassName = makeResetStyles({ + display: 'flex', + overflow: 'hidden', + color: semanticTokens.ctrlRatingIconForegroundFilled, + fill: 'currentColor', + pointerEvents: 'none', + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, +}); + +const useIndicatorStyles = makeStyles({ + lowerHalf: { + right: '50%', + '& > svg': { + flex: '0 0 auto', + }, + }, + upperHalf: { + left: '50%', + marginLeft: '-50%', + }, + brand: { + color: tokens.colorBrandForeground1, + }, + marigold: { + color: tokens.colorPaletteMarigoldBorderActive, + }, + filled: { + color: semanticTokens.ctrlRatingIconForegroundEmpty, + stroke: semanticTokens.strokeLayer, + '@media (forced-colors: active)': { + color: 'Canvas', + stroke: 'CanvasText', + }, + }, + brandFilled: { + color: tokens.colorBrandBackground2, + }, + marigoldFilled: { + color: tokens.colorPaletteMarigoldBackground2, + }, +}); + +/** + * Apply styling to the RatingItem slots based on the state + */ +export const useSemanticRatingItemStyles = (_state: unknown): RatingItemState => { + 'use no memo'; + + const state = _state as RatingItemState; + + const { color, size, iconFillWidth, appearance } = state; + const styles = useStyles(); + const inputBaseClassName = useInputBaseClassName(); + const inputStyles = useInputStyles(); + const indicatorBaseClassName = useIndicatorBaseClassName(); + const indicatorStyles = useIndicatorStyles(); + + state.root.className = mergeClasses( + state.root.className, + ratingItemClassNames.root, + styles.root, + styles[size], + getSlotClassNameProp_unstable(state.root), + ); + + if (state.halfValueInput) { + state.halfValueInput.className = mergeClasses( + state.halfValueInput.className, + ratingItemClassNames.halfValueInput, + inputBaseClassName, + inputStyles.lowerHalf, + getSlotClassNameProp_unstable(state.halfValueInput), + ); + } + + if (state.fullValueInput) { + state.fullValueInput.className = mergeClasses( + state.fullValueInput.className, + ratingItemClassNames.fullValueInput, + inputBaseClassName, + state.halfValueInput && inputStyles.upperHalf, + getSlotClassNameProp_unstable(state.fullValueInput), + ); + } + + if (state.unselectedIcon) { + state.unselectedIcon.className = mergeClasses( + state.unselectedIcon.className, + ratingItemClassNames.unselectedIcon, + indicatorBaseClassName, + appearance === 'filled' && indicatorStyles.filled, + color === 'brand' && (appearance === 'filled' ? indicatorStyles.brandFilled : indicatorStyles.brand), + color === 'marigold' && (appearance === 'filled' ? indicatorStyles.marigoldFilled : indicatorStyles.marigold), + iconFillWidth === 0.5 && indicatorStyles.upperHalf, + getSlotClassNameProp_unstable(state.unselectedIcon), + ); + } + + if (state.selectedIcon) { + state.selectedIcon.className = mergeClasses( + state.selectedIcon.className, + ratingItemClassNames.selectedIcon, + indicatorBaseClassName, + color === 'brand' && indicatorStyles.brand, + color === 'marigold' && indicatorStyles.marigold, + iconFillWidth === 0.5 && indicatorStyles.lowerHalf, + getSlotClassNameProp_unstable(state.selectedIcon), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Search/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Search/index.ts new file mode 100644 index 00000000000000..1b7c2b5aa82ea4 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Search/index.ts @@ -0,0 +1 @@ +export { useSemanticSearchBoxStyles } from './useSemanticSearchStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Search/useSemanticSearchStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Search/useSemanticSearchStyles.styles.ts new file mode 100644 index 00000000000000..3c644fda549af9 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Search/useSemanticSearchStyles.styles.ts @@ -0,0 +1,173 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { tokens } from '@fluentui/react-theme'; +import { useSemanticInputStyles } from '../Input'; +import { type SearchBoxState, searchBoxClassNames } from '@fluentui/react-search'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * Styles for the root slot + */ +const useRootStyles = makeStyles({ + small: { + columnGap: 0, + maxWidth: '468px', + + paddingLeft: tokens.spacingHorizontalSNudge, + paddingRight: tokens.spacingHorizontalSNudge, + }, + medium: { + columnGap: 0, + maxWidth: '468px', + + paddingLeft: tokens.spacingHorizontalS, + paddingRight: tokens.spacingHorizontalS, + }, + large: { + columnGap: 0, + maxWidth: '468px', + + paddingLeft: tokens.spacingHorizontalMNudge, + paddingRight: tokens.spacingHorizontalMNudge, + }, + + input: { + paddingLeft: tokens.spacingHorizontalSNudge, + paddingRight: 0, + + // removes the WebKit pseudoelement styling + '::-webkit-search-decoration': { + display: 'none', + }, + '::-webkit-search-cancel-button': { + display: 'none', + }, + }, + + unfocusedNoContentAfter: { + paddingRight: 0, + }, +}); + +const useInputStyles = makeStyles({ + small: { + paddingRight: tokens.spacingHorizontalSNudge, + }, + medium: { + paddingRight: tokens.spacingHorizontalS, + }, + large: { + paddingRight: tokens.spacingHorizontalMNudge, + }, +}); + +const useContentAfterStyles = makeStyles({ + contentAfter: { + paddingLeft: tokens.spacingHorizontalM, + columnGap: tokens.spacingHorizontalXS, + }, + rest: { + height: 0, + width: 0, + paddingLeft: 0, + overflow: 'hidden', + }, +}); + +const useDismissClassName = makeResetStyles({ + boxSizing: 'border-box', + color: semanticTokens.foregroundCtrlIconOnNeutralRest, // "icon color" in design spec + display: 'flex', + // special case styling for icons (most common case) to ensure they're centered vertically + // size: medium (default) + '> svg': { fontSize: '20px' }, + cursor: 'pointer', +}); + +const useDismissStyles = makeStyles({ + disabled: { + color: semanticTokens.backgroundCtrlSubtleRest, + }, + // Ensure resizable icons show up with the proper font size + small: { + '> svg': { fontSize: '16px' }, + }, + medium: { + // included in useDismissClassName + }, + large: { + '> svg': { fontSize: '24px' }, + }, +}); + +/** + * Apply styling to the SearchBox slots based on the state + */ +export const useSemanticSearchBoxStyles = (_state: unknown): SearchBoxState => { + 'use no memo'; + + const state = _state as SearchBoxState; + + const { disabled, focused, size } = state; + + const rootStyles = useRootStyles(); + const inputStyles = useInputStyles(); + const contentAfterStyles = useContentAfterStyles(); + const dismissClassName = useDismissClassName(); + const dismissStyles = useDismissStyles(); + + state.root.className = mergeClasses( + state.root.className, + searchBoxClassNames.root, + rootStyles[size], + !focused && rootStyles.unfocusedNoContentAfter, + getSlotClassNameProp_unstable(state.root), + ); + + state.input.className = mergeClasses( + state.input.className, + searchBoxClassNames.input, + rootStyles.input, + !focused && inputStyles[size], + getSlotClassNameProp_unstable(state.input), + ); + + if (state.dismiss) { + state.dismiss.className = mergeClasses( + state.dismiss.className, + searchBoxClassNames.dismiss, + dismissClassName, + disabled && dismissStyles.disabled, + dismissStyles[size], + getSlotClassNameProp_unstable(state.dismiss), + ); + } + + if (state.contentBefore) { + state.contentBefore.className = mergeClasses( + state.contentBefore.className, + searchBoxClassNames.contentBefore, + getSlotClassNameProp_unstable(state.contentBefore), + ); + } + + if (state.contentAfter) { + state.contentAfter.className = mergeClasses( + state.contentAfter.className, + searchBoxClassNames.contentAfter, + contentAfterStyles.contentAfter, + !focused && contentAfterStyles.rest, + getSlotClassNameProp_unstable(state.contentAfter), + ); + } else if (state.dismiss) { + state.dismiss.className = mergeClasses( + contentAfterStyles.contentAfter, + state.dismiss.className, + getSlotClassNameProp_unstable(state.dismiss), + ); + } + + useSemanticInputStyles(state); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Slider/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Slider/index.ts new file mode 100644 index 00000000000000..433e7d1e5f0cc5 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Slider/index.ts @@ -0,0 +1 @@ +export { useSemanticSliderStyles } from './useSemanticSliderStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Slider/useSemanticSliderStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Slider/useSemanticSliderStyles.styles.ts new file mode 100644 index 00000000000000..318476d9787e22 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Slider/useSemanticSliderStyles.styles.ts @@ -0,0 +1,388 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; +import { type SliderState, sliderCSSVars, sliderClassNames } from '@fluentui/react-slider'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +// Internal CSS variables +const thumbPositionVar = `--fui-Slider__thumb--position`; + +const { + sliderDirectionVar, + sliderInnerThumbRadiusVar, + sliderProgressVar, + sliderProgressColorVar, + sliderRailSizeVar, + sliderRailColorVar, + sliderStepsPercentVar, + sliderThumbColorVar, + sliderThumbSizeVar, +} = sliderCSSVars; + +/** + * Styles for the root slot + */ +const useRootStyles = makeStyles({ + root: { + position: 'relative', + display: 'inline-grid', + touchAction: 'none', + alignItems: 'center', + justifyItems: 'center', + }, + + small: { + [sliderThumbSizeVar]: semanticTokens.ctrlSliderSmThumbSizeRest, + [sliderInnerThumbRadiusVar]: '5px', + [sliderRailSizeVar]: semanticTokens.ctrlSliderSmBarHeight, + minHeight: semanticTokens._ctrlSliderSmBarSizeDefault, + ':hover': { + [sliderThumbSizeVar]: semanticTokens.ctrlSliderSmThumbSizeHover, + }, + ':active': { + [sliderThumbSizeVar]: semanticTokens.ctrlSliderSmThumbSizePressed, + }, + }, + + smallHorizontal: { + gridTemplateColumns: `${semanticTokens._ctrlSliderSmPaddingDefault} 1fr ${semanticTokens._ctrlSliderSmPaddingDefault}`, + }, + + smallVertical: { + gridTemplateRows: `${semanticTokens._ctrlSliderSmPaddingDefault} 1fr ${semanticTokens._ctrlSliderSmPaddingDefault}`, + minWidth: `Max(${semanticTokens.ctrlSliderSmThumbSizeRest}, ${semanticTokens.ctrlSliderSmThumbSizeHover}, ${semanticTokens.ctrlSliderSmThumbSizePressed})`, + }, + + medium: { + [sliderThumbSizeVar]: semanticTokens.ctrlSliderThumbSizeRest, + [sliderInnerThumbRadiusVar]: '6px', + [sliderRailSizeVar]: semanticTokens.ctrlSliderBarHeight, + minHeight: semanticTokens._ctrlSliderBarSizeDefault, + ':hover': { + [sliderThumbSizeVar]: semanticTokens.ctrlSliderThumbSizeHover, + }, + ':active': { + [sliderThumbSizeVar]: semanticTokens.ctrlSliderThumbSizePressed, + }, + }, + + // Thumb should not animate on interactions when disabled + mediumDisabled: { + ':hover': { + [sliderThumbSizeVar]: semanticTokens.ctrlSliderThumbSizeRest, + }, + ':active': { + [sliderThumbSizeVar]: semanticTokens.ctrlSliderThumbSizeRest, + }, + }, + + // Thumb should not animate on interactions when disabled + smallDisabled: { + ':hover': { + [sliderThumbSizeVar]: semanticTokens.ctrlSliderSmThumbSizeRest, + }, + ':active': { + [sliderThumbSizeVar]: semanticTokens.ctrlSliderSmThumbSizeRest, + }, + }, + + mediumHorizontal: { + gridTemplateColumns: `${semanticTokens._ctrlSliderPaddingDefault} 1fr ${semanticTokens._ctrlSliderPaddingDefault}`, + }, + + mediumVertical: { + gridTemplateRows: `${semanticTokens._ctrlSliderPaddingDefault} 1fr ${semanticTokens._ctrlSliderPaddingDefault}`, + minWidth: `Max(${semanticTokens.ctrlSliderThumbSizeRest}, ${semanticTokens.ctrlSliderThumbSizeHover}, ${semanticTokens.ctrlSliderThumbSizePressed})`, + }, + + horizontal: { + minWidth: '120px', + // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells + gridTemplateRows: `1fr var(${sliderThumbSizeVar}) 1fr`, + }, + + vertical: { + minHeight: '120px', + // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells + gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`, + }, + + enabled: { + [sliderRailColorVar]: semanticTokens.ctrlSliderBarForegroundEmptyRest, + [sliderProgressColorVar]: semanticTokens.ctrlSliderBarForegroundFilledRest, + [sliderThumbColorVar]: semanticTokens.ctrlSliderThumbBackgroundRest, + ':hover': { + [sliderRailColorVar]: semanticTokens.ctrlSliderBarForegroundEmptyHover, + [sliderProgressColorVar]: semanticTokens.ctrlSliderBarForegroundFilledHover, + [sliderThumbColorVar]: semanticTokens.ctrlSliderThumbBackgroundHover, + }, + ':active': { + [sliderRailColorVar]: semanticTokens.ctrlSliderBarForegroundEmptyPressed, + [sliderProgressColorVar]: semanticTokens.ctrlSliderBarForegroundFilledPressed, + [sliderThumbColorVar]: semanticTokens.ctrlSliderThumbBackgroundPressed, + }, + '@media (forced-colors: active)': { + [sliderRailColorVar]: 'CanvasText', + [sliderThumbColorVar]: 'Highlight', + [sliderProgressColorVar]: 'Highlight', + ':hover': { + [sliderThumbColorVar]: 'Highlight', + [sliderProgressColorVar]: 'Highlight', + }, + }, + }, + + disabled: { + [sliderRailColorVar]: semanticTokens.ctrlSliderBarForegroundEmptyDisabled, + [sliderProgressColorVar]: semanticTokens.ctrlSliderBarForegroundFilledDisabled, + [sliderThumbColorVar]: semanticTokens.ctrlSliderThumbBackgroundDisabled, + '@media (forced-colors: active)': { + [sliderRailColorVar]: 'GrayText', + [sliderCSSVars.sliderThumbColorVar]: 'GrayText', + [sliderCSSVars.sliderProgressColorVar]: 'GrayText', + }, + }, + + focusIndicatorHorizontal: createFocusOutlineStyle({ + selector: 'focus-within', + style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '-4px', right: '-4px' } }, + }), + + focusIndicatorVertical: createFocusOutlineStyle({ + selector: 'focus-within', + style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '4px', right: '4px' } }, + }), +}); + +/** + * Styles for the rail slot + */ +const useRailStyles = makeStyles({ + rail: { + borderRadius: semanticTokens.ctrlSliderBarCorner, + pointerEvents: 'none', + gridRowStart: '2', + gridRowEnd: '2', + gridColumnStart: '2', + gridColumnEnd: '2', + position: 'relative', + forcedColorAdjust: 'none', + // Background gradient represents the progress of the slider + backgroundImage: `linear-gradient( + var(${sliderDirectionVar}), + var(${sliderProgressColorVar}) 0%, + var(${sliderProgressColorVar}) var(${sliderProgressVar}), + var(${sliderRailColorVar}) var(${sliderProgressVar}) + )`, + outlineWidth: semanticTokens.strokeWidthDefault, + outlineStyle: 'solid', + outlineColor: semanticTokens.strokeLayer, + '::before': { + content: "''", + position: 'absolute', + // Repeating gradient represents the steps if provided + backgroundImage: `repeating-linear-gradient( + var(${sliderDirectionVar}), + #0000 0%, + #0000 calc(var(${sliderStepsPercentVar}) - 1px), + ${semanticTokens.backgroundCtrlNeutralRest} calc(var(${sliderStepsPercentVar}) - 1px), + ${semanticTokens.backgroundCtrlNeutralRest} var(${sliderStepsPercentVar}) + )`, + // force steps to use HighlightText for high contrast mode + '@media (forced-colors: active)': { + backgroundImage: `repeating-linear-gradient( + var(${sliderDirectionVar}), + #0000 0%, + #0000 calc(var(${sliderStepsPercentVar}) - 1px), + HighlightText calc(var(${sliderStepsPercentVar}) - 1px), + HighlightText var(${sliderStepsPercentVar}) + )`, + }, + }, + }, + + horizontal: { + width: '100%', + height: `var(${sliderRailSizeVar})`, + '::before': { + left: '-1px', + right: '-1px', + height: `var(${sliderRailSizeVar})`, + }, + }, + + vertical: { + width: `var(${sliderRailSizeVar})`, + height: '100%', + '::before': { + width: `var(${sliderRailSizeVar})`, + top: '-1px', + bottom: '-1px', + }, + }, +}); + +/** + * Styles for the thumb slot + */ +const useThumbStyles = makeStyles({ + thumb: { + // Ensure the thumb stays within the track boundaries. + // When the value is at 0% or 100%, the distance from the track edge + // to the thumb center equals the inner thumb radius. + [`${thumbPositionVar}`]: `clamp(var(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`, + gridRowStart: '2', + gridRowEnd: '2', + gridColumnStart: '2', + gridColumnEnd: '2', + position: 'absolute', + width: `var(${sliderThumbSizeVar})`, + height: `var(${sliderThumbSizeVar})`, + pointerEvents: 'none', + outlineStyle: 'none', + forcedColorAdjust: 'none', + borderRadius: semanticTokens.ctrlSliderThumbCorner, + boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${semanticTokens.ctrlSliderThumbInnerStrokeRest} inset`, + backgroundColor: `var(${sliderThumbColorVar})`, + '::before': { + position: 'absolute', + top: '0px', + left: '0px', + bottom: '0px', + right: '0px', + borderRadius: semanticTokens.ctrlSliderThumbCorner, + boxSizing: 'border-box', + content: "''", + border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${semanticTokens.ctrlSliderThumbOuterStrokeRest}`, + }, + }, + disabled: { + boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${semanticTokens.ctrlSliderThumbInnerStrokeDisabled} inset`, + '::before': { + border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${semanticTokens.ctrlSliderThumbOuterStrokeDisabled}`, + }, + }, + enabled: { + ':hover': { + boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${semanticTokens.ctrlSliderThumbInnerStrokeHover} inset`, + '::before': { + border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${semanticTokens.ctrlSliderThumbOuterStrokeHover}`, + }, + }, + ':active': { + boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${semanticTokens.ctrlSliderThumbInnerStrokePressed} inset`, + '::before': { + border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${semanticTokens.ctrlSliderThumbOuterStrokePressed}`, + }, + }, + }, + horizontal: { + transform: 'translateX(-50%)', + left: `var(${thumbPositionVar})`, + }, + vertical: { + transform: 'translateY(50%)', + bottom: `var(${thumbPositionVar})`, + }, +}); + +/** + * Styles for the Input slot + */ +const useInputStyles = makeStyles({ + input: { + cursor: 'pointer', + opacity: 0, + gridRowStart: '1', + gridRowEnd: '-1', + gridColumnStart: '1', + gridColumnEnd: '-1', + padding: '0', + margin: '0', + }, + disabled: { + cursor: 'default', + }, + horizontal: { + height: `var(${sliderThumbSizeVar})`, + width: '100%', + }, + vertical: { + height: '100%', + width: `var(${sliderThumbSizeVar})`, + // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically. + // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means + // that vertical controls should also support `writing-mode: vertical-lr`. + '@supports (writing-mode: sideways-lr)': { + writingMode: 'vertical-lr', + direction: 'rtl', + }, + // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs + '@supports not (writing-mode: sideways-lr)': { + WebkitAppearance: 'slider-vertical', + }, + }, +}); + +/** + * Apply styling to the Slider slots based on the state + */ +export const useSemanticSliderStyles = (_state: unknown): SliderState => { + 'use no memo'; + + const state = _state as SliderState; + const rootStyles = useRootStyles(); + const railStyles = useRailStyles(); + const thumbStyles = useThumbStyles(); + const inputStyles = useInputStyles(); + const isVertical = state.vertical; + const isSmallVertical = state.size === 'small' && isVertical; + const isSmallHorizontal = state.size === 'small' && !isVertical; + const isMediumVertical = state.size === 'medium' && isVertical; + const isMediumHorizontal = state.size === 'medium' && !isVertical; + const disabledThumbStyle = state.size === 'small' ? rootStyles.smallDisabled : rootStyles.mediumDisabled; + + state.root.className = mergeClasses( + state.root.className, + sliderClassNames.root, + rootStyles.root, + isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, + rootStyles[state.size!], + isVertical ? rootStyles.vertical : rootStyles.horizontal, + isSmallVertical && rootStyles.smallVertical, + isSmallHorizontal && rootStyles.smallHorizontal, + isMediumVertical && rootStyles.mediumVertical, + isMediumHorizontal && rootStyles.mediumHorizontal, + state.disabled ? rootStyles.disabled : rootStyles.enabled, + state.disabled && disabledThumbStyle, + getSlotClassNameProp_unstable(state.root), + ); + + state.rail.className = mergeClasses( + state.rail.className, + sliderClassNames.rail, + railStyles.rail, + isVertical ? railStyles.vertical : railStyles.horizontal, + getSlotClassNameProp_unstable(state.rail), + ); + + state.thumb.className = mergeClasses( + state.thumb.className, + sliderClassNames.thumb, + thumbStyles.thumb, + isVertical ? thumbStyles.vertical : thumbStyles.horizontal, + state.disabled && thumbStyles.disabled, + getSlotClassNameProp_unstable(state.thumb), + ); + + state.input.className = mergeClasses( + state.input.className, + sliderClassNames.input, + inputStyles.input, + isVertical ? inputStyles.vertical : inputStyles.horizontal, + state.disabled && inputStyles.disabled, + getSlotClassNameProp_unstable(state.input), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/SpinButton/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/SpinButton/index.ts new file mode 100644 index 00000000000000..4c0c10f5b79ceb --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/SpinButton/index.ts @@ -0,0 +1 @@ +export { useSemanticSpinButtonStyles } from './useSemanticSpinButtonStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/SpinButton/useSemanticSpinButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/SpinButton/useSemanticSpinButtonStyles.styles.ts new file mode 100644 index 00000000000000..58db5fde9cd29f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/SpinButton/useSemanticSpinButtonStyles.styles.ts @@ -0,0 +1,453 @@ +import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { spinButtonClassNames, type SpinButtonState } from '@fluentui/react-spinbutton'; +import { tokens } from '@fluentui/react-theme'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const spinButtonExtraClassNames = { + buttonActive: 'fui-SpinButton__button_active', +}; + +const fieldHeights = { + small: semanticTokens._ctrlSpinButtonSizeSmDefault, + medium: semanticTokens._ctrlSpinButtonSizeDefault, +}; + +const useRootClassName = makeResetStyles({ + display: 'inline-grid', + gridTemplateColumns: `1fr 24px`, + gridTemplateRows: '1fr 1fr', + columnGap: semanticTokens.gapInsideCtrlSmDefault, + rowGap: 0, + position: 'relative', + isolation: 'isolate', + verticalAlign: 'middle', + + backgroundColor: semanticTokens.ctrlInputBackgroundRest, + minHeight: fieldHeights.medium, + padding: `0 0 0 ${semanticTokens._ctrlSpinButtonPaddingHorizontal}`, + borderRadius: semanticTokens.cornerCtrlRest, + + // Apply border styles on the ::before pseudo element. + // We cannot use ::after since that is used for selection. + // Using the pseudo element allows us to place the border + // above content in the component which ensures the buttons + // line up visually with the border as expected. Without this + // there is a bit of a gap which can become very noticeable + // at high zoom or when OS zoom levels are not divisible by 2 + // (e.g., 150% on Windows in Firefox) + // This is most noticeable on the "outline" appearance which is + // also the default so it feels worth the extra ceremony to get right. + '::before': { + content: '""', + boxSizing: 'border-box', + position: 'absolute', + top: 0, + right: 0, + bottom: 0, + left: 0, + pointerEvents: 'none', + zIndex: 10, + border: `${semanticTokens.ctrlInputStrokeWidthRest} solid ${semanticTokens.ctrlInputStrokeRest}`, + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeRest, + borderBottomWidth: semanticTokens.ctrlInputBottomLineStrokeWidthRest, + borderRadius: semanticTokens.cornerCtrlRest, + }, + + '::after': { + boxSizing: 'border-box', + content: '""', + position: 'absolute', + right: 0, + bottom: 0, + left: 0, + zIndex: 20, + + // Maintaining the correct corner radius: + // Use the whole border-radius as the height and only put radii on the bottom corners. + // (Otherwise the radius would be automatically reduced to fit available space.) + // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0. + height: `max(2px, ${semanticTokens.cornerCtrlPressed})`, + borderBottomLeftRadius: semanticTokens.cornerCtrlPressed, + borderBottomRightRadius: semanticTokens.cornerCtrlPressed, + + // Flat 2px border: + // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off. + // (This could be done without trimming using `background: linear-gradient(...)`, but using + // borderBottom makes it easier for people to override the color if needed.) + borderBottom: `2px solid ${semanticTokens.ctrlInputBottomLineStrokeSelected}`, + clipPath: 'inset(calc(100% - 2px) 0 0 0)', + + // Animation for focus OUT + transform: 'scaleX(0)', + transitionProperty: 'transform', + transitionDuration: tokens.durationUltraFast, + transitionDelay: tokens.curveAccelerateMid, + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + transitionDelay: '0.01ms', + }, + }, + + ':focus-within::after': { + // Animation for focus IN + transform: 'scaleX(1)', + transitionProperty: 'transform', + transitionDuration: tokens.durationNormal, + transitionDelay: tokens.curveDecelerateMid, + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + transitionDelay: '0.01ms', + }, + }, + ':focus-within:active::after': { + // This is if the user clicks the field again while it's already focused + borderBottomColor: semanticTokens._ctrlInputBottomLineStrokeBrandPressed, + }, + ':focus-within': { + outline: '2px solid transparent', + }, +}); + +const useRootStyles = makeStyles({ + small: { + minHeight: fieldHeights.small, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampSmItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + paddingLeft: semanticTokens.paddingCtrlSmHorizontalDefault, + }, + + medium: { + // set by useRootClassName + }, + + outline: { + // set by useRootClassName + }, + + outlineInteractive: { + ':hover::before': { + ...shorthands.borderColor(semanticTokens.ctrlInputStrokeHover), + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeHover, + }, + // DO NOT add a space between the selectors! It changes the behavior of make-styles. + ':active,:focus-within': { + '::before': { + ...shorthands.borderColor(semanticTokens.ctrlInputStrokePressed), + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokePressed, + }, + }, + }, + + underline: { + '::before': { + ...shorthands.borderWidth(0, 0, '1px', 0), + borderRadius: semanticTokens.cornerZero, // corners look strange if rounded + }, + }, + + underlineInteractive: { + ':hover::before': { + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeHover, + }, + // DO NOT add a space between the selectors! It changes the behavior of make-styles. + ':active,:focus-within': { + '::before': { + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokePressed, + }, + }, + '::after': { + borderRadius: semanticTokens.cornerZero, // remove rounded corners from focus underline + }, + }, + + filled: { + '::before': { + border: `1px solid ${semanticTokens.strokeLayer}`, + }, + }, + + 'filled-darker': { + backgroundColor: semanticTokens.strokeFlyout, + }, + 'filled-lighter': { + backgroundColor: semanticTokens.backgroundCtrlNeutralRest, + }, + + filledInteractive: { + // DO NOT add a space between the selectors! It changes the behavior of make-styles. + ':hover,:focus-within': { + '::before': { + // also handles pressed border color (:active) + ...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandPressed), + }, + }, + }, + + invalid: { + ':not(:focus-within),:hover:not(:focus-within)': { + '::before': { + ...shorthands.borderColor(semanticTokens.ctrlInputBackgroundError), + }, + }, + }, + + disabled: { + cursor: 'not-allowed', + backgroundColor: semanticTokens._ctrlSpinButtonBackgroundDisabled, + '::before': { + ...shorthands.borderColor(semanticTokens.ctrlInputStrokeDisabled), + + '@media (forced-colors: active)': { + ...shorthands.borderColor('GrayText'), + }, + }, + }, +}); + +const useInputClassName = makeResetStyles({ + gridColumnStart: '1', + gridColumnEnd: '2', + gridRowStart: '1', + gridRowEnd: '3', + outlineStyle: 'none', + border: '0', + padding: '0', + color: semanticTokens.foregroundCtrlNeutralPrimaryRest, + // Use literal "transparent" (not from the theme) to always let the color from the root show through + backgroundColor: 'transparent', + fontFamily: 'inherit', + fontSize: 'inherit', + fontWeight: 'inherit', + lineHeight: 'inherit', + width: '100%', + + '::placeholder': { + color: semanticTokens._ctrlSpinButtonNeutralSecondaryRest, + + opacity: 1, // browser style override + }, +}); + +const useInputStyles = makeStyles({ + disabled: { + color: semanticTokens.foregroundCtrlNeutralSecondaryDisabled, + + cursor: 'not-allowed', + backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundDisabled, + + '::placeholder': { + color: semanticTokens.foregroundCtrlNeutralSecondaryDisabled, + }, + }, +}); + +const useBaseButtonClassName = makeResetStyles({ + display: 'inline-flex', + width: semanticTokens._ctrlSpinButtonSizeSmDefault, + alignItems: 'center', + justifyContent: 'center', + border: '0', + position: 'absolute', + + outlineStyle: 'none', + height: semanticTokens._ctrlSpinButtonSizeIconSecondary, + + // Use literal "transparent" (not from the theme) to always let the color from the root show through + backgroundColor: 'transparent', + color: semanticTokens._ctrlSpinButtonOnSubtleRest, + + // common button layout + gridColumnStart: '2', + borderRadius: '0', + padding: `0 ${semanticTokens._ctrlSpinButtonPaddingSmHorizontal}`, + + ':active': { + outlineStyle: 'none', + }, + + ':enabled': { + ':hover': { + cursor: 'pointer', + color: semanticTokens._ctrlSpinButtonForegroundOnSubtleHover, + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + }, + ':active': { + color: semanticTokens._ctrlSpinButtonForegroundOnSubtlePressed, + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + }, + [`&.${spinButtonExtraClassNames.buttonActive}`]: { + color: semanticTokens._ctrlSpinButtonForegroundOnSubtlePressed, + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + }, + }, + + ':disabled': { + cursor: 'not-allowed', + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + }, +}); + +const useButtonStyles = makeStyles({ + increment: { + gridRowStart: '1', + borderTopRightRadius: semanticTokens.cornerCtrlSmRest, + paddingTop: '4px', + paddingBottom: '1px', + }, + decrement: { + gridRowStart: '2', + borderBottomRightRadius: semanticTokens.cornerCtrlSmRest, + paddingTop: '1px', + paddingBottom: '4px', + }, + // Padding values numbers don't align with design specs + // but visually the padding aligns. + // The icons are set in a 16x16px square but the artwork is inset from that + // so these padding values are computed by hand. + // Additionally the design uses fractional values so these are + // rounded to the nearest integer. + incrementButtonSmall: { + padding: '3px 6px 0px 4px', + height: '12px', + }, + + decrementButtonSmall: { + padding: '0px 6px 3px 4px', + height: '12px', + }, + + outline: { + // set by useButtonClassName + }, + + underline: { + backgroundColor: 'transparent', + color: semanticTokens._ctrlSpinButtonOnSubtleRest, + ':enabled': { + ':hover': { + color: semanticTokens._ctrlSpinButtonForegroundOnSubtleHover, + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + }, + ':active': { + color: semanticTokens._ctrlSpinButtonForegroundOnSubtlePressed, + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + }, + [`&.${spinButtonExtraClassNames.buttonActive}`]: { + color: semanticTokens._ctrlSpinButtonForegroundOnSubtlePressed, + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + }, + }, + ':disabled': { + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + }, + }, + 'filled-darker': { + backgroundColor: 'transparent', + color: semanticTokens._ctrlSpinButtonOnSubtleRest, + + ':enabled': { + ':hover': { + color: semanticTokens._ctrlSpinButtonForegroundOnSubtleHover, + backgroundColor: tokens.colorNeutralBackground3Hover, + }, + ':active': { + color: semanticTokens._ctrlSpinButtonForegroundOnSubtlePressed, + backgroundColor: tokens.colorNeutralBackground3Pressed, + }, + [`&.${spinButtonExtraClassNames.buttonActive}`]: { + color: semanticTokens._ctrlSpinButtonForegroundOnSubtlePressed, + backgroundColor: tokens.colorNeutralBackground3Pressed, + }, + }, + ':disabled': { + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + }, + }, + 'filled-lighter': { + backgroundColor: 'transparent', + color: semanticTokens._ctrlSpinButtonOnSubtleRest, + + ':enabled': { + ':hover': { + color: semanticTokens._ctrlSpinButtonForegroundOnSubtleHover, + backgroundColor: semanticTokens.backgroundCtrlNeutralHover, + }, + [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: { + color: semanticTokens._ctrlSpinButtonForegroundOnSubtlePressed, + backgroundColor: semanticTokens.backgroundCtrlNeutralPressed, + }, + }, + ':disabled': { + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + }, + }, +}); + +/** + * Apply styling to the SpinButton slots based on the state + */ +export const useSemanticSpinButtonStyles = (_state: unknown): SpinButtonState => { + 'use no memo'; + + const state = _state as SpinButtonState; + + const { appearance, spinState, size } = state; + const disabled = state.input.disabled; + const invalid = `${state.input['aria-invalid']}` === 'true'; + const filled = appearance.startsWith('filled'); + + const rootStyles = useRootStyles(); + const buttonStyles = useButtonStyles(); + const inputStyles = useInputStyles(); + + state.root.className = mergeClasses( + state.root.className, + spinButtonClassNames.root, + useRootClassName(), + rootStyles[size], + rootStyles[appearance], + filled && rootStyles.filled, + !disabled && appearance === 'outline' && rootStyles.outlineInteractive, + !disabled && appearance === 'underline' && rootStyles.underlineInteractive, + !disabled && filled && rootStyles.filledInteractive, + !disabled && invalid && rootStyles.invalid, + disabled && rootStyles.disabled, + getSlotClassNameProp_unstable(state.root), + ); + + state.incrementButton.className = mergeClasses( + state.incrementButton.className, + spinButtonClassNames.incrementButton, + spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, + useBaseButtonClassName(), + buttonStyles.increment, + buttonStyles[appearance], + size === 'small' && buttonStyles.incrementButtonSmall, + getSlotClassNameProp_unstable(state.incrementButton), + ); + state.decrementButton.className = mergeClasses( + state.decrementButton.className, + spinButtonClassNames.decrementButton, + spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, + useBaseButtonClassName(), + buttonStyles.decrement, + buttonStyles[appearance], + size === 'small' && buttonStyles.decrementButtonSmall, + getSlotClassNameProp_unstable(state.decrementButton), + ); + + state.input.className = mergeClasses( + state.input.className, + spinButtonClassNames.input, + useInputClassName(), + disabled && inputStyles.disabled, + getSlotClassNameProp_unstable(state.input), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Spinner/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Spinner/index.ts new file mode 100644 index 00000000000000..f2642461bd5be7 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Spinner/index.ts @@ -0,0 +1 @@ +export { useSemanticSpinnerStyles } from './useSemanticSpinnerStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Spinner/useSemanticSpinnerStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Spinner/useSemanticSpinnerStyles.styles.ts new file mode 100644 index 00000000000000..1e42153d0f603b --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Spinner/useSemanticSpinnerStyles.styles.ts @@ -0,0 +1,291 @@ +import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; +import { tokens } from '@fluentui/react-theme'; +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { spinnerClassNames, type SpinnerState } from '@fluentui/react-spinner'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * CSS variables used internally by Spinner + */ +const vars = { + strokeWidth: '--fui-Spinner--strokeWidth', +}; + +const useRootBaseClassName = makeResetStyles({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + lineHeight: '0', + gap: semanticTokens.gapInsideCtrlToLabel, + overflow: 'hidden', // prevents height changes from rotating children +}); + +const useRootStyles = makeStyles({ + vertical: { + flexDirection: 'column', + }, +}); + +const useSpinnerBaseClassName = makeResetStyles({ + position: 'relative', + flexShrink: 0, + + // Use a mask to create the ring shape of the spinner. + maskImage: + `radial-gradient(closest-side, ` + + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + + `transparent 100%)`, + + backgroundColor: semanticTokens._ctrlSpinnerBackgroundEmpty, + + color: semanticTokens._ctrlSpinnerBackgroundFilled, + '@media screen and (forced-colors: active)': { + backgroundColor: 'HighlightText', + color: 'Highlight', + forcedColorAdjust: 'none', + }, + + animationDuration: '1.5s', + animationIterationCount: 'infinite', + animationTimingFunction: 'linear', + animationName: { + '0%': { transform: 'rotate(0deg)' }, + '100%': { transform: 'rotate(360deg)' }, + }, + + '@media screen and (prefers-reduced-motion: reduce)': { + animationDuration: '1.8s', + }, +}); + +// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask. +// The segments are rotated out from behind the mask to expand the visible arc from +// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc. +// The tail and spinner itself also have 360deg rotation animations for the spin. +const useSpinnerTailBaseClassName = makeResetStyles({ + position: 'absolute', + display: 'block', + width: '100%', + height: '100%', + maskImage: 'conic-gradient(transparent 105deg, white 105deg)', + + '&::before, &::after': { + content: '""', + position: 'absolute', + display: 'block', + width: '100%', + height: '100%', + animation: 'inherit', + backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)', + }, + + animationDuration: '1.5s', + animationIterationCount: 'infinite', + animationTimingFunction: tokens.curveEasyEase, + animationName: { + '0%': { transform: 'rotate(-135deg)' }, + '50%': { transform: 'rotate(0deg)' }, + '100%': { transform: 'rotate(225deg)' }, + }, + '&::before': { + animationName: { + '0%': { transform: 'rotate(0deg)' }, + '50%': { transform: 'rotate(105deg)' }, + '100%': { transform: 'rotate(0deg)' }, + }, + }, + '&::after': { + animationName: { + '0%': { transform: 'rotate(0deg)' }, + '50%': { transform: 'rotate(225deg)' }, + '100%': { transform: 'rotate(0deg)' }, + }, + }, + '@media screen and (prefers-reduced-motion: reduce)': { + animationIterationCount: '0', + backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)', + '&::before, &::after': { + content: 'none', + }, + }, +}); + +const useSpinnerStyles = makeStyles({ + inverted: { + backgroundColor: tokens.colorNeutralStrokeAlpha2, + color: tokens.colorNeutralStrokeOnBrand2, + }, + + rtlTail: { + maskImage: 'conic-gradient(white 255deg, transparent 255deg)', + '&::before, &::after': { + backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)', + }, + '@media screen and (prefers-reduced-motion: reduce)': { + backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)', + }, + }, + + 'extra-tiny': { + height: '16px', + width: '16px', + [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth, + }, + + tiny: { + height: '20px', + width: '20px', + [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth, + }, + + 'extra-small': { + height: '24px', + width: '24px', + [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth, + }, + + small: { + height: '28px', + width: '28px', + [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth, + }, + + medium: { + height: '32px', + width: '32px', + [vars.strokeWidth]: semanticTokens.ctrlSpinnerStrokeWidth, + }, + + large: { + height: '36px', + width: '36px', + [vars.strokeWidth]: semanticTokens.ctrlSpinnerStrokeWidth, + }, + + 'extra-large': { + height: '40px', + width: '40px', + [vars.strokeWidth]: semanticTokens.ctrlSpinnerStrokeWidth, + }, + + huge: { + height: '44px', + width: '44px', + [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeLgWidth, + }, +}); + +const useLabelStyles = makeStyles({ + default: { + color: semanticTokens.foregroundContentNeutralPrimary, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + }, + inverted: { + color: tokens.colorNeutralForegroundStaticInverted, + }, + + 'extra-tiny': { + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, + }, + + tiny: { + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, + }, + + 'extra-small': { + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, + }, + + small: { + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, + }, + + medium: { + fontSize: semanticTokens._ctrlSpinnerItemBodyFontSize, + fontWeight: semanticTokens._ctrlSpinnerTextStyleRegularWeight, + lineHeight: semanticTokens._ctrlSpinnerItemBodyLineHeight, + }, + + large: { + fontSize: semanticTokens.textRampLgItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + }, + + 'extra-large': { + fontSize: semanticTokens.textRampLgItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + }, + + huge: { + fontSize: semanticTokens.textGlobalBody1FontSize, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + lineHeight: semanticTokens.textGlobalBody1LineHeight, + }, +}); + +/** + * Apply styling to the Spinner slots based on the state + */ +export const useSemanticSpinnerStyles = (_state: unknown): SpinnerState => { + 'use no memo'; + + const state = _state as SpinnerState; + + const { labelPosition, size, appearance } = state; + const { dir } = useFluent(); + + const rootBaseClassName = useRootBaseClassName(); + const rootStyles = useRootStyles(); + const spinnerBaseClassName = useSpinnerBaseClassName(); + const spinnerStyles = useSpinnerStyles(); + const spinnerTailBaseClassName = useSpinnerTailBaseClassName(); + const labelStyles = useLabelStyles(); + + state.root.className = mergeClasses( + spinnerClassNames.root, + rootBaseClassName, + (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, + state.root.className, + getSlotClassNameProp_unstable(state.root), + ); + if (state.spinner) { + state.spinner.className = mergeClasses( + state.spinner.className, + spinnerClassNames.spinner, + spinnerBaseClassName, + spinnerStyles[size], + appearance === 'inverted' && spinnerStyles.inverted, + getSlotClassNameProp_unstable(state.spinner), + ); + } + if (state.spinnerTail) { + state.spinnerTail.className = mergeClasses( + state.spinnerTail.className, + spinnerClassNames.spinnerTail, + spinnerTailBaseClassName, + dir === 'rtl' && spinnerStyles.rtlTail, + getSlotClassNameProp_unstable(state.spinnerTail), + ); + } + if (state.label) { + state.label.className = mergeClasses( + state.label.className, + spinnerClassNames.label, + labelStyles.default, + labelStyles[size], + appearance === 'inverted' && labelStyles.inverted, + getSlotClassNameProp_unstable(state.label), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Switch/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Switch/index.ts new file mode 100644 index 00000000000000..db314d7070e410 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Switch/index.ts @@ -0,0 +1 @@ +export { useSemanticSwitchStyles } from './useSemanticSwitchStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Switch/useSemanticSwitchStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Switch/useSemanticSwitchStyles.styles.ts new file mode 100644 index 00000000000000..0faeab93888f3d --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Switch/useSemanticSwitchStyles.styles.ts @@ -0,0 +1,328 @@ +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; +import { tokens } from '@fluentui/react-theme'; +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { switchClassNames, type SwitchState } from '@fluentui/react-switch'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * @deprecated Use `switchClassNames.root` instead. + */ +export const switchClassName = switchClassNames.root; + +const thumbHeight = `calc(${semanticTokens.ctrlChoiceSwitchHeight} - (${semanticTokens.ctrlChoiceSwitchPaddingRest} * 2))`; + +const useRootBaseClassName = makeResetStyles({ + alignItems: 'flex-start', + boxSizing: 'border-box', + display: 'inline-flex', + position: 'relative', + + ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }), +}); + +const useRootStyles = makeStyles({ + vertical: { + flexDirection: 'column', + }, +}); + +const useIndicatorBaseClassName = makeResetStyles({ + boxSizing: 'border-box', + borderRadius: semanticTokens.ctrlChoiceSwitchCorner, + borderStyle: 'solid', + lineHeight: 0, + fill: 'currentColor', + flexShrink: 0, + height: semanticTokens.ctrlChoiceSwitchHeight, + margin: semanticTokens.ctrlChoicePaddingVertical + ' ' + semanticTokens.ctrlChoicePaddingHorizontal, + pointerEvents: 'none', + transitionDuration: tokens.durationNormal, + transitionTimingFunction: tokens.curveEasyEase, + transitionProperty: 'background, border, color', + width: semanticTokens.ctrlChoiceSwitchWidth, + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + }, + + '@media (forced-colors: active)': { + color: 'CanvasText', + '> i': { + forcedColorAdjust: 'none', + }, + }, + + '> *': { + position: 'relative', + height: thumbHeight, + width: semanticTokens.ctrlChoiceSwitchThumbWidthRest, + fontSize: thumbHeight, + top: `calc(50% - ${thumbHeight} / 2)`, + transitionDuration: tokens.durationNormal, + transitionTimingFunction: tokens.curveEasyEase, + transitionProperty: 'transform', + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + }, + }, +}); + +const useIndicatorStyles = makeStyles({ + labelAbove: { + marginTop: 0, + }, +}); + +const useInputBaseClassName = makeResetStyles({ + boxSizing: 'border-box', + cursor: 'pointer', + height: '100%', + margin: 0, + opacity: 0, + position: 'absolute', + + // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it. + // This is done so that clicking on that "empty space" still toggles the switch. + width: `calc(${semanticTokens.ctrlChoiceSwitchWidth} + (2 * ${semanticTokens.ctrlChoicePaddingHorizontal}))`, + + // Checked (both enabled and disabled) + ':checked': { + [`& ~ .${switchClassNames.indicator}`]: { + '> *': { + transform: `translateX(calc(${semanticTokens.ctrlChoiceSwitchWidth} - ${semanticTokens.ctrlChoiceSwitchThumbWidthRest} - ${semanticTokens.ctrlChoiceSwitchPaddingRest}))`, + ':dir(rtl)': { + // Inverse animation for RTL (Griffel doesn't support flipping CSSVars) + transform: `translateX(calc(-1 * (${semanticTokens.ctrlChoiceSwitchWidth} - ${semanticTokens.ctrlChoiceSwitchThumbWidthRest} - ${semanticTokens.ctrlChoiceSwitchPaddingRest})))`, + }, + }, + }, + }, + + // Disabled (both checked and unchecked) + ':disabled': { + cursor: 'default', + + [`& ~ .${switchClassNames.indicator}`]: { + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + + [`& ~ .${switchClassNames.label}`]: { + cursor: 'default', + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + }, + + // Enabled and unchecked + ':enabled:not(:checked)': { + [`& ~ .${switchClassNames.indicator}`]: { + backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundRest, + borderColor: semanticTokens.ctrlChoiceBaseStrokeRest, + borderWidth: semanticTokens.strokeWidthCtrlOutlineRest, + color: semanticTokens.backgroundCtrlShapeSafeNeutralRest, + }, + + [`& ~ .${switchClassNames.label}`]: { + color: semanticTokens.foregroundContentNeutralPrimary, + }, + + ':hover': { + [`& ~ .${switchClassNames.indicator}`]: { + backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundHover, + borderColor: semanticTokens.ctrlChoiceBaseStrokeHover, + borderWidth: semanticTokens.strokeWidthCtrlOutlineHover, + color: semanticTokens.backgroundCtrlShapeSafeNeutralHover, + }, + }, + + ':hover:active': { + [`& ~ .${switchClassNames.indicator}`]: { + backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundPressed, + borderColor: semanticTokens.ctrlChoiceBaseStrokePressed, + borderWidth: semanticTokens.strokeWidthCtrlOutlinePressed, + color: semanticTokens.backgroundCtrlShapeSafeNeutralPressed, + }, + }, + }, + + // Enabled and checked + ':enabled:checked': { + [`& ~ .${switchClassNames.indicator}`]: { + backgroundColor: semanticTokens.backgroundCtrlActiveBrandRest, + borderColor: semanticTokens.strokeCtrlOnBrandRest, + borderWidth: semanticTokens.strokeWidthCtrlOutlineRest, + color: semanticTokens.foregroundCtrlOnActiveBrandRest, + }, + + ':hover': { + [`& ~ .${switchClassNames.indicator}`]: { + backgroundColor: semanticTokens.backgroundCtrlActiveBrandHover, + borderColor: semanticTokens._ctrlSwitchStrokeOnActiveBrandHover, + borderWidth: semanticTokens.strokeWidthCtrlOutlineHover, + color: semanticTokens.foregroundCtrlOnActiveBrandHover, + }, + }, + + ':hover:active': { + [`& ~ .${switchClassNames.indicator}`]: { + backgroundColor: semanticTokens.backgroundCtrlActiveBrandPressed, + borderColor: semanticTokens.strokeCtrlOnActiveBrandPressed, + borderWidth: semanticTokens.strokeWidthCtrlOutlinePressed, + color: semanticTokens.foregroundCtrlOnActiveBrandPressed, + }, + }, + }, + + // Disabled and unchecked + ':disabled:not(:checked)': { + [`& ~ .${switchClassNames.indicator}`]: { + backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundDisabled, + borderColor: semanticTokens.ctrlChoiceBaseStrokeDisabled, + borderWidth: semanticTokens.strokeWidthCtrlOutlineRest, + color: semanticTokens.backgroundCtrlShapeSafeNeutralDisabled, + }, + }, + + // Disabled and checked + ':disabled:checked': { + [`& ~ .${switchClassNames.indicator}`]: { + backgroundColor: semanticTokens.backgroundCtrlActiveBrandDisabled, + borderColor: semanticTokens.strokeCtrlOnActiveBrandDisabled, + borderWidth: semanticTokens.strokeWidthDefault, + color: semanticTokens.foregroundCtrlOnActiveBrandDisabled, + }, + }, + + '@media (forced-colors: active)': { + ':disabled': { + [`& ~ .${switchClassNames.indicator}`]: { + color: 'GrayText', + borderColor: 'GrayText', + }, + + [`& ~ .${switchClassNames.label}`]: { + color: 'GrayText', + }, + }, + ':hover': { + color: 'CanvasText', + }, + ':hover:active': { + color: 'CanvasText', + }, + ':enabled:checked': { + ':hover': { + [`& ~ .${switchClassNames.indicator}`]: { + backgroundColor: 'Highlight', + color: 'Canvas', + }, + }, + ':hover:active': { + [`& ~ .${switchClassNames.indicator}`]: { + backgroundColor: 'Highlight', + color: 'Canvas', + }, + }, + [`& ~ .${switchClassNames.indicator}`]: { + backgroundColor: 'Highlight', + color: 'Canvas', + }, + }, + }, +}); + +const useInputStyles = makeStyles({ + before: { + right: 0, + top: 0, + }, + after: { + left: 0, + top: 0, + }, + above: { + bottom: 0, + height: `calc(${semanticTokens.ctrlChoiceSwitchHeight} + ${semanticTokens.ctrlChoicePaddingVertical})`, + width: '100%', + }, +}); + +// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles. +const useLabelStyles = makeStyles({ + base: { + cursor: 'pointer', + + // Use a (negative) margin to account for the difference between the track's height and the label's line height. + // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps. + marginBottom: `calc((${semanticTokens.ctrlChoiceSwitchHeight} - ${semanticTokens.textGlobalBody3LineHeight}) / 2)`, + marginTop: `calc((${semanticTokens.ctrlChoiceSwitchHeight} - ${semanticTokens.textGlobalBody3LineHeight}) / 2)`, + padding: `${semanticTokens.ctrlChoicePaddingVertical} ${semanticTokens.ctrlChoicePaddingHorizontal}`, + }, + above: { + paddingTop: semanticTokens._ctrlSwitchPaddingTextTop, + paddingBottom: semanticTokens._ctrlSwitchPaddingTextBottom, + width: '100%', + }, + after: { + paddingLeft: semanticTokens.gapInsideCtrlSmDefault, + }, + before: { + paddingRight: semanticTokens.gapInsideCtrlSmDefault, + }, +}); + +/** + * Apply styling to the Switch slots based on the state + */ +export const useSemanticSwitchStyles = (_state: unknown): SwitchState => { + 'use no memo'; + + const state = _state as SwitchState; + + const rootBaseClassName = useRootBaseClassName(); + const rootStyles = useRootStyles(); + const indicatorBaseClassName = useIndicatorBaseClassName(); + const indicatorStyles = useIndicatorStyles(); + const inputBaseClassName = useInputBaseClassName(); + const inputStyles = useInputStyles(); + const labelStyles = useLabelStyles(); + + const { label, labelPosition } = state; + + state.root.className = mergeClasses( + state.root.className, + switchClassNames.root, + rootBaseClassName, + labelPosition === 'above' && rootStyles.vertical, + getSlotClassNameProp_unstable(state.root), + ); + + state.indicator.className = mergeClasses( + state.indicator.className, + switchClassNames.indicator, + indicatorBaseClassName, + label && labelPosition === 'above' && indicatorStyles.labelAbove, + getSlotClassNameProp_unstable(state.indicator), + ); + + state.input.className = mergeClasses( + state.input.className, + switchClassNames.input, + inputBaseClassName, + label && inputStyles[labelPosition], + getSlotClassNameProp_unstable(state.input), + ); + + if (state.label) { + state.label.className = mergeClasses( + state.label.className, + switchClassNames.label, + labelStyles.base, + labelStyles[labelPosition], + getSlotClassNameProp_unstable(state.label), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/index.ts new file mode 100644 index 00000000000000..862253cb16bbf1 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/index.ts @@ -0,0 +1,17 @@ +export { useSemanticDataGridStyles } from './useSemanticDataGridStyles.styles'; +export { useSemanticDataGridBodyStyles } from './useSemanticDataGridBodyStyles.styles'; +export { useSemanticDataGridCellStyles } from './useSemanticDataGridCellStyles.styles'; +export { useSemanticDataGridHeaderStyles } from './useSemanticDataGridHeaderStyles.styles'; +export { useSemanticDataGridHeaderCellStyles } from './useSemanticDataGridHeaderCellStyles.styles'; +export { useSemanticDataGridRowStyles } from './useSemanticDataGridRowStyles.styles'; +export { useSemanticDataGridSelectionCellStyles } from './useSemanticDataGridSelectionCellStyles.styles'; +export { useSemanticTableStyles } from './useSemanticTableStyles.styles'; +export { useSemanticTableBodyStyles } from './useSemanticTableBodyStyles.styles'; +export { useSemanticTableCellStyles } from './useSemanticTableCellStyles.styles'; +export { useSemanticTableCellActionsStyles } from './useSemanticTableCellActionsStyles.styles'; +export { useSemanticTableCellLayoutStyles } from './useSemanticTableCellLayoutStyles.styles'; +export { useSemanticTableHeaderStyles } from './useSemanticTableHeaderStyles.styles'; +export { useSemanticTableHeaderCellStyles } from './useSemanticTableHeaderCellStyles.styles'; +export { useSemanticTableResizeHandleStyles } from './useSemanticTableResizeHandleStyles.styles'; +export { useSemanticTableRowStyles } from './useSemanticTableRowStyles.styles'; +export { useSemanticTableSelectionCellStyles } from './useSemanticTableSelectionCellStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridBodyStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridBodyStyles.styles.ts new file mode 100644 index 00000000000000..85775d78adbbce --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridBodyStyles.styles.ts @@ -0,0 +1,22 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridBodyClassNames, type DataGridBodyState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableBodyStyles } from './useSemanticTableBodyStyles.styles'; + +/** + * Apply styling to the DataGridBody slots based on the state + */ +export const useSemanticDataGridBodyStyles = (_state: unknown): DataGridBodyState => { + 'use no memo'; + + const state = _state as DataGridBodyState; + + useSemanticTableBodyStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridBodyClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridCellStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridCellStyles.styles.ts new file mode 100644 index 00000000000000..e558cc8949be25 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridCellStyles.styles.ts @@ -0,0 +1,22 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridCellClassNames, type DataGridCellState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableCellStyles } from './useSemanticTableCellStyles.styles'; + +/** + * Apply styling to the DataGridCell slots based on the state + */ +export const useSemanticDataGridCellStyles = (_state: unknown): DataGridCellState => { + 'use no memo'; + + const state = _state as DataGridCellState; + + useSemanticTableCellStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridCellClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderCellStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderCellStyles.styles.ts new file mode 100644 index 00000000000000..38841e5a39817f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderCellStyles.styles.ts @@ -0,0 +1,46 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridHeaderCellClassNames, type DataGridHeaderCellState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableHeaderCellStyles } from './useSemanticTableHeaderCellStyles.styles'; + +/** + * Apply styling to the DataGridHeaderCell slots based on the state + */ +export const useSemanticDataGridHeaderCellStyles = (_state: unknown): DataGridHeaderCellState => { + 'use no memo'; + + const state = _state as DataGridHeaderCellState; + + useSemanticTableHeaderCellStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridHeaderCellClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.button) { + state.button.className = mergeClasses( + state.button.className, + dataGridHeaderCellClassNames.button, + getSlotClassNameProp_unstable(state.button), + ); + } + + if (state.sortIcon) { + state.sortIcon.className = mergeClasses( + state.sortIcon.className, + dataGridHeaderCellClassNames.sortIcon, + getSlotClassNameProp_unstable(state.sortIcon), + ); + } + + if (state.aside) { + state.aside.className = mergeClasses( + state.aside.className, + dataGridHeaderCellClassNames.aside, + getSlotClassNameProp_unstable(state.aside), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderStyles.styles.ts new file mode 100644 index 00000000000000..40525c9093e365 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderStyles.styles.ts @@ -0,0 +1,22 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridHeaderClassNames, type DataGridHeaderState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableHeaderStyles } from './useSemanticTableHeaderStyles.styles'; + +/** + * Apply styling to the DataGridHeader slots based on the state + */ +export const useSemanticDataGridHeaderStyles = (_state: unknown): DataGridHeaderState => { + 'use no memo'; + + const state = _state as DataGridHeaderState; + + useSemanticTableHeaderStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridHeaderClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridRowStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridRowStyles.styles.ts new file mode 100644 index 00000000000000..ecb521a9afa2c6 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridRowStyles.styles.ts @@ -0,0 +1,29 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridRowClassNames, type DataGridRowState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableRowStyles } from './useSemanticTableRowStyles.styles'; + +/** + * Apply styling to the DataGridRow slots based on the state + */ +export const useSemanticDataGridRowStyles = (_state: unknown): DataGridRowState => { + 'use no memo'; + + const state = _state as DataGridRowState; + + useSemanticTableRowStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridRowClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + if (state.selectionCell) { + state.selectionCell.className = mergeClasses( + state.selectionCell.className, + dataGridRowClassNames.selectionCell, + getSlotClassNameProp_unstable(state.selectionCell), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridSelectionCellStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridSelectionCellStyles.styles.ts new file mode 100644 index 00000000000000..39a22fcc9ada12 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridSelectionCellStyles.styles.ts @@ -0,0 +1,38 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridSelectionCellClassNames, type DataGridSelectionCellState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableSelectionCellStyles } from './useSemanticTableSelectionCellStyles.styles'; + +/** + * Apply styling to the DataGridSelectionCell slots based on the state + */ +export const useSemanticDataGridSelectionCellStyles = (_state: unknown): DataGridSelectionCellState => { + 'use no memo'; + + const state = _state as DataGridSelectionCellState; + + useSemanticTableSelectionCellStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridSelectionCellClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.checkboxIndicator) { + state.checkboxIndicator.className = mergeClasses( + state.checkboxIndicator.className, + dataGridSelectionCellClassNames.checkboxIndicator, + getSlotClassNameProp_unstable(state.checkboxIndicator), + ); + } + + if (state.radioIndicator) { + state.radioIndicator.className = mergeClasses( + state.radioIndicator.className, + dataGridSelectionCellClassNames.radioIndicator, + getSlotClassNameProp_unstable(state.radioIndicator), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridStyles.styles.ts new file mode 100644 index 00000000000000..92ae97b6ca5b72 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridStyles.styles.ts @@ -0,0 +1,22 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridClassNames, type DataGridState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableStyles } from './useSemanticTableStyles.styles'; + +/** + * Apply styling to the DataGrid slots based on the state + */ +export const useSemanticDataGridStyles = (_state: unknown): DataGridState => { + 'use no memo'; + + const state = _state as DataGridState; + + useSemanticTableStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableBodyStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableBodyStyles.styles.ts new file mode 100644 index 00000000000000..e89b16e6f664db --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableBodyStyles.styles.ts @@ -0,0 +1,37 @@ +import { mergeClasses, makeStyles } from '@griffel/react'; +import { tableBodyClassName, type TableBodyState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table-row-group', + }, +}); + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'block', + }, +}); + +/** + * Apply styling to the TableBody slots based on the state + */ +export const useSemanticTableBodyStyles = (_state: unknown): TableBodyState => { + 'use no memo'; + + const state = _state as TableBodyState; + + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableBodyClassName, + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellActionsStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellActionsStyles.styles.ts new file mode 100644 index 00000000000000..e3cdf7a3b58199 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellActionsStyles.styles.ts @@ -0,0 +1,42 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tableCellActionsClassNames, type TableCellActionsState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + backgroundColor: 'inherit', + position: 'absolute', + right: '0px', + top: '50%', + transform: 'translateY(-50%)', + opacity: 0, + marginLeft: 'auto', + }, + + visible: { + opacity: 1, + }, +}); + +/** + * Apply styling to the TableCellActions slots based on the state + */ +export const useSemanticTableCellActionsStyles = (_state: unknown): TableCellActionsState => { + 'use no memo'; + + const state = _state as TableCellActionsState; + + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + tableCellActionsClassNames.root, + styles.root, + state.visible && styles.visible, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellLayoutStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellLayoutStyles.styles.ts new file mode 100644 index 00000000000000..6cd3f5f6be3779 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellLayoutStyles.styles.ts @@ -0,0 +1,133 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tableCellLayoutClassNames, type TableCellLayoutState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + display: 'flex', + alignItems: 'center', + gap: semanticTokens.gapInsideCtrlDefault, + flex: '1 1 0px', + }, + + rootTruncate: { + overflowX: 'hidden', + }, + + content: { + display: 'flex', + flexDirection: 'column', + }, + + contentTruncate: { + overflowX: 'hidden', + }, + + media: { + display: 'flex', + alignItems: 'center', + }, + + mediaExtraSmall: { + fontSize: '16px', + }, + + mediaSmallAndMedium: { + fontSize: '20px', + }, + + mediaPrimary: { + fontSize: '24px', + }, + + mainPrimary: { + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + }, + + mainTruncate: { + overflowX: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }, + + description: { + color: semanticTokens.foregroundContentNeutralSecondary, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption1FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + }, +}); + +/** + * Apply styling to the TableCellLayout slots based on the state + */ +export const useSemanticTableCellLayoutStyles = (_state: unknown): TableCellLayoutState => { + 'use no memo'; + + const state = _state as TableCellLayoutState; + + const styles = useStyles(); + const { truncate } = state; + + state.root.className = mergeClasses( + state.root.className, + tableCellLayoutClassNames.root, + styles.root, + truncate && styles.rootTruncate, + getSlotClassNameProp_unstable(state.root), + ); + const primary = state.appearance === 'primary'; + + if (state.media) { + const mediaSizedStyles = { + small: styles.mediaSmallAndMedium, + medium: styles.mediaSmallAndMedium, + 'extra-small': styles.mediaExtraSmall, + }; + + state.media.className = mergeClasses( + state.media.className, + tableCellLayoutClassNames.media, + styles.media, + mediaSizedStyles[state.size], + primary && styles.mediaPrimary, + getSlotClassNameProp_unstable(state.media), + ); + } + + if (state.main) { + state.main.className = mergeClasses( + state.main.className, + tableCellLayoutClassNames.main, + truncate && styles.mainTruncate, + primary && styles.mainPrimary, + getSlotClassNameProp_unstable(state.main), + ); + } + + if (state.description) { + state.description.className = mergeClasses( + state.description.className, + tableCellLayoutClassNames.description, + styles.description, + getSlotClassNameProp_unstable(state.description), + ); + } + + if (state.content) { + state.content.className = mergeClasses( + state.content.className, + tableCellLayoutClassNames.content, + styles.content, + truncate && styles.contentTruncate, + getSlotClassNameProp_unstable(state.content), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellStyles.styles.ts new file mode 100644 index 00000000000000..780e9e9bd82d70 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellStyles.styles.ts @@ -0,0 +1,87 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { tableCellClassNames, type TableCellState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table-cell', + verticalAlign: 'middle', + }, + + medium: { + height: '44px', + }, + + small: { + height: '34px', + }, + + 'extra-small': { + height: '24px', + }, +}); + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'flex', + minWidth: '0px', + alignItems: 'center', + flex: '1 1 0px', + }, + + medium: { + minHeight: '44px', + }, + + small: { + minHeight: '34px', + }, + + 'extra-small': { + minHeight: '24px', + }, +}); + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + position: 'relative', + padding: `0px ${semanticTokens.ctrlChoicePaddingHorizontal}`, + + ...createCustomFocusIndicatorStyle( + { + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusInnerStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + }, + { selector: 'focus' }, + ), + }, +}); + +/** + * Apply styling to the TableCell slots based on the state + */ +export const useSemanticTableCellStyles = (_state: unknown): TableCellState => { + 'use no memo'; + + const state = _state as TableCellState; + + const styles = useStyles(); + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableCellClassNames.root, + styles.root, + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], + getSlotClassNameProp_unstable(state.root), + ); + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderCellStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderCellStyles.styles.ts new file mode 100644 index 00000000000000..0e67c0511ab833 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderCellStyles.styles.ts @@ -0,0 +1,140 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { tableHeaderCellClassNames, type TableHeaderCellState } from '@fluentui/react-table'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table-cell', + verticalAlign: 'middle', + }, +}); + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'flex', + flex: '1 1 0px', + minWidth: '0px', + }, +}); + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + padding: `0px ${semanticTokens.ctrlChoicePaddingHorizontal}`, + ...createCustomFocusIndicatorStyle( + { + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusInnerStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + }, + { selector: 'focus-within' }, + ), + position: 'relative', + }, + + rootInteractive: { + ':hover': { + color: semanticTokens.foregroundCtrlNeutralPrimaryHover, + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + }, + ':active': { + color: semanticTokens.foregroundCtrlNeutralPrimaryPressed, + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + }, + }, + + resetButton: { + resize: 'horizontal', + boxSizing: 'content-box', + backgroundColor: 'inherit', + color: 'inherit', + fontFamily: 'inherit', + fontSize: 'inherit', + lineHeight: 'normal', + overflow: 'visible', + padding: '0', + border: 'none', + textAlign: 'unset', + }, + + button: { + position: 'relative', + width: '100%', + display: 'flex', + flexGrow: 1, + height: '100%', + alignItems: 'center', + gap: semanticTokens.gapInsideCtrlSmDefault, + minHeight: '32px', + flex: '1 1 0px', + outlineStyle: 'none', + }, + + sortable: { + cursor: 'pointer', + }, + + sortIcon: { + display: 'flex', + alignItems: 'center', + paddingTop: semanticTokens.gapBetweenContentXSmall, + }, + + resizeHandle: {}, +}); + +/** + * Apply styling to the TableHeaderCell slots based on the state + */ +export const useSemanticTableHeaderCellStyles = (_state: unknown): TableHeaderCellState => { + 'use no memo'; + + const state = _state as TableHeaderCellState; + + const styles = useStyles(); + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableHeaderCellClassNames.root, + styles.root, + state.sortable && styles.rootInteractive, + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + getSlotClassNameProp_unstable(state.root), + ); + + state.button.className = mergeClasses( + state.button.className, + tableHeaderCellClassNames.button, + styles.resetButton, + styles.button, + state.sortable && styles.sortable, + getSlotClassNameProp_unstable(state.button), + ); + + if (state.sortIcon) { + state.sortIcon.className = mergeClasses( + state.sortIcon.className, + tableHeaderCellClassNames.sortIcon, + styles.sortIcon, + getSlotClassNameProp_unstable(state.sortIcon), + ); + } + + if (state.aside) { + state.aside.className = mergeClasses( + state.aside.className, + tableHeaderCellClassNames.aside, + styles.resizeHandle, + getSlotClassNameProp_unstable(state.aside), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderStyles.styles.ts new file mode 100644 index 00000000000000..dfd3782ee7ce5a --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderStyles.styles.ts @@ -0,0 +1,37 @@ +import { mergeClasses, makeStyles } from '@griffel/react'; +import { tableHeaderClassName, type TableHeaderState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'block', + }, +}); + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table-row-group', + }, +}); + +/** + * Apply styling to the TableHeader slots based on the state + */ +export const useSemanticTableHeaderStyles = (_state: unknown): TableHeaderState => { + 'use no memo'; + + const state = _state as TableHeaderState; + + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableHeaderClassName, + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableResizeHandleStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableResizeHandleStyles.styles.ts new file mode 100644 index 00000000000000..3f19979554c3b2 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableResizeHandleStyles.styles.ts @@ -0,0 +1,63 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tableResizeHandleClassNames, type TableResizeHandleState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + position: 'absolute', + right: 0, + top: 0, + bottom: 0, + width: '16px', + margin: '0 -8px', + cursor: 'col-resize', + opacity: 0, + transitionProperty: 'opacity', + transitionDuration: '.2s', + zIndex: 1, + + // If mouse users focus on the resize handle through a context menu, we want the handle + // to be visible because the mouse might not be hovering over the handle + ':focus': { + opacity: 1, + outlineStyle: 'none', + }, + + ':hover': { + opacity: 1, + }, + + '::after': { + content: '" "', + display: 'block', + width: semanticTokens.strokeWidthDividerDefault, + position: 'absolute', + left: '50%', + top: 0, + bottom: 0, + backgroundColor: semanticTokens.strokeDividerStrong, + }, + }, +}); + +/** + * Apply styling to the TableResizeHandle slots based on the state + */ +export const useSemanticTableResizeHandleStyles = (_state: unknown): TableResizeHandleState => { + 'use no memo'; + + const state = _state as TableResizeHandleState; + + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + tableResizeHandleClassNames.root, + styles.root, + getSlotClassNameProp_unstable(state.root), + ); + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableRowStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableRowStyles.styles.ts new file mode 100644 index 00000000000000..40e406258dc258 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableRowStyles.styles.ts @@ -0,0 +1,166 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { + tableRowClassNames, + tableCellActionsClassNames, + tableSelectionCellClassNames, + type TableRowState, +} from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table-row', + }, +}); + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'flex', + alignItems: 'center', + }, +}); + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + color: semanticTokens.foregroundContentNeutralPrimary, + boxSizing: 'border-box', + ...createCustomFocusIndicatorStyle( + { + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusInnerStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + }, + { selector: 'focus' }, + ), + }, + + rootSubtleSelection: { + ...createCustomFocusIndicatorStyle( + { + [`& .${tableSelectionCellClassNames.root}`]: { + opacity: 1, + }, + }, + { selector: 'focus-within' }, + ), + ':hover': { + [`& .${tableSelectionCellClassNames.root}`]: { + opacity: 1, + }, + }, + }, + + rootInteractive: { + ...createCustomFocusIndicatorStyle( + { + [`& .${tableCellActionsClassNames.root}`]: { + opacity: 1, + }, + }, + { selector: 'focus-within' }, + ), + ':active': { + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + color: semanticTokens.foregroundCtrlNeutralPrimaryPressed, + [`& .${tableCellActionsClassNames.root}`]: { + opacity: 1, + }, + }, + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + color: semanticTokens.foregroundCtrlNeutralPrimaryHover, + [`& .${tableCellActionsClassNames.root}`]: { + opacity: 1, + }, + }, + // High contrast styles + '@media (forced-colors: active)': { + ':hover': { + color: 'Highlight', + ...shorthands.borderColor('Highlight'), + }, + }, + }, + + medium: { borderBottom: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeDividerDefault}` }, + + small: { borderBottom: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeDividerDefault}` }, + + 'extra-small': { + fontSize: semanticTokens.textRampSmItemBodyFontSize, + }, + + brand: { + backgroundColor: semanticTokens.statusBrandTintBackground, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandPressed), + ':active': { + backgroundColor: semanticTokens.statusBrandTintBackground, + color: semanticTokens.foregroundContentNeutralPrimary, + }, + + '@media(forced-colors: active)': { + border: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusOuterStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + boxSizing: 'border-box', + ':focus-visible': { + outlineOffset: '-4px', + }, + }, + }, + + neutral: { + '@media(forced-colors: active)': { + border: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusOuterStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + boxSizing: 'border-box', + ':focus-visible': { + outlineOffset: '-4px', + }, + }, + backgroundColor: tokens.colorSubtleBackgroundSelected, + color: semanticTokens.foregroundCtrlNeutralPrimaryHover, + ':hover': { + backgroundColor: tokens.colorSubtleBackgroundSelected, + }, + ':active': { + backgroundColor: tokens.colorSubtleBackgroundSelected, + }, + + ...shorthands.borderColor(semanticTokens.strokeCtrlDividerOnBrand), + }, + + none: {}, +}); + +/** + * Apply styling to the TableRow slots based on the state + */ +export const useSemanticTableRowStyles = (_state: unknown): TableRowState => { + 'use no memo'; + + const state = _state as TableRowState; + + const styles = useStyles(); + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableRowClassNames.root, + styles.root, + styles.rootSubtleSelection, + !state.isHeaderRow && styles.rootInteractive, + styles[state.size], + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + styles[state.appearance], + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableSelectionCellStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableSelectionCellStyles.styles.ts new file mode 100644 index 00000000000000..52b6e7a3a14708 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableSelectionCellStyles.styles.ts @@ -0,0 +1,105 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tableSelectionCellClassNames, type TableSelectionCellState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +export const CELL_WIDTH = 44; + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table-cell', + width: `${CELL_WIDTH}px`, + }, +}); + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'flex', + flex: '1 1 0px', + minWidth: `${CELL_WIDTH}px`, + maxWidth: `${CELL_WIDTH}px`, + justifyContent: 'center', + }, +}); + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + textAlign: 'center', + whiteSpace: 'nowrap', + padding: '0', + ...createCustomFocusIndicatorStyle( + { + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusInnerStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + }, + { selector: 'focus' }, + ), + }, + + radioIndicator: { + display: 'flex', + flexGrow: 1, + alignItems: 'center', + justifyContent: 'center', + }, + + subtle: { + opacity: 0, + ...createCustomFocusIndicatorStyle( + { + opacity: 1, + }, + { selector: 'focus-within' }, + ), + }, + + hidden: { + opacity: 0, + }, +}); + +/** + * Apply styling to the TableSelectionCell slots based on the state + */ +export const useSemanticTableSelectionCellStyles = (_state: unknown): TableSelectionCellState => { + 'use no memo'; + + const state = _state as TableSelectionCellState; + + const styles = useStyles(); + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableSelectionCellClassNames.root, + styles.root, + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + state.subtle && state.checked === false && styles.subtle, + state.hidden && styles.hidden, + getSlotClassNameProp_unstable(state.root), + ); + if (state.checkboxIndicator) { + state.checkboxIndicator.className = mergeClasses( + state.checkboxIndicator.className, + tableSelectionCellClassNames.checkboxIndicator, + getSlotClassNameProp_unstable(state.checkboxIndicator), + ); + } + + if (state.radioIndicator) { + state.radioIndicator.className = mergeClasses( + state.radioIndicator.className, + tableSelectionCellClassNames.radioIndicator, + styles.radioIndicator, + getSlotClassNameProp_unstable(state.radioIndicator), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableStyles.styles.ts new file mode 100644 index 00000000000000..6fe2b5004059f2 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableStyles.styles.ts @@ -0,0 +1,53 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tableClassName, type TableState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table', + verticalAlign: 'middle', + width: '100%', + tableLayout: 'fixed', + }, +}); + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'block', + }, +}); + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + borderCollapse: 'collapse', + backgroundColor: semanticTokens.backgroundCtrlSubtleRest, + }, +}); + +/** + * Apply styling to the Table slots based on the state + */ +export const useSemanticTableStyles = (_state: unknown): TableState => { + 'use no memo'; + + const state = _state as TableState; + + const styles = useStyles(); + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableClassName, + styles.root, + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tabs/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tabs/index.ts new file mode 100644 index 00000000000000..38bf3de7a50685 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tabs/index.ts @@ -0,0 +1,7 @@ +export { + useSemanticTabStyles, + useSemanticTabButtonStyles_unstable, + useSemanticTabContentStyles_unstable, + useSemanticTabIndicatorStyles_unstable, +} from './useSemanticTabsStyles.styles'; +export { useSemanticTabListStyles } from './useSemanticTabListStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tabs/useSemanticTabListStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tabs/useSemanticTabListStyles.styles.ts new file mode 100644 index 00000000000000..e803ed2b521c59 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tabs/useSemanticTabListStyles.styles.ts @@ -0,0 +1,56 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tabListClassNames, type TabListState } from '@fluentui/react-tabs'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + display: 'flex', + flexDirection: 'row', + flexShrink: 0, + flexWrap: 'nowrap', + position: 'relative', + }, + horizontal: { + alignItems: 'stretch', + flexDirection: 'row', + }, + vertical: { + alignItems: 'stretch', + flexDirection: 'column', + }, + roundedSmall: { + gap: semanticTokens.gapInsideCtrlLgDefault, + }, + rounded: { + gap: semanticTokens.gapInsideCtrlDefault, + }, +}); + +/** + * Apply styling to the TabList slots based on the state + */ +export const useSemanticTabListStyles = (_state: unknown): TabListState => { + 'use no memo'; + + const state = _state as TabListState; + const { appearance, vertical, size } = state; + + const styles = useStyles(); + + const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular'; + + state.root.className = mergeClasses( + state.root.className, + tabListClassNames.root, + styles.root, + vertical ? styles.vertical : styles.horizontal, + isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded), + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tabs/useSemanticTabsStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tabs/useSemanticTabsStyles.styles.ts new file mode 100644 index 00000000000000..07ec81071f8bf8 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tabs/useSemanticTabsStyles.styles.ts @@ -0,0 +1,812 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { tokens } from '@fluentui/react-theme'; +import { + tabReservedSpaceClassNames, + tabClassNames, + type TabState, + useTabAnimatedIndicatorStyles_unstable, +} from '@fluentui/react-tabs'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +// These should match the constants defined in @fluentui/react-icons +// This package avoids taking a dependency on the icons package for only the constants. +const iconClassNames = { + filled: 'fui-Icon-filled', + regular: 'fui-Icon-regular', +}; + +/** + * Styles for the root slot + */ +const useRootStyles = makeStyles({ + root: { + alignItems: 'center', + display: 'grid', + flexShrink: 0, + gridAutoFlow: 'column', + gridTemplateColumns: 'auto', + gridTemplateRows: 'auto', + outlineStyle: 'none', + position: 'relative', + }, + button: { + alignItems: 'center', + border: 'none', + borderRadius: semanticTokens.ctrlListCornerRest, + cursor: 'pointer', + display: 'grid', + flexShrink: 0, + gridAutoFlow: 'column', + gridTemplateColumns: 'auto', + gridTemplateRows: 'auto', + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + outlineStyle: 'none', + position: 'relative', + overflow: 'hidden', + textTransform: 'none', + }, + horizontal: { + minHeight: semanticTokens._ctrlTabSizeDefault, + justifyContent: 'center', + }, + vertical: { + justifyContent: 'start', + }, + smallHorizontal: { + columnGap: semanticTokens._ctrlTabSmGapInsideDefault, + padding: `${tokens.spacingVerticalSNudge} ${semanticTokens._ctrlTabSmPaddingHorizontalDefault}`, + }, + smallVertical: { + // horizontal spacing is deliberate. This is the gap between icon and content. + columnGap: semanticTokens._ctrlTabSmGapInsideDefault, + padding: `${tokens.spacingVerticalXXS} ${semanticTokens._ctrlTabSmPaddingHorizontalDefault}`, + }, + mediumHorizontal: { + columnGap: semanticTokens._ctrlTabGapInsideDefault, + padding: `${tokens.spacingVerticalM} ${semanticTokens._ctrlTabPaddingHorizontalDefault}`, + }, + mediumVertical: { + // horizontal spacing is deliberate. This is the gap between icon and content. + columnGap: semanticTokens._ctrlTabGapInsideDefault, + padding: `${tokens.spacingVerticalSNudge} ${semanticTokens._ctrlTabPaddingHorizontalDefault}`, + }, + largeHorizontal: { + columnGap: semanticTokens._ctrlTabGapInsideDefault, + padding: `${tokens.spacingVerticalL} ${semanticTokens._ctrlTabPaddingHorizontalDefault}`, + }, + largeVertical: { + // horizontal spacing is deliberate. This is the gap between icon and content. + columnGap: semanticTokens._ctrlTabGapInsideDefault, + padding: `${semanticTokens.ctrlChoicePaddingVertical} ${semanticTokens._ctrlTabPaddingHorizontalDefault}`, + }, + transparent: { + backgroundColor: semanticTokens.nullColor, + ':enabled:hover': { + backgroundColor: semanticTokens._nullBackgroundColorHover, + }, + ':enabled:active': { + backgroundColor: semanticTokens._nullBackgroundColorPressed, + }, + [`& .${tabClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlOnTransparentRest, + }, + [`:enabled:hover .${tabClassNames.icon}`]: { + color: semanticTokens._ctrlTabForegroundOnTransparentHover, + }, + [`:enabled:active .${tabClassNames.icon}`]: { + color: semanticTokens._ctrlTabForegroundOnTransparentPressed, + }, + [`& .${tabClassNames.content}`]: { + color: semanticTokens.foregroundCtrlOnTransparentRest, + }, + [`:enabled:hover .${tabClassNames.content}`]: { + color: semanticTokens._ctrlTabForegroundOnTransparentHover, + }, + [`:enabled:active .${tabClassNames.content}`]: { + color: semanticTokens._ctrlTabForegroundOnTransparentPressed, + }, + }, + subtle: { + backgroundColor: semanticTokens.backgroundCtrlSubtleRest, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleRest), + ':enabled:hover': { + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + }, + ':enabled:active': { + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + }, + [`& .${tabClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnSubtleRest, + }, + [`:enabled:hover .${tabClassNames.icon}`]: { + color: semanticTokens._ctrlTabForegroundOnSubtleHover, + }, + [`:enabled:active .${tabClassNames.icon}`]: { + color: semanticTokens._ctrlTabForegroundOnSubtlePressed, + }, + [`& .${tabClassNames.content}`]: { + color: semanticTokens.foregroundCtrlOnSubtleRest, + }, + [`:enabled:hover .${tabClassNames.content}`]: { + color: semanticTokens.foregroundCtrlOnSubtleHover, + }, + [`:enabled:active .${tabClassNames.content}`]: { + color: semanticTokens.foregroundCtrlOnSubtlePressed, + }, + }, + disabledCursor: { + cursor: 'not-allowed', + }, + transparentDisabled: { + backgroundColor: semanticTokens.nullColor, + + [`& .${tabClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlOnTransparentDisabled, + }, + [`& .${tabClassNames.content}`]: { + color: semanticTokens.foregroundCtrlOnTransparentDisabled, + }, + }, + subtleDisabled: { + backgroundColor: semanticTokens.nullColor, + + [`& .${tabClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnSubtleDisabled, + }, + [`& .${tabClassNames.content}`]: { + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + }, + }, + selected: { + [`& .${tabClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlActiveBrandRest, + }, + [`:enabled:hover .${tabClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlActiveBrandHover, + }, + [`:enabled:active .${tabClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlActiveBrandPressed, + }, + [`& .${tabClassNames.content}`]: { + color: semanticTokens._ctrlTabForegroundActiveBrandRest, + }, + [`:enabled:hover .${tabClassNames.content}`]: { + color: semanticTokens._ctrlTabForegroundActiveBrandHover, + }, + [`:enabled:active .${tabClassNames.content}`]: { + color: semanticTokens._ctrlTabForegroundActiveBrandPressed, + }, + }, +}); + +const useCircularAppearanceStyles = makeStyles({ + base: { + borderRadius: semanticTokens.cornerCircular, + border: `solid ${semanticTokens.strokeWidthDefault} ${semanticTokens.nullColor}`, + [`& .${tabClassNames.icon}`]: { + color: 'inherit', + }, + [`& .${tabClassNames.content}`]: { + color: 'inherit', + }, + }, + // medium: { + // Note: padding-block does not collapse into the other padding rules when using complex CSS hooks + // In order for styles to collapse correctly, they need to be like:like in their usage + // For now, we've set to paddingTop/Bottom to ensure they collapse via mediumHorizontal/Vertical + // paddingBlock: `${tokens.spacingVerticalSNudge}`, + // } + mediumHorizontal: { + paddingTop: `${tokens.spacingVerticalSNudge}`, + paddingBottom: `${tokens.spacingVerticalSNudge}`, + }, + mediumVertical: { + paddingLeft: `${tokens.spacingVerticalSNudge}`, + paddingRight: `${tokens.spacingVerticalSNudge}`, + }, + subtle: { + backgroundColor: semanticTokens.backgroundCtrlSubtleRest, + border: `solid ${semanticTokens.strokeWidthDefault} transparent`, + color: semanticTokens.foregroundCtrlOnSubtleRest, + ':enabled:hover': { + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + border: `solid ${semanticTokens.strokeWidthDefault} ${semanticTokens.strokeCtrlOnNeutralHover}`, + color: semanticTokens.foregroundCtrlOnSubtleHover, + }, + ':enabled:active': { + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + border: `solid ${semanticTokens.strokeWidthDefault} ${semanticTokens.strokeCtrlOnNeutralPressed}`, + color: semanticTokens.foregroundCtrlOnSubtlePressed, + }, + '@media (forced-colors: active)': { + border: `solid ${semanticTokens.strokeWidthDefault} Canvas`, + }, + }, + subtleSelected: { + backgroundColor: tokens.colorBrandBackground2, + border: `solid ${semanticTokens.strokeWidthDefault} ${tokens.colorCompoundBrandStroke}`, + color: tokens.colorBrandForeground2, + ':enabled:hover': { + backgroundColor: tokens.colorBrandBackground2Hover, + border: `solid ${semanticTokens.strokeWidthDefault} ${tokens.colorCompoundBrandStrokeHover}`, + color: tokens.colorBrandForeground2Hover, + }, + ':enabled:active': { + backgroundColor: tokens.colorBrandBackground2Pressed, + border: `solid ${semanticTokens.strokeWidthDefault} ${tokens.colorCompoundBrandStrokePressed}`, + color: tokens.colorBrandForeground2Pressed, + }, + '@media (forced-colors: active)': { + border: `solid ${semanticTokens.strokeWidthDefault} Highlight`, + }, + }, + subtleDisabled: { + backgroundColor: semanticTokens.backgroundCtrlSubtleRest, + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + }, + subtleDisabledSelected: { + backgroundColor: semanticTokens.backgroundCtrlActiveBrandDisabled, + border: `solid ${semanticTokens.strokeWidthDefault} ${semanticTokens.strokeCtrlOnNeutralDisabled}`, + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + }, + filled: { + backgroundColor: tokens.colorNeutralBackground3, + color: semanticTokens.foregroundCtrlNeutralSecondaryRest, + ':enabled:hover': { + backgroundColor: tokens.colorNeutralBackground3Hover, + color: semanticTokens.foregroundCtrlNeutralSecondaryHover, + }, + ':enabled:active': { + backgroundColor: tokens.colorNeutralBackground3Pressed, + color: semanticTokens.foregroundCtrlNeutralSecondaryPressed, + }, + '@media (forced-colors: active)': { + ':enabled:hover': { + backgroundColor: 'Highlight', + forcedColorAdjust: 'none', + [`& .${tabClassNames.content}`]: { + color: 'HighlightText', + }, + [`& .${iconClassNames.filled}`]: { + color: 'HighlightText', + }, + [`& .${iconClassNames.regular}`]: { + color: 'HighlightText', + }, + }, + }, + }, + filledSelected: { + backgroundColor: semanticTokens.backgroundCtrlBrandRest, + color: semanticTokens.foregroundCtrlOnBrandRest, + ':enabled:hover': { + backgroundColor: semanticTokens.backgroundCtrlBrandHover, + color: semanticTokens.foregroundCtrlOnBrandHover, + }, + ':enabled:active': { + backgroundColor: semanticTokens.backgroundCtrlBrandPressed, + color: semanticTokens.foregroundCtrlOnBrandPressed, + }, + '@media (forced-colors: active)': { + ':enabled': { + backgroundColor: 'ButtonText', + [`& .${tabClassNames.content}`]: { + color: 'ButtonFace', + forcedColorAdjust: 'none', + }, + }, + [`:enabled .${tabClassNames.icon}`]: { + color: 'ButtonFace', + }, + }, + }, + filledDisabled: { + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + filledDisabledSelected: { + backgroundColor: semanticTokens.backgroundCtrlActiveBrandDisabled, + border: `solid ${semanticTokens.strokeWidthDefault} ${semanticTokens.strokeCtrlOnNeutralDisabled}`, + color: semanticTokens.foregroundCtrlOnActiveBrandDisabled, + }, +}); + +/** + * Focus styles for the root slot + */ +const useFocusStyles = makeStyles({ + // Tab creates a custom focus indicator because the default focus indicator + // is applied using an ::after pseudo-element on the root. Since the selection + // indicator uses an ::after pseudo-element on the root, there is a conflict. + base: createCustomFocusIndicatorStyle( + { + ...shorthands.borderColor('transparent'), + outlineWidth: semanticTokens.ctrlFocusOuterStrokeWidth, + outlineColor: 'transparent', + outlineStyle: 'solid', + boxShadow: ` + ${tokens.shadow4}, + 0 0 0 ${semanticTokens.ctrlFocusOuterStrokeWidth} ${semanticTokens.ctrlFocusInnerStroke} + `, + zIndex: 1, + }, + { enableOutline: true }, + ), + circular: createCustomFocusIndicatorStyle( + { + ...shorthands.borderColor('transparent'), + outlineWidth: semanticTokens.ctrlFocusOuterStrokeWidth, + outlineColor: 'transparent', + outlineStyle: 'solid', + boxShadow: ` + ${tokens.shadow4}, + 0 0 0 ${semanticTokens.ctrlFocusOuterStrokeWidth} ${semanticTokens.ctrlFocusInnerStroke}, + 0 0 0 ${semanticTokens.ctrlFocusInnerStrokeWidth} ${tokens.colorNeutralStrokeOnBrand} inset + `, + zIndex: 1, + }, + { enableOutline: true }, + ), +}); + +/** Indicator styles for when pending selection */ +const usePendingIndicatorStyles = makeStyles({ + base: { + ':hover::before': { + backgroundColor: semanticTokens.strokeCtrlOnNeutralHover, + borderRadius: semanticTokens.cornerCircular, + content: '""', + position: 'absolute', + }, + ':active::before': { + backgroundColor: semanticTokens.strokeCtrlOnNeutralPressed, + borderRadius: semanticTokens.cornerCircular, + content: '""', + position: 'absolute', + }, + '@media (forced-colors: active)': { + ':hover::before': { + backgroundColor: 'Highlight', + }, + ':active::before': { + backgroundColor: 'Highlight', + }, + }, + }, + disabled: { + ':hover::before': { + backgroundColor: semanticTokens.ctrlFocusOuterStroke, + }, + ':active::before': { + backgroundColor: semanticTokens.ctrlFocusOuterStroke, + }, + '@media (forced-colors: active)': { + ':hover::before': { + backgroundColor: 'transparent', + }, + ':active::before': { + backgroundColor: 'transparent', + }, + }, + }, + smallHorizontal: { + '::before': { + bottom: 0, + height: tokens.strokeWidthThick, + left: tokens.spacingHorizontalSNudge, + right: tokens.spacingHorizontalSNudge, + }, + }, + smallVertical: { + '::before': { + bottom: tokens.spacingVerticalXS, + left: 0, + top: tokens.spacingVerticalXS, + width: semanticTokens.ctrlListPillWidth, + }, + }, + mediumHorizontal: { + '::before': { + bottom: 0, + height: semanticTokens.ctrlListPillWidth, + left: semanticTokens.paddingCtrlHorizontalDefault, + right: semanticTokens.paddingCtrlHorizontalDefault, + }, + }, + mediumVertical: { + '::before': { + bottom: semanticTokens.ctrlChoicePaddingVertical, + left: 0, + top: semanticTokens.ctrlChoicePaddingVertical, + width: semanticTokens.ctrlListPillWidth, + }, + }, + largeHorizontal: { + '::before': { + bottom: 0, + height: semanticTokens.ctrlListPillWidth, + left: semanticTokens.paddingCtrlHorizontalDefault, + right: semanticTokens.paddingCtrlHorizontalDefault, + }, + }, + largeVertical: { + '::before': { + bottom: tokens.spacingVerticalMNudge, + left: 0, + top: tokens.spacingVerticalMNudge, + width: semanticTokens.ctrlListPillWidth, + }, + }, +}); + +const useActiveIndicatorStyles = makeStyles({ + base: { + '::after': { + backgroundColor: semanticTokens.strokeLayer, + borderRadius: semanticTokens.cornerCircular, + content: '""', + position: 'absolute', + }, + }, + selected: { + '::after': { + backgroundColor: semanticTokens.backgroundCtrlActiveBrandRest, + }, + ':enabled:hover::after': { + backgroundColor: semanticTokens.backgroundCtrlActiveBrandHover, + }, + ':enabled:active::after': { + backgroundColor: semanticTokens.backgroundCtrlActiveBrandPressed, + }, + '@media (forced-colors: active)': { + '::after': { + backgroundColor: 'ButtonText', + }, + ':enabled:hover::after': { + backgroundColor: 'ButtonText', + }, + ':enabled:active::after': { + backgroundColor: 'ButtonText', + }, + }, + }, + disabled: { + '::after': { + backgroundColor: semanticTokens._ctrlTabBackgroundActiveBrandDisabled, + }, + }, + smallHorizontal: { + '::after': { + bottom: 0, + height: tokens.strokeWidthThick, + left: tokens.spacingHorizontalSNudge, + right: tokens.spacingHorizontalSNudge, + }, + }, + smallVertical: { + '::after': { + bottom: tokens.spacingVerticalXS, + left: '0', + top: tokens.spacingVerticalXS, + width: semanticTokens.ctrlListPillWidth, + }, + }, + mediumHorizontal: { + '::after': { + bottom: '0', + height: semanticTokens.ctrlListPillWidth, + left: semanticTokens.paddingCtrlHorizontalDefault, + right: semanticTokens.paddingCtrlHorizontalDefault, + }, + }, + mediumVertical: { + '::after': { + bottom: semanticTokens.ctrlChoicePaddingVertical, + left: 0, + top: semanticTokens.ctrlChoicePaddingVertical, + width: semanticTokens.ctrlListPillWidth, + }, + }, + largeHorizontal: { + '::after': { + bottom: 0, + height: semanticTokens.ctrlListPillWidth, + left: semanticTokens.paddingCtrlHorizontalDefault, + right: semanticTokens.paddingCtrlHorizontalDefault, + }, + }, + largeVertical: { + '::after': { + bottom: tokens.spacingVerticalMNudge, + left: 0, + top: tokens.spacingVerticalMNudge, + width: semanticTokens.ctrlListPillWidth, + }, + }, +}); + +/** + * Styles for the icon slot. + */ +const useIconStyles = makeStyles({ + base: { + gridColumnStart: 1, + gridRowStart: 1, + alignItems: 'center', + display: 'inline-flex', + justifyContent: 'center', + overflow: 'hidden', + [`& .${iconClassNames.filled}`]: { + display: 'none', + }, + [`& .${iconClassNames.regular}`]: { + display: 'inline', + }, + }, + // per design, the small and medium font sizes are the same. + // the size prop only affects spacing. + small: { + fontSize: semanticTokens.sizeCtrlIcon, + height: semanticTokens.sizeCtrlIcon, + width: semanticTokens.sizeCtrlIcon, + }, + medium: { + fontSize: semanticTokens.sizeCtrlIcon, + height: semanticTokens.sizeCtrlIcon, + width: semanticTokens.sizeCtrlIcon, + }, + large: { + fontSize: semanticTokens.sizeCtrlLgIcon, + height: semanticTokens.sizeCtrlLgIcon, + width: semanticTokens.sizeCtrlLgIcon, + }, + selected: { + [`& .${iconClassNames.filled}`]: { + display: 'inline', + }, + [`& .${iconClassNames.regular}`]: { + display: 'none', + }, + }, +}); + +/** + * Styles for the content slot (children) + */ +const useContentStyles = makeStyles({ + base: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + overflow: 'hidden', + // content padding is the same for medium & small, horizontal & vertical + padding: `${semanticTokens.paddingContentNone} ${semanticTokens._ctrlTabPaddingTextSide}`, + }, + selected: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textCtrlWeightSelected, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + }, + large: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampLgItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + }, + largeSelected: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampLgItemBodyFontSize, + fontWeight: semanticTokens.textCtrlWeightSelected, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + }, + noIconBefore: { + gridColumnStart: 1, + gridRowStart: 1, + }, + iconBefore: { + gridColumnStart: 2, + gridRowStart: 1, + }, + placeholder: { + visibility: 'hidden', + }, +}); + +/** + * Apply styling to the Tab slots based on the state + */ +export const useSemanticTabStyles = (_state: unknown): TabState => { + 'use no memo'; + + const state = _state as TabState; + + useSemanticTabIndicatorStyles_unstable(state); + + useSemanticTabButtonStyles_unstable(state, state.root); + + useSemanticTabContentStyles_unstable(state); + + return state; +}; + +/** + * Applies styles for the Tab indicator based on its current state. + * + * This hook is typically used internally by `useTabStyles_unstable`. You should + * only use it directly if you're creating a custom `Tab` component. + * + * @param state - The `Tab` component's current state + * @returns The state object with updated button styles + */ +export const useSemanticTabIndicatorStyles_unstable = (state: TabState): TabState => { + 'use no memo'; + + const rootStyles = useRootStyles(); + const pendingIndicatorStyles = usePendingIndicatorStyles(); + const activeIndicatorStyles = useActiveIndicatorStyles(); + + const { appearance, disabled, selected, size, vertical } = state; + + const classes: Parameters = [tabClassNames.root, rootStyles.root]; + + if (appearance !== 'subtle-circular' && appearance !== 'filled-circular') { + classes.push( + // pending indicator (before pseudo element) + pendingIndicatorStyles.base, + size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), + size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), + size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), + disabled && pendingIndicatorStyles.disabled, + + // active indicator (after pseudo element) + selected && activeIndicatorStyles.base, + selected && !disabled && activeIndicatorStyles.selected, + selected && + size === 'small' && + (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), + selected && + size === 'medium' && + (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), + selected && + size === 'large' && + (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), + selected && disabled && activeIndicatorStyles.disabled, + ); + } + + state.root.className = mergeClasses(state.root.className, ...classes, getSlotClassNameProp_unstable(state.root)); + + useTabAnimatedIndicatorStyles_unstable(state); + + return state; +}; + +/** + * Applies styles to the Tab button slot based on its current state. + * + * This hook is typically used internally by `useTabStyles_unstable`. You should + * only use it directly if you're creating a custom `Tab` component. + * + * @param state - The Tab component's current state + * @param slot - The button slot of the Tab component + * @returns The state object with updated button styles + */ +export const useSemanticTabButtonStyles_unstable = (state: TabState, slot: TabState['root']): TabState => { + 'use no memo'; + + const rootStyles = useRootStyles(); + const focusStyles = useFocusStyles(); + const circularStyles = useCircularAppearanceStyles(); + + const { appearance, disabled, selected, size, vertical } = state; + + const isSubtleCircular = appearance === 'subtle-circular'; + const isFilledCircular = appearance === 'filled-circular'; + const isCircular = isSubtleCircular || isFilledCircular; + + const circularAppearance = [ + circularStyles.base, + focusStyles.circular, + // sizes + size === 'medium' && !vertical && circularStyles.mediumHorizontal, + size === 'medium' && vertical && circularStyles.mediumVertical, + // subtle-circular appearance + isSubtleCircular && circularStyles.subtle, + selected && isSubtleCircular && circularStyles.subtleSelected, + disabled && isSubtleCircular && circularStyles.subtleDisabled, + selected && disabled && isSubtleCircular && circularStyles.subtleDisabledSelected, + // filled-circular appearance + isFilledCircular && circularStyles.filled, + selected && isFilledCircular && circularStyles.filledSelected, + disabled && isFilledCircular && circularStyles.filledDisabled, + selected && disabled && isFilledCircular && circularStyles.filledDisabledSelected, + ]; + + const regularAppearance = [ + focusStyles.base, + !disabled && appearance === 'subtle' && rootStyles.subtle, + !disabled && appearance === 'transparent' && rootStyles.transparent, + !disabled && selected && rootStyles.selected, + disabled && appearance === 'subtle' && rootStyles.subtleDisabled, + disabled && appearance === 'transparent' && rootStyles.transparentDisabled, + ]; + + slot.className = mergeClasses( + slot.className, + rootStyles.button, + // orientation + vertical ? rootStyles.vertical : rootStyles.horizontal, + // size + size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), + size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), + size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), + ...(isCircular ? circularAppearance : regularAppearance), + disabled && rootStyles.disabledCursor, + getSlotClassNameProp_unstable(slot), + ); + + return state; +}; + +/** + * Applies styles to the Tab content slot based on its current state. + * + * This hook is typically used internally by `useTabStyles_unstable`. You should + * only use it directly if you're creating a custom `Tab` component. + * + * @param state - The Tab component's current state + * @returns The state object with updated content styles + */ +export const useSemanticTabContentStyles_unstable = (state: TabState): TabState => { + 'use no memo'; + + const iconStyles = useIconStyles(); + const contentStyles = useContentStyles(); + + const { selected, size } = state; + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + tabClassNames.icon, + iconStyles.base, + iconStyles[size], + selected && iconStyles.selected, + getSlotClassNameProp_unstable(state.icon), + ); + } + + // This needs to be before state.content.className is updated + if (state.contentReservedSpace) { + state.contentReservedSpace.className = mergeClasses( + state.content.className, + tabReservedSpaceClassNames.content, + contentStyles.base, + size === 'large' ? contentStyles.largeSelected : contentStyles.selected, + state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, + contentStyles.placeholder, + getSlotClassNameProp_unstable(state.contentReservedSpace), + ); + // FIXME: this is a deprecated API + // should be removed in the next major version + // eslint-disable-next-line @typescript-eslint/no-deprecated + state.contentReservedSpaceClassName = state.contentReservedSpace.className; + } + + state.content.className = mergeClasses( + state.content.className, + tabClassNames.content, + contentStyles.base, + size === 'large' && contentStyles.large, + selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), + state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, + getSlotClassNameProp_unstable(state.content), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/index.ts new file mode 100644 index 00000000000000..333b4345df99d6 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/index.ts @@ -0,0 +1,12 @@ +export { useSemanticTeachingPopoverBodyStyles } from './useSemanticTeachingPopoverBodyStyles.styles'; +export { useSemanticTeachingPopoverCarouselCardStyles } from './useSemanticTeachingPopoverCarouselCardStyles.styles'; +export { useSemanticTeachingPopoverCarouselFooterButtonStyles } from './useSemanticTeachingPopoverCarouselFooterButtonStyles.styles'; +export { useSemanticTeachingPopoverCarouselFooterStyles } from './useSemanticTeachingPopoverCarouselFooterStyles.styles'; +export { useSemanticTeachingPopoverCarouselNavButtonStyles } from './useSemanticTeachingPopoverCarouselNavButtonStyles.styles'; +export { useSemanticTeachingPopoverCarouselNavStyles } from './useSemanticTeachingPopoverCarouselNavStyles.styles'; +export { useSemanticTeachingPopoverCarouselPageCountStyles } from './useSemanticTeachingPopoverCarouselPageCountStyles.styles'; +export { useSemanticTeachingPopoverCarouselStyles } from './useSemanticTeachingPopoverCarouselStyles.styles'; +export { useSemanticTeachingPopoverFooterStyles } from './useSemanticTeachingPopoverFooterStyles.styles'; +export { useSemanticTeachingPopoverHeaderStyles } from './useSemanticTeachingPopoverHeaderStyles.styles'; +export { useSemanticTeachingPopoverSurfaceStyles } from './useSemanticTeachingPopoverSurfaceStyles.styles'; +export { useSemanticTeachingPopoverTitleStyles } from './useSemanticTeachingPopoverTitleStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverBodyStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverBodyStyles.styles.ts new file mode 100644 index 00000000000000..a997611b368690 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverBodyStyles.styles.ts @@ -0,0 +1,73 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { teachingPopoverBodyClassNames, type TeachingPopoverBodyState } from '@fluentui/react-teaching-popover'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const popoverBodyDimension = 288; + +export const useMediaStyles = makeStyles({ + base: { + gridArea: 'media', + overflow: 'hidden', + width: 'auto', + marginBottom: '12px', + verticalAlign: 'middle', + justifyContent: 'center', + display: 'flex', + }, + short: { + aspectRatio: popoverBodyDimension / 117, + '@supports not (aspect-ratio)': { + height: '117px', + }, + }, + medium: { + aspectRatio: popoverBodyDimension / 176, + '@supports not (aspect-ratio)': { + height: '176px', + }, + }, + tall: { + aspectRatio: 1, + '@supports not (aspect-ratio)': { + height: `${popoverBodyDimension}px`, + }, + }, +}); + +const useStyles = makeStyles({ + root: { + display: 'flex', + flexDirection: 'column', + paddingBottom: '12px', + }, +}); + +/** Applies style classnames to slots */ +export const useSemanticTeachingPopoverBodyStyles = (_state: unknown) => { + 'use no memo'; + + const state = _state as TeachingPopoverBodyState; + + const { mediaLength } = state; + const styles = useStyles(); + const mediaStyles = useMediaStyles(); + + state.root.className = mergeClasses( + state.root.className, + teachingPopoverBodyClassNames.root, + styles.root, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.media) { + state.media.className = mergeClasses( + state.media.className, + teachingPopoverBodyClassNames.media, + mediaStyles.base, + mediaStyles[mediaLength], + getSlotClassNameProp_unstable(state.media), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselCardStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselCardStyles.styles.ts new file mode 100644 index 00000000000000..cb1af6c68b0593 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselCardStyles.styles.ts @@ -0,0 +1,28 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { + teachingPopoverCarouselCardClassNames, + type TeachingPopoverCarouselCardState, +} from '@fluentui/react-teaching-popover'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useStyles = makeStyles({ + root: {}, +}); + +/** Applies style classnames to slots */ +export const useSemanticTeachingPopoverCarouselCardStyles = (_state: unknown) => { + 'use no memo'; + + const state = _state as TeachingPopoverCarouselCardState; + + const styles = useStyles(); + + state.root.className = mergeClasses( + state.root.className, + teachingPopoverCarouselCardClassNames.root, + styles.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselFooterButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselFooterButtonStyles.styles.ts new file mode 100644 index 00000000000000..5bd275cfbbadfe --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselFooterButtonStyles.styles.ts @@ -0,0 +1,74 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { + teachingPopoverCarouselFooterButtonClassNames, + type TeachingPopoverCarouselFooterButtonState, +} from '@fluentui/react-teaching-popover'; +import { useSemanticButtonStyles } from '../Button'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useStyles = makeStyles({ + root: { + minWidth: '96px', + }, + brandNext: { + color: semanticTokens.foregroundContentBrandPrimary, + backgroundColor: semanticTokens.foregroundCtrlOnBrandRest, + ...shorthands.borderColor(semanticTokens.nullColor), + ':hover': { + color: semanticTokens.foregroundCtrlActiveBrandHover, + backgroundColor: semanticTokens.foregroundCtrlOnBrandHover, + }, + ':hover:active': { + color: semanticTokens.foregroundCtrlActiveBrandPressed, + backgroundColor: semanticTokens.foregroundCtrlOnBrandPressed, + }, + }, + brandPrevious: { + // In brand, this is always 'NeutralForegroundOnBrand' + color: semanticTokens.foregroundCtrlOnBrandRest, + backgroundColor: semanticTokens.backgroundCtrlBrandRest, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandRest), + ':hover': { + color: semanticTokens.foregroundCtrlOnBrandHover, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandRest), + backgroundColor: semanticTokens.backgroundCtrlBrandHover, + }, + ':hover:active': { + color: semanticTokens.foregroundCtrlOnBrandPressed, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandRest), + backgroundColor: semanticTokens.backgroundCtrlBrandPressed, + }, + }, +}); + +/** + * Apply styling to the TeachingPopoverCarouselFooterButton slots based on the state + */ +export const useSemanticTeachingPopoverCarouselFooterButtonStyles = ( + _state: unknown, +): TeachingPopoverCarouselFooterButtonState => { + 'use no memo'; + + let state = _state as TeachingPopoverCarouselFooterButtonState; + + const styles = useStyles(); + const { navType, popoverAppearance } = state; + + // Apply underlying fluent Button styles + state = { + ...state, + ...useSemanticButtonStyles(state), + }; + + state.root.className = mergeClasses( + state.root.className, + teachingPopoverCarouselFooterButtonClassNames.root, + styles.root, + navType === 'prev' && popoverAppearance === 'brand' && styles.brandPrevious, + navType === 'next' && popoverAppearance === 'brand' && styles.brandNext, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselFooterStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselFooterStyles.styles.ts new file mode 100644 index 00000000000000..ddbd51bf90bd8c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselFooterStyles.styles.ts @@ -0,0 +1,58 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { + teachingPopoverCarouselFooterClassNames, + type TeachingPopoverCarouselFooterState, +} from '@fluentui/react-teaching-popover'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +// Todo: Page change animation & styles +const useStyles = makeStyles({ + root: { + display: 'flex', + flexDirection: 'row', + }, + rootCentered: { + justifyContent: 'space-between', + gap: '8px', + }, + rootRightAligned: { + gap: '8px', + '& :first-child': { + marginInlineEnd: 'auto', + }, + }, +}); + +/** Applies style classnames to slots */ +export const useSemanticTeachingPopoverCarouselFooterStyles = (_state: unknown) => { + 'use no memo'; + + const state = _state as TeachingPopoverCarouselFooterState; + + const styles = useStyles(); + const { layout } = state; + + state.root.className = mergeClasses( + state.root.className, + teachingPopoverCarouselFooterClassNames.root, + styles.root, + layout === 'centered' ? styles.rootCentered : styles.rootRightAligned, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.previous) { + state.previous.className = mergeClasses( + state.previous.className, + teachingPopoverCarouselFooterClassNames.previous, + getSlotClassNameProp_unstable(state.previous), + ); + } + + state.next.className = mergeClasses( + state.next.className, + teachingPopoverCarouselFooterClassNames.next, + getSlotClassNameProp_unstable(state.next), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselNavButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselNavButtonStyles.styles.ts new file mode 100644 index 00000000000000..5dacc073f0e5d9 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselNavButtonStyles.styles.ts @@ -0,0 +1,92 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { + teachingPopoverCarouselNavButtonClassNames, + type TeachingPopoverCarouselNavButtonState, +} from '@fluentui/react-teaching-popover'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + display: 'flex', + cursor: 'pointer', + boxSizing: 'border-box', + height: '8px', + width: '8px', + backgroundColor: semanticTokens.backgroundCtrlBrandRest, + }, + rootUnselected: { + border: 'none', + borderRadius: semanticTokens.cornerCircular, + padding: '0px', + outline: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.nullColor}`, // For high contrast + ...createCustomFocusIndicatorStyle({ + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusInnerStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + ...shorthands.borderColor(semanticTokens.nullColor), + }), + backgroundColor: `color-mix(in srgb, ${semanticTokens.backgroundCtrlBrandRest} 30%, transparent)`, + '@supports not (color: color-mix(in lch, white, black))': { + // This will also affect the focus border, but only in older unsupported browsers + opacity: 0.3, + backgroundColor: semanticTokens.backgroundCtrlBrandRest, + }, + }, + rootSelected: { + outline: `${semanticTokens.strokeWidthCtrlOutlinePressed} solid ${semanticTokens.nullColor}`, // For high contrast + width: '16px', + border: 'none', + borderRadius: semanticTokens.cornerCtrlRest, + padding: '0px', + ...createCustomFocusIndicatorStyle({ + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusInnerStroke}`, + borderRadius: semanticTokens.cornerCtrlPressed, + ...shorthands.borderColor(semanticTokens.nullColor), + }), + '@media (forced-colors: active)': { + backgroundColor: 'CanvasText', + }, + }, + rootBrand: { + backgroundColor: semanticTokens.foregroundCtrlOnBrandRest, + }, + rootBrandUnselected: { + backgroundColor: `color-mix(in srgb, ${semanticTokens.foregroundCtrlOnBrandRest} 30%, transparent)`, + '@supports not (color: color-mix(in lch, white, black))': { + // This will also affect the focus border, but only in older unsupported browsers + opacity: 0.3, + backgroundColor: semanticTokens.backgroundCtrlBrandRest, + }, + }, +}); + +/** + * Apply styling to the TeachingPopoverCarouselNavButton slots based on the state + */ +export const useSemanticTeachingPopoverCarouselNavButtonStyles = ( + _state: unknown, +): TeachingPopoverCarouselNavButtonState => { + 'use no memo'; + + const state = _state as TeachingPopoverCarouselNavButtonState; + + const styles = useStyles(); + const { appearance, isSelected } = state; + + const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected; + + state.root.className = mergeClasses( + state.root.className, + teachingPopoverCarouselNavButtonClassNames.root, + styles.root, + isSelected ? styles.rootSelected : styles.rootUnselected, + appearance === 'brand' && brandStyles, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselNavStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselNavStyles.styles.ts new file mode 100644 index 00000000000000..eb9ed952d84126 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselNavStyles.styles.ts @@ -0,0 +1,41 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { + teachingPopoverCarouselNavClassNames, + type TeachingPopoverCarouselNavState, +} from '@fluentui/react-teaching-popover'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useStyles = makeStyles({ + root: { + display: 'flex', + flexDirection: 'row', + columnGap: semanticTokens.gapInsideCtrlSmDefault, + alignItems: 'center', + justifyContent: 'center', + ...createCustomFocusIndicatorStyle({ + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusInnerStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + ...shorthands.borderColor(semanticTokens.nullColor), + }), + }, +}); + +/** Applies style classnames to slots */ +export const useSemanticTeachingPopoverCarouselNavStyles = (_state: unknown) => { + 'use no memo'; + + const state = _state as TeachingPopoverCarouselNavState; + + const styles = useStyles(); + + state.root.className = mergeClasses( + state.root.className, + teachingPopoverCarouselNavClassNames.root, + styles.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselPageCountStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselPageCountStyles.styles.ts new file mode 100644 index 00000000000000..cd3b9d11f40c80 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselPageCountStyles.styles.ts @@ -0,0 +1,38 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { + teachingPopoverCarouselPageCountClassNames, + type TeachingPopoverCarouselPageCountState, +} from '@fluentui/react-teaching-popover'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, +}); + +/** + * Apply styling to the TeachingPopoverCarouselPageCount slots based on the state + */ +export const useSemanticTeachingPopoverCarouselPageCountStyles = ( + _state: unknown, +): TeachingPopoverCarouselPageCountState => { + 'use no memo'; + + const state = _state as TeachingPopoverCarouselPageCountState; + + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + teachingPopoverCarouselPageCountClassNames.root, + styles.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselStyles.styles.ts new file mode 100644 index 00000000000000..edd184e0fdde34 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselStyles.styles.ts @@ -0,0 +1,26 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { teachingPopoverCarouselClassNames, type TeachingPopoverCarouselState } from '@fluentui/react-teaching-popover'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +// Todo: Page change animation & styles +const useStyles = makeStyles({ + root: {}, +}); + +/** Applies style classnames to slots */ +export const useSemanticTeachingPopoverCarouselStyles = (_state: unknown) => { + 'use no memo'; + + const state = _state as TeachingPopoverCarouselState; + + const styles = useStyles(); + + state.root.className = mergeClasses( + state.root.className, + teachingPopoverCarouselClassNames.root, + styles.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverFooterStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverFooterStyles.styles.ts new file mode 100644 index 00000000000000..0b1179a2a097ee --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverFooterStyles.styles.ts @@ -0,0 +1,78 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { teachingPopoverFooterClassNames, type TeachingPopoverFooterState } from '@fluentui/react-teaching-popover'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useStyles = makeStyles({ + root: { + display: 'flex', + gap: semanticTokens.gapBetweenCtrlDefault, + paddingTop: semanticTokens.paddingCtrlHorizontalDefault, + }, + rootVertical: { + flexDirection: 'column', + }, + rootHorizontal: { + flexDirection: 'row', + justifyContent: 'flex-end', + }, + buttonRootVertical: { + width: 'auto', + borderRadius: semanticTokens.cornerCtrlRest, + }, + buttonRootHorizontal: { + minWidth: '96px', + borderRadius: semanticTokens.cornerCtrlRest, + }, + brandSecondary: { + ...shorthands.borderColor(semanticTokens.foregroundCtrlOnBrandRest), + }, + brandPrimary: { + color: semanticTokens.foregroundContentBrandPrimary, + backgroundColor: semanticTokens.foregroundCtrlOnBrandRest, + ':hover': { + color: semanticTokens.foregroundCtrlActiveBrandHover, + backgroundColor: semanticTokens.foregroundCtrlOnBrandHover, + }, + ':hover:active': { + color: semanticTokens.foregroundCtrlActiveBrandPressed, + backgroundColor: semanticTokens.foregroundCtrlOnBrandPressed, + }, + }, +}); + +/** Applies style classnames to slots */ +export const useSemanticTeachingPopoverFooterStyles = (_state: unknown) => { + 'use no memo'; + + const state = _state as TeachingPopoverFooterState; + + const styles = useStyles(); + const { appearance, footerLayout } = state; + + state.root.className = mergeClasses( + state.root.className, + teachingPopoverFooterClassNames.root, + styles.root, + footerLayout === 'horizontal' ? styles.rootHorizontal : styles.rootVertical, + getSlotClassNameProp_unstable(state.root), + ); + if (state.secondary) { + state.secondary.className = mergeClasses( + state.secondary.className, + teachingPopoverFooterClassNames.secondary, + footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, + appearance === 'brand' ? styles.brandSecondary : undefined, + getSlotClassNameProp_unstable(state.secondary), + ); + } + state.primary.className = mergeClasses( + state.primary.className, + teachingPopoverFooterClassNames.primary, + footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, + appearance === 'brand' ? styles.brandPrimary : undefined, + getSlotClassNameProp_unstable(state.primary), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverHeaderStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverHeaderStyles.styles.ts new file mode 100644 index 00000000000000..0ebcab914e8f1c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverHeaderStyles.styles.ts @@ -0,0 +1,100 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { teachingPopoverHeaderClassNames, type TeachingPopoverHeaderState } from '@fluentui/react-teaching-popover'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useStyles = makeStyles({ + root: { + display: 'flex', + flexDirection: 'row', + color: tokens.colorNeutralForeground3, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + fontSize: semanticTokens.textRampSmItemBodyFontSize, + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + paddingBottom: tokens.spacingVerticalXS, + alignItems: 'center', + marginTop: semanticTokens.paddingContentNone, + marginBottom: semanticTokens.paddingContentNone, + }, + rootBrand: { + color: semanticTokens.foregroundCtrlOnBrandRest, + }, + dismissButton: { + color: semanticTokens.foregroundContentNeutralSecondary, + position: 'relative', + display: 'flex', + alignItems: 'center', + cursor: 'pointer', + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + backgroundColor: semanticTokens.nullColor, + boxSizing: 'border-box', + marginInlineStart: 'auto', + padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeLayer}`, + }, + dismissBrand: { + color: semanticTokens.foregroundCtrlOnBrandRest, + }, + icon: { + height: semanticTokens.textGlobalCaption1FontSize, + width: semanticTokens.textGlobalCaption1FontSize, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + fontSize: semanticTokens.textGlobalCaption1FontSize, + alignItems: 'center', + boxSizing: 'content-box', + display: 'inline-flex', + justifyContent: 'center', + textDecorationLine: 'none', + verticalAlign: 'middle', + position: 'relative', + backgroundColor: semanticTokens.nullColor, + color: semanticTokens.foregroundContentNeutralSecondary, + marginInlineEnd: semanticTokens.gapBetweenTextSmall, + }, + iconBrand: { + color: semanticTokens.foregroundCtrlOnBrandRest, + }, +}); + +/** Applies style classnames to slots */ +export const useSemanticTeachingPopoverHeaderStyles = (_state: unknown) => { + 'use no memo'; + + const state = _state as TeachingPopoverHeaderState; + + const styles = useStyles(); + const { appearance } = state; + + state.root.className = mergeClasses( + state.root.className, + teachingPopoverHeaderClassNames.root, + styles.root, + appearance === 'brand' && styles.rootBrand, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.dismissButton) { + state.dismissButton.className = mergeClasses( + state.dismissButton.className, + teachingPopoverHeaderClassNames.dismissButton, + styles.dismissButton, + appearance === 'brand' ? styles.dismissBrand : undefined, + getSlotClassNameProp_unstable(state.dismissButton), + ); + } + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + teachingPopoverHeaderClassNames.icon, + styles.icon, + appearance === 'brand' ? styles.iconBrand : undefined, + getSlotClassNameProp_unstable(state.icon), + ); + } + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverSurfaceStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverSurfaceStyles.styles.ts new file mode 100644 index 00000000000000..773501f0e07ecd --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverSurfaceStyles.styles.ts @@ -0,0 +1,37 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { teachingPopoverSurfaceClassNames, type TeachingPopoverSurfaceState } from '@fluentui/react-teaching-popover'; +import { useSemanticPopoverSurfaceStyles } from '../Popover'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useStyles = makeStyles({ + root: { + padding: `${semanticTokens.paddingCtrlLgHorizontalDefault} ${semanticTokens.paddingCtrlLgHorizontalDefault}`, + borderRadius: semanticTokens._ctrlTeachingPopoverSurfaceCorner, + minWidth: '320px', + boxSizing: 'border-box', + }, +}); + +/** + * Apply styling to the TeachingPopoverSurface slots based on the state + */ +export const useSemanticTeachingPopoverSurfaceStyles = (_state: unknown): TeachingPopoverSurfaceState => { + 'use no memo'; + + const state = _state as TeachingPopoverSurfaceState; + + const styles = useStyles(); + + // Make sure to merge teaching bubble surface prior to popover styles + state.root.className = mergeClasses( + state.root.className, + teachingPopoverSurfaceClassNames.root, + styles.root, + getSlotClassNameProp_unstable(state.root), + ); + + const updatedState = useSemanticPopoverSurfaceStyles(state); + + return updatedState; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverTitleStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverTitleStyles.styles.ts new file mode 100644 index 00000000000000..fa953b7aed6200 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverTitleStyles.styles.ts @@ -0,0 +1,78 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { teachingPopoverTitleClassNames, type TeachingPopoverTitleState } from '@fluentui/react-teaching-popover'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useStyles = makeStyles({ + root: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + fontSize: semanticTokens.textRampLgItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + color: semanticTokens.foregroundContentNeutralPrimary, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + paddingBottom: semanticTokens.ctrlChoicePaddingVertical, + marginTop: semanticTokens.paddingContentNone, + marginBottom: semanticTokens.paddingContentNone, + }, + rootBrand: { + color: semanticTokens.foregroundCtrlOnBrandRest, + }, + dismissButton: { + position: 'relative', + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeLayer}`, + display: 'flex', + alignItems: 'center', + cursor: 'pointer', + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + backgroundColor: semanticTokens.nullColor, + boxSizing: 'border-box', + borderTopRightRadius: semanticTokens.cornerZero, + borderBottomRightRadius: semanticTokens.cornerZero, + borderRightStyle: 'none', + ...createCustomFocusIndicatorStyle({ + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusInnerStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + ...shorthands.borderColor(semanticTokens.nullColor), + }), + marginInlineStart: 'auto', + }, + dismissBrand: { + color: semanticTokens.foregroundCtrlOnBrandRest, + }, +}); + +/** Applies style classnames to slots */ +export const useSemanticTeachingPopoverTitleStyles = (_state: unknown) => { + 'use no memo'; + + const state = _state as TeachingPopoverTitleState; + + const styles = useStyles(); + const { appearance } = state; + + state.root.className = mergeClasses( + state.root.className, + teachingPopoverTitleClassNames.root, + styles.root, + appearance === 'brand' && styles.rootBrand, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.dismissButton) { + state.dismissButton.className = mergeClasses( + state.dismissButton.className, + teachingPopoverTitleClassNames.dismissButton, + styles.dismissButton, + appearance === 'brand' ? styles.dismissBrand : undefined, + getSlotClassNameProp_unstable(state.dismissButton), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Text/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Text/index.ts new file mode 100644 index 00000000000000..59be20e722dc48 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Text/index.ts @@ -0,0 +1 @@ +export { useSemanticTextStyles } from './useSemanticTextStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Text/useSemanticTextStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Text/useSemanticTextStyles.styles.ts new file mode 100644 index 00000000000000..7b1a30a081cd1b --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Text/useSemanticTextStyles.styles.ts @@ -0,0 +1,148 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { textClassNames, type TextState } from '@fluentui/react-text'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + textAlign: 'start', + display: 'inline', + whiteSpace: 'normal', + overflow: 'visible', + textOverflow: 'clip', + }, + nowrap: { + whiteSpace: 'nowrap', + overflow: 'hidden', + }, + truncate: { + textOverflow: 'ellipsis', + }, + block: { + display: 'block', + }, + italic: { + fontStyle: 'italic', + }, + underline: { + textDecorationLine: 'underline', + }, + strikethrough: { + textDecorationLine: 'line-through', + }, + strikethroughUnderline: { + textDecorationLine: 'line-through underline', + }, + base100: { + fontSize: semanticTokens.textGlobalCaption2FontSize, + lineHeight: semanticTokens.textGlobalCaption2LineHeight, + }, + base200: { + fontSize: semanticTokens.textGlobalCaption1FontSize, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + }, + base400: { + fontSize: semanticTokens.textGlobalBody2FontSize, + lineHeight: semanticTokens.textGlobalBody2LineHeight, + }, + base500: { + fontSize: semanticTokens.textGlobalBody1FontSize, + lineHeight: semanticTokens.textGlobalBody1LineHeight, + }, + base600: { + fontSize: semanticTokens.textGlobalSubtitle2FontSize, + lineHeight: semanticTokens.textGlobalSubtitle2LineHeight, + }, + hero700: { + fontSize: semanticTokens.textGlobalSubtitle1FontSize, + lineHeight: semanticTokens.textGlobalSubtitle1LineHeight, + }, + hero800: { + fontSize: semanticTokens.textGlobalTitle2FontSize, + lineHeight: semanticTokens.textGlobalTitle2LineHeight, + }, + hero900: { + fontSize: semanticTokens.textGlobalTitle1FontSize, + lineHeight: semanticTokens.textGlobalTitle1LineHeight, + }, + hero1000: { + fontSize: semanticTokens.textGlobalDisplay2FontSize, + lineHeight: semanticTokens.textGlobalDisplay2LineHeight, + }, + monospace: { + fontFamily: tokens.fontFamilyMonospace, + }, + numeric: { + fontFamily: tokens.fontFamilyNumeric, + }, + weightMedium: { + fontWeight: tokens.fontWeightMedium, + }, + weightSemibold: { + fontWeight: tokens.fontWeightSemibold, + }, + weightBold: { + fontWeight: tokens.fontWeightBold, + }, + alignCenter: { + textAlign: 'center', + }, + alignEnd: { + textAlign: 'end', + }, + alignJustify: { + textAlign: 'justify', + }, +}); + +/** + * Apply styling to the Text slots based on the state + */ +export const useSemanticTextStyles = (_state: unknown): TextState => { + 'use no memo'; + + const state = _state as TextState; + + const styles = useStyles(); + + state.root.className = mergeClasses( + state.root.className, + textClassNames.root, + styles.root, + state.wrap === false && styles.nowrap, + state.truncate && styles.truncate, + state.block && styles.block, + state.italic && styles.italic, + state.underline && styles.underline, + state.strikethrough && styles.strikethrough, + state.underline && state.strikethrough && styles.strikethroughUnderline, + state.size === 100 && styles.base100, + state.size === 200 && styles.base200, + state.size === 400 && styles.base400, + state.size === 500 && styles.base500, + state.size === 600 && styles.base600, + state.size === 700 && styles.hero700, + state.size === 800 && styles.hero800, + state.size === 900 && styles.hero900, + state.size === 1000 && styles.hero1000, + state.font === 'monospace' && styles.monospace, + state.font === 'numeric' && styles.numeric, + state.weight === 'medium' && styles.weightMedium, + state.weight === 'semibold' && styles.weightSemibold, + state.weight === 'bold' && styles.weightBold, + state.align === 'center' && styles.alignCenter, + state.align === 'end' && styles.alignEnd, + state.align === 'justify' && styles.alignJustify, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Textarea/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Textarea/index.ts new file mode 100644 index 00000000000000..59e91ff2b2386f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Textarea/index.ts @@ -0,0 +1 @@ +export { useSemanticTextareaStyles } from './useSemanticTextareaStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Textarea/useSemanticTextareaStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Textarea/useSemanticTextareaStyles.styles.ts new file mode 100644 index 00000000000000..b709668b683b91 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Textarea/useSemanticTextareaStyles.styles.ts @@ -0,0 +1,280 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { textareaClassNames, type TextareaState } from '@fluentui/react-textarea'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +// Maintaining the correct corner radius: +// Use the whole border-radius as the height and only put radii on the bottom corners. +// (Otherwise the radius would be automatically reduced to fit available space.) +// max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0. +const inputBottomFocusBorderStroke = `max(${semanticTokens.ctrlInputBottomLineStrokeWidthSelected}, ${semanticTokens.cornerCtrlRest})`; + +/** + * Styles for the root(wrapper) slot + */ +const useRootStyles = makeStyles({ + base: { + display: 'inline-flex', + boxSizing: 'border-box', + position: 'relative', + // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size. + padding: `0 0 ${semanticTokens.ctrlInputBottomLineStrokeWidthSelected} 0`, + margin: '0', + borderRadius: semanticTokens.cornerCtrlRest, + verticalAlign: 'top', + backgroundColor: semanticTokens.ctrlInputBackgroundRest, + ':focus-within': { + backgroundColor: semanticTokens.ctrlInputBackgroundSelected, + }, + }, + + disabled: { + backgroundColor: semanticTokens.ctrlInputBackgroundDisabled, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeCtrlOnNeutralDisabled}`, + + '@media (forced-colors: active)': { + ...shorthands.borderColor('GrayText'), + }, + }, + + interactive: { + // This is all for the bottom focus border. + // It's supposed to be 2px flat all the way across and match the radius of the field's corners. + '::after': { + boxSizing: 'border-box', + content: '""', + position: 'absolute', + left: '-1px', + bottom: '-1px', + right: '-1px', + + height: inputBottomFocusBorderStroke, + borderBottomLeftRadius: semanticTokens.cornerCtrlRest, + borderBottomRightRadius: semanticTokens.cornerCtrlRest, + + // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off. + // (This could be done without trimming using `background: linear-gradient(...)`, but using + // borderBottom makes it easier for people to override the color if needed.) + borderBottom: `${semanticTokens.ctrlInputBottomLineStrokeWidthSelected} solid ${semanticTokens.ctrlInputBottomLineStrokeSelected}`, + clipPath: `inset(calc(100% - ${semanticTokens.ctrlInputBottomLineStrokeWidthSelected}) 0 0 0)`, + + // Animation for focus OUT + transform: 'scaleX(0)', + transitionProperty: 'transform', + transitionDuration: tokens.durationUltraFast, + transitionDelay: tokens.curveAccelerateMid, + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + transitionDelay: '0.01ms', + }, + }, + ':focus-within::after': { + // Animation for focus IN + transform: 'scaleX(1)', + transitionProperty: 'transform', + transitionDuration: tokens.durationNormal, + transitionDelay: tokens.curveDecelerateMid, + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + transitionDelay: '0.01ms', + }, + }, + ':focus-within:active::after': { + // This is if the user clicks the field again while it's already focused + borderBottomColor: semanticTokens._ctrlInputBottomLineStrokeBrandPressed, + }, + ':focus-within': { + outlineWidth: semanticTokens.ctrlFocusOuterStrokeWidth, + outlineStyle: 'solid', + outlineColor: semanticTokens.nullColor, + }, + }, + + filled: { + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlFocusOuterStroke}`, + ':hover,:focus-within': { + ...shorthands.borderColor(semanticTokens._ctrlFocusOuterStrokeInteractive), + }, + }, + 'filled-darker': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, + ':focus-within': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, + }, + }, + 'filled-lighter': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, + ':focus-within': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, + }, + }, + 'filled-darker-shadow': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlFocusInnerStroke}`, + boxShadow: tokens.shadow2, + ':focus-within': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, + }, + }, + 'filled-lighter-shadow': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens._ctrlFocusOuterStrokeInteractive}`, + boxShadow: tokens.shadow2, + ':focus-within': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, + }, + }, + + outline: { + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeRest}`, + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeRest, + }, + outlineInteractive: { + ':hover': { + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeHover}`, + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeHover, + ':focus-within': { + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected, + }, + }, + + ':active': { + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokePressed}`, + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokePressed, + }, + + ':focus-within': { + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeSelected}`, + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected, + }, + }, + + invalid: { + ':not(:focus-within),:hover:not(:focus-within)': { + ...shorthands.borderColor(semanticTokens.ctrlInputBackgroundError), + }, + }, +}); + +/** + * Styles for the textarea slot + */ +const useTextareaStyles = makeStyles({ + base: { + ...shorthands.borderStyle('none'), + margin: '0', + backgroundColor: 'transparent', + boxSizing: 'border-box', + color: semanticTokens.foregroundContentNeutralPrimary, + flexGrow: 1, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + height: '100%', + + '::placeholder': { + color: semanticTokens._ctrlInputNeutralForegroundPlaceholder, + opacity: 1, + }, + + '::selection': { + color: tokens.colorNeutralForegroundInverted, + backgroundColor: tokens.colorNeutralBackgroundInverted, + }, + + outlineStyle: 'none', // disable default browser outline + }, + + disabled: { + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + cursor: 'not-allowed', + '::placeholder': { + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + }, + }, + + // The padding style adds both content and regular padding (from design spec), this is because the handle is not + // affected by changing the padding of the root. + small: { + minHeight: '40px', + padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`, + maxHeight: '200px', + fontSize: semanticTokens.textGlobalCaption1FontSize, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + }, + medium: { + minHeight: '52px', + padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`, + maxHeight: '260px', + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, + }, + large: { + minHeight: '64px', + padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`, + maxHeight: '320px', + fontSize: semanticTokens.textGlobalBody2FontSize, + lineHeight: semanticTokens.textGlobalBody2LineHeight, + }, +}); + +/** + * Styles for the textarea's resize property + */ +const useTextareaResizeStyles = makeStyles({ + none: { + resize: 'none', + }, + both: { + resize: 'both', + }, + horizontal: { + resize: 'horizontal', + }, + vertical: { + resize: 'vertical', + }, +}); + +/** + * Apply styling to the Textarea slots based on the state + */ +export const useSemanticTextareaStyles = (_state: unknown): TextareaState => { + 'use no memo'; + + const state = _state as TextareaState; + + const { size, appearance, resize } = state; + const disabled = state.textarea.disabled; + const invalid = `${state.textarea['aria-invalid']}` === 'true'; + const filled = appearance.startsWith('filled'); + + const rootStyles = useRootStyles(); + state.root.className = mergeClasses( + state.root.className, + textareaClassNames.root, + rootStyles.base, + disabled && rootStyles.disabled, + !disabled && filled && rootStyles.filled, + !disabled && rootStyles[appearance], + !disabled && rootStyles.interactive, + !disabled && appearance === 'outline' && rootStyles.outlineInteractive, + !disabled && invalid && rootStyles.invalid, + getSlotClassNameProp_unstable(state.root), + ); + + const textareaStyles = useTextareaStyles(); + const textareaResizeStyles = useTextareaResizeStyles(); + state.textarea.className = mergeClasses( + state.textarea.className, + textareaClassNames.textarea, + textareaStyles.base, + textareaStyles[size], + textareaResizeStyles[resize], + disabled && textareaStyles.disabled, + getSlotClassNameProp_unstable(state.textarea), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/index.ts new file mode 100644 index 00000000000000..eaae3de502120d --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/index.ts @@ -0,0 +1,5 @@ +export { useSemanticToastBodyStyles } from './useSemanticToastBodyStyles.styles'; +export { useSemanticToastContainerStyles } from './useSemanticToastContainerStyles.styles'; +export { useSemanticToastFooterStyles } from './useSemanticToastFooterStyles.styles'; +export { useSemanticToastStyles } from './useSemanticToastStyles.styles'; +export { useSemanticToastTitleStyles } from './useSemanticToastTitleStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts new file mode 100644 index 00000000000000..aa44b174405715 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts @@ -0,0 +1,65 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { toastBodyClassNames, type ToastBodyState } from '@fluentui/react-toast'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseClassName = makeResetStyles({ + gridColumnStart: 2, + gridColumnEnd: 3, + paddingTop: '6px', //not connected to tokens in Figma + fontSize: semanticTokens.textRampItemBodyFontSize, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + color: semanticTokens.foregroundContentNeutralPrimary, + wordBreak: 'break-word', +}); + +const useSubtitleBaseClassName = makeResetStyles({ + paddingTop: '4px', //not connected to tokens in Figma + gridColumnStart: 2, + gridColumnEnd: 3, + fontSize: semanticTokens.textRampMetadataFontSize, + lineHeight: semanticTokens.textRampMetadataLineHeight, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + color: semanticTokens.foregroundContentNeutralSecondary, +}); + +const useInvertedStyles = makeStyles({ + root: { + color: semanticTokens._ctrlToastBodyForegroundContentNeutralPrimary, + }, + subtitle: { + color: semanticTokens._ctrlToastBodyForegroundContentNeutralSecondary, + }, +}); + +/** + * Apply styling to the ToastBody slots based on the state + */ +export const useSemanticToastBodyStyles = (_state: unknown): ToastBodyState => { + 'use no memo'; + + const state = _state as ToastBodyState; + const rootBaseClassName = useRootBaseClassName(); + const subtitleBaseClassName = useSubtitleBaseClassName(); + const invertedStyles = useInvertedStyles(); + state.root.className = mergeClasses( + state.root.className, + toastBodyClassNames.root, + rootBaseClassName, + state.backgroundAppearance === 'inverted' && invertedStyles.root, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.subtitle) { + state.subtitle.className = mergeClasses( + state.subtitle.className, + toastBodyClassNames.subtitle, + subtitleBaseClassName, + state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, + getSlotClassNameProp_unstable(state.subtitle), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts new file mode 100644 index 00000000000000..150a74e692c52f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts @@ -0,0 +1,34 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { toastContainerClassNames, type ToastContainerState } from '@fluentui/react-toast'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseClassName = makeResetStyles({ + boxSizing: 'border-box', + marginTop: semanticTokens.gapBetweenCtrlLgDefault, + pointerEvents: 'all', + borderRadius: semanticTokens._ctrlToastContainerFlyoutRest, + ...createCustomFocusIndicatorStyle({ + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens._ctrlToastContainerCtrlFocusOuterStroke}`, + }), +}); + +/** + * Apply styling to the ToastContainer slots based on the state + */ +export const useSemanticToastContainerStyles = (_state: unknown): ToastContainerState => { + 'use no memo'; + + const state = _state as ToastContainerState; + + const rootBaseClassName = useRootBaseClassName(); + state.root.className = mergeClasses( + state.root.className, + toastContainerClassNames.root, + rootBaseClassName, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastFooterStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastFooterStyles.styles.ts new file mode 100644 index 00000000000000..e1b5179a10a0a9 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastFooterStyles.styles.ts @@ -0,0 +1,35 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { toastFooterClassNames, type ToastFooterState } from '@fluentui/react-toast'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useRootBaseClassName = makeResetStyles({ + paddingTop: semanticTokens._ctrlToastFooterPaddingContentSmall, + gridColumnStart: 2, + gridColumnEnd: 3, + display: 'flex', + alignItems: 'center', + gap: semanticTokens._ctrlToastFooterGapBetweenCtrlDefault, +}); + +/** + * Apply styling to the ToastFooter slots based on the state + */ +export const useSemanticToastFooterStyles = (_state: unknown): ToastFooterState => { + 'use no memo'; + + const state = _state as ToastFooterState; + + const rootBaseClassName = useRootBaseClassName(); + state.root.className = mergeClasses( + state.root.className, + toastFooterClassNames.root, + rootBaseClassName, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastStyles.styles.ts new file mode 100644 index 00000000000000..a85a7263ba0cad --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastStyles.styles.ts @@ -0,0 +1,46 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { toastClassNames, type ToastState } from '@fluentui/react-toast'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseClassName = makeResetStyles({ + display: 'grid', + gridTemplateColumns: 'auto 1fr auto', + padding: semanticTokens.paddingContentSmall, + borderRadius: semanticTokens._ctrlToastCornerFlyoutRest, + border: `1px solid ${semanticTokens._ctrlToastStrokeFlyout}`, + boxShadow: semanticTokens._ctrlToastShadowFlyout, + fontSize: semanticTokens.textRampItemHeaderFontSize, + lineHeight: semanticTokens._ctrlToastTextRampItemHeaderLineHeight, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + color: semanticTokens.foregroundContentNeutralPrimary, + backgroundColor: semanticTokens.backgroundFlyoutLumBlend, +}); + +const useStyles = makeStyles({ + inverted: { + color: semanticTokens._ctrlToastForegroundContentNeutralPrimary, + backgroundColor: semanticTokens._ctrlToastBackgroundFlyoutLumBlend, + }, +}); + +/** + * Apply styling to the Toast slots based on the state + */ +export const useSemanticToastStyles = (_state: unknown): ToastState => { + 'use no memo'; + + const state = _state as ToastState; + + const rootBaseClassName = useRootBaseClassName(); + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + toastClassNames.root, + rootBaseClassName, + state.backgroundAppearance === 'inverted' && styles.inverted, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastTitleStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastTitleStyles.styles.ts new file mode 100644 index 00000000000000..8951007b10f7e5 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastTitleStyles.styles.ts @@ -0,0 +1,120 @@ +import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react'; +import { toastTitleClassNames, type ToastTitleState } from '@fluentui/react-toast'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseClassName = makeResetStyles({ + display: 'flex', + gridColumnEnd: 3, + color: semanticTokens.foregroundContentNeutralPrimary, + wordBreak: 'break-word', +}); + +const useMediaBaseClassName = makeResetStyles({ + display: 'flex', + paddingTop: '2px', + gridColumnEnd: 2, + paddingRight: semanticTokens.gapInsideCtrlDefault, + fontSize: semanticTokens._ctrlToastTextRampItemHeaderFontSize, + color: semanticTokens.foregroundContentNeutralPrimary, +}); + +const useActionBaseClassName = makeResetStyles({ + display: 'flex', + alignItems: 'start', + paddingLeft: semanticTokens._ctrlToastTitleGapBetweenCtrlDefault, + gridColumnEnd: -1, + color: semanticTokens._ctrlToastTitleCtrlLinkForegroundBrandRest, +}); + +const useInvertedStyles = makeStyles({ + root: { + color: semanticTokens._ctrlToastTitleForegroundContentNeutralPrimary, + }, + + action: { + color: semanticTokens._ctrlToastTitleCtrlLinkForegroundBrandRestInverted, + }, + + media: { + color: semanticTokens._ctrlToastTitleForegroundContentNeutralPrimaryMedia, + }, +}); + +const useIntentIconStyles = makeStyles({ + success: { + color: semanticTokens.statusSuccessTintForeground, + }, + error: { + color: semanticTokens._ctrlToastTitleStatusDangerTintForeground, + }, + warning: { + color: semanticTokens._ctrlToastTitleStatusWarningTintForeground, + }, + info: { + color: semanticTokens._ctrlToastTitleStatusInformativeTintForeground, + }, +}); + +const useIntentIconStylesInverted = makeStyles({ + success: { + color: semanticTokens._ctrlToastTitleStatusSuccessTintForegroundInverted, + }, + error: { + color: semanticTokens._ctrlToastTitleStatusDangerTintForegroundInverted, + }, + warning: { + color: semanticTokens._ctrlToastTitleStatusWarningTintForegroundInverted, + }, + info: { + color: semanticTokens._ctrlToastTitleStatusInformativeTintForegroundInverted, + }, +}); + +/** + * Apply styling to the ToastTitle slots based on the state + */ +export const useSemanticToastTitleStyles = (_state: unknown): ToastTitleState => { + 'use no memo'; + + const state = _state as ToastTitleState; + + const rootBaseClassName = useRootBaseClassName(); + const actionBaseClassName = useActionBaseClassName(); + const mediaBaseClassName = useMediaBaseClassName(); + const intentIconStyles = useIntentIconStyles(); + const intentIconStylesInverted = useIntentIconStylesInverted(); + const { intent } = state; + const invertedStyles = useInvertedStyles(); + state.root.className = mergeClasses( + state.root.className, + toastTitleClassNames.root, + rootBaseClassName, + state.backgroundAppearance === 'inverted' && invertedStyles.root, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.media) { + state.media.className = mergeClasses( + state.media.className, + toastTitleClassNames.media, + mediaBaseClassName, + state.backgroundAppearance === 'inverted' && invertedStyles.media, + intent && intentIconStyles[intent], + intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent], + getSlotClassNameProp_unstable(state.media), + ); + } + + if (state.action) { + state.action.className = mergeClasses( + state.action.className, + toastTitleClassNames.action, + actionBaseClassName, + state.backgroundAppearance === 'inverted' && invertedStyles.action, + getSlotClassNameProp_unstable(state.action), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/index.ts new file mode 100644 index 00000000000000..6f7612a72d73ec --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/index.ts @@ -0,0 +1,6 @@ +export { useSemanticToolbarStyles } from './useSemanticToolbarStyles.styles'; +export { useSemanticToolbarButtonStyles } from './useSemanticToolbarButtonStyles.styles'; +export { useSemanticToolbarDividerStyles } from './useSemanticToolbarDividerStyles.styles'; +export { useSemanticToolbarGroupStyles } from './useSemanticToolbarGroupStyles.styles'; +export { useSemanticToolbarRadioButtonStyles } from './useSemanticToolbarRadioButtonStyles.styles'; +export { useSemanticToolbarToggleButtonStyles } from './useSemanticToolbarToggleButtonStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarButtonStyles.styles.ts new file mode 100644 index 00000000000000..38ab095f03ec35 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarButtonStyles.styles.ts @@ -0,0 +1,40 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { useSemanticButtonStyles } from '../Button/useSemanticButtonStyles.styles'; +import { type ToolbarButtonState } from '@fluentui/react-toolbar'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useBaseStyles = makeStyles({ + vertical: { + flexDirection: 'column', + }, + verticalIcon: { + fontSize: semanticTokens.sizeCtrlLgIcon, + margin: '0', + }, +}); + +/** + * Apply styling to the ToolbarButton slots based on the state + */ +export const useSemanticToolbarButtonStyles = (_state: unknown) => { + 'use no memo'; + + const state = _state as ToolbarButtonState; + + useSemanticButtonStyles(state); + const buttonStyles = useBaseStyles(); + + state.root.className = mergeClasses( + state.root.className, + state.vertical && buttonStyles.vertical, + getSlotClassNameProp_unstable(state.root), + ); + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + state.vertical && buttonStyles.verticalIcon, + getSlotClassNameProp_unstable(state.icon), + ); + } +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarDividerStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarDividerStyles.styles.ts new file mode 100644 index 00000000000000..0185006f8fdb67 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarDividerStyles.styles.ts @@ -0,0 +1,37 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { useSemanticDividerStyles } from '../Divider/useSemanticDividerStyles.styles'; +import { type ToolbarDividerState } from '@fluentui/react-toolbar'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useBaseStyles = makeStyles({ + // Base styles + root: { + display: 'inline-flex', + maxWidth: semanticTokens.strokeWidthDefault, + padding: `${semanticTokens.paddingContentNone} ${semanticTokens.paddingCtrlHorizontalDefault}`, + }, + vertical: { + maxWidth: 'initial', + }, +}); + +/** + * Apply styling to the ToolbarDivider slots based on the state + */ +export const useSemanticToolbarDividerStyles = (_state: unknown): ToolbarDividerState => { + 'use no memo'; + + const state = _state as ToolbarDividerState; + + useSemanticDividerStyles(state); + const { vertical } = state; + const toolbarDividerStyles = useBaseStyles(); + state.root.className = mergeClasses( + state.root.className, + toolbarDividerStyles.root, + !vertical && toolbarDividerStyles.vertical, + getSlotClassNameProp_unstable(state.root), + ); + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarGroupStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarGroupStyles.styles.ts new file mode 100644 index 00000000000000..ec50f3b0b5f6d3 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarGroupStyles.styles.ts @@ -0,0 +1,20 @@ +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { mergeClasses } from '@griffel/react'; +import { toolbarGroupClassNames, type ToolbarGroupState } from '@fluentui/react-toolbar'; + +/** + * Apply styling to the Toolbar slots based on the state + */ +export const useSemanticToolbarGroupStyles = (_state: unknown): ToolbarGroupState => { + 'use no memo'; + + const state = _state as ToolbarGroupState; + + state.root.className = mergeClasses( + state.root.className, + toolbarGroupClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts new file mode 100644 index 00000000000000..20969316ea9fb0 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts @@ -0,0 +1,45 @@ +import { tokens } from '@fluentui/react-theme'; +import { makeStyles, mergeClasses } from '@griffel/react'; +import { useSemanticToggleButtonStyles } from '../Button/useSemanticToggleButtonStyles.styles'; +import { type ToolbarRadioButtonState } from '@fluentui/react-toolbar'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useBaseStyles = makeStyles({ + /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ + selected: { + backgroundColor: tokens.colorSubtleBackgroundSelected, + color: tokens.colorNeutralForeground2Selected, + }, + + iconSelected: { + color: tokens.colorNeutralForeground2BrandSelected, + }, +}); + +/** + * Apply styling to the ToolbarRadioButton slots based on the state + */ +export const useSemanticToolbarRadioButtonStyles = (_state: unknown): ToolbarRadioButtonState => { + 'use no memo'; + + const state = _state as ToolbarRadioButtonState; + + useSemanticToggleButtonStyles(state); + const toggleButtonStyles = useBaseStyles(); + + state.root.className = mergeClasses( + state.root.className, + state.checked && toggleButtonStyles.selected, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + state.checked && toggleButtonStyles.iconSelected, + getSlotClassNameProp_unstable(state.icon), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarStyles.styles.ts new file mode 100644 index 00000000000000..0b2000ec404ae8 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarStyles.styles.ts @@ -0,0 +1,46 @@ +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { makeStyles, mergeClasses } from '@griffel/react'; +import { toolbarClassNames, type ToolbarState } from '@fluentui/react-toolbar'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + display: 'flex', + alignItems: 'center', + padding: `4px ${semanticTokens.ctrlChoicePaddingHorizontal}`, + }, + vertical: { + flexDirection: 'column', + width: 'fit-content', + }, + small: { padding: '0px 4px' }, + medium: { padding: `4px ${semanticTokens.ctrlChoicePaddingHorizontal}` }, + large: { padding: '4px 20px' }, +}); + +/** + * Apply styling to the Toolbar slots based on the state + */ +export const useSemanticToolbarStyles = (_state: unknown): ToolbarState => { + 'use no memo'; + + const state = _state as ToolbarState; + + const styles = useStyles(); + const { vertical, size } = state; + state.root.className = mergeClasses( + state.root.className, + toolbarClassNames.root, + styles.root, + vertical && styles.vertical, + size === 'small' && !vertical && styles.small, + size === 'medium' && !vertical && styles.medium, + size === 'large' && !vertical && styles.large, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts new file mode 100644 index 00000000000000..ee4d2dc2e51170 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts @@ -0,0 +1,45 @@ +import { tokens } from '@fluentui/react-theme'; +import { makeStyles, mergeClasses } from '@griffel/react'; +import { useSemanticToggleButtonStyles } from '../Button/useSemanticToggleButtonStyles.styles'; +import { type ToolbarToggleButtonState } from '@fluentui/react-toolbar'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useBaseStyles = makeStyles({ + /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ + selected: { + backgroundColor: tokens.colorSubtleBackgroundSelected, + color: tokens.colorNeutralForeground2Selected, + }, + + iconSelected: { + color: tokens.colorNeutralForeground2BrandSelected, + }, +}); + +/** + * Apply styling to the ToolbarToggleButton slots based on the state + */ +export const useSemanticToolbarToggleButtonStyles = (_state: unknown): ToolbarToggleButtonState => { + 'use no memo'; + + const state = _state as ToolbarToggleButtonState; + + useSemanticToggleButtonStyles(state); + const toggleButtonStyles = useBaseStyles(); + + state.root.className = mergeClasses( + state.root.className, + state.checked && toggleButtonStyles.selected, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + state.checked && toggleButtonStyles.iconSelected, + getSlotClassNameProp_unstable(state.icon), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/index.ts new file mode 100644 index 00000000000000..6aeb457bbf1cf2 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/index.ts @@ -0,0 +1 @@ +export { useSemanticTooltipStyles } from './useSemanticTooltipStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts new file mode 100644 index 00000000000000..b3304ad5a60fe0 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts @@ -0,0 +1,67 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import type { TooltipState } from '@fluentui/react-tooltip'; +import { tokens } from '@fluentui/react-theme'; +import { createArrowStyles } from '@fluentui/react-positioning'; + +const useStyles = makeStyles({ + root: { + display: 'none', + boxSizing: 'border-box', + maxWidth: '240px', + cursor: 'default', + overflowWrap: 'break-word', + + borderRadius: semanticTokens.ctrlTooltipCorner, + border: `1px solid ${semanticTokens.strokeLayer}`, + + paddingTop: semanticTokens._ctrlTooltipPaddingTop, + paddingBottom: semanticTokens._ctrlTooltipPaddingBottom, + paddingLeft: semanticTokens._ctrlTooltipPaddingLeft, + paddingRight: semanticTokens._ctrlTooltipPaddingRight, + + backgroundColor: semanticTokens.ctrlTooltipBackground, + color: semanticTokens.ctrlTooltipForeground, + + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampMetadataFontSize, + lineHeight: semanticTokens.textRampMetadataLineHeight, + + filter: semanticTokens.ctrlTooltipShadow, + }, + visible: { + display: 'block', + }, + + // Semantic-tokens does not include inverted tokens, use existing tokens for now. + inverted: { + backgroundColor: tokens.colorNeutralBackgroundStatic, + color: tokens.colorNeutralForegroundStaticInverted, + }, + + // 6 is defined by a constant internal to tooltip + // I don't know if any tokens for it, or if it should be a token. + arrow: createArrowStyles({ arrowHeight: 6, borderColor: semanticTokens.strokeLayer }), +}); + +export const useSemanticTooltipStyles = (_state: unknown): TooltipState => { + 'use no memo'; + + const state = _state as TooltipState; + + const styles = useStyles(); + const { appearance, visible } = state; + + state.content.className = mergeClasses( + state.content.className, + styles.root, + appearance === 'inverted' && styles.inverted, + visible && styles.visible, + getSlotClassNameProp_unstable(state.content), + ); + + state.arrowClassName = styles.arrow; + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/index.ts new file mode 100644 index 00000000000000..a8f966d543fa7f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/index.ts @@ -0,0 +1,5 @@ +export { useSemanticFlatTreeStyles } from './useSemanticFlatTreeStyles.styles'; +export { useSemanticTreeStyles } from './useSemanticTreeStyles.styles'; +export { useSemanticTreeItemLayoutStyles } from './useSemanticTreeItemLayoutStyles.styles'; +export { useSemanticTreeItemStyles } from './useSemanticTreeItemStyles.styles'; +export { useSemanticTreeItemPersonaLayoutStyles } from './useSemanticTreeItemPersonaLayoutStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticFlatTreeStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticFlatTreeStyles.styles.ts new file mode 100644 index 00000000000000..01cf3f3736457e --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticFlatTreeStyles.styles.ts @@ -0,0 +1,25 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { flatTreeClassNames, type FlatTreeState } from '@fluentui/react-tree'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useBaseStyles = makeResetStyles({ + display: 'flex', + flexDirection: 'column', + rowGap: semanticTokens.gapBetweenListItem, +}); + +export const useSemanticFlatTreeStyles = (_state: unknown): FlatTreeState => { + 'use no memo'; + + const state = _state as FlatTreeState; + + const baseStyles = useBaseStyles(); + state.root.className = mergeClasses( + state.root.className, + flatTreeClassNames.root, + baseStyles, + getSlotClassNameProp_unstable(state.root), + ); + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeItemLayoutStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeItemLayoutStyles.styles.ts new file mode 100644 index 00000000000000..a6bcac25743b8d --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeItemLayoutStyles.styles.ts @@ -0,0 +1,249 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { + type TreeItemLayoutState, + useTreeContext_unstable, + treeItemLevelToken, + useTreeItemContext_unstable, + treeItemLayoutClassNames, +} from '@fluentui/react-tree'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseStyles = makeResetStyles({ + display: 'flex', + alignItems: 'center', + minHeight: '32px', + boxSizing: 'border-box', + gridArea: 'layout', + ':active': { + color: semanticTokens.foregroundCtrlOnSubtlePressed, + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + // TODO: stop using treeItemLayoutClassNames.expandIcon for styling + [`& .${treeItemLayoutClassNames.expandIcon}`]: { + color: semanticTokens._ctrlTreeIconOnSubtlePressed, + }, + }, + ':hover': { + color: semanticTokens.foregroundCtrlOnSubtleHover, + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + // TODO: stop using treeItemLayoutClassNames.expandIcon for styling + [`& .${treeItemLayoutClassNames.expandIcon}`]: { + color: semanticTokens._ctrlTreeIconOnSubtleHover, + }, + }, +}); + +/** + * Styles for the root slot + */ +const useRootStyles = makeStyles({ + leaf: { + paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${semanticTokens.ctrlListIndentLevel1})`, + }, + branch: { + paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${semanticTokens.ctrlListIndentLevel1})`, + }, + medium: { + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + }, + small: { + minHeight: '24px', + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampSmItemBodyFontSize, + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + }, + // Appearance variations + subtle: {}, + 'subtle-alpha': { + ':hover': { + backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover, + }, + ':active': { + backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed, + }, + }, + transparent: { + backgroundColor: semanticTokens.nullColor, + color: semanticTokens.foregroundCtrlOnTransparentRest, + ':hover': { + backgroundColor: tokens.colorTransparentBackgroundHover, + color: semanticTokens._ctrlTreeOnTransparentHover, + }, + ':active': { + backgroundColor: tokens.colorTransparentBackgroundPressed, + color: semanticTokens._ctrlTreeOnTransparentPressed, + }, + }, +}); + +/** + * Styles for the action icon slot + */ +const useActionsBaseStyles = makeResetStyles({ + display: 'flex', + marginLeft: 'auto', + position: 'relative', + zIndex: 1, + gridArea: 'aside', + padding: `0 ${tokens.spacingHorizontalS}`, +}); +/** + * Styles for the action icon slot + */ +const useAsideBaseStyles = makeResetStyles({ + display: 'flex', + marginLeft: 'auto', + alignItems: 'center', + zIndex: 0, + gridArea: 'aside', + padding: `0 ${tokens.spacingHorizontalM}`, + gap: tokens.spacingHorizontalXS, +}); + +/** + * Styles for the expand icon slot + */ +const useExpandIconBaseStyles = makeResetStyles({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + minWidth: '24px', + boxSizing: 'border-box', + color: semanticTokens._ctrlTreeIconOnSubtle, + flex: `0 0 auto`, + padding: `${tokens.spacingVerticalXS} 0`, +}); + +/** + * Styles for the content slot + */ +const useMainBaseStyles = makeResetStyles({ + // padding: `0 ${tokens.spacingHorizontalXXS}`, + padding: `${semanticTokens._ctrlTreePaddingTextTop} ${semanticTokens._ctrlTreePaddingTextRight} ${semanticTokens._ctrlTreePaddingTextBottom} ${semanticTokens._ctrlTreePaddingTextLeft}`, +}); + +/** + * Styles for the before/after icon slot + */ +const useIconBaseStyles = makeResetStyles({ + display: 'flex', + alignItems: 'center', + color: semanticTokens.foregroundCtrlOnSubtleRest, + lineHeight: semanticTokens.textGlobalBody1LineHeight, + fontSize: semanticTokens.textGlobalBody1FontSize, +}); + +const useIconBeforeStyles = makeStyles({ + medium: { + paddingRight: tokens.spacingHorizontalXS, + }, + small: { + paddingRight: tokens.spacingHorizontalXXS, + }, +}); + +const useIconAfterStyles = makeStyles({ + medium: { + paddingLeft: tokens.spacingHorizontalXS, + }, + small: { + paddingLeft: tokens.spacingHorizontalXXS, + }, +}); + +/** + * Apply styling to the TreeItemLayout slots based on the state + */ +export const useSemanticTreeItemLayoutStyles = (_state: unknown): TreeItemLayoutState => { + 'use no memo'; + + const state = _state as TreeItemLayoutState; + const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state; + const rootStyles = useRootStyles(); + const rootBaseStyles = useRootBaseStyles(); + const actionsBaseStyles = useActionsBaseStyles(); + const asideBaseStyles = useAsideBaseStyles(); + + const mainBaseStyles = useMainBaseStyles(); + + const expandIconBaseStyles = useExpandIconBaseStyles(); + const iconBaseStyles = useIconBaseStyles(); + const iconBeforeStyles = useIconBeforeStyles(); + const iconAfterStyles = useIconAfterStyles(); + + const size = useTreeContext_unstable(ctx => ctx.size); + const appearance = useTreeContext_unstable(ctx => ctx.appearance); + const itemType = useTreeItemContext_unstable(ctx => ctx.itemType); + + root.className = mergeClasses( + root.className, + treeItemLayoutClassNames.root, + rootBaseStyles, + rootStyles[appearance], + rootStyles[size], + rootStyles[itemType], + getSlotClassNameProp_unstable(root), + ); + + main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className); + + if (expandIcon) { + expandIcon.className = mergeClasses( + expandIcon.className, + treeItemLayoutClassNames.expandIcon, + expandIconBaseStyles, + getSlotClassNameProp_unstable(expandIcon), + ); + } + + if (iconBefore) { + iconBefore.className = mergeClasses( + iconBefore.className, + treeItemLayoutClassNames.iconBefore, + iconBaseStyles, + iconBeforeStyles[size], + getSlotClassNameProp_unstable(iconBefore), + ); + } + + if (iconAfter) { + iconAfter.className = mergeClasses( + iconAfter.className, + treeItemLayoutClassNames.iconAfter, + iconBaseStyles, + iconAfterStyles[size], + getSlotClassNameProp_unstable(iconAfter), + ); + } + + if (actions) { + actions.className = mergeClasses( + actions.className, + treeItemLayoutClassNames.actions, + actionsBaseStyles, + getSlotClassNameProp_unstable(actions), + ); + } + if (aside) { + aside.className = mergeClasses( + aside.className, + treeItemLayoutClassNames.aside, + asideBaseStyles, + getSlotClassNameProp_unstable(aside), + ); + } + if (selector) { + selector.className = mergeClasses( + selector.className, + treeItemLayoutClassNames.selector, + getSlotClassNameProp_unstable(selector), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeItemPersonaLayoutStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeItemPersonaLayoutStyles.styles.ts new file mode 100644 index 00000000000000..0b903dbc9dc24c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeItemPersonaLayoutStyles.styles.ts @@ -0,0 +1,205 @@ +import { + treeItemLevelToken, + treeItemPersonaLayoutClassNames, + useTreeItemContext_unstable, + type TreeItemPersonaLayoutState, +} from '@fluentui/react-tree'; +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { tokens, typographyStyles } from '@fluentui/react-theme'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseStyles = makeResetStyles({ + display: 'grid', + gridTemplateRows: '1fr auto', + gridTemplateColumns: 'auto auto 1fr auto', + gridTemplateAreas: ` + "expandIcon media main aside" + "expandIcon media description aside" + `, + alignItems: 'center', + ...typographyStyles.body1, + ':active': { + color: semanticTokens.foregroundCtrlOnSubtlePressed, + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling + [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: { + color: semanticTokens._ctrlPersonaTreeIconOnSubtlePressed, + }, + }, + ':hover': { + color: semanticTokens.foregroundCtrlOnSubtleHover, + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling + [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: { + color: semanticTokens._ctrlTreeIconOnSubtleHover, + }, + }, +}); + +/** + * Styles for the root slot + */ +const useRootStyles = makeStyles({ + leaf: { + paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${semanticTokens.ctrlListIndentLevel1})`, + }, + branch: { + paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${semanticTokens.ctrlListIndentLevel1})`, + }, +}); + +/** + * Styles for the expand icon slot + */ +const useMediaBaseStyles = makeResetStyles({ + display: 'flex', + alignItems: 'center', + width: '32px', + height: '32px', + gridArea: 'media', + padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`, +}); + +const useMainBaseStyles = makeResetStyles({ + gridArea: 'main', + padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`, +}); + +const useMainStyles = makeStyles({ + withDescription: { + padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`, + }, +}); + +const useDescriptionBaseStyles = makeResetStyles({ + gridArea: 'description', + ...typographyStyles.caption1, + padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`, +}); + +/** + * Styles for the action icon slot + */ +const useActionsBaseStyles = makeResetStyles({ + display: 'flex', + marginLeft: 'auto', + position: 'relative', + zIndex: 1, + gridArea: 'aside', + padding: `0 ${tokens.spacingHorizontalS}`, +}); +/** + * Styles for the action icon slot + */ +const useAsideBaseStyles = makeResetStyles({ + display: 'flex', + marginLeft: 'auto', + alignItems: 'center', + zIndex: 0, + gridArea: 'aside', + padding: `0 ${tokens.spacingHorizontalM}`, + gap: tokens.spacingHorizontalXS, +}); + +/** + * Styles for the expand icon slot + */ +const useExpandIconBaseStyles = makeResetStyles({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + minWidth: '24px', + boxSizing: 'border-box', + color: semanticTokens._ctrlTreeIconOnSubtle, + gridArea: 'expandIcon', + flex: `0 0 auto`, + padding: `${tokens.spacingVerticalXS} 0`, +}); + +/** + * Apply styling to the TreeItemPersonaLayout slots based on the state + */ +export const useSemanticTreeItemPersonaLayoutStyles = (_state: unknown): TreeItemPersonaLayoutState => { + 'use no memo'; + + const state = _state as TreeItemPersonaLayoutState; + const rootBaseStyles = useRootBaseStyles(); + const rootStyles = useRootStyles(); + const mediaBaseStyles = useMediaBaseStyles(); + const descriptionBaseStyles = useDescriptionBaseStyles(); + const actionsBaseStyles = useActionsBaseStyles(); + const asideBaseStyles = useAsideBaseStyles(); + const expandIconBaseStyles = useExpandIconBaseStyles(); + const mainBaseStyles = useMainBaseStyles(); + const mainStyles = useMainStyles(); + + const itemType = useTreeItemContext_unstable(ctx => ctx.itemType); + + state.root.className = mergeClasses( + state.root.className, + treeItemPersonaLayoutClassNames.root, + rootBaseStyles, + rootStyles[itemType], + getSlotClassNameProp_unstable(state.root), + ); + + state.media.className = mergeClasses( + state.media.className, + treeItemPersonaLayoutClassNames.media, + mediaBaseStyles, + getSlotClassNameProp_unstable(state.media), + ); + + if (state.main) { + state.main.className = mergeClasses( + state.main.className, + treeItemPersonaLayoutClassNames.main, + mainBaseStyles, + state.description && mainStyles.withDescription, + getSlotClassNameProp_unstable(state.main), + ); + } + if (state.description) { + state.description.className = mergeClasses( + state.description.className, + treeItemPersonaLayoutClassNames.description, + descriptionBaseStyles, + getSlotClassNameProp_unstable(state.description), + ); + } + if (state.actions) { + state.actions.className = mergeClasses( + state.actions.className, + treeItemPersonaLayoutClassNames.actions, + actionsBaseStyles, + getSlotClassNameProp_unstable(state.actions), + ); + } + if (state.aside) { + state.aside.className = mergeClasses( + state.aside.className, + treeItemPersonaLayoutClassNames.aside, + asideBaseStyles, + getSlotClassNameProp_unstable(state.aside), + ); + } + if (state.expandIcon) { + state.expandIcon.className = mergeClasses( + state.expandIcon.className, + treeItemPersonaLayoutClassNames.expandIcon, + expandIconBaseStyles, + getSlotClassNameProp_unstable(state.expandIcon), + ); + } + + if (state.selector) { + state.selector.className = mergeClasses( + state.selector.className, + treeItemPersonaLayoutClassNames.selector, + getSlotClassNameProp_unstable(state.selector), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeItemStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeItemStyles.styles.ts new file mode 100644 index 00000000000000..4c0bb876da2916 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeItemStyles.styles.ts @@ -0,0 +1,83 @@ +import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { + TreeItemCSSProperties, + TreeItemState, + treeItemLevelToken, + treeItemLayoutClassNames, + treeItemPersonaLayoutClassNames, + treeItemClassNames, +} from '@fluentui/react-tree'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useBaseStyles = makeResetStyles({ + position: 'relative', + cursor: 'pointer', + display: 'flex', + flexDirection: 'column', + boxSizing: 'border-box', + backgroundColor: semanticTokens.backgroundCtrlSubtleRest, + color: semanticTokens.foregroundCtrlOnSubtleRest, + paddingRight: semanticTokens.paddingContentNone, + // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser + ':focus': { + outlineStyle: 'none', + }, + ':focus-visible': { + outlineStyle: 'none', + }, + // This adds the focus outline for the TreeItemLayout element + ...createCustomFocusIndicatorStyle( + { + outlineRadius: semanticTokens.ctrlListCornerRest, + borderRadius: semanticTokens.ctrlListCornerRest, + boxShadow: `0 0 0 ${semanticTokens._ctrlAccordionFocusInnerStrokeWidth} ${semanticTokens.ctrlFocusInnerStroke}`, + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens._ctrlAccordionFocusOuterStroke}`, + outlineOffset: semanticTokens._ctrlAccordionFocusInnerStrokeWidth, + }, + { + customizeSelector: selector => + `${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`, + }, + ), +}); + +type StaticLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; +type StaticLevelProperty = `level${StaticLevel}`; + +const useStyles = makeStyles({ + ...(Object.fromEntries( + Array.from({ length: 10 }, (_, index) => [ + `level${(index + 1) as StaticLevel}`, + { [treeItemLevelToken]: index + 1 }, + ]), + ) as Record), +}); + +/** + * Apply styling to the TreeItem slots based on the state + */ +export const useSemanticTreeItemStyles = (_state: unknown): TreeItemState => { + 'use no memo'; + + const state = _state as TreeItemState; + const baseStyles = useBaseStyles(); + const styles = useStyles(); + + const { level } = state; + + state.root.className = mergeClasses( + state.root.className, + treeItemClassNames.root, + baseStyles, + isStaticallyDefinedLevel(level) && styles[`level${level}` as StaticLevelProperty], + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; + +function isStaticallyDefinedLevel(level: number): level is StaticLevel { + return level >= 1 && level <= 10; +} diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeStyles.styles.ts new file mode 100644 index 00000000000000..9e5d86b28a7dd7 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeStyles.styles.ts @@ -0,0 +1,34 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { treeClassNames, type TreeState } from '@fluentui/react-tree'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useBaseStyles = makeResetStyles({ + display: 'flex', + flexDirection: 'column', + rowGap: semanticTokens._ctrlTreeGapInsideDefault, +}); + +const useStyles = makeStyles({ + subtree: { + paddingTop: semanticTokens._ctrlTreeGapInsideDefault, + }, +}); + +export const useSemanticTreeStyles = (_state: unknown): TreeState => { + 'use no memo'; + + const state = _state as TreeState; + const baseStyles = useBaseStyles(); + const styles = useStyles(); + const isSubTree = state.level > 1; + + state.root.className = mergeClasses( + state.root.className, + treeClassNames.root, + baseStyles, + isSubTree && styles.subtree, + getSlotClassNameProp_unstable(state.root), + ); + 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..cf974901cdde41 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -0,0 +1,269 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider'; +import { + useSemanticButtonStyles, + useSemanticCompoundButtonStyles, + useSemanticMenuButtonStyles, + useSemanticSplitButtonStyles, + useSemanticToggleButtonStyles, +} from './Button'; +import { useSemanticAccordionHeaderStyles } from './Accordion'; +import { useSemanticAvatarStyles } from './Avatar'; +import { useSemanticCheckboxStyles } from './Checkbox'; +import { useSemanticDividerStyles } from './Divider'; +import { + useSemanticInlineDrawerStyles, + useSemanticDrawerBodyStyles, + useSemanticDrawerFooterStyles, + useSemanticDrawerHeaderStyles, + useSemanticOverlayDrawerSurfaceStyles, +} from './Drawer'; +import { useSemanticFieldStyles } from './Field'; +import { useSemanticLabelStyles } from './Label'; +import { useSemanticLinkStyles } from './Link'; +import { useSemanticProgressBarStyles } from './ProgressBar/useSemanticProgressBarStyles.styles'; +import { useSemanticRatingDisplayStyles, useSemanticRatingItemStyles } from './Rating'; +import { useSemanticSpinnerStyles } from './Spinner'; +import { useSemanticSwitchStyles } from './Switch'; +import { useSemanticTextStyles } from './Text'; +import { useSemanticTextareaStyles } from './Textarea'; +import { + useSemanticFlatTreeStyles, + useSemanticTreeItemLayoutStyles, + useSemanticTreeItemStyles, + useSemanticTreeStyles, + useSemanticTreeItemPersonaLayoutStyles, +} from './Tree'; +import { useSemanticImageStyles } from './Image'; +import { useSemanticListItemStyles } from './List'; +import { + useSemanticDialogActionsStyles, + useSemanticDialogBodyStyles, + useSemanticDialogContentStyles, + useSemanticDialogSurfaceStyles, + useSemanticDialogTitleStyles, +} from './Dialog'; +import { + useSemanticMessageBarStyles, + useSemanticMessageBarBodyStyles, + useSemanticMessageBarActionsStyles, + useSemanticMessageBarTitleStyles, +} from './MessageBar'; +import { useSemanticTabStyles } from './Tabs/useSemanticTabsStyles.styles'; +import { useSemanticTabListStyles } from './Tabs'; +import { useSemanticSliderStyles } from './Slider'; +import { + useSemanticMenuDividerStyles, + useSemanticMenuItemStyles, + useSemanticMenuItemSwitchStyles, + useSemanticMenuPopoverStyles, + useSemanticMenuSplitGroupStyles, +} from './Menu'; +import { useSemanticMenuGroupHeaderStyles } from './Menu'; +import { useSemanticRadioStyles } from './Radio'; +import { useSemanticPersonaStyles } from './Persona'; +import { useSemanticBadgeStyles, useSemanticPresenceBadgeStyles } from './Badge'; +import { + useSemanticBreadcrumbStyles, + useSemanticBreadcrumbButtonStyles, + useSemanticBreadcrumbDividerStyles, + useSemanticBreadcrumbItemStyles, +} from './Breadcrumb'; +import { useSemanticSpinButtonStyles } from './SpinButton'; +import { useSemanticPopoverSurfaceStyles } from './Popover'; +import { useSemanticInputStyles } from './Input/useSemanticInputStyles.styles'; +import { + useSemanticToolbarStyles, + useSemanticToolbarButtonStyles, + useSemanticToolbarDividerStyles, + useSemanticToolbarGroupStyles, + useSemanticToolbarRadioButtonStyles, + useSemanticToolbarToggleButtonStyles, +} from './Toolbar'; +import { useSemanticTooltipStyles } from './Tooltip'; +import { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './InfoLabel'; +import { + useSemanticDataGridStyles, + useSemanticDataGridBodyStyles, + useSemanticDataGridCellStyles, + useSemanticDataGridHeaderStyles, + useSemanticDataGridHeaderCellStyles, + useSemanticDataGridRowStyles, + useSemanticDataGridSelectionCellStyles, + useSemanticTableStyles, + useSemanticTableBodyStyles, + useSemanticTableCellStyles, + useSemanticTableCellActionsStyles, + useSemanticTableCellLayoutStyles, + useSemanticTableHeaderStyles, + useSemanticTableHeaderCellStyles, + useSemanticTableResizeHandleStyles, + useSemanticTableRowStyles, + useSemanticTableSelectionCellStyles, +} from './Table'; +import { + useSemanticToastContainerStyles, + useSemanticToastBodyStyles, + useSemanticToastFooterStyles, + useSemanticToastStyles, + useSemanticToastTitleStyles, +} from './Toast'; +import { useSemanticSearchBoxStyles } from './Search'; +import { + useSemanticTeachingPopoverBodyStyles, + useSemanticTeachingPopoverCarouselCardStyles, + useSemanticTeachingPopoverCarouselFooterButtonStyles, + useSemanticTeachingPopoverCarouselFooterStyles, + useSemanticTeachingPopoverCarouselNavButtonStyles, + useSemanticTeachingPopoverCarouselNavStyles, + useSemanticTeachingPopoverCarouselPageCountStyles, + useSemanticTeachingPopoverCarouselStyles, + useSemanticTeachingPopoverFooterStyles, + useSemanticTeachingPopoverHeaderStyles, + useSemanticTeachingPopoverSurfaceStyles, + useSemanticTeachingPopoverTitleStyles, +} from './TeachingPopover'; + +export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { + // Accordion styles + useAccordionHeaderStyles_unstable: useSemanticAccordionHeaderStyles, + // Avatar styles + useAvatarStyles_unstable: useSemanticAvatarStyles, + // Badge styles + useBadgeStyles_unstable: useSemanticBadgeStyles, + usePresenceBadgeStyles_unstable: useSemanticPresenceBadgeStyles, + // Button styles + useButtonStyles_unstable: useSemanticButtonStyles, + useToggleButtonStyles_unstable: useSemanticToggleButtonStyles, + useSplitButtonStyles_unstable: useSemanticSplitButtonStyles, + useMenuButtonStyles_unstable: useSemanticMenuButtonStyles, + useCompoundButtonStyles_unstable: useSemanticCompoundButtonStyles, + // Divider styles + useDividerStyles_unstable: useSemanticDividerStyles, + // Drawer styles + useInlineDrawerStyles_unstable: useSemanticInlineDrawerStyles, + useDrawerBodyStyles_unstable: useSemanticDrawerBodyStyles, + useDrawerFooterStyles_unstable: useSemanticDrawerFooterStyles, + useDrawerHeaderStyles_unstable: useSemanticDrawerHeaderStyles, + useOverlayDrawerSurfaceStyles_unstable: useSemanticOverlayDrawerSurfaceStyles, + //Field styles + useFieldStyles_unstable: useSemanticFieldStyles, + // Label styles + useLabelStyles_unstable: useSemanticLabelStyles, + // Link styles + useLinkStyles_unstable: useSemanticLinkStyles, + // ProgressBar styles + useProgressBarStyles_unstable: useSemanticProgressBarStyles, + // Rating styles + useRatingDisplayStyles_unstable: useSemanticRatingDisplayStyles, + useRatingItemStyles_unstable: useSemanticRatingItemStyles, + // Spinner styles + useSpinnerStyles_unstable: useSemanticSpinnerStyles, + // Switch styles + useSwitchStyles_unstable: useSemanticSwitchStyles, + // Text styles + useTextStyles_unstable: useSemanticTextStyles, + // Textarea styles + useTextareaStyles_unstable: useSemanticTextareaStyles, + // Tree styles + useFlatTreeStyles_unstable: useSemanticFlatTreeStyles, + useTreeStyles_unstable: useSemanticTreeStyles, + useTreeItemLayoutStyles_unstable: useSemanticTreeItemLayoutStyles, + useTreeItemPersonaLayoutStyles_unstable: useSemanticTreeItemPersonaLayoutStyles, + useTreeItemStyles_unstable: useSemanticTreeItemStyles, + // Image styles + useImageStyles_unstable: useSemanticImageStyles, + // List styles + useListItemStyles_unstable: useSemanticListItemStyles, + // Dialog + useDialogActionsStyles_unstable: useSemanticDialogActionsStyles, + useDialogBodyStyles_unstable: useSemanticDialogBodyStyles, + useDialogContentStyles_unstable: useSemanticDialogContentStyles, + useDialogSurfaceStyles_unstable: useSemanticDialogSurfaceStyles, + useDialogTitleStyles_unstable: useSemanticDialogTitleStyles, + // MessageBar styles + useMessageBarStyles_unstable: useSemanticMessageBarStyles, + useMessageBarBodyStyles_unstable: useSemanticMessageBarBodyStyles, + useMessageBarActionsStyles_unstable: useSemanticMessageBarActionsStyles, + useMessageBarTitleStyles_unstable: useSemanticMessageBarTitleStyles, + // Slider styles + useSliderStyles_unstable: useSemanticSliderStyles, + // Menu styles + useMenuDividerStyles_unstable: useSemanticMenuDividerStyles, + useMenuGroupHeaderStyles_unstable: useSemanticMenuGroupHeaderStyles, + useMenuItemStyles_unstable: useSemanticMenuItemStyles, + useMenuItemSwitchStyles_unstable: useSemanticMenuItemSwitchStyles, + useMenuPopoverStyles_unstable: useSemanticMenuPopoverStyles, + useMenuSplitGroupStyles_unstable: useSemanticMenuSplitGroupStyles, + // Radio styles + useRadioStyles_unstable: useSemanticRadioStyles, + // Persona styles + usePersonaStyles_unstable: useSemanticPersonaStyles, + // Popover styles + usePopoverSurfaceStyles_unstable: useSemanticPopoverSurfaceStyles, + // Search styles + useSearchBoxStyles_unstable: useSemanticSearchBoxStyles, + // Checkbox styles + useCheckboxStyles_unstable: useSemanticCheckboxStyles, + // Breadcrumb styles + useBreadcrumbStyles_unstable: useSemanticBreadcrumbStyles, + useBreadcrumbButtonStyles_unstable: useSemanticBreadcrumbButtonStyles, + useBreadcrumbDividerStyles_unstable: useSemanticBreadcrumbDividerStyles, + useBreadcrumbItemStyles_unstable: useSemanticBreadcrumbItemStyles, + // SpinButton styles + useSpinButtonStyles_unstable: useSemanticSpinButtonStyles, + // Input styles + useInputStyles_unstable: useSemanticInputStyles, + // Toolbar styles + useToolbarStyles_unstable: useSemanticToolbarStyles, + useToolbarButtonStyles_unstable: useSemanticToolbarButtonStyles, + useToolbarDividerStyles_unstable: useSemanticToolbarDividerStyles, + useToolbarGroupStyles_unstable: useSemanticToolbarGroupStyles, + useToolbarRadioButtonStyles_unstable: useSemanticToolbarRadioButtonStyles, + useToolbarToggleButtonStyles_unstable: useSemanticToolbarToggleButtonStyles, + // Tabs styles + useTabStyles_unstable: useSemanticTabStyles, + useTabListStyles_unstable: useSemanticTabListStyles, + //Tooltip styles + useTooltipStyles_unstable: useSemanticTooltipStyles, + // InfoLabel styles + useInfoButtonStyles_unstable: useSemanticInfoButtonStyles, + useInfoLabelStyles_unstable: useSemanticInfoLabelStyles, + // Table styles + useDataGridStyles_unstable: useSemanticDataGridStyles, + useDataGridBodyStyles_unstable: useSemanticDataGridBodyStyles, + useDataGridCellStyles_unstable: useSemanticDataGridCellStyles, + useDataGridHeaderStyles_unstable: useSemanticDataGridHeaderStyles, + useDataGridHeaderCellStyles_unstable: useSemanticDataGridHeaderCellStyles, + useDataGridRowStyles_unstable: useSemanticDataGridRowStyles, + useDataGridSelectionCellStyles_unstable: useSemanticDataGridSelectionCellStyles, + useTableStyles_unstable: useSemanticTableStyles, + useTableBodyStyles_unstable: useSemanticTableBodyStyles, + useTableCellStyles_unstable: useSemanticTableCellStyles, + useTableCellActionsStyles_unstable: useSemanticTableCellActionsStyles, + useTableCellLayoutStyles_unstable: useSemanticTableCellLayoutStyles, + useTableHeaderStyles_unstable: useSemanticTableHeaderStyles, + useTableHeaderCellStyles_unstable: useSemanticTableHeaderCellStyles, + useTableResizeHandleStyles_unstable: useSemanticTableResizeHandleStyles, + useTableRowStyles_unstable: useSemanticTableRowStyles, + useTableSelectionCellStyles_unstable: useSemanticTableSelectionCellStyles, + //Toast styles + useToastBodyStyles_unstable: useSemanticToastBodyStyles, + useToastContainerStyles_unstable: useSemanticToastContainerStyles, + useToastFooterStyles_unstable: useSemanticToastFooterStyles, + useToastStyles_unstable: useSemanticToastStyles, + useToastTitleStyles_unstable: useSemanticToastTitleStyles, + // TeachingPopover styles + useTeachingPopoverBodyStyles_unstable: useSemanticTeachingPopoverBodyStyles, + useTeachingPopoverCarouselCardStyles_unstable: useSemanticTeachingPopoverCarouselCardStyles, + useTeachingPopoverCarouselFooterButtonStyles_unstable: useSemanticTeachingPopoverCarouselFooterButtonStyles, + useTeachingPopoverCarouselFooterStyles_unstable: useSemanticTeachingPopoverCarouselFooterStyles, + useTeachingPopoverCarouselNavButtonStyles_unstable: useSemanticTeachingPopoverCarouselNavButtonStyles, + useTeachingPopoverCarouselNavStyles_unstable: useSemanticTeachingPopoverCarouselNavStyles, + useTeachingPopoverCarouselPageCountStyles_unstable: useSemanticTeachingPopoverCarouselPageCountStyles, + useTeachingPopoverCarouselStyles_unstable: useSemanticTeachingPopoverCarouselStyles, + useTeachingPopoverFooterStyles_unstable: useSemanticTeachingPopoverFooterStyles, + useTeachingPopoverHeaderStyles_unstable: useSemanticTeachingPopoverHeaderStyles, + useTeachingPopoverSurfaceStyles_unstable: useSemanticTeachingPopoverSurfaceStyles, + useTeachingPopoverTitleStyles_unstable: useSemanticTeachingPopoverTitleStyles, +}; 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 new file mode 100644 index 00000000000000..d6f8d1d2786c1b --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -0,0 +1,127 @@ +export { SEMANTIC_STYLE_HOOKS } from './component-styles//semanticStyleHooks'; +export { + useSemanticButtonStyles, + useSemanticCompoundButtonStyles, + useSemanticMenuButtonStyles, + useSemanticSplitButtonStyles, + useSemanticToggleButtonStyles, +} from './component-styles//Button'; +export { useSemanticBadgeStyles, useSemanticPresenceBadgeStyles } from './component-styles/Badge'; +export { useSemanticAccordionHeaderStyles } from './component-styles/Accordion'; +export { useSemanticAvatarStyles } from './component-styles/Avatar'; +export { useSemanticDividerStyles } from './component-styles/Divider'; +export { + useSemanticInlineDrawerStyles, + useSemanticDrawerBodyStyles, + useSemanticDrawerFooterStyles, + useSemanticDrawerHeaderStyles, + useSemanticOverlayDrawerSurfaceStyles, +} from './component-styles/Drawer'; +export { useSemanticFieldStyles } from './component-styles/Field'; +export { useSemanticLabelStyles } from './component-styles/Label'; +export { useSemanticLinkStyles } from './component-styles/Link'; +export { useSemanticProgressBarStyles } from './component-styles/ProgressBar/useSemanticProgressBarStyles.styles'; +export { useSemanticRatingDisplayStyles, useSemanticRatingItemStyles } from './component-styles/Rating'; +export { useSemanticSpinnerStyles } from './component-styles/Spinner'; +export { useSemanticSwitchStyles } from './component-styles/Switch'; +export { useSemanticTextStyles } from './component-styles/Text'; +export { useSemanticTextareaStyles } from './component-styles/Textarea'; +export { + useSemanticFlatTreeStyles, + useSemanticTreeItemLayoutStyles, + useSemanticTreeItemStyles, + useSemanticTreeStyles, +} from './component-styles/Tree'; +export { useSemanticImageStyles } from './component-styles/Image'; +export { useSemanticListItemStyles } from './component-styles/List'; +export { + useSemanticDialogActionsStyles, + useSemanticDialogBodyStyles, + useSemanticDialogContentStyles, + useSemanticDialogSurfaceStyles, + useSemanticDialogTitleStyles, +} from './component-styles/Dialog'; +export { + useSemanticMessageBarStyles, + useSemanticMessageBarBodyStyles, + useSemanticMessageBarActionsStyles, + useSemanticMessageBarTitleStyles, +} from './component-styles/MessageBar'; +export { + useSemanticTabStyles, + useSemanticTabListStyles, + // Unstable hooks for internal tab use + useSemanticTabButtonStyles_unstable, + useSemanticTabContentStyles_unstable, + useSemanticTabIndicatorStyles_unstable, +} from './component-styles/Tabs'; +export { useSemanticSliderStyles } from './component-styles/Slider'; +export { + useSemanticMenuDividerStyles, + useSemanticMenuGroupHeaderStyles, + useSemanticMenuItemStyles, + useSemanticMenuItemSwitchStyles, + useSemanticMenuPopoverStyles, + useSemanticMenuSplitGroupStyles, +} from './component-styles/Menu'; +export { useSemanticRadioStyles } from './component-styles/Radio'; +export { useSemanticPersonaStyles } from './component-styles/Persona'; +export { useSemanticCheckboxStyles } from './component-styles/Checkbox'; +export { + useSemanticBreadcrumbStyles, + useSemanticBreadcrumbButtonStyles, + useSemanticBreadcrumbDividerStyles, + useSemanticBreadcrumbItemStyles, +} from './component-styles/Breadcrumb'; +export { useSemanticSpinButtonStyles } from './component-styles/SpinButton'; +export { useSemanticInputStyles } from './component-styles/Input'; +export { + useSemanticToolbarStyles, + useSemanticToolbarButtonStyles, + useSemanticToolbarDividerStyles, + useSemanticToolbarGroupStyles, + useSemanticToolbarRadioButtonStyles, + useSemanticToolbarToggleButtonStyles, +} from './component-styles/Toolbar'; +export { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './component-styles/InfoLabel'; +export { + useSemanticDataGridStyles, + useSemanticDataGridBodyStyles, + useSemanticDataGridCellStyles, + useSemanticDataGridHeaderStyles, + useSemanticDataGridHeaderCellStyles, + useSemanticDataGridRowStyles, + useSemanticDataGridSelectionCellStyles, + useSemanticTableStyles, + useSemanticTableBodyStyles, + useSemanticTableCellStyles, + useSemanticTableCellActionsStyles, + useSemanticTableCellLayoutStyles, + useSemanticTableHeaderStyles, + useSemanticTableHeaderCellStyles, + useSemanticTableResizeHandleStyles, + useSemanticTableRowStyles, + useSemanticTableSelectionCellStyles, +} from './component-styles/Table'; +export { + useSemanticToastBodyStyles, + useSemanticToastContainerStyles, + useSemanticToastFooterStyles, + useSemanticToastStyles, + useSemanticToastTitleStyles, +} from './component-styles/Toast'; +export { useSemanticSearchBoxStyles } from './component-styles/Search'; +export { + useSemanticTeachingPopoverBodyStyles, + useSemanticTeachingPopoverCarouselCardStyles, + useSemanticTeachingPopoverCarouselFooterButtonStyles, + useSemanticTeachingPopoverCarouselFooterStyles, + useSemanticTeachingPopoverCarouselNavButtonStyles, + useSemanticTeachingPopoverCarouselNavStyles, + useSemanticTeachingPopoverCarouselPageCountStyles, + useSemanticTeachingPopoverCarouselStyles, + useSemanticTeachingPopoverFooterStyles, + useSemanticTeachingPopoverHeaderStyles, + useSemanticTeachingPopoverSurfaceStyles, + useSemanticTeachingPopoverTitleStyles, +} from './component-styles/TeachingPopover'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/testing/isConformant.ts b/packages/react-components/semantic-style-hooks-preview/library/src/testing/isConformant.ts new file mode 100644 index 00000000000000..a3d988f29a1728 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/testing/isConformant.ts @@ -0,0 +1,15 @@ +import { isConformant as baseIsConformant } from '@fluentui/react-conformance'; +import type { IsConformantOptions, TestObject } from '@fluentui/react-conformance'; +import griffelTests from '@fluentui/react-conformance-griffel'; + +export function isConformant( + testInfo: Omit, 'componentPath'> & { componentPath?: string }, +) { + const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, + componentPath: require.main?.filename.replace('.test', ''), + extraTests: griffelTests as TestObject, + }; + + baseIsConformant(defaultOptions, testInfo); +} diff --git a/packages/react-components/semantic-style-hooks-preview/library/tsconfig.json b/packages/react-components/semantic-style-hooks-preview/library/tsconfig.json new file mode 100644 index 00000000000000..32bdbdf1ac26f0 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/tsconfig.json @@ -0,0 +1,22 @@ +{ + "extends": "../../../../tsconfig.base.json", + "compilerOptions": { + "target": "ES2019", + "noEmit": true, + "isolatedModules": true, + "importHelpers": true, + "jsx": "react", + "noUnusedLocals": true, + "preserveConstEnums": true + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/packages/react-components/semantic-style-hooks-preview/library/tsconfig.lib.json b/packages/react-components/semantic-style-hooks-preview/library/tsconfig.lib.json new file mode 100644 index 00000000000000..53066fdd11fff0 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/tsconfig.lib.json @@ -0,0 +1,22 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "noEmit": false, + "lib": ["ES2019", "dom"], + "declaration": true, + "declarationDir": "../../../../dist/out-tsc/types", + "outDir": "../../../../dist/out-tsc", + "inlineSources": true, + "types": ["static-assets", "environment"] + }, + "exclude": [ + "./src/testing/**", + "**/*.spec.ts", + "**/*.spec.tsx", + "**/*.test.ts", + "**/*.test.tsx", + "**/*.stories.ts", + "**/*.stories.tsx" + ], + "include": ["./src/**/*.ts", "./src/**/*.tsx"] +} diff --git a/packages/react-components/semantic-style-hooks-preview/library/tsconfig.spec.json b/packages/react-components/semantic-style-hooks-preview/library/tsconfig.spec.json new file mode 100644 index 00000000000000..911456fe4b4d91 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/tsconfig.spec.json @@ -0,0 +1,17 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "CommonJS", + "outDir": "dist", + "types": ["jest", "node"] + }, + "include": [ + "**/*.spec.ts", + "**/*.spec.tsx", + "**/*.test.ts", + "**/*.test.tsx", + "**/*.d.ts", + "./src/testing/**/*.ts", + "./src/testing/**/*.tsx" + ] +} diff --git a/packages/react-components/semantic-style-hooks-preview/stories/.eslintrc.json b/packages/react-components/semantic-style-hooks-preview/stories/.eslintrc.json new file mode 100644 index 00000000000000..a41120835dcc92 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/stories/.eslintrc.json @@ -0,0 +1,12 @@ +{ + "extends": ["plugin:@fluentui/eslint-plugin/react"], + "root": true, + "rules": { + "import/no-extraneous-dependencies": [ + "error", + { + "packageDir": [".", "../../../../"] + } + ] + } +} diff --git a/packages/react-components/semantic-style-hooks-preview/stories/.storybook/main.js b/packages/react-components/semantic-style-hooks-preview/stories/.storybook/main.js new file mode 100644 index 00000000000000..b380cd896aea19 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/stories/.storybook/main.js @@ -0,0 +1,14 @@ +const rootMain = require('../../../../../.storybook/main'); + +module.exports = /** @type {Omit} */ ({ + ...rootMain, + stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + addons: [...rootMain.addons], + webpackFinal: (config, options) => { + const localConfig = { ...rootMain.webpackFinal(config, options) }; + + // add your own webpack tweaks if needed + + return localConfig; + }, +}); diff --git a/packages/react-components/semantic-style-hooks-preview/stories/.storybook/preview.js b/packages/react-components/semantic-style-hooks-preview/stories/.storybook/preview.js new file mode 100644 index 00000000000000..94455f782364e4 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/stories/.storybook/preview.js @@ -0,0 +1,7 @@ +import * as rootPreview from '../../../../../.storybook/preview'; + +/** @type {typeof rootPreview.decorators} */ +export const decorators = [...rootPreview.decorators]; + +/** @type {typeof rootPreview.parameters} */ +export const parameters = { ...rootPreview.parameters }; diff --git a/packages/react-components/semantic-style-hooks-preview/stories/.storybook/tsconfig.json b/packages/react-components/semantic-style-hooks-preview/stories/.storybook/tsconfig.json new file mode 100644 index 00000000000000..4cdd1ce9d006f1 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/stories/.storybook/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "", + "allowJs": true, + "checkJs": true, + "types": ["static-assets", "environment"] + }, + "include": ["*.js"] +} diff --git a/packages/react-components/semantic-style-hooks-preview/stories/README.md b/packages/react-components/semantic-style-hooks-preview/stories/README.md new file mode 100644 index 00000000000000..cff1b737698c63 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/stories/README.md @@ -0,0 +1,17 @@ +# @fluentui/semantic-style-hooks-preview-stories + +Storybook stories for packages/react-components/semantic-style-hooks-preview + +## Usage + +To include within storybook specify stories globs: + +\`\`\`js +module.exports = { +stories: ['../packages/react-components/semantic-style-hooks-preview/stories/src/**/*.stories.mdx', '../packages/react-components/semantic-style-hooks-preview/stories/src/**/index.stories.@(ts|tsx)'], +} +\`\`\` + +## API + +no public API available diff --git a/packages/react-components/semantic-style-hooks-preview/stories/package.json b/packages/react-components/semantic-style-hooks-preview/stories/package.json new file mode 100644 index 00000000000000..06b14912c5ad9f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/stories/package.json @@ -0,0 +1,11 @@ +{ + "name": "@fluentui/semantic-style-hooks-preview-stories", + "version": "0.0.0", + "private": true, + "devDependencies": { + "@fluentui/react-storybook-addon": "*", + "@fluentui/react-storybook-addon-export-to-sandbox": "*", + "@fluentui/scripts-storybook": "*", + "@fluentui/eslint-plugin": "*" + } +} diff --git a/packages/react-components/semantic-style-hooks-preview/stories/project.json b/packages/react-components/semantic-style-hooks-preview/stories/project.json new file mode 100644 index 00000000000000..059387ca1b8184 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/stories/project.json @@ -0,0 +1,8 @@ +{ + "name": "semantic-style-hooks-preview-stories", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "sourceRoot": "packages/react-components/semantic-style-hooks-preview/stories/src", + "tags": ["vNext", "platform:web", "type:stories"], + "implicitDependencies": [] +} diff --git a/packages/react-components/semantic-style-hooks-preview/stories/src/.gitkeep b/packages/react-components/semantic-style-hooks-preview/stories/src/.gitkeep new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/react-components/semantic-style-hooks-preview/stories/src/index.ts b/packages/react-components/semantic-style-hooks-preview/stories/src/index.ts new file mode 100644 index 00000000000000..cb0ff5c3b541f6 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/stories/src/index.ts @@ -0,0 +1 @@ +export {}; diff --git a/packages/react-components/semantic-style-hooks-preview/stories/tsconfig.json b/packages/react-components/semantic-style-hooks-preview/stories/tsconfig.json new file mode 100644 index 00000000000000..efc50169d1df18 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/stories/tsconfig.json @@ -0,0 +1,22 @@ +{ + "extends": "../../../../tsconfig.base.json", + "compilerOptions": { + "target": "ES2019", + "noEmit": true, + "isolatedModules": true, + "importHelpers": true, + "jsx": "react", + "noUnusedLocals": true, + "preserveConstEnums": true + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./.storybook/tsconfig.json" + } + ] +} diff --git a/packages/react-components/semantic-style-hooks-preview/stories/tsconfig.lib.json b/packages/react-components/semantic-style-hooks-preview/stories/tsconfig.lib.json new file mode 100644 index 00000000000000..9486b224643d9f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/stories/tsconfig.lib.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "lib": ["ES2019", "dom"], + "outDir": "../../../../dist/out-tsc", + "inlineSources": true, + "types": ["static-assets", "environment"] + }, + "include": ["./src/**/*.ts", "./src/**/*.tsx"] +} diff --git a/packages/semantic-tokens/.babelrc.json b/packages/semantic-tokens/.babelrc.json new file mode 100644 index 00000000000000..38bf1f7a945cf8 --- /dev/null +++ b/packages/semantic-tokens/.babelrc.json @@ -0,0 +1,3 @@ +{ + "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] +} diff --git a/packages/semantic-tokens/.eslintrc.json b/packages/semantic-tokens/.eslintrc.json new file mode 100644 index 00000000000000..f91d91e764c7c5 --- /dev/null +++ b/packages/semantic-tokens/.eslintrc.json @@ -0,0 +1,20 @@ +{ + "extends": ["plugin:@fluentui/eslint-plugin/react"], + "root": true, + "rules": { + "no-restricted-imports": [ + "error", + { + "patterns": ["react", "react-dom"] + } + ] + }, + "overrides": [ + { + "files": ["./src/fluentOverrides.ts", "./src/fluentLegacyVariants.ts"], + "rules": { + "sort-keys": ["error"] + } + } + ] +} diff --git a/packages/semantic-tokens/.swcrc b/packages/semantic-tokens/.swcrc new file mode 100644 index 00000000000000..80bbb318befcae --- /dev/null +++ b/packages/semantic-tokens/.swcrc @@ -0,0 +1,32 @@ +{ + "$schema": "https://json.schemastore.org/swcrc", + "exclude": [ + "/testing", + "/**/*.cy.ts", + "/**/*.cy.tsx", + "/**/*.spec-e2e.ts", + "/**/*.spec.ts", + "/**/*.spec.tsx", + "/**/*.test.ts", + "/**/*.test.tsx" + ], + "jsc": { + "baseUrl": ".", + "parser": { + "syntax": "typescript", + "tsx": true, + "decorators": false, + "dynamicImport": false + }, + "externalHelpers": true, + "transform": { + "react": { + "runtime": "classic", + "useSpread": true + } + }, + "target": "es2019" + }, + "minify": false, + "sourceMaps": true +} diff --git a/packages/semantic-tokens/CHANGELOG.json b/packages/semantic-tokens/CHANGELOG.json new file mode 100644 index 00000000000000..22e8744cb2913a --- /dev/null +++ b/packages/semantic-tokens/CHANGELOG.json @@ -0,0 +1,4 @@ +{ + "name": "@fluentui/semantic-tokens", + "entries": [] +} diff --git a/packages/semantic-tokens/CHANGELOG.md b/packages/semantic-tokens/CHANGELOG.md new file mode 100644 index 00000000000000..14e9a0692dd613 --- /dev/null +++ b/packages/semantic-tokens/CHANGELOG.md @@ -0,0 +1,5 @@ +# Change Log - @fluentui/semantic-tokens + +This log was last generated on Thurs, 2 Feb 2025 16:26:46 GMT and should not be manually modified. + + diff --git a/packages/semantic-tokens/LICENSE b/packages/semantic-tokens/LICENSE new file mode 100644 index 00000000000000..2a9bf0a68d0e76 --- /dev/null +++ b/packages/semantic-tokens/LICENSE @@ -0,0 +1,15 @@ +@fluentui/semantic-tokens + +Copyright (c) Microsoft Corporation + +All rights reserved. + +MIT License + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/semantic-tokens/README.md b/packages/semantic-tokens/README.md new file mode 100644 index 00000000000000..13a22c5b812bc6 --- /dev/null +++ b/packages/semantic-tokens/README.md @@ -0,0 +1,20 @@ +# @fluentui/semantic-tokens + +WARNING: Semantic tokens and their style hooks are undergoing rapid transformation as we prepare to build out AI adjacent design systems - we expect many breaking changes to occur in this preview release to the token names, however the overall structure and fallback implementation should remain consistent. + +**Fluent UI Theme semantic-tokens** + +The semantic tokens package provides finely tuneable theme control via generic and component level CSSVars with fallbacks. + +This package extends upon the core @fluentui/tokens set in a tree-shakeable and backwards compatible manner. + +Control tokens are targeted to specific components with a generic set fallback, as well as their original Fluent 2 theme token as the final fallback if no semantic tokens are set. + +**Token generation method** +The token definition data is provided under scripts/tokens.json exported from Figma token definitions. + +Semantic tokens are generated via the tokenGen script (`yarn generate-tokens`) under scripts/tokenGen.ts + +Legacy tokens are statically generated via `yarn generate-legacy-tokens` - this ensures legacy tokens are flat exported so they remain tree-shakeable + +Legacy token overrides are mapped 1:1 with their component use case via scripts/fluentOverrides.ts for backwards compatibility diff --git a/packages/semantic-tokens/config/api-extractor.json b/packages/semantic-tokens/config/api-extractor.json new file mode 100644 index 00000000000000..02b450759ae91b --- /dev/null +++ b/packages/semantic-tokens/config/api-extractor.json @@ -0,0 +1,6 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "@fluentui/scripts-api-extractor/api-extractor.common.v-next.json", + + "mainEntryPointFilePath": "/../../dist/out-tsc/types/packages//src/index.d.ts" +} diff --git a/packages/semantic-tokens/config/tests.js b/packages/semantic-tokens/config/tests.js new file mode 100644 index 00000000000000..2e211ae9e21420 --- /dev/null +++ b/packages/semantic-tokens/config/tests.js @@ -0,0 +1 @@ +/** Jest test setup file. */ diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md new file mode 100644 index 00000000000000..8b3694488117a3 --- /dev/null +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -0,0 +1,5757 @@ +## API Report File for "@fluentui/semantic-tokens" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +// @public (undocumented) +export const aiBrandStop1 = "var(--smtc-ai-brand-stop1)"; + +// @public (undocumented) +export const aiBrandStop1Raw = "--smtc-ai-brand-stop1"; + +// @public (undocumented) +export const aiBrandStop2 = "var(--smtc-ai-brand-stop2)"; + +// @public (undocumented) +export const aiBrandStop2Raw = "--smtc-ai-brand-stop2"; + +// @public (undocumented) +export const aiBrandStop3 = "var(--smtc-ai-brand-stop3)"; + +// @public (undocumented) +export const aiBrandStop3Raw = "--smtc-ai-brand-stop3"; + +// @public (undocumented) +export const aiBrandStop4 = "var(--smtc-ai-brand-stop4)"; + +// @public (undocumented) +export const aiBrandStop4Raw = "--smtc-ai-brand-stop4"; + +// @public (undocumented) +export const aiShimmerStop1 = "var(--smtc-ai-shimmer-stop1)"; + +// @public (undocumented) +export const aiShimmerStop1Raw = "--smtc-ai-shimmer-stop1"; + +// @public (undocumented) +export const aiShimmerStop2 = "var(--smtc-ai-shimmer-stop2)"; + +// @public (undocumented) +export const aiShimmerStop2Raw = "--smtc-ai-shimmer-stop2"; + +// @public (undocumented) +export const aiShimmerStop3 = "var(--smtc-ai-shimmer-stop3)"; + +// @public (undocumented) +export const aiShimmerStop3Raw = "--smtc-ai-shimmer-stop3"; + +// @public (undocumented) +export const aiShimmerStop4 = "var(--smtc-ai-shimmer-stop4)"; + +// @public (undocumented) +export const aiShimmerStop4Raw = "--smtc-ai-shimmer-stop4"; + +// @public (undocumented) +export const backgroundCardOnFlyoutDefaultDisabled = "var(--smtc-background-card-on-flyout-default-disabled)"; + +// @public (undocumented) +export const backgroundCardOnFlyoutDefaultDisabledRaw = "--smtc-background-card-on-flyout-default-disabled"; + +// @public (undocumented) +export const backgroundCardOnFlyoutDefaultHover = "var(--smtc-background-card-on-flyout-default-hover)"; + +// @public (undocumented) +export const backgroundCardOnFlyoutDefaultHoverRaw = "--smtc-background-card-on-flyout-default-hover"; + +// @public (undocumented) +export const backgroundCardOnFlyoutDefaultPressed = "var(--smtc-background-card-on-flyout-default-pressed)"; + +// @public (undocumented) +export const backgroundCardOnFlyoutDefaultPressedRaw = "--smtc-background-card-on-flyout-default-pressed"; + +// @public (undocumented) +export const backgroundCardOnFlyoutDefaultRest = "var(--smtc-background-card-on-flyout-default-rest)"; + +// @public (undocumented) +export const backgroundCardOnFlyoutDefaultRestRaw = "--smtc-background-card-on-flyout-default-rest"; + +// @public (undocumented) +export const backgroundCardOnPrimaryAltDisabled = "var(--smtc-background-card-on-primary-alt-disabled)"; + +// @public (undocumented) +export const backgroundCardOnPrimaryAltDisabledRaw = "--smtc-background-card-on-primary-alt-disabled"; + +// @public (undocumented) +export const backgroundCardOnPrimaryAltHover = "var(--smtc-background-card-on-primary-alt-hover)"; + +// @public (undocumented) +export const backgroundCardOnPrimaryAltHoverRaw = "--smtc-background-card-on-primary-alt-hover"; + +// @public (undocumented) +export const backgroundCardOnPrimaryAltPressed = "var(--smtc-background-card-on-primary-alt-pressed)"; + +// @public (undocumented) +export const backgroundCardOnPrimaryAltPressedRaw = "--smtc-background-card-on-primary-alt-pressed"; + +// @public (undocumented) +export const backgroundCardOnPrimaryAltRest = "var(--smtc-background-card-on-primary-alt-rest)"; + +// @public (undocumented) +export const backgroundCardOnPrimaryAltRestRaw = "--smtc-background-card-on-primary-alt-rest"; + +// @public (undocumented) +export const backgroundCardOnPrimaryDefaultDisabled = "var(--smtc-background-card-on-primary-default-disabled)"; + +// @public (undocumented) +export const backgroundCardOnPrimaryDefaultDisabledRaw = "--smtc-background-card-on-primary-default-disabled"; + +// @public (undocumented) +export const backgroundCardOnPrimaryDefaultHover = "var(--smtc-background-card-on-primary-default-hover)"; + +// @public (undocumented) +export const backgroundCardOnPrimaryDefaultHoverRaw = "--smtc-background-card-on-primary-default-hover"; + +// @public (undocumented) +export const backgroundCardOnPrimaryDefaultPressed = "var(--smtc-background-card-on-primary-default-pressed)"; + +// @public (undocumented) +export const backgroundCardOnPrimaryDefaultPressedRaw = "--smtc-background-card-on-primary-default-pressed"; + +// @public (undocumented) +export const backgroundCardOnPrimaryDefaultRest = "var(--smtc-background-card-on-primary-default-rest)"; + +// @public (undocumented) +export const backgroundCardOnPrimaryDefaultRestRaw = "--smtc-background-card-on-primary-default-rest"; + +// @public (undocumented) +export const backgroundCardOnPrimaryDefaultSelected = "var(--smtc-background-card-on-primary-default-selected, var(--smtc-background-card-on-primary-default-rest))"; + +// @public (undocumented) +export const backgroundCardOnPrimaryDefaultSelectedRaw = "--smtc-background-card-on-primary-default-selected"; + +// @public (undocumented) +export const backgroundCardOnSecondaryAltDisabled = "var(--smtc-background-card-on-secondary-alt-disabled)"; + +// @public (undocumented) +export const backgroundCardOnSecondaryAltDisabledRaw = "--smtc-background-card-on-secondary-alt-disabled"; + +// @public (undocumented) +export const backgroundCardOnSecondaryAltHover = "var(--smtc-background-card-on-secondary-alt-hover)"; + +// @public (undocumented) +export const backgroundCardOnSecondaryAltHoverRaw = "--smtc-background-card-on-secondary-alt-hover"; + +// @public (undocumented) +export const backgroundCardOnSecondaryAltPressed = "var(--smtc-background-card-on-secondary-alt-pressed)"; + +// @public (undocumented) +export const backgroundCardOnSecondaryAltPressedRaw = "--smtc-background-card-on-secondary-alt-pressed"; + +// @public (undocumented) +export const backgroundCardOnSecondaryAltRest = "var(--smtc-background-card-on-secondary-alt-rest)"; + +// @public (undocumented) +export const backgroundCardOnSecondaryAltRestRaw = "--smtc-background-card-on-secondary-alt-rest"; + +// @public (undocumented) +export const backgroundCardOnSecondaryDefaultDisabled = "var(--smtc-background-card-on-secondary-default-disabled)"; + +// @public (undocumented) +export const backgroundCardOnSecondaryDefaultDisabledRaw = "--smtc-background-card-on-secondary-default-disabled"; + +// @public (undocumented) +export const backgroundCardOnSecondaryDefaultHover = "var(--smtc-background-card-on-secondary-default-hover)"; + +// @public (undocumented) +export const backgroundCardOnSecondaryDefaultHoverRaw = "--smtc-background-card-on-secondary-default-hover"; + +// @public (undocumented) +export const backgroundCardOnSecondaryDefaultPressed = "var(--smtc-background-card-on-secondary-default-pressed)"; + +// @public (undocumented) +export const backgroundCardOnSecondaryDefaultPressedRaw = "--smtc-background-card-on-secondary-default-pressed"; + +// @public (undocumented) +export const backgroundCardOnSecondaryDefaultRest = "var(--smtc-background-card-on-secondary-default-rest)"; + +// @public (undocumented) +export const backgroundCardOnSecondaryDefaultRestRaw = "--smtc-background-card-on-secondary-default-rest"; + +// @public (undocumented) +export const backgroundCardOnSecondaryDefaultSelected = "var(--smtc-background-card-on-secondary-default-selected, var(--smtc-background-card-on-secondary-default-rest))"; + +// @public (undocumented) +export const backgroundCardOnSecondaryDefaultSelectedRaw = "--smtc-background-card-on-secondary-default-selected"; + +// @public (undocumented) +export const backgroundCtrlActiveBrandDisabled = "var(--smtc-background-ctrl-active-brand-disabled, var(--smtc-background-ctrl-brand-disabled, var(--colorNeutralBackgroundDisabled)))"; + +// @public (undocumented) +export const backgroundCtrlActiveBrandDisabledRaw = "--smtc-background-ctrl-active-brand-disabled"; + +// @public (undocumented) +export const backgroundCtrlActiveBrandHover = "var(--smtc-background-ctrl-active-brand-hover, var(--smtc-background-ctrl-brand-hover, var(--colorCompoundBrandBackgroundHover)))"; + +// @public (undocumented) +export const backgroundCtrlActiveBrandHoverRaw = "--smtc-background-ctrl-active-brand-hover"; + +// @public (undocumented) +export const backgroundCtrlActiveBrandPressed = "var(--smtc-background-ctrl-active-brand-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorCompoundBrandBackgroundPressed)))"; + +// @public (undocumented) +export const backgroundCtrlActiveBrandPressedRaw = "--smtc-background-ctrl-active-brand-pressed"; + +// @public (undocumented) +export const backgroundCtrlActiveBrandRest = "var(--smtc-background-ctrl-active-brand-rest, var(--smtc-background-ctrl-brand-rest, var(--colorCompoundBrandBackground)))"; + +// @public (undocumented) +export const backgroundCtrlActiveBrandRestRaw = "--smtc-background-ctrl-active-brand-rest"; + +// @public (undocumented) +export const backgroundCtrlBrandDisabled = "var(--smtc-background-ctrl-brand-disabled)"; + +// @public (undocumented) +export const backgroundCtrlBrandDisabledRaw = "--smtc-background-ctrl-brand-disabled"; + +// @public (undocumented) +export const backgroundCtrlBrandHover = "var(--smtc-background-ctrl-brand-hover, var(--colorBrandBackgroundHover))"; + +// @public (undocumented) +export const backgroundCtrlBrandHoverRaw = "--smtc-background-ctrl-brand-hover"; + +// @public (undocumented) +export const backgroundCtrlBrandPressed = "var(--smtc-background-ctrl-brand-pressed, var(--colorBrandBackgroundPressed))"; + +// @public (undocumented) +export const backgroundCtrlBrandPressedRaw = "--smtc-background-ctrl-brand-pressed"; + +// @public (undocumented) +export const backgroundCtrlBrandRest = "var(--smtc-background-ctrl-brand-rest, var(--colorBrandBackground))"; + +// @public (undocumented) +export const backgroundCtrlBrandRestRaw = "--smtc-background-ctrl-brand-rest"; + +// @public (undocumented) +export const backgroundCtrlNeutralDisabled = "var(--smtc-background-ctrl-neutral-disabled, var(--colorNeutralBackgroundDisabled))"; + +// @public (undocumented) +export const backgroundCtrlNeutralDisabledRaw = "--smtc-background-ctrl-neutral-disabled"; + +// @public (undocumented) +export const backgroundCtrlNeutralHover = "var(--smtc-background-ctrl-neutral-hover, var(--colorNeutralBackground1Hover))"; + +// @public (undocumented) +export const backgroundCtrlNeutralHoverRaw = "--smtc-background-ctrl-neutral-hover"; + +// @public (undocumented) +export const backgroundCtrlNeutralPressed = "var(--smtc-background-ctrl-neutral-pressed, var(--colorNeutralBackground1Pressed))"; + +// @public (undocumented) +export const backgroundCtrlNeutralPressedRaw = "--smtc-background-ctrl-neutral-pressed"; + +// @public (undocumented) +export const backgroundCtrlNeutralRest = "var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground1))"; + +// @public (undocumented) +export const backgroundCtrlNeutralRestRaw = "--smtc-background-ctrl-neutral-rest"; + +// @public (undocumented) +export const backgroundCtrlOutlineDisabled = "var(--smtc-background-ctrl-outline-disabled, unset)"; + +// @public (undocumented) +export const backgroundCtrlOutlineDisabledRaw = "--smtc-background-ctrl-outline-disabled"; + +// @public (undocumented) +export const backgroundCtrlOutlineHover = "var(--smtc-background-ctrl-outline-hover, var(--smtc-null-color, var(--colorTransparentBackgroundHover)))"; + +// @public (undocumented) +export const backgroundCtrlOutlineHoverRaw = "--smtc-background-ctrl-outline-hover"; + +// @public (undocumented) +export const backgroundCtrlOutlinePressed = "var(--smtc-background-ctrl-outline-pressed, var(--smtc-null-color, var(--colorTransparentBackgroundPressed)))"; + +// @public (undocumented) +export const backgroundCtrlOutlinePressedRaw = "--smtc-background-ctrl-outline-pressed"; + +// @public (undocumented) +export const backgroundCtrlOutlineRest = "var(--smtc-background-ctrl-outline-rest, var(--smtc-null-color, var(--colorTransparentBackground)))"; + +// @public (undocumented) +export const backgroundCtrlOutlineRestRaw = "--smtc-background-ctrl-outline-rest"; + +// @public (undocumented) +export const backgroundCtrlShapeSafeActiveBrandDisabled = "var(--smtc-background-ctrl-shape-safe-active-brand-disabled, var(--smtc-background-ctrl-brand-disabled))"; + +// @public (undocumented) +export const backgroundCtrlShapeSafeActiveBrandDisabledRaw = "--smtc-background-ctrl-shape-safe-active-brand-disabled"; + +// @public (undocumented) +export const backgroundCtrlShapeSafeActiveBrandRest = "var(--smtc-background-ctrl-shape-safe-active-brand-rest, var(--smtc-background-ctrl-brand-rest))"; + +// @public (undocumented) +export const backgroundCtrlShapeSafeActiveBrandRestRaw = "--smtc-background-ctrl-shape-safe-active-brand-rest"; + +// @public (undocumented) +export const backgroundCtrlShapeSafeNeutralDisabled = "var(--smtc-background-ctrl-shape-safe-neutral-disabled, var(--smtc-foreground-ctrl-neutral-secondary-disabled, var(--colorNeutralForegroundDisabled)))"; + +// @public (undocumented) +export const backgroundCtrlShapeSafeNeutralDisabledRaw = "--smtc-background-ctrl-shape-safe-neutral-disabled"; + +// @public (undocumented) +export const backgroundCtrlShapeSafeNeutralHover = "var(--smtc-background-ctrl-shape-safe-neutral-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessibleHover)))"; + +// @public (undocumented) +export const backgroundCtrlShapeSafeNeutralHoverRaw = "--smtc-background-ctrl-shape-safe-neutral-hover"; + +// @public (undocumented) +export const backgroundCtrlShapeSafeNeutralPressed = "var(--smtc-background-ctrl-shape-safe-neutral-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessiblePressed)))"; + +// @public (undocumented) +export const backgroundCtrlShapeSafeNeutralPressedRaw = "--smtc-background-ctrl-shape-safe-neutral-pressed"; + +// @public (undocumented) +export const backgroundCtrlShapeSafeNeutralRest = "var(--smtc-background-ctrl-shape-safe-neutral-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessible)))"; + +// @public (undocumented) +export const backgroundCtrlShapeSafeNeutralRestRaw = "--smtc-background-ctrl-shape-safe-neutral-rest"; + +// @public (undocumented) +export const backgroundCtrlSubtleDisabled = "var(--smtc-background-ctrl-subtle-disabled, var(--smtc-null-color, var(--colorTransparentBackground)))"; + +// @public (undocumented) +export const backgroundCtrlSubtleDisabledRaw = "--smtc-background-ctrl-subtle-disabled"; + +// @public (undocumented) +export const backgroundCtrlSubtleHover = "var(--smtc-background-ctrl-subtle-hover, var(--colorSubtleBackgroundHover))"; + +// @public (undocumented) +export const backgroundCtrlSubtleHoverRaw = "--smtc-background-ctrl-subtle-hover"; + +// @public (undocumented) +export const backgroundCtrlSubtleHoverSplit = "var(--smtc-background-ctrl-subtle-hover-split, unset)"; + +// @public (undocumented) +export const backgroundCtrlSubtleHoverSplitRaw = "--smtc-background-ctrl-subtle-hover-split"; + +// @public (undocumented) +export const backgroundCtrlSubtlePressed = "var(--smtc-background-ctrl-subtle-pressed, var(--colorSubtleBackgroundPressed))"; + +// @public (undocumented) +export const backgroundCtrlSubtlePressedRaw = "--smtc-background-ctrl-subtle-pressed"; + +// @public (undocumented) +export const backgroundCtrlSubtleRest = "var(--smtc-background-ctrl-subtle-rest, var(--smtc-null-color, var(--colorSubtleBackground)))"; + +// @public (undocumented) +export const backgroundCtrlSubtleRestRaw = "--smtc-background-ctrl-subtle-rest"; + +// @public (undocumented) +export const backgroundFlyoutColorBlend = "var(--smtc-background-flyout-color-blend)"; + +// @public (undocumented) +export const backgroundFlyoutColorBlendRaw = "--smtc-background-flyout-color-blend"; + +// @public (undocumented) +export const backgroundFlyoutLumBlend = "var(--smtc-background-flyout-lum-blend, var(--colorNeutralBackground1))"; + +// @public (undocumented) +export const backgroundFlyoutLumBlendRaw = "--smtc-background-flyout-lum-blend"; + +// @public (undocumented) +export const backgroundFlyoutSolid = "var(--smtc-background-flyout-solid, var(--colorNeutralBackground1))"; + +// @public (undocumented) +export const backgroundFlyoutSolidRaw = "--smtc-background-flyout-solid"; + +// @public (undocumented) +export const backgroundLayerPrimarySolid = "var(--smtc-background-layer-primary-solid)"; + +// @public (undocumented) +export const backgroundLayerPrimarySolidRaw = "--smtc-background-layer-primary-solid"; + +// @public (undocumented) +export const backgroundLayerPrimaryStop1 = "var(--smtc-background-layer-primary-stop1, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const backgroundLayerPrimaryStop1Raw = "--smtc-background-layer-primary-stop1"; + +// @public (undocumented) +export const backgroundLayerPrimaryStop2 = "var(--smtc-background-layer-primary-stop2, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const backgroundLayerPrimaryStop2Raw = "--smtc-background-layer-primary-stop2"; + +// @public (undocumented) +export const backgroundLayerPrimaryStop3 = "var(--smtc-background-layer-primary-stop3, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const backgroundLayerPrimaryStop3Raw = "--smtc-background-layer-primary-stop3"; + +// @public (undocumented) +export const backgroundLayerSecondary = "var(--smtc-background-layer-secondary, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const backgroundLayerSecondaryRaw = "--smtc-background-layer-secondary"; + +// @public (undocumented) +export const backgroundLayerTertiary = "var(--smtc-background-layer-tertiary, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const backgroundLayerTertiaryRaw = "--smtc-background-layer-tertiary"; + +// @public (undocumented) +export const backgroundSmoke = "var(--smtc-background-smoke, var(--colorBackgroundOverlay))"; + +// @public (undocumented) +export const backgroundSmokeRaw = "--smtc-background-smoke"; + +// @public (undocumented) +export const backgroundToolbar = "var(--smtc-background-toolbar, var(--smtc-background-card-on-primary-default-rest))"; + +// @public (undocumented) +export const backgroundToolbarRaw = "--smtc-background-toolbar"; + +// @public (undocumented) +export const backgroundWebPagePrimary = "var(--smtc-background-web-page-primary)"; + +// @public (undocumented) +export const backgroundWebPagePrimaryRaw = "--smtc-background-web-page-primary"; + +// @public (undocumented) +export const backgroundWebPageSecondary = "var(--smtc-background-web-page-secondary)"; + +// @public (undocumented) +export const backgroundWebPageSecondaryRaw = "--smtc-background-web-page-secondary"; + +// @public (undocumented) +export const backgroundWindowPrimaryColorBlend = "var(--smtc-background-window-primary-color-blend)"; + +// @public (undocumented) +export const backgroundWindowPrimaryColorBlendRaw = "--smtc-background-window-primary-color-blend"; + +// @public (undocumented) +export const backgroundWindowPrimaryLumBlend = "var(--smtc-background-window-primary-lum-blend)"; + +// @public (undocumented) +export const backgroundWindowPrimaryLumBlendRaw = "--smtc-background-window-primary-lum-blend"; + +// @public (undocumented) +export const backgroundWindowPrimarySolid = "var(--smtc-background-window-primary-solid)"; + +// @public (undocumented) +export const backgroundWindowPrimarySolidRaw = "--smtc-background-window-primary-solid"; + +// @public (undocumented) +export const backgroundWindowSecondaryColorBlend = "var(--smtc-background-window-secondary-color-blend)"; + +// @public (undocumented) +export const backgroundWindowSecondaryColorBlendRaw = "--smtc-background-window-secondary-color-blend"; + +// @public (undocumented) +export const backgroundWindowSecondaryLumBlend = "var(--smtc-background-window-secondary-lum-blend)"; + +// @public (undocumented) +export const backgroundWindowSecondaryLumBlendRaw = "--smtc-background-window-secondary-lum-blend"; + +// @public (undocumented) +export const backgroundWindowSecondarySolid = "var(--smtc-background-window-secondary-solid)"; + +// @public (undocumented) +export const backgroundWindowSecondarySolidRaw = "--smtc-background-window-secondary-solid"; + +// @public (undocumented) +export const backgroundWindowTabBandColorBlend = "var(--smtc-background-window-tab-band-color-blend)"; + +// @public (undocumented) +export const backgroundWindowTabBandColorBlendRaw = "--smtc-background-window-tab-band-color-blend"; + +// @public (undocumented) +export const backgroundWindowTabBandLumBlend = "var(--smtc-background-window-tab-band-lum-blend)"; + +// @public (undocumented) +export const backgroundWindowTabBandLumBlendRaw = "--smtc-background-window-tab-band-lum-blend"; + +// @public (undocumented) +export const backgroundWindowTabBandSolid = "var(--smtc-background-window-tab-band-solid)"; + +// @public (undocumented) +export const backgroundWindowTabBandSolidRaw = "--smtc-background-window-tab-band-solid"; + +// @public (undocumented) +export const cornerBezel = "var(--smtc-corner-bezel)"; + +// @public (undocumented) +export const cornerBezelRaw = "--smtc-corner-bezel"; + +// @public (undocumented) +export const cornerCardHover = "var(--smtc-corner-card-hover, var(--smtc-corner-card-rest))"; + +// @public (undocumented) +export const cornerCardHoverRaw = "--smtc-corner-card-hover"; + +// @public (undocumented) +export const cornerCardPressed = "var(--smtc-corner-card-pressed, var(--smtc-corner-card-rest))"; + +// @public (undocumented) +export const cornerCardPressedRaw = "--smtc-corner-card-pressed"; + +// @public (undocumented) +export const cornerCardRest = "var(--smtc-corner-card-rest)"; + +// @public (undocumented) +export const cornerCardRestRaw = "--smtc-corner-card-rest"; + +// @public (undocumented) +export const cornerCircular = "var(--smtc-corner-circular, var(--borderRadiusCircular))"; + +// @public (undocumented) +export const cornerCircularRaw = "--smtc-corner-circular"; + +// @public (undocumented) +export const cornerCtrlHover = "var(--smtc-corner-ctrl-hover, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; + +// @public (undocumented) +export const cornerCtrlHoverRaw = "--smtc-corner-ctrl-hover"; + +// @public (undocumented) +export const cornerCtrlLgHover = "var(--smtc-corner-ctrl-lg-hover, var(--smtc-corner-ctrl-lg-rest))"; + +// @public (undocumented) +export const cornerCtrlLgHoverRaw = "--smtc-corner-ctrl-lg-hover"; + +// @public (undocumented) +export const cornerCtrlLgPressed = "var(--smtc-corner-ctrl-lg-pressed, var(--smtc-corner-ctrl-lg-rest))"; + +// @public (undocumented) +export const cornerCtrlLgPressedRaw = "--smtc-corner-ctrl-lg-pressed"; + +// @public (undocumented) +export const cornerCtrlLgRest = "var(--smtc-corner-ctrl-lg-rest, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const cornerCtrlLgRestRaw = "--smtc-corner-ctrl-lg-rest"; + +// @public (undocumented) +export const cornerCtrlPressed = "var(--smtc-corner-ctrl-pressed, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; + +// @public (undocumented) +export const cornerCtrlPressedRaw = "--smtc-corner-ctrl-pressed"; + +// @public (undocumented) +export const cornerCtrlRest = "var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const cornerCtrlRestRaw = "--smtc-corner-ctrl-rest"; + +// @public (undocumented) +export const cornerCtrlSmHover = "var(--smtc-corner-ctrl-sm-hover, var(--smtc-corner-ctrl-sm-rest))"; + +// @public (undocumented) +export const cornerCtrlSmHoverRaw = "--smtc-corner-ctrl-sm-hover"; + +// @public (undocumented) +export const cornerCtrlSmPressed = "var(--smtc-corner-ctrl-sm-pressed, var(--smtc-corner-ctrl-sm-rest))"; + +// @public (undocumented) +export const cornerCtrlSmPressedRaw = "--smtc-corner-ctrl-sm-pressed"; + +// @public (undocumented) +export const cornerCtrlSmRest = "var(--smtc-corner-ctrl-sm-rest, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const cornerCtrlSmRestRaw = "--smtc-corner-ctrl-sm-rest"; + +// @public (undocumented) +export const cornerFlyoutHover = "var(--smtc-corner-flyout-hover, var(--smtc-corner-flyout-rest))"; + +// @public (undocumented) +export const cornerFlyoutHoverRaw = "--smtc-corner-flyout-hover"; + +// @public (undocumented) +export const cornerFlyoutPressed = "var(--smtc-corner-flyout-pressed, var(--smtc-corner-flyout-rest))"; + +// @public (undocumented) +export const cornerFlyoutPressedRaw = "--smtc-corner-flyout-pressed"; + +// @public (undocumented) +export const cornerFlyoutRest = "var(--smtc-corner-flyout-rest, 0px)"; + +// @public (undocumented) +export const cornerFlyoutRestRaw = "--smtc-corner-flyout-rest"; + +// @public (undocumented) +export const cornerFlyoutShellRest = "var(--smtc-corner-flyout-shell-rest, var(--smtc-corner-flyout-rest))"; + +// @public (undocumented) +export const cornerFlyoutShellRestRaw = "--smtc-corner-flyout-shell-rest"; + +// @public (undocumented) +export const cornerImageInCard = "var(--smtc-corner-image-in-card)"; + +// @public (undocumented) +export const cornerImageInCardRaw = "--smtc-corner-image-in-card"; + +// @public (undocumented) +export const cornerImageOnPage = "var(--smtc-corner-image-on-page, var(--smtc-corner-card-rest))"; + +// @public (undocumented) +export const cornerImageOnPageRaw = "--smtc-corner-image-on-page"; + +// @public (undocumented) +export const cornerLayerDefault = "var(--smtc-corner-layer-default)"; + +// @public (undocumented) +export const cornerLayerDefaultRaw = "--smtc-corner-layer-default"; + +// @public (undocumented) +export const cornerLayerIntersection = "var(--smtc-corner-layer-intersection, var(--smtc-corner-zero))"; + +// @public (undocumented) +export const cornerLayerIntersectionRaw = "--smtc-corner-layer-intersection"; + +// @public (undocumented) +export const cornerToolbarDefault = "var(--smtc-corner-toolbar-default, var(--smtc-corner-card-rest))"; + +// @public (undocumented) +export const cornerToolbarDefaultRaw = "--smtc-corner-toolbar-default"; + +// @public (undocumented) +export const cornerWindowDefault = "var(--smtc-corner-window-default)"; + +// @public (undocumented) +export const cornerWindowDefaultRaw = "--smtc-corner-window-default"; + +// @public (undocumented) +export const cornerZero = "var(--smtc-corner-zero, var(--borderRadiusNone))"; + +// @public (undocumented) +export const cornerZeroRaw = "--smtc-corner-zero"; + +// @public +export const _ctrlAccordionBackgroundRest = "var(--smtc-background-ctrl-subtle-rest, var(--smtc-null-color, var(--colorTransparentBackground)))"; + +// @public +export const _ctrlAccordionFocusInnerStrokeWidth = "var(--smtc-ctrl-focus-inner-stroke-width, var(--smtc-stroke-width-default, 0px))"; + +// @public +export const _ctrlAccordionFocusOuterStroke = "var(--smtc-ctrl-focus-outer-stroke, var(--smtc-background-ctrl-brand-rest, var(--colorStrokeFocus2)))"; + +// @public +export const _ctrlAccordionForegroundHover = "var(--smtc-foreground-ctrl-on-transparent-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground1)))"; + +// @public +export const _ctrlAccordionForegroundPressed = "var(--smtc-foreground-ctrl-on-transparent-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground1)))"; + +// @public +export const _ctrlAccordionForegroundRest = "var(--smtc-foreground-ctrl-on-transparent-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground1)))"; + +// @public +export const _ctrlAccordionPaddingTextBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, 0px))"; + +// @public +export const _ctrlAccordionPaddingTextTop = "var(--smtc-padding-ctrl-text-top, 0px)"; + +// @public (undocumented) +export const ctrlAvatarActiveRingSize = "var(--smtc-ctrl-avatar-active-ring-size)"; + +// @public (undocumented) +export const ctrlAvatarActiveRingSizeRaw = "--smtc-ctrl-avatar-active-ring-size"; + +// @public (undocumented) +export const ctrlAvatarActiveRingStroke = "var(--smtc-ctrl-avatar-active-ring-stroke, var(--smtc-background-ctrl-brand-rest))"; + +// @public (undocumented) +export const ctrlAvatarActiveRingStrokeRaw = "--smtc-ctrl-avatar-active-ring-stroke"; + +// @public (undocumented) +export const ctrlAvatarActiveRingStrokeWidth = "var(--smtc-ctrl-avatar-active-ring-stroke-width, var(--strokeWidthThick))"; + +// @public +export const _ctrlAvatarActiveRingStrokeWidthLg = "var(--smtc-ctrl-avatar-active-ring-stroke-width, var(--strokeWidthThickest))"; + +// @public +export const _ctrlAvatarActiveRingStrokeWidthMd = "var(--smtc-ctrl-avatar-active-ring-stroke-width, var(--strokeWidthThicker))"; + +// @public (undocumented) +export const ctrlAvatarActiveRingStrokeWidthRaw = "--smtc-ctrl-avatar-active-ring-stroke-width"; + +// @public +export const _ctrlAvatarActiveRingStrokeWidthSm = "var(--smtc-ctrl-avatar-active-ring-stroke-width, var(--strokeWidthThick))"; + +// @public (undocumented) +export const ctrlAvatarBackground = "var(--smtc-ctrl-avatar-background, var(--colorNeutralBackground6))"; + +// @public (undocumented) +export const ctrlAvatarBackgroundRaw = "--smtc-ctrl-avatar-background"; + +// @public (undocumented) +export const ctrlAvatarCornerGroup = "var(--smtc-ctrl-avatar-corner-group, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; + +// @public +export const _ctrlAvatarCornerGroupLg = "var(--smtc-ctrl-avatar-corner-group, var(--smtc-corner-ctrl-rest, var(--borderRadiusLarge)))"; + +// @public +export const _ctrlAvatarCornerGroupMd = "var(--smtc-ctrl-avatar-corner-group, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; + +// @public (undocumented) +export const ctrlAvatarCornerGroupRaw = "--smtc-ctrl-avatar-corner-group"; + +// @public +export const _ctrlAvatarCornerGroupSm = "var(--smtc-ctrl-avatar-corner-group, var(--smtc-corner-ctrl-rest, var(--borderRadiusSmall)))"; + +// @public +export const _ctrlAvatarCornerGroupXLg = "var(--smtc-ctrl-avatar-corner-group, var(--smtc-corner-ctrl-rest, var(--borderRadiusXLarge)))"; + +// @public (undocumented) +export const ctrlAvatarCornerItem = "var(--smtc-ctrl-avatar-corner-item, var(--smtc-corner-circular, var(--borderRadiusCircular)))"; + +// @public (undocumented) +export const ctrlAvatarCornerItemRaw = "--smtc-ctrl-avatar-corner-item"; + +// @public (undocumented) +export const ctrlAvatarForeground = "var(--smtc-ctrl-avatar-foreground, var(--colorNeutralForeground3))"; + +// @public (undocumented) +export const ctrlAvatarForegroundRaw = "--smtc-ctrl-avatar-foreground"; + +// @public (undocumented) +export const ctrlAvatarIconSize = "var(--smtc-ctrl-avatar-icon-size, var(--smtc-size-ctrl-icon))"; + +// @public (undocumented) +export const ctrlAvatarIconSizeRaw = "--smtc-ctrl-avatar-icon-size"; + +// @public (undocumented) +export const ctrlAvatarPresenceBadgeBackgroundBehindBadge = "var(--smtc-ctrl-avatar-presence-badge-background-behind-badge, var(--smtc-background-layer-primary-solid, white))"; + +// @public (undocumented) +export const ctrlAvatarPresenceBadgeBackgroundBehindBadgeRaw = "--smtc-ctrl-avatar-presence-badge-background-behind-badge"; + +// @public (undocumented) +export const ctrlAvatarPresenceBadgePaddingBottomRightOffset = "var(--smtc-ctrl-avatar-presence-badge-padding-bottom-right-offset, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const ctrlAvatarPresenceBadgePaddingBottomRightOffsetRaw = "--smtc-ctrl-avatar-presence-badge-padding-bottom-right-offset"; + +// @public (undocumented) +export const ctrlAvatarPresenceBadgeSize = "var(--smtc-ctrl-avatar-presence-badge-size)"; + +// @public (undocumented) +export const ctrlAvatarPresenceBadgeSizeRaw = "--smtc-ctrl-avatar-presence-badge-size"; + +// @public (undocumented) +export const ctrlAvatarPresenceBadgeStrokeWidth = "var(--smtc-ctrl-avatar-presence-badge-stroke-width, var(--smtc-stroke-width-default))"; + +// @public +export const _ctrlAvatarPresenceBadgeStrokeWidthLg = "var(--smtc-ctrl-avatar-presence-badge-stroke-width, var(--smtc-stroke-width-default, var(--strokeWidthThick)))"; + +// @public (undocumented) +export const ctrlAvatarPresenceBadgeStrokeWidthRaw = "--smtc-ctrl-avatar-presence-badge-stroke-width"; + +// @public +export const _ctrlAvatarPresenceBadgeStrokeWidthSm = "var(--smtc-ctrl-avatar-presence-badge-stroke-width, var(--smtc-stroke-width-default, var(--strokeWidthThin)))"; + +// @public (undocumented) +export const ctrlAvatarShowCutout = "var(--smtc-ctrl-avatar-show-cutout)"; + +// @public (undocumented) +export const ctrlAvatarShowCutoutRaw = "--smtc-ctrl-avatar-show-cutout"; + +// @public (undocumented) +export const ctrlAvatarSize = "var(--smtc-ctrl-avatar-size, var(--smtc-size-ctrl-default, 32px))"; + +// @public (undocumented) +export const ctrlAvatarSizeRaw = "--smtc-ctrl-avatar-size"; + +// @public (undocumented) +export const ctrlAvatarTextFontSize = "var(--smtc-ctrl-avatar-text-font-size, var(--smtc-text-global-body3-font-size, var(--fontSizeBase300)))"; + +// @public (undocumented) +export const ctrlAvatarTextFontSizeRaw = "--smtc-ctrl-avatar-text-font-size"; + +// @public (undocumented) +export const ctrlAvatarTextLineHeight = "var(--smtc-ctrl-avatar-text-line-height, var(--smtc-text-global-body3-line-height, 1))"; + +// @public (undocumented) +export const ctrlAvatarTextLineHeightRaw = "--smtc-ctrl-avatar-text-line-height"; + +// @public (undocumented) +export const ctrlAvatarTextPaddingTopOffset = "var(--smtc-ctrl-avatar-text-padding-top-offset, unset)"; + +// @public (undocumented) +export const ctrlAvatarTextPaddingTopOffsetRaw = "--smtc-ctrl-avatar-text-padding-top-offset"; + +// @public (undocumented) +export const ctrlBadgeBeaconSize = "var(--smtc-ctrl-badge-beacon-size)"; + +// @public (undocumented) +export const ctrlBadgeBeaconSizeRaw = "--smtc-ctrl-badge-beacon-size"; + +// @public (undocumented) +export const ctrlBadgeCorner = "var(--smtc-ctrl-badge-corner, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const ctrlBadgeCornerRaw = "--smtc-ctrl-badge-corner"; + +// @public (undocumented) +export const ctrlBadgeGap = "var(--smtc-ctrl-badge-gap)"; + +// @public (undocumented) +export const ctrlBadgeGapRaw = "--smtc-ctrl-badge-gap"; + +// @public (undocumented) +export const ctrlBadgeIconSize = "var(--smtc-ctrl-badge-icon-size)"; + +// @public (undocumented) +export const ctrlBadgeIconSizeRaw = "--smtc-ctrl-badge-icon-size"; + +// @public (undocumented) +export const ctrlBadgeIconTheme = "var(--smtc-ctrl-badge-icon-theme, var(--smtc-icon-theme-ctrl-default-rest))"; + +// @public (undocumented) +export const ctrlBadgeIconThemeRaw = "--smtc-ctrl-badge-icon-theme"; + +// @public (undocumented) +export const ctrlBadgeLgCorner = "var(--smtc-ctrl-badge-lg-corner)"; + +// @public (undocumented) +export const ctrlBadgeLgCornerRaw = "--smtc-ctrl-badge-lg-corner"; + +// @public (undocumented) +export const ctrlBadgeLgIconSize = "var(--smtc-ctrl-badge-lg-icon-size)"; + +// @public (undocumented) +export const ctrlBadgeLgIconSizeRaw = "--smtc-ctrl-badge-lg-icon-size"; + +// @public (undocumented) +export const ctrlBadgeLgPadding = "var(--smtc-ctrl-badge-lg-padding, var(--spacingHorizontalXS))"; + +// @public (undocumented) +export const ctrlBadgeLgPaddingRaw = "--smtc-ctrl-badge-lg-padding"; + +// @public (undocumented) +export const ctrlBadgeLgSize = "var(--smtc-ctrl-badge-lg-size)"; + +// @public (undocumented) +export const ctrlBadgeLgSizeRaw = "--smtc-ctrl-badge-lg-size"; + +// @public (undocumented) +export const ctrlBadgeLgTextPaddingBottom = "var(--smtc-ctrl-badge-lg-text-padding-bottom, var(--smtc-ctrl-badge-lg-text-padding-top))"; + +// @public (undocumented) +export const ctrlBadgeLgTextPaddingBottomRaw = "--smtc-ctrl-badge-lg-text-padding-bottom"; + +// @public (undocumented) +export const ctrlBadgeLgTextPaddingTop = "var(--smtc-ctrl-badge-lg-text-padding-top)"; + +// @public (undocumented) +export const ctrlBadgeLgTextPaddingTopRaw = "--smtc-ctrl-badge-lg-text-padding-top"; + +// @public +export const _ctrlBadgeNullColor = "var(--smtc-null-color, var(--colorTransparentStroke))"; + +// @public (undocumented) +export const ctrlBadgePadding = "var(--smtc-ctrl-badge-padding, var(--spacingHorizontalXS))"; + +// @public +export const _ctrlBadgePaddingLeftSide = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXXS))"; + +// @public +export const _ctrlBadgePaddingLeftSideXL = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXS))"; + +// @public (undocumented) +export const ctrlBadgePaddingRaw = "--smtc-ctrl-badge-padding"; + +// @public +export const _ctrlBadgePaddingRightSide = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXXS))"; + +// @public +export const _ctrlBadgePaddingRightSideXL = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXS))"; + +// @public +export const _ctrlBadgePaddingTextSide = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXXS))"; + +// @public (undocumented) +export const ctrlBadgeSize = "var(--smtc-ctrl-badge-size)"; + +// @public (undocumented) +export const ctrlBadgeSizeRaw = "--smtc-ctrl-badge-size"; + +// @public +export const _ctrlBadgeSmallTinyCorner = "var(--smtc-ctrl-badge-corner, var(--borderRadiusSmall))"; + +// @public (undocumented) +export const ctrlBadgeSmCorner = "var(--smtc-ctrl-badge-sm-corner)"; + +// @public (undocumented) +export const ctrlBadgeSmCornerRaw = "--smtc-ctrl-badge-sm-corner"; + +// @public (undocumented) +export const ctrlBadgeSmIconSize = "var(--smtc-ctrl-badge-sm-icon-size)"; + +// @public (undocumented) +export const ctrlBadgeSmIconSizeRaw = "--smtc-ctrl-badge-sm-icon-size"; + +// @public (undocumented) +export const ctrlBadgeSmPadding = "var(--smtc-ctrl-badge-sm-padding, var(--spacingHorizontalXXS))"; + +// @public (undocumented) +export const ctrlBadgeSmPaddingRaw = "--smtc-ctrl-badge-sm-padding"; + +// @public (undocumented) +export const ctrlBadgeSmSize = "var(--smtc-ctrl-badge-sm-size)"; + +// @public (undocumented) +export const ctrlBadgeSmSizeRaw = "--smtc-ctrl-badge-sm-size"; + +// @public (undocumented) +export const ctrlBadgeSmTextPaddingBottom = "var(--smtc-ctrl-badge-sm-text-padding-bottom, var(--smtc-ctrl-badge-sm-text-padding-top))"; + +// @public (undocumented) +export const ctrlBadgeSmTextPaddingBottomRaw = "--smtc-ctrl-badge-sm-text-padding-bottom"; + +// @public (undocumented) +export const ctrlBadgeSmTextPaddingTop = "var(--smtc-ctrl-badge-sm-text-padding-top)"; + +// @public (undocumented) +export const ctrlBadgeSmTextPaddingTopRaw = "--smtc-ctrl-badge-sm-text-padding-top"; + +// @public +export const _ctrlBadgeStatusAvailableTintForeground = "var(--smtc-status-success-tint-foreground, var(--colorPaletteLightGreenForeground3))"; + +// @public +export const _ctrlBadgeStatusBrandTintForeground = "var(--smtc-status-brand-tint-foreground, var(--smtc-foreground-ctrl-brand-rest, var(--colorBrandForeground2)))"; + +// @public +export const _ctrlBadgeStatusBusyTintForeground = "var(--smtc-status-danger-tint-foreground, var(--colorPaletteRedBackground3))"; + +// @public +export const _ctrlBadgeStatusDangerTintBackground = "var(--smtc-status-danger-tint-background, var(--colorPaletteRedBackground1))"; + +// @public +export const _ctrlBadgeStatusDangerTintForeground = "var(--smtc-status-danger-tint-foreground, var(--colorPaletteRedForeground1))"; + +// @public +export const _ctrlBadgeStatusDangerTintStroke = "var(--smtc-status-danger-tint-stroke, var(--colorPaletteRedBorder1))"; + +// @public +export const _ctrlBadgeStatusImportantTintBackground = "var(--smtc-status-important-tint-background, var(--colorNeutralForeground3))"; + +// @public +export const _ctrlBadgeStatusImportantTintForeground = "var(--smtc-status-important-tint-foreground, var(--colorNeutralBackground1))"; + +// @public +export const _ctrlBadgeStatusInformativeTintStroke = "var(--smtc-status-informative-tint-stroke, var(--colorNeutralStroke2))"; + +// @public +export const _ctrlBadgeStatusSuccessTintBackground = "var(--smtc-status-success-tint-background, var(--colorPaletteGreenBackground1))"; + +// @public +export const _ctrlBadgeStatusSuccessTintForeground = "var(--smtc-status-success-tint-foreground, var(--colorPaletteGreenForeground1))"; + +// @public +export const _ctrlBadgeStatusSuccessTintForeground3 = "var(--smtc-status-success-tint-foreground, var(--colorPaletteGreenForeground3))"; + +// @public +export const _ctrlBadgeStatusSuccessTintStroke = "var(--smtc-status-success-tint-stroke, var(--colorPaletteGreenBorder1))"; + +// @public +export const _ctrlBadgeStatusWarningBackground = "var(--smtc-status-warning-background, var(--colorPaletteYellowBackground3))"; + +// @public +export const _ctrlBadgeStatusWarningTintBackground = "var(--smtc-status-warning-tint-background, var(--colorPaletteYellowBackground1))"; + +// @public +export const _ctrlBadgeStatusWarningTintForeground = "var(--smtc-status-warning-tint-foreground, var(--colorPaletteYellowForeground1))"; + +// @public +export const _ctrlBadgeStatusWarningTintForeground2 = "var(--smtc-status-warning-tint-foreground, var(--colorPaletteYellowForeground2))"; + +// @public +export const _ctrlBadgeStatusWarningTintStroke = "var(--smtc-status-warning-tint-stroke, var(--colorPaletteYellowBorder1))"; + +// @public (undocumented) +export const ctrlBadgeTextPaddingBottom = "var(--smtc-ctrl-badge-text-padding-bottom, var(--smtc-ctrl-badge-text-padding-top))"; + +// @public (undocumented) +export const ctrlBadgeTextPaddingBottomRaw = "--smtc-ctrl-badge-text-padding-bottom"; + +// @public (undocumented) +export const ctrlBadgeTextPaddingTop = "var(--smtc-ctrl-badge-text-padding-top)"; + +// @public (undocumented) +export const ctrlBadgeTextPaddingTopRaw = "--smtc-ctrl-badge-text-padding-top"; + +// @public +export const _ctrlBadgeTextStyleSemiBoldWeight = "var(--smtc-text-style-default-regular-weight, var(--fontWeightSemibold))"; + +// @public +export const _ctrlBadgeXLPadding = "var(--smtc-ctrl-badge-lg-padding, var(--spacingHorizontalSNudge))"; + +// @public (undocumented) +export const ctrlBooleanSelectionHint = "var(--smtc-ctrl-boolean-selection-hint)"; + +// @public (undocumented) +export const ctrlBooleanSelectionHintRaw = "--smtc-ctrl-boolean-selection-hint"; + +// @public +export const _ctrlBreadcrumbSizeDefault = "var(--smtc-size-ctrl-default, 32px)"; + +// @public +export const _ctrlBreadcrumbSizeLgDefault = "var(--smtc-size-ctrl-lg-default, 40px)"; + +// @public +export const _ctrlBreadcrumbSizeSmIcon = "var(--smtc-size-ctrl-sm-icon, 16px)"; + +// @public +export const _ctrlButtonGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, var(--spacingHorizontalSNudge))"; + +// @public (undocumented) +export const ctrlCardStateDisabled = "var(--smtc-ctrl-card-state-disabled)"; + +// @public (undocumented) +export const ctrlCardStateDisabledRaw = "--smtc-ctrl-card-state-disabled"; + +// @public (undocumented) +export const ctrlCardStateHover = "var(--smtc-ctrl-card-state-hover)"; + +// @public (undocumented) +export const ctrlCardStateHoverRaw = "--smtc-ctrl-card-state-hover"; + +// @public (undocumented) +export const ctrlCardStatePressed = "var(--smtc-ctrl-card-state-pressed)"; + +// @public (undocumented) +export const ctrlCardStatePressedRaw = "--smtc-ctrl-card-state-pressed"; + +// @public (undocumented) +export const ctrlCardStateRest = "var(--smtc-ctrl-card-state-rest)"; + +// @public (undocumented) +export const ctrlCardStateRestRaw = "--smtc-ctrl-card-state-rest"; + +// @public +export const _ctrlCheckboxBorderColorChecked = "var(--smtc-stroke-ctrl-on-active-brand-hover, var(--smtc-stroke-ctrl-on-brand-hover, var(--colorCompoundBrandBackground)))"; + +// @public +export const _ctrlCheckboxBorderColorCheckedHover = "var(--smtc-stroke-ctrl-on-active-brand-hover, var(--smtc-stroke-ctrl-on-brand-hover, var(--colorCompoundBrandBackgroundHover)))"; + +// @public +export const _ctrlCheckboxForegroundUnchecked = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground3)))"; + +// @public +export const _ctrlCheckboxForegroundUncheckedHover = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; + +// @public +export const _ctrlCheckboxIndicatorBorderColorCheckedPressed = "var(--smtc-stroke-ctrl-on-active-brand-pressed, var(--smtc-stroke-ctrl-on-brand-pressed, var(--colorCompoundBrandBackgroundPressed)))"; + +// @public +export const _ctrlCheckboxIndicatorBorderColorMixed = "var(--smtc-background-ctrl-active-brand-rest, var(--smtc-background-ctrl-brand-rest, var(--colorCompoundBrandStroke)))"; + +// @public +export const _ctrlCheckboxIndicatorBorderColorMixedHover = "var(--smtc-background-ctrl-active-brand-hover, var(--smtc-background-ctrl-brand-hover, var(--colorCompoundBrandStrokeHover)))"; + +// @public +export const _ctrlCheckboxIndicatorBorderColorMixedPressed = "var(--smtc-background-ctrl-active-brand-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorCompoundBrandStrokePressed)))"; + +// @public +export const _ctrlCheckboxIndicatorColorMixed = "var(--smtc-background-ctrl-active-brand-rest, var(--smtc-background-ctrl-brand-rest, var(--colorCompoundBrandForeground1)))"; + +// @public +export const _ctrlCheckboxIndicatorColorMixedHover = "var(--smtc-background-ctrl-active-brand-hover, var(--smtc-background-ctrl-brand-hover, var(--colorCompoundBrandForeground1Hover)))"; + +// @public +export const _ctrlCheckboxIndicatorColorMixedPressed = "var(--smtc-background-ctrl-active-brand-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorCompoundBrandForeground1Pressed)))"; + +// @public (undocumented) +export const ctrlChoiceBaseBackgroundDisabled = "var(--smtc-ctrl-choice-base-background-disabled, var(--smtc-background-ctrl-outline-disabled, var(--colorTransparentBackground)))"; + +// @public (undocumented) +export const ctrlChoiceBaseBackgroundDisabledRaw = "--smtc-ctrl-choice-base-background-disabled"; + +// @public (undocumented) +export const ctrlChoiceBaseBackgroundHover = "var(--smtc-ctrl-choice-base-background-hover, var(--smtc-background-ctrl-outline-hover, unset))"; + +// @public (undocumented) +export const ctrlChoiceBaseBackgroundHoverRaw = "--smtc-ctrl-choice-base-background-hover"; + +// @public (undocumented) +export const ctrlChoiceBaseBackgroundPressed = "var(--smtc-ctrl-choice-base-background-pressed, var(--smtc-background-ctrl-outline-pressed, var(--colorNeutralStrokeAccessiblePressed)))"; + +// @public (undocumented) +export const ctrlChoiceBaseBackgroundPressedRaw = "--smtc-ctrl-choice-base-background-pressed"; + +// @public (undocumented) +export const ctrlChoiceBaseBackgroundRest = "var(--smtc-ctrl-choice-base-background-rest, var(--smtc-background-ctrl-outline-rest, var(--colorTransparentBackground)))"; + +// @public (undocumented) +export const ctrlChoiceBaseBackgroundRestRaw = "--smtc-ctrl-choice-base-background-rest"; + +// @public (undocumented) +export const ctrlChoiceBaseSize = "var(--smtc-ctrl-choice-base-size, var(--smtc-size-ctrl-icon, 20px))"; + +// @public (undocumented) +export const ctrlChoiceBaseSizeRaw = "--smtc-ctrl-choice-base-size"; + +// @public (undocumented) +export const ctrlChoiceBaseStrokeDisabled = "var(--smtc-ctrl-choice-base-stroke-disabled, var(--smtc-foreground-ctrl-neutral-secondary-disabled, var(--colorNeutralStrokeDisabled)))"; + +// @public (undocumented) +export const ctrlChoiceBaseStrokeDisabledRaw = "--smtc-ctrl-choice-base-stroke-disabled"; + +// @public (undocumented) +export const ctrlChoiceBaseStrokeHover = "var(--smtc-ctrl-choice-base-stroke-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessibleHover)))"; + +// @public (undocumented) +export const ctrlChoiceBaseStrokeHoverRaw = "--smtc-ctrl-choice-base-stroke-hover"; + +// @public (undocumented) +export const ctrlChoiceBaseStrokePressed = "var(--smtc-ctrl-choice-base-stroke-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessiblePressed)))"; + +// @public (undocumented) +export const ctrlChoiceBaseStrokePressedRaw = "--smtc-ctrl-choice-base-stroke-pressed"; + +// @public (undocumented) +export const ctrlChoiceBaseStrokeRest = "var(--smtc-ctrl-choice-base-stroke-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessible)))"; + +// @public (undocumented) +export const ctrlChoiceBaseStrokeRestRaw = "--smtc-ctrl-choice-base-stroke-rest"; + +// @public (undocumented) +export const ctrlChoiceCheckboxCorner = "var(--smtc-ctrl-choice-checkbox-corner, var(--borderRadiusSmall))"; + +// @public (undocumented) +export const ctrlChoiceCheckboxCornerRaw = "--smtc-ctrl-choice-checkbox-corner"; + +// @public (undocumented) +export const ctrlChoiceCheckboxIconSize = "var(--smtc-ctrl-choice-checkbox-icon-size, var(--smtc-size-ctrl-icon-secondary))"; + +// @public (undocumented) +export const ctrlChoiceCheckboxIconSizeRaw = "--smtc-ctrl-choice-checkbox-icon-size"; + +// @public (undocumented) +export const ctrlChoiceCheckboxIndeterminateCorner = "var(--smtc-ctrl-choice-checkbox-indeterminate-corner, var(--smtc-corner-circular))"; + +// @public (undocumented) +export const ctrlChoiceCheckboxIndeterminateCornerRaw = "--smtc-ctrl-choice-checkbox-indeterminate-corner"; + +// @public (undocumented) +export const ctrlChoiceCheckboxIndeterminateHeight = "var(--smtc-ctrl-choice-checkbox-indeterminate-height)"; + +// @public (undocumented) +export const ctrlChoiceCheckboxIndeterminateHeightRaw = "--smtc-ctrl-choice-checkbox-indeterminate-height"; + +// @public (undocumented) +export const ctrlChoiceCheckboxIndeterminateWidth = "var(--smtc-ctrl-choice-checkbox-indeterminate-width)"; + +// @public (undocumented) +export const ctrlChoiceCheckboxIndeterminateWidthRaw = "--smtc-ctrl-choice-checkbox-indeterminate-width"; + +// @public (undocumented) +export const ctrlChoiceIconTheme = "var(--smtc-ctrl-choice-icon-theme)"; + +// @public (undocumented) +export const ctrlChoiceIconThemeRaw = "--smtc-ctrl-choice-icon-theme"; + +// @public (undocumented) +export const ctrlChoiceLgBaseSize = "var(--smtc-ctrl-choice-lg-base-size, var(--smtc-size-ctrl-lg-icon))"; + +// @public (undocumented) +export const ctrlChoiceLgBaseSizeRaw = "--smtc-ctrl-choice-lg-base-size"; + +// @public (undocumented) +export const ctrlChoiceLgCheckboxCorner = "var(--smtc-ctrl-choice-lg-checkbox-corner)"; + +// @public (undocumented) +export const ctrlChoiceLgCheckboxCornerRaw = "--smtc-ctrl-choice-lg-checkbox-corner"; + +// @public (undocumented) +export const ctrlChoiceLgCheckboxIconSize = "var(--smtc-ctrl-choice-lg-checkbox-icon-size, var(--smtc-size-ctrl-icon-secondary))"; + +// @public (undocumented) +export const ctrlChoiceLgCheckboxIconSizeRaw = "--smtc-ctrl-choice-lg-checkbox-icon-size"; + +// @public (undocumented) +export const ctrlChoiceLgRadioDotSizeHover = "var(--smtc-ctrl-choice-lg-radio-dot-size-hover, var(--smtc-ctrl-choice-lg-radio-dot-size-rest))"; + +// @public (undocumented) +export const ctrlChoiceLgRadioDotSizeHoverRaw = "--smtc-ctrl-choice-lg-radio-dot-size-hover"; + +// @public (undocumented) +export const ctrlChoiceLgRadioDotSizePressed = "var(--smtc-ctrl-choice-lg-radio-dot-size-pressed, var(--smtc-ctrl-choice-lg-radio-dot-size-rest))"; + +// @public (undocumented) +export const ctrlChoiceLgRadioDotSizePressedRaw = "--smtc-ctrl-choice-lg-radio-dot-size-pressed"; + +// @public (undocumented) +export const ctrlChoiceLgRadioDotSizeRest = "var(--smtc-ctrl-choice-lg-radio-dot-size-rest)"; + +// @public (undocumented) +export const ctrlChoiceLgRadioDotSizeRestRaw = "--smtc-ctrl-choice-lg-radio-dot-size-rest"; + +// @public (undocumented) +export const ctrlChoiceLgSwitchHeight = "var(--smtc-ctrl-choice-lg-switch-height, var(--smtc-size-ctrl-lg-icon))"; + +// @public (undocumented) +export const ctrlChoiceLgSwitchHeightRaw = "--smtc-ctrl-choice-lg-switch-height"; + +// @public (undocumented) +export const ctrlChoiceLgSwitchThumbWidthHover = "var(--smtc-ctrl-choice-lg-switch-thumb-width-hover, var(--smtc-ctrl-choice-lg-switch-thumb-width-rest))"; + +// @public (undocumented) +export const ctrlChoiceLgSwitchThumbWidthHoverRaw = "--smtc-ctrl-choice-lg-switch-thumb-width-hover"; + +// @public (undocumented) +export const ctrlChoiceLgSwitchThumbWidthPressed = "var(--smtc-ctrl-choice-lg-switch-thumb-width-pressed, var(--smtc-ctrl-choice-lg-switch-thumb-width-rest))"; + +// @public (undocumented) +export const ctrlChoiceLgSwitchThumbWidthPressedRaw = "--smtc-ctrl-choice-lg-switch-thumb-width-pressed"; + +// @public (undocumented) +export const ctrlChoiceLgSwitchThumbWidthRest = "var(--smtc-ctrl-choice-lg-switch-thumb-width-rest)"; + +// @public (undocumented) +export const ctrlChoiceLgSwitchThumbWidthRestRaw = "--smtc-ctrl-choice-lg-switch-thumb-width-rest"; + +// @public (undocumented) +export const ctrlChoiceLgSwitchWidth = "var(--smtc-ctrl-choice-lg-switch-width)"; + +// @public (undocumented) +export const ctrlChoiceLgSwitchWidthRaw = "--smtc-ctrl-choice-lg-switch-width"; + +// @public (undocumented) +export const ctrlChoicePaddingHorizontal = "var(--smtc-ctrl-choice-padding-horizontal, var(--spacingHorizontalS))"; + +// @public (undocumented) +export const ctrlChoicePaddingHorizontalRaw = "--smtc-ctrl-choice-padding-horizontal"; + +// @public (undocumented) +export const ctrlChoicePaddingVertical = "var(--smtc-ctrl-choice-padding-vertical, var(--spacingVerticalS))"; + +// @public (undocumented) +export const ctrlChoicePaddingVerticalRaw = "--smtc-ctrl-choice-padding-vertical"; + +// @public (undocumented) +export const ctrlChoiceRadioCorner = "var(--smtc-ctrl-choice-radio-corner, var(--smtc-corner-circular, var(--borderRadiusCircular)))"; + +// @public (undocumented) +export const ctrlChoiceRadioCornerRaw = "--smtc-ctrl-choice-radio-corner"; + +// @public (undocumented) +export const ctrlChoiceRadioDotSizeHover = "var(--smtc-ctrl-choice-radio-dot-size-hover, var(--smtc-ctrl-choice-radio-dot-size-rest))"; + +// @public (undocumented) +export const ctrlChoiceRadioDotSizeHoverRaw = "--smtc-ctrl-choice-radio-dot-size-hover"; + +// @public (undocumented) +export const ctrlChoiceRadioDotSizePressed = "var(--smtc-ctrl-choice-radio-dot-size-pressed, var(--smtc-ctrl-choice-radio-dot-size-rest))"; + +// @public (undocumented) +export const ctrlChoiceRadioDotSizePressedRaw = "--smtc-ctrl-choice-radio-dot-size-pressed"; + +// @public (undocumented) +export const ctrlChoiceRadioDotSizeRest = "var(--smtc-ctrl-choice-radio-dot-size-rest, 16px)"; + +// @public (undocumented) +export const ctrlChoiceRadioDotSizeRestRaw = "--smtc-ctrl-choice-radio-dot-size-rest"; + +// @public (undocumented) +export const ctrlChoiceSmBaseSize = "var(--smtc-ctrl-choice-sm-base-size, var(--smtc-size-ctrl-sm-icon))"; + +// @public (undocumented) +export const ctrlChoiceSmBaseSizeRaw = "--smtc-ctrl-choice-sm-base-size"; + +// @public (undocumented) +export const ctrlChoiceSmCheckboxCorner = "var(--smtc-ctrl-choice-sm-checkbox-corner)"; + +// @public (undocumented) +export const ctrlChoiceSmCheckboxCornerRaw = "--smtc-ctrl-choice-sm-checkbox-corner"; + +// @public (undocumented) +export const ctrlChoiceSmCheckboxIconSize = "var(--smtc-ctrl-choice-sm-checkbox-icon-size, var(--smtc-size-ctrl-icon-secondary))"; + +// @public (undocumented) +export const ctrlChoiceSmCheckboxIconSizeRaw = "--smtc-ctrl-choice-sm-checkbox-icon-size"; + +// @public (undocumented) +export const ctrlChoiceSmRadioDotSize = "var(--smtc-ctrl-choice-sm-radio-dot-size)"; + +// @public (undocumented) +export const ctrlChoiceSmRadioDotSizeRaw = "--smtc-ctrl-choice-sm-radio-dot-size"; + +// @public (undocumented) +export const ctrlChoiceSmSwitchHeight = "var(--smtc-ctrl-choice-sm-switch-height, var(--smtc-size-ctrl-sm-icon))"; + +// @public (undocumented) +export const ctrlChoiceSmSwitchHeightRaw = "--smtc-ctrl-choice-sm-switch-height"; + +// @public (undocumented) +export const ctrlChoiceSmSwitchThumbWidthHover = "var(--smtc-ctrl-choice-sm-switch-thumb-width-hover, var(--smtc-ctrl-choice-sm-switch-thumb-width-rest))"; + +// @public (undocumented) +export const ctrlChoiceSmSwitchThumbWidthHoverRaw = "--smtc-ctrl-choice-sm-switch-thumb-width-hover"; + +// @public (undocumented) +export const ctrlChoiceSmSwitchThumbWidthPressed = "var(--smtc-ctrl-choice-sm-switch-thumb-width-pressed, var(--smtc-ctrl-choice-sm-switch-thumb-width-rest))"; + +// @public (undocumented) +export const ctrlChoiceSmSwitchThumbWidthPressedRaw = "--smtc-ctrl-choice-sm-switch-thumb-width-pressed"; + +// @public (undocumented) +export const ctrlChoiceSmSwitchThumbWidthRest = "var(--smtc-ctrl-choice-sm-switch-thumb-width-rest)"; + +// @public (undocumented) +export const ctrlChoiceSmSwitchThumbWidthRestRaw = "--smtc-ctrl-choice-sm-switch-thumb-width-rest"; + +// @public (undocumented) +export const ctrlChoiceSmSwitchWidth = "var(--smtc-ctrl-choice-sm-switch-width)"; + +// @public (undocumented) +export const ctrlChoiceSmSwitchWidthRaw = "--smtc-ctrl-choice-sm-switch-width"; + +// @public (undocumented) +export const ctrlChoiceSwitchCorner = "var(--smtc-ctrl-choice-switch-corner, var(--smtc-corner-circular, var(--borderRadiusCircular)))"; + +// @public (undocumented) +export const ctrlChoiceSwitchCornerRaw = "--smtc-ctrl-choice-switch-corner"; + +// @public (undocumented) +export const ctrlChoiceSwitchHeight = "var(--smtc-ctrl-choice-switch-height, var(--smtc-size-ctrl-icon, 20px))"; + +// @public (undocumented) +export const ctrlChoiceSwitchHeightRaw = "--smtc-ctrl-choice-switch-height"; + +// @public (undocumented) +export const ctrlChoiceSwitchPaddingHover = "var(--smtc-ctrl-choice-switch-padding-hover, var(--smtc-ctrl-choice-switch-padding-rest, 1px))"; + +// @public (undocumented) +export const ctrlChoiceSwitchPaddingHoverRaw = "--smtc-ctrl-choice-switch-padding-hover"; + +// @public (undocumented) +export const ctrlChoiceSwitchPaddingPressed = "var(--smtc-ctrl-choice-switch-padding-pressed, var(--smtc-ctrl-choice-switch-padding-rest, 1px))"; + +// @public (undocumented) +export const ctrlChoiceSwitchPaddingPressedRaw = "--smtc-ctrl-choice-switch-padding-pressed"; + +// @public (undocumented) +export const ctrlChoiceSwitchPaddingRest = "var(--smtc-ctrl-choice-switch-padding-rest, 1px)"; + +// @public (undocumented) +export const ctrlChoiceSwitchPaddingRestRaw = "--smtc-ctrl-choice-switch-padding-rest"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbShadow = "var(--smtc-ctrl-choice-switch-thumb-shadow, unset)"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbShadowRaw = "--smtc-ctrl-choice-switch-thumb-shadow"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbWidthHover = "var(--smtc-ctrl-choice-switch-thumb-width-hover, var(--smtc-ctrl-choice-switch-thumb-width-rest, 18px))"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbWidthHoverRaw = "--smtc-ctrl-choice-switch-thumb-width-hover"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbWidthPressed = "var(--smtc-ctrl-choice-switch-thumb-width-pressed, var(--smtc-ctrl-choice-switch-thumb-width-rest, 18px))"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbWidthPressedRaw = "--smtc-ctrl-choice-switch-thumb-width-pressed"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbWidthRest = "var(--smtc-ctrl-choice-switch-thumb-width-rest, 18px)"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbWidthRestRaw = "--smtc-ctrl-choice-switch-thumb-width-rest"; + +// @public (undocumented) +export const ctrlChoiceSwitchWidth = "var(--smtc-ctrl-choice-switch-width, 40px)"; + +// @public (undocumented) +export const ctrlChoiceSwitchWidthRaw = "--smtc-ctrl-choice-switch-width"; + +// @public (undocumented) +export const ctrlComposerContainerBackgroundAcrylicColorBlend = "var(--smtc-ctrl-composer-container-background-acrylic-color-blend, var(--smtc-background-flyout-solid))"; + +// @public (undocumented) +export const ctrlComposerContainerBackgroundAcrylicColorBlendRaw = "--smtc-ctrl-composer-container-background-acrylic-color-blend"; + +// @public (undocumented) +export const ctrlComposerContainerBackgroundAcrylicLumBlend = "var(--smtc-ctrl-composer-container-background-acrylic-lum-blend, var(--smtc-background-flyout-solid))"; + +// @public (undocumented) +export const ctrlComposerContainerBackgroundAcrylicLumBlendRaw = "--smtc-ctrl-composer-container-background-acrylic-lum-blend"; + +// @public (undocumented) +export const ctrlComposerContainerBackgroundDefault = "var(--smtc-ctrl-composer-container-background-default)"; + +// @public (undocumented) +export const ctrlComposerContainerBackgroundDefaultRaw = "--smtc-ctrl-composer-container-background-default"; + +// @public (undocumented) +export const ctrlComposerContainerCorner = "var(--smtc-ctrl-composer-container-corner)"; + +// @public (undocumented) +export const ctrlComposerContainerCornerRaw = "--smtc-ctrl-composer-container-corner"; + +// @public (undocumented) +export const ctrlComposerContainerShadow = "var(--smtc-ctrl-composer-container-shadow)"; + +// @public (undocumented) +export const ctrlComposerContainerShadowRaw = "--smtc-ctrl-composer-container-shadow"; + +// @public (undocumented) +export const ctrlComposerContainerStrokeDefault = "var(--smtc-ctrl-composer-container-stroke-default, unset)"; + +// @public (undocumented) +export const ctrlComposerContainerStrokeDefaultRaw = "--smtc-ctrl-composer-container-stroke-default"; + +// @public (undocumented) +export const ctrlComposerInputBackgroundDisabled = "var(--smtc-ctrl-composer-input-background-disabled)"; + +// @public (undocumented) +export const ctrlComposerInputBackgroundDisabledRaw = "--smtc-ctrl-composer-input-background-disabled"; + +// @public (undocumented) +export const ctrlComposerInputBackgroundHover = "var(--smtc-ctrl-composer-input-background-hover)"; + +// @public (undocumented) +export const ctrlComposerInputBackgroundHoverRaw = "--smtc-ctrl-composer-input-background-hover"; + +// @public (undocumented) +export const ctrlComposerInputBackgroundPressed = "var(--smtc-ctrl-composer-input-background-pressed)"; + +// @public (undocumented) +export const ctrlComposerInputBackgroundPressedRaw = "--smtc-ctrl-composer-input-background-pressed"; + +// @public (undocumented) +export const ctrlComposerInputBackgroundRest = "var(--smtc-ctrl-composer-input-background-rest)"; + +// @public (undocumented) +export const ctrlComposerInputBackgroundRestRaw = "--smtc-ctrl-composer-input-background-rest"; + +// @public (undocumented) +export const ctrlComposerInputBackgroundSelectedRest = "var(--smtc-ctrl-composer-input-background-selected-rest)"; + +// @public (undocumented) +export const ctrlComposerInputBackgroundSelectedRestRaw = "--smtc-ctrl-composer-input-background-selected-rest"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeDisabled = "var(--smtc-ctrl-composer-input-bottom-stroke-disabled, unset)"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeDisabledRaw = "--smtc-ctrl-composer-input-bottom-stroke-disabled"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeHover = "var(--smtc-ctrl-composer-input-bottom-stroke-hover, unset)"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeHoverRaw = "--smtc-ctrl-composer-input-bottom-stroke-hover"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokePressed = "var(--smtc-ctrl-composer-input-bottom-stroke-pressed, unset)"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokePressedRaw = "--smtc-ctrl-composer-input-bottom-stroke-pressed"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeRest = "var(--smtc-ctrl-composer-input-bottom-stroke-rest, unset)"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeRestRaw = "--smtc-ctrl-composer-input-bottom-stroke-rest"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeSelectedRest = "var(--smtc-ctrl-composer-input-bottom-stroke-selected-rest, unset)"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeSelectedRestRaw = "--smtc-ctrl-composer-input-bottom-stroke-selected-rest"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeWidthHover = "var(--smtc-ctrl-composer-input-bottom-stroke-width-hover)"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeWidthHoverRaw = "--smtc-ctrl-composer-input-bottom-stroke-width-hover"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeWidthPressed = "var(--smtc-ctrl-composer-input-bottom-stroke-width-pressed)"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeWidthPressedRaw = "--smtc-ctrl-composer-input-bottom-stroke-width-pressed"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeWidthRest = "var(--smtc-ctrl-composer-input-bottom-stroke-width-rest)"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeWidthRestRaw = "--smtc-ctrl-composer-input-bottom-stroke-width-rest"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeWidthSelectedRest = "var(--smtc-ctrl-composer-input-bottom-stroke-width-selected-rest)"; + +// @public (undocumented) +export const ctrlComposerInputBottomStrokeWidthSelectedRestRaw = "--smtc-ctrl-composer-input-bottom-stroke-width-selected-rest"; + +// @public (undocumented) +export const ctrlComposerInputCornerHover = "var(--smtc-ctrl-composer-input-corner-hover)"; + +// @public (undocumented) +export const ctrlComposerInputCornerHoverRaw = "--smtc-ctrl-composer-input-corner-hover"; + +// @public (undocumented) +export const ctrlComposerInputCornerPressed = "var(--smtc-ctrl-composer-input-corner-pressed)"; + +// @public (undocumented) +export const ctrlComposerInputCornerPressedRaw = "--smtc-ctrl-composer-input-corner-pressed"; + +// @public (undocumented) +export const ctrlComposerInputCornerRest = "var(--smtc-ctrl-composer-input-corner-rest)"; + +// @public (undocumented) +export const ctrlComposerInputCornerRestRaw = "--smtc-ctrl-composer-input-corner-rest"; + +// @public (undocumented) +export const ctrlComposerInputShadow = "var(--smtc-ctrl-composer-input-shadow)"; + +// @public (undocumented) +export const ctrlComposerInputShadowRaw = "--smtc-ctrl-composer-input-shadow"; + +// @public (undocumented) +export const ctrlComposerInputStrokeDisabledUsesGradient = "var(--smtc-ctrl-composer-input-stroke-disabled-uses-gradient, unset)"; + +// @public (undocumented) +export const ctrlComposerInputStrokeDisabledUsesGradientRaw = "--smtc-ctrl-composer-input-stroke-disabled-uses-gradient"; + +// @public (undocumented) +export const ctrlComposerInputStrokeHoverUsesGradient = "var(--smtc-ctrl-composer-input-stroke-hover-uses-gradient, unset)"; + +// @public (undocumented) +export const ctrlComposerInputStrokeHoverUsesGradientRaw = "--smtc-ctrl-composer-input-stroke-hover-uses-gradient"; + +// @public (undocumented) +export const ctrlComposerInputStrokePressedUsesGradient = "var(--smtc-ctrl-composer-input-stroke-pressed-uses-gradient, unset)"; + +// @public (undocumented) +export const ctrlComposerInputStrokePressedUsesGradientRaw = "--smtc-ctrl-composer-input-stroke-pressed-uses-gradient"; + +// @public (undocumented) +export const ctrlComposerInputStrokeRest = "var(--smtc-ctrl-composer-input-stroke-rest, unset)"; + +// @public (undocumented) +export const ctrlComposerInputStrokeRestRaw = "--smtc-ctrl-composer-input-stroke-rest"; + +// @public (undocumented) +export const ctrlComposerInputStrokeSelectedRestUsesGradient = "var(--smtc-ctrl-composer-input-stroke-selected-rest-uses-gradient, unset)"; + +// @public (undocumented) +export const ctrlComposerInputStrokeSelectedRestUsesGradientRaw = "--smtc-ctrl-composer-input-stroke-selected-rest-uses-gradient"; + +// @public (undocumented) +export const ctrlComposerInputStrokeWidthHover = "var(--smtc-ctrl-composer-input-stroke-width-hover)"; + +// @public (undocumented) +export const ctrlComposerInputStrokeWidthHoverRaw = "--smtc-ctrl-composer-input-stroke-width-hover"; + +// @public (undocumented) +export const ctrlComposerInputStrokeWidthPressed = "var(--smtc-ctrl-composer-input-stroke-width-pressed)"; + +// @public (undocumented) +export const ctrlComposerInputStrokeWidthPressedRaw = "--smtc-ctrl-composer-input-stroke-width-pressed"; + +// @public (undocumented) +export const ctrlComposerInputStrokeWidthRest = "var(--smtc-ctrl-composer-input-stroke-width-rest)"; + +// @public (undocumented) +export const ctrlComposerInputStrokeWidthRestRaw = "--smtc-ctrl-composer-input-stroke-width-rest"; + +// @public (undocumented) +export const ctrlComposerInputStrokeWidthSelectedRest = "var(--smtc-ctrl-composer-input-stroke-width-selected-rest)"; + +// @public (undocumented) +export const ctrlComposerInputStrokeWidthSelectedRestRaw = "--smtc-ctrl-composer-input-stroke-width-selected-rest"; + +// @public (undocumented) +export const ctrlDialogBackground = "var(--smtc-ctrl-dialog-background)"; + +// @public (undocumented) +export const ctrlDialogBackgroundRaw = "--smtc-ctrl-dialog-background"; + +// @public (undocumented) +export const ctrlDialogBaseCorner = "var(--smtc-ctrl-dialog-base-corner, var(--smtc-corner-card-rest, var(--borderRadiusXLarge)))"; + +// @public (undocumented) +export const ctrlDialogBaseCornerRaw = "--smtc-ctrl-dialog-base-corner"; + +// @public (undocumented) +export const ctrlDialogBaseShadow = "var(--smtc-ctrl-dialog-base-shadow, var(--shadow64))"; + +// @public (undocumented) +export const ctrlDialogBaseShadowRaw = "--smtc-ctrl-dialog-base-shadow"; + +// @public +export const _ctrlDialogGapBetweenContentMedium = "var(--smtc-gap-between-content-medium, 8px)"; + +// @public (undocumented) +export const ctrlDialogLayerBackground = "var(--smtc-ctrl-dialog-layer-background, var(--smtc-background-layer-primary-solid, var(--colorNeutralBackground1)))"; + +// @public (undocumented) +export const ctrlDialogLayerBackgroundRaw = "--smtc-ctrl-dialog-layer-background"; + +// @public (undocumented) +export const ctrlDialogLayerPaddingBottom = "var(--smtc-ctrl-dialog-layer-padding-bottom)"; + +// @public (undocumented) +export const ctrlDialogLayerPaddingBottomRaw = "--smtc-ctrl-dialog-layer-padding-bottom"; + +// @public (undocumented) +export const ctrlDialogStroke = "var(--smtc-ctrl-dialog-stroke, var(--smtc-null-color, var(--colorNeutralStroke2)))"; + +// @public (undocumented) +export const ctrlDialogStrokeRaw = "--smtc-ctrl-dialog-stroke"; + +// @public (undocumented) +export const ctrlDividerFixedLineLength = "var(--smtc-ctrl-divider-fixed-line-length, var(--smtc-padding-content-align-default, 8px))"; + +// @public (undocumented) +export const ctrlDividerFixedLineLengthRaw = "--smtc-ctrl-divider-fixed-line-length"; + +// @public +export const _ctrlDividerForegroundSubtle = "var(--smtc-foreground-ctrl-hint-default, var(--smtc-null-color, var(--colorNeutralForeground3)))"; + +// @public (undocumented) +export const ctrlDragBackgroundColorBlend = "var(--smtc-ctrl-drag-background-color-blend)"; + +// @public (undocumented) +export const ctrlDragBackgroundColorBlendRaw = "--smtc-ctrl-drag-background-color-blend"; + +// @public (undocumented) +export const ctrlDragBackgroundLumBlend = "var(--smtc-ctrl-drag-background-lum-blend)"; + +// @public (undocumented) +export const ctrlDragBackgroundLumBlendRaw = "--smtc-ctrl-drag-background-lum-blend"; + +// @public (undocumented) +export const ctrlDragBackgroundSolid = "var(--smtc-ctrl-drag-background-solid)"; + +// @public (undocumented) +export const ctrlDragBackgroundSolidRaw = "--smtc-ctrl-drag-background-solid"; + +// @public (undocumented) +export const ctrlFabBackgroundDisabled = "var(--smtc-ctrl-fab-background-disabled)"; + +// @public (undocumented) +export const ctrlFabBackgroundDisabledRaw = "--smtc-ctrl-fab-background-disabled"; + +// @public (undocumented) +export const ctrlFabBackgroundHover = "var(--smtc-ctrl-fab-background-hover)"; + +// @public (undocumented) +export const ctrlFabBackgroundHoverRaw = "--smtc-ctrl-fab-background-hover"; + +// @public (undocumented) +export const ctrlFabBackgroundPressed = "var(--smtc-ctrl-fab-background-pressed)"; + +// @public (undocumented) +export const ctrlFabBackgroundPressedRaw = "--smtc-ctrl-fab-background-pressed"; + +// @public (undocumented) +export const ctrlFabBackgroundRest = "var(--smtc-ctrl-fab-background-rest)"; + +// @public (undocumented) +export const ctrlFabBackgroundRestRaw = "--smtc-ctrl-fab-background-rest"; + +// @public (undocumented) +export const ctrlFabCornerHover = "var(--smtc-ctrl-fab-corner-hover, var(--smtc-corner-circular))"; + +// @public (undocumented) +export const ctrlFabCornerHoverRaw = "--smtc-ctrl-fab-corner-hover"; + +// @public (undocumented) +export const ctrlFabCornerPressed = "var(--smtc-ctrl-fab-corner-pressed, var(--smtc-corner-circular))"; + +// @public (undocumented) +export const ctrlFabCornerPressedRaw = "--smtc-ctrl-fab-corner-pressed"; + +// @public (undocumented) +export const ctrlFabCornerRest = "var(--smtc-ctrl-fab-corner-rest, var(--smtc-corner-circular))"; + +// @public (undocumented) +export const ctrlFabCornerRestRaw = "--smtc-ctrl-fab-corner-rest"; + +// @public (undocumented) +export const ctrlFabForegroundDisabledNew = "var(--smtc-ctrl-fab-foreground-disabled-new, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; + +// @public (undocumented) +export const ctrlFabForegroundDisabledNewRaw = "--smtc-ctrl-fab-foreground-disabled-new"; + +// @public (undocumented) +export const ctrlFabForegroundRestNew = "var(--smtc-ctrl-fab-foreground-rest-new, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const ctrlFabForegroundRestNewRaw = "--smtc-ctrl-fab-foreground-rest-new"; + +// @public (undocumented) +export const ctrlFabShadowDisabled = "var(--smtc-ctrl-fab-shadow-disabled, var(--smtc-ctrl-fab-shadow-pressed))"; + +// @public (undocumented) +export const ctrlFabShadowDisabledRaw = "--smtc-ctrl-fab-shadow-disabled"; + +// @public (undocumented) +export const ctrlFabShadowHover = "var(--smtc-ctrl-fab-shadow-hover, var(--smtc-shadow-flyout))"; + +// @public (undocumented) +export const ctrlFabShadowHoverRaw = "--smtc-ctrl-fab-shadow-hover"; + +// @public (undocumented) +export const ctrlFabShadowPressed = "var(--smtc-ctrl-fab-shadow-pressed)"; + +// @public (undocumented) +export const ctrlFabShadowPressedRaw = "--smtc-ctrl-fab-shadow-pressed"; + +// @public (undocumented) +export const ctrlFabShadowRest = "var(--smtc-ctrl-fab-shadow-rest)"; + +// @public (undocumented) +export const ctrlFabShadowRestRaw = "--smtc-ctrl-fab-shadow-rest"; + +// @public +export const _ctrlFieldForegroundCtrlNeutralSecondaryRest = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3))"; + +// @public +export const _ctrlFieldGapBetweenContentXSmall = "var(--smtc-gap-between-content-x-small, var(--spacingVerticalXS))"; + +// @public +export const _ctrlFieldPaddingCtrlLgTextBottom = "var(--smtc-padding-ctrl-lg-text-bottom, var(--smtc-padding-ctrl-lg-text-top, 1px))"; + +// @public +export const _ctrlFieldPaddingCtrlLgTextBottomHorizontal = "var(--smtc-padding-ctrl-lg-text-bottom, var(--smtc-padding-ctrl-lg-text-top, 9px))"; + +// @public +export const _ctrlFieldPaddingCtrlLgTextTop = "var(--smtc-padding-ctrl-lg-text-top, 1px)"; + +// @public +export const _ctrlFieldPaddingCtrlLgTextTopHorizontal = "var(--smtc-padding-ctrl-lg-text-top, 9px)"; + +// @public +export const _ctrlFieldPaddingCtrlSmTextBottom = "var(--smtc-padding-ctrl-sm-text-bottom, var(--smtc-padding-ctrl-sm-text-top, var(--spacingVerticalXS)))"; + +// @public +export const _ctrlFieldPaddingCtrlSmTextTop = "var(--smtc-padding-ctrl-sm-text-top, var(--spacingVerticalXS))"; + +// @public +export const _ctrlFieldPaddingCtrlTextBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, var(--spacingVerticalXXS)))"; + +// @public +export const _ctrlFieldPaddingCtrlTextBottomHorizontal = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, var(--spacingVerticalSNudge)))"; + +// @public +export const _ctrlFieldPaddingCtrlTextSide = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalM))"; + +// @public +export const _ctrlFieldPaddingCtrlTextTop = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalXXS))"; + +// @public +export const _ctrlFieldPaddingCtrlTextTopHorizontal = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalSNudge))"; + +// @public +export const _ctrlFieldStatusDangerTintForeground = "var(--smtc-status-danger-tint-foreground, var(--colorPaletteRedForeground1))"; + +// @public +export const _ctrlFieldStatusSuccessTintForeground = "var(--smtc-status-success-tint-foreground, var(--colorPaletteGreenForeground1))"; + +// @public +export const _ctrlFieldStatusWarningTintForeground = "var(--smtc-status-warning-tint-foreground, var(--colorPaletteDarkOrangeForeground1))"; + +// @public (undocumented) +export const ctrlFocusInnerStroke = "var(--smtc-ctrl-focus-inner-stroke, var(--colorStrokeFocus2))"; + +// @public (undocumented) +export const ctrlFocusInnerStrokeRaw = "--smtc-ctrl-focus-inner-stroke"; + +// @public (undocumented) +export const ctrlFocusInnerStrokeWidth = "var(--smtc-ctrl-focus-inner-stroke-width, var(--smtc-stroke-width-default, var(--strokeWidthThin)))"; + +// @public (undocumented) +export const ctrlFocusInnerStrokeWidthRaw = "--smtc-ctrl-focus-inner-stroke-width"; + +// @public (undocumented) +export const ctrlFocusOuterStroke = "var(--smtc-ctrl-focus-outer-stroke, var(--smtc-background-ctrl-brand-rest, var(--colorTransparentStroke)))"; + +// @public +export const _ctrlFocusOuterStrokeInteractive = "var(--smtc-ctrl-focus-outer-stroke, var(--smtc-background-ctrl-brand-rest, var(--colorTransparentStrokeInteractive)))"; + +// @public (undocumented) +export const ctrlFocusOuterStrokeRaw = "--smtc-ctrl-focus-outer-stroke"; + +// @public (undocumented) +export const ctrlFocusOuterStrokeWidth = "var(--smtc-ctrl-focus-outer-stroke-width, var(--strokeWidthThick))"; + +// @public (undocumented) +export const ctrlFocusOuterStrokeWidthRaw = "--smtc-ctrl-focus-outer-stroke-width"; + +// @public +export const _ctrlInfoLabelForegroundColorSelected = "var(--smtc-foreground-ctrl-active-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorNeutralForeground2BrandSelected)))"; + +// @public (undocumented) +export const ctrlInputBackgroundDisabled = "var(--smtc-ctrl-input-background-disabled, var(--smtc-background-ctrl-neutral-disabled, var(--colorNeutralBackgroundDisabled)))"; + +// @public (undocumented) +export const ctrlInputBackgroundDisabledRaw = "--smtc-ctrl-input-background-disabled"; + +// @public (undocumented) +export const ctrlInputBackgroundError = "var(--smtc-ctrl-input-background-error, var(--smtc-background-ctrl-neutral-rest, var(--colorPaletteRedBorder2)))"; + +// @public (undocumented) +export const ctrlInputBackgroundErrorRaw = "--smtc-ctrl-input-background-error"; + +// @public (undocumented) +export const ctrlInputBackgroundHover = "var(--smtc-ctrl-input-background-hover, var(--smtc-background-ctrl-neutral-hover))"; + +// @public (undocumented) +export const ctrlInputBackgroundHoverRaw = "--smtc-ctrl-input-background-hover"; + +// @public (undocumented) +export const ctrlInputBackgroundPressed = "var(--smtc-ctrl-input-background-pressed, var(--smtc-background-ctrl-neutral-pressed))"; + +// @public (undocumented) +export const ctrlInputBackgroundPressedRaw = "--smtc-ctrl-input-background-pressed"; + +// @public (undocumented) +export const ctrlInputBackgroundRest = "var(--smtc-ctrl-input-background-rest, var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground1)))"; + +// @public +export const _ctrlInputBackgroundRestDarker = "var(--smtc-ctrl-input-background-rest, var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground3)))"; + +// @public +export const _ctrlInputBackgroundRestLighter = "var(--smtc-ctrl-input-background-rest, var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground1)))"; + +// @public (undocumented) +export const ctrlInputBackgroundRestRaw = "--smtc-ctrl-input-background-rest"; + +// @public (undocumented) +export const ctrlInputBackgroundSelected = "var(--smtc-ctrl-input-background-selected, var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground1)))"; + +// @public (undocumented) +export const ctrlInputBackgroundSelectedRaw = "--smtc-ctrl-input-background-selected"; + +// @public +export const _ctrlInputBottomLineStrokeBrandPressed = "var(--smtc-ctrl-input-bottom-line-stroke-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorCompoundBrandStrokePressed)))"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeDisabled = "var(--smtc-ctrl-input-bottom-line-stroke-disabled, unset)"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeDisabledRaw = "--smtc-ctrl-input-bottom-line-stroke-disabled"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeError = "var(--smtc-ctrl-input-bottom-line-stroke-error, unset)"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeErrorRaw = "--smtc-ctrl-input-bottom-line-stroke-error"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeHover = "var(--smtc-ctrl-input-bottom-line-stroke-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessibleHover)))"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeHoverRaw = "--smtc-ctrl-input-bottom-line-stroke-hover"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokePressed = "var(--smtc-ctrl-input-bottom-line-stroke-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessiblePressed)))"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokePressedRaw = "--smtc-ctrl-input-bottom-line-stroke-pressed"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeRest = "var(--smtc-ctrl-input-bottom-line-stroke-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessible)))"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeRestRaw = "--smtc-ctrl-input-bottom-line-stroke-rest"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeSelected = "var(--smtc-ctrl-input-bottom-line-stroke-selected, var(--smtc-background-ctrl-brand-rest, var(--colorCompoundBrandStroke)))"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeSelectedRaw = "--smtc-ctrl-input-bottom-line-stroke-selected"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeWidthHover = "var(--smtc-ctrl-input-bottom-line-stroke-width-hover, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeWidthHoverRaw = "--smtc-ctrl-input-bottom-line-stroke-width-hover"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeWidthPressed = "var(--smtc-ctrl-input-bottom-line-stroke-width-pressed, var(--smtc-ctrl-input-bottom-line-stroke-width-selected))"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeWidthPressedRaw = "--smtc-ctrl-input-bottom-line-stroke-width-pressed"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeWidthRest = "var(--smtc-ctrl-input-bottom-line-stroke-width-rest, var(--smtc-stroke-width-default, var(--strokeWidthThin)))"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeWidthRestRaw = "--smtc-ctrl-input-bottom-line-stroke-width-rest"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeWidthSelected = "var(--smtc-ctrl-input-bottom-line-stroke-width-selected, var(--strokeWidthThick))"; + +// @public (undocumented) +export const ctrlInputBottomLineStrokeWidthSelectedRaw = "--smtc-ctrl-input-bottom-line-stroke-width-selected"; + +// @public +export const _ctrlInputNeutralForegroundPlaceholder = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground4))"; + +// @public (undocumented) +export const ctrlInputStrokeDisabled = "var(--smtc-ctrl-input-stroke-disabled, var(--smtc-stroke-ctrl-on-outline-disabled, var(--colorNeutralStrokeDisabled)))"; + +// @public (undocumented) +export const ctrlInputStrokeDisabledRaw = "--smtc-ctrl-input-stroke-disabled"; + +// @public (undocumented) +export const ctrlInputStrokeError = "var(--smtc-ctrl-input-stroke-error, var(--smtc-status-danger-stroke))"; + +// @public (undocumented) +export const ctrlInputStrokeErrorRaw = "--smtc-ctrl-input-stroke-error"; + +// @public (undocumented) +export const ctrlInputStrokeHover = "var(--smtc-ctrl-input-stroke-hover, var(--smtc-stroke-ctrl-on-outline-hover, var(--colorNeutralStroke1Hover)))"; + +// @public (undocumented) +export const ctrlInputStrokeHoverRaw = "--smtc-ctrl-input-stroke-hover"; + +// @public (undocumented) +export const ctrlInputStrokePressed = "var(--smtc-ctrl-input-stroke-pressed, var(--smtc-stroke-ctrl-on-outline-pressed, var(--colorNeutralStroke1Pressed)))"; + +// @public (undocumented) +export const ctrlInputStrokePressedRaw = "--smtc-ctrl-input-stroke-pressed"; + +// @public (undocumented) +export const ctrlInputStrokeRest = "var(--smtc-ctrl-input-stroke-rest, var(--smtc-stroke-ctrl-on-outline-rest, var(--colorNeutralStroke1)))"; + +// @public (undocumented) +export const ctrlInputStrokeRestRaw = "--smtc-ctrl-input-stroke-rest"; + +// @public (undocumented) +export const ctrlInputStrokeSelected = "var(--smtc-ctrl-input-stroke-selected, var(--smtc-stroke-ctrl-on-outline-rest, var(--colorNeutralStroke1)))"; + +// @public (undocumented) +export const ctrlInputStrokeSelectedRaw = "--smtc-ctrl-input-stroke-selected"; + +// @public (undocumented) +export const ctrlInputStrokeWidthHover = "var(--smtc-ctrl-input-stroke-width-hover, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const ctrlInputStrokeWidthHoverRaw = "--smtc-ctrl-input-stroke-width-hover"; + +// @public (undocumented) +export const ctrlInputStrokeWidthPressed = "var(--smtc-ctrl-input-stroke-width-pressed, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const ctrlInputStrokeWidthPressedRaw = "--smtc-ctrl-input-stroke-width-pressed"; + +// @public (undocumented) +export const ctrlInputStrokeWidthRest = "var(--smtc-ctrl-input-stroke-width-rest, var(--smtc-stroke-width-default, var(--strokeWidthThin)))"; + +// @public (undocumented) +export const ctrlInputStrokeWidthRestRaw = "--smtc-ctrl-input-stroke-width-rest"; + +// @public (undocumented) +export const ctrlInputStrokeWidthSelected = "var(--smtc-ctrl-input-stroke-width-selected)"; + +// @public (undocumented) +export const ctrlInputStrokeWidthSelectedRaw = "--smtc-ctrl-input-stroke-width-selected"; + +// @public (undocumented) +export const ctrlInputTextSelectionBackground = "var(--smtc-ctrl-input-text-selection-background, var(--smtc-background-ctrl-brand-rest))"; + +// @public (undocumented) +export const ctrlInputTextSelectionBackgroundRaw = "--smtc-ctrl-input-text-selection-background"; + +// @public (undocumented) +export const ctrlInputTextSelectionForeground = "var(--smtc-ctrl-input-text-selection-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; + +// @public (undocumented) +export const ctrlInputTextSelectionForegroundRaw = "--smtc-ctrl-input-text-selection-foreground"; + +// @public (undocumented) +export const ctrlLinkForegroundBrandHover = "var(--smtc-ctrl-link-foreground-brand-hover, var(--smtc-foreground-ctrl-brand-hover, var(--colorBrandForegroundLinkHover)))"; + +// @public (undocumented) +export const ctrlLinkForegroundBrandHoverRaw = "--smtc-ctrl-link-foreground-brand-hover"; + +// @public (undocumented) +export const ctrlLinkForegroundBrandPressed = "var(--smtc-ctrl-link-foreground-brand-pressed, var(--smtc-foreground-ctrl-brand-pressed, var(--colorBrandForegroundLinkPressed)))"; + +// @public (undocumented) +export const ctrlLinkForegroundBrandPressedRaw = "--smtc-ctrl-link-foreground-brand-pressed"; + +// @public (undocumented) +export const ctrlLinkForegroundBrandRest = "var(--smtc-ctrl-link-foreground-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorBrandForegroundLink)))"; + +// @public (undocumented) +export const ctrlLinkForegroundBrandRestRaw = "--smtc-ctrl-link-foreground-brand-rest"; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralHover = "var(--smtc-ctrl-link-foreground-neutral-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2Hover)))"; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralHoverRaw = "--smtc-ctrl-link-foreground-neutral-hover"; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralPressed = "var(--smtc-ctrl-link-foreground-neutral-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2Pressed)))"; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralPressedRaw = "--smtc-ctrl-link-foreground-neutral-pressed"; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralRest = "var(--smtc-ctrl-link-foreground-neutral-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralRestRaw = "--smtc-ctrl-link-foreground-neutral-rest"; + +// @public (undocumented) +export const ctrlLinkInlineShowUnderlineAtRest = "var(--smtc-ctrl-link-inline-show-underline-at-rest)"; + +// @public (undocumented) +export const ctrlLinkInlineShowUnderlineAtRestRaw = "--smtc-ctrl-link-inline-show-underline-at-rest"; + +// @public (undocumented) +export const ctrlLinkInlineStrokeWidthHover = "var(--smtc-ctrl-link-inline-stroke-width-hover, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const ctrlLinkInlineStrokeWidthHoverRaw = "--smtc-ctrl-link-inline-stroke-width-hover"; + +// @public (undocumented) +export const ctrlLinkInlineStrokeWidthRest = "var(--smtc-ctrl-link-inline-stroke-width-rest, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const ctrlLinkInlineStrokeWidthRestRaw = "--smtc-ctrl-link-inline-stroke-width-rest"; + +// @public (undocumented) +export const ctrlLinkInlineUnderlineDashed = "var(--smtc-ctrl-link-inline-underline-dashed)"; + +// @public (undocumented) +export const ctrlLinkInlineUnderlineDashedRaw = "--smtc-ctrl-link-inline-underline-dashed"; + +// @public (undocumented) +export const ctrlLinkOnPageShowUnderlineAtRest = "var(--smtc-ctrl-link-on-page-show-underline-at-rest)"; + +// @public (undocumented) +export const ctrlLinkOnPageShowUnderlineAtRestRaw = "--smtc-ctrl-link-on-page-show-underline-at-rest"; + +// @public (undocumented) +export const ctrlLinkOnPageStrokeWidthHover = "var(--smtc-ctrl-link-on-page-stroke-width-hover, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const ctrlLinkOnPageStrokeWidthHoverRaw = "--smtc-ctrl-link-on-page-stroke-width-hover"; + +// @public (undocumented) +export const ctrlLinkOnPageStrokeWidthRest = "var(--smtc-ctrl-link-on-page-stroke-width-rest, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const ctrlLinkOnPageStrokeWidthRestRaw = "--smtc-ctrl-link-on-page-stroke-width-rest"; + +// @public (undocumented) +export const ctrlLinkOnPageUnderlineDashed = "var(--smtc-ctrl-link-on-page-underline-dashed)"; + +// @public (undocumented) +export const ctrlLinkOnPageUnderlineDashedRaw = "--smtc-ctrl-link-on-page-underline-dashed"; + +// @public +export const _ctrlListBackgroundColorHover = "var(--smtc-background-ctrl-subtle-hover, var(--colorTransparentBackground))"; + +// @public +export const _ctrlListBackgroundColorPressed = "var(--smtc-background-ctrl-subtle-pressed, var(--colorTransparentBackground))"; + +// @public +export const _ctrlListBackgroundColorRest = "var(--smtc-background-ctrl-subtle-rest, var(--smtc-null-color, var(--colorTransparentBackground)))"; + +// @public (undocumented) +export const ctrlListBackgroundSelectedDisabled = "var(--smtc-ctrl-list-background-selected-disabled, var(--smtc-background-ctrl-subtle-disabled))"; + +// @public (undocumented) +export const ctrlListBackgroundSelectedDisabledRaw = "--smtc-ctrl-list-background-selected-disabled"; + +// @public (undocumented) +export const ctrlListBackgroundSelectedHover = "var(--smtc-ctrl-list-background-selected-hover, var(--smtc-background-ctrl-subtle-hover))"; + +// @public (undocumented) +export const ctrlListBackgroundSelectedHoverRaw = "--smtc-ctrl-list-background-selected-hover"; + +// @public (undocumented) +export const ctrlListBackgroundSelectedPressed = "var(--smtc-ctrl-list-background-selected-pressed, var(--smtc-background-ctrl-subtle-pressed))"; + +// @public (undocumented) +export const ctrlListBackgroundSelectedPressedRaw = "--smtc-ctrl-list-background-selected-pressed"; + +// @public (undocumented) +export const ctrlListBackgroundSelectedRest = "var(--smtc-ctrl-list-background-selected-rest, var(--smtc-background-ctrl-subtle-rest))"; + +// @public (undocumented) +export const ctrlListBackgroundSelectedRestRaw = "--smtc-ctrl-list-background-selected-rest"; + +// @public (undocumented) +export const ctrlListChoiceBackgroundDisabled = "var(--smtc-ctrl-list-choice-background-disabled, unset)"; + +// @public (undocumented) +export const ctrlListChoiceBackgroundDisabledRaw = "--smtc-ctrl-list-choice-background-disabled"; + +// @public (undocumented) +export const ctrlListChoiceBackgroundRest = "var(--smtc-ctrl-list-choice-background-rest, unset)"; + +// @public (undocumented) +export const ctrlListChoiceBackgroundRestRaw = "--smtc-ctrl-list-choice-background-rest"; + +// @public (undocumented) +export const ctrlListChoiceBackgroundSelectedDisabled = "var(--smtc-ctrl-list-choice-background-selected-disabled, unset)"; + +// @public (undocumented) +export const ctrlListChoiceBackgroundSelectedDisabledRaw = "--smtc-ctrl-list-choice-background-selected-disabled"; + +// @public (undocumented) +export const ctrlListChoiceBackgroundSelectedRest = "var(--smtc-ctrl-list-choice-background-selected-rest, unset)"; + +// @public (undocumented) +export const ctrlListChoiceBackgroundSelectedRestRaw = "--smtc-ctrl-list-choice-background-selected-rest"; + +// @public (undocumented) +export const ctrlListChoiceCheckboxCorner = "var(--smtc-ctrl-list-choice-checkbox-corner, var(--smtc-ctrl-choice-checkbox-corner))"; + +// @public (undocumented) +export const ctrlListChoiceCheckboxCornerRaw = "--smtc-ctrl-list-choice-checkbox-corner"; + +// @public (undocumented) +export const ctrlListChoiceCheckboxIconSize = "var(--smtc-ctrl-list-choice-checkbox-icon-size, var(--smtc-size-ctrl-icon-secondary))"; + +// @public (undocumented) +export const ctrlListChoiceCheckboxIconSizeRaw = "--smtc-ctrl-list-choice-checkbox-icon-size"; + +// @public (undocumented) +export const ctrlListChoiceDotSize = "var(--smtc-ctrl-list-choice-dot-size)"; + +// @public (undocumented) +export const ctrlListChoiceDotSizeRaw = "--smtc-ctrl-list-choice-dot-size"; + +// @public (undocumented) +export const ctrlListChoiceForegroundHover = "var(--smtc-ctrl-list-choice-foreground-hover, var(--smtc-foreground-ctrl-hint-default))"; + +// @public (undocumented) +export const ctrlListChoiceForegroundHoverRaw = "--smtc-ctrl-list-choice-foreground-hover"; + +// @public (undocumented) +export const ctrlListChoiceForegroundSelectedDisabled = "var(--smtc-ctrl-list-choice-foreground-selected-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; + +// @public (undocumented) +export const ctrlListChoiceForegroundSelectedDisabledRaw = "--smtc-ctrl-list-choice-foreground-selected-disabled"; + +// @public (undocumented) +export const ctrlListChoiceForegroundSelectedRest = "var(--smtc-ctrl-list-choice-foreground-selected-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const ctrlListChoiceForegroundSelectedRestRaw = "--smtc-ctrl-list-choice-foreground-selected-rest"; + +// @public (undocumented) +export const ctrlListChoiceStrokeDisabled = "var(--smtc-ctrl-list-choice-stroke-disabled, unset)"; + +// @public (undocumented) +export const ctrlListChoiceStrokeDisabledRaw = "--smtc-ctrl-list-choice-stroke-disabled"; + +// @public (undocumented) +export const ctrlListChoiceStrokeRest = "var(--smtc-ctrl-list-choice-stroke-rest, unset)"; + +// @public (undocumented) +export const ctrlListChoiceStrokeRestRaw = "--smtc-ctrl-list-choice-stroke-rest"; + +// @public (undocumented) +export const ctrlListChoiceStrokeSelectedDisabled = "var(--smtc-ctrl-list-choice-stroke-selected-disabled, unset)"; + +// @public (undocumented) +export const ctrlListChoiceStrokeSelectedDisabledRaw = "--smtc-ctrl-list-choice-stroke-selected-disabled"; + +// @public (undocumented) +export const ctrlListChoiceStrokeSelectedRest = "var(--smtc-ctrl-list-choice-stroke-selected-rest, unset)"; + +// @public (undocumented) +export const ctrlListChoiceStrokeSelectedRestRaw = "--smtc-ctrl-list-choice-stroke-selected-rest"; + +// @public (undocumented) +export const ctrlListCornerHover = "var(--smtc-ctrl-list-corner-hover, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; + +// @public (undocumented) +export const ctrlListCornerHoverRaw = "--smtc-ctrl-list-corner-hover"; + +// @public (undocumented) +export const ctrlListCornerPressed = "var(--smtc-ctrl-list-corner-pressed, var(--smtc-corner-ctrl-rest))"; + +// @public (undocumented) +export const ctrlListCornerPressedRaw = "--smtc-ctrl-list-corner-pressed"; + +// @public (undocumented) +export const ctrlListCornerRest = "var(--smtc-ctrl-list-corner-rest, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; + +// @public (undocumented) +export const ctrlListCornerRestRaw = "--smtc-ctrl-list-corner-rest"; + +// @public +export const _ctrlListForegroundColorHover = "var(--smtc-foreground-ctrl-on-subtle-hover, var(--smtc-foreground-ctrl-neutral-primary-hover, var(--colorNeutralForeground1)))"; + +// @public +export const _ctrlListForegroundColorPressed = "var(--smtc-foreground-ctrl-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-pressed, var(--colorNeutralForeground1)))"; + +// @public +export const _ctrlListForegroundColorRest = "var(--smtc-foreground-ctrl-on-subtle-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground1)))"; + +// @public (undocumented) +export const ctrlListForegroundSelectedDisabled = "var(--smtc-ctrl-list-foreground-selected-disabled, var(--smtc-background-ctrl-subtle-disabled))"; + +// @public (undocumented) +export const ctrlListForegroundSelectedDisabledRaw = "--smtc-ctrl-list-foreground-selected-disabled"; + +// @public (undocumented) +export const ctrlListForegroundSelectedHover = "var(--smtc-ctrl-list-foreground-selected-hover, var(--smtc-background-ctrl-subtle-hover))"; + +// @public (undocumented) +export const ctrlListForegroundSelectedHoverRaw = "--smtc-ctrl-list-foreground-selected-hover"; + +// @public (undocumented) +export const ctrlListForegroundSelectedPressed = "var(--smtc-ctrl-list-foreground-selected-pressed, var(--smtc-background-ctrl-subtle-pressed))"; + +// @public (undocumented) +export const ctrlListForegroundSelectedPressedRaw = "--smtc-ctrl-list-foreground-selected-pressed"; + +// @public (undocumented) +export const ctrlListForegroundSelectedRest = "var(--smtc-ctrl-list-foreground-selected-rest, var(--smtc-background-ctrl-subtle-rest))"; + +// @public (undocumented) +export const ctrlListForegroundSelectedRestRaw = "--smtc-ctrl-list-foreground-selected-rest"; + +// @public (undocumented) +export const ctrlListIndentLevel1 = "var(--smtc-ctrl-list-indent-level1, var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalXXL)))"; + +// @public (undocumented) +export const ctrlListIndentLevel1Raw = "--smtc-ctrl-list-indent-level1"; + +// @public (undocumented) +export const ctrlListIndentLevel2 = "var(--smtc-ctrl-list-indent-level2)"; + +// @public (undocumented) +export const ctrlListIndentLevel2Raw = "--smtc-ctrl-list-indent-level2"; + +// @public (undocumented) +export const ctrlListIndentLevel3 = "var(--smtc-ctrl-list-indent-level3)"; + +// @public (undocumented) +export const ctrlListIndentLevel3Raw = "--smtc-ctrl-list-indent-level3"; + +// @public +export const _ctrlListItemStroke = "var(--smtc-stroke-width-ctrl-outline-rest, var(--smtc-stroke-width-default, var(--colorStrokeFocus2)))"; + +// @public (undocumented) +export const ctrlListLgCornerHover = "var(--smtc-ctrl-list-lg-corner-hover, var(--smtc-corner-ctrl-lg-rest))"; + +// @public (undocumented) +export const ctrlListLgCornerHoverRaw = "--smtc-ctrl-list-lg-corner-hover"; + +// @public (undocumented) +export const ctrlListLgCornerPressed = "var(--smtc-ctrl-list-lg-corner-pressed, var(--smtc-corner-ctrl-lg-rest))"; + +// @public (undocumented) +export const ctrlListLgCornerPressedRaw = "--smtc-ctrl-list-lg-corner-pressed"; + +// @public (undocumented) +export const ctrlListLgCornerRest = "var(--smtc-ctrl-list-lg-corner-rest, var(--smtc-corner-ctrl-lg-rest))"; + +// @public (undocumented) +export const ctrlListLgCornerRestRaw = "--smtc-ctrl-list-lg-corner-rest"; + +// @public (undocumented) +export const ctrlListLgIndentLevel1 = "var(--smtc-ctrl-list-lg-indent-level1, var(--smtc-padding-ctrl-lg-horizontal-default))"; + +// @public (undocumented) +export const ctrlListLgIndentLevel1Raw = "--smtc-ctrl-list-lg-indent-level1"; + +// @public (undocumented) +export const ctrlListLgIndentLevel2 = "var(--smtc-ctrl-list-lg-indent-level2)"; + +// @public (undocumented) +export const ctrlListLgIndentLevel2Raw = "--smtc-ctrl-list-lg-indent-level2"; + +// @public (undocumented) +export const ctrlListLgIndentLevel3 = "var(--smtc-ctrl-list-lg-indent-level3)"; + +// @public (undocumented) +export const ctrlListLgIndentLevel3Raw = "--smtc-ctrl-list-lg-indent-level3"; + +// @public (undocumented) +export const ctrlListPillFullWidth = "var(--smtc-ctrl-list-pill-full-width)"; + +// @public (undocumented) +export const ctrlListPillFullWidthRaw = "--smtc-ctrl-list-pill-full-width"; + +// @public (undocumented) +export const ctrlListPillLengthHint = "var(--smtc-ctrl-list-pill-length-hint, var(--smtc-ctrl-list-pill-length-rest))"; + +// @public (undocumented) +export const ctrlListPillLengthHintRaw = "--smtc-ctrl-list-pill-length-hint"; + +// @public (undocumented) +export const ctrlListPillLengthHover = "var(--smtc-ctrl-list-pill-length-hover, var(--smtc-ctrl-list-pill-length-rest))"; + +// @public (undocumented) +export const ctrlListPillLengthHoverRaw = "--smtc-ctrl-list-pill-length-hover"; + +// @public (undocumented) +export const ctrlListPillLengthPressed = "var(--smtc-ctrl-list-pill-length-pressed, var(--smtc-ctrl-list-pill-length-rest))"; + +// @public (undocumented) +export const ctrlListPillLengthPressedRaw = "--smtc-ctrl-list-pill-length-pressed"; + +// @public (undocumented) +export const ctrlListPillLengthRest = "var(--smtc-ctrl-list-pill-length-rest)"; + +// @public (undocumented) +export const ctrlListPillLengthRestRaw = "--smtc-ctrl-list-pill-length-rest"; + +// @public (undocumented) +export const ctrlListPillStretchPaddingDefault = "var(--smtc-ctrl-list-pill-stretch-padding-default)"; + +// @public (undocumented) +export const ctrlListPillStretchPaddingDefaultRaw = "--smtc-ctrl-list-pill-stretch-padding-default"; + +// @public (undocumented) +export const ctrlListPillStretchPaddingHint = "var(--smtc-ctrl-list-pill-stretch-padding-hint)"; + +// @public (undocumented) +export const ctrlListPillStretchPaddingHintRaw = "--smtc-ctrl-list-pill-stretch-padding-hint"; + +// @public (undocumented) +export const ctrlListPillWidth = "var(--smtc-ctrl-list-pill-width, var(--strokeWidthThicker))"; + +// @public (undocumented) +export const ctrlListPillWidthRaw = "--smtc-ctrl-list-pill-width"; + +// @public (undocumented) +export const ctrlListShadowSelected = "var(--smtc-ctrl-list-shadow-selected)"; + +// @public (undocumented) +export const ctrlListShadowSelectedRaw = "--smtc-ctrl-list-shadow-selected"; + +// @public (undocumented) +export const ctrlListSmCornerHover = "var(--smtc-ctrl-list-sm-corner-hover, var(--smtc-corner-ctrl-sm-rest))"; + +// @public (undocumented) +export const ctrlListSmCornerHoverRaw = "--smtc-ctrl-list-sm-corner-hover"; + +// @public (undocumented) +export const ctrlListSmCornerPressed = "var(--smtc-ctrl-list-sm-corner-pressed, var(--smtc-corner-ctrl-sm-rest))"; + +// @public (undocumented) +export const ctrlListSmCornerPressedRaw = "--smtc-ctrl-list-sm-corner-pressed"; + +// @public (undocumented) +export const ctrlListSmCornerRest = "var(--smtc-ctrl-list-sm-corner-rest, var(--smtc-corner-ctrl-sm-rest))"; + +// @public (undocumented) +export const ctrlListSmCornerRestRaw = "--smtc-ctrl-list-sm-corner-rest"; + +// @public (undocumented) +export const ctrlListSmIndentLevel1 = "var(--smtc-ctrl-list-sm-indent-level1, var(--smtc-padding-ctrl-sm-horizontal-default))"; + +// @public (undocumented) +export const ctrlListSmIndentLevel1Raw = "--smtc-ctrl-list-sm-indent-level1"; + +// @public (undocumented) +export const ctrlListSmIndentLevel2 = "var(--smtc-ctrl-list-sm-indent-level2)"; + +// @public (undocumented) +export const ctrlListSmIndentLevel2Raw = "--smtc-ctrl-list-sm-indent-level2"; + +// @public (undocumented) +export const ctrlListSmIndentLevel3 = "var(--smtc-ctrl-list-sm-indent-level3)"; + +// @public (undocumented) +export const ctrlListSmIndentLevel3Raw = "--smtc-ctrl-list-sm-indent-level3"; + +// @public (undocumented) +export const ctrlListSplitDividerPaddingInset = "var(--smtc-ctrl-list-split-divider-padding-inset)"; + +// @public (undocumented) +export const ctrlListSplitDividerPaddingInsetRaw = "--smtc-ctrl-list-split-divider-padding-inset"; + +// @public (undocumented) +export const ctrlListSplitDividerShowDivider = "var(--smtc-ctrl-list-split-divider-show-divider)"; + +// @public (undocumented) +export const ctrlListSplitDividerShowDividerRaw = "--smtc-ctrl-list-split-divider-show-divider"; + +// @public (undocumented) +export const ctrlListSplitDividerStroke = "var(--smtc-ctrl-list-split-divider-stroke, var(--smtc-stroke-ctrl-divider-on-neutral))"; + +// @public (undocumented) +export const ctrlListSplitDividerStrokeRaw = "--smtc-ctrl-list-split-divider-stroke"; + +// @public (undocumented) +export const ctrlLiteFilterBackgroundSelected = "var(--smtc-ctrl-lite-filter-background-selected, var(--smtc-background-ctrl-brand-rest))"; + +// @public (undocumented) +export const ctrlLiteFilterBackgroundSelectedRaw = "--smtc-ctrl-lite-filter-background-selected"; + +// @public (undocumented) +export const ctrlLiteFilterForegroundSelected = "var(--smtc-ctrl-lite-filter-foreground-selected, var(--smtc-foreground-ctrl-on-brand-rest))"; + +// @public (undocumented) +export const ctrlLiteFilterForegroundSelectedRaw = "--smtc-ctrl-lite-filter-foreground-selected"; + +// @public (undocumented) +export const ctrlLiteFilterStrokeSelected = "var(--smtc-ctrl-lite-filter-stroke-selected, var(--smtc-stroke-ctrl-on-brand-rest))"; + +// @public (undocumented) +export const ctrlLiteFilterStrokeSelectedRaw = "--smtc-ctrl-lite-filter-stroke-selected"; + +// @public (undocumented) +export const ctrlLiteFilterStrokeWidthSelected = "var(--smtc-ctrl-lite-filter-stroke-width-selected, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const ctrlLiteFilterStrokeWidthSelectedRaw = "--smtc-ctrl-lite-filter-stroke-width-selected"; + +// @public +export const _ctrlMenuGroupHeaderColor = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3))"; + +// @public +export const _ctrlMenuGroupHeaderFontWeight = "var(--smtc-text-style-default-regular-weight, var(--fontWeightSemibold))"; + +// @public +export const _ctrlMenuGroupHeaderHeight = "var(--smtc-size-ctrl-default, 32px)"; + +// @public +export const _ctrlMenuGroupHeaderPaddingHorizontal = "var(--smtc-padding-ctrl-horizontal-default, 8px)"; + +// @public +export const _ctrlMenuItemContentPaddingX = "var(--smtc-padding-ctrl-text-side, 2px)"; + +// @public +export const _ctrlMenuItemGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, 4px)"; + +// @public +export const _ctrlMenuItemPaddingBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, var(--spacingVerticalSNudge)))"; + +// @public +export const _ctrlMenuItemPaddingTop = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalSNudge))"; + +// @public +export const _ctrlMenuItemPaddingX = "var(--smtc-ctrl-list-indent-level1, var(--smtc-padding-ctrl-horizontal-default, var(--spacingVerticalSNudge)))"; + +// @public +export const _ctrlMenuItemSecondaryContentFontSize = "var(--smtc-text-ramp-item-body-font-size, var(--smtc-text-global-body3-font-size, var(--fontSizeBase200)))"; + +// @public +export const _ctrlMenuItemSecondaryContentForegroundHover = "var(--smtc-foreground-ctrl-neutral-secondary-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3Hover)))"; + +// @public +export const _ctrlMenuItemSecondaryContentForegroundRest = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3))"; + +// @public +export const _ctrlMenuItemSizeDefault = "var(--smtc-size-ctrl-default, 32px)"; + +// @public +export const _ctrlMenuItemSubTextForegroundHover = "var(--smtc-foreground-ctrl-neutral-secondary-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3Hover)))"; + +// @public +export const _ctrlMenuItemSubTextForegroundPressed = "var(--smtc-foreground-ctrl-neutral-secondary-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3Pressed)))"; + +// @public +export const _ctrlMenuPopoverCornerFlyoutRest = "var(--smtc-corner-flyout-rest, var(--borderRadiusMedium))"; + +// @public +export const _ctrlMenuPopoverShadowFlyout = "var(--smtc-shadow-flyout, var(--shadow16))"; + +// @public +export const _ctrlMenuPopoverStrokeFlyout = "var(--smtc-stroke-flyout, var(--smtc-null-color, var(--colorTransparentStroke)))"; + +// @public +export const _ctrlMessageBarActionsMultilinePaddingRight = "var(--smtc-padding-content-align-default, var(--spacingVerticalM))"; + +// @public +export const _ctrlMessageBarErrorIconColor = "var(--smtc-status-danger-tint-foreground, var(--colorStatusDangerForeground1))"; + +// @public +export const _ctrlMessageBarGapBetweenCtrl = "var(--smtc-gap-between-ctrl-default, var(--spacingHorizontalM))"; + +// @public +export const _ctrlMessageBarPaddingContentAlignDefault = "var(--smtc-padding-content-align-default, 12px)"; + +// @public +export const _ctrlMessageBarPaddingVertical = "var(--smtc-padding-content-align-outdent-icon-on-subtle, 0px)"; + +// @public +export const _ctrlMessageBarReflowSpacerMarginBottom = "var(--smtc-padding-content-align-default, var(--spacingVerticalS))"; + +// @public +export const _ctrlMessageBarSpacingTop = "var(--smtc-padding-content-align-default, var(--spacingVerticalMNudge))"; + +// @public +export const _ctrlMessageBarTitleLineHeight = "var(--smtc-text-ramp-item-header-line-height, var(--smtc-text-global-body2-line-height, var(--lineHeightBase300)))"; + +// @public +export const _ctrlPersonaTreeIconOnSubtlePressed = "var(--smtc-foreground-ctrl-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-pressed, var(--colorNeutralForeground3Pressed)))"; + +// @public +export const _ctrlPopoverPaddingContentLarge = "var(--smtc-padding-content-large, 20px)"; + +// @public +export const _ctrlPopoverShadowFilter = "var(--smtc-shadow-flyout, drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey)))"; + +// @public (undocumented) +export const ctrlProgressBackgroundEmpty = "var(--smtc-ctrl-progress-background-empty, var(--colorNeutralBackground6))"; + +// @public (undocumented) +export const ctrlProgressBackgroundEmptyRaw = "--smtc-ctrl-progress-background-empty"; + +// @public (undocumented) +export const ctrlProgressBackgroundFilled = "var(--smtc-ctrl-progress-background-filled, var(--smtc-background-ctrl-brand-rest, var(--colorCompoundBrandBackground)))"; + +// @public (undocumented) +export const ctrlProgressBackgroundFilledRaw = "--smtc-ctrl-progress-background-filled"; + +// @public (undocumented) +export const ctrlProgressCorner = "var(--smtc-ctrl-progress-corner, var(--smtc-corner-circular, var(--borderRadiusMedium)))"; + +// @public (undocumented) +export const ctrlProgressCornerRaw = "--smtc-ctrl-progress-corner"; + +// @public (undocumented) +export const ctrlProgressHeightEmpty = "var(--smtc-ctrl-progress-height-empty, var(--smtc-ctrl-progress-height-filled, 2px))"; + +// @public (undocumented) +export const ctrlProgressHeightEmptyRaw = "--smtc-ctrl-progress-height-empty"; + +// @public (undocumented) +export const ctrlProgressHeightFilled = "var(--smtc-ctrl-progress-height-filled, 100%)"; + +// @public (undocumented) +export const ctrlProgressHeightFilledRaw = "--smtc-ctrl-progress-height-filled"; + +// @public (undocumented) +export const ctrlProgressLgHeightEmpty = "var(--smtc-ctrl-progress-lg-height-empty, var(--smtc-ctrl-progress-lg-height-filled, 4px))"; + +// @public (undocumented) +export const ctrlProgressLgHeightEmptyRaw = "--smtc-ctrl-progress-lg-height-empty"; + +// @public (undocumented) +export const ctrlProgressLgHeightFilled = "var(--smtc-ctrl-progress-lg-height-filled, 100%)"; + +// @public (undocumented) +export const ctrlProgressLgHeightFilledRaw = "--smtc-ctrl-progress-lg-height-filled"; + +// @public (undocumented) +export const ctrlProgressSmHeightEmpty = "var(--smtc-ctrl-progress-sm-height-empty, var(--smtc-ctrl-progress-sm-height-filled))"; + +// @public (undocumented) +export const ctrlProgressSmHeightEmptyRaw = "--smtc-ctrl-progress-sm-height-empty"; + +// @public (undocumented) +export const ctrlProgressSmHeightFilled = "var(--smtc-ctrl-progress-sm-height-filled)"; + +// @public (undocumented) +export const ctrlProgressSmHeightFilledRaw = "--smtc-ctrl-progress-sm-height-filled"; + +// @public +export const _ctrlRadioBackgroundActiveBrandHover = "var(--smtc-background-ctrl-active-brand-hover, var(--smtc-background-ctrl-brand-hover, var(--colorTransparentBackground)))"; + +// @public +export const _ctrlRadioBackgroundActiveBrandPressed = "var(--smtc-background-ctrl-active-brand-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorTransparentBackground)))"; + +// @public +export const _ctrlRadioBackgroundActiveBrandRest = "var(--smtc-background-ctrl-active-brand-rest, var(--smtc-background-ctrl-brand-rest, var(--colorTransparentBackground)))"; + +// @public +export const _ctrlRadioBackgroundActiveDisabled = "var(--smtc-background-ctrl-active-brand-disabled, var(--smtc-background-ctrl-brand-disabled, var(--colorTransparentBackground)))"; + +// @public +export const _ctrlRadioBaseBackgroundDisabled = "var(--smtc-ctrl-choice-base-background-disabled, var(--smtc-background-ctrl-outline-disabled, var(--colorTransparentBackground)))"; + +// @public +export const _ctrlRadioBaseBackgroundHover = "var(--smtc-ctrl-choice-base-background-hover, var(--smtc-background-ctrl-outline-hover, var(--colorTransparentBackground)))"; + +// @public +export const _ctrlRadioBaseBackgroundPressed = "var(--smtc-ctrl-choice-base-background-pressed, var(--smtc-background-ctrl-outline-pressed, var(--colorTransparentBackground)))"; + +// @public +export const _ctrlRadioChoiceBaseSize = "var(--smtc-ctrl-choice-base-size, var(--smtc-size-ctrl-icon, 16px))"; + +// @public +export const _ctrlRadioForegroundContentDisabled = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForegroundDisabled)))"; + +// @public +export const _ctrlRadioForegroundContentNeutralHover = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; + +// @public +export const _ctrlRadioForegroundContentNeutralRest = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground3)))"; + +// @public +export const _ctrlRadioForegroundOnActiveBrandHover = "var(--smtc-foreground-ctrl-on-active-brand-hover, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorCompoundBrandForeground1Hover)))"; + +// @public +export const _ctrlRadioForegroundOnActiveBrandPressed = "var(--smtc-foreground-ctrl-on-active-brand-pressed, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorCompoundBrandForeground1Pressed)))"; + +// @public +export const _ctrlRadioForegroundOnActiveBrandRest = "var(--smtc-foreground-ctrl-on-active-brand-rest, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorCompoundBrandForeground1)))"; + +// @public +export const _ctrlRadioForegroundOnActiveDisabled = "var(--smtc-foreground-ctrl-on-active-brand-disabled, var(--smtc-foreground-ctrl-on-brand-disabled, var(--colorNeutralForegroundDisabled)))"; + +// @public +export const _ctrlRadioPaddingTextTop = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalXS))"; + +// @public +export const _ctrlRadioPaddingVertical = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalS))"; + +// @public +export const _ctrlRadioStrokeOnActiveBrandHover = "var(--smtc-stroke-ctrl-on-active-brand-hover, var(--smtc-stroke-ctrl-on-brand-hover, var(--colorCompoundBrandStrokeHover)))"; + +// @public +export const _ctrlRadioStrokeOnActiveBrandPressed = "var(--smtc-stroke-ctrl-on-active-brand-pressed, var(--smtc-stroke-ctrl-on-brand-pressed, var(--colorCompoundBrandStrokePressed)))"; + +// @public +export const _ctrlRadioStrokeOnActiveBrandRest = "var(--smtc-stroke-ctrl-on-active-brand-rest, var(--smtc-stroke-ctrl-on-brand-rest, var(--colorCompoundBrandStroke)))"; + +// @public (undocumented) +export const ctrlRatingIconForegroundEmpty = "var(--smtc-ctrl-rating-icon-foreground-empty, var(--smtc-ctrl-progress-background-empty, var(--colorNeutralBackground6)))"; + +// @public (undocumented) +export const ctrlRatingIconForegroundEmptyRaw = "--smtc-ctrl-rating-icon-foreground-empty"; + +// @public (undocumented) +export const ctrlRatingIconForegroundFilled = "var(--smtc-ctrl-rating-icon-foreground-filled, var(--smtc-background-ctrl-brand-rest, var(--colorNeutralForeground1)))"; + +// @public (undocumented) +export const ctrlRatingIconForegroundFilledRaw = "--smtc-ctrl-rating-icon-foreground-filled"; + +// @public (undocumented) +export const ctrlRatingIconGap = "var(--smtc-ctrl-rating-icon-gap)"; + +// @public (undocumented) +export const ctrlRatingIconGapRaw = "--smtc-ctrl-rating-icon-gap"; + +// @public (undocumented) +export const ctrlRatingIconSize = "var(--smtc-ctrl-rating-icon-size, var(--smtc-size-ctrl-icon))"; + +// @public (undocumented) +export const ctrlRatingIconSizeRaw = "--smtc-ctrl-rating-icon-size"; + +// @public (undocumented) +export const ctrlRatingIconTheme = "var(--smtc-ctrl-rating-icon-theme, var(--smtc-icon-theme-ctrl-default-rest))"; + +// @public (undocumented) +export const ctrlRatingIconThemeRaw = "--smtc-ctrl-rating-icon-theme"; + +// @public (undocumented) +export const ctrlSegmentedBackgroundDisabled = "var(--smtc-ctrl-segmented-background-disabled, var(--smtc-background-ctrl-outline-disabled))"; + +// @public (undocumented) +export const ctrlSegmentedBackgroundDisabledRaw = "--smtc-ctrl-segmented-background-disabled"; + +// @public (undocumented) +export const ctrlSegmentedBackgroundHover = "var(--smtc-ctrl-segmented-background-hover, var(--smtc-background-ctrl-outline-hover))"; + +// @public (undocumented) +export const ctrlSegmentedBackgroundHoverRaw = "--smtc-ctrl-segmented-background-hover"; + +// @public (undocumented) +export const ctrlSegmentedBackgroundPressed = "var(--smtc-ctrl-segmented-background-pressed, var(--smtc-background-ctrl-outline-pressed))"; + +// @public (undocumented) +export const ctrlSegmentedBackgroundPressedRaw = "--smtc-ctrl-segmented-background-pressed"; + +// @public (undocumented) +export const ctrlSegmentedBackgroundRest = "var(--smtc-ctrl-segmented-background-rest, var(--smtc-background-ctrl-outline-rest))"; + +// @public (undocumented) +export const ctrlSegmentedBackgroundRestRaw = "--smtc-ctrl-segmented-background-rest"; + +// @public (undocumented) +export const ctrlSegmentedCornerHover = "var(--smtc-ctrl-segmented-corner-hover, var(--smtc-corner-ctrl-rest))"; + +// @public (undocumented) +export const ctrlSegmentedCornerHoverRaw = "--smtc-ctrl-segmented-corner-hover"; + +// @public (undocumented) +export const ctrlSegmentedCornerPressed = "var(--smtc-ctrl-segmented-corner-pressed, var(--smtc-corner-ctrl-rest))"; + +// @public (undocumented) +export const ctrlSegmentedCornerPressedRaw = "--smtc-ctrl-segmented-corner-pressed"; + +// @public (undocumented) +export const ctrlSegmentedCornerRest = "var(--smtc-ctrl-segmented-corner-rest, var(--smtc-corner-ctrl-rest))"; + +// @public (undocumented) +export const ctrlSegmentedCornerRestRaw = "--smtc-ctrl-segmented-corner-rest"; + +// @public (undocumented) +export const ctrlSegmentedGap = "var(--smtc-ctrl-segmented-gap, unset)"; + +// @public (undocumented) +export const ctrlSegmentedGapRaw = "--smtc-ctrl-segmented-gap"; + +// @public (undocumented) +export const ctrlSegmentedItemCornerHover = "var(--smtc-ctrl-segmented-item-corner-hover, var(--smtc-corner-ctrl-sm-rest))"; + +// @public (undocumented) +export const ctrlSegmentedItemCornerHoverRaw = "--smtc-ctrl-segmented-item-corner-hover"; + +// @public (undocumented) +export const ctrlSegmentedItemCornerPressed = "var(--smtc-ctrl-segmented-item-corner-pressed, var(--smtc-corner-ctrl-sm-rest))"; + +// @public (undocumented) +export const ctrlSegmentedItemCornerPressedRaw = "--smtc-ctrl-segmented-item-corner-pressed"; + +// @public (undocumented) +export const ctrlSegmentedItemCornerRest = "var(--smtc-ctrl-segmented-item-corner-rest, var(--smtc-corner-ctrl-sm-rest))"; + +// @public (undocumented) +export const ctrlSegmentedItemCornerRestRaw = "--smtc-ctrl-segmented-item-corner-rest"; + +// @public (undocumented) +export const ctrlSegmentedLgCornerHover = "var(--smtc-ctrl-segmented-lg-corner-hover, var(--smtc-corner-ctrl-lg-rest))"; + +// @public (undocumented) +export const ctrlSegmentedLgCornerHoverRaw = "--smtc-ctrl-segmented-lg-corner-hover"; + +// @public (undocumented) +export const ctrlSegmentedLgCornerPressed = "var(--smtc-ctrl-segmented-lg-corner-pressed, var(--smtc-corner-ctrl-lg-rest))"; + +// @public (undocumented) +export const ctrlSegmentedLgCornerPressedRaw = "--smtc-ctrl-segmented-lg-corner-pressed"; + +// @public (undocumented) +export const ctrlSegmentedLgCornerRest = "var(--smtc-ctrl-segmented-lg-corner-rest, var(--smtc-corner-ctrl-lg-rest))"; + +// @public (undocumented) +export const ctrlSegmentedLgCornerRestRaw = "--smtc-ctrl-segmented-lg-corner-rest"; + +// @public (undocumented) +export const ctrlSegmentedLgItemCornerHover = "var(--smtc-ctrl-segmented-lg-item-corner-hover, var(--smtc-corner-ctrl-rest))"; + +// @public (undocumented) +export const ctrlSegmentedLgItemCornerHoverRaw = "--smtc-ctrl-segmented-lg-item-corner-hover"; + +// @public (undocumented) +export const ctrlSegmentedLgItemCornerPressed = "var(--smtc-ctrl-segmented-lg-item-corner-pressed, var(--smtc-corner-ctrl-rest))"; + +// @public (undocumented) +export const ctrlSegmentedLgItemCornerPressedRaw = "--smtc-ctrl-segmented-lg-item-corner-pressed"; + +// @public (undocumented) +export const ctrlSegmentedLgItemCornerRest = "var(--smtc-ctrl-segmented-lg-item-corner-rest, var(--smtc-corner-ctrl-rest))"; + +// @public (undocumented) +export const ctrlSegmentedLgItemCornerRestRaw = "--smtc-ctrl-segmented-lg-item-corner-rest"; + +// @public (undocumented) +export const ctrlSegmentedLgPaddingHover = "var(--smtc-ctrl-segmented-lg-padding-hover, var(--smtc-ctrl-segmented-lg-padding-rest))"; + +// @public (undocumented) +export const ctrlSegmentedLgPaddingHoverRaw = "--smtc-ctrl-segmented-lg-padding-hover"; + +// @public (undocumented) +export const ctrlSegmentedLgPaddingPressed = "var(--smtc-ctrl-segmented-lg-padding-pressed, var(--smtc-ctrl-segmented-lg-padding-rest))"; + +// @public (undocumented) +export const ctrlSegmentedLgPaddingPressedRaw = "--smtc-ctrl-segmented-lg-padding-pressed"; + +// @public (undocumented) +export const ctrlSegmentedLgPaddingRest = "var(--smtc-ctrl-segmented-lg-padding-rest)"; + +// @public (undocumented) +export const ctrlSegmentedLgPaddingRestRaw = "--smtc-ctrl-segmented-lg-padding-rest"; + +// @public (undocumented) +export const ctrlSegmentedPaddingHover = "var(--smtc-ctrl-segmented-padding-hover, var(--smtc-ctrl-segmented-padding-rest))"; + +// @public (undocumented) +export const ctrlSegmentedPaddingHoverRaw = "--smtc-ctrl-segmented-padding-hover"; + +// @public (undocumented) +export const ctrlSegmentedPaddingPressed = "var(--smtc-ctrl-segmented-padding-pressed, var(--smtc-ctrl-segmented-padding-rest))"; + +// @public (undocumented) +export const ctrlSegmentedPaddingPressedRaw = "--smtc-ctrl-segmented-padding-pressed"; + +// @public (undocumented) +export const ctrlSegmentedPaddingRest = "var(--smtc-ctrl-segmented-padding-rest)"; + +// @public (undocumented) +export const ctrlSegmentedPaddingRestRaw = "--smtc-ctrl-segmented-padding-rest"; + +// @public (undocumented) +export const ctrlSegmentedSmCornerHover = "var(--smtc-ctrl-segmented-sm-corner-hover, var(--smtc-corner-ctrl-sm-rest))"; + +// @public (undocumented) +export const ctrlSegmentedSmCornerHoverRaw = "--smtc-ctrl-segmented-sm-corner-hover"; + +// @public (undocumented) +export const ctrlSegmentedSmCornerPressed = "var(--smtc-ctrl-segmented-sm-corner-pressed, var(--smtc-corner-ctrl-sm-rest))"; + +// @public (undocumented) +export const ctrlSegmentedSmCornerPressedRaw = "--smtc-ctrl-segmented-sm-corner-pressed"; + +// @public (undocumented) +export const ctrlSegmentedSmCornerRest = "var(--smtc-ctrl-segmented-sm-corner-rest, var(--smtc-corner-ctrl-sm-rest))"; + +// @public (undocumented) +export const ctrlSegmentedSmCornerRestRaw = "--smtc-ctrl-segmented-sm-corner-rest"; + +// @public (undocumented) +export const ctrlSegmentedSmItemCornerHover = "var(--smtc-ctrl-segmented-sm-item-corner-hover, var(--smtc-ctrl-segmented-sm-item-corner-rest))"; + +// @public (undocumented) +export const ctrlSegmentedSmItemCornerHoverRaw = "--smtc-ctrl-segmented-sm-item-corner-hover"; + +// @public (undocumented) +export const ctrlSegmentedSmItemCornerPressed = "var(--smtc-ctrl-segmented-sm-item-corner-pressed, var(--smtc-ctrl-segmented-sm-item-corner-rest))"; + +// @public (undocumented) +export const ctrlSegmentedSmItemCornerPressedRaw = "--smtc-ctrl-segmented-sm-item-corner-pressed"; + +// @public (undocumented) +export const ctrlSegmentedSmItemCornerRest = "var(--smtc-ctrl-segmented-sm-item-corner-rest)"; + +// @public (undocumented) +export const ctrlSegmentedSmItemCornerRestRaw = "--smtc-ctrl-segmented-sm-item-corner-rest"; + +// @public (undocumented) +export const ctrlSegmentedSmPaddingHover = "var(--smtc-ctrl-segmented-sm-padding-hover, var(--smtc-ctrl-segmented-sm-padding-rest))"; + +// @public (undocumented) +export const ctrlSegmentedSmPaddingHoverRaw = "--smtc-ctrl-segmented-sm-padding-hover"; + +// @public (undocumented) +export const ctrlSegmentedSmPaddingPressed = "var(--smtc-ctrl-segmented-sm-padding-pressed, var(--smtc-ctrl-segmented-sm-padding-rest))"; + +// @public (undocumented) +export const ctrlSegmentedSmPaddingPressedRaw = "--smtc-ctrl-segmented-sm-padding-pressed"; + +// @public (undocumented) +export const ctrlSegmentedSmPaddingRest = "var(--smtc-ctrl-segmented-sm-padding-rest)"; + +// @public (undocumented) +export const ctrlSegmentedSmPaddingRestRaw = "--smtc-ctrl-segmented-sm-padding-rest"; + +// @public (undocumented) +export const ctrlSegmentedStrokeDisabled = "var(--smtc-ctrl-segmented-stroke-disabled, var(--smtc-foreground-ctrl-neutral-secondary-disabled))"; + +// @public (undocumented) +export const ctrlSegmentedStrokeDisabledRaw = "--smtc-ctrl-segmented-stroke-disabled"; + +// @public (undocumented) +export const ctrlSegmentedStrokeHover = "var(--smtc-ctrl-segmented-stroke-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; + +// @public (undocumented) +export const ctrlSegmentedStrokeHoverRaw = "--smtc-ctrl-segmented-stroke-hover"; + +// @public (undocumented) +export const ctrlSegmentedStrokePressed = "var(--smtc-ctrl-segmented-stroke-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; + +// @public (undocumented) +export const ctrlSegmentedStrokePressedRaw = "--smtc-ctrl-segmented-stroke-pressed"; + +// @public (undocumented) +export const ctrlSegmentedStrokeRest = "var(--smtc-ctrl-segmented-stroke-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; + +// @public (undocumented) +export const ctrlSegmentedStrokeRestRaw = "--smtc-ctrl-segmented-stroke-rest"; + +// @public (undocumented) +export const ctrlSliderBarCorner = "var(--smtc-ctrl-slider-bar-corner, var(--smtc-corner-circular, var(--borderRadiusXLarge)))"; + +// @public (undocumented) +export const ctrlSliderBarCornerRaw = "--smtc-ctrl-slider-bar-corner"; + +// @public (undocumented) +export const ctrlSliderBarForegroundEmptyDisabled = "var(--smtc-ctrl-slider-bar-foreground-empty-disabled, var(--smtc-ctrl-progress-background-empty, var(--colorNeutralBackgroundDisabled)))"; + +// @public (undocumented) +export const ctrlSliderBarForegroundEmptyDisabledRaw = "--smtc-ctrl-slider-bar-foreground-empty-disabled"; + +// @public (undocumented) +export const ctrlSliderBarForegroundEmptyHover = "var(--smtc-ctrl-slider-bar-foreground-empty-hover, var(--smtc-ctrl-progress-background-empty, var(--colorNeutralStrokeAccessible)))"; + +// @public (undocumented) +export const ctrlSliderBarForegroundEmptyHoverRaw = "--smtc-ctrl-slider-bar-foreground-empty-hover"; + +// @public (undocumented) +export const ctrlSliderBarForegroundEmptyPressed = "var(--smtc-ctrl-slider-bar-foreground-empty-pressed, var(--smtc-ctrl-progress-background-empty, var(--colorNeutralStrokeAccessible)))"; + +// @public (undocumented) +export const ctrlSliderBarForegroundEmptyPressedRaw = "--smtc-ctrl-slider-bar-foreground-empty-pressed"; + +// @public (undocumented) +export const ctrlSliderBarForegroundEmptyRest = "var(--smtc-ctrl-slider-bar-foreground-empty-rest, var(--smtc-ctrl-progress-background-empty, var(--colorNeutralStrokeAccessible)))"; + +// @public (undocumented) +export const ctrlSliderBarForegroundEmptyRestRaw = "--smtc-ctrl-slider-bar-foreground-empty-rest"; + +// @public (undocumented) +export const ctrlSliderBarForegroundFilledDisabled = "var(--smtc-ctrl-slider-bar-foreground-filled-disabled, var(--smtc-background-ctrl-brand-disabled, var(--colorNeutralForegroundDisabled)))"; + +// @public (undocumented) +export const ctrlSliderBarForegroundFilledDisabledRaw = "--smtc-ctrl-slider-bar-foreground-filled-disabled"; + +// @public (undocumented) +export const ctrlSliderBarForegroundFilledHover = "var(--smtc-ctrl-slider-bar-foreground-filled-hover, var(--smtc-background-ctrl-brand-hover, var(--colorCompoundBrandBackgroundHover)))"; + +// @public (undocumented) +export const ctrlSliderBarForegroundFilledHoverRaw = "--smtc-ctrl-slider-bar-foreground-filled-hover"; + +// @public (undocumented) +export const ctrlSliderBarForegroundFilledPressed = "var(--smtc-ctrl-slider-bar-foreground-filled-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorCompoundBrandBackgroundPressed)))"; + +// @public (undocumented) +export const ctrlSliderBarForegroundFilledPressedRaw = "--smtc-ctrl-slider-bar-foreground-filled-pressed"; + +// @public (undocumented) +export const ctrlSliderBarForegroundFilledRest = "var(--smtc-ctrl-slider-bar-foreground-filled-rest, var(--smtc-background-ctrl-brand-rest, var(--colorCompoundBrandBackground)))"; + +// @public (undocumented) +export const ctrlSliderBarForegroundFilledRestRaw = "--smtc-ctrl-slider-bar-foreground-filled-rest"; + +// @public (undocumented) +export const ctrlSliderBarHeight = "var(--smtc-ctrl-slider-bar-height, var(--smtc-ctrl-progress-height-filled, 4px))"; + +// @public (undocumented) +export const ctrlSliderBarHeightRaw = "--smtc-ctrl-slider-bar-height"; + +// @public +export const _ctrlSliderBarSizeDefault = "var(--smtc-size-ctrl-default, 32px)"; + +// @public (undocumented) +export const ctrlSliderLgBarHeight = "var(--smtc-ctrl-slider-lg-bar-height, var(--smtc-ctrl-progress-lg-height-filled))"; + +// @public (undocumented) +export const ctrlSliderLgBarHeightRaw = "--smtc-ctrl-slider-lg-bar-height"; + +// @public (undocumented) +export const ctrlSliderLgThumbSizeHover = "var(--smtc-ctrl-slider-lg-thumb-size-hover, var(--smtc-size-ctrl-lg-icon))"; + +// @public (undocumented) +export const ctrlSliderLgThumbSizeHoverRaw = "--smtc-ctrl-slider-lg-thumb-size-hover"; + +// @public (undocumented) +export const ctrlSliderLgThumbSizePressed = "var(--smtc-ctrl-slider-lg-thumb-size-pressed, var(--smtc-size-ctrl-lg-icon))"; + +// @public (undocumented) +export const ctrlSliderLgThumbSizePressedRaw = "--smtc-ctrl-slider-lg-thumb-size-pressed"; + +// @public (undocumented) +export const ctrlSliderLgThumbSizeRest = "var(--smtc-ctrl-slider-lg-thumb-size-rest, var(--smtc-size-ctrl-lg-icon))"; + +// @public (undocumented) +export const ctrlSliderLgThumbSizeRestRaw = "--smtc-ctrl-slider-lg-thumb-size-rest"; + +// @public +export const _ctrlSliderPaddingDefault = "var(--smtc-padding-ctrl-horizontal-default, 10px)"; + +// @public (undocumented) +export const ctrlSliderSmBarHeight = "var(--smtc-ctrl-slider-sm-bar-height, var(--smtc-ctrl-progress-sm-height-filled, 2px))"; + +// @public (undocumented) +export const ctrlSliderSmBarHeightRaw = "--smtc-ctrl-slider-sm-bar-height"; + +// @public +export const _ctrlSliderSmBarSizeDefault = "var(--smtc-size-ctrl-default, 24px)"; + +// @public +export const _ctrlSliderSmPaddingDefault = "var(--smtc-padding-ctrl-horizontal-default, 8px)"; + +// @public (undocumented) +export const ctrlSliderSmThumbSizeHover = "var(--smtc-ctrl-slider-sm-thumb-size-hover, var(--smtc-size-ctrl-sm-icon, 16px))"; + +// @public (undocumented) +export const ctrlSliderSmThumbSizeHoverRaw = "--smtc-ctrl-slider-sm-thumb-size-hover"; + +// @public (undocumented) +export const ctrlSliderSmThumbSizePressed = "var(--smtc-ctrl-slider-sm-thumb-size-pressed, var(--smtc-size-ctrl-sm-icon, 16px))"; + +// @public (undocumented) +export const ctrlSliderSmThumbSizePressedRaw = "--smtc-ctrl-slider-sm-thumb-size-pressed"; + +// @public (undocumented) +export const ctrlSliderSmThumbSizeRest = "var(--smtc-ctrl-slider-sm-thumb-size-rest, var(--smtc-size-ctrl-sm-icon, 16px))"; + +// @public (undocumented) +export const ctrlSliderSmThumbSizeRestRaw = "--smtc-ctrl-slider-sm-thumb-size-rest"; + +// @public (undocumented) +export const ctrlSliderThumbBackgroundDisabled = "var(--smtc-ctrl-slider-thumb-background-disabled, var(--smtc-foreground-ctrl-on-brand-disabled, var(--colorNeutralForegroundDisabled)))"; + +// @public (undocumented) +export const ctrlSliderThumbBackgroundDisabledRaw = "--smtc-ctrl-slider-thumb-background-disabled"; + +// @public (undocumented) +export const ctrlSliderThumbBackgroundHover = "var(--smtc-ctrl-slider-thumb-background-hover, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorCompoundBrandBackgroundHover)))"; + +// @public (undocumented) +export const ctrlSliderThumbBackgroundHoverRaw = "--smtc-ctrl-slider-thumb-background-hover"; + +// @public (undocumented) +export const ctrlSliderThumbBackgroundPressed = "var(--smtc-ctrl-slider-thumb-background-pressed, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorCompoundBrandBackgroundPressed)))"; + +// @public (undocumented) +export const ctrlSliderThumbBackgroundPressedRaw = "--smtc-ctrl-slider-thumb-background-pressed"; + +// @public (undocumented) +export const ctrlSliderThumbBackgroundRest = "var(--smtc-ctrl-slider-thumb-background-rest, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorCompoundBrandBackground)))"; + +// @public (undocumented) +export const ctrlSliderThumbBackgroundRestRaw = "--smtc-ctrl-slider-thumb-background-rest"; + +// @public (undocumented) +export const ctrlSliderThumbCorner = "var(--smtc-ctrl-slider-thumb-corner, var(--smtc-corner-circular, var(--borderRadiusCircular)))"; + +// @public (undocumented) +export const ctrlSliderThumbCornerRaw = "--smtc-ctrl-slider-thumb-corner"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeDisabled = "var(--smtc-ctrl-slider-thumb-inner-stroke-disabled, var(--smtc-background-ctrl-brand-disabled, var(--colorNeutralBackground1)))"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeDisabledRaw = "--smtc-ctrl-slider-thumb-inner-stroke-disabled"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeHover = "var(--smtc-ctrl-slider-thumb-inner-stroke-hover, var(--smtc-background-ctrl-brand-hover, var(--colorNeutralBackground1)))"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeHoverRaw = "--smtc-ctrl-slider-thumb-inner-stroke-hover"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokePressed = "var(--smtc-ctrl-slider-thumb-inner-stroke-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorNeutralBackground1)))"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokePressedRaw = "--smtc-ctrl-slider-thumb-inner-stroke-pressed"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeRest = "var(--smtc-ctrl-slider-thumb-inner-stroke-rest, var(--smtc-background-ctrl-brand-rest, var(--colorNeutralBackground1)))"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeRestRaw = "--smtc-ctrl-slider-thumb-inner-stroke-rest"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeWidthHover = "var(--smtc-ctrl-slider-thumb-inner-stroke-width-hover, var(--smtc-ctrl-slider-thumb-inner-stroke-width-rest))"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeWidthHoverRaw = "--smtc-ctrl-slider-thumb-inner-stroke-width-hover"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeWidthPressed = "var(--smtc-ctrl-slider-thumb-inner-stroke-width-pressed, var(--smtc-ctrl-slider-thumb-inner-stroke-width-rest))"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeWidthPressedRaw = "--smtc-ctrl-slider-thumb-inner-stroke-width-pressed"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeWidthRest = "var(--smtc-ctrl-slider-thumb-inner-stroke-width-rest)"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeWidthRestRaw = "--smtc-ctrl-slider-thumb-inner-stroke-width-rest"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokeDisabled = "var(--smtc-ctrl-slider-thumb-outer-stroke-disabled, var(--smtc-background-ctrl-brand-disabled, var(--colorNeutralForegroundDisabled)))"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokeDisabledRaw = "--smtc-ctrl-slider-thumb-outer-stroke-disabled"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokeHover = "var(--smtc-ctrl-slider-thumb-outer-stroke-hover, var(--smtc-background-ctrl-brand-hover, var(--colorNeutralStroke1)))"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokeHoverRaw = "--smtc-ctrl-slider-thumb-outer-stroke-hover"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokePressed = "var(--smtc-ctrl-slider-thumb-outer-stroke-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorNeutralStroke1)))"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokePressedRaw = "--smtc-ctrl-slider-thumb-outer-stroke-pressed"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokeRest = "var(--smtc-ctrl-slider-thumb-outer-stroke-rest, var(--smtc-background-ctrl-brand-rest, var(--colorNeutralStroke1)))"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokeRestRaw = "--smtc-ctrl-slider-thumb-outer-stroke-rest"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokeWidth = "var(--smtc-ctrl-slider-thumb-outer-stroke-width, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokeWidthRaw = "--smtc-ctrl-slider-thumb-outer-stroke-width"; + +// @public (undocumented) +export const ctrlSliderThumbSizeHover = "var(--smtc-ctrl-slider-thumb-size-hover, var(--smtc-size-ctrl-icon, 20px))"; + +// @public (undocumented) +export const ctrlSliderThumbSizeHoverRaw = "--smtc-ctrl-slider-thumb-size-hover"; + +// @public (undocumented) +export const ctrlSliderThumbSizePressed = "var(--smtc-ctrl-slider-thumb-size-pressed, var(--smtc-size-ctrl-icon, 20px))"; + +// @public (undocumented) +export const ctrlSliderThumbSizePressedRaw = "--smtc-ctrl-slider-thumb-size-pressed"; + +// @public (undocumented) +export const ctrlSliderThumbSizeRest = "var(--smtc-ctrl-slider-thumb-size-rest, var(--smtc-size-ctrl-icon, 20px))"; + +// @public (undocumented) +export const ctrlSliderThumbSizeRestRaw = "--smtc-ctrl-slider-thumb-size-rest"; + +// @public +export const _ctrlSpinButtonBackgroundDisabled = "var(--smtc-ctrl-input-background-disabled, var(--smtc-background-ctrl-neutral-disabled, var(--colorTransparentBackground)))"; + +// @public +export const _ctrlSpinButtonForegroundOnSubtleHover = "var(--smtc-foreground-ctrl-on-subtle-hover, var(--smtc-foreground-ctrl-neutral-primary-hover, var(--colorNeutralForeground3Hover)))"; + +// @public +export const _ctrlSpinButtonForegroundOnSubtlePressed = "var(--smtc-foreground-ctrl-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-pressed, var(--colorNeutralForeground3Pressed)))"; + +// @public +export const _ctrlSpinButtonNeutralSecondaryRest = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground4))"; + +// @public +export const _ctrlSpinButtonOnSubtleRest = "var(--smtc-foreground-ctrl-on-subtle-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground3)))"; + +// @public +export const _ctrlSpinButtonPaddingHorizontal = "var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalMNudge))"; + +// @public +export const _ctrlSpinButtonPaddingSmHorizontal = "var(--smtc-padding-ctrl-sm-horizontal-default, 5px)"; + +// @public +export const _ctrlSpinButtonSizeDefault = "var(--smtc-size-ctrl-default, 32px)"; + +// @public +export const _ctrlSpinButtonSizeIconSecondary = "var(--smtc-size-ctrl-icon-secondary, 16px)"; + +// @public +export const _ctrlSpinButtonSizeSmDefault = "var(--smtc-size-ctrl-sm-default, 24px)"; + +// @public +export const _ctrlSpinnerBackgroundEmpty = "var(--smtc-ctrl-progress-background-empty, var(--colorBrandStroke2Contrast))"; + +// @public +export const _ctrlSpinnerBackgroundFilled = "var(--smtc-ctrl-progress-background-filled, var(--smtc-background-ctrl-brand-rest, var(--colorBrandStroke1)))"; + +// @public +export const _ctrlSpinnerItemBodyFontSize = "var(--smtc-text-ramp-item-body-font-size, var(--smtc-text-global-body3-font-size, var(--fontSizeBase400)))"; + +// @public +export const _ctrlSpinnerItemBodyLineHeight = "var(--smtc-text-ramp-item-body-line-height, var(--smtc-text-global-body3-line-height, var(--lineHeightBase400)))"; + +// @public (undocumented) +export const ctrlSpinnerShowEmptyTrack = "var(--smtc-ctrl-spinner-show-empty-track)"; + +// @public (undocumented) +export const ctrlSpinnerShowEmptyTrackRaw = "--smtc-ctrl-spinner-show-empty-track"; + +// @public +export const _ctrlSpinnerStrokeLgWidth = "var(--smtc-ctrl-spinner-stroke-width, var(--smtc-ctrl-progress-height-filled, var(--strokeWidthThickest)))"; + +// @public +export const _ctrlSpinnerStrokeSmWidth = "var(--smtc-ctrl-spinner-stroke-width, var(--smtc-ctrl-progress-height-filled, var(--strokeWidthThick)))"; + +// @public (undocumented) +export const ctrlSpinnerStrokeWidth = "var(--smtc-ctrl-spinner-stroke-width, var(--smtc-ctrl-progress-height-filled, var(--strokeWidthThicker)))"; + +// @public (undocumented) +export const ctrlSpinnerStrokeWidthRaw = "--smtc-ctrl-spinner-stroke-width"; + +// @public +export const _ctrlSpinnerTextStyleRegularWeight = "var(--smtc-text-style-default-regular-weight, var(--fontWeightSemibold))"; + +// @public (undocumented) +export const ctrlSplitDividerStrokeWidth = "var(--smtc-ctrl-split-divider-stroke-width, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const ctrlSplitDividerStrokeWidthOnOutline = "var(--smtc-ctrl-split-divider-stroke-width-on-outline, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const ctrlSplitDividerStrokeWidthOnOutlineRaw = "--smtc-ctrl-split-divider-stroke-width-on-outline"; + +// @public (undocumented) +export const ctrlSplitDividerStrokeWidthOnSubtle = "var(--smtc-ctrl-split-divider-stroke-width-on-subtle, unset)"; + +// @public (undocumented) +export const ctrlSplitDividerStrokeWidthOnSubtleRaw = "--smtc-ctrl-split-divider-stroke-width-on-subtle"; + +// @public (undocumented) +export const ctrlSplitDividerStrokeWidthRaw = "--smtc-ctrl-split-divider-stroke-width"; + +// @public +export const _ctrlSwitchPaddingTextBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, var(--spacingVerticalXS)))"; + +// @public +export const _ctrlSwitchPaddingTextTop = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalXS))"; + +// @public +export const _ctrlSwitchStrokeOnActiveBrandHover = "var(--smtc-stroke-ctrl-on-active-brand-hover, var(--smtc-stroke-ctrl-on-brand-hover, var(--colorTransparentStrokeInteractive)))"; + +// @public +export const _ctrlSwitchStrokeOnActiveBrandRest = "var(--smtc-stroke-ctrl-on-active-brand-rest, var(--smtc-stroke-ctrl-on-brand-rest, var(--colorTransparentStroke)))"; + +// @public +export const _ctrlTabBackgroundActiveBrandDisabled = "var(--smtc-background-ctrl-active-brand-disabled, var(--smtc-background-ctrl-brand-disabled, var(--colorNeutralForegroundDisabled)))"; + +// @public +export const _ctrlTabForegroundActiveBrandHover = "var(--smtc-foreground-ctrl-active-brand-hover, var(--smtc-foreground-ctrl-brand-hover, var(--colorNeutralForeground1Hover)))"; + +// @public +export const _ctrlTabForegroundActiveBrandPressed = "var(--smtc-foreground-ctrl-active-brand-pressed, var(--smtc-foreground-ctrl-brand-pressed, var(--colorNeutralForeground1Pressed)))"; + +// @public +export const _ctrlTabForegroundActiveBrandRest = "var(--smtc-foreground-ctrl-active-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorNeutralForeground1)))"; + +// @public +export const _ctrlTabForegroundOnSubtleHover = "var(--smtc-foreground-ctrl-icon-on-subtle-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2Hover)))"; + +// @public +export const _ctrlTabForegroundOnSubtlePressed = "var(--smtc-foreground-ctrl-icon-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2Pressed)))"; + +// @public +export const _ctrlTabForegroundOnTransparentHover = "var(--smtc-foreground-ctrl-on-transparent-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2Hover)))"; + +// @public +export const _ctrlTabForegroundOnTransparentPressed = "var(--smtc-foreground-ctrl-on-transparent-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2Pressed)))"; + +// @public +export const _ctrlTabGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, var(--spacingHorizontalSNudge))"; + +// @public +export const _ctrlTabPaddingHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalMNudge))"; + +// @public +export const _ctrlTabPaddingTextSide = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXXS))"; + +// @public +export const _ctrlTabSizeDefault = "var(--smtc-size-ctrl-default, 32px)"; + +// @public +export const _ctrlTabSmGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, var(--spacingHorizontalXXS))"; + +// @public +export const _ctrlTabSmPaddingHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalSNudge))"; + +// @public +export const _ctrlTeachingPopoverSurfaceCorner = "var(--smtc-corner-flyout-rest, var(--borderRadiusXLarge))"; + +// @public +export const _ctrlToastBackgroundFlyoutLumBlend = "var(--smtc-background-flyout-lum-blend, var(--colorNeutralBackgroundInverted))"; + +// @public +export const _ctrlToastBodyForegroundContentNeutralPrimary = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForegroundInverted2)))"; + +// @public +export const _ctrlToastBodyForegroundContentNeutralSecondary = "var(--smtc-foreground-content-neutral-secondary, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForegroundInverted2)))"; + +// @public +export const _ctrlToastContainerCtrlFocusOuterStroke = "var(--smtc-ctrl-focus-outer-stroke, var(--smtc-background-ctrl-brand-rest, var(--colorStrokeFocus2)))"; + +// @public +export const _ctrlToastContainerFlyoutRest = "var(--smtc-corner-flyout-rest, var(--borderRadiusMedium))"; + +// @public +export const _ctrlToastCornerFlyoutRest = "var(--smtc-corner-flyout-rest, var(--borderRadiusMedium))"; + +// @public +export const _ctrlToastFooterGapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default, 14px)"; + +// @public +export const _ctrlToastFooterPaddingContentSmall = "var(--smtc-padding-content-small, 16px)"; + +// @public +export const _ctrlToastForegroundContentNeutralPrimary = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForegroundInverted2)))"; + +// @public +export const _ctrlToastShadowFlyout = "var(--smtc-shadow-flyout, var(--shadow8))"; + +// @public +export const _ctrlToastStrokeFlyout = "var(--smtc-stroke-flyout, var(--smtc-null-color, var(--colorTransparentStroke)))"; + +// @public +export const _ctrlToastTextRampItemHeaderFontSize = "var(--smtc-text-ramp-item-header-font-size, var(--smtc-text-global-body2-font-size, 16px))"; + +// @public +export const _ctrlToastTextRampItemHeaderLineHeight = "var(--smtc-text-ramp-item-header-line-height, var(--smtc-text-global-body2-line-height, 20px))"; + +// @public +export const _ctrlToastTitleCtrlLinkForegroundBrandRest = "var(--smtc-ctrl-link-foreground-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorBrandForeground1)))"; + +// @public +export const _ctrlToastTitleCtrlLinkForegroundBrandRestInverted = "var(--smtc-ctrl-link-foreground-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorBrandForegroundInverted)))"; + +// @public +export const _ctrlToastTitleForegroundContentNeutralPrimary = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForegroundInverted2)))"; + +// @public +export const _ctrlToastTitleForegroundContentNeutralPrimaryMedia = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForegroundInverted)))"; + +// @public +export const _ctrlToastTitleGapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default, 12px)"; + +// @public +export const _ctrlToastTitleStatusDangerTintForeground = "var(--smtc-status-danger-tint-foreground, var(--colorStatusDangerForeground1))"; + +// @public +export const _ctrlToastTitleStatusDangerTintForegroundInverted = "var(--smtc-status-danger-tint-foreground, var(--colorStatusDangerForegroundInverted))"; + +// @public +export const _ctrlToastTitleStatusInformativeTintForeground = "var(--smtc-status-informative-tint-foreground, var(--colorNeutralForeground3))"; + +// @public +export const _ctrlToastTitleStatusInformativeTintForegroundInverted = "var(--smtc-status-informative-tint-foreground, var(--colorNeutralForegroundInverted2))"; + +// @public +export const _ctrlToastTitleStatusSuccessTintForegroundInverted = "var(--smtc-status-success-tint-foreground, var(--colorStatusSuccessForegroundInverted))"; + +// @public +export const _ctrlToastTitleStatusWarningTintForeground = "var(--smtc-status-warning-tint-foreground, var(--colorStatusWarningForeground1))"; + +// @public +export const _ctrlToastTitleStatusWarningTintForegroundInverted = "var(--smtc-status-warning-tint-foreground, var(--colorStatusWarningForegroundInverted))"; + +// @public (undocumented) +export const ctrlTooltipBackground = "var(--smtc-ctrl-tooltip-background, var(--colorNeutralBackground1))"; + +// @public (undocumented) +export const ctrlTooltipBackgroundRaw = "--smtc-ctrl-tooltip-background"; + +// @public (undocumented) +export const ctrlTooltipCorner = "var(--smtc-ctrl-tooltip-corner, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; + +// @public (undocumented) +export const ctrlTooltipCornerRaw = "--smtc-ctrl-tooltip-corner"; + +// @public (undocumented) +export const ctrlTooltipForeground = "var(--smtc-ctrl-tooltip-foreground, var(--colorNeutralForeground1))"; + +// @public (undocumented) +export const ctrlTooltipForegroundRaw = "--smtc-ctrl-tooltip-foreground"; + +// @public +export const _ctrlTooltipPaddingBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, 6px))"; + +// @public +export const _ctrlTooltipPaddingLeft = "var(--smtc-padding-ctrl-horizontal-default, 11px )"; + +// @public +export const _ctrlTooltipPaddingRight = "var(--smtc-padding-ctrl-horizontal-default, 11px)"; + +// @public +export const _ctrlTooltipPaddingTop = "var(--smtc-padding-ctrl-text-top, 4px)"; + +// @public (undocumented) +export const ctrlTooltipShadow = "var(--smtc-ctrl-tooltip-shadow, var(--smtc-ctrl-fab-shadow-rest, drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey))))"; + +// @public (undocumented) +export const ctrlTooltipShadowRaw = "--smtc-ctrl-tooltip-shadow"; + +// @public +export const _ctrlTreeGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, var(--spacingVerticalXXS))"; + +// @public +export const _ctrlTreeIconOnSubtle = "var(--smtc-foreground-ctrl-on-subtle-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground3)))"; + +// @public +export const _ctrlTreeIconOnSubtleHover = "var(--smtc-foreground-ctrl-on-subtle-hover, var(--smtc-foreground-ctrl-neutral-primary-hover, var(--colorNeutralForeground3Hover)))"; + +// @public +export const _ctrlTreeIconOnSubtlePressed = "var(--smtc-foreground-ctrl-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-pressed, var(--colorNeutralForeground3)))"; + +// @public +export const _ctrlTreeOnTransparentHover = "var(--smtc-foreground-ctrl-on-transparent-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2Hover)))"; + +// @public +export const _ctrlTreeOnTransparentPressed = "var(--smtc-foreground-ctrl-on-transparent-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2Pressed)))"; + +// @public +export const _ctrlTreePaddingTextBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, 0px))"; + +// @public +export const _ctrlTreePaddingTextLeft = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXXS))"; + +// @public +export const _ctrlTreePaddingTextRight = "var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalXXS))"; + +// @public +export const _ctrlTreePaddingTextTop = "var(--smtc-padding-ctrl-text-top, 0px)"; + +// @public (undocumented) +export const foregroundContentBrandPrimary = "var(--smtc-foreground-content-brand-primary, var(--smtc-foreground-ctrl-brand-rest, var(--colorBrandForeground1)))"; + +// @public (undocumented) +export const foregroundContentBrandPrimaryRaw = "--smtc-foreground-content-brand-primary"; + +// @public (undocumented) +export const foregroundContentNeutralPrimary = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground1)))"; + +// @public (undocumented) +export const foregroundContentNeutralPrimaryRaw = "--smtc-foreground-content-neutral-primary"; + +// @public (undocumented) +export const foregroundContentNeutralSecondary = "var(--smtc-foreground-content-neutral-secondary, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground2)))"; + +// @public (undocumented) +export const foregroundContentNeutralSecondaryRaw = "--smtc-foreground-content-neutral-secondary"; + +// @public (undocumented) +export const foregroundCtrlActiveBrandDisabled = "var(--smtc-foreground-ctrl-active-brand-disabled, var(--smtc-foreground-ctrl-brand-disabled))"; + +// @public (undocumented) +export const foregroundCtrlActiveBrandDisabledRaw = "--smtc-foreground-ctrl-active-brand-disabled"; + +// @public (undocumented) +export const foregroundCtrlActiveBrandHover = "var(--smtc-foreground-ctrl-active-brand-hover, var(--smtc-foreground-ctrl-brand-hover, var(--colorCompoundBrandForeground1Hover)))"; + +// @public (undocumented) +export const foregroundCtrlActiveBrandHoverRaw = "--smtc-foreground-ctrl-active-brand-hover"; + +// @public (undocumented) +export const foregroundCtrlActiveBrandPressed = "var(--smtc-foreground-ctrl-active-brand-pressed, var(--smtc-foreground-ctrl-brand-pressed, var(--colorCompoundBrandForeground1Pressed)))"; + +// @public (undocumented) +export const foregroundCtrlActiveBrandPressedRaw = "--smtc-foreground-ctrl-active-brand-pressed"; + +// @public (undocumented) +export const foregroundCtrlActiveBrandRest = "var(--smtc-foreground-ctrl-active-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorCompoundBrandForeground1)))"; + +// @public (undocumented) +export const foregroundCtrlActiveBrandRestRaw = "--smtc-foreground-ctrl-active-brand-rest"; + +// @public (undocumented) +export const foregroundCtrlBrandDisabled = "var(--smtc-foreground-ctrl-brand-disabled)"; + +// @public (undocumented) +export const foregroundCtrlBrandDisabledRaw = "--smtc-foreground-ctrl-brand-disabled"; + +// @public (undocumented) +export const foregroundCtrlBrandHover = "var(--smtc-foreground-ctrl-brand-hover)"; + +// @public (undocumented) +export const foregroundCtrlBrandHoverRaw = "--smtc-foreground-ctrl-brand-hover"; + +// @public (undocumented) +export const foregroundCtrlBrandPressed = "var(--smtc-foreground-ctrl-brand-pressed)"; + +// @public (undocumented) +export const foregroundCtrlBrandPressedRaw = "--smtc-foreground-ctrl-brand-pressed"; + +// @public (undocumented) +export const foregroundCtrlBrandRest = "var(--smtc-foreground-ctrl-brand-rest)"; + +// @public (undocumented) +export const foregroundCtrlBrandRestRaw = "--smtc-foreground-ctrl-brand-rest"; + +// @public (undocumented) +export const foregroundCtrlHintDefault = "var(--smtc-foreground-ctrl-hint-default, unset)"; + +// @public (undocumented) +export const foregroundCtrlHintDefaultRaw = "--smtc-foreground-ctrl-hint-default"; + +// @public (undocumented) +export const foregroundCtrlIconOnNeutralDisabled = "var(--smtc-foreground-ctrl-icon-on-neutral-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled, var(--colorNeutralForegroundDisabled)))"; + +// @public (undocumented) +export const foregroundCtrlIconOnNeutralDisabledRaw = "--smtc-foreground-ctrl-icon-on-neutral-disabled"; + +// @public (undocumented) +export const foregroundCtrlIconOnNeutralHover = "var(--smtc-foreground-ctrl-icon-on-neutral-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnNeutralHoverRaw = "--smtc-foreground-ctrl-icon-on-neutral-hover"; + +// @public (undocumented) +export const foregroundCtrlIconOnNeutralPressed = "var(--smtc-foreground-ctrl-icon-on-neutral-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnNeutralPressedRaw = "--smtc-foreground-ctrl-icon-on-neutral-pressed"; + +// @public (undocumented) +export const foregroundCtrlIconOnNeutralRest = "var(--smtc-foreground-ctrl-icon-on-neutral-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground3)))"; + +// @public (undocumented) +export const foregroundCtrlIconOnNeutralRestRaw = "--smtc-foreground-ctrl-icon-on-neutral-rest"; + +// @public (undocumented) +export const foregroundCtrlIconOnOutlineDisabled = "var(--smtc-foreground-ctrl-icon-on-outline-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; + +// @public (undocumented) +export const foregroundCtrlIconOnOutlineDisabledRaw = "--smtc-foreground-ctrl-icon-on-outline-disabled"; + +// @public (undocumented) +export const foregroundCtrlIconOnOutlineHover = "var(--smtc-foreground-ctrl-icon-on-outline-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnOutlineHoverRaw = "--smtc-foreground-ctrl-icon-on-outline-hover"; + +// @public (undocumented) +export const foregroundCtrlIconOnOutlinePressed = "var(--smtc-foreground-ctrl-icon-on-outline-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnOutlinePressedRaw = "--smtc-foreground-ctrl-icon-on-outline-pressed"; + +// @public (undocumented) +export const foregroundCtrlIconOnOutlineRest = "var(--smtc-foreground-ctrl-icon-on-outline-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnOutlineRestRaw = "--smtc-foreground-ctrl-icon-on-outline-rest"; + +// @public (undocumented) +export const foregroundCtrlIconOnSubtleDisabled = "var(--smtc-foreground-ctrl-icon-on-subtle-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled, var(--colorNeutralForegroundDisabled)))"; + +// @public (undocumented) +export const foregroundCtrlIconOnSubtleDisabledRaw = "--smtc-foreground-ctrl-icon-on-subtle-disabled"; + +// @public (undocumented) +export const foregroundCtrlIconOnSubtleHover = "var(--smtc-foreground-ctrl-icon-on-subtle-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2BrandHover)))"; + +// @public (undocumented) +export const foregroundCtrlIconOnSubtleHoverRaw = "--smtc-foreground-ctrl-icon-on-subtle-hover"; + +// @public (undocumented) +export const foregroundCtrlIconOnSubtlePressed = "var(--smtc-foreground-ctrl-icon-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2BrandPressed)))"; + +// @public (undocumented) +export const foregroundCtrlIconOnSubtlePressedRaw = "--smtc-foreground-ctrl-icon-on-subtle-pressed"; + +// @public (undocumented) +export const foregroundCtrlIconOnSubtleRest = "var(--smtc-foreground-ctrl-icon-on-subtle-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; + +// @public (undocumented) +export const foregroundCtrlIconOnSubtleRestRaw = "--smtc-foreground-ctrl-icon-on-subtle-rest"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryDisabled = "var(--smtc-foreground-ctrl-neutral-primary-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryDisabledRaw = "--smtc-foreground-ctrl-neutral-primary-disabled"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryHover = "var(--smtc-foreground-ctrl-neutral-primary-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground1Hover)))"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryHoverRaw = "--smtc-foreground-ctrl-neutral-primary-hover"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryPressed = "var(--smtc-foreground-ctrl-neutral-primary-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground1Pressed)))"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryPressedRaw = "--smtc-foreground-ctrl-neutral-primary-pressed"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryRest = "var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground1))"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryRestRaw = "--smtc-foreground-ctrl-neutral-primary-rest"; + +// @public (undocumented) +export const foregroundCtrlNeutralSecondaryDisabled = "var(--smtc-foreground-ctrl-neutral-secondary-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const foregroundCtrlNeutralSecondaryDisabledRaw = "--smtc-foreground-ctrl-neutral-secondary-disabled"; + +// @public (undocumented) +export const foregroundCtrlNeutralSecondaryHover = "var(--smtc-foreground-ctrl-neutral-secondary-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground2Hover)))"; + +// @public (undocumented) +export const foregroundCtrlNeutralSecondaryHoverRaw = "--smtc-foreground-ctrl-neutral-secondary-hover"; + +// @public (undocumented) +export const foregroundCtrlNeutralSecondaryPressed = "var(--smtc-foreground-ctrl-neutral-secondary-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground2Pressed)))"; + +// @public (undocumented) +export const foregroundCtrlNeutralSecondaryPressedRaw = "--smtc-foreground-ctrl-neutral-secondary-pressed"; + +// @public (undocumented) +export const foregroundCtrlNeutralSecondaryRest = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground2))"; + +// @public (undocumented) +export const foregroundCtrlNeutralSecondaryRestRaw = "--smtc-foreground-ctrl-neutral-secondary-rest"; + +// @public (undocumented) +export const foregroundCtrlOnActiveBrandDisabled = "var(--smtc-foreground-ctrl-on-active-brand-disabled, var(--smtc-foreground-ctrl-on-brand-disabled, var(--colorNeutralForegroundDisabled)))"; + +// @public (undocumented) +export const foregroundCtrlOnActiveBrandDisabledRaw = "--smtc-foreground-ctrl-on-active-brand-disabled"; + +// @public (undocumented) +export const foregroundCtrlOnActiveBrandHover = "var(--smtc-foreground-ctrl-on-active-brand-hover, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForegroundInvertedHover)))"; + +// @public (undocumented) +export const foregroundCtrlOnActiveBrandHoverRaw = "--smtc-foreground-ctrl-on-active-brand-hover"; + +// @public (undocumented) +export const foregroundCtrlOnActiveBrandPressed = "var(--smtc-foreground-ctrl-on-active-brand-pressed, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForegroundInvertedPressed)))"; + +// @public (undocumented) +export const foregroundCtrlOnActiveBrandPressedRaw = "--smtc-foreground-ctrl-on-active-brand-pressed"; + +// @public (undocumented) +export const foregroundCtrlOnActiveBrandRest = "var(--smtc-foreground-ctrl-on-active-brand-rest, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForegroundInverted)))"; + +// @public (undocumented) +export const foregroundCtrlOnActiveBrandRestRaw = "--smtc-foreground-ctrl-on-active-brand-rest"; + +// @public (undocumented) +export const foregroundCtrlOnBrandDisabled = "var(--smtc-foreground-ctrl-on-brand-disabled)"; + +// @public (undocumented) +export const foregroundCtrlOnBrandDisabledRaw = "--smtc-foreground-ctrl-on-brand-disabled"; + +// @public (undocumented) +export const foregroundCtrlOnBrandHover = "var(--smtc-foreground-ctrl-on-brand-hover, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForegroundOnBrand)))"; + +// @public (undocumented) +export const foregroundCtrlOnBrandHoverRaw = "--smtc-foreground-ctrl-on-brand-hover"; + +// @public (undocumented) +export const foregroundCtrlOnBrandPressed = "var(--smtc-foreground-ctrl-on-brand-pressed, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForegroundOnBrand)))"; + +// @public (undocumented) +export const foregroundCtrlOnBrandPressedRaw = "--smtc-foreground-ctrl-on-brand-pressed"; + +// @public (undocumented) +export const foregroundCtrlOnBrandRest = "var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const foregroundCtrlOnBrandRestRaw = "--smtc-foreground-ctrl-on-brand-rest"; + +// @public (undocumented) +export const foregroundCtrlOnOutlineDisabled = "var(--smtc-foreground-ctrl-on-outline-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled, var(--colorNeutralForegroundDisabled)))"; + +// @public (undocumented) +export const foregroundCtrlOnOutlineDisabledRaw = "--smtc-foreground-ctrl-on-outline-disabled"; + +// @public (undocumented) +export const foregroundCtrlOnOutlineHover = "var(--smtc-foreground-ctrl-on-outline-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground1Hover)))"; + +// @public (undocumented) +export const foregroundCtrlOnOutlineHoverRaw = "--smtc-foreground-ctrl-on-outline-hover"; + +// @public (undocumented) +export const foregroundCtrlOnOutlinePressed = "var(--smtc-foreground-ctrl-on-outline-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground1Pressed)))"; + +// @public (undocumented) +export const foregroundCtrlOnOutlinePressedRaw = "--smtc-foreground-ctrl-on-outline-pressed"; + +// @public (undocumented) +export const foregroundCtrlOnOutlineRest = "var(--smtc-foreground-ctrl-on-outline-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground1)))"; + +// @public (undocumented) +export const foregroundCtrlOnOutlineRestRaw = "--smtc-foreground-ctrl-on-outline-rest"; + +// @public (undocumented) +export const foregroundCtrlOnSubtleDisabled = "var(--smtc-foreground-ctrl-on-subtle-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled, var(--colorNeutralForegroundDisabled)))"; + +// @public (undocumented) +export const foregroundCtrlOnSubtleDisabledRaw = "--smtc-foreground-ctrl-on-subtle-disabled"; + +// @public (undocumented) +export const foregroundCtrlOnSubtleHover = "var(--smtc-foreground-ctrl-on-subtle-hover, var(--smtc-foreground-ctrl-neutral-primary-hover, var(--colorNeutralForeground2Hover)))"; + +// @public (undocumented) +export const foregroundCtrlOnSubtleHoverRaw = "--smtc-foreground-ctrl-on-subtle-hover"; + +// @public (undocumented) +export const foregroundCtrlOnSubtlePressed = "var(--smtc-foreground-ctrl-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-pressed, var(--colorNeutralForeground2Pressed)))"; + +// @public (undocumented) +export const foregroundCtrlOnSubtlePressedRaw = "--smtc-foreground-ctrl-on-subtle-pressed"; + +// @public (undocumented) +export const foregroundCtrlOnSubtleRest = "var(--smtc-foreground-ctrl-on-subtle-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; + +// @public (undocumented) +export const foregroundCtrlOnSubtleRestRaw = "--smtc-foreground-ctrl-on-subtle-rest"; + +// @public (undocumented) +export const foregroundCtrlOnTransparentDisabled = "var(--smtc-foreground-ctrl-on-transparent-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled, var(--colorNeutralForegroundDisabled)))"; + +// @public (undocumented) +export const foregroundCtrlOnTransparentDisabledRaw = "--smtc-foreground-ctrl-on-transparent-disabled"; + +// @public (undocumented) +export const foregroundCtrlOnTransparentHover = "var(--smtc-foreground-ctrl-on-transparent-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2BrandHover)))"; + +// @public (undocumented) +export const foregroundCtrlOnTransparentHoverRaw = "--smtc-foreground-ctrl-on-transparent-hover"; + +// @public (undocumented) +export const foregroundCtrlOnTransparentPressed = "var(--smtc-foreground-ctrl-on-transparent-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2BrandPressed)))"; + +// @public (undocumented) +export const foregroundCtrlOnTransparentPressedRaw = "--smtc-foreground-ctrl-on-transparent-pressed"; + +// @public (undocumented) +export const foregroundCtrlOnTransparentRest = "var(--smtc-foreground-ctrl-on-transparent-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; + +// @public (undocumented) +export const foregroundCtrlOnTransparentRestRaw = "--smtc-foreground-ctrl-on-transparent-rest"; + +// @public (undocumented) +export const gapBetweenCard = "var(--smtc-gap-between-card, var(--smtc-gap-between-content-medium))"; + +// @public (undocumented) +export const gapBetweenCardRaw = "--smtc-gap-between-card"; + +// @public (undocumented) +export const gapBetweenContentLarge = "var(--smtc-gap-between-content-large)"; + +// @public (undocumented) +export const gapBetweenContentLargeRaw = "--smtc-gap-between-content-large"; + +// @public (undocumented) +export const gapBetweenContentMedium = "var(--smtc-gap-between-content-medium)"; + +// @public (undocumented) +export const gapBetweenContentMediumRaw = "--smtc-gap-between-content-medium"; + +// @public (undocumented) +export const gapBetweenContentNone = "var(--smtc-gap-between-content-none)"; + +// @public (undocumented) +export const gapBetweenContentNoneRaw = "--smtc-gap-between-content-none"; + +// @public (undocumented) +export const gapBetweenContentSmall = "var(--smtc-gap-between-content-small, 8px)"; + +// @public (undocumented) +export const gapBetweenContentSmallRaw = "--smtc-gap-between-content-small"; + +// @public (undocumented) +export const gapBetweenContentXLarge = "var(--smtc-gap-between-content-x-large)"; + +// @public (undocumented) +export const gapBetweenContentXLargeRaw = "--smtc-gap-between-content-x-large"; + +// @public (undocumented) +export const gapBetweenContentXSmall = "var(--smtc-gap-between-content-x-small, var(--spacingVerticalXXS))"; + +// @public (undocumented) +export const gapBetweenContentXSmallRaw = "--smtc-gap-between-content-x-small"; + +// @public (undocumented) +export const gapBetweenContentXxLarge = "var(--smtc-gap-between-content-xx-large)"; + +// @public (undocumented) +export const gapBetweenContentXxLargeRaw = "--smtc-gap-between-content-xx-large"; + +// @public (undocumented) +export const gapBetweenContentXxSmall = "var(--smtc-gap-between-content-xx-small)"; + +// @public (undocumented) +export const gapBetweenContentXxSmallRaw = "--smtc-gap-between-content-xx-small"; + +// @public (undocumented) +export const gapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default, 8px)"; + +// @public (undocumented) +export const gapBetweenCtrlDefaultRaw = "--smtc-gap-between-ctrl-default"; + +// @public (undocumented) +export const gapBetweenCtrlLgDefault = "var(--smtc-gap-between-ctrl-lg-default, 16px)"; + +// @public (undocumented) +export const gapBetweenCtrlLgDefaultRaw = "--smtc-gap-between-ctrl-lg-default"; + +// @public (undocumented) +export const gapBetweenCtrlLgNested = "var(--smtc-gap-between-ctrl-lg-nested, var(--smtc-padding-ctrl-lg-to-nested-control))"; + +// @public (undocumented) +export const gapBetweenCtrlLgNestedRaw = "--smtc-gap-between-ctrl-lg-nested"; + +// @public (undocumented) +export const gapBetweenCtrlNested = "var(--smtc-gap-between-ctrl-nested, var(--smtc-padding-ctrl-to-nested-control))"; + +// @public (undocumented) +export const gapBetweenCtrlNestedRaw = "--smtc-gap-between-ctrl-nested"; + +// @public (undocumented) +export const gapBetweenCtrlSmDefault = "var(--smtc-gap-between-ctrl-sm-default)"; + +// @public (undocumented) +export const gapBetweenCtrlSmDefaultRaw = "--smtc-gap-between-ctrl-sm-default"; + +// @public (undocumented) +export const gapBetweenCtrlSmNested = "var(--smtc-gap-between-ctrl-sm-nested, var(--smtc-padding-ctrl-sm-to-nested-control))"; + +// @public (undocumented) +export const gapBetweenCtrlSmNestedRaw = "--smtc-gap-between-ctrl-sm-nested"; + +// @public (undocumented) +export const gapBetweenListItem = "var(--smtc-gap-between-list-item, var(--smtc-gap-between-content-xx-small, var(--spacingVerticalXXS)))"; + +// @public (undocumented) +export const gapBetweenListItemRaw = "--smtc-gap-between-list-item"; + +// @public (undocumented) +export const gapBetweenTextLarge = "var(--smtc-gap-between-text-large, var(--smtc-gap-between-content-x-small))"; + +// @public (undocumented) +export const gapBetweenTextLargeRaw = "--smtc-gap-between-text-large"; + +// @public (undocumented) +export const gapBetweenTextSmall = "var(--smtc-gap-between-text-small, var(--smtc-gap-between-content-xx-small, var(--spacingHorizontalXS)))"; + +// @public (undocumented) +export const gapBetweenTextSmallRaw = "--smtc-gap-between-text-small"; + +// @public (undocumented) +export const gapInsideCtrlDefault = "var(--smtc-gap-inside-ctrl-default, var(--spacingHorizontalS))"; + +// @public (undocumented) +export const gapInsideCtrlDefaultRaw = "--smtc-gap-inside-ctrl-default"; + +// @public (undocumented) +export const gapInsideCtrlLgDefault = "var(--smtc-gap-inside-ctrl-lg-default, var(--spacingHorizontalSNudge))"; + +// @public (undocumented) +export const gapInsideCtrlLgDefaultRaw = "--smtc-gap-inside-ctrl-lg-default"; + +// @public (undocumented) +export const gapInsideCtrlLgToLabel = "var(--smtc-gap-inside-ctrl-lg-to-label, var(--spacingHorizontalS))"; + +// @public (undocumented) +export const gapInsideCtrlLgToLabelRaw = "--smtc-gap-inside-ctrl-lg-to-label"; + +// @public (undocumented) +export const gapInsideCtrlLgToSecondaryIcon = "var(--smtc-gap-inside-ctrl-lg-to-secondary-icon)"; + +// @public (undocumented) +export const gapInsideCtrlLgToSecondaryIconRaw = "--smtc-gap-inside-ctrl-lg-to-secondary-icon"; + +// @public (undocumented) +export const gapInsideCtrlSmDefault = "var(--smtc-gap-inside-ctrl-sm-default, var(--spacingHorizontalXS))"; + +// @public (undocumented) +export const gapInsideCtrlSmDefaultRaw = "--smtc-gap-inside-ctrl-sm-default"; + +// @public (undocumented) +export const gapInsideCtrlSmToLabel = "var(--smtc-gap-inside-ctrl-sm-to-label, var(--spacingHorizontalXS))"; + +// @public (undocumented) +export const gapInsideCtrlSmToLabelRaw = "--smtc-gap-inside-ctrl-sm-to-label"; + +// @public (undocumented) +export const gapInsideCtrlSmToSecondaryIcon = "var(--smtc-gap-inside-ctrl-sm-to-secondary-icon)"; + +// @public (undocumented) +export const gapInsideCtrlSmToSecondaryIconRaw = "--smtc-gap-inside-ctrl-sm-to-secondary-icon"; + +// @public (undocumented) +export const gapInsideCtrlToLabel = "var(--smtc-gap-inside-ctrl-to-label, var(--spacingHorizontalSNudge))"; + +// @public (undocumented) +export const gapInsideCtrlToLabelRaw = "--smtc-gap-inside-ctrl-to-label"; + +// @public (undocumented) +export const gapInsideCtrlToSecondaryIcon = "var(--smtc-gap-inside-ctrl-to-secondary-icon)"; + +// @public (undocumented) +export const gapInsideCtrlToSecondaryIconRaw = "--smtc-gap-inside-ctrl-to-secondary-icon"; + +// @public (undocumented) +export const iconThemeCtrlChevronDefault = "var(--smtc-icon-theme-ctrl-chevron-default, var(--smtc-icon-theme-ctrl-default-rest))"; + +// @public (undocumented) +export const iconThemeCtrlChevronDefaultRaw = "--smtc-icon-theme-ctrl-chevron-default"; + +// @public (undocumented) +export const iconThemeCtrlChevronSelected = "var(--smtc-icon-theme-ctrl-chevron-selected, var(--smtc-icon-theme-ctrl-default-selected))"; + +// @public (undocumented) +export const iconThemeCtrlChevronSelectedRaw = "--smtc-icon-theme-ctrl-chevron-selected"; + +// @public (undocumented) +export const iconThemeCtrlDefaultHover = "var(--smtc-icon-theme-ctrl-default-hover, var(--smtc-icon-theme-ctrl-default-rest))"; + +// @public (undocumented) +export const iconThemeCtrlDefaultHoverRaw = "--smtc-icon-theme-ctrl-default-hover"; + +// @public (undocumented) +export const iconThemeCtrlDefaultPressed = "var(--smtc-icon-theme-ctrl-default-pressed, var(--smtc-icon-theme-ctrl-default-rest))"; + +// @public (undocumented) +export const iconThemeCtrlDefaultPressedRaw = "--smtc-icon-theme-ctrl-default-pressed"; + +// @public (undocumented) +export const iconThemeCtrlDefaultRest = "var(--smtc-icon-theme-ctrl-default-rest)"; + +// @public (undocumented) +export const iconThemeCtrlDefaultRestRaw = "--smtc-icon-theme-ctrl-default-rest"; + +// @public (undocumented) +export const iconThemeCtrlDefaultSelected = "var(--smtc-icon-theme-ctrl-default-selected)"; + +// @public (undocumented) +export const iconThemeCtrlDefaultSelectedRaw = "--smtc-icon-theme-ctrl-default-selected"; + +// @public (undocumented) +export const iconThemeCtrlSubtleHover = "var(--smtc-icon-theme-ctrl-subtle-hover, var(--smtc-icon-theme-ctrl-default-rest))"; + +// @public (undocumented) +export const iconThemeCtrlSubtleHoverRaw = "--smtc-icon-theme-ctrl-subtle-hover"; + +// @public (undocumented) +export const iconThemeCtrlSubtlePressed = "var(--smtc-icon-theme-ctrl-subtle-pressed, var(--smtc-icon-theme-ctrl-default-rest))"; + +// @public (undocumented) +export const iconThemeCtrlSubtlePressedRaw = "--smtc-icon-theme-ctrl-subtle-pressed"; + +// @public (undocumented) +export const iconThemeCtrlSubtleRest = "var(--smtc-icon-theme-ctrl-subtle-rest, var(--smtc-icon-theme-ctrl-default-rest))"; + +// @public (undocumented) +export const iconThemeCtrlSubtleRestRaw = "--smtc-icon-theme-ctrl-subtle-rest"; + +// @public (undocumented) +export const iconThemeCtrlSubtleSelected = "var(--smtc-icon-theme-ctrl-subtle-selected, var(--smtc-icon-theme-ctrl-default-selected))"; + +// @public (undocumented) +export const iconThemeCtrlSubtleSelectedRaw = "--smtc-icon-theme-ctrl-subtle-selected"; + +// @public (undocumented) +export const materialAcrylicBlur = "var(--smtc-material-acrylic-blur)"; + +// @public (undocumented) +export const materialAcrylicBlurRaw = "--smtc-material-acrylic-blur"; + +// @public (undocumented) +export const materialAcrylicDefaultColorBlend = "var(--smtc-material-acrylic-default-color-blend, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialAcrylicDefaultColorBlendRaw = "--smtc-material-acrylic-default-color-blend"; + +// @public (undocumented) +export const materialAcrylicDefaultLumBlend = "var(--smtc-material-acrylic-default-lum-blend, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialAcrylicDefaultLumBlendRaw = "--smtc-material-acrylic-default-lum-blend"; + +// @public (undocumented) +export const materialAcrylicDefaultSolid = "var(--smtc-material-acrylic-default-solid, var(--smtc-background-layer-primary-solid, var(--colorNeutralBackground1)))"; + +// @public (undocumented) +export const materialAcrylicDefaultSolidRaw = "--smtc-material-acrylic-default-solid"; + +// @public (undocumented) +export const materialAcrylicShellDefaultColorBlend = "var(--smtc-material-acrylic-shell-default-color-blend, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialAcrylicShellDefaultColorBlendRaw = "--smtc-material-acrylic-shell-default-color-blend"; + +// @public (undocumented) +export const materialAcrylicShellDefaultLumBlend = "var(--smtc-material-acrylic-shell-default-lum-blend, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialAcrylicShellDefaultLumBlendRaw = "--smtc-material-acrylic-shell-default-lum-blend"; + +// @public (undocumented) +export const materialAcrylicShellDefaultSolid = "var(--smtc-material-acrylic-shell-default-solid, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialAcrylicShellDefaultSolidRaw = "--smtc-material-acrylic-shell-default-solid"; + +// @public (undocumented) +export const materialMicaBlur = "var(--smtc-material-mica-blur)"; + +// @public (undocumented) +export const materialMicaBlurRaw = "--smtc-material-mica-blur"; + +// @public (undocumented) +export const materialMicaDarkerColorBlend = "var(--smtc-material-mica-darker-color-blend, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialMicaDarkerColorBlendRaw = "--smtc-material-mica-darker-color-blend"; + +// @public (undocumented) +export const materialMicaDarkerLumBlend = "var(--smtc-material-mica-darker-lum-blend, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialMicaDarkerLumBlendRaw = "--smtc-material-mica-darker-lum-blend"; + +// @public (undocumented) +export const materialMicaDarkerSolid = "var(--smtc-material-mica-darker-solid, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialMicaDarkerSolidRaw = "--smtc-material-mica-darker-solid"; + +// @public (undocumented) +export const materialMicaDefaultColorBlend = "var(--smtc-material-mica-default-color-blend, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialMicaDefaultColorBlendRaw = "--smtc-material-mica-default-color-blend"; + +// @public (undocumented) +export const materialMicaDefaultLumBlend = "var(--smtc-material-mica-default-lum-blend, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialMicaDefaultLumBlendRaw = "--smtc-material-mica-default-lum-blend"; + +// @public (undocumented) +export const materialMicaDefaultSolid = "var(--smtc-material-mica-default-solid, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialMicaDefaultSolidRaw = "--smtc-material-mica-default-solid"; + +// @public (undocumented) +export const materialMicaThinColorBlend = "var(--smtc-material-mica-thin-color-blend, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialMicaThinColorBlendRaw = "--smtc-material-mica-thin-color-blend"; + +// @public (undocumented) +export const materialMicaThinLumBlend = "var(--smtc-material-mica-thin-lum-blend, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialMicaThinLumBlendRaw = "--smtc-material-mica-thin-lum-blend"; + +// @public (undocumented) +export const materialMicaThinSolid = "var(--smtc-material-mica-thin-solid, var(--smtc-background-layer-primary-solid))"; + +// @public (undocumented) +export const materialMicaThinSolidRaw = "--smtc-material-mica-thin-solid"; + +// @public +export const _nullBackgroundColorHover = "var(--smtc-null-color, var(--colorTransparentBackgroundHover))"; + +// @public +export const _nullBackgroundColorPressed = "var(--smtc-null-color, var(--colorTransparentBackgroundPressed))"; + +// @public (undocumented) +export const nullColor = "var(--smtc-null-color, var(--colorTransparentBackground))"; + +// @public (undocumented) +export const nullColorRaw = "--smtc-null-color"; + +// @public (undocumented) +export const nullNumber = "var(--smtc-null-number)"; + +// @public (undocumented) +export const nullNumberRaw = "--smtc-null-number"; + +// @public (undocumented) +export const nullString = "var(--smtc-null-string)"; + +// @public (undocumented) +export const nullStringRaw = "--smtc-null-string"; + +// @public (undocumented) +export const paddingCardNestedImage = "var(--smtc-padding-card-nested-image, var(--smtc-padding-content-align-default))"; + +// @public (undocumented) +export const paddingCardNestedImageRaw = "--smtc-padding-card-nested-image"; + +// @public (undocumented) +export const paddingContentAlignDefault = "var(--smtc-padding-content-align-default, var(--spacingVerticalS))"; + +// @public (undocumented) +export const paddingContentAlignDefaultRaw = "--smtc-padding-content-align-default"; + +// @public (undocumented) +export const paddingContentAlignOutdentIconOnSubtle = "var(--smtc-padding-content-align-outdent-icon-on-subtle, var(--spacingHorizontalM))"; + +// @public (undocumented) +export const paddingContentAlignOutdentIconOnSubtleRaw = "--smtc-padding-content-align-outdent-icon-on-subtle"; + +// @public (undocumented) +export const paddingContentAlignOutdentTextOnSubtle = "var(--smtc-padding-content-align-outdent-text-on-subtle)"; + +// @public (undocumented) +export const paddingContentAlignOutdentTextOnSubtleRaw = "--smtc-padding-content-align-outdent-text-on-subtle"; + +// @public (undocumented) +export const paddingContentLarge = "var(--smtc-padding-content-large, var(--spacingHorizontalXXL))"; + +// @public (undocumented) +export const paddingContentLargeRaw = "--smtc-padding-content-large"; + +// @public (undocumented) +export const paddingContentMedium = "var(--smtc-padding-content-medium, 16px)"; + +// @public (undocumented) +export const paddingContentMediumRaw = "--smtc-padding-content-medium"; + +// @public (undocumented) +export const paddingContentNone = "var(--smtc-padding-content-none, var(--spacingHorizontalNone))"; + +// @public (undocumented) +export const paddingContentNoneRaw = "--smtc-padding-content-none"; + +// @public (undocumented) +export const paddingContentSmall = "var(--smtc-padding-content-small, 12px)"; + +// @public (undocumented) +export const paddingContentSmallRaw = "--smtc-padding-content-small"; + +// @public (undocumented) +export const paddingContentXLarge = "var(--smtc-padding-content-x-large)"; + +// @public (undocumented) +export const paddingContentXLargeRaw = "--smtc-padding-content-x-large"; + +// @public (undocumented) +export const paddingContentXSmall = "var(--smtc-padding-content-x-small)"; + +// @public (undocumented) +export const paddingContentXSmallRaw = "--smtc-padding-content-x-small"; + +// @public (undocumented) +export const paddingContentXxLarge = "var(--smtc-padding-content-xx-large)"; + +// @public (undocumented) +export const paddingContentXxLargeRaw = "--smtc-padding-content-xx-large"; + +// @public (undocumented) +export const paddingContentXxSmall = "var(--smtc-padding-content-xx-small)"; + +// @public (undocumented) +export const paddingContentXxSmallRaw = "--smtc-padding-content-xx-small"; + +// @public (undocumented) +export const paddingContentXxxLarge = "var(--smtc-padding-content-xxx-large)"; + +// @public (undocumented) +export const paddingContentXxxLargeRaw = "--smtc-padding-content-xxx-large"; + +// @public (undocumented) +export const paddingCtrlHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalM))"; + +// @public (undocumented) +export const paddingCtrlHorizontalDefaultRaw = "--smtc-padding-ctrl-horizontal-default"; + +// @public (undocumented) +export const paddingCtrlHorizontalIconOnly = "var(--smtc-padding-ctrl-horizontal-icon-only, 5px)"; + +// @public (undocumented) +export const paddingCtrlHorizontalIconOnlyRaw = "--smtc-padding-ctrl-horizontal-icon-only"; + +// @public (undocumented) +export const paddingCtrlLgHorizontalDefault = "var(--smtc-padding-ctrl-lg-horizontal-default, var(--spacingHorizontalL))"; + +// @public (undocumented) +export const paddingCtrlLgHorizontalDefaultRaw = "--smtc-padding-ctrl-lg-horizontal-default"; + +// @public (undocumented) +export const paddingCtrlLgHorizontalIconOnly = "var(--smtc-padding-ctrl-lg-horizontal-icon-only, 7px)"; + +// @public (undocumented) +export const paddingCtrlLgHorizontalIconOnlyRaw = "--smtc-padding-ctrl-lg-horizontal-icon-only"; + +// @public (undocumented) +export const paddingCtrlLgTextBottom = "var(--smtc-padding-ctrl-lg-text-bottom, var(--smtc-padding-ctrl-lg-text-top))"; + +// @public (undocumented) +export const paddingCtrlLgTextBottomRaw = "--smtc-padding-ctrl-lg-text-bottom"; + +// @public (undocumented) +export const paddingCtrlLgTextTop = "var(--smtc-padding-ctrl-lg-text-top)"; + +// @public (undocumented) +export const paddingCtrlLgTextTopRaw = "--smtc-padding-ctrl-lg-text-top"; + +// @public (undocumented) +export const paddingCtrlLgToNestedControl = "var(--smtc-padding-ctrl-lg-to-nested-control)"; + +// @public (undocumented) +export const paddingCtrlLgToNestedControlRaw = "--smtc-padding-ctrl-lg-to-nested-control"; + +// @public (undocumented) +export const paddingCtrlSmHorizontalDefault = "var(--smtc-padding-ctrl-sm-horizontal-default, var(--spacingHorizontalS))"; + +// @public (undocumented) +export const paddingCtrlSmHorizontalDefaultRaw = "--smtc-padding-ctrl-sm-horizontal-default"; + +// @public (undocumented) +export const paddingCtrlSmHorizontalIconOnly = "var(--smtc-padding-ctrl-sm-horizontal-icon-only, 1px)"; + +// @public (undocumented) +export const paddingCtrlSmHorizontalIconOnlyRaw = "--smtc-padding-ctrl-sm-horizontal-icon-only"; + +// @public (undocumented) +export const paddingCtrlSmTextBottom = "var(--smtc-padding-ctrl-sm-text-bottom, var(--smtc-padding-ctrl-sm-text-top))"; + +// @public (undocumented) +export const paddingCtrlSmTextBottomRaw = "--smtc-padding-ctrl-sm-text-bottom"; + +// @public (undocumented) +export const paddingCtrlSmTextTop = "var(--smtc-padding-ctrl-sm-text-top)"; + +// @public (undocumented) +export const paddingCtrlSmTextTopRaw = "--smtc-padding-ctrl-sm-text-top"; + +// @public (undocumented) +export const paddingCtrlSmToNestedControl = "var(--smtc-padding-ctrl-sm-to-nested-control)"; + +// @public (undocumented) +export const paddingCtrlSmToNestedControlRaw = "--smtc-padding-ctrl-sm-to-nested-control"; + +// @public (undocumented) +export const paddingCtrlTextBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, 5px))"; + +// @public (undocumented) +export const paddingCtrlTextBottomRaw = "--smtc-padding-ctrl-text-bottom"; + +// @public (undocumented) +export const paddingCtrlTextSide = "var(--smtc-padding-ctrl-text-side, 0px)"; + +// @public (undocumented) +export const paddingCtrlTextSideRaw = "--smtc-padding-ctrl-text-side"; + +// @public (undocumented) +export const paddingCtrlTextTop = "var(--smtc-padding-ctrl-text-top, 5px)"; + +// @public (undocumented) +export const paddingCtrlTextTopRaw = "--smtc-padding-ctrl-text-top"; + +// @public (undocumented) +export const paddingCtrlToNestedControl = "var(--smtc-padding-ctrl-to-nested-control)"; + +// @public (undocumented) +export const paddingCtrlToNestedControlRaw = "--smtc-padding-ctrl-to-nested-control"; + +// @public (undocumented) +export const paddingFlyoutDefault = "var(--smtc-padding-flyout-default, var(--smtc-padding-content-align-outdent-text-on-subtle, 4px))"; + +// @public (undocumented) +export const paddingFlyoutDefaultRaw = "--smtc-padding-flyout-default"; + +// @public (undocumented) +export const paddingToolbarInside = "var(--smtc-padding-toolbar-inside, var(--smtc-padding-content-x-small))"; + +// @public (undocumented) +export const paddingToolbarInsideRaw = "--smtc-padding-toolbar-inside"; + +// @public (undocumented) +export const paddingToolbarOutside = "var(--smtc-padding-toolbar-outside, var(--smtc-padding-content-xx-small))"; + +// @public (undocumented) +export const paddingToolbarOutsideRaw = "--smtc-padding-toolbar-outside"; + +// @public (undocumented) +export const shadowCardDisabled = "var(--smtc-shadow-card-disabled, unset)"; + +// @public (undocumented) +export const shadowCardDisabledRaw = "--smtc-shadow-card-disabled"; + +// @public (undocumented) +export const shadowCardHover = "var(--smtc-shadow-card-hover, unset)"; + +// @public (undocumented) +export const shadowCardHoverRaw = "--smtc-shadow-card-hover"; + +// @public (undocumented) +export const shadowCardPressed = "var(--smtc-shadow-card-pressed, unset)"; + +// @public (undocumented) +export const shadowCardPressedRaw = "--smtc-shadow-card-pressed"; + +// @public (undocumented) +export const shadowCardRest = "var(--smtc-shadow-card-rest, unset)"; + +// @public (undocumented) +export const shadowCardRestRaw = "--smtc-shadow-card-rest"; + +// @public (undocumented) +export const shadowCtrlOnDrag = "var(--smtc-shadow-ctrl-on-drag, var(--smtc-shadow-flyout))"; + +// @public (undocumented) +export const shadowCtrlOnDragRaw = "--smtc-shadow-ctrl-on-drag"; + +// @public (undocumented) +export const shadowFlyout = "var(--smtc-shadow-flyout, var(--shadow64))"; + +// @public (undocumented) +export const shadowFlyoutRaw = "--smtc-shadow-flyout"; + +// @public (undocumented) +export const shadowLayer = "var(--smtc-shadow-layer, unset)"; + +// @public (undocumented) +export const shadowLayerRaw = "--smtc-shadow-layer"; + +// @public (undocumented) +export const shadowToolbar = "var(--smtc-shadow-toolbar)"; + +// @public (undocumented) +export const shadowToolbarRaw = "--smtc-shadow-toolbar"; + +// @public (undocumented) +export const shadowWindowActive = "var(--smtc-shadow-window-active)"; + +// @public (undocumented) +export const shadowWindowActiveRaw = "--smtc-shadow-window-active"; + +// @public (undocumented) +export const shadowWindowInactive = "var(--smtc-shadow-window-inactive, var(--smtc-shadow-window-active))"; + +// @public (undocumented) +export const shadowWindowInactiveRaw = "--smtc-shadow-window-inactive"; + +// @public (undocumented) +export const sizeCtrlDefault = "var(--smtc-size-ctrl-default, 44px)"; + +// @public (undocumented) +export const sizeCtrlDefaultRaw = "--smtc-size-ctrl-default"; + +// @public (undocumented) +export const sizeCtrlIcon = "var(--smtc-size-ctrl-icon, 20px)"; + +// @public (undocumented) +export const sizeCtrlIconRaw = "--smtc-size-ctrl-icon"; + +// @public (undocumented) +export const sizeCtrlIconSecondary = "var(--smtc-size-ctrl-icon-secondary, 20px)"; + +// @public (undocumented) +export const sizeCtrlIconSecondaryRaw = "--smtc-size-ctrl-icon-secondary"; + +// @public (undocumented) +export const sizeCtrlLgDefault = "var(--smtc-size-ctrl-lg-default, 44px)"; + +// @public (undocumented) +export const sizeCtrlLgDefaultRaw = "--smtc-size-ctrl-lg-default"; + +// @public (undocumented) +export const sizeCtrlLgIcon = "var(--smtc-size-ctrl-lg-icon, 24px)"; + +// @public (undocumented) +export const sizeCtrlLgIconRaw = "--smtc-size-ctrl-lg-icon"; + +// @public (undocumented) +export const sizeCtrlSmDefault = "var(--smtc-size-ctrl-sm-default, 32px)"; + +// @public (undocumented) +export const sizeCtrlSmDefaultRaw = "--smtc-size-ctrl-sm-default"; + +// @public (undocumented) +export const sizeCtrlSmIcon = "var(--smtc-size-ctrl-sm-icon, 20px)"; + +// @public (undocumented) +export const sizeCtrlSmIconRaw = "--smtc-size-ctrl-sm-icon"; + +// @public (undocumented) +export const statusAwayForeground = "var(--smtc-status-away-foreground, var(--colorPaletteMarigoldBackground3))"; + +// @public (undocumented) +export const statusAwayForegroundRaw = "--smtc-status-away-foreground"; + +// @public (undocumented) +export const statusBrandBackground = "var(--smtc-status-brand-background, var(--smtc-background-ctrl-brand-rest, var(--colorBrandBackground)))"; + +// @public (undocumented) +export const statusBrandBackgroundRaw = "--smtc-status-brand-background"; + +// @public (undocumented) +export const statusBrandForeground = "var(--smtc-status-brand-foreground, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForegroundOnBrand)))"; + +// @public (undocumented) +export const statusBrandForegroundRaw = "--smtc-status-brand-foreground"; + +// @public (undocumented) +export const statusBrandStroke = "var(--smtc-status-brand-stroke, var(--smtc-background-ctrl-brand-rest))"; + +// @public (undocumented) +export const statusBrandStrokeRaw = "--smtc-status-brand-stroke"; + +// @public (undocumented) +export const statusBrandTintBackground = "var(--smtc-status-brand-tint-background, var(--colorBrandBackground2))"; + +// @public (undocumented) +export const statusBrandTintBackgroundRaw = "--smtc-status-brand-tint-background"; + +// @public (undocumented) +export const statusBrandTintForeground = "var(--smtc-status-brand-tint-foreground, var(--smtc-foreground-ctrl-brand-rest, var(--colorBrandForeground1)))"; + +// @public (undocumented) +export const statusBrandTintForegroundRaw = "--smtc-status-brand-tint-foreground"; + +// @public (undocumented) +export const statusBrandTintStroke = "var(--smtc-status-brand-tint-stroke, var(--colorBrandStroke2))"; + +// @public (undocumented) +export const statusBrandTintStrokeRaw = "--smtc-status-brand-tint-stroke"; + +// @public (undocumented) +export const statusDangerBackground = "var(--smtc-status-danger-background, var(--colorPaletteRedBackground3))"; + +// @public (undocumented) +export const statusDangerBackgroundRaw = "--smtc-status-danger-background"; + +// @public (undocumented) +export const statusDangerForeground = "var(--smtc-status-danger-foreground, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForegroundOnBrand)))"; + +// @public (undocumented) +export const statusDangerForegroundRaw = "--smtc-status-danger-foreground"; + +// @public (undocumented) +export const statusDangerStroke = "var(--smtc-status-danger-stroke, var(--smtc-status-danger-background, var(--colorPaletteRedBorder2)))"; + +// @public (undocumented) +export const statusDangerStrokeRaw = "--smtc-status-danger-stroke"; + +// @public (undocumented) +export const statusDangerTintBackground = "var(--smtc-status-danger-tint-background, var(--colorStatusDangerBackground1))"; + +// @public (undocumented) +export const statusDangerTintBackgroundRaw = "--smtc-status-danger-tint-background"; + +// @public (undocumented) +export const statusDangerTintForeground = "var(--smtc-status-danger-tint-foreground, var(--colorPaletteRedForeground3))"; + +// @public (undocumented) +export const statusDangerTintForegroundRaw = "--smtc-status-danger-tint-foreground"; + +// @public (undocumented) +export const statusDangerTintStroke = "var(--smtc-status-danger-tint-stroke, var(--colorStatusDangerBorder1))"; + +// @public (undocumented) +export const statusDangerTintStrokeRaw = "--smtc-status-danger-tint-stroke"; + +// @public (undocumented) +export const statusImportantBackground = "var(--smtc-status-important-background, var(--colorNeutralForeground1))"; + +// @public (undocumented) +export const statusImportantBackgroundRaw = "--smtc-status-important-background"; + +// @public (undocumented) +export const statusImportantForeground = "var(--smtc-status-important-foreground, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralBackground1)))"; + +// @public (undocumented) +export const statusImportantForegroundRaw = "--smtc-status-important-foreground"; + +// @public (undocumented) +export const statusImportantStroke = "var(--smtc-status-important-stroke, var(--smtc-status-important-background, var(--colorNeutralStrokeAccessible)))"; + +// @public (undocumented) +export const statusImportantStrokeRaw = "--smtc-status-important-stroke"; + +// @public (undocumented) +export const statusImportantTintBackground = "var(--smtc-status-important-tint-background, var(--colorNeutralBackground3))"; + +// @public (undocumented) +export const statusImportantTintBackgroundRaw = "--smtc-status-important-tint-background"; + +// @public (undocumented) +export const statusImportantTintForeground = "var(--smtc-status-important-tint-foreground, var(--colorNeutralForeground1))"; + +// @public (undocumented) +export const statusImportantTintForegroundRaw = "--smtc-status-important-tint-foreground"; + +// @public (undocumented) +export const statusImportantTintStroke = "var(--smtc-status-important-tint-stroke, var(--colorTransparentStroke))"; + +// @public (undocumented) +export const statusImportantTintStrokeRaw = "--smtc-status-important-tint-stroke"; + +// @public (undocumented) +export const statusInformativeBackground = "var(--smtc-status-informative-background, var(--colorNeutralBackground5))"; + +// @public (undocumented) +export const statusInformativeBackgroundRaw = "--smtc-status-informative-background"; + +// @public (undocumented) +export const statusInformativeForeground = "var(--smtc-status-informative-foreground, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3)))"; + +// @public (undocumented) +export const statusInformativeForegroundRaw = "--smtc-status-informative-foreground"; + +// @public (undocumented) +export const statusInformativeStroke = "var(--smtc-status-informative-stroke, var(--smtc-status-informative-background, var(--colorNeutralStroke2)))"; + +// @public (undocumented) +export const statusInformativeStrokeRaw = "--smtc-status-informative-stroke"; + +// @public (undocumented) +export const statusInformativeTintBackground = "var(--smtc-status-informative-tint-background, var(--colorNeutralBackground4))"; + +// @public (undocumented) +export const statusInformativeTintBackgroundRaw = "--smtc-status-informative-tint-background"; + +// @public (undocumented) +export const statusInformativeTintForeground = "var(--smtc-status-informative-tint-foreground, var(--colorNeutralForeground2))"; + +// @public (undocumented) +export const statusInformativeTintForegroundRaw = "--smtc-status-informative-tint-foreground"; + +// @public (undocumented) +export const statusInformativeTintStroke = "var(--smtc-status-informative-tint-stroke, var(--colorNeutralStroke1))"; + +// @public (undocumented) +export const statusInformativeTintStrokeRaw = "--smtc-status-informative-tint-stroke"; + +// @public (undocumented) +export const statusNeutralBackground = "var(--smtc-status-neutral-background)"; + +// @public (undocumented) +export const statusNeutralBackgroundRaw = "--smtc-status-neutral-background"; + +// @public (undocumented) +export const statusNeutralForeground = "var(--smtc-status-neutral-foreground, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; + +// @public (undocumented) +export const statusNeutralForegroundRaw = "--smtc-status-neutral-foreground"; + +// @public (undocumented) +export const statusNeutralStroke = "var(--smtc-status-neutral-stroke, var(--smtc-status-neutral-background))"; + +// @public (undocumented) +export const statusNeutralStrokeRaw = "--smtc-status-neutral-stroke"; + +// @public (undocumented) +export const statusNeutralTintBackground = "var(--smtc-status-neutral-tint-background)"; + +// @public (undocumented) +export const statusNeutralTintBackgroundRaw = "--smtc-status-neutral-tint-background"; + +// @public (undocumented) +export const statusNeutralTintForeground = "var(--smtc-status-neutral-tint-foreground, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; + +// @public (undocumented) +export const statusNeutralTintForegroundRaw = "--smtc-status-neutral-tint-foreground"; + +// @public (undocumented) +export const statusNeutralTintStroke = "var(--smtc-status-neutral-tint-stroke)"; + +// @public (undocumented) +export const statusNeutralTintStrokeRaw = "--smtc-status-neutral-tint-stroke"; + +// @public (undocumented) +export const statusOofForeground = "var(--smtc-status-oof-foreground, var(--colorPaletteBerryForeground3))"; + +// @public (undocumented) +export const statusOofForegroundRaw = "--smtc-status-oof-foreground"; + +// @public (undocumented) +export const statusSuccessBackground = "var(--smtc-status-success-background, var(--colorPaletteGreenBackground3))"; + +// @public (undocumented) +export const statusSuccessBackgroundRaw = "--smtc-status-success-background"; + +// @public (undocumented) +export const statusSuccessForeground = "var(--smtc-status-success-foreground, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForegroundOnBrand)))"; + +// @public (undocumented) +export const statusSuccessForegroundRaw = "--smtc-status-success-foreground"; + +// @public (undocumented) +export const statusSuccessStroke = "var(--smtc-status-success-stroke, var(--smtc-status-success-background, var(--colorPaletteGreenBorder2)))"; + +// @public (undocumented) +export const statusSuccessStrokeRaw = "--smtc-status-success-stroke"; + +// @public (undocumented) +export const statusSuccessTintBackground = "var(--smtc-status-success-tint-background, var(--colorStatusSuccessBackground1))"; + +// @public (undocumented) +export const statusSuccessTintBackgroundRaw = "--smtc-status-success-tint-background"; + +// @public (undocumented) +export const statusSuccessTintForeground = "var(--smtc-status-success-tint-foreground, var(--colorStatusSuccessForeground1))"; + +// @public (undocumented) +export const statusSuccessTintForegroundRaw = "--smtc-status-success-tint-foreground"; + +// @public (undocumented) +export const statusSuccessTintStroke = "var(--smtc-status-success-tint-stroke, var(--colorStatusSuccessBorder1))"; + +// @public (undocumented) +export const statusSuccessTintStrokeRaw = "--smtc-status-success-tint-stroke"; + +// @public (undocumented) +export const statusWarningBackground = "var(--smtc-status-warning-background, var(--colorPaletteDarkOrangeBackground3))"; + +// @public (undocumented) +export const statusWarningBackgroundRaw = "--smtc-status-warning-background"; + +// @public (undocumented) +export const statusWarningForeground = "var(--smtc-status-warning-foreground, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForeground1Static)))"; + +// @public (undocumented) +export const statusWarningForegroundRaw = "--smtc-status-warning-foreground"; + +// @public (undocumented) +export const statusWarningStroke = "var(--smtc-status-warning-stroke, var(--smtc-status-warning-background))"; + +// @public (undocumented) +export const statusWarningStrokeRaw = "--smtc-status-warning-stroke"; + +// @public (undocumented) +export const statusWarningTintBackground = "var(--smtc-status-warning-tint-background, var(--colorStatusWarningBackground1))"; + +// @public (undocumented) +export const statusWarningTintBackgroundRaw = "--smtc-status-warning-tint-background"; + +// @public (undocumented) +export const statusWarningTintForeground = "var(--smtc-status-warning-tint-foreground, var(--colorStatusWarningForeground3))"; + +// @public (undocumented) +export const statusWarningTintForegroundRaw = "--smtc-status-warning-tint-foreground"; + +// @public (undocumented) +export const statusWarningTintStroke = "var(--smtc-status-warning-tint-stroke, var(--colorStatusWarningBorder1))"; + +// @public (undocumented) +export const statusWarningTintStrokeRaw = "--smtc-status-warning-tint-stroke"; + +// @public (undocumented) +export const strokeCardOnPrimaryDisabled = "var(--smtc-stroke-card-on-primary-disabled, unset)"; + +// @public (undocumented) +export const strokeCardOnPrimaryDisabledRaw = "--smtc-stroke-card-on-primary-disabled"; + +// @public (undocumented) +export const strokeCardOnPrimaryHover = "var(--smtc-stroke-card-on-primary-hover, unset)"; + +// @public (undocumented) +export const strokeCardOnPrimaryHoverRaw = "--smtc-stroke-card-on-primary-hover"; + +// @public (undocumented) +export const strokeCardOnPrimaryPressed = "var(--smtc-stroke-card-on-primary-pressed, unset)"; + +// @public (undocumented) +export const strokeCardOnPrimaryPressedRaw = "--smtc-stroke-card-on-primary-pressed"; + +// @public (undocumented) +export const strokeCardOnPrimaryRest = "var(--smtc-stroke-card-on-primary-rest, unset)"; + +// @public (undocumented) +export const strokeCardOnPrimaryRestRaw = "--smtc-stroke-card-on-primary-rest"; + +// @public (undocumented) +export const strokeCardOnSecondaryDisabled = "var(--smtc-stroke-card-on-secondary-disabled, unset)"; + +// @public (undocumented) +export const strokeCardOnSecondaryDisabledRaw = "--smtc-stroke-card-on-secondary-disabled"; + +// @public (undocumented) +export const strokeCardOnSecondaryHover = "var(--smtc-stroke-card-on-secondary-hover, unset)"; + +// @public (undocumented) +export const strokeCardOnSecondaryHoverRaw = "--smtc-stroke-card-on-secondary-hover"; + +// @public (undocumented) +export const strokeCardOnSecondaryPressed = "var(--smtc-stroke-card-on-secondary-pressed, unset)"; + +// @public (undocumented) +export const strokeCardOnSecondaryPressedRaw = "--smtc-stroke-card-on-secondary-pressed"; + +// @public (undocumented) +export const strokeCardOnSecondaryRest = "var(--smtc-stroke-card-on-secondary-rest, unset)"; + +// @public (undocumented) +export const strokeCardOnSecondaryRestRaw = "--smtc-stroke-card-on-secondary-rest"; + +// @public (undocumented) +export const strokeCardSelected = "var(--smtc-stroke-card-selected, unset)"; + +// @public (undocumented) +export const strokeCardSelectedRaw = "--smtc-stroke-card-selected"; + +// @public (undocumented) +export const strokeCtrlDividerOnActiveBrand = "var(--smtc-stroke-ctrl-divider-on-active-brand, var(--smtc-stroke-ctrl-divider-on-brand))"; + +// @public (undocumented) +export const strokeCtrlDividerOnActiveBrandDisabled = "var(--smtc-stroke-ctrl-divider-on-active-brand-disabled, var(--smtc-stroke-ctrl-divider-on-brand))"; + +// @public (undocumented) +export const strokeCtrlDividerOnActiveBrandDisabledRaw = "--smtc-stroke-ctrl-divider-on-active-brand-disabled"; + +// @public (undocumented) +export const strokeCtrlDividerOnActiveBrandRaw = "--smtc-stroke-ctrl-divider-on-active-brand"; + +// @public (undocumented) +export const strokeCtrlDividerOnBrand = "var(--smtc-stroke-ctrl-divider-on-brand, var(--colorNeutralStrokeOnBrand))"; + +// @public (undocumented) +export const strokeCtrlDividerOnBrandDisabled = "var(--smtc-stroke-ctrl-divider-on-brand-disabled, var(--smtc-stroke-ctrl-divider-on-brand))"; + +// @public (undocumented) +export const strokeCtrlDividerOnBrandDisabledRaw = "--smtc-stroke-ctrl-divider-on-brand-disabled"; + +// @public (undocumented) +export const strokeCtrlDividerOnBrandRaw = "--smtc-stroke-ctrl-divider-on-brand"; + +// @public (undocumented) +export const strokeCtrlDividerOnNeutral = "var(--smtc-stroke-ctrl-divider-on-neutral)"; + +// @public (undocumented) +export const strokeCtrlDividerOnNeutralDisabled = "var(--smtc-stroke-ctrl-divider-on-neutral-disabled, var(--smtc-stroke-ctrl-divider-on-neutral))"; + +// @public (undocumented) +export const strokeCtrlDividerOnNeutralDisabledRaw = "--smtc-stroke-ctrl-divider-on-neutral-disabled"; + +// @public (undocumented) +export const strokeCtrlDividerOnNeutralRaw = "--smtc-stroke-ctrl-divider-on-neutral"; + +// @public (undocumented) +export const strokeCtrlDividerOnOutline = "var(--smtc-stroke-ctrl-divider-on-outline, var(--colorNeutralStroke1))"; + +// @public (undocumented) +export const strokeCtrlDividerOnOutlineDisabled = "var(--smtc-stroke-ctrl-divider-on-outline-disabled, var(--smtc-stroke-ctrl-divider-on-outline))"; + +// @public (undocumented) +export const strokeCtrlDividerOnOutlineDisabledRaw = "--smtc-stroke-ctrl-divider-on-outline-disabled"; + +// @public (undocumented) +export const strokeCtrlDividerOnOutlineRaw = "--smtc-stroke-ctrl-divider-on-outline"; + +// @public (undocumented) +export const strokeCtrlDividerOnSubtle = "var(--smtc-stroke-ctrl-divider-on-subtle, var(--smtc-null-color, transparent))"; + +// @public (undocumented) +export const strokeCtrlDividerOnSubtleDisabled = "var(--smtc-stroke-ctrl-divider-on-subtle-disabled, unset)"; + +// @public (undocumented) +export const strokeCtrlDividerOnSubtleDisabledRaw = "--smtc-stroke-ctrl-divider-on-subtle-disabled"; + +// @public (undocumented) +export const strokeCtrlDividerOnSubtleRaw = "--smtc-stroke-ctrl-divider-on-subtle"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandDisabled = "var(--smtc-stroke-ctrl-on-active-brand-disabled, var(--smtc-stroke-ctrl-on-brand-disabled, var(--colorTransparentStrokeDisabled)))"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandDisabledRaw = "--smtc-stroke-ctrl-on-active-brand-disabled"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandDisabledStop2 = "var(--smtc-stroke-ctrl-on-active-brand-disabled-stop2, var(--smtc-stroke-ctrl-on-brand-disabled))"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandDisabledStop2Raw = "--smtc-stroke-ctrl-on-active-brand-disabled-stop2"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandHover = "var(--smtc-stroke-ctrl-on-active-brand-hover, var(--smtc-stroke-ctrl-on-brand-hover, var(--colorStrokeFocus2)))"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandHoverRaw = "--smtc-stroke-ctrl-on-active-brand-hover"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandHoverStop2 = "var(--smtc-stroke-ctrl-on-active-brand-hover-stop2, var(--smtc-stroke-ctrl-on-brand-rest))"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandHoverStop2Raw = "--smtc-stroke-ctrl-on-active-brand-hover-stop2"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandPressed = "var(--smtc-stroke-ctrl-on-active-brand-pressed, var(--smtc-stroke-ctrl-on-brand-pressed, var(--colorTransparentStrokeInteractive)))"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandPressedRaw = "--smtc-stroke-ctrl-on-active-brand-pressed"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandPressedStop2 = "var(--smtc-stroke-ctrl-on-active-brand-pressed-stop2, var(--smtc-stroke-ctrl-on-brand-pressed))"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandPressedStop2Raw = "--smtc-stroke-ctrl-on-active-brand-pressed-stop2"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandRest = "var(--smtc-stroke-ctrl-on-active-brand-rest, var(--smtc-stroke-ctrl-on-brand-rest, var(--colorNeutralForegroundOnBrand)))"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandRestRaw = "--smtc-stroke-ctrl-on-active-brand-rest"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandRestStop2 = "var(--smtc-stroke-ctrl-on-active-brand-rest-stop2, var(--smtc-stroke-ctrl-on-brand-rest))"; + +// @public (undocumented) +export const strokeCtrlOnActiveBrandRestStop2Raw = "--smtc-stroke-ctrl-on-active-brand-rest-stop2"; + +// @public (undocumented) +export const strokeCtrlOnBrandDisabled = "var(--smtc-stroke-ctrl-on-brand-disabled, var(--smtc-null-color, transparent))"; + +// @public (undocumented) +export const strokeCtrlOnBrandDisabledRaw = "--smtc-stroke-ctrl-on-brand-disabled"; + +// @public (undocumented) +export const strokeCtrlOnBrandDisabledStop2 = "var(--smtc-stroke-ctrl-on-brand-disabled-stop2, var(--smtc-stroke-ctrl-on-brand-disabled))"; + +// @public (undocumented) +export const strokeCtrlOnBrandDisabledStop2Raw = "--smtc-stroke-ctrl-on-brand-disabled-stop2"; + +// @public (undocumented) +export const strokeCtrlOnBrandHover = "var(--smtc-stroke-ctrl-on-brand-hover, var(--smtc-null-color, transparent))"; + +// @public (undocumented) +export const strokeCtrlOnBrandHoverRaw = "--smtc-stroke-ctrl-on-brand-hover"; + +// @public (undocumented) +export const strokeCtrlOnBrandHoverStop2 = "var(--smtc-stroke-ctrl-on-brand-hover-stop2, var(--smtc-stroke-ctrl-on-brand-hover))"; + +// @public (undocumented) +export const strokeCtrlOnBrandHoverStop2Raw = "--smtc-stroke-ctrl-on-brand-hover-stop2"; + +// @public (undocumented) +export const strokeCtrlOnBrandPressed = "var(--smtc-stroke-ctrl-on-brand-pressed, var(--smtc-null-color, transparent))"; + +// @public (undocumented) +export const strokeCtrlOnBrandPressedRaw = "--smtc-stroke-ctrl-on-brand-pressed"; + +// @public (undocumented) +export const strokeCtrlOnBrandPressedStop2 = "var(--smtc-stroke-ctrl-on-brand-pressed-stop2, var(--smtc-stroke-ctrl-on-brand-pressed))"; + +// @public (undocumented) +export const strokeCtrlOnBrandPressedStop2Raw = "--smtc-stroke-ctrl-on-brand-pressed-stop2"; + +// @public (undocumented) +export const strokeCtrlOnBrandRest = "var(--smtc-stroke-ctrl-on-brand-rest, var(--smtc-null-color, transparent))"; + +// @public (undocumented) +export const strokeCtrlOnBrandRestRaw = "--smtc-stroke-ctrl-on-brand-rest"; + +// @public (undocumented) +export const strokeCtrlOnBrandRestStop2 = "var(--smtc-stroke-ctrl-on-brand-rest-stop2, var(--smtc-stroke-ctrl-on-brand-rest))"; + +// @public (undocumented) +export const strokeCtrlOnBrandRestStop2Raw = "--smtc-stroke-ctrl-on-brand-rest-stop2"; + +// @public (undocumented) +export const strokeCtrlOnNeutralDisabled = "var(--smtc-stroke-ctrl-on-neutral-disabled, var(--smtc-null-color, var(--colorNeutralStrokeDisabled)))"; + +// @public (undocumented) +export const strokeCtrlOnNeutralDisabledRaw = "--smtc-stroke-ctrl-on-neutral-disabled"; + +// @public (undocumented) +export const strokeCtrlOnNeutralDisabledStop2 = "var(--smtc-stroke-ctrl-on-neutral-disabled-stop2, var(--smtc-stroke-ctrl-on-neutral-disabled))"; + +// @public (undocumented) +export const strokeCtrlOnNeutralDisabledStop2Raw = "--smtc-stroke-ctrl-on-neutral-disabled-stop2"; + +// @public (undocumented) +export const strokeCtrlOnNeutralHover = "var(--smtc-stroke-ctrl-on-neutral-hover, var(--smtc-null-color, var(--colorNeutralStroke1Hover)))"; + +// @public (undocumented) +export const strokeCtrlOnNeutralHoverRaw = "--smtc-stroke-ctrl-on-neutral-hover"; + +// @public (undocumented) +export const strokeCtrlOnNeutralHoverStop2 = "var(--smtc-stroke-ctrl-on-neutral-hover-stop2, var(--smtc-stroke-ctrl-on-neutral-pressed))"; + +// @public (undocumented) +export const strokeCtrlOnNeutralHoverStop2Raw = "--smtc-stroke-ctrl-on-neutral-hover-stop2"; + +// @public (undocumented) +export const strokeCtrlOnNeutralPressed = "var(--smtc-stroke-ctrl-on-neutral-pressed, var(--smtc-null-color, var(--colorNeutralStroke1Pressed)))"; + +// @public (undocumented) +export const strokeCtrlOnNeutralPressedRaw = "--smtc-stroke-ctrl-on-neutral-pressed"; + +// @public (undocumented) +export const strokeCtrlOnNeutralPressedStop2 = "var(--smtc-stroke-ctrl-on-neutral-pressed-stop2, var(--smtc-stroke-ctrl-on-neutral-hover))"; + +// @public (undocumented) +export const strokeCtrlOnNeutralPressedStop2Raw = "--smtc-stroke-ctrl-on-neutral-pressed-stop2"; + +// @public (undocumented) +export const strokeCtrlOnNeutralRest = "var(--smtc-stroke-ctrl-on-neutral-rest, var(--smtc-null-color, var(--colorNeutralStroke1)))"; + +// @public (undocumented) +export const strokeCtrlOnNeutralRestRaw = "--smtc-stroke-ctrl-on-neutral-rest"; + +// @public (undocumented) +export const strokeCtrlOnNeutralRestStop2 = "var(--smtc-stroke-ctrl-on-neutral-rest-stop2, var(--smtc-stroke-ctrl-on-neutral-rest))"; + +// @public (undocumented) +export const strokeCtrlOnNeutralRestStop2Raw = "--smtc-stroke-ctrl-on-neutral-rest-stop2"; + +// @public (undocumented) +export const strokeCtrlOnOutlineDisabled = "var(--smtc-stroke-ctrl-on-outline-disabled, var(--colorNeutralStrokeDisabled))"; + +// @public (undocumented) +export const strokeCtrlOnOutlineDisabledRaw = "--smtc-stroke-ctrl-on-outline-disabled"; + +// @public (undocumented) +export const strokeCtrlOnOutlineDisabledStop2 = "var(--smtc-stroke-ctrl-on-outline-disabled-stop2, var(--smtc-stroke-ctrl-on-outline-disabled))"; + +// @public (undocumented) +export const strokeCtrlOnOutlineDisabledStop2Raw = "--smtc-stroke-ctrl-on-outline-disabled-stop2"; + +// @public (undocumented) +export const strokeCtrlOnOutlineHover = "var(--smtc-stroke-ctrl-on-outline-hover, var(--colorNeutralStroke1))"; + +// @public (undocumented) +export const strokeCtrlOnOutlineHoverRaw = "--smtc-stroke-ctrl-on-outline-hover"; + +// @public (undocumented) +export const strokeCtrlOnOutlineHoverStop2 = "var(--smtc-stroke-ctrl-on-outline-hover-stop2, var(--smtc-stroke-ctrl-on-outline-hover))"; + +// @public (undocumented) +export const strokeCtrlOnOutlineHoverStop2Raw = "--smtc-stroke-ctrl-on-outline-hover-stop2"; + +// @public (undocumented) +export const strokeCtrlOnOutlinePressed = "var(--smtc-stroke-ctrl-on-outline-pressed, var(--colorNeutralStroke1))"; + +// @public (undocumented) +export const strokeCtrlOnOutlinePressedRaw = "--smtc-stroke-ctrl-on-outline-pressed"; + +// @public (undocumented) +export const strokeCtrlOnOutlinePressedStop2 = "var(--smtc-stroke-ctrl-on-outline-pressed-stop2, var(--smtc-stroke-ctrl-on-outline-pressed))"; + +// @public (undocumented) +export const strokeCtrlOnOutlinePressedStop2Raw = "--smtc-stroke-ctrl-on-outline-pressed-stop2"; + +// @public (undocumented) +export const strokeCtrlOnOutlineRest = "var(--smtc-stroke-ctrl-on-outline-rest, var(--colorNeutralStroke1))"; + +// @public (undocumented) +export const strokeCtrlOnOutlineRestRaw = "--smtc-stroke-ctrl-on-outline-rest"; + +// @public (undocumented) +export const strokeCtrlOnOutlineRestStop2 = "var(--smtc-stroke-ctrl-on-outline-rest-stop2, var(--smtc-stroke-ctrl-on-outline-rest))"; + +// @public (undocumented) +export const strokeCtrlOnOutlineRestStop2Raw = "--smtc-stroke-ctrl-on-outline-rest-stop2"; + +// @public (undocumented) +export const strokeCtrlOnSubtleDisabled = "var(--smtc-stroke-ctrl-on-subtle-disabled, var(--smtc-null-color, transparent))"; + +// @public (undocumented) +export const strokeCtrlOnSubtleDisabledRaw = "--smtc-stroke-ctrl-on-subtle-disabled"; + +// @public (undocumented) +export const strokeCtrlOnSubtleHover = "var(--smtc-stroke-ctrl-on-subtle-hover, var(--smtc-null-color, transparent))"; + +// @public (undocumented) +export const strokeCtrlOnSubtleHoverRaw = "--smtc-stroke-ctrl-on-subtle-hover"; + +// @public (undocumented) +export const strokeCtrlOnSubtleHoverSplit = "var(--smtc-stroke-ctrl-on-subtle-hover-split, unset)"; + +// @public (undocumented) +export const strokeCtrlOnSubtleHoverSplitRaw = "--smtc-stroke-ctrl-on-subtle-hover-split"; + +// @public (undocumented) +export const strokeCtrlOnSubtlePressed = "var(--smtc-stroke-ctrl-on-subtle-pressed, var(--smtc-null-color, transparent))"; + +// @public (undocumented) +export const strokeCtrlOnSubtlePressedRaw = "--smtc-stroke-ctrl-on-subtle-pressed"; + +// @public (undocumented) +export const strokeCtrlOnSubtleRest = "var(--smtc-stroke-ctrl-on-subtle-rest, var(--smtc-null-color, transparent))"; + +// @public (undocumented) +export const strokeCtrlOnSubtleRestRaw = "--smtc-stroke-ctrl-on-subtle-rest"; + +// @public (undocumented) +export const strokeDividerBrand = "var(--smtc-stroke-divider-brand, var(--smtc-background-ctrl-brand-rest, var(--colorBrandStroke1)))"; + +// @public (undocumented) +export const strokeDividerBrandRaw = "--smtc-stroke-divider-brand"; + +// @public (undocumented) +export const strokeDividerDefault = "var(--smtc-stroke-divider-default, var(--colorNeutralStroke2))"; + +// @public (undocumented) +export const strokeDividerDefaultRaw = "--smtc-stroke-divider-default"; + +// @public (undocumented) +export const strokeDividerStrong = "var(--smtc-stroke-divider-strong, var(--smtc-stroke-divider-default, var(--colorNeutralStroke1)))"; + +// @public (undocumented) +export const strokeDividerStrongRaw = "--smtc-stroke-divider-strong"; + +// @public (undocumented) +export const strokeDividerSubtle = "var(--smtc-stroke-divider-subtle, var(--smtc-stroke-divider-default, var(--colorNeutralStroke3)))"; + +// @public (undocumented) +export const strokeDividerSubtleRaw = "--smtc-stroke-divider-subtle"; + +// @public (undocumented) +export const strokeFlyout = "var(--smtc-stroke-flyout, var(--smtc-null-color, var(--colorNeutralBackground3)))"; + +// @public (undocumented) +export const strokeFlyoutRaw = "--smtc-stroke-flyout"; + +// @public (undocumented) +export const strokeImage = "var(--smtc-stroke-image, unset)"; + +// @public (undocumented) +export const strokeImageRaw = "--smtc-stroke-image"; + +// @public (undocumented) +export const strokeLayer = "var(--smtc-stroke-layer, var(--smtc-null-color, var(--colorTransparentStroke)))"; + +// @public (undocumented) +export const strokeLayerRaw = "--smtc-stroke-layer"; + +// @public (undocumented) +export const strokeToolbar = "var(--smtc-stroke-toolbar, var(--smtc-stroke-card-on-primary-rest))"; + +// @public (undocumented) +export const strokeToolbarRaw = "--smtc-stroke-toolbar"; + +// @public (undocumented) +export const strokeWidthCtrlOutlineHover = "var(--smtc-stroke-width-ctrl-outline-hover, var(--smtc-stroke-width-default, var(--strokeWidthThin)))"; + +// @public (undocumented) +export const strokeWidthCtrlOutlineHoverRaw = "--smtc-stroke-width-ctrl-outline-hover"; + +// @public (undocumented) +export const strokeWidthCtrlOutlinePressed = "var(--smtc-stroke-width-ctrl-outline-pressed, var(--smtc-stroke-width-default, var(--strokeWidthThin)))"; + +// @public (undocumented) +export const strokeWidthCtrlOutlinePressedRaw = "--smtc-stroke-width-ctrl-outline-pressed"; + +// @public (undocumented) +export const strokeWidthCtrlOutlineRest = "var(--smtc-stroke-width-ctrl-outline-rest, var(--smtc-stroke-width-default, var(--strokeWidthThin)))"; + +// @public (undocumented) +export const strokeWidthCtrlOutlineRestRaw = "--smtc-stroke-width-ctrl-outline-rest"; + +// @public (undocumented) +export const strokeWidthCtrlOutlineSelected = "var(--smtc-stroke-width-ctrl-outline-selected, var(--smtc-stroke-width-default, var(--strokeWidthThicker)))"; + +// @public (undocumented) +export const strokeWidthCtrlOutlineSelectedRaw = "--smtc-stroke-width-ctrl-outline-selected"; + +// @public (undocumented) +export const strokeWidthDefault = "var(--smtc-stroke-width-default, var(--strokeWidthThin))"; + +// @public (undocumented) +export const strokeWidthDefaultRaw = "--smtc-stroke-width-default"; + +// @public (undocumented) +export const strokeWidthDividerDefault = "var(--smtc-stroke-width-divider-default, var(--smtc-stroke-width-default, var(--strokeWidthThin)))"; + +// @public (undocumented) +export const strokeWidthDividerDefaultRaw = "--smtc-stroke-width-divider-default"; + +// @public (undocumented) +export const strokeWidthDividerStrong = "var(--smtc-stroke-width-divider-strong, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const strokeWidthDividerStrongRaw = "--smtc-stroke-width-divider-strong"; + +// @public (undocumented) +export const strokeWidthWindowDefault = "var(--smtc-stroke-width-window-default, var(--smtc-stroke-width-default))"; + +// @public (undocumented) +export const strokeWidthWindowDefaultRaw = "--smtc-stroke-width-window-default"; + +// @public (undocumented) +export const strokeWindowActive = "var(--smtc-stroke-window-active)"; + +// @public (undocumented) +export const strokeWindowActiveRaw = "--smtc-stroke-window-active"; + +// @public (undocumented) +export const strokeWindowInactive = "var(--smtc-stroke-window-inactive, var(--smtc-stroke-window-active))"; + +// @public (undocumented) +export const strokeWindowInactiveRaw = "--smtc-stroke-window-inactive"; + +// @public (undocumented) +export const textCtrlButtonWeightDefault = "var(--smtc-text-ctrl-button-weight-default, var(--smtc-text-style-default-regular-weight, var(--fontWeightSemibold)))"; + +// @public (undocumented) +export const textCtrlButtonWeightDefaultRaw = "--smtc-text-ctrl-button-weight-default"; + +// @public (undocumented) +export const textCtrlButtonWeightSelected = "var(--smtc-text-ctrl-button-weight-selected, var(--smtc-text-ctrl-weight-selected))"; + +// @public (undocumented) +export const textCtrlButtonWeightSelectedRaw = "--smtc-text-ctrl-button-weight-selected"; + +// @public (undocumented) +export const textCtrlWeightDefault = "var(--smtc-text-ctrl-weight-default, var(--smtc-text-style-default-regular-weight))"; + +// @public (undocumented) +export const textCtrlWeightDefaultRaw = "--smtc-text-ctrl-weight-default"; + +// @public (undocumented) +export const textCtrlWeightSelected = "var(--smtc-text-ctrl-weight-selected, var(--fontWeightSemibold))"; + +// @public (undocumented) +export const textCtrlWeightSelectedRaw = "--smtc-text-ctrl-weight-selected"; + +// @public (undocumented) +export const textGlobalBody1FontSize = "var(--smtc-text-global-body1-font-size, var(--fontSizeBase500))"; + +// @public (undocumented) +export const textGlobalBody1FontSizeRaw = "--smtc-text-global-body1-font-size"; + +// @public (undocumented) +export const textGlobalBody1LineHeight = "var(--smtc-text-global-body1-line-height, var(--lineHeightBase500))"; + +// @public (undocumented) +export const textGlobalBody1LineHeightRaw = "--smtc-text-global-body1-line-height"; + +// @public (undocumented) +export const textGlobalBody2FontSize = "var(--smtc-text-global-body2-font-size, var(--fontSizeBase400))"; + +// @public (undocumented) +export const textGlobalBody2FontSizeRaw = "--smtc-text-global-body2-font-size"; + +// @public (undocumented) +export const textGlobalBody2LineHeight = "var(--smtc-text-global-body2-line-height, var(--lineHeightBase400))"; + +// @public (undocumented) +export const textGlobalBody2LineHeightRaw = "--smtc-text-global-body2-line-height"; + +// @public (undocumented) +export const textGlobalBody3FontSize = "var(--smtc-text-global-body3-font-size, var(--fontSizeBase300))"; + +// @public (undocumented) +export const textGlobalBody3FontSizeRaw = "--smtc-text-global-body3-font-size"; + +// @public (undocumented) +export const textGlobalBody3LineHeight = "var(--smtc-text-global-body3-line-height, var(--lineHeightBase300))"; + +// @public (undocumented) +export const textGlobalBody3LineHeightRaw = "--smtc-text-global-body3-line-height"; + +// @public (undocumented) +export const textGlobalCaption1FontSize = "var(--smtc-text-global-caption1-font-size, var(--fontSizeBase200))"; + +// @public (undocumented) +export const textGlobalCaption1FontSizeRaw = "--smtc-text-global-caption1-font-size"; + +// @public (undocumented) +export const textGlobalCaption1LineHeight = "var(--smtc-text-global-caption1-line-height, var(--lineHeightBase200))"; + +// @public (undocumented) +export const textGlobalCaption1LineHeightRaw = "--smtc-text-global-caption1-line-height"; + +// @public (undocumented) +export const textGlobalCaption2FontSize = "var(--smtc-text-global-caption2-font-size, var(--fontSizeBase100))"; + +// @public (undocumented) +export const textGlobalCaption2FontSizeRaw = "--smtc-text-global-caption2-font-size"; + +// @public (undocumented) +export const textGlobalCaption2LineHeight = "var(--smtc-text-global-caption2-line-height, var(--lineHeightBase100))"; + +// @public (undocumented) +export const textGlobalCaption2LineHeightRaw = "--smtc-text-global-caption2-line-height"; + +// @public (undocumented) +export const textGlobalDisplay1FontSize = "var(--smtc-text-global-display1-font-size)"; + +// @public (undocumented) +export const textGlobalDisplay1FontSizeRaw = "--smtc-text-global-display1-font-size"; + +// @public (undocumented) +export const textGlobalDisplay1LineHeight = "var(--smtc-text-global-display1-line-height)"; + +// @public (undocumented) +export const textGlobalDisplay1LineHeightRaw = "--smtc-text-global-display1-line-height"; + +// @public (undocumented) +export const textGlobalDisplay2FontSize = "var(--smtc-text-global-display2-font-size, var(--fontSizeHero1000))"; + +// @public (undocumented) +export const textGlobalDisplay2FontSizeRaw = "--smtc-text-global-display2-font-size"; + +// @public (undocumented) +export const textGlobalDisplay2LineHeight = "var(--smtc-text-global-display2-line-height, var(--lineHeightHero1000))"; + +// @public (undocumented) +export const textGlobalDisplay2LineHeightRaw = "--smtc-text-global-display2-line-height"; + +// @public (undocumented) +export const textGlobalSubtitle1FontSize = "var(--smtc-text-global-subtitle1-font-size, var(--fontSizeHero700))"; + +// @public (undocumented) +export const textGlobalSubtitle1FontSizeRaw = "--smtc-text-global-subtitle1-font-size"; + +// @public (undocumented) +export const textGlobalSubtitle1LineHeight = "var(--smtc-text-global-subtitle1-line-height, var(--lineHeightHero700))"; + +// @public (undocumented) +export const textGlobalSubtitle1LineHeightRaw = "--smtc-text-global-subtitle1-line-height"; + +// @public (undocumented) +export const textGlobalSubtitle2FontSize = "var(--smtc-text-global-subtitle2-font-size, var(--fontSizeBase600))"; + +// @public (undocumented) +export const textGlobalSubtitle2FontSizeRaw = "--smtc-text-global-subtitle2-font-size"; + +// @public (undocumented) +export const textGlobalSubtitle2LineHeight = "var(--smtc-text-global-subtitle2-line-height, var(--lineHeightBase600))"; + +// @public (undocumented) +export const textGlobalSubtitle2LineHeightRaw = "--smtc-text-global-subtitle2-line-height"; + +// @public (undocumented) +export const textGlobalTitle1FontSize = "var(--smtc-text-global-title1-font-size, var(--fontSizeHero900))"; + +// @public (undocumented) +export const textGlobalTitle1FontSizeRaw = "--smtc-text-global-title1-font-size"; + +// @public (undocumented) +export const textGlobalTitle1LineHeight = "var(--smtc-text-global-title1-line-height, var(--lineHeightHero900))"; + +// @public (undocumented) +export const textGlobalTitle1LineHeightRaw = "--smtc-text-global-title1-line-height"; + +// @public (undocumented) +export const textGlobalTitle2FontSize = "var(--smtc-text-global-title2-font-size, var(--fontSizeHero800))"; + +// @public (undocumented) +export const textGlobalTitle2FontSizeRaw = "--smtc-text-global-title2-font-size"; + +// @public (undocumented) +export const textGlobalTitle2LineHeight = "var(--smtc-text-global-title2-line-height, var(--lineHeightHero800))"; + +// @public (undocumented) +export const textGlobalTitle2LineHeightRaw = "--smtc-text-global-title2-line-height"; + +// @public (undocumented) +export const textRampItemBodyFontSize = "var(--smtc-text-ramp-item-body-font-size, var(--smtc-text-global-body3-font-size, var(--fontSizeBase300)))"; + +// @public (undocumented) +export const textRampItemBodyFontSizeRaw = "--smtc-text-ramp-item-body-font-size"; + +// @public (undocumented) +export const textRampItemBodyLineHeight = "var(--smtc-text-ramp-item-body-line-height, var(--smtc-text-global-body3-line-height, var(--lineHeightBase300)))"; + +// @public (undocumented) +export const textRampItemBodyLineHeightRaw = "--smtc-text-ramp-item-body-line-height"; + +// @public (undocumented) +export const textRampItemHeaderFontSize = "var(--smtc-text-ramp-item-header-font-size, var(--smtc-text-global-body2-font-size, var(--fontSizeBase300)))"; + +// @public (undocumented) +export const textRampItemHeaderFontSizeRaw = "--smtc-text-ramp-item-header-font-size"; + +// @public (undocumented) +export const textRampItemHeaderLineHeight = "var(--smtc-text-ramp-item-header-line-height, var(--smtc-text-global-body2-line-height, var(--lineHeightBase400)))"; + +// @public (undocumented) +export const textRampItemHeaderLineHeightRaw = "--smtc-text-ramp-item-header-line-height"; + +// @public (undocumented) +export const textRampLegalFontSize = "var(--smtc-text-ramp-legal-font-size, var(--smtc-text-global-caption2-font-size, var(--fontSizeBase200)))"; + +// @public (undocumented) +export const textRampLegalFontSizeRaw = "--smtc-text-ramp-legal-font-size"; + +// @public (undocumented) +export const textRampLegalLineHeight = "var(--smtc-text-ramp-legal-line-height, var(--smtc-text-global-caption2-line-height, var(--lineHeightBase200)))"; + +// @public (undocumented) +export const textRampLegalLineHeightRaw = "--smtc-text-ramp-legal-line-height"; + +// @public (undocumented) +export const textRampLgItemBodyFontSize = "var(--smtc-text-ramp-lg-item-body-font-size, var(--smtc-text-global-body2-font-size, var(--fontSizeBase400)))"; + +// @public (undocumented) +export const textRampLgItemBodyFontSizeRaw = "--smtc-text-ramp-lg-item-body-font-size"; + +// @public (undocumented) +export const textRampLgItemBodyLineHeight = "var(--smtc-text-ramp-lg-item-body-line-height, var(--smtc-text-global-body2-line-height, var(--lineHeightBase400)))"; + +// @public (undocumented) +export const textRampLgItemBodyLineHeightRaw = "--smtc-text-ramp-lg-item-body-line-height"; + +// @public (undocumented) +export const textRampLgItemHeaderFontSize = "var(--smtc-text-ramp-lg-item-header-font-size, var(--smtc-text-global-subtitle2-font-size))"; + +// @public (undocumented) +export const textRampLgItemHeaderFontSizeRaw = "--smtc-text-ramp-lg-item-header-font-size"; + +// @public (undocumented) +export const textRampLgItemHeaderLineHeight = "var(--smtc-text-ramp-lg-item-header-line-height, var(--smtc-text-global-subtitle2-line-height))"; + +// @public (undocumented) +export const textRampLgItemHeaderLineHeightRaw = "--smtc-text-ramp-lg-item-header-line-height"; + +// @public (undocumented) +export const textRampLgLegalFontSize = "var(--smtc-text-ramp-lg-legal-font-size, var(--smtc-text-global-caption1-font-size, var(--fontSizeBase200)))"; + +// @public (undocumented) +export const textRampLgLegalFontSizeRaw = "--smtc-text-ramp-lg-legal-font-size"; + +// @public (undocumented) +export const textRampLgLegalLineHeight = "var(--smtc-text-ramp-lg-legal-line-height, var(--smtc-text-global-caption1-line-height, var(--lineHeightBase200)))"; + +// @public (undocumented) +export const textRampLgLegalLineHeightRaw = "--smtc-text-ramp-lg-legal-line-height"; + +// @public (undocumented) +export const textRampLgMetadataFontSize = "var(--smtc-text-ramp-lg-metadata-font-size, var(--smtc-text-global-body3-font-size))"; + +// @public (undocumented) +export const textRampLgMetadataFontSizeRaw = "--smtc-text-ramp-lg-metadata-font-size"; + +// @public (undocumented) +export const textRampLgMetadataLineHeight = "var(--smtc-text-ramp-lg-metadata-line-height, var(--smtc-text-global-body3-line-height))"; + +// @public (undocumented) +export const textRampLgMetadataLineHeightRaw = "--smtc-text-ramp-lg-metadata-line-height"; + +// @public (undocumented) +export const textRampLgPageHeaderFontSize = "var(--smtc-text-ramp-lg-page-header-font-size, var(--smtc-text-global-title1-font-size))"; + +// @public (undocumented) +export const textRampLgPageHeaderFontSizeRaw = "--smtc-text-ramp-lg-page-header-font-size"; + +// @public (undocumented) +export const textRampLgPageHeaderLineHeight = "var(--smtc-text-ramp-lg-page-header-line-height, var(--smtc-text-global-title1-line-height))"; + +// @public (undocumented) +export const textRampLgPageHeaderLineHeightRaw = "--smtc-text-ramp-lg-page-header-line-height"; + +// @public (undocumented) +export const textRampLgReadingBodyFontSize = "var(--smtc-text-ramp-lg-reading-body-font-size, var(--smtc-text-global-body1-font-size))"; + +// @public (undocumented) +export const textRampLgReadingBodyFontSizeRaw = "--smtc-text-ramp-lg-reading-body-font-size"; + +// @public (undocumented) +export const textRampLgReadingBodyLineHeight = "var(--smtc-text-ramp-lg-reading-body-line-height, var(--smtc-text-global-body1-line-height))"; + +// @public (undocumented) +export const textRampLgReadingBodyLineHeightRaw = "--smtc-text-ramp-lg-reading-body-line-height"; + +// @public (undocumented) +export const textRampLgSectionHeaderFontSize = "var(--smtc-text-ramp-lg-section-header-font-size, var(--smtc-text-global-title2-font-size))"; + +// @public (undocumented) +export const textRampLgSectionHeaderFontSizeRaw = "--smtc-text-ramp-lg-section-header-font-size"; + +// @public (undocumented) +export const textRampLgSectionHeaderLineHeight = "var(--smtc-text-ramp-lg-section-header-line-height, var(--smtc-text-global-title2-line-height))"; + +// @public (undocumented) +export const textRampLgSectionHeaderLineHeightRaw = "--smtc-text-ramp-lg-section-header-line-height"; + +// @public (undocumented) +export const textRampLgSubsectionHeaderFontSize = "var(--smtc-text-ramp-lg-subsection-header-font-size, var(--smtc-text-global-subtitle1-font-size))"; + +// @public (undocumented) +export const textRampLgSubsectionHeaderFontSizeRaw = "--smtc-text-ramp-lg-subsection-header-font-size"; + +// @public (undocumented) +export const textRampLgSubsectionHeaderLineHeight = "var(--smtc-text-ramp-lg-subsection-header-line-height, var(--smtc-text-global-subtitle1-line-height))"; + +// @public (undocumented) +export const textRampLgSubsectionHeaderLineHeightRaw = "--smtc-text-ramp-lg-subsection-header-line-height"; + +// @public (undocumented) +export const textRampMetadataFontSize = "var(--smtc-text-ramp-metadata-font-size, var(--smtc-text-global-caption1-font-size, var(--fontSizeBase200)))"; + +// @public (undocumented) +export const textRampMetadataFontSizeRaw = "--smtc-text-ramp-metadata-font-size"; + +// @public (undocumented) +export const textRampMetadataLineHeight = "var(--smtc-text-ramp-metadata-line-height, var(--smtc-text-global-caption1-line-height, var(--lineHeightBase200)))"; + +// @public (undocumented) +export const textRampMetadataLineHeightRaw = "--smtc-text-ramp-metadata-line-height"; + +// @public (undocumented) +export const textRampPageHeaderFontSize = "var(--smtc-text-ramp-page-header-font-size, var(--smtc-text-global-title2-font-size))"; + +// @public (undocumented) +export const textRampPageHeaderFontSizeRaw = "--smtc-text-ramp-page-header-font-size"; + +// @public (undocumented) +export const textRampPageHeaderLineHeight = "var(--smtc-text-ramp-page-header-line-height, var(--smtc-text-global-title2-line-height))"; + +// @public (undocumented) +export const textRampPageHeaderLineHeightRaw = "--smtc-text-ramp-page-header-line-height"; + +// @public (undocumented) +export const textRampReadingBodyFontSize = "var(--smtc-text-ramp-reading-body-font-size, var(--smtc-text-global-body2-font-size, var(--fontSizeBase300)))"; + +// @public (undocumented) +export const textRampReadingBodyFontSizeRaw = "--smtc-text-ramp-reading-body-font-size"; + +// @public (undocumented) +export const textRampReadingBodyLineHeight = "var(--smtc-text-ramp-reading-body-line-height, var(--smtc-text-global-body2-line-height, var(--lineHeightBase300)))"; + +// @public (undocumented) +export const textRampReadingBodyLineHeightRaw = "--smtc-text-ramp-reading-body-line-height"; + +// @public (undocumented) +export const textRampSectionHeaderFontSize = "var(--smtc-text-ramp-section-header-font-size, var(--smtc-text-global-subtitle1-font-size, var(--fontSizeBase500)))"; + +// @public (undocumented) +export const textRampSectionHeaderFontSizeRaw = "--smtc-text-ramp-section-header-font-size"; + +// @public (undocumented) +export const textRampSectionHeaderLineHeight = "var(--smtc-text-ramp-section-header-line-height, var(--smtc-text-global-subtitle1-line-height, var(--lineHeightBase500)))"; + +// @public (undocumented) +export const textRampSectionHeaderLineHeightRaw = "--smtc-text-ramp-section-header-line-height"; + +// @public (undocumented) +export const textRampSmItemBodyFontSize = "var(--smtc-text-ramp-sm-item-body-font-size, var(--smtc-text-global-caption1-font-size, var(--fontSizeBase200)))"; + +// @public (undocumented) +export const textRampSmItemBodyFontSizeRaw = "--smtc-text-ramp-sm-item-body-font-size"; + +// @public (undocumented) +export const textRampSmItemBodyLineHeight = "var(--smtc-text-ramp-sm-item-body-line-height, var(--smtc-text-global-caption1-line-height, var(--lineHeightBase200)))"; + +// @public (undocumented) +export const textRampSmItemBodyLineHeightRaw = "--smtc-text-ramp-sm-item-body-line-height"; + +// @public (undocumented) +export const textRampSmItemHeaderFontSize = "var(--smtc-text-ramp-sm-item-header-font-size, var(--smtc-text-global-body3-font-size))"; + +// @public (undocumented) +export const textRampSmItemHeaderFontSizeRaw = "--smtc-text-ramp-sm-item-header-font-size"; + +// @public (undocumented) +export const textRampSmItemHeaderLineHeight = "var(--smtc-text-ramp-sm-item-header-line-height, var(--smtc-text-global-body3-line-height))"; + +// @public (undocumented) +export const textRampSmItemHeaderLineHeightRaw = "--smtc-text-ramp-sm-item-header-line-height"; + +// @public (undocumented) +export const textRampSmLegalFontSize = "var(--smtc-text-ramp-sm-legal-font-size, var(--smtc-text-global-caption2-font-size, var(--fontSizeBase100)))"; + +// @public (undocumented) +export const textRampSmLegalFontSizeRaw = "--smtc-text-ramp-sm-legal-font-size"; + +// @public (undocumented) +export const textRampSmLegalLineHeight = "var(--smtc-text-ramp-sm-legal-line-height, var(--smtc-text-global-caption2-line-height, var(--lineHeightBase100)))"; + +// @public (undocumented) +export const textRampSmLegalLineHeightRaw = "--smtc-text-ramp-sm-legal-line-height"; + +// @public (undocumented) +export const textRampSmMetadataFontSize = "var(--smtc-text-ramp-sm-metadata-font-size, var(--smtc-text-global-caption1-font-size))"; + +// @public (undocumented) +export const textRampSmMetadataFontSizeRaw = "--smtc-text-ramp-sm-metadata-font-size"; + +// @public (undocumented) +export const textRampSmMetadataLineHeight = "var(--smtc-text-ramp-sm-metadata-line-height, var(--smtc-text-global-caption1-line-height))"; + +// @public (undocumented) +export const textRampSmMetadataLineHeightRaw = "--smtc-text-ramp-sm-metadata-line-height"; + +// @public (undocumented) +export const textRampSmPageHeaderFontSize = "var(--smtc-text-ramp-sm-page-header-font-size, var(--smtc-text-global-subtitle1-font-size))"; + +// @public (undocumented) +export const textRampSmPageHeaderFontSizeRaw = "--smtc-text-ramp-sm-page-header-font-size"; + +// @public (undocumented) +export const textRampSmPageHeaderLineHeight = "var(--smtc-text-ramp-sm-page-header-line-height, var(--smtc-text-global-subtitle1-line-height))"; + +// @public (undocumented) +export const textRampSmPageHeaderLineHeightRaw = "--smtc-text-ramp-sm-page-header-line-height"; + +// @public (undocumented) +export const textRampSmReadingBodyFontSize = "var(--smtc-text-ramp-sm-reading-body-font-size, var(--smtc-text-global-body3-font-size))"; + +// @public (undocumented) +export const textRampSmReadingBodyFontSizeRaw = "--smtc-text-ramp-sm-reading-body-font-size"; + +// @public (undocumented) +export const textRampSmReadingBodyLineHeight = "var(--smtc-text-ramp-sm-reading-body-line-height, var(--smtc-text-global-body3-line-height))"; + +// @public (undocumented) +export const textRampSmReadingBodyLineHeightRaw = "--smtc-text-ramp-sm-reading-body-line-height"; + +// @public (undocumented) +export const textRampSmSectionHeaderFontSize = "var(--smtc-text-ramp-sm-section-header-font-size, var(--smtc-text-global-subtitle2-font-size))"; + +// @public (undocumented) +export const textRampSmSectionHeaderFontSizeRaw = "--smtc-text-ramp-sm-section-header-font-size"; + +// @public (undocumented) +export const textRampSmSectionHeaderLineHeight = "var(--smtc-text-ramp-sm-section-header-line-height, var(--smtc-text-global-subtitle2-line-height))"; + +// @public (undocumented) +export const textRampSmSectionHeaderLineHeightRaw = "--smtc-text-ramp-sm-section-header-line-height"; + +// @public (undocumented) +export const textRampSmSubsectionHeaderFontSize = "var(--smtc-text-ramp-sm-subsection-header-font-size, var(--smtc-text-global-body1-font-size))"; + +// @public (undocumented) +export const textRampSmSubsectionHeaderFontSizeRaw = "--smtc-text-ramp-sm-subsection-header-font-size"; + +// @public (undocumented) +export const textRampSmSubsectionHeaderLineHeight = "var(--smtc-text-ramp-sm-subsection-header-line-height, var(--smtc-text-global-body1-line-height))"; + +// @public (undocumented) +export const textRampSmSubsectionHeaderLineHeightRaw = "--smtc-text-ramp-sm-subsection-header-line-height"; + +// @public (undocumented) +export const textRampSubsectionHeaderFontSize = "var(--smtc-text-ramp-subsection-header-font-size, var(--smtc-text-global-subtitle2-font-size))"; + +// @public (undocumented) +export const textRampSubsectionHeaderFontSizeRaw = "--smtc-text-ramp-subsection-header-font-size"; + +// @public (undocumented) +export const textRampSubsectionHeaderLineHeight = "var(--smtc-text-ramp-subsection-header-line-height, var(--smtc-text-global-subtitle2-line-height))"; + +// @public (undocumented) +export const textRampSubsectionHeaderLineHeightRaw = "--smtc-text-ramp-subsection-header-line-height"; + +// @public (undocumented) +export const textStyleAiHeaderCase = "var(--smtc-text-style-ai-header-case, unset)"; + +// @public (undocumented) +export const textStyleAiHeaderCaseRaw = "--smtc-text-style-ai-header-case"; + +// @public (undocumented) +export const textStyleAiHeaderFontFamily = "var(--smtc-text-style-ai-header-font-family, var(--smtc-text-style-default-regular-font-family))"; + +// @public (undocumented) +export const textStyleAiHeaderFontFamilyRaw = "--smtc-text-style-ai-header-font-family"; + +// @public (undocumented) +export const textStyleAiHeaderLetterSpacing = "var(--smtc-text-style-ai-header-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; + +// @public (undocumented) +export const textStyleAiHeaderLetterSpacingRaw = "--smtc-text-style-ai-header-letter-spacing"; + +// @public (undocumented) +export const textStyleAiHeaderWeight = "var(--smtc-text-style-ai-header-weight, var(--smtc-text-style-default-header-weight))"; + +// @public (undocumented) +export const textStyleAiHeaderWeightRaw = "--smtc-text-style-ai-header-weight"; + +// @public (undocumented) +export const textStyleAiRegularFontFamily = "var(--smtc-text-style-ai-regular-font-family, var(--smtc-text-style-default-regular-font-family))"; + +// @public (undocumented) +export const textStyleAiRegularFontFamilyRaw = "--smtc-text-style-ai-regular-font-family"; + +// @public (undocumented) +export const textStyleAiRegularLetterSpacing = "var(--smtc-text-style-ai-regular-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; + +// @public (undocumented) +export const textStyleAiRegularLetterSpacingRaw = "--smtc-text-style-ai-regular-letter-spacing"; + +// @public (undocumented) +export const textStyleAiRegularWeight = "var(--smtc-text-style-ai-regular-weight, var(--smtc-text-style-default-regular-weight))"; + +// @public (undocumented) +export const textStyleAiRegularWeightRaw = "--smtc-text-style-ai-regular-weight"; + +// @public (undocumented) +export const textStyleArticleHeaderCase = "var(--smtc-text-style-article-header-case, unset)"; + +// @public (undocumented) +export const textStyleArticleHeaderCaseRaw = "--smtc-text-style-article-header-case"; + +// @public (undocumented) +export const textStyleArticleHeaderFontFamily = "var(--smtc-text-style-article-header-font-family, var(--smtc-text-style-default-regular-font-family))"; + +// @public (undocumented) +export const textStyleArticleHeaderFontFamilyRaw = "--smtc-text-style-article-header-font-family"; + +// @public (undocumented) +export const textStyleArticleHeaderLetterSpacing = "var(--smtc-text-style-article-header-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; + +// @public (undocumented) +export const textStyleArticleHeaderLetterSpacingRaw = "--smtc-text-style-article-header-letter-spacing"; + +// @public (undocumented) +export const textStyleArticleHeaderWeight = "var(--smtc-text-style-article-header-weight, var(--smtc-text-style-default-header-weight))"; + +// @public (undocumented) +export const textStyleArticleHeaderWeightRaw = "--smtc-text-style-article-header-weight"; + +// @public (undocumented) +export const textStyleArticleRegularFontFamily = "var(--smtc-text-style-article-regular-font-family, var(--smtc-text-style-default-regular-font-family))"; + +// @public (undocumented) +export const textStyleArticleRegularFontFamilyRaw = "--smtc-text-style-article-regular-font-family"; + +// @public (undocumented) +export const textStyleArticleRegularLetterSpacing = "var(--smtc-text-style-article-regular-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; + +// @public (undocumented) +export const textStyleArticleRegularLetterSpacingRaw = "--smtc-text-style-article-regular-letter-spacing"; + +// @public (undocumented) +export const textStyleArticleRegularWeight = "var(--smtc-text-style-article-regular-weight, var(--smtc-text-style-default-regular-weight))"; + +// @public (undocumented) +export const textStyleArticleRegularWeightRaw = "--smtc-text-style-article-regular-weight"; + +// @public (undocumented) +export const textStyleCodeHeaderCase = "var(--smtc-text-style-code-header-case, unset)"; + +// @public (undocumented) +export const textStyleCodeHeaderCaseRaw = "--smtc-text-style-code-header-case"; + +// @public (undocumented) +export const textStyleCodeHeaderFontFamily = "var(--smtc-text-style-code-header-font-family, var(--smtc-text-style-default-regular-font-family))"; + +// @public (undocumented) +export const textStyleCodeHeaderFontFamilyRaw = "--smtc-text-style-code-header-font-family"; + +// @public (undocumented) +export const textStyleCodeHeaderLetterSpacing = "var(--smtc-text-style-code-header-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; + +// @public (undocumented) +export const textStyleCodeHeaderLetterSpacingRaw = "--smtc-text-style-code-header-letter-spacing"; + +// @public (undocumented) +export const textStyleCodeHeaderWeight = "var(--smtc-text-style-code-header-weight, var(--smtc-text-style-default-header-weight))"; + +// @public (undocumented) +export const textStyleCodeHeaderWeightRaw = "--smtc-text-style-code-header-weight"; + +// @public (undocumented) +export const textStyleCodeRegularFontFamily = "var(--smtc-text-style-code-regular-font-family, var(--smtc-text-style-default-regular-font-family))"; + +// @public (undocumented) +export const textStyleCodeRegularFontFamilyRaw = "--smtc-text-style-code-regular-font-family"; + +// @public (undocumented) +export const textStyleCodeRegularLetterSpacing = "var(--smtc-text-style-code-regular-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; + +// @public (undocumented) +export const textStyleCodeRegularLetterSpacingRaw = "--smtc-text-style-code-regular-letter-spacing"; + +// @public (undocumented) +export const textStyleCodeRegularWeight = "var(--smtc-text-style-code-regular-weight, var(--smtc-text-style-default-regular-weight))"; + +// @public (undocumented) +export const textStyleCodeRegularWeightRaw = "--smtc-text-style-code-regular-weight"; + +// @public (undocumented) +export const textStyleDataVizHeaderCase = "var(--smtc-text-style-data-viz-header-case, unset)"; + +// @public (undocumented) +export const textStyleDataVizHeaderCaseRaw = "--smtc-text-style-data-viz-header-case"; + +// @public (undocumented) +export const textStyleDataVizHeaderFontFamily = "var(--smtc-text-style-data-viz-header-font-family, var(--smtc-text-style-default-regular-font-family))"; + +// @public (undocumented) +export const textStyleDataVizHeaderFontFamilyRaw = "--smtc-text-style-data-viz-header-font-family"; + +// @public (undocumented) +export const textStyleDataVizHeaderLetterSpacing = "var(--smtc-text-style-data-viz-header-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; + +// @public (undocumented) +export const textStyleDataVizHeaderLetterSpacingRaw = "--smtc-text-style-data-viz-header-letter-spacing"; + +// @public (undocumented) +export const textStyleDataVizHeaderWeight = "var(--smtc-text-style-data-viz-header-weight, var(--smtc-text-style-default-header-weight))"; + +// @public (undocumented) +export const textStyleDataVizHeaderWeightRaw = "--smtc-text-style-data-viz-header-weight"; + +// @public (undocumented) +export const textStyleDataVizRegularFontFamily = "var(--smtc-text-style-data-viz-regular-font-family, var(--smtc-text-style-default-regular-font-family))"; + +// @public (undocumented) +export const textStyleDataVizRegularFontFamilyRaw = "--smtc-text-style-data-viz-regular-font-family"; + +// @public (undocumented) +export const textStyleDataVizRegularLetterSpacing = "var(--smtc-text-style-data-viz-regular-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; + +// @public (undocumented) +export const textStyleDataVizRegularLetterSpacingRaw = "--smtc-text-style-data-viz-regular-letter-spacing"; + +// @public (undocumented) +export const textStyleDataVizRegularWeight = "var(--smtc-text-style-data-viz-regular-weight, var(--smtc-text-style-default-regular-weight))"; + +// @public (undocumented) +export const textStyleDataVizRegularWeightRaw = "--smtc-text-style-data-viz-regular-weight"; + +// @public (undocumented) +export const textStyleDefaultDisplayFontFamily = "var(--smtc-text-style-default-display-font-family, var(--smtc-text-style-default-regular-font-family))"; + +// @public (undocumented) +export const textStyleDefaultDisplayFontFamilyRaw = "--smtc-text-style-default-display-font-family"; + +// @public (undocumented) +export const textStyleDefaultDisplayLetterSpacing = "var(--smtc-text-style-default-display-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; + +// @public (undocumented) +export const textStyleDefaultDisplayLetterSpacingRaw = "--smtc-text-style-default-display-letter-spacing"; + +// @public (undocumented) +export const textStyleDefaultDisplayWeight = "var(--smtc-text-style-default-display-weight)"; + +// @public (undocumented) +export const textStyleDefaultDisplayWeightRaw = "--smtc-text-style-default-display-weight"; + +// @public (undocumented) +export const textStyleDefaultHeaderCase = "var(--smtc-text-style-default-header-case, unset)"; + +// @public (undocumented) +export const textStyleDefaultHeaderCaseRaw = "--smtc-text-style-default-header-case"; + +// @public (undocumented) +export const textStyleDefaultHeaderFontFamily = "var(--smtc-text-style-default-header-font-family, var(--smtc-text-style-default-regular-font-family, var(--fontFamilyBase)))"; + +// @public (undocumented) +export const textStyleDefaultHeaderFontFamilyRaw = "--smtc-text-style-default-header-font-family"; + +// @public (undocumented) +export const textStyleDefaultHeaderLetterSpacing = "var(--smtc-text-style-default-header-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; + +// @public (undocumented) +export const textStyleDefaultHeaderLetterSpacingRaw = "--smtc-text-style-default-header-letter-spacing"; + +// @public (undocumented) +export const textStyleDefaultHeaderWeight = "var(--smtc-text-style-default-header-weight, var(--fontWeightSemibold))"; + +// @public (undocumented) +export const textStyleDefaultHeaderWeightRaw = "--smtc-text-style-default-header-weight"; + +// @public (undocumented) +export const textStyleDefaultRegularFontFamily = "var(--smtc-text-style-default-regular-font-family, var(--fontFamilyBase))"; + +// @public (undocumented) +export const textStyleDefaultRegularFontFamilyRaw = "--smtc-text-style-default-regular-font-family"; + +// @public (undocumented) +export const textStyleDefaultRegularLetterSpacing = "var(--smtc-text-style-default-regular-letter-spacing, 0)"; + +// @public (undocumented) +export const textStyleDefaultRegularLetterSpacingRaw = "--smtc-text-style-default-regular-letter-spacing"; + +// @public (undocumented) +export const textStyleDefaultRegularWeight = "var(--smtc-text-style-default-regular-weight, var(--fontWeightRegular))"; + +// @public (undocumented) +export const textStyleDefaultRegularWeightRaw = "--smtc-text-style-default-regular-weight"; + +// @public (undocumented) +export const textStyleQuoteHeaderCase = "var(--smtc-text-style-quote-header-case, unset)"; + +// @public (undocumented) +export const textStyleQuoteHeaderCaseRaw = "--smtc-text-style-quote-header-case"; + +// @public (undocumented) +export const textStyleQuoteHeaderFontFamily = "var(--smtc-text-style-quote-header-font-family, var(--smtc-text-style-default-regular-font-family))"; + +// @public (undocumented) +export const textStyleQuoteHeaderFontFamilyRaw = "--smtc-text-style-quote-header-font-family"; + +// @public (undocumented) +export const textStyleQuoteHeaderLetterSpacing = "var(--smtc-text-style-quote-header-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; + +// @public (undocumented) +export const textStyleQuoteHeaderLetterSpacingRaw = "--smtc-text-style-quote-header-letter-spacing"; + +// @public (undocumented) +export const textStyleQuoteHeaderWeight = "var(--smtc-text-style-quote-header-weight, var(--smtc-text-style-default-header-weight))"; + +// @public (undocumented) +export const textStyleQuoteHeaderWeightRaw = "--smtc-text-style-quote-header-weight"; + +// @public (undocumented) +export const textStyleQuoteRegularFontFamily = "var(--smtc-text-style-quote-regular-font-family, var(--smtc-text-style-default-regular-font-family))"; + +// @public (undocumented) +export const textStyleQuoteRegularFontFamilyRaw = "--smtc-text-style-quote-regular-font-family"; + +// @public (undocumented) +export const textStyleQuoteRegularLetterSpacing = "var(--smtc-text-style-quote-regular-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; + +// @public (undocumented) +export const textStyleQuoteRegularLetterSpacingRaw = "--smtc-text-style-quote-regular-letter-spacing"; + +// @public (undocumented) +export const textStyleQuoteRegularWeight = "var(--smtc-text-style-quote-regular-weight, var(--smtc-text-style-default-regular-weight))"; + +// @public (undocumented) +export const textStyleQuoteRegularWeightRaw = "--smtc-text-style-quote-regular-weight"; + +// (No @packageDocumentation comment for this package) + +``` diff --git a/packages/semantic-tokens/jest.config.js b/packages/semantic-tokens/jest.config.js new file mode 100644 index 00000000000000..8360c356c1c5a6 --- /dev/null +++ b/packages/semantic-tokens/jest.config.js @@ -0,0 +1,33 @@ +// @ts-check +/* eslint-disable */ + +const { readFileSync } = require('node:fs'); +const { join } = require('node:path'); + +// Reading the SWC compilation config and remove the "exclude" +// for the test files to be compiled by SWC +const { exclude: _, ...swcJestConfig } = JSON.parse(readFileSync(join(__dirname, '.swcrc'), 'utf-8')); + +// disable .swcrc look-up by SWC core because we're passing in swcJestConfig ourselves. +// If we do not disable this, SWC Core will read .swcrc and won't transform our test files due to "exclude" +if (swcJestConfig.swcrc === undefined) { + swcJestConfig.swcrc = false; +} + +// Uncomment if using global setup/teardown files being transformed via swc +// https://nx.dev/packages/jest/documents/overview#global-setup/teardown-with-nx-libraries +// jest needs EsModule Interop to find the default exported setup/teardown functions +// swcJestConfig.module.noInterop = false; + +/** + * @type {import('@jest/types').Config.InitialOptions} + */ +module.exports = { + displayName: 'semantic-tokens', + preset: '../../jest.preset.js', + transform: { + '^.+\\.tsx?$': ['@swc/jest', swcJestConfig], + }, + coverageDirectory: './coverage', + setupFilesAfterEnv: ['./config/tests.js'], +}; diff --git a/packages/semantic-tokens/package.json b/packages/semantic-tokens/package.json new file mode 100644 index 00000000000000..8db37a09e0163d --- /dev/null +++ b/packages/semantic-tokens/package.json @@ -0,0 +1,48 @@ +{ + "name": "@fluentui/semantic-tokens", + "version": "0.0.1", + "description": "Fluent UI Theme semantic-tokens", + "main": "lib-commonjs/index.js", + "module": "lib/index.js", + "typings": "./dist/index.d.ts", + "sideEffects": false, + "repository": { + "type": "git", + "url": "https://github.com/microsoft/fluentui" + }, + "license": "MIT", + "devDependencies": { + "@fluentui/eslint-plugin": "*", + "@fluentui/scripts-api-extractor": "*", + "@fluentui/tokens": ">=1.0.0-alpha" + }, + "dependencies": { + "@swc/helpers": "^0.5.1" + }, + "beachball": { + "disallowedChangeTypes": [ + "major", + "minor", + "patch" + ] + }, + "exports": { + ".": { + "types": "./dist/index.d.ts", + "node": "./lib-commonjs/index.js", + "import": "./lib/index.js", + "require": "./lib-commonjs/index.js" + }, + "./package.json": "./package.json" + }, + "files": [ + "*.md", + "dist/*.d.ts", + "lib", + "lib-commonjs" + ], + "scripts": { + "generate-tokens": "yarn generate-legacy-tokens && ts-node scripts/tokenGen.ts", + "generate-legacy-tokens": "ts-node scripts/legacyTokens.ts" + } +} diff --git a/packages/semantic-tokens/playwright.config.ts b/packages/semantic-tokens/playwright.config.ts new file mode 100644 index 00000000000000..83dee12790dc5a --- /dev/null +++ b/packages/semantic-tokens/playwright.config.ts @@ -0,0 +1,41 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import type { PlaywrightTestConfig } from '@playwright/test'; +import { devices } from '@playwright/test'; + +const config: PlaywrightTestConfig = { + reporter: 'list', + retries: 3, + fullyParallel: process.env.CI ? false : true, + timeout: process.env.CI ? 10000 : 30000, + use: { + baseURL: 'http://localhost:6006', + viewport: { + height: 720, + width: 1280, + }, + }, + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + testMatch: /.*\.spec-e2e\.ts$/, + }, + // { + // name: 'firefox', + // use: { ...devices['Desktop Firefox'] }, + // testMatch: [/set-theme\.spec\.ts$/], + // }, + // { + // name: 'webkit', + // use: { ...devices['Desktop Safari'] }, + // testMatch: [/set-theme\.spec\.ts$/], + // }, + ], + webServer: { + command: `node scripts/server.js --port 6006`, + port: 6006, + reuseExistingServer: process.env.CI ? false : true, + }, +}; + +export default config; diff --git a/packages/semantic-tokens/project.json b/packages/semantic-tokens/project.json new file mode 100644 index 00000000000000..28d906bd209bec --- /dev/null +++ b/packages/semantic-tokens/project.json @@ -0,0 +1,19 @@ +{ + "name": "semantic-tokens", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "implicitDependencies": [], + "sourceRoot": "packages/semantic-tokens/src", + "tags": ["vNext", "platform:web"], + "targets": { + "e2e": { + "dependsOn": ["build"] + }, + "token-pipeline": { + "command": "node -r ../../scripts/ts-node/src/register ../../scripts/generators/src/token-pipeline.ts", + "options": { + "cwd": "{projectRoot}" + } + } + } +} diff --git a/packages/semantic-tokens/scripts/legacyTokens.ts b/packages/semantic-tokens/scripts/legacyTokens.ts new file mode 100644 index 00000000000000..20fc9ae2204655 --- /dev/null +++ b/packages/semantic-tokens/scripts/legacyTokens.ts @@ -0,0 +1,84 @@ +import fs from 'node:fs'; +import path from 'node:path'; + +// eslint-disable-next-line no-restricted-imports +import * as tokensPackage from '@fluentui/tokens'; +import { fluentOverrides } from '../src/fluentOverrides'; +import { legacyFluentVariantsValues } from '../src/fluentLegacyVariants'; +import { format } from 'prettier'; + +const formatLegacyTokens = (legacyToken: string) => { + if (!Object.keys(tokensPackage.tokens).includes(legacyToken)) { + // Token does not exist in F2 tokens + // This should never occur, but let's flag if a mistake was made in fallback token names + throw new Error(`Fluent token ${legacyToken} not found in fluent tokens`); + } + const tokenValue = tokensPackage.tokens[legacyToken as keyof typeof tokensPackage.tokens]; + const token = `/** + * CSS custom property value for the {@link @fluentui/tokens#${legacyToken} | \`${legacyToken}\`} design token. + * @public + */ + export const ${legacyToken} = '${tokenValue}';\n`; + + return token; +}; + +const generateLegacyTokens = () => { + console.log('Importing required fluent legacy tokens as flat export'); + + const semanticTokenFallbacks = Object.keys(fluentOverrides); + const exportedTokens: string[] = []; + const comment = '// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE\n'; + + const generatedTokens = semanticTokenFallbacks.reduce((acc, t) => { + const tokenOverride = fluentOverrides[t]; + const fluent2Fallback = tokenOverride?.f2Token; + if (!tokenOverride || !fluent2Fallback || exportedTokens.includes(fluent2Fallback)) { + return acc; + } + // Add it to our list of exported tokens + exportedTokens.push(fluent2Fallback); + + // Format exported token + const token = formatLegacyTokens(fluent2Fallback); + + return acc + token; + }, ''); + + const legacyVariantTokens = Object.keys(legacyFluentVariantsValues).reduce((acc, t) => { + const tokenVariant = legacyFluentVariantsValues[t]; + const fluent2Fallback = tokenVariant?.f2Token; + if (!tokenVariant || !fluent2Fallback || exportedTokens.includes(fluent2Fallback)) { + return acc; + } + // Add it to our list of exported tokens + exportedTokens.push(fluent2Fallback); + + // Format exported token + const token = formatLegacyTokens(fluent2Fallback); + + return acc + token; + }, ''); + + const dir = path.join(__dirname, '../src/legacy'); + + if (!fs.existsSync(dir)) { + fs.mkdirSync(dir, { recursive: true }); + } + + // Run prettier to format the generated tokens + const formattedText = format(comment + generatedTokens + legacyVariantTokens, { + parser: 'typescript', + singleQuote: true, + printWidth: 120, + }); + + fs.writeFile(path.join(dir, 'tokens.ts'), formattedText, err => { + if (err) { + throw err; + } + console.log('Legacy tokens reference created'); + }); +}; + +generateLegacyTokens(); diff --git a/packages/semantic-tokens/scripts/server.js b/packages/semantic-tokens/scripts/server.js new file mode 100644 index 00000000000000..02faf5439eb8d4 --- /dev/null +++ b/packages/semantic-tokens/scripts/server.js @@ -0,0 +1,34 @@ +// @ts-check + +const { parseArgs } = require('node:util'); +const path = require('node:path'); +const express = require('express'); + +main(); + +function main() { + const argv = processArgs(); + + const app = express(); + const port = argv.port; + + app.use(express.static(path.join(__dirname))); + app.use('/lib', express.static(path.join(__dirname, '../lib'))); + + app.listen(port, () => { + console.log(`Example app listening on port ${port}`); + }); +} + +function processArgs() { + const options = /** @type {const} */ ({ + port: { + type: 'string', + default: '6006', + }, + }); + + const { values } = parseArgs({ options, allowPositionals: false }); + + return values; +} diff --git a/packages/semantic-tokens/scripts/test-esm.html b/packages/semantic-tokens/scripts/test-esm.html new file mode 100644 index 00000000000000..4bb12e0d739e53 --- /dev/null +++ b/packages/semantic-tokens/scripts/test-esm.html @@ -0,0 +1,71 @@ + + + + + + native ESM for @fluentui/tokens + + + + + +

Native ESM / @fluentui/tokens

+
+ + diff --git a/packages/semantic-tokens/scripts/token.types.ts b/packages/semantic-tokens/scripts/token.types.ts new file mode 100644 index 00000000000000..0c17e6a9082c94 --- /dev/null +++ b/packages/semantic-tokens/scripts/token.types.ts @@ -0,0 +1,16 @@ +export interface Token { + no: number; + name: string; + // eslint-disable-next-line @typescript-eslint/naming-convention + fst_reference: string; + optional: boolean; + nullable: boolean; + description: string; + components: string[]; + contrast: string; + fallback: string; + exceptions: string[]; + cssName: string; +} + +export type ComponentTokenMap = Record; diff --git a/packages/semantic-tokens/scripts/tokenGen.ts b/packages/semantic-tokens/scripts/tokenGen.ts new file mode 100644 index 00000000000000..c40ee6f13685d9 --- /dev/null +++ b/packages/semantic-tokens/scripts/tokenGen.ts @@ -0,0 +1,328 @@ +/* + * Token generation script + * Takes in a Figma token export file and generates token raw strings and CSS Var files + */ +import tokensJSONRaw from './tokens.json'; +import { fluentOverrides as fluentFallbacksRaw } from '../src/fluentOverrides'; +import type { FluentOverrideValue, FluentOverrides } from '../src/fluentOverrides'; +import { legacyFluentVariantsValues, LegacyFluentVariantValue } from '../src/fluentLegacyVariants'; +import fs from 'node:fs'; +import { Project } from 'ts-morph'; +import { format } from 'prettier'; +import type { ComponentTokenMap, Token } from './token.types'; +import path from 'node:path'; +import { removeLastDelimiter, escapeInlineToken, toCamelCase, dedupeShadowTokens, cleanFstTokenName } from '../utils'; + +const project = new Project({ + tsConfigFilePath: path.resolve(__dirname, '../tsconfig.json'), +}); + +const tokensJSON = dedupeShadowTokens(tokensJSONRaw); +const fluentFallbacks: FluentOverrides = fluentFallbacksRaw; +// Store exports so we can add them to index.ts at the end +const exportList: Record = {}; +// Add an automated header warning to each file to prevent direct modifications +const headerWarning = '// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE\n'; + +const generateTokens = () => { + console.log('Generating tokens...'); + // Simple for now, just generate the raw strings and variables + generateTokenRawStrings(); + generateTokenVariables(); +}; + +const escapeMixedInlineToken = (token: FluentOverrideValue) => { + // The FluentOverrideValue type has two mutually exclusive properties: f2Token and rawValue + // We need to check which one is defined and use that value + if (token.f2Token !== undefined) { + return `\$\{${token.f2Token}\}`; + } else { + // we only have a raw value so we should print it directly. + return `${token.rawValue}`; + } +}; + +const isInvalidToken = (token: string) => { + // Safety check string exists + if (token.length === 0) { + return true; + } + // Blacklist for non-valid tokens + if (token.includes('Figmaonly')) { + // Superfluous tokens - SKIP + return true; + } + return false; +}; + +const writeDirectoryFile = (filePath: string, data: string) => { + const dirPath = removeLastDelimiter(filePath, path.sep); + if (!fs.existsSync(dirPath)) { + fs.mkdirSync(dirPath, { recursive: true }); + } + + fs.writeFileSync(filePath, data); + project.addSourceFileAtPathIfExists(filePath); +}; + +const generateTokenRawStrings = () => { + let optionalRawTokens = ''; + let controlRawTokens = ''; + let nullableRawTokens = ''; + const componentTokens: ComponentTokenMap = {}; + const optionalVarFile = path.join(__dirname, '../src/optional/variables.ts'); + exportList[optionalVarFile] = []; + const controlVarFile = path.join(__dirname, '../src/control/variables.ts'); + exportList[controlVarFile] = []; + const nullableVarFile = path.join(__dirname, '../src/nullable/variables.ts'); + exportList[nullableVarFile] = []; + const getComponentFile = (component: string) => path.join(__dirname, `../src/components/${component}/variables.ts`); + + for (const token in tokensJSON) { + if (isInvalidToken(token)) { + // Superfluous tokens - SKIP + continue; + } + + if (tokensJSON.hasOwnProperty(token)) { + const tokenData: Token = tokensJSON[token]; + const tokenName = tokenData.cssName; + const tokenRawString = `export const ${token}Raw = '${tokenName}';\n`; + + if (tokenData.name.startsWith('CTRL/')) { + // We have a component level control token + const component = tokenData.name.split('/')[1]; + if (!componentTokens[component]) { + componentTokens[component] = ''; + } + componentTokens[component] += tokenRawString; + + if (!exportList[getComponentFile(component)]) { + const fileLoc = getComponentFile(component); + exportList[fileLoc] = []; + } + exportList[getComponentFile(component)].push(`${token}Raw`); + } else { + if (tokenData.optional) { + optionalRawTokens += tokenRawString; + exportList[optionalVarFile].push(`${token}Raw`); + } else if (tokenData.nullable) { + nullableRawTokens += tokenRawString; + exportList[nullableVarFile].push(`${token}Raw`); + } else { + controlRawTokens += tokenRawString; + exportList[controlVarFile].push(`${token}Raw`); + } + } + } + } + + writeDirectoryFile(optionalVarFile, optionalRawTokens); + writeDirectoryFile(controlVarFile, controlRawTokens); + writeDirectoryFile(nullableVarFile, nullableRawTokens); + + for (const component of Object.keys(componentTokens)) { + const variablePath = getComponentFile(component); + writeDirectoryFile(variablePath, componentTokens[component]); + } +}; + +const tokenExport = (token: string, resolvedTokenFallback: string) => { + return `export const ${token} = \`${resolvedTokenFallback}\`;\n`; +}; + +const getResolvedToken = (token: string, tokenData: Token, tokenNameRaw: string) => { + const fstReferenceName = toCamelCase(cleanFstTokenName(tokenData.fst_reference)); + const tokenSemanticRef = isInvalidToken(fstReferenceName) ? null : fstReferenceName + 'Raw'; + + // Check if variant fluent fallback token or default fluent fallback exist + const fluentLegacyVariantFallback = legacyFluentVariantsValues[token]; + const fluentFallback = fluentLegacyVariantFallback ? fluentLegacyVariantFallback : fluentFallbacks[token]; + + if (tokenSemanticRef && fluentFallback) { + return `var(${escapeInlineToken(tokenNameRaw)}, var(${escapeInlineToken( + tokenSemanticRef, + )}, ${escapeMixedInlineToken(fluentFallback)}))`; + } + + if (fluentFallback) { + return `var(${escapeInlineToken(tokenNameRaw)}, ${escapeMixedInlineToken(fluentFallback)})`; + } + + if (tokenData.nullable) { + return `var(${escapeInlineToken(tokenNameRaw)}, unset)`; + } + + if (tokenSemanticRef) { + return `var(${escapeInlineToken(tokenNameRaw)}, var(${escapeInlineToken(tokenSemanticRef)}))`; + } + + return `var(${escapeInlineToken(tokenNameRaw)})`; +}; + +const generateTokenVariables = () => { + let optionalTokens = ''; + let controlTokens = ''; + let nullableTokens = ''; + const componentTokens: ComponentTokenMap = {}; + + const optionalVarFile = path.join(__dirname, '../src/optional/tokens.ts'); + exportList[optionalVarFile] = []; + const controlVarFile = path.join(__dirname, '../src/control/tokens.ts'); + exportList[controlVarFile] = []; + const nullableVarFile = path.join(__dirname, '../src/nullable/tokens.ts'); + exportList[nullableVarFile] = []; + const getComponentFile = (component: string) => path.join(__dirname, `../src/components/${component}/tokens.ts`); + + for (const token in tokensJSON) { + if (isInvalidToken(token)) { + // Superfluous tokens - SKIP + continue; + } + + const tokenData: Token = tokensJSON[token]; + const tokenNameRaw = token + 'Raw'; + + // Our default token value if no fallbacks found. + const resolvedTokenFallback = getResolvedToken(token, tokenData, tokenNameRaw); + + if (tokenData.name.startsWith('CTRL/')) { + // We have a component level control token + const component = tokenData.name.split('/')[1]; + if (!componentTokens[component]) { + componentTokens[component] = ''; + } + componentTokens[component] += tokenExport(token, resolvedTokenFallback); + + if (!exportList[getComponentFile(component)]) { + const fileLoc = getComponentFile(component); + exportList[fileLoc] = []; + } + // Add to our list of exports for later + exportList[getComponentFile(component)].push(token); + } else { + // We have a global token + if (tokenData.optional) { + optionalTokens += tokenExport(token, resolvedTokenFallback); + // Add to our list of exports for later + exportList[optionalVarFile].push(token); + } else if (tokenData.nullable) { + nullableTokens += tokenExport(token, resolvedTokenFallback); + // Add to our list of exports for later + exportList[nullableVarFile].push(token); + } else { + controlTokens += tokenExport(token, resolvedTokenFallback); + // Add to our list of exports for later + exportList[controlVarFile].push(token); + } + } + } + + let variantFallbackTokens = ''; + const variantFallbackVarFile = path.join(__dirname, '../src/legacyVariant/tokens.ts'); + exportList[variantFallbackVarFile] = []; + for (const extendedTokenName in legacyFluentVariantsValues) { + const variantData: LegacyFluentVariantValue | null = legacyFluentVariantsValues[extendedTokenName]; + if (!variantData) { + continue; + } + + const tokenData: Token = tokensJSON[variantData.originalToken]; + const tokenNameRaw = variantData.originalToken + 'Raw'; + + // Our default token value if no fallbacks found. + const resolvedTokenFallback = getResolvedToken(extendedTokenName, tokenData, tokenNameRaw); + + // Add to our list of exports for later + exportList[variantFallbackVarFile].push(extendedTokenName); + + const tokenDoc = `/** + * This is a legacy variant for ${variantData.originalToken} to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ${variantData.originalToken} instead. + */\n`; + + variantFallbackTokens += tokenDoc + tokenExport(extendedTokenName, resolvedTokenFallback); + } + + // Add all generated token files + const tokens = { + optional: optionalTokens, + control: controlTokens, + nullable: nullableTokens, + legacyVariant: variantFallbackTokens, + }; + + for (const [tokensCategory, _tokens] of Object.entries(tokens)) { + const filePath = path.join(__dirname, `../src/${tokensCategory}/tokens.ts`); + writeDirectoryFile(filePath, _tokens); + } + + for (const [component, _tokens] of Object.entries(componentTokens)) { + const componentTokensPath = path.join(__dirname, `../src/components/${component}/tokens.ts`); + writeDirectoryFile(componentTokensPath, _tokens); + } + + project.addSourceFileAtPath(path.join(__dirname, '../src/legacy/tokens.ts')); + + // Add import statements + project.getSourceFiles().forEach(sourceFile => { + if (sourceFile.getFilePath().endsWith('legacy/tokens.ts')) { + // Skip legacy tokens file + return; + } + + console.log('Fix missing imports from:', sourceFile.getFilePath()); + sourceFile.fixMissingImports(); + + // Format our text to match prettier rules + const rawText = sourceFile.getText(); + const formattedText = format(rawText, { + parser: 'typescript', + singleQuote: true, + printWidth: 120, + }); + + // Format our text to match prettier rules + sourceFile.replaceWithText(headerWarning + formattedText); + }); + + // Save changes so far + project.saveSync(); + console.log('Added import statements'); + + // Add export statements in index.ts + const sourcePath = path.join(__dirname, '../src'); + const indexFilePath = path.join(sourcePath, 'index.ts'); + // Clear index file and rewrite exports + fs.truncateSync(indexFilePath, 0); + // Add source file after we've cleaned it + const indexSourceFile = project.addSourceFileAtPath(indexFilePath); + for (const [file, namedExports] of Object.entries(exportList)) { + // Find relative path to index.ts, ensure forward slash directory separator, remove .ts extension + const importFilePath = './' + path.relative(sourcePath, file).split(path.sep).join('/').replace(/\.ts$/, ''); + + indexSourceFile.addExportDeclaration({ + namedExports, + moduleSpecifier: importFilePath, + }); + } + + const rawText = indexSourceFile.getText(); + const formattedText = format(rawText, { + parser: 'typescript', + singleQuote: true, + printWidth: 120, + }); + + // Format our text to match prettier rules + indexSourceFile.replaceWithText(headerWarning + formattedText); + + // Save exports + project.saveSync(); + console.log('Added export statements'); +}; + +// Run script +generateTokens(); diff --git a/packages/semantic-tokens/scripts/tokens.json b/packages/semantic-tokens/scripts/tokens.json new file mode 100644 index 00000000000000..1ef71c34753ca9 --- /dev/null +++ b/packages/semantic-tokens/scripts/tokens.json @@ -0,0 +1,13261 @@ +{ + "textGlobalDisplay1FontSize": { + "no": 1, + "name": "text/global/display1/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Font-size/1000", + "exceptions": [], + "cssName": "--smtc-text-global-display1-font-size" + }, + "textGlobalDisplay1LineHeight": { + "no": 2, + "name": "text/global/display1/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Line-height/1000", + "exceptions": [], + "cssName": "--smtc-text-global-display1-line-height" + }, + "textGlobalDisplay2FontSize": { + "no": 3, + "name": "text/global/display2/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Font-size/1000", + "exceptions": [], + "cssName": "--smtc-text-global-display2-font-size" + }, + "textGlobalDisplay2LineHeight": { + "no": 4, + "name": "text/global/display2/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Line-height/1000", + "exceptions": [], + "cssName": "--smtc-text-global-display2-line-height" + }, + "textGlobalTitle1FontSize": { + "no": 5, + "name": "text/global/title1/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Font-size/900", + "exceptions": [], + "cssName": "--smtc-text-global-title1-font-size" + }, + "textGlobalTitle1LineHeight": { + "no": 6, + "name": "text/global/title1/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Line-height/900", + "exceptions": [], + "cssName": "--smtc-text-global-title1-line-height" + }, + "textGlobalTitle2FontSize": { + "no": 7, + "name": "text/global/title2/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Font-size/800", + "exceptions": [], + "cssName": "--smtc-text-global-title2-font-size" + }, + "textGlobalTitle2LineHeight": { + "no": 8, + "name": "text/global/title2/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Font-size/800", + "exceptions": [], + "cssName": "--smtc-text-global-title2-line-height" + }, + "textGlobalSubtitle1FontSize": { + "no": 9, + "name": "text/global/subtitle1/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Inline drawer", "Overlay drawer"], + "contrast": "", + "fallback": "Font-size/700", + "exceptions": [], + "cssName": "--smtc-text-global-subtitle1-font-size" + }, + "textGlobalSubtitle1LineHeight": { + "no": 10, + "name": "text/global/subtitle1/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Inline drawer", "Overlay drawer"], + "contrast": "", + "fallback": "Line-height/700", + "exceptions": [], + "cssName": "--smtc-text-global-subtitle1-line-height" + }, + "textGlobalSubtitle2FontSize": { + "no": 11, + "name": "text/global/subtitle2/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "Font-size/600", + "exceptions": [], + "cssName": "--smtc-text-global-subtitle2-font-size" + }, + "textGlobalSubtitle2LineHeight": { + "no": 12, + "name": "text/global/subtitle2/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "Line-height/600", + "exceptions": [], + "cssName": "--smtc-text-global-subtitle2-line-height" + }, + "textGlobalBody1FontSize": { + "no": 13, + "name": "text/global/body1/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Font-size/500", + "exceptions": [], + "cssName": "--smtc-text-global-body1-font-size" + }, + "textGlobalBody1LineHeight": { + "no": 14, + "name": "text/global/body1/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Line-height/500", + "exceptions": [], + "cssName": "--smtc-text-global-body1-line-height" + }, + "textGlobalBody2FontSize": { + "no": 15, + "name": "text/global/body2/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Field"], + "contrast": "", + "fallback": "Font-size/400", + "exceptions": [], + "cssName": "--smtc-text-global-body2-font-size" + }, + "textGlobalBody2LineHeight": { + "no": 16, + "name": "text/global/body2/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Field"], + "contrast": "", + "fallback": "Line-height/400", + "exceptions": [], + "cssName": "--smtc-text-global-body2-line-height" + }, + "textGlobalBody3FontSize": { + "no": 17, + "name": "text/global/body3/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog", "Spinner"], + "contrast": "", + "fallback": "Font-size/300", + "exceptions": [], + "cssName": "--smtc-text-global-body3-font-size" + }, + "textGlobalBody3LineHeight": { + "no": 18, + "name": "text/global/body3/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "FAB", + " Radio", + " Checkbox", + "Dialog", + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area", + "Field", + "Label", + "Inline link", + "Page link", + "Lite Filter Button", + "Spinner" + ], + "contrast": "", + "fallback": "Line-height/300", + "exceptions": [], + "cssName": "--smtc-text-global-body3-line-height" + }, + "textGlobalCaption1FontSize": { + "no": 19, + "name": "text/global/caption1/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer", "Tooltip", "MessageBar"], + "contrast": "", + "fallback": "Font-size/200", + "exceptions": [], + "cssName": "--smtc-text-global-caption1-font-size" + }, + "textGlobalCaption1LineHeight": { + "no": 20, + "name": "text/global/caption1/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer", "Tooltip", "MessageBar"], + "contrast": "", + "fallback": "Line-height/200", + "exceptions": [], + "cssName": "--smtc-text-global-caption1-line-height" + }, + "textGlobalCaption2FontSize": { + "no": 21, + "name": "text/global/caption2/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Inline drawer", "Overlay drawer", "Field"], + "contrast": "", + "fallback": "Font-size/100", + "exceptions": [], + "cssName": "--smtc-text-global-caption2-font-size" + }, + "textGlobalCaption2LineHeight": { + "no": 22, + "name": "text/global/caption2/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Inline drawer", "Overlay drawer", "Field"], + "contrast": "", + "fallback": "Line-height/100", + "exceptions": [], + "cssName": "--smtc-text-global-caption2-line-height" + }, + "textStyleDefaultRegularFontFamily": { + "no": 23, + "name": "text/style/default/regular/fontFamily", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "FAB", + "Split button", + "Button", + " Radio", + " Checkbox", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area", + "Field", + "Label", + "Inline link", + "Page link", + "Lite Filter Button", + "Lite filter", + "Title bar", + "Tooltip", + "Rating", + "Spinner", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-default-regular-font-family" + }, + "textStyleDefaultRegularWeight": { + "no": 24, + "name": "text/style/default/regular/weight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "FAB", + " Radio", + " Checkbox", + "Dialog", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area", + "Field", + "Label", + "Inline link", + "Page link", + "Lite Filter Button", + "Lite filter", + "Tooltip", + "Rating", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-default-regular-weight" + }, + "textStyleDefaultRegularLetterSpacing": { + "no": 25, + "name": "text/style/default/regular/letterSpacing", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "FAB", + "Split button", + "Button", + " Radio", + " Checkbox", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area", + "Field", + "Label", + "Inline link", + "Page link", + "Lite Filter Button", + "Lite filter", + "Title bar", + "Tooltip", + "Rating", + "Spinner", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-default-regular-letter-spacing" + }, + "textStyleDefaultHeaderFontFamily": { + "no": 26, + "name": "text/style/default/header/fontFamily", + "fst_reference": "text/style/default/regular/fontFamily", + "optional": true, + "nullable": false, + "description": "", + "components": ["Avatar", "Dialog", "Inline drawer", "Overlay drawer", "Field", "MessageBar"], + "contrast": "", + "fallback": "Font-family/Base", + "exceptions": [], + "cssName": "--smtc-text-style-default-header-font-family" + }, + "textStyleDefaultHeaderWeight": { + "no": 27, + "name": "text/style/default/header/weight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Avatar", "Dialog", "Inline drawer", "Overlay drawer", "Field", "Label", "MessageBar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-default-header-weight" + }, + "textStyleDefaultHeaderLetterSpacing": { + "no": 28, + "name": "text/style/default/header/letterSpacing", + "fst_reference": "text/style/default/regular/letterSpacing", + "optional": true, + "nullable": false, + "description": "", + "components": ["Avatar", "Dialog", "Inline drawer", "Overlay drawer", "Field", "MessageBar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-default-header-letter-spacing" + }, + "textStyleDefaultHeaderCase": { + "no": 29, + "name": "text/style/default/header/case", + "fst_reference": "NULL/string", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-default-header-case" + }, + "textStyleAiRegularFontFamily": { + "no": 30, + "name": "text/style/ai/regular/fontFamily", + "fst_reference": "text/style/default/regular/fontFamily", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-ai-regular-font-family" + }, + "textStyleAiRegularWeight": { + "no": 31, + "name": "text/style/ai/regular/weight", + "fst_reference": "text/style/default/regular/weight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-ai-regular-weight" + }, + "textStyleAiRegularLetterSpacing": { + "no": 32, + "name": "text/style/ai/regular/letterSpacing", + "fst_reference": "text/style/default/regular/letterSpacing", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-ai-regular-letter-spacing" + }, + "textStyleAiHeaderFontFamily": { + "no": 33, + "name": "text/style/ai/header/fontFamily", + "fst_reference": "text/style/default/regular/fontFamily", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-ai-header-font-family" + }, + "textStyleAiHeaderWeight": { + "no": 34, + "name": "text/style/ai/header/weight", + "fst_reference": "text/style/default/header/weight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-ai-header-weight" + }, + "textStyleAiHeaderLetterSpacing": { + "no": 35, + "name": "text/style/ai/header/letterSpacing", + "fst_reference": "text/style/default/regular/letterSpacing", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-ai-header-letter-spacing" + }, + "textStyleAiHeaderCase": { + "no": 36, + "name": "text/style/ai/header/case", + "fst_reference": "NULL/string", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-ai-header-case" + }, + "textStyleArticleRegularFontFamily": { + "no": 37, + "name": "text/style/article/regular/fontFamily", + "fst_reference": "text/style/default/regular/fontFamily", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-article-regular-font-family" + }, + "textStyleArticleRegularWeight": { + "no": 38, + "name": "text/style/article/regular/weight", + "fst_reference": "text/style/default/regular/weight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-article-regular-weight" + }, + "textStyleArticleRegularLetterSpacing": { + "no": 39, + "name": "text/style/article/regular/letterSpacing", + "fst_reference": "text/style/default/regular/letterSpacing", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-article-regular-letter-spacing" + }, + "textStyleArticleHeaderFontFamily": { + "no": 40, + "name": "text/style/article/header/fontFamily", + "fst_reference": "text/style/default/regular/fontFamily", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-article-header-font-family" + }, + "textStyleArticleHeaderWeight": { + "no": 41, + "name": "text/style/article/header/weight", + "fst_reference": "text/style/default/header/weight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-article-header-weight" + }, + "textStyleArticleHeaderLetterSpacing": { + "no": 42, + "name": "text/style/article/header/letterSpacing", + "fst_reference": "text/style/default/regular/letterSpacing", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-article-header-letter-spacing" + }, + "textStyleArticleHeaderCase": { + "no": 43, + "name": "text/style/article/header/case", + "fst_reference": "NULL/string", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-article-header-case" + }, + "textStyleCodeRegularFontFamily": { + "no": 44, + "name": "text/style/code/regular/fontFamily", + "fst_reference": "text/style/default/regular/fontFamily", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-code-regular-font-family" + }, + "textStyleCodeRegularWeight": { + "no": 45, + "name": "text/style/code/regular/weight", + "fst_reference": "text/style/default/regular/weight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-code-regular-weight" + }, + "textStyleCodeRegularLetterSpacing": { + "no": 46, + "name": "text/style/code/regular/letterSpacing", + "fst_reference": "text/style/default/regular/letterSpacing", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-code-regular-letter-spacing" + }, + "textStyleCodeHeaderFontFamily": { + "no": 47, + "name": "text/style/code/header/fontFamily", + "fst_reference": "text/style/default/regular/fontFamily", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-code-header-font-family" + }, + "textStyleCodeHeaderWeight": { + "no": 48, + "name": "text/style/code/header/weight", + "fst_reference": "text/style/default/header/weight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-code-header-weight" + }, + "textStyleCodeHeaderLetterSpacing": { + "no": 49, + "name": "text/style/code/header/letterSpacing", + "fst_reference": "text/style/default/regular/letterSpacing", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-code-header-letter-spacing" + }, + "textStyleCodeHeaderCase": { + "no": 50, + "name": "text/style/code/header/case", + "fst_reference": "NULL/string", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-code-header-case" + }, + "textStyleDataVizRegularFontFamily": { + "no": 51, + "name": "text/style/dataViz/regular/fontFamily", + "fst_reference": "text/style/default/regular/fontFamily", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-data-viz-regular-font-family" + }, + "textStyleDataVizRegularWeight": { + "no": 52, + "name": "text/style/dataViz/regular/weight", + "fst_reference": "text/style/default/regular/weight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-data-viz-regular-weight" + }, + "textStyleDataVizRegularLetterSpacing": { + "no": 53, + "name": "text/style/dataViz/regular/letterSpacing", + "fst_reference": "text/style/default/regular/letterSpacing", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-data-viz-regular-letter-spacing" + }, + "textStyleDataVizHeaderFontFamily": { + "no": 54, + "name": "text/style/dataViz/header/fontFamily", + "fst_reference": "text/style/default/regular/fontFamily", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-data-viz-header-font-family" + }, + "textStyleDataVizHeaderWeight": { + "no": 55, + "name": "text/style/dataViz/header/weight", + "fst_reference": "text/style/default/header/weight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-data-viz-header-weight" + }, + "textStyleDataVizHeaderLetterSpacing": { + "no": 56, + "name": "text/style/dataViz/header/letterSpacing", + "fst_reference": "text/style/default/regular/letterSpacing", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-data-viz-header-letter-spacing" + }, + "textStyleDataVizHeaderCase": { + "no": 57, + "name": "text/style/dataViz/header/case", + "fst_reference": "NULL/string", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-data-viz-header-case" + }, + "textStyleQuoteRegularFontFamily": { + "no": 58, + "name": "text/style/quote/regular/fontFamily", + "fst_reference": "text/style/default/regular/fontFamily", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-quote-regular-font-family" + }, + "textStyleQuoteRegularWeight": { + "no": 59, + "name": "text/style/quote/regular/weight", + "fst_reference": "text/style/default/regular/weight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-quote-regular-weight" + }, + "textStyleQuoteRegularLetterSpacing": { + "no": 60, + "name": "text/style/quote/regular/letterSpacing", + "fst_reference": "text/style/default/regular/letterSpacing", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-quote-regular-letter-spacing" + }, + "textStyleQuoteHeaderFontFamily": { + "no": 61, + "name": "text/style/quote/header/fontFamily", + "fst_reference": "text/style/default/regular/fontFamily", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-quote-header-font-family" + }, + "textStyleQuoteHeaderWeight": { + "no": 62, + "name": "text/style/quote/header/weight", + "fst_reference": "text/style/default/header/weight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-quote-header-weight" + }, + "textStyleQuoteHeaderLetterSpacing": { + "no": 63, + "name": "text/style/quote/header/letterSpacing", + "fst_reference": "text/style/default/regular/letterSpacing", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-quote-header-letter-spacing" + }, + "textStyleQuoteHeaderCase": { + "no": 64, + "name": "text/style/quote/header/case", + "fst_reference": "NULL/string", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-quote-header-case" + }, + "textRampPageHeaderFontSize": { + "no": 65, + "name": "text/ramp/pageHeader/fontSize", + "fst_reference": "text/global/title2/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/subtitle1/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-page-header-font-size" + }, + "textRampPageHeaderLineHeight": { + "no": 66, + "name": "text/ramp/pageHeader/lineHeight", + "fst_reference": "text/global/title2/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/subtitle1/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-page-header-line-height" + }, + "textRampSectionHeaderFontSize": { + "no": 67, + "name": "text/ramp/sectionHeader/fontSize", + "fst_reference": "text/global/subtitle1/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/subtitle2/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-section-header-font-size" + }, + "textRampSectionHeaderLineHeight": { + "no": 68, + "name": "text/ramp/sectionHeader/lineHeight", + "fst_reference": "text/global/subtitle1/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/subtitle2/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-section-header-line-height" + }, + "textRampSubsectionHeaderFontSize": { + "no": 69, + "name": "text/ramp/subsectionHeader/fontSize", + "fst_reference": "text/global/subtitle2/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/subtitle2/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-subsection-header-font-size" + }, + "textRampSubsectionHeaderLineHeight": { + "no": 70, + "name": "text/ramp/subsectionHeader/lineHeight", + "fst_reference": "text/global/subtitle2/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/subtitle2/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-subsection-header-line-height" + }, + "textRampReadingBodyFontSize": { + "no": 71, + "name": "text/ramp/readingBody/fontSize", + "fst_reference": "text/global/body2/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body2/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-reading-body-font-size" + }, + "textRampReadingBodyLineHeight": { + "no": 72, + "name": "text/ramp/readingBody/lineHeight", + "fst_reference": "text/global/body2/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body2/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-reading-body-line-height" + }, + "textRampItemHeaderFontSize": { + "no": 73, + "name": "text/ramp/itemHeader/fontSize", + "fst_reference": "text/global/body2/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body2/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-item-header-font-size" + }, + "textRampItemHeaderLineHeight": { + "no": 74, + "name": "text/ramp/itemHeader/lineHeight", + "fst_reference": "text/global/body2/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body2/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-item-header-line-height" + }, + "textRampItemBodyFontSize": { + "no": 75, + "name": "text/ramp/itemBody/fontSize", + "fst_reference": "text/global/body3/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + " Radio", + " Checkbox", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area", + "Field", + "Label", + "Inline link", + "Page link", + "Lite Filter Button", + "Lite filter", + "Title bar", + "Rating", + "MessageBar" + ], + "contrast": "", + "fallback": "Font-size/300", + "exceptions": [], + "cssName": "--smtc-text-ramp-item-body-font-size" + }, + "textRampItemBodyLineHeight": { + "no": 76, + "name": "text/ramp/itemBody/lineHeight", + "fst_reference": "text/global/body3/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + " Radio", + " Checkbox", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Lite filter", + "Title bar", + "Rating", + "MessageBar" + ], + "contrast": "", + "fallback": "Line-height/300", + "exceptions": [], + "cssName": "--smtc-text-ramp-item-body-line-height" + }, + "textRampMetadataFontSize": { + "no": 77, + "name": "text/ramp/metadata/fontSize", + "fst_reference": "text/global/caption1/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-metadata-font-size" + }, + "textRampMetadataLineHeight": { + "no": 78, + "name": "text/ramp/metadata/lineHeight", + "fst_reference": "text/global/caption1/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-metadata-line-height" + }, + "textRampLegalFontSize": { + "no": 79, + "name": "text/ramp/legal/fontSize", + "fst_reference": "text/global/caption2/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-legal-font-size" + }, + "textRampLegalLineHeight": { + "no": 80, + "name": "text/ramp/legal/lineHeight", + "fst_reference": "text/global/caption2/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-legal-line-height" + }, + "textRampSmPageHeaderFontSize": { + "no": 81, + "name": "text/ramp-sm/pageHeader/fontSize", + "fst_reference": "text/global/subtitle1/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/subtitle2/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-page-header-font-size" + }, + "textRampSmPageHeaderLineHeight": { + "no": 82, + "name": "text/ramp-sm/pageHeader/lineHeight", + "fst_reference": "text/global/subtitle1/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/subtitle2/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-page-header-line-height" + }, + "textRampSmSectionHeaderFontSize": { + "no": 83, + "name": "text/ramp-sm/sectionHeader/fontSize", + "fst_reference": "text/global/subtitle2/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body1/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-section-header-font-size" + }, + "textRampSmSectionHeaderLineHeight": { + "no": 84, + "name": "text/ramp-sm/sectionHeader/lineHeight", + "fst_reference": "text/global/subtitle2/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body1/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-section-header-line-height" + }, + "textRampSmSubsectionHeaderFontSize": { + "no": 85, + "name": "text/ramp-sm/subsectionHeader/fontSize", + "fst_reference": "text/global/body1/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body1/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-subsection-header-font-size" + }, + "textRampSmSubsectionHeaderLineHeight": { + "no": 86, + "name": "text/ramp-sm/subsectionHeader/lineHeight", + "fst_reference": "text/global/body1/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body1/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-subsection-header-line-height" + }, + "textRampSmReadingBodyFontSize": { + "no": 87, + "name": "text/ramp-sm/readingBody/fontSize", + "fst_reference": "text/global/body3/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body3/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-reading-body-font-size" + }, + "textRampSmReadingBodyLineHeight": { + "no": 88, + "name": "text/ramp-sm/readingBody/lineHeight", + "fst_reference": "text/global/body3/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body3/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-reading-body-line-height" + }, + "textRampSmItemHeaderFontSize": { + "no": 89, + "name": "text/ramp-sm/itemHeader/fontSize", + "fst_reference": "text/global/body3/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body3/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-item-header-font-size" + }, + "textRampSmItemHeaderLineHeight": { + "no": 90, + "name": "text/ramp-sm/itemHeader/lineHeight", + "fst_reference": "text/global/body3/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body3/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-item-header-line-height" + }, + "textRampSmItemBodyFontSize": { + "no": 91, + "name": "text/ramp-sm/itemBody/fontSize", + "fst_reference": "text/global/caption1/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-item-body-font-size" + }, + "textRampSmItemBodyLineHeight": { + "no": 92, + "name": "text/ramp-sm/itemBody/lineHeight", + "fst_reference": "text/global/caption1/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-item-body-line-height" + }, + "textRampSmMetadataFontSize": { + "no": 93, + "name": "text/ramp-sm/metadata/fontSize", + "fst_reference": "text/global/caption1/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-metadata-font-size" + }, + "textRampSmMetadataLineHeight": { + "no": 94, + "name": "text/ramp-sm/metadata/lineHeight", + "fst_reference": "text/global/caption1/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-metadata-line-height" + }, + "textRampSmLegalFontSize": { + "no": 95, + "name": "text/ramp-sm/legal/fontSize", + "fst_reference": "text/global/caption2/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-legal-font-size" + }, + "textRampSmLegalLineHeight": { + "no": 96, + "name": "text/ramp-sm/legal/lineHeight", + "fst_reference": "text/global/caption2/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-sm-legal-line-height" + }, + "textRampLgPageHeaderFontSize": { + "no": 97, + "name": "text/ramp-lg/pageHeader/fontSize", + "fst_reference": "text/global/title1/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/title2/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-page-header-font-size" + }, + "textRampLgPageHeaderLineHeight": { + "no": 98, + "name": "text/ramp-lg/pageHeader/lineHeight", + "fst_reference": "text/global/title1/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/title2/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-page-header-line-height" + }, + "textRampLgSectionHeaderFontSize": { + "no": 99, + "name": "text/ramp-lg/sectionHeader/fontSize", + "fst_reference": "text/global/title2/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/subtitle1/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-section-header-font-size" + }, + "textRampLgSectionHeaderLineHeight": { + "no": 100, + "name": "text/ramp-lg/sectionHeader/lineHeight", + "fst_reference": "text/global/title2/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/subtitle1/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-section-header-line-height" + }, + "textRampLgSubsectionHeaderFontSize": { + "no": 101, + "name": "text/ramp-lg/subsectionHeader/fontSize", + "fst_reference": "text/global/subtitle1/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/subtitle1/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-subsection-header-font-size" + }, + "textRampLgSubsectionHeaderLineHeight": { + "no": 102, + "name": "text/ramp-lg/subsectionHeader/lineHeight", + "fst_reference": "text/global/subtitle1/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/subtitle1/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-subsection-header-line-height" + }, + "textRampLgReadingBodyFontSize": { + "no": 103, + "name": "text/ramp-lg/readingBody/fontSize", + "fst_reference": "text/global/body1/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body1/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-reading-body-font-size" + }, + "textRampLgReadingBodyLineHeight": { + "no": 104, + "name": "text/ramp-lg/readingBody/lineHeight", + "fst_reference": "text/global/body1/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body1/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-reading-body-line-height" + }, + "textRampLgItemHeaderFontSize": { + "no": 105, + "name": "text/ramp-lg/itemHeader/fontSize", + "fst_reference": "text/global/subtitle2/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body1/fontSize", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-item-header-font-size" + }, + "textRampLgItemHeaderLineHeight": { + "no": 106, + "name": "text/ramp-lg/itemHeader/lineHeight", + "fst_reference": "text/global/subtitle2/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "text/global/body1/lineHeight", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-item-header-line-height" + }, + "textRampLgItemBodyFontSize": { + "no": 107, + "name": "text/ramp-lg/itemBody/fontSize", + "fst_reference": "text/global/body2/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "Font-size/400", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-item-body-font-size" + }, + "textRampLgItemBodyLineHeight": { + "no": 108, + "name": "text/ramp-lg/itemBody/lineHeight", + "fst_reference": "text/global/body2/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Line-height/400", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-item-body-line-height" + }, + "textRampLgMetadataFontSize": { + "no": 109, + "name": "text/ramp-lg/metadata/fontSize", + "fst_reference": "text/global/body3/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-metadata-font-size" + }, + "textRampLgMetadataLineHeight": { + "no": 110, + "name": "text/ramp-lg/metadata/lineHeight", + "fst_reference": "text/global/body3/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-metadata-line-height" + }, + "textRampLgLegalFontSize": { + "no": 111, + "name": "text/ramp-lg/legal/fontSize", + "fst_reference": "text/global/caption1/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-legal-font-size" + }, + "textRampLgLegalLineHeight": { + "no": 112, + "name": "text/ramp-lg/legal/lineHeight", + "fst_reference": "text/global/caption1/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ramp-lg-legal-line-height" + }, + "textCtrlWeightDefault": { + "no": 113, + "name": "text/ctrl/weight/default", + "fst_reference": "text/style/default/regular/weight", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ctrl-weight-default" + }, + "textCtrlButtonWeightDefault": { + "no": 114, + "name": "text/ctrl/button/weight/default", + "fst_reference": "text/style/default/regular/weight", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ctrl-button-weight-default" + }, + "textCtrlButtonWeightSelected": { + "no": 115, + "name": "text/ctrl/button/weight/selected", + "fst_reference": "text/ctrl/weight/selected", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Lite Filter Button", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ctrl-button-weight-selected" + }, + "sizeCtrlDefault": { + "no": 116, + "name": "size/ctrl/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + " Radio", + " Checkbox", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area", + "Page link", + "Lite Filter Button", + "Lite filter", + "Title bar", + "Slider", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-default" + }, + "sizeCtrlIcon": { + "no": 117, + "name": "size/ctrl/icon", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "FAB", + "Split button", + "Button", + " Checkbox", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Editable dropdown", + "Editable spin button", + "Inline link", + "Page link", + "Lite Filter Button", + "Lite filter", + "Title bar", + "Rating", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-icon" + }, + "sizeCtrlIconFigmaonly": { + "no": 118, + "name": "size/ctrl/icon(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Editable dropdown", + "Editable spin button", + "Inline link", + "Page link", + "Lite Filter Button", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-icon-figmaonly" + }, + "sizeCtrlIconSecondary": { + "no": 119, + "name": "size/ctrl/iconSecondary", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Editable dropdown", + "Editable spin button", + "Lite Filter Button", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-icon-secondary" + }, + "sizeCtrlIconSecondaryFigmaonly": { + "no": 120, + "name": "size/ctrl/iconSecondary(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-icon-secondary-figmaonly" + }, + "textCtrlWeightSelected": { + "no": 121, + "name": "text/ctrl/weight/selected", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Lite filter"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-ctrl-weight-selected" + }, + "sizeCtrlSmDefault": { + "no": 122, + "name": "size/ctrl-sm/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer", "Editable dropdown", "Editable spin button"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-sm-default" + }, + "sizeCtrlSmIcon": { + "no": 123, + "name": "size/ctrl-sm/icon", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-sm-icon" + }, + "sizeCtrlLgDefault": { + "no": 124, + "name": "size/ctrl-lg/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-lg-default" + }, + "sizeCtrlLgIcon": { + "no": 125, + "name": "size/ctrl-lg/icon", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-lg-icon" + }, + "sizeCtrlSmIconFigmaonly": { + "no": 126, + "name": "size/ctrl-sm/icon(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-sm-icon-figmaonly" + }, + "sizeCtrlLgIconFigmaonly": { + "no": 127, + "name": "size/ctrl-lg/icon(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-lg-icon-figmaonly" + }, + "paddingContentAlignDefault": { + "no": 128, + "name": "padding/content/align/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Inline drawer", "Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-align-default" + }, + "paddingContentAlignOutdentIconOnSubtle": { + "no": 129, + "name": "padding/content/align/outdent-iconOnSubtle", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-align-outdent-icon-on-subtle" + }, + "paddingContentNone": { + "no": 130, + "name": "padding/content/none", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-none" + }, + "paddingContentAlignOutdentTextOnSubtle": { + "no": 131, + "name": "padding/content/align/outdent-textOnSubtle", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-align-outdent-text-on-subtle" + }, + "paddingContentXxSmall": { + "no": 132, + "name": "padding/content/xxSmall", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-xx-small" + }, + "paddingContentXSmall": { + "no": 133, + "name": "padding/content/xSmall", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-x-small" + }, + "paddingContentSmall": { + "no": 134, + "name": "padding/content/small", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-small" + }, + "paddingContentMedium": { + "no": 135, + "name": "padding/content/medium", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-medium" + }, + "paddingContentLarge": { + "no": 136, + "name": "padding/content/large", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog", "Footer", "Consent Dialog/footer", "Inline drawer", "Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-large" + }, + "paddingContentXLarge": { + "no": 137, + "name": "padding/content/xLarge", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-x-large" + }, + "paddingContentXxLarge": { + "no": 138, + "name": "padding/content/xxLarge", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-xx-large" + }, + "paddingContentXxxLarge": { + "no": 139, + "name": "padding/content/xxxLarge", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-xxx-large" + }, + "paddingToolbarInside": { + "no": 140, + "name": "padding/toolbar/inside", + "fst_reference": "padding/content/xSmall", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-toolbar-inside" + }, + "paddingToolbarOutside": { + "no": 141, + "name": "padding/toolbar/outside", + "fst_reference": "padding/content/xxSmall", + "optional": true, + "nullable": false, + "description": "", + "components": ["Title bar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-toolbar-outside" + }, + "paddingFlyoutDefault": { + "no": 142, + "name": "padding/flyout/default", + "fst_reference": "padding/content/align/outdent-textOnSubtle", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-flyout-default" + }, + "paddingCardNestedImage": { + "no": 143, + "name": "padding/card/nestedImage", + "fst_reference": "padding/content/align/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Image"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-card-nested-image" + }, + "paddingCtrlHorizontalDefault": { + "no": 144, + "name": "padding/ctrl/horizontal-default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area", + "Page link", + "Lite filter", + "Tooltip", + "Slider", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-horizontal-default" + }, + "paddingCtrlHorizontalIconOnly": { + "no": 145, + "name": "padding/ctrl/horizontal-iconOnly", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + "Dialog", + "Inline drawer", + "Overlay drawer", + "Lite Filter Button", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-horizontal-icon-only" + }, + "paddingCtrlTextTop": { + "no": 146, + "name": "padding/ctrl/textTop", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area", + "Field", + "Label", + "Page link", + "Lite Filter Button", + "Lite filter", + "Title bar", + "Tooltip", + "Rating", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-text-top" + }, + "paddingCtrlTextBottom": { + "no": 147, + "name": "padding/ctrl/textBottom", + "fst_reference": "padding/ctrl/textTop", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area", + "Field", + "Label", + "Page link", + "Lite Filter Button", + "Lite filter", + "Title bar", + "Tooltip", + "Rating", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-text-bottom" + }, + "paddingCtrlTextSide": { + "no": 148, + "name": "padding/ctrl/textSide", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-text-side" + }, + "paddingCtrlToNestedControl": { + "no": 149, + "name": "padding/ctrl/toNestedControl", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Text input box", "Search box", "Password input box", "Editable dropdown", "Editable spin button"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-to-nested-control" + }, + "paddingCtrlSmHorizontalDefault": { + "no": 150, + "name": "padding/ctrl-sm/horizontal-default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer", "Editable spin button"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-sm-horizontal-default" + }, + "paddingCtrlSmHorizontalIconOnly": { + "no": 151, + "name": "padding/ctrl-sm/horizontal-iconOnly", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Editable dropdown"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-sm-horizontal-icon-only" + }, + "paddingCtrlSmTextTop": { + "no": 152, + "name": "padding/ctrl-sm/textTop", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-sm-text-top" + }, + "paddingCtrlSmTextBottom": { + "no": 153, + "name": "padding/ctrl-sm/textBottom", + "fst_reference": "padding/ctrl-sm/textTop", + "optional": true, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-sm-text-bottom" + }, + "paddingCtrlSmToNestedControl": { + "no": 154, + "name": "padding/ctrl-sm/toNestedControl", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-sm-to-nested-control" + }, + "paddingCtrlLgHorizontalDefault": { + "no": 155, + "name": "padding/ctrl-lg/horizontal-default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-lg-horizontal-default" + }, + "paddingCtrlLgHorizontalIconOnly": { + "no": 156, + "name": "padding/ctrl-lg/horizontal-iconOnly", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-lg-horizontal-icon-only" + }, + "paddingCtrlLgTextTop": { + "no": 157, + "name": "padding/ctrl-lg/textTop", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB", "MessageBar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-lg-text-top" + }, + "paddingCtrlLgTextBottom": { + "no": 158, + "name": "padding/ctrl-lg/textBottom", + "fst_reference": "padding/ctrl-lg/textTop", + "optional": true, + "nullable": false, + "description": "", + "components": ["FAB", "MessageBar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-lg-text-bottom" + }, + "paddingCtrlLgToNestedControl": { + "no": 159, + "name": "padding/ctrl-lg/toNestedControl", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-lg-to-nested-control" + }, + "gapBetweenContentNone": { + "no": 160, + "name": "gap/between/content/none", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-none" + }, + "gapBetweenContentXxSmall": { + "no": 161, + "name": "gap/between/content/xxSmall", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Field"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-xx-small" + }, + "gapBetweenContentXSmall": { + "no": 162, + "name": "gap/between/content/xSmall", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-x-small" + }, + "gapBetweenContentSmall": { + "no": 163, + "name": "gap/between/content/small", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-small" + }, + "gapBetweenCtrlDefault": { + "no": 164, + "name": "gap/between/ctrl/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-ctrl-default" + }, + "gapBetweenContentMedium": { + "no": 165, + "name": "gap/between/content/medium", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-medium" + }, + "gapBetweenContentLarge": { + "no": 166, + "name": "gap/between/content/large", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-large" + }, + "gapBetweenContentXLarge": { + "no": 167, + "name": "gap/between/content/xLarge", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-x-large" + }, + "gapBetweenContentXxLarge": { + "no": 168, + "name": "gap/between/content/xxLarge", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-xx-large" + }, + "gapBetweenCtrlNested": { + "no": 169, + "name": "gap/between/ctrl/nested", + "fst_reference": "padding/ctrl/toNestedControl", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-ctrl-nested" + }, + "gapBetweenTextSmall": { + "no": 170, + "name": "gap/between/text-small", + "fst_reference": "gap/between/content/xxSmall", + "optional": true, + "nullable": false, + "description": "", + "components": ["Dialog", "Field", "MessageBar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-text-small" + }, + "gapBetweenCtrlLgDefault": { + "no": 171, + "name": "gap/between/ctrl-lg/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-ctrl-lg-default" + }, + "gapBetweenCtrlLgNested": { + "no": 172, + "name": "gap/between/ctrl-lg/nested", + "fst_reference": "padding/ctrl-lg/toNestedControl", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-ctrl-lg-nested" + }, + "gapBetweenTextLarge": { + "no": 173, + "name": "gap/between/text-large", + "fst_reference": "gap/between/content/xSmall", + "optional": true, + "nullable": false, + "description": "", + "components": ["MessageBar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-text-large" + }, + "gapBetweenCtrlSmDefault": { + "no": 174, + "name": "gap/between/ctrl-sm/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Text input box", "Editable dropdown", "Editable spin button"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-ctrl-sm-default" + }, + "gapBetweenCtrlSmNested": { + "no": 175, + "name": "gap/between/ctrl-sm/nested", + "fst_reference": "padding/ctrl-sm/toNestedControl", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-ctrl-sm-nested" + }, + "gapBetweenListItem": { + "no": 176, + "name": "gap/between/listItem", + "fst_reference": "gap/between/content/xxSmall", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-list-item" + }, + "gapBetweenCard": { + "no": 177, + "name": "gap/between/card", + "fst_reference": "gap/between/content/medium", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-card" + }, + "gapInsideCtrlDefault": { + "no": 178, + "name": "gap/inside/ctrl/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Page link", + "Lite Filter Button", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-inside-ctrl-default" + }, + "gapInsideCtrlSmDefault": { + "no": 179, + "name": "gap/inside/ctrl-sm/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-inside-ctrl-sm-default" + }, + "gapInsideCtrlSmToSecondaryIcon": { + "no": 180, + "name": "gap/inside/ctrl-sm/toSecondaryIcon", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Editable dropdown"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-inside-ctrl-sm-to-secondary-icon" + }, + "gapInsideCtrlLgDefault": { + "no": 181, + "name": "gap/inside/ctrl-lg/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-inside-ctrl-lg-default" + }, + "gapInsideCtrlLgToSecondaryIcon": { + "no": 182, + "name": "gap/inside/ctrl-lg/toSecondaryIcon", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-inside-ctrl-lg-to-secondary-icon" + }, + "gapInsideCtrlToSecondaryIcon": { + "no": 183, + "name": "gap/inside/ctrl/toSecondaryIcon", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + " Radio", + " Checkbox", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Field", + "Label", + "Inline link", + "Lite Filter Button", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-inside-ctrl-to-secondary-icon" + }, + "gapInsideCtrlToLabel": { + "no": 184, + "name": "gap/inside/ctrl/toLabel", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [" Radio", " Checkbox", "Rating", "Spinner", "MessageBar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-inside-ctrl-to-label" + }, + "gapInsideCtrlSmToLabel": { + "no": 185, + "name": "gap/inside/ctrl-sm/toLabel", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-inside-ctrl-sm-to-label" + }, + "gapInsideCtrlLgToLabel": { + "no": 186, + "name": "gap/inside/ctrl-lg/toLabel", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-inside-ctrl-lg-to-label" + }, + "cornerCircular": { + "no": 187, + "name": "corner/circular", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Presence badge", "Badge", "Lite Filter Button", "Lite filter"], + "contrast": "", + "fallback": "Circular", + "exceptions": [], + "cssName": "--smtc-corner-circular" + }, + "strokeWidthDefault": { + "no": 188, + "name": "strokeWidth/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Badge", + "FAB", + "Split button", + "Button", + "Card/Primary", + "Card/Secondary", + "Card/Tint (needed?)", + "Card/Outline", + " Switch", + " Radio", + " Checkbox", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Image", + "Editable dropdown", + "Editable spin button", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-stroke-width-default" + }, + "strokeWidthDividerDefault": { + "no": 189, + "name": "strokeWidth/divider/default", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer", "Divider"], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-stroke-width-divider-default" + }, + "strokeWidthDividerStrong": { + "no": 190, + "name": "strokeWidth/divider/strong", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-stroke-width-divider-strong" + }, + "strokeWidthCtrlOutlineRest": { + "no": 191, + "name": "strokeWidth/ctrl/outline/rest", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area", + "Lite Filter Button" + ], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-stroke-width-ctrl-outline-rest" + }, + "strokeWidthCtrlOutlineHover": { + "no": 192, + "name": "strokeWidth/ctrl/outline/hover", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-stroke-width-ctrl-outline-hover" + }, + "strokeWidthCtrlOutlinePressed": { + "no": 193, + "name": "strokeWidth/ctrl/outline/pressed", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-stroke-width-ctrl-outline-pressed" + }, + "strokeWidthCtrlOutlineSelected": { + "no": 194, + "name": "strokeWidth/ctrl/outline/selected", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-stroke-width-ctrl-outline-selected" + }, + "strokeWidthWindowDefault": { + "no": 195, + "name": "strokeWidth/window/default", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-stroke-width-window-default" + }, + "backgroundToolbar": { + "no": 196, + "name": "background/toolbar", + "fst_reference": "background/card/onPrimary/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-background-toolbar" + }, + "backgroundSmoke": { + "no": 197, + "name": "background/smoke", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-smoke" + }, + "strokeLayer": { + "no": 198, + "name": "stroke/layer", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-layer" + }, + "strokeImage": { + "no": 199, + "name": "stroke/image", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Image"], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-image" + }, + "strokeToolbar": { + "no": 200, + "name": "stroke/toolbar", + "fst_reference": "stroke/card/onPrimary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-toolbar" + }, + "strokeFlyout": { + "no": 201, + "name": "stroke/flyout", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-flyout" + }, + "strokeCtrlOnBrandRest": { + "no": 202, + "name": "stroke/ctrl/onBrand/rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Dialog", "Footer", "Inline drawer", "Overlay drawer", "Tooltip"], + "contrast": "", + "fallback": "NULL/color", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-brand-rest" + }, + "strokeCtrlOnBrandHover": { + "no": 203, + "name": "stroke/ctrl/onBrand/hover", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/color", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-brand-hover" + }, + "strokeCtrlOnBrandPressed": { + "no": 204, + "name": "stroke/ctrl/onBrand/pressed", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/color", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-brand-pressed" + }, + "strokeCtrlOnBrandDisabled": { + "no": 205, + "name": "stroke/ctrl/onBrand/disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/color", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-brand-disabled" + }, + "strokeCtrlOnBrandRestStop2": { + "no": 206, + "name": "stroke/ctrl/onBrand/rest(stop2)", + "fst_reference": "stroke/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Dialog", "Footer", "Inline drawer", "Overlay drawer"], + "contrast": "", + "fallback": "stroke/ctrl/onBrand/rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-brand-rest-stop2" + }, + "strokeCtrlOnBrandHoverStop2": { + "no": 207, + "name": "stroke/ctrl/onBrand/hover(stop2)", + "fst_reference": "stroke/ctrl/onBrand/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onBrand/hover", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-brand-hover-stop2" + }, + "strokeCtrlOnBrandPressedStop2": { + "no": 208, + "name": "stroke/ctrl/onBrand/pressed(stop2)", + "fst_reference": "stroke/ctrl/onBrand/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onBrand/pressed", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-brand-pressed-stop2" + }, + "strokeCtrlOnBrandDisabledStop2": { + "no": 209, + "name": "stroke/ctrl/onBrand/disabled(stop2)", + "fst_reference": "stroke/ctrl/onBrand/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onBrand/disabled", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-brand-disabled-stop2" + }, + "strokeCtrlOnNeutralRest": { + "no": 210, + "name": "stroke/ctrl/onNeutral/rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Dialog", "Footer", "Consent Dialog/footer", "Inline drawer", "Overlay drawer", "MessageBar"], + "contrast": "", + "fallback": "Neutral/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-neutral-rest" + }, + "strokeCtrlOnNeutralHover": { + "no": 211, + "name": "stroke/ctrl/onNeutral/hover", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Hover", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-neutral-hover" + }, + "strokeCtrlOnNeutralPressed": { + "no": 212, + "name": "stroke/ctrl/onNeutral/pressed", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Pressed", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-neutral-pressed" + }, + "strokeCtrlOnNeutralDisabled": { + "no": 213, + "name": "stroke/ctrl/onNeutral/disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-neutral-disabled" + }, + "strokeCtrlOnNeutralRestStop2": { + "no": 214, + "name": "stroke/ctrl/onNeutral/rest(stop2)", + "fst_reference": "stroke/ctrl/onNeutral/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Dialog", "Footer", "Consent Dialog/footer", "Inline drawer", "Overlay drawer", "MessageBar"], + "contrast": "", + "fallback": "stroke/ctrl/onNeutral/rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-neutral-rest-stop2" + }, + "strokeCtrlOnNeutralHoverStop2": { + "no": 215, + "name": "stroke/ctrl/onNeutral/hover(stop2)", + "fst_reference": "stroke/ctrl/onNeutral/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onNeutral/hover", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-neutral-hover-stop2" + }, + "strokeCtrlOnNeutralPressedStop2": { + "no": 216, + "name": "stroke/ctrl/onNeutral/pressed(stop2)", + "fst_reference": "stroke/ctrl/onNeutral/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onNeutral/pressed", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-neutral-pressed-stop2" + }, + "strokeCtrlOnNeutralDisabledStop2": { + "no": 217, + "name": "stroke/ctrl/onNeutral/disabled(stop2)", + "fst_reference": "stroke/ctrl/onNeutral/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onNeutral/disabled", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-neutral-disabled-stop2" + }, + "strokeCtrlOnOutlineRest": { + "no": 218, + "name": "stroke/ctrl/onOutline/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Lite filter"], + "contrast": "", + "fallback": "Neutral/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-outline-rest" + }, + "strokeCtrlOnOutlineHover": { + "no": 219, + "name": "stroke/ctrl/onOutline/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Hover", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-outline-hover" + }, + "strokeCtrlOnOutlinePressed": { + "no": 220, + "name": "stroke/ctrl/onOutline/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Pressed", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-outline-pressed" + }, + "strokeCtrlOnOutlineDisabled": { + "no": 221, + "name": "stroke/ctrl/onOutline/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-outline-disabled" + }, + "strokeCtrlOnOutlineRestStop2": { + "no": 222, + "name": "stroke/ctrl/onOutline/rest(stop2)", + "fst_reference": "stroke/ctrl/onOutline/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Lite filter"], + "contrast": "", + "fallback": "stroke/ctrl/onOutline/rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-outline-rest-stop2" + }, + "strokeCtrlOnOutlineHoverStop2": { + "no": 223, + "name": "stroke/ctrl/onOutline/hover(stop2)", + "fst_reference": "stroke/ctrl/onOutline/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onOutline/hover", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-outline-hover-stop2" + }, + "strokeCtrlOnOutlinePressedStop2": { + "no": 224, + "name": "stroke/ctrl/onOutline/pressed(stop2)", + "fst_reference": "stroke/ctrl/onOutline/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onOutline/pressed", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-outline-pressed-stop2" + }, + "strokeCtrlOnOutlineDisabledStop2": { + "no": 225, + "name": "stroke/ctrl/onOutline/disabled(stop2)", + "fst_reference": "stroke/ctrl/onOutline/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Lite Filter Button"], + "contrast": "", + "fallback": "stroke/ctrl/divider/onOutline", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-outline-disabled-stop2" + }, + "strokeCtrlOnSubtleRest": { + "no": 226, + "name": "stroke/ctrl/onSubtle/rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [ + "Dialog", + "Inline drawer", + "Overlay drawer", + "Editable dropdown", + "Editable spin button", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-subtle-rest" + }, + "strokeCtrlOnSubtleHover": { + "no": 227, + "name": "stroke/ctrl/onSubtle/hover", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-subtle-hover" + }, + "strokeCtrlOnSubtlePressed": { + "no": 228, + "name": "stroke/ctrl/onSubtle/pressed", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-subtle-pressed" + }, + "strokeCtrlOnSubtleDisabled": { + "no": 229, + "name": "stroke/ctrl/onSubtle/disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-subtle-disabled" + }, + "strokeCtrlOnSubtleHoverSplit": { + "no": 230, + "name": "stroke/ctrl/onSubtle/hoverSplit", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-subtle-hover-split" + }, + "strokeCtrlOnActiveBrandRest": { + "no": 231, + "name": "stroke/ctrl/onActiveBrand/rest", + "fst_reference": "stroke/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onBrand/rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-active-brand-rest" + }, + "strokeCtrlDividerOnBrand": { + "no": 232, + "name": "stroke/ctrl/divider/onBrand", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/onBrand/2/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-divider-on-brand" + }, + "strokeCtrlDividerOnBrandDisabled": { + "no": 233, + "name": "stroke/ctrl/divider/onBrand-disabled", + "fst_reference": "stroke/ctrl/divider/onBrand", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/onBrand/2/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-divider-on-brand-disabled" + }, + "strokeCtrlDividerOnActiveBrand": { + "no": 234, + "name": "stroke/ctrl/divider/onActiveBrand", + "fst_reference": "stroke/ctrl/divider/onBrand", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/divider/onBrand", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-divider-on-active-brand" + }, + "strokeCtrlDividerOnActiveBrandDisabled": { + "no": 235, + "name": "stroke/ctrl/divider/onActiveBrand-disabled", + "fst_reference": "stroke/ctrl/divider/onBrand", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/divider/onBrand", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-divider-on-active-brand-disabled" + }, + "strokeCtrlDividerOnNeutral": { + "no": 236, + "name": "stroke/ctrl/divider/onNeutral", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-divider-on-neutral" + }, + "strokeCtrlDividerOnNeutralDisabled": { + "no": 237, + "name": "stroke/ctrl/divider/onNeutral-disabled", + "fst_reference": "stroke/ctrl/divider/onNeutral", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-divider-on-neutral-disabled" + }, + "strokeCtrlDividerOnOutline": { + "no": 238, + "name": "stroke/ctrl/divider/onOutline", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Lite Filter Button"], + "contrast": "", + "fallback": "Neutral/Stroke/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-divider-on-outline" + }, + "strokeCtrlDividerOnOutlineDisabled": { + "no": 239, + "name": "stroke/ctrl/divider/onOutline-disabled", + "fst_reference": "stroke/ctrl/divider/onOutline", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-divider-on-outline-disabled" + }, + "strokeCtrlDividerOnSubtle": { + "no": 240, + "name": "stroke/ctrl/divider/onSubtle", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-divider-on-subtle" + }, + "strokeCtrlDividerOnSubtleDisabled": { + "no": 241, + "name": "stroke/ctrl/divider/onSubtle-disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Split button"], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-divider-on-subtle-disabled" + }, + "strokeCtrlOnActiveBrandHover": { + "no": 242, + "name": "stroke/ctrl/onActiveBrand/hover", + "fst_reference": "stroke/ctrl/onBrand/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onBrand/hover", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-active-brand-hover" + }, + "strokeCtrlOnActiveBrandPressed": { + "no": 243, + "name": "stroke/ctrl/onActiveBrand/pressed", + "fst_reference": "stroke/ctrl/onBrand/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onBrand/pressed", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-active-brand-pressed" + }, + "strokeCtrlOnActiveBrandDisabled": { + "no": 244, + "name": "stroke/ctrl/onActiveBrand/disabled", + "fst_reference": "stroke/ctrl/onBrand/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [" Switch", " Radio", " Checkbox"], + "contrast": "", + "fallback": "stroke/ctrl/onBrand/disabled", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-active-brand-disabled" + }, + "strokeCtrlOnActiveBrandRestStop2": { + "no": 245, + "name": "stroke/ctrl/onActiveBrand/rest(stop2)", + "fst_reference": "stroke/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onActiveBrand/rest", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-active-brand-rest-stop2" + }, + "strokeCtrlOnActiveBrandHoverStop2": { + "no": 246, + "name": "stroke/ctrl/onActiveBrand/hover(stop2)", + "fst_reference": "stroke/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onActiveBrand/hover", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-active-brand-hover-stop2" + }, + "strokeCtrlOnActiveBrandPressedStop2": { + "no": 247, + "name": "stroke/ctrl/onActiveBrand/pressed(stop2)", + "fst_reference": "stroke/ctrl/onBrand/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onActiveBrand/pressed", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-active-brand-pressed-stop2" + }, + "strokeCtrlOnActiveBrandDisabledStop2": { + "no": 248, + "name": "stroke/ctrl/onActiveBrand/disabled(stop2)", + "fst_reference": "stroke/ctrl/onBrand/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "stroke/ctrl/onActiveBrand/disabled", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-on-active-brand-disabled-stop2" + }, + "strokeDividerDefault": { + "no": 249, + "name": "stroke/divider/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer", "Inline drawer"], + "contrast": "", + "fallback": "Neutral/Stroke/2/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-divider-default" + }, + "strokeDividerSubtle": { + "no": 250, + "name": "stroke/divider/subtle", + "fst_reference": "stroke/divider/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/3/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-divider-subtle" + }, + "strokeDividerStrong": { + "no": 251, + "name": "stroke/divider/strong", + "fst_reference": "stroke/divider/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-divider-strong" + }, + "strokeDividerBrand": { + "no": 252, + "name": "stroke/divider/brand", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Divider"], + "contrast": "", + "fallback": "Brand/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-divider-brand" + }, + "strokeCardSelected": { + "no": 253, + "name": "stroke/card/selected", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Selected", + "exceptions": [], + "cssName": "--smtc-stroke-card-selected" + }, + "strokeCardOnPrimaryRest": { + "no": 254, + "name": "stroke/card/onPrimary/rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Card/Primary"], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-card-on-primary-rest" + }, + "strokeCardOnPrimaryHover": { + "no": 255, + "name": "stroke/card/onPrimary/hover", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Interactive/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-card-on-primary-hover" + }, + "strokeCardOnPrimaryPressed": { + "no": 256, + "name": "stroke/card/onPrimary/pressed", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Interactive/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-card-on-primary-pressed" + }, + "strokeCardOnPrimaryDisabled": { + "no": 257, + "name": "stroke/card/onPrimary/disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Interactive/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-card-on-primary-disabled" + }, + "strokeCardOnSecondaryRest": { + "no": 258, + "name": "stroke/card/onSecondary/rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Card/Secondary"], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-card-on-secondary-rest" + }, + "strokeCardOnSecondaryHover": { + "no": 259, + "name": "stroke/card/onSecondary/hover", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Interactive/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-card-on-secondary-hover" + }, + "strokeCardOnSecondaryPressed": { + "no": 260, + "name": "stroke/card/onSecondary/pressed", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Interactive/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-card-on-secondary-pressed" + }, + "strokeCardOnSecondaryDisabled": { + "no": 261, + "name": "stroke/card/onSecondary/disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Interactive/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-card-on-secondary-disabled" + }, + "strokeWindowActive": { + "no": 262, + "name": "stroke/window/active", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/2/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-window-active" + }, + "strokeWindowInactive": { + "no": 263, + "name": "stroke/window/inactive", + "fst_reference": "stroke/window/active", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/2/Rest", + "exceptions": [], + "cssName": "--smtc-stroke-window-inactive" + }, + "backgroundWindowPrimarySolid": { + "no": 264, + "name": "background/window/primary/(solid)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-primary-solid" + }, + "backgroundWindowPrimaryColorBlend": { + "no": 265, + "name": "background/window/primary/(colorBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-primary-color-blend" + }, + "backgroundWindowPrimaryLumBlend": { + "no": 266, + "name": "background/window/primary/(lumBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-primary-lum-blend" + }, + "backgroundWindowSecondarySolid": { + "no": 267, + "name": "background/window/secondary/(solid)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-secondary-solid" + }, + "backgroundWindowSecondaryColorBlend": { + "no": 268, + "name": "background/window/secondary/(colorBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-secondary-color-blend" + }, + "backgroundWindowSecondaryLumBlend": { + "no": 269, + "name": "background/window/secondary/(lumBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-secondary-lum-blend" + }, + "backgroundWindowTabBandColorBlend": { + "no": 270, + "name": "background/window/tabBand/(colorBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-tab-band-color-blend" + }, + "backgroundWindowTabBandLumBlend": { + "no": 271, + "name": "background/window/tabBand/(lumBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-tab-band-lum-blend" + }, + "backgroundWindowTabBandSolid": { + "no": 272, + "name": "background/window/tabBand/(solid)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-tab-band-solid" + }, + "backgroundWebPagePrimary": { + "no": 273, + "name": "background/webPage/primary", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-web-page-primary" + }, + "backgroundWebPageSecondary": { + "no": 274, + "name": "background/webPage/secondary", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-web-page-secondary" + }, + "backgroundLayerPrimarySolid": { + "no": 275, + "name": "background/layer/primary(solid)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-background-layer-primary-solid" + }, + "backgroundLayerPrimaryStop1": { + "no": 276, + "name": "background/layer/primary(stop1)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-layer-primary-stop1" + }, + "backgroundLayerPrimaryStop2": { + "no": 277, + "name": "background/layer/primary(stop2)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-layer-primary-stop2" + }, + "backgroundLayerPrimaryStop3": { + "no": 278, + "name": "background/layer/primary(stop3)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-layer-primary-stop3" + }, + "backgroundLayerSecondary": { + "no": 279, + "name": "background/layer/secondary", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/2/Rest", + "exceptions": [], + "cssName": "--smtc-background-layer-secondary" + }, + "backgroundLayerTertiary": { + "no": 280, + "name": "background/layer/tertiary", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/3/Rest", + "exceptions": [], + "cssName": "--smtc-background-layer-tertiary" + }, + "backgroundCardOnPrimaryDefaultRest": { + "no": 281, + "name": "background/card/onPrimary/default/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Card/Primary"], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-background-card-on-primary-default-rest" + }, + "backgroundCardOnPrimaryAltRest": { + "no": 282, + "name": "background/card/onPrimary/alt/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Card/Secondary"], + "contrast": "", + "fallback": "background/card/onPrimary/default/rest", + "exceptions": [], + "cssName": "--smtc-background-card-on-primary-alt-rest" + }, + "backgroundCardOnPrimaryAltHover": { + "no": 283, + "name": "background/card/onPrimary/alt/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/card/onPrimary/default/hover", + "exceptions": [], + "cssName": "--smtc-background-card-on-primary-alt-hover" + }, + "backgroundCardOnPrimaryAltPressed": { + "no": 284, + "name": "background/card/onPrimary/alt/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/card/onPrimary/default/pressed", + "exceptions": [], + "cssName": "--smtc-background-card-on-primary-alt-pressed" + }, + "backgroundCardOnPrimaryAltDisabled": { + "no": 285, + "name": "background/card/onPrimary/alt/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/card/onPrimary/default/pressed", + "exceptions": [], + "cssName": "--smtc-background-card-on-primary-alt-disabled" + }, + "backgroundCardOnPrimaryDefaultHover": { + "no": 286, + "name": "background/card/onPrimary/default/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Hover", + "exceptions": [], + "cssName": "--smtc-background-card-on-primary-default-hover" + }, + "backgroundCardOnPrimaryDefaultPressed": { + "no": 287, + "name": "background/card/onPrimary/default/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Pressed", + "exceptions": [], + "cssName": "--smtc-background-card-on-primary-default-pressed" + }, + "backgroundCardOnPrimaryDefaultDisabled": { + "no": 288, + "name": "background/card/onPrimary/default/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-background-card-on-primary-default-disabled" + }, + "backgroundCardOnPrimaryDefaultSelected": { + "no": 289, + "name": "background/card/onPrimary/default/selected", + "fst_reference": "background/card/onPrimary/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Selected", + "exceptions": [], + "cssName": "--smtc-background-card-on-primary-default-selected" + }, + "backgroundFlyoutSolid": { + "no": 290, + "name": "background/flyout/(solid)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-flyout-solid" + }, + "backgroundCtrlBrandRest": { + "no": 291, + "name": "background/ctrl/brand/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog", "Footer", "Inline drawer", "Overlay drawer", "Tooltip"], + "contrast": "", + "fallback": "Brand/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-background-ctrl-brand-rest" + }, + "backgroundCtrlBrandHover": { + "no": 292, + "name": "background/ctrl/brand/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Background/1/Hover", + "exceptions": [], + "cssName": "--smtc-background-ctrl-brand-hover" + }, + "backgroundCtrlBrandPressed": { + "no": 293, + "name": "background/ctrl/brand/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Background/1/Selected", + "exceptions": [], + "cssName": "--smtc-background-ctrl-brand-pressed" + }, + "backgroundCtrlBrandDisabled": { + "no": 294, + "name": "background/ctrl/brand/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-ctrl-brand-disabled" + }, + "backgroundCtrlActiveBrandRest": { + "no": 295, + "name": "background/ctrl/activeBrand/rest", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/ctrl/brand/rest", + "exceptions": [], + "cssName": "--smtc-background-ctrl-active-brand-rest" + }, + "backgroundCtrlActiveBrandHover": { + "no": 296, + "name": "background/ctrl/activeBrand/hover", + "fst_reference": "background/ctrl/brand/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/ctrl/brand/hover", + "exceptions": [], + "cssName": "--smtc-background-ctrl-active-brand-hover" + }, + "backgroundCtrlActiveBrandPressed": { + "no": 297, + "name": "background/ctrl/activeBrand/pressed", + "fst_reference": "background/ctrl/brand/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/ctrl/brand/pressed", + "exceptions": [], + "cssName": "--smtc-background-ctrl-active-brand-pressed" + }, + "backgroundCtrlActiveBrandDisabled": { + "no": 298, + "name": "background/ctrl/activeBrand/disabled", + "fst_reference": "background/ctrl/brand/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [" Switch", " Radio", " Checkbox"], + "contrast": "", + "fallback": "background/ctrl/brand/disabled", + "exceptions": [], + "cssName": "--smtc-background-ctrl-active-brand-disabled" + }, + "backgroundCtrlNeutralRest": { + "no": 299, + "name": "background/ctrl/neutral/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog", "Footer", "Consent Dialog/footer", "Inline drawer", "Overlay drawer", "MessageBar"], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-background-ctrl-neutral-rest" + }, + "backgroundCtrlNeutralHover": { + "no": 300, + "name": "background/ctrl/neutral/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Hover", + "exceptions": [], + "cssName": "--smtc-background-ctrl-neutral-hover" + }, + "backgroundCtrlNeutralPressed": { + "no": 301, + "name": "background/ctrl/neutral/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Pressed", + "exceptions": [], + "cssName": "--smtc-background-ctrl-neutral-pressed" + }, + "backgroundCtrlNeutralDisabled": { + "no": 302, + "name": "background/ctrl/neutral/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Progress Bar"], + "contrast": "", + "fallback": "Neutral/Background/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-background-ctrl-neutral-disabled" + }, + "backgroundCtrlOutlineRest": { + "no": 303, + "name": "background/ctrl/outline/rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Lite filter"], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-background-ctrl-outline-rest" + }, + "backgroundCtrlOutlineHover": { + "no": 304, + "name": "background/ctrl/outline/hover", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Hover", + "exceptions": [], + "cssName": "--smtc-background-ctrl-outline-hover" + }, + "backgroundCtrlOutlinePressed": { + "no": 305, + "name": "background/ctrl/outline/pressed", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Pressed", + "exceptions": [], + "cssName": "--smtc-background-ctrl-outline-pressed" + }, + "backgroundCtrlOutlineDisabled": { + "no": 306, + "name": "background/ctrl/outline/disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Lite Filter Button"], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-background-ctrl-outline-disabled" + }, + "backgroundCtrlSubtleRest": { + "no": 307, + "name": "background/ctrl/subtle/rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [ + "Dialog", + "Inline drawer", + "Overlay drawer", + "Editable dropdown", + "Editable spin button", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "Neutral/Background/Subtle/Rest", + "exceptions": [], + "cssName": "--smtc-background-ctrl-subtle-rest" + }, + "backgroundCtrlShapeSafeActiveBrandRest": { + "no": 308, + "name": "background/ctrl/shapeSafe/activeBrand/rest", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Stroke/Compound/Rest", + "exceptions": [], + "cssName": "--smtc-background-ctrl-shape-safe-active-brand-rest" + }, + "backgroundCtrlShapeSafeActiveBrandDisabled": { + "no": 309, + "name": "background/ctrl/shapeSafe/activeBrand/disabled", + "fst_reference": "background/ctrl/brand/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-background-ctrl-shape-safe-active-brand-disabled" + }, + "backgroundCtrlShapeSafeNeutralRest": { + "no": 310, + "name": "background/ctrl/shapeSafe/neutral/rest", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Rating"], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Hover", + "exceptions": [], + "cssName": "--smtc-background-ctrl-shape-safe-neutral-rest" + }, + "backgroundCtrlShapeSafeNeutralHover": { + "no": 311, + "name": "background/ctrl/shapeSafe/neutral/hover", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Hover", + "exceptions": [], + "cssName": "--smtc-background-ctrl-shape-safe-neutral-hover" + }, + "backgroundCtrlShapeSafeNeutralPressed": { + "no": 312, + "name": "background/ctrl/shapeSafe/neutral/pressed", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Pressed", + "exceptions": [], + "cssName": "--smtc-background-ctrl-shape-safe-neutral-pressed" + }, + "backgroundCtrlShapeSafeNeutralDisabled": { + "no": 313, + "name": "background/ctrl/shapeSafe/neutral/disabled", + "fst_reference": "foreground/ctrl/neutral/secondary/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-background-ctrl-shape-safe-neutral-disabled" + }, + "backgroundCtrlSubtleHover": { + "no": 314, + "name": "background/ctrl/subtle/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Subtle/Hover", + "exceptions": [], + "cssName": "--smtc-background-ctrl-subtle-hover" + }, + "backgroundCtrlSubtlePressed": { + "no": 315, + "name": "background/ctrl/subtle/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Subtle/Pressed", + "exceptions": [], + "cssName": "--smtc-background-ctrl-subtle-pressed" + }, + "backgroundCtrlSubtleDisabled": { + "no": 316, + "name": "background/ctrl/subtle/disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-background-ctrl-subtle-disabled" + }, + "backgroundCtrlSubtleHoverSplit": { + "no": 317, + "name": "background/ctrl/subtle/hoverSplit", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-background-ctrl-subtle-hover-split" + }, + "backgroundFlyoutLumBlend": { + "no": 318, + "name": "background/flyout/(lumBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-background-flyout-lum-blend" + }, + "backgroundFlyoutColorBlend": { + "no": 319, + "name": "background/flyout/(colorBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-background-flyout-color-blend" + }, + "cornerZero": { + "no": 320, + "name": "corner/zero", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "None", + "exceptions": [], + "cssName": "--smtc-corner-zero" + }, + "cornerBezel": { + "no": 321, + "name": "corner/bezel", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-bezel" + }, + "cornerWindowDefault": { + "no": 322, + "name": "corner/window/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-window-default" + }, + "cornerFlyoutRest": { + "no": 323, + "name": "corner/flyout/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-corner-flyout-rest" + }, + "cornerFlyoutHover": { + "no": 324, + "name": "corner/flyout/hover", + "fst_reference": "corner/flyout/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-corner-flyout-hover" + }, + "cornerFlyoutPressed": { + "no": 325, + "name": "corner/flyout/pressed", + "fst_reference": "corner/flyout/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-corner-flyout-pressed" + }, + "cornerLayerDefault": { + "no": 326, + "name": "corner/layer/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-layer-default" + }, + "cornerLayerIntersection": { + "no": 327, + "name": "corner/layer/intersection", + "fst_reference": "corner/zero", + "optional": true, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-layer-intersection" + }, + "cornerCardRest": { + "no": 328, + "name": "corner/card/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Card/Primary", "Card/Secondary", "Card/Tint (needed?)", "Card/Outline"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-card-rest" + }, + "cornerCardHover": { + "no": 329, + "name": "corner/card/hover", + "fst_reference": "corner/card/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-card-hover" + }, + "cornerCardPressed": { + "no": 330, + "name": "corner/card/pressed", + "fst_reference": "corner/card/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-card-pressed" + }, + "cornerToolbarDefault": { + "no": 331, + "name": "corner/toolbar/default", + "fst_reference": "corner/card/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-toolbar-default" + }, + "cornerImageOnPage": { + "no": 332, + "name": "corner/image/onPage", + "fst_reference": "corner/card/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-image-on-page" + }, + "cornerCtrlRest": { + "no": 333, + "name": "corner/ctrl/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area", + "Inline link", + "Page link", + "Title bar", + "Tooltip", + "MessageBar" + ], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-corner-ctrl-rest" + }, + "cornerCtrlHover": { + "no": 334, + "name": "corner/ctrl/hover", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-corner-ctrl-hover" + }, + "cornerCtrlPressed": { + "no": 335, + "name": "corner/ctrl/pressed", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-corner-ctrl-pressed" + }, + "cornerCtrlSmRest": { + "no": 336, + "name": "corner/ctrl-sm/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer", "Editable dropdown", "Editable spin button"], + "contrast": "", + "fallback": "Small", + "exceptions": [], + "cssName": "--smtc-corner-ctrl-sm-rest" + }, + "cornerCtrlSmHover": { + "no": 337, + "name": "corner/ctrl-sm/hover", + "fst_reference": "corner/ctrl-sm/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Small", + "exceptions": [], + "cssName": "--smtc-corner-ctrl-sm-hover" + }, + "cornerCtrlSmPressed": { + "no": 338, + "name": "corner/ctrl-sm/pressed", + "fst_reference": "corner/ctrl-sm/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Small", + "exceptions": [], + "cssName": "--smtc-corner-ctrl-sm-pressed" + }, + "cornerCtrlLgRest": { + "no": 339, + "name": "corner/ctrl-lg/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-ctrl-lg-rest" + }, + "cornerCtrlLgHover": { + "no": 340, + "name": "corner/ctrl-lg/hover", + "fst_reference": "corner/ctrl-lg/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-ctrl-lg-hover" + }, + "cornerCtrlLgPressed": { + "no": 341, + "name": "corner/ctrl-lg/pressed", + "fst_reference": "corner/ctrl-lg/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-ctrl-lg-pressed" + }, + "cornerImageInCard": { + "no": 342, + "name": "corner/image/inCard", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Inline drawer", "Overlay drawer", "Image"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-image-in-card" + }, + "foregroundContentNeutralPrimary": { + "no": 343, + "name": "foreground/content/neutral/primary", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [" Radio", " Checkbox", "Dialog", "Inline drawer", "Overlay drawer", "Field", "Label", "Spinner"], + "contrast": "", + "fallback": "Neutral/Foreground/1/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-content-neutral-primary" + }, + "foregroundContentNeutralSecondary": { + "no": 344, + "name": "foreground/content/neutral/secondary", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "Neutral/Foreground/2/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-content-neutral-secondary" + }, + "foregroundContentBrandPrimary": { + "no": 345, + "name": "foreground/content/brand/primary", + "fst_reference": "foreground/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Foreground/Link/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-content-brand-primary" + }, + "foregroundCtrlNeutralPrimaryRest": { + "no": 346, + "name": "foreground/ctrl/neutral/primary/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Rating", + "MessageBar" + ], + "contrast": "", + "fallback": "Neutral/Foreground/1/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-neutral-primary-rest" + }, + "foregroundCtrlNeutralPrimaryHover": { + "no": 347, + "name": "foreground/ctrl/neutral/primary/hover", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/1/Hover", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-neutral-primary-hover" + }, + "foregroundCtrlNeutralPrimaryPressed": { + "no": 348, + "name": "foreground/ctrl/neutral/primary/pressed", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/1/Pressed", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-neutral-primary-pressed" + }, + "foregroundCtrlNeutralPrimaryDisabled": { + "no": 349, + "name": "foreground/ctrl/neutral/primary/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-neutral-primary-disabled" + }, + "foregroundCtrlNeutralSecondaryRest": { + "no": 350, + "name": "foreground/ctrl/neutral/secondary/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Text input box", "Editable dropdown", "Editable spin button", "Text area", "Field"], + "contrast": "", + "fallback": "Neutral/Foreground/4/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-neutral-secondary-rest" + }, + "foregroundCtrlNeutralSecondaryHover": { + "no": 351, + "name": "foreground/ctrl/neutral/secondary/hover", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/4/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-neutral-secondary-hover" + }, + "foregroundCtrlNeutralSecondaryPressed": { + "no": 352, + "name": "foreground/ctrl/neutral/secondary/pressed", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/4/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-neutral-secondary-pressed" + }, + "foregroundCtrlNeutralSecondaryDisabled": { + "no": 353, + "name": "foreground/ctrl/neutral/secondary/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Search box", "Password input box"], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-neutral-secondary-disabled" + }, + "foregroundCtrlIconOnNeutralRest": { + "no": 354, + "name": "foreground/ctrl/icon/onNeutral/rest", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Editable dropdown", + "Editable spin button", + "MessageBar" + ], + "contrast": "", + "fallback": "Neutral/Foreground/2/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-icon-on-neutral-rest" + }, + "foregroundCtrlIconOnNeutralHover": { + "no": 355, + "name": "foreground/ctrl/icon/onNeutral/hover", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Hover", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-icon-on-neutral-hover" + }, + "foregroundCtrlIconOnNeutralPressed": { + "no": 356, + "name": "foreground/ctrl/icon/onNeutral/pressed", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Pressed", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-icon-on-neutral-pressed" + }, + "foregroundCtrlIconOnNeutralDisabled": { + "no": 357, + "name": "foreground/ctrl/icon/onNeutral/disabled", + "fst_reference": "foreground/ctrl/neutral/primary/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Search box"], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-icon-on-neutral-disabled" + }, + "foregroundCtrlIconOnOutlineRest": { + "no": 358, + "name": "foreground/ctrl/icon/onOutline/rest", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Lite filter"], + "contrast": "", + "fallback": "Neutral/Foreground/2/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-icon-on-outline-rest" + }, + "foregroundCtrlIconOnOutlineHover": { + "no": 359, + "name": "foreground/ctrl/icon/onOutline/hover", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Hover", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-icon-on-outline-hover" + }, + "foregroundCtrlIconOnOutlinePressed": { + "no": 360, + "name": "foreground/ctrl/icon/onOutline/pressed", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Pressed", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-icon-on-outline-pressed" + }, + "foregroundCtrlIconOnOutlineDisabled": { + "no": 361, + "name": "foreground/ctrl/icon/onOutline/disabled", + "fst_reference": "foreground/ctrl/neutral/primary/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Lite Filter Button"], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-icon-on-outline-disabled" + }, + "foregroundCtrlIconOnSubtleRest": { + "no": 362, + "name": "foreground/ctrl/icon/onSubtle/rest", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Dialog", "Inline drawer", "Overlay drawer", "Title bar", "MessageBar"], + "contrast": "", + "fallback": "Neutral/Foreground/2/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-icon-on-subtle-rest" + }, + "foregroundCtrlIconOnSubtleHover": { + "no": 363, + "name": "foreground/ctrl/icon/onSubtle/hover", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Brand/Hover", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-icon-on-subtle-hover" + }, + "foregroundCtrlIconOnSubtlePressed": { + "no": 364, + "name": "foreground/ctrl/icon/onSubtle/pressed", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Brand/Pressed", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-icon-on-subtle-pressed" + }, + "foregroundCtrlIconOnSubtleDisabled": { + "no": 365, + "name": "foreground/ctrl/icon/onSubtle/disabled", + "fst_reference": "foreground/ctrl/neutral/primary/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-icon-on-subtle-disabled" + }, + "foregroundCtrlBrandRest": { + "no": 366, + "name": "foreground/ctrl/brand/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["MessageBar"], + "contrast": "", + "fallback": "Neutral/Foreground/2/Brand/Selected", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-brand-rest" + }, + "foregroundCtrlBrandHover": { + "no": 367, + "name": "foreground/ctrl/brand/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Brand/Hover", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-brand-hover" + }, + "foregroundCtrlBrandPressed": { + "no": 368, + "name": "foreground/ctrl/brand/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Brand/Pressed", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-brand-pressed" + }, + "foregroundCtrlBrandDisabled": { + "no": 369, + "name": "foreground/ctrl/brand/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-brand-disabled" + }, + "foregroundCtrlOnBrandRest": { + "no": 370, + "name": "foreground/ctrl/onBrand/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog", "Footer", "Inline drawer", "Overlay drawer", "Tooltip"], + "contrast": "", + "fallback": "Neutral/Foreground/OnBrand/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-brand-rest" + }, + "foregroundCtrlOnBrandHover": { + "no": 371, + "name": "foreground/ctrl/onBrand/hover", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/OnBrand/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-brand-hover" + }, + "foregroundCtrlOnBrandPressed": { + "no": 372, + "name": "foreground/ctrl/onBrand/pressed", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/OnBrand/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-brand-pressed" + }, + "foregroundCtrlOnBrandDisabled": { + "no": 373, + "name": "foreground/ctrl/onBrand/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-brand-disabled" + }, + "foregroundCtrlActiveBrandRest": { + "no": 374, + "name": "foreground/ctrl/activeBrand/rest", + "fst_reference": "foreground/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "foreground/ctrl/brand/rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-active-brand-rest" + }, + "foregroundCtrlActiveBrandHover": { + "no": 375, + "name": "foreground/ctrl/activeBrand/hover", + "fst_reference": "foreground/ctrl/brand/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "foreground/ctrl/brand/hover", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-active-brand-hover" + }, + "foregroundCtrlActiveBrandPressed": { + "no": 376, + "name": "foreground/ctrl/activeBrand/pressed", + "fst_reference": "foreground/ctrl/brand/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "foreground/ctrl/brand/pressed", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-active-brand-pressed" + }, + "foregroundCtrlActiveBrandDisabled": { + "no": 377, + "name": "foreground/ctrl/activeBrand/disabled", + "fst_reference": "foreground/ctrl/brand/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Split button", "Button"], + "contrast": "", + "fallback": "foreground/ctrl/brand/disabled", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-active-brand-disabled" + }, + "foregroundCtrlOnActiveBrandRest": { + "no": 378, + "name": "foreground/ctrl/onActiveBrand/rest", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Lite filter"], + "contrast": "", + "fallback": "foreground/ctrl/onBrand/rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-active-brand-rest" + }, + "foregroundCtrlOnActiveBrandHover": { + "no": 379, + "name": "foreground/ctrl/onActiveBrand/hover", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "foreground/ctrl/onBrand/hover", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-active-brand-hover" + }, + "foregroundCtrlOnActiveBrandPressed": { + "no": 380, + "name": "foreground/ctrl/onActiveBrand/pressed", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "foreground/ctrl/onBrand/pressed", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-active-brand-pressed" + }, + "foregroundCtrlOnActiveBrandDisabled": { + "no": 381, + "name": "foreground/ctrl/onActiveBrand/disabled", + "fst_reference": "foreground/ctrl/onBrand/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [" Switch", " Radio", " Checkbox"], + "contrast": "", + "fallback": "foreground/ctrl/onBrand/disabled", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-active-brand-disabled" + }, + "foregroundCtrlOnOutlineRest": { + "no": 382, + "name": "foreground/ctrl/onOutline/rest", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Lite filter"], + "contrast": "", + "fallback": "Neutral/Foreground/1/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-outline-rest" + }, + "foregroundCtrlOnOutlineHover": { + "no": 383, + "name": "foreground/ctrl/onOutline/hover", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/1/Hover", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-outline-hover" + }, + "foregroundCtrlOnOutlinePressed": { + "no": 384, + "name": "foreground/ctrl/onOutline/pressed", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/1/Pressed", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-outline-pressed" + }, + "foregroundCtrlOnOutlineDisabled": { + "no": 385, + "name": "foreground/ctrl/onOutline/disabled", + "fst_reference": "foreground/ctrl/neutral/primary/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Lite Filter Button"], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-outline-disabled" + }, + "foregroundCtrlOnSubtleRest": { + "no": 386, + "name": "foreground/ctrl/onSubtle/rest", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Dialog", "Inline drawer", "Overlay drawer", "Editable spin button", "Title bar", "MessageBar"], + "contrast": "", + "fallback": "Neutral/Foreground/2/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-subtle-rest" + }, + "foregroundCtrlOnSubtleHover": { + "no": 387, + "name": "foreground/ctrl/onSubtle/hover", + "fst_reference": "foreground/ctrl/neutral/primary/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Hover", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-subtle-hover" + }, + "foregroundCtrlOnSubtlePressed": { + "no": 388, + "name": "foreground/ctrl/onSubtle/pressed", + "fst_reference": "foreground/ctrl/neutral/primary/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Pressed", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-subtle-pressed" + }, + "foregroundCtrlOnSubtleDisabled": { + "no": 389, + "name": "foreground/ctrl/onSubtle/disabled", + "fst_reference": "foreground/ctrl/neutral/primary/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-subtle-disabled" + }, + "foregroundCtrlOnTransparentRest": { + "no": 390, + "name": "foreground/ctrl/onTransparent/rest", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/1/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-transparent-rest" + }, + "foregroundCtrlOnTransparentHover": { + "no": 391, + "name": "foreground/ctrl/onTransparent/hover", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Brand/Hover", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-transparent-hover" + }, + "foregroundCtrlOnTransparentPressed": { + "no": 392, + "name": "foreground/ctrl/onTransparent/pressed", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Brand/Pressed", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-transparent-pressed" + }, + "foregroundCtrlOnTransparentDisabled": { + "no": 393, + "name": "foreground/ctrl/onTransparent/disabled", + "fst_reference": "foreground/ctrl/neutral/primary/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-on-transparent-disabled" + }, + "foregroundCtrlHintDefault": { + "no": 394, + "name": "foreground/ctrl/hint/default", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Rest", + "exceptions": [], + "cssName": "--smtc-foreground-ctrl-hint-default" + }, + "shadowCardRestKeyX": { + "no": 395, + "name": "shadow/card/rest/(key)/(x)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-rest-key-x" + }, + "shadowCardRestKeyY": { + "no": 396, + "name": "shadow/card/rest/(key)/(y)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-rest-key-y" + }, + "shadowCardRestKeyBlur": { + "no": 397, + "name": "shadow/card/rest/(key)/(blur)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-rest-key-blur" + }, + "shadowCardRestKeyColor": { + "no": 398, + "name": "shadow/card/rest/(key)/(color)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Shadow/Key", + "exceptions": [], + "cssName": "--smtc-shadow-card-rest-key-color" + }, + "shadowCardHoverKeyX": { + "no": 399, + "name": "shadow/card/hover/(key)/(x)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-hover-key-x" + }, + "shadowCardHoverKeyY": { + "no": 400, + "name": "shadow/card/hover/(key)/(y)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-hover-key-y" + }, + "shadowCardHoverKeyBlur": { + "no": 401, + "name": "shadow/card/hover/(key)/(blur)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-hover-key-blur" + }, + "shadowCardHoverKeyColor": { + "no": 402, + "name": "shadow/card/hover/(key)/(color)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-hover-key-color" + }, + "shadowCardPressedKeyX": { + "no": 403, + "name": "shadow/card/pressed/(key)/(x)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-pressed-key-x" + }, + "shadowCardPressedKeyY": { + "no": 404, + "name": "shadow/card/pressed/(key)/(y)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-pressed-key-y" + }, + "shadowCardPressedKeyBlur": { + "no": 405, + "name": "shadow/card/pressed/(key)/(blur)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-pressed-key-blur" + }, + "shadowCardPressedKeyColor": { + "no": 406, + "name": "shadow/card/pressed/(key)/(color)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-pressed-key-color" + }, + "shadowCardDisabledKeyX": { + "no": 407, + "name": "shadow/card/disabled/(key)/(x)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-disabled-key-x" + }, + "shadowCardDisabledKeyY": { + "no": 408, + "name": "shadow/card/disabled/(key)/(y)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-disabled-key-y" + }, + "shadowCardDisabledKeyBlur": { + "no": 409, + "name": "shadow/card/disabled/(key)/(blur)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-disabled-key-blur" + }, + "shadowCardDisabledKeyColor": { + "no": 410, + "name": "shadow/card/disabled/(key)/(color)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-disabled-key-color" + }, + "shadowCardRestAmbientX": { + "no": 411, + "name": "shadow/card/rest/(ambient)/(x)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-rest-ambient-x" + }, + "shadowCardRestAmbientY": { + "no": 412, + "name": "shadow/card/rest/(ambient)/(y)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-rest-ambient-y" + }, + "shadowCardRestAmbientBlur": { + "no": 413, + "name": "shadow/card/rest/(ambient)/(blur)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-card-rest-ambient-blur" + }, + "shadowCardRestAmbientColor": { + "no": 414, + "name": "shadow/card/rest/(ambient)/(color)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Shadow/Ambient", + "exceptions": [], + "cssName": "--smtc-shadow-card-rest-ambient-color" + }, + "shadowFlyoutKeyX": { + "no": 415, + "name": "shadow/flyout/(key)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-flyout-key-x" + }, + "shadowFlyoutKeyY": { + "no": 416, + "name": "shadow/flyout/(key)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-flyout-key-y" + }, + "shadowFlyoutKeyBlur": { + "no": 417, + "name": "shadow/flyout/(key)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-flyout-key-blur" + }, + "shadowFlyoutKeyColor": { + "no": 418, + "name": "shadow/flyout/(key)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-flyout-key-color" + }, + "shadowFlyoutAmbientX": { + "no": 419, + "name": "shadow/flyout/(ambient)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-flyout-ambient-x" + }, + "shadowFlyoutAmbientY": { + "no": 420, + "name": "shadow/flyout/(ambient)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-flyout-ambient-y" + }, + "shadowFlyoutAmbientBlur": { + "no": 421, + "name": "shadow/flyout/(ambient)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-flyout-ambient-blur" + }, + "shadowFlyoutAmbientColor": { + "no": 422, + "name": "shadow/flyout/(ambient)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-flyout-ambient-color" + }, + "shadowCtrlOnDragKeyY": { + "no": 423, + "name": "shadow/ctrl/onDrag/(key)/(y)", + "fst_reference": "shadow/flyout/(key)/(y)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-ctrl-on-drag-key-y" + }, + "shadowCtrlOnDragKeyX": { + "no": 424, + "name": "shadow/ctrl/onDrag/(key)/(x)", + "fst_reference": "shadow/flyout/(key)/(x)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-ctrl-on-drag-key-x" + }, + "shadowCtrlOnDragKeyBlur": { + "no": 425, + "name": "shadow/ctrl/onDrag/(key)/(blur)", + "fst_reference": "shadow/flyout/(key)/(blur)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-ctrl-on-drag-key-blur" + }, + "shadowCtrlOnDragKeyColor": { + "no": 426, + "name": "shadow/ctrl/onDrag/(key)/(color)", + "fst_reference": "shadow/flyout/(key)/(color)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Card/Primary", "Card/Secondary", "Card/Tint (needed?)", "Card/Outline"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-ctrl-on-drag-key-color" + }, + "shadowCtrlOnDragAmbientY": { + "no": 427, + "name": "shadow/ctrl/onDrag/(ambient)/(y)", + "fst_reference": "shadow/flyout/(ambient)/(y)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Card/Primary", "Card/Secondary", "Card/Tint (needed?)", "Card/Outline"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-ctrl-on-drag-ambient-y" + }, + "shadowCtrlOnDragAmbientX": { + "no": 428, + "name": "shadow/ctrl/onDrag/(ambient)/(x)", + "fst_reference": "shadow/flyout/(ambient)/(x)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-ctrl-on-drag-ambient-x" + }, + "shadowCtrlOnDragAmbientBlur": { + "no": 429, + "name": "shadow/ctrl/onDrag/(ambient)/(blur)", + "fst_reference": "shadow/flyout/(ambient)/(blur)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Card/Primary", "Card/Secondary", "Card/Tint (needed?)", "Card/Outline"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-ctrl-on-drag-ambient-blur" + }, + "shadowCtrlOnDragAmbientColor": { + "no": 430, + "name": "shadow/ctrl/onDrag/(ambient)/(color)", + "fst_reference": "shadow/flyout/(ambient)/(color)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Card/Primary", "Card/Secondary", "Card/Tint (needed?)", "Card/Outline"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-ctrl-on-drag-ambient-color" + }, + "shadowLayerKeyX": { + "no": 431, + "name": "shadow/layer/(key)/(x)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-layer-key-x" + }, + "shadowToolbarKeyX": { + "no": 432, + "name": "shadow/toolbar/(key)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-key-x" + }, + "shadowToolbarKeyY": { + "no": 433, + "name": "shadow/toolbar/(key)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-key-y" + }, + "shadowToolbarKeyBlur": { + "no": 434, + "name": "shadow/toolbar/(key)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-key-blur" + }, + "shadowToolbarKeyColor": { + "no": 435, + "name": "shadow/toolbar/(key)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Shadow/Ambientlighter", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-key-color" + }, + "shadowToolbarAmbientX": { + "no": 436, + "name": "shadow/toolbar/(ambient)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-ambient-x" + }, + "shadowToolbarAmbientY": { + "no": 437, + "name": "shadow/toolbar/(ambient)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-ambient-y" + }, + "shadowToolbarAmbientBlur": { + "no": 438, + "name": "shadow/toolbar/(ambient)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-ambient-blur" + }, + "shadowToolbarAmbientColor": { + "no": 439, + "name": "shadow/toolbar/(ambient)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-ambient-color" + }, + "shadowLayerKeyY": { + "no": 440, + "name": "shadow/layer/(key)/(y)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-layer-key-y" + }, + "shadowLayerKeyBlur": { + "no": 441, + "name": "shadow/layer/(key)/(blur)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-layer-key-blur" + }, + "shadowLayerKeyColor": { + "no": 442, + "name": "shadow/layer/(key)/(color)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-layer-key-color" + }, + "shadowLayerAmbientX": { + "no": 443, + "name": "shadow/layer/(ambient)/(x)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-layer-ambient-x" + }, + "shadowLayerAmbientY": { + "no": 444, + "name": "shadow/layer/(ambient)/(y)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-layer-ambient-y" + }, + "shadowLayerAmbientBlur": { + "no": 445, + "name": "shadow/layer/(ambient)/(blur)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-layer-ambient-blur" + }, + "shadowLayerAmbientColor": { + "no": 446, + "name": "shadow/layer/(ambient)/(color)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-layer-ambient-color" + }, + "materialAcrylicDefaultSolid": { + "no": 447, + "name": "material/acrylic/default/(solid)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-material-acrylic-default-solid" + }, + "materialAcrylicDefaultColorBlend": { + "no": 448, + "name": "material/acrylic/default/(colorBlend)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-material-acrylic-default-color-blend" + }, + "materialAcrylicDefaultLumBlend": { + "no": 449, + "name": "material/acrylic/default/(lumBlend)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-material-acrylic-default-lum-blend" + }, + "materialAcrylicBlur": { + "no": 450, + "name": "material/acrylic/blur", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-material-acrylic-blur" + }, + "materialMicaBlur": { + "no": 451, + "name": "material/mica/blur", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-material-mica-blur" + }, + "materialMicaDefaultSolid": { + "no": 452, + "name": "material/mica/default/(solid)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-material-mica-default-solid" + }, + "materialMicaDefaultColorBlend": { + "no": 453, + "name": "material/mica/default/(colorBlend)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-material-mica-default-color-blend" + }, + "materialMicaDefaultLumBlend": { + "no": 454, + "name": "material/mica/default/(lumBlend)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-material-mica-default-lum-blend" + }, + "materialMicaDarkerSolid": { + "no": 455, + "name": "material/mica/darker/(solid)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-material-mica-darker-solid" + }, + "materialMicaDarkerColorBlend": { + "no": 456, + "name": "material/mica/darker/(colorBlend)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-material-mica-darker-color-blend" + }, + "materialMicaDarkerLumBlend": { + "no": 457, + "name": "material/mica/darker/(lumBlend)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-material-mica-darker-lum-blend" + }, + "materialMicaThinSolid": { + "no": 458, + "name": "material/mica/thin/(solid)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-material-mica-thin-solid" + }, + "materialMicaThinColorBlend": { + "no": 459, + "name": "material/mica/thin/(colorBlend)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-material-mica-thin-color-blend" + }, + "materialMicaThinLumBlend": { + "no": 460, + "name": "material/mica/thin/(lumBlend)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-material-mica-thin-lum-blend" + }, + "ctrlTooltipShadowKeyX": { + "no": 461, + "name": "CTRL/tooltip/shadow/(key)/(x)", + "fst_reference": "CTRL/fab/shadow/rest/(key)/(x)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Tooltip"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-tooltip-shadow-key-x" + }, + "ctrlTooltipShadowKeyY": { + "no": 462, + "name": "CTRL/tooltip/shadow/(key)/(y)", + "fst_reference": "CTRL/fab/shadow/rest/(key)/(y)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Tooltip"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-tooltip-shadow-key-y" + }, + "ctrlTooltipShadowKeyBlur": { + "no": 463, + "name": "CTRL/tooltip/shadow/(key)/(blur)", + "fst_reference": "CTRL/fab/shadow/rest/(key)/(blur)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Tooltip"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-tooltip-shadow-key-blur" + }, + "ctrlTooltipShadowKeyColor": { + "no": 464, + "name": "CTRL/tooltip/shadow/(key)/(color)", + "fst_reference": "CTRL/fab/shadow/rest/(key)/(color)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Tooltip"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-tooltip-shadow-key-color" + }, + "ctrlTooltipShadowAmbientX": { + "no": 465, + "name": "CTRL/tooltip/shadow/(ambient)/(x)", + "fst_reference": "CTRL/fab/shadow/rest/(ambient)/(x)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Tooltip"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-tooltip-shadow-ambient-x" + }, + "ctrlTooltipShadowAmbientY": { + "no": 466, + "name": "CTRL/tooltip/shadow/(ambient)/(y)", + "fst_reference": "CTRL/fab/shadow/rest/(ambient)/(y)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Tooltip"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-tooltip-shadow-ambient-y" + }, + "ctrlTooltipShadowAmbientBlur": { + "no": 467, + "name": "CTRL/tooltip/shadow/(ambient)/(blur)", + "fst_reference": "CTRL/fab/shadow/rest/(ambient)/(blur)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Tooltip"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-tooltip-shadow-ambient-blur" + }, + "ctrlTooltipShadowAmbientColor": { + "no": 468, + "name": "CTRL/tooltip/shadow/(ambient)/(color)", + "fst_reference": "CTRL/fab/shadow/rest/(ambient)/(color)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Tooltip"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-tooltip-shadow-ambient-color" + }, + "iconThemeCtrlDefaultRest": { + "no": 469, + "name": "iconTheme/ctrl/default/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "FAB", + "Split button", + "Button", + " Checkbox", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Text input box", + "Search box", + "Editable dropdown", + "Editable spin button", + "Inline link", + "Page link", + "Lite Filter Button", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icon-theme-ctrl-default-rest" + }, + "iconThemeCtrlDefaultHover": { + "no": 470, + "name": "iconTheme/ctrl/default/hover", + "fst_reference": "iconTheme/ctrl/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icon-theme-ctrl-default-hover" + }, + "iconThemeCtrlDefaultPressed": { + "no": 471, + "name": "iconTheme/ctrl/default/pressed", + "fst_reference": "iconTheme/ctrl/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Inline link", "Page link"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icon-theme-ctrl-default-pressed" + }, + "iconThemeCtrlDefaultSelected": { + "no": 472, + "name": "iconTheme/ctrl/default/selected", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Split button", "Button", "Lite filter"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icon-theme-ctrl-default-selected" + }, + "iconThemeCtrlSubtleRest": { + "no": 473, + "name": "iconTheme/ctrl/subtle/rest", + "fst_reference": "iconTheme/ctrl/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icon-theme-ctrl-subtle-rest" + }, + "iconThemeCtrlSubtleHover": { + "no": 474, + "name": "iconTheme/ctrl/subtle/hover", + "fst_reference": "iconTheme/ctrl/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icon-theme-ctrl-subtle-hover" + }, + "iconThemeCtrlSubtlePressed": { + "no": 475, + "name": "iconTheme/ctrl/subtle/pressed", + "fst_reference": "iconTheme/ctrl/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icon-theme-ctrl-subtle-pressed" + }, + "iconThemeCtrlSubtleSelected": { + "no": 476, + "name": "iconTheme/ctrl/subtle/selected", + "fst_reference": "iconTheme/ctrl/default/selected", + "optional": true, + "nullable": false, + "description": "", + "components": ["Split button"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icon-theme-ctrl-subtle-selected" + }, + "iconThemeCtrlChevronDefault": { + "no": 477, + "name": "iconTheme/ctrl/chevron/default", + "fst_reference": "iconTheme/ctrl/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Button", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Editable dropdown", + "Editable spin button", + "Lite Filter Button", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icon-theme-ctrl-chevron-default" + }, + "iconThemeCtrlChevronSelected": { + "no": 478, + "name": "iconTheme/ctrl/chevron/selected", + "fst_reference": "iconTheme/ctrl/default/selected", + "optional": true, + "nullable": false, + "description": "", + "components": ["Split button", "Lite filter"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icon-theme-ctrl-chevron-selected" + }, + "ctrlAvatarSize": { + "no": 479, + "name": "CTRL/avatar/size", + "fst_reference": "size/ctrl/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Avatar"], + "contrast": "", + "fallback": "Size/Avatar/Size", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-size" + }, + "ctrlAvatarCornerItem": { + "no": 480, + "name": "CTRL/avatar/corner/item", + "fst_reference": "corner/circular", + "optional": true, + "nullable": false, + "description": "", + "components": ["Avatar"], + "contrast": "", + "fallback": "corner/circular", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-corner-item" + }, + "ctrlAvatarBackground": { + "no": 481, + "name": "CTRL/avatar/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Avatar"], + "contrast": "", + "fallback": "Neutral/Background/6/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-background" + }, + "ctrlAvatarForeground": { + "no": 482, + "name": "CTRL/avatar/foreground", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Avatar"], + "contrast": "", + "fallback": "Neutral/Foreground/3/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-foreground" + }, + "ctrlAvatarIconSize": { + "no": 483, + "name": "CTRL/avatar/icon/size", + "fst_reference": "size/ctrl/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-icon-size" + }, + "ctrlAvatarPresenceBadgeSize": { + "no": 484, + "name": "CTRL/avatar/presenceBadge/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Presence badge"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-presence-badge-size" + }, + "ctrlAvatarActiveRingSize": { + "no": 485, + "name": "CTRL/avatar/activeRing/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-active-ring-size" + }, + "ctrlAvatarPresenceBadgePaddingBottomRightOffset": { + "no": 486, + "name": "CTRL/avatar/presenceBadge/padding/bottomRightOffset", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-presence-badge-padding-bottom-right-offset" + }, + "ctrlAvatarCornerGroup": { + "no": 487, + "name": "CTRL/avatar/corner/group", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Avatar"], + "contrast": "", + "fallback": "Size/Avatar/Corner/Group", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-corner-group" + }, + "ctrlAvatarActiveRingStrokeWidth": { + "no": 488, + "name": "CTRL/avatar/activeRing/strokeWidth", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-active-ring-stroke-width" + }, + "ctrlAvatarPresenceBadgeStrokeWidth": { + "no": 489, + "name": "CTRL/avatar/presenceBadge/strokeWidth", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Presence badge"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-presence-badge-stroke-width" + }, + "ctrlAvatarTextFontSize": { + "no": 490, + "name": "CTRL/avatar/text/fontSize", + "fst_reference": "text/global/body3/fontSize", + "optional": true, + "nullable": false, + "description": "", + "components": ["Avatar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-text-font-size" + }, + "ctrlAvatarTextLineHeight": { + "no": 491, + "name": "CTRL/avatar/text/lineHeight", + "fst_reference": "text/global/body3/lineHeight", + "optional": true, + "nullable": false, + "description": "", + "components": ["Avatar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-text-line-height" + }, + "ctrlAvatarTextPaddingTopOffset": { + "no": 492, + "name": "CTRL/avatar/text/padding/topOffset", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-text-padding-top-offset" + }, + "ctrlAvatarActiveRingStroke": { + "no": 493, + "name": "CTRL/avatar/activeRing/stroke", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Color/Avatar/Activering", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-active-ring-stroke" + }, + "ctrlAvatarShowCutout": { + "no": 494, + "name": "CTRL/avatar/showCutout", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-show-cutout" + }, + "ctrlBadgeTextPaddingTop": { + "no": 495, + "name": "CTRL/badge/text/padding/top", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-text-padding-top" + }, + "ctrlBadgeTextPaddingBottom": { + "no": 496, + "name": "CTRL/badge/text/padding/bottom", + "fst_reference": "CTRL/badge/text/padding/top", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-text-padding-bottom" + }, + "ctrlBadgeSmTextPaddingTop": { + "no": 497, + "name": "CTRL/badge/sm/text/padding/top", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-sm-text-padding-top" + }, + "ctrlBadgeSmTextPaddingBottom": { + "no": 498, + "name": "CTRL/badge/sm/text/padding/bottom", + "fst_reference": "CTRL/badge/sm/text/padding/top", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-sm-text-padding-bottom" + }, + "ctrlBadgeLgTextPaddingTop": { + "no": 499, + "name": "CTRL/badge/lg/text/padding/top", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-lg-text-padding-top" + }, + "ctrlBadgeLgTextPaddingBottom": { + "no": 500, + "name": "CTRL/badge/lg/text/padding/bottom", + "fst_reference": "CTRL/badge/lg/text/padding/top", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-lg-text-padding-bottom" + }, + "ctrlBadgeIconTheme": { + "no": 501, + "name": "CTRL/badge/icon/theme", + "fst_reference": "iconTheme/ctrl/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-icon-theme" + }, + "ctrlBadgeBeaconSize": { + "no": 502, + "name": "CTRL/badge/beacon/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Badge"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-beacon-size" + }, + "ctrlBadgeSize": { + "no": 503, + "name": "CTRL/badge/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-size" + }, + "ctrlBadgeCorner": { + "no": 504, + "name": "CTRL/badge/corner", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-corner" + }, + "ctrlBadgeGap": { + "no": 505, + "name": "CTRL/badge/gap", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-gap" + }, + "ctrlBadgeIconSizeFigmaonly": { + "no": 506, + "name": "CTRL/badge/icon/size(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-icon-size-figmaonly" + }, + "ctrlBadgeIconSize": { + "no": 507, + "name": "CTRL/badge/icon/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-icon-size" + }, + "ctrlBadgePadding": { + "no": 508, + "name": "CTRL/badge/padding", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-padding" + }, + "ctrlBadgeSmSize": { + "no": 509, + "name": "CTRL/badge/sm/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-sm-size" + }, + "ctrlBadgeSmCorner": { + "no": 510, + "name": "CTRL/badge/sm/corner", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-sm-corner" + }, + "ctrlBadgeSmIconSizeFigmaonly": { + "no": 511, + "name": "CTRL/badge/sm/icon/size(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-sm-icon-size-figmaonly" + }, + "ctrlBadgeSmIconSize": { + "no": 512, + "name": "CTRL/badge/sm/icon/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-sm-icon-size" + }, + "ctrlBadgeSmPadding": { + "no": 513, + "name": "CTRL/badge/sm/padding", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-sm-padding" + }, + "ctrlBadgeLgSize": { + "no": 514, + "name": "CTRL/badge/lg/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-lg-size" + }, + "ctrlBadgeLgIconSizeFigmaonly": { + "no": 515, + "name": "CTRL/badge/lg/icon/size(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-lg-icon-size-figmaonly" + }, + "ctrlBadgeLgIconSize": { + "no": 516, + "name": "CTRL/badge/lg/icon/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-lg-icon-size" + }, + "ctrlBadgeLgCorner": { + "no": 517, + "name": "CTRL/badge/lg/corner", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-lg-corner" + }, + "ctrlBadgeLgPadding": { + "no": 518, + "name": "CTRL/badge/lg/padding", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-lg-padding" + }, + "ctrlChoicePaddingHorizontal": { + "no": 519, + "name": "CTRL/choice/padding/horizontal", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [" Radio", " Checkbox"], + "contrast": "", + "fallback": "Horizontal/S", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-padding-horizontal" + }, + "ctrlChoicePaddingVertical": { + "no": 520, + "name": "CTRL/choice/padding/vertical", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [" Radio", " Checkbox"], + "contrast": "", + "fallback": "Vertical/None", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-padding-vertical" + }, + "ctrlChoiceBaseSize": { + "no": 521, + "name": "CTRL/choice/base/size", + "fst_reference": "size/ctrl/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [" Radio", " Checkbox"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-base-size" + }, + "ctrlChoiceIconTheme": { + "no": 522, + "name": "CTRL/choice/icon/theme", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [" Checkbox"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-icon-theme" + }, + "ctrlChoiceBaseBackgroundRest": { + "no": 523, + "name": "CTRL/choice/base/background/rest", + "fst_reference": "background/ctrl/outline/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-base-background-rest" + }, + "ctrlChoiceBaseBackgroundHover": { + "no": 524, + "name": "CTRL/choice/base/background/hover", + "fst_reference": "background/ctrl/outline/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Hover", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-base-background-hover" + }, + "ctrlChoiceBaseBackgroundPressed": { + "no": 525, + "name": "CTRL/choice/base/background/pressed", + "fst_reference": "background/ctrl/outline/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-base-background-pressed" + }, + "ctrlChoiceBaseBackgroundDisabled": { + "no": 526, + "name": "CTRL/choice/base/background/disabled", + "fst_reference": "background/ctrl/outline/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-base-background-disabled" + }, + "ctrlChoiceBaseStrokeRest": { + "no": 527, + "name": "CTRL/choice/base/stroke/rest", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-base-stroke-rest" + }, + "ctrlChoiceBaseStrokeHover": { + "no": 528, + "name": "CTRL/choice/base/stroke/hover", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Hover", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-base-stroke-hover" + }, + "ctrlChoiceBaseStrokePressed": { + "no": 529, + "name": "CTRL/choice/base/stroke/pressed", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-base-stroke-pressed" + }, + "ctrlChoiceBaseStrokeDisabled": { + "no": 530, + "name": "CTRL/choice/base/stroke/disabled", + "fst_reference": "foreground/ctrl/neutral/secondary/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-base-stroke-disabled" + }, + "ctrlChoiceCheckboxIconSize": { + "no": 531, + "name": "CTRL/choice/checkbox/icon/size", + "fst_reference": "size/ctrl/iconSecondary", + "optional": true, + "nullable": false, + "description": "", + "components": [" Checkbox"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-checkbox-icon-size" + }, + "ctrlChoiceCheckboxCorner": { + "no": 532, + "name": "CTRL/choice/checkbox/corner", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [" Checkbox"], + "contrast": "", + "fallback": "Small", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-checkbox-corner" + }, + "ctrlChoiceCheckboxIndeterminateCorner": { + "no": 533, + "name": "CTRL/choice/checkbox/indeterminate/corner", + "fst_reference": "corner/circular", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-checkbox-indeterminate-corner" + }, + "ctrlChoiceCheckboxIndeterminateWidth": { + "no": 534, + "name": "CTRL/choice/checkbox/indeterminate/width", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-checkbox-indeterminate-width" + }, + "ctrlChoiceCheckboxIndeterminateHeight": { + "no": 535, + "name": "CTRL/choice/checkbox/indeterminate/height", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-checkbox-indeterminate-height" + }, + "ctrlChoiceRadioCorner": { + "no": 536, + "name": "CTRL/choice/radio/corner", + "fst_reference": "corner/circular", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "corner/circular", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-radio-corner" + }, + "ctrlChoiceSwitchCorner": { + "no": 537, + "name": "CTRL/choice/switch/corner", + "fst_reference": "corner/circular", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "corner/circular", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-corner" + }, + "ctrlChoiceSwitchHeight": { + "no": 538, + "name": "CTRL/choice/switch/height", + "fst_reference": "size/ctrl/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [" Switch"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-height" + }, + "ctrlChoiceSwitchWidth": { + "no": 539, + "name": "CTRL/choice/switch/width", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [" Switch"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-width" + }, + "ctrlChoiceSwitchPaddingRest": { + "no": 540, + "name": "CTRL/choice/switch/padding/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [" Switch"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-padding-rest" + }, + "ctrlChoiceSwitchPaddingHover": { + "no": 541, + "name": "CTRL/choice/switch/padding/hover", + "fst_reference": "CTRL/choice/switch/padding/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-padding-hover" + }, + "ctrlChoiceSwitchPaddingPressed": { + "no": 542, + "name": "CTRL/choice/switch/padding/pressed", + "fst_reference": "CTRL/choice/switch/padding/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-padding-pressed" + }, + "ctrlChoiceSwitchThumbWidthRest": { + "no": 543, + "name": "CTRL/choice/switch/thumb/width/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [" Switch"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-thumb-width-rest" + }, + "ctrlChoiceSwitchThumbWidthHover": { + "no": 544, + "name": "CTRL/choice/switch/thumb/width/hover", + "fst_reference": "CTRL/choice/switch/thumb/width/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-thumb-width-hover" + }, + "ctrlChoiceSwitchThumbWidthPressed": { + "no": 545, + "name": "CTRL/choice/switch/thumb/width/pressed", + "fst_reference": "CTRL/choice/switch/thumb/width/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-thumb-width-pressed" + }, + "ctrlChoiceSwitchThumbShadowKeyX": { + "no": 546, + "name": "CTRL/choice/switch/thumb/shadow/(key)/(x)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/number", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-key-x" + }, + "ctrlChoiceSwitchThumbShadowKeyY": { + "no": 547, + "name": "CTRL/choice/switch/thumb/shadow/(key)/(y)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/number", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-key-y" + }, + "ctrlChoiceSwitchThumbShadowKeyBlur": { + "no": 548, + "name": "CTRL/choice/switch/thumb/shadow/(key)/(blur)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/number", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-key-blur" + }, + "ctrlChoiceSwitchThumbShadowKeyColor": { + "no": 549, + "name": "CTRL/choice/switch/thumb/shadow/(key)/(color)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/color", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-key-color" + }, + "ctrlChoiceSwitchThumbShadowAmbientX": { + "no": 550, + "name": "CTRL/choice/switch/thumb/shadow/(ambient)/(x)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/number", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-ambient-x" + }, + "ctrlChoiceSwitchThumbShadowAmbientY": { + "no": 551, + "name": "CTRL/choice/switch/thumb/shadow/(ambient)/(y)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/number", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-ambient-y" + }, + "ctrlChoiceSwitchThumbShadowAmbientBlur": { + "no": 552, + "name": "CTRL/choice/switch/thumb/shadow/(ambient)/(blur)", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/number", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-ambient-blur" + }, + "ctrlChoiceSwitchThumbShadowAmbientColor": { + "no": 553, + "name": "CTRL/choice/switch/thumb/shadow/(ambient)/(color)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/color", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-ambient-color" + }, + "ctrlChoiceRadioDotSizeRest": { + "no": 554, + "name": "CTRL/choice/radio/dot/size/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [" Radio"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-radio-dot-size-rest" + }, + "ctrlChoiceRadioDotSizeHover": { + "no": 555, + "name": "CTRL/choice/radio/dot/size/hover", + "fst_reference": "CTRL/choice/radio/dot/size/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-radio-dot-size-hover" + }, + "ctrlChoiceRadioDotSizePressed": { + "no": 556, + "name": "CTRL/choice/radio/dot/size/pressed", + "fst_reference": "CTRL/choice/radio/dot/size/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-radio-dot-size-pressed" + }, + "ctrlChoiceSmBaseSize": { + "no": 557, + "name": "CTRL/choice/sm/base/size", + "fst_reference": "size/ctrl-sm/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-sm-base-size" + }, + "ctrlChoiceSmCheckboxIconSize": { + "no": 558, + "name": "CTRL/choice/sm/checkbox/icon/size", + "fst_reference": "size/ctrl/iconSecondary", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-sm-checkbox-icon-size" + }, + "ctrlChoiceSmCheckboxCorner": { + "no": 559, + "name": "CTRL/choice/sm/checkbox/corner", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Small", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-sm-checkbox-corner" + }, + "ctrlChoiceSmCheckboxIconSizeFigmaonly": { + "no": 560, + "name": "CTRL/choice/sm/checkbox/icon/size(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-sm-checkbox-icon-size-figmaonly" + }, + "ctrlChoiceSmRadioDotSize": { + "no": 561, + "name": "CTRL/choice/sm/radio/dot/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-sm-radio-dot-size" + }, + "ctrlChoiceSmSwitchWidth": { + "no": 562, + "name": "CTRL/choice/sm/switch/width", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-sm-switch-width" + }, + "ctrlChoiceSmSwitchHeight": { + "no": 563, + "name": "CTRL/choice/sm/switch/height", + "fst_reference": "size/ctrl-sm/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-sm-switch-height" + }, + "ctrlChoiceSmSwitchThumbWidthRest": { + "no": 564, + "name": "CTRL/choice/sm/switch/thumb/width/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-sm-switch-thumb-width-rest" + }, + "ctrlChoiceSmSwitchThumbWidthHover": { + "no": 565, + "name": "CTRL/choice/sm/switch/thumb/width/hover", + "fst_reference": "CTRL/choice/sm/switch/thumb/width/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-sm-switch-thumb-width-hover" + }, + "ctrlChoiceSmSwitchThumbWidthPressed": { + "no": 566, + "name": "CTRL/choice/sm/switch/thumb/width/pressed", + "fst_reference": "CTRL/choice/sm/switch/thumb/width/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-sm-switch-thumb-width-pressed" + }, + "ctrlChoiceLgBaseSize": { + "no": 567, + "name": "CTRL/choice/lg/base/size", + "fst_reference": "size/ctrl-lg/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-lg-base-size" + }, + "ctrlChoiceLgCheckboxCorner": { + "no": 568, + "name": "CTRL/choice/lg/checkbox/corner", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Small", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-lg-checkbox-corner" + }, + "ctrlChoiceLgCheckboxIconSize": { + "no": 569, + "name": "CTRL/choice/lg/checkbox/icon/size", + "fst_reference": "size/ctrl/iconSecondary", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-lg-checkbox-icon-size" + }, + "ctrlChoiceLgCheckboxIconSizeFigmaonly": { + "no": 570, + "name": "CTRL/choice/lg/checkbox/icon/size(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-lg-checkbox-icon-size-figmaonly" + }, + "ctrlChoiceLgRadioDotSizeRest": { + "no": 571, + "name": "CTRL/choice/lg/radio/dot/size/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-lg-radio-dot-size-rest" + }, + "ctrlChoiceLgRadioDotSizeHover": { + "no": 572, + "name": "CTRL/choice/lg/radio/dot/size/hover", + "fst_reference": "CTRL/choice/lg/radio/dot/size/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-lg-radio-dot-size-hover" + }, + "ctrlChoiceLgRadioDotSizePressed": { + "no": 573, + "name": "CTRL/choice/lg/radio/dot/size/pressed", + "fst_reference": "CTRL/choice/lg/radio/dot/size/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-lg-radio-dot-size-pressed" + }, + "ctrlChoiceLgSwitchWidth": { + "no": 574, + "name": "CTRL/choice/lg/switch/width", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-lg-switch-width" + }, + "ctrlChoiceLgSwitchHeight": { + "no": 575, + "name": "CTRL/choice/lg/switch/height", + "fst_reference": "size/ctrl-lg/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-lg-switch-height" + }, + "ctrlChoiceLgSwitchThumbWidthRest": { + "no": 576, + "name": "CTRL/choice/lg/switch/thumb/width/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-lg-switch-thumb-width-rest" + }, + "ctrlChoiceLgSwitchThumbWidthHover": { + "no": 577, + "name": "CTRL/choice/lg/switch/thumb/width/hover", + "fst_reference": "CTRL/choice/lg/switch/thumb/width/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-lg-switch-thumb-width-hover" + }, + "ctrlChoiceLgSwitchThumbWidthPressed": { + "no": 578, + "name": "CTRL/choice/lg/switch/thumb/width/pressed", + "fst_reference": "CTRL/choice/lg/switch/thumb/width/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-lg-switch-thumb-width-pressed" + }, + "ctrlDialogBackground": { + "no": 579, + "name": "CTRL/dialog/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-background" + }, + "ctrlDialogStroke": { + "no": 580, + "name": "CTRL/dialog/stroke", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "Neutral/Stroke/2/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-stroke" + }, + "ctrlDialogBaseCorner": { + "no": 581, + "name": "CTRL/dialog/base/corner", + "fst_reference": "corner/card/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "X-Large", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-base-corner" + }, + "ctrlDialogBaseShadowKeyX": { + "no": 582, + "name": "CTRL/dialog/base/shadow/(key)/(X)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-base-shadow-key-x" + }, + "ctrlDialogBaseShadowKeyY": { + "no": 583, + "name": "CTRL/dialog/base/shadow/(key)/(Y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-base-shadow-key-y" + }, + "ctrlDialogBaseShadowKeyBlur": { + "no": 584, + "name": "CTRL/dialog/base/shadow/(key)/(Blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-base-shadow-key-blur" + }, + "ctrlDialogBaseShadowKeyColor": { + "no": 585, + "name": "CTRL/dialog/base/shadow/(key)/(Color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-base-shadow-key-color" + }, + "ctrlDialogBaseShadowAmbientX": { + "no": 586, + "name": "CTRL/dialog/base/shadow/(ambient)/(X)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-base-shadow-ambient-x" + }, + "ctrlDialogBaseShadowAmbientY": { + "no": 587, + "name": "CTRL/dialog/base/shadow/(ambient)/(Y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-base-shadow-ambient-y" + }, + "ctrlDialogBaseShadowAmbientBlur": { + "no": 588, + "name": "CTRL/dialog/base/shadow/(ambient)/(Blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-base-shadow-ambient-blur" + }, + "ctrlDialogBaseShadowAmbientColor": { + "no": 589, + "name": "CTRL/dialog/base/shadow/(ambient)/(Color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-base-shadow-ambient-color" + }, + "ctrlDialogLayerBackground": { + "no": 590, + "name": "CTRL/dialog/layer/background", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-layer-background" + }, + "ctrlDialogLayerPaddingBottom": { + "no": 591, + "name": "CTRL/dialog/layer/padding-bottom", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-dialog-layer-padding-bottom" + }, + "ctrlDividerFixedLineLength": { + "no": 592, + "name": "CTRL/divider/fixedLine/length", + "fst_reference": "padding/content/align/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-divider-fixed-line-length" + }, + "ctrlDragBackgroundSolid": { + "no": 593, + "name": "CTRL/drag/background/(solid)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-drag-background-solid" + }, + "ctrlDragBackgroundColorBlend": { + "no": 594, + "name": "CTRL/drag/background/(colorBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-drag-background-color-blend" + }, + "ctrlDragBackgroundLumBlend": { + "no": 595, + "name": "CTRL/drag/background/(lumBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-drag-background-lum-blend" + }, + "ctrlFabForegroundRestNew": { + "no": 596, + "name": "CTRL/fab/foreground/rest(new)", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-foreground-rest-new" + }, + "ctrlFabForegroundDisabledNew": { + "no": 597, + "name": "CTRL/fab/foreground/disabled(new)", + "fst_reference": "foreground/ctrl/neutral/primary/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-foreground-disabled-new" + }, + "ctrlFabBackgroundRest": { + "no": 598, + "name": "CTRL/fab/background/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-background-rest" + }, + "ctrlFocusPositionFigmaonly": { + "no": 599, + "name": "CTRL/focus/position(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Editable dropdown", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-focus-position-figmaonly" + }, + "ctrlFocusInnerStrokeWidth": { + "no": 600, + "name": "CTRL/focus/inner/strokeWidth", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Card/Primary", + "Card/Secondary", + "Card/Tint (needed?)", + "Card/Outline", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Editable dropdown", + "Inline link", + "Page link", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-focus-inner-stroke-width" + }, + "ctrlFocusInnerStroke": { + "no": 601, + "name": "CTRL/focus/inner/stroke", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Card/Primary", + "Card/Secondary", + "Card/Tint (needed?)", + "Card/Outline", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Editable dropdown", + "Inline link", + "Page link", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "Neutral/Stroke/Focus/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-focus-inner-stroke" + }, + "ctrlFocusOuterStrokeWidth": { + "no": 602, + "name": "CTRL/focus/outer/strokeWidth", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Card/Primary", + "Card/Secondary", + "Card/Tint (needed?)", + "Card/Outline", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Editable dropdown", + "Inline link", + "Page link", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "Thick", + "exceptions": [], + "cssName": "--smtc-ctrl-focus-outer-stroke-width" + }, + "ctrlFocusOuterStroke": { + "no": 603, + "name": "CTRL/focus/outer/stroke", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Card/Primary", + "Card/Secondary", + "Card/Tint (needed?)", + "Card/Outline", + "Dialog", + "Footer", + "Consent Dialog/footer", + "Inline drawer", + "Overlay drawer", + "Editable dropdown", + "Inline link", + "Page link", + "Lite filter", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "Neutral/Stroke/Focus/2/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-focus-outer-stroke" + }, + "ctrlFabBackgroundHover": { + "no": 604, + "name": "CTRL/fab/background/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Hover", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-background-hover" + }, + "ctrlFabBackgroundPressed": { + "no": 605, + "name": "CTRL/fab/background/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-background-pressed" + }, + "ctrlFabBackgroundDisabled": { + "no": 606, + "name": "CTRL/fab/background/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-background-disabled" + }, + "ctrlFabCornerRest": { + "no": 607, + "name": "CTRL/fab/corner/rest", + "fst_reference": "corner/circular", + "optional": true, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "Circular", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-corner-rest" + }, + "ctrlFabShadowRestKeyX": { + "no": 608, + "name": "CTRL/fab/shadow/rest/(key)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-rest-key-x" + }, + "ctrlFabShadowRestKeyY": { + "no": 609, + "name": "CTRL/fab/shadow/rest/(key)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-rest-key-y" + }, + "ctrlFabShadowRestKeyBlur": { + "no": 610, + "name": "CTRL/fab/shadow/rest/(key)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-rest-key-blur" + }, + "ctrlFabShadowRestKeyColor": { + "no": 611, + "name": "CTRL/fab/shadow/rest/(key)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-rest-key-color" + }, + "ctrlFabShadowRestAmbientX": { + "no": 612, + "name": "CTRL/fab/shadow/rest/(ambient)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-rest-ambient-x" + }, + "ctrlFabShadowRestAmbientY": { + "no": 613, + "name": "CTRL/fab/shadow/rest/(ambient)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-rest-ambient-y" + }, + "ctrlFabShadowRestAmbientBlur": { + "no": 614, + "name": "CTRL/fab/shadow/rest/(ambient)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-rest-ambient-blur" + }, + "ctrlFabShadowRestAmbientColor": { + "no": 615, + "name": "CTRL/fab/shadow/rest/(ambient)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-rest-ambient-color" + }, + "ctrlFabShadowHoverKeyX": { + "no": 616, + "name": "CTRL/fab/shadow/hover/(key)/(x)", + "fst_reference": "shadow/flyout/(key)/(x)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-hover-key-x" + }, + "ctrlFabShadowHoverKeyY": { + "no": 617, + "name": "CTRL/fab/shadow/hover/(key)/(y)", + "fst_reference": "shadow/flyout/(key)/(y)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-hover-key-y" + }, + "ctrlFabShadowHoverKeyBlur": { + "no": 618, + "name": "CTRL/fab/shadow/hover/(key)/(blur)", + "fst_reference": "shadow/flyout/(key)/(blur)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-hover-key-blur" + }, + "ctrlFabShadowHoverKeyColor": { + "no": 619, + "name": "CTRL/fab/shadow/hover/(key)/(color)", + "fst_reference": "shadow/flyout/(key)/(color)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-hover-key-color" + }, + "ctrlFabShadowPressedKeyX": { + "no": 620, + "name": "CTRL/fab/shadow/pressed/(key)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-pressed-key-x" + }, + "ctrlFabShadowPressedKeyY": { + "no": 621, + "name": "CTRL/fab/shadow/pressed/(key)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-pressed-key-y" + }, + "ctrlFabShadowPressedKeyBlur": { + "no": 622, + "name": "CTRL/fab/shadow/pressed/(key)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-pressed-key-blur" + }, + "ctrlFabShadowPressedKeyColor": { + "no": 623, + "name": "CTRL/fab/shadow/pressed/(key)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-pressed-key-color" + }, + "ctrlFabShadowDisabledKeyX": { + "no": 624, + "name": "CTRL/fab/shadow/disabled/(key)/(x)", + "fst_reference": "CTRL/fab/shadow/pressed/(key)/(x)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-disabled-key-x" + }, + "ctrlFabShadowDisabledKeyY": { + "no": 625, + "name": "CTRL/fab/shadow/disabled/(key)/(y)", + "fst_reference": "CTRL/fab/shadow/pressed/(key)/(y)", + "optional": true, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-disabled-key-y" + }, + "ctrlFabShadowDisabledKeyBlur": { + "no": 626, + "name": "CTRL/fab/shadow/disabled/(key)/(blur)", + "fst_reference": "CTRL/fab/shadow/pressed/(key)/(blur)", + "optional": true, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-disabled-key-blur" + }, + "ctrlFabShadowDisabledKeyColor": { + "no": 627, + "name": "CTRL/fab/shadow/disabled/(key)/(color)", + "fst_reference": "CTRL/fab/shadow/pressed/(key)/(color)", + "optional": true, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-shadow-disabled-key-color" + }, + "ctrlFabCornerHover": { + "no": 628, + "name": "CTRL/fab/corner/hover", + "fst_reference": "corner/circular", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Circular", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-corner-hover" + }, + "ctrlFabCornerPressed": { + "no": 629, + "name": "CTRL/fab/corner/pressed", + "fst_reference": "corner/circular", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Circular", + "exceptions": [], + "cssName": "--smtc-ctrl-fab-corner-pressed" + }, + "ctrlInputBackgroundRest": { + "no": 630, + "name": "CTRL/input/background/rest", + "fst_reference": "background/ctrl/neutral/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-background-rest" + }, + "ctrlInputBackgroundHover": { + "no": 631, + "name": "CTRL/input/background/hover", + "fst_reference": "background/ctrl/neutral/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-background-hover" + }, + "ctrlInputBackgroundPressed": { + "no": 632, + "name": "CTRL/input/background/pressed", + "fst_reference": "background/ctrl/neutral/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-background-pressed" + }, + "ctrlInputBackgroundDisabled": { + "no": 633, + "name": "CTRL/input/background/disabled", + "fst_reference": "background/ctrl/neutral/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area" + ], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-background-disabled" + }, + "ctrlInputBackgroundSelected": { + "no": 634, + "name": "CTRL/input/background/selected", + "fst_reference": "background/ctrl/neutral/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-background-selected" + }, + "ctrlInputBackgroundError": { + "no": 635, + "name": "CTRL/input/background/error", + "fst_reference": "background/ctrl/neutral/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-background-error" + }, + "ctrlInputStrokeRest": { + "no": 636, + "name": "CTRL/input/stroke/rest", + "fst_reference": "stroke/ctrl/onOutline/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-stroke-rest" + }, + "ctrlInputStrokeWidthRest": { + "no": 637, + "name": "CTRL/input/strokeWidth/rest", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-input-stroke-width-rest" + }, + "ctrlInputStrokeWidthHover": { + "no": 638, + "name": "CTRL/input/strokeWidth/hover", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-input-stroke-width-hover" + }, + "ctrlInputStrokeWidthPressed": { + "no": 639, + "name": "CTRL/input/strokeWidth/pressed", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-input-stroke-width-pressed" + }, + "ctrlInputStrokeWidthSelected": { + "no": 640, + "name": "CTRL/input/strokeWidth/selected", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-input-stroke-width-selected" + }, + "ctrlInputBottomLineStrokeWidthRest": { + "no": 641, + "name": "CTRL/input/bottomLine/strokeWidth/rest", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area" + ], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-input-bottom-line-stroke-width-rest" + }, + "ctrlInputTextSelectionBackground": { + "no": 642, + "name": "CTRL/input/textSelection/background", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/ctrl/activeBrand/rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-text-selection-background" + }, + "ctrlInputTextSelectionForeground": { + "no": 643, + "name": "CTRL/input/textSelection/foreground", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/4/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-text-selection-foreground" + }, + "ctrlInputBottomLineStrokeWidthHover": { + "no": 644, + "name": "CTRL/input/bottomLine/strokeWidth/hover", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-input-bottom-line-stroke-width-hover" + }, + "ctrlInputBottomLineStrokeWidthPressed": { + "no": 645, + "name": "CTRL/input/bottomLine/strokeWidth/pressed", + "fst_reference": "CTRL/input/bottomLine/strokeWidth/selected", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thick", + "exceptions": [], + "cssName": "--smtc-ctrl-input-bottom-line-stroke-width-pressed" + }, + "ctrlInputBottomLineStrokeWidthSelected": { + "no": 646, + "name": "CTRL/input/bottomLine/strokeWidth/selected", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thick", + "exceptions": [], + "cssName": "--smtc-ctrl-input-bottom-line-stroke-width-selected" + }, + "ctrlInputBottomLineStrokeRest": { + "no": 647, + "name": "CTRL/input/bottomLine/stroke/rest", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-bottom-line-stroke-rest" + }, + "ctrlInputBottomLineStrokeHover": { + "no": 648, + "name": "CTRL/input/bottomLine/stroke/hover", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Hover", + "exceptions": [], + "cssName": "--smtc-ctrl-input-bottom-line-stroke-hover" + }, + "ctrlInputBottomLineStrokePressed": { + "no": 649, + "name": "CTRL/input/bottomLine/stroke/pressed", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-input-bottom-line-stroke-pressed" + }, + "ctrlInputBottomLineStrokeDisabled": { + "no": 650, + "name": "CTRL/input/bottomLine/stroke/disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [ + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area" + ], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-bottom-line-stroke-disabled" + }, + "ctrlInputBottomLineStrokeSelected": { + "no": 651, + "name": "CTRL/input/bottomLine/stroke/selected", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-bottom-line-stroke-selected" + }, + "ctrlInputBottomLineStrokeError": { + "no": 652, + "name": "CTRL/input/bottomLine/stroke/error", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-bottom-line-stroke-error" + }, + "ctrlInputStrokeHover": { + "no": 653, + "name": "CTRL/input/stroke/hover", + "fst_reference": "stroke/ctrl/onOutline/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Hover", + "exceptions": [], + "cssName": "--smtc-ctrl-input-stroke-hover" + }, + "ctrlInputStrokePressed": { + "no": 654, + "name": "CTRL/input/stroke/pressed", + "fst_reference": "stroke/ctrl/onOutline/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-input-stroke-pressed" + }, + "ctrlInputStrokeDisabled": { + "no": 655, + "name": "CTRL/input/stroke/disabled", + "fst_reference": "stroke/ctrl/onOutline/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [ + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area" + ], + "contrast": "", + "fallback": "Neutral/Stroke/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-stroke-disabled" + }, + "ctrlInputStrokeSelected": { + "no": 656, + "name": "CTRL/input/stroke/selected", + "fst_reference": "stroke/ctrl/onOutline/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Selected", + "exceptions": [], + "cssName": "--smtc-ctrl-input-stroke-selected" + }, + "ctrlInputStrokeError": { + "no": 657, + "name": "CTRL/input/stroke/error", + "fst_reference": "STATUS/danger/stroke", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Danger/Stroke/2/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-input-stroke-error" + }, + "ctrlLinkForegroundNeutralRest": { + "no": 658, + "name": "CTRL/link/foreground/neutral/rest", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "foreground/ctrl/neutral/primary/rest", + "exceptions": [], + "cssName": "--smtc-ctrl-link-foreground-neutral-rest" + }, + "ctrlLinkInlineStrokeWidthRest": { + "no": 659, + "name": "CTRL/link/inline/strokeWidth/rest", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Inline link", "Page link"], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-link-inline-stroke-width-rest" + }, + "ctrlLinkInlineStrokeWidthHover": { + "no": 660, + "name": "CTRL/link/inline/strokeWidth/hover", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-link-inline-stroke-width-hover" + }, + "ctrlLinkInlineUnderlineDashed": { + "no": 661, + "name": "CTRL/link/inline/underline/dashed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Inline link"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-link-inline-underline-dashed" + }, + "ctrlLinkInlineUnderlineSolidFigmaonly": { + "no": 662, + "name": "CTRL/link/inline/underline/solid(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Inline link"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-link-inline-underline-solid-figmaonly" + }, + "ctrlLinkForegroundNeutralHover": { + "no": 663, + "name": "CTRL/link/foreground/neutral/hover", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "foreground/ctrl/neutral/primary/hover", + "exceptions": [], + "cssName": "--smtc-ctrl-link-foreground-neutral-hover" + }, + "ctrlLinkForegroundNeutralPressed": { + "no": 664, + "name": "CTRL/link/foreground/neutral/pressed", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Inline link", "Page link"], + "contrast": "", + "fallback": "foreground/ctrl/neutral/primary/pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-link-foreground-neutral-pressed" + }, + "ctrlLinkForegroundBrandRest": { + "no": 665, + "name": "CTRL/link/foreground/brand/rest", + "fst_reference": "foreground/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "foreground/ctrl/brand/rest", + "exceptions": [], + "cssName": "--smtc-ctrl-link-foreground-brand-rest" + }, + "ctrlLinkForegroundBrandHover": { + "no": 666, + "name": "CTRL/link/foreground/brand/hover", + "fst_reference": "foreground/ctrl/brand/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "foreground/ctrl/brand/hover", + "exceptions": [], + "cssName": "--smtc-ctrl-link-foreground-brand-hover" + }, + "ctrlLinkForegroundBrandPressed": { + "no": 667, + "name": "CTRL/link/foreground/brand/pressed", + "fst_reference": "foreground/ctrl/brand/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "foreground/ctrl/brand/pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-link-foreground-brand-pressed" + }, + "ctrlLinkOnPageStrokeWidthRest": { + "no": 668, + "name": "CTRL/link/onPage/strokeWidth/rest", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-link-on-page-stroke-width-rest" + }, + "ctrlLinkOnPageStrokeWidthHover": { + "no": 669, + "name": "CTRL/link/onPage/strokeWidth/hover", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-link-on-page-stroke-width-hover" + }, + "ctrlLinkOnPageUnderlineDashed": { + "no": 670, + "name": "CTRL/link/onPage/underline/dashed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Page link"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-link-on-page-underline-dashed" + }, + "ctrlLinkOnPageUnderlineSolidFigmaonly": { + "no": 671, + "name": "CTRL/link/onPage/underline/solid(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Page link"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-link-on-page-underline-solid-figmaonly" + }, + "ctrlLinkInlineShowUnderlineAtRest": { + "no": 672, + "name": "CTRL/link/inline/showUnderlineAtRest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-link-inline-show-underline-at-rest" + }, + "ctrlLinkOnPageShowUnderlineAtRest": { + "no": 673, + "name": "CTRL/link/onPage/showUnderlineAtRest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-link-on-page-show-underline-at-rest" + }, + "ctrlListPillWidth": { + "no": 674, + "name": "CTRL/list/pill/width", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thicker", + "exceptions": [], + "cssName": "--smtc-ctrl-list-pill-width" + }, + "ctrlListPillFullWidth": { + "no": 675, + "name": "CTRL/list/pill/fullWidth", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-pill-full-width" + }, + "ctrlListPillStretchPaddingDefault": { + "no": 676, + "name": "CTRL/list/pill/stretch/padding/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-pill-stretch-padding-default" + }, + "ctrlListPillStretchPaddingHint": { + "no": 677, + "name": "CTRL/list/pill/stretch/padding/hint", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-pill-stretch-padding-hint" + }, + "ctrlListPillLengthRest": { + "no": 678, + "name": "CTRL/list/pill/length/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-pill-length-rest" + }, + "ctrlListPillLengthHover": { + "no": 679, + "name": "CTRL/list/pill/length/hover", + "fst_reference": "CTRL/list/pill/length/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-pill-length-hover" + }, + "ctrlListPillLengthPressed": { + "no": 680, + "name": "CTRL/list/pill/length/pressed", + "fst_reference": "CTRL/list/pill/length/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-pill-length-pressed" + }, + "ctrlListPillLengthHint": { + "no": 681, + "name": "CTRL/list/pill/length/hint", + "fst_reference": "CTRL/list/pill/length/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-pill-length-hint" + }, + "ctrlListCornerRest": { + "no": 682, + "name": "CTRL/list/corner/rest", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-ctrl-list-corner-rest" + }, + "ctrlListCornerHover": { + "no": 683, + "name": "CTRL/list/corner/hover", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-ctrl-list-corner-hover" + }, + "ctrlListCornerPressed": { + "no": 684, + "name": "CTRL/list/corner/pressed", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-ctrl-list-corner-pressed" + }, + "ctrlListIndentLevel1": { + "no": 685, + "name": "CTRL/list/indent/level1", + "fst_reference": "padding/ctrl/horizontal-default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-indent-level1" + }, + "ctrlListIndentLevel2": { + "no": 686, + "name": "CTRL/list/indent/(level2)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-indent-level2" + }, + "ctrlListIndentLevel3": { + "no": 687, + "name": "CTRL/list/indent/(level3)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-indent-level3" + }, + "ctrlListBackgroundSelectedRest": { + "no": 688, + "name": "CTRL/list/background/selected-rest", + "fst_reference": "background/ctrl/subtle/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/ctrl/subtle/rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-background-selected-rest" + }, + "ctrlListForegroundSelectedRest": { + "no": 689, + "name": "CTRL/list/foreground/selected-rest", + "fst_reference": "background/ctrl/subtle/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/ctrl/subtle/rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-foreground-selected-rest" + }, + "ctrlListForegroundSelectedHover": { + "no": 690, + "name": "CTRL/list/foreground/️selected-hover", + "fst_reference": "background/ctrl/subtle/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/ctrl/subtle/hover", + "exceptions": [], + "cssName": "--smtc-ctrl-list-foreground-selected-hover" + }, + "ctrlListForegroundSelectedPressed": { + "no": 691, + "name": "CTRL/list/foreground/️selected-pressed", + "fst_reference": "background/ctrl/subtle/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/ctrl/subtle/pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-list-foreground-selected-pressed" + }, + "ctrlListForegroundSelectedDisabled": { + "no": 692, + "name": "CTRL/list/foreground/selected-disabled", + "fst_reference": "background/ctrl/subtle/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/ctrl/subtle/disabled", + "exceptions": [], + "cssName": "--smtc-ctrl-list-foreground-selected-disabled" + }, + "ctrlListBackgroundSelectedHover": { + "no": 693, + "name": "CTRL/list/background/️selected-hover", + "fst_reference": "background/ctrl/subtle/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/ctrl/subtle/hover", + "exceptions": [], + "cssName": "--smtc-ctrl-list-background-selected-hover" + }, + "ctrlListBackgroundSelectedPressed": { + "no": 694, + "name": "CTRL/list/background/selected-pressed", + "fst_reference": "background/ctrl/subtle/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/ctrl/subtle/pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-list-background-selected-pressed" + }, + "ctrlListBackgroundSelectedDisabled": { + "no": 695, + "name": "CTRL/list/background/selected-disabled", + "fst_reference": "background/ctrl/subtle/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/ctrl/subtle/disabled", + "exceptions": [], + "cssName": "--smtc-ctrl-list-background-selected-disabled" + }, + "ctrlListChoiceBackgroundRest": { + "no": 696, + "name": "CTRL/list/choice/background/rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-background-rest" + }, + "ctrlListChoiceStrokeRest": { + "no": 697, + "name": "CTRL/list/choice/stroke/rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-stroke-rest" + }, + "ctrlListChoiceStrokeDisabled": { + "no": 698, + "name": "CTRL/list/choice/stroke/disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-stroke-disabled" + }, + "ctrlListChoiceStrokeSelectedRest": { + "no": 699, + "name": "CTRL/list/choice/stroke/selected-rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-stroke-selected-rest" + }, + "ctrlListChoiceStrokeSelectedDisabled": { + "no": 700, + "name": "CTRL/list/choice/stroke/selected-disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-stroke-selected-disabled" + }, + "ctrlListChoiceForegroundHover": { + "no": 701, + "name": "CTRL/list/choice/foreground/hover", + "fst_reference": "foreground/ctrl/hint/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Hover", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-foreground-hover" + }, + "ctrlListChoiceForegroundSelectedRest": { + "no": 702, + "name": "CTRL/list/choice/foreground/selected-rest", + "fst_reference": "foreground/ctrl/neutral/primary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-foreground-selected-rest" + }, + "ctrlListChoiceForegroundSelectedDisabled": { + "no": 703, + "name": "CTRL/list/choice/foreground/selected-disabled", + "fst_reference": "foreground/ctrl/neutral/primary/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-foreground-selected-disabled" + }, + "ctrlListChoiceBackgroundDisabled": { + "no": 704, + "name": "CTRL/list/choice/background/disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-background-disabled" + }, + "ctrlListChoiceBackgroundSelectedRest": { + "no": 705, + "name": "CTRL/list/choice/background/selected-rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-background-selected-rest" + }, + "ctrlListChoiceBackgroundSelectedDisabled": { + "no": 706, + "name": "CTRL/list/choice/background/selected-disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-background-selected-disabled" + }, + "ctrlListChoiceCheckboxCorner": { + "no": 707, + "name": "CTRL/list/choice/checkbox/corner", + "fst_reference": "CTRL/choice/checkbox/corner", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-checkbox-corner" + }, + "ctrlListChoiceCheckboxIconSize": { + "no": 708, + "name": "CTRL/list/choice/checkbox/icon/size", + "fst_reference": "size/ctrl/iconSecondary", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-checkbox-icon-size" + }, + "ctrlListChoiceCheckboxIconSizeFigmaonly": { + "no": 709, + "name": "CTRL/list/choice/checkbox/icon/size(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-checkbox-icon-size-figmaonly" + }, + "ctrlListChoiceDotSize": { + "no": 710, + "name": "CTRL/list/choice/dot/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-dot-size" + }, + "ctrlListChoiceDotSizeFigmaonly": { + "no": 711, + "name": "CTRL/list/choice/dot/size(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-dot-size-figmaonly" + }, + "ctrlListSplitDividerPaddingInset": { + "no": 712, + "name": "CTRL/list/split/divider/padding/inset", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Split button"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-split-divider-padding-inset" + }, + "ctrlListSplitDividerStroke": { + "no": 713, + "name": "CTRL/list/split/divider/stroke", + "fst_reference": "stroke/ctrl/divider/onNeutral", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-split-divider-stroke" + }, + "ctrlListSmCornerRest": { + "no": 714, + "name": "CTRL/list/sm/corner/rest", + "fst_reference": "corner/ctrl-sm/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-ctrl-list-sm-corner-rest" + }, + "ctrlListSmCornerHover": { + "no": 715, + "name": "CTRL/list/sm/corner/hover", + "fst_reference": "corner/ctrl-sm/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-ctrl-list-sm-corner-hover" + }, + "ctrlListSmCornerPressed": { + "no": 716, + "name": "CTRL/list/sm/corner/pressed", + "fst_reference": "corner/ctrl-sm/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-ctrl-list-sm-corner-pressed" + }, + "ctrlListSmIndentLevel1": { + "no": 717, + "name": "CTRL/list/sm/indent/level1", + "fst_reference": "padding/ctrl-sm/horizontal-default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-sm-indent-level1" + }, + "ctrlListSmIndentLevel2": { + "no": 718, + "name": "CTRL/list/sm/indent/(level2)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-sm-indent-level2" + }, + "ctrlListSmIndentLevel3": { + "no": 719, + "name": "CTRL/list/sm/indent/(level3)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-sm-indent-level3" + }, + "ctrlListLgCornerRest": { + "no": 720, + "name": "CTRL/list/lg/corner/rest", + "fst_reference": "corner/ctrl-lg/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-ctrl-list-lg-corner-rest" + }, + "ctrlListLgCornerHover": { + "no": 721, + "name": "CTRL/list/lg/corner/hover", + "fst_reference": "corner/ctrl-lg/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-ctrl-list-lg-corner-hover" + }, + "ctrlListLgCornerPressed": { + "no": 722, + "name": "CTRL/list/lg/corner/pressed", + "fst_reference": "corner/ctrl-lg/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-ctrl-list-lg-corner-pressed" + }, + "ctrlListLgIndentLevel1": { + "no": 723, + "name": "CTRL/list/lg/indent/level1", + "fst_reference": "padding/ctrl-lg/horizontal-default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-lg-indent-level1" + }, + "ctrlListLgIndentLevel2": { + "no": 724, + "name": "CTRL/list/lg/indent/(level2)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-lg-indent-level2" + }, + "ctrlListLgIndentLevel3": { + "no": 725, + "name": "CTRL/list/lg/indent/(level3)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-lg-indent-level3" + }, + "ctrlLiteFilterBackgroundSelected": { + "no": 726, + "name": "CTRL/liteFilter/background/selected", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Lite filter"], + "contrast": "", + "fallback": "background/ctrl/brand/rest", + "exceptions": [], + "cssName": "--smtc-ctrl-lite-filter-background-selected" + }, + "ctrlLiteFilterStrokeSelected": { + "no": 727, + "name": "CTRL/liteFilter/stroke/selected", + "fst_reference": "stroke/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Lite filter"], + "contrast": "", + "fallback": "stroke/ctrl/onBrand/rest", + "exceptions": [], + "cssName": "--smtc-ctrl-lite-filter-stroke-selected" + }, + "ctrlLiteFilterForegroundSelected": { + "no": 728, + "name": "CTRL/liteFilter/foreground/selected", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Lite filter"], + "contrast": "", + "fallback": "foreground/ctrl/onBrand/rest", + "exceptions": [], + "cssName": "--smtc-ctrl-lite-filter-foreground-selected" + }, + "ctrlProgressBackgroundEmpty": { + "no": 729, + "name": "CTRL/progress/background/empty", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Spinner", "Progress Bar"], + "contrast": "", + "fallback": "Neutral/Background/6/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-progress-background-empty" + }, + "ctrlProgressBackgroundFilled": { + "no": 730, + "name": "CTRL/progress/background/filled", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Spinner"], + "contrast": "", + "fallback": "background/ctrl/activeBrand/rest", + "exceptions": [], + "cssName": "--smtc-ctrl-progress-background-filled" + }, + "ctrlProgressCorner": { + "no": 731, + "name": "CTRL/progress/corner", + "fst_reference": "corner/circular", + "optional": true, + "nullable": false, + "description": "", + "components": ["Progress Bar"], + "contrast": "", + "fallback": "Circular", + "exceptions": [], + "cssName": "--smtc-ctrl-progress-corner" + }, + "ctrlProgressHeightFilled": { + "no": 732, + "name": "CTRL/progress/height/filled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Progress Bar"], + "contrast": "", + "fallback": "Thick", + "exceptions": [], + "cssName": "--smtc-ctrl-progress-height-filled" + }, + "ctrlProgressHeightEmpty": { + "no": 733, + "name": "CTRL/progress/height/empty", + "fst_reference": "CTRL/progress/height/filled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Progress Bar"], + "contrast": "", + "fallback": "Thick", + "exceptions": [], + "cssName": "--smtc-ctrl-progress-height-empty" + }, + "ctrlProgressSmHeightFilled": { + "no": 734, + "name": "CTRL/progress/sm/height/filled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thick", + "exceptions": [], + "cssName": "--smtc-ctrl-progress-sm-height-filled" + }, + "ctrlProgressSmHeightEmpty": { + "no": 735, + "name": "CTRL/progress/sm/height/empty", + "fst_reference": "CTRL/progress/sm/height/filled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thick", + "exceptions": [], + "cssName": "--smtc-ctrl-progress-sm-height-empty" + }, + "ctrlRatingIconTheme": { + "no": 736, + "name": "CTRL/rating/icon/theme", + "fst_reference": "iconTheme/ctrl/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-rating-icon-theme" + }, + "ctrlRatingIconGap": { + "no": 737, + "name": "CTRL/rating/icon/gap", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Rating"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-rating-icon-gap" + }, + "ctrlRatingIconForegroundFilled": { + "no": 738, + "name": "CTRL/rating/icon/foreground/filled", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Rating"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-rating-icon-foreground-filled" + }, + "ctrlRatingIconForegroundEmpty": { + "no": 739, + "name": "CTRL/rating/icon/foreground/empty", + "fst_reference": "CTRL/progress/background/empty", + "optional": true, + "nullable": false, + "description": "", + "components": ["Rating"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-rating-icon-foreground-empty" + }, + "ctrlRatingIconSize": { + "no": 740, + "name": "CTRL/rating/icon/size", + "fst_reference": "size/ctrl/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-rating-icon-size" + }, + "ctrlSegmentedBackgroundRest": { + "no": 741, + "name": "CTRL/segmented/background/rest", + "fst_reference": "background/ctrl/outline/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-background-rest" + }, + "ctrlSegmentedBackgroundHover": { + "no": 742, + "name": "CTRL/segmented/background/hover", + "fst_reference": "background/ctrl/outline/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Hover", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-background-hover" + }, + "ctrlSegmentedBackgroundPressed": { + "no": 743, + "name": "CTRL/segmented/background/pressed", + "fst_reference": "background/ctrl/outline/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-background-pressed" + }, + "ctrlSegmentedBackgroundDisabled": { + "no": 744, + "name": "CTRL/segmented/background/disabled", + "fst_reference": "background/ctrl/outline/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Transparent/Pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-background-disabled" + }, + "ctrlSegmentedStrokeRest": { + "no": 745, + "name": "CTRL/segmented/stroke/rest", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-stroke-rest" + }, + "ctrlSegmentedStrokeHover": { + "no": 746, + "name": "CTRL/segmented/stroke/hover", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Hover", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-stroke-hover" + }, + "ctrlSegmentedStrokePressed": { + "no": 747, + "name": "CTRL/segmented/stroke/pressed", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-stroke-pressed" + }, + "ctrlSegmentedStrokeDisabled": { + "no": 748, + "name": "CTRL/segmented/stroke/disabled", + "fst_reference": "foreground/ctrl/neutral/secondary/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-stroke-disabled" + }, + "ctrlSegmentedCornerRest": { + "no": 749, + "name": "CTRL/segmented/corner/rest", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-corner-rest" + }, + "ctrlSegmentedCornerHover": { + "no": 750, + "name": "CTRL/segmented/corner/hover", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-corner-hover" + }, + "ctrlSegmentedCornerPressed": { + "no": 751, + "name": "CTRL/segmented/corner/pressed", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-corner-pressed" + }, + "ctrlSegmentedPaddingRest": { + "no": 752, + "name": "CTRL/segmented/padding/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-padding-rest" + }, + "ctrlSegmentedPaddingHover": { + "no": 753, + "name": "CTRL/segmented/padding/hover", + "fst_reference": "CTRL/segmented/padding/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-padding-hover" + }, + "ctrlSegmentedPaddingPressed": { + "no": 754, + "name": "CTRL/segmented/padding/pressed", + "fst_reference": "CTRL/segmented/padding/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-padding-pressed" + }, + "ctrlSegmentedGap": { + "no": 755, + "name": "CTRL/segmented/gap", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-gap" + }, + "ctrlSegmentedItemCornerRest": { + "no": 756, + "name": "CTRL/segmented/Item/corner/rest", + "fst_reference": "corner/ctrl-sm/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-item-corner-rest" + }, + "ctrlSegmentedItemCornerHover": { + "no": 757, + "name": "CTRL/segmented/Item/corner/hover", + "fst_reference": "corner/ctrl-sm/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-item-corner-hover" + }, + "ctrlSegmentedItemCornerPressed": { + "no": 758, + "name": "CTRL/segmented/Item/corner/pressed", + "fst_reference": "corner/ctrl-sm/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-item-corner-pressed" + }, + "ctrlSliderBarHeight": { + "no": 759, + "name": "CTRL/slider/bar/height", + "fst_reference": "CTRL/progress/height/filled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Slider"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-bar-height" + }, + "ctrlSplitDividerStrokeWidth": { + "no": 760, + "name": "CTRL/split/divider/strokeWidth", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Split button"], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-split-divider-stroke-width" + }, + "ctrlSplitDividerStrokeWidthOnOutline": { + "no": 761, + "name": "CTRL/split/divider/strokeWidth-onOutline", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-split-divider-stroke-width-on-outline" + }, + "ctrlSplitDividerStrokeWidthOnSubtle": { + "no": 762, + "name": "CTRL/split/divider/strokeWidth-onSubtle", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": ["Split button"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-split-divider-stroke-width-on-subtle" + }, + "ctrlSpinnerStrokeWidth": { + "no": 763, + "name": "CTRL/spinner/strokeWidth", + "fst_reference": "CTRL/progress/height/filled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Spinner"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-spinner-stroke-width" + }, + "ctrlSpinnerShowEmptyTrack": { + "no": 764, + "name": "CTRL/spinner/showEmptyTrack", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Spinner"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-spinner-show-empty-track" + }, + "ctrlTooltipCorner": { + "no": 765, + "name": "CTRL/tooltip/corner", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Medium", + "exceptions": [], + "cssName": "--smtc-ctrl-tooltip-corner" + }, + "ctrlTooltipBackground": { + "no": 766, + "name": "CTRL/tooltip/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-tooltip-background" + }, + "ctrlTooltipForeground": { + "no": 767, + "name": "CTRL/tooltip/foreground", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-tooltip-foreground" + }, + "ctrlSliderBarCorner": { + "no": 768, + "name": "CTRL/slider/bar/corner", + "fst_reference": "corner/circular", + "optional": true, + "nullable": false, + "description": "", + "components": ["Slider"], + "contrast": "", + "fallback": "Circular", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-bar-corner" + }, + "ctrlSliderBarForegroundFilledRest": { + "no": 769, + "name": "CTRL/slider/bar/foreground/filled/rest", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Background/Compound/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-bar-foreground-filled-rest" + }, + "ctrlSliderBarForegroundEmptyRest": { + "no": 770, + "name": "CTRL/slider/bar/foreground/empty/rest", + "fst_reference": "CTRL/progress/background/empty", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-bar-foreground-empty-rest" + }, + "ctrlSliderBarForegroundEmptyHover": { + "no": 771, + "name": "CTRL/slider/bar/foreground/empty/hover", + "fst_reference": "CTRL/progress/background/empty", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-bar-foreground-empty-hover" + }, + "ctrlSliderBarForegroundEmptyPressed": { + "no": 772, + "name": "CTRL/slider/bar/foreground/empty/pressed", + "fst_reference": "CTRL/progress/background/empty", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-bar-foreground-empty-pressed" + }, + "ctrlSliderBarForegroundEmptyDisabled": { + "no": 773, + "name": "CTRL/slider/bar/foreground/empty/disabled", + "fst_reference": "CTRL/progress/background/empty", + "optional": true, + "nullable": false, + "description": "", + "components": ["Slider"], + "contrast": "", + "fallback": "Neutral/Stroke/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-bar-foreground-empty-disabled" + }, + "ctrlSliderBarForegroundFilledHover": { + "no": 774, + "name": "CTRL/slider/bar/foreground/filled/hover", + "fst_reference": "background/ctrl/brand/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Background/Compound/Hover", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-bar-foreground-filled-hover" + }, + "ctrlSliderBarForegroundFilledPressed": { + "no": 775, + "name": "CTRL/slider/bar/foreground/filled/pressed", + "fst_reference": "background/ctrl/brand/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Background/Compound/Pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-bar-foreground-filled-pressed" + }, + "ctrlSliderBarForegroundFilledDisabled": { + "no": 776, + "name": "CTRL/slider/bar/foreground/filled/disabled", + "fst_reference": "background/ctrl/brand/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Slider"], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-bar-foreground-filled-disabled" + }, + "ctrlSliderThumbCorner": { + "no": 777, + "name": "CTRL/slider/thumb/corner", + "fst_reference": "corner/circular", + "optional": true, + "nullable": false, + "description": "", + "components": ["Slider"], + "contrast": "", + "fallback": "Circular", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-corner" + }, + "ctrlSliderThumbSizeRest": { + "no": 778, + "name": "CTRL/slider/thumb/size/rest", + "fst_reference": "size/ctrl/icon", + "optional": true, + "nullable": false, + "description": "", + "components": ["Slider"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-size-rest" + }, + "ctrlSliderThumbSizeHover": { + "no": 779, + "name": "CTRL/slider/thumb/size/hover", + "fst_reference": "size/ctrl/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-size-hover" + }, + "ctrlSliderThumbSizePressed": { + "no": 780, + "name": "CTRL/slider/thumb/size/pressed", + "fst_reference": "size/ctrl/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-size-pressed" + }, + "ctrlSliderThumbBackgroundRest": { + "no": 781, + "name": "CTRL/slider/thumb/background/rest", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Background/Compound/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-background-rest" + }, + "ctrlSliderThumbBackgroundHover": { + "no": 782, + "name": "CTRL/slider/thumb/background/hover", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Background/Compound/Hover", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-background-hover" + }, + "ctrlSliderThumbBackgroundPressed": { + "no": 783, + "name": "CTRL/slider/thumb/background/pressed", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Background/Compound/Pressed", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-background-pressed" + }, + "ctrlSliderThumbBackgroundDisabled": { + "no": 784, + "name": "CTRL/slider/thumb/background/disabled", + "fst_reference": "foreground/ctrl/onBrand/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Slider"], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-background-disabled" + }, + "ctrlSliderThumbInnerStrokeWidthRest": { + "no": 785, + "name": "CTRL/slider/thumb/inner/strokeWidth/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Slider"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-width-rest" + }, + "ctrlSliderThumbInnerStrokeWidthHover": { + "no": 786, + "name": "CTRL/slider/thumb/inner/strokeWidth/hover", + "fst_reference": "CTRL/slider/thumb/inner/strokeWidth/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-width-hover" + }, + "ctrlSliderThumbInnerStrokeWidthPressed": { + "no": 787, + "name": "CTRL/slider/thumb/inner/strokeWidth/pressed", + "fst_reference": "CTRL/slider/thumb/inner/strokeWidth/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-width-pressed" + }, + "ctrlSliderThumbInnerStrokeRest": { + "no": 788, + "name": "CTRL/slider/thumb/inner/stroke/rest", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-rest" + }, + "ctrlSliderThumbInnerStrokeHover": { + "no": 789, + "name": "CTRL/slider/thumb/inner/stroke/hover", + "fst_reference": "background/ctrl/brand/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-hover" + }, + "ctrlSliderThumbInnerStrokePressed": { + "no": 790, + "name": "CTRL/slider/thumb/inner/stroke/pressed", + "fst_reference": "background/ctrl/brand/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-pressed" + }, + "ctrlSliderThumbInnerStrokeDisabled": { + "no": 791, + "name": "CTRL/slider/thumb/inner/stroke/disabled", + "fst_reference": "background/ctrl/brand/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Slider"], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-disabled" + }, + "ctrlSliderThumbOuterStrokeWidth": { + "no": 792, + "name": "CTRL/slider/thumb/outer/strokeWidth", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Slider"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-outer-stroke-width" + }, + "ctrlSliderThumbOuterStrokeRest": { + "no": 793, + "name": "CTRL/slider/thumb/outer/stroke/rest", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-outer-stroke-rest" + }, + "ctrlSliderThumbOuterStrokeHover": { + "no": 794, + "name": "CTRL/slider/thumb/outer/stroke/hover", + "fst_reference": "background/ctrl/brand/hover", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-outer-stroke-hover" + }, + "ctrlSliderThumbOuterStrokePressed": { + "no": 795, + "name": "CTRL/slider/thumb/outer/stroke/pressed", + "fst_reference": "background/ctrl/brand/pressed", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-outer-stroke-pressed" + }, + "ctrlSliderThumbOuterStrokeDisabled": { + "no": 796, + "name": "CTRL/slider/thumb/outer/stroke/disabled", + "fst_reference": "background/ctrl/brand/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Slider"], + "contrast": "", + "fallback": "Neutral/Stroke/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-thumb-outer-stroke-disabled" + }, + "ctrlSliderSmThumbSizeRest": { + "no": 797, + "name": "CTRL/slider/sm/thumb/size/rest", + "fst_reference": "size/ctrl-sm/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-sm-thumb-size-rest" + }, + "ctrlSliderSmThumbSizeHover": { + "no": 798, + "name": "CTRL/slider/sm/thumb/size/hover", + "fst_reference": "size/ctrl-sm/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-sm-thumb-size-hover" + }, + "ctrlSliderSmThumbSizePressed": { + "no": 799, + "name": "CTRL/slider/sm/thumb/size/pressed", + "fst_reference": "size/ctrl-sm/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-sm-thumb-size-pressed" + }, + "ctrlSliderSmBarHeight": { + "no": 800, + "name": "CTRL/slider/sm/bar/height", + "fst_reference": "CTRL/progress/sm/height/filled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-sm-bar-height" + }, + "ctrlSliderLgThumbSizeRest": { + "no": 801, + "name": "CTRL/slider/lg/thumb/size/rest", + "fst_reference": "size/ctrl-lg/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-lg-thumb-size-rest" + }, + "ctrlSliderLgBarHeight": { + "no": 802, + "name": "CTRL/slider/lg/bar/height", + "fst_reference": "CTRL/progress/lg/height/filled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-lg-bar-height" + }, + "ctrlSliderLgThumbSizeHover": { + "no": 803, + "name": "CTRL/slider/lg/thumb/size/hover", + "fst_reference": "size/ctrl-lg/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-lg-thumb-size-hover" + }, + "ctrlSliderLgThumbSizePressed": { + "no": 804, + "name": "CTRL/slider/lg/thumb/size/pressed", + "fst_reference": "size/ctrl-lg/icon", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-slider-lg-thumb-size-pressed" + }, + "ctrlListSplitDividerShowDivider": { + "no": 805, + "name": "CTRL/list/split/divider/showDivider", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-split-divider-show-divider" + }, + "ctrlAvatarPresenceBadgeBackgroundBehindBadge": { + "no": 806, + "name": "CTRL/avatar/presenceBadge/background/behindBadge", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": ["Presence badge"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-presence-badge-background-behind-badge" + }, + "statusBrandBackground": { + "no": 807, + "name": "STATUS/brand/background", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Badge"], + "contrast": "", + "fallback": "Brand/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-status-brand-background" + }, + "statusBrandStroke": { + "no": 808, + "name": "STATUS/brand/stroke", + "fst_reference": "background/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-status-brand-stroke" + }, + "statusBrandForeground": { + "no": 809, + "name": "STATUS/brand/foreground", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/OnBrand/Rest", + "exceptions": [], + "cssName": "--smtc-status-brand-foreground" + }, + "statusBrandTintBackground": { + "no": 810, + "name": "STATUS/brand/tint/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Background/2/Rest", + "exceptions": [], + "cssName": "--smtc-status-brand-tint-background" + }, + "statusBrandTintStroke": { + "no": 811, + "name": "STATUS/brand/tint/stroke", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Stroke/2/Rest", + "exceptions": [], + "cssName": "--smtc-status-brand-tint-stroke" + }, + "statusBrandTintForeground": { + "no": 812, + "name": "STATUS/brand/tint/foreground", + "fst_reference": "foreground/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Brand/Foreground/2/Rest", + "exceptions": [], + "cssName": "--smtc-status-brand-tint-foreground" + }, + "statusDangerBackground": { + "no": 813, + "name": "STATUS/danger/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Danger/Background/3/Rest", + "exceptions": [], + "cssName": "--smtc-status-danger-background" + }, + "statusDangerStroke": { + "no": 814, + "name": "STATUS/danger/stroke", + "fst_reference": "STATUS/danger/background", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Danger/Stroke/2/Rest", + "exceptions": [], + "cssName": "--smtc-status-danger-stroke" + }, + "statusDangerForeground": { + "no": 815, + "name": "STATUS/danger/foreground", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/OnBrand/Rest", + "exceptions": [], + "cssName": "--smtc-status-danger-foreground" + }, + "statusDangerTintBackground": { + "no": 816, + "name": "STATUS/danger/tint/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["MessageBar"], + "contrast": "", + "fallback": "Status/Danger/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-status-danger-tint-background" + }, + "statusDangerTintStroke": { + "no": 817, + "name": "STATUS/danger/tint/stroke", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["MessageBar"], + "contrast": "", + "fallback": "Status/Danger/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-status-danger-tint-stroke" + }, + "statusDangerTintForeground": { + "no": 818, + "name": "STATUS/danger/tint/foreground", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Presence badge", " Radio", " Checkbox", "Field", "Label", "MessageBar"], + "contrast": "", + "fallback": "Status/Danger/Foreground/1/Rest", + "exceptions": [], + "cssName": "--smtc-status-danger-tint-foreground" + }, + "statusWarningBackground": { + "no": 819, + "name": "STATUS/warning/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Warning/Background/3/Rest", + "exceptions": [], + "cssName": "--smtc-status-warning-background" + }, + "statusWarningStroke": { + "no": 820, + "name": "STATUS/warning/stroke", + "fst_reference": "STATUS/warning/background", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Warning/Foreground/2/Rest", + "exceptions": [], + "cssName": "--smtc-status-warning-stroke" + }, + "statusWarningForeground": { + "no": 821, + "name": "STATUS/warning/foreground", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/Static/Rest", + "exceptions": [], + "cssName": "--smtc-status-warning-foreground" + }, + "statusWarningTintBackground": { + "no": 822, + "name": "STATUS/warning/tint/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Warning/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-status-warning-tint-background" + }, + "statusWarningTintStroke": { + "no": 823, + "name": "STATUS/warning/tint/stroke", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Warning/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-status-warning-tint-stroke" + }, + "statusWarningTintForeground": { + "no": 824, + "name": "STATUS/warning/tint/foreground", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Warning/Foreground/1/Rest", + "exceptions": [], + "cssName": "--smtc-status-warning-tint-foreground" + }, + "statusSuccessBackground": { + "no": 825, + "name": "STATUS/success/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Success/Background/3/Rest", + "exceptions": [], + "cssName": "--smtc-status-success-background" + }, + "statusSuccessStroke": { + "no": 826, + "name": "STATUS/success/stroke", + "fst_reference": "STATUS/success/background", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Success/Stroke/2/Rest", + "exceptions": [], + "cssName": "--smtc-status-success-stroke" + }, + "statusSuccessForeground": { + "no": 827, + "name": "STATUS/success/foreground", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/OnBrand/Rest", + "exceptions": [], + "cssName": "--smtc-status-success-foreground" + }, + "statusSuccessTintBackground": { + "no": 828, + "name": "STATUS/success/tint/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Success/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-status-success-tint-background" + }, + "statusSuccessTintStroke": { + "no": 829, + "name": "STATUS/success/tint/stroke", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Success/Stroke/1/Rest", + "exceptions": [], + "cssName": "--smtc-status-success-tint-stroke" + }, + "statusSuccessTintForeground": { + "no": 830, + "name": "STATUS/success/tint/foreground", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Success/Foreground/1/Rest", + "exceptions": [], + "cssName": "--smtc-status-success-tint-foreground" + }, + "statusImportantBackground": { + "no": 831, + "name": "STATUS/important/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/1/Rest", + "exceptions": [], + "cssName": "--smtc-status-important-background" + }, + "statusImportantStroke": { + "no": 832, + "name": "STATUS/important/stroke", + "fst_reference": "STATUS/important/background", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Accessible/Rest", + "exceptions": [], + "cssName": "--smtc-status-important-stroke" + }, + "statusImportantForeground": { + "no": 833, + "name": "STATUS/important/foreground", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/OnBrand/Rest", + "exceptions": [], + "cssName": "--smtc-status-important-foreground" + }, + "statusImportantTintBackground": { + "no": 834, + "name": "STATUS/important/tint/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-status-important-tint-background" + }, + "statusImportantTintStroke": { + "no": 835, + "name": "STATUS/important/tint/stroke", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-status-important-tint-stroke" + }, + "statusImportantTintForeground": { + "no": 836, + "name": "STATUS/important/tint/foreground", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-status-important-tint-foreground" + }, + "statusInformativeBackground": { + "no": 837, + "name": "STATUS/informative/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/5/Rest", + "exceptions": [], + "cssName": "--smtc-status-informative-background" + }, + "statusInformativeStroke": { + "no": 838, + "name": "STATUS/informative/stroke", + "fst_reference": "STATUS/informative/background", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/2/Rest", + "exceptions": [], + "cssName": "--smtc-status-informative-stroke" + }, + "statusInformativeForeground": { + "no": 839, + "name": "STATUS/informative/foreground", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/3/Rest", + "exceptions": [], + "cssName": "--smtc-status-informative-foreground" + }, + "statusInformativeTintForeground": { + "no": 840, + "name": "STATUS/informative/tint/foreground", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Field"], + "contrast": "", + "fallback": "Neutral/Foreground/3/Rest", + "exceptions": [], + "cssName": "--smtc-status-informative-tint-foreground" + }, + "statusInformativeTintStroke": { + "no": 841, + "name": "STATUS/informative/tint/stroke", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/2/Rest", + "exceptions": [], + "cssName": "--smtc-status-informative-tint-stroke" + }, + "statusInformativeTintBackground": { + "no": 842, + "name": "STATUS/informative/tint/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Field"], + "contrast": "", + "fallback": "Neutral/Background/4/Rest", + "exceptions": [], + "cssName": "--smtc-status-informative-tint-background" + }, + "statusAwayForeground": { + "no": 843, + "name": "STATUS/away/foreground", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Warning/Foreground/2/Rest", + "exceptions": [], + "cssName": "--smtc-status-away-foreground" + }, + "statusOofForeground": { + "no": 844, + "name": "STATUS/oof/foreground", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Status/Warning/Foreground/2/Rest", + "exceptions": [], + "cssName": "--smtc-status-oof-foreground" + }, + "ctrlBooleanSelectionHint": { + "no": 845, + "name": "CTRL/boolean/selectionHint", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-boolean-selection-hint" + }, + "ctrlComposerInputBottomStrokeWidthSelectedRest": { + "no": 846, + "name": "CTRL/composer/Input/Bottom-Stroke-Width/Selected-Rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-width-selected-rest" + }, + "ctrlComposerInputBottomStrokeWidthRest": { + "no": 847, + "name": "CTRL/composer/Input/Bottom-Stroke-Width/Rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-width-rest" + }, + "ctrlComposerInputBottomStrokeWidthHover": { + "no": 848, + "name": "CTRL/composer/Input/Bottom-Stroke-Width/Hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-width-hover" + }, + "ctrlComposerInputBottomStrokeWidthPressed": { + "no": 849, + "name": "CTRL/composer/Input/Bottom-Stroke-Width/Pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-width-pressed" + }, + "ctrlComposerInputCornerRest": { + "no": 850, + "name": "CTRL/composer/Input/Corner/Rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "corner/circular", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-corner-rest" + }, + "ctrlComposerInputCornerHover": { + "no": 851, + "name": "CTRL/composer/Input/Corner/Hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "corner/circular", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-corner-hover" + }, + "ctrlComposerInputCornerPressed": { + "no": 852, + "name": "CTRL/composer/Input/Corner/Pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "corner/circular", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-corner-pressed" + }, + "ctrlComposerInputBackgroundRest": { + "no": 853, + "name": "CTRL/composer/Input/Background/Rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/2/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-background-rest" + }, + "ctrlComposerInputBackgroundPressed": { + "no": 854, + "name": "CTRL/composer/Input/Background/Pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/2/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-background-pressed" + }, + "ctrlComposerInputBackgroundDisabled": { + "no": 855, + "name": "CTRL/composer/Input/Background/Disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/2/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-background-disabled" + }, + "ctrlComposerInputBackgroundSelectedRest": { + "no": 856, + "name": "CTRL/composer/Input/Background/Selected-Rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/2/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-background-selected-rest" + }, + "ctrlComposerInputBackgroundHover": { + "no": 857, + "name": "CTRL/composer/Input/Background/Hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/2/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-background-hover" + }, + "ctrlComposerInputStrokeRest": { + "no": 858, + "name": "CTRL/composer/Input/Stroke/Rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-stroke-rest" + }, + "ctrlComposerInputStrokeHoverUsesGradient": { + "no": 859, + "name": "CTRL/composer/Input/Stroke/Hover(UsesGradient)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-stroke-hover-uses-gradient" + }, + "ctrlComposerInputStrokePressedUsesGradient": { + "no": 860, + "name": "CTRL/composer/Input/Stroke/Pressed(UsesGradient)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-stroke-pressed-uses-gradient" + }, + "ctrlComposerInputStrokeDisabledUsesGradient": { + "no": 861, + "name": "CTRL/composer/Input/Stroke/Disabled(UsesGradient)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-stroke-disabled-uses-gradient" + }, + "ctrlComposerInputStrokeSelectedRestUsesGradient": { + "no": 862, + "name": "CTRL/composer/Input/Stroke/Selected-Rest(UsesGradient)", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-stroke-selected-rest-uses-gradient" + }, + "ctrlComposerInputStrokeWidthRest": { + "no": 863, + "name": "CTRL/composer/Input/Stroke-Width/Rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-stroke-width-rest" + }, + "ctrlComposerInputStrokeWidthHover": { + "no": 864, + "name": "CTRL/composer/Input/Stroke-Width/Hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-stroke-width-hover" + }, + "ctrlComposerInputStrokeWidthPressed": { + "no": 865, + "name": "CTRL/composer/Input/Stroke-Width/Pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-stroke-width-pressed" + }, + "ctrlComposerInputStrokeWidthSelectedRest": { + "no": 866, + "name": "CTRL/composer/Input/Stroke-Width/Selected-Rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-stroke-width-selected-rest" + }, + "ctrlComposerInputBottomStrokeRest": { + "no": 867, + "name": "CTRL/composer/Input/BottomStroke/Rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-rest" + }, + "ctrlComposerInputBottomStrokeHover": { + "no": 868, + "name": "CTRL/composer/Input/BottomStroke/Hover", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-hover" + }, + "ctrlComposerInputBottomStrokePressed": { + "no": 869, + "name": "CTRL/composer/Input/BottomStroke/Pressed", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-pressed" + }, + "ctrlComposerInputBottomStrokeDisabled": { + "no": 870, + "name": "CTRL/composer/Input/BottomStroke/Disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-disabled" + }, + "ctrlComposerInputBottomStrokeSelectedRest": { + "no": 871, + "name": "CTRL/composer/Input/BottomStroke/Selected-Rest", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/Transparent/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-selected-rest" + }, + "ctrlComposerInputShadowXOffset": { + "no": 872, + "name": "CTRL/composer/Input/Shadow/(X-offset)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-shadow-x-offset" + }, + "ctrlComposerInputShadowY": { + "no": 873, + "name": "CTRL/composer/Input/Shadow/(Y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-shadow-y" + }, + "ctrlComposerInputShadowBlur": { + "no": 874, + "name": "CTRL/composer/Input/Shadow/(Blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-shadow-blur" + }, + "ctrlComposerInputShadowColor": { + "no": 875, + "name": "CTRL/composer/Input/Shadow/(Color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-input-shadow-color" + }, + "ctrlComposerContainerCorner": { + "no": 876, + "name": "CTRL/composer/Container/Corner", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "corner/circular", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-corner" + }, + "ctrlComposerContainerBackgroundDefault": { + "no": 877, + "name": "CTRL/composer/Container/Background/Default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-background-default" + }, + "ctrlComposerContainerBackgroundAcrylicColorBlend": { + "no": 878, + "name": "CTRL/composer/Container/Background/(AcrylicColorBlend)", + "fst_reference": "background/flyout/(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-background-acrylic-color-blend" + }, + "ctrlComposerContainerBackgroundAcrylicLumBlend": { + "no": 879, + "name": "CTRL/composer/Container/Background/(AcrylicLumBlend)", + "fst_reference": "background/flyout/(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-background-acrylic-lum-blend" + }, + "ctrlComposerContainerShadowKeyX": { + "no": 880, + "name": "CTRL/composer/Container/Shadow/Key/(X)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-shadow-key-x" + }, + "ctrlComposerContainerShadowKeyY": { + "no": 881, + "name": "CTRL/composer/Container/Shadow/Key/(Y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-shadow-key-y" + }, + "ctrlComposerContainerShadowKeyBlur": { + "no": 882, + "name": "CTRL/composer/Container/Shadow/Key/(Blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-shadow-key-blur" + }, + "ctrlComposerContainerShadowKeyColor": { + "no": 883, + "name": "CTRL/composer/Container/Shadow/Key/(Color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Shadow/Ambientlighter", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-shadow-key-color" + }, + "ctrlComposerContainerShadowAmbientX": { + "no": 884, + "name": "CTRL/composer/Container/Shadow/Ambient/(X)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-shadow-ambient-x" + }, + "ctrlComposerContainerShadowAmbientY": { + "no": 885, + "name": "CTRL/composer/Container/Shadow/Ambient/(Y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-shadow-ambient-y" + }, + "ctrlComposerContainerShadowAmbientBlur": { + "no": 886, + "name": "CTRL/composer/Container/Shadow/Ambient/(Blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-shadow-ambient-blur" + }, + "ctrlComposerContainerShadowAmbientColor": { + "no": 887, + "name": "CTRL/composer/Container/Shadow/Ambient/(Color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Shadow/Ambientdarker", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-shadow-ambient-color" + }, + "ctrlComposerContainerStrokeDefault": { + "no": 888, + "name": "CTRL/composer/Container/Stroke/Default", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-composer-container-stroke-default" + }, + "aiBrandStop1": { + "no": 889, + "name": "AI/brand/(stop1)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-brand-stop1" + }, + "aiBrandStop2": { + "no": 890, + "name": "AI/brand/(stop2)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-brand-stop2" + }, + "aiBrandStop3": { + "no": 891, + "name": "AI/brand/(stop3)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-brand-stop3" + }, + "aiBrandStop4": { + "no": 892, + "name": "AI/brand/(stop4)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-brand-stop4" + }, + "aiShimmerStop1": { + "no": 893, + "name": "AI/shimmer/(stop1)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-shimmer-stop1" + }, + "aiShimmerStop2": { + "no": 894, + "name": "AI/shimmer/(stop2)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-shimmer-stop2" + }, + "aiShimmerStop3": { + "no": 895, + "name": "AI/shimmer/(stop3)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-shimmer-stop3" + }, + "aiShimmerStop4": { + "no": 896, + "name": "AI/shimmer/(stop4)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-shimmer-stop4" + }, + "shadowWindowActiveKeyX": { + "no": 897, + "name": "shadow/window/active/(key)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-window-active-key-x" + }, + "shadowWindowActiveKeyY": { + "no": 898, + "name": "shadow/window/active/(key)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-window-active-key-y" + }, + "shadowWindowActiveKeyBlur": { + "no": 899, + "name": "shadow/window/active/(key)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-window-active-key-blur" + }, + "shadowWindowActiveKeyColor": { + "no": 900, + "name": "shadow/window/active/(key)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Shadow/Ambientlighter", + "exceptions": [], + "cssName": "--smtc-shadow-window-active-key-color" + }, + "shadowWindowActiveAmbientX": { + "no": 901, + "name": "shadow/window/active/(ambient)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-window-active-ambient-x" + }, + "shadowWindowActiveAmbientY": { + "no": 902, + "name": "shadow/window/active/(ambient)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-window-active-ambient-y" + }, + "shadowWindowActiveAmbientBlur": { + "no": 903, + "name": "shadow/window/active/(ambient)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-window-active-ambient-blur" + }, + "shadowWindowActiveAmbientColor": { + "no": 904, + "name": "shadow/window/active/(ambient)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Shadow/Ambientdarker", + "exceptions": [], + "cssName": "--smtc-shadow-window-active-ambient-color" + }, + "shadowWindowInactiveKeyX": { + "no": 905, + "name": "shadow/window/inactive/(key)/(x)", + "fst_reference": "shadow/window/active/(key)/(x)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-window-inactive-key-x" + }, + "shadowWindowInactiveKeyY": { + "no": 906, + "name": "shadow/window/inactive/(key)/(y)", + "fst_reference": "shadow/window/active/(key)/(y)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-window-inactive-key-y" + }, + "shadowWindowInactiveKeyBlur": { + "no": 907, + "name": "shadow/window/inactive/(key)/(blur)", + "fst_reference": "shadow/window/active/(key)/(blur)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-window-inactive-key-blur" + }, + "shadowWindowInactiveKeyColor": { + "no": 908, + "name": "shadow/window/inactive/(key)/(Color)", + "fst_reference": "shadow/window/active/(key)/(color)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Shadow/Ambientlighter", + "exceptions": [], + "cssName": "--smtc-shadow-window-inactive-key-color" + }, + "shadowWindowInactiveAmbientX": { + "no": 909, + "name": "shadow/window/inactive/(ambient)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-window-inactive-ambient-x" + }, + "shadowWindowInactiveAmbientY": { + "no": 910, + "name": "shadow/window/inactive/(ambient)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-window-inactive-ambient-y" + }, + "shadowWindowInactiveAmbientBlur": { + "no": 911, + "name": "shadow/window/inactive/(ambient)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-window-inactive-ambient-blur" + }, + "shadowWindowInactiveAmbientColor": { + "no": 912, + "name": "shadow/window/inactive/(ambient)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Shadow/Ambientdarker", + "exceptions": [], + "cssName": "--smtc-shadow-window-inactive-ambient-color" + }, + "nullColor": { + "no": 913, + "name": "NULL/color", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [ + "Split button", + "Button", + "Dialog", + "Inline drawer", + "Overlay drawer", + "Editable dropdown", + "Editable spin button", + "Title bar", + "MessageBar" + ], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-null-color" + }, + "ctrlCardStateRest": { + "no": 914, + "name": "CTRL/card/state/(rest)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-card-state-rest" + }, + "ctrlCardStateHover": { + "no": 915, + "name": "CTRL/card/state/(hover)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-card-state-hover" + }, + "ctrlCardStatePressed": { + "no": 916, + "name": "CTRL/card/state/(pressed)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-card-state-pressed" + }, + "ctrlCardStateDisabled": { + "no": 917, + "name": "CTRL/card/state/(disabled)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-card-state-disabled" + }, + "ctrlListShadowSelectedKeyY2": { + "no": 918, + "name": "CTRL/list/shadow/selected/(key)/(y)2", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/number", + "exceptions": [], + "cssName": "--smtc-ctrl-list-shadow-selected-key-y-2" + }, + "ctrlListShadowSelectedKeyX": { + "no": 919, + "name": "CTRL/list/shadow/selected/(key)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-shadow-selected-key-x" + }, + "ctrlListShadowSelectedKeyY": { + "no": 920, + "name": "CTRL/list/shadow/selected/(key)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-shadow-selected-key-y" + }, + "ctrlListShadowSelectedKeyBlur": { + "no": 921, + "name": "CTRL/list/shadow/selected/(key)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-shadow-selected-key-blur" + }, + "ctrlListShadowSelectedKeyColor": { + "no": 922, + "name": "CTRL/list/shadow/selected/(key)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-shadow-selected-key-color" + }, + "ctrlListShadowSelectedAmbientX": { + "no": 923, + "name": "CTRL/list/shadow/selected/(ambient)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-shadow-selected-ambient-x" + }, + "ctrlListShadowSelectedAmbientY": { + "no": 924, + "name": "CTRL/list/shadow/selected/(ambient)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-shadow-selected-ambient-y" + }, + "ctrlListShadowSelectedAmbientBlur": { + "no": 925, + "name": "CTRL/list/shadow/selected/(ambient)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-shadow-selected-ambient-blur" + }, + "ctrlListShadowSelectedAmbientColor": { + "no": 926, + "name": "CTRL/list/shadow/selected/(ambient)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-shadow-selected-ambient-color" + }, + "statusNeutralBackground": { + "no": 927, + "name": "STATUS/neutral/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/5/Rest", + "exceptions": [], + "cssName": "--smtc-status-neutral-background" + }, + "statusNeutralStroke": { + "no": 928, + "name": "STATUS/neutral/stroke", + "fst_reference": "STATUS/neutral/background", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/2/Rest", + "exceptions": [], + "cssName": "--smtc-status-neutral-stroke" + }, + "statusNeutralForeground": { + "no": 929, + "name": "STATUS/neutral/foreground", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/3/Rest", + "exceptions": [], + "cssName": "--smtc-status-neutral-foreground" + }, + "statusNeutralTintBackground": { + "no": 930, + "name": "STATUS/neutral/tint/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog", "Inline drawer", "Overlay drawer"], + "contrast": "", + "fallback": "Neutral/Background/4/Rest", + "exceptions": [], + "cssName": "--smtc-status-neutral-tint-background" + }, + "statusNeutralTintStroke": { + "no": 931, + "name": "STATUS/neutral/tint/stroke", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/4/Rest", + "exceptions": [], + "cssName": "--smtc-status-neutral-tint-stroke" + }, + "statusNeutralTintForeground": { + "no": 932, + "name": "STATUS/neutral/tint/foreground", + "fst_reference": "foreground/ctrl/neutral/secondary/rest", + "optional": true, + "nullable": false, + "description": "", + "components": ["Dialog", "Inline drawer", "Overlay drawer"], + "contrast": "", + "fallback": "Neutral/Foreground/3/Rest", + "exceptions": [], + "cssName": "--smtc-status-neutral-tint-foreground" + }, + "cornerFlyoutShellRest": { + "no": 933, + "name": "corner/flyout/shell-rest", + "fst_reference": "corner/flyout/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-flyout-shell-rest" + }, + "nullNumber": { + "no": 934, + "name": "NULL/number", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-null-number" + }, + "nullString": { + "no": 935, + "name": "NULL/string", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-null-string" + }, + "ctrlSegmentedSmPaddingRest": { + "no": 936, + "name": "CTRL/segmented/sm/padding/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-sm-padding-rest" + }, + "ctrlSegmentedSmPaddingHover": { + "no": 937, + "name": "CTRL/segmented/sm/padding/hover", + "fst_reference": "CTRL/segmented/sm/padding/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-sm-padding-hover" + }, + "ctrlSegmentedSmPaddingPressed": { + "no": 938, + "name": "CTRL/segmented/sm/padding/pressed", + "fst_reference": "CTRL/segmented/sm/padding/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-sm-padding-pressed" + }, + "ctrlSegmentedLgPaddingRest": { + "no": 939, + "name": "CTRL/segmented/lg/padding/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-lg-padding-rest" + }, + "ctrlSegmentedLgPaddingHover": { + "no": 940, + "name": "CTRL/segmented/lg/padding/hover", + "fst_reference": "CTRL/segmented/lg/padding/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-lg-padding-hover" + }, + "ctrlSegmentedLgPaddingPressed": { + "no": 941, + "name": "CTRL/segmented/lg/padding/pressed", + "fst_reference": "CTRL/segmented/lg/padding/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-lg-padding-pressed" + }, + "ctrlSegmentedSmItemCornerRest": { + "no": 942, + "name": "CTRL/segmented/sm/item/corner/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-sm-item-corner-rest" + }, + "ctrlSegmentedSmItemCornerHover": { + "no": 943, + "name": "CTRL/segmented/sm/item/corner/hover", + "fst_reference": "CTRL/segmented/sm/item/corner/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-sm-item-corner-hover" + }, + "ctrlSegmentedSmItemCornerPressed": { + "no": 944, + "name": "CTRL/segmented/sm/item/corner/pressed", + "fst_reference": "CTRL/segmented/sm/item/corner/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-sm-item-corner-pressed" + }, + "ctrlSegmentedLgItemCornerRest": { + "no": 945, + "name": "CTRL/segmented/lg/item/corner/rest", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-lg-item-corner-rest" + }, + "ctrlSegmentedLgItemCornerHover": { + "no": 946, + "name": "CTRL/segmented/lg/item/corner/hover", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-lg-item-corner-hover" + }, + "ctrlSegmentedLgItemCornerPressed": { + "no": 947, + "name": "CTRL/segmented/lg/item/corner/pressed", + "fst_reference": "corner/ctrl/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-lg-item-corner-pressed" + }, + "ctrlSegmentedSmCornerRest": { + "no": 948, + "name": "CTRL/segmented/sm/corner/rest", + "fst_reference": "corner/ctrl-sm/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-sm-corner-rest" + }, + "ctrlSegmentedSmCornerHover": { + "no": 949, + "name": "CTRL/segmented/sm/corner/hover", + "fst_reference": "corner/ctrl-sm/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-sm-corner-hover" + }, + "ctrlSegmentedSmCornerPressed": { + "no": 950, + "name": "CTRL/segmented/sm/corner/pressed", + "fst_reference": "corner/ctrl-sm/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-sm-corner-pressed" + }, + "ctrlSegmentedLgCornerRest": { + "no": 951, + "name": "CTRL/segmented/lg/corner/rest", + "fst_reference": "corner/ctrl-lg/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-lg-corner-rest" + }, + "ctrlSegmentedLgCornerHover": { + "no": 952, + "name": "CTRL/segmented/lg/corner/hover", + "fst_reference": "corner/ctrl-lg/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-lg-corner-hover" + }, + "ctrlSegmentedLgCornerPressed": { + "no": 953, + "name": "CTRL/segmented/lg/corner/pressed", + "fst_reference": "corner/ctrl-lg/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-lg-corner-pressed" + }, + "ctrlLiteFilterStrokeWidthSelected": { + "no": 954, + "name": "CTRL/liteFilter/strokeWidth/selected", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Lite filter"], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-lite-filter-stroke-width-selected" + }, + "materialAcrylicShellDefaultSolid": { + "no": 955, + "name": "material/acrylic/shell-default/(solid)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-material-acrylic-shell-default-solid" + }, + "materialAcrylicShellDefaultColorBlend": { + "no": 956, + "name": "material/acrylic/shell-default/(colorBlend)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-material-acrylic-shell-default-color-blend" + }, + "materialAcrylicShellDefaultLumBlend": { + "no": 957, + "name": "material/acrylic/shell-default/(lumBlend)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-material-acrylic-shell-default-lum-blend" + }, + "backgroundCardOnSecondaryDefaultRest": { + "no": 958, + "name": "background/card/onSecondary/default/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-background-card-on-secondary-default-rest" + }, + "backgroundCardOnSecondaryAltRest": { + "no": 959, + "name": "background/card/onSecondary/alt/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/card/onPrimary/default/rest", + "exceptions": [], + "cssName": "--smtc-background-card-on-secondary-alt-rest" + }, + "backgroundCardOnSecondaryAltHover": { + "no": 960, + "name": "background/card/onSecondary/alt/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/card/onPrimary/default/hover", + "exceptions": [], + "cssName": "--smtc-background-card-on-secondary-alt-hover" + }, + "backgroundCardOnSecondaryAltPressed": { + "no": 961, + "name": "background/card/onSecondary/alt/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/card/onPrimary/default/pressed", + "exceptions": [], + "cssName": "--smtc-background-card-on-secondary-alt-pressed" + }, + "backgroundCardOnSecondaryAltDisabled": { + "no": 962, + "name": "background/card/onSecondary/alt/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/card/onPrimary/default/pressed", + "exceptions": [], + "cssName": "--smtc-background-card-on-secondary-alt-disabled" + }, + "backgroundCardOnSecondaryDefaultHover": { + "no": 963, + "name": "background/card/onSecondary/default/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Hover", + "exceptions": [], + "cssName": "--smtc-background-card-on-secondary-default-hover" + }, + "backgroundCardOnSecondaryDefaultPressed": { + "no": 964, + "name": "background/card/onSecondary/default/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Pressed", + "exceptions": [], + "cssName": "--smtc-background-card-on-secondary-default-pressed" + }, + "backgroundCardOnSecondaryDefaultDisabled": { + "no": 965, + "name": "background/card/onSecondary/default/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-background-card-on-secondary-default-disabled" + }, + "backgroundCardOnSecondaryDefaultSelected": { + "no": 966, + "name": "background/card/onSecondary/default/selected", + "fst_reference": "background/card/onSecondary/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Selected", + "exceptions": [], + "cssName": "--smtc-background-card-on-secondary-default-selected" + }, + "backgroundCardOnFlyoutDefaultRest": { + "no": 967, + "name": "background/card/onFlyout/default/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/card/onPrimary/default/rest", + "exceptions": [], + "cssName": "--smtc-background-card-on-flyout-default-rest" + }, + "backgroundCardOnFlyoutDefaultHover": { + "no": 968, + "name": "background/card/onFlyout/default/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/card/onPrimary/default/hover", + "exceptions": [], + "cssName": "--smtc-background-card-on-flyout-default-hover" + }, + "backgroundCardOnFlyoutDefaultPressed": { + "no": 969, + "name": "background/card/onFlyout/default/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/card/onPrimary/default/pressed", + "exceptions": [], + "cssName": "--smtc-background-card-on-flyout-default-pressed" + }, + "backgroundCardOnFlyoutDefaultDisabled": { + "no": 970, + "name": "background/card/onFlyout/default/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "background/card/onPrimary/default/pressed", + "exceptions": [], + "cssName": "--smtc-background-card-on-flyout-default-disabled" + }, + "ctrlProgressLgHeightFilled": { + "no": 971, + "name": "CTRL/progress/lg/height/filled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thick", + "exceptions": [], + "cssName": "--smtc-ctrl-progress-lg-height-filled" + }, + "ctrlProgressLgHeightEmpty": { + "no": 972, + "name": "CTRL/progress/lg/height/empty", + "fst_reference": "CTRL/progress/lg/height/filled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thick", + "exceptions": [], + "cssName": "--smtc-ctrl-progress-lg-height-empty" + }, + "textStyleDefaultDisplayFontFamily": { + "no": 973, + "name": "text/style/default/display/fontFamily", + "fst_reference": "text/style/default/regular/fontFamily", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-default-display-font-family" + }, + "textStyleDefaultDisplayWeight": { + "no": 974, + "name": "text/style/default/display/weight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-default-display-weight" + }, + "textStyleDefaultDisplayLetterSpacing": { + "no": 975, + "name": "text/style/default/display/letterSpacing", + "fst_reference": "text/style/default/regular/letterSpacing", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-style-default-display-letter-spacing" + } +} diff --git a/packages/semantic-tokens/src/components/avatar/tokens.ts b/packages/semantic-tokens/src/components/avatar/tokens.ts new file mode 100644 index 00000000000000..4658591a4a6411 --- /dev/null +++ b/packages/semantic-tokens/src/components/avatar/tokens.ts @@ -0,0 +1,57 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + sizeCtrlDefaultRaw, + cornerCircularRaw, + sizeCtrlIconRaw, + strokeWidthDefaultRaw, + cornerCtrlRestRaw, + textGlobalBody3FontSizeRaw, + textGlobalBody3LineHeightRaw, + backgroundCtrlBrandRestRaw, + backgroundLayerPrimarySolidRaw, +} from '../../control/variables'; +import { + borderRadiusCircular, + colorNeutralBackground6, + colorNeutralForeground3, + borderRadiusMedium, + strokeWidthThick, + fontSizeBase300, +} from '../../legacy/tokens'; +import { + ctrlAvatarSizeRaw, + ctrlAvatarCornerItemRaw, + ctrlAvatarBackgroundRaw, + ctrlAvatarForegroundRaw, + ctrlAvatarIconSizeRaw, + ctrlAvatarPresenceBadgeSizeRaw, + ctrlAvatarActiveRingSizeRaw, + ctrlAvatarPresenceBadgePaddingBottomRightOffsetRaw, + ctrlAvatarCornerGroupRaw, + ctrlAvatarActiveRingStrokeWidthRaw, + ctrlAvatarPresenceBadgeStrokeWidthRaw, + ctrlAvatarTextFontSizeRaw, + ctrlAvatarTextLineHeightRaw, + ctrlAvatarTextPaddingTopOffsetRaw, + ctrlAvatarActiveRingStrokeRaw, + ctrlAvatarShowCutoutRaw, + ctrlAvatarPresenceBadgeBackgroundBehindBadgeRaw, +} from './variables'; + +export const ctrlAvatarSize = `var(${ctrlAvatarSizeRaw}, var(${sizeCtrlDefaultRaw}, 32px))`; +export const ctrlAvatarCornerItem = `var(${ctrlAvatarCornerItemRaw}, var(${cornerCircularRaw}, ${borderRadiusCircular}))`; +export const ctrlAvatarBackground = `var(${ctrlAvatarBackgroundRaw}, ${colorNeutralBackground6})`; +export const ctrlAvatarForeground = `var(${ctrlAvatarForegroundRaw}, ${colorNeutralForeground3})`; +export const ctrlAvatarIconSize = `var(${ctrlAvatarIconSizeRaw}, var(${sizeCtrlIconRaw}))`; +export const ctrlAvatarPresenceBadgeSize = `var(${ctrlAvatarPresenceBadgeSizeRaw})`; +export const ctrlAvatarActiveRingSize = `var(${ctrlAvatarActiveRingSizeRaw})`; +export const ctrlAvatarPresenceBadgePaddingBottomRightOffset = `var(${ctrlAvatarPresenceBadgePaddingBottomRightOffsetRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlAvatarCornerGroup = `var(${ctrlAvatarCornerGroupRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusMedium}))`; +export const ctrlAvatarActiveRingStrokeWidth = `var(${ctrlAvatarActiveRingStrokeWidthRaw}, ${strokeWidthThick})`; +export const ctrlAvatarPresenceBadgeStrokeWidth = `var(${ctrlAvatarPresenceBadgeStrokeWidthRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlAvatarTextFontSize = `var(${ctrlAvatarTextFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}, ${fontSizeBase300}))`; +export const ctrlAvatarTextLineHeight = `var(${ctrlAvatarTextLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}, 1))`; +export const ctrlAvatarTextPaddingTopOffset = `var(${ctrlAvatarTextPaddingTopOffsetRaw}, unset)`; +export const ctrlAvatarActiveRingStroke = `var(${ctrlAvatarActiveRingStrokeRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const ctrlAvatarShowCutout = `var(${ctrlAvatarShowCutoutRaw})`; +export const ctrlAvatarPresenceBadgeBackgroundBehindBadge = `var(${ctrlAvatarPresenceBadgeBackgroundBehindBadgeRaw}, var(${backgroundLayerPrimarySolidRaw}, white))`; diff --git a/packages/semantic-tokens/src/components/avatar/variables.ts b/packages/semantic-tokens/src/components/avatar/variables.ts new file mode 100644 index 00000000000000..8289782260d1bb --- /dev/null +++ b/packages/semantic-tokens/src/components/avatar/variables.ts @@ -0,0 +1,20 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlAvatarSizeRaw = '--smtc-ctrl-avatar-size'; +export const ctrlAvatarCornerItemRaw = '--smtc-ctrl-avatar-corner-item'; +export const ctrlAvatarBackgroundRaw = '--smtc-ctrl-avatar-background'; +export const ctrlAvatarForegroundRaw = '--smtc-ctrl-avatar-foreground'; +export const ctrlAvatarIconSizeRaw = '--smtc-ctrl-avatar-icon-size'; +export const ctrlAvatarPresenceBadgeSizeRaw = '--smtc-ctrl-avatar-presence-badge-size'; +export const ctrlAvatarActiveRingSizeRaw = '--smtc-ctrl-avatar-active-ring-size'; +export const ctrlAvatarPresenceBadgePaddingBottomRightOffsetRaw = + '--smtc-ctrl-avatar-presence-badge-padding-bottom-right-offset'; +export const ctrlAvatarCornerGroupRaw = '--smtc-ctrl-avatar-corner-group'; +export const ctrlAvatarActiveRingStrokeWidthRaw = '--smtc-ctrl-avatar-active-ring-stroke-width'; +export const ctrlAvatarPresenceBadgeStrokeWidthRaw = '--smtc-ctrl-avatar-presence-badge-stroke-width'; +export const ctrlAvatarTextFontSizeRaw = '--smtc-ctrl-avatar-text-font-size'; +export const ctrlAvatarTextLineHeightRaw = '--smtc-ctrl-avatar-text-line-height'; +export const ctrlAvatarTextPaddingTopOffsetRaw = '--smtc-ctrl-avatar-text-padding-top-offset'; +export const ctrlAvatarActiveRingStrokeRaw = '--smtc-ctrl-avatar-active-ring-stroke'; +export const ctrlAvatarShowCutoutRaw = '--smtc-ctrl-avatar-show-cutout'; +export const ctrlAvatarPresenceBadgeBackgroundBehindBadgeRaw = + '--smtc-ctrl-avatar-presence-badge-background-behind-badge'; diff --git a/packages/semantic-tokens/src/components/badge/tokens.ts b/packages/semantic-tokens/src/components/badge/tokens.ts new file mode 100644 index 00000000000000..f41ed94e29ca1e --- /dev/null +++ b/packages/semantic-tokens/src/components/badge/tokens.ts @@ -0,0 +1,48 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { iconThemeCtrlDefaultRestRaw } from '../../control/variables'; +import { borderRadiusMedium, spacingHorizontalXS, spacingHorizontalXXS } from '../../legacy/tokens'; +import { + ctrlBadgeTextPaddingTopRaw, + ctrlBadgeTextPaddingBottomRaw, + ctrlBadgeSmTextPaddingTopRaw, + ctrlBadgeSmTextPaddingBottomRaw, + ctrlBadgeLgTextPaddingTopRaw, + ctrlBadgeLgTextPaddingBottomRaw, + ctrlBadgeIconThemeRaw, + ctrlBadgeBeaconSizeRaw, + ctrlBadgeSizeRaw, + ctrlBadgeCornerRaw, + ctrlBadgeGapRaw, + ctrlBadgeIconSizeRaw, + ctrlBadgePaddingRaw, + ctrlBadgeSmSizeRaw, + ctrlBadgeSmCornerRaw, + ctrlBadgeSmIconSizeRaw, + ctrlBadgeSmPaddingRaw, + ctrlBadgeLgSizeRaw, + ctrlBadgeLgIconSizeRaw, + ctrlBadgeLgCornerRaw, + ctrlBadgeLgPaddingRaw, +} from './variables'; + +export const ctrlBadgeTextPaddingTop = `var(${ctrlBadgeTextPaddingTopRaw})`; +export const ctrlBadgeTextPaddingBottom = `var(${ctrlBadgeTextPaddingBottomRaw}, var(${ctrlBadgeTextPaddingTopRaw}))`; +export const ctrlBadgeSmTextPaddingTop = `var(${ctrlBadgeSmTextPaddingTopRaw})`; +export const ctrlBadgeSmTextPaddingBottom = `var(${ctrlBadgeSmTextPaddingBottomRaw}, var(${ctrlBadgeSmTextPaddingTopRaw}))`; +export const ctrlBadgeLgTextPaddingTop = `var(${ctrlBadgeLgTextPaddingTopRaw})`; +export const ctrlBadgeLgTextPaddingBottom = `var(${ctrlBadgeLgTextPaddingBottomRaw}, var(${ctrlBadgeLgTextPaddingTopRaw}))`; +export const ctrlBadgeIconTheme = `var(${ctrlBadgeIconThemeRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; +export const ctrlBadgeBeaconSize = `var(${ctrlBadgeBeaconSizeRaw})`; +export const ctrlBadgeSize = `var(${ctrlBadgeSizeRaw})`; +export const ctrlBadgeCorner = `var(${ctrlBadgeCornerRaw}, ${borderRadiusMedium})`; +export const ctrlBadgeGap = `var(${ctrlBadgeGapRaw})`; +export const ctrlBadgeIconSize = `var(${ctrlBadgeIconSizeRaw})`; +export const ctrlBadgePadding = `var(${ctrlBadgePaddingRaw}, ${spacingHorizontalXS})`; +export const ctrlBadgeSmSize = `var(${ctrlBadgeSmSizeRaw})`; +export const ctrlBadgeSmCorner = `var(${ctrlBadgeSmCornerRaw})`; +export const ctrlBadgeSmIconSize = `var(${ctrlBadgeSmIconSizeRaw})`; +export const ctrlBadgeSmPadding = `var(${ctrlBadgeSmPaddingRaw}, ${spacingHorizontalXXS})`; +export const ctrlBadgeLgSize = `var(${ctrlBadgeLgSizeRaw})`; +export const ctrlBadgeLgIconSize = `var(${ctrlBadgeLgIconSizeRaw})`; +export const ctrlBadgeLgCorner = `var(${ctrlBadgeLgCornerRaw})`; +export const ctrlBadgeLgPadding = `var(${ctrlBadgeLgPaddingRaw}, ${spacingHorizontalXS})`; diff --git a/packages/semantic-tokens/src/components/badge/variables.ts b/packages/semantic-tokens/src/components/badge/variables.ts new file mode 100644 index 00000000000000..2ed0c030dd6b67 --- /dev/null +++ b/packages/semantic-tokens/src/components/badge/variables.ts @@ -0,0 +1,22 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlBadgeTextPaddingTopRaw = '--smtc-ctrl-badge-text-padding-top'; +export const ctrlBadgeTextPaddingBottomRaw = '--smtc-ctrl-badge-text-padding-bottom'; +export const ctrlBadgeSmTextPaddingTopRaw = '--smtc-ctrl-badge-sm-text-padding-top'; +export const ctrlBadgeSmTextPaddingBottomRaw = '--smtc-ctrl-badge-sm-text-padding-bottom'; +export const ctrlBadgeLgTextPaddingTopRaw = '--smtc-ctrl-badge-lg-text-padding-top'; +export const ctrlBadgeLgTextPaddingBottomRaw = '--smtc-ctrl-badge-lg-text-padding-bottom'; +export const ctrlBadgeIconThemeRaw = '--smtc-ctrl-badge-icon-theme'; +export const ctrlBadgeBeaconSizeRaw = '--smtc-ctrl-badge-beacon-size'; +export const ctrlBadgeSizeRaw = '--smtc-ctrl-badge-size'; +export const ctrlBadgeCornerRaw = '--smtc-ctrl-badge-corner'; +export const ctrlBadgeGapRaw = '--smtc-ctrl-badge-gap'; +export const ctrlBadgeIconSizeRaw = '--smtc-ctrl-badge-icon-size'; +export const ctrlBadgePaddingRaw = '--smtc-ctrl-badge-padding'; +export const ctrlBadgeSmSizeRaw = '--smtc-ctrl-badge-sm-size'; +export const ctrlBadgeSmCornerRaw = '--smtc-ctrl-badge-sm-corner'; +export const ctrlBadgeSmIconSizeRaw = '--smtc-ctrl-badge-sm-icon-size'; +export const ctrlBadgeSmPaddingRaw = '--smtc-ctrl-badge-sm-padding'; +export const ctrlBadgeLgSizeRaw = '--smtc-ctrl-badge-lg-size'; +export const ctrlBadgeLgIconSizeRaw = '--smtc-ctrl-badge-lg-icon-size'; +export const ctrlBadgeLgCornerRaw = '--smtc-ctrl-badge-lg-corner'; +export const ctrlBadgeLgPaddingRaw = '--smtc-ctrl-badge-lg-padding'; diff --git a/packages/semantic-tokens/src/components/boolean/tokens.ts b/packages/semantic-tokens/src/components/boolean/tokens.ts new file mode 100644 index 00000000000000..ac02d2b56dd9a5 --- /dev/null +++ b/packages/semantic-tokens/src/components/boolean/tokens.ts @@ -0,0 +1,4 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { ctrlBooleanSelectionHintRaw } from './variables'; + +export const ctrlBooleanSelectionHint = `var(${ctrlBooleanSelectionHintRaw})`; diff --git a/packages/semantic-tokens/src/components/boolean/variables.ts b/packages/semantic-tokens/src/components/boolean/variables.ts new file mode 100644 index 00000000000000..e259f2844f56d3 --- /dev/null +++ b/packages/semantic-tokens/src/components/boolean/variables.ts @@ -0,0 +1,2 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlBooleanSelectionHintRaw = '--smtc-ctrl-boolean-selection-hint'; diff --git a/packages/semantic-tokens/src/components/card/tokens.ts b/packages/semantic-tokens/src/components/card/tokens.ts new file mode 100644 index 00000000000000..8453e9b16ecb04 --- /dev/null +++ b/packages/semantic-tokens/src/components/card/tokens.ts @@ -0,0 +1,12 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + ctrlCardStateRestRaw, + ctrlCardStateHoverRaw, + ctrlCardStatePressedRaw, + ctrlCardStateDisabledRaw, +} from './variables'; + +export const ctrlCardStateRest = `var(${ctrlCardStateRestRaw})`; +export const ctrlCardStateHover = `var(${ctrlCardStateHoverRaw})`; +export const ctrlCardStatePressed = `var(${ctrlCardStatePressedRaw})`; +export const ctrlCardStateDisabled = `var(${ctrlCardStateDisabledRaw})`; diff --git a/packages/semantic-tokens/src/components/card/variables.ts b/packages/semantic-tokens/src/components/card/variables.ts new file mode 100644 index 00000000000000..df257d1d76a4fb --- /dev/null +++ b/packages/semantic-tokens/src/components/card/variables.ts @@ -0,0 +1,5 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlCardStateRestRaw = '--smtc-ctrl-card-state-rest'; +export const ctrlCardStateHoverRaw = '--smtc-ctrl-card-state-hover'; +export const ctrlCardStatePressedRaw = '--smtc-ctrl-card-state-pressed'; +export const ctrlCardStateDisabledRaw = '--smtc-ctrl-card-state-disabled'; diff --git a/packages/semantic-tokens/src/components/choice/tokens.ts b/packages/semantic-tokens/src/components/choice/tokens.ts new file mode 100644 index 00000000000000..80caeea63d7222 --- /dev/null +++ b/packages/semantic-tokens/src/components/choice/tokens.ts @@ -0,0 +1,132 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + sizeCtrlIconRaw, + foregroundCtrlNeutralSecondaryRestRaw, + foregroundCtrlNeutralSecondaryDisabledRaw, + sizeCtrlIconSecondaryRaw, + cornerCircularRaw, + sizeCtrlSmIconRaw, + sizeCtrlLgIconRaw, +} from '../../control/variables'; +import { + spacingHorizontalS, + spacingVerticalS, + colorTransparentBackground, + colorNeutralStrokeAccessiblePressed, + colorNeutralStrokeAccessible, + colorNeutralStrokeAccessibleHover, + colorNeutralStrokeDisabled, + borderRadiusSmall, + borderRadiusCircular, +} from '../../legacy/tokens'; +import { + backgroundCtrlOutlineRestRaw, + backgroundCtrlOutlineHoverRaw, + backgroundCtrlOutlinePressedRaw, + backgroundCtrlOutlineDisabledRaw, +} from '../../nullable/variables'; +import { + ctrlChoicePaddingHorizontalRaw, + ctrlChoicePaddingVerticalRaw, + ctrlChoiceBaseSizeRaw, + ctrlChoiceIconThemeRaw, + ctrlChoiceBaseBackgroundRestRaw, + ctrlChoiceBaseBackgroundHoverRaw, + ctrlChoiceBaseBackgroundPressedRaw, + ctrlChoiceBaseBackgroundDisabledRaw, + ctrlChoiceBaseStrokeRestRaw, + ctrlChoiceBaseStrokeHoverRaw, + ctrlChoiceBaseStrokePressedRaw, + ctrlChoiceBaseStrokeDisabledRaw, + ctrlChoiceCheckboxIconSizeRaw, + ctrlChoiceCheckboxCornerRaw, + ctrlChoiceCheckboxIndeterminateCornerRaw, + ctrlChoiceCheckboxIndeterminateWidthRaw, + ctrlChoiceCheckboxIndeterminateHeightRaw, + ctrlChoiceRadioCornerRaw, + ctrlChoiceSwitchCornerRaw, + ctrlChoiceSwitchHeightRaw, + ctrlChoiceSwitchWidthRaw, + ctrlChoiceSwitchPaddingRestRaw, + ctrlChoiceSwitchPaddingHoverRaw, + ctrlChoiceSwitchPaddingPressedRaw, + ctrlChoiceSwitchThumbWidthRestRaw, + ctrlChoiceSwitchThumbWidthHoverRaw, + ctrlChoiceSwitchThumbWidthPressedRaw, + ctrlChoiceRadioDotSizeRestRaw, + ctrlChoiceRadioDotSizeHoverRaw, + ctrlChoiceRadioDotSizePressedRaw, + ctrlChoiceSmBaseSizeRaw, + ctrlChoiceSmCheckboxIconSizeRaw, + ctrlChoiceSmCheckboxCornerRaw, + ctrlChoiceSmRadioDotSizeRaw, + ctrlChoiceSmSwitchWidthRaw, + ctrlChoiceSmSwitchHeightRaw, + ctrlChoiceSmSwitchThumbWidthRestRaw, + ctrlChoiceSmSwitchThumbWidthHoverRaw, + ctrlChoiceSmSwitchThumbWidthPressedRaw, + ctrlChoiceLgBaseSizeRaw, + ctrlChoiceLgCheckboxCornerRaw, + ctrlChoiceLgCheckboxIconSizeRaw, + ctrlChoiceLgRadioDotSizeRestRaw, + ctrlChoiceLgRadioDotSizeHoverRaw, + ctrlChoiceLgRadioDotSizePressedRaw, + ctrlChoiceLgSwitchWidthRaw, + ctrlChoiceLgSwitchHeightRaw, + ctrlChoiceLgSwitchThumbWidthRestRaw, + ctrlChoiceLgSwitchThumbWidthHoverRaw, + ctrlChoiceLgSwitchThumbWidthPressedRaw, + ctrlChoiceSwitchThumbShadowRaw, +} from './variables'; + +export const ctrlChoicePaddingHorizontal = `var(${ctrlChoicePaddingHorizontalRaw}, ${spacingHorizontalS})`; +export const ctrlChoicePaddingVertical = `var(${ctrlChoicePaddingVerticalRaw}, ${spacingVerticalS})`; +export const ctrlChoiceBaseSize = `var(${ctrlChoiceBaseSizeRaw}, var(${sizeCtrlIconRaw}, 20px))`; +export const ctrlChoiceIconTheme = `var(${ctrlChoiceIconThemeRaw})`; +export const ctrlChoiceBaseBackgroundRest = `var(${ctrlChoiceBaseBackgroundRestRaw}, var(${backgroundCtrlOutlineRestRaw}, ${colorTransparentBackground}))`; +export const ctrlChoiceBaseBackgroundHover = `var(${ctrlChoiceBaseBackgroundHoverRaw}, var(${backgroundCtrlOutlineHoverRaw}, unset))`; +export const ctrlChoiceBaseBackgroundPressed = `var(${ctrlChoiceBaseBackgroundPressedRaw}, var(${backgroundCtrlOutlinePressedRaw}, ${colorNeutralStrokeAccessiblePressed}))`; +export const ctrlChoiceBaseBackgroundDisabled = `var(${ctrlChoiceBaseBackgroundDisabledRaw}, var(${backgroundCtrlOutlineDisabledRaw}, ${colorTransparentBackground}))`; +export const ctrlChoiceBaseStrokeRest = `var(${ctrlChoiceBaseStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralStrokeAccessible}))`; +export const ctrlChoiceBaseStrokeHover = `var(${ctrlChoiceBaseStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralStrokeAccessibleHover}))`; +export const ctrlChoiceBaseStrokePressed = `var(${ctrlChoiceBaseStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralStrokeAccessiblePressed}))`; +export const ctrlChoiceBaseStrokeDisabled = `var(${ctrlChoiceBaseStrokeDisabledRaw}, var(${foregroundCtrlNeutralSecondaryDisabledRaw}, ${colorNeutralStrokeDisabled}))`; +export const ctrlChoiceCheckboxIconSize = `var(${ctrlChoiceCheckboxIconSizeRaw}, var(${sizeCtrlIconSecondaryRaw}))`; +export const ctrlChoiceCheckboxCorner = `var(${ctrlChoiceCheckboxCornerRaw}, ${borderRadiusSmall})`; +export const ctrlChoiceCheckboxIndeterminateCorner = `var(${ctrlChoiceCheckboxIndeterminateCornerRaw}, var(${cornerCircularRaw}))`; +export const ctrlChoiceCheckboxIndeterminateWidth = `var(${ctrlChoiceCheckboxIndeterminateWidthRaw})`; +export const ctrlChoiceCheckboxIndeterminateHeight = `var(${ctrlChoiceCheckboxIndeterminateHeightRaw})`; +export const ctrlChoiceRadioCorner = `var(${ctrlChoiceRadioCornerRaw}, var(${cornerCircularRaw}, ${borderRadiusCircular}))`; +export const ctrlChoiceSwitchCorner = `var(${ctrlChoiceSwitchCornerRaw}, var(${cornerCircularRaw}, ${borderRadiusCircular}))`; +export const ctrlChoiceSwitchHeight = `var(${ctrlChoiceSwitchHeightRaw}, var(${sizeCtrlIconRaw}, 20px))`; +export const ctrlChoiceSwitchWidth = `var(${ctrlChoiceSwitchWidthRaw}, 40px)`; +export const ctrlChoiceSwitchPaddingRest = `var(${ctrlChoiceSwitchPaddingRestRaw}, 1px)`; +export const ctrlChoiceSwitchPaddingHover = `var(${ctrlChoiceSwitchPaddingHoverRaw}, var(${ctrlChoiceSwitchPaddingRestRaw}, 1px))`; +export const ctrlChoiceSwitchPaddingPressed = `var(${ctrlChoiceSwitchPaddingPressedRaw}, var(${ctrlChoiceSwitchPaddingRestRaw}, 1px))`; +export const ctrlChoiceSwitchThumbWidthRest = `var(${ctrlChoiceSwitchThumbWidthRestRaw}, 18px)`; +export const ctrlChoiceSwitchThumbWidthHover = `var(${ctrlChoiceSwitchThumbWidthHoverRaw}, var(${ctrlChoiceSwitchThumbWidthRestRaw}, 18px))`; +export const ctrlChoiceSwitchThumbWidthPressed = `var(${ctrlChoiceSwitchThumbWidthPressedRaw}, var(${ctrlChoiceSwitchThumbWidthRestRaw}, 18px))`; +export const ctrlChoiceRadioDotSizeRest = `var(${ctrlChoiceRadioDotSizeRestRaw}, 16px)`; +export const ctrlChoiceRadioDotSizeHover = `var(${ctrlChoiceRadioDotSizeHoverRaw}, var(${ctrlChoiceRadioDotSizeRestRaw}))`; +export const ctrlChoiceRadioDotSizePressed = `var(${ctrlChoiceRadioDotSizePressedRaw}, var(${ctrlChoiceRadioDotSizeRestRaw}))`; +export const ctrlChoiceSmBaseSize = `var(${ctrlChoiceSmBaseSizeRaw}, var(${sizeCtrlSmIconRaw}))`; +export const ctrlChoiceSmCheckboxIconSize = `var(${ctrlChoiceSmCheckboxIconSizeRaw}, var(${sizeCtrlIconSecondaryRaw}))`; +export const ctrlChoiceSmCheckboxCorner = `var(${ctrlChoiceSmCheckboxCornerRaw})`; +export const ctrlChoiceSmRadioDotSize = `var(${ctrlChoiceSmRadioDotSizeRaw})`; +export const ctrlChoiceSmSwitchWidth = `var(${ctrlChoiceSmSwitchWidthRaw})`; +export const ctrlChoiceSmSwitchHeight = `var(${ctrlChoiceSmSwitchHeightRaw}, var(${sizeCtrlSmIconRaw}))`; +export const ctrlChoiceSmSwitchThumbWidthRest = `var(${ctrlChoiceSmSwitchThumbWidthRestRaw})`; +export const ctrlChoiceSmSwitchThumbWidthHover = `var(${ctrlChoiceSmSwitchThumbWidthHoverRaw}, var(${ctrlChoiceSmSwitchThumbWidthRestRaw}))`; +export const ctrlChoiceSmSwitchThumbWidthPressed = `var(${ctrlChoiceSmSwitchThumbWidthPressedRaw}, var(${ctrlChoiceSmSwitchThumbWidthRestRaw}))`; +export const ctrlChoiceLgBaseSize = `var(${ctrlChoiceLgBaseSizeRaw}, var(${sizeCtrlLgIconRaw}))`; +export const ctrlChoiceLgCheckboxCorner = `var(${ctrlChoiceLgCheckboxCornerRaw})`; +export const ctrlChoiceLgCheckboxIconSize = `var(${ctrlChoiceLgCheckboxIconSizeRaw}, var(${sizeCtrlIconSecondaryRaw}))`; +export const ctrlChoiceLgRadioDotSizeRest = `var(${ctrlChoiceLgRadioDotSizeRestRaw})`; +export const ctrlChoiceLgRadioDotSizeHover = `var(${ctrlChoiceLgRadioDotSizeHoverRaw}, var(${ctrlChoiceLgRadioDotSizeRestRaw}))`; +export const ctrlChoiceLgRadioDotSizePressed = `var(${ctrlChoiceLgRadioDotSizePressedRaw}, var(${ctrlChoiceLgRadioDotSizeRestRaw}))`; +export const ctrlChoiceLgSwitchWidth = `var(${ctrlChoiceLgSwitchWidthRaw})`; +export const ctrlChoiceLgSwitchHeight = `var(${ctrlChoiceLgSwitchHeightRaw}, var(${sizeCtrlLgIconRaw}))`; +export const ctrlChoiceLgSwitchThumbWidthRest = `var(${ctrlChoiceLgSwitchThumbWidthRestRaw})`; +export const ctrlChoiceLgSwitchThumbWidthHover = `var(${ctrlChoiceLgSwitchThumbWidthHoverRaw}, var(${ctrlChoiceLgSwitchThumbWidthRestRaw}))`; +export const ctrlChoiceLgSwitchThumbWidthPressed = `var(${ctrlChoiceLgSwitchThumbWidthPressedRaw}, var(${ctrlChoiceLgSwitchThumbWidthRestRaw}))`; +export const ctrlChoiceSwitchThumbShadow = `var(${ctrlChoiceSwitchThumbShadowRaw}, unset)`; diff --git a/packages/semantic-tokens/src/components/choice/variables.ts b/packages/semantic-tokens/src/components/choice/variables.ts new file mode 100644 index 00000000000000..9ace362e06fab3 --- /dev/null +++ b/packages/semantic-tokens/src/components/choice/variables.ts @@ -0,0 +1,52 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlChoicePaddingHorizontalRaw = '--smtc-ctrl-choice-padding-horizontal'; +export const ctrlChoicePaddingVerticalRaw = '--smtc-ctrl-choice-padding-vertical'; +export const ctrlChoiceBaseSizeRaw = '--smtc-ctrl-choice-base-size'; +export const ctrlChoiceIconThemeRaw = '--smtc-ctrl-choice-icon-theme'; +export const ctrlChoiceBaseBackgroundRestRaw = '--smtc-ctrl-choice-base-background-rest'; +export const ctrlChoiceBaseBackgroundHoverRaw = '--smtc-ctrl-choice-base-background-hover'; +export const ctrlChoiceBaseBackgroundPressedRaw = '--smtc-ctrl-choice-base-background-pressed'; +export const ctrlChoiceBaseBackgroundDisabledRaw = '--smtc-ctrl-choice-base-background-disabled'; +export const ctrlChoiceBaseStrokeRestRaw = '--smtc-ctrl-choice-base-stroke-rest'; +export const ctrlChoiceBaseStrokeHoverRaw = '--smtc-ctrl-choice-base-stroke-hover'; +export const ctrlChoiceBaseStrokePressedRaw = '--smtc-ctrl-choice-base-stroke-pressed'; +export const ctrlChoiceBaseStrokeDisabledRaw = '--smtc-ctrl-choice-base-stroke-disabled'; +export const ctrlChoiceCheckboxIconSizeRaw = '--smtc-ctrl-choice-checkbox-icon-size'; +export const ctrlChoiceCheckboxCornerRaw = '--smtc-ctrl-choice-checkbox-corner'; +export const ctrlChoiceCheckboxIndeterminateCornerRaw = '--smtc-ctrl-choice-checkbox-indeterminate-corner'; +export const ctrlChoiceCheckboxIndeterminateWidthRaw = '--smtc-ctrl-choice-checkbox-indeterminate-width'; +export const ctrlChoiceCheckboxIndeterminateHeightRaw = '--smtc-ctrl-choice-checkbox-indeterminate-height'; +export const ctrlChoiceRadioCornerRaw = '--smtc-ctrl-choice-radio-corner'; +export const ctrlChoiceSwitchCornerRaw = '--smtc-ctrl-choice-switch-corner'; +export const ctrlChoiceSwitchHeightRaw = '--smtc-ctrl-choice-switch-height'; +export const ctrlChoiceSwitchWidthRaw = '--smtc-ctrl-choice-switch-width'; +export const ctrlChoiceSwitchPaddingRestRaw = '--smtc-ctrl-choice-switch-padding-rest'; +export const ctrlChoiceSwitchPaddingHoverRaw = '--smtc-ctrl-choice-switch-padding-hover'; +export const ctrlChoiceSwitchPaddingPressedRaw = '--smtc-ctrl-choice-switch-padding-pressed'; +export const ctrlChoiceSwitchThumbWidthRestRaw = '--smtc-ctrl-choice-switch-thumb-width-rest'; +export const ctrlChoiceSwitchThumbWidthHoverRaw = '--smtc-ctrl-choice-switch-thumb-width-hover'; +export const ctrlChoiceSwitchThumbWidthPressedRaw = '--smtc-ctrl-choice-switch-thumb-width-pressed'; +export const ctrlChoiceRadioDotSizeRestRaw = '--smtc-ctrl-choice-radio-dot-size-rest'; +export const ctrlChoiceRadioDotSizeHoverRaw = '--smtc-ctrl-choice-radio-dot-size-hover'; +export const ctrlChoiceRadioDotSizePressedRaw = '--smtc-ctrl-choice-radio-dot-size-pressed'; +export const ctrlChoiceSmBaseSizeRaw = '--smtc-ctrl-choice-sm-base-size'; +export const ctrlChoiceSmCheckboxIconSizeRaw = '--smtc-ctrl-choice-sm-checkbox-icon-size'; +export const ctrlChoiceSmCheckboxCornerRaw = '--smtc-ctrl-choice-sm-checkbox-corner'; +export const ctrlChoiceSmRadioDotSizeRaw = '--smtc-ctrl-choice-sm-radio-dot-size'; +export const ctrlChoiceSmSwitchWidthRaw = '--smtc-ctrl-choice-sm-switch-width'; +export const ctrlChoiceSmSwitchHeightRaw = '--smtc-ctrl-choice-sm-switch-height'; +export const ctrlChoiceSmSwitchThumbWidthRestRaw = '--smtc-ctrl-choice-sm-switch-thumb-width-rest'; +export const ctrlChoiceSmSwitchThumbWidthHoverRaw = '--smtc-ctrl-choice-sm-switch-thumb-width-hover'; +export const ctrlChoiceSmSwitchThumbWidthPressedRaw = '--smtc-ctrl-choice-sm-switch-thumb-width-pressed'; +export const ctrlChoiceLgBaseSizeRaw = '--smtc-ctrl-choice-lg-base-size'; +export const ctrlChoiceLgCheckboxCornerRaw = '--smtc-ctrl-choice-lg-checkbox-corner'; +export const ctrlChoiceLgCheckboxIconSizeRaw = '--smtc-ctrl-choice-lg-checkbox-icon-size'; +export const ctrlChoiceLgRadioDotSizeRestRaw = '--smtc-ctrl-choice-lg-radio-dot-size-rest'; +export const ctrlChoiceLgRadioDotSizeHoverRaw = '--smtc-ctrl-choice-lg-radio-dot-size-hover'; +export const ctrlChoiceLgRadioDotSizePressedRaw = '--smtc-ctrl-choice-lg-radio-dot-size-pressed'; +export const ctrlChoiceLgSwitchWidthRaw = '--smtc-ctrl-choice-lg-switch-width'; +export const ctrlChoiceLgSwitchHeightRaw = '--smtc-ctrl-choice-lg-switch-height'; +export const ctrlChoiceLgSwitchThumbWidthRestRaw = '--smtc-ctrl-choice-lg-switch-thumb-width-rest'; +export const ctrlChoiceLgSwitchThumbWidthHoverRaw = '--smtc-ctrl-choice-lg-switch-thumb-width-hover'; +export const ctrlChoiceLgSwitchThumbWidthPressedRaw = '--smtc-ctrl-choice-lg-switch-thumb-width-pressed'; +export const ctrlChoiceSwitchThumbShadowRaw = '--smtc-ctrl-choice-switch-thumb-shadow'; diff --git a/packages/semantic-tokens/src/components/composer/tokens.ts b/packages/semantic-tokens/src/components/composer/tokens.ts new file mode 100644 index 00000000000000..ab041a173fd85a --- /dev/null +++ b/packages/semantic-tokens/src/components/composer/tokens.ts @@ -0,0 +1,71 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { backgroundFlyoutSolidRaw } from '../../control/variables'; +import { + ctrlComposerInputBottomStrokeWidthSelectedRestRaw, + ctrlComposerInputBottomStrokeWidthRestRaw, + ctrlComposerInputBottomStrokeWidthHoverRaw, + ctrlComposerInputBottomStrokeWidthPressedRaw, + ctrlComposerInputCornerRestRaw, + ctrlComposerInputCornerHoverRaw, + ctrlComposerInputCornerPressedRaw, + ctrlComposerInputBackgroundRestRaw, + ctrlComposerInputBackgroundPressedRaw, + ctrlComposerInputBackgroundDisabledRaw, + ctrlComposerInputBackgroundSelectedRestRaw, + ctrlComposerInputBackgroundHoverRaw, + ctrlComposerInputStrokeRestRaw, + ctrlComposerInputStrokeHoverUsesGradientRaw, + ctrlComposerInputStrokePressedUsesGradientRaw, + ctrlComposerInputStrokeDisabledUsesGradientRaw, + ctrlComposerInputStrokeSelectedRestUsesGradientRaw, + ctrlComposerInputStrokeWidthRestRaw, + ctrlComposerInputStrokeWidthHoverRaw, + ctrlComposerInputStrokeWidthPressedRaw, + ctrlComposerInputStrokeWidthSelectedRestRaw, + ctrlComposerInputBottomStrokeRestRaw, + ctrlComposerInputBottomStrokeHoverRaw, + ctrlComposerInputBottomStrokePressedRaw, + ctrlComposerInputBottomStrokeDisabledRaw, + ctrlComposerInputBottomStrokeSelectedRestRaw, + ctrlComposerContainerCornerRaw, + ctrlComposerContainerBackgroundDefaultRaw, + ctrlComposerContainerBackgroundAcrylicColorBlendRaw, + ctrlComposerContainerBackgroundAcrylicLumBlendRaw, + ctrlComposerContainerStrokeDefaultRaw, + ctrlComposerInputShadowRaw, + ctrlComposerContainerShadowRaw, +} from './variables'; + +export const ctrlComposerInputBottomStrokeWidthSelectedRest = `var(${ctrlComposerInputBottomStrokeWidthSelectedRestRaw})`; +export const ctrlComposerInputBottomStrokeWidthRest = `var(${ctrlComposerInputBottomStrokeWidthRestRaw})`; +export const ctrlComposerInputBottomStrokeWidthHover = `var(${ctrlComposerInputBottomStrokeWidthHoverRaw})`; +export const ctrlComposerInputBottomStrokeWidthPressed = `var(${ctrlComposerInputBottomStrokeWidthPressedRaw})`; +export const ctrlComposerInputCornerRest = `var(${ctrlComposerInputCornerRestRaw})`; +export const ctrlComposerInputCornerHover = `var(${ctrlComposerInputCornerHoverRaw})`; +export const ctrlComposerInputCornerPressed = `var(${ctrlComposerInputCornerPressedRaw})`; +export const ctrlComposerInputBackgroundRest = `var(${ctrlComposerInputBackgroundRestRaw})`; +export const ctrlComposerInputBackgroundPressed = `var(${ctrlComposerInputBackgroundPressedRaw})`; +export const ctrlComposerInputBackgroundDisabled = `var(${ctrlComposerInputBackgroundDisabledRaw})`; +export const ctrlComposerInputBackgroundSelectedRest = `var(${ctrlComposerInputBackgroundSelectedRestRaw})`; +export const ctrlComposerInputBackgroundHover = `var(${ctrlComposerInputBackgroundHoverRaw})`; +export const ctrlComposerInputStrokeRest = `var(${ctrlComposerInputStrokeRestRaw}, unset)`; +export const ctrlComposerInputStrokeHoverUsesGradient = `var(${ctrlComposerInputStrokeHoverUsesGradientRaw}, unset)`; +export const ctrlComposerInputStrokePressedUsesGradient = `var(${ctrlComposerInputStrokePressedUsesGradientRaw}, unset)`; +export const ctrlComposerInputStrokeDisabledUsesGradient = `var(${ctrlComposerInputStrokeDisabledUsesGradientRaw}, unset)`; +export const ctrlComposerInputStrokeSelectedRestUsesGradient = `var(${ctrlComposerInputStrokeSelectedRestUsesGradientRaw}, unset)`; +export const ctrlComposerInputStrokeWidthRest = `var(${ctrlComposerInputStrokeWidthRestRaw})`; +export const ctrlComposerInputStrokeWidthHover = `var(${ctrlComposerInputStrokeWidthHoverRaw})`; +export const ctrlComposerInputStrokeWidthPressed = `var(${ctrlComposerInputStrokeWidthPressedRaw})`; +export const ctrlComposerInputStrokeWidthSelectedRest = `var(${ctrlComposerInputStrokeWidthSelectedRestRaw})`; +export const ctrlComposerInputBottomStrokeRest = `var(${ctrlComposerInputBottomStrokeRestRaw}, unset)`; +export const ctrlComposerInputBottomStrokeHover = `var(${ctrlComposerInputBottomStrokeHoverRaw}, unset)`; +export const ctrlComposerInputBottomStrokePressed = `var(${ctrlComposerInputBottomStrokePressedRaw}, unset)`; +export const ctrlComposerInputBottomStrokeDisabled = `var(${ctrlComposerInputBottomStrokeDisabledRaw}, unset)`; +export const ctrlComposerInputBottomStrokeSelectedRest = `var(${ctrlComposerInputBottomStrokeSelectedRestRaw}, unset)`; +export const ctrlComposerContainerCorner = `var(${ctrlComposerContainerCornerRaw})`; +export const ctrlComposerContainerBackgroundDefault = `var(${ctrlComposerContainerBackgroundDefaultRaw})`; +export const ctrlComposerContainerBackgroundAcrylicColorBlend = `var(${ctrlComposerContainerBackgroundAcrylicColorBlendRaw}, var(${backgroundFlyoutSolidRaw}))`; +export const ctrlComposerContainerBackgroundAcrylicLumBlend = `var(${ctrlComposerContainerBackgroundAcrylicLumBlendRaw}, var(${backgroundFlyoutSolidRaw}))`; +export const ctrlComposerContainerStrokeDefault = `var(${ctrlComposerContainerStrokeDefaultRaw}, unset)`; +export const ctrlComposerInputShadow = `var(${ctrlComposerInputShadowRaw})`; +export const ctrlComposerContainerShadow = `var(${ctrlComposerContainerShadowRaw})`; diff --git a/packages/semantic-tokens/src/components/composer/variables.ts b/packages/semantic-tokens/src/components/composer/variables.ts new file mode 100644 index 00000000000000..6cf0d686655fa9 --- /dev/null +++ b/packages/semantic-tokens/src/components/composer/variables.ts @@ -0,0 +1,39 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlComposerInputBottomStrokeWidthSelectedRestRaw = + '--smtc-ctrl-composer-input-bottom-stroke-width-selected-rest'; +export const ctrlComposerInputBottomStrokeWidthRestRaw = '--smtc-ctrl-composer-input-bottom-stroke-width-rest'; +export const ctrlComposerInputBottomStrokeWidthHoverRaw = '--smtc-ctrl-composer-input-bottom-stroke-width-hover'; +export const ctrlComposerInputBottomStrokeWidthPressedRaw = '--smtc-ctrl-composer-input-bottom-stroke-width-pressed'; +export const ctrlComposerInputCornerRestRaw = '--smtc-ctrl-composer-input-corner-rest'; +export const ctrlComposerInputCornerHoverRaw = '--smtc-ctrl-composer-input-corner-hover'; +export const ctrlComposerInputCornerPressedRaw = '--smtc-ctrl-composer-input-corner-pressed'; +export const ctrlComposerInputBackgroundRestRaw = '--smtc-ctrl-composer-input-background-rest'; +export const ctrlComposerInputBackgroundPressedRaw = '--smtc-ctrl-composer-input-background-pressed'; +export const ctrlComposerInputBackgroundDisabledRaw = '--smtc-ctrl-composer-input-background-disabled'; +export const ctrlComposerInputBackgroundSelectedRestRaw = '--smtc-ctrl-composer-input-background-selected-rest'; +export const ctrlComposerInputBackgroundHoverRaw = '--smtc-ctrl-composer-input-background-hover'; +export const ctrlComposerInputStrokeRestRaw = '--smtc-ctrl-composer-input-stroke-rest'; +export const ctrlComposerInputStrokeHoverUsesGradientRaw = '--smtc-ctrl-composer-input-stroke-hover-uses-gradient'; +export const ctrlComposerInputStrokePressedUsesGradientRaw = '--smtc-ctrl-composer-input-stroke-pressed-uses-gradient'; +export const ctrlComposerInputStrokeDisabledUsesGradientRaw = + '--smtc-ctrl-composer-input-stroke-disabled-uses-gradient'; +export const ctrlComposerInputStrokeSelectedRestUsesGradientRaw = + '--smtc-ctrl-composer-input-stroke-selected-rest-uses-gradient'; +export const ctrlComposerInputStrokeWidthRestRaw = '--smtc-ctrl-composer-input-stroke-width-rest'; +export const ctrlComposerInputStrokeWidthHoverRaw = '--smtc-ctrl-composer-input-stroke-width-hover'; +export const ctrlComposerInputStrokeWidthPressedRaw = '--smtc-ctrl-composer-input-stroke-width-pressed'; +export const ctrlComposerInputStrokeWidthSelectedRestRaw = '--smtc-ctrl-composer-input-stroke-width-selected-rest'; +export const ctrlComposerInputBottomStrokeRestRaw = '--smtc-ctrl-composer-input-bottom-stroke-rest'; +export const ctrlComposerInputBottomStrokeHoverRaw = '--smtc-ctrl-composer-input-bottom-stroke-hover'; +export const ctrlComposerInputBottomStrokePressedRaw = '--smtc-ctrl-composer-input-bottom-stroke-pressed'; +export const ctrlComposerInputBottomStrokeDisabledRaw = '--smtc-ctrl-composer-input-bottom-stroke-disabled'; +export const ctrlComposerInputBottomStrokeSelectedRestRaw = '--smtc-ctrl-composer-input-bottom-stroke-selected-rest'; +export const ctrlComposerContainerCornerRaw = '--smtc-ctrl-composer-container-corner'; +export const ctrlComposerContainerBackgroundDefaultRaw = '--smtc-ctrl-composer-container-background-default'; +export const ctrlComposerContainerBackgroundAcrylicColorBlendRaw = + '--smtc-ctrl-composer-container-background-acrylic-color-blend'; +export const ctrlComposerContainerBackgroundAcrylicLumBlendRaw = + '--smtc-ctrl-composer-container-background-acrylic-lum-blend'; +export const ctrlComposerContainerStrokeDefaultRaw = '--smtc-ctrl-composer-container-stroke-default'; +export const ctrlComposerInputShadowRaw = '--smtc-ctrl-composer-input-shadow'; +export const ctrlComposerContainerShadowRaw = '--smtc-ctrl-composer-container-shadow'; diff --git a/packages/semantic-tokens/src/components/dialog/tokens.ts b/packages/semantic-tokens/src/components/dialog/tokens.ts new file mode 100644 index 00000000000000..41b09323da7327 --- /dev/null +++ b/packages/semantic-tokens/src/components/dialog/tokens.ts @@ -0,0 +1,18 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { nullColorRaw, cornerCardRestRaw, backgroundLayerPrimarySolidRaw } from '../../control/variables'; +import { colorNeutralStroke2, borderRadiusXLarge, colorNeutralBackground1, shadow64 } from '../../legacy/tokens'; +import { + ctrlDialogBackgroundRaw, + ctrlDialogStrokeRaw, + ctrlDialogBaseCornerRaw, + ctrlDialogLayerBackgroundRaw, + ctrlDialogLayerPaddingBottomRaw, + ctrlDialogBaseShadowRaw, +} from './variables'; + +export const ctrlDialogBackground = `var(${ctrlDialogBackgroundRaw})`; +export const ctrlDialogStroke = `var(${ctrlDialogStrokeRaw}, var(${nullColorRaw}, ${colorNeutralStroke2}))`; +export const ctrlDialogBaseCorner = `var(${ctrlDialogBaseCornerRaw}, var(${cornerCardRestRaw}, ${borderRadiusXLarge}))`; +export const ctrlDialogLayerBackground = `var(${ctrlDialogLayerBackgroundRaw}, var(${backgroundLayerPrimarySolidRaw}, ${colorNeutralBackground1}))`; +export const ctrlDialogLayerPaddingBottom = `var(${ctrlDialogLayerPaddingBottomRaw})`; +export const ctrlDialogBaseShadow = `var(${ctrlDialogBaseShadowRaw}, ${shadow64})`; diff --git a/packages/semantic-tokens/src/components/dialog/variables.ts b/packages/semantic-tokens/src/components/dialog/variables.ts new file mode 100644 index 00000000000000..d98044c011dfa9 --- /dev/null +++ b/packages/semantic-tokens/src/components/dialog/variables.ts @@ -0,0 +1,7 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlDialogBackgroundRaw = '--smtc-ctrl-dialog-background'; +export const ctrlDialogStrokeRaw = '--smtc-ctrl-dialog-stroke'; +export const ctrlDialogBaseCornerRaw = '--smtc-ctrl-dialog-base-corner'; +export const ctrlDialogLayerBackgroundRaw = '--smtc-ctrl-dialog-layer-background'; +export const ctrlDialogLayerPaddingBottomRaw = '--smtc-ctrl-dialog-layer-padding-bottom'; +export const ctrlDialogBaseShadowRaw = '--smtc-ctrl-dialog-base-shadow'; diff --git a/packages/semantic-tokens/src/components/divider/tokens.ts b/packages/semantic-tokens/src/components/divider/tokens.ts new file mode 100644 index 00000000000000..272da1e02e389d --- /dev/null +++ b/packages/semantic-tokens/src/components/divider/tokens.ts @@ -0,0 +1,5 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { paddingContentAlignDefaultRaw } from '../../control/variables'; +import { ctrlDividerFixedLineLengthRaw } from './variables'; + +export const ctrlDividerFixedLineLength = `var(${ctrlDividerFixedLineLengthRaw}, var(${paddingContentAlignDefaultRaw}, 8px))`; diff --git a/packages/semantic-tokens/src/components/divider/variables.ts b/packages/semantic-tokens/src/components/divider/variables.ts new file mode 100644 index 00000000000000..d0dc2044610c05 --- /dev/null +++ b/packages/semantic-tokens/src/components/divider/variables.ts @@ -0,0 +1,2 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlDividerFixedLineLengthRaw = '--smtc-ctrl-divider-fixed-line-length'; diff --git a/packages/semantic-tokens/src/components/drag/tokens.ts b/packages/semantic-tokens/src/components/drag/tokens.ts new file mode 100644 index 00000000000000..739bcd4610dc49 --- /dev/null +++ b/packages/semantic-tokens/src/components/drag/tokens.ts @@ -0,0 +1,10 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + ctrlDragBackgroundSolidRaw, + ctrlDragBackgroundColorBlendRaw, + ctrlDragBackgroundLumBlendRaw, +} from './variables'; + +export const ctrlDragBackgroundSolid = `var(${ctrlDragBackgroundSolidRaw})`; +export const ctrlDragBackgroundColorBlend = `var(${ctrlDragBackgroundColorBlendRaw})`; +export const ctrlDragBackgroundLumBlend = `var(${ctrlDragBackgroundLumBlendRaw})`; diff --git a/packages/semantic-tokens/src/components/drag/variables.ts b/packages/semantic-tokens/src/components/drag/variables.ts new file mode 100644 index 00000000000000..28a7077e6e5200 --- /dev/null +++ b/packages/semantic-tokens/src/components/drag/variables.ts @@ -0,0 +1,4 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlDragBackgroundSolidRaw = '--smtc-ctrl-drag-background-solid'; +export const ctrlDragBackgroundColorBlendRaw = '--smtc-ctrl-drag-background-color-blend'; +export const ctrlDragBackgroundLumBlendRaw = '--smtc-ctrl-drag-background-lum-blend'; diff --git a/packages/semantic-tokens/src/components/fab/tokens.ts b/packages/semantic-tokens/src/components/fab/tokens.ts new file mode 100644 index 00000000000000..21d801c17abf0a --- /dev/null +++ b/packages/semantic-tokens/src/components/fab/tokens.ts @@ -0,0 +1,36 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + foregroundCtrlNeutralPrimaryRestRaw, + foregroundCtrlNeutralPrimaryDisabledRaw, + cornerCircularRaw, + shadowFlyoutRaw, +} from '../../control/variables'; +import { + ctrlFabForegroundRestNewRaw, + ctrlFabForegroundDisabledNewRaw, + ctrlFabBackgroundRestRaw, + ctrlFabBackgroundHoverRaw, + ctrlFabBackgroundPressedRaw, + ctrlFabBackgroundDisabledRaw, + ctrlFabCornerRestRaw, + ctrlFabCornerHoverRaw, + ctrlFabCornerPressedRaw, + ctrlFabShadowRestRaw, + ctrlFabShadowHoverRaw, + ctrlFabShadowPressedRaw, + ctrlFabShadowDisabledRaw, +} from './variables'; + +export const ctrlFabForegroundRestNew = `var(${ctrlFabForegroundRestNewRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const ctrlFabForegroundDisabledNew = `var(${ctrlFabForegroundDisabledNewRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +export const ctrlFabBackgroundRest = `var(${ctrlFabBackgroundRestRaw})`; +export const ctrlFabBackgroundHover = `var(${ctrlFabBackgroundHoverRaw})`; +export const ctrlFabBackgroundPressed = `var(${ctrlFabBackgroundPressedRaw})`; +export const ctrlFabBackgroundDisabled = `var(${ctrlFabBackgroundDisabledRaw})`; +export const ctrlFabCornerRest = `var(${ctrlFabCornerRestRaw}, var(${cornerCircularRaw}))`; +export const ctrlFabCornerHover = `var(${ctrlFabCornerHoverRaw}, var(${cornerCircularRaw}))`; +export const ctrlFabCornerPressed = `var(${ctrlFabCornerPressedRaw}, var(${cornerCircularRaw}))`; +export const ctrlFabShadowRest = `var(${ctrlFabShadowRestRaw})`; +export const ctrlFabShadowHover = `var(${ctrlFabShadowHoverRaw}, var(${shadowFlyoutRaw}))`; +export const ctrlFabShadowPressed = `var(${ctrlFabShadowPressedRaw})`; +export const ctrlFabShadowDisabled = `var(${ctrlFabShadowDisabledRaw}, var(${ctrlFabShadowPressedRaw}))`; diff --git a/packages/semantic-tokens/src/components/fab/variables.ts b/packages/semantic-tokens/src/components/fab/variables.ts new file mode 100644 index 00000000000000..5a71413b67b73a --- /dev/null +++ b/packages/semantic-tokens/src/components/fab/variables.ts @@ -0,0 +1,14 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlFabForegroundRestNewRaw = '--smtc-ctrl-fab-foreground-rest-new'; +export const ctrlFabForegroundDisabledNewRaw = '--smtc-ctrl-fab-foreground-disabled-new'; +export const ctrlFabBackgroundRestRaw = '--smtc-ctrl-fab-background-rest'; +export const ctrlFabBackgroundHoverRaw = '--smtc-ctrl-fab-background-hover'; +export const ctrlFabBackgroundPressedRaw = '--smtc-ctrl-fab-background-pressed'; +export const ctrlFabBackgroundDisabledRaw = '--smtc-ctrl-fab-background-disabled'; +export const ctrlFabCornerRestRaw = '--smtc-ctrl-fab-corner-rest'; +export const ctrlFabCornerHoverRaw = '--smtc-ctrl-fab-corner-hover'; +export const ctrlFabCornerPressedRaw = '--smtc-ctrl-fab-corner-pressed'; +export const ctrlFabShadowRestRaw = '--smtc-ctrl-fab-shadow-rest'; +export const ctrlFabShadowHoverRaw = '--smtc-ctrl-fab-shadow-hover'; +export const ctrlFabShadowPressedRaw = '--smtc-ctrl-fab-shadow-pressed'; +export const ctrlFabShadowDisabledRaw = '--smtc-ctrl-fab-shadow-disabled'; diff --git a/packages/semantic-tokens/src/components/focus/tokens.ts b/packages/semantic-tokens/src/components/focus/tokens.ts new file mode 100644 index 00000000000000..1c9c749398b51c --- /dev/null +++ b/packages/semantic-tokens/src/components/focus/tokens.ts @@ -0,0 +1,14 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { strokeWidthDefaultRaw, backgroundCtrlBrandRestRaw } from '../../control/variables'; +import { strokeWidthThin, colorStrokeFocus2, strokeWidthThick, colorTransparentStroke } from '../../legacy/tokens'; +import { + ctrlFocusInnerStrokeWidthRaw, + ctrlFocusInnerStrokeRaw, + ctrlFocusOuterStrokeWidthRaw, + ctrlFocusOuterStrokeRaw, +} from './variables'; + +export const ctrlFocusInnerStrokeWidth = `var(${ctrlFocusInnerStrokeWidthRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; +export const ctrlFocusInnerStroke = `var(${ctrlFocusInnerStrokeRaw}, ${colorStrokeFocus2})`; +export const ctrlFocusOuterStrokeWidth = `var(${ctrlFocusOuterStrokeWidthRaw}, ${strokeWidthThick})`; +export const ctrlFocusOuterStroke = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorTransparentStroke}))`; diff --git a/packages/semantic-tokens/src/components/focus/variables.ts b/packages/semantic-tokens/src/components/focus/variables.ts new file mode 100644 index 00000000000000..a1f26772f25cf7 --- /dev/null +++ b/packages/semantic-tokens/src/components/focus/variables.ts @@ -0,0 +1,5 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlFocusInnerStrokeWidthRaw = '--smtc-ctrl-focus-inner-stroke-width'; +export const ctrlFocusInnerStrokeRaw = '--smtc-ctrl-focus-inner-stroke'; +export const ctrlFocusOuterStrokeWidthRaw = '--smtc-ctrl-focus-outer-stroke-width'; +export const ctrlFocusOuterStrokeRaw = '--smtc-ctrl-focus-outer-stroke'; diff --git a/packages/semantic-tokens/src/components/input/tokens.ts b/packages/semantic-tokens/src/components/input/tokens.ts new file mode 100644 index 00000000000000..4f551e962dfeed --- /dev/null +++ b/packages/semantic-tokens/src/components/input/tokens.ts @@ -0,0 +1,90 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + backgroundCtrlNeutralRestRaw, + backgroundCtrlNeutralHoverRaw, + backgroundCtrlNeutralPressedRaw, + backgroundCtrlNeutralDisabledRaw, + strokeCtrlOnOutlineRestRaw, + strokeWidthDefaultRaw, + backgroundCtrlBrandRestRaw, + foregroundCtrlOnBrandRestRaw, + foregroundCtrlNeutralSecondaryRestRaw, + strokeCtrlOnOutlineHoverRaw, + strokeCtrlOnOutlinePressedRaw, + strokeCtrlOnOutlineDisabledRaw, +} from '../../control/variables'; +import { + colorNeutralBackground1, + colorNeutralBackgroundDisabled, + colorPaletteRedBorder2, + colorNeutralStroke1, + strokeWidthThin, + strokeWidthThick, + colorNeutralStrokeAccessible, + colorNeutralStrokeAccessibleHover, + colorNeutralStrokeAccessiblePressed, + colorCompoundBrandStroke, + colorNeutralStroke1Hover, + colorNeutralStroke1Pressed, + colorNeutralStrokeDisabled, +} from '../../legacy/tokens'; +import { statusDangerStrokeRaw } from '../../optional/variables'; +import { + ctrlInputBackgroundRestRaw, + ctrlInputBackgroundHoverRaw, + ctrlInputBackgroundPressedRaw, + ctrlInputBackgroundDisabledRaw, + ctrlInputBackgroundSelectedRaw, + ctrlInputBackgroundErrorRaw, + ctrlInputStrokeRestRaw, + ctrlInputStrokeWidthRestRaw, + ctrlInputStrokeWidthHoverRaw, + ctrlInputStrokeWidthPressedRaw, + ctrlInputStrokeWidthSelectedRaw, + ctrlInputBottomLineStrokeWidthRestRaw, + ctrlInputTextSelectionBackgroundRaw, + ctrlInputTextSelectionForegroundRaw, + ctrlInputBottomLineStrokeWidthHoverRaw, + ctrlInputBottomLineStrokeWidthPressedRaw, + ctrlInputBottomLineStrokeWidthSelectedRaw, + ctrlInputBottomLineStrokeRestRaw, + ctrlInputBottomLineStrokeHoverRaw, + ctrlInputBottomLineStrokePressedRaw, + ctrlInputBottomLineStrokeDisabledRaw, + ctrlInputBottomLineStrokeSelectedRaw, + ctrlInputBottomLineStrokeErrorRaw, + ctrlInputStrokeHoverRaw, + ctrlInputStrokePressedRaw, + ctrlInputStrokeDisabledRaw, + ctrlInputStrokeSelectedRaw, + ctrlInputStrokeErrorRaw, +} from './variables'; + +export const ctrlInputBackgroundRest = `var(${ctrlInputBackgroundRestRaw}, var(${backgroundCtrlNeutralRestRaw}, ${colorNeutralBackground1}))`; +export const ctrlInputBackgroundHover = `var(${ctrlInputBackgroundHoverRaw}, var(${backgroundCtrlNeutralHoverRaw}))`; +export const ctrlInputBackgroundPressed = `var(${ctrlInputBackgroundPressedRaw}, var(${backgroundCtrlNeutralPressedRaw}))`; +export const ctrlInputBackgroundDisabled = `var(${ctrlInputBackgroundDisabledRaw}, var(${backgroundCtrlNeutralDisabledRaw}, ${colorNeutralBackgroundDisabled}))`; +export const ctrlInputBackgroundSelected = `var(${ctrlInputBackgroundSelectedRaw}, var(${backgroundCtrlNeutralRestRaw}, ${colorNeutralBackground1}))`; +export const ctrlInputBackgroundError = `var(${ctrlInputBackgroundErrorRaw}, var(${backgroundCtrlNeutralRestRaw}, ${colorPaletteRedBorder2}))`; +export const ctrlInputStrokeRest = `var(${ctrlInputStrokeRestRaw}, var(${strokeCtrlOnOutlineRestRaw}, ${colorNeutralStroke1}))`; +export const ctrlInputStrokeWidthRest = `var(${ctrlInputStrokeWidthRestRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; +export const ctrlInputStrokeWidthHover = `var(${ctrlInputStrokeWidthHoverRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlInputStrokeWidthPressed = `var(${ctrlInputStrokeWidthPressedRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlInputStrokeWidthSelected = `var(${ctrlInputStrokeWidthSelectedRaw})`; +export const ctrlInputBottomLineStrokeWidthRest = `var(${ctrlInputBottomLineStrokeWidthRestRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; +export const ctrlInputTextSelectionBackground = `var(${ctrlInputTextSelectionBackgroundRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const ctrlInputTextSelectionForeground = `var(${ctrlInputTextSelectionForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +export const ctrlInputBottomLineStrokeWidthHover = `var(${ctrlInputBottomLineStrokeWidthHoverRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlInputBottomLineStrokeWidthPressed = `var(${ctrlInputBottomLineStrokeWidthPressedRaw}, var(${ctrlInputBottomLineStrokeWidthSelectedRaw}))`; +export const ctrlInputBottomLineStrokeWidthSelected = `var(${ctrlInputBottomLineStrokeWidthSelectedRaw}, ${strokeWidthThick})`; +export const ctrlInputBottomLineStrokeRest = `var(${ctrlInputBottomLineStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralStrokeAccessible}))`; +export const ctrlInputBottomLineStrokeHover = `var(${ctrlInputBottomLineStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralStrokeAccessibleHover}))`; +export const ctrlInputBottomLineStrokePressed = `var(${ctrlInputBottomLineStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralStrokeAccessiblePressed}))`; +export const ctrlInputBottomLineStrokeDisabled = `var(${ctrlInputBottomLineStrokeDisabledRaw}, unset)`; +export const ctrlInputBottomLineStrokeSelected = `var(${ctrlInputBottomLineStrokeSelectedRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorCompoundBrandStroke}))`; +export const ctrlInputBottomLineStrokeError = `var(${ctrlInputBottomLineStrokeErrorRaw}, unset)`; +export const ctrlInputStrokeHover = `var(${ctrlInputStrokeHoverRaw}, var(${strokeCtrlOnOutlineHoverRaw}, ${colorNeutralStroke1Hover}))`; +export const ctrlInputStrokePressed = `var(${ctrlInputStrokePressedRaw}, var(${strokeCtrlOnOutlinePressedRaw}, ${colorNeutralStroke1Pressed}))`; +export const ctrlInputStrokeDisabled = `var(${ctrlInputStrokeDisabledRaw}, var(${strokeCtrlOnOutlineDisabledRaw}, ${colorNeutralStrokeDisabled}))`; +export const ctrlInputStrokeSelected = `var(${ctrlInputStrokeSelectedRaw}, var(${strokeCtrlOnOutlineRestRaw}, ${colorNeutralStroke1}))`; +export const ctrlInputStrokeError = `var(${ctrlInputStrokeErrorRaw}, var(${statusDangerStrokeRaw}))`; diff --git a/packages/semantic-tokens/src/components/input/variables.ts b/packages/semantic-tokens/src/components/input/variables.ts new file mode 100644 index 00000000000000..a19e6ff16e4cb2 --- /dev/null +++ b/packages/semantic-tokens/src/components/input/variables.ts @@ -0,0 +1,29 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlInputBackgroundRestRaw = '--smtc-ctrl-input-background-rest'; +export const ctrlInputBackgroundHoverRaw = '--smtc-ctrl-input-background-hover'; +export const ctrlInputBackgroundPressedRaw = '--smtc-ctrl-input-background-pressed'; +export const ctrlInputBackgroundDisabledRaw = '--smtc-ctrl-input-background-disabled'; +export const ctrlInputBackgroundSelectedRaw = '--smtc-ctrl-input-background-selected'; +export const ctrlInputBackgroundErrorRaw = '--smtc-ctrl-input-background-error'; +export const ctrlInputStrokeRestRaw = '--smtc-ctrl-input-stroke-rest'; +export const ctrlInputStrokeWidthRestRaw = '--smtc-ctrl-input-stroke-width-rest'; +export const ctrlInputStrokeWidthHoverRaw = '--smtc-ctrl-input-stroke-width-hover'; +export const ctrlInputStrokeWidthPressedRaw = '--smtc-ctrl-input-stroke-width-pressed'; +export const ctrlInputStrokeWidthSelectedRaw = '--smtc-ctrl-input-stroke-width-selected'; +export const ctrlInputBottomLineStrokeWidthRestRaw = '--smtc-ctrl-input-bottom-line-stroke-width-rest'; +export const ctrlInputTextSelectionBackgroundRaw = '--smtc-ctrl-input-text-selection-background'; +export const ctrlInputTextSelectionForegroundRaw = '--smtc-ctrl-input-text-selection-foreground'; +export const ctrlInputBottomLineStrokeWidthHoverRaw = '--smtc-ctrl-input-bottom-line-stroke-width-hover'; +export const ctrlInputBottomLineStrokeWidthPressedRaw = '--smtc-ctrl-input-bottom-line-stroke-width-pressed'; +export const ctrlInputBottomLineStrokeWidthSelectedRaw = '--smtc-ctrl-input-bottom-line-stroke-width-selected'; +export const ctrlInputBottomLineStrokeRestRaw = '--smtc-ctrl-input-bottom-line-stroke-rest'; +export const ctrlInputBottomLineStrokeHoverRaw = '--smtc-ctrl-input-bottom-line-stroke-hover'; +export const ctrlInputBottomLineStrokePressedRaw = '--smtc-ctrl-input-bottom-line-stroke-pressed'; +export const ctrlInputBottomLineStrokeDisabledRaw = '--smtc-ctrl-input-bottom-line-stroke-disabled'; +export const ctrlInputBottomLineStrokeSelectedRaw = '--smtc-ctrl-input-bottom-line-stroke-selected'; +export const ctrlInputBottomLineStrokeErrorRaw = '--smtc-ctrl-input-bottom-line-stroke-error'; +export const ctrlInputStrokeHoverRaw = '--smtc-ctrl-input-stroke-hover'; +export const ctrlInputStrokePressedRaw = '--smtc-ctrl-input-stroke-pressed'; +export const ctrlInputStrokeDisabledRaw = '--smtc-ctrl-input-stroke-disabled'; +export const ctrlInputStrokeSelectedRaw = '--smtc-ctrl-input-stroke-selected'; +export const ctrlInputStrokeErrorRaw = '--smtc-ctrl-input-stroke-error'; diff --git a/packages/semantic-tokens/src/components/link/tokens.ts b/packages/semantic-tokens/src/components/link/tokens.ts new file mode 100644 index 00000000000000..5c4988bbdcea05 --- /dev/null +++ b/packages/semantic-tokens/src/components/link/tokens.ts @@ -0,0 +1,47 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + foregroundCtrlNeutralPrimaryRestRaw, + strokeWidthDefaultRaw, + foregroundCtrlBrandRestRaw, + foregroundCtrlBrandHoverRaw, + foregroundCtrlBrandPressedRaw, +} from '../../control/variables'; +import { + colorNeutralForeground2, + colorNeutralForeground2Hover, + colorNeutralForeground2Pressed, + colorBrandForegroundLink, + colorBrandForegroundLinkHover, + colorBrandForegroundLinkPressed, +} from '../../legacy/tokens'; +import { + ctrlLinkForegroundNeutralRestRaw, + ctrlLinkInlineStrokeWidthRestRaw, + ctrlLinkInlineStrokeWidthHoverRaw, + ctrlLinkInlineUnderlineDashedRaw, + ctrlLinkForegroundNeutralHoverRaw, + ctrlLinkForegroundNeutralPressedRaw, + ctrlLinkForegroundBrandRestRaw, + ctrlLinkForegroundBrandHoverRaw, + ctrlLinkForegroundBrandPressedRaw, + ctrlLinkOnPageStrokeWidthRestRaw, + ctrlLinkOnPageStrokeWidthHoverRaw, + ctrlLinkOnPageUnderlineDashedRaw, + ctrlLinkInlineShowUnderlineAtRestRaw, + ctrlLinkOnPageShowUnderlineAtRestRaw, +} from './variables'; + +export const ctrlLinkForegroundNeutralRest = `var(${ctrlLinkForegroundNeutralRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2}))`; +export const ctrlLinkInlineStrokeWidthRest = `var(${ctrlLinkInlineStrokeWidthRestRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlLinkInlineStrokeWidthHover = `var(${ctrlLinkInlineStrokeWidthHoverRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlLinkInlineUnderlineDashed = `var(${ctrlLinkInlineUnderlineDashedRaw})`; +export const ctrlLinkForegroundNeutralHover = `var(${ctrlLinkForegroundNeutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2Hover}))`; +export const ctrlLinkForegroundNeutralPressed = `var(${ctrlLinkForegroundNeutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2Pressed}))`; +export const ctrlLinkForegroundBrandRest = `var(${ctrlLinkForegroundBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForegroundLink}))`; +export const ctrlLinkForegroundBrandHover = `var(${ctrlLinkForegroundBrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw}, ${colorBrandForegroundLinkHover}))`; +export const ctrlLinkForegroundBrandPressed = `var(${ctrlLinkForegroundBrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw}, ${colorBrandForegroundLinkPressed}))`; +export const ctrlLinkOnPageStrokeWidthRest = `var(${ctrlLinkOnPageStrokeWidthRestRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlLinkOnPageStrokeWidthHover = `var(${ctrlLinkOnPageStrokeWidthHoverRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlLinkOnPageUnderlineDashed = `var(${ctrlLinkOnPageUnderlineDashedRaw})`; +export const ctrlLinkInlineShowUnderlineAtRest = `var(${ctrlLinkInlineShowUnderlineAtRestRaw})`; +export const ctrlLinkOnPageShowUnderlineAtRest = `var(${ctrlLinkOnPageShowUnderlineAtRestRaw})`; diff --git a/packages/semantic-tokens/src/components/link/variables.ts b/packages/semantic-tokens/src/components/link/variables.ts new file mode 100644 index 00000000000000..57406945988658 --- /dev/null +++ b/packages/semantic-tokens/src/components/link/variables.ts @@ -0,0 +1,15 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlLinkForegroundNeutralRestRaw = '--smtc-ctrl-link-foreground-neutral-rest'; +export const ctrlLinkInlineStrokeWidthRestRaw = '--smtc-ctrl-link-inline-stroke-width-rest'; +export const ctrlLinkInlineStrokeWidthHoverRaw = '--smtc-ctrl-link-inline-stroke-width-hover'; +export const ctrlLinkInlineUnderlineDashedRaw = '--smtc-ctrl-link-inline-underline-dashed'; +export const ctrlLinkForegroundNeutralHoverRaw = '--smtc-ctrl-link-foreground-neutral-hover'; +export const ctrlLinkForegroundNeutralPressedRaw = '--smtc-ctrl-link-foreground-neutral-pressed'; +export const ctrlLinkForegroundBrandRestRaw = '--smtc-ctrl-link-foreground-brand-rest'; +export const ctrlLinkForegroundBrandHoverRaw = '--smtc-ctrl-link-foreground-brand-hover'; +export const ctrlLinkForegroundBrandPressedRaw = '--smtc-ctrl-link-foreground-brand-pressed'; +export const ctrlLinkOnPageStrokeWidthRestRaw = '--smtc-ctrl-link-on-page-stroke-width-rest'; +export const ctrlLinkOnPageStrokeWidthHoverRaw = '--smtc-ctrl-link-on-page-stroke-width-hover'; +export const ctrlLinkOnPageUnderlineDashedRaw = '--smtc-ctrl-link-on-page-underline-dashed'; +export const ctrlLinkInlineShowUnderlineAtRestRaw = '--smtc-ctrl-link-inline-show-underline-at-rest'; +export const ctrlLinkOnPageShowUnderlineAtRestRaw = '--smtc-ctrl-link-on-page-show-underline-at-rest'; diff --git a/packages/semantic-tokens/src/components/list/tokens.ts b/packages/semantic-tokens/src/components/list/tokens.ts new file mode 100644 index 00000000000000..be0209b8632171 --- /dev/null +++ b/packages/semantic-tokens/src/components/list/tokens.ts @@ -0,0 +1,129 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + cornerCtrlRestRaw, + paddingCtrlHorizontalDefaultRaw, + backgroundCtrlSubtleHoverRaw, + backgroundCtrlSubtlePressedRaw, + foregroundCtrlNeutralPrimaryRestRaw, + foregroundCtrlNeutralPrimaryDisabledRaw, + sizeCtrlIconSecondaryRaw, + strokeCtrlDividerOnNeutralRaw, + cornerCtrlSmRestRaw, + paddingCtrlSmHorizontalDefaultRaw, + cornerCtrlLgRestRaw, + paddingCtrlLgHorizontalDefaultRaw, +} from '../../control/variables'; +import { strokeWidthThicker, borderRadiusMedium, spacingHorizontalXXL } from '../../legacy/tokens'; +import { + backgroundCtrlSubtleRestRaw, + backgroundCtrlSubtleDisabledRaw, + foregroundCtrlHintDefaultRaw, +} from '../../nullable/variables'; +import { ctrlChoiceCheckboxCornerRaw } from '../choice/variables'; +import { + ctrlListPillWidthRaw, + ctrlListPillFullWidthRaw, + ctrlListPillStretchPaddingDefaultRaw, + ctrlListPillStretchPaddingHintRaw, + ctrlListPillLengthRestRaw, + ctrlListPillLengthHoverRaw, + ctrlListPillLengthPressedRaw, + ctrlListPillLengthHintRaw, + ctrlListCornerRestRaw, + ctrlListCornerHoverRaw, + ctrlListCornerPressedRaw, + ctrlListIndentLevel1Raw, + ctrlListIndentLevel2Raw, + ctrlListIndentLevel3Raw, + ctrlListBackgroundSelectedRestRaw, + ctrlListForegroundSelectedRestRaw, + ctrlListForegroundSelectedHoverRaw, + ctrlListForegroundSelectedPressedRaw, + ctrlListForegroundSelectedDisabledRaw, + ctrlListBackgroundSelectedHoverRaw, + ctrlListBackgroundSelectedPressedRaw, + ctrlListBackgroundSelectedDisabledRaw, + ctrlListChoiceBackgroundRestRaw, + ctrlListChoiceStrokeRestRaw, + ctrlListChoiceStrokeDisabledRaw, + ctrlListChoiceStrokeSelectedRestRaw, + ctrlListChoiceStrokeSelectedDisabledRaw, + ctrlListChoiceForegroundHoverRaw, + ctrlListChoiceForegroundSelectedRestRaw, + ctrlListChoiceForegroundSelectedDisabledRaw, + ctrlListChoiceBackgroundDisabledRaw, + ctrlListChoiceBackgroundSelectedRestRaw, + ctrlListChoiceBackgroundSelectedDisabledRaw, + ctrlListChoiceCheckboxCornerRaw, + ctrlListChoiceCheckboxIconSizeRaw, + ctrlListChoiceDotSizeRaw, + ctrlListSplitDividerPaddingInsetRaw, + ctrlListSplitDividerStrokeRaw, + ctrlListSmCornerRestRaw, + ctrlListSmCornerHoverRaw, + ctrlListSmCornerPressedRaw, + ctrlListSmIndentLevel1Raw, + ctrlListSmIndentLevel2Raw, + ctrlListSmIndentLevel3Raw, + ctrlListLgCornerRestRaw, + ctrlListLgCornerHoverRaw, + ctrlListLgCornerPressedRaw, + ctrlListLgIndentLevel1Raw, + ctrlListLgIndentLevel2Raw, + ctrlListLgIndentLevel3Raw, + ctrlListSplitDividerShowDividerRaw, + ctrlListShadowSelectedRaw, +} from './variables'; + +export const ctrlListPillWidth = `var(${ctrlListPillWidthRaw}, ${strokeWidthThicker})`; +export const ctrlListPillFullWidth = `var(${ctrlListPillFullWidthRaw})`; +export const ctrlListPillStretchPaddingDefault = `var(${ctrlListPillStretchPaddingDefaultRaw})`; +export const ctrlListPillStretchPaddingHint = `var(${ctrlListPillStretchPaddingHintRaw})`; +export const ctrlListPillLengthRest = `var(${ctrlListPillLengthRestRaw})`; +export const ctrlListPillLengthHover = `var(${ctrlListPillLengthHoverRaw}, var(${ctrlListPillLengthRestRaw}))`; +export const ctrlListPillLengthPressed = `var(${ctrlListPillLengthPressedRaw}, var(${ctrlListPillLengthRestRaw}))`; +export const ctrlListPillLengthHint = `var(${ctrlListPillLengthHintRaw}, var(${ctrlListPillLengthRestRaw}))`; +export const ctrlListCornerRest = `var(${ctrlListCornerRestRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusMedium}))`; +export const ctrlListCornerHover = `var(${ctrlListCornerHoverRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusMedium}))`; +export const ctrlListCornerPressed = `var(${ctrlListCornerPressedRaw}, var(${cornerCtrlRestRaw}))`; +export const ctrlListIndentLevel1 = `var(${ctrlListIndentLevel1Raw}, var(${paddingCtrlHorizontalDefaultRaw}, ${spacingHorizontalXXL}))`; +export const ctrlListIndentLevel2 = `var(${ctrlListIndentLevel2Raw})`; +export const ctrlListIndentLevel3 = `var(${ctrlListIndentLevel3Raw})`; +export const ctrlListBackgroundSelectedRest = `var(${ctrlListBackgroundSelectedRestRaw}, var(${backgroundCtrlSubtleRestRaw}))`; +export const ctrlListForegroundSelectedRest = `var(${ctrlListForegroundSelectedRestRaw}, var(${backgroundCtrlSubtleRestRaw}))`; +export const ctrlListForegroundSelectedHover = `var(${ctrlListForegroundSelectedHoverRaw}, var(${backgroundCtrlSubtleHoverRaw}))`; +export const ctrlListForegroundSelectedPressed = `var(${ctrlListForegroundSelectedPressedRaw}, var(${backgroundCtrlSubtlePressedRaw}))`; +export const ctrlListForegroundSelectedDisabled = `var(${ctrlListForegroundSelectedDisabledRaw}, var(${backgroundCtrlSubtleDisabledRaw}))`; +export const ctrlListBackgroundSelectedHover = `var(${ctrlListBackgroundSelectedHoverRaw}, var(${backgroundCtrlSubtleHoverRaw}))`; +export const ctrlListBackgroundSelectedPressed = `var(${ctrlListBackgroundSelectedPressedRaw}, var(${backgroundCtrlSubtlePressedRaw}))`; +export const ctrlListBackgroundSelectedDisabled = `var(${ctrlListBackgroundSelectedDisabledRaw}, var(${backgroundCtrlSubtleDisabledRaw}))`; +export const ctrlListChoiceBackgroundRest = `var(${ctrlListChoiceBackgroundRestRaw}, unset)`; +export const ctrlListChoiceStrokeRest = `var(${ctrlListChoiceStrokeRestRaw}, unset)`; +export const ctrlListChoiceStrokeDisabled = `var(${ctrlListChoiceStrokeDisabledRaw}, unset)`; +export const ctrlListChoiceStrokeSelectedRest = `var(${ctrlListChoiceStrokeSelectedRestRaw}, unset)`; +export const ctrlListChoiceStrokeSelectedDisabled = `var(${ctrlListChoiceStrokeSelectedDisabledRaw}, unset)`; +export const ctrlListChoiceForegroundHover = `var(${ctrlListChoiceForegroundHoverRaw}, var(${foregroundCtrlHintDefaultRaw}))`; +export const ctrlListChoiceForegroundSelectedRest = `var(${ctrlListChoiceForegroundSelectedRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const ctrlListChoiceForegroundSelectedDisabled = `var(${ctrlListChoiceForegroundSelectedDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +export const ctrlListChoiceBackgroundDisabled = `var(${ctrlListChoiceBackgroundDisabledRaw}, unset)`; +export const ctrlListChoiceBackgroundSelectedRest = `var(${ctrlListChoiceBackgroundSelectedRestRaw}, unset)`; +export const ctrlListChoiceBackgroundSelectedDisabled = `var(${ctrlListChoiceBackgroundSelectedDisabledRaw}, unset)`; +export const ctrlListChoiceCheckboxCorner = `var(${ctrlListChoiceCheckboxCornerRaw}, var(${ctrlChoiceCheckboxCornerRaw}))`; +export const ctrlListChoiceCheckboxIconSize = `var(${ctrlListChoiceCheckboxIconSizeRaw}, var(${sizeCtrlIconSecondaryRaw}))`; +export const ctrlListChoiceDotSize = `var(${ctrlListChoiceDotSizeRaw})`; +export const ctrlListSplitDividerPaddingInset = `var(${ctrlListSplitDividerPaddingInsetRaw})`; +export const ctrlListSplitDividerStroke = `var(${ctrlListSplitDividerStrokeRaw}, var(${strokeCtrlDividerOnNeutralRaw}))`; +export const ctrlListSmCornerRest = `var(${ctrlListSmCornerRestRaw}, var(${cornerCtrlSmRestRaw}))`; +export const ctrlListSmCornerHover = `var(${ctrlListSmCornerHoverRaw}, var(${cornerCtrlSmRestRaw}))`; +export const ctrlListSmCornerPressed = `var(${ctrlListSmCornerPressedRaw}, var(${cornerCtrlSmRestRaw}))`; +export const ctrlListSmIndentLevel1 = `var(${ctrlListSmIndentLevel1Raw}, var(${paddingCtrlSmHorizontalDefaultRaw}))`; +export const ctrlListSmIndentLevel2 = `var(${ctrlListSmIndentLevel2Raw})`; +export const ctrlListSmIndentLevel3 = `var(${ctrlListSmIndentLevel3Raw})`; +export const ctrlListLgCornerRest = `var(${ctrlListLgCornerRestRaw}, var(${cornerCtrlLgRestRaw}))`; +export const ctrlListLgCornerHover = `var(${ctrlListLgCornerHoverRaw}, var(${cornerCtrlLgRestRaw}))`; +export const ctrlListLgCornerPressed = `var(${ctrlListLgCornerPressedRaw}, var(${cornerCtrlLgRestRaw}))`; +export const ctrlListLgIndentLevel1 = `var(${ctrlListLgIndentLevel1Raw}, var(${paddingCtrlLgHorizontalDefaultRaw}))`; +export const ctrlListLgIndentLevel2 = `var(${ctrlListLgIndentLevel2Raw})`; +export const ctrlListLgIndentLevel3 = `var(${ctrlListLgIndentLevel3Raw})`; +export const ctrlListSplitDividerShowDivider = `var(${ctrlListSplitDividerShowDividerRaw})`; +export const ctrlListShadowSelected = `var(${ctrlListShadowSelectedRaw})`; diff --git a/packages/semantic-tokens/src/components/list/variables.ts b/packages/semantic-tokens/src/components/list/variables.ts new file mode 100644 index 00000000000000..4af85afa8044c4 --- /dev/null +++ b/packages/semantic-tokens/src/components/list/variables.ts @@ -0,0 +1,53 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlListPillWidthRaw = '--smtc-ctrl-list-pill-width'; +export const ctrlListPillFullWidthRaw = '--smtc-ctrl-list-pill-full-width'; +export const ctrlListPillStretchPaddingDefaultRaw = '--smtc-ctrl-list-pill-stretch-padding-default'; +export const ctrlListPillStretchPaddingHintRaw = '--smtc-ctrl-list-pill-stretch-padding-hint'; +export const ctrlListPillLengthRestRaw = '--smtc-ctrl-list-pill-length-rest'; +export const ctrlListPillLengthHoverRaw = '--smtc-ctrl-list-pill-length-hover'; +export const ctrlListPillLengthPressedRaw = '--smtc-ctrl-list-pill-length-pressed'; +export const ctrlListPillLengthHintRaw = '--smtc-ctrl-list-pill-length-hint'; +export const ctrlListCornerRestRaw = '--smtc-ctrl-list-corner-rest'; +export const ctrlListCornerHoverRaw = '--smtc-ctrl-list-corner-hover'; +export const ctrlListCornerPressedRaw = '--smtc-ctrl-list-corner-pressed'; +export const ctrlListIndentLevel1Raw = '--smtc-ctrl-list-indent-level1'; +export const ctrlListIndentLevel2Raw = '--smtc-ctrl-list-indent-level2'; +export const ctrlListIndentLevel3Raw = '--smtc-ctrl-list-indent-level3'; +export const ctrlListBackgroundSelectedRestRaw = '--smtc-ctrl-list-background-selected-rest'; +export const ctrlListForegroundSelectedRestRaw = '--smtc-ctrl-list-foreground-selected-rest'; +export const ctrlListForegroundSelectedHoverRaw = '--smtc-ctrl-list-foreground-selected-hover'; +export const ctrlListForegroundSelectedPressedRaw = '--smtc-ctrl-list-foreground-selected-pressed'; +export const ctrlListForegroundSelectedDisabledRaw = '--smtc-ctrl-list-foreground-selected-disabled'; +export const ctrlListBackgroundSelectedHoverRaw = '--smtc-ctrl-list-background-selected-hover'; +export const ctrlListBackgroundSelectedPressedRaw = '--smtc-ctrl-list-background-selected-pressed'; +export const ctrlListBackgroundSelectedDisabledRaw = '--smtc-ctrl-list-background-selected-disabled'; +export const ctrlListChoiceBackgroundRestRaw = '--smtc-ctrl-list-choice-background-rest'; +export const ctrlListChoiceStrokeRestRaw = '--smtc-ctrl-list-choice-stroke-rest'; +export const ctrlListChoiceStrokeDisabledRaw = '--smtc-ctrl-list-choice-stroke-disabled'; +export const ctrlListChoiceStrokeSelectedRestRaw = '--smtc-ctrl-list-choice-stroke-selected-rest'; +export const ctrlListChoiceStrokeSelectedDisabledRaw = '--smtc-ctrl-list-choice-stroke-selected-disabled'; +export const ctrlListChoiceForegroundHoverRaw = '--smtc-ctrl-list-choice-foreground-hover'; +export const ctrlListChoiceForegroundSelectedRestRaw = '--smtc-ctrl-list-choice-foreground-selected-rest'; +export const ctrlListChoiceForegroundSelectedDisabledRaw = '--smtc-ctrl-list-choice-foreground-selected-disabled'; +export const ctrlListChoiceBackgroundDisabledRaw = '--smtc-ctrl-list-choice-background-disabled'; +export const ctrlListChoiceBackgroundSelectedRestRaw = '--smtc-ctrl-list-choice-background-selected-rest'; +export const ctrlListChoiceBackgroundSelectedDisabledRaw = '--smtc-ctrl-list-choice-background-selected-disabled'; +export const ctrlListChoiceCheckboxCornerRaw = '--smtc-ctrl-list-choice-checkbox-corner'; +export const ctrlListChoiceCheckboxIconSizeRaw = '--smtc-ctrl-list-choice-checkbox-icon-size'; +export const ctrlListChoiceDotSizeRaw = '--smtc-ctrl-list-choice-dot-size'; +export const ctrlListSplitDividerPaddingInsetRaw = '--smtc-ctrl-list-split-divider-padding-inset'; +export const ctrlListSplitDividerStrokeRaw = '--smtc-ctrl-list-split-divider-stroke'; +export const ctrlListSmCornerRestRaw = '--smtc-ctrl-list-sm-corner-rest'; +export const ctrlListSmCornerHoverRaw = '--smtc-ctrl-list-sm-corner-hover'; +export const ctrlListSmCornerPressedRaw = '--smtc-ctrl-list-sm-corner-pressed'; +export const ctrlListSmIndentLevel1Raw = '--smtc-ctrl-list-sm-indent-level1'; +export const ctrlListSmIndentLevel2Raw = '--smtc-ctrl-list-sm-indent-level2'; +export const ctrlListSmIndentLevel3Raw = '--smtc-ctrl-list-sm-indent-level3'; +export const ctrlListLgCornerRestRaw = '--smtc-ctrl-list-lg-corner-rest'; +export const ctrlListLgCornerHoverRaw = '--smtc-ctrl-list-lg-corner-hover'; +export const ctrlListLgCornerPressedRaw = '--smtc-ctrl-list-lg-corner-pressed'; +export const ctrlListLgIndentLevel1Raw = '--smtc-ctrl-list-lg-indent-level1'; +export const ctrlListLgIndentLevel2Raw = '--smtc-ctrl-list-lg-indent-level2'; +export const ctrlListLgIndentLevel3Raw = '--smtc-ctrl-list-lg-indent-level3'; +export const ctrlListSplitDividerShowDividerRaw = '--smtc-ctrl-list-split-divider-show-divider'; +export const ctrlListShadowSelectedRaw = '--smtc-ctrl-list-shadow-selected'; diff --git a/packages/semantic-tokens/src/components/liteFilter/tokens.ts b/packages/semantic-tokens/src/components/liteFilter/tokens.ts new file mode 100644 index 00000000000000..8b5c663ff2d4db --- /dev/null +++ b/packages/semantic-tokens/src/components/liteFilter/tokens.ts @@ -0,0 +1,18 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + backgroundCtrlBrandRestRaw, + foregroundCtrlOnBrandRestRaw, + strokeWidthDefaultRaw, +} from '../../control/variables'; +import { strokeCtrlOnBrandRestRaw } from '../../nullable/variables'; +import { + ctrlLiteFilterBackgroundSelectedRaw, + ctrlLiteFilterStrokeSelectedRaw, + ctrlLiteFilterForegroundSelectedRaw, + ctrlLiteFilterStrokeWidthSelectedRaw, +} from './variables'; + +export const ctrlLiteFilterBackgroundSelected = `var(${ctrlLiteFilterBackgroundSelectedRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const ctrlLiteFilterStrokeSelected = `var(${ctrlLiteFilterStrokeSelectedRaw}, var(${strokeCtrlOnBrandRestRaw}))`; +export const ctrlLiteFilterForegroundSelected = `var(${ctrlLiteFilterForegroundSelectedRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +export const ctrlLiteFilterStrokeWidthSelected = `var(${ctrlLiteFilterStrokeWidthSelectedRaw}, var(${strokeWidthDefaultRaw}))`; diff --git a/packages/semantic-tokens/src/components/liteFilter/variables.ts b/packages/semantic-tokens/src/components/liteFilter/variables.ts new file mode 100644 index 00000000000000..83f6b13e4c0102 --- /dev/null +++ b/packages/semantic-tokens/src/components/liteFilter/variables.ts @@ -0,0 +1,5 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlLiteFilterBackgroundSelectedRaw = '--smtc-ctrl-lite-filter-background-selected'; +export const ctrlLiteFilterStrokeSelectedRaw = '--smtc-ctrl-lite-filter-stroke-selected'; +export const ctrlLiteFilterForegroundSelectedRaw = '--smtc-ctrl-lite-filter-foreground-selected'; +export const ctrlLiteFilterStrokeWidthSelectedRaw = '--smtc-ctrl-lite-filter-stroke-width-selected'; diff --git a/packages/semantic-tokens/src/components/progress/tokens.ts b/packages/semantic-tokens/src/components/progress/tokens.ts new file mode 100644 index 00000000000000..a0bf4ae8289db3 --- /dev/null +++ b/packages/semantic-tokens/src/components/progress/tokens.ts @@ -0,0 +1,24 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { backgroundCtrlBrandRestRaw, cornerCircularRaw } from '../../control/variables'; +import { colorNeutralBackground6, colorCompoundBrandBackground, borderRadiusMedium } from '../../legacy/tokens'; +import { + ctrlProgressBackgroundEmptyRaw, + ctrlProgressBackgroundFilledRaw, + ctrlProgressCornerRaw, + ctrlProgressHeightFilledRaw, + ctrlProgressHeightEmptyRaw, + ctrlProgressSmHeightFilledRaw, + ctrlProgressSmHeightEmptyRaw, + ctrlProgressLgHeightFilledRaw, + ctrlProgressLgHeightEmptyRaw, +} from './variables'; + +export const ctrlProgressBackgroundEmpty = `var(${ctrlProgressBackgroundEmptyRaw}, ${colorNeutralBackground6})`; +export const ctrlProgressBackgroundFilled = `var(${ctrlProgressBackgroundFilledRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorCompoundBrandBackground}))`; +export const ctrlProgressCorner = `var(${ctrlProgressCornerRaw}, var(${cornerCircularRaw}, ${borderRadiusMedium}))`; +export const ctrlProgressHeightFilled = `var(${ctrlProgressHeightFilledRaw}, 100%)`; +export const ctrlProgressHeightEmpty = `var(${ctrlProgressHeightEmptyRaw}, var(${ctrlProgressHeightFilledRaw}, 2px))`; +export const ctrlProgressSmHeightFilled = `var(${ctrlProgressSmHeightFilledRaw})`; +export const ctrlProgressSmHeightEmpty = `var(${ctrlProgressSmHeightEmptyRaw}, var(${ctrlProgressSmHeightFilledRaw}))`; +export const ctrlProgressLgHeightFilled = `var(${ctrlProgressLgHeightFilledRaw}, 100%)`; +export const ctrlProgressLgHeightEmpty = `var(${ctrlProgressLgHeightEmptyRaw}, var(${ctrlProgressLgHeightFilledRaw}, 4px))`; diff --git a/packages/semantic-tokens/src/components/progress/variables.ts b/packages/semantic-tokens/src/components/progress/variables.ts new file mode 100644 index 00000000000000..a25933bb4e03f4 --- /dev/null +++ b/packages/semantic-tokens/src/components/progress/variables.ts @@ -0,0 +1,10 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlProgressBackgroundEmptyRaw = '--smtc-ctrl-progress-background-empty'; +export const ctrlProgressBackgroundFilledRaw = '--smtc-ctrl-progress-background-filled'; +export const ctrlProgressCornerRaw = '--smtc-ctrl-progress-corner'; +export const ctrlProgressHeightFilledRaw = '--smtc-ctrl-progress-height-filled'; +export const ctrlProgressHeightEmptyRaw = '--smtc-ctrl-progress-height-empty'; +export const ctrlProgressSmHeightFilledRaw = '--smtc-ctrl-progress-sm-height-filled'; +export const ctrlProgressSmHeightEmptyRaw = '--smtc-ctrl-progress-sm-height-empty'; +export const ctrlProgressLgHeightFilledRaw = '--smtc-ctrl-progress-lg-height-filled'; +export const ctrlProgressLgHeightEmptyRaw = '--smtc-ctrl-progress-lg-height-empty'; diff --git a/packages/semantic-tokens/src/components/rating/tokens.ts b/packages/semantic-tokens/src/components/rating/tokens.ts new file mode 100644 index 00000000000000..6cfa25bbea4eff --- /dev/null +++ b/packages/semantic-tokens/src/components/rating/tokens.ts @@ -0,0 +1,17 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { iconThemeCtrlDefaultRestRaw, backgroundCtrlBrandRestRaw, sizeCtrlIconRaw } from '../../control/variables'; +import { colorNeutralForeground1, colorNeutralBackground6 } from '../../legacy/tokens'; +import { ctrlProgressBackgroundEmptyRaw } from '../progress/variables'; +import { + ctrlRatingIconThemeRaw, + ctrlRatingIconGapRaw, + ctrlRatingIconForegroundFilledRaw, + ctrlRatingIconForegroundEmptyRaw, + ctrlRatingIconSizeRaw, +} from './variables'; + +export const ctrlRatingIconTheme = `var(${ctrlRatingIconThemeRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; +export const ctrlRatingIconGap = `var(${ctrlRatingIconGapRaw})`; +export const ctrlRatingIconForegroundFilled = `var(${ctrlRatingIconForegroundFilledRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorNeutralForeground1}))`; +export const ctrlRatingIconForegroundEmpty = `var(${ctrlRatingIconForegroundEmptyRaw}, var(${ctrlProgressBackgroundEmptyRaw}, ${colorNeutralBackground6}))`; +export const ctrlRatingIconSize = `var(${ctrlRatingIconSizeRaw}, var(${sizeCtrlIconRaw}))`; diff --git a/packages/semantic-tokens/src/components/rating/variables.ts b/packages/semantic-tokens/src/components/rating/variables.ts new file mode 100644 index 00000000000000..b48396e925c3cf --- /dev/null +++ b/packages/semantic-tokens/src/components/rating/variables.ts @@ -0,0 +1,6 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlRatingIconThemeRaw = '--smtc-ctrl-rating-icon-theme'; +export const ctrlRatingIconGapRaw = '--smtc-ctrl-rating-icon-gap'; +export const ctrlRatingIconForegroundFilledRaw = '--smtc-ctrl-rating-icon-foreground-filled'; +export const ctrlRatingIconForegroundEmptyRaw = '--smtc-ctrl-rating-icon-foreground-empty'; +export const ctrlRatingIconSizeRaw = '--smtc-ctrl-rating-icon-size'; diff --git a/packages/semantic-tokens/src/components/segmented/tokens.ts b/packages/semantic-tokens/src/components/segmented/tokens.ts new file mode 100644 index 00000000000000..d4d1bded2e8d72 --- /dev/null +++ b/packages/semantic-tokens/src/components/segmented/tokens.ts @@ -0,0 +1,89 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + foregroundCtrlNeutralSecondaryRestRaw, + foregroundCtrlNeutralSecondaryDisabledRaw, + cornerCtrlRestRaw, + cornerCtrlSmRestRaw, + cornerCtrlLgRestRaw, +} from '../../control/variables'; +import { + backgroundCtrlOutlineRestRaw, + backgroundCtrlOutlineHoverRaw, + backgroundCtrlOutlinePressedRaw, + backgroundCtrlOutlineDisabledRaw, +} from '../../nullable/variables'; +import { + ctrlSegmentedBackgroundRestRaw, + ctrlSegmentedBackgroundHoverRaw, + ctrlSegmentedBackgroundPressedRaw, + ctrlSegmentedBackgroundDisabledRaw, + ctrlSegmentedStrokeRestRaw, + ctrlSegmentedStrokeHoverRaw, + ctrlSegmentedStrokePressedRaw, + ctrlSegmentedStrokeDisabledRaw, + ctrlSegmentedCornerRestRaw, + ctrlSegmentedCornerHoverRaw, + ctrlSegmentedCornerPressedRaw, + ctrlSegmentedPaddingRestRaw, + ctrlSegmentedPaddingHoverRaw, + ctrlSegmentedPaddingPressedRaw, + ctrlSegmentedGapRaw, + ctrlSegmentedItemCornerRestRaw, + ctrlSegmentedItemCornerHoverRaw, + ctrlSegmentedItemCornerPressedRaw, + ctrlSegmentedSmPaddingRestRaw, + ctrlSegmentedSmPaddingHoverRaw, + ctrlSegmentedSmPaddingPressedRaw, + ctrlSegmentedLgPaddingRestRaw, + ctrlSegmentedLgPaddingHoverRaw, + ctrlSegmentedLgPaddingPressedRaw, + ctrlSegmentedSmItemCornerRestRaw, + ctrlSegmentedSmItemCornerHoverRaw, + ctrlSegmentedSmItemCornerPressedRaw, + ctrlSegmentedLgItemCornerRestRaw, + ctrlSegmentedLgItemCornerHoverRaw, + ctrlSegmentedLgItemCornerPressedRaw, + ctrlSegmentedSmCornerRestRaw, + ctrlSegmentedSmCornerHoverRaw, + ctrlSegmentedSmCornerPressedRaw, + ctrlSegmentedLgCornerRestRaw, + ctrlSegmentedLgCornerHoverRaw, + ctrlSegmentedLgCornerPressedRaw, +} from './variables'; + +export const ctrlSegmentedBackgroundRest = `var(${ctrlSegmentedBackgroundRestRaw}, var(${backgroundCtrlOutlineRestRaw}))`; +export const ctrlSegmentedBackgroundHover = `var(${ctrlSegmentedBackgroundHoverRaw}, var(${backgroundCtrlOutlineHoverRaw}))`; +export const ctrlSegmentedBackgroundPressed = `var(${ctrlSegmentedBackgroundPressedRaw}, var(${backgroundCtrlOutlinePressedRaw}))`; +export const ctrlSegmentedBackgroundDisabled = `var(${ctrlSegmentedBackgroundDisabledRaw}, var(${backgroundCtrlOutlineDisabledRaw}))`; +export const ctrlSegmentedStrokeRest = `var(${ctrlSegmentedStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const ctrlSegmentedStrokeHover = `var(${ctrlSegmentedStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const ctrlSegmentedStrokePressed = `var(${ctrlSegmentedStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const ctrlSegmentedStrokeDisabled = `var(${ctrlSegmentedStrokeDisabledRaw}, var(${foregroundCtrlNeutralSecondaryDisabledRaw}))`; +export const ctrlSegmentedCornerRest = `var(${ctrlSegmentedCornerRestRaw}, var(${cornerCtrlRestRaw}))`; +export const ctrlSegmentedCornerHover = `var(${ctrlSegmentedCornerHoverRaw}, var(${cornerCtrlRestRaw}))`; +export const ctrlSegmentedCornerPressed = `var(${ctrlSegmentedCornerPressedRaw}, var(${cornerCtrlRestRaw}))`; +export const ctrlSegmentedPaddingRest = `var(${ctrlSegmentedPaddingRestRaw})`; +export const ctrlSegmentedPaddingHover = `var(${ctrlSegmentedPaddingHoverRaw}, var(${ctrlSegmentedPaddingRestRaw}))`; +export const ctrlSegmentedPaddingPressed = `var(${ctrlSegmentedPaddingPressedRaw}, var(${ctrlSegmentedPaddingRestRaw}))`; +export const ctrlSegmentedGap = `var(${ctrlSegmentedGapRaw}, unset)`; +export const ctrlSegmentedItemCornerRest = `var(${ctrlSegmentedItemCornerRestRaw}, var(${cornerCtrlSmRestRaw}))`; +export const ctrlSegmentedItemCornerHover = `var(${ctrlSegmentedItemCornerHoverRaw}, var(${cornerCtrlSmRestRaw}))`; +export const ctrlSegmentedItemCornerPressed = `var(${ctrlSegmentedItemCornerPressedRaw}, var(${cornerCtrlSmRestRaw}))`; +export const ctrlSegmentedSmPaddingRest = `var(${ctrlSegmentedSmPaddingRestRaw})`; +export const ctrlSegmentedSmPaddingHover = `var(${ctrlSegmentedSmPaddingHoverRaw}, var(${ctrlSegmentedSmPaddingRestRaw}))`; +export const ctrlSegmentedSmPaddingPressed = `var(${ctrlSegmentedSmPaddingPressedRaw}, var(${ctrlSegmentedSmPaddingRestRaw}))`; +export const ctrlSegmentedLgPaddingRest = `var(${ctrlSegmentedLgPaddingRestRaw})`; +export const ctrlSegmentedLgPaddingHover = `var(${ctrlSegmentedLgPaddingHoverRaw}, var(${ctrlSegmentedLgPaddingRestRaw}))`; +export const ctrlSegmentedLgPaddingPressed = `var(${ctrlSegmentedLgPaddingPressedRaw}, var(${ctrlSegmentedLgPaddingRestRaw}))`; +export const ctrlSegmentedSmItemCornerRest = `var(${ctrlSegmentedSmItemCornerRestRaw})`; +export const ctrlSegmentedSmItemCornerHover = `var(${ctrlSegmentedSmItemCornerHoverRaw}, var(${ctrlSegmentedSmItemCornerRestRaw}))`; +export const ctrlSegmentedSmItemCornerPressed = `var(${ctrlSegmentedSmItemCornerPressedRaw}, var(${ctrlSegmentedSmItemCornerRestRaw}))`; +export const ctrlSegmentedLgItemCornerRest = `var(${ctrlSegmentedLgItemCornerRestRaw}, var(${cornerCtrlRestRaw}))`; +export const ctrlSegmentedLgItemCornerHover = `var(${ctrlSegmentedLgItemCornerHoverRaw}, var(${cornerCtrlRestRaw}))`; +export const ctrlSegmentedLgItemCornerPressed = `var(${ctrlSegmentedLgItemCornerPressedRaw}, var(${cornerCtrlRestRaw}))`; +export const ctrlSegmentedSmCornerRest = `var(${ctrlSegmentedSmCornerRestRaw}, var(${cornerCtrlSmRestRaw}))`; +export const ctrlSegmentedSmCornerHover = `var(${ctrlSegmentedSmCornerHoverRaw}, var(${cornerCtrlSmRestRaw}))`; +export const ctrlSegmentedSmCornerPressed = `var(${ctrlSegmentedSmCornerPressedRaw}, var(${cornerCtrlSmRestRaw}))`; +export const ctrlSegmentedLgCornerRest = `var(${ctrlSegmentedLgCornerRestRaw}, var(${cornerCtrlLgRestRaw}))`; +export const ctrlSegmentedLgCornerHover = `var(${ctrlSegmentedLgCornerHoverRaw}, var(${cornerCtrlLgRestRaw}))`; +export const ctrlSegmentedLgCornerPressed = `var(${ctrlSegmentedLgCornerPressedRaw}, var(${cornerCtrlLgRestRaw}))`; diff --git a/packages/semantic-tokens/src/components/segmented/variables.ts b/packages/semantic-tokens/src/components/segmented/variables.ts new file mode 100644 index 00000000000000..1a2eb26ebf7ab1 --- /dev/null +++ b/packages/semantic-tokens/src/components/segmented/variables.ts @@ -0,0 +1,37 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlSegmentedBackgroundRestRaw = '--smtc-ctrl-segmented-background-rest'; +export const ctrlSegmentedBackgroundHoverRaw = '--smtc-ctrl-segmented-background-hover'; +export const ctrlSegmentedBackgroundPressedRaw = '--smtc-ctrl-segmented-background-pressed'; +export const ctrlSegmentedBackgroundDisabledRaw = '--smtc-ctrl-segmented-background-disabled'; +export const ctrlSegmentedStrokeRestRaw = '--smtc-ctrl-segmented-stroke-rest'; +export const ctrlSegmentedStrokeHoverRaw = '--smtc-ctrl-segmented-stroke-hover'; +export const ctrlSegmentedStrokePressedRaw = '--smtc-ctrl-segmented-stroke-pressed'; +export const ctrlSegmentedStrokeDisabledRaw = '--smtc-ctrl-segmented-stroke-disabled'; +export const ctrlSegmentedCornerRestRaw = '--smtc-ctrl-segmented-corner-rest'; +export const ctrlSegmentedCornerHoverRaw = '--smtc-ctrl-segmented-corner-hover'; +export const ctrlSegmentedCornerPressedRaw = '--smtc-ctrl-segmented-corner-pressed'; +export const ctrlSegmentedPaddingRestRaw = '--smtc-ctrl-segmented-padding-rest'; +export const ctrlSegmentedPaddingHoverRaw = '--smtc-ctrl-segmented-padding-hover'; +export const ctrlSegmentedPaddingPressedRaw = '--smtc-ctrl-segmented-padding-pressed'; +export const ctrlSegmentedGapRaw = '--smtc-ctrl-segmented-gap'; +export const ctrlSegmentedItemCornerRestRaw = '--smtc-ctrl-segmented-item-corner-rest'; +export const ctrlSegmentedItemCornerHoverRaw = '--smtc-ctrl-segmented-item-corner-hover'; +export const ctrlSegmentedItemCornerPressedRaw = '--smtc-ctrl-segmented-item-corner-pressed'; +export const ctrlSegmentedSmPaddingRestRaw = '--smtc-ctrl-segmented-sm-padding-rest'; +export const ctrlSegmentedSmPaddingHoverRaw = '--smtc-ctrl-segmented-sm-padding-hover'; +export const ctrlSegmentedSmPaddingPressedRaw = '--smtc-ctrl-segmented-sm-padding-pressed'; +export const ctrlSegmentedLgPaddingRestRaw = '--smtc-ctrl-segmented-lg-padding-rest'; +export const ctrlSegmentedLgPaddingHoverRaw = '--smtc-ctrl-segmented-lg-padding-hover'; +export const ctrlSegmentedLgPaddingPressedRaw = '--smtc-ctrl-segmented-lg-padding-pressed'; +export const ctrlSegmentedSmItemCornerRestRaw = '--smtc-ctrl-segmented-sm-item-corner-rest'; +export const ctrlSegmentedSmItemCornerHoverRaw = '--smtc-ctrl-segmented-sm-item-corner-hover'; +export const ctrlSegmentedSmItemCornerPressedRaw = '--smtc-ctrl-segmented-sm-item-corner-pressed'; +export const ctrlSegmentedLgItemCornerRestRaw = '--smtc-ctrl-segmented-lg-item-corner-rest'; +export const ctrlSegmentedLgItemCornerHoverRaw = '--smtc-ctrl-segmented-lg-item-corner-hover'; +export const ctrlSegmentedLgItemCornerPressedRaw = '--smtc-ctrl-segmented-lg-item-corner-pressed'; +export const ctrlSegmentedSmCornerRestRaw = '--smtc-ctrl-segmented-sm-corner-rest'; +export const ctrlSegmentedSmCornerHoverRaw = '--smtc-ctrl-segmented-sm-corner-hover'; +export const ctrlSegmentedSmCornerPressedRaw = '--smtc-ctrl-segmented-sm-corner-pressed'; +export const ctrlSegmentedLgCornerRestRaw = '--smtc-ctrl-segmented-lg-corner-rest'; +export const ctrlSegmentedLgCornerHoverRaw = '--smtc-ctrl-segmented-lg-corner-hover'; +export const ctrlSegmentedLgCornerPressedRaw = '--smtc-ctrl-segmented-lg-corner-pressed'; diff --git a/packages/semantic-tokens/src/components/slider/tokens.ts b/packages/semantic-tokens/src/components/slider/tokens.ts new file mode 100644 index 00000000000000..5541c72fc63bdf --- /dev/null +++ b/packages/semantic-tokens/src/components/slider/tokens.ts @@ -0,0 +1,111 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + cornerCircularRaw, + backgroundCtrlBrandRestRaw, + backgroundCtrlBrandHoverRaw, + backgroundCtrlBrandPressedRaw, + backgroundCtrlBrandDisabledRaw, + sizeCtrlIconRaw, + foregroundCtrlOnBrandRestRaw, + foregroundCtrlOnBrandDisabledRaw, + strokeWidthDefaultRaw, + sizeCtrlSmIconRaw, + sizeCtrlLgIconRaw, +} from '../../control/variables'; +import { + borderRadiusXLarge, + colorCompoundBrandBackground, + colorNeutralStrokeAccessible, + colorNeutralBackgroundDisabled, + colorCompoundBrandBackgroundHover, + colorCompoundBrandBackgroundPressed, + colorNeutralForegroundDisabled, + borderRadiusCircular, + colorNeutralBackground1, + colorNeutralStroke1, +} from '../../legacy/tokens'; +import { + ctrlProgressHeightFilledRaw, + ctrlProgressBackgroundEmptyRaw, + ctrlProgressSmHeightFilledRaw, + ctrlProgressLgHeightFilledRaw, +} from '../progress/variables'; +import { + ctrlSliderBarHeightRaw, + ctrlSliderBarCornerRaw, + ctrlSliderBarForegroundFilledRestRaw, + ctrlSliderBarForegroundEmptyRestRaw, + ctrlSliderBarForegroundEmptyHoverRaw, + ctrlSliderBarForegroundEmptyPressedRaw, + ctrlSliderBarForegroundEmptyDisabledRaw, + ctrlSliderBarForegroundFilledHoverRaw, + ctrlSliderBarForegroundFilledPressedRaw, + ctrlSliderBarForegroundFilledDisabledRaw, + ctrlSliderThumbCornerRaw, + ctrlSliderThumbSizeRestRaw, + ctrlSliderThumbSizeHoverRaw, + ctrlSliderThumbSizePressedRaw, + ctrlSliderThumbBackgroundRestRaw, + ctrlSliderThumbBackgroundHoverRaw, + ctrlSliderThumbBackgroundPressedRaw, + ctrlSliderThumbBackgroundDisabledRaw, + ctrlSliderThumbInnerStrokeWidthRestRaw, + ctrlSliderThumbInnerStrokeWidthHoverRaw, + ctrlSliderThumbInnerStrokeWidthPressedRaw, + ctrlSliderThumbInnerStrokeRestRaw, + ctrlSliderThumbInnerStrokeHoverRaw, + ctrlSliderThumbInnerStrokePressedRaw, + ctrlSliderThumbInnerStrokeDisabledRaw, + ctrlSliderThumbOuterStrokeWidthRaw, + ctrlSliderThumbOuterStrokeRestRaw, + ctrlSliderThumbOuterStrokeHoverRaw, + ctrlSliderThumbOuterStrokePressedRaw, + ctrlSliderThumbOuterStrokeDisabledRaw, + ctrlSliderSmThumbSizeRestRaw, + ctrlSliderSmThumbSizeHoverRaw, + ctrlSliderSmThumbSizePressedRaw, + ctrlSliderSmBarHeightRaw, + ctrlSliderLgThumbSizeRestRaw, + ctrlSliderLgBarHeightRaw, + ctrlSliderLgThumbSizeHoverRaw, + ctrlSliderLgThumbSizePressedRaw, +} from './variables'; + +export const ctrlSliderBarHeight = `var(${ctrlSliderBarHeightRaw}, var(${ctrlProgressHeightFilledRaw}, 4px))`; +export const ctrlSliderBarCorner = `var(${ctrlSliderBarCornerRaw}, var(${cornerCircularRaw}, ${borderRadiusXLarge}))`; +export const ctrlSliderBarForegroundFilledRest = `var(${ctrlSliderBarForegroundFilledRestRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorCompoundBrandBackground}))`; +export const ctrlSliderBarForegroundEmptyRest = `var(${ctrlSliderBarForegroundEmptyRestRaw}, var(${ctrlProgressBackgroundEmptyRaw}, ${colorNeutralStrokeAccessible}))`; +export const ctrlSliderBarForegroundEmptyHover = `var(${ctrlSliderBarForegroundEmptyHoverRaw}, var(${ctrlProgressBackgroundEmptyRaw}, ${colorNeutralStrokeAccessible}))`; +export const ctrlSliderBarForegroundEmptyPressed = `var(${ctrlSliderBarForegroundEmptyPressedRaw}, var(${ctrlProgressBackgroundEmptyRaw}, ${colorNeutralStrokeAccessible}))`; +export const ctrlSliderBarForegroundEmptyDisabled = `var(${ctrlSliderBarForegroundEmptyDisabledRaw}, var(${ctrlProgressBackgroundEmptyRaw}, ${colorNeutralBackgroundDisabled}))`; +export const ctrlSliderBarForegroundFilledHover = `var(${ctrlSliderBarForegroundFilledHoverRaw}, var(${backgroundCtrlBrandHoverRaw}, ${colorCompoundBrandBackgroundHover}))`; +export const ctrlSliderBarForegroundFilledPressed = `var(${ctrlSliderBarForegroundFilledPressedRaw}, var(${backgroundCtrlBrandPressedRaw}, ${colorCompoundBrandBackgroundPressed}))`; +export const ctrlSliderBarForegroundFilledDisabled = `var(${ctrlSliderBarForegroundFilledDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}, ${colorNeutralForegroundDisabled}))`; +export const ctrlSliderThumbCorner = `var(${ctrlSliderThumbCornerRaw}, var(${cornerCircularRaw}, ${borderRadiusCircular}))`; +export const ctrlSliderThumbSizeRest = `var(${ctrlSliderThumbSizeRestRaw}, var(${sizeCtrlIconRaw}, 20px))`; +export const ctrlSliderThumbSizeHover = `var(${ctrlSliderThumbSizeHoverRaw}, var(${sizeCtrlIconRaw}, 20px))`; +export const ctrlSliderThumbSizePressed = `var(${ctrlSliderThumbSizePressedRaw}, var(${sizeCtrlIconRaw}, 20px))`; +export const ctrlSliderThumbBackgroundRest = `var(${ctrlSliderThumbBackgroundRestRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorCompoundBrandBackground}))`; +export const ctrlSliderThumbBackgroundHover = `var(${ctrlSliderThumbBackgroundHoverRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorCompoundBrandBackgroundHover}))`; +export const ctrlSliderThumbBackgroundPressed = `var(${ctrlSliderThumbBackgroundPressedRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorCompoundBrandBackgroundPressed}))`; +export const ctrlSliderThumbBackgroundDisabled = `var(${ctrlSliderThumbBackgroundDisabledRaw}, var(${foregroundCtrlOnBrandDisabledRaw}, ${colorNeutralForegroundDisabled}))`; +export const ctrlSliderThumbInnerStrokeWidthRest = `var(${ctrlSliderThumbInnerStrokeWidthRestRaw})`; +export const ctrlSliderThumbInnerStrokeWidthHover = `var(${ctrlSliderThumbInnerStrokeWidthHoverRaw}, var(${ctrlSliderThumbInnerStrokeWidthRestRaw}))`; +export const ctrlSliderThumbInnerStrokeWidthPressed = `var(${ctrlSliderThumbInnerStrokeWidthPressedRaw}, var(${ctrlSliderThumbInnerStrokeWidthRestRaw}))`; +export const ctrlSliderThumbInnerStrokeRest = `var(${ctrlSliderThumbInnerStrokeRestRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorNeutralBackground1}))`; +export const ctrlSliderThumbInnerStrokeHover = `var(${ctrlSliderThumbInnerStrokeHoverRaw}, var(${backgroundCtrlBrandHoverRaw}, ${colorNeutralBackground1}))`; +export const ctrlSliderThumbInnerStrokePressed = `var(${ctrlSliderThumbInnerStrokePressedRaw}, var(${backgroundCtrlBrandPressedRaw}, ${colorNeutralBackground1}))`; +export const ctrlSliderThumbInnerStrokeDisabled = `var(${ctrlSliderThumbInnerStrokeDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}, ${colorNeutralBackground1}))`; +export const ctrlSliderThumbOuterStrokeWidth = `var(${ctrlSliderThumbOuterStrokeWidthRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlSliderThumbOuterStrokeRest = `var(${ctrlSliderThumbOuterStrokeRestRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorNeutralStroke1}))`; +export const ctrlSliderThumbOuterStrokeHover = `var(${ctrlSliderThumbOuterStrokeHoverRaw}, var(${backgroundCtrlBrandHoverRaw}, ${colorNeutralStroke1}))`; +export const ctrlSliderThumbOuterStrokePressed = `var(${ctrlSliderThumbOuterStrokePressedRaw}, var(${backgroundCtrlBrandPressedRaw}, ${colorNeutralStroke1}))`; +export const ctrlSliderThumbOuterStrokeDisabled = `var(${ctrlSliderThumbOuterStrokeDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}, ${colorNeutralForegroundDisabled}))`; +export const ctrlSliderSmThumbSizeRest = `var(${ctrlSliderSmThumbSizeRestRaw}, var(${sizeCtrlSmIconRaw}, 16px))`; +export const ctrlSliderSmThumbSizeHover = `var(${ctrlSliderSmThumbSizeHoverRaw}, var(${sizeCtrlSmIconRaw}, 16px))`; +export const ctrlSliderSmThumbSizePressed = `var(${ctrlSliderSmThumbSizePressedRaw}, var(${sizeCtrlSmIconRaw}, 16px))`; +export const ctrlSliderSmBarHeight = `var(${ctrlSliderSmBarHeightRaw}, var(${ctrlProgressSmHeightFilledRaw}, 2px))`; +export const ctrlSliderLgThumbSizeRest = `var(${ctrlSliderLgThumbSizeRestRaw}, var(${sizeCtrlLgIconRaw}))`; +export const ctrlSliderLgBarHeight = `var(${ctrlSliderLgBarHeightRaw}, var(${ctrlProgressLgHeightFilledRaw}))`; +export const ctrlSliderLgThumbSizeHover = `var(${ctrlSliderLgThumbSizeHoverRaw}, var(${sizeCtrlLgIconRaw}))`; +export const ctrlSliderLgThumbSizePressed = `var(${ctrlSliderLgThumbSizePressedRaw}, var(${sizeCtrlLgIconRaw}))`; diff --git a/packages/semantic-tokens/src/components/slider/variables.ts b/packages/semantic-tokens/src/components/slider/variables.ts new file mode 100644 index 00000000000000..78e669696fea6e --- /dev/null +++ b/packages/semantic-tokens/src/components/slider/variables.ts @@ -0,0 +1,39 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlSliderBarHeightRaw = '--smtc-ctrl-slider-bar-height'; +export const ctrlSliderBarCornerRaw = '--smtc-ctrl-slider-bar-corner'; +export const ctrlSliderBarForegroundFilledRestRaw = '--smtc-ctrl-slider-bar-foreground-filled-rest'; +export const ctrlSliderBarForegroundEmptyRestRaw = '--smtc-ctrl-slider-bar-foreground-empty-rest'; +export const ctrlSliderBarForegroundEmptyHoverRaw = '--smtc-ctrl-slider-bar-foreground-empty-hover'; +export const ctrlSliderBarForegroundEmptyPressedRaw = '--smtc-ctrl-slider-bar-foreground-empty-pressed'; +export const ctrlSliderBarForegroundEmptyDisabledRaw = '--smtc-ctrl-slider-bar-foreground-empty-disabled'; +export const ctrlSliderBarForegroundFilledHoverRaw = '--smtc-ctrl-slider-bar-foreground-filled-hover'; +export const ctrlSliderBarForegroundFilledPressedRaw = '--smtc-ctrl-slider-bar-foreground-filled-pressed'; +export const ctrlSliderBarForegroundFilledDisabledRaw = '--smtc-ctrl-slider-bar-foreground-filled-disabled'; +export const ctrlSliderThumbCornerRaw = '--smtc-ctrl-slider-thumb-corner'; +export const ctrlSliderThumbSizeRestRaw = '--smtc-ctrl-slider-thumb-size-rest'; +export const ctrlSliderThumbSizeHoverRaw = '--smtc-ctrl-slider-thumb-size-hover'; +export const ctrlSliderThumbSizePressedRaw = '--smtc-ctrl-slider-thumb-size-pressed'; +export const ctrlSliderThumbBackgroundRestRaw = '--smtc-ctrl-slider-thumb-background-rest'; +export const ctrlSliderThumbBackgroundHoverRaw = '--smtc-ctrl-slider-thumb-background-hover'; +export const ctrlSliderThumbBackgroundPressedRaw = '--smtc-ctrl-slider-thumb-background-pressed'; +export const ctrlSliderThumbBackgroundDisabledRaw = '--smtc-ctrl-slider-thumb-background-disabled'; +export const ctrlSliderThumbInnerStrokeWidthRestRaw = '--smtc-ctrl-slider-thumb-inner-stroke-width-rest'; +export const ctrlSliderThumbInnerStrokeWidthHoverRaw = '--smtc-ctrl-slider-thumb-inner-stroke-width-hover'; +export const ctrlSliderThumbInnerStrokeWidthPressedRaw = '--smtc-ctrl-slider-thumb-inner-stroke-width-pressed'; +export const ctrlSliderThumbInnerStrokeRestRaw = '--smtc-ctrl-slider-thumb-inner-stroke-rest'; +export const ctrlSliderThumbInnerStrokeHoverRaw = '--smtc-ctrl-slider-thumb-inner-stroke-hover'; +export const ctrlSliderThumbInnerStrokePressedRaw = '--smtc-ctrl-slider-thumb-inner-stroke-pressed'; +export const ctrlSliderThumbInnerStrokeDisabledRaw = '--smtc-ctrl-slider-thumb-inner-stroke-disabled'; +export const ctrlSliderThumbOuterStrokeWidthRaw = '--smtc-ctrl-slider-thumb-outer-stroke-width'; +export const ctrlSliderThumbOuterStrokeRestRaw = '--smtc-ctrl-slider-thumb-outer-stroke-rest'; +export const ctrlSliderThumbOuterStrokeHoverRaw = '--smtc-ctrl-slider-thumb-outer-stroke-hover'; +export const ctrlSliderThumbOuterStrokePressedRaw = '--smtc-ctrl-slider-thumb-outer-stroke-pressed'; +export const ctrlSliderThumbOuterStrokeDisabledRaw = '--smtc-ctrl-slider-thumb-outer-stroke-disabled'; +export const ctrlSliderSmThumbSizeRestRaw = '--smtc-ctrl-slider-sm-thumb-size-rest'; +export const ctrlSliderSmThumbSizeHoverRaw = '--smtc-ctrl-slider-sm-thumb-size-hover'; +export const ctrlSliderSmThumbSizePressedRaw = '--smtc-ctrl-slider-sm-thumb-size-pressed'; +export const ctrlSliderSmBarHeightRaw = '--smtc-ctrl-slider-sm-bar-height'; +export const ctrlSliderLgThumbSizeRestRaw = '--smtc-ctrl-slider-lg-thumb-size-rest'; +export const ctrlSliderLgBarHeightRaw = '--smtc-ctrl-slider-lg-bar-height'; +export const ctrlSliderLgThumbSizeHoverRaw = '--smtc-ctrl-slider-lg-thumb-size-hover'; +export const ctrlSliderLgThumbSizePressedRaw = '--smtc-ctrl-slider-lg-thumb-size-pressed'; diff --git a/packages/semantic-tokens/src/components/spinner/tokens.ts b/packages/semantic-tokens/src/components/spinner/tokens.ts new file mode 100644 index 00000000000000..c1325c776c6c00 --- /dev/null +++ b/packages/semantic-tokens/src/components/spinner/tokens.ts @@ -0,0 +1,7 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { strokeWidthThicker } from '../../legacy/tokens'; +import { ctrlProgressHeightFilledRaw } from '../progress/variables'; +import { ctrlSpinnerStrokeWidthRaw, ctrlSpinnerShowEmptyTrackRaw } from './variables'; + +export const ctrlSpinnerStrokeWidth = `var(${ctrlSpinnerStrokeWidthRaw}, var(${ctrlProgressHeightFilledRaw}, ${strokeWidthThicker}))`; +export const ctrlSpinnerShowEmptyTrack = `var(${ctrlSpinnerShowEmptyTrackRaw})`; diff --git a/packages/semantic-tokens/src/components/spinner/variables.ts b/packages/semantic-tokens/src/components/spinner/variables.ts new file mode 100644 index 00000000000000..e8f1cb3b0287f3 --- /dev/null +++ b/packages/semantic-tokens/src/components/spinner/variables.ts @@ -0,0 +1,3 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlSpinnerStrokeWidthRaw = '--smtc-ctrl-spinner-stroke-width'; +export const ctrlSpinnerShowEmptyTrackRaw = '--smtc-ctrl-spinner-show-empty-track'; diff --git a/packages/semantic-tokens/src/components/split/tokens.ts b/packages/semantic-tokens/src/components/split/tokens.ts new file mode 100644 index 00000000000000..b8dcb0ce062573 --- /dev/null +++ b/packages/semantic-tokens/src/components/split/tokens.ts @@ -0,0 +1,11 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { strokeWidthDefaultRaw } from '../../control/variables'; +import { + ctrlSplitDividerStrokeWidthRaw, + ctrlSplitDividerStrokeWidthOnOutlineRaw, + ctrlSplitDividerStrokeWidthOnSubtleRaw, +} from './variables'; + +export const ctrlSplitDividerStrokeWidth = `var(${ctrlSplitDividerStrokeWidthRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlSplitDividerStrokeWidthOnOutline = `var(${ctrlSplitDividerStrokeWidthOnOutlineRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlSplitDividerStrokeWidthOnSubtle = `var(${ctrlSplitDividerStrokeWidthOnSubtleRaw}, unset)`; diff --git a/packages/semantic-tokens/src/components/split/variables.ts b/packages/semantic-tokens/src/components/split/variables.ts new file mode 100644 index 00000000000000..5f941a9040ae57 --- /dev/null +++ b/packages/semantic-tokens/src/components/split/variables.ts @@ -0,0 +1,4 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlSplitDividerStrokeWidthRaw = '--smtc-ctrl-split-divider-stroke-width'; +export const ctrlSplitDividerStrokeWidthOnOutlineRaw = '--smtc-ctrl-split-divider-stroke-width-on-outline'; +export const ctrlSplitDividerStrokeWidthOnSubtleRaw = '--smtc-ctrl-split-divider-stroke-width-on-subtle'; diff --git a/packages/semantic-tokens/src/components/tooltip/tokens.ts b/packages/semantic-tokens/src/components/tooltip/tokens.ts new file mode 100644 index 00000000000000..c329641175f045 --- /dev/null +++ b/packages/semantic-tokens/src/components/tooltip/tokens.ts @@ -0,0 +1,15 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { cornerCtrlRestRaw } from '../../control/variables'; +import { borderRadiusMedium, colorNeutralBackground1, colorNeutralForeground1 } from '../../legacy/tokens'; +import { ctrlFabShadowRestRaw } from '../fab/variables'; +import { + ctrlTooltipCornerRaw, + ctrlTooltipBackgroundRaw, + ctrlTooltipForegroundRaw, + ctrlTooltipShadowRaw, +} from './variables'; + +export const ctrlTooltipCorner = `var(${ctrlTooltipCornerRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusMedium}))`; +export const ctrlTooltipBackground = `var(${ctrlTooltipBackgroundRaw}, ${colorNeutralBackground1})`; +export const ctrlTooltipForeground = `var(${ctrlTooltipForegroundRaw}, ${colorNeutralForeground1})`; +export const ctrlTooltipShadow = `var(${ctrlTooltipShadowRaw}, var(${ctrlFabShadowRestRaw}, drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey))))`; diff --git a/packages/semantic-tokens/src/components/tooltip/variables.ts b/packages/semantic-tokens/src/components/tooltip/variables.ts new file mode 100644 index 00000000000000..c864c1cc4872ae --- /dev/null +++ b/packages/semantic-tokens/src/components/tooltip/variables.ts @@ -0,0 +1,5 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlTooltipCornerRaw = '--smtc-ctrl-tooltip-corner'; +export const ctrlTooltipBackgroundRaw = '--smtc-ctrl-tooltip-background'; +export const ctrlTooltipForegroundRaw = '--smtc-ctrl-tooltip-foreground'; +export const ctrlTooltipShadowRaw = '--smtc-ctrl-tooltip-shadow'; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts new file mode 100644 index 00000000000000..987510dbda5c28 --- /dev/null +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -0,0 +1,486 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + fontSizeHero1000, + lineHeightHero1000, + fontSizeHero900, + lineHeightHero900, + fontSizeHero800, + lineHeightHero800, + fontSizeHero700, + lineHeightHero700, + fontSizeBase600, + lineHeightBase600, + fontSizeBase500, + lineHeightBase500, + fontSizeBase400, + lineHeightBase400, + fontSizeBase300, + lineHeightBase300, + fontSizeBase200, + lineHeightBase200, + fontSizeBase100, + lineHeightBase100, + fontFamilyBase, + fontWeightRegular, + fontWeightSemibold, + spacingVerticalS, + spacingHorizontalM, + spacingHorizontalNone, + spacingHorizontalXXL, + spacingHorizontalS, + spacingHorizontalL, + spacingVerticalXXS, + spacingHorizontalXS, + spacingHorizontalSNudge, + borderRadiusCircular, + strokeWidthThin, + colorBackgroundOverlay, + colorNeutralStroke1, + colorNeutralStrokeDisabled, + colorNeutralStrokeOnBrand, + colorNeutralStroke2, + colorNeutralBackground1, + colorBrandBackground, + colorBrandBackgroundHover, + colorBrandBackgroundPressed, + colorNeutralBackground1Hover, + colorNeutralBackground1Pressed, + colorNeutralBackgroundDisabled, + colorSubtleBackgroundHover, + colorSubtleBackgroundPressed, + borderRadiusNone, + borderRadiusMedium, + colorNeutralForeground1, + colorNeutralForegroundDisabled, + colorNeutralForeground2, + colorNeutralForegroundOnBrand, + colorBrandBackground2, + colorBrandStroke2, + colorPaletteRedBackground3, + colorStatusDangerBackground1, + colorStatusDangerBorder1, + colorPaletteRedForeground3, + colorPaletteDarkOrangeBackground3, + colorStatusWarningBackground1, + colorStatusWarningBorder1, + colorStatusWarningForeground3, + colorPaletteGreenBackground3, + colorStatusSuccessBackground1, + colorStatusSuccessBorder1, + colorStatusSuccessForeground1, + colorNeutralBackground3, + colorTransparentStroke, + colorNeutralBackground5, + colorNeutralBackground4, + colorPaletteMarigoldBackground3, + colorPaletteBerryForeground3, + colorTransparentBackground, + shadow64, +} from '../legacy/tokens'; +import { + textGlobalDisplay1FontSizeRaw, + textGlobalDisplay1LineHeightRaw, + textGlobalDisplay2FontSizeRaw, + textGlobalDisplay2LineHeightRaw, + textGlobalTitle1FontSizeRaw, + textGlobalTitle1LineHeightRaw, + textGlobalTitle2FontSizeRaw, + textGlobalTitle2LineHeightRaw, + textGlobalSubtitle1FontSizeRaw, + textGlobalSubtitle1LineHeightRaw, + textGlobalSubtitle2FontSizeRaw, + textGlobalSubtitle2LineHeightRaw, + textGlobalBody1FontSizeRaw, + textGlobalBody1LineHeightRaw, + textGlobalBody2FontSizeRaw, + textGlobalBody2LineHeightRaw, + textGlobalBody3FontSizeRaw, + textGlobalBody3LineHeightRaw, + textGlobalCaption1FontSizeRaw, + textGlobalCaption1LineHeightRaw, + textGlobalCaption2FontSizeRaw, + textGlobalCaption2LineHeightRaw, + textStyleDefaultRegularFontFamilyRaw, + textStyleDefaultRegularWeightRaw, + textStyleDefaultRegularLetterSpacingRaw, + textStyleDefaultHeaderWeightRaw, + sizeCtrlDefaultRaw, + sizeCtrlIconRaw, + sizeCtrlIconSecondaryRaw, + textCtrlWeightSelectedRaw, + sizeCtrlSmDefaultRaw, + sizeCtrlSmIconRaw, + sizeCtrlLgDefaultRaw, + sizeCtrlLgIconRaw, + paddingContentAlignDefaultRaw, + paddingContentAlignOutdentIconOnSubtleRaw, + paddingContentNoneRaw, + paddingContentAlignOutdentTextOnSubtleRaw, + paddingContentXxSmallRaw, + paddingContentXSmallRaw, + paddingContentSmallRaw, + paddingContentMediumRaw, + paddingContentLargeRaw, + paddingContentXLargeRaw, + paddingContentXxLargeRaw, + paddingContentXxxLargeRaw, + paddingCtrlHorizontalDefaultRaw, + paddingCtrlHorizontalIconOnlyRaw, + paddingCtrlTextTopRaw, + paddingCtrlTextSideRaw, + paddingCtrlToNestedControlRaw, + paddingCtrlSmHorizontalDefaultRaw, + paddingCtrlSmHorizontalIconOnlyRaw, + paddingCtrlSmTextTopRaw, + paddingCtrlSmToNestedControlRaw, + paddingCtrlLgHorizontalDefaultRaw, + paddingCtrlLgHorizontalIconOnlyRaw, + paddingCtrlLgTextTopRaw, + paddingCtrlLgToNestedControlRaw, + gapBetweenContentNoneRaw, + gapBetweenContentXxSmallRaw, + gapBetweenContentXSmallRaw, + gapBetweenContentSmallRaw, + gapBetweenCtrlDefaultRaw, + gapBetweenContentMediumRaw, + gapBetweenContentLargeRaw, + gapBetweenContentXLargeRaw, + gapBetweenContentXxLargeRaw, + gapBetweenCtrlLgDefaultRaw, + gapBetweenCtrlSmDefaultRaw, + gapInsideCtrlDefaultRaw, + gapInsideCtrlSmDefaultRaw, + gapInsideCtrlSmToSecondaryIconRaw, + gapInsideCtrlLgDefaultRaw, + gapInsideCtrlLgToSecondaryIconRaw, + gapInsideCtrlToSecondaryIconRaw, + gapInsideCtrlToLabelRaw, + gapInsideCtrlSmToLabelRaw, + gapInsideCtrlLgToLabelRaw, + cornerCircularRaw, + strokeWidthDefaultRaw, + backgroundSmokeRaw, + strokeCtrlOnOutlineRestRaw, + strokeCtrlOnOutlineHoverRaw, + strokeCtrlOnOutlinePressedRaw, + strokeCtrlOnOutlineDisabledRaw, + strokeCtrlDividerOnBrandRaw, + strokeCtrlDividerOnNeutralRaw, + strokeCtrlDividerOnOutlineRaw, + strokeDividerDefaultRaw, + strokeWindowActiveRaw, + backgroundWindowPrimarySolidRaw, + backgroundWindowPrimaryColorBlendRaw, + backgroundWindowPrimaryLumBlendRaw, + backgroundWindowSecondarySolidRaw, + backgroundWindowSecondaryColorBlendRaw, + backgroundWindowSecondaryLumBlendRaw, + backgroundWindowTabBandColorBlendRaw, + backgroundWindowTabBandLumBlendRaw, + backgroundWindowTabBandSolidRaw, + backgroundWebPagePrimaryRaw, + backgroundWebPageSecondaryRaw, + backgroundLayerPrimarySolidRaw, + backgroundCardOnPrimaryDefaultRestRaw, + backgroundCardOnPrimaryAltRestRaw, + backgroundCardOnPrimaryAltHoverRaw, + backgroundCardOnPrimaryAltPressedRaw, + backgroundCardOnPrimaryAltDisabledRaw, + backgroundCardOnPrimaryDefaultHoverRaw, + backgroundCardOnPrimaryDefaultPressedRaw, + backgroundCardOnPrimaryDefaultDisabledRaw, + backgroundFlyoutSolidRaw, + backgroundCtrlBrandRestRaw, + backgroundCtrlBrandHoverRaw, + backgroundCtrlBrandPressedRaw, + backgroundCtrlBrandDisabledRaw, + backgroundCtrlNeutralRestRaw, + backgroundCtrlNeutralHoverRaw, + backgroundCtrlNeutralPressedRaw, + backgroundCtrlNeutralDisabledRaw, + backgroundCtrlSubtleHoverRaw, + backgroundCtrlSubtlePressedRaw, + backgroundFlyoutLumBlendRaw, + backgroundFlyoutColorBlendRaw, + cornerZeroRaw, + cornerBezelRaw, + cornerWindowDefaultRaw, + cornerFlyoutRestRaw, + cornerLayerDefaultRaw, + cornerCardRestRaw, + cornerCtrlRestRaw, + cornerCtrlSmRestRaw, + cornerCtrlLgRestRaw, + cornerImageInCardRaw, + foregroundCtrlNeutralPrimaryRestRaw, + foregroundCtrlNeutralPrimaryDisabledRaw, + foregroundCtrlNeutralSecondaryRestRaw, + foregroundCtrlNeutralSecondaryDisabledRaw, + foregroundCtrlBrandRestRaw, + foregroundCtrlBrandHoverRaw, + foregroundCtrlBrandPressedRaw, + foregroundCtrlBrandDisabledRaw, + foregroundCtrlOnBrandRestRaw, + foregroundCtrlOnBrandDisabledRaw, + materialAcrylicBlurRaw, + materialMicaBlurRaw, + iconThemeCtrlDefaultRestRaw, + iconThemeCtrlDefaultSelectedRaw, + statusBrandTintBackgroundRaw, + statusBrandTintStrokeRaw, + statusDangerBackgroundRaw, + statusDangerTintBackgroundRaw, + statusDangerTintStrokeRaw, + statusDangerTintForegroundRaw, + statusWarningBackgroundRaw, + statusWarningTintBackgroundRaw, + statusWarningTintStrokeRaw, + statusWarningTintForegroundRaw, + statusSuccessBackgroundRaw, + statusSuccessTintBackgroundRaw, + statusSuccessTintStrokeRaw, + statusSuccessTintForegroundRaw, + statusImportantBackgroundRaw, + statusImportantTintBackgroundRaw, + statusImportantTintStrokeRaw, + statusImportantTintForegroundRaw, + statusInformativeBackgroundRaw, + statusInformativeTintForegroundRaw, + statusInformativeTintStrokeRaw, + statusInformativeTintBackgroundRaw, + statusAwayForegroundRaw, + statusOofForegroundRaw, + aiBrandStop1Raw, + aiBrandStop2Raw, + aiBrandStop3Raw, + aiBrandStop4Raw, + aiShimmerStop1Raw, + aiShimmerStop2Raw, + aiShimmerStop3Raw, + aiShimmerStop4Raw, + nullColorRaw, + statusNeutralBackgroundRaw, + statusNeutralTintBackgroundRaw, + statusNeutralTintStrokeRaw, + nullNumberRaw, + nullStringRaw, + backgroundCardOnSecondaryDefaultRestRaw, + backgroundCardOnSecondaryAltRestRaw, + backgroundCardOnSecondaryAltHoverRaw, + backgroundCardOnSecondaryAltPressedRaw, + backgroundCardOnSecondaryAltDisabledRaw, + backgroundCardOnSecondaryDefaultHoverRaw, + backgroundCardOnSecondaryDefaultPressedRaw, + backgroundCardOnSecondaryDefaultDisabledRaw, + backgroundCardOnFlyoutDefaultRestRaw, + backgroundCardOnFlyoutDefaultHoverRaw, + backgroundCardOnFlyoutDefaultPressedRaw, + backgroundCardOnFlyoutDefaultDisabledRaw, + textStyleDefaultDisplayWeightRaw, + shadowFlyoutRaw, + shadowToolbarRaw, + shadowWindowActiveRaw, +} from './variables'; + +export const textGlobalDisplay1FontSize = `var(${textGlobalDisplay1FontSizeRaw})`; +export const textGlobalDisplay1LineHeight = `var(${textGlobalDisplay1LineHeightRaw})`; +export const textGlobalDisplay2FontSize = `var(${textGlobalDisplay2FontSizeRaw}, ${fontSizeHero1000})`; +export const textGlobalDisplay2LineHeight = `var(${textGlobalDisplay2LineHeightRaw}, ${lineHeightHero1000})`; +export const textGlobalTitle1FontSize = `var(${textGlobalTitle1FontSizeRaw}, ${fontSizeHero900})`; +export const textGlobalTitle1LineHeight = `var(${textGlobalTitle1LineHeightRaw}, ${lineHeightHero900})`; +export const textGlobalTitle2FontSize = `var(${textGlobalTitle2FontSizeRaw}, ${fontSizeHero800})`; +export const textGlobalTitle2LineHeight = `var(${textGlobalTitle2LineHeightRaw}, ${lineHeightHero800})`; +export const textGlobalSubtitle1FontSize = `var(${textGlobalSubtitle1FontSizeRaw}, ${fontSizeHero700})`; +export const textGlobalSubtitle1LineHeight = `var(${textGlobalSubtitle1LineHeightRaw}, ${lineHeightHero700})`; +export const textGlobalSubtitle2FontSize = `var(${textGlobalSubtitle2FontSizeRaw}, ${fontSizeBase600})`; +export const textGlobalSubtitle2LineHeight = `var(${textGlobalSubtitle2LineHeightRaw}, ${lineHeightBase600})`; +export const textGlobalBody1FontSize = `var(${textGlobalBody1FontSizeRaw}, ${fontSizeBase500})`; +export const textGlobalBody1LineHeight = `var(${textGlobalBody1LineHeightRaw}, ${lineHeightBase500})`; +export const textGlobalBody2FontSize = `var(${textGlobalBody2FontSizeRaw}, ${fontSizeBase400})`; +export const textGlobalBody2LineHeight = `var(${textGlobalBody2LineHeightRaw}, ${lineHeightBase400})`; +export const textGlobalBody3FontSize = `var(${textGlobalBody3FontSizeRaw}, ${fontSizeBase300})`; +export const textGlobalBody3LineHeight = `var(${textGlobalBody3LineHeightRaw}, ${lineHeightBase300})`; +export const textGlobalCaption1FontSize = `var(${textGlobalCaption1FontSizeRaw}, ${fontSizeBase200})`; +export const textGlobalCaption1LineHeight = `var(${textGlobalCaption1LineHeightRaw}, ${lineHeightBase200})`; +export const textGlobalCaption2FontSize = `var(${textGlobalCaption2FontSizeRaw}, ${fontSizeBase100})`; +export const textGlobalCaption2LineHeight = `var(${textGlobalCaption2LineHeightRaw}, ${lineHeightBase100})`; +export const textStyleDefaultRegularFontFamily = `var(${textStyleDefaultRegularFontFamilyRaw}, ${fontFamilyBase})`; +export const textStyleDefaultRegularWeight = `var(${textStyleDefaultRegularWeightRaw}, ${fontWeightRegular})`; +export const textStyleDefaultRegularLetterSpacing = `var(${textStyleDefaultRegularLetterSpacingRaw}, 0)`; +export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightRaw}, ${fontWeightSemibold})`; +export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw}, 44px)`; +export const sizeCtrlIcon = `var(${sizeCtrlIconRaw}, 20px)`; +export const sizeCtrlIconSecondary = `var(${sizeCtrlIconSecondaryRaw}, 20px)`; +export const textCtrlWeightSelected = `var(${textCtrlWeightSelectedRaw}, ${fontWeightSemibold})`; +export const sizeCtrlSmDefault = `var(${sizeCtrlSmDefaultRaw}, 32px)`; +export const sizeCtrlSmIcon = `var(${sizeCtrlSmIconRaw}, 20px)`; +export const sizeCtrlLgDefault = `var(${sizeCtrlLgDefaultRaw}, 44px)`; +export const sizeCtrlLgIcon = `var(${sizeCtrlLgIconRaw}, 24px)`; +export const paddingContentAlignDefault = `var(${paddingContentAlignDefaultRaw}, ${spacingVerticalS})`; +export const paddingContentAlignOutdentIconOnSubtle = `var(${paddingContentAlignOutdentIconOnSubtleRaw}, ${spacingHorizontalM})`; +export const paddingContentNone = `var(${paddingContentNoneRaw}, ${spacingHorizontalNone})`; +export const paddingContentAlignOutdentTextOnSubtle = `var(${paddingContentAlignOutdentTextOnSubtleRaw})`; +export const paddingContentXxSmall = `var(${paddingContentXxSmallRaw})`; +export const paddingContentXSmall = `var(${paddingContentXSmallRaw})`; +export const paddingContentSmall = `var(${paddingContentSmallRaw}, 12px)`; +export const paddingContentMedium = `var(${paddingContentMediumRaw}, 16px)`; +export const paddingContentLarge = `var(${paddingContentLargeRaw}, ${spacingHorizontalXXL})`; +export const paddingContentXLarge = `var(${paddingContentXLargeRaw})`; +export const paddingContentXxLarge = `var(${paddingContentXxLargeRaw})`; +export const paddingContentXxxLarge = `var(${paddingContentXxxLargeRaw})`; +export const paddingCtrlHorizontalDefault = `var(${paddingCtrlHorizontalDefaultRaw}, ${spacingHorizontalM})`; +export const paddingCtrlHorizontalIconOnly = `var(${paddingCtrlHorizontalIconOnlyRaw}, 5px)`; +export const paddingCtrlTextTop = `var(${paddingCtrlTextTopRaw}, 5px)`; +export const paddingCtrlTextSide = `var(${paddingCtrlTextSideRaw}, 0px)`; +export const paddingCtrlToNestedControl = `var(${paddingCtrlToNestedControlRaw})`; +export const paddingCtrlSmHorizontalDefault = `var(${paddingCtrlSmHorizontalDefaultRaw}, ${spacingHorizontalS})`; +export const paddingCtrlSmHorizontalIconOnly = `var(${paddingCtrlSmHorizontalIconOnlyRaw}, 1px)`; +export const paddingCtrlSmTextTop = `var(${paddingCtrlSmTextTopRaw})`; +export const paddingCtrlSmToNestedControl = `var(${paddingCtrlSmToNestedControlRaw})`; +export const paddingCtrlLgHorizontalDefault = `var(${paddingCtrlLgHorizontalDefaultRaw}, ${spacingHorizontalL})`; +export const paddingCtrlLgHorizontalIconOnly = `var(${paddingCtrlLgHorizontalIconOnlyRaw}, 7px)`; +export const paddingCtrlLgTextTop = `var(${paddingCtrlLgTextTopRaw})`; +export const paddingCtrlLgToNestedControl = `var(${paddingCtrlLgToNestedControlRaw})`; +export const gapBetweenContentNone = `var(${gapBetweenContentNoneRaw})`; +export const gapBetweenContentXxSmall = `var(${gapBetweenContentXxSmallRaw})`; +export const gapBetweenContentXSmall = `var(${gapBetweenContentXSmallRaw}, ${spacingVerticalXXS})`; +export const gapBetweenContentSmall = `var(${gapBetweenContentSmallRaw}, 8px)`; +export const gapBetweenCtrlDefault = `var(${gapBetweenCtrlDefaultRaw}, 8px)`; +export const gapBetweenContentMedium = `var(${gapBetweenContentMediumRaw})`; +export const gapBetweenContentLarge = `var(${gapBetweenContentLargeRaw})`; +export const gapBetweenContentXLarge = `var(${gapBetweenContentXLargeRaw})`; +export const gapBetweenContentXxLarge = `var(${gapBetweenContentXxLargeRaw})`; +export const gapBetweenCtrlLgDefault = `var(${gapBetweenCtrlLgDefaultRaw}, 16px)`; +export const gapBetweenCtrlSmDefault = `var(${gapBetweenCtrlSmDefaultRaw})`; +export const gapInsideCtrlDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingHorizontalS})`; +export const gapInsideCtrlSmDefault = `var(${gapInsideCtrlSmDefaultRaw}, ${spacingHorizontalXS})`; +export const gapInsideCtrlSmToSecondaryIcon = `var(${gapInsideCtrlSmToSecondaryIconRaw})`; +export const gapInsideCtrlLgDefault = `var(${gapInsideCtrlLgDefaultRaw}, ${spacingHorizontalSNudge})`; +export const gapInsideCtrlLgToSecondaryIcon = `var(${gapInsideCtrlLgToSecondaryIconRaw})`; +export const gapInsideCtrlToSecondaryIcon = `var(${gapInsideCtrlToSecondaryIconRaw})`; +export const gapInsideCtrlToLabel = `var(${gapInsideCtrlToLabelRaw}, ${spacingHorizontalSNudge})`; +export const gapInsideCtrlSmToLabel = `var(${gapInsideCtrlSmToLabelRaw}, ${spacingHorizontalXS})`; +export const gapInsideCtrlLgToLabel = `var(${gapInsideCtrlLgToLabelRaw}, ${spacingHorizontalS})`; +export const cornerCircular = `var(${cornerCircularRaw}, ${borderRadiusCircular})`; +export const strokeWidthDefault = `var(${strokeWidthDefaultRaw}, ${strokeWidthThin})`; +export const backgroundSmoke = `var(${backgroundSmokeRaw}, ${colorBackgroundOverlay})`; +export const strokeCtrlOnOutlineRest = `var(${strokeCtrlOnOutlineRestRaw}, ${colorNeutralStroke1})`; +export const strokeCtrlOnOutlineHover = `var(${strokeCtrlOnOutlineHoverRaw}, ${colorNeutralStroke1})`; +export const strokeCtrlOnOutlinePressed = `var(${strokeCtrlOnOutlinePressedRaw}, ${colorNeutralStroke1})`; +export const strokeCtrlOnOutlineDisabled = `var(${strokeCtrlOnOutlineDisabledRaw}, ${colorNeutralStrokeDisabled})`; +export const strokeCtrlDividerOnBrand = `var(${strokeCtrlDividerOnBrandRaw}, ${colorNeutralStrokeOnBrand})`; +export const strokeCtrlDividerOnNeutral = `var(${strokeCtrlDividerOnNeutralRaw})`; +export const strokeCtrlDividerOnOutline = `var(${strokeCtrlDividerOnOutlineRaw}, ${colorNeutralStroke1})`; +export const strokeDividerDefault = `var(${strokeDividerDefaultRaw}, ${colorNeutralStroke2})`; +export const strokeWindowActive = `var(${strokeWindowActiveRaw})`; +export const backgroundWindowPrimarySolid = `var(${backgroundWindowPrimarySolidRaw})`; +export const backgroundWindowPrimaryColorBlend = `var(${backgroundWindowPrimaryColorBlendRaw})`; +export const backgroundWindowPrimaryLumBlend = `var(${backgroundWindowPrimaryLumBlendRaw})`; +export const backgroundWindowSecondarySolid = `var(${backgroundWindowSecondarySolidRaw})`; +export const backgroundWindowSecondaryColorBlend = `var(${backgroundWindowSecondaryColorBlendRaw})`; +export const backgroundWindowSecondaryLumBlend = `var(${backgroundWindowSecondaryLumBlendRaw})`; +export const backgroundWindowTabBandColorBlend = `var(${backgroundWindowTabBandColorBlendRaw})`; +export const backgroundWindowTabBandLumBlend = `var(${backgroundWindowTabBandLumBlendRaw})`; +export const backgroundWindowTabBandSolid = `var(${backgroundWindowTabBandSolidRaw})`; +export const backgroundWebPagePrimary = `var(${backgroundWebPagePrimaryRaw})`; +export const backgroundWebPageSecondary = `var(${backgroundWebPageSecondaryRaw})`; +export const backgroundLayerPrimarySolid = `var(${backgroundLayerPrimarySolidRaw})`; +export const backgroundCardOnPrimaryDefaultRest = `var(${backgroundCardOnPrimaryDefaultRestRaw})`; +export const backgroundCardOnPrimaryAltRest = `var(${backgroundCardOnPrimaryAltRestRaw})`; +export const backgroundCardOnPrimaryAltHover = `var(${backgroundCardOnPrimaryAltHoverRaw})`; +export const backgroundCardOnPrimaryAltPressed = `var(${backgroundCardOnPrimaryAltPressedRaw})`; +export const backgroundCardOnPrimaryAltDisabled = `var(${backgroundCardOnPrimaryAltDisabledRaw})`; +export const backgroundCardOnPrimaryDefaultHover = `var(${backgroundCardOnPrimaryDefaultHoverRaw})`; +export const backgroundCardOnPrimaryDefaultPressed = `var(${backgroundCardOnPrimaryDefaultPressedRaw})`; +export const backgroundCardOnPrimaryDefaultDisabled = `var(${backgroundCardOnPrimaryDefaultDisabledRaw})`; +export const backgroundFlyoutSolid = `var(${backgroundFlyoutSolidRaw}, ${colorNeutralBackground1})`; +export const backgroundCtrlBrandRest = `var(${backgroundCtrlBrandRestRaw}, ${colorBrandBackground})`; +export const backgroundCtrlBrandHover = `var(${backgroundCtrlBrandHoverRaw}, ${colorBrandBackgroundHover})`; +export const backgroundCtrlBrandPressed = `var(${backgroundCtrlBrandPressedRaw}, ${colorBrandBackgroundPressed})`; +export const backgroundCtrlBrandDisabled = `var(${backgroundCtrlBrandDisabledRaw})`; +export const backgroundCtrlNeutralRest = `var(${backgroundCtrlNeutralRestRaw}, ${colorNeutralBackground1})`; +export const backgroundCtrlNeutralHover = `var(${backgroundCtrlNeutralHoverRaw}, ${colorNeutralBackground1Hover})`; +export const backgroundCtrlNeutralPressed = `var(${backgroundCtrlNeutralPressedRaw}, ${colorNeutralBackground1Pressed})`; +export const backgroundCtrlNeutralDisabled = `var(${backgroundCtrlNeutralDisabledRaw}, ${colorNeutralBackgroundDisabled})`; +export const backgroundCtrlSubtleHover = `var(${backgroundCtrlSubtleHoverRaw}, ${colorSubtleBackgroundHover})`; +export const backgroundCtrlSubtlePressed = `var(${backgroundCtrlSubtlePressedRaw}, ${colorSubtleBackgroundPressed})`; +export const backgroundFlyoutLumBlend = `var(${backgroundFlyoutLumBlendRaw}, ${colorNeutralBackground1})`; +export const backgroundFlyoutColorBlend = `var(${backgroundFlyoutColorBlendRaw})`; +export const cornerZero = `var(${cornerZeroRaw}, ${borderRadiusNone})`; +export const cornerBezel = `var(${cornerBezelRaw})`; +export const cornerWindowDefault = `var(${cornerWindowDefaultRaw})`; +export const cornerFlyoutRest = `var(${cornerFlyoutRestRaw}, 0px)`; +export const cornerLayerDefault = `var(${cornerLayerDefaultRaw})`; +export const cornerCardRest = `var(${cornerCardRestRaw})`; +export const cornerCtrlRest = `var(${cornerCtrlRestRaw}, ${borderRadiusMedium})`; +export const cornerCtrlSmRest = `var(${cornerCtrlSmRestRaw}, ${borderRadiusMedium})`; +export const cornerCtrlLgRest = `var(${cornerCtrlLgRestRaw}, ${borderRadiusMedium})`; +export const cornerImageInCard = `var(${cornerImageInCardRaw})`; +export const foregroundCtrlNeutralPrimaryRest = `var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1})`; +export const foregroundCtrlNeutralPrimaryDisabled = `var(${foregroundCtrlNeutralPrimaryDisabledRaw}, ${colorNeutralForegroundDisabled})`; +export const foregroundCtrlNeutralSecondaryRest = `var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground2})`; +export const foregroundCtrlNeutralSecondaryDisabled = `var(${foregroundCtrlNeutralSecondaryDisabledRaw}, ${colorNeutralForegroundDisabled})`; +export const foregroundCtrlBrandRest = `var(${foregroundCtrlBrandRestRaw})`; +export const foregroundCtrlBrandHover = `var(${foregroundCtrlBrandHoverRaw})`; +export const foregroundCtrlBrandPressed = `var(${foregroundCtrlBrandPressedRaw})`; +export const foregroundCtrlBrandDisabled = `var(${foregroundCtrlBrandDisabledRaw})`; +export const foregroundCtrlOnBrandRest = `var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundOnBrand})`; +export const foregroundCtrlOnBrandDisabled = `var(${foregroundCtrlOnBrandDisabledRaw})`; +export const materialAcrylicBlur = `var(${materialAcrylicBlurRaw})`; +export const materialMicaBlur = `var(${materialMicaBlurRaw})`; +export const iconThemeCtrlDefaultRest = `var(${iconThemeCtrlDefaultRestRaw})`; +export const iconThemeCtrlDefaultSelected = `var(${iconThemeCtrlDefaultSelectedRaw})`; +export const statusBrandTintBackground = `var(${statusBrandTintBackgroundRaw}, ${colorBrandBackground2})`; +export const statusBrandTintStroke = `var(${statusBrandTintStrokeRaw}, ${colorBrandStroke2})`; +export const statusDangerBackground = `var(${statusDangerBackgroundRaw}, ${colorPaletteRedBackground3})`; +export const statusDangerTintBackground = `var(${statusDangerTintBackgroundRaw}, ${colorStatusDangerBackground1})`; +export const statusDangerTintStroke = `var(${statusDangerTintStrokeRaw}, ${colorStatusDangerBorder1})`; +export const statusDangerTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorPaletteRedForeground3})`; +export const statusWarningBackground = `var(${statusWarningBackgroundRaw}, ${colorPaletteDarkOrangeBackground3})`; +export const statusWarningTintBackground = `var(${statusWarningTintBackgroundRaw}, ${colorStatusWarningBackground1})`; +export const statusWarningTintStroke = `var(${statusWarningTintStrokeRaw}, ${colorStatusWarningBorder1})`; +export const statusWarningTintForeground = `var(${statusWarningTintForegroundRaw}, ${colorStatusWarningForeground3})`; +export const statusSuccessBackground = `var(${statusSuccessBackgroundRaw}, ${colorPaletteGreenBackground3})`; +export const statusSuccessTintBackground = `var(${statusSuccessTintBackgroundRaw}, ${colorStatusSuccessBackground1})`; +export const statusSuccessTintStroke = `var(${statusSuccessTintStrokeRaw}, ${colorStatusSuccessBorder1})`; +export const statusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorStatusSuccessForeground1})`; +export const statusImportantBackground = `var(${statusImportantBackgroundRaw}, ${colorNeutralForeground1})`; +export const statusImportantTintBackground = `var(${statusImportantTintBackgroundRaw}, ${colorNeutralBackground3})`; +export const statusImportantTintStroke = `var(${statusImportantTintStrokeRaw}, ${colorTransparentStroke})`; +export const statusImportantTintForeground = `var(${statusImportantTintForegroundRaw}, ${colorNeutralForeground1})`; +export const statusInformativeBackground = `var(${statusInformativeBackgroundRaw}, ${colorNeutralBackground5})`; +export const statusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw}, ${colorNeutralForeground2})`; +export const statusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw}, ${colorNeutralStroke1})`; +export const statusInformativeTintBackground = `var(${statusInformativeTintBackgroundRaw}, ${colorNeutralBackground4})`; +export const statusAwayForeground = `var(${statusAwayForegroundRaw}, ${colorPaletteMarigoldBackground3})`; +export const statusOofForeground = `var(${statusOofForegroundRaw}, ${colorPaletteBerryForeground3})`; +export const aiBrandStop1 = `var(${aiBrandStop1Raw})`; +export const aiBrandStop2 = `var(${aiBrandStop2Raw})`; +export const aiBrandStop3 = `var(${aiBrandStop3Raw})`; +export const aiBrandStop4 = `var(${aiBrandStop4Raw})`; +export const aiShimmerStop1 = `var(${aiShimmerStop1Raw})`; +export const aiShimmerStop2 = `var(${aiShimmerStop2Raw})`; +export const aiShimmerStop3 = `var(${aiShimmerStop3Raw})`; +export const aiShimmerStop4 = `var(${aiShimmerStop4Raw})`; +export const nullColor = `var(${nullColorRaw}, ${colorTransparentBackground})`; +export const statusNeutralBackground = `var(${statusNeutralBackgroundRaw})`; +export const statusNeutralTintBackground = `var(${statusNeutralTintBackgroundRaw})`; +export const statusNeutralTintStroke = `var(${statusNeutralTintStrokeRaw})`; +export const nullNumber = `var(${nullNumberRaw})`; +export const nullString = `var(${nullStringRaw})`; +export const backgroundCardOnSecondaryDefaultRest = `var(${backgroundCardOnSecondaryDefaultRestRaw})`; +export const backgroundCardOnSecondaryAltRest = `var(${backgroundCardOnSecondaryAltRestRaw})`; +export const backgroundCardOnSecondaryAltHover = `var(${backgroundCardOnSecondaryAltHoverRaw})`; +export const backgroundCardOnSecondaryAltPressed = `var(${backgroundCardOnSecondaryAltPressedRaw})`; +export const backgroundCardOnSecondaryAltDisabled = `var(${backgroundCardOnSecondaryAltDisabledRaw})`; +export const backgroundCardOnSecondaryDefaultHover = `var(${backgroundCardOnSecondaryDefaultHoverRaw})`; +export const backgroundCardOnSecondaryDefaultPressed = `var(${backgroundCardOnSecondaryDefaultPressedRaw})`; +export const backgroundCardOnSecondaryDefaultDisabled = `var(${backgroundCardOnSecondaryDefaultDisabledRaw})`; +export const backgroundCardOnFlyoutDefaultRest = `var(${backgroundCardOnFlyoutDefaultRestRaw})`; +export const backgroundCardOnFlyoutDefaultHover = `var(${backgroundCardOnFlyoutDefaultHoverRaw})`; +export const backgroundCardOnFlyoutDefaultPressed = `var(${backgroundCardOnFlyoutDefaultPressedRaw})`; +export const backgroundCardOnFlyoutDefaultDisabled = `var(${backgroundCardOnFlyoutDefaultDisabledRaw})`; +export const textStyleDefaultDisplayWeight = `var(${textStyleDefaultDisplayWeightRaw})`; +export const shadowFlyout = `var(${shadowFlyoutRaw}, ${shadow64})`; +export const shadowToolbar = `var(${shadowToolbarRaw})`; +export const shadowWindowActive = `var(${shadowWindowActiveRaw})`; diff --git a/packages/semantic-tokens/src/control/variables.ts b/packages/semantic-tokens/src/control/variables.ts new file mode 100644 index 00000000000000..0ea46e921b783d --- /dev/null +++ b/packages/semantic-tokens/src/control/variables.ts @@ -0,0 +1,203 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const textGlobalDisplay1FontSizeRaw = '--smtc-text-global-display1-font-size'; +export const textGlobalDisplay1LineHeightRaw = '--smtc-text-global-display1-line-height'; +export const textGlobalDisplay2FontSizeRaw = '--smtc-text-global-display2-font-size'; +export const textGlobalDisplay2LineHeightRaw = '--smtc-text-global-display2-line-height'; +export const textGlobalTitle1FontSizeRaw = '--smtc-text-global-title1-font-size'; +export const textGlobalTitle1LineHeightRaw = '--smtc-text-global-title1-line-height'; +export const textGlobalTitle2FontSizeRaw = '--smtc-text-global-title2-font-size'; +export const textGlobalTitle2LineHeightRaw = '--smtc-text-global-title2-line-height'; +export const textGlobalSubtitle1FontSizeRaw = '--smtc-text-global-subtitle1-font-size'; +export const textGlobalSubtitle1LineHeightRaw = '--smtc-text-global-subtitle1-line-height'; +export const textGlobalSubtitle2FontSizeRaw = '--smtc-text-global-subtitle2-font-size'; +export const textGlobalSubtitle2LineHeightRaw = '--smtc-text-global-subtitle2-line-height'; +export const textGlobalBody1FontSizeRaw = '--smtc-text-global-body1-font-size'; +export const textGlobalBody1LineHeightRaw = '--smtc-text-global-body1-line-height'; +export const textGlobalBody2FontSizeRaw = '--smtc-text-global-body2-font-size'; +export const textGlobalBody2LineHeightRaw = '--smtc-text-global-body2-line-height'; +export const textGlobalBody3FontSizeRaw = '--smtc-text-global-body3-font-size'; +export const textGlobalBody3LineHeightRaw = '--smtc-text-global-body3-line-height'; +export const textGlobalCaption1FontSizeRaw = '--smtc-text-global-caption1-font-size'; +export const textGlobalCaption1LineHeightRaw = '--smtc-text-global-caption1-line-height'; +export const textGlobalCaption2FontSizeRaw = '--smtc-text-global-caption2-font-size'; +export const textGlobalCaption2LineHeightRaw = '--smtc-text-global-caption2-line-height'; +export const textStyleDefaultRegularFontFamilyRaw = '--smtc-text-style-default-regular-font-family'; +export const textStyleDefaultRegularWeightRaw = '--smtc-text-style-default-regular-weight'; +export const textStyleDefaultRegularLetterSpacingRaw = '--smtc-text-style-default-regular-letter-spacing'; +export const textStyleDefaultHeaderWeightRaw = '--smtc-text-style-default-header-weight'; +export const sizeCtrlDefaultRaw = '--smtc-size-ctrl-default'; +export const sizeCtrlIconRaw = '--smtc-size-ctrl-icon'; +export const sizeCtrlIconSecondaryRaw = '--smtc-size-ctrl-icon-secondary'; +export const textCtrlWeightSelectedRaw = '--smtc-text-ctrl-weight-selected'; +export const sizeCtrlSmDefaultRaw = '--smtc-size-ctrl-sm-default'; +export const sizeCtrlSmIconRaw = '--smtc-size-ctrl-sm-icon'; +export const sizeCtrlLgDefaultRaw = '--smtc-size-ctrl-lg-default'; +export const sizeCtrlLgIconRaw = '--smtc-size-ctrl-lg-icon'; +export const paddingContentAlignDefaultRaw = '--smtc-padding-content-align-default'; +export const paddingContentAlignOutdentIconOnSubtleRaw = '--smtc-padding-content-align-outdent-icon-on-subtle'; +export const paddingContentNoneRaw = '--smtc-padding-content-none'; +export const paddingContentAlignOutdentTextOnSubtleRaw = '--smtc-padding-content-align-outdent-text-on-subtle'; +export const paddingContentXxSmallRaw = '--smtc-padding-content-xx-small'; +export const paddingContentXSmallRaw = '--smtc-padding-content-x-small'; +export const paddingContentSmallRaw = '--smtc-padding-content-small'; +export const paddingContentMediumRaw = '--smtc-padding-content-medium'; +export const paddingContentLargeRaw = '--smtc-padding-content-large'; +export const paddingContentXLargeRaw = '--smtc-padding-content-x-large'; +export const paddingContentXxLargeRaw = '--smtc-padding-content-xx-large'; +export const paddingContentXxxLargeRaw = '--smtc-padding-content-xxx-large'; +export const paddingCtrlHorizontalDefaultRaw = '--smtc-padding-ctrl-horizontal-default'; +export const paddingCtrlHorizontalIconOnlyRaw = '--smtc-padding-ctrl-horizontal-icon-only'; +export const paddingCtrlTextTopRaw = '--smtc-padding-ctrl-text-top'; +export const paddingCtrlTextSideRaw = '--smtc-padding-ctrl-text-side'; +export const paddingCtrlToNestedControlRaw = '--smtc-padding-ctrl-to-nested-control'; +export const paddingCtrlSmHorizontalDefaultRaw = '--smtc-padding-ctrl-sm-horizontal-default'; +export const paddingCtrlSmHorizontalIconOnlyRaw = '--smtc-padding-ctrl-sm-horizontal-icon-only'; +export const paddingCtrlSmTextTopRaw = '--smtc-padding-ctrl-sm-text-top'; +export const paddingCtrlSmToNestedControlRaw = '--smtc-padding-ctrl-sm-to-nested-control'; +export const paddingCtrlLgHorizontalDefaultRaw = '--smtc-padding-ctrl-lg-horizontal-default'; +export const paddingCtrlLgHorizontalIconOnlyRaw = '--smtc-padding-ctrl-lg-horizontal-icon-only'; +export const paddingCtrlLgTextTopRaw = '--smtc-padding-ctrl-lg-text-top'; +export const paddingCtrlLgToNestedControlRaw = '--smtc-padding-ctrl-lg-to-nested-control'; +export const gapBetweenContentNoneRaw = '--smtc-gap-between-content-none'; +export const gapBetweenContentXxSmallRaw = '--smtc-gap-between-content-xx-small'; +export const gapBetweenContentXSmallRaw = '--smtc-gap-between-content-x-small'; +export const gapBetweenContentSmallRaw = '--smtc-gap-between-content-small'; +export const gapBetweenCtrlDefaultRaw = '--smtc-gap-between-ctrl-default'; +export const gapBetweenContentMediumRaw = '--smtc-gap-between-content-medium'; +export const gapBetweenContentLargeRaw = '--smtc-gap-between-content-large'; +export const gapBetweenContentXLargeRaw = '--smtc-gap-between-content-x-large'; +export const gapBetweenContentXxLargeRaw = '--smtc-gap-between-content-xx-large'; +export const gapBetweenCtrlLgDefaultRaw = '--smtc-gap-between-ctrl-lg-default'; +export const gapBetweenCtrlSmDefaultRaw = '--smtc-gap-between-ctrl-sm-default'; +export const gapInsideCtrlDefaultRaw = '--smtc-gap-inside-ctrl-default'; +export const gapInsideCtrlSmDefaultRaw = '--smtc-gap-inside-ctrl-sm-default'; +export const gapInsideCtrlSmToSecondaryIconRaw = '--smtc-gap-inside-ctrl-sm-to-secondary-icon'; +export const gapInsideCtrlLgDefaultRaw = '--smtc-gap-inside-ctrl-lg-default'; +export const gapInsideCtrlLgToSecondaryIconRaw = '--smtc-gap-inside-ctrl-lg-to-secondary-icon'; +export const gapInsideCtrlToSecondaryIconRaw = '--smtc-gap-inside-ctrl-to-secondary-icon'; +export const gapInsideCtrlToLabelRaw = '--smtc-gap-inside-ctrl-to-label'; +export const gapInsideCtrlSmToLabelRaw = '--smtc-gap-inside-ctrl-sm-to-label'; +export const gapInsideCtrlLgToLabelRaw = '--smtc-gap-inside-ctrl-lg-to-label'; +export const cornerCircularRaw = '--smtc-corner-circular'; +export const strokeWidthDefaultRaw = '--smtc-stroke-width-default'; +export const backgroundSmokeRaw = '--smtc-background-smoke'; +export const strokeCtrlOnOutlineRestRaw = '--smtc-stroke-ctrl-on-outline-rest'; +export const strokeCtrlOnOutlineHoverRaw = '--smtc-stroke-ctrl-on-outline-hover'; +export const strokeCtrlOnOutlinePressedRaw = '--smtc-stroke-ctrl-on-outline-pressed'; +export const strokeCtrlOnOutlineDisabledRaw = '--smtc-stroke-ctrl-on-outline-disabled'; +export const strokeCtrlDividerOnBrandRaw = '--smtc-stroke-ctrl-divider-on-brand'; +export const strokeCtrlDividerOnNeutralRaw = '--smtc-stroke-ctrl-divider-on-neutral'; +export const strokeCtrlDividerOnOutlineRaw = '--smtc-stroke-ctrl-divider-on-outline'; +export const strokeDividerDefaultRaw = '--smtc-stroke-divider-default'; +export const strokeWindowActiveRaw = '--smtc-stroke-window-active'; +export const backgroundWindowPrimarySolidRaw = '--smtc-background-window-primary-solid'; +export const backgroundWindowPrimaryColorBlendRaw = '--smtc-background-window-primary-color-blend'; +export const backgroundWindowPrimaryLumBlendRaw = '--smtc-background-window-primary-lum-blend'; +export const backgroundWindowSecondarySolidRaw = '--smtc-background-window-secondary-solid'; +export const backgroundWindowSecondaryColorBlendRaw = '--smtc-background-window-secondary-color-blend'; +export const backgroundWindowSecondaryLumBlendRaw = '--smtc-background-window-secondary-lum-blend'; +export const backgroundWindowTabBandColorBlendRaw = '--smtc-background-window-tab-band-color-blend'; +export const backgroundWindowTabBandLumBlendRaw = '--smtc-background-window-tab-band-lum-blend'; +export const backgroundWindowTabBandSolidRaw = '--smtc-background-window-tab-band-solid'; +export const backgroundWebPagePrimaryRaw = '--smtc-background-web-page-primary'; +export const backgroundWebPageSecondaryRaw = '--smtc-background-web-page-secondary'; +export const backgroundLayerPrimarySolidRaw = '--smtc-background-layer-primary-solid'; +export const backgroundCardOnPrimaryDefaultRestRaw = '--smtc-background-card-on-primary-default-rest'; +export const backgroundCardOnPrimaryAltRestRaw = '--smtc-background-card-on-primary-alt-rest'; +export const backgroundCardOnPrimaryAltHoverRaw = '--smtc-background-card-on-primary-alt-hover'; +export const backgroundCardOnPrimaryAltPressedRaw = '--smtc-background-card-on-primary-alt-pressed'; +export const backgroundCardOnPrimaryAltDisabledRaw = '--smtc-background-card-on-primary-alt-disabled'; +export const backgroundCardOnPrimaryDefaultHoverRaw = '--smtc-background-card-on-primary-default-hover'; +export const backgroundCardOnPrimaryDefaultPressedRaw = '--smtc-background-card-on-primary-default-pressed'; +export const backgroundCardOnPrimaryDefaultDisabledRaw = '--smtc-background-card-on-primary-default-disabled'; +export const backgroundFlyoutSolidRaw = '--smtc-background-flyout-solid'; +export const backgroundCtrlBrandRestRaw = '--smtc-background-ctrl-brand-rest'; +export const backgroundCtrlBrandHoverRaw = '--smtc-background-ctrl-brand-hover'; +export const backgroundCtrlBrandPressedRaw = '--smtc-background-ctrl-brand-pressed'; +export const backgroundCtrlBrandDisabledRaw = '--smtc-background-ctrl-brand-disabled'; +export const backgroundCtrlNeutralRestRaw = '--smtc-background-ctrl-neutral-rest'; +export const backgroundCtrlNeutralHoverRaw = '--smtc-background-ctrl-neutral-hover'; +export const backgroundCtrlNeutralPressedRaw = '--smtc-background-ctrl-neutral-pressed'; +export const backgroundCtrlNeutralDisabledRaw = '--smtc-background-ctrl-neutral-disabled'; +export const backgroundCtrlSubtleHoverRaw = '--smtc-background-ctrl-subtle-hover'; +export const backgroundCtrlSubtlePressedRaw = '--smtc-background-ctrl-subtle-pressed'; +export const backgroundFlyoutLumBlendRaw = '--smtc-background-flyout-lum-blend'; +export const backgroundFlyoutColorBlendRaw = '--smtc-background-flyout-color-blend'; +export const cornerZeroRaw = '--smtc-corner-zero'; +export const cornerBezelRaw = '--smtc-corner-bezel'; +export const cornerWindowDefaultRaw = '--smtc-corner-window-default'; +export const cornerFlyoutRestRaw = '--smtc-corner-flyout-rest'; +export const cornerLayerDefaultRaw = '--smtc-corner-layer-default'; +export const cornerCardRestRaw = '--smtc-corner-card-rest'; +export const cornerCtrlRestRaw = '--smtc-corner-ctrl-rest'; +export const cornerCtrlSmRestRaw = '--smtc-corner-ctrl-sm-rest'; +export const cornerCtrlLgRestRaw = '--smtc-corner-ctrl-lg-rest'; +export const cornerImageInCardRaw = '--smtc-corner-image-in-card'; +export const foregroundCtrlNeutralPrimaryRestRaw = '--smtc-foreground-ctrl-neutral-primary-rest'; +export const foregroundCtrlNeutralPrimaryDisabledRaw = '--smtc-foreground-ctrl-neutral-primary-disabled'; +export const foregroundCtrlNeutralSecondaryRestRaw = '--smtc-foreground-ctrl-neutral-secondary-rest'; +export const foregroundCtrlNeutralSecondaryDisabledRaw = '--smtc-foreground-ctrl-neutral-secondary-disabled'; +export const foregroundCtrlBrandRestRaw = '--smtc-foreground-ctrl-brand-rest'; +export const foregroundCtrlBrandHoverRaw = '--smtc-foreground-ctrl-brand-hover'; +export const foregroundCtrlBrandPressedRaw = '--smtc-foreground-ctrl-brand-pressed'; +export const foregroundCtrlBrandDisabledRaw = '--smtc-foreground-ctrl-brand-disabled'; +export const foregroundCtrlOnBrandRestRaw = '--smtc-foreground-ctrl-on-brand-rest'; +export const foregroundCtrlOnBrandDisabledRaw = '--smtc-foreground-ctrl-on-brand-disabled'; +export const materialAcrylicBlurRaw = '--smtc-material-acrylic-blur'; +export const materialMicaBlurRaw = '--smtc-material-mica-blur'; +export const iconThemeCtrlDefaultRestRaw = '--smtc-icon-theme-ctrl-default-rest'; +export const iconThemeCtrlDefaultSelectedRaw = '--smtc-icon-theme-ctrl-default-selected'; +export const statusBrandTintBackgroundRaw = '--smtc-status-brand-tint-background'; +export const statusBrandTintStrokeRaw = '--smtc-status-brand-tint-stroke'; +export const statusDangerBackgroundRaw = '--smtc-status-danger-background'; +export const statusDangerTintBackgroundRaw = '--smtc-status-danger-tint-background'; +export const statusDangerTintStrokeRaw = '--smtc-status-danger-tint-stroke'; +export const statusDangerTintForegroundRaw = '--smtc-status-danger-tint-foreground'; +export const statusWarningBackgroundRaw = '--smtc-status-warning-background'; +export const statusWarningTintBackgroundRaw = '--smtc-status-warning-tint-background'; +export const statusWarningTintStrokeRaw = '--smtc-status-warning-tint-stroke'; +export const statusWarningTintForegroundRaw = '--smtc-status-warning-tint-foreground'; +export const statusSuccessBackgroundRaw = '--smtc-status-success-background'; +export const statusSuccessTintBackgroundRaw = '--smtc-status-success-tint-background'; +export const statusSuccessTintStrokeRaw = '--smtc-status-success-tint-stroke'; +export const statusSuccessTintForegroundRaw = '--smtc-status-success-tint-foreground'; +export const statusImportantBackgroundRaw = '--smtc-status-important-background'; +export const statusImportantTintBackgroundRaw = '--smtc-status-important-tint-background'; +export const statusImportantTintStrokeRaw = '--smtc-status-important-tint-stroke'; +export const statusImportantTintForegroundRaw = '--smtc-status-important-tint-foreground'; +export const statusInformativeBackgroundRaw = '--smtc-status-informative-background'; +export const statusInformativeTintForegroundRaw = '--smtc-status-informative-tint-foreground'; +export const statusInformativeTintStrokeRaw = '--smtc-status-informative-tint-stroke'; +export const statusInformativeTintBackgroundRaw = '--smtc-status-informative-tint-background'; +export const statusAwayForegroundRaw = '--smtc-status-away-foreground'; +export const statusOofForegroundRaw = '--smtc-status-oof-foreground'; +export const aiBrandStop1Raw = '--smtc-ai-brand-stop1'; +export const aiBrandStop2Raw = '--smtc-ai-brand-stop2'; +export const aiBrandStop3Raw = '--smtc-ai-brand-stop3'; +export const aiBrandStop4Raw = '--smtc-ai-brand-stop4'; +export const aiShimmerStop1Raw = '--smtc-ai-shimmer-stop1'; +export const aiShimmerStop2Raw = '--smtc-ai-shimmer-stop2'; +export const aiShimmerStop3Raw = '--smtc-ai-shimmer-stop3'; +export const aiShimmerStop4Raw = '--smtc-ai-shimmer-stop4'; +export const nullColorRaw = '--smtc-null-color'; +export const statusNeutralBackgroundRaw = '--smtc-status-neutral-background'; +export const statusNeutralTintBackgroundRaw = '--smtc-status-neutral-tint-background'; +export const statusNeutralTintStrokeRaw = '--smtc-status-neutral-tint-stroke'; +export const nullNumberRaw = '--smtc-null-number'; +export const nullStringRaw = '--smtc-null-string'; +export const backgroundCardOnSecondaryDefaultRestRaw = '--smtc-background-card-on-secondary-default-rest'; +export const backgroundCardOnSecondaryAltRestRaw = '--smtc-background-card-on-secondary-alt-rest'; +export const backgroundCardOnSecondaryAltHoverRaw = '--smtc-background-card-on-secondary-alt-hover'; +export const backgroundCardOnSecondaryAltPressedRaw = '--smtc-background-card-on-secondary-alt-pressed'; +export const backgroundCardOnSecondaryAltDisabledRaw = '--smtc-background-card-on-secondary-alt-disabled'; +export const backgroundCardOnSecondaryDefaultHoverRaw = '--smtc-background-card-on-secondary-default-hover'; +export const backgroundCardOnSecondaryDefaultPressedRaw = '--smtc-background-card-on-secondary-default-pressed'; +export const backgroundCardOnSecondaryDefaultDisabledRaw = '--smtc-background-card-on-secondary-default-disabled'; +export const backgroundCardOnFlyoutDefaultRestRaw = '--smtc-background-card-on-flyout-default-rest'; +export const backgroundCardOnFlyoutDefaultHoverRaw = '--smtc-background-card-on-flyout-default-hover'; +export const backgroundCardOnFlyoutDefaultPressedRaw = '--smtc-background-card-on-flyout-default-pressed'; +export const backgroundCardOnFlyoutDefaultDisabledRaw = '--smtc-background-card-on-flyout-default-disabled'; +export const textStyleDefaultDisplayWeightRaw = '--smtc-text-style-default-display-weight'; +export const shadowFlyoutRaw = '--smtc-shadow-flyout'; +export const shadowToolbarRaw = '--smtc-shadow-toolbar'; +export const shadowWindowActiveRaw = '--smtc-shadow-window-active'; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts new file mode 100644 index 00000000000000..7d08caf815dc47 --- /dev/null +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -0,0 +1,896 @@ +export type LegacyFluentVariantValue = + | { + originalToken: string; + f2Token: string; + rawValue?: never; + } + | { + originalToken: string; + f2Token?: never; + rawValue: string; + }; + +export type LegacyFluentVariants = Record; + +export const legacyFluentVariantsValues: LegacyFluentVariants = { + _ctrlAccordionBackgroundRest: { + f2Token: 'colorTransparentBackground', + originalToken: 'backgroundCtrlSubtleRest', + }, + _ctrlAccordionFocusInnerStrokeWidth: { + originalToken: 'ctrlFocusInnerStrokeWidth', + rawValue: '0px', + }, + _ctrlAccordionFocusOuterStroke: { + f2Token: 'colorStrokeFocus2', + originalToken: 'ctrlFocusOuterStroke', + }, + _ctrlAccordionForegroundHover: { + f2Token: 'colorNeutralForeground1', + originalToken: 'foregroundCtrlOnTransparentHover', + }, + _ctrlAccordionForegroundPressed: { + f2Token: 'colorNeutralForeground1', + originalToken: 'foregroundCtrlOnTransparentPressed', + }, + _ctrlAccordionForegroundRest: { + f2Token: 'colorNeutralForeground1', + originalToken: 'foregroundCtrlOnTransparentRest', + }, + _ctrlAccordionPaddingTextBottom: { + originalToken: 'paddingCtrlTextBottom', + rawValue: '0px', + }, + _ctrlAccordionPaddingTextTop: { + originalToken: 'paddingCtrlTextTop', + rawValue: '0px', + }, + _ctrlAvatarActiveRingStrokeWidthLg: { + f2Token: 'strokeWidthThickest', + originalToken: 'ctrlAvatarActiveRingStrokeWidth', + }, + _ctrlAvatarActiveRingStrokeWidthMd: { + f2Token: 'strokeWidthThicker', + originalToken: 'ctrlAvatarActiveRingStrokeWidth', + }, + _ctrlAvatarActiveRingStrokeWidthSm: { + f2Token: 'strokeWidthThick', + originalToken: 'ctrlAvatarActiveRingStrokeWidth', + }, + _ctrlAvatarCornerGroupLg: { + f2Token: 'borderRadiusLarge', + originalToken: 'ctrlAvatarCornerGroup', + }, + _ctrlAvatarCornerGroupMd: { + f2Token: 'borderRadiusMedium', + originalToken: 'ctrlAvatarCornerGroup', + }, + _ctrlAvatarCornerGroupSm: { + f2Token: 'borderRadiusSmall', + originalToken: 'ctrlAvatarCornerGroup', + }, + _ctrlAvatarCornerGroupXLg: { + f2Token: 'borderRadiusXLarge', + originalToken: 'ctrlAvatarCornerGroup', + }, + _ctrlAvatarPresenceBadgeStrokeWidthLg: { + f2Token: 'strokeWidthThick', + originalToken: 'ctrlAvatarPresenceBadgeStrokeWidth', + }, + _ctrlAvatarPresenceBadgeStrokeWidthSm: { + f2Token: 'strokeWidthThin', + originalToken: 'ctrlAvatarPresenceBadgeStrokeWidth', + }, + _ctrlBadgeNullColor: { + f2Token: 'colorTransparentStroke', + originalToken: 'nullColor', + }, + _ctrlBadgePaddingLeftSide: { + f2Token: 'spacingHorizontalXXS', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlBadgePaddingLeftSideXL: { + f2Token: 'spacingHorizontalXS', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlBadgePaddingRightSide: { + f2Token: 'spacingHorizontalXXS', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlBadgePaddingRightSideXL: { + f2Token: 'spacingHorizontalXS', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlBadgePaddingTextSide: { + f2Token: 'spacingHorizontalXXS', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlBadgeSmallTinyCorner: { + f2Token: 'borderRadiusSmall', + originalToken: 'ctrlBadgeCorner', + }, + _ctrlBadgeStatusAvailableTintForeground: { + f2Token: 'colorPaletteLightGreenForeground3', + originalToken: 'statusSuccessTintForeground', + }, + _ctrlBadgeStatusBrandTintForeground: { + f2Token: 'colorBrandForeground2', + originalToken: 'statusBrandTintForeground', + }, + _ctrlBadgeStatusBusyTintForeground: { + f2Token: 'colorPaletteRedBackground3', + originalToken: 'statusDangerTintForeground', + }, + _ctrlBadgeStatusDangerTintBackground: { + f2Token: 'colorPaletteRedBackground1', + originalToken: 'statusDangerTintBackground', + }, + _ctrlBadgeStatusDangerTintForeground: { + f2Token: 'colorPaletteRedForeground1', + originalToken: 'statusDangerTintForeground', + }, + _ctrlBadgeStatusDangerTintStroke: { + f2Token: 'colorPaletteRedBorder1', + originalToken: 'statusDangerTintStroke', + }, + _ctrlBadgeStatusImportantTintBackground: { + f2Token: 'colorNeutralForeground3', + originalToken: 'statusImportantTintBackground', + }, + _ctrlBadgeStatusImportantTintForeground: { + f2Token: 'colorNeutralBackground1', + originalToken: 'statusImportantTintForeground', + }, + _ctrlBadgeStatusInformativeTintStroke: { + f2Token: 'colorNeutralStroke2', + originalToken: 'statusInformativeTintStroke', + }, + _ctrlBadgeStatusSuccessTintBackground: { + f2Token: 'colorPaletteGreenBackground1', + originalToken: 'statusSuccessTintBackground', + }, + _ctrlBadgeStatusSuccessTintForeground: { + f2Token: 'colorPaletteGreenForeground1', + originalToken: 'statusSuccessTintForeground', + }, + _ctrlBadgeStatusSuccessTintForeground3: { + f2Token: 'colorPaletteGreenForeground3', + originalToken: 'statusSuccessTintForeground', + }, + _ctrlBadgeStatusSuccessTintStroke: { + f2Token: 'colorPaletteGreenBorder1', + originalToken: 'statusSuccessTintStroke', + }, + _ctrlBadgeStatusWarningBackground: { + f2Token: 'colorPaletteYellowBackground3', + originalToken: 'statusWarningBackground', + }, + _ctrlBadgeStatusWarningTintBackground: { + f2Token: 'colorPaletteYellowBackground1', + originalToken: 'statusWarningTintBackground', + }, + _ctrlBadgeStatusWarningTintForeground: { + f2Token: 'colorPaletteYellowForeground1', + originalToken: 'statusWarningTintForeground', + }, + _ctrlBadgeStatusWarningTintForeground2: { + f2Token: 'colorPaletteYellowForeground2', + originalToken: 'statusWarningTintForeground', + }, + _ctrlBadgeStatusWarningTintStroke: { + f2Token: 'colorPaletteYellowBorder1', + originalToken: 'statusWarningTintStroke', + }, + _ctrlBadgeTextStyleSemiBoldWeight: { + f2Token: 'fontWeightSemibold', + originalToken: 'textStyleDefaultRegularWeight', + }, + _ctrlBadgeXLPadding: { + f2Token: 'spacingHorizontalSNudge', + originalToken: 'ctrlBadgeLgPadding', + }, + _ctrlBreadcrumbSizeDefault: { + originalToken: 'sizeCtrlDefault', + rawValue: '32px', + }, + _ctrlBreadcrumbSizeLgDefault: { + originalToken: 'sizeCtrlLgDefault', + rawValue: '40px', + }, + _ctrlBreadcrumbSizeSmIcon: { + originalToken: 'sizeCtrlSmIcon', + rawValue: '16px', + }, + _ctrlButtonGapInsideDefault: { + f2Token: 'spacingHorizontalSNudge', + originalToken: 'gapInsideCtrlDefault', + }, + _ctrlCheckboxBorderColorChecked: { + f2Token: 'colorCompoundBrandBackground', + originalToken: 'strokeCtrlOnActiveBrandHover', + }, + _ctrlCheckboxBorderColorCheckedHover: { + f2Token: 'colorCompoundBrandBackgroundHover', + originalToken: 'strokeCtrlOnActiveBrandHover', + }, + _ctrlCheckboxForegroundUnchecked: { + f2Token: 'colorNeutralForeground3', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlCheckboxForegroundUncheckedHover: { + f2Token: 'colorNeutralForeground2', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlCheckboxIndicatorBorderColorCheckedPressed: { + f2Token: 'colorCompoundBrandBackgroundPressed', + originalToken: 'strokeCtrlOnActiveBrandPressed', + }, + _ctrlCheckboxIndicatorBorderColorMixed: { + f2Token: 'colorCompoundBrandStroke', + originalToken: 'backgroundCtrlActiveBrandRest', + }, + _ctrlCheckboxIndicatorBorderColorMixedHover: { + f2Token: 'colorCompoundBrandStrokeHover', + originalToken: 'backgroundCtrlActiveBrandHover', + }, + _ctrlCheckboxIndicatorBorderColorMixedPressed: { + f2Token: 'colorCompoundBrandStrokePressed', + originalToken: 'backgroundCtrlActiveBrandPressed', + }, + _ctrlCheckboxIndicatorColorMixed: { + f2Token: 'colorCompoundBrandForeground1', + originalToken: 'backgroundCtrlActiveBrandRest', + }, + _ctrlCheckboxIndicatorColorMixedHover: { + f2Token: 'colorCompoundBrandForeground1Hover', + originalToken: 'backgroundCtrlActiveBrandHover', + }, + _ctrlCheckboxIndicatorColorMixedPressed: { + f2Token: 'colorCompoundBrandForeground1Pressed', + originalToken: 'backgroundCtrlActiveBrandPressed', + }, + _ctrlDialogGapBetweenContentMedium: { + originalToken: 'gapBetweenContentMedium', + rawValue: '8px', + }, + _ctrlDividerForegroundSubtle: { + f2Token: 'colorNeutralForeground3', + originalToken: 'foregroundCtrlHintDefault', + }, + _ctrlFieldForegroundCtrlNeutralSecondaryRest: { + f2Token: 'colorNeutralForeground3', + originalToken: 'foregroundCtrlNeutralSecondaryRest', + }, + _ctrlFieldGapBetweenContentXSmall: { + f2Token: 'spacingVerticalXS', + originalToken: 'gapBetweenContentXSmall', + }, + _ctrlFieldPaddingCtrlLgTextBottom: { + originalToken: 'paddingCtrlLgTextBottom', + rawValue: '1px', + }, + _ctrlFieldPaddingCtrlLgTextBottomHorizontal: { + originalToken: 'paddingCtrlLgTextBottom', + rawValue: '9px', + }, + _ctrlFieldPaddingCtrlLgTextTop: { + originalToken: 'paddingCtrlLgTextTop', + rawValue: '1px', + }, + _ctrlFieldPaddingCtrlLgTextTopHorizontal: { + originalToken: 'paddingCtrlLgTextTop', + rawValue: '9px', + }, + _ctrlFieldPaddingCtrlSmTextBottom: { + f2Token: 'spacingVerticalXS', + originalToken: 'paddingCtrlSmTextBottom', + }, + _ctrlFieldPaddingCtrlSmTextTop: { + f2Token: 'spacingVerticalXS', + originalToken: 'paddingCtrlSmTextTop', + }, + _ctrlFieldPaddingCtrlTextBottom: { + f2Token: 'spacingVerticalXXS', + originalToken: 'paddingCtrlTextBottom', + }, + _ctrlFieldPaddingCtrlTextBottomHorizontal: { + f2Token: 'spacingVerticalSNudge', + originalToken: 'paddingCtrlTextBottom', + }, + _ctrlFieldPaddingCtrlTextSide: { + f2Token: 'spacingHorizontalM', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlFieldPaddingCtrlTextTop: { + f2Token: 'spacingVerticalXXS', + originalToken: 'paddingCtrlTextTop', + }, + _ctrlFieldPaddingCtrlTextTopHorizontal: { + f2Token: 'spacingVerticalSNudge', + originalToken: 'paddingCtrlTextTop', + }, + _ctrlFieldStatusDangerTintForeground: { + f2Token: 'colorPaletteRedForeground1', + originalToken: 'statusDangerTintForeground', + }, + _ctrlFieldStatusSuccessTintForeground: { + f2Token: 'colorPaletteGreenForeground1', + originalToken: 'statusSuccessTintForeground', + }, + _ctrlFieldStatusWarningTintForeground: { + f2Token: 'colorPaletteDarkOrangeForeground1', + originalToken: 'statusWarningTintForeground', + }, + _ctrlFocusOuterStrokeInteractive: { + f2Token: 'colorTransparentStrokeInteractive', + originalToken: 'ctrlFocusOuterStroke', + }, + _ctrlInfoLabelForegroundColorSelected: { + f2Token: 'colorNeutralForeground2BrandSelected', + originalToken: 'foregroundCtrlActiveBrandRest', + }, + _ctrlInputBackgroundRestDarker: { + f2Token: 'colorNeutralBackground3', + originalToken: 'ctrlInputBackgroundRest', + }, + _ctrlInputBackgroundRestLighter: { + f2Token: 'colorNeutralBackground1', + originalToken: 'ctrlInputBackgroundRest', + }, + _ctrlInputBottomLineStrokeBrandPressed: { + f2Token: 'colorCompoundBrandStrokePressed', + originalToken: 'ctrlInputBottomLineStrokePressed', + }, + _ctrlInputNeutralForegroundPlaceholder: { + f2Token: 'colorNeutralForeground4', + originalToken: 'foregroundCtrlNeutralSecondaryRest', + }, + _ctrlListBackgroundColorHover: { + f2Token: 'colorTransparentBackground', + originalToken: 'backgroundCtrlSubtleHover', + }, + _ctrlListBackgroundColorPressed: { + f2Token: 'colorTransparentBackground', + originalToken: 'backgroundCtrlSubtlePressed', + }, + _ctrlListBackgroundColorRest: { + f2Token: 'colorTransparentBackground', + originalToken: 'backgroundCtrlSubtleRest', + }, + _ctrlListForegroundColorHover: { + f2Token: 'colorNeutralForeground1', + originalToken: 'foregroundCtrlOnSubtleHover', + }, + _ctrlListForegroundColorPressed: { + f2Token: 'colorNeutralForeground1', + originalToken: 'foregroundCtrlOnSubtlePressed', + }, + _ctrlListForegroundColorRest: { + f2Token: 'colorNeutralForeground1', + originalToken: 'foregroundCtrlOnSubtleRest', + }, + _ctrlListItemStroke: { + f2Token: 'colorStrokeFocus2', + originalToken: 'strokeWidthCtrlOutlineRest', + }, + _ctrlMenuGroupHeaderColor: { + f2Token: 'colorNeutralForeground3', + originalToken: 'foregroundCtrlNeutralSecondaryRest', + }, + _ctrlMenuGroupHeaderFontWeight: { + f2Token: 'fontWeightSemibold', + originalToken: 'textStyleDefaultRegularWeight', + }, + _ctrlMenuGroupHeaderHeight: { + originalToken: 'sizeCtrlDefault', + rawValue: '32px', + }, + _ctrlMenuGroupHeaderPaddingHorizontal: { + originalToken: 'paddingCtrlHorizontalDefault', + rawValue: '8px', + }, + _ctrlMenuItemContentPaddingX: { + originalToken: 'paddingCtrlTextSide', + rawValue: '2px', + }, + _ctrlMenuItemGapInsideDefault: { + originalToken: 'gapInsideCtrlDefault', + rawValue: '4px', + }, + _ctrlMenuItemPaddingBottom: { + f2Token: 'spacingVerticalSNudge', + originalToken: 'paddingCtrlTextBottom', + }, + _ctrlMenuItemPaddingTop: { + f2Token: 'spacingVerticalSNudge', + originalToken: 'paddingCtrlTextTop', + }, + _ctrlMenuItemPaddingX: { + f2Token: 'spacingVerticalSNudge', + originalToken: 'ctrlListIndentLevel1', + }, + _ctrlMenuItemSecondaryContentFontSize: { + f2Token: 'fontSizeBase200', + originalToken: 'textRampItemBodyFontSize', + }, + _ctrlMenuItemSecondaryContentForegroundHover: { + f2Token: 'colorNeutralForeground3Hover', + originalToken: 'foregroundCtrlNeutralSecondaryHover', + }, + _ctrlMenuItemSecondaryContentForegroundRest: { + f2Token: 'colorNeutralForeground3', + originalToken: 'foregroundCtrlNeutralSecondaryRest', + }, + _ctrlMenuItemSizeDefault: { + originalToken: 'sizeCtrlDefault', + rawValue: '32px', + }, + _ctrlMenuItemSubTextForegroundHover: { + f2Token: 'colorNeutralForeground3Hover', + originalToken: 'foregroundCtrlNeutralSecondaryHover', + }, + _ctrlMenuItemSubTextForegroundPressed: { + f2Token: 'colorNeutralForeground3Pressed', + originalToken: 'foregroundCtrlNeutralSecondaryPressed', + }, + _ctrlMenuPopoverCornerFlyoutRest: { + f2Token: 'borderRadiusMedium', + originalToken: 'cornerFlyoutRest', + }, + _ctrlMenuPopoverShadowFlyout: { + f2Token: 'shadow16', + originalToken: 'shadowFlyout', + }, + _ctrlMenuPopoverStrokeFlyout: { + f2Token: 'colorTransparentStroke', + originalToken: 'strokeFlyout', + }, + _ctrlMessageBarActionsMultilinePaddingRight: { + f2Token: 'spacingVerticalM', + originalToken: 'paddingContentAlignDefault', + }, + _ctrlMessageBarErrorIconColor: { + f2Token: 'colorStatusDangerForeground1', + originalToken: 'statusDangerTintForeground', + }, + _ctrlMessageBarGapBetweenCtrl: { + f2Token: 'spacingHorizontalM', + originalToken: 'gapBetweenCtrlDefault', + }, + _ctrlMessageBarPaddingContentAlignDefault: { + originalToken: 'paddingContentAlignDefault', + rawValue: '12px', + }, + _ctrlMessageBarPaddingVertical: { + originalToken: 'paddingContentAlignOutdentIconOnSubtle', + rawValue: '0px', + }, + _ctrlMessageBarReflowSpacerMarginBottom: { + f2Token: 'spacingVerticalS', + originalToken: 'paddingContentAlignDefault', + }, + _ctrlMessageBarSpacingTop: { + f2Token: 'spacingVerticalMNudge', + originalToken: 'paddingContentAlignDefault', + }, + _ctrlMessageBarTitleLineHeight: { + f2Token: 'lineHeightBase300', + originalToken: 'textRampItemHeaderLineHeight', + }, + _ctrlPersonaTreeIconOnSubtlePressed: { + f2Token: 'colorNeutralForeground3Pressed', + originalToken: 'foregroundCtrlOnSubtlePressed', + }, + _ctrlPopoverPaddingContentLarge: { + originalToken: 'paddingContentLarge', + rawValue: '20px', + }, + _ctrlPopoverShadowFilter: { + originalToken: 'shadowFlyout', + rawValue: `drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey))`, + }, + _ctrlRadioBackgroundActiveBrandHover: { + f2Token: 'colorTransparentBackground', + originalToken: 'backgroundCtrlActiveBrandHover', + }, + _ctrlRadioBackgroundActiveBrandPressed: { + f2Token: 'colorTransparentBackground', + originalToken: 'backgroundCtrlActiveBrandPressed', + }, + _ctrlRadioBackgroundActiveBrandRest: { + f2Token: 'colorTransparentBackground', + originalToken: 'backgroundCtrlActiveBrandRest', + }, + _ctrlRadioBackgroundActiveDisabled: { + f2Token: 'colorTransparentBackground', + originalToken: 'backgroundCtrlActiveBrandDisabled', + }, + _ctrlRadioBaseBackgroundDisabled: { + f2Token: 'colorTransparentBackground', + originalToken: 'ctrlChoiceBaseBackgroundDisabled', + }, + _ctrlRadioBaseBackgroundHover: { + f2Token: 'colorTransparentBackground', + originalToken: 'ctrlChoiceBaseBackgroundHover', + }, + _ctrlRadioBaseBackgroundPressed: { + f2Token: 'colorTransparentBackground', + originalToken: 'ctrlChoiceBaseBackgroundPressed', + }, + _ctrlRadioChoiceBaseSize: { + originalToken: 'ctrlChoiceBaseSize', + rawValue: '16px', + }, + _ctrlRadioForegroundContentDisabled: { + f2Token: 'colorNeutralForegroundDisabled', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlRadioForegroundContentNeutralHover: { + f2Token: 'colorNeutralForeground2', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlRadioForegroundContentNeutralRest: { + f2Token: 'colorNeutralForeground3', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlRadioForegroundOnActiveBrandHover: { + f2Token: 'colorCompoundBrandForeground1Hover', + originalToken: 'foregroundCtrlOnActiveBrandHover', + }, + _ctrlRadioForegroundOnActiveBrandPressed: { + f2Token: 'colorCompoundBrandForeground1Pressed', + originalToken: 'foregroundCtrlOnActiveBrandPressed', + }, + _ctrlRadioForegroundOnActiveBrandRest: { + f2Token: 'colorCompoundBrandForeground1', + originalToken: 'foregroundCtrlOnActiveBrandRest', + }, + _ctrlRadioForegroundOnActiveDisabled: { + f2Token: 'colorNeutralForegroundDisabled', + originalToken: 'foregroundCtrlOnActiveBrandDisabled', + }, + _ctrlRadioPaddingTextTop: { + f2Token: 'spacingVerticalXS', + originalToken: 'paddingCtrlTextTop', + }, + _ctrlRadioPaddingVertical: { + f2Token: 'spacingVerticalS', + originalToken: 'paddingCtrlTextTop', + }, + _ctrlRadioStrokeOnActiveBrandHover: { + f2Token: 'colorCompoundBrandStrokeHover', + originalToken: 'strokeCtrlOnActiveBrandHover', + }, + _ctrlRadioStrokeOnActiveBrandPressed: { + f2Token: 'colorCompoundBrandStrokePressed', + originalToken: 'strokeCtrlOnActiveBrandPressed', + }, + _ctrlRadioStrokeOnActiveBrandRest: { + f2Token: 'colorCompoundBrandStroke', + originalToken: 'strokeCtrlOnActiveBrandRest', + }, + _ctrlSliderBarSizeDefault: { + originalToken: 'sizeCtrlDefault', + rawValue: '32px', + }, + _ctrlSliderPaddingDefault: { + originalToken: 'paddingCtrlHorizontalDefault', + rawValue: '10px', + }, + _ctrlSliderSmBarSizeDefault: { + originalToken: 'sizeCtrlDefault', + rawValue: '24px', + }, + _ctrlSliderSmPaddingDefault: { + originalToken: 'paddingCtrlHorizontalDefault', + rawValue: '8px', + }, + _ctrlSpinButtonBackgroundDisabled: { + f2Token: 'colorTransparentBackground', + originalToken: 'ctrlInputBackgroundDisabled', + }, + _ctrlSpinButtonForegroundOnSubtleHover: { + f2Token: 'colorNeutralForeground3Hover', + originalToken: 'foregroundCtrlOnSubtleHover', + }, + _ctrlSpinButtonForegroundOnSubtlePressed: { + f2Token: 'colorNeutralForeground3Pressed', + originalToken: 'foregroundCtrlOnSubtlePressed', + }, + _ctrlSpinButtonNeutralSecondaryRest: { + f2Token: 'colorNeutralForeground4', + originalToken: 'foregroundCtrlNeutralSecondaryRest', + }, + _ctrlSpinButtonOnSubtleRest: { + f2Token: 'colorNeutralForeground3', + originalToken: 'foregroundCtrlOnSubtleRest', + }, + _ctrlSpinButtonPaddingHorizontal: { + f2Token: 'spacingHorizontalMNudge', + originalToken: 'paddingCtrlHorizontalDefault', + }, + _ctrlSpinButtonPaddingSmHorizontal: { + originalToken: 'paddingCtrlSmHorizontalDefault', + rawValue: '5px', + }, + _ctrlSpinButtonSizeDefault: { + originalToken: 'sizeCtrlDefault', + rawValue: '32px', + }, + _ctrlSpinButtonSizeIconSecondary: { + originalToken: 'sizeCtrlIconSecondary', + rawValue: '16px', + }, + _ctrlSpinButtonSizeSmDefault: { + originalToken: 'sizeCtrlSmDefault', + rawValue: '24px', + }, + _ctrlSpinnerBackgroundEmpty: { + f2Token: 'colorBrandStroke2Contrast', + originalToken: 'ctrlProgressBackgroundEmpty', + }, + _ctrlSpinnerBackgroundFilled: { + f2Token: 'colorBrandStroke1', + originalToken: 'ctrlProgressBackgroundFilled', + }, + _ctrlSpinnerItemBodyFontSize: { + f2Token: 'fontSizeBase400', + originalToken: 'textRampItemBodyFontSize', + }, + _ctrlSpinnerItemBodyLineHeight: { + f2Token: 'lineHeightBase400', + originalToken: 'textRampItemBodyLineHeight', + }, + _ctrlSpinnerStrokeLgWidth: { + f2Token: 'strokeWidthThickest', + originalToken: 'ctrlSpinnerStrokeWidth', + }, + _ctrlSpinnerStrokeSmWidth: { + f2Token: 'strokeWidthThick', + originalToken: 'ctrlSpinnerStrokeWidth', + }, + _ctrlSpinnerTextStyleRegularWeight: { + f2Token: 'fontWeightSemibold', + originalToken: 'textStyleDefaultRegularWeight', + }, + _ctrlSwitchPaddingTextBottom: { + f2Token: 'spacingVerticalXS', + originalToken: 'paddingCtrlTextBottom', + }, + _ctrlSwitchPaddingTextTop: { + f2Token: 'spacingVerticalXS', + originalToken: 'paddingCtrlTextTop', + }, + _ctrlSwitchStrokeOnActiveBrandHover: { + f2Token: 'colorTransparentStrokeInteractive', + originalToken: 'strokeCtrlOnActiveBrandHover', + }, + _ctrlSwitchStrokeOnActiveBrandRest: { + f2Token: 'colorTransparentStroke', + originalToken: 'strokeCtrlOnActiveBrandRest', + }, + _ctrlTabBackgroundActiveBrandDisabled: { + f2Token: 'colorNeutralForegroundDisabled', + originalToken: 'backgroundCtrlActiveBrandDisabled', + }, + _ctrlTabForegroundActiveBrandHover: { + f2Token: 'colorNeutralForeground1Hover', + originalToken: 'foregroundCtrlActiveBrandHover', + }, + _ctrlTabForegroundActiveBrandPressed: { + f2Token: 'colorNeutralForeground1Pressed', + originalToken: 'foregroundCtrlActiveBrandPressed', + }, + _ctrlTabForegroundActiveBrandRest: { + f2Token: 'colorNeutralForeground1', + originalToken: 'foregroundCtrlActiveBrandRest', + }, + _ctrlTabForegroundOnSubtleHover: { + f2Token: 'colorNeutralForeground2Hover', + originalToken: 'foregroundCtrlIconOnSubtleHover', + }, + _ctrlTabForegroundOnSubtlePressed: { + f2Token: 'colorNeutralForeground2Pressed', + originalToken: 'foregroundCtrlIconOnSubtlePressed', + }, + _ctrlTabForegroundOnTransparentHover: { + f2Token: 'colorNeutralForeground2Hover', + originalToken: 'foregroundCtrlOnTransparentHover', + }, + _ctrlTabForegroundOnTransparentPressed: { + f2Token: 'colorNeutralForeground2Pressed', + originalToken: 'foregroundCtrlOnTransparentPressed', + }, + _ctrlTabGapInsideDefault: { + f2Token: 'spacingHorizontalSNudge', + originalToken: 'gapInsideCtrlDefault', + }, + _ctrlTabPaddingHorizontalDefault: { + f2Token: 'spacingHorizontalMNudge', + originalToken: 'paddingCtrlHorizontalDefault', + }, + _ctrlTabPaddingTextSide: { + f2Token: 'spacingHorizontalXXS', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlTabSizeDefault: { + originalToken: 'sizeCtrlDefault', + rawValue: '32px', + }, + _ctrlTabSmGapInsideDefault: { + f2Token: 'spacingHorizontalXXS', + originalToken: 'gapInsideCtrlDefault', + }, + _ctrlTabSmPaddingHorizontalDefault: { + f2Token: 'spacingHorizontalSNudge', + originalToken: 'paddingCtrlHorizontalDefault', + }, + _ctrlTeachingPopoverSurfaceCorner: { + f2Token: 'borderRadiusXLarge', + originalToken: 'cornerFlyoutRest', + }, + _ctrlToastBackgroundFlyoutLumBlend: { + f2Token: 'colorNeutralBackgroundInverted', + originalToken: 'backgroundFlyoutLumBlend', + }, + _ctrlToastBodyForegroundContentNeutralPrimary: { + f2Token: 'colorNeutralForegroundInverted2', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlToastBodyForegroundContentNeutralSecondary: { + f2Token: 'colorNeutralForegroundInverted2', + originalToken: 'foregroundContentNeutralSecondary', + }, + _ctrlToastContainerCtrlFocusOuterStroke: { + f2Token: 'colorStrokeFocus2', + originalToken: 'ctrlFocusOuterStroke', + }, + _ctrlToastContainerFlyoutRest: { + f2Token: 'borderRadiusMedium', + originalToken: 'cornerFlyoutRest', + }, + _ctrlToastCornerFlyoutRest: { + f2Token: 'borderRadiusMedium', + originalToken: 'cornerFlyoutRest', + }, + _ctrlToastFooterGapBetweenCtrlDefault: { + originalToken: 'gapBetweenCtrlDefault', + rawValue: '14px', + }, + _ctrlToastFooterPaddingContentSmall: { + originalToken: 'paddingContentSmall', + rawValue: '16px', + }, + _ctrlToastForegroundContentNeutralPrimary: { + f2Token: 'colorNeutralForegroundInverted2', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlToastShadowFlyout: { + f2Token: 'shadow8', + originalToken: 'shadowFlyout', + }, + _ctrlToastStrokeFlyout: { + f2Token: 'colorTransparentStroke', + originalToken: 'strokeFlyout', + }, + _ctrlToastTextRampItemHeaderFontSize: { + originalToken: 'textRampItemHeaderFontSize', + rawValue: '16px', + }, + _ctrlToastTextRampItemHeaderLineHeight: { + originalToken: 'textRampItemHeaderLineHeight', + rawValue: '20px', + }, + _ctrlToastTitleCtrlLinkForegroundBrandRest: { + f2Token: 'colorBrandForeground1', + originalToken: 'ctrlLinkForegroundBrandRest', + }, + _ctrlToastTitleCtrlLinkForegroundBrandRestInverted: { + f2Token: 'colorBrandForegroundInverted', + originalToken: 'ctrlLinkForegroundBrandRest', + }, + _ctrlToastTitleForegroundContentNeutralPrimary: { + f2Token: 'colorNeutralForegroundInverted2', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlToastTitleForegroundContentNeutralPrimaryMedia: { + f2Token: 'colorNeutralForegroundInverted', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlToastTitleGapBetweenCtrlDefault: { + originalToken: 'gapBetweenCtrlDefault', + rawValue: '12px', + }, + _ctrlToastTitleStatusDangerTintForeground: { + f2Token: 'colorStatusDangerForeground1', + originalToken: 'statusDangerTintForeground', + }, + _ctrlToastTitleStatusDangerTintForegroundInverted: { + f2Token: 'colorStatusDangerForegroundInverted', + originalToken: 'statusDangerTintForeground', + }, + _ctrlToastTitleStatusInformativeTintForeground: { + f2Token: 'colorNeutralForeground3', + originalToken: 'statusInformativeTintForeground', + }, + _ctrlToastTitleStatusInformativeTintForegroundInverted: { + f2Token: 'colorNeutralForegroundInverted2', + originalToken: 'statusInformativeTintForeground', + }, + _ctrlToastTitleStatusSuccessTintForegroundInverted: { + f2Token: 'colorStatusSuccessForegroundInverted', + originalToken: 'statusSuccessTintForeground', + }, + _ctrlToastTitleStatusWarningTintForeground: { + f2Token: 'colorStatusWarningForeground1', + originalToken: 'statusWarningTintForeground', + }, + _ctrlToastTitleStatusWarningTintForegroundInverted: { + f2Token: 'colorStatusWarningForegroundInverted', + originalToken: 'statusWarningTintForeground', + }, + _ctrlTooltipPaddingBottom: { + originalToken: 'paddingCtrlTextBottom', + rawValue: '6px', + }, + _ctrlTooltipPaddingLeft: { + originalToken: 'paddingCtrlHorizontalDefault', + rawValue: '11px ', + }, + _ctrlTooltipPaddingRight: { + originalToken: 'paddingCtrlHorizontalDefault', + rawValue: '11px', + }, + _ctrlTooltipPaddingTop: { + originalToken: 'paddingCtrlTextTop', + rawValue: '4px', + }, + _ctrlTreeGapInsideDefault: { + f2Token: 'spacingVerticalXXS', + originalToken: 'gapInsideCtrlDefault', + }, + _ctrlTreeIconOnSubtle: { + f2Token: 'colorNeutralForeground3', + originalToken: 'foregroundCtrlOnSubtleRest', + }, + _ctrlTreeIconOnSubtleHover: { + f2Token: 'colorNeutralForeground3Hover', + originalToken: 'foregroundCtrlOnSubtleHover', + }, + _ctrlTreeIconOnSubtlePressed: { + f2Token: 'colorNeutralForeground3', + originalToken: 'foregroundCtrlOnSubtlePressed', + }, + _ctrlTreeOnTransparentHover: { + f2Token: 'colorNeutralForeground2Hover', + originalToken: 'foregroundCtrlOnTransparentHover', + }, + _ctrlTreeOnTransparentPressed: { + f2Token: 'colorNeutralForeground2Pressed', + originalToken: 'foregroundCtrlOnTransparentPressed', + }, + _ctrlTreePaddingTextBottom: { + originalToken: 'paddingCtrlTextBottom', + rawValue: '0px', + }, + _ctrlTreePaddingTextLeft: { + f2Token: 'spacingHorizontalXXS', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlTreePaddingTextRight: { + f2Token: 'spacingHorizontalXXS', + originalToken: 'paddingCtrlHorizontalDefault', + }, + _ctrlTreePaddingTextTop: { + originalToken: 'paddingCtrlTextTop', + rawValue: '0px', + }, + _nullBackgroundColorHover: { + f2Token: 'colorTransparentBackgroundHover', + originalToken: 'nullColor', + }, + _nullBackgroundColorPressed: { + f2Token: 'colorTransparentBackgroundPressed', + originalToken: 'nullColor', + }, +}; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts new file mode 100644 index 00000000000000..8c90338408470c --- /dev/null +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -0,0 +1,364 @@ +export type FluentOverrideValue = + | { + f2Token: string; + rawValue?: never; + } + | { + f2Token?: never; + rawValue: string; + }; + +export type FluentOverrides = Record; + +export const fluentOverrides: FluentOverrides = { + backgroundCtrlActiveBrandDisabled: { f2Token: 'colorNeutralBackgroundDisabled' }, + backgroundCtrlActiveBrandHover: { f2Token: 'colorCompoundBrandBackgroundHover' }, + backgroundCtrlActiveBrandPressed: { f2Token: 'colorCompoundBrandBackgroundPressed' }, + backgroundCtrlActiveBrandRest: { f2Token: 'colorCompoundBrandBackground' }, + backgroundCtrlBrandHover: { f2Token: 'colorBrandBackgroundHover' }, + backgroundCtrlBrandPressed: { f2Token: 'colorBrandBackgroundPressed' }, + backgroundCtrlBrandRest: { f2Token: 'colorBrandBackground' }, + backgroundCtrlNeutralDisabled: { f2Token: 'colorNeutralBackgroundDisabled' }, + backgroundCtrlNeutralHover: { f2Token: 'colorNeutralBackground1Hover' }, + backgroundCtrlNeutralPressed: { f2Token: 'colorNeutralBackground1Pressed' }, + backgroundCtrlNeutralRest: { f2Token: 'colorNeutralBackground1' }, + backgroundCtrlOutlineHover: { f2Token: 'colorTransparentBackgroundHover' }, + backgroundCtrlOutlinePressed: { f2Token: 'colorTransparentBackgroundPressed' }, + backgroundCtrlOutlineRest: { f2Token: 'colorTransparentBackground' }, + backgroundCtrlShapeSafeNeutralDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + backgroundCtrlShapeSafeNeutralHover: { f2Token: 'colorNeutralStrokeAccessibleHover' }, + backgroundCtrlShapeSafeNeutralPressed: { f2Token: 'colorNeutralStrokeAccessiblePressed' }, + backgroundCtrlShapeSafeNeutralRest: { f2Token: 'colorNeutralStrokeAccessible' }, + backgroundCtrlSubtleDisabled: { f2Token: 'colorTransparentBackground' }, + backgroundCtrlSubtleHover: { f2Token: 'colorSubtleBackgroundHover' }, + backgroundCtrlSubtlePressed: { f2Token: 'colorSubtleBackgroundPressed' }, + backgroundCtrlSubtleRest: { f2Token: 'colorSubtleBackground' }, + backgroundFlyoutLumBlend: { f2Token: 'colorNeutralBackground1' }, + backgroundFlyoutSolid: { f2Token: 'colorNeutralBackground1' }, + backgroundSmoke: { f2Token: 'colorBackgroundOverlay' }, + cornerCircular: { f2Token: 'borderRadiusCircular' }, + cornerCtrlHover: { f2Token: 'borderRadiusMedium' }, + cornerCtrlLgRest: { f2Token: 'borderRadiusMedium' }, // Button uses borderRadiusMedium in all sizes + cornerCtrlPressed: { f2Token: 'borderRadiusMedium' }, + cornerCtrlRest: { f2Token: 'borderRadiusMedium' }, + cornerCtrlSmRest: { f2Token: 'borderRadiusMedium' }, // Button uses borderRadiusMedium in all sizes + cornerFlyoutRest: { rawValue: '0px' }, + cornerZero: { f2Token: 'borderRadiusNone' }, + ctrlAvatarActiveRingStrokeWidth: { f2Token: 'strokeWidthThick' }, + ctrlAvatarBackground: { f2Token: 'colorNeutralBackground6' }, + ctrlAvatarCornerGroup: { f2Token: 'borderRadiusMedium' }, + ctrlAvatarCornerItem: { f2Token: 'borderRadiusCircular' }, + ctrlAvatarForeground: { f2Token: 'colorNeutralForeground3' }, + ctrlAvatarPresenceBadgeBackgroundBehindBadge: { rawValue: 'white' }, + ctrlAvatarSize: { rawValue: '32px' }, + ctrlAvatarTextFontSize: { f2Token: 'fontSizeBase300' }, + ctrlAvatarTextLineHeight: { rawValue: '1' }, + ctrlBadgeCorner: { f2Token: 'borderRadiusMedium' }, + ctrlBadgeLgPadding: { f2Token: 'spacingHorizontalXS' }, + ctrlBadgePadding: { f2Token: 'spacingHorizontalXS' }, + ctrlBadgeSmPadding: { f2Token: 'spacingHorizontalXXS' }, + ctrlChoiceBaseBackgroundDisabled: { f2Token: 'colorTransparentBackground' }, + ctrlChoiceBaseBackgroundHover: { rawValue: 'unset' }, + ctrlChoiceBaseBackgroundPressed: { f2Token: 'colorNeutralStrokeAccessiblePressed' }, + ctrlChoiceBaseBackgroundRest: { f2Token: 'colorTransparentBackground' }, + ctrlChoiceBaseSize: { rawValue: '20px' }, + ctrlChoiceBaseStrokeDisabled: { f2Token: 'colorNeutralStrokeDisabled' }, + ctrlChoiceBaseStrokeHover: { f2Token: 'colorNeutralStrokeAccessibleHover' }, + ctrlChoiceBaseStrokePressed: { f2Token: 'colorNeutralStrokeAccessiblePressed' }, + ctrlChoiceBaseStrokeRest: { f2Token: 'colorNeutralStrokeAccessible' }, + ctrlChoiceCheckboxCorner: { f2Token: 'borderRadiusSmall' }, + ctrlChoicePaddingHorizontal: { f2Token: 'spacingHorizontalS' }, + ctrlChoicePaddingVertical: { f2Token: 'spacingVerticalS' }, + ctrlChoiceRadioCorner: { f2Token: 'borderRadiusCircular' }, + ctrlChoiceRadioDotSizeRest: { rawValue: '16px' }, + ctrlChoiceSwitchCorner: { f2Token: 'borderRadiusCircular' }, + ctrlChoiceSwitchHeight: { rawValue: '20px' }, + ctrlChoiceSwitchPaddingHover: { rawValue: '1px' }, + ctrlChoiceSwitchPaddingPressed: { rawValue: '1px' }, + ctrlChoiceSwitchPaddingRest: { rawValue: '1px' }, + ctrlChoiceSwitchThumbWidthHover: { rawValue: '18px' }, + ctrlChoiceSwitchThumbWidthPressed: { rawValue: '18px' }, + ctrlChoiceSwitchThumbWidthRest: { rawValue: '18px' }, + ctrlChoiceSwitchWidth: { rawValue: '40px' }, + ctrlDialogBaseCorner: { f2Token: 'borderRadiusXLarge' }, + ctrlDialogBaseShadow: { f2Token: 'shadow64' }, + ctrlDialogLayerBackground: { f2Token: 'colorNeutralBackground1' }, + ctrlDialogStroke: { f2Token: 'colorNeutralStroke2' }, + ctrlDividerFixedLineLength: { rawValue: '8px' }, + ctrlFocusInnerStroke: { f2Token: 'colorStrokeFocus2' }, + ctrlFocusInnerStrokeWidth: { f2Token: 'strokeWidthThin' }, + ctrlFocusOuterStroke: { f2Token: 'colorTransparentStroke' }, + ctrlFocusOuterStrokeWidth: { f2Token: 'strokeWidthThick' }, + ctrlInputBackgroundDisabled: { f2Token: 'colorNeutralBackgroundDisabled' }, + ctrlInputBackgroundError: { f2Token: 'colorPaletteRedBorder2' }, + ctrlInputBackgroundRest: { f2Token: 'colorNeutralBackground1' }, + ctrlInputBackgroundSelected: { f2Token: 'colorNeutralBackground1' }, + ctrlInputBottomLineStrokeHover: { f2Token: 'colorNeutralStrokeAccessibleHover' }, + ctrlInputBottomLineStrokePressed: { f2Token: 'colorNeutralStrokeAccessiblePressed' }, + ctrlInputBottomLineStrokeRest: { f2Token: 'colorNeutralStrokeAccessible' }, + ctrlInputBottomLineStrokeSelected: { f2Token: 'colorCompoundBrandStroke' }, + ctrlInputBottomLineStrokeWidthRest: { f2Token: 'strokeWidthThin' }, + ctrlInputBottomLineStrokeWidthSelected: { f2Token: 'strokeWidthThick' }, + ctrlInputStrokeDisabled: { f2Token: 'colorNeutralStrokeDisabled' }, + ctrlInputStrokeHover: { f2Token: 'colorNeutralStroke1Hover' }, + ctrlInputStrokePressed: { f2Token: 'colorNeutralStroke1Pressed' }, + ctrlInputStrokeRest: { f2Token: 'colorNeutralStroke1' }, + ctrlInputStrokeSelected: { f2Token: 'colorNeutralStroke1' }, + ctrlInputStrokeWidthRest: { f2Token: 'strokeWidthThin' }, + ctrlLinkForegroundBrandHover: { f2Token: 'colorBrandForegroundLinkHover' }, + ctrlLinkForegroundBrandPressed: { f2Token: 'colorBrandForegroundLinkPressed' }, + ctrlLinkForegroundBrandRest: { f2Token: 'colorBrandForegroundLink' }, + ctrlLinkForegroundNeutralHover: { f2Token: 'colorNeutralForeground2Hover' }, + ctrlLinkForegroundNeutralPressed: { f2Token: 'colorNeutralForeground2Pressed' }, + ctrlLinkForegroundNeutralRest: { f2Token: 'colorNeutralForeground2' }, + ctrlListCornerHover: { f2Token: 'borderRadiusMedium' }, + ctrlListCornerRest: { f2Token: 'borderRadiusMedium' }, + ctrlListIndentLevel1: { f2Token: 'spacingHorizontalXXL' }, + ctrlListPillWidth: { f2Token: 'strokeWidthThicker' }, + ctrlProgressBackgroundEmpty: { f2Token: 'colorNeutralBackground6' }, + ctrlProgressBackgroundFilled: { f2Token: 'colorCompoundBrandBackground' }, + ctrlProgressCorner: { f2Token: 'borderRadiusMedium' }, + ctrlProgressHeightEmpty: { rawValue: '2px' }, + ctrlProgressHeightFilled: { rawValue: '100%' }, + ctrlProgressLgHeightEmpty: { rawValue: '4px' }, + ctrlProgressLgHeightFilled: { rawValue: '100%' }, + ctrlRatingIconForegroundEmpty: { f2Token: 'colorNeutralBackground6' }, // should be #D9DDE3 per design + ctrlRatingIconForegroundFilled: { f2Token: 'colorNeutralForeground1' }, // should be #24282F per design + ctrlSliderBarCorner: { f2Token: 'borderRadiusXLarge' }, + ctrlSliderBarForegroundEmptyDisabled: { f2Token: 'colorNeutralBackgroundDisabled' }, + ctrlSliderBarForegroundEmptyHover: { f2Token: 'colorNeutralStrokeAccessible' }, + ctrlSliderBarForegroundEmptyPressed: { f2Token: 'colorNeutralStrokeAccessible' }, + ctrlSliderBarForegroundEmptyRest: { f2Token: 'colorNeutralStrokeAccessible' }, + ctrlSliderBarForegroundFilledDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + ctrlSliderBarForegroundFilledHover: { f2Token: 'colorCompoundBrandBackgroundHover' }, + ctrlSliderBarForegroundFilledPressed: { f2Token: 'colorCompoundBrandBackgroundPressed' }, + ctrlSliderBarForegroundFilledRest: { f2Token: 'colorCompoundBrandBackground' }, + ctrlSliderBarHeight: { rawValue: '4px' }, + ctrlSliderSmBarHeight: { rawValue: '2px' }, + ctrlSliderSmThumbSizeHover: { rawValue: '16px' }, + ctrlSliderSmThumbSizePressed: { rawValue: '16px' }, + ctrlSliderSmThumbSizeRest: { rawValue: '16px' }, + ctrlSliderThumbBackgroundDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + ctrlSliderThumbBackgroundHover: { f2Token: 'colorCompoundBrandBackgroundHover' }, + ctrlSliderThumbBackgroundPressed: { f2Token: 'colorCompoundBrandBackgroundPressed' }, + ctrlSliderThumbBackgroundRest: { f2Token: 'colorCompoundBrandBackground' }, + ctrlSliderThumbCorner: { f2Token: 'borderRadiusCircular' }, + ctrlSliderThumbInnerStrokeDisabled: { f2Token: 'colorNeutralBackground1' }, + ctrlSliderThumbInnerStrokeHover: { f2Token: 'colorNeutralBackground1' }, + ctrlSliderThumbInnerStrokePressed: { f2Token: 'colorNeutralBackground1' }, + ctrlSliderThumbInnerStrokeRest: { f2Token: 'colorNeutralBackground1' }, + ctrlSliderThumbOuterStrokeDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + ctrlSliderThumbOuterStrokeHover: { f2Token: 'colorNeutralStroke1' }, + ctrlSliderThumbOuterStrokePressed: { f2Token: 'colorNeutralStroke1' }, + ctrlSliderThumbOuterStrokeRest: { f2Token: 'colorNeutralStroke1' }, + ctrlSliderThumbSizeHover: { rawValue: '20px' }, + ctrlSliderThumbSizePressed: { rawValue: '20px' }, + ctrlSliderThumbSizeRest: { rawValue: '20px' }, + ctrlSpinnerStrokeWidth: { f2Token: 'strokeWidthThicker' }, + ctrlTooltipBackground: { f2Token: 'colorNeutralBackground1' }, + ctrlTooltipCorner: { f2Token: 'borderRadiusMedium' }, + ctrlTooltipForeground: { f2Token: 'colorNeutralForeground1' }, + ctrlTooltipShadow: { + rawValue: + `drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) ` + `drop-shadow(0 4px 8px var(--colorNeutralShadowKey))`, + }, + foregroundContentBrandPrimary: { f2Token: 'colorBrandForeground1' }, + foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' }, + foregroundContentNeutralSecondary: { f2Token: 'colorNeutralForeground2' }, + foregroundCtrlActiveBrandHover: { f2Token: 'colorCompoundBrandForeground1Hover' }, + foregroundCtrlActiveBrandPressed: { f2Token: 'colorCompoundBrandForeground1Pressed' }, + foregroundCtrlActiveBrandRest: { f2Token: 'colorCompoundBrandForeground1' }, + foregroundCtrlIconOnNeutralDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + foregroundCtrlIconOnNeutralRest: { f2Token: 'colorNeutralForeground3' }, + foregroundCtrlIconOnSubtleDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + foregroundCtrlIconOnSubtleHover: { f2Token: 'colorNeutralForeground2BrandHover' }, + foregroundCtrlIconOnSubtlePressed: { f2Token: 'colorNeutralForeground2BrandPressed' }, + foregroundCtrlIconOnSubtleRest: { f2Token: 'colorNeutralForeground2' }, + foregroundCtrlNeutralPrimaryDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + foregroundCtrlNeutralPrimaryHover: { f2Token: 'colorNeutralForeground1Hover' }, + foregroundCtrlNeutralPrimaryPressed: { f2Token: 'colorNeutralForeground1Pressed' }, + foregroundCtrlNeutralPrimaryRest: { f2Token: 'colorNeutralForeground1' }, + foregroundCtrlNeutralSecondaryDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + foregroundCtrlNeutralSecondaryHover: { f2Token: 'colorNeutralForeground2Hover' }, + foregroundCtrlNeutralSecondaryPressed: { f2Token: 'colorNeutralForeground2Pressed' }, + foregroundCtrlNeutralSecondaryRest: { f2Token: 'colorNeutralForeground2' }, + foregroundCtrlOnActiveBrandDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + foregroundCtrlOnActiveBrandHover: { f2Token: 'colorNeutralForegroundInvertedHover' }, + foregroundCtrlOnActiveBrandPressed: { f2Token: 'colorNeutralForegroundInvertedPressed' }, + foregroundCtrlOnActiveBrandRest: { f2Token: 'colorNeutralForegroundInverted' }, + foregroundCtrlOnBrandHover: { f2Token: 'colorNeutralForegroundOnBrand' }, + foregroundCtrlOnBrandPressed: { f2Token: 'colorNeutralForegroundOnBrand' }, + foregroundCtrlOnBrandRest: { f2Token: 'colorNeutralForegroundOnBrand' }, + foregroundCtrlOnOutlineDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + foregroundCtrlOnOutlineHover: { f2Token: 'colorNeutralForeground1Hover' }, + foregroundCtrlOnOutlinePressed: { f2Token: 'colorNeutralForeground1Pressed' }, + foregroundCtrlOnOutlineRest: { f2Token: 'colorNeutralForeground1' }, + foregroundCtrlOnSubtleDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + foregroundCtrlOnSubtleHover: { f2Token: 'colorNeutralForeground2Hover' }, + foregroundCtrlOnSubtlePressed: { f2Token: 'colorNeutralForeground2Pressed' }, + foregroundCtrlOnSubtleRest: { f2Token: 'colorNeutralForeground2' }, + foregroundCtrlOnTransparentDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + foregroundCtrlOnTransparentHover: { f2Token: 'colorNeutralForeground2BrandHover' }, + foregroundCtrlOnTransparentPressed: { f2Token: 'colorNeutralForeground2BrandPressed' }, + foregroundCtrlOnTransparentRest: { f2Token: 'colorNeutralForeground2' }, + gapBetweenContentSmall: { rawValue: '8px' }, + gapBetweenContentXSmall: { f2Token: 'spacingVerticalXXS' }, + gapBetweenCtrlDefault: { rawValue: '8px' }, + gapBetweenCtrlLgDefault: { rawValue: '16px' }, + gapBetweenListItem: { f2Token: 'spacingVerticalXXS' }, + gapBetweenTextSmall: { f2Token: 'spacingHorizontalXS' }, + gapInsideCtrlDefault: { f2Token: 'spacingHorizontalS' }, + gapInsideCtrlLgDefault: { f2Token: 'spacingHorizontalSNudge' }, + gapInsideCtrlLgToLabel: { f2Token: 'spacingHorizontalS' }, + gapInsideCtrlSmDefault: { f2Token: 'spacingHorizontalXS' }, + gapInsideCtrlSmToLabel: { f2Token: 'spacingHorizontalXS' }, // Rating uses 8px, or spacingHorizontalS, for all gaps between icons and label in design + gapInsideCtrlToLabel: { f2Token: 'spacingHorizontalSNudge' }, // Rating uses 8px, or spacingHorizontalS, for all gaps between icons and label in design + materialAcrylicDefaultSolid: { f2Token: 'colorNeutralBackground1' }, + nullColor: { f2Token: 'colorTransparentBackground' }, + paddingContentAlignDefault: { f2Token: 'spacingVerticalS' }, + paddingContentAlignOutdentIconOnSubtle: { f2Token: 'spacingHorizontalM' }, + paddingContentLarge: { f2Token: 'spacingHorizontalXXL' }, + paddingContentMedium: { rawValue: '16px' }, + paddingContentNone: { f2Token: 'spacingHorizontalNone' }, + paddingContentSmall: { rawValue: '12px' }, + paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' }, + paddingCtrlHorizontalIconOnly: { rawValue: '5px' }, + paddingCtrlLgHorizontalDefault: { f2Token: 'spacingHorizontalL' }, + paddingCtrlLgHorizontalIconOnly: { rawValue: '7px' }, + paddingCtrlLgTextBottom: null, // Enable for semantic, but legacy should fallback to undefined + paddingCtrlLgTextTop: null, // Enable for semantic, but legacy should fallback to undefined + paddingCtrlSmHorizontalDefault: { f2Token: 'spacingHorizontalS' }, + paddingCtrlSmHorizontalIconOnly: { rawValue: '1px' }, + paddingCtrlSmTextBottom: null, // Enable for semantic, but legacy should fallback to undefined + paddingCtrlSmTextTop: null, // Enable for semantic, but legacy should fallback to undefined + paddingCtrlTextBottom: { rawValue: '5px' }, + paddingCtrlTextSide: { rawValue: '0px' }, // Enable for semantic, but legacy should fallback to 0px + paddingCtrlTextTop: { rawValue: '5px' }, + paddingFlyoutDefault: { rawValue: '4px' }, + shadowFlyout: { f2Token: 'shadow64' }, + sizeCtrlDefault: { rawValue: '44px' }, + sizeCtrlIcon: { rawValue: '20px' }, + sizeCtrlIconSecondary: { rawValue: '20px' }, + sizeCtrlLgDefault: { rawValue: '44px' }, + sizeCtrlLgIcon: { rawValue: '24px' }, + sizeCtrlSmDefault: { rawValue: '32px' }, + sizeCtrlSmIcon: { rawValue: '20px' }, + statusAwayForeground: { f2Token: 'colorPaletteMarigoldBackground3' }, + statusBrandBackground: { f2Token: 'colorBrandBackground' }, + statusBrandForeground: { f2Token: 'colorNeutralForegroundOnBrand' }, + statusBrandTintBackground: { f2Token: 'colorBrandBackground2' }, + statusBrandTintForeground: { f2Token: 'colorBrandForeground1' }, + statusBrandTintStroke: { f2Token: 'colorBrandStroke2' }, + statusDangerBackground: { f2Token: 'colorPaletteRedBackground3' }, + statusDangerForeground: { f2Token: 'colorNeutralForegroundOnBrand' }, + statusDangerStroke: { f2Token: 'colorPaletteRedBorder2' }, + statusDangerTintBackground: { f2Token: 'colorStatusDangerBackground1' }, + statusDangerTintForeground: { f2Token: 'colorPaletteRedForeground3' }, + statusDangerTintStroke: { f2Token: 'colorStatusDangerBorder1' }, + statusImportantBackground: { f2Token: 'colorNeutralForeground1' }, + statusImportantForeground: { f2Token: 'colorNeutralBackground1' }, + statusImportantStroke: { f2Token: 'colorNeutralStrokeAccessible' }, + statusImportantTintBackground: { f2Token: 'colorNeutralBackground3' }, + statusImportantTintForeground: { f2Token: 'colorNeutralForeground1' }, + statusImportantTintStroke: { f2Token: 'colorTransparentStroke' }, + statusInformativeBackground: { f2Token: 'colorNeutralBackground5' }, + statusInformativeForeground: { f2Token: 'colorNeutralForeground3' }, + statusInformativeStroke: { f2Token: 'colorNeutralStroke2' }, + statusInformativeTintBackground: { f2Token: 'colorNeutralBackground4' }, + statusInformativeTintForeground: { f2Token: 'colorNeutralForeground2' }, + statusInformativeTintStroke: { f2Token: 'colorNeutralStroke1' }, + statusOofForeground: { f2Token: 'colorPaletteBerryForeground3' }, + statusSuccessBackground: { f2Token: 'colorPaletteGreenBackground3' }, + statusSuccessForeground: { f2Token: 'colorNeutralForegroundOnBrand' }, + statusSuccessStroke: { f2Token: 'colorPaletteGreenBorder2' }, + statusSuccessTintBackground: { f2Token: 'colorStatusSuccessBackground1' }, + statusSuccessTintForeground: { f2Token: 'colorStatusSuccessForeground1' }, + statusSuccessTintStroke: { f2Token: 'colorStatusSuccessBorder1' }, + statusWarningBackground: { f2Token: 'colorPaletteDarkOrangeBackground3' }, + statusWarningForeground: { f2Token: 'colorNeutralForeground1Static' }, + statusWarningTintBackground: { f2Token: 'colorStatusWarningBackground1' }, + statusWarningTintForeground: { f2Token: 'colorStatusWarningForeground3' }, + statusWarningTintStroke: { f2Token: 'colorStatusWarningBorder1' }, + strokeCtrlDividerOnBrand: { f2Token: 'colorNeutralStrokeOnBrand' }, + strokeCtrlDividerOnOutline: { f2Token: 'colorNeutralStroke1' }, + strokeCtrlDividerOnSubtle: { rawValue: 'transparent' }, + strokeCtrlOnActiveBrandDisabled: { f2Token: 'colorTransparentStrokeDisabled' }, + strokeCtrlOnActiveBrandHover: { f2Token: 'colorStrokeFocus2' }, + strokeCtrlOnActiveBrandPressed: { f2Token: 'colorTransparentStrokeInteractive' }, + strokeCtrlOnActiveBrandRest: { f2Token: 'colorNeutralForegroundOnBrand' }, + strokeCtrlOnBrandDisabled: { rawValue: 'transparent' }, + strokeCtrlOnBrandHover: { rawValue: 'transparent' }, + strokeCtrlOnBrandPressed: { rawValue: 'transparent' }, + strokeCtrlOnBrandRest: { rawValue: 'transparent' }, + strokeCtrlOnNeutralDisabled: { f2Token: 'colorNeutralStrokeDisabled' }, + strokeCtrlOnNeutralHover: { f2Token: 'colorNeutralStroke1Hover' }, + strokeCtrlOnNeutralPressed: { f2Token: 'colorNeutralStroke1Pressed' }, + strokeCtrlOnNeutralRest: { f2Token: 'colorNeutralStroke1' }, + strokeCtrlOnOutlineDisabled: { f2Token: 'colorNeutralStrokeDisabled' }, + strokeCtrlOnOutlineHover: { f2Token: 'colorNeutralStroke1' }, + strokeCtrlOnOutlinePressed: { f2Token: 'colorNeutralStroke1' }, + strokeCtrlOnOutlineRest: { f2Token: 'colorNeutralStroke1' }, + strokeCtrlOnSubtleDisabled: { rawValue: 'transparent' }, + strokeCtrlOnSubtleHover: { rawValue: 'transparent' }, + strokeCtrlOnSubtlePressed: { rawValue: 'transparent' }, + strokeCtrlOnSubtleRest: { rawValue: 'transparent' }, + strokeDividerBrand: { f2Token: 'colorBrandStroke1' }, + strokeDividerDefault: { f2Token: 'colorNeutralStroke2' }, + strokeDividerStrong: { f2Token: 'colorNeutralStroke1' }, + strokeDividerSubtle: { f2Token: 'colorNeutralStroke3' }, + strokeFlyout: { f2Token: 'colorNeutralBackground3' }, + strokeLayer: { f2Token: 'colorTransparentStroke' }, + strokeWidthCtrlOutlineHover: { f2Token: 'strokeWidthThin' }, + strokeWidthCtrlOutlinePressed: { f2Token: 'strokeWidthThin' }, + strokeWidthCtrlOutlineRest: { f2Token: 'strokeWidthThin' }, + strokeWidthCtrlOutlineSelected: { f2Token: 'strokeWidthThicker' }, + strokeWidthDefault: { f2Token: 'strokeWidthThin' }, + strokeWidthDividerDefault: { f2Token: 'strokeWidthThin' }, + textCtrlButtonWeightDefault: { f2Token: 'fontWeightSemibold' }, + textCtrlWeightSelected: { f2Token: 'fontWeightSemibold' }, + textGlobalBody1FontSize: { f2Token: 'fontSizeBase500' }, + textGlobalBody1LineHeight: { f2Token: 'lineHeightBase500' }, + textGlobalBody2FontSize: { f2Token: 'fontSizeBase400' }, + textGlobalBody2LineHeight: { f2Token: 'lineHeightBase400' }, + textGlobalBody3FontSize: { f2Token: 'fontSizeBase300' }, + textGlobalBody3LineHeight: { f2Token: 'lineHeightBase300' }, + textGlobalCaption1FontSize: { f2Token: 'fontSizeBase200' }, + textGlobalCaption1LineHeight: { f2Token: 'lineHeightBase200' }, + textGlobalCaption2FontSize: { f2Token: 'fontSizeBase100' }, + textGlobalCaption2LineHeight: { f2Token: 'lineHeightBase100' }, + textGlobalDisplay2FontSize: { f2Token: 'fontSizeHero1000' }, + textGlobalDisplay2LineHeight: { f2Token: 'lineHeightHero1000' }, + textGlobalSubtitle1FontSize: { f2Token: 'fontSizeHero700' }, + textGlobalSubtitle1LineHeight: { f2Token: 'lineHeightHero700' }, + textGlobalSubtitle2FontSize: { f2Token: 'fontSizeBase600' }, + textGlobalSubtitle2LineHeight: { f2Token: 'lineHeightBase600' }, + textGlobalTitle1FontSize: { f2Token: 'fontSizeHero900' }, + textGlobalTitle1LineHeight: { f2Token: 'lineHeightHero900' }, + textGlobalTitle2FontSize: { f2Token: 'fontSizeHero800' }, + textGlobalTitle2LineHeight: { f2Token: 'lineHeightHero800' }, + textRampItemBodyFontSize: { f2Token: 'fontSizeBase300' }, + textRampItemBodyLineHeight: { f2Token: 'lineHeightBase300' }, + textRampItemHeaderFontSize: { f2Token: 'fontSizeBase300' }, + textRampItemHeaderLineHeight: { f2Token: 'lineHeightBase400' }, + textRampLegalFontSize: { f2Token: 'fontSizeBase200' }, + textRampLegalLineHeight: { f2Token: 'lineHeightBase200' }, + textRampLgItemBodyFontSize: { f2Token: 'fontSizeBase400' }, + textRampLgItemBodyLineHeight: { f2Token: 'lineHeightBase400' }, + textRampLgLegalFontSize: { f2Token: 'fontSizeBase200' }, // React-badge uses the same as medium font size for large + textRampLgLegalLineHeight: { f2Token: 'lineHeightBase200' }, // React-badge uses the same as medium line height for large + textRampMetadataFontSize: { f2Token: 'fontSizeBase200' }, // should be fontSizeBase100 per Menu design + textRampMetadataLineHeight: { f2Token: 'lineHeightBase200' }, + textRampReadingBodyFontSize: { f2Token: 'fontSizeBase300' }, + textRampReadingBodyLineHeight: { f2Token: 'lineHeightBase300' }, + textRampSectionHeaderFontSize: { f2Token: 'fontSizeBase500' }, + textRampSectionHeaderLineHeight: { f2Token: 'lineHeightBase500' }, + textRampSmItemBodyFontSize: { f2Token: 'fontSizeBase200' }, + textRampSmItemBodyLineHeight: { f2Token: 'lineHeightBase200' }, + textRampSmLegalFontSize: { f2Token: 'fontSizeBase100' }, + textRampSmLegalLineHeight: { f2Token: 'lineHeightBase100' }, + textStyleDefaultHeaderFontFamily: { f2Token: 'fontFamilyBase' }, + textStyleDefaultHeaderWeight: { f2Token: 'fontWeightSemibold' }, + textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' }, + textStyleDefaultRegularLetterSpacing: { rawValue: '0' }, + textStyleDefaultRegularWeight: { f2Token: 'fontWeightRegular' }, +}; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts new file mode 100644 index 00000000000000..370efb32ba1831 --- /dev/null +++ b/packages/semantic-tokens/src/index.ts @@ -0,0 +1,2005 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export { + textStyleDefaultHeaderFontFamilyRaw, + textStyleDefaultHeaderLetterSpacingRaw, + textStyleAiRegularFontFamilyRaw, + textStyleAiRegularWeightRaw, + textStyleAiRegularLetterSpacingRaw, + textStyleAiHeaderFontFamilyRaw, + textStyleAiHeaderWeightRaw, + textStyleAiHeaderLetterSpacingRaw, + textStyleArticleRegularFontFamilyRaw, + textStyleArticleRegularWeightRaw, + textStyleArticleRegularLetterSpacingRaw, + textStyleArticleHeaderFontFamilyRaw, + textStyleArticleHeaderWeightRaw, + textStyleArticleHeaderLetterSpacingRaw, + textStyleCodeRegularFontFamilyRaw, + textStyleCodeRegularWeightRaw, + textStyleCodeRegularLetterSpacingRaw, + textStyleCodeHeaderFontFamilyRaw, + textStyleCodeHeaderWeightRaw, + textStyleCodeHeaderLetterSpacingRaw, + textStyleDataVizRegularFontFamilyRaw, + textStyleDataVizRegularWeightRaw, + textStyleDataVizRegularLetterSpacingRaw, + textStyleDataVizHeaderFontFamilyRaw, + textStyleDataVizHeaderWeightRaw, + textStyleDataVizHeaderLetterSpacingRaw, + textStyleQuoteRegularFontFamilyRaw, + textStyleQuoteRegularWeightRaw, + textStyleQuoteRegularLetterSpacingRaw, + textStyleQuoteHeaderFontFamilyRaw, + textStyleQuoteHeaderWeightRaw, + textStyleQuoteHeaderLetterSpacingRaw, + textRampPageHeaderFontSizeRaw, + textRampPageHeaderLineHeightRaw, + textRampSectionHeaderFontSizeRaw, + textRampSectionHeaderLineHeightRaw, + textRampSubsectionHeaderFontSizeRaw, + textRampSubsectionHeaderLineHeightRaw, + textRampReadingBodyFontSizeRaw, + textRampReadingBodyLineHeightRaw, + textRampItemHeaderFontSizeRaw, + textRampItemHeaderLineHeightRaw, + textRampItemBodyFontSizeRaw, + textRampItemBodyLineHeightRaw, + textRampMetadataFontSizeRaw, + textRampMetadataLineHeightRaw, + textRampLegalFontSizeRaw, + textRampLegalLineHeightRaw, + textRampSmPageHeaderFontSizeRaw, + textRampSmPageHeaderLineHeightRaw, + textRampSmSectionHeaderFontSizeRaw, + textRampSmSectionHeaderLineHeightRaw, + textRampSmSubsectionHeaderFontSizeRaw, + textRampSmSubsectionHeaderLineHeightRaw, + textRampSmReadingBodyFontSizeRaw, + textRampSmReadingBodyLineHeightRaw, + textRampSmItemHeaderFontSizeRaw, + textRampSmItemHeaderLineHeightRaw, + textRampSmItemBodyFontSizeRaw, + textRampSmItemBodyLineHeightRaw, + textRampSmMetadataFontSizeRaw, + textRampSmMetadataLineHeightRaw, + textRampSmLegalFontSizeRaw, + textRampSmLegalLineHeightRaw, + textRampLgPageHeaderFontSizeRaw, + textRampLgPageHeaderLineHeightRaw, + textRampLgSectionHeaderFontSizeRaw, + textRampLgSectionHeaderLineHeightRaw, + textRampLgSubsectionHeaderFontSizeRaw, + textRampLgSubsectionHeaderLineHeightRaw, + textRampLgReadingBodyFontSizeRaw, + textRampLgReadingBodyLineHeightRaw, + textRampLgItemHeaderFontSizeRaw, + textRampLgItemHeaderLineHeightRaw, + textRampLgItemBodyFontSizeRaw, + textRampLgItemBodyLineHeightRaw, + textRampLgMetadataFontSizeRaw, + textRampLgMetadataLineHeightRaw, + textRampLgLegalFontSizeRaw, + textRampLgLegalLineHeightRaw, + textCtrlWeightDefaultRaw, + textCtrlButtonWeightDefaultRaw, + textCtrlButtonWeightSelectedRaw, + paddingToolbarInsideRaw, + paddingToolbarOutsideRaw, + paddingFlyoutDefaultRaw, + paddingCardNestedImageRaw, + paddingCtrlTextBottomRaw, + paddingCtrlSmTextBottomRaw, + paddingCtrlLgTextBottomRaw, + gapBetweenCtrlNestedRaw, + gapBetweenTextSmallRaw, + gapBetweenCtrlLgNestedRaw, + gapBetweenTextLargeRaw, + gapBetweenCtrlSmNestedRaw, + gapBetweenListItemRaw, + gapBetweenCardRaw, + strokeWidthDividerDefaultRaw, + strokeWidthDividerStrongRaw, + strokeWidthCtrlOutlineRestRaw, + strokeWidthCtrlOutlineHoverRaw, + strokeWidthCtrlOutlinePressedRaw, + strokeWidthCtrlOutlineSelectedRaw, + strokeWidthWindowDefaultRaw, + backgroundToolbarRaw, + strokeToolbarRaw, + strokeCtrlOnBrandRestStop2Raw, + strokeCtrlOnBrandHoverStop2Raw, + strokeCtrlOnBrandPressedStop2Raw, + strokeCtrlOnBrandDisabledStop2Raw, + strokeCtrlOnNeutralRestStop2Raw, + strokeCtrlOnNeutralHoverStop2Raw, + strokeCtrlOnNeutralPressedStop2Raw, + strokeCtrlOnNeutralDisabledStop2Raw, + strokeCtrlOnOutlineRestStop2Raw, + strokeCtrlOnOutlineHoverStop2Raw, + strokeCtrlOnOutlinePressedStop2Raw, + strokeCtrlOnOutlineDisabledStop2Raw, + strokeCtrlOnActiveBrandRestRaw, + strokeCtrlDividerOnBrandDisabledRaw, + strokeCtrlDividerOnActiveBrandRaw, + strokeCtrlDividerOnActiveBrandDisabledRaw, + strokeCtrlDividerOnNeutralDisabledRaw, + strokeCtrlDividerOnOutlineDisabledRaw, + strokeCtrlOnActiveBrandHoverRaw, + strokeCtrlOnActiveBrandPressedRaw, + strokeCtrlOnActiveBrandDisabledRaw, + strokeCtrlOnActiveBrandRestStop2Raw, + strokeCtrlOnActiveBrandHoverStop2Raw, + strokeCtrlOnActiveBrandPressedStop2Raw, + strokeCtrlOnActiveBrandDisabledStop2Raw, + strokeDividerSubtleRaw, + strokeDividerStrongRaw, + strokeDividerBrandRaw, + strokeWindowInactiveRaw, + backgroundLayerPrimaryStop1Raw, + backgroundLayerPrimaryStop2Raw, + backgroundLayerPrimaryStop3Raw, + backgroundLayerSecondaryRaw, + backgroundLayerTertiaryRaw, + backgroundCardOnPrimaryDefaultSelectedRaw, + backgroundCtrlActiveBrandRestRaw, + backgroundCtrlActiveBrandHoverRaw, + backgroundCtrlActiveBrandPressedRaw, + backgroundCtrlActiveBrandDisabledRaw, + backgroundCtrlShapeSafeActiveBrandRestRaw, + backgroundCtrlShapeSafeActiveBrandDisabledRaw, + backgroundCtrlShapeSafeNeutralRestRaw, + backgroundCtrlShapeSafeNeutralHoverRaw, + backgroundCtrlShapeSafeNeutralPressedRaw, + backgroundCtrlShapeSafeNeutralDisabledRaw, + cornerFlyoutHoverRaw, + cornerFlyoutPressedRaw, + cornerLayerIntersectionRaw, + cornerCardHoverRaw, + cornerCardPressedRaw, + cornerToolbarDefaultRaw, + cornerImageOnPageRaw, + cornerCtrlHoverRaw, + cornerCtrlPressedRaw, + cornerCtrlSmHoverRaw, + cornerCtrlSmPressedRaw, + cornerCtrlLgHoverRaw, + cornerCtrlLgPressedRaw, + foregroundContentNeutralPrimaryRaw, + foregroundContentNeutralSecondaryRaw, + foregroundContentBrandPrimaryRaw, + foregroundCtrlNeutralPrimaryHoverRaw, + foregroundCtrlNeutralPrimaryPressedRaw, + foregroundCtrlNeutralSecondaryHoverRaw, + foregroundCtrlNeutralSecondaryPressedRaw, + foregroundCtrlIconOnNeutralRestRaw, + foregroundCtrlIconOnNeutralHoverRaw, + foregroundCtrlIconOnNeutralPressedRaw, + foregroundCtrlIconOnNeutralDisabledRaw, + foregroundCtrlIconOnOutlineRestRaw, + foregroundCtrlIconOnOutlineHoverRaw, + foregroundCtrlIconOnOutlinePressedRaw, + foregroundCtrlIconOnOutlineDisabledRaw, + foregroundCtrlIconOnSubtleRestRaw, + foregroundCtrlIconOnSubtleHoverRaw, + foregroundCtrlIconOnSubtlePressedRaw, + foregroundCtrlIconOnSubtleDisabledRaw, + foregroundCtrlOnBrandHoverRaw, + foregroundCtrlOnBrandPressedRaw, + foregroundCtrlActiveBrandRestRaw, + foregroundCtrlActiveBrandHoverRaw, + foregroundCtrlActiveBrandPressedRaw, + foregroundCtrlActiveBrandDisabledRaw, + foregroundCtrlOnActiveBrandRestRaw, + foregroundCtrlOnActiveBrandHoverRaw, + foregroundCtrlOnActiveBrandPressedRaw, + foregroundCtrlOnActiveBrandDisabledRaw, + foregroundCtrlOnOutlineRestRaw, + foregroundCtrlOnOutlineHoverRaw, + foregroundCtrlOnOutlinePressedRaw, + foregroundCtrlOnOutlineDisabledRaw, + foregroundCtrlOnSubtleRestRaw, + foregroundCtrlOnSubtleHoverRaw, + foregroundCtrlOnSubtlePressedRaw, + foregroundCtrlOnSubtleDisabledRaw, + foregroundCtrlOnTransparentRestRaw, + foregroundCtrlOnTransparentHoverRaw, + foregroundCtrlOnTransparentPressedRaw, + foregroundCtrlOnTransparentDisabledRaw, + materialAcrylicDefaultSolidRaw, + materialAcrylicDefaultColorBlendRaw, + materialAcrylicDefaultLumBlendRaw, + materialMicaDefaultSolidRaw, + materialMicaDefaultColorBlendRaw, + materialMicaDefaultLumBlendRaw, + materialMicaDarkerSolidRaw, + materialMicaDarkerColorBlendRaw, + materialMicaDarkerLumBlendRaw, + materialMicaThinSolidRaw, + materialMicaThinColorBlendRaw, + materialMicaThinLumBlendRaw, + iconThemeCtrlDefaultHoverRaw, + iconThemeCtrlDefaultPressedRaw, + iconThemeCtrlSubtleRestRaw, + iconThemeCtrlSubtleHoverRaw, + iconThemeCtrlSubtlePressedRaw, + iconThemeCtrlSubtleSelectedRaw, + iconThemeCtrlChevronDefaultRaw, + iconThemeCtrlChevronSelectedRaw, + statusBrandBackgroundRaw, + statusBrandStrokeRaw, + statusBrandForegroundRaw, + statusBrandTintForegroundRaw, + statusDangerStrokeRaw, + statusDangerForegroundRaw, + statusWarningStrokeRaw, + statusWarningForegroundRaw, + statusSuccessStrokeRaw, + statusSuccessForegroundRaw, + statusImportantStrokeRaw, + statusImportantForegroundRaw, + statusInformativeStrokeRaw, + statusInformativeForegroundRaw, + statusNeutralStrokeRaw, + statusNeutralForegroundRaw, + statusNeutralTintForegroundRaw, + cornerFlyoutShellRestRaw, + materialAcrylicShellDefaultSolidRaw, + materialAcrylicShellDefaultColorBlendRaw, + materialAcrylicShellDefaultLumBlendRaw, + backgroundCardOnSecondaryDefaultSelectedRaw, + textStyleDefaultDisplayFontFamilyRaw, + textStyleDefaultDisplayLetterSpacingRaw, + shadowCtrlOnDragRaw, + shadowWindowInactiveRaw, +} from './optional/variables'; +export { + textGlobalDisplay1FontSizeRaw, + textGlobalDisplay1LineHeightRaw, + textGlobalDisplay2FontSizeRaw, + textGlobalDisplay2LineHeightRaw, + textGlobalTitle1FontSizeRaw, + textGlobalTitle1LineHeightRaw, + textGlobalTitle2FontSizeRaw, + textGlobalTitle2LineHeightRaw, + textGlobalSubtitle1FontSizeRaw, + textGlobalSubtitle1LineHeightRaw, + textGlobalSubtitle2FontSizeRaw, + textGlobalSubtitle2LineHeightRaw, + textGlobalBody1FontSizeRaw, + textGlobalBody1LineHeightRaw, + textGlobalBody2FontSizeRaw, + textGlobalBody2LineHeightRaw, + textGlobalBody3FontSizeRaw, + textGlobalBody3LineHeightRaw, + textGlobalCaption1FontSizeRaw, + textGlobalCaption1LineHeightRaw, + textGlobalCaption2FontSizeRaw, + textGlobalCaption2LineHeightRaw, + textStyleDefaultRegularFontFamilyRaw, + textStyleDefaultRegularWeightRaw, + textStyleDefaultRegularLetterSpacingRaw, + textStyleDefaultHeaderWeightRaw, + sizeCtrlDefaultRaw, + sizeCtrlIconRaw, + sizeCtrlIconSecondaryRaw, + textCtrlWeightSelectedRaw, + sizeCtrlSmDefaultRaw, + sizeCtrlSmIconRaw, + sizeCtrlLgDefaultRaw, + sizeCtrlLgIconRaw, + paddingContentAlignDefaultRaw, + paddingContentAlignOutdentIconOnSubtleRaw, + paddingContentNoneRaw, + paddingContentAlignOutdentTextOnSubtleRaw, + paddingContentXxSmallRaw, + paddingContentXSmallRaw, + paddingContentSmallRaw, + paddingContentMediumRaw, + paddingContentLargeRaw, + paddingContentXLargeRaw, + paddingContentXxLargeRaw, + paddingContentXxxLargeRaw, + paddingCtrlHorizontalDefaultRaw, + paddingCtrlHorizontalIconOnlyRaw, + paddingCtrlTextTopRaw, + paddingCtrlTextSideRaw, + paddingCtrlToNestedControlRaw, + paddingCtrlSmHorizontalDefaultRaw, + paddingCtrlSmHorizontalIconOnlyRaw, + paddingCtrlSmTextTopRaw, + paddingCtrlSmToNestedControlRaw, + paddingCtrlLgHorizontalDefaultRaw, + paddingCtrlLgHorizontalIconOnlyRaw, + paddingCtrlLgTextTopRaw, + paddingCtrlLgToNestedControlRaw, + gapBetweenContentNoneRaw, + gapBetweenContentXxSmallRaw, + gapBetweenContentXSmallRaw, + gapBetweenContentSmallRaw, + gapBetweenCtrlDefaultRaw, + gapBetweenContentMediumRaw, + gapBetweenContentLargeRaw, + gapBetweenContentXLargeRaw, + gapBetweenContentXxLargeRaw, + gapBetweenCtrlLgDefaultRaw, + gapBetweenCtrlSmDefaultRaw, + gapInsideCtrlDefaultRaw, + gapInsideCtrlSmDefaultRaw, + gapInsideCtrlSmToSecondaryIconRaw, + gapInsideCtrlLgDefaultRaw, + gapInsideCtrlLgToSecondaryIconRaw, + gapInsideCtrlToSecondaryIconRaw, + gapInsideCtrlToLabelRaw, + gapInsideCtrlSmToLabelRaw, + gapInsideCtrlLgToLabelRaw, + cornerCircularRaw, + strokeWidthDefaultRaw, + backgroundSmokeRaw, + strokeCtrlOnOutlineRestRaw, + strokeCtrlOnOutlineHoverRaw, + strokeCtrlOnOutlinePressedRaw, + strokeCtrlOnOutlineDisabledRaw, + strokeCtrlDividerOnBrandRaw, + strokeCtrlDividerOnNeutralRaw, + strokeCtrlDividerOnOutlineRaw, + strokeDividerDefaultRaw, + strokeWindowActiveRaw, + backgroundWindowPrimarySolidRaw, + backgroundWindowPrimaryColorBlendRaw, + backgroundWindowPrimaryLumBlendRaw, + backgroundWindowSecondarySolidRaw, + backgroundWindowSecondaryColorBlendRaw, + backgroundWindowSecondaryLumBlendRaw, + backgroundWindowTabBandColorBlendRaw, + backgroundWindowTabBandLumBlendRaw, + backgroundWindowTabBandSolidRaw, + backgroundWebPagePrimaryRaw, + backgroundWebPageSecondaryRaw, + backgroundLayerPrimarySolidRaw, + backgroundCardOnPrimaryDefaultRestRaw, + backgroundCardOnPrimaryAltRestRaw, + backgroundCardOnPrimaryAltHoverRaw, + backgroundCardOnPrimaryAltPressedRaw, + backgroundCardOnPrimaryAltDisabledRaw, + backgroundCardOnPrimaryDefaultHoverRaw, + backgroundCardOnPrimaryDefaultPressedRaw, + backgroundCardOnPrimaryDefaultDisabledRaw, + backgroundFlyoutSolidRaw, + backgroundCtrlBrandRestRaw, + backgroundCtrlBrandHoverRaw, + backgroundCtrlBrandPressedRaw, + backgroundCtrlBrandDisabledRaw, + backgroundCtrlNeutralRestRaw, + backgroundCtrlNeutralHoverRaw, + backgroundCtrlNeutralPressedRaw, + backgroundCtrlNeutralDisabledRaw, + backgroundCtrlSubtleHoverRaw, + backgroundCtrlSubtlePressedRaw, + backgroundFlyoutLumBlendRaw, + backgroundFlyoutColorBlendRaw, + cornerZeroRaw, + cornerBezelRaw, + cornerWindowDefaultRaw, + cornerFlyoutRestRaw, + cornerLayerDefaultRaw, + cornerCardRestRaw, + cornerCtrlRestRaw, + cornerCtrlSmRestRaw, + cornerCtrlLgRestRaw, + cornerImageInCardRaw, + foregroundCtrlNeutralPrimaryRestRaw, + foregroundCtrlNeutralPrimaryDisabledRaw, + foregroundCtrlNeutralSecondaryRestRaw, + foregroundCtrlNeutralSecondaryDisabledRaw, + foregroundCtrlBrandRestRaw, + foregroundCtrlBrandHoverRaw, + foregroundCtrlBrandPressedRaw, + foregroundCtrlBrandDisabledRaw, + foregroundCtrlOnBrandRestRaw, + foregroundCtrlOnBrandDisabledRaw, + materialAcrylicBlurRaw, + materialMicaBlurRaw, + iconThemeCtrlDefaultRestRaw, + iconThemeCtrlDefaultSelectedRaw, + statusBrandTintBackgroundRaw, + statusBrandTintStrokeRaw, + statusDangerBackgroundRaw, + statusDangerTintBackgroundRaw, + statusDangerTintStrokeRaw, + statusDangerTintForegroundRaw, + statusWarningBackgroundRaw, + statusWarningTintBackgroundRaw, + statusWarningTintStrokeRaw, + statusWarningTintForegroundRaw, + statusSuccessBackgroundRaw, + statusSuccessTintBackgroundRaw, + statusSuccessTintStrokeRaw, + statusSuccessTintForegroundRaw, + statusImportantBackgroundRaw, + statusImportantTintBackgroundRaw, + statusImportantTintStrokeRaw, + statusImportantTintForegroundRaw, + statusInformativeBackgroundRaw, + statusInformativeTintForegroundRaw, + statusInformativeTintStrokeRaw, + statusInformativeTintBackgroundRaw, + statusAwayForegroundRaw, + statusOofForegroundRaw, + aiBrandStop1Raw, + aiBrandStop2Raw, + aiBrandStop3Raw, + aiBrandStop4Raw, + aiShimmerStop1Raw, + aiShimmerStop2Raw, + aiShimmerStop3Raw, + aiShimmerStop4Raw, + nullColorRaw, + statusNeutralBackgroundRaw, + statusNeutralTintBackgroundRaw, + statusNeutralTintStrokeRaw, + nullNumberRaw, + nullStringRaw, + backgroundCardOnSecondaryDefaultRestRaw, + backgroundCardOnSecondaryAltRestRaw, + backgroundCardOnSecondaryAltHoverRaw, + backgroundCardOnSecondaryAltPressedRaw, + backgroundCardOnSecondaryAltDisabledRaw, + backgroundCardOnSecondaryDefaultHoverRaw, + backgroundCardOnSecondaryDefaultPressedRaw, + backgroundCardOnSecondaryDefaultDisabledRaw, + backgroundCardOnFlyoutDefaultRestRaw, + backgroundCardOnFlyoutDefaultHoverRaw, + backgroundCardOnFlyoutDefaultPressedRaw, + backgroundCardOnFlyoutDefaultDisabledRaw, + textStyleDefaultDisplayWeightRaw, + shadowFlyoutRaw, + shadowToolbarRaw, + shadowWindowActiveRaw, +} from './control/variables'; +export { + textStyleDefaultHeaderCaseRaw, + textStyleAiHeaderCaseRaw, + textStyleArticleHeaderCaseRaw, + textStyleCodeHeaderCaseRaw, + textStyleDataVizHeaderCaseRaw, + textStyleQuoteHeaderCaseRaw, + strokeLayerRaw, + strokeImageRaw, + strokeFlyoutRaw, + strokeCtrlOnBrandRestRaw, + strokeCtrlOnBrandHoverRaw, + strokeCtrlOnBrandPressedRaw, + strokeCtrlOnBrandDisabledRaw, + strokeCtrlOnNeutralRestRaw, + strokeCtrlOnNeutralHoverRaw, + strokeCtrlOnNeutralPressedRaw, + strokeCtrlOnNeutralDisabledRaw, + strokeCtrlOnSubtleRestRaw, + strokeCtrlOnSubtleHoverRaw, + strokeCtrlOnSubtlePressedRaw, + strokeCtrlOnSubtleDisabledRaw, + strokeCtrlOnSubtleHoverSplitRaw, + strokeCtrlDividerOnSubtleRaw, + strokeCtrlDividerOnSubtleDisabledRaw, + strokeCardSelectedRaw, + strokeCardOnPrimaryRestRaw, + strokeCardOnPrimaryHoverRaw, + strokeCardOnPrimaryPressedRaw, + strokeCardOnPrimaryDisabledRaw, + strokeCardOnSecondaryRestRaw, + strokeCardOnSecondaryHoverRaw, + strokeCardOnSecondaryPressedRaw, + strokeCardOnSecondaryDisabledRaw, + backgroundCtrlOutlineRestRaw, + backgroundCtrlOutlineHoverRaw, + backgroundCtrlOutlinePressedRaw, + backgroundCtrlOutlineDisabledRaw, + backgroundCtrlSubtleRestRaw, + backgroundCtrlSubtleDisabledRaw, + backgroundCtrlSubtleHoverSplitRaw, + foregroundCtrlHintDefaultRaw, + shadowCardRestRaw, + shadowCardHoverRaw, + shadowCardPressedRaw, + shadowCardDisabledRaw, + shadowLayerRaw, +} from './nullable/variables'; +export { + ctrlAvatarSizeRaw, + ctrlAvatarCornerItemRaw, + ctrlAvatarBackgroundRaw, + ctrlAvatarForegroundRaw, + ctrlAvatarIconSizeRaw, + ctrlAvatarPresenceBadgeSizeRaw, + ctrlAvatarActiveRingSizeRaw, + ctrlAvatarPresenceBadgePaddingBottomRightOffsetRaw, + ctrlAvatarCornerGroupRaw, + ctrlAvatarActiveRingStrokeWidthRaw, + ctrlAvatarPresenceBadgeStrokeWidthRaw, + ctrlAvatarTextFontSizeRaw, + ctrlAvatarTextLineHeightRaw, + ctrlAvatarTextPaddingTopOffsetRaw, + ctrlAvatarActiveRingStrokeRaw, + ctrlAvatarShowCutoutRaw, + ctrlAvatarPresenceBadgeBackgroundBehindBadgeRaw, +} from './components/avatar/variables'; +export { + ctrlBadgeTextPaddingTopRaw, + ctrlBadgeTextPaddingBottomRaw, + ctrlBadgeSmTextPaddingTopRaw, + ctrlBadgeSmTextPaddingBottomRaw, + ctrlBadgeLgTextPaddingTopRaw, + ctrlBadgeLgTextPaddingBottomRaw, + ctrlBadgeIconThemeRaw, + ctrlBadgeBeaconSizeRaw, + ctrlBadgeSizeRaw, + ctrlBadgeCornerRaw, + ctrlBadgeGapRaw, + ctrlBadgeIconSizeRaw, + ctrlBadgePaddingRaw, + ctrlBadgeSmSizeRaw, + ctrlBadgeSmCornerRaw, + ctrlBadgeSmIconSizeRaw, + ctrlBadgeSmPaddingRaw, + ctrlBadgeLgSizeRaw, + ctrlBadgeLgIconSizeRaw, + ctrlBadgeLgCornerRaw, + ctrlBadgeLgPaddingRaw, +} from './components/badge/variables'; +export { + ctrlChoicePaddingHorizontalRaw, + ctrlChoicePaddingVerticalRaw, + ctrlChoiceBaseSizeRaw, + ctrlChoiceIconThemeRaw, + ctrlChoiceBaseBackgroundRestRaw, + ctrlChoiceBaseBackgroundHoverRaw, + ctrlChoiceBaseBackgroundPressedRaw, + ctrlChoiceBaseBackgroundDisabledRaw, + ctrlChoiceBaseStrokeRestRaw, + ctrlChoiceBaseStrokeHoverRaw, + ctrlChoiceBaseStrokePressedRaw, + ctrlChoiceBaseStrokeDisabledRaw, + ctrlChoiceCheckboxIconSizeRaw, + ctrlChoiceCheckboxCornerRaw, + ctrlChoiceCheckboxIndeterminateCornerRaw, + ctrlChoiceCheckboxIndeterminateWidthRaw, + ctrlChoiceCheckboxIndeterminateHeightRaw, + ctrlChoiceRadioCornerRaw, + ctrlChoiceSwitchCornerRaw, + ctrlChoiceSwitchHeightRaw, + ctrlChoiceSwitchWidthRaw, + ctrlChoiceSwitchPaddingRestRaw, + ctrlChoiceSwitchPaddingHoverRaw, + ctrlChoiceSwitchPaddingPressedRaw, + ctrlChoiceSwitchThumbWidthRestRaw, + ctrlChoiceSwitchThumbWidthHoverRaw, + ctrlChoiceSwitchThumbWidthPressedRaw, + ctrlChoiceRadioDotSizeRestRaw, + ctrlChoiceRadioDotSizeHoverRaw, + ctrlChoiceRadioDotSizePressedRaw, + ctrlChoiceSmBaseSizeRaw, + ctrlChoiceSmCheckboxIconSizeRaw, + ctrlChoiceSmCheckboxCornerRaw, + ctrlChoiceSmRadioDotSizeRaw, + ctrlChoiceSmSwitchWidthRaw, + ctrlChoiceSmSwitchHeightRaw, + ctrlChoiceSmSwitchThumbWidthRestRaw, + ctrlChoiceSmSwitchThumbWidthHoverRaw, + ctrlChoiceSmSwitchThumbWidthPressedRaw, + ctrlChoiceLgBaseSizeRaw, + ctrlChoiceLgCheckboxCornerRaw, + ctrlChoiceLgCheckboxIconSizeRaw, + ctrlChoiceLgRadioDotSizeRestRaw, + ctrlChoiceLgRadioDotSizeHoverRaw, + ctrlChoiceLgRadioDotSizePressedRaw, + ctrlChoiceLgSwitchWidthRaw, + ctrlChoiceLgSwitchHeightRaw, + ctrlChoiceLgSwitchThumbWidthRestRaw, + ctrlChoiceLgSwitchThumbWidthHoverRaw, + ctrlChoiceLgSwitchThumbWidthPressedRaw, + ctrlChoiceSwitchThumbShadowRaw, +} from './components/choice/variables'; +export { + ctrlDialogBackgroundRaw, + ctrlDialogStrokeRaw, + ctrlDialogBaseCornerRaw, + ctrlDialogLayerBackgroundRaw, + ctrlDialogLayerPaddingBottomRaw, + ctrlDialogBaseShadowRaw, +} from './components/dialog/variables'; +export { ctrlDividerFixedLineLengthRaw } from './components/divider/variables'; +export { + ctrlDragBackgroundSolidRaw, + ctrlDragBackgroundColorBlendRaw, + ctrlDragBackgroundLumBlendRaw, +} from './components/drag/variables'; +export { + ctrlFabForegroundRestNewRaw, + ctrlFabForegroundDisabledNewRaw, + ctrlFabBackgroundRestRaw, + ctrlFabBackgroundHoverRaw, + ctrlFabBackgroundPressedRaw, + ctrlFabBackgroundDisabledRaw, + ctrlFabCornerRestRaw, + ctrlFabCornerHoverRaw, + ctrlFabCornerPressedRaw, + ctrlFabShadowRestRaw, + ctrlFabShadowHoverRaw, + ctrlFabShadowPressedRaw, + ctrlFabShadowDisabledRaw, +} from './components/fab/variables'; +export { + ctrlFocusInnerStrokeWidthRaw, + ctrlFocusInnerStrokeRaw, + ctrlFocusOuterStrokeWidthRaw, + ctrlFocusOuterStrokeRaw, +} from './components/focus/variables'; +export { + ctrlInputBackgroundRestRaw, + ctrlInputBackgroundHoverRaw, + ctrlInputBackgroundPressedRaw, + ctrlInputBackgroundDisabledRaw, + ctrlInputBackgroundSelectedRaw, + ctrlInputBackgroundErrorRaw, + ctrlInputStrokeRestRaw, + ctrlInputStrokeWidthRestRaw, + ctrlInputStrokeWidthHoverRaw, + ctrlInputStrokeWidthPressedRaw, + ctrlInputStrokeWidthSelectedRaw, + ctrlInputBottomLineStrokeWidthRestRaw, + ctrlInputTextSelectionBackgroundRaw, + ctrlInputTextSelectionForegroundRaw, + ctrlInputBottomLineStrokeWidthHoverRaw, + ctrlInputBottomLineStrokeWidthPressedRaw, + ctrlInputBottomLineStrokeWidthSelectedRaw, + ctrlInputBottomLineStrokeRestRaw, + ctrlInputBottomLineStrokeHoverRaw, + ctrlInputBottomLineStrokePressedRaw, + ctrlInputBottomLineStrokeDisabledRaw, + ctrlInputBottomLineStrokeSelectedRaw, + ctrlInputBottomLineStrokeErrorRaw, + ctrlInputStrokeHoverRaw, + ctrlInputStrokePressedRaw, + ctrlInputStrokeDisabledRaw, + ctrlInputStrokeSelectedRaw, + ctrlInputStrokeErrorRaw, +} from './components/input/variables'; +export { + ctrlLinkForegroundNeutralRestRaw, + ctrlLinkInlineStrokeWidthRestRaw, + ctrlLinkInlineStrokeWidthHoverRaw, + ctrlLinkInlineUnderlineDashedRaw, + ctrlLinkForegroundNeutralHoverRaw, + ctrlLinkForegroundNeutralPressedRaw, + ctrlLinkForegroundBrandRestRaw, + ctrlLinkForegroundBrandHoverRaw, + ctrlLinkForegroundBrandPressedRaw, + ctrlLinkOnPageStrokeWidthRestRaw, + ctrlLinkOnPageStrokeWidthHoverRaw, + ctrlLinkOnPageUnderlineDashedRaw, + ctrlLinkInlineShowUnderlineAtRestRaw, + ctrlLinkOnPageShowUnderlineAtRestRaw, +} from './components/link/variables'; +export { + ctrlListPillWidthRaw, + ctrlListPillFullWidthRaw, + ctrlListPillStretchPaddingDefaultRaw, + ctrlListPillStretchPaddingHintRaw, + ctrlListPillLengthRestRaw, + ctrlListPillLengthHoverRaw, + ctrlListPillLengthPressedRaw, + ctrlListPillLengthHintRaw, + ctrlListCornerRestRaw, + ctrlListCornerHoverRaw, + ctrlListCornerPressedRaw, + ctrlListIndentLevel1Raw, + ctrlListIndentLevel2Raw, + ctrlListIndentLevel3Raw, + ctrlListBackgroundSelectedRestRaw, + ctrlListForegroundSelectedRestRaw, + ctrlListForegroundSelectedHoverRaw, + ctrlListForegroundSelectedPressedRaw, + ctrlListForegroundSelectedDisabledRaw, + ctrlListBackgroundSelectedHoverRaw, + ctrlListBackgroundSelectedPressedRaw, + ctrlListBackgroundSelectedDisabledRaw, + ctrlListChoiceBackgroundRestRaw, + ctrlListChoiceStrokeRestRaw, + ctrlListChoiceStrokeDisabledRaw, + ctrlListChoiceStrokeSelectedRestRaw, + ctrlListChoiceStrokeSelectedDisabledRaw, + ctrlListChoiceForegroundHoverRaw, + ctrlListChoiceForegroundSelectedRestRaw, + ctrlListChoiceForegroundSelectedDisabledRaw, + ctrlListChoiceBackgroundDisabledRaw, + ctrlListChoiceBackgroundSelectedRestRaw, + ctrlListChoiceBackgroundSelectedDisabledRaw, + ctrlListChoiceCheckboxCornerRaw, + ctrlListChoiceCheckboxIconSizeRaw, + ctrlListChoiceDotSizeRaw, + ctrlListSplitDividerPaddingInsetRaw, + ctrlListSplitDividerStrokeRaw, + ctrlListSmCornerRestRaw, + ctrlListSmCornerHoverRaw, + ctrlListSmCornerPressedRaw, + ctrlListSmIndentLevel1Raw, + ctrlListSmIndentLevel2Raw, + ctrlListSmIndentLevel3Raw, + ctrlListLgCornerRestRaw, + ctrlListLgCornerHoverRaw, + ctrlListLgCornerPressedRaw, + ctrlListLgIndentLevel1Raw, + ctrlListLgIndentLevel2Raw, + ctrlListLgIndentLevel3Raw, + ctrlListSplitDividerShowDividerRaw, + ctrlListShadowSelectedRaw, +} from './components/list/variables'; +export { + ctrlLiteFilterBackgroundSelectedRaw, + ctrlLiteFilterStrokeSelectedRaw, + ctrlLiteFilterForegroundSelectedRaw, + ctrlLiteFilterStrokeWidthSelectedRaw, +} from './components/liteFilter/variables'; +export { + ctrlProgressBackgroundEmptyRaw, + ctrlProgressBackgroundFilledRaw, + ctrlProgressCornerRaw, + ctrlProgressHeightFilledRaw, + ctrlProgressHeightEmptyRaw, + ctrlProgressSmHeightFilledRaw, + ctrlProgressSmHeightEmptyRaw, + ctrlProgressLgHeightFilledRaw, + ctrlProgressLgHeightEmptyRaw, +} from './components/progress/variables'; +export { + ctrlRatingIconThemeRaw, + ctrlRatingIconGapRaw, + ctrlRatingIconForegroundFilledRaw, + ctrlRatingIconForegroundEmptyRaw, + ctrlRatingIconSizeRaw, +} from './components/rating/variables'; +export { + ctrlSegmentedBackgroundRestRaw, + ctrlSegmentedBackgroundHoverRaw, + ctrlSegmentedBackgroundPressedRaw, + ctrlSegmentedBackgroundDisabledRaw, + ctrlSegmentedStrokeRestRaw, + ctrlSegmentedStrokeHoverRaw, + ctrlSegmentedStrokePressedRaw, + ctrlSegmentedStrokeDisabledRaw, + ctrlSegmentedCornerRestRaw, + ctrlSegmentedCornerHoverRaw, + ctrlSegmentedCornerPressedRaw, + ctrlSegmentedPaddingRestRaw, + ctrlSegmentedPaddingHoverRaw, + ctrlSegmentedPaddingPressedRaw, + ctrlSegmentedGapRaw, + ctrlSegmentedItemCornerRestRaw, + ctrlSegmentedItemCornerHoverRaw, + ctrlSegmentedItemCornerPressedRaw, + ctrlSegmentedSmPaddingRestRaw, + ctrlSegmentedSmPaddingHoverRaw, + ctrlSegmentedSmPaddingPressedRaw, + ctrlSegmentedLgPaddingRestRaw, + ctrlSegmentedLgPaddingHoverRaw, + ctrlSegmentedLgPaddingPressedRaw, + ctrlSegmentedSmItemCornerRestRaw, + ctrlSegmentedSmItemCornerHoverRaw, + ctrlSegmentedSmItemCornerPressedRaw, + ctrlSegmentedLgItemCornerRestRaw, + ctrlSegmentedLgItemCornerHoverRaw, + ctrlSegmentedLgItemCornerPressedRaw, + ctrlSegmentedSmCornerRestRaw, + ctrlSegmentedSmCornerHoverRaw, + ctrlSegmentedSmCornerPressedRaw, + ctrlSegmentedLgCornerRestRaw, + ctrlSegmentedLgCornerHoverRaw, + ctrlSegmentedLgCornerPressedRaw, +} from './components/segmented/variables'; +export { + ctrlSliderBarHeightRaw, + ctrlSliderBarCornerRaw, + ctrlSliderBarForegroundFilledRestRaw, + ctrlSliderBarForegroundEmptyRestRaw, + ctrlSliderBarForegroundEmptyHoverRaw, + ctrlSliderBarForegroundEmptyPressedRaw, + ctrlSliderBarForegroundEmptyDisabledRaw, + ctrlSliderBarForegroundFilledHoverRaw, + ctrlSliderBarForegroundFilledPressedRaw, + ctrlSliderBarForegroundFilledDisabledRaw, + ctrlSliderThumbCornerRaw, + ctrlSliderThumbSizeRestRaw, + ctrlSliderThumbSizeHoverRaw, + ctrlSliderThumbSizePressedRaw, + ctrlSliderThumbBackgroundRestRaw, + ctrlSliderThumbBackgroundHoverRaw, + ctrlSliderThumbBackgroundPressedRaw, + ctrlSliderThumbBackgroundDisabledRaw, + ctrlSliderThumbInnerStrokeWidthRestRaw, + ctrlSliderThumbInnerStrokeWidthHoverRaw, + ctrlSliderThumbInnerStrokeWidthPressedRaw, + ctrlSliderThumbInnerStrokeRestRaw, + ctrlSliderThumbInnerStrokeHoverRaw, + ctrlSliderThumbInnerStrokePressedRaw, + ctrlSliderThumbInnerStrokeDisabledRaw, + ctrlSliderThumbOuterStrokeWidthRaw, + ctrlSliderThumbOuterStrokeRestRaw, + ctrlSliderThumbOuterStrokeHoverRaw, + ctrlSliderThumbOuterStrokePressedRaw, + ctrlSliderThumbOuterStrokeDisabledRaw, + ctrlSliderSmThumbSizeRestRaw, + ctrlSliderSmThumbSizeHoverRaw, + ctrlSliderSmThumbSizePressedRaw, + ctrlSliderSmBarHeightRaw, + ctrlSliderLgThumbSizeRestRaw, + ctrlSliderLgBarHeightRaw, + ctrlSliderLgThumbSizeHoverRaw, + ctrlSliderLgThumbSizePressedRaw, +} from './components/slider/variables'; +export { + ctrlSplitDividerStrokeWidthRaw, + ctrlSplitDividerStrokeWidthOnOutlineRaw, + ctrlSplitDividerStrokeWidthOnSubtleRaw, +} from './components/split/variables'; +export { ctrlSpinnerStrokeWidthRaw, ctrlSpinnerShowEmptyTrackRaw } from './components/spinner/variables'; +export { + ctrlTooltipCornerRaw, + ctrlTooltipBackgroundRaw, + ctrlTooltipForegroundRaw, + ctrlTooltipShadowRaw, +} from './components/tooltip/variables'; +export { ctrlBooleanSelectionHintRaw } from './components/boolean/variables'; +export { + ctrlComposerInputBottomStrokeWidthSelectedRestRaw, + ctrlComposerInputBottomStrokeWidthRestRaw, + ctrlComposerInputBottomStrokeWidthHoverRaw, + ctrlComposerInputBottomStrokeWidthPressedRaw, + ctrlComposerInputCornerRestRaw, + ctrlComposerInputCornerHoverRaw, + ctrlComposerInputCornerPressedRaw, + ctrlComposerInputBackgroundRestRaw, + ctrlComposerInputBackgroundPressedRaw, + ctrlComposerInputBackgroundDisabledRaw, + ctrlComposerInputBackgroundSelectedRestRaw, + ctrlComposerInputBackgroundHoverRaw, + ctrlComposerInputStrokeRestRaw, + ctrlComposerInputStrokeHoverUsesGradientRaw, + ctrlComposerInputStrokePressedUsesGradientRaw, + ctrlComposerInputStrokeDisabledUsesGradientRaw, + ctrlComposerInputStrokeSelectedRestUsesGradientRaw, + ctrlComposerInputStrokeWidthRestRaw, + ctrlComposerInputStrokeWidthHoverRaw, + ctrlComposerInputStrokeWidthPressedRaw, + ctrlComposerInputStrokeWidthSelectedRestRaw, + ctrlComposerInputBottomStrokeRestRaw, + ctrlComposerInputBottomStrokeHoverRaw, + ctrlComposerInputBottomStrokePressedRaw, + ctrlComposerInputBottomStrokeDisabledRaw, + ctrlComposerInputBottomStrokeSelectedRestRaw, + ctrlComposerContainerCornerRaw, + ctrlComposerContainerBackgroundDefaultRaw, + ctrlComposerContainerBackgroundAcrylicColorBlendRaw, + ctrlComposerContainerBackgroundAcrylicLumBlendRaw, + ctrlComposerContainerStrokeDefaultRaw, + ctrlComposerInputShadowRaw, + ctrlComposerContainerShadowRaw, +} from './components/composer/variables'; +export { + ctrlCardStateRestRaw, + ctrlCardStateHoverRaw, + ctrlCardStatePressedRaw, + ctrlCardStateDisabledRaw, +} from './components/card/variables'; +export { + textStyleDefaultHeaderFontFamily, + textStyleDefaultHeaderLetterSpacing, + textStyleAiRegularFontFamily, + textStyleAiRegularWeight, + textStyleAiRegularLetterSpacing, + textStyleAiHeaderFontFamily, + textStyleAiHeaderWeight, + textStyleAiHeaderLetterSpacing, + textStyleArticleRegularFontFamily, + textStyleArticleRegularWeight, + textStyleArticleRegularLetterSpacing, + textStyleArticleHeaderFontFamily, + textStyleArticleHeaderWeight, + textStyleArticleHeaderLetterSpacing, + textStyleCodeRegularFontFamily, + textStyleCodeRegularWeight, + textStyleCodeRegularLetterSpacing, + textStyleCodeHeaderFontFamily, + textStyleCodeHeaderWeight, + textStyleCodeHeaderLetterSpacing, + textStyleDataVizRegularFontFamily, + textStyleDataVizRegularWeight, + textStyleDataVizRegularLetterSpacing, + textStyleDataVizHeaderFontFamily, + textStyleDataVizHeaderWeight, + textStyleDataVizHeaderLetterSpacing, + textStyleQuoteRegularFontFamily, + textStyleQuoteRegularWeight, + textStyleQuoteRegularLetterSpacing, + textStyleQuoteHeaderFontFamily, + textStyleQuoteHeaderWeight, + textStyleQuoteHeaderLetterSpacing, + textRampPageHeaderFontSize, + textRampPageHeaderLineHeight, + textRampSectionHeaderFontSize, + textRampSectionHeaderLineHeight, + textRampSubsectionHeaderFontSize, + textRampSubsectionHeaderLineHeight, + textRampReadingBodyFontSize, + textRampReadingBodyLineHeight, + textRampItemHeaderFontSize, + textRampItemHeaderLineHeight, + textRampItemBodyFontSize, + textRampItemBodyLineHeight, + textRampMetadataFontSize, + textRampMetadataLineHeight, + textRampLegalFontSize, + textRampLegalLineHeight, + textRampSmPageHeaderFontSize, + textRampSmPageHeaderLineHeight, + textRampSmSectionHeaderFontSize, + textRampSmSectionHeaderLineHeight, + textRampSmSubsectionHeaderFontSize, + textRampSmSubsectionHeaderLineHeight, + textRampSmReadingBodyFontSize, + textRampSmReadingBodyLineHeight, + textRampSmItemHeaderFontSize, + textRampSmItemHeaderLineHeight, + textRampSmItemBodyFontSize, + textRampSmItemBodyLineHeight, + textRampSmMetadataFontSize, + textRampSmMetadataLineHeight, + textRampSmLegalFontSize, + textRampSmLegalLineHeight, + textRampLgPageHeaderFontSize, + textRampLgPageHeaderLineHeight, + textRampLgSectionHeaderFontSize, + textRampLgSectionHeaderLineHeight, + textRampLgSubsectionHeaderFontSize, + textRampLgSubsectionHeaderLineHeight, + textRampLgReadingBodyFontSize, + textRampLgReadingBodyLineHeight, + textRampLgItemHeaderFontSize, + textRampLgItemHeaderLineHeight, + textRampLgItemBodyFontSize, + textRampLgItemBodyLineHeight, + textRampLgMetadataFontSize, + textRampLgMetadataLineHeight, + textRampLgLegalFontSize, + textRampLgLegalLineHeight, + textCtrlWeightDefault, + textCtrlButtonWeightDefault, + textCtrlButtonWeightSelected, + paddingToolbarInside, + paddingToolbarOutside, + paddingFlyoutDefault, + paddingCardNestedImage, + paddingCtrlTextBottom, + paddingCtrlSmTextBottom, + paddingCtrlLgTextBottom, + gapBetweenCtrlNested, + gapBetweenTextSmall, + gapBetweenCtrlLgNested, + gapBetweenTextLarge, + gapBetweenCtrlSmNested, + gapBetweenListItem, + gapBetweenCard, + strokeWidthDividerDefault, + strokeWidthDividerStrong, + strokeWidthCtrlOutlineRest, + strokeWidthCtrlOutlineHover, + strokeWidthCtrlOutlinePressed, + strokeWidthCtrlOutlineSelected, + strokeWidthWindowDefault, + backgroundToolbar, + strokeToolbar, + strokeCtrlOnBrandRestStop2, + strokeCtrlOnBrandHoverStop2, + strokeCtrlOnBrandPressedStop2, + strokeCtrlOnBrandDisabledStop2, + strokeCtrlOnNeutralRestStop2, + strokeCtrlOnNeutralHoverStop2, + strokeCtrlOnNeutralPressedStop2, + strokeCtrlOnNeutralDisabledStop2, + strokeCtrlOnOutlineRestStop2, + strokeCtrlOnOutlineHoverStop2, + strokeCtrlOnOutlinePressedStop2, + strokeCtrlOnOutlineDisabledStop2, + strokeCtrlOnActiveBrandRest, + strokeCtrlDividerOnBrandDisabled, + strokeCtrlDividerOnActiveBrand, + strokeCtrlDividerOnActiveBrandDisabled, + strokeCtrlDividerOnNeutralDisabled, + strokeCtrlDividerOnOutlineDisabled, + strokeCtrlOnActiveBrandHover, + strokeCtrlOnActiveBrandPressed, + strokeCtrlOnActiveBrandDisabled, + strokeCtrlOnActiveBrandRestStop2, + strokeCtrlOnActiveBrandHoverStop2, + strokeCtrlOnActiveBrandPressedStop2, + strokeCtrlOnActiveBrandDisabledStop2, + strokeDividerSubtle, + strokeDividerStrong, + strokeDividerBrand, + strokeWindowInactive, + backgroundLayerPrimaryStop1, + backgroundLayerPrimaryStop2, + backgroundLayerPrimaryStop3, + backgroundLayerSecondary, + backgroundLayerTertiary, + backgroundCardOnPrimaryDefaultSelected, + backgroundCtrlActiveBrandRest, + backgroundCtrlActiveBrandHover, + backgroundCtrlActiveBrandPressed, + backgroundCtrlActiveBrandDisabled, + backgroundCtrlShapeSafeActiveBrandRest, + backgroundCtrlShapeSafeActiveBrandDisabled, + backgroundCtrlShapeSafeNeutralRest, + backgroundCtrlShapeSafeNeutralHover, + backgroundCtrlShapeSafeNeutralPressed, + backgroundCtrlShapeSafeNeutralDisabled, + cornerFlyoutHover, + cornerFlyoutPressed, + cornerLayerIntersection, + cornerCardHover, + cornerCardPressed, + cornerToolbarDefault, + cornerImageOnPage, + cornerCtrlHover, + cornerCtrlPressed, + cornerCtrlSmHover, + cornerCtrlSmPressed, + cornerCtrlLgHover, + cornerCtrlLgPressed, + foregroundContentNeutralPrimary, + foregroundContentNeutralSecondary, + foregroundContentBrandPrimary, + foregroundCtrlNeutralPrimaryHover, + foregroundCtrlNeutralPrimaryPressed, + foregroundCtrlNeutralSecondaryHover, + foregroundCtrlNeutralSecondaryPressed, + foregroundCtrlIconOnNeutralRest, + foregroundCtrlIconOnNeutralHover, + foregroundCtrlIconOnNeutralPressed, + foregroundCtrlIconOnNeutralDisabled, + foregroundCtrlIconOnOutlineRest, + foregroundCtrlIconOnOutlineHover, + foregroundCtrlIconOnOutlinePressed, + foregroundCtrlIconOnOutlineDisabled, + foregroundCtrlIconOnSubtleRest, + foregroundCtrlIconOnSubtleHover, + foregroundCtrlIconOnSubtlePressed, + foregroundCtrlIconOnSubtleDisabled, + foregroundCtrlOnBrandHover, + foregroundCtrlOnBrandPressed, + foregroundCtrlActiveBrandRest, + foregroundCtrlActiveBrandHover, + foregroundCtrlActiveBrandPressed, + foregroundCtrlActiveBrandDisabled, + foregroundCtrlOnActiveBrandRest, + foregroundCtrlOnActiveBrandHover, + foregroundCtrlOnActiveBrandPressed, + foregroundCtrlOnActiveBrandDisabled, + foregroundCtrlOnOutlineRest, + foregroundCtrlOnOutlineHover, + foregroundCtrlOnOutlinePressed, + foregroundCtrlOnOutlineDisabled, + foregroundCtrlOnSubtleRest, + foregroundCtrlOnSubtleHover, + foregroundCtrlOnSubtlePressed, + foregroundCtrlOnSubtleDisabled, + foregroundCtrlOnTransparentRest, + foregroundCtrlOnTransparentHover, + foregroundCtrlOnTransparentPressed, + foregroundCtrlOnTransparentDisabled, + materialAcrylicDefaultSolid, + materialAcrylicDefaultColorBlend, + materialAcrylicDefaultLumBlend, + materialMicaDefaultSolid, + materialMicaDefaultColorBlend, + materialMicaDefaultLumBlend, + materialMicaDarkerSolid, + materialMicaDarkerColorBlend, + materialMicaDarkerLumBlend, + materialMicaThinSolid, + materialMicaThinColorBlend, + materialMicaThinLumBlend, + iconThemeCtrlDefaultHover, + iconThemeCtrlDefaultPressed, + iconThemeCtrlSubtleRest, + iconThemeCtrlSubtleHover, + iconThemeCtrlSubtlePressed, + iconThemeCtrlSubtleSelected, + iconThemeCtrlChevronDefault, + iconThemeCtrlChevronSelected, + statusBrandBackground, + statusBrandStroke, + statusBrandForeground, + statusBrandTintForeground, + statusDangerStroke, + statusDangerForeground, + statusWarningStroke, + statusWarningForeground, + statusSuccessStroke, + statusSuccessForeground, + statusImportantStroke, + statusImportantForeground, + statusInformativeStroke, + statusInformativeForeground, + statusNeutralStroke, + statusNeutralForeground, + statusNeutralTintForeground, + cornerFlyoutShellRest, + materialAcrylicShellDefaultSolid, + materialAcrylicShellDefaultColorBlend, + materialAcrylicShellDefaultLumBlend, + backgroundCardOnSecondaryDefaultSelected, + textStyleDefaultDisplayFontFamily, + textStyleDefaultDisplayLetterSpacing, + shadowCtrlOnDrag, + shadowWindowInactive, +} from './optional/tokens'; +export { + textGlobalDisplay1FontSize, + textGlobalDisplay1LineHeight, + textGlobalDisplay2FontSize, + textGlobalDisplay2LineHeight, + textGlobalTitle1FontSize, + textGlobalTitle1LineHeight, + textGlobalTitle2FontSize, + textGlobalTitle2LineHeight, + textGlobalSubtitle1FontSize, + textGlobalSubtitle1LineHeight, + textGlobalSubtitle2FontSize, + textGlobalSubtitle2LineHeight, + textGlobalBody1FontSize, + textGlobalBody1LineHeight, + textGlobalBody2FontSize, + textGlobalBody2LineHeight, + textGlobalBody3FontSize, + textGlobalBody3LineHeight, + textGlobalCaption1FontSize, + textGlobalCaption1LineHeight, + textGlobalCaption2FontSize, + textGlobalCaption2LineHeight, + textStyleDefaultRegularFontFamily, + textStyleDefaultRegularWeight, + textStyleDefaultRegularLetterSpacing, + textStyleDefaultHeaderWeight, + sizeCtrlDefault, + sizeCtrlIcon, + sizeCtrlIconSecondary, + textCtrlWeightSelected, + sizeCtrlSmDefault, + sizeCtrlSmIcon, + sizeCtrlLgDefault, + sizeCtrlLgIcon, + paddingContentAlignDefault, + paddingContentAlignOutdentIconOnSubtle, + paddingContentNone, + paddingContentAlignOutdentTextOnSubtle, + paddingContentXxSmall, + paddingContentXSmall, + paddingContentSmall, + paddingContentMedium, + paddingContentLarge, + paddingContentXLarge, + paddingContentXxLarge, + paddingContentXxxLarge, + paddingCtrlHorizontalDefault, + paddingCtrlHorizontalIconOnly, + paddingCtrlTextTop, + paddingCtrlTextSide, + paddingCtrlToNestedControl, + paddingCtrlSmHorizontalDefault, + paddingCtrlSmHorizontalIconOnly, + paddingCtrlSmTextTop, + paddingCtrlSmToNestedControl, + paddingCtrlLgHorizontalDefault, + paddingCtrlLgHorizontalIconOnly, + paddingCtrlLgTextTop, + paddingCtrlLgToNestedControl, + gapBetweenContentNone, + gapBetweenContentXxSmall, + gapBetweenContentXSmall, + gapBetweenContentSmall, + gapBetweenCtrlDefault, + gapBetweenContentMedium, + gapBetweenContentLarge, + gapBetweenContentXLarge, + gapBetweenContentXxLarge, + gapBetweenCtrlLgDefault, + gapBetweenCtrlSmDefault, + gapInsideCtrlDefault, + gapInsideCtrlSmDefault, + gapInsideCtrlSmToSecondaryIcon, + gapInsideCtrlLgDefault, + gapInsideCtrlLgToSecondaryIcon, + gapInsideCtrlToSecondaryIcon, + gapInsideCtrlToLabel, + gapInsideCtrlSmToLabel, + gapInsideCtrlLgToLabel, + cornerCircular, + strokeWidthDefault, + backgroundSmoke, + strokeCtrlOnOutlineRest, + strokeCtrlOnOutlineHover, + strokeCtrlOnOutlinePressed, + strokeCtrlOnOutlineDisabled, + strokeCtrlDividerOnBrand, + strokeCtrlDividerOnNeutral, + strokeCtrlDividerOnOutline, + strokeDividerDefault, + strokeWindowActive, + backgroundWindowPrimarySolid, + backgroundWindowPrimaryColorBlend, + backgroundWindowPrimaryLumBlend, + backgroundWindowSecondarySolid, + backgroundWindowSecondaryColorBlend, + backgroundWindowSecondaryLumBlend, + backgroundWindowTabBandColorBlend, + backgroundWindowTabBandLumBlend, + backgroundWindowTabBandSolid, + backgroundWebPagePrimary, + backgroundWebPageSecondary, + backgroundLayerPrimarySolid, + backgroundCardOnPrimaryDefaultRest, + backgroundCardOnPrimaryAltRest, + backgroundCardOnPrimaryAltHover, + backgroundCardOnPrimaryAltPressed, + backgroundCardOnPrimaryAltDisabled, + backgroundCardOnPrimaryDefaultHover, + backgroundCardOnPrimaryDefaultPressed, + backgroundCardOnPrimaryDefaultDisabled, + backgroundFlyoutSolid, + backgroundCtrlBrandRest, + backgroundCtrlBrandHover, + backgroundCtrlBrandPressed, + backgroundCtrlBrandDisabled, + backgroundCtrlNeutralRest, + backgroundCtrlNeutralHover, + backgroundCtrlNeutralPressed, + backgroundCtrlNeutralDisabled, + backgroundCtrlSubtleHover, + backgroundCtrlSubtlePressed, + backgroundFlyoutLumBlend, + backgroundFlyoutColorBlend, + cornerZero, + cornerBezel, + cornerWindowDefault, + cornerFlyoutRest, + cornerLayerDefault, + cornerCardRest, + cornerCtrlRest, + cornerCtrlSmRest, + cornerCtrlLgRest, + cornerImageInCard, + foregroundCtrlNeutralPrimaryRest, + foregroundCtrlNeutralPrimaryDisabled, + foregroundCtrlNeutralSecondaryRest, + foregroundCtrlNeutralSecondaryDisabled, + foregroundCtrlBrandRest, + foregroundCtrlBrandHover, + foregroundCtrlBrandPressed, + foregroundCtrlBrandDisabled, + foregroundCtrlOnBrandRest, + foregroundCtrlOnBrandDisabled, + materialAcrylicBlur, + materialMicaBlur, + iconThemeCtrlDefaultRest, + iconThemeCtrlDefaultSelected, + statusBrandTintBackground, + statusBrandTintStroke, + statusDangerBackground, + statusDangerTintBackground, + statusDangerTintStroke, + statusDangerTintForeground, + statusWarningBackground, + statusWarningTintBackground, + statusWarningTintStroke, + statusWarningTintForeground, + statusSuccessBackground, + statusSuccessTintBackground, + statusSuccessTintStroke, + statusSuccessTintForeground, + statusImportantBackground, + statusImportantTintBackground, + statusImportantTintStroke, + statusImportantTintForeground, + statusInformativeBackground, + statusInformativeTintForeground, + statusInformativeTintStroke, + statusInformativeTintBackground, + statusAwayForeground, + statusOofForeground, + aiBrandStop1, + aiBrandStop2, + aiBrandStop3, + aiBrandStop4, + aiShimmerStop1, + aiShimmerStop2, + aiShimmerStop3, + aiShimmerStop4, + nullColor, + statusNeutralBackground, + statusNeutralTintBackground, + statusNeutralTintStroke, + nullNumber, + nullString, + backgroundCardOnSecondaryDefaultRest, + backgroundCardOnSecondaryAltRest, + backgroundCardOnSecondaryAltHover, + backgroundCardOnSecondaryAltPressed, + backgroundCardOnSecondaryAltDisabled, + backgroundCardOnSecondaryDefaultHover, + backgroundCardOnSecondaryDefaultPressed, + backgroundCardOnSecondaryDefaultDisabled, + backgroundCardOnFlyoutDefaultRest, + backgroundCardOnFlyoutDefaultHover, + backgroundCardOnFlyoutDefaultPressed, + backgroundCardOnFlyoutDefaultDisabled, + textStyleDefaultDisplayWeight, + shadowFlyout, + shadowToolbar, + shadowWindowActive, +} from './control/tokens'; +export { + textStyleDefaultHeaderCase, + textStyleAiHeaderCase, + textStyleArticleHeaderCase, + textStyleCodeHeaderCase, + textStyleDataVizHeaderCase, + textStyleQuoteHeaderCase, + strokeLayer, + strokeImage, + strokeFlyout, + strokeCtrlOnBrandRest, + strokeCtrlOnBrandHover, + strokeCtrlOnBrandPressed, + strokeCtrlOnBrandDisabled, + strokeCtrlOnNeutralRest, + strokeCtrlOnNeutralHover, + strokeCtrlOnNeutralPressed, + strokeCtrlOnNeutralDisabled, + strokeCtrlOnSubtleRest, + strokeCtrlOnSubtleHover, + strokeCtrlOnSubtlePressed, + strokeCtrlOnSubtleDisabled, + strokeCtrlOnSubtleHoverSplit, + strokeCtrlDividerOnSubtle, + strokeCtrlDividerOnSubtleDisabled, + strokeCardSelected, + strokeCardOnPrimaryRest, + strokeCardOnPrimaryHover, + strokeCardOnPrimaryPressed, + strokeCardOnPrimaryDisabled, + strokeCardOnSecondaryRest, + strokeCardOnSecondaryHover, + strokeCardOnSecondaryPressed, + strokeCardOnSecondaryDisabled, + backgroundCtrlOutlineRest, + backgroundCtrlOutlineHover, + backgroundCtrlOutlinePressed, + backgroundCtrlOutlineDisabled, + backgroundCtrlSubtleRest, + backgroundCtrlSubtleDisabled, + backgroundCtrlSubtleHoverSplit, + foregroundCtrlHintDefault, + shadowCardRest, + shadowCardHover, + shadowCardPressed, + shadowCardDisabled, + shadowLayer, +} from './nullable/tokens'; +export { + ctrlAvatarSize, + ctrlAvatarCornerItem, + ctrlAvatarBackground, + ctrlAvatarForeground, + ctrlAvatarIconSize, + ctrlAvatarPresenceBadgeSize, + ctrlAvatarActiveRingSize, + ctrlAvatarPresenceBadgePaddingBottomRightOffset, + ctrlAvatarCornerGroup, + ctrlAvatarActiveRingStrokeWidth, + ctrlAvatarPresenceBadgeStrokeWidth, + ctrlAvatarTextFontSize, + ctrlAvatarTextLineHeight, + ctrlAvatarTextPaddingTopOffset, + ctrlAvatarActiveRingStroke, + ctrlAvatarShowCutout, + ctrlAvatarPresenceBadgeBackgroundBehindBadge, +} from './components/avatar/tokens'; +export { + ctrlBadgeTextPaddingTop, + ctrlBadgeTextPaddingBottom, + ctrlBadgeSmTextPaddingTop, + ctrlBadgeSmTextPaddingBottom, + ctrlBadgeLgTextPaddingTop, + ctrlBadgeLgTextPaddingBottom, + ctrlBadgeIconTheme, + ctrlBadgeBeaconSize, + ctrlBadgeSize, + ctrlBadgeCorner, + ctrlBadgeGap, + ctrlBadgeIconSize, + ctrlBadgePadding, + ctrlBadgeSmSize, + ctrlBadgeSmCorner, + ctrlBadgeSmIconSize, + ctrlBadgeSmPadding, + ctrlBadgeLgSize, + ctrlBadgeLgIconSize, + ctrlBadgeLgCorner, + ctrlBadgeLgPadding, +} from './components/badge/tokens'; +export { + ctrlChoicePaddingHorizontal, + ctrlChoicePaddingVertical, + ctrlChoiceBaseSize, + ctrlChoiceIconTheme, + ctrlChoiceBaseBackgroundRest, + ctrlChoiceBaseBackgroundHover, + ctrlChoiceBaseBackgroundPressed, + ctrlChoiceBaseBackgroundDisabled, + ctrlChoiceBaseStrokeRest, + ctrlChoiceBaseStrokeHover, + ctrlChoiceBaseStrokePressed, + ctrlChoiceBaseStrokeDisabled, + ctrlChoiceCheckboxIconSize, + ctrlChoiceCheckboxCorner, + ctrlChoiceCheckboxIndeterminateCorner, + ctrlChoiceCheckboxIndeterminateWidth, + ctrlChoiceCheckboxIndeterminateHeight, + ctrlChoiceRadioCorner, + ctrlChoiceSwitchCorner, + ctrlChoiceSwitchHeight, + ctrlChoiceSwitchWidth, + ctrlChoiceSwitchPaddingRest, + ctrlChoiceSwitchPaddingHover, + ctrlChoiceSwitchPaddingPressed, + ctrlChoiceSwitchThumbWidthRest, + ctrlChoiceSwitchThumbWidthHover, + ctrlChoiceSwitchThumbWidthPressed, + ctrlChoiceRadioDotSizeRest, + ctrlChoiceRadioDotSizeHover, + ctrlChoiceRadioDotSizePressed, + ctrlChoiceSmBaseSize, + ctrlChoiceSmCheckboxIconSize, + ctrlChoiceSmCheckboxCorner, + ctrlChoiceSmRadioDotSize, + ctrlChoiceSmSwitchWidth, + ctrlChoiceSmSwitchHeight, + ctrlChoiceSmSwitchThumbWidthRest, + ctrlChoiceSmSwitchThumbWidthHover, + ctrlChoiceSmSwitchThumbWidthPressed, + ctrlChoiceLgBaseSize, + ctrlChoiceLgCheckboxCorner, + ctrlChoiceLgCheckboxIconSize, + ctrlChoiceLgRadioDotSizeRest, + ctrlChoiceLgRadioDotSizeHover, + ctrlChoiceLgRadioDotSizePressed, + ctrlChoiceLgSwitchWidth, + ctrlChoiceLgSwitchHeight, + ctrlChoiceLgSwitchThumbWidthRest, + ctrlChoiceLgSwitchThumbWidthHover, + ctrlChoiceLgSwitchThumbWidthPressed, + ctrlChoiceSwitchThumbShadow, +} from './components/choice/tokens'; +export { + ctrlDialogBackground, + ctrlDialogStroke, + ctrlDialogBaseCorner, + ctrlDialogLayerBackground, + ctrlDialogLayerPaddingBottom, + ctrlDialogBaseShadow, +} from './components/dialog/tokens'; +export { ctrlDividerFixedLineLength } from './components/divider/tokens'; +export { + ctrlDragBackgroundSolid, + ctrlDragBackgroundColorBlend, + ctrlDragBackgroundLumBlend, +} from './components/drag/tokens'; +export { + ctrlFabForegroundRestNew, + ctrlFabForegroundDisabledNew, + ctrlFabBackgroundRest, + ctrlFabBackgroundHover, + ctrlFabBackgroundPressed, + ctrlFabBackgroundDisabled, + ctrlFabCornerRest, + ctrlFabCornerHover, + ctrlFabCornerPressed, + ctrlFabShadowRest, + ctrlFabShadowHover, + ctrlFabShadowPressed, + ctrlFabShadowDisabled, +} from './components/fab/tokens'; +export { + ctrlFocusInnerStrokeWidth, + ctrlFocusInnerStroke, + ctrlFocusOuterStrokeWidth, + ctrlFocusOuterStroke, +} from './components/focus/tokens'; +export { + ctrlInputBackgroundRest, + ctrlInputBackgroundHover, + ctrlInputBackgroundPressed, + ctrlInputBackgroundDisabled, + ctrlInputBackgroundSelected, + ctrlInputBackgroundError, + ctrlInputStrokeRest, + ctrlInputStrokeWidthRest, + ctrlInputStrokeWidthHover, + ctrlInputStrokeWidthPressed, + ctrlInputStrokeWidthSelected, + ctrlInputBottomLineStrokeWidthRest, + ctrlInputTextSelectionBackground, + ctrlInputTextSelectionForeground, + ctrlInputBottomLineStrokeWidthHover, + ctrlInputBottomLineStrokeWidthPressed, + ctrlInputBottomLineStrokeWidthSelected, + ctrlInputBottomLineStrokeRest, + ctrlInputBottomLineStrokeHover, + ctrlInputBottomLineStrokePressed, + ctrlInputBottomLineStrokeDisabled, + ctrlInputBottomLineStrokeSelected, + ctrlInputBottomLineStrokeError, + ctrlInputStrokeHover, + ctrlInputStrokePressed, + ctrlInputStrokeDisabled, + ctrlInputStrokeSelected, + ctrlInputStrokeError, +} from './components/input/tokens'; +export { + ctrlLinkForegroundNeutralRest, + ctrlLinkInlineStrokeWidthRest, + ctrlLinkInlineStrokeWidthHover, + ctrlLinkInlineUnderlineDashed, + ctrlLinkForegroundNeutralHover, + ctrlLinkForegroundNeutralPressed, + ctrlLinkForegroundBrandRest, + ctrlLinkForegroundBrandHover, + ctrlLinkForegroundBrandPressed, + ctrlLinkOnPageStrokeWidthRest, + ctrlLinkOnPageStrokeWidthHover, + ctrlLinkOnPageUnderlineDashed, + ctrlLinkInlineShowUnderlineAtRest, + ctrlLinkOnPageShowUnderlineAtRest, +} from './components/link/tokens'; +export { + ctrlListPillWidth, + ctrlListPillFullWidth, + ctrlListPillStretchPaddingDefault, + ctrlListPillStretchPaddingHint, + ctrlListPillLengthRest, + ctrlListPillLengthHover, + ctrlListPillLengthPressed, + ctrlListPillLengthHint, + ctrlListCornerRest, + ctrlListCornerHover, + ctrlListCornerPressed, + ctrlListIndentLevel1, + ctrlListIndentLevel2, + ctrlListIndentLevel3, + ctrlListBackgroundSelectedRest, + ctrlListForegroundSelectedRest, + ctrlListForegroundSelectedHover, + ctrlListForegroundSelectedPressed, + ctrlListForegroundSelectedDisabled, + ctrlListBackgroundSelectedHover, + ctrlListBackgroundSelectedPressed, + ctrlListBackgroundSelectedDisabled, + ctrlListChoiceBackgroundRest, + ctrlListChoiceStrokeRest, + ctrlListChoiceStrokeDisabled, + ctrlListChoiceStrokeSelectedRest, + ctrlListChoiceStrokeSelectedDisabled, + ctrlListChoiceForegroundHover, + ctrlListChoiceForegroundSelectedRest, + ctrlListChoiceForegroundSelectedDisabled, + ctrlListChoiceBackgroundDisabled, + ctrlListChoiceBackgroundSelectedRest, + ctrlListChoiceBackgroundSelectedDisabled, + ctrlListChoiceCheckboxCorner, + ctrlListChoiceCheckboxIconSize, + ctrlListChoiceDotSize, + ctrlListSplitDividerPaddingInset, + ctrlListSplitDividerStroke, + ctrlListSmCornerRest, + ctrlListSmCornerHover, + ctrlListSmCornerPressed, + ctrlListSmIndentLevel1, + ctrlListSmIndentLevel2, + ctrlListSmIndentLevel3, + ctrlListLgCornerRest, + ctrlListLgCornerHover, + ctrlListLgCornerPressed, + ctrlListLgIndentLevel1, + ctrlListLgIndentLevel2, + ctrlListLgIndentLevel3, + ctrlListSplitDividerShowDivider, + ctrlListShadowSelected, +} from './components/list/tokens'; +export { + ctrlLiteFilterBackgroundSelected, + ctrlLiteFilterStrokeSelected, + ctrlLiteFilterForegroundSelected, + ctrlLiteFilterStrokeWidthSelected, +} from './components/liteFilter/tokens'; +export { + ctrlProgressBackgroundEmpty, + ctrlProgressBackgroundFilled, + ctrlProgressCorner, + ctrlProgressHeightFilled, + ctrlProgressHeightEmpty, + ctrlProgressSmHeightFilled, + ctrlProgressSmHeightEmpty, + ctrlProgressLgHeightFilled, + ctrlProgressLgHeightEmpty, +} from './components/progress/tokens'; +export { + ctrlRatingIconTheme, + ctrlRatingIconGap, + ctrlRatingIconForegroundFilled, + ctrlRatingIconForegroundEmpty, + ctrlRatingIconSize, +} from './components/rating/tokens'; +export { + ctrlSegmentedBackgroundRest, + ctrlSegmentedBackgroundHover, + ctrlSegmentedBackgroundPressed, + ctrlSegmentedBackgroundDisabled, + ctrlSegmentedStrokeRest, + ctrlSegmentedStrokeHover, + ctrlSegmentedStrokePressed, + ctrlSegmentedStrokeDisabled, + ctrlSegmentedCornerRest, + ctrlSegmentedCornerHover, + ctrlSegmentedCornerPressed, + ctrlSegmentedPaddingRest, + ctrlSegmentedPaddingHover, + ctrlSegmentedPaddingPressed, + ctrlSegmentedGap, + ctrlSegmentedItemCornerRest, + ctrlSegmentedItemCornerHover, + ctrlSegmentedItemCornerPressed, + ctrlSegmentedSmPaddingRest, + ctrlSegmentedSmPaddingHover, + ctrlSegmentedSmPaddingPressed, + ctrlSegmentedLgPaddingRest, + ctrlSegmentedLgPaddingHover, + ctrlSegmentedLgPaddingPressed, + ctrlSegmentedSmItemCornerRest, + ctrlSegmentedSmItemCornerHover, + ctrlSegmentedSmItemCornerPressed, + ctrlSegmentedLgItemCornerRest, + ctrlSegmentedLgItemCornerHover, + ctrlSegmentedLgItemCornerPressed, + ctrlSegmentedSmCornerRest, + ctrlSegmentedSmCornerHover, + ctrlSegmentedSmCornerPressed, + ctrlSegmentedLgCornerRest, + ctrlSegmentedLgCornerHover, + ctrlSegmentedLgCornerPressed, +} from './components/segmented/tokens'; +export { + ctrlSliderBarHeight, + ctrlSliderBarCorner, + ctrlSliderBarForegroundFilledRest, + ctrlSliderBarForegroundEmptyRest, + ctrlSliderBarForegroundEmptyHover, + ctrlSliderBarForegroundEmptyPressed, + ctrlSliderBarForegroundEmptyDisabled, + ctrlSliderBarForegroundFilledHover, + ctrlSliderBarForegroundFilledPressed, + ctrlSliderBarForegroundFilledDisabled, + ctrlSliderThumbCorner, + ctrlSliderThumbSizeRest, + ctrlSliderThumbSizeHover, + ctrlSliderThumbSizePressed, + ctrlSliderThumbBackgroundRest, + ctrlSliderThumbBackgroundHover, + ctrlSliderThumbBackgroundPressed, + ctrlSliderThumbBackgroundDisabled, + ctrlSliderThumbInnerStrokeWidthRest, + ctrlSliderThumbInnerStrokeWidthHover, + ctrlSliderThumbInnerStrokeWidthPressed, + ctrlSliderThumbInnerStrokeRest, + ctrlSliderThumbInnerStrokeHover, + ctrlSliderThumbInnerStrokePressed, + ctrlSliderThumbInnerStrokeDisabled, + ctrlSliderThumbOuterStrokeWidth, + ctrlSliderThumbOuterStrokeRest, + ctrlSliderThumbOuterStrokeHover, + ctrlSliderThumbOuterStrokePressed, + ctrlSliderThumbOuterStrokeDisabled, + ctrlSliderSmThumbSizeRest, + ctrlSliderSmThumbSizeHover, + ctrlSliderSmThumbSizePressed, + ctrlSliderSmBarHeight, + ctrlSliderLgThumbSizeRest, + ctrlSliderLgBarHeight, + ctrlSliderLgThumbSizeHover, + ctrlSliderLgThumbSizePressed, +} from './components/slider/tokens'; +export { + ctrlSplitDividerStrokeWidth, + ctrlSplitDividerStrokeWidthOnOutline, + ctrlSplitDividerStrokeWidthOnSubtle, +} from './components/split/tokens'; +export { ctrlSpinnerStrokeWidth, ctrlSpinnerShowEmptyTrack } from './components/spinner/tokens'; +export { + ctrlTooltipCorner, + ctrlTooltipBackground, + ctrlTooltipForeground, + ctrlTooltipShadow, +} from './components/tooltip/tokens'; +export { ctrlBooleanSelectionHint } from './components/boolean/tokens'; +export { + ctrlComposerInputBottomStrokeWidthSelectedRest, + ctrlComposerInputBottomStrokeWidthRest, + ctrlComposerInputBottomStrokeWidthHover, + ctrlComposerInputBottomStrokeWidthPressed, + ctrlComposerInputCornerRest, + ctrlComposerInputCornerHover, + ctrlComposerInputCornerPressed, + ctrlComposerInputBackgroundRest, + ctrlComposerInputBackgroundPressed, + ctrlComposerInputBackgroundDisabled, + ctrlComposerInputBackgroundSelectedRest, + ctrlComposerInputBackgroundHover, + ctrlComposerInputStrokeRest, + ctrlComposerInputStrokeHoverUsesGradient, + ctrlComposerInputStrokePressedUsesGradient, + ctrlComposerInputStrokeDisabledUsesGradient, + ctrlComposerInputStrokeSelectedRestUsesGradient, + ctrlComposerInputStrokeWidthRest, + ctrlComposerInputStrokeWidthHover, + ctrlComposerInputStrokeWidthPressed, + ctrlComposerInputStrokeWidthSelectedRest, + ctrlComposerInputBottomStrokeRest, + ctrlComposerInputBottomStrokeHover, + ctrlComposerInputBottomStrokePressed, + ctrlComposerInputBottomStrokeDisabled, + ctrlComposerInputBottomStrokeSelectedRest, + ctrlComposerContainerCorner, + ctrlComposerContainerBackgroundDefault, + ctrlComposerContainerBackgroundAcrylicColorBlend, + ctrlComposerContainerBackgroundAcrylicLumBlend, + ctrlComposerContainerStrokeDefault, + ctrlComposerInputShadow, + ctrlComposerContainerShadow, +} from './components/composer/tokens'; +export { + ctrlCardStateRest, + ctrlCardStateHover, + ctrlCardStatePressed, + ctrlCardStateDisabled, +} from './components/card/tokens'; +export { + _ctrlAccordionBackgroundRest, + _ctrlAccordionFocusInnerStrokeWidth, + _ctrlAccordionFocusOuterStroke, + _ctrlAccordionForegroundHover, + _ctrlAccordionForegroundPressed, + _ctrlAccordionForegroundRest, + _ctrlAccordionPaddingTextBottom, + _ctrlAccordionPaddingTextTop, + _ctrlAvatarActiveRingStrokeWidthLg, + _ctrlAvatarActiveRingStrokeWidthMd, + _ctrlAvatarActiveRingStrokeWidthSm, + _ctrlAvatarCornerGroupLg, + _ctrlAvatarCornerGroupMd, + _ctrlAvatarCornerGroupSm, + _ctrlAvatarCornerGroupXLg, + _ctrlAvatarPresenceBadgeStrokeWidthLg, + _ctrlAvatarPresenceBadgeStrokeWidthSm, + _ctrlBadgeNullColor, + _ctrlBadgePaddingLeftSide, + _ctrlBadgePaddingLeftSideXL, + _ctrlBadgePaddingRightSide, + _ctrlBadgePaddingRightSideXL, + _ctrlBadgePaddingTextSide, + _ctrlBadgeSmallTinyCorner, + _ctrlBadgeStatusAvailableTintForeground, + _ctrlBadgeStatusBrandTintForeground, + _ctrlBadgeStatusBusyTintForeground, + _ctrlBadgeStatusDangerTintBackground, + _ctrlBadgeStatusDangerTintForeground, + _ctrlBadgeStatusDangerTintStroke, + _ctrlBadgeStatusImportantTintBackground, + _ctrlBadgeStatusImportantTintForeground, + _ctrlBadgeStatusInformativeTintStroke, + _ctrlBadgeStatusSuccessTintBackground, + _ctrlBadgeStatusSuccessTintForeground, + _ctrlBadgeStatusSuccessTintForeground3, + _ctrlBadgeStatusSuccessTintStroke, + _ctrlBadgeStatusWarningBackground, + _ctrlBadgeStatusWarningTintBackground, + _ctrlBadgeStatusWarningTintForeground, + _ctrlBadgeStatusWarningTintForeground2, + _ctrlBadgeStatusWarningTintStroke, + _ctrlBadgeTextStyleSemiBoldWeight, + _ctrlBadgeXLPadding, + _ctrlBreadcrumbSizeDefault, + _ctrlBreadcrumbSizeLgDefault, + _ctrlBreadcrumbSizeSmIcon, + _ctrlButtonGapInsideDefault, + _ctrlCheckboxBorderColorChecked, + _ctrlCheckboxBorderColorCheckedHover, + _ctrlCheckboxForegroundUnchecked, + _ctrlCheckboxForegroundUncheckedHover, + _ctrlCheckboxIndicatorBorderColorCheckedPressed, + _ctrlCheckboxIndicatorBorderColorMixed, + _ctrlCheckboxIndicatorBorderColorMixedHover, + _ctrlCheckboxIndicatorBorderColorMixedPressed, + _ctrlCheckboxIndicatorColorMixed, + _ctrlCheckboxIndicatorColorMixedHover, + _ctrlCheckboxIndicatorColorMixedPressed, + _ctrlDialogGapBetweenContentMedium, + _ctrlDividerForegroundSubtle, + _ctrlFieldForegroundCtrlNeutralSecondaryRest, + _ctrlFieldGapBetweenContentXSmall, + _ctrlFieldPaddingCtrlLgTextBottom, + _ctrlFieldPaddingCtrlLgTextBottomHorizontal, + _ctrlFieldPaddingCtrlLgTextTop, + _ctrlFieldPaddingCtrlLgTextTopHorizontal, + _ctrlFieldPaddingCtrlSmTextBottom, + _ctrlFieldPaddingCtrlSmTextTop, + _ctrlFieldPaddingCtrlTextBottom, + _ctrlFieldPaddingCtrlTextBottomHorizontal, + _ctrlFieldPaddingCtrlTextSide, + _ctrlFieldPaddingCtrlTextTop, + _ctrlFieldPaddingCtrlTextTopHorizontal, + _ctrlFieldStatusDangerTintForeground, + _ctrlFieldStatusSuccessTintForeground, + _ctrlFieldStatusWarningTintForeground, + _ctrlFocusOuterStrokeInteractive, + _ctrlInfoLabelForegroundColorSelected, + _ctrlInputBackgroundRestDarker, + _ctrlInputBackgroundRestLighter, + _ctrlInputBottomLineStrokeBrandPressed, + _ctrlInputNeutralForegroundPlaceholder, + _ctrlListBackgroundColorHover, + _ctrlListBackgroundColorPressed, + _ctrlListBackgroundColorRest, + _ctrlListForegroundColorHover, + _ctrlListForegroundColorPressed, + _ctrlListForegroundColorRest, + _ctrlListItemStroke, + _ctrlMenuGroupHeaderColor, + _ctrlMenuGroupHeaderFontWeight, + _ctrlMenuGroupHeaderHeight, + _ctrlMenuGroupHeaderPaddingHorizontal, + _ctrlMenuItemContentPaddingX, + _ctrlMenuItemGapInsideDefault, + _ctrlMenuItemPaddingBottom, + _ctrlMenuItemPaddingTop, + _ctrlMenuItemPaddingX, + _ctrlMenuItemSecondaryContentFontSize, + _ctrlMenuItemSecondaryContentForegroundHover, + _ctrlMenuItemSecondaryContentForegroundRest, + _ctrlMenuItemSizeDefault, + _ctrlMenuItemSubTextForegroundHover, + _ctrlMenuItemSubTextForegroundPressed, + _ctrlMenuPopoverCornerFlyoutRest, + _ctrlMenuPopoverShadowFlyout, + _ctrlMenuPopoverStrokeFlyout, + _ctrlMessageBarActionsMultilinePaddingRight, + _ctrlMessageBarErrorIconColor, + _ctrlMessageBarGapBetweenCtrl, + _ctrlMessageBarPaddingContentAlignDefault, + _ctrlMessageBarPaddingVertical, + _ctrlMessageBarReflowSpacerMarginBottom, + _ctrlMessageBarSpacingTop, + _ctrlMessageBarTitleLineHeight, + _ctrlPersonaTreeIconOnSubtlePressed, + _ctrlPopoverPaddingContentLarge, + _ctrlPopoverShadowFilter, + _ctrlRadioBackgroundActiveBrandHover, + _ctrlRadioBackgroundActiveBrandPressed, + _ctrlRadioBackgroundActiveBrandRest, + _ctrlRadioBackgroundActiveDisabled, + _ctrlRadioBaseBackgroundDisabled, + _ctrlRadioBaseBackgroundHover, + _ctrlRadioBaseBackgroundPressed, + _ctrlRadioChoiceBaseSize, + _ctrlRadioForegroundContentDisabled, + _ctrlRadioForegroundContentNeutralHover, + _ctrlRadioForegroundContentNeutralRest, + _ctrlRadioForegroundOnActiveBrandHover, + _ctrlRadioForegroundOnActiveBrandPressed, + _ctrlRadioForegroundOnActiveBrandRest, + _ctrlRadioForegroundOnActiveDisabled, + _ctrlRadioPaddingTextTop, + _ctrlRadioPaddingVertical, + _ctrlRadioStrokeOnActiveBrandHover, + _ctrlRadioStrokeOnActiveBrandPressed, + _ctrlRadioStrokeOnActiveBrandRest, + _ctrlSliderBarSizeDefault, + _ctrlSliderPaddingDefault, + _ctrlSliderSmBarSizeDefault, + _ctrlSliderSmPaddingDefault, + _ctrlSpinButtonBackgroundDisabled, + _ctrlSpinButtonForegroundOnSubtleHover, + _ctrlSpinButtonForegroundOnSubtlePressed, + _ctrlSpinButtonNeutralSecondaryRest, + _ctrlSpinButtonOnSubtleRest, + _ctrlSpinButtonPaddingHorizontal, + _ctrlSpinButtonPaddingSmHorizontal, + _ctrlSpinButtonSizeDefault, + _ctrlSpinButtonSizeIconSecondary, + _ctrlSpinButtonSizeSmDefault, + _ctrlSpinnerBackgroundEmpty, + _ctrlSpinnerBackgroundFilled, + _ctrlSpinnerItemBodyFontSize, + _ctrlSpinnerItemBodyLineHeight, + _ctrlSpinnerStrokeLgWidth, + _ctrlSpinnerStrokeSmWidth, + _ctrlSpinnerTextStyleRegularWeight, + _ctrlSwitchPaddingTextBottom, + _ctrlSwitchPaddingTextTop, + _ctrlSwitchStrokeOnActiveBrandHover, + _ctrlSwitchStrokeOnActiveBrandRest, + _ctrlTabBackgroundActiveBrandDisabled, + _ctrlTabForegroundActiveBrandHover, + _ctrlTabForegroundActiveBrandPressed, + _ctrlTabForegroundActiveBrandRest, + _ctrlTabForegroundOnSubtleHover, + _ctrlTabForegroundOnSubtlePressed, + _ctrlTabForegroundOnTransparentHover, + _ctrlTabForegroundOnTransparentPressed, + _ctrlTabGapInsideDefault, + _ctrlTabPaddingHorizontalDefault, + _ctrlTabPaddingTextSide, + _ctrlTabSizeDefault, + _ctrlTabSmGapInsideDefault, + _ctrlTabSmPaddingHorizontalDefault, + _ctrlTeachingPopoverSurfaceCorner, + _ctrlToastBackgroundFlyoutLumBlend, + _ctrlToastBodyForegroundContentNeutralPrimary, + _ctrlToastBodyForegroundContentNeutralSecondary, + _ctrlToastContainerCtrlFocusOuterStroke, + _ctrlToastContainerFlyoutRest, + _ctrlToastCornerFlyoutRest, + _ctrlToastFooterGapBetweenCtrlDefault, + _ctrlToastFooterPaddingContentSmall, + _ctrlToastForegroundContentNeutralPrimary, + _ctrlToastShadowFlyout, + _ctrlToastStrokeFlyout, + _ctrlToastTextRampItemHeaderFontSize, + _ctrlToastTextRampItemHeaderLineHeight, + _ctrlToastTitleCtrlLinkForegroundBrandRest, + _ctrlToastTitleCtrlLinkForegroundBrandRestInverted, + _ctrlToastTitleForegroundContentNeutralPrimary, + _ctrlToastTitleForegroundContentNeutralPrimaryMedia, + _ctrlToastTitleGapBetweenCtrlDefault, + _ctrlToastTitleStatusDangerTintForeground, + _ctrlToastTitleStatusDangerTintForegroundInverted, + _ctrlToastTitleStatusInformativeTintForeground, + _ctrlToastTitleStatusInformativeTintForegroundInverted, + _ctrlToastTitleStatusSuccessTintForegroundInverted, + _ctrlToastTitleStatusWarningTintForeground, + _ctrlToastTitleStatusWarningTintForegroundInverted, + _ctrlTooltipPaddingBottom, + _ctrlTooltipPaddingLeft, + _ctrlTooltipPaddingRight, + _ctrlTooltipPaddingTop, + _ctrlTreeGapInsideDefault, + _ctrlTreeIconOnSubtle, + _ctrlTreeIconOnSubtleHover, + _ctrlTreeIconOnSubtlePressed, + _ctrlTreeOnTransparentHover, + _ctrlTreeOnTransparentPressed, + _ctrlTreePaddingTextBottom, + _ctrlTreePaddingTextLeft, + _ctrlTreePaddingTextRight, + _ctrlTreePaddingTextTop, + _nullBackgroundColorHover, + _nullBackgroundColorPressed, +} from './legacyVariant/tokens'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts new file mode 100644 index 00000000000000..3a45db196930cf --- /dev/null +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -0,0 +1,791 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundDisabled | `colorNeutralBackgroundDisabled`} design token. + * @public + */ +export const colorNeutralBackgroundDisabled = 'var(--colorNeutralBackgroundDisabled)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandBackgroundHover | `colorCompoundBrandBackgroundHover`} design token. + * @public + */ +export const colorCompoundBrandBackgroundHover = 'var(--colorCompoundBrandBackgroundHover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandBackgroundPressed | `colorCompoundBrandBackgroundPressed`} design token. + * @public + */ +export const colorCompoundBrandBackgroundPressed = 'var(--colorCompoundBrandBackgroundPressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandBackground | `colorCompoundBrandBackground`} design token. + * @public + */ +export const colorCompoundBrandBackground = 'var(--colorCompoundBrandBackground)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundHover | `colorBrandBackgroundHover`} design token. + * @public + */ +export const colorBrandBackgroundHover = 'var(--colorBrandBackgroundHover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundPressed | `colorBrandBackgroundPressed`} design token. + * @public + */ +export const colorBrandBackgroundPressed = 'var(--colorBrandBackgroundPressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground | `colorBrandBackground`} design token. + * @public + */ +export const colorBrandBackground = 'var(--colorBrandBackground)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground1Hover | `colorNeutralBackground1Hover`} design token. + * @public + */ +export const colorNeutralBackground1Hover = 'var(--colorNeutralBackground1Hover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground1Pressed | `colorNeutralBackground1Pressed`} design token. + * @public + */ +export const colorNeutralBackground1Pressed = 'var(--colorNeutralBackground1Pressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground1 | `colorNeutralBackground1`} design token. + * @public + */ +export const colorNeutralBackground1 = 'var(--colorNeutralBackground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundHover | `colorTransparentBackgroundHover`} design token. + * @public + */ +export const colorTransparentBackgroundHover = 'var(--colorTransparentBackgroundHover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundPressed | `colorTransparentBackgroundPressed`} design token. + * @public + */ +export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackground | `colorTransparentBackground`} design token. + * @public + */ +export const colorTransparentBackground = 'var(--colorTransparentBackground)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token. + * @public + */ +export const colorNeutralForegroundDisabled = 'var(--colorNeutralForegroundDisabled)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessibleHover | `colorNeutralStrokeAccessibleHover`} design token. + * @public + */ +export const colorNeutralStrokeAccessibleHover = 'var(--colorNeutralStrokeAccessibleHover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessiblePressed | `colorNeutralStrokeAccessiblePressed`} design token. + * @public + */ +export const colorNeutralStrokeAccessiblePressed = 'var(--colorNeutralStrokeAccessiblePressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessible | `colorNeutralStrokeAccessible`} design token. + * @public + */ +export const colorNeutralStrokeAccessible = 'var(--colorNeutralStrokeAccessible)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundHover | `colorSubtleBackgroundHover`} design token. + * @public + */ +export const colorSubtleBackgroundHover = 'var(--colorSubtleBackgroundHover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundPressed | `colorSubtleBackgroundPressed`} design token. + * @public + */ +export const colorSubtleBackgroundPressed = 'var(--colorSubtleBackgroundPressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackground | `colorSubtleBackground`} design token. + * @public + */ +export const colorSubtleBackground = 'var(--colorSubtleBackground)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBackgroundOverlay | `colorBackgroundOverlay`} design token. + * @public + */ +export const colorBackgroundOverlay = 'var(--colorBackgroundOverlay)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token. + * @public + */ +export const borderRadiusCircular = 'var(--borderRadiusCircular)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#borderRadiusMedium | `borderRadiusMedium`} design token. + * @public + */ +export const borderRadiusMedium = 'var(--borderRadiusMedium)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#borderRadiusNone | `borderRadiusNone`} design token. + * @public + */ +export const borderRadiusNone = 'var(--borderRadiusNone)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThick | `strokeWidthThick`} design token. + * @public + */ +export const strokeWidthThick = 'var(--strokeWidthThick)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground6 | `colorNeutralBackground6`} design token. + * @public + */ +export const colorNeutralBackground6 = 'var(--colorNeutralBackground6)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3 | `colorNeutralForeground3`} design token. + * @public + */ +export const colorNeutralForeground3 = 'var(--colorNeutralForeground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase300 | `fontSizeBase300`} design token. + * @public + */ +export const fontSizeBase300 = 'var(--fontSizeBase300)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXS | `spacingHorizontalXS`} design token. + * @public + */ +export const spacingHorizontalXS = 'var(--spacingHorizontalXS)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXXS | `spacingHorizontalXXS`} design token. + * @public + */ +export const spacingHorizontalXXS = 'var(--spacingHorizontalXXS)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeDisabled | `colorNeutralStrokeDisabled`} design token. + * @public + */ +export const colorNeutralStrokeDisabled = 'var(--colorNeutralStrokeDisabled)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#borderRadiusSmall | `borderRadiusSmall`} design token. + * @public + */ +export const borderRadiusSmall = 'var(--borderRadiusSmall)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalS | `spacingHorizontalS`} design token. + * @public + */ +export const spacingHorizontalS = 'var(--spacingHorizontalS)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalS | `spacingVerticalS`} design token. + * @public + */ +export const spacingVerticalS = 'var(--spacingVerticalS)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#borderRadiusXLarge | `borderRadiusXLarge`} design token. + * @public + */ +export const borderRadiusXLarge = 'var(--borderRadiusXLarge)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#shadow64 | `shadow64`} design token. + * @public + */ +export const shadow64 = 'var(--shadow64)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke2 | `colorNeutralStroke2`} design token. + * @public + */ +export const colorNeutralStroke2 = 'var(--colorNeutralStroke2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStrokeFocus2 | `colorStrokeFocus2`} design token. + * @public + */ +export const colorStrokeFocus2 = 'var(--colorStrokeFocus2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThin | `strokeWidthThin`} design token. + * @public + */ +export const strokeWidthThin = 'var(--strokeWidthThin)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorTransparentStroke | `colorTransparentStroke`} design token. + * @public + */ +export const colorTransparentStroke = 'var(--colorTransparentStroke)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBorder2 | `colorPaletteRedBorder2`} design token. + * @public + */ +export const colorPaletteRedBorder2 = 'var(--colorPaletteRedBorder2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStroke | `colorCompoundBrandStroke`} design token. + * @public + */ +export const colorCompoundBrandStroke = 'var(--colorCompoundBrandStroke)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Hover | `colorNeutralStroke1Hover`} design token. + * @public + */ +export const colorNeutralStroke1Hover = 'var(--colorNeutralStroke1Hover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Pressed | `colorNeutralStroke1Pressed`} design token. + * @public + */ +export const colorNeutralStroke1Pressed = 'var(--colorNeutralStroke1Pressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1 | `colorNeutralStroke1`} design token. + * @public + */ +export const colorNeutralStroke1 = 'var(--colorNeutralStroke1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkHover | `colorBrandForegroundLinkHover`} design token. + * @public + */ +export const colorBrandForegroundLinkHover = 'var(--colorBrandForegroundLinkHover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkPressed | `colorBrandForegroundLinkPressed`} design token. + * @public + */ +export const colorBrandForegroundLinkPressed = 'var(--colorBrandForegroundLinkPressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLink | `colorBrandForegroundLink`} design token. + * @public + */ +export const colorBrandForegroundLink = 'var(--colorBrandForegroundLink)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Hover | `colorNeutralForeground2Hover`} design token. + * @public + */ +export const colorNeutralForeground2Hover = 'var(--colorNeutralForeground2Hover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Pressed | `colorNeutralForeground2Pressed`} design token. + * @public + */ +export const colorNeutralForeground2Pressed = 'var(--colorNeutralForeground2Pressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2 | `colorNeutralForeground2`} design token. + * @public + */ +export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXXL | `spacingHorizontalXXL`} design token. + * @public + */ +export const spacingHorizontalXXL = 'var(--spacingHorizontalXXL)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThicker | `strokeWidthThicker`} design token. + * @public + */ +export const strokeWidthThicker = 'var(--strokeWidthThicker)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1`} design token. + * @public + */ +export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground1 | `colorBrandForeground1`} design token. + * @public + */ +export const colorBrandForeground1 = 'var(--colorBrandForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandForeground1Hover | `colorCompoundBrandForeground1Hover`} design token. + * @public + */ +export const colorCompoundBrandForeground1Hover = 'var(--colorCompoundBrandForeground1Hover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandForeground1Pressed | `colorCompoundBrandForeground1Pressed`} design token. + * @public + */ +export const colorCompoundBrandForeground1Pressed = 'var(--colorCompoundBrandForeground1Pressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandForeground1 | `colorCompoundBrandForeground1`} design token. + * @public + */ +export const colorCompoundBrandForeground1 = 'var(--colorCompoundBrandForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandHover | `colorNeutralForeground2BrandHover`} design token. + * @public + */ +export const colorNeutralForeground2BrandHover = 'var(--colorNeutralForeground2BrandHover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandPressed | `colorNeutralForeground2BrandPressed`} design token. + * @public + */ +export const colorNeutralForeground2BrandPressed = 'var(--colorNeutralForeground2BrandPressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1Hover | `colorNeutralForeground1Hover`} design token. + * @public + */ +export const colorNeutralForeground1Hover = 'var(--colorNeutralForeground1Hover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1Pressed | `colorNeutralForeground1Pressed`} design token. + * @public + */ +export const colorNeutralForeground1Pressed = 'var(--colorNeutralForeground1Pressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedHover | `colorNeutralForegroundInvertedHover`} design token. + * @public + */ +export const colorNeutralForegroundInvertedHover = 'var(--colorNeutralForegroundInvertedHover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedPressed | `colorNeutralForegroundInvertedPressed`} design token. + * @public + */ +export const colorNeutralForegroundInvertedPressed = 'var(--colorNeutralForegroundInvertedPressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInverted | `colorNeutralForegroundInverted`} design token. + * @public + */ +export const colorNeutralForegroundInverted = 'var(--colorNeutralForegroundInverted)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundOnBrand | `colorNeutralForegroundOnBrand`} design token. + * @public + */ +export const colorNeutralForegroundOnBrand = 'var(--colorNeutralForegroundOnBrand)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXS | `spacingVerticalXXS`} design token. + * @public + */ +export const spacingVerticalXXS = 'var(--spacingVerticalXXS)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalSNudge | `spacingHorizontalSNudge`} design token. + * @public + */ +export const spacingHorizontalSNudge = 'var(--spacingHorizontalSNudge)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalM | `spacingHorizontalM`} design token. + * @public + */ +export const spacingHorizontalM = 'var(--spacingHorizontalM)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalNone | `spacingHorizontalNone`} design token. + * @public + */ +export const spacingHorizontalNone = 'var(--spacingHorizontalNone)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalL | `spacingHorizontalL`} design token. + * @public + */ +export const spacingHorizontalL = 'var(--spacingHorizontalL)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBackground3 | `colorPaletteMarigoldBackground3`} design token. + * @public + */ +export const colorPaletteMarigoldBackground3 = 'var(--colorPaletteMarigoldBackground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground2 | `colorBrandBackground2`} design token. + * @public + */ +export const colorBrandBackground2 = 'var(--colorBrandBackground2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2 | `colorBrandStroke2`} design token. + * @public + */ +export const colorBrandStroke2 = 'var(--colorBrandStroke2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground3 | `colorPaletteRedBackground3`} design token. + * @public + */ +export const colorPaletteRedBackground3 = 'var(--colorPaletteRedBackground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground1 | `colorStatusDangerBackground1`} design token. + * @public + */ +export const colorStatusDangerBackground1 = 'var(--colorStatusDangerBackground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedForeground3 | `colorPaletteRedForeground3`} design token. + * @public + */ +export const colorPaletteRedForeground3 = 'var(--colorPaletteRedForeground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBorder1 | `colorStatusDangerBorder1`} design token. + * @public + */ +export const colorStatusDangerBorder1 = 'var(--colorStatusDangerBorder1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground3 | `colorNeutralBackground3`} design token. + * @public + */ +export const colorNeutralBackground3 = 'var(--colorNeutralBackground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground5 | `colorNeutralBackground5`} design token. + * @public + */ +export const colorNeutralBackground5 = 'var(--colorNeutralBackground5)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground4 | `colorNeutralBackground4`} design token. + * @public + */ +export const colorNeutralBackground4 = 'var(--colorNeutralBackground4)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryForeground3 | `colorPaletteBerryForeground3`} design token. + * @public + */ +export const colorPaletteBerryForeground3 = 'var(--colorPaletteBerryForeground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground3 | `colorPaletteGreenBackground3`} design token. + * @public + */ +export const colorPaletteGreenBackground3 = 'var(--colorPaletteGreenBackground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBorder2 | `colorPaletteGreenBorder2`} design token. + * @public + */ +export const colorPaletteGreenBorder2 = 'var(--colorPaletteGreenBorder2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBackground1 | `colorStatusSuccessBackground1`} design token. + * @public + */ +export const colorStatusSuccessBackground1 = 'var(--colorStatusSuccessBackground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessForeground1 | `colorStatusSuccessForeground1`} design token. + * @public + */ +export const colorStatusSuccessForeground1 = 'var(--colorStatusSuccessForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBorder1 | `colorStatusSuccessBorder1`} design token. + * @public + */ +export const colorStatusSuccessBorder1 = 'var(--colorStatusSuccessBorder1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBackground3 | `colorPaletteDarkOrangeBackground3`} design token. + * @public + */ +export const colorPaletteDarkOrangeBackground3 = 'var(--colorPaletteDarkOrangeBackground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1Static | `colorNeutralForeground1Static`} design token. + * @public + */ +export const colorNeutralForeground1Static = 'var(--colorNeutralForeground1Static)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBackground1 | `colorStatusWarningBackground1`} design token. + * @public + */ +export const colorStatusWarningBackground1 = 'var(--colorStatusWarningBackground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForeground3 | `colorStatusWarningForeground3`} design token. + * @public + */ +export const colorStatusWarningForeground3 = 'var(--colorStatusWarningForeground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBorder1 | `colorStatusWarningBorder1`} design token. + * @public + */ +export const colorStatusWarningBorder1 = 'var(--colorStatusWarningBorder1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeOnBrand | `colorNeutralStrokeOnBrand`} design token. + * @public + */ +export const colorNeutralStrokeOnBrand = 'var(--colorNeutralStrokeOnBrand)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorTransparentStrokeDisabled | `colorTransparentStrokeDisabled`} design token. + * @public + */ +export const colorTransparentStrokeDisabled = 'var(--colorTransparentStrokeDisabled)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorTransparentStrokeInteractive | `colorTransparentStrokeInteractive`} design token. + * @public + */ +export const colorTransparentStrokeInteractive = 'var(--colorTransparentStrokeInteractive)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke1 | `colorBrandStroke1`} design token. + * @public + */ +export const colorBrandStroke1 = 'var(--colorBrandStroke1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke3 | `colorNeutralStroke3`} design token. + * @public + */ +export const colorNeutralStroke3 = 'var(--colorNeutralStroke3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontWeightSemibold | `fontWeightSemibold`} design token. + * @public + */ +export const fontWeightSemibold = 'var(--fontWeightSemibold)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase500 | `fontSizeBase500`} design token. + * @public + */ +export const fontSizeBase500 = 'var(--fontSizeBase500)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase500 | `lineHeightBase500`} design token. + * @public + */ +export const lineHeightBase500 = 'var(--lineHeightBase500)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase400 | `fontSizeBase400`} design token. + * @public + */ +export const fontSizeBase400 = 'var(--fontSizeBase400)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase400 | `lineHeightBase400`} design token. + * @public + */ +export const lineHeightBase400 = 'var(--lineHeightBase400)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase300 | `lineHeightBase300`} design token. + * @public + */ +export const lineHeightBase300 = 'var(--lineHeightBase300)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase200 | `fontSizeBase200`} design token. + * @public + */ +export const fontSizeBase200 = 'var(--fontSizeBase200)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase200 | `lineHeightBase200`} design token. + * @public + */ +export const lineHeightBase200 = 'var(--lineHeightBase200)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase100 | `fontSizeBase100`} design token. + * @public + */ +export const fontSizeBase100 = 'var(--fontSizeBase100)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase100 | `lineHeightBase100`} design token. + * @public + */ +export const lineHeightBase100 = 'var(--lineHeightBase100)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontSizeHero1000 | `fontSizeHero1000`} design token. + * @public + */ +export const fontSizeHero1000 = 'var(--fontSizeHero1000)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero1000 | `lineHeightHero1000`} design token. + * @public + */ +export const lineHeightHero1000 = 'var(--lineHeightHero1000)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontSizeHero700 | `fontSizeHero700`} design token. + * @public + */ +export const fontSizeHero700 = 'var(--fontSizeHero700)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero700 | `lineHeightHero700`} design token. + * @public + */ +export const lineHeightHero700 = 'var(--lineHeightHero700)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase600 | `fontSizeBase600`} design token. + * @public + */ +export const fontSizeBase600 = 'var(--fontSizeBase600)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase600 | `lineHeightBase600`} design token. + * @public + */ +export const lineHeightBase600 = 'var(--lineHeightBase600)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontSizeHero900 | `fontSizeHero900`} design token. + * @public + */ +export const fontSizeHero900 = 'var(--fontSizeHero900)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero900 | `lineHeightHero900`} design token. + * @public + */ +export const lineHeightHero900 = 'var(--lineHeightHero900)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontSizeHero800 | `fontSizeHero800`} design token. + * @public + */ +export const fontSizeHero800 = 'var(--fontSizeHero800)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero800 | `lineHeightHero800`} design token. + * @public + */ +export const lineHeightHero800 = 'var(--lineHeightHero800)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontFamilyBase | `fontFamilyBase`} design token. + * @public + */ +export const fontFamilyBase = 'var(--fontFamilyBase)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#fontWeightRegular | `fontWeightRegular`} design token. + * @public + */ +export const fontWeightRegular = 'var(--fontWeightRegular)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThickest | `strokeWidthThickest`} design token. + * @public + */ +export const strokeWidthThickest = 'var(--strokeWidthThickest)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#borderRadiusLarge | `borderRadiusLarge`} design token. + * @public + */ +export const borderRadiusLarge = 'var(--borderRadiusLarge)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenForeground3 | `colorPaletteLightGreenForeground3`} design token. + * @public + */ +export const colorPaletteLightGreenForeground3 = 'var(--colorPaletteLightGreenForeground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground2 | `colorBrandForeground2`} design token. + * @public + */ +export const colorBrandForeground2 = 'var(--colorBrandForeground2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground1 | `colorPaletteRedBackground1`} design token. + * @public + */ +export const colorPaletteRedBackground1 = 'var(--colorPaletteRedBackground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedForeground1 | `colorPaletteRedForeground1`} design token. + * @public + */ +export const colorPaletteRedForeground1 = 'var(--colorPaletteRedForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBorder1 | `colorPaletteRedBorder1`} design token. + * @public + */ +export const colorPaletteRedBorder1 = 'var(--colorPaletteRedBorder1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground1 | `colorPaletteGreenBackground1`} design token. + * @public + */ +export const colorPaletteGreenBackground1 = 'var(--colorPaletteGreenBackground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground1 | `colorPaletteGreenForeground1`} design token. + * @public + */ +export const colorPaletteGreenForeground1 = 'var(--colorPaletteGreenForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground3 | `colorPaletteGreenForeground3`} design token. + * @public + */ +export const colorPaletteGreenForeground3 = 'var(--colorPaletteGreenForeground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBorder1 | `colorPaletteGreenBorder1`} design token. + * @public + */ +export const colorPaletteGreenBorder1 = 'var(--colorPaletteGreenBorder1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground3 | `colorPaletteYellowBackground3`} design token. + * @public + */ +export const colorPaletteYellowBackground3 = 'var(--colorPaletteYellowBackground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground1 | `colorPaletteYellowBackground1`} design token. + * @public + */ +export const colorPaletteYellowBackground1 = 'var(--colorPaletteYellowBackground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground1 | `colorPaletteYellowForeground1`} design token. + * @public + */ +export const colorPaletteYellowForeground1 = 'var(--colorPaletteYellowForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground2 | `colorPaletteYellowForeground2`} design token. + * @public + */ +export const colorPaletteYellowForeground2 = 'var(--colorPaletteYellowForeground2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBorder1 | `colorPaletteYellowBorder1`} design token. + * @public + */ +export const colorPaletteYellowBorder1 = 'var(--colorPaletteYellowBorder1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStrokeHover | `colorCompoundBrandStrokeHover`} design token. + * @public + */ +export const colorCompoundBrandStrokeHover = 'var(--colorCompoundBrandStrokeHover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStrokePressed | `colorCompoundBrandStrokePressed`} design token. + * @public + */ +export const colorCompoundBrandStrokePressed = 'var(--colorCompoundBrandStrokePressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXS | `spacingVerticalXS`} design token. + * @public + */ +export const spacingVerticalXS = 'var(--spacingVerticalXS)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalSNudge | `spacingVerticalSNudge`} design token. + * @public + */ +export const spacingVerticalSNudge = 'var(--spacingVerticalSNudge)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeForeground1 | `colorPaletteDarkOrangeForeground1`} design token. + * @public + */ +export const colorPaletteDarkOrangeForeground1 = 'var(--colorPaletteDarkOrangeForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandSelected | `colorNeutralForeground2BrandSelected`} design token. + * @public + */ +export const colorNeutralForeground2BrandSelected = 'var(--colorNeutralForeground2BrandSelected)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground4 | `colorNeutralForeground4`} design token. + * @public + */ +export const colorNeutralForeground4 = 'var(--colorNeutralForeground4)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Hover | `colorNeutralForeground3Hover`} design token. + * @public + */ +export const colorNeutralForeground3Hover = 'var(--colorNeutralForeground3Hover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Pressed | `colorNeutralForeground3Pressed`} design token. + * @public + */ +export const colorNeutralForeground3Pressed = 'var(--colorNeutralForeground3Pressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#shadow16 | `shadow16`} design token. + * @public + */ +export const shadow16 = 'var(--shadow16)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalM | `spacingVerticalM`} design token. + * @public + */ +export const spacingVerticalM = 'var(--spacingVerticalM)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerForeground1 | `colorStatusDangerForeground1`} design token. + * @public + */ +export const colorStatusDangerForeground1 = 'var(--colorStatusDangerForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalMNudge | `spacingVerticalMNudge`} design token. + * @public + */ +export const spacingVerticalMNudge = 'var(--spacingVerticalMNudge)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalMNudge | `spacingHorizontalMNudge`} design token. + * @public + */ +export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2Contrast | `colorBrandStroke2Contrast`} design token. + * @public + */ +export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInverted | `colorNeutralBackgroundInverted`} design token. + * @public + */ +export const colorNeutralBackgroundInverted = 'var(--colorNeutralBackgroundInverted)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInverted2 | `colorNeutralForegroundInverted2`} design token. + * @public + */ +export const colorNeutralForegroundInverted2 = 'var(--colorNeutralForegroundInverted2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#shadow8 | `shadow8`} design token. + * @public + */ +export const shadow8 = 'var(--shadow8)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundInverted | `colorBrandForegroundInverted`} design token. + * @public + */ +export const colorBrandForegroundInverted = 'var(--colorBrandForegroundInverted)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerForegroundInverted | `colorStatusDangerForegroundInverted`} design token. + * @public + */ +export const colorStatusDangerForegroundInverted = 'var(--colorStatusDangerForegroundInverted)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessForegroundInverted | `colorStatusSuccessForegroundInverted`} design token. + * @public + */ +export const colorStatusSuccessForegroundInverted = 'var(--colorStatusSuccessForegroundInverted)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForeground1 | `colorStatusWarningForeground1`} design token. + * @public + */ +export const colorStatusWarningForeground1 = 'var(--colorStatusWarningForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForegroundInverted | `colorStatusWarningForegroundInverted`} design token. + * @public + */ +export const colorStatusWarningForegroundInverted = 'var(--colorStatusWarningForegroundInverted)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts new file mode 100644 index 00000000000000..3ccc18fd6acd51 --- /dev/null +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -0,0 +1,1766 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + ctrlAvatarActiveRingStrokeWidthRaw, + ctrlAvatarCornerGroupRaw, + ctrlAvatarPresenceBadgeStrokeWidthRaw, +} from '../components/avatar/variables'; +import { ctrlBadgeCornerRaw, ctrlBadgeLgPaddingRaw } from '../components/badge/variables'; +import { + ctrlChoiceBaseBackgroundDisabledRaw, + ctrlChoiceBaseBackgroundHoverRaw, + ctrlChoiceBaseBackgroundPressedRaw, + ctrlChoiceBaseSizeRaw, +} from '../components/choice/variables'; +import { ctrlFocusInnerStrokeWidthRaw, ctrlFocusOuterStrokeRaw } from '../components/focus/variables'; +import { + ctrlInputBackgroundRestRaw, + ctrlInputBottomLineStrokePressedRaw, + ctrlInputBackgroundDisabledRaw, +} from '../components/input/variables'; +import { ctrlLinkForegroundBrandRestRaw } from '../components/link/variables'; +import { ctrlListIndentLevel1Raw } from '../components/list/variables'; +import { + ctrlProgressBackgroundEmptyRaw, + ctrlProgressBackgroundFilledRaw, + ctrlProgressHeightFilledRaw, +} from '../components/progress/variables'; +import { ctrlSpinnerStrokeWidthRaw } from '../components/spinner/variables'; +import { + nullColorRaw, + strokeWidthDefaultRaw, + backgroundCtrlBrandRestRaw, + foregroundCtrlNeutralPrimaryRestRaw, + paddingCtrlTextTopRaw, + cornerCtrlRestRaw, + paddingCtrlTextSideRaw, + statusSuccessTintForegroundRaw, + foregroundCtrlBrandRestRaw, + statusDangerTintForegroundRaw, + statusDangerTintBackgroundRaw, + statusDangerTintStrokeRaw, + statusImportantTintBackgroundRaw, + statusImportantTintForegroundRaw, + statusInformativeTintStrokeRaw, + statusSuccessTintBackgroundRaw, + statusSuccessTintStrokeRaw, + statusWarningBackgroundRaw, + statusWarningTintBackgroundRaw, + statusWarningTintForegroundRaw, + statusWarningTintStrokeRaw, + textStyleDefaultRegularWeightRaw, + sizeCtrlDefaultRaw, + sizeCtrlLgDefaultRaw, + sizeCtrlSmIconRaw, + gapInsideCtrlDefaultRaw, + backgroundCtrlBrandHoverRaw, + backgroundCtrlBrandPressedRaw, + gapBetweenContentMediumRaw, + foregroundCtrlNeutralSecondaryRestRaw, + gapBetweenContentXSmallRaw, + paddingCtrlLgTextTopRaw, + paddingCtrlSmTextTopRaw, + backgroundCtrlNeutralRestRaw, + backgroundCtrlSubtleHoverRaw, + backgroundCtrlSubtlePressedRaw, + paddingCtrlHorizontalDefaultRaw, + textGlobalBody3FontSizeRaw, + cornerFlyoutRestRaw, + shadowFlyoutRaw, + paddingContentAlignDefaultRaw, + gapBetweenCtrlDefaultRaw, + paddingContentAlignOutdentIconOnSubtleRaw, + textGlobalBody2LineHeightRaw, + paddingContentLargeRaw, + backgroundCtrlBrandDisabledRaw, + sizeCtrlIconRaw, + foregroundCtrlOnBrandRestRaw, + foregroundCtrlOnBrandDisabledRaw, + backgroundCtrlNeutralDisabledRaw, + paddingCtrlSmHorizontalDefaultRaw, + sizeCtrlIconSecondaryRaw, + sizeCtrlSmDefaultRaw, + textGlobalBody3LineHeightRaw, + foregroundCtrlBrandHoverRaw, + foregroundCtrlBrandPressedRaw, + backgroundFlyoutLumBlendRaw, + paddingContentSmallRaw, + textGlobalBody2FontSizeRaw, + statusInformativeTintForegroundRaw, +} from '../control/variables'; +import { + colorTransparentBackground, + colorStrokeFocus2, + colorNeutralForeground1, + strokeWidthThickest, + strokeWidthThicker, + strokeWidthThick, + borderRadiusLarge, + borderRadiusMedium, + borderRadiusSmall, + borderRadiusXLarge, + strokeWidthThin, + colorTransparentStroke, + spacingHorizontalXXS, + spacingHorizontalXS, + colorPaletteLightGreenForeground3, + colorBrandForeground2, + colorPaletteRedBackground3, + colorPaletteRedBackground1, + colorPaletteRedForeground1, + colorPaletteRedBorder1, + colorNeutralForeground3, + colorNeutralBackground1, + colorNeutralStroke2, + colorPaletteGreenBackground1, + colorPaletteGreenForeground1, + colorPaletteGreenForeground3, + colorPaletteGreenBorder1, + colorPaletteYellowBackground3, + colorPaletteYellowBackground1, + colorPaletteYellowForeground1, + colorPaletteYellowForeground2, + colorPaletteYellowBorder1, + fontWeightSemibold, + spacingHorizontalSNudge, + colorCompoundBrandBackground, + colorCompoundBrandBackgroundHover, + colorNeutralForeground2, + colorCompoundBrandBackgroundPressed, + colorCompoundBrandStroke, + colorCompoundBrandStrokeHover, + colorCompoundBrandStrokePressed, + colorCompoundBrandForeground1, + colorCompoundBrandForeground1Hover, + colorCompoundBrandForeground1Pressed, + spacingVerticalXS, + spacingVerticalXXS, + spacingVerticalSNudge, + spacingHorizontalM, + colorPaletteDarkOrangeForeground1, + colorTransparentStrokeInteractive, + colorNeutralForeground2BrandSelected, + colorNeutralBackground3, + colorNeutralForeground4, + fontSizeBase200, + colorNeutralForeground3Hover, + colorNeutralForeground3Pressed, + shadow16, + spacingVerticalM, + colorStatusDangerForeground1, + spacingVerticalS, + spacingVerticalMNudge, + lineHeightBase300, + colorNeutralForegroundDisabled, + spacingHorizontalMNudge, + colorBrandStroke2Contrast, + colorBrandStroke1, + fontSizeBase400, + lineHeightBase400, + colorNeutralForeground1Hover, + colorNeutralForeground1Pressed, + colorNeutralForeground2Hover, + colorNeutralForeground2Pressed, + colorNeutralBackgroundInverted, + colorNeutralForegroundInverted2, + shadow8, + colorBrandForeground1, + colorBrandForegroundInverted, + colorNeutralForegroundInverted, + colorStatusDangerForegroundInverted, + colorStatusSuccessForegroundInverted, + colorStatusWarningForeground1, + colorStatusWarningForegroundInverted, + colorTransparentBackgroundHover, + colorTransparentBackgroundPressed, +} from '../legacy/tokens'; +import { + backgroundCtrlSubtleRestRaw, + strokeCtrlOnBrandHoverRaw, + strokeCtrlOnBrandPressedRaw, + foregroundCtrlHintDefaultRaw, + strokeFlyoutRaw, + backgroundCtrlOutlineDisabledRaw, + backgroundCtrlOutlineHoverRaw, + backgroundCtrlOutlinePressedRaw, + strokeCtrlOnBrandRestRaw, +} from '../nullable/variables'; +import { + foregroundCtrlOnTransparentHoverRaw, + foregroundCtrlOnTransparentPressedRaw, + foregroundCtrlOnTransparentRestRaw, + paddingCtrlTextBottomRaw, + statusBrandTintForegroundRaw, + strokeCtrlOnActiveBrandHoverRaw, + foregroundContentNeutralPrimaryRaw, + strokeCtrlOnActiveBrandPressedRaw, + backgroundCtrlActiveBrandRestRaw, + backgroundCtrlActiveBrandHoverRaw, + backgroundCtrlActiveBrandPressedRaw, + paddingCtrlLgTextBottomRaw, + paddingCtrlSmTextBottomRaw, + foregroundCtrlActiveBrandRestRaw, + foregroundCtrlOnSubtleHoverRaw, + foregroundCtrlNeutralPrimaryHoverRaw, + foregroundCtrlOnSubtlePressedRaw, + foregroundCtrlNeutralPrimaryPressedRaw, + foregroundCtrlOnSubtleRestRaw, + strokeWidthCtrlOutlineRestRaw, + textRampItemBodyFontSizeRaw, + foregroundCtrlNeutralSecondaryHoverRaw, + foregroundCtrlNeutralSecondaryPressedRaw, + textRampItemHeaderLineHeightRaw, + backgroundCtrlActiveBrandDisabledRaw, + foregroundCtrlOnActiveBrandHoverRaw, + foregroundCtrlOnActiveBrandPressedRaw, + foregroundCtrlOnActiveBrandRestRaw, + foregroundCtrlOnActiveBrandDisabledRaw, + strokeCtrlOnActiveBrandRestRaw, + textRampItemBodyLineHeightRaw, + foregroundCtrlActiveBrandHoverRaw, + foregroundCtrlActiveBrandPressedRaw, + foregroundCtrlIconOnSubtleHoverRaw, + foregroundCtrlIconOnSubtlePressedRaw, + foregroundContentNeutralSecondaryRaw, + textRampItemHeaderFontSizeRaw, +} from '../optional/variables'; + +/** + * This is a legacy variant for backgroundCtrlSubtleRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlSubtleRest instead. + */ +export const _ctrlAccordionBackgroundRest = `var(${backgroundCtrlSubtleRestRaw}, var(${nullColorRaw}, ${colorTransparentBackground}))`; +/** + * This is a legacy variant for ctrlFocusInnerStrokeWidth to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlFocusInnerStrokeWidth instead. + */ +export const _ctrlAccordionFocusInnerStrokeWidth = `var(${ctrlFocusInnerStrokeWidthRaw}, var(${strokeWidthDefaultRaw}, 0px))`; +/** + * This is a legacy variant for ctrlFocusOuterStroke to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlFocusOuterStroke instead. + */ +export const _ctrlAccordionFocusOuterStroke = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorStrokeFocus2}))`; +/** + * This is a legacy variant for foregroundCtrlOnTransparentHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnTransparentHover instead. + */ +export const _ctrlAccordionForegroundHover = `var(${foregroundCtrlOnTransparentHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1}))`; +/** + * This is a legacy variant for foregroundCtrlOnTransparentPressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnTransparentPressed instead. + */ +export const _ctrlAccordionForegroundPressed = `var(${foregroundCtrlOnTransparentPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1}))`; +/** + * This is a legacy variant for foregroundCtrlOnTransparentRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnTransparentRest instead. + */ +export const _ctrlAccordionForegroundRest = `var(${foregroundCtrlOnTransparentRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1}))`; +/** + * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextBottom instead. + */ +export const _ctrlAccordionPaddingTextBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, 0px))`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlAccordionPaddingTextTop = `var(${paddingCtrlTextTopRaw}, 0px)`; +/** + * This is a legacy variant for ctrlAvatarActiveRingStrokeWidth to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlAvatarActiveRingStrokeWidth instead. + */ +export const _ctrlAvatarActiveRingStrokeWidthLg = `var(${ctrlAvatarActiveRingStrokeWidthRaw}, ${strokeWidthThickest})`; +/** + * This is a legacy variant for ctrlAvatarActiveRingStrokeWidth to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlAvatarActiveRingStrokeWidth instead. + */ +export const _ctrlAvatarActiveRingStrokeWidthMd = `var(${ctrlAvatarActiveRingStrokeWidthRaw}, ${strokeWidthThicker})`; +/** + * This is a legacy variant for ctrlAvatarActiveRingStrokeWidth to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlAvatarActiveRingStrokeWidth instead. + */ +export const _ctrlAvatarActiveRingStrokeWidthSm = `var(${ctrlAvatarActiveRingStrokeWidthRaw}, ${strokeWidthThick})`; +/** + * This is a legacy variant for ctrlAvatarCornerGroup to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlAvatarCornerGroup instead. + */ +export const _ctrlAvatarCornerGroupLg = `var(${ctrlAvatarCornerGroupRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusLarge}))`; +/** + * This is a legacy variant for ctrlAvatarCornerGroup to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlAvatarCornerGroup instead. + */ +export const _ctrlAvatarCornerGroupMd = `var(${ctrlAvatarCornerGroupRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusMedium}))`; +/** + * This is a legacy variant for ctrlAvatarCornerGroup to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlAvatarCornerGroup instead. + */ +export const _ctrlAvatarCornerGroupSm = `var(${ctrlAvatarCornerGroupRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusSmall}))`; +/** + * This is a legacy variant for ctrlAvatarCornerGroup to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlAvatarCornerGroup instead. + */ +export const _ctrlAvatarCornerGroupXLg = `var(${ctrlAvatarCornerGroupRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusXLarge}))`; +/** + * This is a legacy variant for ctrlAvatarPresenceBadgeStrokeWidth to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlAvatarPresenceBadgeStrokeWidth instead. + */ +export const _ctrlAvatarPresenceBadgeStrokeWidthLg = `var(${ctrlAvatarPresenceBadgeStrokeWidthRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThick}))`; +/** + * This is a legacy variant for ctrlAvatarPresenceBadgeStrokeWidth to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlAvatarPresenceBadgeStrokeWidth instead. + */ +export const _ctrlAvatarPresenceBadgeStrokeWidthSm = `var(${ctrlAvatarPresenceBadgeStrokeWidthRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; +/** + * This is a legacy variant for nullColor to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use nullColor instead. + */ +export const _ctrlBadgeNullColor = `var(${nullColorRaw}, ${colorTransparentStroke})`; +/** + * This is a legacy variant for paddingCtrlTextSide to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextSide instead. + */ +export const _ctrlBadgePaddingLeftSide = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalXXS})`; +/** + * This is a legacy variant for paddingCtrlTextSide to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextSide instead. + */ +export const _ctrlBadgePaddingLeftSideXL = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalXS})`; +/** + * This is a legacy variant for paddingCtrlTextSide to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextSide instead. + */ +export const _ctrlBadgePaddingRightSide = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalXXS})`; +/** + * This is a legacy variant for paddingCtrlTextSide to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextSide instead. + */ +export const _ctrlBadgePaddingRightSideXL = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalXS})`; +/** + * This is a legacy variant for paddingCtrlTextSide to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextSide instead. + */ +export const _ctrlBadgePaddingTextSide = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalXXS})`; +/** + * This is a legacy variant for ctrlBadgeCorner to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlBadgeCorner instead. + */ +export const _ctrlBadgeSmallTinyCorner = `var(${ctrlBadgeCornerRaw}, ${borderRadiusSmall})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlBadgeStatusAvailableTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteLightGreenForeground3})`; +/** + * This is a legacy variant for statusBrandTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusBrandTintForeground instead. + */ +export const _ctrlBadgeStatusBrandTintForeground = `var(${statusBrandTintForegroundRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForeground2}))`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlBadgeStatusBusyTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorPaletteRedBackground3})`; +/** + * This is a legacy variant for statusDangerTintBackground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintBackground instead. + */ +export const _ctrlBadgeStatusDangerTintBackground = `var(${statusDangerTintBackgroundRaw}, ${colorPaletteRedBackground1})`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlBadgeStatusDangerTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorPaletteRedForeground1})`; +/** + * This is a legacy variant for statusDangerTintStroke to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintStroke instead. + */ +export const _ctrlBadgeStatusDangerTintStroke = `var(${statusDangerTintStrokeRaw}, ${colorPaletteRedBorder1})`; +/** + * This is a legacy variant for statusImportantTintBackground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusImportantTintBackground instead. + */ +export const _ctrlBadgeStatusImportantTintBackground = `var(${statusImportantTintBackgroundRaw}, ${colorNeutralForeground3})`; +/** + * This is a legacy variant for statusImportantTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusImportantTintForeground instead. + */ +export const _ctrlBadgeStatusImportantTintForeground = `var(${statusImportantTintForegroundRaw}, ${colorNeutralBackground1})`; +/** + * This is a legacy variant for statusInformativeTintStroke to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusInformativeTintStroke instead. + */ +export const _ctrlBadgeStatusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw}, ${colorNeutralStroke2})`; +/** + * This is a legacy variant for statusSuccessTintBackground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintBackground instead. + */ +export const _ctrlBadgeStatusSuccessTintBackground = `var(${statusSuccessTintBackgroundRaw}, ${colorPaletteGreenBackground1})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlBadgeStatusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteGreenForeground1})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlBadgeStatusSuccessTintForeground3 = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteGreenForeground3})`; +/** + * This is a legacy variant for statusSuccessTintStroke to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintStroke instead. + */ +export const _ctrlBadgeStatusSuccessTintStroke = `var(${statusSuccessTintStrokeRaw}, ${colorPaletteGreenBorder1})`; +/** + * This is a legacy variant for statusWarningBackground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningBackground instead. + */ +export const _ctrlBadgeStatusWarningBackground = `var(${statusWarningBackgroundRaw}, ${colorPaletteYellowBackground3})`; +/** + * This is a legacy variant for statusWarningTintBackground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintBackground instead. + */ +export const _ctrlBadgeStatusWarningTintBackground = `var(${statusWarningTintBackgroundRaw}, ${colorPaletteYellowBackground1})`; +/** + * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintForeground instead. + */ +export const _ctrlBadgeStatusWarningTintForeground = `var(${statusWarningTintForegroundRaw}, ${colorPaletteYellowForeground1})`; +/** + * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintForeground instead. + */ +export const _ctrlBadgeStatusWarningTintForeground2 = `var(${statusWarningTintForegroundRaw}, ${colorPaletteYellowForeground2})`; +/** + * This is a legacy variant for statusWarningTintStroke to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintStroke instead. + */ +export const _ctrlBadgeStatusWarningTintStroke = `var(${statusWarningTintStrokeRaw}, ${colorPaletteYellowBorder1})`; +/** + * This is a legacy variant for textStyleDefaultRegularWeight to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use textStyleDefaultRegularWeight instead. + */ +export const _ctrlBadgeTextStyleSemiBoldWeight = `var(${textStyleDefaultRegularWeightRaw}, ${fontWeightSemibold})`; +/** + * This is a legacy variant for ctrlBadgeLgPadding to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlBadgeLgPadding instead. + */ +export const _ctrlBadgeXLPadding = `var(${ctrlBadgeLgPaddingRaw}, ${spacingHorizontalSNudge})`; +/** + * This is a legacy variant for sizeCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlDefault instead. + */ +export const _ctrlBreadcrumbSizeDefault = `var(${sizeCtrlDefaultRaw}, 32px)`; +/** + * This is a legacy variant for sizeCtrlLgDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlLgDefault instead. + */ +export const _ctrlBreadcrumbSizeLgDefault = `var(${sizeCtrlLgDefaultRaw}, 40px)`; +/** + * This is a legacy variant for sizeCtrlSmIcon to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlSmIcon instead. + */ +export const _ctrlBreadcrumbSizeSmIcon = `var(${sizeCtrlSmIconRaw}, 16px)`; +/** + * This is a legacy variant for gapInsideCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapInsideCtrlDefault instead. + */ +export const _ctrlButtonGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingHorizontalSNudge})`; +/** + * This is a legacy variant for strokeCtrlOnActiveBrandHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use strokeCtrlOnActiveBrandHover instead. + */ +export const _ctrlCheckboxBorderColorChecked = `var(${strokeCtrlOnActiveBrandHoverRaw}, var(${strokeCtrlOnBrandHoverRaw}, ${colorCompoundBrandBackground}))`; +/** + * This is a legacy variant for strokeCtrlOnActiveBrandHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use strokeCtrlOnActiveBrandHover instead. + */ +export const _ctrlCheckboxBorderColorCheckedHover = `var(${strokeCtrlOnActiveBrandHoverRaw}, var(${strokeCtrlOnBrandHoverRaw}, ${colorCompoundBrandBackgroundHover}))`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlCheckboxForegroundUnchecked = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground3}))`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlCheckboxForegroundUncheckedHover = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2}))`; +/** + * This is a legacy variant for strokeCtrlOnActiveBrandPressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use strokeCtrlOnActiveBrandPressed instead. + */ +export const _ctrlCheckboxIndicatorBorderColorCheckedPressed = `var(${strokeCtrlOnActiveBrandPressedRaw}, var(${strokeCtrlOnBrandPressedRaw}, ${colorCompoundBrandBackgroundPressed}))`; +/** + * This is a legacy variant for backgroundCtrlActiveBrandRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlActiveBrandRest instead. + */ +export const _ctrlCheckboxIndicatorBorderColorMixed = `var(${backgroundCtrlActiveBrandRestRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorCompoundBrandStroke}))`; +/** + * This is a legacy variant for backgroundCtrlActiveBrandHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlActiveBrandHover instead. + */ +export const _ctrlCheckboxIndicatorBorderColorMixedHover = `var(${backgroundCtrlActiveBrandHoverRaw}, var(${backgroundCtrlBrandHoverRaw}, ${colorCompoundBrandStrokeHover}))`; +/** + * This is a legacy variant for backgroundCtrlActiveBrandPressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlActiveBrandPressed instead. + */ +export const _ctrlCheckboxIndicatorBorderColorMixedPressed = `var(${backgroundCtrlActiveBrandPressedRaw}, var(${backgroundCtrlBrandPressedRaw}, ${colorCompoundBrandStrokePressed}))`; +/** + * This is a legacy variant for backgroundCtrlActiveBrandRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlActiveBrandRest instead. + */ +export const _ctrlCheckboxIndicatorColorMixed = `var(${backgroundCtrlActiveBrandRestRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorCompoundBrandForeground1}))`; +/** + * This is a legacy variant for backgroundCtrlActiveBrandHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlActiveBrandHover instead. + */ +export const _ctrlCheckboxIndicatorColorMixedHover = `var(${backgroundCtrlActiveBrandHoverRaw}, var(${backgroundCtrlBrandHoverRaw}, ${colorCompoundBrandForeground1Hover}))`; +/** + * This is a legacy variant for backgroundCtrlActiveBrandPressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlActiveBrandPressed instead. + */ +export const _ctrlCheckboxIndicatorColorMixedPressed = `var(${backgroundCtrlActiveBrandPressedRaw}, var(${backgroundCtrlBrandPressedRaw}, ${colorCompoundBrandForeground1Pressed}))`; +/** + * This is a legacy variant for gapBetweenContentMedium to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapBetweenContentMedium instead. + */ +export const _ctrlDialogGapBetweenContentMedium = `var(${gapBetweenContentMediumRaw}, 8px)`; +/** + * This is a legacy variant for foregroundCtrlHintDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlHintDefault instead. + */ +export const _ctrlDividerForegroundSubtle = `var(${foregroundCtrlHintDefaultRaw}, var(${nullColorRaw}, ${colorNeutralForeground3}))`; +/** + * This is a legacy variant for foregroundCtrlNeutralSecondaryRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlNeutralSecondaryRest instead. + */ +export const _ctrlFieldForegroundCtrlNeutralSecondaryRest = `var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground3})`; +/** + * This is a legacy variant for gapBetweenContentXSmall to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapBetweenContentXSmall instead. + */ +export const _ctrlFieldGapBetweenContentXSmall = `var(${gapBetweenContentXSmallRaw}, ${spacingVerticalXS})`; +/** + * This is a legacy variant for paddingCtrlLgTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlLgTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlLgTextBottom = `var(${paddingCtrlLgTextBottomRaw}, var(${paddingCtrlLgTextTopRaw}, 1px))`; +/** + * This is a legacy variant for paddingCtrlLgTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlLgTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlLgTextBottomHorizontal = `var(${paddingCtrlLgTextBottomRaw}, var(${paddingCtrlLgTextTopRaw}, 9px))`; +/** + * This is a legacy variant for paddingCtrlLgTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlLgTextTop instead. + */ +export const _ctrlFieldPaddingCtrlLgTextTop = `var(${paddingCtrlLgTextTopRaw}, 1px)`; +/** + * This is a legacy variant for paddingCtrlLgTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlLgTextTop instead. + */ +export const _ctrlFieldPaddingCtrlLgTextTopHorizontal = `var(${paddingCtrlLgTextTopRaw}, 9px)`; +/** + * This is a legacy variant for paddingCtrlSmTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlSmTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlSmTextBottom = `var(${paddingCtrlSmTextBottomRaw}, var(${paddingCtrlSmTextTopRaw}, ${spacingVerticalXS}))`; +/** + * This is a legacy variant for paddingCtrlSmTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlSmTextTop instead. + */ +export const _ctrlFieldPaddingCtrlSmTextTop = `var(${paddingCtrlSmTextTopRaw}, ${spacingVerticalXS})`; +/** + * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlTextBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, ${spacingVerticalXXS}))`; +/** + * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlTextBottomHorizontal = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, ${spacingVerticalSNudge}))`; +/** + * This is a legacy variant for paddingCtrlTextSide to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextSide instead. + */ +export const _ctrlFieldPaddingCtrlTextSide = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalM})`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlFieldPaddingCtrlTextTop = `var(${paddingCtrlTextTopRaw}, ${spacingVerticalXXS})`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlFieldPaddingCtrlTextTopHorizontal = `var(${paddingCtrlTextTopRaw}, ${spacingVerticalSNudge})`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlFieldStatusDangerTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorPaletteRedForeground1})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlFieldStatusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteGreenForeground1})`; +/** + * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintForeground instead. + */ +export const _ctrlFieldStatusWarningTintForeground = `var(${statusWarningTintForegroundRaw}, ${colorPaletteDarkOrangeForeground1})`; +/** + * This is a legacy variant for ctrlFocusOuterStroke to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlFocusOuterStroke instead. + */ +export const _ctrlFocusOuterStrokeInteractive = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorTransparentStrokeInteractive}))`; +/** + * This is a legacy variant for foregroundCtrlActiveBrandRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlActiveBrandRest instead. + */ +export const _ctrlInfoLabelForegroundColorSelected = `var(${foregroundCtrlActiveBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorNeutralForeground2BrandSelected}))`; +/** + * This is a legacy variant for ctrlInputBackgroundRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlInputBackgroundRest instead. + */ +export const _ctrlInputBackgroundRestDarker = `var(${ctrlInputBackgroundRestRaw}, var(${backgroundCtrlNeutralRestRaw}, ${colorNeutralBackground3}))`; +/** + * This is a legacy variant for ctrlInputBackgroundRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlInputBackgroundRest instead. + */ +export const _ctrlInputBackgroundRestLighter = `var(${ctrlInputBackgroundRestRaw}, var(${backgroundCtrlNeutralRestRaw}, ${colorNeutralBackground1}))`; +/** + * This is a legacy variant for ctrlInputBottomLineStrokePressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlInputBottomLineStrokePressed instead. + */ +export const _ctrlInputBottomLineStrokeBrandPressed = `var(${ctrlInputBottomLineStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorCompoundBrandStrokePressed}))`; +/** + * This is a legacy variant for foregroundCtrlNeutralSecondaryRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlNeutralSecondaryRest instead. + */ +export const _ctrlInputNeutralForegroundPlaceholder = `var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground4})`; +/** + * This is a legacy variant for backgroundCtrlSubtleHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlSubtleHover instead. + */ +export const _ctrlListBackgroundColorHover = `var(${backgroundCtrlSubtleHoverRaw}, ${colorTransparentBackground})`; +/** + * This is a legacy variant for backgroundCtrlSubtlePressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlSubtlePressed instead. + */ +export const _ctrlListBackgroundColorPressed = `var(${backgroundCtrlSubtlePressedRaw}, ${colorTransparentBackground})`; +/** + * This is a legacy variant for backgroundCtrlSubtleRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlSubtleRest instead. + */ +export const _ctrlListBackgroundColorRest = `var(${backgroundCtrlSubtleRestRaw}, var(${nullColorRaw}, ${colorTransparentBackground}))`; +/** + * This is a legacy variant for foregroundCtrlOnSubtleHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnSubtleHover instead. + */ +export const _ctrlListForegroundColorHover = `var(${foregroundCtrlOnSubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryHoverRaw}, ${colorNeutralForeground1}))`; +/** + * This is a legacy variant for foregroundCtrlOnSubtlePressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnSubtlePressed instead. + */ +export const _ctrlListForegroundColorPressed = `var(${foregroundCtrlOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw}, ${colorNeutralForeground1}))`; +/** + * This is a legacy variant for foregroundCtrlOnSubtleRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnSubtleRest instead. + */ +export const _ctrlListForegroundColorRest = `var(${foregroundCtrlOnSubtleRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1}))`; +/** + * This is a legacy variant for strokeWidthCtrlOutlineRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use strokeWidthCtrlOutlineRest instead. + */ +export const _ctrlListItemStroke = `var(${strokeWidthCtrlOutlineRestRaw}, var(${strokeWidthDefaultRaw}, ${colorStrokeFocus2}))`; +/** + * This is a legacy variant for foregroundCtrlNeutralSecondaryRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlNeutralSecondaryRest instead. + */ +export const _ctrlMenuGroupHeaderColor = `var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground3})`; +/** + * This is a legacy variant for textStyleDefaultRegularWeight to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use textStyleDefaultRegularWeight instead. + */ +export const _ctrlMenuGroupHeaderFontWeight = `var(${textStyleDefaultRegularWeightRaw}, ${fontWeightSemibold})`; +/** + * This is a legacy variant for sizeCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlDefault instead. + */ +export const _ctrlMenuGroupHeaderHeight = `var(${sizeCtrlDefaultRaw}, 32px)`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlHorizontalDefault instead. + */ +export const _ctrlMenuGroupHeaderPaddingHorizontal = `var(${paddingCtrlHorizontalDefaultRaw}, 8px)`; +/** + * This is a legacy variant for paddingCtrlTextSide to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextSide instead. + */ +export const _ctrlMenuItemContentPaddingX = `var(${paddingCtrlTextSideRaw}, 2px)`; +/** + * This is a legacy variant for gapInsideCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapInsideCtrlDefault instead. + */ +export const _ctrlMenuItemGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, 4px)`; +/** + * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextBottom instead. + */ +export const _ctrlMenuItemPaddingBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, ${spacingVerticalSNudge}))`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlMenuItemPaddingTop = `var(${paddingCtrlTextTopRaw}, ${spacingVerticalSNudge})`; +/** + * This is a legacy variant for ctrlListIndentLevel1 to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlListIndentLevel1 instead. + */ +export const _ctrlMenuItemPaddingX = `var(${ctrlListIndentLevel1Raw}, var(${paddingCtrlHorizontalDefaultRaw}, ${spacingVerticalSNudge}))`; +/** + * This is a legacy variant for textRampItemBodyFontSize to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use textRampItemBodyFontSize instead. + */ +export const _ctrlMenuItemSecondaryContentFontSize = `var(${textRampItemBodyFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}, ${fontSizeBase200}))`; +/** + * This is a legacy variant for foregroundCtrlNeutralSecondaryHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlNeutralSecondaryHover instead. + */ +export const _ctrlMenuItemSecondaryContentForegroundHover = `var(${foregroundCtrlNeutralSecondaryHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground3Hover}))`; +/** + * This is a legacy variant for foregroundCtrlNeutralSecondaryRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlNeutralSecondaryRest instead. + */ +export const _ctrlMenuItemSecondaryContentForegroundRest = `var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground3})`; +/** + * This is a legacy variant for sizeCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlDefault instead. + */ +export const _ctrlMenuItemSizeDefault = `var(${sizeCtrlDefaultRaw}, 32px)`; +/** + * This is a legacy variant for foregroundCtrlNeutralSecondaryHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlNeutralSecondaryHover instead. + */ +export const _ctrlMenuItemSubTextForegroundHover = `var(${foregroundCtrlNeutralSecondaryHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground3Hover}))`; +/** + * This is a legacy variant for foregroundCtrlNeutralSecondaryPressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlNeutralSecondaryPressed instead. + */ +export const _ctrlMenuItemSubTextForegroundPressed = `var(${foregroundCtrlNeutralSecondaryPressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground3Pressed}))`; +/** + * This is a legacy variant for cornerFlyoutRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use cornerFlyoutRest instead. + */ +export const _ctrlMenuPopoverCornerFlyoutRest = `var(${cornerFlyoutRestRaw}, ${borderRadiusMedium})`; +/** + * This is a legacy variant for shadowFlyout to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use shadowFlyout instead. + */ +export const _ctrlMenuPopoverShadowFlyout = `var(${shadowFlyoutRaw}, ${shadow16})`; +/** + * This is a legacy variant for strokeFlyout to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use strokeFlyout instead. + */ +export const _ctrlMenuPopoverStrokeFlyout = `var(${strokeFlyoutRaw}, var(${nullColorRaw}, ${colorTransparentStroke}))`; +/** + * This is a legacy variant for paddingContentAlignDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingContentAlignDefault instead. + */ +export const _ctrlMessageBarActionsMultilinePaddingRight = `var(${paddingContentAlignDefaultRaw}, ${spacingVerticalM})`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlMessageBarErrorIconColor = `var(${statusDangerTintForegroundRaw}, ${colorStatusDangerForeground1})`; +/** + * This is a legacy variant for gapBetweenCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapBetweenCtrlDefault instead. + */ +export const _ctrlMessageBarGapBetweenCtrl = `var(${gapBetweenCtrlDefaultRaw}, ${spacingHorizontalM})`; +/** + * This is a legacy variant for paddingContentAlignDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingContentAlignDefault instead. + */ +export const _ctrlMessageBarPaddingContentAlignDefault = `var(${paddingContentAlignDefaultRaw}, 12px)`; +/** + * This is a legacy variant for paddingContentAlignOutdentIconOnSubtle to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingContentAlignOutdentIconOnSubtle instead. + */ +export const _ctrlMessageBarPaddingVertical = `var(${paddingContentAlignOutdentIconOnSubtleRaw}, 0px)`; +/** + * This is a legacy variant for paddingContentAlignDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingContentAlignDefault instead. + */ +export const _ctrlMessageBarReflowSpacerMarginBottom = `var(${paddingContentAlignDefaultRaw}, ${spacingVerticalS})`; +/** + * This is a legacy variant for paddingContentAlignDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingContentAlignDefault instead. + */ +export const _ctrlMessageBarSpacingTop = `var(${paddingContentAlignDefaultRaw}, ${spacingVerticalMNudge})`; +/** + * This is a legacy variant for textRampItemHeaderLineHeight to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use textRampItemHeaderLineHeight instead. + */ +export const _ctrlMessageBarTitleLineHeight = `var(${textRampItemHeaderLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}, ${lineHeightBase300}))`; +/** + * This is a legacy variant for foregroundCtrlOnSubtlePressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnSubtlePressed instead. + */ +export const _ctrlPersonaTreeIconOnSubtlePressed = `var(${foregroundCtrlOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw}, ${colorNeutralForeground3Pressed}))`; +/** + * This is a legacy variant for paddingContentLarge to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingContentLarge instead. + */ +export const _ctrlPopoverPaddingContentLarge = `var(${paddingContentLargeRaw}, 20px)`; +/** + * This is a legacy variant for shadowFlyout to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use shadowFlyout instead. + */ +export const _ctrlPopoverShadowFilter = `var(${shadowFlyoutRaw}, drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey)))`; +/** + * This is a legacy variant for backgroundCtrlActiveBrandHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlActiveBrandHover instead. + */ +export const _ctrlRadioBackgroundActiveBrandHover = `var(${backgroundCtrlActiveBrandHoverRaw}, var(${backgroundCtrlBrandHoverRaw}, ${colorTransparentBackground}))`; +/** + * This is a legacy variant for backgroundCtrlActiveBrandPressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlActiveBrandPressed instead. + */ +export const _ctrlRadioBackgroundActiveBrandPressed = `var(${backgroundCtrlActiveBrandPressedRaw}, var(${backgroundCtrlBrandPressedRaw}, ${colorTransparentBackground}))`; +/** + * This is a legacy variant for backgroundCtrlActiveBrandRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlActiveBrandRest instead. + */ +export const _ctrlRadioBackgroundActiveBrandRest = `var(${backgroundCtrlActiveBrandRestRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorTransparentBackground}))`; +/** + * This is a legacy variant for backgroundCtrlActiveBrandDisabled to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlActiveBrandDisabled instead. + */ +export const _ctrlRadioBackgroundActiveDisabled = `var(${backgroundCtrlActiveBrandDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}, ${colorTransparentBackground}))`; +/** + * This is a legacy variant for ctrlChoiceBaseBackgroundDisabled to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlChoiceBaseBackgroundDisabled instead. + */ +export const _ctrlRadioBaseBackgroundDisabled = `var(${ctrlChoiceBaseBackgroundDisabledRaw}, var(${backgroundCtrlOutlineDisabledRaw}, ${colorTransparentBackground}))`; +/** + * This is a legacy variant for ctrlChoiceBaseBackgroundHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlChoiceBaseBackgroundHover instead. + */ +export const _ctrlRadioBaseBackgroundHover = `var(${ctrlChoiceBaseBackgroundHoverRaw}, var(${backgroundCtrlOutlineHoverRaw}, ${colorTransparentBackground}))`; +/** + * This is a legacy variant for ctrlChoiceBaseBackgroundPressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlChoiceBaseBackgroundPressed instead. + */ +export const _ctrlRadioBaseBackgroundPressed = `var(${ctrlChoiceBaseBackgroundPressedRaw}, var(${backgroundCtrlOutlinePressedRaw}, ${colorTransparentBackground}))`; +/** + * This is a legacy variant for ctrlChoiceBaseSize to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlChoiceBaseSize instead. + */ +export const _ctrlRadioChoiceBaseSize = `var(${ctrlChoiceBaseSizeRaw}, var(${sizeCtrlIconRaw}, 16px))`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlRadioForegroundContentDisabled = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForegroundDisabled}))`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlRadioForegroundContentNeutralHover = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2}))`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlRadioForegroundContentNeutralRest = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground3}))`; +/** + * This is a legacy variant for foregroundCtrlOnActiveBrandHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnActiveBrandHover instead. + */ +export const _ctrlRadioForegroundOnActiveBrandHover = `var(${foregroundCtrlOnActiveBrandHoverRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorCompoundBrandForeground1Hover}))`; +/** + * This is a legacy variant for foregroundCtrlOnActiveBrandPressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnActiveBrandPressed instead. + */ +export const _ctrlRadioForegroundOnActiveBrandPressed = `var(${foregroundCtrlOnActiveBrandPressedRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorCompoundBrandForeground1Pressed}))`; +/** + * This is a legacy variant for foregroundCtrlOnActiveBrandRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnActiveBrandRest instead. + */ +export const _ctrlRadioForegroundOnActiveBrandRest = `var(${foregroundCtrlOnActiveBrandRestRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorCompoundBrandForeground1}))`; +/** + * This is a legacy variant for foregroundCtrlOnActiveBrandDisabled to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnActiveBrandDisabled instead. + */ +export const _ctrlRadioForegroundOnActiveDisabled = `var(${foregroundCtrlOnActiveBrandDisabledRaw}, var(${foregroundCtrlOnBrandDisabledRaw}, ${colorNeutralForegroundDisabled}))`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlRadioPaddingTextTop = `var(${paddingCtrlTextTopRaw}, ${spacingVerticalXS})`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlRadioPaddingVertical = `var(${paddingCtrlTextTopRaw}, ${spacingVerticalS})`; +/** + * This is a legacy variant for strokeCtrlOnActiveBrandHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use strokeCtrlOnActiveBrandHover instead. + */ +export const _ctrlRadioStrokeOnActiveBrandHover = `var(${strokeCtrlOnActiveBrandHoverRaw}, var(${strokeCtrlOnBrandHoverRaw}, ${colorCompoundBrandStrokeHover}))`; +/** + * This is a legacy variant for strokeCtrlOnActiveBrandPressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use strokeCtrlOnActiveBrandPressed instead. + */ +export const _ctrlRadioStrokeOnActiveBrandPressed = `var(${strokeCtrlOnActiveBrandPressedRaw}, var(${strokeCtrlOnBrandPressedRaw}, ${colorCompoundBrandStrokePressed}))`; +/** + * This is a legacy variant for strokeCtrlOnActiveBrandRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use strokeCtrlOnActiveBrandRest instead. + */ +export const _ctrlRadioStrokeOnActiveBrandRest = `var(${strokeCtrlOnActiveBrandRestRaw}, var(${strokeCtrlOnBrandRestRaw}, ${colorCompoundBrandStroke}))`; +/** + * This is a legacy variant for sizeCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlDefault instead. + */ +export const _ctrlSliderBarSizeDefault = `var(${sizeCtrlDefaultRaw}, 32px)`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlHorizontalDefault instead. + */ +export const _ctrlSliderPaddingDefault = `var(${paddingCtrlHorizontalDefaultRaw}, 10px)`; +/** + * This is a legacy variant for sizeCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlDefault instead. + */ +export const _ctrlSliderSmBarSizeDefault = `var(${sizeCtrlDefaultRaw}, 24px)`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlHorizontalDefault instead. + */ +export const _ctrlSliderSmPaddingDefault = `var(${paddingCtrlHorizontalDefaultRaw}, 8px)`; +/** + * This is a legacy variant for ctrlInputBackgroundDisabled to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlInputBackgroundDisabled instead. + */ +export const _ctrlSpinButtonBackgroundDisabled = `var(${ctrlInputBackgroundDisabledRaw}, var(${backgroundCtrlNeutralDisabledRaw}, ${colorTransparentBackground}))`; +/** + * This is a legacy variant for foregroundCtrlOnSubtleHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnSubtleHover instead. + */ +export const _ctrlSpinButtonForegroundOnSubtleHover = `var(${foregroundCtrlOnSubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryHoverRaw}, ${colorNeutralForeground3Hover}))`; +/** + * This is a legacy variant for foregroundCtrlOnSubtlePressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnSubtlePressed instead. + */ +export const _ctrlSpinButtonForegroundOnSubtlePressed = `var(${foregroundCtrlOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw}, ${colorNeutralForeground3Pressed}))`; +/** + * This is a legacy variant for foregroundCtrlNeutralSecondaryRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlNeutralSecondaryRest instead. + */ +export const _ctrlSpinButtonNeutralSecondaryRest = `var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground4})`; +/** + * This is a legacy variant for foregroundCtrlOnSubtleRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnSubtleRest instead. + */ +export const _ctrlSpinButtonOnSubtleRest = `var(${foregroundCtrlOnSubtleRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground3}))`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlHorizontalDefault instead. + */ +export const _ctrlSpinButtonPaddingHorizontal = `var(${paddingCtrlHorizontalDefaultRaw}, ${spacingHorizontalMNudge})`; +/** + * This is a legacy variant for paddingCtrlSmHorizontalDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlSmHorizontalDefault instead. + */ +export const _ctrlSpinButtonPaddingSmHorizontal = `var(${paddingCtrlSmHorizontalDefaultRaw}, 5px)`; +/** + * This is a legacy variant for sizeCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlDefault instead. + */ +export const _ctrlSpinButtonSizeDefault = `var(${sizeCtrlDefaultRaw}, 32px)`; +/** + * This is a legacy variant for sizeCtrlIconSecondary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlIconSecondary instead. + */ +export const _ctrlSpinButtonSizeIconSecondary = `var(${sizeCtrlIconSecondaryRaw}, 16px)`; +/** + * This is a legacy variant for sizeCtrlSmDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlSmDefault instead. + */ +export const _ctrlSpinButtonSizeSmDefault = `var(${sizeCtrlSmDefaultRaw}, 24px)`; +/** + * This is a legacy variant for ctrlProgressBackgroundEmpty to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlProgressBackgroundEmpty instead. + */ +export const _ctrlSpinnerBackgroundEmpty = `var(${ctrlProgressBackgroundEmptyRaw}, ${colorBrandStroke2Contrast})`; +/** + * This is a legacy variant for ctrlProgressBackgroundFilled to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlProgressBackgroundFilled instead. + */ +export const _ctrlSpinnerBackgroundFilled = `var(${ctrlProgressBackgroundFilledRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorBrandStroke1}))`; +/** + * This is a legacy variant for textRampItemBodyFontSize to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use textRampItemBodyFontSize instead. + */ +export const _ctrlSpinnerItemBodyFontSize = `var(${textRampItemBodyFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}, ${fontSizeBase400}))`; +/** + * This is a legacy variant for textRampItemBodyLineHeight to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use textRampItemBodyLineHeight instead. + */ +export const _ctrlSpinnerItemBodyLineHeight = `var(${textRampItemBodyLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}, ${lineHeightBase400}))`; +/** + * This is a legacy variant for ctrlSpinnerStrokeWidth to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlSpinnerStrokeWidth instead. + */ +export const _ctrlSpinnerStrokeLgWidth = `var(${ctrlSpinnerStrokeWidthRaw}, var(${ctrlProgressHeightFilledRaw}, ${strokeWidthThickest}))`; +/** + * This is a legacy variant for ctrlSpinnerStrokeWidth to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlSpinnerStrokeWidth instead. + */ +export const _ctrlSpinnerStrokeSmWidth = `var(${ctrlSpinnerStrokeWidthRaw}, var(${ctrlProgressHeightFilledRaw}, ${strokeWidthThick}))`; +/** + * This is a legacy variant for textStyleDefaultRegularWeight to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use textStyleDefaultRegularWeight instead. + */ +export const _ctrlSpinnerTextStyleRegularWeight = `var(${textStyleDefaultRegularWeightRaw}, ${fontWeightSemibold})`; +/** + * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextBottom instead. + */ +export const _ctrlSwitchPaddingTextBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, ${spacingVerticalXS}))`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlSwitchPaddingTextTop = `var(${paddingCtrlTextTopRaw}, ${spacingVerticalXS})`; +/** + * This is a legacy variant for strokeCtrlOnActiveBrandHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use strokeCtrlOnActiveBrandHover instead. + */ +export const _ctrlSwitchStrokeOnActiveBrandHover = `var(${strokeCtrlOnActiveBrandHoverRaw}, var(${strokeCtrlOnBrandHoverRaw}, ${colorTransparentStrokeInteractive}))`; +/** + * This is a legacy variant for strokeCtrlOnActiveBrandRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use strokeCtrlOnActiveBrandRest instead. + */ +export const _ctrlSwitchStrokeOnActiveBrandRest = `var(${strokeCtrlOnActiveBrandRestRaw}, var(${strokeCtrlOnBrandRestRaw}, ${colorTransparentStroke}))`; +/** + * This is a legacy variant for backgroundCtrlActiveBrandDisabled to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundCtrlActiveBrandDisabled instead. + */ +export const _ctrlTabBackgroundActiveBrandDisabled = `var(${backgroundCtrlActiveBrandDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}, ${colorNeutralForegroundDisabled}))`; +/** + * This is a legacy variant for foregroundCtrlActiveBrandHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlActiveBrandHover instead. + */ +export const _ctrlTabForegroundActiveBrandHover = `var(${foregroundCtrlActiveBrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw}, ${colorNeutralForeground1Hover}))`; +/** + * This is a legacy variant for foregroundCtrlActiveBrandPressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlActiveBrandPressed instead. + */ +export const _ctrlTabForegroundActiveBrandPressed = `var(${foregroundCtrlActiveBrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw}, ${colorNeutralForeground1Pressed}))`; +/** + * This is a legacy variant for foregroundCtrlActiveBrandRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlActiveBrandRest instead. + */ +export const _ctrlTabForegroundActiveBrandRest = `var(${foregroundCtrlActiveBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorNeutralForeground1}))`; +/** + * This is a legacy variant for foregroundCtrlIconOnSubtleHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlIconOnSubtleHover instead. + */ +export const _ctrlTabForegroundOnSubtleHover = `var(${foregroundCtrlIconOnSubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2Hover}))`; +/** + * This is a legacy variant for foregroundCtrlIconOnSubtlePressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlIconOnSubtlePressed instead. + */ +export const _ctrlTabForegroundOnSubtlePressed = `var(${foregroundCtrlIconOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2Pressed}))`; +/** + * This is a legacy variant for foregroundCtrlOnTransparentHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnTransparentHover instead. + */ +export const _ctrlTabForegroundOnTransparentHover = `var(${foregroundCtrlOnTransparentHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2Hover}))`; +/** + * This is a legacy variant for foregroundCtrlOnTransparentPressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnTransparentPressed instead. + */ +export const _ctrlTabForegroundOnTransparentPressed = `var(${foregroundCtrlOnTransparentPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2Pressed}))`; +/** + * This is a legacy variant for gapInsideCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapInsideCtrlDefault instead. + */ +export const _ctrlTabGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingHorizontalSNudge})`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlHorizontalDefault instead. + */ +export const _ctrlTabPaddingHorizontalDefault = `var(${paddingCtrlHorizontalDefaultRaw}, ${spacingHorizontalMNudge})`; +/** + * This is a legacy variant for paddingCtrlTextSide to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextSide instead. + */ +export const _ctrlTabPaddingTextSide = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalXXS})`; +/** + * This is a legacy variant for sizeCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlDefault instead. + */ +export const _ctrlTabSizeDefault = `var(${sizeCtrlDefaultRaw}, 32px)`; +/** + * This is a legacy variant for gapInsideCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapInsideCtrlDefault instead. + */ +export const _ctrlTabSmGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingHorizontalXXS})`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlHorizontalDefault instead. + */ +export const _ctrlTabSmPaddingHorizontalDefault = `var(${paddingCtrlHorizontalDefaultRaw}, ${spacingHorizontalSNudge})`; +/** + * This is a legacy variant for cornerFlyoutRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use cornerFlyoutRest instead. + */ +export const _ctrlTeachingPopoverSurfaceCorner = `var(${cornerFlyoutRestRaw}, ${borderRadiusXLarge})`; +/** + * This is a legacy variant for backgroundFlyoutLumBlend to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundFlyoutLumBlend instead. + */ +export const _ctrlToastBackgroundFlyoutLumBlend = `var(${backgroundFlyoutLumBlendRaw}, ${colorNeutralBackgroundInverted})`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlToastBodyForegroundContentNeutralPrimary = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForegroundInverted2}))`; +/** + * This is a legacy variant for foregroundContentNeutralSecondary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralSecondary instead. + */ +export const _ctrlToastBodyForegroundContentNeutralSecondary = `var(${foregroundContentNeutralSecondaryRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForegroundInverted2}))`; +/** + * This is a legacy variant for ctrlFocusOuterStroke to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlFocusOuterStroke instead. + */ +export const _ctrlToastContainerCtrlFocusOuterStroke = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorStrokeFocus2}))`; +/** + * This is a legacy variant for cornerFlyoutRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use cornerFlyoutRest instead. + */ +export const _ctrlToastContainerFlyoutRest = `var(${cornerFlyoutRestRaw}, ${borderRadiusMedium})`; +/** + * This is a legacy variant for cornerFlyoutRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use cornerFlyoutRest instead. + */ +export const _ctrlToastCornerFlyoutRest = `var(${cornerFlyoutRestRaw}, ${borderRadiusMedium})`; +/** + * This is a legacy variant for gapBetweenCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapBetweenCtrlDefault instead. + */ +export const _ctrlToastFooterGapBetweenCtrlDefault = `var(${gapBetweenCtrlDefaultRaw}, 14px)`; +/** + * This is a legacy variant for paddingContentSmall to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingContentSmall instead. + */ +export const _ctrlToastFooterPaddingContentSmall = `var(${paddingContentSmallRaw}, 16px)`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlToastForegroundContentNeutralPrimary = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForegroundInverted2}))`; +/** + * This is a legacy variant for shadowFlyout to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use shadowFlyout instead. + */ +export const _ctrlToastShadowFlyout = `var(${shadowFlyoutRaw}, ${shadow8})`; +/** + * This is a legacy variant for strokeFlyout to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use strokeFlyout instead. + */ +export const _ctrlToastStrokeFlyout = `var(${strokeFlyoutRaw}, var(${nullColorRaw}, ${colorTransparentStroke}))`; +/** + * This is a legacy variant for textRampItemHeaderFontSize to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use textRampItemHeaderFontSize instead. + */ +export const _ctrlToastTextRampItemHeaderFontSize = `var(${textRampItemHeaderFontSizeRaw}, var(${textGlobalBody2FontSizeRaw}, 16px))`; +/** + * This is a legacy variant for textRampItemHeaderLineHeight to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use textRampItemHeaderLineHeight instead. + */ +export const _ctrlToastTextRampItemHeaderLineHeight = `var(${textRampItemHeaderLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}, 20px))`; +/** + * This is a legacy variant for ctrlLinkForegroundBrandRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlLinkForegroundBrandRest instead. + */ +export const _ctrlToastTitleCtrlLinkForegroundBrandRest = `var(${ctrlLinkForegroundBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForeground1}))`; +/** + * This is a legacy variant for ctrlLinkForegroundBrandRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlLinkForegroundBrandRest instead. + */ +export const _ctrlToastTitleCtrlLinkForegroundBrandRestInverted = `var(${ctrlLinkForegroundBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForegroundInverted}))`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlToastTitleForegroundContentNeutralPrimary = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForegroundInverted2}))`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlToastTitleForegroundContentNeutralPrimaryMedia = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForegroundInverted}))`; +/** + * This is a legacy variant for gapBetweenCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapBetweenCtrlDefault instead. + */ +export const _ctrlToastTitleGapBetweenCtrlDefault = `var(${gapBetweenCtrlDefaultRaw}, 12px)`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlToastTitleStatusDangerTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorStatusDangerForeground1})`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlToastTitleStatusDangerTintForegroundInverted = `var(${statusDangerTintForegroundRaw}, ${colorStatusDangerForegroundInverted})`; +/** + * This is a legacy variant for statusInformativeTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusInformativeTintForeground instead. + */ +export const _ctrlToastTitleStatusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw}, ${colorNeutralForeground3})`; +/** + * This is a legacy variant for statusInformativeTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusInformativeTintForeground instead. + */ +export const _ctrlToastTitleStatusInformativeTintForegroundInverted = `var(${statusInformativeTintForegroundRaw}, ${colorNeutralForegroundInverted2})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlToastTitleStatusSuccessTintForegroundInverted = `var(${statusSuccessTintForegroundRaw}, ${colorStatusSuccessForegroundInverted})`; +/** + * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintForeground instead. + */ +export const _ctrlToastTitleStatusWarningTintForeground = `var(${statusWarningTintForegroundRaw}, ${colorStatusWarningForeground1})`; +/** + * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintForeground instead. + */ +export const _ctrlToastTitleStatusWarningTintForegroundInverted = `var(${statusWarningTintForegroundRaw}, ${colorStatusWarningForegroundInverted})`; +/** + * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextBottom instead. + */ +export const _ctrlTooltipPaddingBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, 6px))`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlHorizontalDefault instead. + */ +export const _ctrlTooltipPaddingLeft = `var(${paddingCtrlHorizontalDefaultRaw}, 11px )`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlHorizontalDefault instead. + */ +export const _ctrlTooltipPaddingRight = `var(${paddingCtrlHorizontalDefaultRaw}, 11px)`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlTooltipPaddingTop = `var(${paddingCtrlTextTopRaw}, 4px)`; +/** + * This is a legacy variant for gapInsideCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapInsideCtrlDefault instead. + */ +export const _ctrlTreeGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingVerticalXXS})`; +/** + * This is a legacy variant for foregroundCtrlOnSubtleRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnSubtleRest instead. + */ +export const _ctrlTreeIconOnSubtle = `var(${foregroundCtrlOnSubtleRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground3}))`; +/** + * This is a legacy variant for foregroundCtrlOnSubtleHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnSubtleHover instead. + */ +export const _ctrlTreeIconOnSubtleHover = `var(${foregroundCtrlOnSubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryHoverRaw}, ${colorNeutralForeground3Hover}))`; +/** + * This is a legacy variant for foregroundCtrlOnSubtlePressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnSubtlePressed instead. + */ +export const _ctrlTreeIconOnSubtlePressed = `var(${foregroundCtrlOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw}, ${colorNeutralForeground3}))`; +/** + * This is a legacy variant for foregroundCtrlOnTransparentHover to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnTransparentHover instead. + */ +export const _ctrlTreeOnTransparentHover = `var(${foregroundCtrlOnTransparentHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2Hover}))`; +/** + * This is a legacy variant for foregroundCtrlOnTransparentPressed to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlOnTransparentPressed instead. + */ +export const _ctrlTreeOnTransparentPressed = `var(${foregroundCtrlOnTransparentPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2Pressed}))`; +/** + * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextBottom instead. + */ +export const _ctrlTreePaddingTextBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, 0px))`; +/** + * This is a legacy variant for paddingCtrlTextSide to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextSide instead. + */ +export const _ctrlTreePaddingTextLeft = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalXXS})`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlHorizontalDefault instead. + */ +export const _ctrlTreePaddingTextRight = `var(${paddingCtrlHorizontalDefaultRaw}, ${spacingHorizontalXXS})`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlTreePaddingTextTop = `var(${paddingCtrlTextTopRaw}, 0px)`; +/** + * This is a legacy variant for nullColor to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use nullColor instead. + */ +export const _nullBackgroundColorHover = `var(${nullColorRaw}, ${colorTransparentBackgroundHover})`; +/** + * This is a legacy variant for nullColor to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use nullColor instead. + */ +export const _nullBackgroundColorPressed = `var(${nullColorRaw}, ${colorTransparentBackgroundPressed})`; diff --git a/packages/semantic-tokens/src/native-esm.spec-e2e.ts b/packages/semantic-tokens/src/native-esm.spec-e2e.ts new file mode 100644 index 00000000000000..b7223455f10393 --- /dev/null +++ b/packages/semantic-tokens/src/native-esm.spec-e2e.ts @@ -0,0 +1,8 @@ +import { expect, test } from '@playwright/test'; + +// Dummy test for now to pass E2E +test.describe('Native ESM', () => { + test('Dummy test', async () => { + expect(0).toEqual(0); + }); +}); diff --git a/packages/semantic-tokens/src/nullable/tokens.ts b/packages/semantic-tokens/src/nullable/tokens.ts new file mode 100644 index 00000000000000..ee4ba36776825f --- /dev/null +++ b/packages/semantic-tokens/src/nullable/tokens.ts @@ -0,0 +1,109 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { nullColorRaw } from '../control/variables'; +import { + colorTransparentStroke, + colorNeutralBackground3, + colorNeutralStroke1, + colorNeutralStroke1Hover, + colorNeutralStroke1Pressed, + colorNeutralStrokeDisabled, + colorTransparentBackground, + colorTransparentBackgroundHover, + colorTransparentBackgroundPressed, + colorSubtleBackground, +} from '../legacy/tokens'; +import { + textStyleDefaultHeaderCaseRaw, + textStyleAiHeaderCaseRaw, + textStyleArticleHeaderCaseRaw, + textStyleCodeHeaderCaseRaw, + textStyleDataVizHeaderCaseRaw, + textStyleQuoteHeaderCaseRaw, + strokeLayerRaw, + strokeImageRaw, + strokeFlyoutRaw, + strokeCtrlOnBrandRestRaw, + strokeCtrlOnBrandHoverRaw, + strokeCtrlOnBrandPressedRaw, + strokeCtrlOnBrandDisabledRaw, + strokeCtrlOnNeutralRestRaw, + strokeCtrlOnNeutralHoverRaw, + strokeCtrlOnNeutralPressedRaw, + strokeCtrlOnNeutralDisabledRaw, + strokeCtrlOnSubtleRestRaw, + strokeCtrlOnSubtleHoverRaw, + strokeCtrlOnSubtlePressedRaw, + strokeCtrlOnSubtleDisabledRaw, + strokeCtrlOnSubtleHoverSplitRaw, + strokeCtrlDividerOnSubtleRaw, + strokeCtrlDividerOnSubtleDisabledRaw, + strokeCardSelectedRaw, + strokeCardOnPrimaryRestRaw, + strokeCardOnPrimaryHoverRaw, + strokeCardOnPrimaryPressedRaw, + strokeCardOnPrimaryDisabledRaw, + strokeCardOnSecondaryRestRaw, + strokeCardOnSecondaryHoverRaw, + strokeCardOnSecondaryPressedRaw, + strokeCardOnSecondaryDisabledRaw, + backgroundCtrlOutlineRestRaw, + backgroundCtrlOutlineHoverRaw, + backgroundCtrlOutlinePressedRaw, + backgroundCtrlOutlineDisabledRaw, + backgroundCtrlSubtleRestRaw, + backgroundCtrlSubtleDisabledRaw, + backgroundCtrlSubtleHoverSplitRaw, + foregroundCtrlHintDefaultRaw, + shadowCardRestRaw, + shadowCardHoverRaw, + shadowCardPressedRaw, + shadowCardDisabledRaw, + shadowLayerRaw, +} from './variables'; + +export const textStyleDefaultHeaderCase = `var(${textStyleDefaultHeaderCaseRaw}, unset)`; +export const textStyleAiHeaderCase = `var(${textStyleAiHeaderCaseRaw}, unset)`; +export const textStyleArticleHeaderCase = `var(${textStyleArticleHeaderCaseRaw}, unset)`; +export const textStyleCodeHeaderCase = `var(${textStyleCodeHeaderCaseRaw}, unset)`; +export const textStyleDataVizHeaderCase = `var(${textStyleDataVizHeaderCaseRaw}, unset)`; +export const textStyleQuoteHeaderCase = `var(${textStyleQuoteHeaderCaseRaw}, unset)`; +export const strokeLayer = `var(${strokeLayerRaw}, var(${nullColorRaw}, ${colorTransparentStroke}))`; +export const strokeImage = `var(${strokeImageRaw}, unset)`; +export const strokeFlyout = `var(${strokeFlyoutRaw}, var(${nullColorRaw}, ${colorNeutralBackground3}))`; +export const strokeCtrlOnBrandRest = `var(${strokeCtrlOnBrandRestRaw}, var(${nullColorRaw}, transparent))`; +export const strokeCtrlOnBrandHover = `var(${strokeCtrlOnBrandHoverRaw}, var(${nullColorRaw}, transparent))`; +export const strokeCtrlOnBrandPressed = `var(${strokeCtrlOnBrandPressedRaw}, var(${nullColorRaw}, transparent))`; +export const strokeCtrlOnBrandDisabled = `var(${strokeCtrlOnBrandDisabledRaw}, var(${nullColorRaw}, transparent))`; +export const strokeCtrlOnNeutralRest = `var(${strokeCtrlOnNeutralRestRaw}, var(${nullColorRaw}, ${colorNeutralStroke1}))`; +export const strokeCtrlOnNeutralHover = `var(${strokeCtrlOnNeutralHoverRaw}, var(${nullColorRaw}, ${colorNeutralStroke1Hover}))`; +export const strokeCtrlOnNeutralPressed = `var(${strokeCtrlOnNeutralPressedRaw}, var(${nullColorRaw}, ${colorNeutralStroke1Pressed}))`; +export const strokeCtrlOnNeutralDisabled = `var(${strokeCtrlOnNeutralDisabledRaw}, var(${nullColorRaw}, ${colorNeutralStrokeDisabled}))`; +export const strokeCtrlOnSubtleRest = `var(${strokeCtrlOnSubtleRestRaw}, var(${nullColorRaw}, transparent))`; +export const strokeCtrlOnSubtleHover = `var(${strokeCtrlOnSubtleHoverRaw}, var(${nullColorRaw}, transparent))`; +export const strokeCtrlOnSubtlePressed = `var(${strokeCtrlOnSubtlePressedRaw}, var(${nullColorRaw}, transparent))`; +export const strokeCtrlOnSubtleDisabled = `var(${strokeCtrlOnSubtleDisabledRaw}, var(${nullColorRaw}, transparent))`; +export const strokeCtrlOnSubtleHoverSplit = `var(${strokeCtrlOnSubtleHoverSplitRaw}, unset)`; +export const strokeCtrlDividerOnSubtle = `var(${strokeCtrlDividerOnSubtleRaw}, var(${nullColorRaw}, transparent))`; +export const strokeCtrlDividerOnSubtleDisabled = `var(${strokeCtrlDividerOnSubtleDisabledRaw}, unset)`; +export const strokeCardSelected = `var(${strokeCardSelectedRaw}, unset)`; +export const strokeCardOnPrimaryRest = `var(${strokeCardOnPrimaryRestRaw}, unset)`; +export const strokeCardOnPrimaryHover = `var(${strokeCardOnPrimaryHoverRaw}, unset)`; +export const strokeCardOnPrimaryPressed = `var(${strokeCardOnPrimaryPressedRaw}, unset)`; +export const strokeCardOnPrimaryDisabled = `var(${strokeCardOnPrimaryDisabledRaw}, unset)`; +export const strokeCardOnSecondaryRest = `var(${strokeCardOnSecondaryRestRaw}, unset)`; +export const strokeCardOnSecondaryHover = `var(${strokeCardOnSecondaryHoverRaw}, unset)`; +export const strokeCardOnSecondaryPressed = `var(${strokeCardOnSecondaryPressedRaw}, unset)`; +export const strokeCardOnSecondaryDisabled = `var(${strokeCardOnSecondaryDisabledRaw}, unset)`; +export const backgroundCtrlOutlineRest = `var(${backgroundCtrlOutlineRestRaw}, var(${nullColorRaw}, ${colorTransparentBackground}))`; +export const backgroundCtrlOutlineHover = `var(${backgroundCtrlOutlineHoverRaw}, var(${nullColorRaw}, ${colorTransparentBackgroundHover}))`; +export const backgroundCtrlOutlinePressed = `var(${backgroundCtrlOutlinePressedRaw}, var(${nullColorRaw}, ${colorTransparentBackgroundPressed}))`; +export const backgroundCtrlOutlineDisabled = `var(${backgroundCtrlOutlineDisabledRaw}, unset)`; +export const backgroundCtrlSubtleRest = `var(${backgroundCtrlSubtleRestRaw}, var(${nullColorRaw}, ${colorSubtleBackground}))`; +export const backgroundCtrlSubtleDisabled = `var(${backgroundCtrlSubtleDisabledRaw}, var(${nullColorRaw}, ${colorTransparentBackground}))`; +export const backgroundCtrlSubtleHoverSplit = `var(${backgroundCtrlSubtleHoverSplitRaw}, unset)`; +export const foregroundCtrlHintDefault = `var(${foregroundCtrlHintDefaultRaw}, unset)`; +export const shadowCardRest = `var(${shadowCardRestRaw}, unset)`; +export const shadowCardHover = `var(${shadowCardHoverRaw}, unset)`; +export const shadowCardPressed = `var(${shadowCardPressedRaw}, unset)`; +export const shadowCardDisabled = `var(${shadowCardDisabledRaw}, unset)`; +export const shadowLayer = `var(${shadowLayerRaw}, unset)`; diff --git a/packages/semantic-tokens/src/nullable/variables.ts b/packages/semantic-tokens/src/nullable/variables.ts new file mode 100644 index 00000000000000..62c76235c53902 --- /dev/null +++ b/packages/semantic-tokens/src/nullable/variables.ts @@ -0,0 +1,47 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const textStyleDefaultHeaderCaseRaw = '--smtc-text-style-default-header-case'; +export const textStyleAiHeaderCaseRaw = '--smtc-text-style-ai-header-case'; +export const textStyleArticleHeaderCaseRaw = '--smtc-text-style-article-header-case'; +export const textStyleCodeHeaderCaseRaw = '--smtc-text-style-code-header-case'; +export const textStyleDataVizHeaderCaseRaw = '--smtc-text-style-data-viz-header-case'; +export const textStyleQuoteHeaderCaseRaw = '--smtc-text-style-quote-header-case'; +export const strokeLayerRaw = '--smtc-stroke-layer'; +export const strokeImageRaw = '--smtc-stroke-image'; +export const strokeFlyoutRaw = '--smtc-stroke-flyout'; +export const strokeCtrlOnBrandRestRaw = '--smtc-stroke-ctrl-on-brand-rest'; +export const strokeCtrlOnBrandHoverRaw = '--smtc-stroke-ctrl-on-brand-hover'; +export const strokeCtrlOnBrandPressedRaw = '--smtc-stroke-ctrl-on-brand-pressed'; +export const strokeCtrlOnBrandDisabledRaw = '--smtc-stroke-ctrl-on-brand-disabled'; +export const strokeCtrlOnNeutralRestRaw = '--smtc-stroke-ctrl-on-neutral-rest'; +export const strokeCtrlOnNeutralHoverRaw = '--smtc-stroke-ctrl-on-neutral-hover'; +export const strokeCtrlOnNeutralPressedRaw = '--smtc-stroke-ctrl-on-neutral-pressed'; +export const strokeCtrlOnNeutralDisabledRaw = '--smtc-stroke-ctrl-on-neutral-disabled'; +export const strokeCtrlOnSubtleRestRaw = '--smtc-stroke-ctrl-on-subtle-rest'; +export const strokeCtrlOnSubtleHoverRaw = '--smtc-stroke-ctrl-on-subtle-hover'; +export const strokeCtrlOnSubtlePressedRaw = '--smtc-stroke-ctrl-on-subtle-pressed'; +export const strokeCtrlOnSubtleDisabledRaw = '--smtc-stroke-ctrl-on-subtle-disabled'; +export const strokeCtrlOnSubtleHoverSplitRaw = '--smtc-stroke-ctrl-on-subtle-hover-split'; +export const strokeCtrlDividerOnSubtleRaw = '--smtc-stroke-ctrl-divider-on-subtle'; +export const strokeCtrlDividerOnSubtleDisabledRaw = '--smtc-stroke-ctrl-divider-on-subtle-disabled'; +export const strokeCardSelectedRaw = '--smtc-stroke-card-selected'; +export const strokeCardOnPrimaryRestRaw = '--smtc-stroke-card-on-primary-rest'; +export const strokeCardOnPrimaryHoverRaw = '--smtc-stroke-card-on-primary-hover'; +export const strokeCardOnPrimaryPressedRaw = '--smtc-stroke-card-on-primary-pressed'; +export const strokeCardOnPrimaryDisabledRaw = '--smtc-stroke-card-on-primary-disabled'; +export const strokeCardOnSecondaryRestRaw = '--smtc-stroke-card-on-secondary-rest'; +export const strokeCardOnSecondaryHoverRaw = '--smtc-stroke-card-on-secondary-hover'; +export const strokeCardOnSecondaryPressedRaw = '--smtc-stroke-card-on-secondary-pressed'; +export const strokeCardOnSecondaryDisabledRaw = '--smtc-stroke-card-on-secondary-disabled'; +export const backgroundCtrlOutlineRestRaw = '--smtc-background-ctrl-outline-rest'; +export const backgroundCtrlOutlineHoverRaw = '--smtc-background-ctrl-outline-hover'; +export const backgroundCtrlOutlinePressedRaw = '--smtc-background-ctrl-outline-pressed'; +export const backgroundCtrlOutlineDisabledRaw = '--smtc-background-ctrl-outline-disabled'; +export const backgroundCtrlSubtleRestRaw = '--smtc-background-ctrl-subtle-rest'; +export const backgroundCtrlSubtleDisabledRaw = '--smtc-background-ctrl-subtle-disabled'; +export const backgroundCtrlSubtleHoverSplitRaw = '--smtc-background-ctrl-subtle-hover-split'; +export const foregroundCtrlHintDefaultRaw = '--smtc-foreground-ctrl-hint-default'; +export const shadowCardRestRaw = '--smtc-shadow-card-rest'; +export const shadowCardHoverRaw = '--smtc-shadow-card-hover'; +export const shadowCardPressedRaw = '--smtc-shadow-card-pressed'; +export const shadowCardDisabledRaw = '--smtc-shadow-card-disabled'; +export const shadowLayerRaw = '--smtc-shadow-layer'; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts new file mode 100644 index 00000000000000..33bf954821c14b --- /dev/null +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -0,0 +1,654 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + textStyleDefaultRegularFontFamilyRaw, + textStyleDefaultRegularLetterSpacingRaw, + textStyleDefaultRegularWeightRaw, + textStyleDefaultHeaderWeightRaw, + textGlobalTitle2FontSizeRaw, + textGlobalTitle2LineHeightRaw, + textGlobalSubtitle1FontSizeRaw, + textGlobalSubtitle1LineHeightRaw, + textGlobalSubtitle2FontSizeRaw, + textGlobalSubtitle2LineHeightRaw, + textGlobalBody2FontSizeRaw, + textGlobalBody2LineHeightRaw, + textGlobalBody3FontSizeRaw, + textGlobalBody3LineHeightRaw, + textGlobalCaption1FontSizeRaw, + textGlobalCaption1LineHeightRaw, + textGlobalCaption2FontSizeRaw, + textGlobalCaption2LineHeightRaw, + textGlobalBody1FontSizeRaw, + textGlobalBody1LineHeightRaw, + textGlobalTitle1FontSizeRaw, + textGlobalTitle1LineHeightRaw, + textCtrlWeightSelectedRaw, + paddingContentXSmallRaw, + paddingContentXxSmallRaw, + paddingContentAlignOutdentTextOnSubtleRaw, + paddingContentAlignDefaultRaw, + paddingCtrlTextTopRaw, + paddingCtrlSmTextTopRaw, + paddingCtrlLgTextTopRaw, + paddingCtrlToNestedControlRaw, + gapBetweenContentXxSmallRaw, + paddingCtrlLgToNestedControlRaw, + gapBetweenContentXSmallRaw, + paddingCtrlSmToNestedControlRaw, + gapBetweenContentMediumRaw, + strokeWidthDefaultRaw, + backgroundCardOnPrimaryDefaultRestRaw, + strokeCtrlOnOutlineRestRaw, + strokeCtrlOnOutlineHoverRaw, + strokeCtrlOnOutlinePressedRaw, + strokeCtrlOnOutlineDisabledRaw, + strokeCtrlDividerOnBrandRaw, + strokeCtrlDividerOnNeutralRaw, + strokeCtrlDividerOnOutlineRaw, + strokeDividerDefaultRaw, + backgroundCtrlBrandRestRaw, + strokeWindowActiveRaw, + backgroundLayerPrimarySolidRaw, + backgroundCtrlBrandHoverRaw, + backgroundCtrlBrandPressedRaw, + backgroundCtrlBrandDisabledRaw, + foregroundCtrlNeutralSecondaryRestRaw, + foregroundCtrlNeutralSecondaryDisabledRaw, + cornerFlyoutRestRaw, + cornerZeroRaw, + cornerCardRestRaw, + cornerCtrlRestRaw, + cornerCtrlSmRestRaw, + cornerCtrlLgRestRaw, + foregroundCtrlNeutralPrimaryRestRaw, + foregroundCtrlBrandRestRaw, + foregroundCtrlNeutralPrimaryDisabledRaw, + foregroundCtrlOnBrandRestRaw, + foregroundCtrlBrandHoverRaw, + foregroundCtrlBrandPressedRaw, + foregroundCtrlBrandDisabledRaw, + foregroundCtrlOnBrandDisabledRaw, + iconThemeCtrlDefaultRestRaw, + iconThemeCtrlDefaultSelectedRaw, + statusDangerBackgroundRaw, + statusWarningBackgroundRaw, + statusSuccessBackgroundRaw, + statusImportantBackgroundRaw, + statusInformativeBackgroundRaw, + statusNeutralBackgroundRaw, + backgroundCardOnSecondaryDefaultRestRaw, + shadowFlyoutRaw, + shadowWindowActiveRaw, +} from '../control/variables'; +import { + fontFamilyBase, + fontSizeBase500, + lineHeightBase500, + fontSizeBase300, + lineHeightBase300, + lineHeightBase400, + fontSizeBase200, + lineHeightBase200, + fontSizeBase100, + lineHeightBase100, + fontSizeBase400, + fontWeightSemibold, + spacingHorizontalXS, + spacingVerticalXXS, + strokeWidthThin, + strokeWidthThicker, + colorNeutralForegroundOnBrand, + colorStrokeFocus2, + colorTransparentStrokeInteractive, + colorTransparentStrokeDisabled, + colorNeutralStroke3, + colorNeutralStroke1, + colorBrandStroke1, + colorCompoundBrandBackground, + colorCompoundBrandBackgroundHover, + colorCompoundBrandBackgroundPressed, + colorNeutralBackgroundDisabled, + colorNeutralStrokeAccessible, + colorNeutralStrokeAccessibleHover, + colorNeutralStrokeAccessiblePressed, + colorNeutralForegroundDisabled, + borderRadiusMedium, + colorNeutralForeground1, + colorNeutralForeground2, + colorBrandForeground1, + colorNeutralForeground1Hover, + colorNeutralForeground1Pressed, + colorNeutralForeground2Hover, + colorNeutralForeground2Pressed, + colorNeutralForeground3, + colorNeutralForeground2BrandHover, + colorNeutralForeground2BrandPressed, + colorCompoundBrandForeground1, + colorCompoundBrandForeground1Hover, + colorCompoundBrandForeground1Pressed, + colorNeutralForegroundInverted, + colorNeutralForegroundInvertedHover, + colorNeutralForegroundInvertedPressed, + colorNeutralBackground1, + colorBrandBackground, + colorPaletteRedBorder2, + colorNeutralForeground1Static, + colorPaletteGreenBorder2, + colorNeutralStroke2, +} from '../legacy/tokens'; +import { + strokeCardOnPrimaryRestRaw, + strokeCtrlOnBrandRestRaw, + strokeCtrlOnBrandHoverRaw, + strokeCtrlOnBrandPressedRaw, + strokeCtrlOnBrandDisabledRaw, + strokeCtrlOnNeutralRestRaw, + strokeCtrlOnNeutralPressedRaw, + strokeCtrlOnNeutralHoverRaw, + strokeCtrlOnNeutralDisabledRaw, +} from '../nullable/variables'; +import { + textStyleDefaultHeaderFontFamilyRaw, + textStyleDefaultHeaderLetterSpacingRaw, + textStyleAiRegularFontFamilyRaw, + textStyleAiRegularWeightRaw, + textStyleAiRegularLetterSpacingRaw, + textStyleAiHeaderFontFamilyRaw, + textStyleAiHeaderWeightRaw, + textStyleAiHeaderLetterSpacingRaw, + textStyleArticleRegularFontFamilyRaw, + textStyleArticleRegularWeightRaw, + textStyleArticleRegularLetterSpacingRaw, + textStyleArticleHeaderFontFamilyRaw, + textStyleArticleHeaderWeightRaw, + textStyleArticleHeaderLetterSpacingRaw, + textStyleCodeRegularFontFamilyRaw, + textStyleCodeRegularWeightRaw, + textStyleCodeRegularLetterSpacingRaw, + textStyleCodeHeaderFontFamilyRaw, + textStyleCodeHeaderWeightRaw, + textStyleCodeHeaderLetterSpacingRaw, + textStyleDataVizRegularFontFamilyRaw, + textStyleDataVizRegularWeightRaw, + textStyleDataVizRegularLetterSpacingRaw, + textStyleDataVizHeaderFontFamilyRaw, + textStyleDataVizHeaderWeightRaw, + textStyleDataVizHeaderLetterSpacingRaw, + textStyleQuoteRegularFontFamilyRaw, + textStyleQuoteRegularWeightRaw, + textStyleQuoteRegularLetterSpacingRaw, + textStyleQuoteHeaderFontFamilyRaw, + textStyleQuoteHeaderWeightRaw, + textStyleQuoteHeaderLetterSpacingRaw, + textRampPageHeaderFontSizeRaw, + textRampPageHeaderLineHeightRaw, + textRampSectionHeaderFontSizeRaw, + textRampSectionHeaderLineHeightRaw, + textRampSubsectionHeaderFontSizeRaw, + textRampSubsectionHeaderLineHeightRaw, + textRampReadingBodyFontSizeRaw, + textRampReadingBodyLineHeightRaw, + textRampItemHeaderFontSizeRaw, + textRampItemHeaderLineHeightRaw, + textRampItemBodyFontSizeRaw, + textRampItemBodyLineHeightRaw, + textRampMetadataFontSizeRaw, + textRampMetadataLineHeightRaw, + textRampLegalFontSizeRaw, + textRampLegalLineHeightRaw, + textRampSmPageHeaderFontSizeRaw, + textRampSmPageHeaderLineHeightRaw, + textRampSmSectionHeaderFontSizeRaw, + textRampSmSectionHeaderLineHeightRaw, + textRampSmSubsectionHeaderFontSizeRaw, + textRampSmSubsectionHeaderLineHeightRaw, + textRampSmReadingBodyFontSizeRaw, + textRampSmReadingBodyLineHeightRaw, + textRampSmItemHeaderFontSizeRaw, + textRampSmItemHeaderLineHeightRaw, + textRampSmItemBodyFontSizeRaw, + textRampSmItemBodyLineHeightRaw, + textRampSmMetadataFontSizeRaw, + textRampSmMetadataLineHeightRaw, + textRampSmLegalFontSizeRaw, + textRampSmLegalLineHeightRaw, + textRampLgPageHeaderFontSizeRaw, + textRampLgPageHeaderLineHeightRaw, + textRampLgSectionHeaderFontSizeRaw, + textRampLgSectionHeaderLineHeightRaw, + textRampLgSubsectionHeaderFontSizeRaw, + textRampLgSubsectionHeaderLineHeightRaw, + textRampLgReadingBodyFontSizeRaw, + textRampLgReadingBodyLineHeightRaw, + textRampLgItemHeaderFontSizeRaw, + textRampLgItemHeaderLineHeightRaw, + textRampLgItemBodyFontSizeRaw, + textRampLgItemBodyLineHeightRaw, + textRampLgMetadataFontSizeRaw, + textRampLgMetadataLineHeightRaw, + textRampLgLegalFontSizeRaw, + textRampLgLegalLineHeightRaw, + textCtrlWeightDefaultRaw, + textCtrlButtonWeightDefaultRaw, + textCtrlButtonWeightSelectedRaw, + paddingToolbarInsideRaw, + paddingToolbarOutsideRaw, + paddingFlyoutDefaultRaw, + paddingCardNestedImageRaw, + paddingCtrlTextBottomRaw, + paddingCtrlSmTextBottomRaw, + paddingCtrlLgTextBottomRaw, + gapBetweenCtrlNestedRaw, + gapBetweenTextSmallRaw, + gapBetweenCtrlLgNestedRaw, + gapBetweenTextLargeRaw, + gapBetweenCtrlSmNestedRaw, + gapBetweenListItemRaw, + gapBetweenCardRaw, + strokeWidthDividerDefaultRaw, + strokeWidthDividerStrongRaw, + strokeWidthCtrlOutlineRestRaw, + strokeWidthCtrlOutlineHoverRaw, + strokeWidthCtrlOutlinePressedRaw, + strokeWidthCtrlOutlineSelectedRaw, + strokeWidthWindowDefaultRaw, + backgroundToolbarRaw, + strokeToolbarRaw, + strokeCtrlOnBrandRestStop2Raw, + strokeCtrlOnBrandHoverStop2Raw, + strokeCtrlOnBrandPressedStop2Raw, + strokeCtrlOnBrandDisabledStop2Raw, + strokeCtrlOnNeutralRestStop2Raw, + strokeCtrlOnNeutralHoverStop2Raw, + strokeCtrlOnNeutralPressedStop2Raw, + strokeCtrlOnNeutralDisabledStop2Raw, + strokeCtrlOnOutlineRestStop2Raw, + strokeCtrlOnOutlineHoverStop2Raw, + strokeCtrlOnOutlinePressedStop2Raw, + strokeCtrlOnOutlineDisabledStop2Raw, + strokeCtrlOnActiveBrandRestRaw, + strokeCtrlDividerOnBrandDisabledRaw, + strokeCtrlDividerOnActiveBrandRaw, + strokeCtrlDividerOnActiveBrandDisabledRaw, + strokeCtrlDividerOnNeutralDisabledRaw, + strokeCtrlDividerOnOutlineDisabledRaw, + strokeCtrlOnActiveBrandHoverRaw, + strokeCtrlOnActiveBrandPressedRaw, + strokeCtrlOnActiveBrandDisabledRaw, + strokeCtrlOnActiveBrandRestStop2Raw, + strokeCtrlOnActiveBrandHoverStop2Raw, + strokeCtrlOnActiveBrandPressedStop2Raw, + strokeCtrlOnActiveBrandDisabledStop2Raw, + strokeDividerSubtleRaw, + strokeDividerStrongRaw, + strokeDividerBrandRaw, + strokeWindowInactiveRaw, + backgroundLayerPrimaryStop1Raw, + backgroundLayerPrimaryStop2Raw, + backgroundLayerPrimaryStop3Raw, + backgroundLayerSecondaryRaw, + backgroundLayerTertiaryRaw, + backgroundCardOnPrimaryDefaultSelectedRaw, + backgroundCtrlActiveBrandRestRaw, + backgroundCtrlActiveBrandHoverRaw, + backgroundCtrlActiveBrandPressedRaw, + backgroundCtrlActiveBrandDisabledRaw, + backgroundCtrlShapeSafeActiveBrandRestRaw, + backgroundCtrlShapeSafeActiveBrandDisabledRaw, + backgroundCtrlShapeSafeNeutralRestRaw, + backgroundCtrlShapeSafeNeutralHoverRaw, + backgroundCtrlShapeSafeNeutralPressedRaw, + backgroundCtrlShapeSafeNeutralDisabledRaw, + cornerFlyoutHoverRaw, + cornerFlyoutPressedRaw, + cornerLayerIntersectionRaw, + cornerCardHoverRaw, + cornerCardPressedRaw, + cornerToolbarDefaultRaw, + cornerImageOnPageRaw, + cornerCtrlHoverRaw, + cornerCtrlPressedRaw, + cornerCtrlSmHoverRaw, + cornerCtrlSmPressedRaw, + cornerCtrlLgHoverRaw, + cornerCtrlLgPressedRaw, + foregroundContentNeutralPrimaryRaw, + foregroundContentNeutralSecondaryRaw, + foregroundContentBrandPrimaryRaw, + foregroundCtrlNeutralPrimaryHoverRaw, + foregroundCtrlNeutralPrimaryPressedRaw, + foregroundCtrlNeutralSecondaryHoverRaw, + foregroundCtrlNeutralSecondaryPressedRaw, + foregroundCtrlIconOnNeutralRestRaw, + foregroundCtrlIconOnNeutralHoverRaw, + foregroundCtrlIconOnNeutralPressedRaw, + foregroundCtrlIconOnNeutralDisabledRaw, + foregroundCtrlIconOnOutlineRestRaw, + foregroundCtrlIconOnOutlineHoverRaw, + foregroundCtrlIconOnOutlinePressedRaw, + foregroundCtrlIconOnOutlineDisabledRaw, + foregroundCtrlIconOnSubtleRestRaw, + foregroundCtrlIconOnSubtleHoverRaw, + foregroundCtrlIconOnSubtlePressedRaw, + foregroundCtrlIconOnSubtleDisabledRaw, + foregroundCtrlOnBrandHoverRaw, + foregroundCtrlOnBrandPressedRaw, + foregroundCtrlActiveBrandRestRaw, + foregroundCtrlActiveBrandHoverRaw, + foregroundCtrlActiveBrandPressedRaw, + foregroundCtrlActiveBrandDisabledRaw, + foregroundCtrlOnActiveBrandRestRaw, + foregroundCtrlOnActiveBrandHoverRaw, + foregroundCtrlOnActiveBrandPressedRaw, + foregroundCtrlOnActiveBrandDisabledRaw, + foregroundCtrlOnOutlineRestRaw, + foregroundCtrlOnOutlineHoverRaw, + foregroundCtrlOnOutlinePressedRaw, + foregroundCtrlOnOutlineDisabledRaw, + foregroundCtrlOnSubtleRestRaw, + foregroundCtrlOnSubtleHoverRaw, + foregroundCtrlOnSubtlePressedRaw, + foregroundCtrlOnSubtleDisabledRaw, + foregroundCtrlOnTransparentRestRaw, + foregroundCtrlOnTransparentHoverRaw, + foregroundCtrlOnTransparentPressedRaw, + foregroundCtrlOnTransparentDisabledRaw, + materialAcrylicDefaultSolidRaw, + materialAcrylicDefaultColorBlendRaw, + materialAcrylicDefaultLumBlendRaw, + materialMicaDefaultSolidRaw, + materialMicaDefaultColorBlendRaw, + materialMicaDefaultLumBlendRaw, + materialMicaDarkerSolidRaw, + materialMicaDarkerColorBlendRaw, + materialMicaDarkerLumBlendRaw, + materialMicaThinSolidRaw, + materialMicaThinColorBlendRaw, + materialMicaThinLumBlendRaw, + iconThemeCtrlDefaultHoverRaw, + iconThemeCtrlDefaultPressedRaw, + iconThemeCtrlSubtleRestRaw, + iconThemeCtrlSubtleHoverRaw, + iconThemeCtrlSubtlePressedRaw, + iconThemeCtrlSubtleSelectedRaw, + iconThemeCtrlChevronDefaultRaw, + iconThemeCtrlChevronSelectedRaw, + statusBrandBackgroundRaw, + statusBrandStrokeRaw, + statusBrandForegroundRaw, + statusBrandTintForegroundRaw, + statusDangerStrokeRaw, + statusDangerForegroundRaw, + statusWarningStrokeRaw, + statusWarningForegroundRaw, + statusSuccessStrokeRaw, + statusSuccessForegroundRaw, + statusImportantStrokeRaw, + statusImportantForegroundRaw, + statusInformativeStrokeRaw, + statusInformativeForegroundRaw, + statusNeutralStrokeRaw, + statusNeutralForegroundRaw, + statusNeutralTintForegroundRaw, + cornerFlyoutShellRestRaw, + materialAcrylicShellDefaultSolidRaw, + materialAcrylicShellDefaultColorBlendRaw, + materialAcrylicShellDefaultLumBlendRaw, + backgroundCardOnSecondaryDefaultSelectedRaw, + textStyleDefaultDisplayFontFamilyRaw, + textStyleDefaultDisplayLetterSpacingRaw, + shadowCtrlOnDragRaw, + shadowWindowInactiveRaw, +} from './variables'; + +export const textStyleDefaultHeaderFontFamily = `var(${textStyleDefaultHeaderFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}, ${fontFamilyBase}))`; +export const textStyleDefaultHeaderLetterSpacing = `var(${textStyleDefaultHeaderLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; +export const textStyleAiRegularFontFamily = `var(${textStyleAiRegularFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +export const textStyleAiRegularWeight = `var(${textStyleAiRegularWeightRaw}, var(${textStyleDefaultRegularWeightRaw}))`; +export const textStyleAiRegularLetterSpacing = `var(${textStyleAiRegularLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; +export const textStyleAiHeaderFontFamily = `var(${textStyleAiHeaderFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +export const textStyleAiHeaderWeight = `var(${textStyleAiHeaderWeightRaw}, var(${textStyleDefaultHeaderWeightRaw}))`; +export const textStyleAiHeaderLetterSpacing = `var(${textStyleAiHeaderLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; +export const textStyleArticleRegularFontFamily = `var(${textStyleArticleRegularFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +export const textStyleArticleRegularWeight = `var(${textStyleArticleRegularWeightRaw}, var(${textStyleDefaultRegularWeightRaw}))`; +export const textStyleArticleRegularLetterSpacing = `var(${textStyleArticleRegularLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; +export const textStyleArticleHeaderFontFamily = `var(${textStyleArticleHeaderFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +export const textStyleArticleHeaderWeight = `var(${textStyleArticleHeaderWeightRaw}, var(${textStyleDefaultHeaderWeightRaw}))`; +export const textStyleArticleHeaderLetterSpacing = `var(${textStyleArticleHeaderLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; +export const textStyleCodeRegularFontFamily = `var(${textStyleCodeRegularFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +export const textStyleCodeRegularWeight = `var(${textStyleCodeRegularWeightRaw}, var(${textStyleDefaultRegularWeightRaw}))`; +export const textStyleCodeRegularLetterSpacing = `var(${textStyleCodeRegularLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; +export const textStyleCodeHeaderFontFamily = `var(${textStyleCodeHeaderFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +export const textStyleCodeHeaderWeight = `var(${textStyleCodeHeaderWeightRaw}, var(${textStyleDefaultHeaderWeightRaw}))`; +export const textStyleCodeHeaderLetterSpacing = `var(${textStyleCodeHeaderLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; +export const textStyleDataVizRegularFontFamily = `var(${textStyleDataVizRegularFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +export const textStyleDataVizRegularWeight = `var(${textStyleDataVizRegularWeightRaw}, var(${textStyleDefaultRegularWeightRaw}))`; +export const textStyleDataVizRegularLetterSpacing = `var(${textStyleDataVizRegularLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; +export const textStyleDataVizHeaderFontFamily = `var(${textStyleDataVizHeaderFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +export const textStyleDataVizHeaderWeight = `var(${textStyleDataVizHeaderWeightRaw}, var(${textStyleDefaultHeaderWeightRaw}))`; +export const textStyleDataVizHeaderLetterSpacing = `var(${textStyleDataVizHeaderLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; +export const textStyleQuoteRegularFontFamily = `var(${textStyleQuoteRegularFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +export const textStyleQuoteRegularWeight = `var(${textStyleQuoteRegularWeightRaw}, var(${textStyleDefaultRegularWeightRaw}))`; +export const textStyleQuoteRegularLetterSpacing = `var(${textStyleQuoteRegularLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; +export const textStyleQuoteHeaderFontFamily = `var(${textStyleQuoteHeaderFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +export const textStyleQuoteHeaderWeight = `var(${textStyleQuoteHeaderWeightRaw}, var(${textStyleDefaultHeaderWeightRaw}))`; +export const textStyleQuoteHeaderLetterSpacing = `var(${textStyleQuoteHeaderLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; +export const textRampPageHeaderFontSize = `var(${textRampPageHeaderFontSizeRaw}, var(${textGlobalTitle2FontSizeRaw}))`; +export const textRampPageHeaderLineHeight = `var(${textRampPageHeaderLineHeightRaw}, var(${textGlobalTitle2LineHeightRaw}))`; +export const textRampSectionHeaderFontSize = `var(${textRampSectionHeaderFontSizeRaw}, var(${textGlobalSubtitle1FontSizeRaw}, ${fontSizeBase500}))`; +export const textRampSectionHeaderLineHeight = `var(${textRampSectionHeaderLineHeightRaw}, var(${textGlobalSubtitle1LineHeightRaw}, ${lineHeightBase500}))`; +export const textRampSubsectionHeaderFontSize = `var(${textRampSubsectionHeaderFontSizeRaw}, var(${textGlobalSubtitle2FontSizeRaw}))`; +export const textRampSubsectionHeaderLineHeight = `var(${textRampSubsectionHeaderLineHeightRaw}, var(${textGlobalSubtitle2LineHeightRaw}))`; +export const textRampReadingBodyFontSize = `var(${textRampReadingBodyFontSizeRaw}, var(${textGlobalBody2FontSizeRaw}, ${fontSizeBase300}))`; +export const textRampReadingBodyLineHeight = `var(${textRampReadingBodyLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}, ${lineHeightBase300}))`; +export const textRampItemHeaderFontSize = `var(${textRampItemHeaderFontSizeRaw}, var(${textGlobalBody2FontSizeRaw}, ${fontSizeBase300}))`; +export const textRampItemHeaderLineHeight = `var(${textRampItemHeaderLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}, ${lineHeightBase400}))`; +export const textRampItemBodyFontSize = `var(${textRampItemBodyFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}, ${fontSizeBase300}))`; +export const textRampItemBodyLineHeight = `var(${textRampItemBodyLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}, ${lineHeightBase300}))`; +export const textRampMetadataFontSize = `var(${textRampMetadataFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}, ${fontSizeBase200}))`; +export const textRampMetadataLineHeight = `var(${textRampMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}, ${lineHeightBase200}))`; +export const textRampLegalFontSize = `var(${textRampLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}, ${fontSizeBase200}))`; +export const textRampLegalLineHeight = `var(${textRampLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}, ${lineHeightBase200}))`; +export const textRampSmPageHeaderFontSize = `var(${textRampSmPageHeaderFontSizeRaw}, var(${textGlobalSubtitle1FontSizeRaw}))`; +export const textRampSmPageHeaderLineHeight = `var(${textRampSmPageHeaderLineHeightRaw}, var(${textGlobalSubtitle1LineHeightRaw}))`; +export const textRampSmSectionHeaderFontSize = `var(${textRampSmSectionHeaderFontSizeRaw}, var(${textGlobalSubtitle2FontSizeRaw}))`; +export const textRampSmSectionHeaderLineHeight = `var(${textRampSmSectionHeaderLineHeightRaw}, var(${textGlobalSubtitle2LineHeightRaw}))`; +export const textRampSmSubsectionHeaderFontSize = `var(${textRampSmSubsectionHeaderFontSizeRaw}, var(${textGlobalBody1FontSizeRaw}))`; +export const textRampSmSubsectionHeaderLineHeight = `var(${textRampSmSubsectionHeaderLineHeightRaw}, var(${textGlobalBody1LineHeightRaw}))`; +export const textRampSmReadingBodyFontSize = `var(${textRampSmReadingBodyFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}))`; +export const textRampSmReadingBodyLineHeight = `var(${textRampSmReadingBodyLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}))`; +export const textRampSmItemHeaderFontSize = `var(${textRampSmItemHeaderFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}))`; +export const textRampSmItemHeaderLineHeight = `var(${textRampSmItemHeaderLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}))`; +export const textRampSmItemBodyFontSize = `var(${textRampSmItemBodyFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}, ${fontSizeBase200}))`; +export const textRampSmItemBodyLineHeight = `var(${textRampSmItemBodyLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}, ${lineHeightBase200}))`; +export const textRampSmMetadataFontSize = `var(${textRampSmMetadataFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}))`; +export const textRampSmMetadataLineHeight = `var(${textRampSmMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; +export const textRampSmLegalFontSize = `var(${textRampSmLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}, ${fontSizeBase100}))`; +export const textRampSmLegalLineHeight = `var(${textRampSmLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}, ${lineHeightBase100}))`; +export const textRampLgPageHeaderFontSize = `var(${textRampLgPageHeaderFontSizeRaw}, var(${textGlobalTitle1FontSizeRaw}))`; +export const textRampLgPageHeaderLineHeight = `var(${textRampLgPageHeaderLineHeightRaw}, var(${textGlobalTitle1LineHeightRaw}))`; +export const textRampLgSectionHeaderFontSize = `var(${textRampLgSectionHeaderFontSizeRaw}, var(${textGlobalTitle2FontSizeRaw}))`; +export const textRampLgSectionHeaderLineHeight = `var(${textRampLgSectionHeaderLineHeightRaw}, var(${textGlobalTitle2LineHeightRaw}))`; +export const textRampLgSubsectionHeaderFontSize = `var(${textRampLgSubsectionHeaderFontSizeRaw}, var(${textGlobalSubtitle1FontSizeRaw}))`; +export const textRampLgSubsectionHeaderLineHeight = `var(${textRampLgSubsectionHeaderLineHeightRaw}, var(${textGlobalSubtitle1LineHeightRaw}))`; +export const textRampLgReadingBodyFontSize = `var(${textRampLgReadingBodyFontSizeRaw}, var(${textGlobalBody1FontSizeRaw}))`; +export const textRampLgReadingBodyLineHeight = `var(${textRampLgReadingBodyLineHeightRaw}, var(${textGlobalBody1LineHeightRaw}))`; +export const textRampLgItemHeaderFontSize = `var(${textRampLgItemHeaderFontSizeRaw}, var(${textGlobalSubtitle2FontSizeRaw}))`; +export const textRampLgItemHeaderLineHeight = `var(${textRampLgItemHeaderLineHeightRaw}, var(${textGlobalSubtitle2LineHeightRaw}))`; +export const textRampLgItemBodyFontSize = `var(${textRampLgItemBodyFontSizeRaw}, var(${textGlobalBody2FontSizeRaw}, ${fontSizeBase400}))`; +export const textRampLgItemBodyLineHeight = `var(${textRampLgItemBodyLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}, ${lineHeightBase400}))`; +export const textRampLgMetadataFontSize = `var(${textRampLgMetadataFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}))`; +export const textRampLgMetadataLineHeight = `var(${textRampLgMetadataLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}))`; +export const textRampLgLegalFontSize = `var(${textRampLgLegalFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}, ${fontSizeBase200}))`; +export const textRampLgLegalLineHeight = `var(${textRampLgLegalLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}, ${lineHeightBase200}))`; +export const textCtrlWeightDefault = `var(${textCtrlWeightDefaultRaw}, var(${textStyleDefaultRegularWeightRaw}))`; +export const textCtrlButtonWeightDefault = `var(${textCtrlButtonWeightDefaultRaw}, var(${textStyleDefaultRegularWeightRaw}, ${fontWeightSemibold}))`; +export const textCtrlButtonWeightSelected = `var(${textCtrlButtonWeightSelectedRaw}, var(${textCtrlWeightSelectedRaw}))`; +export const paddingToolbarInside = `var(${paddingToolbarInsideRaw}, var(${paddingContentXSmallRaw}))`; +export const paddingToolbarOutside = `var(${paddingToolbarOutsideRaw}, var(${paddingContentXxSmallRaw}))`; +export const paddingFlyoutDefault = `var(${paddingFlyoutDefaultRaw}, var(${paddingContentAlignOutdentTextOnSubtleRaw}, 4px))`; +export const paddingCardNestedImage = `var(${paddingCardNestedImageRaw}, var(${paddingContentAlignDefaultRaw}))`; +export const paddingCtrlTextBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, 5px))`; +export const paddingCtrlSmTextBottom = `var(${paddingCtrlSmTextBottomRaw}, var(${paddingCtrlSmTextTopRaw}))`; +export const paddingCtrlLgTextBottom = `var(${paddingCtrlLgTextBottomRaw}, var(${paddingCtrlLgTextTopRaw}))`; +export const gapBetweenCtrlNested = `var(${gapBetweenCtrlNestedRaw}, var(${paddingCtrlToNestedControlRaw}))`; +export const gapBetweenTextSmall = `var(${gapBetweenTextSmallRaw}, var(${gapBetweenContentXxSmallRaw}, ${spacingHorizontalXS}))`; +export const gapBetweenCtrlLgNested = `var(${gapBetweenCtrlLgNestedRaw}, var(${paddingCtrlLgToNestedControlRaw}))`; +export const gapBetweenTextLarge = `var(${gapBetweenTextLargeRaw}, var(${gapBetweenContentXSmallRaw}))`; +export const gapBetweenCtrlSmNested = `var(${gapBetweenCtrlSmNestedRaw}, var(${paddingCtrlSmToNestedControlRaw}))`; +export const gapBetweenListItem = `var(${gapBetweenListItemRaw}, var(${gapBetweenContentXxSmallRaw}, ${spacingVerticalXXS}))`; +export const gapBetweenCard = `var(${gapBetweenCardRaw}, var(${gapBetweenContentMediumRaw}))`; +export const strokeWidthDividerDefault = `var(${strokeWidthDividerDefaultRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; +export const strokeWidthDividerStrong = `var(${strokeWidthDividerStrongRaw}, var(${strokeWidthDefaultRaw}))`; +export const strokeWidthCtrlOutlineRest = `var(${strokeWidthCtrlOutlineRestRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; +export const strokeWidthCtrlOutlineHover = `var(${strokeWidthCtrlOutlineHoverRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; +export const strokeWidthCtrlOutlinePressed = `var(${strokeWidthCtrlOutlinePressedRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; +export const strokeWidthCtrlOutlineSelected = `var(${strokeWidthCtrlOutlineSelectedRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThicker}))`; +export const strokeWidthWindowDefault = `var(${strokeWidthWindowDefaultRaw}, var(${strokeWidthDefaultRaw}))`; +export const backgroundToolbar = `var(${backgroundToolbarRaw}, var(${backgroundCardOnPrimaryDefaultRestRaw}))`; +export const strokeToolbar = `var(${strokeToolbarRaw}, var(${strokeCardOnPrimaryRestRaw}))`; +export const strokeCtrlOnBrandRestStop2 = `var(${strokeCtrlOnBrandRestStop2Raw}, var(${strokeCtrlOnBrandRestRaw}))`; +export const strokeCtrlOnBrandHoverStop2 = `var(${strokeCtrlOnBrandHoverStop2Raw}, var(${strokeCtrlOnBrandHoverRaw}))`; +export const strokeCtrlOnBrandPressedStop2 = `var(${strokeCtrlOnBrandPressedStop2Raw}, var(${strokeCtrlOnBrandPressedRaw}))`; +export const strokeCtrlOnBrandDisabledStop2 = `var(${strokeCtrlOnBrandDisabledStop2Raw}, var(${strokeCtrlOnBrandDisabledRaw}))`; +export const strokeCtrlOnNeutralRestStop2 = `var(${strokeCtrlOnNeutralRestStop2Raw}, var(${strokeCtrlOnNeutralRestRaw}))`; +export const strokeCtrlOnNeutralHoverStop2 = `var(${strokeCtrlOnNeutralHoverStop2Raw}, var(${strokeCtrlOnNeutralPressedRaw}))`; +export const strokeCtrlOnNeutralPressedStop2 = `var(${strokeCtrlOnNeutralPressedStop2Raw}, var(${strokeCtrlOnNeutralHoverRaw}))`; +export const strokeCtrlOnNeutralDisabledStop2 = `var(${strokeCtrlOnNeutralDisabledStop2Raw}, var(${strokeCtrlOnNeutralDisabledRaw}))`; +export const strokeCtrlOnOutlineRestStop2 = `var(${strokeCtrlOnOutlineRestStop2Raw}, var(${strokeCtrlOnOutlineRestRaw}))`; +export const strokeCtrlOnOutlineHoverStop2 = `var(${strokeCtrlOnOutlineHoverStop2Raw}, var(${strokeCtrlOnOutlineHoverRaw}))`; +export const strokeCtrlOnOutlinePressedStop2 = `var(${strokeCtrlOnOutlinePressedStop2Raw}, var(${strokeCtrlOnOutlinePressedRaw}))`; +export const strokeCtrlOnOutlineDisabledStop2 = `var(${strokeCtrlOnOutlineDisabledStop2Raw}, var(${strokeCtrlOnOutlineDisabledRaw}))`; +export const strokeCtrlOnActiveBrandRest = `var(${strokeCtrlOnActiveBrandRestRaw}, var(${strokeCtrlOnBrandRestRaw}, ${colorNeutralForegroundOnBrand}))`; +export const strokeCtrlDividerOnBrandDisabled = `var(${strokeCtrlDividerOnBrandDisabledRaw}, var(${strokeCtrlDividerOnBrandRaw}))`; +export const strokeCtrlDividerOnActiveBrand = `var(${strokeCtrlDividerOnActiveBrandRaw}, var(${strokeCtrlDividerOnBrandRaw}))`; +export const strokeCtrlDividerOnActiveBrandDisabled = `var(${strokeCtrlDividerOnActiveBrandDisabledRaw}, var(${strokeCtrlDividerOnBrandRaw}))`; +export const strokeCtrlDividerOnNeutralDisabled = `var(${strokeCtrlDividerOnNeutralDisabledRaw}, var(${strokeCtrlDividerOnNeutralRaw}))`; +export const strokeCtrlDividerOnOutlineDisabled = `var(${strokeCtrlDividerOnOutlineDisabledRaw}, var(${strokeCtrlDividerOnOutlineRaw}))`; +export const strokeCtrlOnActiveBrandHover = `var(${strokeCtrlOnActiveBrandHoverRaw}, var(${strokeCtrlOnBrandHoverRaw}, ${colorStrokeFocus2}))`; +export const strokeCtrlOnActiveBrandPressed = `var(${strokeCtrlOnActiveBrandPressedRaw}, var(${strokeCtrlOnBrandPressedRaw}, ${colorTransparentStrokeInteractive}))`; +export const strokeCtrlOnActiveBrandDisabled = `var(${strokeCtrlOnActiveBrandDisabledRaw}, var(${strokeCtrlOnBrandDisabledRaw}, ${colorTransparentStrokeDisabled}))`; +export const strokeCtrlOnActiveBrandRestStop2 = `var(${strokeCtrlOnActiveBrandRestStop2Raw}, var(${strokeCtrlOnBrandRestRaw}))`; +export const strokeCtrlOnActiveBrandHoverStop2 = `var(${strokeCtrlOnActiveBrandHoverStop2Raw}, var(${strokeCtrlOnBrandRestRaw}))`; +export const strokeCtrlOnActiveBrandPressedStop2 = `var(${strokeCtrlOnActiveBrandPressedStop2Raw}, var(${strokeCtrlOnBrandPressedRaw}))`; +export const strokeCtrlOnActiveBrandDisabledStop2 = `var(${strokeCtrlOnActiveBrandDisabledStop2Raw}, var(${strokeCtrlOnBrandDisabledRaw}))`; +export const strokeDividerSubtle = `var(${strokeDividerSubtleRaw}, var(${strokeDividerDefaultRaw}, ${colorNeutralStroke3}))`; +export const strokeDividerStrong = `var(${strokeDividerStrongRaw}, var(${strokeDividerDefaultRaw}, ${colorNeutralStroke1}))`; +export const strokeDividerBrand = `var(${strokeDividerBrandRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorBrandStroke1}))`; +export const strokeWindowInactive = `var(${strokeWindowInactiveRaw}, var(${strokeWindowActiveRaw}))`; +export const backgroundLayerPrimaryStop1 = `var(${backgroundLayerPrimaryStop1Raw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const backgroundLayerPrimaryStop2 = `var(${backgroundLayerPrimaryStop2Raw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const backgroundLayerPrimaryStop3 = `var(${backgroundLayerPrimaryStop3Raw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const backgroundLayerSecondary = `var(${backgroundLayerSecondaryRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const backgroundLayerTertiary = `var(${backgroundLayerTertiaryRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const backgroundCardOnPrimaryDefaultSelected = `var(${backgroundCardOnPrimaryDefaultSelectedRaw}, var(${backgroundCardOnPrimaryDefaultRestRaw}))`; +export const backgroundCtrlActiveBrandRest = `var(${backgroundCtrlActiveBrandRestRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorCompoundBrandBackground}))`; +export const backgroundCtrlActiveBrandHover = `var(${backgroundCtrlActiveBrandHoverRaw}, var(${backgroundCtrlBrandHoverRaw}, ${colorCompoundBrandBackgroundHover}))`; +export const backgroundCtrlActiveBrandPressed = `var(${backgroundCtrlActiveBrandPressedRaw}, var(${backgroundCtrlBrandPressedRaw}, ${colorCompoundBrandBackgroundPressed}))`; +export const backgroundCtrlActiveBrandDisabled = `var(${backgroundCtrlActiveBrandDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}, ${colorNeutralBackgroundDisabled}))`; +export const backgroundCtrlShapeSafeActiveBrandRest = `var(${backgroundCtrlShapeSafeActiveBrandRestRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const backgroundCtrlShapeSafeActiveBrandDisabled = `var(${backgroundCtrlShapeSafeActiveBrandDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; +export const backgroundCtrlShapeSafeNeutralRest = `var(${backgroundCtrlShapeSafeNeutralRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralStrokeAccessible}))`; +export const backgroundCtrlShapeSafeNeutralHover = `var(${backgroundCtrlShapeSafeNeutralHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralStrokeAccessibleHover}))`; +export const backgroundCtrlShapeSafeNeutralPressed = `var(${backgroundCtrlShapeSafeNeutralPressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralStrokeAccessiblePressed}))`; +export const backgroundCtrlShapeSafeNeutralDisabled = `var(${backgroundCtrlShapeSafeNeutralDisabledRaw}, var(${foregroundCtrlNeutralSecondaryDisabledRaw}, ${colorNeutralForegroundDisabled}))`; +export const cornerFlyoutHover = `var(${cornerFlyoutHoverRaw}, var(${cornerFlyoutRestRaw}))`; +export const cornerFlyoutPressed = `var(${cornerFlyoutPressedRaw}, var(${cornerFlyoutRestRaw}))`; +export const cornerLayerIntersection = `var(${cornerLayerIntersectionRaw}, var(${cornerZeroRaw}))`; +export const cornerCardHover = `var(${cornerCardHoverRaw}, var(${cornerCardRestRaw}))`; +export const cornerCardPressed = `var(${cornerCardPressedRaw}, var(${cornerCardRestRaw}))`; +export const cornerToolbarDefault = `var(${cornerToolbarDefaultRaw}, var(${cornerCardRestRaw}))`; +export const cornerImageOnPage = `var(${cornerImageOnPageRaw}, var(${cornerCardRestRaw}))`; +export const cornerCtrlHover = `var(${cornerCtrlHoverRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusMedium}))`; +export const cornerCtrlPressed = `var(${cornerCtrlPressedRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusMedium}))`; +export const cornerCtrlSmHover = `var(${cornerCtrlSmHoverRaw}, var(${cornerCtrlSmRestRaw}))`; +export const cornerCtrlSmPressed = `var(${cornerCtrlSmPressedRaw}, var(${cornerCtrlSmRestRaw}))`; +export const cornerCtrlLgHover = `var(${cornerCtrlLgHoverRaw}, var(${cornerCtrlLgRestRaw}))`; +export const cornerCtrlLgPressed = `var(${cornerCtrlLgPressedRaw}, var(${cornerCtrlLgRestRaw}))`; +export const foregroundContentNeutralPrimary = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1}))`; +export const foregroundContentNeutralSecondary = `var(${foregroundContentNeutralSecondaryRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground2}))`; +export const foregroundContentBrandPrimary = `var(${foregroundContentBrandPrimaryRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForeground1}))`; +export const foregroundCtrlNeutralPrimaryHover = `var(${foregroundCtrlNeutralPrimaryHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1Hover}))`; +export const foregroundCtrlNeutralPrimaryPressed = `var(${foregroundCtrlNeutralPrimaryPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1Pressed}))`; +export const foregroundCtrlNeutralSecondaryHover = `var(${foregroundCtrlNeutralSecondaryHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground2Hover}))`; +export const foregroundCtrlNeutralSecondaryPressed = `var(${foregroundCtrlNeutralSecondaryPressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground2Pressed}))`; +export const foregroundCtrlIconOnNeutralRest = `var(${foregroundCtrlIconOnNeutralRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground3}))`; +export const foregroundCtrlIconOnNeutralHover = `var(${foregroundCtrlIconOnNeutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnNeutralPressed = `var(${foregroundCtrlIconOnNeutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnNeutralDisabled = `var(${foregroundCtrlIconOnNeutralDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}, ${colorNeutralForegroundDisabled}))`; +export const foregroundCtrlIconOnOutlineRest = `var(${foregroundCtrlIconOnOutlineRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnOutlineHover = `var(${foregroundCtrlIconOnOutlineHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnOutlinePressed = `var(${foregroundCtrlIconOnOutlinePressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnOutlineDisabled = `var(${foregroundCtrlIconOnOutlineDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +export const foregroundCtrlIconOnSubtleRest = `var(${foregroundCtrlIconOnSubtleRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2}))`; +export const foregroundCtrlIconOnSubtleHover = `var(${foregroundCtrlIconOnSubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2BrandHover}))`; +export const foregroundCtrlIconOnSubtlePressed = `var(${foregroundCtrlIconOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2BrandPressed}))`; +export const foregroundCtrlIconOnSubtleDisabled = `var(${foregroundCtrlIconOnSubtleDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}, ${colorNeutralForegroundDisabled}))`; +export const foregroundCtrlOnBrandHover = `var(${foregroundCtrlOnBrandHoverRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundOnBrand}))`; +export const foregroundCtrlOnBrandPressed = `var(${foregroundCtrlOnBrandPressedRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundOnBrand}))`; +export const foregroundCtrlActiveBrandRest = `var(${foregroundCtrlActiveBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorCompoundBrandForeground1}))`; +export const foregroundCtrlActiveBrandHover = `var(${foregroundCtrlActiveBrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw}, ${colorCompoundBrandForeground1Hover}))`; +export const foregroundCtrlActiveBrandPressed = `var(${foregroundCtrlActiveBrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw}, ${colorCompoundBrandForeground1Pressed}))`; +export const foregroundCtrlActiveBrandDisabled = `var(${foregroundCtrlActiveBrandDisabledRaw}, var(${foregroundCtrlBrandDisabledRaw}))`; +export const foregroundCtrlOnActiveBrandRest = `var(${foregroundCtrlOnActiveBrandRestRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundInverted}))`; +export const foregroundCtrlOnActiveBrandHover = `var(${foregroundCtrlOnActiveBrandHoverRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundInvertedHover}))`; +export const foregroundCtrlOnActiveBrandPressed = `var(${foregroundCtrlOnActiveBrandPressedRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundInvertedPressed}))`; +export const foregroundCtrlOnActiveBrandDisabled = `var(${foregroundCtrlOnActiveBrandDisabledRaw}, var(${foregroundCtrlOnBrandDisabledRaw}, ${colorNeutralForegroundDisabled}))`; +export const foregroundCtrlOnOutlineRest = `var(${foregroundCtrlOnOutlineRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1}))`; +export const foregroundCtrlOnOutlineHover = `var(${foregroundCtrlOnOutlineHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1Hover}))`; +export const foregroundCtrlOnOutlinePressed = `var(${foregroundCtrlOnOutlinePressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1Pressed}))`; +export const foregroundCtrlOnOutlineDisabled = `var(${foregroundCtrlOnOutlineDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}, ${colorNeutralForegroundDisabled}))`; +export const foregroundCtrlOnSubtleRest = `var(${foregroundCtrlOnSubtleRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2}))`; +export const foregroundCtrlOnSubtleHover = `var(${foregroundCtrlOnSubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryHoverRaw}, ${colorNeutralForeground2Hover}))`; +export const foregroundCtrlOnSubtlePressed = `var(${foregroundCtrlOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw}, ${colorNeutralForeground2Pressed}))`; +export const foregroundCtrlOnSubtleDisabled = `var(${foregroundCtrlOnSubtleDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}, ${colorNeutralForegroundDisabled}))`; +export const foregroundCtrlOnTransparentRest = `var(${foregroundCtrlOnTransparentRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2}))`; +export const foregroundCtrlOnTransparentHover = `var(${foregroundCtrlOnTransparentHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2BrandHover}))`; +export const foregroundCtrlOnTransparentPressed = `var(${foregroundCtrlOnTransparentPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2BrandPressed}))`; +export const foregroundCtrlOnTransparentDisabled = `var(${foregroundCtrlOnTransparentDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}, ${colorNeutralForegroundDisabled}))`; +export const materialAcrylicDefaultSolid = `var(${materialAcrylicDefaultSolidRaw}, var(${backgroundLayerPrimarySolidRaw}, ${colorNeutralBackground1}))`; +export const materialAcrylicDefaultColorBlend = `var(${materialAcrylicDefaultColorBlendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const materialAcrylicDefaultLumBlend = `var(${materialAcrylicDefaultLumBlendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const materialMicaDefaultSolid = `var(${materialMicaDefaultSolidRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const materialMicaDefaultColorBlend = `var(${materialMicaDefaultColorBlendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const materialMicaDefaultLumBlend = `var(${materialMicaDefaultLumBlendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const materialMicaDarkerSolid = `var(${materialMicaDarkerSolidRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const materialMicaDarkerColorBlend = `var(${materialMicaDarkerColorBlendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const materialMicaDarkerLumBlend = `var(${materialMicaDarkerLumBlendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const materialMicaThinSolid = `var(${materialMicaThinSolidRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const materialMicaThinColorBlend = `var(${materialMicaThinColorBlendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const materialMicaThinLumBlend = `var(${materialMicaThinLumBlendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const iconThemeCtrlDefaultHover = `var(${iconThemeCtrlDefaultHoverRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; +export const iconThemeCtrlDefaultPressed = `var(${iconThemeCtrlDefaultPressedRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; +export const iconThemeCtrlSubtleRest = `var(${iconThemeCtrlSubtleRestRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; +export const iconThemeCtrlSubtleHover = `var(${iconThemeCtrlSubtleHoverRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; +export const iconThemeCtrlSubtlePressed = `var(${iconThemeCtrlSubtlePressedRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; +export const iconThemeCtrlSubtleSelected = `var(${iconThemeCtrlSubtleSelectedRaw}, var(${iconThemeCtrlDefaultSelectedRaw}))`; +export const iconThemeCtrlChevronDefault = `var(${iconThemeCtrlChevronDefaultRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; +export const iconThemeCtrlChevronSelected = `var(${iconThemeCtrlChevronSelectedRaw}, var(${iconThemeCtrlDefaultSelectedRaw}))`; +export const statusBrandBackground = `var(${statusBrandBackgroundRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorBrandBackground}))`; +export const statusBrandStroke = `var(${statusBrandStrokeRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const statusBrandForeground = `var(${statusBrandForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundOnBrand}))`; +export const statusBrandTintForeground = `var(${statusBrandTintForegroundRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForeground1}))`; +export const statusDangerStroke = `var(${statusDangerStrokeRaw}, var(${statusDangerBackgroundRaw}, ${colorPaletteRedBorder2}))`; +export const statusDangerForeground = `var(${statusDangerForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundOnBrand}))`; +export const statusWarningStroke = `var(${statusWarningStrokeRaw}, var(${statusWarningBackgroundRaw}))`; +export const statusWarningForeground = `var(${statusWarningForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForeground1Static}))`; +export const statusSuccessStroke = `var(${statusSuccessStrokeRaw}, var(${statusSuccessBackgroundRaw}, ${colorPaletteGreenBorder2}))`; +export const statusSuccessForeground = `var(${statusSuccessForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundOnBrand}))`; +export const statusImportantStroke = `var(${statusImportantStrokeRaw}, var(${statusImportantBackgroundRaw}, ${colorNeutralStrokeAccessible}))`; +export const statusImportantForeground = `var(${statusImportantForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralBackground1}))`; +export const statusInformativeStroke = `var(${statusInformativeStrokeRaw}, var(${statusInformativeBackgroundRaw}, ${colorNeutralStroke2}))`; +export const statusInformativeForeground = `var(${statusInformativeForegroundRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground3}))`; +export const statusNeutralStroke = `var(${statusNeutralStrokeRaw}, var(${statusNeutralBackgroundRaw}))`; +export const statusNeutralForeground = `var(${statusNeutralForegroundRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const statusNeutralTintForeground = `var(${statusNeutralTintForegroundRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const cornerFlyoutShellRest = `var(${cornerFlyoutShellRestRaw}, var(${cornerFlyoutRestRaw}))`; +export const materialAcrylicShellDefaultSolid = `var(${materialAcrylicShellDefaultSolidRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const materialAcrylicShellDefaultColorBlend = `var(${materialAcrylicShellDefaultColorBlendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const materialAcrylicShellDefaultLumBlend = `var(${materialAcrylicShellDefaultLumBlendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const backgroundCardOnSecondaryDefaultSelected = `var(${backgroundCardOnSecondaryDefaultSelectedRaw}, var(${backgroundCardOnSecondaryDefaultRestRaw}))`; +export const textStyleDefaultDisplayFontFamily = `var(${textStyleDefaultDisplayFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +export const textStyleDefaultDisplayLetterSpacing = `var(${textStyleDefaultDisplayLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; +export const shadowCtrlOnDrag = `var(${shadowCtrlOnDragRaw}, var(${shadowFlyoutRaw}))`; +export const shadowWindowInactive = `var(${shadowWindowInactiveRaw}, var(${shadowWindowActiveRaw}))`; diff --git a/packages/semantic-tokens/src/optional/variables.ts b/packages/semantic-tokens/src/optional/variables.ts new file mode 100644 index 00000000000000..e710d299145153 --- /dev/null +++ b/packages/semantic-tokens/src/optional/variables.ts @@ -0,0 +1,252 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const textStyleDefaultHeaderFontFamilyRaw = '--smtc-text-style-default-header-font-family'; +export const textStyleDefaultHeaderLetterSpacingRaw = '--smtc-text-style-default-header-letter-spacing'; +export const textStyleAiRegularFontFamilyRaw = '--smtc-text-style-ai-regular-font-family'; +export const textStyleAiRegularWeightRaw = '--smtc-text-style-ai-regular-weight'; +export const textStyleAiRegularLetterSpacingRaw = '--smtc-text-style-ai-regular-letter-spacing'; +export const textStyleAiHeaderFontFamilyRaw = '--smtc-text-style-ai-header-font-family'; +export const textStyleAiHeaderWeightRaw = '--smtc-text-style-ai-header-weight'; +export const textStyleAiHeaderLetterSpacingRaw = '--smtc-text-style-ai-header-letter-spacing'; +export const textStyleArticleRegularFontFamilyRaw = '--smtc-text-style-article-regular-font-family'; +export const textStyleArticleRegularWeightRaw = '--smtc-text-style-article-regular-weight'; +export const textStyleArticleRegularLetterSpacingRaw = '--smtc-text-style-article-regular-letter-spacing'; +export const textStyleArticleHeaderFontFamilyRaw = '--smtc-text-style-article-header-font-family'; +export const textStyleArticleHeaderWeightRaw = '--smtc-text-style-article-header-weight'; +export const textStyleArticleHeaderLetterSpacingRaw = '--smtc-text-style-article-header-letter-spacing'; +export const textStyleCodeRegularFontFamilyRaw = '--smtc-text-style-code-regular-font-family'; +export const textStyleCodeRegularWeightRaw = '--smtc-text-style-code-regular-weight'; +export const textStyleCodeRegularLetterSpacingRaw = '--smtc-text-style-code-regular-letter-spacing'; +export const textStyleCodeHeaderFontFamilyRaw = '--smtc-text-style-code-header-font-family'; +export const textStyleCodeHeaderWeightRaw = '--smtc-text-style-code-header-weight'; +export const textStyleCodeHeaderLetterSpacingRaw = '--smtc-text-style-code-header-letter-spacing'; +export const textStyleDataVizRegularFontFamilyRaw = '--smtc-text-style-data-viz-regular-font-family'; +export const textStyleDataVizRegularWeightRaw = '--smtc-text-style-data-viz-regular-weight'; +export const textStyleDataVizRegularLetterSpacingRaw = '--smtc-text-style-data-viz-regular-letter-spacing'; +export const textStyleDataVizHeaderFontFamilyRaw = '--smtc-text-style-data-viz-header-font-family'; +export const textStyleDataVizHeaderWeightRaw = '--smtc-text-style-data-viz-header-weight'; +export const textStyleDataVizHeaderLetterSpacingRaw = '--smtc-text-style-data-viz-header-letter-spacing'; +export const textStyleQuoteRegularFontFamilyRaw = '--smtc-text-style-quote-regular-font-family'; +export const textStyleQuoteRegularWeightRaw = '--smtc-text-style-quote-regular-weight'; +export const textStyleQuoteRegularLetterSpacingRaw = '--smtc-text-style-quote-regular-letter-spacing'; +export const textStyleQuoteHeaderFontFamilyRaw = '--smtc-text-style-quote-header-font-family'; +export const textStyleQuoteHeaderWeightRaw = '--smtc-text-style-quote-header-weight'; +export const textStyleQuoteHeaderLetterSpacingRaw = '--smtc-text-style-quote-header-letter-spacing'; +export const textRampPageHeaderFontSizeRaw = '--smtc-text-ramp-page-header-font-size'; +export const textRampPageHeaderLineHeightRaw = '--smtc-text-ramp-page-header-line-height'; +export const textRampSectionHeaderFontSizeRaw = '--smtc-text-ramp-section-header-font-size'; +export const textRampSectionHeaderLineHeightRaw = '--smtc-text-ramp-section-header-line-height'; +export const textRampSubsectionHeaderFontSizeRaw = '--smtc-text-ramp-subsection-header-font-size'; +export const textRampSubsectionHeaderLineHeightRaw = '--smtc-text-ramp-subsection-header-line-height'; +export const textRampReadingBodyFontSizeRaw = '--smtc-text-ramp-reading-body-font-size'; +export const textRampReadingBodyLineHeightRaw = '--smtc-text-ramp-reading-body-line-height'; +export const textRampItemHeaderFontSizeRaw = '--smtc-text-ramp-item-header-font-size'; +export const textRampItemHeaderLineHeightRaw = '--smtc-text-ramp-item-header-line-height'; +export const textRampItemBodyFontSizeRaw = '--smtc-text-ramp-item-body-font-size'; +export const textRampItemBodyLineHeightRaw = '--smtc-text-ramp-item-body-line-height'; +export const textRampMetadataFontSizeRaw = '--smtc-text-ramp-metadata-font-size'; +export const textRampMetadataLineHeightRaw = '--smtc-text-ramp-metadata-line-height'; +export const textRampLegalFontSizeRaw = '--smtc-text-ramp-legal-font-size'; +export const textRampLegalLineHeightRaw = '--smtc-text-ramp-legal-line-height'; +export const textRampSmPageHeaderFontSizeRaw = '--smtc-text-ramp-sm-page-header-font-size'; +export const textRampSmPageHeaderLineHeightRaw = '--smtc-text-ramp-sm-page-header-line-height'; +export const textRampSmSectionHeaderFontSizeRaw = '--smtc-text-ramp-sm-section-header-font-size'; +export const textRampSmSectionHeaderLineHeightRaw = '--smtc-text-ramp-sm-section-header-line-height'; +export const textRampSmSubsectionHeaderFontSizeRaw = '--smtc-text-ramp-sm-subsection-header-font-size'; +export const textRampSmSubsectionHeaderLineHeightRaw = '--smtc-text-ramp-sm-subsection-header-line-height'; +export const textRampSmReadingBodyFontSizeRaw = '--smtc-text-ramp-sm-reading-body-font-size'; +export const textRampSmReadingBodyLineHeightRaw = '--smtc-text-ramp-sm-reading-body-line-height'; +export const textRampSmItemHeaderFontSizeRaw = '--smtc-text-ramp-sm-item-header-font-size'; +export const textRampSmItemHeaderLineHeightRaw = '--smtc-text-ramp-sm-item-header-line-height'; +export const textRampSmItemBodyFontSizeRaw = '--smtc-text-ramp-sm-item-body-font-size'; +export const textRampSmItemBodyLineHeightRaw = '--smtc-text-ramp-sm-item-body-line-height'; +export const textRampSmMetadataFontSizeRaw = '--smtc-text-ramp-sm-metadata-font-size'; +export const textRampSmMetadataLineHeightRaw = '--smtc-text-ramp-sm-metadata-line-height'; +export const textRampSmLegalFontSizeRaw = '--smtc-text-ramp-sm-legal-font-size'; +export const textRampSmLegalLineHeightRaw = '--smtc-text-ramp-sm-legal-line-height'; +export const textRampLgPageHeaderFontSizeRaw = '--smtc-text-ramp-lg-page-header-font-size'; +export const textRampLgPageHeaderLineHeightRaw = '--smtc-text-ramp-lg-page-header-line-height'; +export const textRampLgSectionHeaderFontSizeRaw = '--smtc-text-ramp-lg-section-header-font-size'; +export const textRampLgSectionHeaderLineHeightRaw = '--smtc-text-ramp-lg-section-header-line-height'; +export const textRampLgSubsectionHeaderFontSizeRaw = '--smtc-text-ramp-lg-subsection-header-font-size'; +export const textRampLgSubsectionHeaderLineHeightRaw = '--smtc-text-ramp-lg-subsection-header-line-height'; +export const textRampLgReadingBodyFontSizeRaw = '--smtc-text-ramp-lg-reading-body-font-size'; +export const textRampLgReadingBodyLineHeightRaw = '--smtc-text-ramp-lg-reading-body-line-height'; +export const textRampLgItemHeaderFontSizeRaw = '--smtc-text-ramp-lg-item-header-font-size'; +export const textRampLgItemHeaderLineHeightRaw = '--smtc-text-ramp-lg-item-header-line-height'; +export const textRampLgItemBodyFontSizeRaw = '--smtc-text-ramp-lg-item-body-font-size'; +export const textRampLgItemBodyLineHeightRaw = '--smtc-text-ramp-lg-item-body-line-height'; +export const textRampLgMetadataFontSizeRaw = '--smtc-text-ramp-lg-metadata-font-size'; +export const textRampLgMetadataLineHeightRaw = '--smtc-text-ramp-lg-metadata-line-height'; +export const textRampLgLegalFontSizeRaw = '--smtc-text-ramp-lg-legal-font-size'; +export const textRampLgLegalLineHeightRaw = '--smtc-text-ramp-lg-legal-line-height'; +export const textCtrlWeightDefaultRaw = '--smtc-text-ctrl-weight-default'; +export const textCtrlButtonWeightDefaultRaw = '--smtc-text-ctrl-button-weight-default'; +export const textCtrlButtonWeightSelectedRaw = '--smtc-text-ctrl-button-weight-selected'; +export const paddingToolbarInsideRaw = '--smtc-padding-toolbar-inside'; +export const paddingToolbarOutsideRaw = '--smtc-padding-toolbar-outside'; +export const paddingFlyoutDefaultRaw = '--smtc-padding-flyout-default'; +export const paddingCardNestedImageRaw = '--smtc-padding-card-nested-image'; +export const paddingCtrlTextBottomRaw = '--smtc-padding-ctrl-text-bottom'; +export const paddingCtrlSmTextBottomRaw = '--smtc-padding-ctrl-sm-text-bottom'; +export const paddingCtrlLgTextBottomRaw = '--smtc-padding-ctrl-lg-text-bottom'; +export const gapBetweenCtrlNestedRaw = '--smtc-gap-between-ctrl-nested'; +export const gapBetweenTextSmallRaw = '--smtc-gap-between-text-small'; +export const gapBetweenCtrlLgNestedRaw = '--smtc-gap-between-ctrl-lg-nested'; +export const gapBetweenTextLargeRaw = '--smtc-gap-between-text-large'; +export const gapBetweenCtrlSmNestedRaw = '--smtc-gap-between-ctrl-sm-nested'; +export const gapBetweenListItemRaw = '--smtc-gap-between-list-item'; +export const gapBetweenCardRaw = '--smtc-gap-between-card'; +export const strokeWidthDividerDefaultRaw = '--smtc-stroke-width-divider-default'; +export const strokeWidthDividerStrongRaw = '--smtc-stroke-width-divider-strong'; +export const strokeWidthCtrlOutlineRestRaw = '--smtc-stroke-width-ctrl-outline-rest'; +export const strokeWidthCtrlOutlineHoverRaw = '--smtc-stroke-width-ctrl-outline-hover'; +export const strokeWidthCtrlOutlinePressedRaw = '--smtc-stroke-width-ctrl-outline-pressed'; +export const strokeWidthCtrlOutlineSelectedRaw = '--smtc-stroke-width-ctrl-outline-selected'; +export const strokeWidthWindowDefaultRaw = '--smtc-stroke-width-window-default'; +export const backgroundToolbarRaw = '--smtc-background-toolbar'; +export const strokeToolbarRaw = '--smtc-stroke-toolbar'; +export const strokeCtrlOnBrandRestStop2Raw = '--smtc-stroke-ctrl-on-brand-rest-stop2'; +export const strokeCtrlOnBrandHoverStop2Raw = '--smtc-stroke-ctrl-on-brand-hover-stop2'; +export const strokeCtrlOnBrandPressedStop2Raw = '--smtc-stroke-ctrl-on-brand-pressed-stop2'; +export const strokeCtrlOnBrandDisabledStop2Raw = '--smtc-stroke-ctrl-on-brand-disabled-stop2'; +export const strokeCtrlOnNeutralRestStop2Raw = '--smtc-stroke-ctrl-on-neutral-rest-stop2'; +export const strokeCtrlOnNeutralHoverStop2Raw = '--smtc-stroke-ctrl-on-neutral-hover-stop2'; +export const strokeCtrlOnNeutralPressedStop2Raw = '--smtc-stroke-ctrl-on-neutral-pressed-stop2'; +export const strokeCtrlOnNeutralDisabledStop2Raw = '--smtc-stroke-ctrl-on-neutral-disabled-stop2'; +export const strokeCtrlOnOutlineRestStop2Raw = '--smtc-stroke-ctrl-on-outline-rest-stop2'; +export const strokeCtrlOnOutlineHoverStop2Raw = '--smtc-stroke-ctrl-on-outline-hover-stop2'; +export const strokeCtrlOnOutlinePressedStop2Raw = '--smtc-stroke-ctrl-on-outline-pressed-stop2'; +export const strokeCtrlOnOutlineDisabledStop2Raw = '--smtc-stroke-ctrl-on-outline-disabled-stop2'; +export const strokeCtrlOnActiveBrandRestRaw = '--smtc-stroke-ctrl-on-active-brand-rest'; +export const strokeCtrlDividerOnBrandDisabledRaw = '--smtc-stroke-ctrl-divider-on-brand-disabled'; +export const strokeCtrlDividerOnActiveBrandRaw = '--smtc-stroke-ctrl-divider-on-active-brand'; +export const strokeCtrlDividerOnActiveBrandDisabledRaw = '--smtc-stroke-ctrl-divider-on-active-brand-disabled'; +export const strokeCtrlDividerOnNeutralDisabledRaw = '--smtc-stroke-ctrl-divider-on-neutral-disabled'; +export const strokeCtrlDividerOnOutlineDisabledRaw = '--smtc-stroke-ctrl-divider-on-outline-disabled'; +export const strokeCtrlOnActiveBrandHoverRaw = '--smtc-stroke-ctrl-on-active-brand-hover'; +export const strokeCtrlOnActiveBrandPressedRaw = '--smtc-stroke-ctrl-on-active-brand-pressed'; +export const strokeCtrlOnActiveBrandDisabledRaw = '--smtc-stroke-ctrl-on-active-brand-disabled'; +export const strokeCtrlOnActiveBrandRestStop2Raw = '--smtc-stroke-ctrl-on-active-brand-rest-stop2'; +export const strokeCtrlOnActiveBrandHoverStop2Raw = '--smtc-stroke-ctrl-on-active-brand-hover-stop2'; +export const strokeCtrlOnActiveBrandPressedStop2Raw = '--smtc-stroke-ctrl-on-active-brand-pressed-stop2'; +export const strokeCtrlOnActiveBrandDisabledStop2Raw = '--smtc-stroke-ctrl-on-active-brand-disabled-stop2'; +export const strokeDividerSubtleRaw = '--smtc-stroke-divider-subtle'; +export const strokeDividerStrongRaw = '--smtc-stroke-divider-strong'; +export const strokeDividerBrandRaw = '--smtc-stroke-divider-brand'; +export const strokeWindowInactiveRaw = '--smtc-stroke-window-inactive'; +export const backgroundLayerPrimaryStop1Raw = '--smtc-background-layer-primary-stop1'; +export const backgroundLayerPrimaryStop2Raw = '--smtc-background-layer-primary-stop2'; +export const backgroundLayerPrimaryStop3Raw = '--smtc-background-layer-primary-stop3'; +export const backgroundLayerSecondaryRaw = '--smtc-background-layer-secondary'; +export const backgroundLayerTertiaryRaw = '--smtc-background-layer-tertiary'; +export const backgroundCardOnPrimaryDefaultSelectedRaw = '--smtc-background-card-on-primary-default-selected'; +export const backgroundCtrlActiveBrandRestRaw = '--smtc-background-ctrl-active-brand-rest'; +export const backgroundCtrlActiveBrandHoverRaw = '--smtc-background-ctrl-active-brand-hover'; +export const backgroundCtrlActiveBrandPressedRaw = '--smtc-background-ctrl-active-brand-pressed'; +export const backgroundCtrlActiveBrandDisabledRaw = '--smtc-background-ctrl-active-brand-disabled'; +export const backgroundCtrlShapeSafeActiveBrandRestRaw = '--smtc-background-ctrl-shape-safe-active-brand-rest'; +export const backgroundCtrlShapeSafeActiveBrandDisabledRaw = '--smtc-background-ctrl-shape-safe-active-brand-disabled'; +export const backgroundCtrlShapeSafeNeutralRestRaw = '--smtc-background-ctrl-shape-safe-neutral-rest'; +export const backgroundCtrlShapeSafeNeutralHoverRaw = '--smtc-background-ctrl-shape-safe-neutral-hover'; +export const backgroundCtrlShapeSafeNeutralPressedRaw = '--smtc-background-ctrl-shape-safe-neutral-pressed'; +export const backgroundCtrlShapeSafeNeutralDisabledRaw = '--smtc-background-ctrl-shape-safe-neutral-disabled'; +export const cornerFlyoutHoverRaw = '--smtc-corner-flyout-hover'; +export const cornerFlyoutPressedRaw = '--smtc-corner-flyout-pressed'; +export const cornerLayerIntersectionRaw = '--smtc-corner-layer-intersection'; +export const cornerCardHoverRaw = '--smtc-corner-card-hover'; +export const cornerCardPressedRaw = '--smtc-corner-card-pressed'; +export const cornerToolbarDefaultRaw = '--smtc-corner-toolbar-default'; +export const cornerImageOnPageRaw = '--smtc-corner-image-on-page'; +export const cornerCtrlHoverRaw = '--smtc-corner-ctrl-hover'; +export const cornerCtrlPressedRaw = '--smtc-corner-ctrl-pressed'; +export const cornerCtrlSmHoverRaw = '--smtc-corner-ctrl-sm-hover'; +export const cornerCtrlSmPressedRaw = '--smtc-corner-ctrl-sm-pressed'; +export const cornerCtrlLgHoverRaw = '--smtc-corner-ctrl-lg-hover'; +export const cornerCtrlLgPressedRaw = '--smtc-corner-ctrl-lg-pressed'; +export const foregroundContentNeutralPrimaryRaw = '--smtc-foreground-content-neutral-primary'; +export const foregroundContentNeutralSecondaryRaw = '--smtc-foreground-content-neutral-secondary'; +export const foregroundContentBrandPrimaryRaw = '--smtc-foreground-content-brand-primary'; +export const foregroundCtrlNeutralPrimaryHoverRaw = '--smtc-foreground-ctrl-neutral-primary-hover'; +export const foregroundCtrlNeutralPrimaryPressedRaw = '--smtc-foreground-ctrl-neutral-primary-pressed'; +export const foregroundCtrlNeutralSecondaryHoverRaw = '--smtc-foreground-ctrl-neutral-secondary-hover'; +export const foregroundCtrlNeutralSecondaryPressedRaw = '--smtc-foreground-ctrl-neutral-secondary-pressed'; +export const foregroundCtrlIconOnNeutralRestRaw = '--smtc-foreground-ctrl-icon-on-neutral-rest'; +export const foregroundCtrlIconOnNeutralHoverRaw = '--smtc-foreground-ctrl-icon-on-neutral-hover'; +export const foregroundCtrlIconOnNeutralPressedRaw = '--smtc-foreground-ctrl-icon-on-neutral-pressed'; +export const foregroundCtrlIconOnNeutralDisabledRaw = '--smtc-foreground-ctrl-icon-on-neutral-disabled'; +export const foregroundCtrlIconOnOutlineRestRaw = '--smtc-foreground-ctrl-icon-on-outline-rest'; +export const foregroundCtrlIconOnOutlineHoverRaw = '--smtc-foreground-ctrl-icon-on-outline-hover'; +export const foregroundCtrlIconOnOutlinePressedRaw = '--smtc-foreground-ctrl-icon-on-outline-pressed'; +export const foregroundCtrlIconOnOutlineDisabledRaw = '--smtc-foreground-ctrl-icon-on-outline-disabled'; +export const foregroundCtrlIconOnSubtleRestRaw = '--smtc-foreground-ctrl-icon-on-subtle-rest'; +export const foregroundCtrlIconOnSubtleHoverRaw = '--smtc-foreground-ctrl-icon-on-subtle-hover'; +export const foregroundCtrlIconOnSubtlePressedRaw = '--smtc-foreground-ctrl-icon-on-subtle-pressed'; +export const foregroundCtrlIconOnSubtleDisabledRaw = '--smtc-foreground-ctrl-icon-on-subtle-disabled'; +export const foregroundCtrlOnBrandHoverRaw = '--smtc-foreground-ctrl-on-brand-hover'; +export const foregroundCtrlOnBrandPressedRaw = '--smtc-foreground-ctrl-on-brand-pressed'; +export const foregroundCtrlActiveBrandRestRaw = '--smtc-foreground-ctrl-active-brand-rest'; +export const foregroundCtrlActiveBrandHoverRaw = '--smtc-foreground-ctrl-active-brand-hover'; +export const foregroundCtrlActiveBrandPressedRaw = '--smtc-foreground-ctrl-active-brand-pressed'; +export const foregroundCtrlActiveBrandDisabledRaw = '--smtc-foreground-ctrl-active-brand-disabled'; +export const foregroundCtrlOnActiveBrandRestRaw = '--smtc-foreground-ctrl-on-active-brand-rest'; +export const foregroundCtrlOnActiveBrandHoverRaw = '--smtc-foreground-ctrl-on-active-brand-hover'; +export const foregroundCtrlOnActiveBrandPressedRaw = '--smtc-foreground-ctrl-on-active-brand-pressed'; +export const foregroundCtrlOnActiveBrandDisabledRaw = '--smtc-foreground-ctrl-on-active-brand-disabled'; +export const foregroundCtrlOnOutlineRestRaw = '--smtc-foreground-ctrl-on-outline-rest'; +export const foregroundCtrlOnOutlineHoverRaw = '--smtc-foreground-ctrl-on-outline-hover'; +export const foregroundCtrlOnOutlinePressedRaw = '--smtc-foreground-ctrl-on-outline-pressed'; +export const foregroundCtrlOnOutlineDisabledRaw = '--smtc-foreground-ctrl-on-outline-disabled'; +export const foregroundCtrlOnSubtleRestRaw = '--smtc-foreground-ctrl-on-subtle-rest'; +export const foregroundCtrlOnSubtleHoverRaw = '--smtc-foreground-ctrl-on-subtle-hover'; +export const foregroundCtrlOnSubtlePressedRaw = '--smtc-foreground-ctrl-on-subtle-pressed'; +export const foregroundCtrlOnSubtleDisabledRaw = '--smtc-foreground-ctrl-on-subtle-disabled'; +export const foregroundCtrlOnTransparentRestRaw = '--smtc-foreground-ctrl-on-transparent-rest'; +export const foregroundCtrlOnTransparentHoverRaw = '--smtc-foreground-ctrl-on-transparent-hover'; +export const foregroundCtrlOnTransparentPressedRaw = '--smtc-foreground-ctrl-on-transparent-pressed'; +export const foregroundCtrlOnTransparentDisabledRaw = '--smtc-foreground-ctrl-on-transparent-disabled'; +export const materialAcrylicDefaultSolidRaw = '--smtc-material-acrylic-default-solid'; +export const materialAcrylicDefaultColorBlendRaw = '--smtc-material-acrylic-default-color-blend'; +export const materialAcrylicDefaultLumBlendRaw = '--smtc-material-acrylic-default-lum-blend'; +export const materialMicaDefaultSolidRaw = '--smtc-material-mica-default-solid'; +export const materialMicaDefaultColorBlendRaw = '--smtc-material-mica-default-color-blend'; +export const materialMicaDefaultLumBlendRaw = '--smtc-material-mica-default-lum-blend'; +export const materialMicaDarkerSolidRaw = '--smtc-material-mica-darker-solid'; +export const materialMicaDarkerColorBlendRaw = '--smtc-material-mica-darker-color-blend'; +export const materialMicaDarkerLumBlendRaw = '--smtc-material-mica-darker-lum-blend'; +export const materialMicaThinSolidRaw = '--smtc-material-mica-thin-solid'; +export const materialMicaThinColorBlendRaw = '--smtc-material-mica-thin-color-blend'; +export const materialMicaThinLumBlendRaw = '--smtc-material-mica-thin-lum-blend'; +export const iconThemeCtrlDefaultHoverRaw = '--smtc-icon-theme-ctrl-default-hover'; +export const iconThemeCtrlDefaultPressedRaw = '--smtc-icon-theme-ctrl-default-pressed'; +export const iconThemeCtrlSubtleRestRaw = '--smtc-icon-theme-ctrl-subtle-rest'; +export const iconThemeCtrlSubtleHoverRaw = '--smtc-icon-theme-ctrl-subtle-hover'; +export const iconThemeCtrlSubtlePressedRaw = '--smtc-icon-theme-ctrl-subtle-pressed'; +export const iconThemeCtrlSubtleSelectedRaw = '--smtc-icon-theme-ctrl-subtle-selected'; +export const iconThemeCtrlChevronDefaultRaw = '--smtc-icon-theme-ctrl-chevron-default'; +export const iconThemeCtrlChevronSelectedRaw = '--smtc-icon-theme-ctrl-chevron-selected'; +export const statusBrandBackgroundRaw = '--smtc-status-brand-background'; +export const statusBrandStrokeRaw = '--smtc-status-brand-stroke'; +export const statusBrandForegroundRaw = '--smtc-status-brand-foreground'; +export const statusBrandTintForegroundRaw = '--smtc-status-brand-tint-foreground'; +export const statusDangerStrokeRaw = '--smtc-status-danger-stroke'; +export const statusDangerForegroundRaw = '--smtc-status-danger-foreground'; +export const statusWarningStrokeRaw = '--smtc-status-warning-stroke'; +export const statusWarningForegroundRaw = '--smtc-status-warning-foreground'; +export const statusSuccessStrokeRaw = '--smtc-status-success-stroke'; +export const statusSuccessForegroundRaw = '--smtc-status-success-foreground'; +export const statusImportantStrokeRaw = '--smtc-status-important-stroke'; +export const statusImportantForegroundRaw = '--smtc-status-important-foreground'; +export const statusInformativeStrokeRaw = '--smtc-status-informative-stroke'; +export const statusInformativeForegroundRaw = '--smtc-status-informative-foreground'; +export const statusNeutralStrokeRaw = '--smtc-status-neutral-stroke'; +export const statusNeutralForegroundRaw = '--smtc-status-neutral-foreground'; +export const statusNeutralTintForegroundRaw = '--smtc-status-neutral-tint-foreground'; +export const cornerFlyoutShellRestRaw = '--smtc-corner-flyout-shell-rest'; +export const materialAcrylicShellDefaultSolidRaw = '--smtc-material-acrylic-shell-default-solid'; +export const materialAcrylicShellDefaultColorBlendRaw = '--smtc-material-acrylic-shell-default-color-blend'; +export const materialAcrylicShellDefaultLumBlendRaw = '--smtc-material-acrylic-shell-default-lum-blend'; +export const backgroundCardOnSecondaryDefaultSelectedRaw = '--smtc-background-card-on-secondary-default-selected'; +export const textStyleDefaultDisplayFontFamilyRaw = '--smtc-text-style-default-display-font-family'; +export const textStyleDefaultDisplayLetterSpacingRaw = '--smtc-text-style-default-display-letter-spacing'; +export const shadowCtrlOnDragRaw = '--smtc-shadow-ctrl-on-drag'; +export const shadowWindowInactiveRaw = '--smtc-shadow-window-inactive'; diff --git a/packages/semantic-tokens/src/variants/tokens.ts b/packages/semantic-tokens/src/variants/tokens.ts new file mode 100644 index 00000000000000..519d3ba9fc5e35 --- /dev/null +++ b/packages/semantic-tokens/src/variants/tokens.ts @@ -0,0 +1,5 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { gapInsideCtrlDefaultRaw } from '../control/variables'; +import { spacingHorizontalSNudge } from '../legacy/tokens'; + +export const _ctrlButtonGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingHorizontalSNudge})`; diff --git a/packages/semantic-tokens/tsconfig.e2e.json b/packages/semantic-tokens/tsconfig.e2e.json new file mode 100644 index 00000000000000..8296283fbc75c3 --- /dev/null +++ b/packages/semantic-tokens/tsconfig.e2e.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "types": ["node"] + }, + "include": ["playwright.config.ts", "**/*.spec-e2e.ts"] +} diff --git a/packages/semantic-tokens/tsconfig.json b/packages/semantic-tokens/tsconfig.json new file mode 100644 index 00000000000000..479e95aadcbcc6 --- /dev/null +++ b/packages/semantic-tokens/tsconfig.json @@ -0,0 +1,33 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "target": "ES2019", + "noEmit": true, + "isolatedModules": true, + "importHelpers": true, + "noUnusedLocals": true, + "preserveConstEnums": true + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + }, + { + "path": "./tsconfig.e2e.json" + } + ], + "ts-node": { + // these options are overrides used only by ts-node + // same as the --compilerOptions flag and the TS_NODE_COMPILER_OPTIONS environment variable + "compilerOptions": { + "module": "commonjs", + "resolveJsonModule": true, + "esModuleInterop": true + } + } +} diff --git a/packages/semantic-tokens/tsconfig.lib.json b/packages/semantic-tokens/tsconfig.lib.json new file mode 100644 index 00000000000000..df912eb426db75 --- /dev/null +++ b/packages/semantic-tokens/tsconfig.lib.json @@ -0,0 +1,16 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "noEmit": false, + "lib": ["ES2019", "dom"], + "declaration": true, + "declarationDir": "../../dist/out-tsc/types", + "outDir": "../../dist/out-tsc", + "inlineSources": true, + "types": ["static-assets", "environment", "node"], + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true + }, + "exclude": ["**/*.spec.ts", "**/*.test.ts", "**/*.spec-e2e.ts"], + "include": ["./src/**/*.ts", "./scripts/**/*.ts", "./utils/**/*.ts"] +} diff --git a/packages/semantic-tokens/tsconfig.spec.json b/packages/semantic-tokens/tsconfig.spec.json new file mode 100644 index 00000000000000..b9bbf3e45ca8af --- /dev/null +++ b/packages/semantic-tokens/tsconfig.spec.json @@ -0,0 +1,11 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "CommonJS", + "outDir": "dist", + "types": ["jest", "node"], + "resolveJsonModule": true, + "esModuleInterop": true + }, + "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"] +} 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/dedupeShadowTokens.test.ts b/packages/semantic-tokens/utils/dedupeShadowTokens.test.ts new file mode 100644 index 00000000000000..3d5e8dcfdfaa33 --- /dev/null +++ b/packages/semantic-tokens/utils/dedupeShadowTokens.test.ts @@ -0,0 +1,244 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +import { dedupeShadowTokens } from './dedupeShadowTokens'; + +const shadowTokens = { + shadowCardRestKeyX: { + no: 394, + name: 'shadow/card/rest/(key)/(x)', + fst_reference: 'NULL/number', + optional: false, + nullable: true, + description: '', + components: [], + contrast: '', + fallback: '', + exceptions: [], + cssName: '--smtc-shadow-card-rest-key-x', + }, + shadowCardRestKeyY: { + no: 395, + name: 'shadow/card/rest/(key)/(y)', + fst_reference: 'NULL/number', + optional: false, + nullable: true, + description: '', + components: [], + contrast: '', + fallback: '', + exceptions: [], + cssName: '--smtc-shadow-card-rest-key-y', + }, + shadowCardRestKeyBlur: { + no: 396, + name: 'shadow/card/rest/(key)/(blur)', + fst_reference: 'NULL/number', + optional: false, + nullable: true, + description: '', + components: [], + contrast: '', + fallback: '', + exceptions: [], + cssName: '--smtc-shadow-card-rest-key-blur', + }, + shadowCardRestKeyColor: { + no: 397, + name: 'shadow/card/rest/(key)/(color)', + fst_reference: 'NULL/color', + optional: false, + nullable: true, + description: '', + components: [], + contrast: '', + fallback: 'Shadow/Key', + exceptions: [], + cssName: '--smtc-shadow-card-rest-key-color', + }, + + shadowWindowInactiveKeyX: { + no: 898, + name: 'shadow/window/inactive/(key)/(x)', + fst_reference: 'shadow/window/active/(key)/(x)', + optional: true, + nullable: false, + description: '', + components: [], + contrast: '', + fallback: '', + exceptions: [], + cssName: '--smtc-shadow-window-inactive-key-x', + }, + shadowWindowInactiveKeyY: { + no: 899, + name: 'shadow/window/inactive/(key)/(y)', + fst_reference: 'shadow/window/active/(key)/(y)', + optional: true, + nullable: false, + description: '', + components: [], + contrast: '', + fallback: '', + exceptions: [], + cssName: '--smtc-shadow-window-inactive-key-y', + }, + shadowWindowInactiveKeyBlur: { + no: 900, + name: 'shadow/window/inactive/(key)/(blur)', + fst_reference: 'shadow/window/active/(key)/(blur)', + optional: true, + nullable: false, + description: '', + components: [], + contrast: '', + fallback: '', + exceptions: [], + cssName: '--smtc-shadow-window-inactive-key-blur', + }, + shadowWindowInactiveKeyColor: { + no: 901, + name: 'shadow/window/inactive/(key)/(Color)', + fst_reference: 'shadow/window/active/(key)/(color)', + optional: true, + nullable: false, + description: '', + components: [], + contrast: '', + fallback: 'Shadow/Ambientlighter', + exceptions: [], + cssName: '--smtc-shadow-window-inactive-key-color', + }, + + shadowWindowInactiveAmbientX: { + no: 909, + name: 'shadow/window/inactive/(ambient)/(x)', + fst_reference: '', + optional: false, + nullable: false, + description: '', + components: [], + contrast: '', + fallback: '', + exceptions: [], + cssName: '--smtc-shadow-window-inactive-ambient-x', + }, + shadowWindowInactiveAmbientY: { + no: 910, + name: 'shadow/window/inactive/(ambient)/(y)', + fst_reference: '', + optional: false, + nullable: false, + description: '', + components: [], + contrast: '', + fallback: '', + exceptions: [], + cssName: '--smtc-shadow-window-inactive-ambient-y', + }, + shadowWindowInactiveAmbientBlur: { + no: 911, + name: 'shadow/window/inactive/(ambient)/(blur)', + fst_reference: '', + optional: false, + nullable: false, + description: '', + components: [], + contrast: '', + fallback: '', + exceptions: [], + cssName: '--smtc-shadow-window-inactive-ambient-blur', + }, + shadowWindowActiveAmbientColor: { + no: 904, + name: 'shadow/window/active/(ambient)/(color)', + fst_reference: '', + optional: false, + nullable: false, + description: '', + components: [], + contrast: '', + fallback: 'Shadow/Ambientdarker', + exceptions: [], + cssName: '--smtc-shadow-window-active-ambient-color', + }, + shadowWindowInactiveAmbientColor: { + no: 912, + name: 'shadow/window/inactive/(ambient)/(color)', + fst_reference: '', + optional: false, + nullable: false, + description: '', + components: [], + contrast: '', + fallback: 'Shadow/Ambientdarker', + exceptions: [], + cssName: '--smtc-shadow-window-inactive-ambient-color', + }, + ctrlComposerInputShadowXOffset: { + no: 872, + name: 'CTRL/composer/Input/Shadow/(X-offset)', + fst_reference: '', + optional: false, + nullable: false, + description: '', + components: [], + contrast: '', + fallback: '', + exceptions: [], + cssName: '--smtc-ctrl-composer-input-shadow-x-offset', + }, + ctrlListShadowSelectedKeyX: { + no: 919, + name: 'CTRL/list/shadow/selected/(key)/(x)', + fst_reference: '', + optional: false, + nullable: false, + description: '', + components: [], + contrast: '', + fallback: '', + exceptions: [], + cssName: '--smtc-ctrl-list-shadow-selected-key-x', + }, + ctrlListShadowSelectedKeyY2: { + no: 918, + name: 'CTRL/list/shadow/selected/(key)/(y)2', + fst_reference: 'NULL/number', + optional: false, + nullable: true, + description: '', + components: [], + contrast: '', + fallback: 'NULL/number', + exceptions: [], + cssName: '--smtc-ctrl-list-shadow-selected-key-y-2', + }, +}; + +describe('dedupeShadowTokens', () => { + const dedupedTokens = dedupeShadowTokens(shadowTokens); + it('Combines and removes tokens', () => { + // First, check the tokens have been deduped and we retain all diverse tokens + expect(Object.keys(dedupedTokens).length).toEqual(5); + // New combined token exists + expect(dedupedTokens.shadowCardRest).toBeTruthy(); + }); + it('Updates token name to combined version', () => { + // New combined token has correct name + expect(dedupedTokens.shadowCardRest.name).toMatch('shadow/card/rest'); + }); + it('Updates token CSS name to combined version', () => { + // New combined token has correct name + expect(dedupedTokens.shadowCardRest.cssName).toMatch('--smtc-shadow-card-rest'); + }); + it('Handles combined fallbacks correctly', () => { + // Ensure fallbacks are handled correctly + expect(dedupedTokens.shadowWindowInactive.fst_reference).toMatch('shadow/window/active'); + }); + it('Handles combined special case shadow tokens', () => { + // Ensure fallbacks are handled correctly + expect(dedupedTokens.ctrlComposerInputShadow).toBeTruthy(); + expect(dedupedTokens.shadowWindowInactive).toBeTruthy(); + expect(dedupedTokens.shadowWindowActive).toBeTruthy(); + expect(dedupedTokens.ctrlListShadowSelected).toBeTruthy(); + }); +}); diff --git a/packages/semantic-tokens/utils/dedupeShadowTokens.ts b/packages/semantic-tokens/utils/dedupeShadowTokens.ts new file mode 100644 index 00000000000000..c89e1009f1d436 --- /dev/null +++ b/packages/semantic-tokens/utils/dedupeShadowTokens.ts @@ -0,0 +1,59 @@ +import type { Token } from '../scripts/token.types'; +import { chopLastCamelCasePart } from './chopLastCamelCasePart'; +import { removeLastDelimiter } from './removeLastDelimiter'; + +const chopShadowJSON = (token: Token): Token => { + // Handle shadow tokens by removing the last part (X,Y,Blur,Color + Ambient/Key) + token.cssName = removeLastDelimiter(token.cssName, '-'); + token.fst_reference = removeLastDelimiter(token.fst_reference, '/'); + token.name = removeLastDelimiter(token.name, '/'); + + return token; +}; + +export const dedupeShadowTokens = (_tokenJSON: Record) => { + /* Our shadow tokens come exported from Figma in parts i.e. X, Y, Blur, Color & Ambient/Key variants. + * To dedupe, we chop off the specific identifier (X, Y, Blur, Color) and combine them into a single token + * If the separate shadow tokens are required, they can be re-added and formatted into a shadow token string + * This is backwards compatible and valid with fallbacks (if a shadow part CSSVar is missing, it will fallback) + */ + for (const token in _tokenJSON) { + if (_tokenJSON.hasOwnProperty(token)) { + let tokenData: Token = _tokenJSON[token]; + + if (token.endsWith('Y2')) { + // Special case, ignore, no Y2 tokens should be present + delete _tokenJSON[token]; + continue; + } + + // We have two different ways of naming shadow tokens, so we need to handle both + if (tokenData.name.toLowerCase().includes('shadow')) { + // If a token contains 'shadow', we chop off the last two camel cased pieces + let combinedShadowName = chopLastCamelCasePart(chopLastCamelCasePart(token)); + let isSpecialCase = false; + if (!combinedShadowName.toLowerCase().includes('shadow')) { + // Special case: Some shadow tokens don't have two modifiers, re-add Shadow to end. + combinedShadowName = combinedShadowName + 'Shadow'; + isSpecialCase = true; + } + + // Check if shadow token was already combined + if (!_tokenJSON[combinedShadowName]) { + // Handle shadow tokens by removing the last part (X,Y,Blur,Color + Ambient/Key) + tokenData = chopShadowJSON(tokenData); + if (!isSpecialCase) { + // For regular shadow tokens, we chop them twice. + tokenData = chopShadowJSON(tokenData); + } + // Add the new combined token + _tokenJSON[combinedShadowName] = tokenData; + } + // Remove original token + delete _tokenJSON[token]; + } + } + } + + return _tokenJSON; +}; 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/fluentLegacyVariants.test.ts b/packages/semantic-tokens/utils/fluentLegacyVariants.test.ts new file mode 100644 index 00000000000000..333461f5899739 --- /dev/null +++ b/packages/semantic-tokens/utils/fluentLegacyVariants.test.ts @@ -0,0 +1,16 @@ +import { legacyFluentVariantsValues } from '../src/fluentLegacyVariants'; +import tokens from '../scripts/tokens.json'; +import { dedupeShadowTokens } from './dedupeShadowTokens'; + +const tokensJSON = dedupeShadowTokens(tokens); + +describe('Ensure all fluentLegacyVariants fallbacks are valid tokens', () => { + // We'll use this to catch any breaking changes in tokens.json + it('Ensure originalToken in legacy fallback is valid', () => { + Object.keys(legacyFluentVariantsValues).forEach(fluentOverrideKey => { + console.log(`Checking ${fluentOverrideKey}`); + const legacyTokenOverride = legacyFluentVariantsValues[fluentOverrideKey]!; + expect(tokensJSON[legacyTokenOverride.originalToken as keyof typeof tokensJSON]).toBeTruthy(); + }); + }); +}); diff --git a/packages/semantic-tokens/utils/fluentOverrides.test.ts b/packages/semantic-tokens/utils/fluentOverrides.test.ts new file mode 100644 index 00000000000000..82384bec7e6777 --- /dev/null +++ b/packages/semantic-tokens/utils/fluentOverrides.test.ts @@ -0,0 +1,15 @@ +import { fluentOverrides } from '../src/fluentOverrides'; +import tokens from '../scripts/tokens.json'; +import { dedupeShadowTokens } from './dedupeShadowTokens'; + +const tokensJSON = dedupeShadowTokens(tokens); + +describe('Ensure all fluentOverrides are valid tokens', () => { + // We'll use this to catch any breaking changes in tokens.json + it('Splits and camel cases strings separated by forward slash', () => { + Object.keys(fluentOverrides).forEach(fluentOverrideKey => { + console.log(`Checking ${fluentOverrideKey}`); + expect(tokensJSON[fluentOverrideKey as keyof typeof tokensJSON]).toBeTruthy(); + }); + }); +}); diff --git a/packages/semantic-tokens/utils/index.ts b/packages/semantic-tokens/utils/index.ts new file mode 100644 index 00000000000000..65b66de73ae709 --- /dev/null +++ b/packages/semantic-tokens/utils/index.ts @@ -0,0 +1,6 @@ +export { chopLastCamelCasePart } from './chopLastCamelCasePart'; +export { toCamelCase } from './toCamelCase'; +export { removeLastDelimiter } from './removeLastDelimiter'; +export { escapeInlineToken } from './escapeInlineToken'; +export { dedupeShadowTokens } from './dedupeShadowTokens'; +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(''); +}; diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json index dcf252cc417184..46a050855049ed 100644 --- a/tsconfig.base.all.json +++ b/tsconfig.base.all.json @@ -248,12 +248,19 @@ "packages/react-components/react-utilities-compat/stories/src/index.ts" ], "@fluentui/recipes": ["packages/react-components/recipes/src/index.ts"], + "@fluentui/semantic-style-hooks-preview": [ + "packages/react-components/semantic-style-hooks-preview/library/src/index.ts" + ], + "@fluentui/semantic-tokens": ["packages/semantic-tokens/src/index.ts"], "@fluentui/storybook-llms-extractor": ["tools/storybook-llms-extractor/src/index.ts"], "@fluentui/theme-designer": ["packages/react-components/theme-designer/src/index.ts"], "@fluentui/tokens": ["packages/tokens/src/index.ts"], "@fluentui/visual-regression-assert": ["tools/visual-regression-assert/src/index.ts"], "@fluentui/visual-regression-utilities": ["tools/visual-regression-utilities/src/index.ts"], - "@fluentui/workspace-plugin": ["tools/workspace-plugin/src/index.ts"] + "@fluentui/workspace-plugin": ["tools/workspace-plugin/src/index.ts"], + "@fluentui/semantic-style-hooks-preview-stories": [ + "packages/react-components/semantic-style-hooks-preview/stories/src/index.ts" + ] } } } diff --git a/tsconfig.base.json b/tsconfig.base.json index c06a4a7ed7364c..48172740f9c38c 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -204,6 +204,13 @@ "packages/react-components/react-utilities-compat/stories/src/index.ts" ], "@fluentui/recipes": ["packages/react-components/recipes/src/index.ts"], + "@fluentui/semantic-style-hooks-preview": [ + "packages/react-components/semantic-style-hooks-preview/library/src/index.ts" + ], + "@fluentui/semantic-style-hooks-preview-stories": [ + "packages/react-components/semantic-style-hooks-preview/stories/src/index.ts" + ], + "@fluentui/semantic-tokens": ["packages/semantic-tokens/src/index.ts"], "@fluentui/storybook-llms-extractor": ["tools/storybook-llms-extractor/src/index.ts"], "@fluentui/theme-designer": ["packages/react-components/theme-designer/src/index.ts"], "@fluentui/tokens": ["packages/tokens/src/index.ts"], diff --git a/tsconfig.base.wc.json b/tsconfig.base.wc.json index 8884bb799a86f9..2cc2e8bb4c18c1 100644 --- a/tsconfig.base.wc.json +++ b/tsconfig.base.wc.json @@ -14,7 +14,9 @@ "paths": { "@fluentui/chart-web-components": ["packages/charts/chart-web-components/src/index.ts"], "@fluentui/web-components": ["packages/web-components/src/index.ts"], - "@fluentui/tokens": ["packages/tokens/src/index.ts"] + "@fluentui/tokens": ["packages/tokens/src/index.ts"], + "@fluentui/semantic-tokens": ["packages/semantic-tokens/src/index.ts"], + "@fluentui/semantic-style-hooks-preview": ["packages/semantic-style-hooks-preview/src/index.ts"] } } }