From bbf09d20905aed679d97bc589811feb71717b10b Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 3 Apr 2025 10:38:40 -0700 Subject: [PATCH 01/66] Semantic-tokens: Add initial package (#34121) --- .github/CODEOWNERS | 6 ++ ...-ab69ccc6-b777-4bb6-909a-c406cc6406d2.json | 7 ++ nx.json | 1 + packages/semantic-tokens/.babelrc.json | 3 + packages/semantic-tokens/.eslintrc.json | 12 ++++ packages/semantic-tokens/.swcrc | 32 +++++++++ packages/semantic-tokens/CHANGELOG.json | 4 ++ packages/semantic-tokens/CHANGELOG.md | 5 ++ packages/semantic-tokens/LICENSE | 15 ++++ packages/semantic-tokens/README.md | 18 +++++ .../semantic-tokens/config/api-extractor.json | 6 ++ packages/semantic-tokens/config/tests.js | 1 + .../etc/semantic-tokens.api.md | 9 +++ packages/semantic-tokens/jest.config.js | 33 +++++++++ packages/semantic-tokens/package.json | 48 +++++++++++++ packages/semantic-tokens/playwright.config.ts | 41 +++++++++++ packages/semantic-tokens/project.json | 19 +++++ packages/semantic-tokens/scripts/server.js | 34 +++++++++ .../semantic-tokens/scripts/test-esm.html | 71 +++++++++++++++++++ packages/semantic-tokens/src/index.ts | 1 + .../src/native-esm.spec-e2e.ts | 8 +++ packages/semantic-tokens/tsconfig.e2e.json | 7 ++ packages/semantic-tokens/tsconfig.json | 33 +++++++++ packages/semantic-tokens/tsconfig.lib.json | 16 +++++ packages/semantic-tokens/tsconfig.spec.json | 9 +++ tsconfig.base.all.json | 1 + tsconfig.base.json | 1 + tsconfig.base.wc.json | 3 +- 28 files changed, 443 insertions(+), 1 deletion(-) create mode 100644 change/@fluentui-semantic-tokens-ab69ccc6-b777-4bb6-909a-c406cc6406d2.json create mode 100644 packages/semantic-tokens/.babelrc.json create mode 100644 packages/semantic-tokens/.eslintrc.json create mode 100644 packages/semantic-tokens/.swcrc create mode 100644 packages/semantic-tokens/CHANGELOG.json create mode 100644 packages/semantic-tokens/CHANGELOG.md create mode 100644 packages/semantic-tokens/LICENSE create mode 100644 packages/semantic-tokens/README.md create mode 100644 packages/semantic-tokens/config/api-extractor.json create mode 100644 packages/semantic-tokens/config/tests.js create mode 100644 packages/semantic-tokens/etc/semantic-tokens.api.md create mode 100644 packages/semantic-tokens/jest.config.js create mode 100644 packages/semantic-tokens/package.json create mode 100644 packages/semantic-tokens/playwright.config.ts create mode 100644 packages/semantic-tokens/project.json create mode 100644 packages/semantic-tokens/scripts/server.js create mode 100644 packages/semantic-tokens/scripts/test-esm.html create mode 100644 packages/semantic-tokens/src/index.ts create mode 100644 packages/semantic-tokens/src/native-esm.spec-e2e.ts create mode 100644 packages/semantic-tokens/tsconfig.e2e.json create mode 100644 packages/semantic-tokens/tsconfig.json create mode 100644 packages/semantic-tokens/tsconfig.lib.json create mode 100644 packages/semantic-tokens/tsconfig.spec.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 08d350c62ac75..6bc3c7f3db4fc 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -275,8 +275,14 @@ 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 +<<<<<<< HEAD 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/semantic-tokens @microsoft/xc-uxe +packages/react-components/react-tags/library @microsoft/cxe-prg @microsoft/teams-prg +packages/react-components/react-tags/stories @microsoft/cxe-prg @microsoft/teams-prg +>>>>>>> 48fdc34685 (Semantic-tokens: Add initial package (#34121)) packages/react-components/react-migration-v0-v9/library @microsoft/teams-prg packages/react-components/react-migration-v0-v9/stories @microsoft/teams-prg packages/react-components/react-datepicker-compat/library @microsoft/cxe-prg @ValentinaKozlova 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 0000000000000..58168853267ce --- /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 f81e1f589f7ac..9620d453ccae7 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/semantic-tokens/.babelrc.json b/packages/semantic-tokens/.babelrc.json new file mode 100644 index 0000000000000..38bf1f7a945cf --- /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 0000000000000..80ca7022e8d9b --- /dev/null +++ b/packages/semantic-tokens/.eslintrc.json @@ -0,0 +1,12 @@ +{ + "extends": ["plugin:@fluentui/eslint-plugin/react"], + "root": true, + "rules": { + "no-restricted-imports": [ + "error", + { + "patterns": ["@fluentui/*", "react", "react-dom"] + } + ] + } +} diff --git a/packages/semantic-tokens/.swcrc b/packages/semantic-tokens/.swcrc new file mode 100644 index 0000000000000..80bbb318befca --- /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 0000000000000..22e8744cb2913 --- /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 0000000000000..14e9a0692dd61 --- /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 0000000000000..2a9bf0a68d0e7 --- /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 0000000000000..f93c32e7bd93c --- /dev/null +++ b/packages/semantic-tokens/README.md @@ -0,0 +1,18 @@ +# @fluentui/semantic-tokens + +**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 0000000000000..02b450759ae91 --- /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 0000000000000..2e211ae9e2142 --- /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 0000000000000..abbd875f220e1 --- /dev/null +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -0,0 +1,9 @@ +## 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 + +// (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 0000000000000..8360c356c1c5a --- /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 0000000000000..123bfab2f2c16 --- /dev/null +++ b/packages/semantic-tokens/package.json @@ -0,0 +1,48 @@ +{ + "name": "@fluentui/semantic-tokens", + "version": "0.0.0-alpha.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": "npx ts-node scripts/tokenGen.ts", + "generate-legacy-tokens": "npx 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 0000000000000..83dee12790dc5 --- /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 0000000000000..28d906bd209be --- /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/server.js b/packages/semantic-tokens/scripts/server.js new file mode 100644 index 0000000000000..02faf5439eb8d --- /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 0000000000000..4bb12e0d739e5 --- /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/src/index.ts b/packages/semantic-tokens/src/index.ts new file mode 100644 index 0000000000000..cb0ff5c3b541f --- /dev/null +++ b/packages/semantic-tokens/src/index.ts @@ -0,0 +1 @@ +export {}; 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 0000000000000..b7223455f1039 --- /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/tsconfig.e2e.json b/packages/semantic-tokens/tsconfig.e2e.json new file mode 100644 index 0000000000000..8296283fbc75c --- /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 0000000000000..479e95aadcbcc --- /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 0000000000000..050276d9ee283 --- /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"] +} diff --git a/packages/semantic-tokens/tsconfig.spec.json b/packages/semantic-tokens/tsconfig.spec.json new file mode 100644 index 0000000000000..4d20fc98b71dd --- /dev/null +++ b/packages/semantic-tokens/tsconfig.spec.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "CommonJS", + "outDir": "dist", + "types": ["jest", "node"] + }, + "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"] +} diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json index dcf252cc41718..03a483b6d06bc 100644 --- a/tsconfig.base.all.json +++ b/tsconfig.base.all.json @@ -251,6 +251,7 @@ "@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/semantic-tokens": ["packages/semantic-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"] diff --git a/tsconfig.base.json b/tsconfig.base.json index c06a4a7ed7364..08b21d52b9514 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -205,6 +205,7 @@ ], "@fluentui/recipes": ["packages/react-components/recipes/src/index.ts"], "@fluentui/storybook-llms-extractor": ["tools/storybook-llms-extractor/src/index.ts"], + "@fluentui/semantic-tokens": ["packages/semantic-tokens/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"], diff --git a/tsconfig.base.wc.json b/tsconfig.base.wc.json index 8884bb799a86f..d86ffaf7df1f1 100644 --- a/tsconfig.base.wc.json +++ b/tsconfig.base.wc.json @@ -14,7 +14,8 @@ "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"] } } } From 9ce61511863de610b61111c6ea6b13470003e28b Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Fri, 11 Apr 2025 09:28:01 -0700 Subject: [PATCH 02/66] Semantic-tokens: Generation Scripts (#34159) --- packages/semantic-tokens/.eslintrc.json | 2 +- packages/semantic-tokens/package.json | 9 +- .../scripts/fluentOverrides.ts | 28 + .../semantic-tokens/scripts/token.types.ts | 16 + packages/semantic-tokens/scripts/tokenGen.ts | 277 + packages/semantic-tokens/scripts/tokens.json | 13131 ++++++++++++++++ packages/semantic-tokens/tsconfig.lib.json | 2 +- .../utils/chopLastCamelCasePart.test.ts | 13 + .../utils/chopLastCamelCasePart.ts | 6 + .../utils/cleanFstTokenName.test.ts | 22 + .../utils/cleanFstTokenName.ts | 8 + .../utils/dedupeShadowTokens.test.ts | 132 + .../utils/dedupeShadowTokens.ts | 32 + .../utils/escapeInlineToken.test.ts | 7 + .../utils/escapeInlineToken.ts | 3 + packages/semantic-tokens/utils/index.ts | 6 + .../utils/removeLastDelimiter.test.ts | 14 + .../utils/removeLastDelimiter.ts | 8 + .../semantic-tokens/utils/toCamelCase.test.ts | 8 + packages/semantic-tokens/utils/toCamelCase.ts | 13 + 20 files changed, 13730 insertions(+), 7 deletions(-) create mode 100644 packages/semantic-tokens/scripts/fluentOverrides.ts create mode 100644 packages/semantic-tokens/scripts/token.types.ts create mode 100644 packages/semantic-tokens/scripts/tokenGen.ts create mode 100644 packages/semantic-tokens/scripts/tokens.json create mode 100644 packages/semantic-tokens/utils/chopLastCamelCasePart.test.ts create mode 100644 packages/semantic-tokens/utils/chopLastCamelCasePart.ts create mode 100644 packages/semantic-tokens/utils/cleanFstTokenName.test.ts create mode 100644 packages/semantic-tokens/utils/cleanFstTokenName.ts create mode 100644 packages/semantic-tokens/utils/dedupeShadowTokens.test.ts create mode 100644 packages/semantic-tokens/utils/dedupeShadowTokens.ts create mode 100644 packages/semantic-tokens/utils/escapeInlineToken.test.ts create mode 100644 packages/semantic-tokens/utils/escapeInlineToken.ts create mode 100644 packages/semantic-tokens/utils/index.ts create mode 100644 packages/semantic-tokens/utils/removeLastDelimiter.test.ts create mode 100644 packages/semantic-tokens/utils/removeLastDelimiter.ts create mode 100644 packages/semantic-tokens/utils/toCamelCase.test.ts create mode 100644 packages/semantic-tokens/utils/toCamelCase.ts diff --git a/packages/semantic-tokens/.eslintrc.json b/packages/semantic-tokens/.eslintrc.json index 80ca7022e8d9b..3bb2e2adabc30 100644 --- a/packages/semantic-tokens/.eslintrc.json +++ b/packages/semantic-tokens/.eslintrc.json @@ -5,7 +5,7 @@ "no-restricted-imports": [ "error", { - "patterns": ["@fluentui/*", "react", "react-dom"] + "patterns": ["react", "react-dom"] } ] } diff --git a/packages/semantic-tokens/package.json b/packages/semantic-tokens/package.json index 123bfab2f2c16..66e041d13e1ca 100644 --- a/packages/semantic-tokens/package.json +++ b/packages/semantic-tokens/package.json @@ -13,11 +13,11 @@ "license": "MIT", "devDependencies": { "@fluentui/eslint-plugin": "*", - "@fluentui/scripts-api-extractor": "*", - "@fluentui/tokens": ">=1.0.0-alpha" + "@fluentui/scripts-api-extractor": "*" }, "dependencies": { - "@swc/helpers": "^0.5.1" + "@swc/helpers": "^0.5.1", + "@fluentui/tokens": "1.0.0-alpha.21" }, "beachball": { "disallowedChangeTypes": [ @@ -42,7 +42,6 @@ "lib-commonjs" ], "scripts": { - "generate-tokens": "npx ts-node scripts/tokenGen.ts", - "generate-legacy-tokens": "npx ts-node scripts/legacyTokens.ts" + "generate-tokens": "ts-node scripts/tokenGen.ts" } } diff --git a/packages/semantic-tokens/scripts/fluentOverrides.ts b/packages/semantic-tokens/scripts/fluentOverrides.ts new file mode 100644 index 0000000000000..c7823f6698315 --- /dev/null +++ b/packages/semantic-tokens/scripts/fluentOverrides.ts @@ -0,0 +1,28 @@ +export type FluentOverrideValue = + | { + f2Token: string; + rawValue?: never; + } + | { + f2Token?: never; + rawValue: string; + }; + +export type FluentOverrides = Record; + +export const fluentOverrides: FluentOverrides = { + ctrlFocusOuterStroke: { + f2Token: 'colorStrokeFocus2', + }, + ctrlLinkForegroundBrandRest: { f2Token: 'colorBrandForegroundLink' }, + textStyleDefaultRegularFontfamily: { f2Token: 'fontFamilyBase' }, + textGlobalBody3Fontsize: { f2Token: 'fontSizeBase300' }, + textStyleDefaultRegularWeight: { f2Token: 'fontWeightRegular' }, + strokewidthDefault: { f2Token: 'strokeWidthThin' }, + ctrlLinkForegroundBrandHover: { f2Token: 'colorBrandForegroundLinkHover' }, + ctrlLinkForegroundBrandPressed: { f2Token: 'colorBrandForegroundLinkPressed' }, + ctrlLinkForegroundNeutralRest: { f2Token: 'colorNeutralForeground2' }, + ctrlLinkForegroundNeutralPressed: { f2Token: 'colorNeutralForeground2Pressed' }, + ctrlLinkForegroundNeutralHover: { f2Token: 'colorNeutralForeground2Hover' }, + foregroundCtrlNeutralPrimaryDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, +}; diff --git a/packages/semantic-tokens/scripts/token.types.ts b/packages/semantic-tokens/scripts/token.types.ts new file mode 100644 index 0000000000000..0c17e6a9082c9 --- /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 0000000000000..4648785675cf5 --- /dev/null +++ b/packages/semantic-tokens/scripts/tokenGen.ts @@ -0,0 +1,277 @@ +/* + * 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 './fluentOverrides'; +import type { FluentOverrideValue, FluentOverrides } from './fluentOverrides'; +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 = {}; + +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 `\$\{tokens.${token.f2Token}\}`; + } else { + // we only have a raw value so we should print it directly. + return `${token.rawValue}`; + } +}; + +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 addOptionalTokenImport = (data: string) => { + if (data.includes('tokens.')) { + const esLintIgnore = `// eslint-disable-next-line no-restricted-imports\n`; + const tokenImport = `import { tokens } from '@fluentui/tokens';\n`; + return esLintIgnore + tokenImport + data; + } + return data; +}; + +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 (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 tokenSemanticRef = + tokenData.fst_reference.length > 0 ? toCamelCase(cleanFstTokenName(tokenData.fst_reference)) + 'Raw' : null; + + const fluentFallback = 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 (token.includes('(figma only)')) { + // 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); + } + } + } + + // Add all generated token files + const tokens = { + optional: optionalTokens, + control: controlTokens, + nullable: nullableTokens, + }; + for (const [tokensCategory, _tokens] of Object.entries(tokens)) { + const filePath = path.join(__dirname, `../src/${tokensCategory}/tokens.ts`); + writeDirectoryFile(filePath, addOptionalTokenImport(_tokens)); + } + + for (const [component, _tokens] of Object.entries(componentTokens)) { + const componentTokensPath = path.join(__dirname, `../src/components/${component}/tokens.ts`); + writeDirectoryFile(componentTokensPath, addOptionalTokenImport(_tokens)); + } + + // Add import statements + project.getSourceFiles().forEach(sourceFile => { + 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(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(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 0000000000000..aa4c5103c0fb9 --- /dev/null +++ b/packages/semantic-tokens/scripts/tokens.json @@ -0,0 +1,13131 @@ +{ + "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-fontsize" + }, + "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-lineheight" + }, + "textGlobalDisplay2Fontsize": { + "no": 3, + "name": "text/global/display2/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-global-display2-fontsize" + }, + "textGlobalDisplay2Lineheight": { + "no": 4, + "name": "text/global/display2/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-global-display2-lineheight" + }, + "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-fontsize" + }, + "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-lineheight" + }, + "textGlobalTitle2Fontsize": { + "no": 7, + "name": "text/global/title2/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-global-title2-fontsize" + }, + "textGlobalTitle2Lineheight": { + "no": 8, + "name": "text/global/title2/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-global-title2-lineheight" + }, + "textGlobalSubtitle1Fontsize": { + "no": 9, + "name": "text/global/subtitle1/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Inline drawer", "Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-global-subtitle1-fontsize" + }, + "textGlobalSubtitle1Lineheight": { + "no": 10, + "name": "text/global/subtitle1/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Inline drawer", "Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-global-subtitle1-lineheight" + }, + "textGlobalSubtitle2Fontsize": { + "no": 11, + "name": "text/global/subtitle2/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-global-subtitle2-fontsize" + }, + "textGlobalSubtitle2Lineheight": { + "no": 12, + "name": "text/global/subtitle2/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Dialog"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-global-subtitle2-lineheight" + }, + "textGlobalBody1Fontsize": { + "no": 13, + "name": "text/global/body1/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-global-body1-fontsize" + }, + "textGlobalBody1Lineheight": { + "no": 14, + "name": "text/global/body1/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-global-body1-lineheight" + }, + "textGlobalBody2Fontsize": { + "no": 15, + "name": "text/global/body2/fontSize", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Field"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-global-body2-fontsize" + }, + "textGlobalBody2Lineheight": { + "no": 16, + "name": "text/global/body2/lineHeight", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Field"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-text-global-body2-lineheight" + }, + "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-fontsize" + }, + "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-lineheight" + }, + "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-fontsize" + }, + "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-lineheight" + }, + "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-fontsize" + }, + "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-lineheight" + }, + "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-fontfamily" + }, + "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-letterspacing" + }, + "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-fontfamily" + }, + "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-letterspacing" + }, + "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-fontfamily" + }, + "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-letterspacing" + }, + "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-fontfamily" + }, + "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-letterspacing" + }, + "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-fontfamily" + }, + "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-letterspacing" + }, + "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-fontfamily" + }, + "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-letterspacing" + }, + "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-fontfamily" + }, + "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-letterspacing" + }, + "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-fontfamily" + }, + "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-letterspacing" + }, + "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-dataviz-regular-fontfamily" + }, + "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-dataviz-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-dataviz-regular-letterspacing" + }, + "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-dataviz-header-fontfamily" + }, + "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-dataviz-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-dataviz-header-letterspacing" + }, + "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-dataviz-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-fontfamily" + }, + "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-letterspacing" + }, + "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-fontfamily" + }, + "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-letterspacing" + }, + "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-pageheader-fontsize" + }, + "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-pageheader-lineheight" + }, + "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-sectionheader-fontsize" + }, + "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-sectionheader-lineheight" + }, + "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-subsectionheader-fontsize" + }, + "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-subsectionheader-lineheight" + }, + "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-readingbody-fontsize" + }, + "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-readingbody-lineheight" + }, + "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-itemheader-fontsize" + }, + "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-itemheader-lineheight" + }, + "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-itembody-fontsize" + }, + "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-itembody-lineheight" + }, + "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-fontsize" + }, + "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-lineheight" + }, + "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-fontsize" + }, + "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-lineheight" + }, + "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-pageheader-fontsize" + }, + "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-pageheader-lineheight" + }, + "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-sectionheader-fontsize" + }, + "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-sectionheader-lineheight" + }, + "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-subsectionheader-fontsize" + }, + "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-subsectionheader-lineheight" + }, + "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-readingbody-fontsize" + }, + "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-readingbody-lineheight" + }, + "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-itemheader-fontsize" + }, + "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-itemheader-lineheight" + }, + "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-itembody-fontsize" + }, + "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-itembody-lineheight" + }, + "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-fontsize" + }, + "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-lineheight" + }, + "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-fontsize" + }, + "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-lineheight" + }, + "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-pageheader-fontsize" + }, + "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-pageheader-lineheight" + }, + "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-sectionheader-fontsize" + }, + "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-sectionheader-lineheight" + }, + "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-subsectionheader-fontsize" + }, + "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-subsectionheader-lineheight" + }, + "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-readingbody-fontsize" + }, + "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-readingbody-lineheight" + }, + "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-itemheader-fontsize" + }, + "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-itemheader-lineheight" + }, + "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-itembody-fontsize" + }, + "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-itembody-lineheight" + }, + "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-fontsize" + }, + "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-lineheight" + }, + "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-fontsize" + }, + "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-lineheight" + }, + "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-iconfigmaonly" + }, + "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-iconsecondary" + }, + "textCtrlWeightSelected": { + "no": 120, + "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": 121, + "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": 122, + "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": 123, + "name": "size/ctrl-lg/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-lg-default" + }, + "sizeCtrlLgIcon": { + "no": 124, + "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": 125, + "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-iconfigmaonly" + }, + "sizeCtrlLgIconFigmaonly": { + "no": 126, + "name": "size/ctrl-lg/icon(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-size-ctrl-lg-iconfigmaonly" + }, + "paddingContentAlignDefault": { + "no": 127, + "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": 128, + "name": "padding/content/align/outdent-iconOnSubtle", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-align-outdent-icononsubtle" + }, + "paddingContentAlignOutdentTextonsubtle": { + "no": 129, + "name": "padding/content/align/outdent-textOnSubtle", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-align-outdent-textonsubtle" + }, + "paddingContentNone": { + "no": 130, + "name": "padding/content/none", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-none" + }, + "paddingContentXxsmall": { + "no": 131, + "name": "padding/content/xxSmall", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-xxsmall" + }, + "paddingContentXsmall": { + "no": 132, + "name": "padding/content/xSmall", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-xsmall" + }, + "paddingContentSmall": { + "no": 133, + "name": "padding/content/small", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-small" + }, + "paddingContentMedium": { + "no": 134, + "name": "padding/content/medium", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-medium" + }, + "paddingContentLarge": { + "no": 135, + "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": 136, + "name": "padding/content/xLarge", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-xlarge" + }, + "paddingContentXxlarge": { + "no": 137, + "name": "padding/content/xxLarge", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-xxlarge" + }, + "paddingContentXxxlarge": { + "no": 138, + "name": "padding/content/xxxLarge", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-content-xxxlarge" + }, + "paddingToolbarInside": { + "no": 139, + "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": 140, + "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": 141, + "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": 142, + "name": "padding/card/nestedImage", + "fst_reference": "padding/content/align/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Image"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-card-nestedimage" + }, + "paddingCtrlHorizontalDefault": { + "no": 143, + "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": 144, + "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-icononly" + }, + "paddingCtrlTexttop": { + "no": 145, + "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-texttop" + }, + "paddingCtrlTextbottom": { + "no": 146, + "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-textbottom" + }, + "paddingCtrlTextside": { + "no": 147, + "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-textside" + }, + "paddingCtrlTonestedcontrol": { + "no": 148, + "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-tonestedcontrol" + }, + "paddingCtrlSmHorizontalDefault": { + "no": 149, + "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": 150, + "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-icononly" + }, + "paddingCtrlSmTexttop": { + "no": 151, + "name": "padding/ctrl-sm/textTop", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-sm-texttop" + }, + "paddingCtrlSmTextbottom": { + "no": 152, + "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-textbottom" + }, + "paddingCtrlSmTonestedcontrol": { + "no": 153, + "name": "padding/ctrl-sm/toNestedControl", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-sm-tonestedcontrol" + }, + "paddingCtrlLgHorizontalDefault": { + "no": 154, + "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": 155, + "name": "padding/ctrl-lg/horizontal-iconOnly", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-lg-horizontal-icononly" + }, + "paddingCtrlLgTexttop": { + "no": 156, + "name": "padding/ctrl-lg/textTop", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["FAB", "MessageBar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-lg-texttop" + }, + "paddingCtrlLgTextbottom": { + "no": 157, + "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-textbottom" + }, + "paddingCtrlLgTonestedcontrol": { + "no": 158, + "name": "padding/ctrl-lg/toNestedControl", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-padding-ctrl-lg-tonestedcontrol" + }, + "gapBetweenContentNone": { + "no": 159, + "name": "gap/between/content/none", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-none" + }, + "gapBetweenContentXxsmall": { + "no": 160, + "name": "gap/between/content/xxSmall", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Field"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-xxsmall" + }, + "gapBetweenContentXsmall": { + "no": 161, + "name": "gap/between/content/xSmall", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-xsmall" + }, + "gapBetweenContentSmall": { + "no": 162, + "name": "gap/between/content/small", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-small" + }, + "gapBetweenCtrlDefault": { + "no": 163, + "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": 164, + "name": "gap/between/content/medium", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-medium" + }, + "gapBetweenContentLarge": { + "no": 165, + "name": "gap/between/content/large", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-large" + }, + "gapBetweenContentXlarge": { + "no": 166, + "name": "gap/between/content/xLarge", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-xlarge" + }, + "gapBetweenCtrlNested": { + "no": 167, + "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" + }, + "gapBetweenContentXxlarge": { + "no": 168, + "name": "gap/between/content/xxLarge", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-content-xxlarge" + }, + "gapBetweenCtrlLgDefault": { + "no": 169, + "name": "gap/between/ctrl-lg/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-between-ctrl-lg-default" + }, + "gapTextSmall": { + "no": 170, + "name": "gap/text-small", + "fst_reference": "gap/between/content/xxSmall", + "optional": true, + "nullable": false, + "description": "", + "components": ["Dialog", "Field", "MessageBar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-text-small" + }, + "gapTextLarge": { + "no": 171, + "name": "gap/text-large", + "fst_reference": "gap/between/content/xSmall", + "optional": true, + "nullable": false, + "description": "", + "components": ["MessageBar"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-text-large" + }, + "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" + }, + "gapBetweenCtrlSmDefault": { + "no": 173, + "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": 174, + "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" + }, + "gapList": { + "no": 175, + "name": "gap/list", + "fst_reference": "gap/between/content/xxSmall", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-list" + }, + "gapCard": { + "no": 176, + "name": "gap/card", + "fst_reference": "gap/between/content/medium", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-card" + }, + "gapInsideCtrlDefault": { + "no": 177, + "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": 178, + "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": 179, + "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-tosecondaryicon" + }, + "gapInsideCtrlLgDefault": { + "no": 180, + "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": 181, + "name": "gap/inside/ctrl-lg/toSecondaryIcon", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-inside-ctrl-lg-tosecondaryicon" + }, + "gapInsideCtrlTosecondaryicon": { + "no": 182, + "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-tosecondaryicon" + }, + "gapInsideCtrlTolabel": { + "no": 183, + "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-tolabel" + }, + "gapInsideCtrlSmTolabel": { + "no": 184, + "name": "gap/inside/ctrl-sm/toLabel", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-inside-ctrl-sm-tolabel" + }, + "gapInsideCtrlLgTolabel": { + "no": 185, + "name": "gap/inside/ctrl-lg/toLabel", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-gap-inside-ctrl-lg-tolabel" + }, + "cornerCircular": { + "no": 186, + "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": 187, + "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-strokewidth-default" + }, + "strokewidthDividerDefault": { + "no": 188, + "name": "strokeWidth/divider/default", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer", "Divider"], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-strokewidth-divider-default" + }, + "strokewidthDividerStrong": { + "no": 189, + "name": "strokeWidth/divider/strong", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-strokewidth-divider-strong" + }, + "strokewidthCtrlOutlineRest": { + "no": 190, + "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-strokewidth-ctrl-outline-rest" + }, + "strokewidthCtrlOutlineHover": { + "no": 191, + "name": "strokeWidth/ctrl/outline/hover", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-strokewidth-ctrl-outline-hover" + }, + "strokewidthCtrlOutlinePressed": { + "no": 192, + "name": "strokeWidth/ctrl/outline/pressed", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-strokewidth-ctrl-outline-pressed" + }, + "strokewidthCtrlOutlineSelected": { + "no": 193, + "name": "strokeWidth/ctrl/outline/selected", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-strokewidth-ctrl-outline-selected" + }, + "strokewidthWindowDefault": { + "no": 194, + "name": "strokeWidth/window/default", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-strokewidth-window-default" + }, + "backgroundToolbar": { + "no": 195, + "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": 196, + "name": "background/smoke", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-smoke" + }, + "strokeLayer": { + "no": 197, + "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": 198, + "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": 199, + "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": 200, + "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": 201, + "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-onbrand-rest" + }, + "strokeCtrlOnbrandHover": { + "no": 202, + "name": "stroke/ctrl/onBrand/hover", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/color", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-onbrand-hover" + }, + "strokeCtrlOnbrandPressed": { + "no": 203, + "name": "stroke/ctrl/onBrand/pressed", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/color", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-onbrand-pressed" + }, + "strokeCtrlOnbrandDisabled": { + "no": 204, + "name": "stroke/ctrl/onBrand/disabled", + "fst_reference": "NULL/color", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "NULL/color", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-onbrand-disabled" + }, + "strokeCtrlOnbrandRestStop2": { + "no": 205, + "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-onbrand-reststop2" + }, + "strokeCtrlOnbrandHoverStop2": { + "no": 206, + "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-onbrand-hoverstop2" + }, + "strokeCtrlOnbrandPressedStop2": { + "no": 207, + "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-onbrand-pressedstop2" + }, + "strokeCtrlOnbrandDisabledStop2": { + "no": 208, + "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-onbrand-disabledstop2" + }, + "strokeCtrlOnneutralRest": { + "no": 209, + "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-onneutral-rest" + }, + "strokeCtrlOnneutralHover": { + "no": 210, + "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-onneutral-hover" + }, + "strokeCtrlOnneutralPressed": { + "no": 211, + "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-onneutral-pressed" + }, + "strokeCtrlOnneutralDisabled": { + "no": 212, + "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-onneutral-disabled" + }, + "strokeCtrlOnneutralRestStop2": { + "no": 213, + "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-onneutral-reststop2" + }, + "strokeCtrlOnneutralHoverStop2": { + "no": 214, + "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-onneutral-hoverstop2" + }, + "strokeCtrlOnneutralPressedStop2": { + "no": 215, + "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-onneutral-pressedstop2" + }, + "strokeCtrlOnneutralDisabledStop2": { + "no": 216, + "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-onneutral-disabledstop2" + }, + "strokeCtrlOnoutlineRest": { + "no": 217, + "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-onoutline-rest" + }, + "strokeCtrlOnoutlineHover": { + "no": 218, + "name": "stroke/ctrl/onOutline/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Hover", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-onoutline-hover" + }, + "strokeCtrlOnoutlinePressed": { + "no": 219, + "name": "stroke/ctrl/onOutline/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Stroke/1/Pressed", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-onoutline-pressed" + }, + "strokeCtrlOnoutlineDisabled": { + "no": 220, + "name": "stroke/ctrl/onOutline/disabled", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-stroke-ctrl-onoutline-disabled" + }, + "strokeCtrlOnoutlineRestStop2": { + "no": 221, + "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-onoutline-reststop2" + }, + "strokeCtrlOnoutlineHoverStop2": { + "no": 222, + "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-onoutline-hoverstop2" + }, + "strokeCtrlOnoutlinePressedStop2": { + "no": 223, + "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-onoutline-pressedstop2" + }, + "strokeCtrlOnoutlineDisabledStop2": { + "no": 224, + "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-onoutline-disabledstop2" + }, + "strokeCtrlOnsubtleRest": { + "no": 225, + "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-onsubtle-rest" + }, + "strokeCtrlOnsubtleHover": { + "no": 226, + "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-onsubtle-hover" + }, + "strokeCtrlOnsubtlePressed": { + "no": 227, + "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-onsubtle-pressed" + }, + "strokeCtrlOnsubtleDisabled": { + "no": 228, + "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-onsubtle-disabled" + }, + "strokeCtrlOnsubtleHoversplit": { + "no": 229, + "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-onsubtle-hoversplit" + }, + "strokeCtrlOnactivebrandRest": { + "no": 230, + "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-onactivebrand-rest" + }, + "strokeCtrlDividerOnbrand": { + "no": 231, + "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-onbrand" + }, + "strokeCtrlDividerOnbrandDisabled": { + "no": 232, + "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-onbrand-disabled" + }, + "strokeCtrlDividerOnneutral": { + "no": 233, + "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-onneutral" + }, + "strokeCtrlDividerOnneutralDisabled": { + "no": 234, + "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-onneutral-disabled" + }, + "strokeCtrlDividerOnoutline": { + "no": 235, + "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-onoutline" + }, + "strokeCtrlDividerOnoutlineDisabled": { + "no": 236, + "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-onoutline-disabled" + }, + "strokeCtrlDividerOnsubtle": { + "no": 237, + "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-onsubtle" + }, + "strokeCtrlDividerOnsubtleDisabled": { + "no": 238, + "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-onsubtle-disabled" + }, + "strokeCtrlDividerOnactivebrand": { + "no": 239, + "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-onactivebrand" + }, + "strokeCtrlDividerOnactivebrandDisabled": { + "no": 240, + "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-onactivebrand-disabled" + }, + "strokeCtrlOnactivebrandHover": { + "no": 241, + "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-onactivebrand-hover" + }, + "strokeCtrlOnactivebrandPressed": { + "no": 242, + "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-onactivebrand-pressed" + }, + "strokeCtrlOnactivebrandDisabled": { + "no": 243, + "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-onactivebrand-disabled" + }, + "strokeCtrlOnactivebrandRestStop2": { + "no": 244, + "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-onactivebrand-reststop2" + }, + "strokeCtrlOnactivebrandHoverStop2": { + "no": 245, + "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-onactivebrand-hoverstop2" + }, + "strokeCtrlOnactivebrandPressedStop2": { + "no": 246, + "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-onactivebrand-pressedstop2" + }, + "strokeCtrlOnactivebrandDisabledStop2": { + "no": 247, + "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-onactivebrand-disabledstop2" + }, + "strokeDividerDefault": { + "no": 248, + "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": 249, + "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": 250, + "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": 251, + "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": 252, + "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": 253, + "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-onprimary-rest" + }, + "strokeCardOnprimaryHover": { + "no": 254, + "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-onprimary-hover" + }, + "strokeCardOnprimaryPressed": { + "no": 255, + "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-onprimary-pressed" + }, + "strokeCardOnprimaryDisabled": { + "no": 256, + "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-onprimary-disabled" + }, + "strokeCardOnsecondaryRest": { + "no": 257, + "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-onsecondary-rest" + }, + "strokeCardOnsecondaryHover": { + "no": 258, + "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-onsecondary-hover" + }, + "strokeCardOnsecondaryPressed": { + "no": 259, + "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-onsecondary-pressed" + }, + "strokeCardOnsecondaryDisabled": { + "no": 260, + "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-onsecondary-disabled" + }, + "strokeWindowActive": { + "no": 261, + "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": 262, + "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": 263, + "name": "background/window/primary/(solid)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-primary-solid" + }, + "backgroundWindowPrimaryColorblend": { + "no": 264, + "name": "background/window/primary/(colorBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-primary-colorblend" + }, + "backgroundWindowPrimaryLumblend": { + "no": 265, + "name": "background/window/primary/(lumBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-primary-lumblend" + }, + "backgroundWindowSecondarySolid": { + "no": 266, + "name": "background/window/secondary/(solid)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-secondary-solid" + }, + "backgroundWindowSecondaryColorblend": { + "no": 267, + "name": "background/window/secondary/(colorBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-secondary-colorblend" + }, + "backgroundWindowSecondaryLumblend": { + "no": 268, + "name": "background/window/secondary/(lumBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-secondary-lumblend" + }, + "backgroundWindowTabbandColorblend": { + "no": 269, + "name": "background/window/tabBand/(colorBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-tabband-colorblend" + }, + "backgroundWindowTabbandLumblend": { + "no": 270, + "name": "background/window/tabBand/(lumBlend)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-tabband-lumblend" + }, + "backgroundWindowTabbandSolid": { + "no": 271, + "name": "background/window/tabBand/(solid)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-window-tabband-solid" + }, + "backgroundWebpagePrimary": { + "no": 272, + "name": "background/webPage/primary", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-webpage-primary" + }, + "backgroundWebpageSecondary": { + "no": 273, + "name": "background/webPage/secondary", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-webpage-secondary" + }, + "backgroundLayerPrimarySolid": { + "no": 274, + "name": "background/layer/primary(solid)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Background/1/Rest", + "exceptions": [], + "cssName": "--smtc-background-layer-primarysolid" + }, + "backgroundLayerPrimaryStop1": { + "no": 275, + "name": "background/layer/primary(stop1)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-layer-primarystop1" + }, + "backgroundLayerPrimaryStop2": { + "no": 276, + "name": "background/layer/primary(stop2)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-layer-primarystop2" + }, + "backgroundLayerPrimaryStop3": { + "no": 277, + "name": "background/layer/primary(stop3)", + "fst_reference": "background/layer/primary(solid)", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-layer-primarystop3" + }, + "backgroundLayerSecondary": { + "no": 278, + "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": 279, + "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": 280, + "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-onprimary-default-rest" + }, + "backgroundCardOnprimaryAltRest": { + "no": 281, + "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-onprimary-alt-rest" + }, + "backgroundCardOnprimaryAltHover": { + "no": 282, + "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-onprimary-alt-hover" + }, + "backgroundCardOnprimaryAltPressed": { + "no": 283, + "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-onprimary-alt-pressed" + }, + "backgroundCardOnprimaryAltDisabled": { + "no": 284, + "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-onprimary-alt-disabled" + }, + "backgroundCardOnprimaryDefaultHover": { + "no": 285, + "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-onprimary-default-hover" + }, + "backgroundCardOnprimaryDefaultPressed": { + "no": 286, + "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-onprimary-default-pressed" + }, + "backgroundCardOnprimaryDefaultDisabled": { + "no": 287, + "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-onprimary-default-disabled" + }, + "backgroundCardOnprimaryDefaultSelected": { + "no": 288, + "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-onprimary-default-selected" + }, + "backgroundFlyoutSolid": { + "no": 289, + "name": "background/flyout/(solid)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-background-flyout-solid" + }, + "backgroundCtrlBrandRest": { + "no": 290, + "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": 291, + "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": 292, + "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": 293, + "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": 294, + "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-activebrand-rest" + }, + "backgroundCtrlActivebrandHover": { + "no": 295, + "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-activebrand-hover" + }, + "backgroundCtrlActivebrandPressed": { + "no": 296, + "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-activebrand-pressed" + }, + "backgroundCtrlActivebrandDisabled": { + "no": 297, + "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-activebrand-disabled" + }, + "backgroundCtrlNeutralRest": { + "no": 298, + "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": 299, + "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": 300, + "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": 301, + "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": 302, + "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": 303, + "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": 304, + "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": 305, + "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": 306, + "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": 307, + "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-shapesafe-activebrand-rest" + }, + "backgroundCtrlShapesafeActivebrandDisabled": { + "no": 308, + "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-shapesafe-activebrand-disabled" + }, + "backgroundCtrlShapesafeNeutralRest": { + "no": 309, + "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-shapesafe-neutral-rest" + }, + "backgroundCtrlShapesafeNeutralHover": { + "no": 310, + "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-shapesafe-neutral-hover" + }, + "backgroundCtrlShapesafeNeutralPressed": { + "no": 311, + "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-shapesafe-neutral-pressed" + }, + "backgroundCtrlShapesafeNeutralDisabled": { + "no": 312, + "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-shapesafe-neutral-disabled" + }, + "backgroundCtrlSubtleHover": { + "no": 313, + "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": 314, + "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": 315, + "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": 316, + "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-hoversplit" + }, + "backgroundFlyoutLumblend": { + "no": 317, + "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-lumblend" + }, + "backgroundFlyoutColorblend": { + "no": 318, + "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-colorblend" + }, + "cornerZero": { + "no": 319, + "name": "corner/zero", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "None", + "exceptions": [], + "cssName": "--smtc-corner-zero" + }, + "cornerBezel": { + "no": 320, + "name": "corner/bezel", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-bezel" + }, + "cornerWindowDefault": { + "no": 321, + "name": "corner/window/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-window-default" + }, + "cornerFlyoutRest": { + "no": 322, + "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": 323, + "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": 324, + "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": 325, + "name": "corner/layer/default", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-layer-default" + }, + "cornerLayerIntersection": { + "no": 326, + "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": 327, + "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": 328, + "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": 329, + "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": 330, + "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": 331, + "name": "corner/image/onPage", + "fst_reference": "corner/card/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-image-onpage" + }, + "cornerCtrlRest": { + "no": 332, + "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": 333, + "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": 334, + "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": 335, + "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": 336, + "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": 337, + "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": 338, + "name": "corner/ctrl-lg/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-ctrl-lg-rest" + }, + "cornerCtrlLgHover": { + "no": 339, + "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": 340, + "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": 341, + "name": "corner/image/inCard", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Inline drawer", "Overlay drawer", "Image"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-corner-image-incard" + }, + "foregroundContentNeutralPrimary": { + "no": 342, + "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": 343, + "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": 344, + "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": 345, + "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": 346, + "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": 347, + "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": 348, + "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": 349, + "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": 350, + "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": 351, + "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": 352, + "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": 353, + "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-onneutral-rest" + }, + "foregroundCtrlIconOnneutralHover": { + "no": 354, + "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-onneutral-hover" + }, + "foregroundCtrlIconOnneutralPressed": { + "no": 355, + "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-onneutral-pressed" + }, + "foregroundCtrlIconOnneutralDisabled": { + "no": 356, + "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-onneutral-disabled" + }, + "foregroundCtrlIconOnoutlineRest": { + "no": 357, + "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-onoutline-rest" + }, + "foregroundCtrlIconOnoutlineHover": { + "no": 358, + "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-onoutline-hover" + }, + "foregroundCtrlIconOnoutlinePressed": { + "no": 359, + "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-onoutline-pressed" + }, + "foregroundCtrlIconOnoutlineDisabled": { + "no": 360, + "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-onoutline-disabled" + }, + "foregroundCtrlIconOnsubtleRest": { + "no": 361, + "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-onsubtle-rest" + }, + "foregroundCtrlIconOnsubtleHover": { + "no": 362, + "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-onsubtle-hover" + }, + "foregroundCtrlIconOnsubtlePressed": { + "no": 363, + "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-onsubtle-pressed" + }, + "foregroundCtrlIconOnsubtleDisabled": { + "no": 364, + "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-onsubtle-disabled" + }, + "foregroundCtrlBrandRest": { + "no": 365, + "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": 366, + "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": 367, + "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": 368, + "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": 369, + "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-onbrand-rest" + }, + "foregroundCtrlOnbrandHover": { + "no": 370, + "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-onbrand-hover" + }, + "foregroundCtrlOnbrandPressed": { + "no": 371, + "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-onbrand-pressed" + }, + "foregroundCtrlOnbrandDisabled": { + "no": 372, + "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-onbrand-disabled" + }, + "foregroundCtrlActivebrandRest": { + "no": 373, + "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-activebrand-rest" + }, + "foregroundCtrlActivebrandHover": { + "no": 374, + "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-activebrand-hover" + }, + "foregroundCtrlActivebrandPressed": { + "no": 375, + "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-activebrand-pressed" + }, + "foregroundCtrlActivebrandDisabled": { + "no": 376, + "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-activebrand-disabled" + }, + "foregroundCtrlOnactivebrandRest": { + "no": 377, + "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-onactivebrand-rest" + }, + "foregroundCtrlOnactivebrandHover": { + "no": 378, + "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-onactivebrand-hover" + }, + "foregroundCtrlOnactivebrandPressed": { + "no": 379, + "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-onactivebrand-pressed" + }, + "foregroundCtrlOnactivebrandDisabled": { + "no": 380, + "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-onactivebrand-disabled" + }, + "foregroundCtrlOnoutlineRest": { + "no": 381, + "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-onoutline-rest" + }, + "foregroundCtrlOnoutlineHover": { + "no": 382, + "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-onoutline-hover" + }, + "foregroundCtrlOnoutlinePressed": { + "no": 383, + "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-onoutline-pressed" + }, + "foregroundCtrlOnoutlineDisabled": { + "no": 384, + "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-onoutline-disabled" + }, + "foregroundCtrlOnsubtleRest": { + "no": 385, + "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-onsubtle-rest" + }, + "foregroundCtrlOnsubtleHover": { + "no": 386, + "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-onsubtle-hover" + }, + "foregroundCtrlOnsubtlePressed": { + "no": 387, + "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-onsubtle-pressed" + }, + "foregroundCtrlOnsubtleDisabled": { + "no": 388, + "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-onsubtle-disabled" + }, + "foregroundCtrlOntransparentRest": { + "no": 389, + "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-ontransparent-rest" + }, + "foregroundCtrlOntransparentHover": { + "no": 390, + "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-ontransparent-hover" + }, + "foregroundCtrlOntransparentPressed": { + "no": 391, + "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-ontransparent-pressed" + }, + "foregroundCtrlOntransparentDisabled": { + "no": 392, + "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-ontransparent-disabled" + }, + "foregroundCtrlHintDefault": { + "no": 393, + "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": 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" + }, + "shadowCardHoverKeyX": { + "no": 398, + "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": 399, + "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": 400, + "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": 401, + "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": 402, + "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": 403, + "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": 404, + "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": 405, + "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": 406, + "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": 407, + "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": 408, + "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": 409, + "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": 410, + "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": 411, + "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": 412, + "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": 413, + "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": 414, + "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": 415, + "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": 416, + "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": 417, + "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": 418, + "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": 419, + "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": 420, + "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": 421, + "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": 422, + "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-ondrag-key-y" + }, + "shadowCtrlOndragKeyX": { + "no": 423, + "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-ondrag-key-x" + }, + "shadowCtrlOndragKeyBlur": { + "no": 424, + "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-ondrag-key-blur" + }, + "shadowCtrlOndragKeyColor": { + "no": 425, + "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-ondrag-key-color" + }, + "shadowCtrlOndragAmbientY": { + "no": 426, + "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-ondrag-ambient-y" + }, + "shadowCtrlOndragAmbientX": { + "no": 427, + "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-ondrag-ambient-x" + }, + "shadowCtrlOndragAmbientBlur": { + "no": 428, + "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-ondrag-ambient-blur" + }, + "shadowCtrlOndragAmbientColor": { + "no": 429, + "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-ondrag-ambient-color" + }, + "shadowLayerKeyX": { + "no": 430, + "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": 431, + "name": "shadow/toolbar/(key)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-key-x" + }, + "shadowToolbarKeyY": { + "no": 432, + "name": "shadow/toolbar/(key)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-key-y" + }, + "shadowToolbarKeyBlur": { + "no": 433, + "name": "shadow/toolbar/(key)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-key-blur" + }, + "shadowToolbarKeyColor": { + "no": 434, + "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": 435, + "name": "shadow/toolbar/(ambient)/(x)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-ambient-x" + }, + "shadowToolbarAmbientY": { + "no": 436, + "name": "shadow/toolbar/(ambient)/(y)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-ambient-y" + }, + "shadowToolbarAmbientBlur": { + "no": 437, + "name": "shadow/toolbar/(ambient)/(blur)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-ambient-blur" + }, + "shadowToolbarAmbientColor": { + "no": 438, + "name": "shadow/toolbar/(ambient)/(color)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-shadow-toolbar-ambient-color" + }, + "shadowLayerKeyY": { + "no": 439, + "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": 440, + "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": 441, + "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": 442, + "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": 443, + "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": 444, + "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": 445, + "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": 446, + "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": 447, + "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-colorblend" + }, + "materialAcrylicDefaultLumblend": { + "no": 448, + "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-lumblend" + }, + "materialAcrylicBlur": { + "no": 449, + "name": "material/acrylic/blur", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Overlay drawer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-material-acrylic-blur" + }, + "materialMicaBlur": { + "no": 450, + "name": "material/mica/blur", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-material-mica-blur" + }, + "materialMicaDefaultSolid": { + "no": 451, + "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": 452, + "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-colorblend" + }, + "materialMicaDefaultLumblend": { + "no": 453, + "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-lumblend" + }, + "materialMicaDarkerSolid": { + "no": 454, + "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": 455, + "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-colorblend" + }, + "materialMicaDarkerLumblend": { + "no": 456, + "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-lumblend" + }, + "materialMicaThinSolid": { + "no": 457, + "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": 458, + "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-colorblend" + }, + "materialMicaThinLumblend": { + "no": 459, + "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-lumblend" + }, + "ctrlTooltipShadowKeyX": { + "no": 460, + "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": 461, + "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": 462, + "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": 463, + "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": 464, + "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": 465, + "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": 466, + "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": 467, + "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": 468, + "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-icontheme-ctrl-default-rest" + }, + "iconthemeCtrlDefaultHover": { + "no": 469, + "name": "iconTheme/ctrl/default/hover", + "fst_reference": "iconTheme/ctrl/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icontheme-ctrl-default-hover" + }, + "iconthemeCtrlDefaultPressed": { + "no": 470, + "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-icontheme-ctrl-default-pressed" + }, + "iconthemeCtrlDefaultSelected": { + "no": 471, + "name": "iconTheme/ctrl/default/selected", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Split button", "Button", "Lite filter"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icontheme-ctrl-default-selected" + }, + "iconthemeCtrlSubtleRest": { + "no": 472, + "name": "iconTheme/ctrl/subtle/rest", + "fst_reference": "iconTheme/ctrl/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icontheme-ctrl-subtle-rest" + }, + "iconthemeCtrlSubtleHover": { + "no": 473, + "name": "iconTheme/ctrl/subtle/hover", + "fst_reference": "iconTheme/ctrl/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icontheme-ctrl-subtle-hover" + }, + "iconthemeCtrlSubtlePressed": { + "no": 474, + "name": "iconTheme/ctrl/subtle/pressed", + "fst_reference": "iconTheme/ctrl/default/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icontheme-ctrl-subtle-pressed" + }, + "iconthemeCtrlSubtleSelected": { + "no": 475, + "name": "iconTheme/ctrl/subtle/selected", + "fst_reference": "iconTheme/ctrl/default/selected", + "optional": true, + "nullable": false, + "description": "", + "components": ["Split button"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-icontheme-ctrl-subtle-selected" + }, + "iconthemeCtrlChevronDefault": { + "no": 476, + "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-icontheme-ctrl-chevron-default" + }, + "iconthemeCtrlChevronSelected": { + "no": 477, + "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-icontheme-ctrl-chevron-selected" + }, + "ctrlAvatarSize": { + "no": 478, + "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": 479, + "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": 480, + "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": 481, + "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": 482, + "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": 483, + "name": "CTRL/avatar/presenceBadge/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Presence badge"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-presencebadge-size" + }, + "ctrlAvatarActiveringSize": { + "no": 484, + "name": "CTRL/avatar/activeRing/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-activering-size" + }, + "ctrlAvatarPresencebadgePaddingBottomrightoffset": { + "no": 485, + "name": "CTRL/avatar/presenceBadge/padding/bottomRightOffset", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-presencebadge-padding-bottomrightoffset" + }, + "ctrlAvatarCornerGroup": { + "no": 486, + "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": 487, + "name": "CTRL/avatar/activeRing/strokeWidth", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-activering-strokewidth" + }, + "ctrlAvatarPresencebadgeStrokewidth": { + "no": 488, + "name": "CTRL/avatar/presenceBadge/strokeWidth", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Presence badge"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-presencebadge-strokewidth" + }, + "ctrlAvatarTextFontsize": { + "no": 489, + "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-fontsize" + }, + "ctrlAvatarTextLineheight": { + "no": 490, + "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-lineheight" + }, + "ctrlAvatarTextPaddingTopoffset": { + "no": 491, + "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-topoffset" + }, + "ctrlAvatarActiveringStroke": { + "no": 492, + "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-activering-stroke" + }, + "ctrlAvatarShowcutout": { + "no": 493, + "name": "CTRL/avatar/showCutout", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-avatar-showcutout" + }, + "ctrlBadgeTextPaddingTop": { + "no": 494, + "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": 495, + "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": 496, + "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": 497, + "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": 498, + "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": 499, + "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": 500, + "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": 501, + "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": 502, + "name": "CTRL/badge/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-size" + }, + "ctrlBadgeCorner": { + "no": 503, + "name": "CTRL/badge/corner", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-corner" + }, + "ctrlBadgeIconSizeFigmaonly": { + "no": 504, + "name": "CTRL/badge/icon/size(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-icon-sizefigmaonly" + }, + "ctrlBadgeGap": { + "no": 505, + "name": "CTRL/badge/gap", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-gap" + }, + "ctrlBadgeIconSize": { + "no": 506, + "name": "CTRL/badge/icon/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-icon-size" + }, + "ctrlBadgePadding": { + "no": 507, + "name": "CTRL/badge/padding", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-padding" + }, + "ctrlBadgeSmSize": { + "no": 508, + "name": "CTRL/badge/sm/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-sm-size" + }, + "ctrlBadgeSmCorner": { + "no": 509, + "name": "CTRL/badge/sm/corner", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-sm-corner" + }, + "ctrlBadgeSmIconSizeFigmaonly": { + "no": 510, + "name": "CTRL/badge/sm/icon/size(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-sm-icon-sizefigmaonly" + }, + "ctrlBadgeSmIconSize": { + "no": 511, + "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": 512, + "name": "CTRL/badge/sm/padding", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-sm-padding" + }, + "ctrlBadgeLgSize": { + "no": 513, + "name": "CTRL/badge/lg/size", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-lg-size" + }, + "ctrlBadgeLgIconSizeFigmaonly": { + "no": 514, + "name": "CTRL/badge/lg/icon/size(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-lg-icon-sizefigmaonly" + }, + "ctrlBadgeLgIconSize": { + "no": 515, + "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": 516, + "name": "CTRL/badge/lg/corner", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-lg-corner" + }, + "ctrlBadgeLgPadding": { + "no": 517, + "name": "CTRL/badge/lg/padding", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-badge-lg-padding" + }, + "ctrlChoicePaddingHorizontal": { + "no": 518, + "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": 519, + "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": 520, + "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": 521, + "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": 522, + "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": 523, + "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": 524, + "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": 525, + "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": 526, + "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": 527, + "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": 528, + "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": 529, + "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": 530, + "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": 531, + "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": 532, + "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" + }, + "ctrlChoiceCheckboxIndeterminateHeight": { + "no": 533, + "name": "CTRL/choice/checkbox/indeterminate/height", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-checkbox-indeterminate-height" + }, + "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" + }, + "ctrlChoiceRadioCorner": { + "no": 535, + "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": 536, + "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" + }, + "ctrlChoiceRadioDotSizeRest": { + "no": 537, + "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": 538, + "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": 539, + "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" + }, + "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" + }, + "ctrlChoiceSwitchHeight": { + "no": 543, + "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": 544, + "name": "CTRL/choice/switch/width", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [" Switch"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-choice-switch-width" + }, + "ctrlChoiceSwitchThumbWidthRest": { + "no": 545, + "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": 546, + "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": 547, + "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": 548, + "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": 549, + "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": 550, + "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": 551, + "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": 552, + "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": 553, + "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": 554, + "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": 555, + "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" + }, + "ctrlChoiceSmBaseSize": { + "no": 556, + "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" + }, + "ctrlChoiceSmCheckboxCorner": { + "no": 557, + "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" + }, + "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" + }, + "ctrlChoiceSmCheckboxIconSizeFigmaonly": { + "no": 559, + "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-sizefigmaonly" + }, + "ctrlChoiceSmRadioDotSize": { + "no": 560, + "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": 561, + "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": 562, + "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": 563, + "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": 564, + "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": 565, + "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": 566, + "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": 567, + "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": 568, + "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": 569, + "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-sizefigmaonly" + }, + "ctrlChoiceLgRadioDotSizeRest": { + "no": 570, + "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": 571, + "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": 572, + "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": 573, + "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": 574, + "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": 575, + "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": 576, + "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": 577, + "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": 578, + "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": 579, + "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": 580, + "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": 581, + "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": 582, + "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": 583, + "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": 584, + "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": 585, + "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": 586, + "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": 587, + "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": 588, + "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": 589, + "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": 590, + "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": 591, + "name": "CTRL/divider/fixedLine/length", + "fst_reference": "padding/content/align/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-divider-fixedline-length" + }, + "ctrlDragBackgroundSolid": { + "no": 592, + "name": "CTRL/drag/background/(solid)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-drag-background-solid" + }, + "ctrlDragBackgroundColorblend": { + "no": 593, + "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-colorblend" + }, + "ctrlDragBackgroundLumblend": { + "no": 594, + "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-lumblend" + }, + "ctrlFabBackgroundRest": { + "no": 595, + "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": 596, + "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-positionfigmaonly" + }, + "ctrlFocusInnerStrokewidth": { + "no": 597, + "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-strokewidth" + }, + "ctrlFocusInnerStroke": { + "no": 598, + "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": 599, + "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-strokewidth" + }, + "ctrlFocusOuterStroke": { + "no": 600, + "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": 601, + "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": 602, + "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": 603, + "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": 604, + "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": 605, + "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": 606, + "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": 607, + "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": 608, + "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": 609, + "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": 610, + "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": 611, + "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": 612, + "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": 613, + "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": 614, + "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": 615, + "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": 616, + "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": 617, + "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": 618, + "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": 619, + "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": 620, + "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": 621, + "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": 622, + "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": 623, + "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": 624, + "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": 625, + "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": 626, + "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": 627, + "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": 628, + "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": 629, + "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": 630, + "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": 631, + "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": 632, + "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": 633, + "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" + }, + "ctrlInputBottomlineStrokewidthRest": { + "no": 634, + "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-bottomline-strokewidth-rest" + }, + "ctrlInputStrokewidthRest": { + "no": 635, + "name": "CTRL/input/strokeWidth/rest", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-input-strokewidth-rest" + }, + "ctrlInputTextselectionBackground": { + "no": 636, + "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-textselection-background" + }, + "ctrlInputTextselectionForeground": { + "no": 637, + "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-textselection-foreground" + }, + "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-strokewidth-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-strokewidth-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-strokewidth-selected" + }, + "ctrlInputBottomlineStrokewidthHover": { + "no": 641, + "name": "CTRL/input/bottomLine/strokeWidth/hover", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-input-bottomline-strokewidth-hover" + }, + "ctrlInputBottomlineStrokewidthPressed": { + "no": 642, + "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-bottomline-strokewidth-pressed" + }, + "ctrlInputBottomlineStrokewidthSelected": { + "no": 643, + "name": "CTRL/input/bottomLine/strokeWidth/selected", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thick", + "exceptions": [], + "cssName": "--smtc-ctrl-input-bottomline-strokewidth-selected" + }, + "ctrlInputBottomlineStrokeRest": { + "no": 644, + "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-bottomline-stroke-rest" + }, + "ctrlInputBottomlineStrokeHover": { + "no": 645, + "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-bottomline-stroke-hover" + }, + "ctrlInputBottomlineStrokePressed": { + "no": 646, + "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-bottomline-stroke-pressed" + }, + "ctrlInputBottomlineStrokeDisabled": { + "no": 647, + "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-bottomline-stroke-disabled" + }, + "ctrlInputBottomlineStrokeSelected": { + "no": 648, + "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-bottomline-stroke-selected" + }, + "ctrlInputBottomlineStrokeError": { + "no": 649, + "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-bottomline-stroke-error" + }, + "ctrlInputStrokeHover": { + "no": 650, + "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": 651, + "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": 652, + "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": 653, + "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": 654, + "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": 655, + "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": 656, + "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-strokewidth-rest" + }, + "ctrlLinkInlineStrokewidthHover": { + "no": 657, + "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-strokewidth-hover" + }, + "ctrlLinkInlineUnderlineDashed": { + "no": 658, + "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": 659, + "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-solidfigmaonly" + }, + "ctrlLinkForegroundNeutralHover": { + "no": 660, + "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": 661, + "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": 662, + "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": 663, + "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": 664, + "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": 665, + "name": "CTRL/link/onPage/strokeWidth/rest", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-link-onpage-strokewidth-rest" + }, + "ctrlLinkOnpageStrokewidthHover": { + "no": 666, + "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-onpage-strokewidth-hover" + }, + "ctrlLinkOnpageUnderlineDashed": { + "no": 667, + "name": "CTRL/link/onPage/underline/dashed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Page link"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-link-onpage-underline-dashed" + }, + "ctrlLinkOnpageUnderlineSolidFigmaonly": { + "no": 668, + "name": "CTRL/link/onPage/underline/solid(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Page link"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-link-onpage-underline-solidfigmaonly" + }, + "ctrlLinkInlineShowunderlineatrest": { + "no": 669, + "name": "CTRL/link/inline/showUnderlineAtRest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-link-inline-showunderlineatrest" + }, + "ctrlLinkOnpageShowunderlineatrest": { + "no": 670, + "name": "CTRL/link/onPage/showUnderlineAtRest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Consent Dialog/footer"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-link-onpage-showunderlineatrest" + }, + "ctrlListPillWidth": { + "no": 671, + "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": 672, + "name": "CTRL/list/pill/fullWidth", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-pill-fullwidth" + }, + "ctrlListPillStretchPaddingDefault": { + "no": 673, + "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": 674, + "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": 675, + "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": 676, + "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": 677, + "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": 678, + "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": 679, + "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": 680, + "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": 681, + "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": 682, + "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": 683, + "name": "CTRL/list/indent/(level2)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-indent-level2" + }, + "ctrlListIndentLevel3": { + "no": 684, + "name": "CTRL/list/indent/(level3)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-indent-level3" + }, + "ctrlListBackgroundSelectedRest": { + "no": 685, + "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" + }, + "ctrlListBackgroundSelectedHover": { + "no": 686, + "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": 687, + "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": 688, + "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": 689, + "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": 690, + "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": 691, + "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": 692, + "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": 693, + "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": 694, + "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": 695, + "name": "CTRL/list/choice/foreground/selected-rest", + "fst_reference": "foreground/ctrl/brand/rest", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/2/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-foreground-selected-rest" + }, + "ctrlListChoiceForegroundSelectedDisabled": { + "no": 696, + "name": "CTRL/list/choice/foreground/selected-disabled", + "fst_reference": "foreground/ctrl/brand/disabled", + "optional": true, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "Neutral/Foreground/Disabled/Rest", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-foreground-selected-disabled" + }, + "ctrlListChoiceBackgroundDisabled": { + "no": 697, + "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": 698, + "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": 699, + "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": 700, + "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": 701, + "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": 702, + "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-sizefigmaonly" + }, + "ctrlListChoiceDotSize": { + "no": 703, + "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": 704, + "name": "CTRL/list/choice/dot/size(figmaonly)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-choice-dot-sizefigmaonly" + }, + "ctrlListSplitDividerPaddingInset": { + "no": 705, + "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": 706, + "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": 707, + "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": 708, + "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": 709, + "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": 710, + "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": 711, + "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": 712, + "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": 713, + "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": 714, + "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": 715, + "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": 716, + "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": 717, + "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": 718, + "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": 719, + "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-litefilter-background-selected" + }, + "ctrlLitefilterStrokeSelected": { + "no": 720, + "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-litefilter-stroke-selected" + }, + "ctrlLitefilterForegroundSelected": { + "no": 721, + "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-litefilter-foreground-selected" + }, + "ctrlProgressBackgroundEmpty": { + "no": 722, + "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": 723, + "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": 724, + "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": 725, + "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": 726, + "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": 727, + "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": 728, + "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": 729, + "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": 730, + "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": 731, + "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": 732, + "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": 733, + "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": 734, + "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": 735, + "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": 736, + "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": 737, + "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": 738, + "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": 739, + "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": 740, + "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": 741, + "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": 742, + "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": 743, + "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": 744, + "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": 745, + "name": "CTRL/segmented/padding/rest", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-padding-rest" + }, + "ctrlSegmentedPaddingHover": { + "no": 746, + "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": 747, + "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": 748, + "name": "CTRL/segmented/gap", + "fst_reference": "NULL/number", + "optional": false, + "nullable": true, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-gap" + }, + "ctrlSegmentedItemCornerRest": { + "no": 749, + "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": 750, + "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": 751, + "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": 752, + "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": 753, + "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-strokewidth" + }, + "ctrlSplitDividerStrokewidthOnoutline": { + "no": 754, + "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-strokewidth-onoutline" + }, + "ctrlSplitDividerStrokewidthOnsubtle": { + "no": 755, + "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-strokewidth-onsubtle" + }, + "ctrlSpinnerStrokewidth": { + "no": 756, + "name": "CTRL/spinner/strokeWidth", + "fst_reference": "CTRL/progress/height/filled", + "optional": true, + "nullable": false, + "description": "", + "components": ["Spinner"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-spinner-strokewidth" + }, + "ctrlSpinnerShowemptytrack": { + "no": 757, + "name": "CTRL/spinner/showEmptyTrack", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": ["Spinner"], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-spinner-showemptytrack" + }, + "ctrlTooltipCorner": { + "no": 758, + "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": 759, + "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": 760, + "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": 761, + "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": 762, + "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": 763, + "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": 764, + "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": 765, + "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": 766, + "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": 767, + "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": 768, + "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": 769, + "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": 770, + "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": 771, + "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": 772, + "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": 773, + "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": 774, + "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": 775, + "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": 776, + "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": 777, + "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": 778, + "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-strokewidth-rest" + }, + "ctrlSliderThumbInnerStrokewidthHover": { + "no": 779, + "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-strokewidth-hover" + }, + "ctrlSliderThumbInnerStrokewidthPressed": { + "no": 780, + "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-strokewidth-pressed" + }, + "ctrlSliderThumbInnerStrokeRest": { + "no": 781, + "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": 782, + "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": 783, + "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": 784, + "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": 785, + "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-strokewidth" + }, + "ctrlSliderThumbOuterStrokeRest": { + "no": 786, + "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": 787, + "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": 788, + "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": 789, + "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": 790, + "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": 791, + "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": 792, + "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": 793, + "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": 794, + "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": 795, + "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": 796, + "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": 797, + "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": 798, + "name": "CTRL/list/split/divider/showDivider", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-list-split-divider-showdivider" + }, + "ctrlAvatarPresencebadgeBackgroundBehindbadge": { + "no": 799, + "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-presencebadge-background-behindbadge" + }, + "statusBrandBackground": { + "no": 800, + "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": 801, + "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": 802, + "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": 803, + "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": 804, + "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": 805, + "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": 806, + "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": 807, + "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": 808, + "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": 809, + "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": 810, + "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": 811, + "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": 812, + "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": 813, + "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": 814, + "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": 815, + "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": 816, + "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": 817, + "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": 818, + "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": 819, + "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": 820, + "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": 821, + "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": 822, + "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": 823, + "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": 824, + "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": 825, + "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": 826, + "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": 827, + "name": "STATUS/important/tint/background", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-status-important-tint-background" + }, + "statusImportantTintStroke": { + "no": 828, + "name": "STATUS/important/tint/stroke", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-status-important-tint-stroke" + }, + "statusImportantTintForeground": { + "no": 829, + "name": "STATUS/important/tint/foreground", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-status-important-tint-foreground" + }, + "statusInformativeBackground": { + "no": 830, + "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": 831, + "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": 832, + "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": 833, + "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": 834, + "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": 835, + "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": 836, + "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": 837, + "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": 838, + "name": "CTRL/boolean/selectionHint", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-boolean-selectionhint" + }, + "ctrlComposerInputBottomStrokeWidthSelectedRest": { + "no": 839, + "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": 840, + "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": 841, + "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": 842, + "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": 843, + "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": 844, + "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": 845, + "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": 846, + "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": 847, + "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": 848, + "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": 849, + "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": 850, + "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": 851, + "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": 852, + "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-hoverusesgradient" + }, + "ctrlComposerInputStrokePressedUsesgradient": { + "no": 853, + "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-pressedusesgradient" + }, + "ctrlComposerInputStrokeDisabledUsesgradient": { + "no": 854, + "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-disabledusesgradient" + }, + "ctrlComposerInputStrokeSelectedRestUsesgradient": { + "no": 855, + "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-restusesgradient" + }, + "ctrlComposerInputStrokeWidthRest": { + "no": 856, + "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": 857, + "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": 858, + "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": 859, + "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": 860, + "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-bottomstroke-rest" + }, + "ctrlComposerInputBottomstrokeHover": { + "no": 861, + "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-bottomstroke-hover" + }, + "ctrlComposerInputBottomstrokePressed": { + "no": 862, + "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-bottomstroke-pressed" + }, + "ctrlComposerInputBottomstrokeDisabled": { + "no": 863, + "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-bottomstroke-disabled" + }, + "ctrlComposerInputBottomstrokeSelectedRest": { + "no": 864, + "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-bottomstroke-selected-rest" + }, + "ctrlComposerInputShadowXOffset": { + "no": 865, + "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": 866, + "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": 867, + "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": 868, + "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": 869, + "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": 870, + "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": 871, + "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-acryliccolorblend" + }, + "ctrlComposerContainerBackgroundAcryliclumblend": { + "no": 872, + "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-acryliclumblend" + }, + "ctrlComposerContainerShadowKeyX": { + "no": 873, + "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": 874, + "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": 875, + "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": 876, + "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": 877, + "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": 878, + "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": 879, + "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": 880, + "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": 881, + "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": 882, + "name": "AI/brand/(stop1)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-brand-stop1" + }, + "aiBrandStop2": { + "no": 883, + "name": "AI/brand/(stop2)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-brand-stop2" + }, + "aiBrandStop3": { + "no": 884, + "name": "AI/brand/(stop3)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-brand-stop3" + }, + "aiBrandStop4": { + "no": 885, + "name": "AI/brand/(stop4)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-brand-stop4" + }, + "aiShimmerStop1": { + "no": 886, + "name": "AI/shimmer/(stop1)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-shimmer-stop1" + }, + "aiShimmerStop2": { + "no": 887, + "name": "AI/shimmer/(stop2)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-shimmer-stop2" + }, + "aiShimmerStop3": { + "no": 888, + "name": "AI/shimmer/(stop3)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-shimmer-stop3" + }, + "aiShimmerStop4": { + "no": 889, + "name": "AI/shimmer/(stop4)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ai-shimmer-stop4" + }, + "shadowWindowActiveKeyX": { + "no": 890, + "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": 891, + "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": 892, + "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": 893, + "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": 894, + "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": 895, + "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": 896, + "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": 897, + "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": 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": 902, + "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": 903, + "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": 904, + "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": 905, + "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": 906, + "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": 907, + "name": "CTRL/card/state/(rest)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-card-state-rest" + }, + "ctrlCardStateHover": { + "no": 908, + "name": "CTRL/card/state/(hover)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-card-state-hover" + }, + "ctrlCardStatePressed": { + "no": 909, + "name": "CTRL/card/state/(pressed)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-card-state-pressed" + }, + "ctrlCardStateDisabled": { + "no": 910, + "name": "CTRL/card/state/(disabled)", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-card-state-disabled" + }, + "ctrlListShadowSelectedKeyY2": { + "no": 911, + "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-y2" + }, + "ctrlListShadowSelectedKeyX": { + "no": 912, + "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": 913, + "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": 914, + "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": 915, + "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": 916, + "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": 917, + "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": 918, + "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": 919, + "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": 920, + "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": 921, + "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": 922, + "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": 923, + "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": 924, + "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": 925, + "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": 926, + "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": 927, + "name": "NULL/number", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-null-number" + }, + "nullString": { + "no": 928, + "name": "NULL/string", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-null-string" + }, + "ctrlSegmentedSmPaddingRest": { + "no": 929, + "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": 930, + "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": 931, + "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": 932, + "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": 933, + "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": 934, + "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": 935, + "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": 936, + "name": "CTRL/segmented/sm/item/corner/hover", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-sm-item-corner-hover" + }, + "ctrlSegmentedSmItemCornerPressed": { + "no": 937, + "name": "CTRL/segmented/sm/item/corner/pressed", + "fst_reference": "", + "optional": false, + "nullable": false, + "description": "", + "components": [], + "contrast": "", + "fallback": "", + "exceptions": [], + "cssName": "--smtc-ctrl-segmented-sm-item-corner-pressed" + }, + "ctrlSegmentedLgItemCornerRest": { + "no": 938, + "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": 939, + "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": 940, + "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": 941, + "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": 942, + "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": 943, + "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": 944, + "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": 945, + "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": 946, + "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": 947, + "name": "CTRL/liteFilter/strokeWidth/selected", + "fst_reference": "strokeWidth/default", + "optional": true, + "nullable": false, + "description": "", + "components": ["Lite filter"], + "contrast": "", + "fallback": "Thin", + "exceptions": [], + "cssName": "--smtc-ctrl-litefilter-strokewidth-selected" + }, + "materialAcrylicShellDefaultSolid": { + "no": 948, + "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": 949, + "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-colorblend" + }, + "materialAcrylicShellDefaultLumblend": { + "no": 950, + "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-lumblend" + }, + "backgroundCardOnsecondaryDefaultRest": { + "no": 951, + "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-onsecondary-default-rest" + }, + "backgroundCardOnsecondaryAltRest": { + "no": 952, + "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-onsecondary-alt-rest" + }, + "backgroundCardOnsecondaryAltHover": { + "no": 953, + "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-onsecondary-alt-hover" + }, + "backgroundCardOnsecondaryAltPressed": { + "no": 954, + "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-onsecondary-alt-pressed" + }, + "backgroundCardOnsecondaryAltDisabled": { + "no": 955, + "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-onsecondary-alt-disabled" + }, + "backgroundCardOnsecondaryDefaultHover": { + "no": 956, + "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-onsecondary-default-hover" + }, + "backgroundCardOnsecondaryDefaultPressed": { + "no": 957, + "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-onsecondary-default-pressed" + }, + "backgroundCardOnsecondaryDefaultDisabled": { + "no": 958, + "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-onsecondary-default-disabled" + }, + "backgroundCardOnsecondaryDefaultSelected": { + "no": 959, + "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-onsecondary-default-selected" + }, + "backgroundCardOnflyoutDefaultRest": { + "no": 960, + "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-onflyout-default-rest" + }, + "backgroundCardOnflyoutDefaultHover": { + "no": 961, + "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-onflyout-default-hover" + }, + "backgroundCardOnflyoutDefaultPressed": { + "no": 962, + "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-onflyout-default-pressed" + }, + "backgroundCardOnflyoutDefaultDisabled": { + "no": 963, + "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-onflyout-default-disabled" + }, + "ctrlProgressLgHeightFilled": { + "no": 964, + "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": 965, + "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" + } +} diff --git a/packages/semantic-tokens/tsconfig.lib.json b/packages/semantic-tokens/tsconfig.lib.json index 050276d9ee283..df912eb426db7 100644 --- a/packages/semantic-tokens/tsconfig.lib.json +++ b/packages/semantic-tokens/tsconfig.lib.json @@ -12,5 +12,5 @@ "allowSyntheticDefaultImports": true }, "exclude": ["**/*.spec.ts", "**/*.test.ts", "**/*.spec-e2e.ts"], - "include": ["./src/**/*.ts", "./scripts/**/*.ts"] + "include": ["./src/**/*.ts", "./scripts/**/*.ts", "./utils/**/*.ts"] } diff --git a/packages/semantic-tokens/utils/chopLastCamelCasePart.test.ts b/packages/semantic-tokens/utils/chopLastCamelCasePart.test.ts new file mode 100644 index 0000000000000..40dd91941ef6a --- /dev/null +++ b/packages/semantic-tokens/utils/chopLastCamelCasePart.test.ts @@ -0,0 +1,13 @@ +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(''); + }); +}); diff --git a/packages/semantic-tokens/utils/chopLastCamelCasePart.ts b/packages/semantic-tokens/utils/chopLastCamelCasePart.ts new file mode 100644 index 0000000000000..a33897a457c73 --- /dev/null +++ b/packages/semantic-tokens/utils/chopLastCamelCasePart.ts @@ -0,0 +1,6 @@ +export const chopLastCamelCasePart = (str: string) => + str + .replace(/([a-z])([A-Z])/g, '$1 $2') + .split(' ') + .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 0000000000000..fa7b6c7dd4704 --- /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 0000000000000..62ffb99ef6cd8 --- /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 0000000000000..5bea49a780f8d --- /dev/null +++ b/packages/semantic-tokens/utils/dedupeShadowTokens.test.ts @@ -0,0 +1,132 @@ +/* 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', + }, +}; + +describe('dedupeShadowTokens', () => { + const dedupedTokens = dedupeShadowTokens(shadowTokens); + it('Combines and removes tokens', () => { + // First, check the tokens have been deduped + expect(Object.keys(dedupedTokens).length).toEqual(2); + // New combined token exists + expect(dedupedTokens.shadowCardRestKey).toBeTruthy(); + }); + it('Updates token name to combined version', () => { + // New combined token has correct name + expect(dedupedTokens.shadowCardRestKey.name).toMatch('shadow/card/rest/(key)'); + }); + it('Updates token CSS name to combined version', () => { + // New combined token has correct name + expect(dedupedTokens.shadowCardRestKey.cssName).toMatch('--smtc-shadow-card-rest-key'); + }); + it('Handles combined fallbacks correctly', () => { + // Ensure fallbacks are handled correctly + expect(dedupedTokens.shadowWindowInactiveKey.fst_reference).toMatch('shadow/window/active/(key)'); + }); +}); diff --git a/packages/semantic-tokens/utils/dedupeShadowTokens.ts b/packages/semantic-tokens/utils/dedupeShadowTokens.ts new file mode 100644 index 0000000000000..dcaabca6a6a62 --- /dev/null +++ b/packages/semantic-tokens/utils/dedupeShadowTokens.ts @@ -0,0 +1,32 @@ +import type { Token } from '../scripts/token.types'; +import { chopLastCamelCasePart } from './chopLastCamelCasePart'; +import { removeLastDelimiter } from './removeLastDelimiter'; + +export const dedupeShadowTokens = (_tokenJSON: Record) => { + /* Our shadow tokens come exported from Figma in parts i.e. X, Y, Blur, Color + * 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)) { + const tokenData: Token = _tokenJSON[token]; + const combinedShadowName = chopLastCamelCasePart(token); + if (tokenData.name.toLowerCase().includes('shadow/')) { + if (!_tokenJSON[combinedShadowName]) { + // Handle shadow tokens by removing the last part (X,Y,Blur,Color) + tokenData.cssName = removeLastDelimiter(tokenData.cssName, '-'); + tokenData.fst_reference = removeLastDelimiter(tokenData.fst_reference, '/'); + tokenData.name = removeLastDelimiter(tokenData.name, '/'); + // 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 0000000000000..ff584899b24ae --- /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 0000000000000..9c1c22711346e --- /dev/null +++ b/packages/semantic-tokens/utils/escapeInlineToken.ts @@ -0,0 +1,3 @@ +export const escapeInlineToken = (token: string) => { + return `\$\{${token}\}`; +}; diff --git a/packages/semantic-tokens/utils/index.ts b/packages/semantic-tokens/utils/index.ts new file mode 100644 index 0000000000000..65b66de73ae70 --- /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 0000000000000..2aad6312927ad --- /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 0000000000000..5574891018956 --- /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 0000000000000..525205aa62319 --- /dev/null +++ b/packages/semantic-tokens/utils/toCamelCase.test.ts @@ -0,0 +1,8 @@ +import { toCamelCase } from './toCamelCase'; + +describe('toCamelCase', () => { + it('Splits and camel cases strings separated by forward slash', () => { + // We use path.sep as it is platform dependent + expect(toCamelCase('test1/test2/test3')).toMatch('test1Test2Test3'); + }); +}); diff --git a/packages/semantic-tokens/utils/toCamelCase.ts b/packages/semantic-tokens/utils/toCamelCase.ts new file mode 100644 index 0000000000000..86c253287e1fe --- /dev/null +++ b/packages/semantic-tokens/utils/toCamelCase.ts @@ -0,0 +1,13 @@ +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) { + return word.toLowerCase(); + } + // 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).toLowerCase(); + }) + .join(''); +}; From 9a2381851333de8513505ee0daf0b432fb150394 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Mon, 14 Apr 2025 09:19:35 -0700 Subject: [PATCH 03/66] Semantic Tokens: Generate token baseline (#34217) --- .../etc/semantic-tokens.api.md | 5190 +++++++++++++++++ packages/semantic-tokens/scripts/tokenGen.ts | 6 +- .../src/components/avatar/tokens.ts | 49 + .../src/components/avatar/variables.ts | 20 + .../src/components/badge/tokens.ts | 53 + .../src/components/badge/variables.ts | 25 + .../src/components/boolean/tokens.ts | 4 + .../src/components/boolean/variables.ts | 2 + .../src/components/card/tokens.ts | 12 + .../src/components/card/variables.ts | 5 + .../src/components/choice/tokens.ts | 127 + .../src/components/choice/variables.ts | 55 + .../src/components/composer/tokens.ts | 73 + .../src/components/composer/variables.ts | 39 + .../src/components/dialog/tokens.ts | 19 + .../src/components/dialog/variables.ts | 8 + .../src/components/divider/tokens.ts | 5 + .../src/components/divider/variables.ts | 2 + .../src/components/drag/tokens.ts | 10 + .../src/components/drag/variables.ts | 4 + .../src/components/fab/tokens.ts | 29 + .../src/components/fab/variables.ts | 13 + .../src/components/focus/tokens.ts | 15 + .../src/components/focus/variables.ts | 6 + .../src/components/input/tokens.ts | 75 + .../src/components/input/variables.ts | 29 + .../src/components/link/tokens.ts | 43 + .../src/components/link/variables.ts | 17 + .../src/components/list/tokens.ts | 126 + .../src/components/list/variables.ts | 52 + .../src/components/liteFilter/tokens.ts | 18 + .../src/components/liteFilter/variables.ts | 5 + .../src/components/progress/tokens.ts | 23 + .../src/components/progress/variables.ts | 10 + .../src/components/rating/tokens.ts | 16 + .../src/components/rating/variables.ts | 6 + .../src/components/segmented/tokens.ts | 89 + .../src/components/segmented/variables.ts | 37 + .../src/components/slider/tokens.ts | 99 + .../src/components/slider/variables.ts | 39 + .../src/components/spinner/tokens.ts | 6 + .../src/components/spinner/variables.ts | 3 + .../src/components/split/tokens.ts | 11 + .../src/components/split/variables.ts | 4 + .../src/components/tooltip/tokens.ts | 16 + .../src/components/tooltip/variables.ts | 6 + .../semantic-tokens/src/control/tokens.ts | 420 ++ .../semantic-tokens/src/control/variables.ts | 209 + packages/semantic-tokens/src/index.ts | 1818 +++++- .../semantic-tokens/src/nullable/tokens.ts | 100 + .../semantic-tokens/src/nullable/variables.ts | 49 + .../semantic-tokens/src/optional/tokens.ts | 597 ++ .../semantic-tokens/src/optional/variables.ts | 251 + 53 files changed, 9942 insertions(+), 3 deletions(-) create mode 100644 packages/semantic-tokens/src/components/avatar/tokens.ts create mode 100644 packages/semantic-tokens/src/components/avatar/variables.ts create mode 100644 packages/semantic-tokens/src/components/badge/tokens.ts create mode 100644 packages/semantic-tokens/src/components/badge/variables.ts create mode 100644 packages/semantic-tokens/src/components/boolean/tokens.ts create mode 100644 packages/semantic-tokens/src/components/boolean/variables.ts create mode 100644 packages/semantic-tokens/src/components/card/tokens.ts create mode 100644 packages/semantic-tokens/src/components/card/variables.ts create mode 100644 packages/semantic-tokens/src/components/choice/tokens.ts create mode 100644 packages/semantic-tokens/src/components/choice/variables.ts create mode 100644 packages/semantic-tokens/src/components/composer/tokens.ts create mode 100644 packages/semantic-tokens/src/components/composer/variables.ts create mode 100644 packages/semantic-tokens/src/components/dialog/tokens.ts create mode 100644 packages/semantic-tokens/src/components/dialog/variables.ts create mode 100644 packages/semantic-tokens/src/components/divider/tokens.ts create mode 100644 packages/semantic-tokens/src/components/divider/variables.ts create mode 100644 packages/semantic-tokens/src/components/drag/tokens.ts create mode 100644 packages/semantic-tokens/src/components/drag/variables.ts create mode 100644 packages/semantic-tokens/src/components/fab/tokens.ts create mode 100644 packages/semantic-tokens/src/components/fab/variables.ts create mode 100644 packages/semantic-tokens/src/components/focus/tokens.ts create mode 100644 packages/semantic-tokens/src/components/focus/variables.ts create mode 100644 packages/semantic-tokens/src/components/input/tokens.ts create mode 100644 packages/semantic-tokens/src/components/input/variables.ts create mode 100644 packages/semantic-tokens/src/components/link/tokens.ts create mode 100644 packages/semantic-tokens/src/components/link/variables.ts create mode 100644 packages/semantic-tokens/src/components/list/tokens.ts create mode 100644 packages/semantic-tokens/src/components/list/variables.ts create mode 100644 packages/semantic-tokens/src/components/liteFilter/tokens.ts create mode 100644 packages/semantic-tokens/src/components/liteFilter/variables.ts create mode 100644 packages/semantic-tokens/src/components/progress/tokens.ts create mode 100644 packages/semantic-tokens/src/components/progress/variables.ts create mode 100644 packages/semantic-tokens/src/components/rating/tokens.ts create mode 100644 packages/semantic-tokens/src/components/rating/variables.ts create mode 100644 packages/semantic-tokens/src/components/segmented/tokens.ts create mode 100644 packages/semantic-tokens/src/components/segmented/variables.ts create mode 100644 packages/semantic-tokens/src/components/slider/tokens.ts create mode 100644 packages/semantic-tokens/src/components/slider/variables.ts create mode 100644 packages/semantic-tokens/src/components/spinner/tokens.ts create mode 100644 packages/semantic-tokens/src/components/spinner/variables.ts create mode 100644 packages/semantic-tokens/src/components/split/tokens.ts create mode 100644 packages/semantic-tokens/src/components/split/variables.ts create mode 100644 packages/semantic-tokens/src/components/tooltip/tokens.ts create mode 100644 packages/semantic-tokens/src/components/tooltip/variables.ts create mode 100644 packages/semantic-tokens/src/control/tokens.ts create mode 100644 packages/semantic-tokens/src/control/variables.ts create mode 100644 packages/semantic-tokens/src/nullable/tokens.ts create mode 100644 packages/semantic-tokens/src/nullable/variables.ts create mode 100644 packages/semantic-tokens/src/optional/tokens.ts create mode 100644 packages/semantic-tokens/src/optional/variables.ts diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index abbd875f220e1..84a707b9653c4 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -4,6 +4,5196 @@ ```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-onflyout-default-disabled)"; + +// @public (undocumented) +export const backgroundCardOnflyoutDefaultDisabledRaw = "--smtc-background-card-onflyout-default-disabled"; + +// @public (undocumented) +export const backgroundCardOnflyoutDefaultHover = "var(--smtc-background-card-onflyout-default-hover)"; + +// @public (undocumented) +export const backgroundCardOnflyoutDefaultHoverRaw = "--smtc-background-card-onflyout-default-hover"; + +// @public (undocumented) +export const backgroundCardOnflyoutDefaultPressed = "var(--smtc-background-card-onflyout-default-pressed)"; + +// @public (undocumented) +export const backgroundCardOnflyoutDefaultPressedRaw = "--smtc-background-card-onflyout-default-pressed"; + +// @public (undocumented) +export const backgroundCardOnflyoutDefaultRest = "var(--smtc-background-card-onflyout-default-rest)"; + +// @public (undocumented) +export const backgroundCardOnflyoutDefaultRestRaw = "--smtc-background-card-onflyout-default-rest"; + +// @public (undocumented) +export const backgroundCardOnprimaryAltDisabled = "var(--smtc-background-card-onprimary-alt-disabled)"; + +// @public (undocumented) +export const backgroundCardOnprimaryAltDisabledRaw = "--smtc-background-card-onprimary-alt-disabled"; + +// @public (undocumented) +export const backgroundCardOnprimaryAltHover = "var(--smtc-background-card-onprimary-alt-hover)"; + +// @public (undocumented) +export const backgroundCardOnprimaryAltHoverRaw = "--smtc-background-card-onprimary-alt-hover"; + +// @public (undocumented) +export const backgroundCardOnprimaryAltPressed = "var(--smtc-background-card-onprimary-alt-pressed)"; + +// @public (undocumented) +export const backgroundCardOnprimaryAltPressedRaw = "--smtc-background-card-onprimary-alt-pressed"; + +// @public (undocumented) +export const backgroundCardOnprimaryAltRest = "var(--smtc-background-card-onprimary-alt-rest)"; + +// @public (undocumented) +export const backgroundCardOnprimaryAltRestRaw = "--smtc-background-card-onprimary-alt-rest"; + +// @public (undocumented) +export const backgroundCardOnprimaryDefaultDisabled = "var(--smtc-background-card-onprimary-default-disabled)"; + +// @public (undocumented) +export const backgroundCardOnprimaryDefaultDisabledRaw = "--smtc-background-card-onprimary-default-disabled"; + +// @public (undocumented) +export const backgroundCardOnprimaryDefaultHover = "var(--smtc-background-card-onprimary-default-hover)"; + +// @public (undocumented) +export const backgroundCardOnprimaryDefaultHoverRaw = "--smtc-background-card-onprimary-default-hover"; + +// @public (undocumented) +export const backgroundCardOnprimaryDefaultPressed = "var(--smtc-background-card-onprimary-default-pressed)"; + +// @public (undocumented) +export const backgroundCardOnprimaryDefaultPressedRaw = "--smtc-background-card-onprimary-default-pressed"; + +// @public (undocumented) +export const backgroundCardOnprimaryDefaultRest = "var(--smtc-background-card-onprimary-default-rest)"; + +// @public (undocumented) +export const backgroundCardOnprimaryDefaultRestRaw = "--smtc-background-card-onprimary-default-rest"; + +// @public (undocumented) +export const backgroundCardOnprimaryDefaultSelected = "var(--smtc-background-card-onprimary-default-selected, var(--smtc-background-card-onprimary-default-rest))"; + +// @public (undocumented) +export const backgroundCardOnprimaryDefaultSelectedRaw = "--smtc-background-card-onprimary-default-selected"; + +// @public (undocumented) +export const backgroundCardOnsecondaryAltDisabled = "var(--smtc-background-card-onsecondary-alt-disabled)"; + +// @public (undocumented) +export const backgroundCardOnsecondaryAltDisabledRaw = "--smtc-background-card-onsecondary-alt-disabled"; + +// @public (undocumented) +export const backgroundCardOnsecondaryAltHover = "var(--smtc-background-card-onsecondary-alt-hover)"; + +// @public (undocumented) +export const backgroundCardOnsecondaryAltHoverRaw = "--smtc-background-card-onsecondary-alt-hover"; + +// @public (undocumented) +export const backgroundCardOnsecondaryAltPressed = "var(--smtc-background-card-onsecondary-alt-pressed)"; + +// @public (undocumented) +export const backgroundCardOnsecondaryAltPressedRaw = "--smtc-background-card-onsecondary-alt-pressed"; + +// @public (undocumented) +export const backgroundCardOnsecondaryAltRest = "var(--smtc-background-card-onsecondary-alt-rest)"; + +// @public (undocumented) +export const backgroundCardOnsecondaryAltRestRaw = "--smtc-background-card-onsecondary-alt-rest"; + +// @public (undocumented) +export const backgroundCardOnsecondaryDefaultDisabled = "var(--smtc-background-card-onsecondary-default-disabled)"; + +// @public (undocumented) +export const backgroundCardOnsecondaryDefaultDisabledRaw = "--smtc-background-card-onsecondary-default-disabled"; + +// @public (undocumented) +export const backgroundCardOnsecondaryDefaultHover = "var(--smtc-background-card-onsecondary-default-hover)"; + +// @public (undocumented) +export const backgroundCardOnsecondaryDefaultHoverRaw = "--smtc-background-card-onsecondary-default-hover"; + +// @public (undocumented) +export const backgroundCardOnsecondaryDefaultPressed = "var(--smtc-background-card-onsecondary-default-pressed)"; + +// @public (undocumented) +export const backgroundCardOnsecondaryDefaultPressedRaw = "--smtc-background-card-onsecondary-default-pressed"; + +// @public (undocumented) +export const backgroundCardOnsecondaryDefaultRest = "var(--smtc-background-card-onsecondary-default-rest)"; + +// @public (undocumented) +export const backgroundCardOnsecondaryDefaultRestRaw = "--smtc-background-card-onsecondary-default-rest"; + +// @public (undocumented) +export const backgroundCardOnsecondaryDefaultSelected = "var(--smtc-background-card-onsecondary-default-selected, var(--smtc-background-card-onsecondary-default-rest))"; + +// @public (undocumented) +export const backgroundCardOnsecondaryDefaultSelectedRaw = "--smtc-background-card-onsecondary-default-selected"; + +// @public (undocumented) +export const backgroundCtrlActivebrandDisabled = "var(--smtc-background-ctrl-activebrand-disabled, var(--smtc-background-ctrl-brand-disabled))"; + +// @public (undocumented) +export const backgroundCtrlActivebrandDisabledRaw = "--smtc-background-ctrl-activebrand-disabled"; + +// @public (undocumented) +export const backgroundCtrlActivebrandHover = "var(--smtc-background-ctrl-activebrand-hover, var(--smtc-background-ctrl-brand-hover))"; + +// @public (undocumented) +export const backgroundCtrlActivebrandHoverRaw = "--smtc-background-ctrl-activebrand-hover"; + +// @public (undocumented) +export const backgroundCtrlActivebrandPressed = "var(--smtc-background-ctrl-activebrand-pressed, var(--smtc-background-ctrl-brand-pressed))"; + +// @public (undocumented) +export const backgroundCtrlActivebrandPressedRaw = "--smtc-background-ctrl-activebrand-pressed"; + +// @public (undocumented) +export const backgroundCtrlActivebrandRest = "var(--smtc-background-ctrl-activebrand-rest, var(--smtc-background-ctrl-brand-rest))"; + +// @public (undocumented) +export const backgroundCtrlActivebrandRestRaw = "--smtc-background-ctrl-activebrand-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)"; + +// @public (undocumented) +export const backgroundCtrlBrandHoverRaw = "--smtc-background-ctrl-brand-hover"; + +// @public (undocumented) +export const backgroundCtrlBrandPressed = "var(--smtc-background-ctrl-brand-pressed)"; + +// @public (undocumented) +export const backgroundCtrlBrandPressedRaw = "--smtc-background-ctrl-brand-pressed"; + +// @public (undocumented) +export const backgroundCtrlBrandRest = "var(--smtc-background-ctrl-brand-rest)"; + +// @public (undocumented) +export const backgroundCtrlBrandRestRaw = "--smtc-background-ctrl-brand-rest"; + +// @public (undocumented) +export const backgroundCtrlNeutralDisabled = "var(--smtc-background-ctrl-neutral-disabled)"; + +// @public (undocumented) +export const backgroundCtrlNeutralDisabledRaw = "--smtc-background-ctrl-neutral-disabled"; + +// @public (undocumented) +export const backgroundCtrlNeutralHover = "var(--smtc-background-ctrl-neutral-hover)"; + +// @public (undocumented) +export const backgroundCtrlNeutralHoverRaw = "--smtc-background-ctrl-neutral-hover"; + +// @public (undocumented) +export const backgroundCtrlNeutralPressed = "var(--smtc-background-ctrl-neutral-pressed)"; + +// @public (undocumented) +export const backgroundCtrlNeutralPressedRaw = "--smtc-background-ctrl-neutral-pressed"; + +// @public (undocumented) +export const backgroundCtrlNeutralRest = "var(--smtc-background-ctrl-neutral-rest)"; + +// @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, unset)"; + +// @public (undocumented) +export const backgroundCtrlOutlineHoverRaw = "--smtc-background-ctrl-outline-hover"; + +// @public (undocumented) +export const backgroundCtrlOutlinePressed = "var(--smtc-background-ctrl-outline-pressed, unset)"; + +// @public (undocumented) +export const backgroundCtrlOutlinePressedRaw = "--smtc-background-ctrl-outline-pressed"; + +// @public (undocumented) +export const backgroundCtrlOutlineRest = "var(--smtc-background-ctrl-outline-rest, unset)"; + +// @public (undocumented) +export const backgroundCtrlOutlineRestRaw = "--smtc-background-ctrl-outline-rest"; + +// @public (undocumented) +export const backgroundCtrlShapesafeActivebrandDisabled = "var(--smtc-background-ctrl-shapesafe-activebrand-disabled, var(--smtc-background-ctrl-brand-disabled))"; + +// @public (undocumented) +export const backgroundCtrlShapesafeActivebrandDisabledRaw = "--smtc-background-ctrl-shapesafe-activebrand-disabled"; + +// @public (undocumented) +export const backgroundCtrlShapesafeActivebrandRest = "var(--smtc-background-ctrl-shapesafe-activebrand-rest, var(--smtc-background-ctrl-brand-rest))"; + +// @public (undocumented) +export const backgroundCtrlShapesafeActivebrandRestRaw = "--smtc-background-ctrl-shapesafe-activebrand-rest"; + +// @public (undocumented) +export const backgroundCtrlShapesafeNeutralDisabled = "var(--smtc-background-ctrl-shapesafe-neutral-disabled, var(--smtc-foreground-ctrl-neutral-secondary-disabled))"; + +// @public (undocumented) +export const backgroundCtrlShapesafeNeutralDisabledRaw = "--smtc-background-ctrl-shapesafe-neutral-disabled"; + +// @public (undocumented) +export const backgroundCtrlShapesafeNeutralHover = "var(--smtc-background-ctrl-shapesafe-neutral-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; + +// @public (undocumented) +export const backgroundCtrlShapesafeNeutralHoverRaw = "--smtc-background-ctrl-shapesafe-neutral-hover"; + +// @public (undocumented) +export const backgroundCtrlShapesafeNeutralPressed = "var(--smtc-background-ctrl-shapesafe-neutral-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; + +// @public (undocumented) +export const backgroundCtrlShapesafeNeutralPressedRaw = "--smtc-background-ctrl-shapesafe-neutral-pressed"; + +// @public (undocumented) +export const backgroundCtrlShapesafeNeutralRest = "var(--smtc-background-ctrl-shapesafe-neutral-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; + +// @public (undocumented) +export const backgroundCtrlShapesafeNeutralRestRaw = "--smtc-background-ctrl-shapesafe-neutral-rest"; + +// @public (undocumented) +export const backgroundCtrlSubtleDisabled = "var(--smtc-background-ctrl-subtle-disabled, unset)"; + +// @public (undocumented) +export const backgroundCtrlSubtleDisabledRaw = "--smtc-background-ctrl-subtle-disabled"; + +// @public (undocumented) +export const backgroundCtrlSubtleHover = "var(--smtc-background-ctrl-subtle-hover)"; + +// @public (undocumented) +export const backgroundCtrlSubtleHoverRaw = "--smtc-background-ctrl-subtle-hover"; + +// @public (undocumented) +export const backgroundCtrlSubtleHoversplit = "var(--smtc-background-ctrl-subtle-hoversplit, unset)"; + +// @public (undocumented) +export const backgroundCtrlSubtleHoversplitRaw = "--smtc-background-ctrl-subtle-hoversplit"; + +// @public (undocumented) +export const backgroundCtrlSubtlePressed = "var(--smtc-background-ctrl-subtle-pressed)"; + +// @public (undocumented) +export const backgroundCtrlSubtlePressedRaw = "--smtc-background-ctrl-subtle-pressed"; + +// @public (undocumented) +export const backgroundCtrlSubtleRest = "var(--smtc-background-ctrl-subtle-rest, unset)"; + +// @public (undocumented) +export const backgroundCtrlSubtleRestRaw = "--smtc-background-ctrl-subtle-rest"; + +// @public (undocumented) +export const backgroundFlyoutColorblend = "var(--smtc-background-flyout-colorblend)"; + +// @public (undocumented) +export const backgroundFlyoutColorblendRaw = "--smtc-background-flyout-colorblend"; + +// @public (undocumented) +export const backgroundFlyoutLumblend = "var(--smtc-background-flyout-lumblend)"; + +// @public (undocumented) +export const backgroundFlyoutLumblendRaw = "--smtc-background-flyout-lumblend"; + +// @public (undocumented) +export const backgroundFlyoutSolid = "var(--smtc-background-flyout-solid)"; + +// @public (undocumented) +export const backgroundFlyoutSolidRaw = "--smtc-background-flyout-solid"; + +// @public (undocumented) +export const backgroundLayerPrimarySolid = "var(--smtc-background-layer-primarysolid)"; + +// @public (undocumented) +export const backgroundLayerPrimarySolidRaw = "--smtc-background-layer-primarysolid"; + +// @public (undocumented) +export const backgroundLayerPrimaryStop1 = "var(--smtc-background-layer-primarystop1, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const backgroundLayerPrimaryStop1Raw = "--smtc-background-layer-primarystop1"; + +// @public (undocumented) +export const backgroundLayerPrimaryStop2 = "var(--smtc-background-layer-primarystop2, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const backgroundLayerPrimaryStop2Raw = "--smtc-background-layer-primarystop2"; + +// @public (undocumented) +export const backgroundLayerPrimaryStop3 = "var(--smtc-background-layer-primarystop3, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const backgroundLayerPrimaryStop3Raw = "--smtc-background-layer-primarystop3"; + +// @public (undocumented) +export const backgroundLayerSecondary = "var(--smtc-background-layer-secondary, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const backgroundLayerSecondaryRaw = "--smtc-background-layer-secondary"; + +// @public (undocumented) +export const backgroundLayerTertiary = "var(--smtc-background-layer-tertiary, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const backgroundLayerTertiaryRaw = "--smtc-background-layer-tertiary"; + +// @public (undocumented) +export const backgroundSmoke = "var(--smtc-background-smoke)"; + +// @public (undocumented) +export const backgroundSmokeRaw = "--smtc-background-smoke"; + +// @public (undocumented) +export const backgroundToolbar = "var(--smtc-background-toolbar, var(--smtc-background-card-onprimary-default-rest))"; + +// @public (undocumented) +export const backgroundToolbarRaw = "--smtc-background-toolbar"; + +// @public (undocumented) +export const backgroundWebpagePrimary = "var(--smtc-background-webpage-primary)"; + +// @public (undocumented) +export const backgroundWebpagePrimaryRaw = "--smtc-background-webpage-primary"; + +// @public (undocumented) +export const backgroundWebpageSecondary = "var(--smtc-background-webpage-secondary)"; + +// @public (undocumented) +export const backgroundWebpageSecondaryRaw = "--smtc-background-webpage-secondary"; + +// @public (undocumented) +export const backgroundWindowPrimaryColorblend = "var(--smtc-background-window-primary-colorblend)"; + +// @public (undocumented) +export const backgroundWindowPrimaryColorblendRaw = "--smtc-background-window-primary-colorblend"; + +// @public (undocumented) +export const backgroundWindowPrimaryLumblend = "var(--smtc-background-window-primary-lumblend)"; + +// @public (undocumented) +export const backgroundWindowPrimaryLumblendRaw = "--smtc-background-window-primary-lumblend"; + +// @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-colorblend)"; + +// @public (undocumented) +export const backgroundWindowSecondaryColorblendRaw = "--smtc-background-window-secondary-colorblend"; + +// @public (undocumented) +export const backgroundWindowSecondaryLumblend = "var(--smtc-background-window-secondary-lumblend)"; + +// @public (undocumented) +export const backgroundWindowSecondaryLumblendRaw = "--smtc-background-window-secondary-lumblend"; + +// @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-tabband-colorblend)"; + +// @public (undocumented) +export const backgroundWindowTabbandColorblendRaw = "--smtc-background-window-tabband-colorblend"; + +// @public (undocumented) +export const backgroundWindowTabbandLumblend = "var(--smtc-background-window-tabband-lumblend)"; + +// @public (undocumented) +export const backgroundWindowTabbandLumblendRaw = "--smtc-background-window-tabband-lumblend"; + +// @public (undocumented) +export const backgroundWindowTabbandSolid = "var(--smtc-background-window-tabband-solid)"; + +// @public (undocumented) +export const backgroundWindowTabbandSolidRaw = "--smtc-background-window-tabband-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)"; + +// @public (undocumented) +export const cornerCircularRaw = "--smtc-corner-circular"; + +// @public (undocumented) +export const cornerCtrlHover = "var(--smtc-corner-ctrl-hover, var(--smtc-corner-ctrl-rest))"; + +// @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)"; + +// @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))"; + +// @public (undocumented) +export const cornerCtrlPressedRaw = "--smtc-corner-ctrl-pressed"; + +// @public (undocumented) +export const cornerCtrlRest = "var(--smtc-corner-ctrl-rest)"; + +// @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)"; + +// @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)"; + +// @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-incard)"; + +// @public (undocumented) +export const cornerImageIncardRaw = "--smtc-corner-image-incard"; + +// @public (undocumented) +export const cornerImageOnpage = "var(--smtc-corner-image-onpage, var(--smtc-corner-card-rest))"; + +// @public (undocumented) +export const cornerImageOnpageRaw = "--smtc-corner-image-onpage"; + +// @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)"; + +// @public (undocumented) +export const cornerZeroRaw = "--smtc-corner-zero"; + +// @public (undocumented) +export const ctrlAvatarActiveringSize = "var(--smtc-ctrl-avatar-activering-size)"; + +// @public (undocumented) +export const ctrlAvatarActiveringSizeRaw = "--smtc-ctrl-avatar-activering-size"; + +// @public (undocumented) +export const ctrlAvatarActiveringStroke = "var(--smtc-ctrl-avatar-activering-stroke, var(--smtc-background-ctrl-brand-rest))"; + +// @public (undocumented) +export const ctrlAvatarActiveringStrokeRaw = "--smtc-ctrl-avatar-activering-stroke"; + +// @public (undocumented) +export const ctrlAvatarActiveringStrokewidth = "var(--smtc-ctrl-avatar-activering-strokewidth)"; + +// @public (undocumented) +export const ctrlAvatarActiveringStrokewidthRaw = "--smtc-ctrl-avatar-activering-strokewidth"; + +// @public (undocumented) +export const ctrlAvatarBackground = "var(--smtc-ctrl-avatar-background)"; + +// @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))"; + +// @public (undocumented) +export const ctrlAvatarCornerGroupRaw = "--smtc-ctrl-avatar-corner-group"; + +// @public (undocumented) +export const ctrlAvatarCornerItem = "var(--smtc-ctrl-avatar-corner-item, var(--smtc-corner-circular))"; + +// @public (undocumented) +export const ctrlAvatarCornerItemRaw = "--smtc-ctrl-avatar-corner-item"; + +// @public (undocumented) +export const ctrlAvatarForeground = "var(--smtc-ctrl-avatar-foreground)"; + +// @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-presencebadge-background-behindbadge, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const ctrlAvatarPresencebadgeBackgroundBehindbadgeRaw = "--smtc-ctrl-avatar-presencebadge-background-behindbadge"; + +// @public (undocumented) +export const ctrlAvatarPresencebadgePaddingBottomrightoffset = "var(--smtc-ctrl-avatar-presencebadge-padding-bottomrightoffset, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlAvatarPresencebadgePaddingBottomrightoffsetRaw = "--smtc-ctrl-avatar-presencebadge-padding-bottomrightoffset"; + +// @public (undocumented) +export const ctrlAvatarPresencebadgeSize = "var(--smtc-ctrl-avatar-presencebadge-size)"; + +// @public (undocumented) +export const ctrlAvatarPresencebadgeSizeRaw = "--smtc-ctrl-avatar-presencebadge-size"; + +// @public (undocumented) +export const ctrlAvatarPresencebadgeStrokewidth = "var(--smtc-ctrl-avatar-presencebadge-strokewidth, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlAvatarPresencebadgeStrokewidthRaw = "--smtc-ctrl-avatar-presencebadge-strokewidth"; + +// @public (undocumented) +export const ctrlAvatarShowcutout = "var(--smtc-ctrl-avatar-showcutout)"; + +// @public (undocumented) +export const ctrlAvatarShowcutoutRaw = "--smtc-ctrl-avatar-showcutout"; + +// @public (undocumented) +export const ctrlAvatarSize = "var(--smtc-ctrl-avatar-size, var(--smtc-size-ctrl-default))"; + +// @public (undocumented) +export const ctrlAvatarSizeRaw = "--smtc-ctrl-avatar-size"; + +// @public (undocumented) +export const ctrlAvatarTextFontsize = "var(--smtc-ctrl-avatar-text-fontsize, var(--smtc-text-global-body3-fontsize))"; + +// @public (undocumented) +export const ctrlAvatarTextFontsizeRaw = "--smtc-ctrl-avatar-text-fontsize"; + +// @public (undocumented) +export const ctrlAvatarTextLineheight = "var(--smtc-ctrl-avatar-text-lineheight, var(--smtc-text-global-body3-lineheight))"; + +// @public (undocumented) +export const ctrlAvatarTextLineheightRaw = "--smtc-ctrl-avatar-text-lineheight"; + +// @public (undocumented) +export const ctrlAvatarTextPaddingTopoffset = "var(--smtc-ctrl-avatar-text-padding-topoffset, unset)"; + +// @public (undocumented) +export const ctrlAvatarTextPaddingTopoffsetRaw = "--smtc-ctrl-avatar-text-padding-topoffset"; + +// @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)"; + +// @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 ctrlBadgeIconSizeFigmaonly = "var(--smtc-ctrl-badge-icon-sizefigmaonly)"; + +// @public (undocumented) +export const ctrlBadgeIconSizeFigmaonlyRaw = "--smtc-ctrl-badge-icon-sizefigmaonly"; + +// @public (undocumented) +export const ctrlBadgeIconSizeRaw = "--smtc-ctrl-badge-icon-size"; + +// @public (undocumented) +export const ctrlBadgeIconTheme = "var(--smtc-ctrl-badge-icon-theme, var(--smtc-icontheme-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 ctrlBadgeLgIconSizeFigmaonly = "var(--smtc-ctrl-badge-lg-icon-sizefigmaonly)"; + +// @public (undocumented) +export const ctrlBadgeLgIconSizeFigmaonlyRaw = "--smtc-ctrl-badge-lg-icon-sizefigmaonly"; + +// @public (undocumented) +export const ctrlBadgeLgIconSizeRaw = "--smtc-ctrl-badge-lg-icon-size"; + +// @public (undocumented) +export const ctrlBadgeLgPadding = "var(--smtc-ctrl-badge-lg-padding)"; + +// @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 (undocumented) +export const ctrlBadgePadding = "var(--smtc-ctrl-badge-padding)"; + +// @public (undocumented) +export const ctrlBadgePaddingRaw = "--smtc-ctrl-badge-padding"; + +// @public (undocumented) +export const ctrlBadgeSize = "var(--smtc-ctrl-badge-size)"; + +// @public (undocumented) +export const ctrlBadgeSizeRaw = "--smtc-ctrl-badge-size"; + +// @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 ctrlBadgeSmIconSizeFigmaonly = "var(--smtc-ctrl-badge-sm-icon-sizefigmaonly)"; + +// @public (undocumented) +export const ctrlBadgeSmIconSizeFigmaonlyRaw = "--smtc-ctrl-badge-sm-icon-sizefigmaonly"; + +// @public (undocumented) +export const ctrlBadgeSmIconSizeRaw = "--smtc-ctrl-badge-sm-icon-size"; + +// @public (undocumented) +export const ctrlBadgeSmPadding = "var(--smtc-ctrl-badge-sm-padding)"; + +// @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 (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 (undocumented) +export const ctrlBooleanSelectionhint = "var(--smtc-ctrl-boolean-selectionhint)"; + +// @public (undocumented) +export const ctrlBooleanSelectionhintRaw = "--smtc-ctrl-boolean-selectionhint"; + +// @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 (undocumented) +export const ctrlChoiceBaseBackgroundDisabled = "var(--smtc-ctrl-choice-base-background-disabled, var(--smtc-background-ctrl-outline-disabled))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @public (undocumented) +export const ctrlChoiceBaseStrokeRestRaw = "--smtc-ctrl-choice-base-stroke-rest"; + +// @public (undocumented) +export const ctrlChoiceCheckboxCorner = "var(--smtc-ctrl-choice-checkbox-corner)"; + +// @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-iconsecondary))"; + +// @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-iconsecondary))"; + +// @public (undocumented) +export const ctrlChoiceLgCheckboxIconSizeFigmaonly = "var(--smtc-ctrl-choice-lg-checkbox-icon-sizefigmaonly)"; + +// @public (undocumented) +export const ctrlChoiceLgCheckboxIconSizeFigmaonlyRaw = "--smtc-ctrl-choice-lg-checkbox-icon-sizefigmaonly"; + +// @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)"; + +// @public (undocumented) +export const ctrlChoicePaddingHorizontalRaw = "--smtc-ctrl-choice-padding-horizontal"; + +// @public (undocumented) +export const ctrlChoicePaddingVertical = "var(--smtc-ctrl-choice-padding-vertical)"; + +// @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))"; + +// @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)"; + +// @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-iconsecondary))"; + +// @public (undocumented) +export const ctrlChoiceSmCheckboxIconSizeFigmaonly = "var(--smtc-ctrl-choice-sm-checkbox-icon-sizefigmaonly)"; + +// @public (undocumented) +export const ctrlChoiceSmCheckboxIconSizeFigmaonlyRaw = "--smtc-ctrl-choice-sm-checkbox-icon-sizefigmaonly"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @public (undocumented) +export const ctrlChoiceSwitchPaddingPressedRaw = "--smtc-ctrl-choice-switch-padding-pressed"; + +// @public (undocumented) +export const ctrlChoiceSwitchPaddingRest = "var(--smtc-ctrl-choice-switch-padding-rest)"; + +// @public (undocumented) +export const ctrlChoiceSwitchPaddingRestRaw = "--smtc-ctrl-choice-switch-padding-rest"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbShadowAmbient = "var(--smtc-ctrl-choice-switch-thumb-shadow-ambient, unset)"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbShadowAmbientRaw = "--smtc-ctrl-choice-switch-thumb-shadow-ambient"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbShadowKey = "var(--smtc-ctrl-choice-switch-thumb-shadow-key, unset)"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbShadowKeyRaw = "--smtc-ctrl-choice-switch-thumb-shadow-key"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbWidthHover = "var(--smtc-ctrl-choice-switch-thumb-width-hover, var(--smtc-ctrl-choice-switch-thumb-width-rest))"; + +// @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))"; + +// @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)"; + +// @public (undocumented) +export const ctrlChoiceSwitchThumbWidthRestRaw = "--smtc-ctrl-choice-switch-thumb-width-rest"; + +// @public (undocumented) +export const ctrlChoiceSwitchWidth = "var(--smtc-ctrl-choice-switch-width)"; + +// @public (undocumented) +export const ctrlChoiceSwitchWidthRaw = "--smtc-ctrl-choice-switch-width"; + +// @public (undocumented) +export const ctrlComposerContainerBackgroundAcryliccolorblend = "var(--smtc-ctrl-composer-container-background-acryliccolorblend, var(--smtc-background-flyout-solid))"; + +// @public (undocumented) +export const ctrlComposerContainerBackgroundAcryliccolorblendRaw = "--smtc-ctrl-composer-container-background-acryliccolorblend"; + +// @public (undocumented) +export const ctrlComposerContainerBackgroundAcryliclumblend = "var(--smtc-ctrl-composer-container-background-acryliclumblend, var(--smtc-background-flyout-solid))"; + +// @public (undocumented) +export const ctrlComposerContainerBackgroundAcryliclumblendRaw = "--smtc-ctrl-composer-container-background-acryliclumblend"; + +// @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 ctrlComposerContainerShadowAmbient = "var(--smtc-ctrl-composer-container-shadow-ambient)"; + +// @public (undocumented) +export const ctrlComposerContainerShadowAmbientRaw = "--smtc-ctrl-composer-container-shadow-ambient"; + +// @public (undocumented) +export const ctrlComposerContainerShadowKey = "var(--smtc-ctrl-composer-container-shadow-key)"; + +// @public (undocumented) +export const ctrlComposerContainerShadowKeyRaw = "--smtc-ctrl-composer-container-shadow-key"; + +// @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-bottomstroke-disabled, unset)"; + +// @public (undocumented) +export const ctrlComposerInputBottomstrokeDisabledRaw = "--smtc-ctrl-composer-input-bottomstroke-disabled"; + +// @public (undocumented) +export const ctrlComposerInputBottomstrokeHover = "var(--smtc-ctrl-composer-input-bottomstroke-hover, unset)"; + +// @public (undocumented) +export const ctrlComposerInputBottomstrokeHoverRaw = "--smtc-ctrl-composer-input-bottomstroke-hover"; + +// @public (undocumented) +export const ctrlComposerInputBottomstrokePressed = "var(--smtc-ctrl-composer-input-bottomstroke-pressed, unset)"; + +// @public (undocumented) +export const ctrlComposerInputBottomstrokePressedRaw = "--smtc-ctrl-composer-input-bottomstroke-pressed"; + +// @public (undocumented) +export const ctrlComposerInputBottomstrokeRest = "var(--smtc-ctrl-composer-input-bottomstroke-rest, unset)"; + +// @public (undocumented) +export const ctrlComposerInputBottomstrokeRestRaw = "--smtc-ctrl-composer-input-bottomstroke-rest"; + +// @public (undocumented) +export const ctrlComposerInputBottomstrokeSelectedRest = "var(--smtc-ctrl-composer-input-bottomstroke-selected-rest, unset)"; + +// @public (undocumented) +export const ctrlComposerInputBottomstrokeSelectedRestRaw = "--smtc-ctrl-composer-input-bottomstroke-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-x)"; + +// @public (undocumented) +export const ctrlComposerInputShadowRaw = "--smtc-ctrl-composer-input-shadow-x"; + +// @public (undocumented) +export const ctrlComposerInputStrokeDisabledUsesgradient = "var(--smtc-ctrl-composer-input-stroke-disabledusesgradient, unset)"; + +// @public (undocumented) +export const ctrlComposerInputStrokeDisabledUsesgradientRaw = "--smtc-ctrl-composer-input-stroke-disabledusesgradient"; + +// @public (undocumented) +export const ctrlComposerInputStrokeHoverUsesgradient = "var(--smtc-ctrl-composer-input-stroke-hoverusesgradient, unset)"; + +// @public (undocumented) +export const ctrlComposerInputStrokeHoverUsesgradientRaw = "--smtc-ctrl-composer-input-stroke-hoverusesgradient"; + +// @public (undocumented) +export const ctrlComposerInputStrokePressedUsesgradient = "var(--smtc-ctrl-composer-input-stroke-pressedusesgradient, unset)"; + +// @public (undocumented) +export const ctrlComposerInputStrokePressedUsesgradientRaw = "--smtc-ctrl-composer-input-stroke-pressedusesgradient"; + +// @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-restusesgradient, unset)"; + +// @public (undocumented) +export const ctrlComposerInputStrokeSelectedRestUsesgradientRaw = "--smtc-ctrl-composer-input-stroke-selected-restusesgradient"; + +// @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))"; + +// @public (undocumented) +export const ctrlDialogBaseCornerRaw = "--smtc-ctrl-dialog-base-corner"; + +// @public (undocumented) +export const ctrlDialogBaseShadowAmbient = "var(--smtc-ctrl-dialog-base-shadow-ambient)"; + +// @public (undocumented) +export const ctrlDialogBaseShadowAmbientRaw = "--smtc-ctrl-dialog-base-shadow-ambient"; + +// @public (undocumented) +export const ctrlDialogBaseShadowKey = "var(--smtc-ctrl-dialog-base-shadow-key)"; + +// @public (undocumented) +export const ctrlDialogBaseShadowKeyRaw = "--smtc-ctrl-dialog-base-shadow-key"; + +// @public (undocumented) +export const ctrlDialogLayerBackground = "var(--smtc-ctrl-dialog-layer-background, var(--smtc-background-layer-primarysolid))"; + +// @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, unset)"; + +// @public (undocumented) +export const ctrlDialogStrokeRaw = "--smtc-ctrl-dialog-stroke"; + +// @public (undocumented) +export const ctrlDividerFixedlineLength = "var(--smtc-ctrl-divider-fixedline-length, var(--smtc-padding-content-align-default))"; + +// @public (undocumented) +export const ctrlDividerFixedlineLengthRaw = "--smtc-ctrl-divider-fixedline-length"; + +// @public (undocumented) +export const ctrlDragBackgroundColorblend = "var(--smtc-ctrl-drag-background-colorblend)"; + +// @public (undocumented) +export const ctrlDragBackgroundColorblendRaw = "--smtc-ctrl-drag-background-colorblend"; + +// @public (undocumented) +export const ctrlDragBackgroundLumblend = "var(--smtc-ctrl-drag-background-lumblend)"; + +// @public (undocumented) +export const ctrlDragBackgroundLumblendRaw = "--smtc-ctrl-drag-background-lumblend"; + +// @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 ctrlFabShadowDisabledKey = "var(--smtc-ctrl-fab-shadow-disabled-key, var(--smtc-ctrl-fab-shadow-pressed-key))"; + +// @public (undocumented) +export const ctrlFabShadowDisabledKeyRaw = "--smtc-ctrl-fab-shadow-disabled-key"; + +// @public (undocumented) +export const ctrlFabShadowHoverKey = "var(--smtc-ctrl-fab-shadow-hover-key, var(--smtc-shadow-flyout-key))"; + +// @public (undocumented) +export const ctrlFabShadowHoverKeyRaw = "--smtc-ctrl-fab-shadow-hover-key"; + +// @public (undocumented) +export const ctrlFabShadowPressedKey = "var(--smtc-ctrl-fab-shadow-pressed-key)"; + +// @public (undocumented) +export const ctrlFabShadowPressedKeyRaw = "--smtc-ctrl-fab-shadow-pressed-key"; + +// @public (undocumented) +export const ctrlFabShadowRestAmbient = "var(--smtc-ctrl-fab-shadow-rest-ambient)"; + +// @public (undocumented) +export const ctrlFabShadowRestAmbientRaw = "--smtc-ctrl-fab-shadow-rest-ambient"; + +// @public (undocumented) +export const ctrlFabShadowRestKey = "var(--smtc-ctrl-fab-shadow-rest-key)"; + +// @public (undocumented) +export const ctrlFabShadowRestKeyRaw = "--smtc-ctrl-fab-shadow-rest-key"; + +// @public (undocumented) +export const ctrlFocusInnerStroke = "var(--smtc-ctrl-focus-inner-stroke)"; + +// @public (undocumented) +export const ctrlFocusInnerStrokeRaw = "--smtc-ctrl-focus-inner-stroke"; + +// @public (undocumented) +export const ctrlFocusInnerStrokewidth = "var(--smtc-ctrl-focus-inner-strokewidth, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlFocusInnerStrokewidthRaw = "--smtc-ctrl-focus-inner-strokewidth"; + +// @public (undocumented) +export const ctrlFocusOuterStroke: string; + +// @public (undocumented) +export const ctrlFocusOuterStrokeRaw = "--smtc-ctrl-focus-outer-stroke"; + +// @public (undocumented) +export const ctrlFocusOuterStrokewidth = "var(--smtc-ctrl-focus-outer-strokewidth)"; + +// @public (undocumented) +export const ctrlFocusOuterStrokewidthRaw = "--smtc-ctrl-focus-outer-strokewidth"; + +// @public (undocumented) +export const ctrlFocusPositionFigmaonly = "var(--smtc-ctrl-focus-positionfigmaonly)"; + +// @public (undocumented) +export const ctrlFocusPositionFigmaonlyRaw = "--smtc-ctrl-focus-positionfigmaonly"; + +// @public (undocumented) +export const ctrlInputBackgroundDisabled = "var(--smtc-ctrl-input-background-disabled, var(--smtc-background-ctrl-neutral-disabled))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @public (undocumented) +export const ctrlInputBackgroundSelectedRaw = "--smtc-ctrl-input-background-selected"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokeDisabled = "var(--smtc-ctrl-input-bottomline-stroke-disabled, unset)"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokeDisabledRaw = "--smtc-ctrl-input-bottomline-stroke-disabled"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokeError = "var(--smtc-ctrl-input-bottomline-stroke-error, unset)"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokeErrorRaw = "--smtc-ctrl-input-bottomline-stroke-error"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokeHover = "var(--smtc-ctrl-input-bottomline-stroke-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokeHoverRaw = "--smtc-ctrl-input-bottomline-stroke-hover"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokePressed = "var(--smtc-ctrl-input-bottomline-stroke-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokePressedRaw = "--smtc-ctrl-input-bottomline-stroke-pressed"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokeRest = "var(--smtc-ctrl-input-bottomline-stroke-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokeRestRaw = "--smtc-ctrl-input-bottomline-stroke-rest"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokeSelected = "var(--smtc-ctrl-input-bottomline-stroke-selected, var(--smtc-background-ctrl-brand-rest))"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokeSelectedRaw = "--smtc-ctrl-input-bottomline-stroke-selected"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokewidthHover = "var(--smtc-ctrl-input-bottomline-strokewidth-hover, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokewidthHoverRaw = "--smtc-ctrl-input-bottomline-strokewidth-hover"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokewidthPressed = "var(--smtc-ctrl-input-bottomline-strokewidth-pressed, var(--smtc-ctrl-input-bottomline-strokewidth-selected))"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokewidthPressedRaw = "--smtc-ctrl-input-bottomline-strokewidth-pressed"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokewidthRest = "var(--smtc-ctrl-input-bottomline-strokewidth-rest, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokewidthRestRaw = "--smtc-ctrl-input-bottomline-strokewidth-rest"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokewidthSelected = "var(--smtc-ctrl-input-bottomline-strokewidth-selected)"; + +// @public (undocumented) +export const ctrlInputBottomlineStrokewidthSelectedRaw = "--smtc-ctrl-input-bottomline-strokewidth-selected"; + +// @public (undocumented) +export const ctrlInputStrokeDisabled = "var(--smtc-ctrl-input-stroke-disabled, var(--smtc-stroke-ctrl-onoutline-disabled))"; + +// @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-onoutline-hover))"; + +// @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-onoutline-pressed))"; + +// @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-onoutline-rest))"; + +// @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-onoutline-rest))"; + +// @public (undocumented) +export const ctrlInputStrokeSelectedRaw = "--smtc-ctrl-input-stroke-selected"; + +// @public (undocumented) +export const ctrlInputStrokewidthHover = "var(--smtc-ctrl-input-strokewidth-hover, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlInputStrokewidthHoverRaw = "--smtc-ctrl-input-strokewidth-hover"; + +// @public (undocumented) +export const ctrlInputStrokewidthPressed = "var(--smtc-ctrl-input-strokewidth-pressed, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlInputStrokewidthPressedRaw = "--smtc-ctrl-input-strokewidth-pressed"; + +// @public (undocumented) +export const ctrlInputStrokewidthRest = "var(--smtc-ctrl-input-strokewidth-rest, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlInputStrokewidthRestRaw = "--smtc-ctrl-input-strokewidth-rest"; + +// @public (undocumented) +export const ctrlInputStrokewidthSelected = "var(--smtc-ctrl-input-strokewidth-selected)"; + +// @public (undocumented) +export const ctrlInputStrokewidthSelectedRaw = "--smtc-ctrl-input-strokewidth-selected"; + +// @public (undocumented) +export const ctrlInputTextselectionBackground = "var(--smtc-ctrl-input-textselection-background, var(--smtc-background-ctrl-brand-rest))"; + +// @public (undocumented) +export const ctrlInputTextselectionBackgroundRaw = "--smtc-ctrl-input-textselection-background"; + +// @public (undocumented) +export const ctrlInputTextselectionForeground = "var(--smtc-ctrl-input-textselection-foreground, var(--smtc-foreground-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const ctrlInputTextselectionForegroundRaw = "--smtc-ctrl-input-textselection-foreground"; + +// @public (undocumented) +export const ctrlLinkForegroundBrandHover: string; + +// @public (undocumented) +export const ctrlLinkForegroundBrandHoverRaw = "--smtc-ctrl-link-foreground-brand-hover"; + +// @public (undocumented) +export const ctrlLinkForegroundBrandPressed: string; + +// @public (undocumented) +export const ctrlLinkForegroundBrandPressedRaw = "--smtc-ctrl-link-foreground-brand-pressed"; + +// @public (undocumented) +export const ctrlLinkForegroundBrandRest: string; + +// @public (undocumented) +export const ctrlLinkForegroundBrandRestRaw = "--smtc-ctrl-link-foreground-brand-rest"; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralHover: string; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralHoverRaw = "--smtc-ctrl-link-foreground-neutral-hover"; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralPressed: string; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralPressedRaw = "--smtc-ctrl-link-foreground-neutral-pressed"; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralRest: string; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralRestRaw = "--smtc-ctrl-link-foreground-neutral-rest"; + +// @public (undocumented) +export const ctrlLinkInlineShowunderlineatrest = "var(--smtc-ctrl-link-inline-showunderlineatrest)"; + +// @public (undocumented) +export const ctrlLinkInlineShowunderlineatrestRaw = "--smtc-ctrl-link-inline-showunderlineatrest"; + +// @public (undocumented) +export const ctrlLinkInlineStrokewidthHover = "var(--smtc-ctrl-link-inline-strokewidth-hover, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlLinkInlineStrokewidthHoverRaw = "--smtc-ctrl-link-inline-strokewidth-hover"; + +// @public (undocumented) +export const ctrlLinkInlineStrokewidthRest = "var(--smtc-ctrl-link-inline-strokewidth-rest, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlLinkInlineStrokewidthRestRaw = "--smtc-ctrl-link-inline-strokewidth-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 ctrlLinkInlineUnderlineSolidFigmaonly = "var(--smtc-ctrl-link-inline-underline-solidfigmaonly)"; + +// @public (undocumented) +export const ctrlLinkInlineUnderlineSolidFigmaonlyRaw = "--smtc-ctrl-link-inline-underline-solidfigmaonly"; + +// @public (undocumented) +export const ctrlLinkOnpageShowunderlineatrest = "var(--smtc-ctrl-link-onpage-showunderlineatrest)"; + +// @public (undocumented) +export const ctrlLinkOnpageShowunderlineatrestRaw = "--smtc-ctrl-link-onpage-showunderlineatrest"; + +// @public (undocumented) +export const ctrlLinkOnpageStrokewidthHover = "var(--smtc-ctrl-link-onpage-strokewidth-hover, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlLinkOnpageStrokewidthHoverRaw = "--smtc-ctrl-link-onpage-strokewidth-hover"; + +// @public (undocumented) +export const ctrlLinkOnpageStrokewidthRest = "var(--smtc-ctrl-link-onpage-strokewidth-rest, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlLinkOnpageStrokewidthRestRaw = "--smtc-ctrl-link-onpage-strokewidth-rest"; + +// @public (undocumented) +export const ctrlLinkOnpageUnderlineDashed = "var(--smtc-ctrl-link-onpage-underline-dashed)"; + +// @public (undocumented) +export const ctrlLinkOnpageUnderlineDashedRaw = "--smtc-ctrl-link-onpage-underline-dashed"; + +// @public (undocumented) +export const ctrlLinkOnpageUnderlineSolidFigmaonly = "var(--smtc-ctrl-link-onpage-underline-solidfigmaonly)"; + +// @public (undocumented) +export const ctrlLinkOnpageUnderlineSolidFigmaonlyRaw = "--smtc-ctrl-link-onpage-underline-solidfigmaonly"; + +// @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-iconsecondary))"; + +// @public (undocumented) +export const ctrlListChoiceCheckboxIconSizeFigmaonly = "var(--smtc-ctrl-list-choice-checkbox-icon-sizefigmaonly)"; + +// @public (undocumented) +export const ctrlListChoiceCheckboxIconSizeFigmaonlyRaw = "--smtc-ctrl-list-choice-checkbox-icon-sizefigmaonly"; + +// @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 ctrlListChoiceDotSizeFigmaonly = "var(--smtc-ctrl-list-choice-dot-sizefigmaonly)"; + +// @public (undocumented) +export const ctrlListChoiceDotSizeFigmaonlyRaw = "--smtc-ctrl-list-choice-dot-sizefigmaonly"; + +// @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-brand-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-brand-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))"; + +// @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))"; + +// @public (undocumented) +export const ctrlListCornerRestRaw = "--smtc-ctrl-list-corner-rest"; + +// @public (undocumented) +export const ctrlListIndentLevel1 = "var(--smtc-ctrl-list-indent-level1, var(--smtc-padding-ctrl-horizontal-default))"; + +// @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 (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-fullwidth)"; + +// @public (undocumented) +export const ctrlListPillFullwidthRaw = "--smtc-ctrl-list-pill-fullwidth"; + +// @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)"; + +// @public (undocumented) +export const ctrlListPillWidthRaw = "--smtc-ctrl-list-pill-width"; + +// @public (undocumented) +export const ctrlListShadowSelectedAmbient = "var(--smtc-ctrl-list-shadow-selected-ambient)"; + +// @public (undocumented) +export const ctrlListShadowSelectedAmbientRaw = "--smtc-ctrl-list-shadow-selected-ambient"; + +// @public (undocumented) +export const ctrlListShadowSelectedKey = "var(--smtc-ctrl-list-shadow-selected-key, unset)"; + +// @public (undocumented) +export const ctrlListShadowSelectedKeyRaw = "--smtc-ctrl-list-shadow-selected-key"; + +// @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-showdivider)"; + +// @public (undocumented) +export const ctrlListSplitDividerShowdividerRaw = "--smtc-ctrl-list-split-divider-showdivider"; + +// @public (undocumented) +export const ctrlListSplitDividerStroke = "var(--smtc-ctrl-list-split-divider-stroke, var(--smtc-stroke-ctrl-divider-onneutral))"; + +// @public (undocumented) +export const ctrlListSplitDividerStrokeRaw = "--smtc-ctrl-list-split-divider-stroke"; + +// @public (undocumented) +export const ctrlLitefilterBackgroundSelected = "var(--smtc-ctrl-litefilter-background-selected, var(--smtc-background-ctrl-brand-rest))"; + +// @public (undocumented) +export const ctrlLitefilterBackgroundSelectedRaw = "--smtc-ctrl-litefilter-background-selected"; + +// @public (undocumented) +export const ctrlLitefilterForegroundSelected = "var(--smtc-ctrl-litefilter-foreground-selected, var(--smtc-foreground-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const ctrlLitefilterForegroundSelectedRaw = "--smtc-ctrl-litefilter-foreground-selected"; + +// @public (undocumented) +export const ctrlLitefilterStrokeSelected = "var(--smtc-ctrl-litefilter-stroke-selected, var(--smtc-stroke-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const ctrlLitefilterStrokeSelectedRaw = "--smtc-ctrl-litefilter-stroke-selected"; + +// @public (undocumented) +export const ctrlLitefilterStrokewidthSelected = "var(--smtc-ctrl-litefilter-strokewidth-selected, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlLitefilterStrokewidthSelectedRaw = "--smtc-ctrl-litefilter-strokewidth-selected"; + +// @public (undocumented) +export const ctrlProgressBackgroundEmpty = "var(--smtc-ctrl-progress-background-empty)"; + +// @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))"; + +// @public (undocumented) +export const ctrlProgressBackgroundFilledRaw = "--smtc-ctrl-progress-background-filled"; + +// @public (undocumented) +export const ctrlProgressCorner = "var(--smtc-ctrl-progress-corner, var(--smtc-corner-circular))"; + +// @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))"; + +// @public (undocumented) +export const ctrlProgressHeightEmptyRaw = "--smtc-ctrl-progress-height-empty"; + +// @public (undocumented) +export const ctrlProgressHeightFilled = "var(--smtc-ctrl-progress-height-filled)"; + +// @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))"; + +// @public (undocumented) +export const ctrlProgressLgHeightEmptyRaw = "--smtc-ctrl-progress-lg-height-empty"; + +// @public (undocumented) +export const ctrlProgressLgHeightFilled = "var(--smtc-ctrl-progress-lg-height-filled)"; + +// @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 (undocumented) +export const ctrlRatingIconForegroundEmpty = "var(--smtc-ctrl-rating-icon-foreground-empty, var(--smtc-ctrl-progress-background-empty))"; + +// @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))"; + +// @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-icontheme-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)"; + +// @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)"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @public (undocumented) +export const ctrlSliderBarHeightRaw = "--smtc-ctrl-slider-bar-height"; + +// @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 (undocumented) +export const ctrlSliderSmBarHeight = "var(--smtc-ctrl-slider-sm-bar-height, var(--smtc-ctrl-progress-sm-height-filled))"; + +// @public (undocumented) +export const ctrlSliderSmBarHeightRaw = "--smtc-ctrl-slider-sm-bar-height"; + +// @public (undocumented) +export const ctrlSliderSmThumbSizeHover = "var(--smtc-ctrl-slider-sm-thumb-size-hover, var(--smtc-size-ctrl-sm-icon))"; + +// @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))"; + +// @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))"; + +// @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-onbrand-disabled))"; + +// @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-onbrand-rest))"; + +// @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-onbrand-rest))"; + +// @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-onbrand-rest))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokeRestRaw = "--smtc-ctrl-slider-thumb-inner-stroke-rest"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokewidthHover = "var(--smtc-ctrl-slider-thumb-inner-strokewidth-hover, var(--smtc-ctrl-slider-thumb-inner-strokewidth-rest))"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokewidthHoverRaw = "--smtc-ctrl-slider-thumb-inner-strokewidth-hover"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokewidthPressed = "var(--smtc-ctrl-slider-thumb-inner-strokewidth-pressed, var(--smtc-ctrl-slider-thumb-inner-strokewidth-rest))"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokewidthPressedRaw = "--smtc-ctrl-slider-thumb-inner-strokewidth-pressed"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokewidthRest = "var(--smtc-ctrl-slider-thumb-inner-strokewidth-rest)"; + +// @public (undocumented) +export const ctrlSliderThumbInnerStrokewidthRestRaw = "--smtc-ctrl-slider-thumb-inner-strokewidth-rest"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokeDisabled = "var(--smtc-ctrl-slider-thumb-outer-stroke-disabled, var(--smtc-background-ctrl-brand-disabled))"; + +// @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))"; + +// @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))"; + +// @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))"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokeRestRaw = "--smtc-ctrl-slider-thumb-outer-stroke-rest"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokewidth = "var(--smtc-ctrl-slider-thumb-outer-strokewidth, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlSliderThumbOuterStrokewidthRaw = "--smtc-ctrl-slider-thumb-outer-strokewidth"; + +// @public (undocumented) +export const ctrlSliderThumbSizeHover = "var(--smtc-ctrl-slider-thumb-size-hover, var(--smtc-size-ctrl-icon))"; + +// @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))"; + +// @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))"; + +// @public (undocumented) +export const ctrlSliderThumbSizeRestRaw = "--smtc-ctrl-slider-thumb-size-rest"; + +// @public (undocumented) +export const ctrlSpinnerShowemptytrack = "var(--smtc-ctrl-spinner-showemptytrack)"; + +// @public (undocumented) +export const ctrlSpinnerShowemptytrackRaw = "--smtc-ctrl-spinner-showemptytrack"; + +// @public (undocumented) +export const ctrlSpinnerStrokewidth = "var(--smtc-ctrl-spinner-strokewidth, var(--smtc-ctrl-progress-height-filled))"; + +// @public (undocumented) +export const ctrlSpinnerStrokewidthRaw = "--smtc-ctrl-spinner-strokewidth"; + +// @public (undocumented) +export const ctrlSplitDividerStrokewidth = "var(--smtc-ctrl-split-divider-strokewidth, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlSplitDividerStrokewidthOnoutline = "var(--smtc-ctrl-split-divider-strokewidth-onoutline, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const ctrlSplitDividerStrokewidthOnoutlineRaw = "--smtc-ctrl-split-divider-strokewidth-onoutline"; + +// @public (undocumented) +export const ctrlSplitDividerStrokewidthOnsubtle = "var(--smtc-ctrl-split-divider-strokewidth-onsubtle, unset)"; + +// @public (undocumented) +export const ctrlSplitDividerStrokewidthOnsubtleRaw = "--smtc-ctrl-split-divider-strokewidth-onsubtle"; + +// @public (undocumented) +export const ctrlSplitDividerStrokewidthRaw = "--smtc-ctrl-split-divider-strokewidth"; + +// @public (undocumented) +export const ctrlTooltipBackground = "var(--smtc-ctrl-tooltip-background)"; + +// @public (undocumented) +export const ctrlTooltipBackgroundRaw = "--smtc-ctrl-tooltip-background"; + +// @public (undocumented) +export const ctrlTooltipCorner = "var(--smtc-ctrl-tooltip-corner, var(--smtc-corner-ctrl-rest))"; + +// @public (undocumented) +export const ctrlTooltipCornerRaw = "--smtc-ctrl-tooltip-corner"; + +// @public (undocumented) +export const ctrlTooltipForeground = "var(--smtc-ctrl-tooltip-foreground)"; + +// @public (undocumented) +export const ctrlTooltipForegroundRaw = "--smtc-ctrl-tooltip-foreground"; + +// @public (undocumented) +export const ctrlTooltipShadowAmbient = "var(--smtc-ctrl-tooltip-shadow-ambient, var(--smtc-ctrl-fab-shadow-rest-ambient))"; + +// @public (undocumented) +export const ctrlTooltipShadowAmbientRaw = "--smtc-ctrl-tooltip-shadow-ambient"; + +// @public (undocumented) +export const ctrlTooltipShadowKey = "var(--smtc-ctrl-tooltip-shadow-key, var(--smtc-ctrl-fab-shadow-rest-key))"; + +// @public (undocumented) +export const ctrlTooltipShadowKeyRaw = "--smtc-ctrl-tooltip-shadow-key"; + +// @public (undocumented) +export const foregroundContentBrandPrimary = "var(--smtc-foreground-content-brand-primary, var(--smtc-foreground-ctrl-brand-rest))"; + +// @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))"; + +// @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))"; + +// @public (undocumented) +export const foregroundContentNeutralSecondaryRaw = "--smtc-foreground-content-neutral-secondary"; + +// @public (undocumented) +export const foregroundCtrlActivebrandDisabled = "var(--smtc-foreground-ctrl-activebrand-disabled, var(--smtc-foreground-ctrl-brand-disabled))"; + +// @public (undocumented) +export const foregroundCtrlActivebrandDisabledRaw = "--smtc-foreground-ctrl-activebrand-disabled"; + +// @public (undocumented) +export const foregroundCtrlActivebrandHover = "var(--smtc-foreground-ctrl-activebrand-hover, var(--smtc-foreground-ctrl-brand-hover))"; + +// @public (undocumented) +export const foregroundCtrlActivebrandHoverRaw = "--smtc-foreground-ctrl-activebrand-hover"; + +// @public (undocumented) +export const foregroundCtrlActivebrandPressed = "var(--smtc-foreground-ctrl-activebrand-pressed, var(--smtc-foreground-ctrl-brand-pressed))"; + +// @public (undocumented) +export const foregroundCtrlActivebrandPressedRaw = "--smtc-foreground-ctrl-activebrand-pressed"; + +// @public (undocumented) +export const foregroundCtrlActivebrandRest = "var(--smtc-foreground-ctrl-activebrand-rest, var(--smtc-foreground-ctrl-brand-rest))"; + +// @public (undocumented) +export const foregroundCtrlActivebrandRestRaw = "--smtc-foreground-ctrl-activebrand-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-onneutral-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; + +// @public (undocumented) +export const foregroundCtrlIconOnneutralDisabledRaw = "--smtc-foreground-ctrl-icon-onneutral-disabled"; + +// @public (undocumented) +export const foregroundCtrlIconOnneutralHover = "var(--smtc-foreground-ctrl-icon-onneutral-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnneutralHoverRaw = "--smtc-foreground-ctrl-icon-onneutral-hover"; + +// @public (undocumented) +export const foregroundCtrlIconOnneutralPressed = "var(--smtc-foreground-ctrl-icon-onneutral-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnneutralPressedRaw = "--smtc-foreground-ctrl-icon-onneutral-pressed"; + +// @public (undocumented) +export const foregroundCtrlIconOnneutralRest = "var(--smtc-foreground-ctrl-icon-onneutral-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnneutralRestRaw = "--smtc-foreground-ctrl-icon-onneutral-rest"; + +// @public (undocumented) +export const foregroundCtrlIconOnoutlineDisabled = "var(--smtc-foreground-ctrl-icon-onoutline-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; + +// @public (undocumented) +export const foregroundCtrlIconOnoutlineDisabledRaw = "--smtc-foreground-ctrl-icon-onoutline-disabled"; + +// @public (undocumented) +export const foregroundCtrlIconOnoutlineHover = "var(--smtc-foreground-ctrl-icon-onoutline-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnoutlineHoverRaw = "--smtc-foreground-ctrl-icon-onoutline-hover"; + +// @public (undocumented) +export const foregroundCtrlIconOnoutlinePressed = "var(--smtc-foreground-ctrl-icon-onoutline-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnoutlinePressedRaw = "--smtc-foreground-ctrl-icon-onoutline-pressed"; + +// @public (undocumented) +export const foregroundCtrlIconOnoutlineRest = "var(--smtc-foreground-ctrl-icon-onoutline-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnoutlineRestRaw = "--smtc-foreground-ctrl-icon-onoutline-rest"; + +// @public (undocumented) +export const foregroundCtrlIconOnsubtleDisabled = "var(--smtc-foreground-ctrl-icon-onsubtle-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; + +// @public (undocumented) +export const foregroundCtrlIconOnsubtleDisabledRaw = "--smtc-foreground-ctrl-icon-onsubtle-disabled"; + +// @public (undocumented) +export const foregroundCtrlIconOnsubtleHover = "var(--smtc-foreground-ctrl-icon-onsubtle-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnsubtleHoverRaw = "--smtc-foreground-ctrl-icon-onsubtle-hover"; + +// @public (undocumented) +export const foregroundCtrlIconOnsubtlePressed = "var(--smtc-foreground-ctrl-icon-onsubtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnsubtlePressedRaw = "--smtc-foreground-ctrl-icon-onsubtle-pressed"; + +// @public (undocumented) +export const foregroundCtrlIconOnsubtleRest = "var(--smtc-foreground-ctrl-icon-onsubtle-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlIconOnsubtleRestRaw = "--smtc-foreground-ctrl-icon-onsubtle-rest"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryDisabled: string; + +// @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))"; + +// @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))"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryPressedRaw = "--smtc-foreground-ctrl-neutral-primary-pressed"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryRest = "var(--smtc-foreground-ctrl-neutral-primary-rest)"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryRestRaw = "--smtc-foreground-ctrl-neutral-primary-rest"; + +// @public (undocumented) +export const foregroundCtrlNeutralSecondaryDisabled = "var(--smtc-foreground-ctrl-neutral-secondary-disabled)"; + +// @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))"; + +// @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))"; + +// @public (undocumented) +export const foregroundCtrlNeutralSecondaryPressedRaw = "--smtc-foreground-ctrl-neutral-secondary-pressed"; + +// @public (undocumented) +export const foregroundCtrlNeutralSecondaryRest = "var(--smtc-foreground-ctrl-neutral-secondary-rest)"; + +// @public (undocumented) +export const foregroundCtrlNeutralSecondaryRestRaw = "--smtc-foreground-ctrl-neutral-secondary-rest"; + +// @public (undocumented) +export const foregroundCtrlOnactivebrandDisabled = "var(--smtc-foreground-ctrl-onactivebrand-disabled, var(--smtc-foreground-ctrl-onbrand-disabled))"; + +// @public (undocumented) +export const foregroundCtrlOnactivebrandDisabledRaw = "--smtc-foreground-ctrl-onactivebrand-disabled"; + +// @public (undocumented) +export const foregroundCtrlOnactivebrandHover = "var(--smtc-foreground-ctrl-onactivebrand-hover, var(--smtc-foreground-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const foregroundCtrlOnactivebrandHoverRaw = "--smtc-foreground-ctrl-onactivebrand-hover"; + +// @public (undocumented) +export const foregroundCtrlOnactivebrandPressed = "var(--smtc-foreground-ctrl-onactivebrand-pressed, var(--smtc-foreground-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const foregroundCtrlOnactivebrandPressedRaw = "--smtc-foreground-ctrl-onactivebrand-pressed"; + +// @public (undocumented) +export const foregroundCtrlOnactivebrandRest = "var(--smtc-foreground-ctrl-onactivebrand-rest, var(--smtc-foreground-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const foregroundCtrlOnactivebrandRestRaw = "--smtc-foreground-ctrl-onactivebrand-rest"; + +// @public (undocumented) +export const foregroundCtrlOnbrandDisabled = "var(--smtc-foreground-ctrl-onbrand-disabled)"; + +// @public (undocumented) +export const foregroundCtrlOnbrandDisabledRaw = "--smtc-foreground-ctrl-onbrand-disabled"; + +// @public (undocumented) +export const foregroundCtrlOnbrandHover = "var(--smtc-foreground-ctrl-onbrand-hover, var(--smtc-foreground-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const foregroundCtrlOnbrandHoverRaw = "--smtc-foreground-ctrl-onbrand-hover"; + +// @public (undocumented) +export const foregroundCtrlOnbrandPressed = "var(--smtc-foreground-ctrl-onbrand-pressed, var(--smtc-foreground-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const foregroundCtrlOnbrandPressedRaw = "--smtc-foreground-ctrl-onbrand-pressed"; + +// @public (undocumented) +export const foregroundCtrlOnbrandRest = "var(--smtc-foreground-ctrl-onbrand-rest)"; + +// @public (undocumented) +export const foregroundCtrlOnbrandRestRaw = "--smtc-foreground-ctrl-onbrand-rest"; + +// @public (undocumented) +export const foregroundCtrlOnoutlineDisabled = "var(--smtc-foreground-ctrl-onoutline-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; + +// @public (undocumented) +export const foregroundCtrlOnoutlineDisabledRaw = "--smtc-foreground-ctrl-onoutline-disabled"; + +// @public (undocumented) +export const foregroundCtrlOnoutlineHover = "var(--smtc-foreground-ctrl-onoutline-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlOnoutlineHoverRaw = "--smtc-foreground-ctrl-onoutline-hover"; + +// @public (undocumented) +export const foregroundCtrlOnoutlinePressed = "var(--smtc-foreground-ctrl-onoutline-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlOnoutlinePressedRaw = "--smtc-foreground-ctrl-onoutline-pressed"; + +// @public (undocumented) +export const foregroundCtrlOnoutlineRest = "var(--smtc-foreground-ctrl-onoutline-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlOnoutlineRestRaw = "--smtc-foreground-ctrl-onoutline-rest"; + +// @public (undocumented) +export const foregroundCtrlOnsubtleDisabled = "var(--smtc-foreground-ctrl-onsubtle-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; + +// @public (undocumented) +export const foregroundCtrlOnsubtleDisabledRaw = "--smtc-foreground-ctrl-onsubtle-disabled"; + +// @public (undocumented) +export const foregroundCtrlOnsubtleHover = "var(--smtc-foreground-ctrl-onsubtle-hover, var(--smtc-foreground-ctrl-neutral-primary-hover))"; + +// @public (undocumented) +export const foregroundCtrlOnsubtleHoverRaw = "--smtc-foreground-ctrl-onsubtle-hover"; + +// @public (undocumented) +export const foregroundCtrlOnsubtlePressed = "var(--smtc-foreground-ctrl-onsubtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-pressed))"; + +// @public (undocumented) +export const foregroundCtrlOnsubtlePressedRaw = "--smtc-foreground-ctrl-onsubtle-pressed"; + +// @public (undocumented) +export const foregroundCtrlOnsubtleRest = "var(--smtc-foreground-ctrl-onsubtle-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlOnsubtleRestRaw = "--smtc-foreground-ctrl-onsubtle-rest"; + +// @public (undocumented) +export const foregroundCtrlOntransparentDisabled = "var(--smtc-foreground-ctrl-ontransparent-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; + +// @public (undocumented) +export const foregroundCtrlOntransparentDisabledRaw = "--smtc-foreground-ctrl-ontransparent-disabled"; + +// @public (undocumented) +export const foregroundCtrlOntransparentHover = "var(--smtc-foreground-ctrl-ontransparent-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlOntransparentHoverRaw = "--smtc-foreground-ctrl-ontransparent-hover"; + +// @public (undocumented) +export const foregroundCtrlOntransparentPressed = "var(--smtc-foreground-ctrl-ontransparent-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlOntransparentPressedRaw = "--smtc-foreground-ctrl-ontransparent-pressed"; + +// @public (undocumented) +export const foregroundCtrlOntransparentRest = "var(--smtc-foreground-ctrl-ontransparent-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; + +// @public (undocumented) +export const foregroundCtrlOntransparentRestRaw = "--smtc-foreground-ctrl-ontransparent-rest"; + +// @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)"; + +// @public (undocumented) +export const gapBetweenContentSmallRaw = "--smtc-gap-between-content-small"; + +// @public (undocumented) +export const gapBetweenContentXlarge = "var(--smtc-gap-between-content-xlarge)"; + +// @public (undocumented) +export const gapBetweenContentXlargeRaw = "--smtc-gap-between-content-xlarge"; + +// @public (undocumented) +export const gapBetweenContentXsmall = "var(--smtc-gap-between-content-xsmall)"; + +// @public (undocumented) +export const gapBetweenContentXsmallRaw = "--smtc-gap-between-content-xsmall"; + +// @public (undocumented) +export const gapBetweenContentXxlarge = "var(--smtc-gap-between-content-xxlarge)"; + +// @public (undocumented) +export const gapBetweenContentXxlargeRaw = "--smtc-gap-between-content-xxlarge"; + +// @public (undocumented) +export const gapBetweenContentXxsmall = "var(--smtc-gap-between-content-xxsmall)"; + +// @public (undocumented) +export const gapBetweenContentXxsmallRaw = "--smtc-gap-between-content-xxsmall"; + +// @public (undocumented) +export const gapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default)"; + +// @public (undocumented) +export const gapBetweenCtrlDefaultRaw = "--smtc-gap-between-ctrl-default"; + +// @public (undocumented) +export const gapBetweenCtrlLgDefault = "var(--smtc-gap-between-ctrl-lg-default)"; + +// @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-tonestedcontrol))"; + +// @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-tonestedcontrol))"; + +// @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-tonestedcontrol))"; + +// @public (undocumented) +export const gapBetweenCtrlSmNestedRaw = "--smtc-gap-between-ctrl-sm-nested"; + +// @public (undocumented) +export const gapCard = "var(--smtc-gap-card, var(--smtc-gap-between-content-medium))"; + +// @public (undocumented) +export const gapCardRaw = "--smtc-gap-card"; + +// @public (undocumented) +export const gapInsideCtrlDefault = "var(--smtc-gap-inside-ctrl-default)"; + +// @public (undocumented) +export const gapInsideCtrlDefaultRaw = "--smtc-gap-inside-ctrl-default"; + +// @public (undocumented) +export const gapInsideCtrlLgDefault = "var(--smtc-gap-inside-ctrl-lg-default)"; + +// @public (undocumented) +export const gapInsideCtrlLgDefaultRaw = "--smtc-gap-inside-ctrl-lg-default"; + +// @public (undocumented) +export const gapInsideCtrlLgTolabel = "var(--smtc-gap-inside-ctrl-lg-tolabel)"; + +// @public (undocumented) +export const gapInsideCtrlLgTolabelRaw = "--smtc-gap-inside-ctrl-lg-tolabel"; + +// @public (undocumented) +export const gapInsideCtrlLgTosecondaryicon = "var(--smtc-gap-inside-ctrl-lg-tosecondaryicon)"; + +// @public (undocumented) +export const gapInsideCtrlLgTosecondaryiconRaw = "--smtc-gap-inside-ctrl-lg-tosecondaryicon"; + +// @public (undocumented) +export const gapInsideCtrlSmDefault = "var(--smtc-gap-inside-ctrl-sm-default)"; + +// @public (undocumented) +export const gapInsideCtrlSmDefaultRaw = "--smtc-gap-inside-ctrl-sm-default"; + +// @public (undocumented) +export const gapInsideCtrlSmTolabel = "var(--smtc-gap-inside-ctrl-sm-tolabel)"; + +// @public (undocumented) +export const gapInsideCtrlSmTolabelRaw = "--smtc-gap-inside-ctrl-sm-tolabel"; + +// @public (undocumented) +export const gapInsideCtrlSmTosecondaryicon = "var(--smtc-gap-inside-ctrl-sm-tosecondaryicon)"; + +// @public (undocumented) +export const gapInsideCtrlSmTosecondaryiconRaw = "--smtc-gap-inside-ctrl-sm-tosecondaryicon"; + +// @public (undocumented) +export const gapInsideCtrlTolabel = "var(--smtc-gap-inside-ctrl-tolabel)"; + +// @public (undocumented) +export const gapInsideCtrlTolabelRaw = "--smtc-gap-inside-ctrl-tolabel"; + +// @public (undocumented) +export const gapInsideCtrlTosecondaryicon = "var(--smtc-gap-inside-ctrl-tosecondaryicon)"; + +// @public (undocumented) +export const gapInsideCtrlTosecondaryiconRaw = "--smtc-gap-inside-ctrl-tosecondaryicon"; + +// @public (undocumented) +export const gapList = "var(--smtc-gap-list, var(--smtc-gap-between-content-xxsmall))"; + +// @public (undocumented) +export const gapListRaw = "--smtc-gap-list"; + +// @public (undocumented) +export const gapTextLarge = "var(--smtc-gap-text-large, var(--smtc-gap-between-content-xsmall))"; + +// @public (undocumented) +export const gapTextLargeRaw = "--smtc-gap-text-large"; + +// @public (undocumented) +export const gapTextSmall = "var(--smtc-gap-text-small, var(--smtc-gap-between-content-xxsmall))"; + +// @public (undocumented) +export const gapTextSmallRaw = "--smtc-gap-text-small"; + +// @public (undocumented) +export const iconthemeCtrlChevronDefault = "var(--smtc-icontheme-ctrl-chevron-default, var(--smtc-icontheme-ctrl-default-rest))"; + +// @public (undocumented) +export const iconthemeCtrlChevronDefaultRaw = "--smtc-icontheme-ctrl-chevron-default"; + +// @public (undocumented) +export const iconthemeCtrlChevronSelected = "var(--smtc-icontheme-ctrl-chevron-selected, var(--smtc-icontheme-ctrl-default-selected))"; + +// @public (undocumented) +export const iconthemeCtrlChevronSelectedRaw = "--smtc-icontheme-ctrl-chevron-selected"; + +// @public (undocumented) +export const iconthemeCtrlDefaultHover = "var(--smtc-icontheme-ctrl-default-hover, var(--smtc-icontheme-ctrl-default-rest))"; + +// @public (undocumented) +export const iconthemeCtrlDefaultHoverRaw = "--smtc-icontheme-ctrl-default-hover"; + +// @public (undocumented) +export const iconthemeCtrlDefaultPressed = "var(--smtc-icontheme-ctrl-default-pressed, var(--smtc-icontheme-ctrl-default-rest))"; + +// @public (undocumented) +export const iconthemeCtrlDefaultPressedRaw = "--smtc-icontheme-ctrl-default-pressed"; + +// @public (undocumented) +export const iconthemeCtrlDefaultRest = "var(--smtc-icontheme-ctrl-default-rest)"; + +// @public (undocumented) +export const iconthemeCtrlDefaultRestRaw = "--smtc-icontheme-ctrl-default-rest"; + +// @public (undocumented) +export const iconthemeCtrlDefaultSelected = "var(--smtc-icontheme-ctrl-default-selected)"; + +// @public (undocumented) +export const iconthemeCtrlDefaultSelectedRaw = "--smtc-icontheme-ctrl-default-selected"; + +// @public (undocumented) +export const iconthemeCtrlSubtleHover = "var(--smtc-icontheme-ctrl-subtle-hover, var(--smtc-icontheme-ctrl-default-rest))"; + +// @public (undocumented) +export const iconthemeCtrlSubtleHoverRaw = "--smtc-icontheme-ctrl-subtle-hover"; + +// @public (undocumented) +export const iconthemeCtrlSubtlePressed = "var(--smtc-icontheme-ctrl-subtle-pressed, var(--smtc-icontheme-ctrl-default-rest))"; + +// @public (undocumented) +export const iconthemeCtrlSubtlePressedRaw = "--smtc-icontheme-ctrl-subtle-pressed"; + +// @public (undocumented) +export const iconthemeCtrlSubtleRest = "var(--smtc-icontheme-ctrl-subtle-rest, var(--smtc-icontheme-ctrl-default-rest))"; + +// @public (undocumented) +export const iconthemeCtrlSubtleRestRaw = "--smtc-icontheme-ctrl-subtle-rest"; + +// @public (undocumented) +export const iconthemeCtrlSubtleSelected = "var(--smtc-icontheme-ctrl-subtle-selected, var(--smtc-icontheme-ctrl-default-selected))"; + +// @public (undocumented) +export const iconthemeCtrlSubtleSelectedRaw = "--smtc-icontheme-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-colorblend, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialAcrylicDefaultColorblendRaw = "--smtc-material-acrylic-default-colorblend"; + +// @public (undocumented) +export const materialAcrylicDefaultLumblend = "var(--smtc-material-acrylic-default-lumblend, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialAcrylicDefaultLumblendRaw = "--smtc-material-acrylic-default-lumblend"; + +// @public (undocumented) +export const materialAcrylicDefaultSolid = "var(--smtc-material-acrylic-default-solid, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialAcrylicDefaultSolidRaw = "--smtc-material-acrylic-default-solid"; + +// @public (undocumented) +export const materialAcrylicShellDefaultColorblend = "var(--smtc-material-acrylic-shell-default-colorblend, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialAcrylicShellDefaultColorblendRaw = "--smtc-material-acrylic-shell-default-colorblend"; + +// @public (undocumented) +export const materialAcrylicShellDefaultLumblend = "var(--smtc-material-acrylic-shell-default-lumblend, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialAcrylicShellDefaultLumblendRaw = "--smtc-material-acrylic-shell-default-lumblend"; + +// @public (undocumented) +export const materialAcrylicShellDefaultSolid = "var(--smtc-material-acrylic-shell-default-solid, var(--smtc-background-layer-primarysolid))"; + +// @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-colorblend, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialMicaDarkerColorblendRaw = "--smtc-material-mica-darker-colorblend"; + +// @public (undocumented) +export const materialMicaDarkerLumblend = "var(--smtc-material-mica-darker-lumblend, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialMicaDarkerLumblendRaw = "--smtc-material-mica-darker-lumblend"; + +// @public (undocumented) +export const materialMicaDarkerSolid = "var(--smtc-material-mica-darker-solid, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialMicaDarkerSolidRaw = "--smtc-material-mica-darker-solid"; + +// @public (undocumented) +export const materialMicaDefaultColorblend = "var(--smtc-material-mica-default-colorblend, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialMicaDefaultColorblendRaw = "--smtc-material-mica-default-colorblend"; + +// @public (undocumented) +export const materialMicaDefaultLumblend = "var(--smtc-material-mica-default-lumblend, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialMicaDefaultLumblendRaw = "--smtc-material-mica-default-lumblend"; + +// @public (undocumented) +export const materialMicaDefaultSolid = "var(--smtc-material-mica-default-solid, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialMicaDefaultSolidRaw = "--smtc-material-mica-default-solid"; + +// @public (undocumented) +export const materialMicaThinColorblend = "var(--smtc-material-mica-thin-colorblend, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialMicaThinColorblendRaw = "--smtc-material-mica-thin-colorblend"; + +// @public (undocumented) +export const materialMicaThinLumblend = "var(--smtc-material-mica-thin-lumblend, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialMicaThinLumblendRaw = "--smtc-material-mica-thin-lumblend"; + +// @public (undocumented) +export const materialMicaThinSolid = "var(--smtc-material-mica-thin-solid, var(--smtc-background-layer-primarysolid))"; + +// @public (undocumented) +export const materialMicaThinSolidRaw = "--smtc-material-mica-thin-solid"; + +// @public (undocumented) +export const nullColor = "var(--smtc-null-color)"; + +// @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-nestedimage, var(--smtc-padding-content-align-default))"; + +// @public (undocumented) +export const paddingCardNestedimageRaw = "--smtc-padding-card-nestedimage"; + +// @public (undocumented) +export const paddingContentAlignDefault = "var(--smtc-padding-content-align-default)"; + +// @public (undocumented) +export const paddingContentAlignDefaultRaw = "--smtc-padding-content-align-default"; + +// @public (undocumented) +export const paddingContentAlignOutdentIcononsubtle = "var(--smtc-padding-content-align-outdent-icononsubtle)"; + +// @public (undocumented) +export const paddingContentAlignOutdentIcononsubtleRaw = "--smtc-padding-content-align-outdent-icononsubtle"; + +// @public (undocumented) +export const paddingContentAlignOutdentTextonsubtle = "var(--smtc-padding-content-align-outdent-textonsubtle)"; + +// @public (undocumented) +export const paddingContentAlignOutdentTextonsubtleRaw = "--smtc-padding-content-align-outdent-textonsubtle"; + +// @public (undocumented) +export const paddingContentLarge = "var(--smtc-padding-content-large)"; + +// @public (undocumented) +export const paddingContentLargeRaw = "--smtc-padding-content-large"; + +// @public (undocumented) +export const paddingContentMedium = "var(--smtc-padding-content-medium)"; + +// @public (undocumented) +export const paddingContentMediumRaw = "--smtc-padding-content-medium"; + +// @public (undocumented) +export const paddingContentNone = "var(--smtc-padding-content-none)"; + +// @public (undocumented) +export const paddingContentNoneRaw = "--smtc-padding-content-none"; + +// @public (undocumented) +export const paddingContentSmall = "var(--smtc-padding-content-small)"; + +// @public (undocumented) +export const paddingContentSmallRaw = "--smtc-padding-content-small"; + +// @public (undocumented) +export const paddingContentXlarge = "var(--smtc-padding-content-xlarge)"; + +// @public (undocumented) +export const paddingContentXlargeRaw = "--smtc-padding-content-xlarge"; + +// @public (undocumented) +export const paddingContentXsmall = "var(--smtc-padding-content-xsmall)"; + +// @public (undocumented) +export const paddingContentXsmallRaw = "--smtc-padding-content-xsmall"; + +// @public (undocumented) +export const paddingContentXxlarge = "var(--smtc-padding-content-xxlarge)"; + +// @public (undocumented) +export const paddingContentXxlargeRaw = "--smtc-padding-content-xxlarge"; + +// @public (undocumented) +export const paddingContentXxsmall = "var(--smtc-padding-content-xxsmall)"; + +// @public (undocumented) +export const paddingContentXxsmallRaw = "--smtc-padding-content-xxsmall"; + +// @public (undocumented) +export const paddingContentXxxlarge = "var(--smtc-padding-content-xxxlarge)"; + +// @public (undocumented) +export const paddingContentXxxlargeRaw = "--smtc-padding-content-xxxlarge"; + +// @public (undocumented) +export const paddingCtrlHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default)"; + +// @public (undocumented) +export const paddingCtrlHorizontalDefaultRaw = "--smtc-padding-ctrl-horizontal-default"; + +// @public (undocumented) +export const paddingCtrlHorizontalIcononly = "var(--smtc-padding-ctrl-horizontal-icononly)"; + +// @public (undocumented) +export const paddingCtrlHorizontalIcononlyRaw = "--smtc-padding-ctrl-horizontal-icononly"; + +// @public (undocumented) +export const paddingCtrlLgHorizontalDefault = "var(--smtc-padding-ctrl-lg-horizontal-default)"; + +// @public (undocumented) +export const paddingCtrlLgHorizontalDefaultRaw = "--smtc-padding-ctrl-lg-horizontal-default"; + +// @public (undocumented) +export const paddingCtrlLgHorizontalIcononly = "var(--smtc-padding-ctrl-lg-horizontal-icononly)"; + +// @public (undocumented) +export const paddingCtrlLgHorizontalIcononlyRaw = "--smtc-padding-ctrl-lg-horizontal-icononly"; + +// @public (undocumented) +export const paddingCtrlLgTextbottom = "var(--smtc-padding-ctrl-lg-textbottom, var(--smtc-padding-ctrl-lg-texttop))"; + +// @public (undocumented) +export const paddingCtrlLgTextbottomRaw = "--smtc-padding-ctrl-lg-textbottom"; + +// @public (undocumented) +export const paddingCtrlLgTexttop = "var(--smtc-padding-ctrl-lg-texttop)"; + +// @public (undocumented) +export const paddingCtrlLgTexttopRaw = "--smtc-padding-ctrl-lg-texttop"; + +// @public (undocumented) +export const paddingCtrlLgTonestedcontrol = "var(--smtc-padding-ctrl-lg-tonestedcontrol)"; + +// @public (undocumented) +export const paddingCtrlLgTonestedcontrolRaw = "--smtc-padding-ctrl-lg-tonestedcontrol"; + +// @public (undocumented) +export const paddingCtrlSmHorizontalDefault = "var(--smtc-padding-ctrl-sm-horizontal-default)"; + +// @public (undocumented) +export const paddingCtrlSmHorizontalDefaultRaw = "--smtc-padding-ctrl-sm-horizontal-default"; + +// @public (undocumented) +export const paddingCtrlSmHorizontalIcononly = "var(--smtc-padding-ctrl-sm-horizontal-icononly)"; + +// @public (undocumented) +export const paddingCtrlSmHorizontalIcononlyRaw = "--smtc-padding-ctrl-sm-horizontal-icononly"; + +// @public (undocumented) +export const paddingCtrlSmTextbottom = "var(--smtc-padding-ctrl-sm-textbottom, var(--smtc-padding-ctrl-sm-texttop))"; + +// @public (undocumented) +export const paddingCtrlSmTextbottomRaw = "--smtc-padding-ctrl-sm-textbottom"; + +// @public (undocumented) +export const paddingCtrlSmTexttop = "var(--smtc-padding-ctrl-sm-texttop)"; + +// @public (undocumented) +export const paddingCtrlSmTexttopRaw = "--smtc-padding-ctrl-sm-texttop"; + +// @public (undocumented) +export const paddingCtrlSmTonestedcontrol = "var(--smtc-padding-ctrl-sm-tonestedcontrol)"; + +// @public (undocumented) +export const paddingCtrlSmTonestedcontrolRaw = "--smtc-padding-ctrl-sm-tonestedcontrol"; + +// @public (undocumented) +export const paddingCtrlTextbottom = "var(--smtc-padding-ctrl-textbottom, var(--smtc-padding-ctrl-texttop))"; + +// @public (undocumented) +export const paddingCtrlTextbottomRaw = "--smtc-padding-ctrl-textbottom"; + +// @public (undocumented) +export const paddingCtrlTextside = "var(--smtc-padding-ctrl-textside)"; + +// @public (undocumented) +export const paddingCtrlTextsideRaw = "--smtc-padding-ctrl-textside"; + +// @public (undocumented) +export const paddingCtrlTexttop = "var(--smtc-padding-ctrl-texttop)"; + +// @public (undocumented) +export const paddingCtrlTexttopRaw = "--smtc-padding-ctrl-texttop"; + +// @public (undocumented) +export const paddingCtrlTonestedcontrol = "var(--smtc-padding-ctrl-tonestedcontrol)"; + +// @public (undocumented) +export const paddingCtrlTonestedcontrolRaw = "--smtc-padding-ctrl-tonestedcontrol"; + +// @public (undocumented) +export const paddingFlyoutDefault = "var(--smtc-padding-flyout-default, var(--smtc-padding-content-align-outdent-textonsubtle))"; + +// @public (undocumented) +export const paddingFlyoutDefaultRaw = "--smtc-padding-flyout-default"; + +// @public (undocumented) +export const paddingToolbarInside = "var(--smtc-padding-toolbar-inside, var(--smtc-padding-content-xsmall))"; + +// @public (undocumented) +export const paddingToolbarInsideRaw = "--smtc-padding-toolbar-inside"; + +// @public (undocumented) +export const paddingToolbarOutside = "var(--smtc-padding-toolbar-outside, var(--smtc-padding-content-xxsmall))"; + +// @public (undocumented) +export const paddingToolbarOutsideRaw = "--smtc-padding-toolbar-outside"; + +// @public (undocumented) +export const shadowCardDisabledKey = "var(--smtc-shadow-card-disabled-key, unset)"; + +// @public (undocumented) +export const shadowCardDisabledKeyRaw = "--smtc-shadow-card-disabled-key"; + +// @public (undocumented) +export const shadowCardHoverKey = "var(--smtc-shadow-card-hover-key, unset)"; + +// @public (undocumented) +export const shadowCardHoverKeyRaw = "--smtc-shadow-card-hover-key"; + +// @public (undocumented) +export const shadowCardPressedKey = "var(--smtc-shadow-card-pressed-key, unset)"; + +// @public (undocumented) +export const shadowCardPressedKeyRaw = "--smtc-shadow-card-pressed-key"; + +// @public (undocumented) +export const shadowCardRestAmbient = "var(--smtc-shadow-card-rest-ambient, unset)"; + +// @public (undocumented) +export const shadowCardRestAmbientRaw = "--smtc-shadow-card-rest-ambient"; + +// @public (undocumented) +export const shadowCardRestKey = "var(--smtc-shadow-card-rest-key, unset)"; + +// @public (undocumented) +export const shadowCardRestKeyRaw = "--smtc-shadow-card-rest-key"; + +// @public (undocumented) +export const shadowCtrlOndragAmbient = "var(--smtc-shadow-ctrl-ondrag-ambient, var(--smtc-shadow-flyout-ambient))"; + +// @public (undocumented) +export const shadowCtrlOndragAmbientRaw = "--smtc-shadow-ctrl-ondrag-ambient"; + +// @public (undocumented) +export const shadowCtrlOndragKey = "var(--smtc-shadow-ctrl-ondrag-key, var(--smtc-shadow-flyout-key))"; + +// @public (undocumented) +export const shadowCtrlOndragKeyRaw = "--smtc-shadow-ctrl-ondrag-key"; + +// @public (undocumented) +export const shadowFlyoutAmbient = "var(--smtc-shadow-flyout-ambient)"; + +// @public (undocumented) +export const shadowFlyoutAmbientRaw = "--smtc-shadow-flyout-ambient"; + +// @public (undocumented) +export const shadowFlyoutKey = "var(--smtc-shadow-flyout-key)"; + +// @public (undocumented) +export const shadowFlyoutKeyRaw = "--smtc-shadow-flyout-key"; + +// @public (undocumented) +export const shadowLayerAmbient = "var(--smtc-shadow-layer-ambient, unset)"; + +// @public (undocumented) +export const shadowLayerAmbientRaw = "--smtc-shadow-layer-ambient"; + +// @public (undocumented) +export const shadowLayerKey = "var(--smtc-shadow-layer-key, unset)"; + +// @public (undocumented) +export const shadowLayerKeyRaw = "--smtc-shadow-layer-key"; + +// @public (undocumented) +export const shadowToolbarAmbient = "var(--smtc-shadow-toolbar-ambient)"; + +// @public (undocumented) +export const shadowToolbarAmbientRaw = "--smtc-shadow-toolbar-ambient"; + +// @public (undocumented) +export const shadowToolbarKey = "var(--smtc-shadow-toolbar-key)"; + +// @public (undocumented) +export const shadowToolbarKeyRaw = "--smtc-shadow-toolbar-key"; + +// @public (undocumented) +export const shadowWindowActiveAmbient = "var(--smtc-shadow-window-active-ambient)"; + +// @public (undocumented) +export const shadowWindowActiveAmbientRaw = "--smtc-shadow-window-active-ambient"; + +// @public (undocumented) +export const shadowWindowActiveKey = "var(--smtc-shadow-window-active-key)"; + +// @public (undocumented) +export const shadowWindowActiveKeyRaw = "--smtc-shadow-window-active-key"; + +// @public (undocumented) +export const shadowWindowInactiveAmbient = "var(--smtc-shadow-window-inactive-ambient)"; + +// @public (undocumented) +export const shadowWindowInactiveAmbientRaw = "--smtc-shadow-window-inactive-ambient"; + +// @public (undocumented) +export const shadowWindowInactiveKey = "var(--smtc-shadow-window-inactive-key, var(--smtc-shadow-window-active-key))"; + +// @public (undocumented) +export const shadowWindowInactiveKeyRaw = "--smtc-shadow-window-inactive-key"; + +// @public (undocumented) +export const sizeCtrlDefault = "var(--smtc-size-ctrl-default)"; + +// @public (undocumented) +export const sizeCtrlDefaultRaw = "--smtc-size-ctrl-default"; + +// @public (undocumented) +export const sizeCtrlIcon = "var(--smtc-size-ctrl-icon)"; + +// @public (undocumented) +export const sizeCtrlIconFigmaonly = "var(--smtc-size-ctrl-iconfigmaonly)"; + +// @public (undocumented) +export const sizeCtrlIconFigmaonlyRaw = "--smtc-size-ctrl-iconfigmaonly"; + +// @public (undocumented) +export const sizeCtrlIconRaw = "--smtc-size-ctrl-icon"; + +// @public (undocumented) +export const sizeCtrlIconsecondary = "var(--smtc-size-ctrl-iconsecondary)"; + +// @public (undocumented) +export const sizeCtrlIconsecondaryRaw = "--smtc-size-ctrl-iconsecondary"; + +// @public (undocumented) +export const sizeCtrlLgDefault = "var(--smtc-size-ctrl-lg-default)"; + +// @public (undocumented) +export const sizeCtrlLgDefaultRaw = "--smtc-size-ctrl-lg-default"; + +// @public (undocumented) +export const sizeCtrlLgIcon = "var(--smtc-size-ctrl-lg-icon)"; + +// @public (undocumented) +export const sizeCtrlLgIconFigmaonly = "var(--smtc-size-ctrl-lg-iconfigmaonly)"; + +// @public (undocumented) +export const sizeCtrlLgIconFigmaonlyRaw = "--smtc-size-ctrl-lg-iconfigmaonly"; + +// @public (undocumented) +export const sizeCtrlLgIconRaw = "--smtc-size-ctrl-lg-icon"; + +// @public (undocumented) +export const sizeCtrlSmDefault = "var(--smtc-size-ctrl-sm-default)"; + +// @public (undocumented) +export const sizeCtrlSmDefaultRaw = "--smtc-size-ctrl-sm-default"; + +// @public (undocumented) +export const sizeCtrlSmIcon = "var(--smtc-size-ctrl-sm-icon)"; + +// @public (undocumented) +export const sizeCtrlSmIconFigmaonly = "var(--smtc-size-ctrl-sm-iconfigmaonly)"; + +// @public (undocumented) +export const sizeCtrlSmIconFigmaonlyRaw = "--smtc-size-ctrl-sm-iconfigmaonly"; + +// @public (undocumented) +export const sizeCtrlSmIconRaw = "--smtc-size-ctrl-sm-icon"; + +// @public (undocumented) +export const statusAwayForeground = "var(--smtc-status-away-foreground)"; + +// @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))"; + +// @public (undocumented) +export const statusBrandBackgroundRaw = "--smtc-status-brand-background"; + +// @public (undocumented) +export const statusBrandForeground = "var(--smtc-status-brand-foreground, var(--smtc-foreground-ctrl-onbrand-rest))"; + +// @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)"; + +// @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))"; + +// @public (undocumented) +export const statusBrandTintForegroundRaw = "--smtc-status-brand-tint-foreground"; + +// @public (undocumented) +export const statusBrandTintStroke = "var(--smtc-status-brand-tint-stroke)"; + +// @public (undocumented) +export const statusBrandTintStrokeRaw = "--smtc-status-brand-tint-stroke"; + +// @public (undocumented) +export const statusDangerBackground = "var(--smtc-status-danger-background)"; + +// @public (undocumented) +export const statusDangerBackgroundRaw = "--smtc-status-danger-background"; + +// @public (undocumented) +export const statusDangerForeground = "var(--smtc-status-danger-foreground, var(--smtc-foreground-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const statusDangerForegroundRaw = "--smtc-status-danger-foreground"; + +// @public (undocumented) +export const statusDangerStroke = "var(--smtc-status-danger-stroke, var(--smtc-status-danger-background))"; + +// @public (undocumented) +export const statusDangerStrokeRaw = "--smtc-status-danger-stroke"; + +// @public (undocumented) +export const statusDangerTintBackground = "var(--smtc-status-danger-tint-background)"; + +// @public (undocumented) +export const statusDangerTintBackgroundRaw = "--smtc-status-danger-tint-background"; + +// @public (undocumented) +export const statusDangerTintForeground = "var(--smtc-status-danger-tint-foreground)"; + +// @public (undocumented) +export const statusDangerTintForegroundRaw = "--smtc-status-danger-tint-foreground"; + +// @public (undocumented) +export const statusDangerTintStroke = "var(--smtc-status-danger-tint-stroke)"; + +// @public (undocumented) +export const statusDangerTintStrokeRaw = "--smtc-status-danger-tint-stroke"; + +// @public (undocumented) +export const statusImportantBackground = "var(--smtc-status-important-background)"; + +// @public (undocumented) +export const statusImportantBackgroundRaw = "--smtc-status-important-background"; + +// @public (undocumented) +export const statusImportantForeground = "var(--smtc-status-important-foreground, var(--smtc-foreground-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const statusImportantForegroundRaw = "--smtc-status-important-foreground"; + +// @public (undocumented) +export const statusImportantStroke = "var(--smtc-status-important-stroke, var(--smtc-status-important-background))"; + +// @public (undocumented) +export const statusImportantStrokeRaw = "--smtc-status-important-stroke"; + +// @public (undocumented) +export const statusImportantTintBackground = "var(--smtc-status-important-tint-background)"; + +// @public (undocumented) +export const statusImportantTintBackgroundRaw = "--smtc-status-important-tint-background"; + +// @public (undocumented) +export const statusImportantTintForeground = "var(--smtc-status-important-tint-foreground)"; + +// @public (undocumented) +export const statusImportantTintForegroundRaw = "--smtc-status-important-tint-foreground"; + +// @public (undocumented) +export const statusImportantTintStroke = "var(--smtc-status-important-tint-stroke)"; + +// @public (undocumented) +export const statusImportantTintStrokeRaw = "--smtc-status-important-tint-stroke"; + +// @public (undocumented) +export const statusInformativeBackground = "var(--smtc-status-informative-background)"; + +// @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))"; + +// @public (undocumented) +export const statusInformativeForegroundRaw = "--smtc-status-informative-foreground"; + +// @public (undocumented) +export const statusInformativeStroke = "var(--smtc-status-informative-stroke, var(--smtc-status-informative-background))"; + +// @public (undocumented) +export const statusInformativeStrokeRaw = "--smtc-status-informative-stroke"; + +// @public (undocumented) +export const statusInformativeTintBackground = "var(--smtc-status-informative-tint-background)"; + +// @public (undocumented) +export const statusInformativeTintBackgroundRaw = "--smtc-status-informative-tint-background"; + +// @public (undocumented) +export const statusInformativeTintForeground = "var(--smtc-status-informative-tint-foreground)"; + +// @public (undocumented) +export const statusInformativeTintForegroundRaw = "--smtc-status-informative-tint-foreground"; + +// @public (undocumented) +export const statusInformativeTintStroke = "var(--smtc-status-informative-tint-stroke)"; + +// @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)"; + +// @public (undocumented) +export const statusOofForegroundRaw = "--smtc-status-oof-foreground"; + +// @public (undocumented) +export const statusSuccessBackground = "var(--smtc-status-success-background)"; + +// @public (undocumented) +export const statusSuccessBackgroundRaw = "--smtc-status-success-background"; + +// @public (undocumented) +export const statusSuccessForeground = "var(--smtc-status-success-foreground, var(--smtc-foreground-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const statusSuccessForegroundRaw = "--smtc-status-success-foreground"; + +// @public (undocumented) +export const statusSuccessStroke = "var(--smtc-status-success-stroke, var(--smtc-status-success-background))"; + +// @public (undocumented) +export const statusSuccessStrokeRaw = "--smtc-status-success-stroke"; + +// @public (undocumented) +export const statusSuccessTintBackground = "var(--smtc-status-success-tint-background)"; + +// @public (undocumented) +export const statusSuccessTintBackgroundRaw = "--smtc-status-success-tint-background"; + +// @public (undocumented) +export const statusSuccessTintForeground = "var(--smtc-status-success-tint-foreground)"; + +// @public (undocumented) +export const statusSuccessTintForegroundRaw = "--smtc-status-success-tint-foreground"; + +// @public (undocumented) +export const statusSuccessTintStroke = "var(--smtc-status-success-tint-stroke)"; + +// @public (undocumented) +export const statusSuccessTintStrokeRaw = "--smtc-status-success-tint-stroke"; + +// @public (undocumented) +export const statusWarningBackground = "var(--smtc-status-warning-background)"; + +// @public (undocumented) +export const statusWarningBackgroundRaw = "--smtc-status-warning-background"; + +// @public (undocumented) +export const statusWarningForeground = "var(--smtc-status-warning-foreground, var(--smtc-foreground-ctrl-onbrand-rest))"; + +// @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)"; + +// @public (undocumented) +export const statusWarningTintBackgroundRaw = "--smtc-status-warning-tint-background"; + +// @public (undocumented) +export const statusWarningTintForeground = "var(--smtc-status-warning-tint-foreground)"; + +// @public (undocumented) +export const statusWarningTintForegroundRaw = "--smtc-status-warning-tint-foreground"; + +// @public (undocumented) +export const statusWarningTintStroke = "var(--smtc-status-warning-tint-stroke)"; + +// @public (undocumented) +export const statusWarningTintStrokeRaw = "--smtc-status-warning-tint-stroke"; + +// @public (undocumented) +export const strokeCardOnprimaryDisabled = "var(--smtc-stroke-card-onprimary-disabled, unset)"; + +// @public (undocumented) +export const strokeCardOnprimaryDisabledRaw = "--smtc-stroke-card-onprimary-disabled"; + +// @public (undocumented) +export const strokeCardOnprimaryHover = "var(--smtc-stroke-card-onprimary-hover, unset)"; + +// @public (undocumented) +export const strokeCardOnprimaryHoverRaw = "--smtc-stroke-card-onprimary-hover"; + +// @public (undocumented) +export const strokeCardOnprimaryPressed = "var(--smtc-stroke-card-onprimary-pressed, unset)"; + +// @public (undocumented) +export const strokeCardOnprimaryPressedRaw = "--smtc-stroke-card-onprimary-pressed"; + +// @public (undocumented) +export const strokeCardOnprimaryRest = "var(--smtc-stroke-card-onprimary-rest, unset)"; + +// @public (undocumented) +export const strokeCardOnprimaryRestRaw = "--smtc-stroke-card-onprimary-rest"; + +// @public (undocumented) +export const strokeCardOnsecondaryDisabled = "var(--smtc-stroke-card-onsecondary-disabled, unset)"; + +// @public (undocumented) +export const strokeCardOnsecondaryDisabledRaw = "--smtc-stroke-card-onsecondary-disabled"; + +// @public (undocumented) +export const strokeCardOnsecondaryHover = "var(--smtc-stroke-card-onsecondary-hover, unset)"; + +// @public (undocumented) +export const strokeCardOnsecondaryHoverRaw = "--smtc-stroke-card-onsecondary-hover"; + +// @public (undocumented) +export const strokeCardOnsecondaryPressed = "var(--smtc-stroke-card-onsecondary-pressed, unset)"; + +// @public (undocumented) +export const strokeCardOnsecondaryPressedRaw = "--smtc-stroke-card-onsecondary-pressed"; + +// @public (undocumented) +export const strokeCardOnsecondaryRest = "var(--smtc-stroke-card-onsecondary-rest, unset)"; + +// @public (undocumented) +export const strokeCardOnsecondaryRestRaw = "--smtc-stroke-card-onsecondary-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-onactivebrand, var(--smtc-stroke-ctrl-divider-onbrand))"; + +// @public (undocumented) +export const strokeCtrlDividerOnactivebrandDisabled = "var(--smtc-stroke-ctrl-divider-onactivebrand-disabled, var(--smtc-stroke-ctrl-divider-onbrand))"; + +// @public (undocumented) +export const strokeCtrlDividerOnactivebrandDisabledRaw = "--smtc-stroke-ctrl-divider-onactivebrand-disabled"; + +// @public (undocumented) +export const strokeCtrlDividerOnactivebrandRaw = "--smtc-stroke-ctrl-divider-onactivebrand"; + +// @public (undocumented) +export const strokeCtrlDividerOnbrand = "var(--smtc-stroke-ctrl-divider-onbrand)"; + +// @public (undocumented) +export const strokeCtrlDividerOnbrandDisabled = "var(--smtc-stroke-ctrl-divider-onbrand-disabled, var(--smtc-stroke-ctrl-divider-onbrand))"; + +// @public (undocumented) +export const strokeCtrlDividerOnbrandDisabledRaw = "--smtc-stroke-ctrl-divider-onbrand-disabled"; + +// @public (undocumented) +export const strokeCtrlDividerOnbrandRaw = "--smtc-stroke-ctrl-divider-onbrand"; + +// @public (undocumented) +export const strokeCtrlDividerOnneutral = "var(--smtc-stroke-ctrl-divider-onneutral)"; + +// @public (undocumented) +export const strokeCtrlDividerOnneutralDisabled = "var(--smtc-stroke-ctrl-divider-onneutral-disabled, var(--smtc-stroke-ctrl-divider-onneutral))"; + +// @public (undocumented) +export const strokeCtrlDividerOnneutralDisabledRaw = "--smtc-stroke-ctrl-divider-onneutral-disabled"; + +// @public (undocumented) +export const strokeCtrlDividerOnneutralRaw = "--smtc-stroke-ctrl-divider-onneutral"; + +// @public (undocumented) +export const strokeCtrlDividerOnoutline = "var(--smtc-stroke-ctrl-divider-onoutline)"; + +// @public (undocumented) +export const strokeCtrlDividerOnoutlineDisabled = "var(--smtc-stroke-ctrl-divider-onoutline-disabled, var(--smtc-stroke-ctrl-divider-onoutline))"; + +// @public (undocumented) +export const strokeCtrlDividerOnoutlineDisabledRaw = "--smtc-stroke-ctrl-divider-onoutline-disabled"; + +// @public (undocumented) +export const strokeCtrlDividerOnoutlineRaw = "--smtc-stroke-ctrl-divider-onoutline"; + +// @public (undocumented) +export const strokeCtrlDividerOnsubtle = "var(--smtc-stroke-ctrl-divider-onsubtle, unset)"; + +// @public (undocumented) +export const strokeCtrlDividerOnsubtleDisabled = "var(--smtc-stroke-ctrl-divider-onsubtle-disabled, unset)"; + +// @public (undocumented) +export const strokeCtrlDividerOnsubtleDisabledRaw = "--smtc-stroke-ctrl-divider-onsubtle-disabled"; + +// @public (undocumented) +export const strokeCtrlDividerOnsubtleRaw = "--smtc-stroke-ctrl-divider-onsubtle"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandDisabled = "var(--smtc-stroke-ctrl-onactivebrand-disabled, var(--smtc-stroke-ctrl-onbrand-disabled))"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandDisabledRaw = "--smtc-stroke-ctrl-onactivebrand-disabled"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandDisabledStop2 = "var(--smtc-stroke-ctrl-onactivebrand-disabledstop2, var(--smtc-stroke-ctrl-onbrand-disabled))"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandDisabledStop2Raw = "--smtc-stroke-ctrl-onactivebrand-disabledstop2"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandHover = "var(--smtc-stroke-ctrl-onactivebrand-hover, var(--smtc-stroke-ctrl-onbrand-hover))"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandHoverRaw = "--smtc-stroke-ctrl-onactivebrand-hover"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandHoverStop2 = "var(--smtc-stroke-ctrl-onactivebrand-hoverstop2, var(--smtc-stroke-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandHoverStop2Raw = "--smtc-stroke-ctrl-onactivebrand-hoverstop2"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandPressed = "var(--smtc-stroke-ctrl-onactivebrand-pressed, var(--smtc-stroke-ctrl-onbrand-pressed))"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandPressedRaw = "--smtc-stroke-ctrl-onactivebrand-pressed"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandPressedStop2 = "var(--smtc-stroke-ctrl-onactivebrand-pressedstop2, var(--smtc-stroke-ctrl-onbrand-pressed))"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandPressedStop2Raw = "--smtc-stroke-ctrl-onactivebrand-pressedstop2"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandRest = "var(--smtc-stroke-ctrl-onactivebrand-rest, var(--smtc-stroke-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandRestRaw = "--smtc-stroke-ctrl-onactivebrand-rest"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandRestStop2 = "var(--smtc-stroke-ctrl-onactivebrand-reststop2, var(--smtc-stroke-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const strokeCtrlOnactivebrandRestStop2Raw = "--smtc-stroke-ctrl-onactivebrand-reststop2"; + +// @public (undocumented) +export const strokeCtrlOnbrandDisabled = "var(--smtc-stroke-ctrl-onbrand-disabled, unset)"; + +// @public (undocumented) +export const strokeCtrlOnbrandDisabledRaw = "--smtc-stroke-ctrl-onbrand-disabled"; + +// @public (undocumented) +export const strokeCtrlOnbrandDisabledStop2 = "var(--smtc-stroke-ctrl-onbrand-disabledstop2, var(--smtc-stroke-ctrl-onbrand-disabled))"; + +// @public (undocumented) +export const strokeCtrlOnbrandDisabledStop2Raw = "--smtc-stroke-ctrl-onbrand-disabledstop2"; + +// @public (undocumented) +export const strokeCtrlOnbrandHover = "var(--smtc-stroke-ctrl-onbrand-hover, unset)"; + +// @public (undocumented) +export const strokeCtrlOnbrandHoverRaw = "--smtc-stroke-ctrl-onbrand-hover"; + +// @public (undocumented) +export const strokeCtrlOnbrandHoverStop2 = "var(--smtc-stroke-ctrl-onbrand-hoverstop2, var(--smtc-stroke-ctrl-onbrand-hover))"; + +// @public (undocumented) +export const strokeCtrlOnbrandHoverStop2Raw = "--smtc-stroke-ctrl-onbrand-hoverstop2"; + +// @public (undocumented) +export const strokeCtrlOnbrandPressed = "var(--smtc-stroke-ctrl-onbrand-pressed, unset)"; + +// @public (undocumented) +export const strokeCtrlOnbrandPressedRaw = "--smtc-stroke-ctrl-onbrand-pressed"; + +// @public (undocumented) +export const strokeCtrlOnbrandPressedStop2 = "var(--smtc-stroke-ctrl-onbrand-pressedstop2, var(--smtc-stroke-ctrl-onbrand-pressed))"; + +// @public (undocumented) +export const strokeCtrlOnbrandPressedStop2Raw = "--smtc-stroke-ctrl-onbrand-pressedstop2"; + +// @public (undocumented) +export const strokeCtrlOnbrandRest = "var(--smtc-stroke-ctrl-onbrand-rest, unset)"; + +// @public (undocumented) +export const strokeCtrlOnbrandRestRaw = "--smtc-stroke-ctrl-onbrand-rest"; + +// @public (undocumented) +export const strokeCtrlOnbrandRestStop2 = "var(--smtc-stroke-ctrl-onbrand-reststop2, var(--smtc-stroke-ctrl-onbrand-rest))"; + +// @public (undocumented) +export const strokeCtrlOnbrandRestStop2Raw = "--smtc-stroke-ctrl-onbrand-reststop2"; + +// @public (undocumented) +export const strokeCtrlOnneutralDisabled = "var(--smtc-stroke-ctrl-onneutral-disabled, unset)"; + +// @public (undocumented) +export const strokeCtrlOnneutralDisabledRaw = "--smtc-stroke-ctrl-onneutral-disabled"; + +// @public (undocumented) +export const strokeCtrlOnneutralDisabledStop2 = "var(--smtc-stroke-ctrl-onneutral-disabledstop2, var(--smtc-stroke-ctrl-onneutral-disabled))"; + +// @public (undocumented) +export const strokeCtrlOnneutralDisabledStop2Raw = "--smtc-stroke-ctrl-onneutral-disabledstop2"; + +// @public (undocumented) +export const strokeCtrlOnneutralHover = "var(--smtc-stroke-ctrl-onneutral-hover, unset)"; + +// @public (undocumented) +export const strokeCtrlOnneutralHoverRaw = "--smtc-stroke-ctrl-onneutral-hover"; + +// @public (undocumented) +export const strokeCtrlOnneutralHoverStop2 = "var(--smtc-stroke-ctrl-onneutral-hoverstop2, var(--smtc-stroke-ctrl-onneutral-pressed))"; + +// @public (undocumented) +export const strokeCtrlOnneutralHoverStop2Raw = "--smtc-stroke-ctrl-onneutral-hoverstop2"; + +// @public (undocumented) +export const strokeCtrlOnneutralPressed = "var(--smtc-stroke-ctrl-onneutral-pressed, unset)"; + +// @public (undocumented) +export const strokeCtrlOnneutralPressedRaw = "--smtc-stroke-ctrl-onneutral-pressed"; + +// @public (undocumented) +export const strokeCtrlOnneutralPressedStop2 = "var(--smtc-stroke-ctrl-onneutral-pressedstop2, var(--smtc-stroke-ctrl-onneutral-hover))"; + +// @public (undocumented) +export const strokeCtrlOnneutralPressedStop2Raw = "--smtc-stroke-ctrl-onneutral-pressedstop2"; + +// @public (undocumented) +export const strokeCtrlOnneutralRest = "var(--smtc-stroke-ctrl-onneutral-rest, unset)"; + +// @public (undocumented) +export const strokeCtrlOnneutralRestRaw = "--smtc-stroke-ctrl-onneutral-rest"; + +// @public (undocumented) +export const strokeCtrlOnneutralRestStop2 = "var(--smtc-stroke-ctrl-onneutral-reststop2, var(--smtc-stroke-ctrl-onneutral-rest))"; + +// @public (undocumented) +export const strokeCtrlOnneutralRestStop2Raw = "--smtc-stroke-ctrl-onneutral-reststop2"; + +// @public (undocumented) +export const strokeCtrlOnoutlineDisabled = "var(--smtc-stroke-ctrl-onoutline-disabled)"; + +// @public (undocumented) +export const strokeCtrlOnoutlineDisabledRaw = "--smtc-stroke-ctrl-onoutline-disabled"; + +// @public (undocumented) +export const strokeCtrlOnoutlineDisabledStop2 = "var(--smtc-stroke-ctrl-onoutline-disabledstop2, var(--smtc-stroke-ctrl-onoutline-disabled))"; + +// @public (undocumented) +export const strokeCtrlOnoutlineDisabledStop2Raw = "--smtc-stroke-ctrl-onoutline-disabledstop2"; + +// @public (undocumented) +export const strokeCtrlOnoutlineHover = "var(--smtc-stroke-ctrl-onoutline-hover)"; + +// @public (undocumented) +export const strokeCtrlOnoutlineHoverRaw = "--smtc-stroke-ctrl-onoutline-hover"; + +// @public (undocumented) +export const strokeCtrlOnoutlineHoverStop2 = "var(--smtc-stroke-ctrl-onoutline-hoverstop2, var(--smtc-stroke-ctrl-onoutline-hover))"; + +// @public (undocumented) +export const strokeCtrlOnoutlineHoverStop2Raw = "--smtc-stroke-ctrl-onoutline-hoverstop2"; + +// @public (undocumented) +export const strokeCtrlOnoutlinePressed = "var(--smtc-stroke-ctrl-onoutline-pressed)"; + +// @public (undocumented) +export const strokeCtrlOnoutlinePressedRaw = "--smtc-stroke-ctrl-onoutline-pressed"; + +// @public (undocumented) +export const strokeCtrlOnoutlinePressedStop2 = "var(--smtc-stroke-ctrl-onoutline-pressedstop2, var(--smtc-stroke-ctrl-onoutline-pressed))"; + +// @public (undocumented) +export const strokeCtrlOnoutlinePressedStop2Raw = "--smtc-stroke-ctrl-onoutline-pressedstop2"; + +// @public (undocumented) +export const strokeCtrlOnoutlineRest = "var(--smtc-stroke-ctrl-onoutline-rest)"; + +// @public (undocumented) +export const strokeCtrlOnoutlineRestRaw = "--smtc-stroke-ctrl-onoutline-rest"; + +// @public (undocumented) +export const strokeCtrlOnoutlineRestStop2 = "var(--smtc-stroke-ctrl-onoutline-reststop2, var(--smtc-stroke-ctrl-onoutline-rest))"; + +// @public (undocumented) +export const strokeCtrlOnoutlineRestStop2Raw = "--smtc-stroke-ctrl-onoutline-reststop2"; + +// @public (undocumented) +export const strokeCtrlOnsubtleDisabled = "var(--smtc-stroke-ctrl-onsubtle-disabled, unset)"; + +// @public (undocumented) +export const strokeCtrlOnsubtleDisabledRaw = "--smtc-stroke-ctrl-onsubtle-disabled"; + +// @public (undocumented) +export const strokeCtrlOnsubtleHover = "var(--smtc-stroke-ctrl-onsubtle-hover, unset)"; + +// @public (undocumented) +export const strokeCtrlOnsubtleHoverRaw = "--smtc-stroke-ctrl-onsubtle-hover"; + +// @public (undocumented) +export const strokeCtrlOnsubtleHoversplit = "var(--smtc-stroke-ctrl-onsubtle-hoversplit, unset)"; + +// @public (undocumented) +export const strokeCtrlOnsubtleHoversplitRaw = "--smtc-stroke-ctrl-onsubtle-hoversplit"; + +// @public (undocumented) +export const strokeCtrlOnsubtlePressed = "var(--smtc-stroke-ctrl-onsubtle-pressed, unset)"; + +// @public (undocumented) +export const strokeCtrlOnsubtlePressedRaw = "--smtc-stroke-ctrl-onsubtle-pressed"; + +// @public (undocumented) +export const strokeCtrlOnsubtleRest = "var(--smtc-stroke-ctrl-onsubtle-rest, unset)"; + +// @public (undocumented) +export const strokeCtrlOnsubtleRestRaw = "--smtc-stroke-ctrl-onsubtle-rest"; + +// @public (undocumented) +export const strokeDividerBrand = "var(--smtc-stroke-divider-brand, var(--smtc-background-ctrl-brand-rest))"; + +// @public (undocumented) +export const strokeDividerBrandRaw = "--smtc-stroke-divider-brand"; + +// @public (undocumented) +export const strokeDividerDefault = "var(--smtc-stroke-divider-default)"; + +// @public (undocumented) +export const strokeDividerDefaultRaw = "--smtc-stroke-divider-default"; + +// @public (undocumented) +export const strokeDividerStrong = "var(--smtc-stroke-divider-strong, var(--smtc-stroke-divider-default))"; + +// @public (undocumented) +export const strokeDividerStrongRaw = "--smtc-stroke-divider-strong"; + +// @public (undocumented) +export const strokeDividerSubtle = "var(--smtc-stroke-divider-subtle, var(--smtc-stroke-divider-default))"; + +// @public (undocumented) +export const strokeDividerSubtleRaw = "--smtc-stroke-divider-subtle"; + +// @public (undocumented) +export const strokeFlyout = "var(--smtc-stroke-flyout, unset)"; + +// @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, unset)"; + +// @public (undocumented) +export const strokeLayerRaw = "--smtc-stroke-layer"; + +// @public (undocumented) +export const strokeToolbar = "var(--smtc-stroke-toolbar, var(--smtc-stroke-card-onprimary-rest))"; + +// @public (undocumented) +export const strokeToolbarRaw = "--smtc-stroke-toolbar"; + +// @public (undocumented) +export const strokewidthCtrlOutlineHover = "var(--smtc-strokewidth-ctrl-outline-hover, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const strokewidthCtrlOutlineHoverRaw = "--smtc-strokewidth-ctrl-outline-hover"; + +// @public (undocumented) +export const strokewidthCtrlOutlinePressed = "var(--smtc-strokewidth-ctrl-outline-pressed, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const strokewidthCtrlOutlinePressedRaw = "--smtc-strokewidth-ctrl-outline-pressed"; + +// @public (undocumented) +export const strokewidthCtrlOutlineRest = "var(--smtc-strokewidth-ctrl-outline-rest, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const strokewidthCtrlOutlineRestRaw = "--smtc-strokewidth-ctrl-outline-rest"; + +// @public (undocumented) +export const strokewidthCtrlOutlineSelected = "var(--smtc-strokewidth-ctrl-outline-selected, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const strokewidthCtrlOutlineSelectedRaw = "--smtc-strokewidth-ctrl-outline-selected"; + +// @public (undocumented) +export const strokewidthDefault: string; + +// @public (undocumented) +export const strokewidthDefaultRaw = "--smtc-strokewidth-default"; + +// @public (undocumented) +export const strokewidthDividerDefault = "var(--smtc-strokewidth-divider-default, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const strokewidthDividerDefaultRaw = "--smtc-strokewidth-divider-default"; + +// @public (undocumented) +export const strokewidthDividerStrong = "var(--smtc-strokewidth-divider-strong, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const strokewidthDividerStrongRaw = "--smtc-strokewidth-divider-strong"; + +// @public (undocumented) +export const strokewidthWindowDefault = "var(--smtc-strokewidth-window-default, var(--smtc-strokewidth-default))"; + +// @public (undocumented) +export const strokewidthWindowDefaultRaw = "--smtc-strokewidth-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))"; + +// @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)"; + +// @public (undocumented) +export const textCtrlWeightSelectedRaw = "--smtc-text-ctrl-weight-selected"; + +// @public (undocumented) +export const textGlobalBody1Fontsize = "var(--smtc-text-global-body1-fontsize)"; + +// @public (undocumented) +export const textGlobalBody1FontsizeRaw = "--smtc-text-global-body1-fontsize"; + +// @public (undocumented) +export const textGlobalBody1Lineheight = "var(--smtc-text-global-body1-lineheight)"; + +// @public (undocumented) +export const textGlobalBody1LineheightRaw = "--smtc-text-global-body1-lineheight"; + +// @public (undocumented) +export const textGlobalBody2Fontsize = "var(--smtc-text-global-body2-fontsize)"; + +// @public (undocumented) +export const textGlobalBody2FontsizeRaw = "--smtc-text-global-body2-fontsize"; + +// @public (undocumented) +export const textGlobalBody2Lineheight = "var(--smtc-text-global-body2-lineheight)"; + +// @public (undocumented) +export const textGlobalBody2LineheightRaw = "--smtc-text-global-body2-lineheight"; + +// @public (undocumented) +export const textGlobalBody3Fontsize: string; + +// @public (undocumented) +export const textGlobalBody3FontsizeRaw = "--smtc-text-global-body3-fontsize"; + +// @public (undocumented) +export const textGlobalBody3Lineheight = "var(--smtc-text-global-body3-lineheight)"; + +// @public (undocumented) +export const textGlobalBody3LineheightRaw = "--smtc-text-global-body3-lineheight"; + +// @public (undocumented) +export const textGlobalCaption1Fontsize = "var(--smtc-text-global-caption1-fontsize)"; + +// @public (undocumented) +export const textGlobalCaption1FontsizeRaw = "--smtc-text-global-caption1-fontsize"; + +// @public (undocumented) +export const textGlobalCaption1Lineheight = "var(--smtc-text-global-caption1-lineheight)"; + +// @public (undocumented) +export const textGlobalCaption1LineheightRaw = "--smtc-text-global-caption1-lineheight"; + +// @public (undocumented) +export const textGlobalCaption2Fontsize = "var(--smtc-text-global-caption2-fontsize)"; + +// @public (undocumented) +export const textGlobalCaption2FontsizeRaw = "--smtc-text-global-caption2-fontsize"; + +// @public (undocumented) +export const textGlobalCaption2Lineheight = "var(--smtc-text-global-caption2-lineheight)"; + +// @public (undocumented) +export const textGlobalCaption2LineheightRaw = "--smtc-text-global-caption2-lineheight"; + +// @public (undocumented) +export const textGlobalDisplay1Fontsize = "var(--smtc-text-global-display1-fontsize)"; + +// @public (undocumented) +export const textGlobalDisplay1FontsizeRaw = "--smtc-text-global-display1-fontsize"; + +// @public (undocumented) +export const textGlobalDisplay1Lineheight = "var(--smtc-text-global-display1-lineheight)"; + +// @public (undocumented) +export const textGlobalDisplay1LineheightRaw = "--smtc-text-global-display1-lineheight"; + +// @public (undocumented) +export const textGlobalDisplay2Fontsize = "var(--smtc-text-global-display2-fontsize)"; + +// @public (undocumented) +export const textGlobalDisplay2FontsizeRaw = "--smtc-text-global-display2-fontsize"; + +// @public (undocumented) +export const textGlobalDisplay2Lineheight = "var(--smtc-text-global-display2-lineheight)"; + +// @public (undocumented) +export const textGlobalDisplay2LineheightRaw = "--smtc-text-global-display2-lineheight"; + +// @public (undocumented) +export const textGlobalSubtitle1Fontsize = "var(--smtc-text-global-subtitle1-fontsize)"; + +// @public (undocumented) +export const textGlobalSubtitle1FontsizeRaw = "--smtc-text-global-subtitle1-fontsize"; + +// @public (undocumented) +export const textGlobalSubtitle1Lineheight = "var(--smtc-text-global-subtitle1-lineheight)"; + +// @public (undocumented) +export const textGlobalSubtitle1LineheightRaw = "--smtc-text-global-subtitle1-lineheight"; + +// @public (undocumented) +export const textGlobalSubtitle2Fontsize = "var(--smtc-text-global-subtitle2-fontsize)"; + +// @public (undocumented) +export const textGlobalSubtitle2FontsizeRaw = "--smtc-text-global-subtitle2-fontsize"; + +// @public (undocumented) +export const textGlobalSubtitle2Lineheight = "var(--smtc-text-global-subtitle2-lineheight)"; + +// @public (undocumented) +export const textGlobalSubtitle2LineheightRaw = "--smtc-text-global-subtitle2-lineheight"; + +// @public (undocumented) +export const textGlobalTitle1Fontsize = "var(--smtc-text-global-title1-fontsize)"; + +// @public (undocumented) +export const textGlobalTitle1FontsizeRaw = "--smtc-text-global-title1-fontsize"; + +// @public (undocumented) +export const textGlobalTitle1Lineheight = "var(--smtc-text-global-title1-lineheight)"; + +// @public (undocumented) +export const textGlobalTitle1LineheightRaw = "--smtc-text-global-title1-lineheight"; + +// @public (undocumented) +export const textGlobalTitle2Fontsize = "var(--smtc-text-global-title2-fontsize)"; + +// @public (undocumented) +export const textGlobalTitle2FontsizeRaw = "--smtc-text-global-title2-fontsize"; + +// @public (undocumented) +export const textGlobalTitle2Lineheight = "var(--smtc-text-global-title2-lineheight)"; + +// @public (undocumented) +export const textGlobalTitle2LineheightRaw = "--smtc-text-global-title2-lineheight"; + +// @public (undocumented) +export const textRampItembodyFontsize = "var(--smtc-text-ramp-itembody-fontsize, var(--smtc-text-global-body3-fontsize))"; + +// @public (undocumented) +export const textRampItembodyFontsizeRaw = "--smtc-text-ramp-itembody-fontsize"; + +// @public (undocumented) +export const textRampItembodyLineheight = "var(--smtc-text-ramp-itembody-lineheight, var(--smtc-text-global-body3-lineheight))"; + +// @public (undocumented) +export const textRampItembodyLineheightRaw = "--smtc-text-ramp-itembody-lineheight"; + +// @public (undocumented) +export const textRampItemheaderFontsize = "var(--smtc-text-ramp-itemheader-fontsize, var(--smtc-text-global-body2-fontsize))"; + +// @public (undocumented) +export const textRampItemheaderFontsizeRaw = "--smtc-text-ramp-itemheader-fontsize"; + +// @public (undocumented) +export const textRampItemheaderLineheight = "var(--smtc-text-ramp-itemheader-lineheight, var(--smtc-text-global-body2-lineheight))"; + +// @public (undocumented) +export const textRampItemheaderLineheightRaw = "--smtc-text-ramp-itemheader-lineheight"; + +// @public (undocumented) +export const textRampLegalFontsize = "var(--smtc-text-ramp-legal-fontsize, var(--smtc-text-global-caption2-fontsize))"; + +// @public (undocumented) +export const textRampLegalFontsizeRaw = "--smtc-text-ramp-legal-fontsize"; + +// @public (undocumented) +export const textRampLegalLineheight = "var(--smtc-text-ramp-legal-lineheight, var(--smtc-text-global-caption2-lineheight))"; + +// @public (undocumented) +export const textRampLegalLineheightRaw = "--smtc-text-ramp-legal-lineheight"; + +// @public (undocumented) +export const textRampLgItembodyFontsize = "var(--smtc-text-ramp-lg-itembody-fontsize, var(--smtc-text-global-body2-fontsize))"; + +// @public (undocumented) +export const textRampLgItembodyFontsizeRaw = "--smtc-text-ramp-lg-itembody-fontsize"; + +// @public (undocumented) +export const textRampLgItembodyLineheight = "var(--smtc-text-ramp-lg-itembody-lineheight, var(--smtc-text-global-body2-lineheight))"; + +// @public (undocumented) +export const textRampLgItembodyLineheightRaw = "--smtc-text-ramp-lg-itembody-lineheight"; + +// @public (undocumented) +export const textRampLgItemheaderFontsize = "var(--smtc-text-ramp-lg-itemheader-fontsize, var(--smtc-text-global-subtitle2-fontsize))"; + +// @public (undocumented) +export const textRampLgItemheaderFontsizeRaw = "--smtc-text-ramp-lg-itemheader-fontsize"; + +// @public (undocumented) +export const textRampLgItemheaderLineheight = "var(--smtc-text-ramp-lg-itemheader-lineheight, var(--smtc-text-global-subtitle2-lineheight))"; + +// @public (undocumented) +export const textRampLgItemheaderLineheightRaw = "--smtc-text-ramp-lg-itemheader-lineheight"; + +// @public (undocumented) +export const textRampLgLegalFontsize = "var(--smtc-text-ramp-lg-legal-fontsize, var(--smtc-text-global-caption1-fontsize))"; + +// @public (undocumented) +export const textRampLgLegalFontsizeRaw = "--smtc-text-ramp-lg-legal-fontsize"; + +// @public (undocumented) +export const textRampLgLegalLineheight = "var(--smtc-text-ramp-lg-legal-lineheight, var(--smtc-text-global-caption1-lineheight))"; + +// @public (undocumented) +export const textRampLgLegalLineheightRaw = "--smtc-text-ramp-lg-legal-lineheight"; + +// @public (undocumented) +export const textRampLgMetadataFontsize = "var(--smtc-text-ramp-lg-metadata-fontsize, var(--smtc-text-global-body3-fontsize))"; + +// @public (undocumented) +export const textRampLgMetadataFontsizeRaw = "--smtc-text-ramp-lg-metadata-fontsize"; + +// @public (undocumented) +export const textRampLgMetadataLineheight = "var(--smtc-text-ramp-lg-metadata-lineheight, var(--smtc-text-global-body3-lineheight))"; + +// @public (undocumented) +export const textRampLgMetadataLineheightRaw = "--smtc-text-ramp-lg-metadata-lineheight"; + +// @public (undocumented) +export const textRampLgPageheaderFontsize = "var(--smtc-text-ramp-lg-pageheader-fontsize, var(--smtc-text-global-title1-fontsize))"; + +// @public (undocumented) +export const textRampLgPageheaderFontsizeRaw = "--smtc-text-ramp-lg-pageheader-fontsize"; + +// @public (undocumented) +export const textRampLgPageheaderLineheight = "var(--smtc-text-ramp-lg-pageheader-lineheight, var(--smtc-text-global-title1-lineheight))"; + +// @public (undocumented) +export const textRampLgPageheaderLineheightRaw = "--smtc-text-ramp-lg-pageheader-lineheight"; + +// @public (undocumented) +export const textRampLgReadingbodyFontsize = "var(--smtc-text-ramp-lg-readingbody-fontsize, var(--smtc-text-global-body1-fontsize))"; + +// @public (undocumented) +export const textRampLgReadingbodyFontsizeRaw = "--smtc-text-ramp-lg-readingbody-fontsize"; + +// @public (undocumented) +export const textRampLgReadingbodyLineheight = "var(--smtc-text-ramp-lg-readingbody-lineheight, var(--smtc-text-global-body1-lineheight))"; + +// @public (undocumented) +export const textRampLgReadingbodyLineheightRaw = "--smtc-text-ramp-lg-readingbody-lineheight"; + +// @public (undocumented) +export const textRampLgSectionheaderFontsize = "var(--smtc-text-ramp-lg-sectionheader-fontsize, var(--smtc-text-global-title2-fontsize))"; + +// @public (undocumented) +export const textRampLgSectionheaderFontsizeRaw = "--smtc-text-ramp-lg-sectionheader-fontsize"; + +// @public (undocumented) +export const textRampLgSectionheaderLineheight = "var(--smtc-text-ramp-lg-sectionheader-lineheight, var(--smtc-text-global-title2-lineheight))"; + +// @public (undocumented) +export const textRampLgSectionheaderLineheightRaw = "--smtc-text-ramp-lg-sectionheader-lineheight"; + +// @public (undocumented) +export const textRampLgSubsectionheaderFontsize = "var(--smtc-text-ramp-lg-subsectionheader-fontsize, var(--smtc-text-global-subtitle1-fontsize))"; + +// @public (undocumented) +export const textRampLgSubsectionheaderFontsizeRaw = "--smtc-text-ramp-lg-subsectionheader-fontsize"; + +// @public (undocumented) +export const textRampLgSubsectionheaderLineheight = "var(--smtc-text-ramp-lg-subsectionheader-lineheight, var(--smtc-text-global-subtitle1-lineheight))"; + +// @public (undocumented) +export const textRampLgSubsectionheaderLineheightRaw = "--smtc-text-ramp-lg-subsectionheader-lineheight"; + +// @public (undocumented) +export const textRampMetadataFontsize = "var(--smtc-text-ramp-metadata-fontsize, var(--smtc-text-global-caption1-fontsize))"; + +// @public (undocumented) +export const textRampMetadataFontsizeRaw = "--smtc-text-ramp-metadata-fontsize"; + +// @public (undocumented) +export const textRampMetadataLineheight = "var(--smtc-text-ramp-metadata-lineheight, var(--smtc-text-global-caption1-lineheight))"; + +// @public (undocumented) +export const textRampMetadataLineheightRaw = "--smtc-text-ramp-metadata-lineheight"; + +// @public (undocumented) +export const textRampPageheaderFontsize = "var(--smtc-text-ramp-pageheader-fontsize, var(--smtc-text-global-title2-fontsize))"; + +// @public (undocumented) +export const textRampPageheaderFontsizeRaw = "--smtc-text-ramp-pageheader-fontsize"; + +// @public (undocumented) +export const textRampPageheaderLineheight = "var(--smtc-text-ramp-pageheader-lineheight, var(--smtc-text-global-title2-lineheight))"; + +// @public (undocumented) +export const textRampPageheaderLineheightRaw = "--smtc-text-ramp-pageheader-lineheight"; + +// @public (undocumented) +export const textRampReadingbodyFontsize = "var(--smtc-text-ramp-readingbody-fontsize, var(--smtc-text-global-body2-fontsize))"; + +// @public (undocumented) +export const textRampReadingbodyFontsizeRaw = "--smtc-text-ramp-readingbody-fontsize"; + +// @public (undocumented) +export const textRampReadingbodyLineheight = "var(--smtc-text-ramp-readingbody-lineheight, var(--smtc-text-global-body2-lineheight))"; + +// @public (undocumented) +export const textRampReadingbodyLineheightRaw = "--smtc-text-ramp-readingbody-lineheight"; + +// @public (undocumented) +export const textRampSectionheaderFontsize = "var(--smtc-text-ramp-sectionheader-fontsize, var(--smtc-text-global-subtitle1-fontsize))"; + +// @public (undocumented) +export const textRampSectionheaderFontsizeRaw = "--smtc-text-ramp-sectionheader-fontsize"; + +// @public (undocumented) +export const textRampSectionheaderLineheight = "var(--smtc-text-ramp-sectionheader-lineheight, var(--smtc-text-global-subtitle1-lineheight))"; + +// @public (undocumented) +export const textRampSectionheaderLineheightRaw = "--smtc-text-ramp-sectionheader-lineheight"; + +// @public (undocumented) +export const textRampSmItembodyFontsize = "var(--smtc-text-ramp-sm-itembody-fontsize, var(--smtc-text-global-caption1-fontsize))"; + +// @public (undocumented) +export const textRampSmItembodyFontsizeRaw = "--smtc-text-ramp-sm-itembody-fontsize"; + +// @public (undocumented) +export const textRampSmItembodyLineheight = "var(--smtc-text-ramp-sm-itembody-lineheight, var(--smtc-text-global-caption1-lineheight))"; + +// @public (undocumented) +export const textRampSmItembodyLineheightRaw = "--smtc-text-ramp-sm-itembody-lineheight"; + +// @public (undocumented) +export const textRampSmItemheaderFontsize = "var(--smtc-text-ramp-sm-itemheader-fontsize, var(--smtc-text-global-body3-fontsize))"; + +// @public (undocumented) +export const textRampSmItemheaderFontsizeRaw = "--smtc-text-ramp-sm-itemheader-fontsize"; + +// @public (undocumented) +export const textRampSmItemheaderLineheight = "var(--smtc-text-ramp-sm-itemheader-lineheight, var(--smtc-text-global-body3-lineheight))"; + +// @public (undocumented) +export const textRampSmItemheaderLineheightRaw = "--smtc-text-ramp-sm-itemheader-lineheight"; + +// @public (undocumented) +export const textRampSmLegalFontsize = "var(--smtc-text-ramp-sm-legal-fontsize, var(--smtc-text-global-caption2-fontsize))"; + +// @public (undocumented) +export const textRampSmLegalFontsizeRaw = "--smtc-text-ramp-sm-legal-fontsize"; + +// @public (undocumented) +export const textRampSmLegalLineheight = "var(--smtc-text-ramp-sm-legal-lineheight, var(--smtc-text-global-caption2-lineheight))"; + +// @public (undocumented) +export const textRampSmLegalLineheightRaw = "--smtc-text-ramp-sm-legal-lineheight"; + +// @public (undocumented) +export const textRampSmMetadataFontsize = "var(--smtc-text-ramp-sm-metadata-fontsize, var(--smtc-text-global-caption1-fontsize))"; + +// @public (undocumented) +export const textRampSmMetadataFontsizeRaw = "--smtc-text-ramp-sm-metadata-fontsize"; + +// @public (undocumented) +export const textRampSmMetadataLineheight = "var(--smtc-text-ramp-sm-metadata-lineheight, var(--smtc-text-global-caption1-lineheight))"; + +// @public (undocumented) +export const textRampSmMetadataLineheightRaw = "--smtc-text-ramp-sm-metadata-lineheight"; + +// @public (undocumented) +export const textRampSmPageheaderFontsize = "var(--smtc-text-ramp-sm-pageheader-fontsize, var(--smtc-text-global-subtitle1-fontsize))"; + +// @public (undocumented) +export const textRampSmPageheaderFontsizeRaw = "--smtc-text-ramp-sm-pageheader-fontsize"; + +// @public (undocumented) +export const textRampSmPageheaderLineheight = "var(--smtc-text-ramp-sm-pageheader-lineheight, var(--smtc-text-global-subtitle1-lineheight))"; + +// @public (undocumented) +export const textRampSmPageheaderLineheightRaw = "--smtc-text-ramp-sm-pageheader-lineheight"; + +// @public (undocumented) +export const textRampSmReadingbodyFontsize = "var(--smtc-text-ramp-sm-readingbody-fontsize, var(--smtc-text-global-body3-fontsize))"; + +// @public (undocumented) +export const textRampSmReadingbodyFontsizeRaw = "--smtc-text-ramp-sm-readingbody-fontsize"; + +// @public (undocumented) +export const textRampSmReadingbodyLineheight = "var(--smtc-text-ramp-sm-readingbody-lineheight, var(--smtc-text-global-body3-lineheight))"; + +// @public (undocumented) +export const textRampSmReadingbodyLineheightRaw = "--smtc-text-ramp-sm-readingbody-lineheight"; + +// @public (undocumented) +export const textRampSmSectionheaderFontsize = "var(--smtc-text-ramp-sm-sectionheader-fontsize, var(--smtc-text-global-subtitle2-fontsize))"; + +// @public (undocumented) +export const textRampSmSectionheaderFontsizeRaw = "--smtc-text-ramp-sm-sectionheader-fontsize"; + +// @public (undocumented) +export const textRampSmSectionheaderLineheight = "var(--smtc-text-ramp-sm-sectionheader-lineheight, var(--smtc-text-global-subtitle2-lineheight))"; + +// @public (undocumented) +export const textRampSmSectionheaderLineheightRaw = "--smtc-text-ramp-sm-sectionheader-lineheight"; + +// @public (undocumented) +export const textRampSmSubsectionheaderFontsize = "var(--smtc-text-ramp-sm-subsectionheader-fontsize, var(--smtc-text-global-body1-fontsize))"; + +// @public (undocumented) +export const textRampSmSubsectionheaderFontsizeRaw = "--smtc-text-ramp-sm-subsectionheader-fontsize"; + +// @public (undocumented) +export const textRampSmSubsectionheaderLineheight = "var(--smtc-text-ramp-sm-subsectionheader-lineheight, var(--smtc-text-global-body1-lineheight))"; + +// @public (undocumented) +export const textRampSmSubsectionheaderLineheightRaw = "--smtc-text-ramp-sm-subsectionheader-lineheight"; + +// @public (undocumented) +export const textRampSubsectionheaderFontsize = "var(--smtc-text-ramp-subsectionheader-fontsize, var(--smtc-text-global-subtitle2-fontsize))"; + +// @public (undocumented) +export const textRampSubsectionheaderFontsizeRaw = "--smtc-text-ramp-subsectionheader-fontsize"; + +// @public (undocumented) +export const textRampSubsectionheaderLineheight = "var(--smtc-text-ramp-subsectionheader-lineheight, var(--smtc-text-global-subtitle2-lineheight))"; + +// @public (undocumented) +export const textRampSubsectionheaderLineheightRaw = "--smtc-text-ramp-subsectionheader-lineheight"; + +// @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-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; + +// @public (undocumented) +export const textStyleAiHeaderFontfamilyRaw = "--smtc-text-style-ai-header-fontfamily"; + +// @public (undocumented) +export const textStyleAiHeaderLetterspacing = "var(--smtc-text-style-ai-header-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; + +// @public (undocumented) +export const textStyleAiHeaderLetterspacingRaw = "--smtc-text-style-ai-header-letterspacing"; + +// @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-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; + +// @public (undocumented) +export const textStyleAiRegularFontfamilyRaw = "--smtc-text-style-ai-regular-fontfamily"; + +// @public (undocumented) +export const textStyleAiRegularLetterspacing = "var(--smtc-text-style-ai-regular-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; + +// @public (undocumented) +export const textStyleAiRegularLetterspacingRaw = "--smtc-text-style-ai-regular-letterspacing"; + +// @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-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; + +// @public (undocumented) +export const textStyleArticleHeaderFontfamilyRaw = "--smtc-text-style-article-header-fontfamily"; + +// @public (undocumented) +export const textStyleArticleHeaderLetterspacing = "var(--smtc-text-style-article-header-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; + +// @public (undocumented) +export const textStyleArticleHeaderLetterspacingRaw = "--smtc-text-style-article-header-letterspacing"; + +// @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-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; + +// @public (undocumented) +export const textStyleArticleRegularFontfamilyRaw = "--smtc-text-style-article-regular-fontfamily"; + +// @public (undocumented) +export const textStyleArticleRegularLetterspacing = "var(--smtc-text-style-article-regular-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; + +// @public (undocumented) +export const textStyleArticleRegularLetterspacingRaw = "--smtc-text-style-article-regular-letterspacing"; + +// @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-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; + +// @public (undocumented) +export const textStyleCodeHeaderFontfamilyRaw = "--smtc-text-style-code-header-fontfamily"; + +// @public (undocumented) +export const textStyleCodeHeaderLetterspacing = "var(--smtc-text-style-code-header-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; + +// @public (undocumented) +export const textStyleCodeHeaderLetterspacingRaw = "--smtc-text-style-code-header-letterspacing"; + +// @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-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; + +// @public (undocumented) +export const textStyleCodeRegularFontfamilyRaw = "--smtc-text-style-code-regular-fontfamily"; + +// @public (undocumented) +export const textStyleCodeRegularLetterspacing = "var(--smtc-text-style-code-regular-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; + +// @public (undocumented) +export const textStyleCodeRegularLetterspacingRaw = "--smtc-text-style-code-regular-letterspacing"; + +// @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-dataviz-header-case, unset)"; + +// @public (undocumented) +export const textStyleDatavizHeaderCaseRaw = "--smtc-text-style-dataviz-header-case"; + +// @public (undocumented) +export const textStyleDatavizHeaderFontfamily = "var(--smtc-text-style-dataviz-header-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; + +// @public (undocumented) +export const textStyleDatavizHeaderFontfamilyRaw = "--smtc-text-style-dataviz-header-fontfamily"; + +// @public (undocumented) +export const textStyleDatavizHeaderLetterspacing = "var(--smtc-text-style-dataviz-header-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; + +// @public (undocumented) +export const textStyleDatavizHeaderLetterspacingRaw = "--smtc-text-style-dataviz-header-letterspacing"; + +// @public (undocumented) +export const textStyleDatavizHeaderWeight = "var(--smtc-text-style-dataviz-header-weight, var(--smtc-text-style-default-header-weight))"; + +// @public (undocumented) +export const textStyleDatavizHeaderWeightRaw = "--smtc-text-style-dataviz-header-weight"; + +// @public (undocumented) +export const textStyleDatavizRegularFontfamily = "var(--smtc-text-style-dataviz-regular-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; + +// @public (undocumented) +export const textStyleDatavizRegularFontfamilyRaw = "--smtc-text-style-dataviz-regular-fontfamily"; + +// @public (undocumented) +export const textStyleDatavizRegularLetterspacing = "var(--smtc-text-style-dataviz-regular-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; + +// @public (undocumented) +export const textStyleDatavizRegularLetterspacingRaw = "--smtc-text-style-dataviz-regular-letterspacing"; + +// @public (undocumented) +export const textStyleDatavizRegularWeight = "var(--smtc-text-style-dataviz-regular-weight, var(--smtc-text-style-default-regular-weight))"; + +// @public (undocumented) +export const textStyleDatavizRegularWeightRaw = "--smtc-text-style-dataviz-regular-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-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; + +// @public (undocumented) +export const textStyleDefaultHeaderFontfamilyRaw = "--smtc-text-style-default-header-fontfamily"; + +// @public (undocumented) +export const textStyleDefaultHeaderLetterspacing = "var(--smtc-text-style-default-header-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; + +// @public (undocumented) +export const textStyleDefaultHeaderLetterspacingRaw = "--smtc-text-style-default-header-letterspacing"; + +// @public (undocumented) +export const textStyleDefaultHeaderWeight = "var(--smtc-text-style-default-header-weight)"; + +// @public (undocumented) +export const textStyleDefaultHeaderWeightRaw = "--smtc-text-style-default-header-weight"; + +// @public (undocumented) +export const textStyleDefaultRegularFontfamily: string; + +// @public (undocumented) +export const textStyleDefaultRegularFontfamilyRaw = "--smtc-text-style-default-regular-fontfamily"; + +// @public (undocumented) +export const textStyleDefaultRegularLetterspacing = "var(--smtc-text-style-default-regular-letterspacing)"; + +// @public (undocumented) +export const textStyleDefaultRegularLetterspacingRaw = "--smtc-text-style-default-regular-letterspacing"; + +// @public (undocumented) +export const textStyleDefaultRegularWeight: string; + +// @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-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; + +// @public (undocumented) +export const textStyleQuoteHeaderFontfamilyRaw = "--smtc-text-style-quote-header-fontfamily"; + +// @public (undocumented) +export const textStyleQuoteHeaderLetterspacing = "var(--smtc-text-style-quote-header-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; + +// @public (undocumented) +export const textStyleQuoteHeaderLetterspacingRaw = "--smtc-text-style-quote-header-letterspacing"; + +// @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-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; + +// @public (undocumented) +export const textStyleQuoteRegularFontfamilyRaw = "--smtc-text-style-quote-regular-fontfamily"; + +// @public (undocumented) +export const textStyleQuoteRegularLetterspacing = "var(--smtc-text-style-quote-regular-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; + +// @public (undocumented) +export const textStyleQuoteRegularLetterspacingRaw = "--smtc-text-style-quote-regular-letterspacing"; + +// @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/scripts/tokenGen.ts b/packages/semantic-tokens/scripts/tokenGen.ts index 4648785675cf5..773869e8d93a9 100644 --- a/packages/semantic-tokens/scripts/tokenGen.ts +++ b/packages/semantic-tokens/scripts/tokenGen.ts @@ -20,6 +20,8 @@ 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...'); @@ -234,7 +236,7 @@ const generateTokenVariables = () => { }); // Format our text to match prettier rules - sourceFile.replaceWithText(formattedText); + sourceFile.replaceWithText(headerWarning + formattedText); }); // Save changes so far @@ -266,7 +268,7 @@ const generateTokenVariables = () => { }); // Format our text to match prettier rules - indexSourceFile.replaceWithText(formattedText); + indexSourceFile.replaceWithText(headerWarning + formattedText); // Save exports project.saveSync(); 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 0000000000000..63b0ef7490d86 --- /dev/null +++ b/packages/semantic-tokens/src/components/avatar/tokens.ts @@ -0,0 +1,49 @@ +// 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 { + 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}))`; +export const ctrlAvatarCornerItem = `var(${ctrlAvatarCornerItemRaw}, var(${cornerCircularRaw}))`; +export const ctrlAvatarBackground = `var(${ctrlAvatarBackgroundRaw})`; +export const ctrlAvatarForeground = `var(${ctrlAvatarForegroundRaw})`; +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}))`; +export const ctrlAvatarActiveringStrokewidth = `var(${ctrlAvatarActiveringStrokewidthRaw})`; +export const ctrlAvatarPresencebadgeStrokewidth = `var(${ctrlAvatarPresencebadgeStrokewidthRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlAvatarTextFontsize = `var(${ctrlAvatarTextFontsizeRaw}, var(${textGlobalBody3FontsizeRaw}))`; +export const ctrlAvatarTextLineheight = `var(${ctrlAvatarTextLineheightRaw}, var(${textGlobalBody3LineheightRaw}))`; +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}))`; 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 0000000000000..7f63fa9d49072 --- /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-presencebadge-size'; +export const ctrlAvatarActiveringSizeRaw = '--smtc-ctrl-avatar-activering-size'; +export const ctrlAvatarPresencebadgePaddingBottomrightoffsetRaw = + '--smtc-ctrl-avatar-presencebadge-padding-bottomrightoffset'; +export const ctrlAvatarCornerGroupRaw = '--smtc-ctrl-avatar-corner-group'; +export const ctrlAvatarActiveringStrokewidthRaw = '--smtc-ctrl-avatar-activering-strokewidth'; +export const ctrlAvatarPresencebadgeStrokewidthRaw = '--smtc-ctrl-avatar-presencebadge-strokewidth'; +export const ctrlAvatarTextFontsizeRaw = '--smtc-ctrl-avatar-text-fontsize'; +export const ctrlAvatarTextLineheightRaw = '--smtc-ctrl-avatar-text-lineheight'; +export const ctrlAvatarTextPaddingTopoffsetRaw = '--smtc-ctrl-avatar-text-padding-topoffset'; +export const ctrlAvatarActiveringStrokeRaw = '--smtc-ctrl-avatar-activering-stroke'; +export const ctrlAvatarShowcutoutRaw = '--smtc-ctrl-avatar-showcutout'; +export const ctrlAvatarPresencebadgeBackgroundBehindbadgeRaw = + '--smtc-ctrl-avatar-presencebadge-background-behindbadge'; 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 0000000000000..1c4dcafe7cc15 --- /dev/null +++ b/packages/semantic-tokens/src/components/badge/tokens.ts @@ -0,0 +1,53 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { iconthemeCtrlDefaultRestRaw } from '../../control/variables'; +import { + ctrlBadgeTextPaddingTopRaw, + ctrlBadgeTextPaddingBottomRaw, + ctrlBadgeSmTextPaddingTopRaw, + ctrlBadgeSmTextPaddingBottomRaw, + ctrlBadgeLgTextPaddingTopRaw, + ctrlBadgeLgTextPaddingBottomRaw, + ctrlBadgeIconThemeRaw, + ctrlBadgeBeaconSizeRaw, + ctrlBadgeSizeRaw, + ctrlBadgeCornerRaw, + ctrlBadgeIconSizeFigmaonlyRaw, + ctrlBadgeGapRaw, + ctrlBadgeIconSizeRaw, + ctrlBadgePaddingRaw, + ctrlBadgeSmSizeRaw, + ctrlBadgeSmCornerRaw, + ctrlBadgeSmIconSizeFigmaonlyRaw, + ctrlBadgeSmIconSizeRaw, + ctrlBadgeSmPaddingRaw, + ctrlBadgeLgSizeRaw, + ctrlBadgeLgIconSizeFigmaonlyRaw, + 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})`; +export const ctrlBadgeIconSizeFigmaonly = `var(${ctrlBadgeIconSizeFigmaonlyRaw})`; +export const ctrlBadgeGap = `var(${ctrlBadgeGapRaw})`; +export const ctrlBadgeIconSize = `var(${ctrlBadgeIconSizeRaw})`; +export const ctrlBadgePadding = `var(${ctrlBadgePaddingRaw})`; +export const ctrlBadgeSmSize = `var(${ctrlBadgeSmSizeRaw})`; +export const ctrlBadgeSmCorner = `var(${ctrlBadgeSmCornerRaw})`; +export const ctrlBadgeSmIconSizeFigmaonly = `var(${ctrlBadgeSmIconSizeFigmaonlyRaw})`; +export const ctrlBadgeSmIconSize = `var(${ctrlBadgeSmIconSizeRaw})`; +export const ctrlBadgeSmPadding = `var(${ctrlBadgeSmPaddingRaw})`; +export const ctrlBadgeLgSize = `var(${ctrlBadgeLgSizeRaw})`; +export const ctrlBadgeLgIconSizeFigmaonly = `var(${ctrlBadgeLgIconSizeFigmaonlyRaw})`; +export const ctrlBadgeLgIconSize = `var(${ctrlBadgeLgIconSizeRaw})`; +export const ctrlBadgeLgCorner = `var(${ctrlBadgeLgCornerRaw})`; +export const ctrlBadgeLgPadding = `var(${ctrlBadgeLgPaddingRaw})`; 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 0000000000000..d6006af4fae06 --- /dev/null +++ b/packages/semantic-tokens/src/components/badge/variables.ts @@ -0,0 +1,25 @@ +// 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 ctrlBadgeIconSizeFigmaonlyRaw = '--smtc-ctrl-badge-icon-sizefigmaonly'; +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 ctrlBadgeSmIconSizeFigmaonlyRaw = '--smtc-ctrl-badge-sm-icon-sizefigmaonly'; +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 ctrlBadgeLgIconSizeFigmaonlyRaw = '--smtc-ctrl-badge-lg-icon-sizefigmaonly'; +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 0000000000000..a5b98d56f349c --- /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 0000000000000..7ba3c9d705c60 --- /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-selectionhint'; 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 0000000000000..8453e9b16ecb0 --- /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 0000000000000..df257d1d76a4f --- /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 0000000000000..302c1aff661a9 --- /dev/null +++ b/packages/semantic-tokens/src/components/choice/tokens.ts @@ -0,0 +1,127 @@ +// 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 { + backgroundCtrlOutlineRestRaw, + backgroundCtrlOutlineHoverRaw, + backgroundCtrlOutlinePressedRaw, + backgroundCtrlOutlineDisabledRaw, +} from '../../nullable/variables'; +import { + ctrlChoicePaddingHorizontalRaw, + ctrlChoicePaddingVerticalRaw, + ctrlChoiceBaseSizeRaw, + ctrlChoiceIconThemeRaw, + ctrlChoiceBaseBackgroundRestRaw, + ctrlChoiceBaseBackgroundHoverRaw, + ctrlChoiceBaseBackgroundPressedRaw, + ctrlChoiceBaseBackgroundDisabledRaw, + ctrlChoiceBaseStrokeRestRaw, + ctrlChoiceBaseStrokeHoverRaw, + ctrlChoiceBaseStrokePressedRaw, + ctrlChoiceBaseStrokeDisabledRaw, + ctrlChoiceCheckboxIconSizeRaw, + ctrlChoiceCheckboxCornerRaw, + ctrlChoiceCheckboxIndeterminateCornerRaw, + ctrlChoiceCheckboxIndeterminateHeightRaw, + ctrlChoiceCheckboxIndeterminateWidthRaw, + ctrlChoiceRadioCornerRaw, + ctrlChoiceSwitchCornerRaw, + ctrlChoiceRadioDotSizeRestRaw, + ctrlChoiceRadioDotSizeHoverRaw, + ctrlChoiceRadioDotSizePressedRaw, + ctrlChoiceSwitchPaddingRestRaw, + ctrlChoiceSwitchPaddingHoverRaw, + ctrlChoiceSwitchPaddingPressedRaw, + ctrlChoiceSwitchHeightRaw, + ctrlChoiceSwitchWidthRaw, + ctrlChoiceSwitchThumbWidthRestRaw, + ctrlChoiceSwitchThumbWidthHoverRaw, + ctrlChoiceSwitchThumbWidthPressedRaw, + ctrlChoiceSmBaseSizeRaw, + ctrlChoiceSmCheckboxCornerRaw, + ctrlChoiceSmCheckboxIconSizeRaw, + ctrlChoiceSmCheckboxIconSizeFigmaonlyRaw, + ctrlChoiceSmRadioDotSizeRaw, + ctrlChoiceSmSwitchWidthRaw, + ctrlChoiceSmSwitchHeightRaw, + ctrlChoiceSmSwitchThumbWidthRestRaw, + ctrlChoiceSmSwitchThumbWidthHoverRaw, + ctrlChoiceSmSwitchThumbWidthPressedRaw, + ctrlChoiceLgBaseSizeRaw, + ctrlChoiceLgCheckboxCornerRaw, + ctrlChoiceLgCheckboxIconSizeRaw, + ctrlChoiceLgCheckboxIconSizeFigmaonlyRaw, + ctrlChoiceLgRadioDotSizeRestRaw, + ctrlChoiceLgRadioDotSizeHoverRaw, + ctrlChoiceLgRadioDotSizePressedRaw, + ctrlChoiceLgSwitchWidthRaw, + ctrlChoiceLgSwitchHeightRaw, + ctrlChoiceLgSwitchThumbWidthRestRaw, + ctrlChoiceLgSwitchThumbWidthHoverRaw, + ctrlChoiceLgSwitchThumbWidthPressedRaw, + ctrlChoiceSwitchThumbShadowKeyRaw, + ctrlChoiceSwitchThumbShadowAmbientRaw, +} from './variables'; + +export const ctrlChoicePaddingHorizontal = `var(${ctrlChoicePaddingHorizontalRaw})`; +export const ctrlChoicePaddingVertical = `var(${ctrlChoicePaddingVerticalRaw})`; +export const ctrlChoiceBaseSize = `var(${ctrlChoiceBaseSizeRaw}, var(${sizeCtrlIconRaw}))`; +export const ctrlChoiceIconTheme = `var(${ctrlChoiceIconThemeRaw})`; +export const ctrlChoiceBaseBackgroundRest = `var(${ctrlChoiceBaseBackgroundRestRaw}, var(${backgroundCtrlOutlineRestRaw}))`; +export const ctrlChoiceBaseBackgroundHover = `var(${ctrlChoiceBaseBackgroundHoverRaw}, var(${backgroundCtrlOutlineHoverRaw}))`; +export const ctrlChoiceBaseBackgroundPressed = `var(${ctrlChoiceBaseBackgroundPressedRaw}, var(${backgroundCtrlOutlinePressedRaw}))`; +export const ctrlChoiceBaseBackgroundDisabled = `var(${ctrlChoiceBaseBackgroundDisabledRaw}, var(${backgroundCtrlOutlineDisabledRaw}))`; +export const ctrlChoiceBaseStrokeRest = `var(${ctrlChoiceBaseStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const ctrlChoiceBaseStrokeHover = `var(${ctrlChoiceBaseStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const ctrlChoiceBaseStrokePressed = `var(${ctrlChoiceBaseStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const ctrlChoiceBaseStrokeDisabled = `var(${ctrlChoiceBaseStrokeDisabledRaw}, var(${foregroundCtrlNeutralSecondaryDisabledRaw}))`; +export const ctrlChoiceCheckboxIconSize = `var(${ctrlChoiceCheckboxIconSizeRaw}, var(${sizeCtrlIconsecondaryRaw}))`; +export const ctrlChoiceCheckboxCorner = `var(${ctrlChoiceCheckboxCornerRaw})`; +export const ctrlChoiceCheckboxIndeterminateCorner = `var(${ctrlChoiceCheckboxIndeterminateCornerRaw}, var(${cornerCircularRaw}))`; +export const ctrlChoiceCheckboxIndeterminateHeight = `var(${ctrlChoiceCheckboxIndeterminateHeightRaw})`; +export const ctrlChoiceCheckboxIndeterminateWidth = `var(${ctrlChoiceCheckboxIndeterminateWidthRaw})`; +export const ctrlChoiceRadioCorner = `var(${ctrlChoiceRadioCornerRaw}, var(${cornerCircularRaw}))`; +export const ctrlChoiceSwitchCorner = `var(${ctrlChoiceSwitchCornerRaw}, var(${cornerCircularRaw}))`; +export const ctrlChoiceRadioDotSizeRest = `var(${ctrlChoiceRadioDotSizeRestRaw})`; +export const ctrlChoiceRadioDotSizeHover = `var(${ctrlChoiceRadioDotSizeHoverRaw}, var(${ctrlChoiceRadioDotSizeRestRaw}))`; +export const ctrlChoiceRadioDotSizePressed = `var(${ctrlChoiceRadioDotSizePressedRaw}, var(${ctrlChoiceRadioDotSizeRestRaw}))`; +export const ctrlChoiceSwitchPaddingRest = `var(${ctrlChoiceSwitchPaddingRestRaw})`; +export const ctrlChoiceSwitchPaddingHover = `var(${ctrlChoiceSwitchPaddingHoverRaw}, var(${ctrlChoiceSwitchPaddingRestRaw}))`; +export const ctrlChoiceSwitchPaddingPressed = `var(${ctrlChoiceSwitchPaddingPressedRaw}, var(${ctrlChoiceSwitchPaddingRestRaw}))`; +export const ctrlChoiceSwitchHeight = `var(${ctrlChoiceSwitchHeightRaw}, var(${sizeCtrlIconRaw}))`; +export const ctrlChoiceSwitchWidth = `var(${ctrlChoiceSwitchWidthRaw})`; +export const ctrlChoiceSwitchThumbWidthRest = `var(${ctrlChoiceSwitchThumbWidthRestRaw})`; +export const ctrlChoiceSwitchThumbWidthHover = `var(${ctrlChoiceSwitchThumbWidthHoverRaw}, var(${ctrlChoiceSwitchThumbWidthRestRaw}))`; +export const ctrlChoiceSwitchThumbWidthPressed = `var(${ctrlChoiceSwitchThumbWidthPressedRaw}, var(${ctrlChoiceSwitchThumbWidthRestRaw}))`; +export const ctrlChoiceSmBaseSize = `var(${ctrlChoiceSmBaseSizeRaw}, var(${sizeCtrlSmIconRaw}))`; +export const ctrlChoiceSmCheckboxCorner = `var(${ctrlChoiceSmCheckboxCornerRaw})`; +export const ctrlChoiceSmCheckboxIconSize = `var(${ctrlChoiceSmCheckboxIconSizeRaw}, var(${sizeCtrlIconsecondaryRaw}))`; +export const ctrlChoiceSmCheckboxIconSizeFigmaonly = `var(${ctrlChoiceSmCheckboxIconSizeFigmaonlyRaw})`; +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 ctrlChoiceLgCheckboxIconSizeFigmaonly = `var(${ctrlChoiceLgCheckboxIconSizeFigmaonlyRaw})`; +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 ctrlChoiceSwitchThumbShadowKey = `var(${ctrlChoiceSwitchThumbShadowKeyRaw}, unset)`; +export const ctrlChoiceSwitchThumbShadowAmbient = `var(${ctrlChoiceSwitchThumbShadowAmbientRaw}, 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 0000000000000..e23b81d4e35a2 --- /dev/null +++ b/packages/semantic-tokens/src/components/choice/variables.ts @@ -0,0 +1,55 @@ +// 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 ctrlChoiceCheckboxIndeterminateHeightRaw = '--smtc-ctrl-choice-checkbox-indeterminate-height'; +export const ctrlChoiceCheckboxIndeterminateWidthRaw = '--smtc-ctrl-choice-checkbox-indeterminate-width'; +export const ctrlChoiceRadioCornerRaw = '--smtc-ctrl-choice-radio-corner'; +export const ctrlChoiceSwitchCornerRaw = '--smtc-ctrl-choice-switch-corner'; +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 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 ctrlChoiceSwitchHeightRaw = '--smtc-ctrl-choice-switch-height'; +export const ctrlChoiceSwitchWidthRaw = '--smtc-ctrl-choice-switch-width'; +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 ctrlChoiceSmBaseSizeRaw = '--smtc-ctrl-choice-sm-base-size'; +export const ctrlChoiceSmCheckboxCornerRaw = '--smtc-ctrl-choice-sm-checkbox-corner'; +export const ctrlChoiceSmCheckboxIconSizeRaw = '--smtc-ctrl-choice-sm-checkbox-icon-size'; +export const ctrlChoiceSmCheckboxIconSizeFigmaonlyRaw = '--smtc-ctrl-choice-sm-checkbox-icon-sizefigmaonly'; +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 ctrlChoiceLgCheckboxIconSizeFigmaonlyRaw = '--smtc-ctrl-choice-lg-checkbox-icon-sizefigmaonly'; +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 ctrlChoiceSwitchThumbShadowKeyRaw = '--smtc-ctrl-choice-switch-thumb-shadow-key'; +export const ctrlChoiceSwitchThumbShadowAmbientRaw = '--smtc-ctrl-choice-switch-thumb-shadow-ambient'; 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 0000000000000..ceea300cb73c3 --- /dev/null +++ b/packages/semantic-tokens/src/components/composer/tokens.ts @@ -0,0 +1,73 @@ +// 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, + ctrlComposerContainerShadowKeyRaw, + ctrlComposerContainerShadowAmbientRaw, +} 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 ctrlComposerContainerShadowKey = `var(${ctrlComposerContainerShadowKeyRaw})`; +export const ctrlComposerContainerShadowAmbient = `var(${ctrlComposerContainerShadowAmbientRaw})`; 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 0000000000000..482735d883c21 --- /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-hoverusesgradient'; +export const ctrlComposerInputStrokePressedUsesgradientRaw = '--smtc-ctrl-composer-input-stroke-pressedusesgradient'; +export const ctrlComposerInputStrokeDisabledUsesgradientRaw = '--smtc-ctrl-composer-input-stroke-disabledusesgradient'; +export const ctrlComposerInputStrokeSelectedRestUsesgradientRaw = + '--smtc-ctrl-composer-input-stroke-selected-restusesgradient'; +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-bottomstroke-rest'; +export const ctrlComposerInputBottomstrokeHoverRaw = '--smtc-ctrl-composer-input-bottomstroke-hover'; +export const ctrlComposerInputBottomstrokePressedRaw = '--smtc-ctrl-composer-input-bottomstroke-pressed'; +export const ctrlComposerInputBottomstrokeDisabledRaw = '--smtc-ctrl-composer-input-bottomstroke-disabled'; +export const ctrlComposerInputBottomstrokeSelectedRestRaw = '--smtc-ctrl-composer-input-bottomstroke-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-acryliccolorblend'; +export const ctrlComposerContainerBackgroundAcryliclumblendRaw = + '--smtc-ctrl-composer-container-background-acryliclumblend'; +export const ctrlComposerContainerStrokeDefaultRaw = '--smtc-ctrl-composer-container-stroke-default'; +export const ctrlComposerInputShadowRaw = '--smtc-ctrl-composer-input-shadow-x'; +export const ctrlComposerContainerShadowKeyRaw = '--smtc-ctrl-composer-container-shadow-key'; +export const ctrlComposerContainerShadowAmbientRaw = '--smtc-ctrl-composer-container-shadow-ambient'; 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 0000000000000..f764d5068069f --- /dev/null +++ b/packages/semantic-tokens/src/components/dialog/tokens.ts @@ -0,0 +1,19 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { cornerCardRestRaw, backgroundLayerPrimarySolidRaw } from '../../control/variables'; +import { + ctrlDialogBackgroundRaw, + ctrlDialogStrokeRaw, + ctrlDialogBaseCornerRaw, + ctrlDialogLayerBackgroundRaw, + ctrlDialogLayerPaddingBottomRaw, + ctrlDialogBaseShadowKeyRaw, + ctrlDialogBaseShadowAmbientRaw, +} from './variables'; + +export const ctrlDialogBackground = `var(${ctrlDialogBackgroundRaw})`; +export const ctrlDialogStroke = `var(${ctrlDialogStrokeRaw}, unset)`; +export const ctrlDialogBaseCorner = `var(${ctrlDialogBaseCornerRaw}, var(${cornerCardRestRaw}))`; +export const ctrlDialogLayerBackground = `var(${ctrlDialogLayerBackgroundRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +export const ctrlDialogLayerPaddingBottom = `var(${ctrlDialogLayerPaddingBottomRaw})`; +export const ctrlDialogBaseShadowKey = `var(${ctrlDialogBaseShadowKeyRaw})`; +export const ctrlDialogBaseShadowAmbient = `var(${ctrlDialogBaseShadowAmbientRaw})`; 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 0000000000000..64b94cb2dfbcf --- /dev/null +++ b/packages/semantic-tokens/src/components/dialog/variables.ts @@ -0,0 +1,8 @@ +// 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 ctrlDialogBaseShadowKeyRaw = '--smtc-ctrl-dialog-base-shadow-key'; +export const ctrlDialogBaseShadowAmbientRaw = '--smtc-ctrl-dialog-base-shadow-ambient'; 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 0000000000000..c5e16d1cde48c --- /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}))`; 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 0000000000000..354af4188358b --- /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-fixedline-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 0000000000000..38d8bb0acc849 --- /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 0000000000000..989f274b38b31 --- /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-colorblend'; +export const ctrlDragBackgroundLumblendRaw = '--smtc-ctrl-drag-background-lumblend'; 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 0000000000000..3f2bc8c1b76ea --- /dev/null +++ b/packages/semantic-tokens/src/components/fab/tokens.ts @@ -0,0 +1,29 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { cornerCircularRaw, shadowFlyoutKeyRaw } from '../../control/variables'; +import { + ctrlFabBackgroundRestRaw, + ctrlFabBackgroundHoverRaw, + ctrlFabBackgroundPressedRaw, + ctrlFabBackgroundDisabledRaw, + ctrlFabCornerRestRaw, + ctrlFabCornerHoverRaw, + ctrlFabCornerPressedRaw, + ctrlFabShadowRestKeyRaw, + ctrlFabShadowRestAmbientRaw, + ctrlFabShadowHoverKeyRaw, + ctrlFabShadowPressedKeyRaw, + ctrlFabShadowDisabledKeyRaw, +} from './variables'; + +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 ctrlFabShadowRestKey = `var(${ctrlFabShadowRestKeyRaw})`; +export const ctrlFabShadowRestAmbient = `var(${ctrlFabShadowRestAmbientRaw})`; +export const ctrlFabShadowHoverKey = `var(${ctrlFabShadowHoverKeyRaw}, var(${shadowFlyoutKeyRaw}))`; +export const ctrlFabShadowPressedKey = `var(${ctrlFabShadowPressedKeyRaw})`; +export const ctrlFabShadowDisabledKey = `var(${ctrlFabShadowDisabledKeyRaw}, var(${ctrlFabShadowPressedKeyRaw}))`; 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 0000000000000..63c5d4c28fe68 --- /dev/null +++ b/packages/semantic-tokens/src/components/fab/variables.ts @@ -0,0 +1,13 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +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 ctrlFabShadowRestKeyRaw = '--smtc-ctrl-fab-shadow-rest-key'; +export const ctrlFabShadowRestAmbientRaw = '--smtc-ctrl-fab-shadow-rest-ambient'; +export const ctrlFabShadowHoverKeyRaw = '--smtc-ctrl-fab-shadow-hover-key'; +export const ctrlFabShadowPressedKeyRaw = '--smtc-ctrl-fab-shadow-pressed-key'; +export const ctrlFabShadowDisabledKeyRaw = '--smtc-ctrl-fab-shadow-disabled-key'; 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 0000000000000..367a684546214 --- /dev/null +++ b/packages/semantic-tokens/src/components/focus/tokens.ts @@ -0,0 +1,15 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { tokens } from '@fluentui/tokens'; +import { strokewidthDefaultRaw, backgroundCtrlBrandRestRaw } from '../../control/variables'; +import { + ctrlFocusPositionFigmaonlyRaw, + ctrlFocusInnerStrokewidthRaw, + ctrlFocusInnerStrokeRaw, + ctrlFocusOuterStrokewidthRaw, + ctrlFocusOuterStrokeRaw, +} from './variables'; +export const ctrlFocusPositionFigmaonly = `var(${ctrlFocusPositionFigmaonlyRaw})`; +export const ctrlFocusInnerStrokewidth = `var(${ctrlFocusInnerStrokewidthRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlFocusInnerStroke = `var(${ctrlFocusInnerStrokeRaw})`; +export const ctrlFocusOuterStrokewidth = `var(${ctrlFocusOuterStrokewidthRaw})`; +export const ctrlFocusOuterStroke = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${tokens.colorStrokeFocus2}))`; 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 0000000000000..7d9143f3a827c --- /dev/null +++ b/packages/semantic-tokens/src/components/focus/variables.ts @@ -0,0 +1,6 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const ctrlFocusPositionFigmaonlyRaw = '--smtc-ctrl-focus-positionfigmaonly'; +export const ctrlFocusInnerStrokewidthRaw = '--smtc-ctrl-focus-inner-strokewidth'; +export const ctrlFocusInnerStrokeRaw = '--smtc-ctrl-focus-inner-stroke'; +export const ctrlFocusOuterStrokewidthRaw = '--smtc-ctrl-focus-outer-strokewidth'; +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 0000000000000..5e015bb09b62e --- /dev/null +++ b/packages/semantic-tokens/src/components/input/tokens.ts @@ -0,0 +1,75 @@ +// 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 { statusDangerStrokeRaw } from '../../optional/variables'; +import { + ctrlInputBackgroundRestRaw, + ctrlInputBackgroundHoverRaw, + ctrlInputBackgroundPressedRaw, + ctrlInputBackgroundDisabledRaw, + ctrlInputBackgroundSelectedRaw, + ctrlInputBackgroundErrorRaw, + ctrlInputStrokeRestRaw, + ctrlInputBottomlineStrokewidthRestRaw, + ctrlInputStrokewidthRestRaw, + ctrlInputTextselectionBackgroundRaw, + ctrlInputTextselectionForegroundRaw, + ctrlInputStrokewidthHoverRaw, + ctrlInputStrokewidthPressedRaw, + ctrlInputStrokewidthSelectedRaw, + ctrlInputBottomlineStrokewidthHoverRaw, + ctrlInputBottomlineStrokewidthPressedRaw, + ctrlInputBottomlineStrokewidthSelectedRaw, + ctrlInputBottomlineStrokeRestRaw, + ctrlInputBottomlineStrokeHoverRaw, + ctrlInputBottomlineStrokePressedRaw, + ctrlInputBottomlineStrokeDisabledRaw, + ctrlInputBottomlineStrokeSelectedRaw, + ctrlInputBottomlineStrokeErrorRaw, + ctrlInputStrokeHoverRaw, + ctrlInputStrokePressedRaw, + ctrlInputStrokeDisabledRaw, + ctrlInputStrokeSelectedRaw, + ctrlInputStrokeErrorRaw, +} from './variables'; + +export const ctrlInputBackgroundRest = `var(${ctrlInputBackgroundRestRaw}, var(${backgroundCtrlNeutralRestRaw}))`; +export const ctrlInputBackgroundHover = `var(${ctrlInputBackgroundHoverRaw}, var(${backgroundCtrlNeutralHoverRaw}))`; +export const ctrlInputBackgroundPressed = `var(${ctrlInputBackgroundPressedRaw}, var(${backgroundCtrlNeutralPressedRaw}))`; +export const ctrlInputBackgroundDisabled = `var(${ctrlInputBackgroundDisabledRaw}, var(${backgroundCtrlNeutralDisabledRaw}))`; +export const ctrlInputBackgroundSelected = `var(${ctrlInputBackgroundSelectedRaw}, var(${backgroundCtrlNeutralRestRaw}))`; +export const ctrlInputBackgroundError = `var(${ctrlInputBackgroundErrorRaw}, var(${backgroundCtrlNeutralRestRaw}))`; +export const ctrlInputStrokeRest = `var(${ctrlInputStrokeRestRaw}, var(${strokeCtrlOnoutlineRestRaw}))`; +export const ctrlInputBottomlineStrokewidthRest = `var(${ctrlInputBottomlineStrokewidthRestRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlInputStrokewidthRest = `var(${ctrlInputStrokewidthRestRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlInputTextselectionBackground = `var(${ctrlInputTextselectionBackgroundRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const ctrlInputTextselectionForeground = `var(${ctrlInputTextselectionForegroundRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const ctrlInputStrokewidthHover = `var(${ctrlInputStrokewidthHoverRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlInputStrokewidthPressed = `var(${ctrlInputStrokewidthPressedRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlInputStrokewidthSelected = `var(${ctrlInputStrokewidthSelectedRaw})`; +export const ctrlInputBottomlineStrokewidthHover = `var(${ctrlInputBottomlineStrokewidthHoverRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlInputBottomlineStrokewidthPressed = `var(${ctrlInputBottomlineStrokewidthPressedRaw}, var(${ctrlInputBottomlineStrokewidthSelectedRaw}))`; +export const ctrlInputBottomlineStrokewidthSelected = `var(${ctrlInputBottomlineStrokewidthSelectedRaw})`; +export const ctrlInputBottomlineStrokeRest = `var(${ctrlInputBottomlineStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const ctrlInputBottomlineStrokeHover = `var(${ctrlInputBottomlineStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const ctrlInputBottomlineStrokePressed = `var(${ctrlInputBottomlineStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const ctrlInputBottomlineStrokeDisabled = `var(${ctrlInputBottomlineStrokeDisabledRaw}, unset)`; +export const ctrlInputBottomlineStrokeSelected = `var(${ctrlInputBottomlineStrokeSelectedRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const ctrlInputBottomlineStrokeError = `var(${ctrlInputBottomlineStrokeErrorRaw}, unset)`; +export const ctrlInputStrokeHover = `var(${ctrlInputStrokeHoverRaw}, var(${strokeCtrlOnoutlineHoverRaw}))`; +export const ctrlInputStrokePressed = `var(${ctrlInputStrokePressedRaw}, var(${strokeCtrlOnoutlinePressedRaw}))`; +export const ctrlInputStrokeDisabled = `var(${ctrlInputStrokeDisabledRaw}, var(${strokeCtrlOnoutlineDisabledRaw}))`; +export const ctrlInputStrokeSelected = `var(${ctrlInputStrokeSelectedRaw}, var(${strokeCtrlOnoutlineRestRaw}))`; +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 0000000000000..8d4c028b2c533 --- /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 ctrlInputBottomlineStrokewidthRestRaw = '--smtc-ctrl-input-bottomline-strokewidth-rest'; +export const ctrlInputStrokewidthRestRaw = '--smtc-ctrl-input-strokewidth-rest'; +export const ctrlInputTextselectionBackgroundRaw = '--smtc-ctrl-input-textselection-background'; +export const ctrlInputTextselectionForegroundRaw = '--smtc-ctrl-input-textselection-foreground'; +export const ctrlInputStrokewidthHoverRaw = '--smtc-ctrl-input-strokewidth-hover'; +export const ctrlInputStrokewidthPressedRaw = '--smtc-ctrl-input-strokewidth-pressed'; +export const ctrlInputStrokewidthSelectedRaw = '--smtc-ctrl-input-strokewidth-selected'; +export const ctrlInputBottomlineStrokewidthHoverRaw = '--smtc-ctrl-input-bottomline-strokewidth-hover'; +export const ctrlInputBottomlineStrokewidthPressedRaw = '--smtc-ctrl-input-bottomline-strokewidth-pressed'; +export const ctrlInputBottomlineStrokewidthSelectedRaw = '--smtc-ctrl-input-bottomline-strokewidth-selected'; +export const ctrlInputBottomlineStrokeRestRaw = '--smtc-ctrl-input-bottomline-stroke-rest'; +export const ctrlInputBottomlineStrokeHoverRaw = '--smtc-ctrl-input-bottomline-stroke-hover'; +export const ctrlInputBottomlineStrokePressedRaw = '--smtc-ctrl-input-bottomline-stroke-pressed'; +export const ctrlInputBottomlineStrokeDisabledRaw = '--smtc-ctrl-input-bottomline-stroke-disabled'; +export const ctrlInputBottomlineStrokeSelectedRaw = '--smtc-ctrl-input-bottomline-stroke-selected'; +export const ctrlInputBottomlineStrokeErrorRaw = '--smtc-ctrl-input-bottomline-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 0000000000000..4b0fad2e68a14 --- /dev/null +++ b/packages/semantic-tokens/src/components/link/tokens.ts @@ -0,0 +1,43 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { tokens } from '@fluentui/tokens'; +import { + foregroundCtrlNeutralPrimaryRestRaw, + strokewidthDefaultRaw, + foregroundCtrlBrandRestRaw, + foregroundCtrlBrandHoverRaw, + foregroundCtrlBrandPressedRaw, +} from '../../control/variables'; +import { + ctrlLinkForegroundNeutralRestRaw, + ctrlLinkInlineStrokewidthRestRaw, + ctrlLinkInlineStrokewidthHoverRaw, + ctrlLinkInlineUnderlineDashedRaw, + ctrlLinkInlineUnderlineSolidFigmaonlyRaw, + ctrlLinkForegroundNeutralHoverRaw, + ctrlLinkForegroundNeutralPressedRaw, + ctrlLinkForegroundBrandRestRaw, + ctrlLinkForegroundBrandHoverRaw, + ctrlLinkForegroundBrandPressedRaw, + ctrlLinkOnpageStrokewidthRestRaw, + ctrlLinkOnpageStrokewidthHoverRaw, + ctrlLinkOnpageUnderlineDashedRaw, + ctrlLinkOnpageUnderlineSolidFigmaonlyRaw, + ctrlLinkInlineShowunderlineatrestRaw, + ctrlLinkOnpageShowunderlineatrestRaw, +} from './variables'; +export const ctrlLinkForegroundNeutralRest = `var(${ctrlLinkForegroundNeutralRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${tokens.colorNeutralForeground2}))`; +export const ctrlLinkInlineStrokewidthRest = `var(${ctrlLinkInlineStrokewidthRestRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlLinkInlineStrokewidthHover = `var(${ctrlLinkInlineStrokewidthHoverRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlLinkInlineUnderlineDashed = `var(${ctrlLinkInlineUnderlineDashedRaw})`; +export const ctrlLinkInlineUnderlineSolidFigmaonly = `var(${ctrlLinkInlineUnderlineSolidFigmaonlyRaw})`; +export const ctrlLinkForegroundNeutralHover = `var(${ctrlLinkForegroundNeutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${tokens.colorNeutralForeground2Hover}))`; +export const ctrlLinkForegroundNeutralPressed = `var(${ctrlLinkForegroundNeutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${tokens.colorNeutralForeground2Pressed}))`; +export const ctrlLinkForegroundBrandRest = `var(${ctrlLinkForegroundBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${tokens.colorBrandForegroundLink}))`; +export const ctrlLinkForegroundBrandHover = `var(${ctrlLinkForegroundBrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw}, ${tokens.colorBrandForegroundLinkHover}))`; +export const ctrlLinkForegroundBrandPressed = `var(${ctrlLinkForegroundBrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw}, ${tokens.colorBrandForegroundLinkPressed}))`; +export const ctrlLinkOnpageStrokewidthRest = `var(${ctrlLinkOnpageStrokewidthRestRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlLinkOnpageStrokewidthHover = `var(${ctrlLinkOnpageStrokewidthHoverRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlLinkOnpageUnderlineDashed = `var(${ctrlLinkOnpageUnderlineDashedRaw})`; +export const ctrlLinkOnpageUnderlineSolidFigmaonly = `var(${ctrlLinkOnpageUnderlineSolidFigmaonlyRaw})`; +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 0000000000000..065dfd097448e --- /dev/null +++ b/packages/semantic-tokens/src/components/link/variables.ts @@ -0,0 +1,17 @@ +// 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-strokewidth-rest'; +export const ctrlLinkInlineStrokewidthHoverRaw = '--smtc-ctrl-link-inline-strokewidth-hover'; +export const ctrlLinkInlineUnderlineDashedRaw = '--smtc-ctrl-link-inline-underline-dashed'; +export const ctrlLinkInlineUnderlineSolidFigmaonlyRaw = '--smtc-ctrl-link-inline-underline-solidfigmaonly'; +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-onpage-strokewidth-rest'; +export const ctrlLinkOnpageStrokewidthHoverRaw = '--smtc-ctrl-link-onpage-strokewidth-hover'; +export const ctrlLinkOnpageUnderlineDashedRaw = '--smtc-ctrl-link-onpage-underline-dashed'; +export const ctrlLinkOnpageUnderlineSolidFigmaonlyRaw = '--smtc-ctrl-link-onpage-underline-solidfigmaonly'; +export const ctrlLinkInlineShowunderlineatrestRaw = '--smtc-ctrl-link-inline-showunderlineatrest'; +export const ctrlLinkOnpageShowunderlineatrestRaw = '--smtc-ctrl-link-onpage-showunderlineatrest'; 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 0000000000000..df7dcad9d443f --- /dev/null +++ b/packages/semantic-tokens/src/components/list/tokens.ts @@ -0,0 +1,126 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + cornerCtrlRestRaw, + paddingCtrlHorizontalDefaultRaw, + backgroundCtrlSubtleHoverRaw, + backgroundCtrlSubtlePressedRaw, + foregroundCtrlBrandRestRaw, + foregroundCtrlBrandDisabledRaw, + sizeCtrlIconsecondaryRaw, + strokeCtrlDividerOnneutralRaw, + cornerCtrlSmRestRaw, + paddingCtrlSmHorizontalDefaultRaw, + cornerCtrlLgRestRaw, + paddingCtrlLgHorizontalDefaultRaw, +} from '../../control/variables'; +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, + ctrlListBackgroundSelectedHoverRaw, + ctrlListBackgroundSelectedPressedRaw, + ctrlListBackgroundSelectedDisabledRaw, + ctrlListChoiceBackgroundRestRaw, + ctrlListChoiceStrokeRestRaw, + ctrlListChoiceStrokeDisabledRaw, + ctrlListChoiceStrokeSelectedRestRaw, + ctrlListChoiceStrokeSelectedDisabledRaw, + ctrlListChoiceForegroundHoverRaw, + ctrlListChoiceForegroundSelectedRestRaw, + ctrlListChoiceForegroundSelectedDisabledRaw, + ctrlListChoiceBackgroundDisabledRaw, + ctrlListChoiceBackgroundSelectedRestRaw, + ctrlListChoiceBackgroundSelectedDisabledRaw, + ctrlListChoiceCheckboxCornerRaw, + ctrlListChoiceCheckboxIconSizeRaw, + ctrlListChoiceCheckboxIconSizeFigmaonlyRaw, + ctrlListChoiceDotSizeRaw, + ctrlListChoiceDotSizeFigmaonlyRaw, + ctrlListSplitDividerPaddingInsetRaw, + ctrlListSplitDividerStrokeRaw, + ctrlListSmCornerRestRaw, + ctrlListSmCornerHoverRaw, + ctrlListSmCornerPressedRaw, + ctrlListSmIndentLevel1Raw, + ctrlListSmIndentLevel2Raw, + ctrlListSmIndentLevel3Raw, + ctrlListLgCornerRestRaw, + ctrlListLgCornerHoverRaw, + ctrlListLgCornerPressedRaw, + ctrlListLgIndentLevel1Raw, + ctrlListLgIndentLevel2Raw, + ctrlListLgIndentLevel3Raw, + ctrlListSplitDividerShowdividerRaw, + ctrlListShadowSelectedKeyRaw, + ctrlListShadowSelectedAmbientRaw, +} from './variables'; + +export const ctrlListPillWidth = `var(${ctrlListPillWidthRaw})`; +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}))`; +export const ctrlListCornerHover = `var(${ctrlListCornerHoverRaw}, var(${cornerCtrlRestRaw}))`; +export const ctrlListCornerPressed = `var(${ctrlListCornerPressedRaw}, var(${cornerCtrlRestRaw}))`; +export const ctrlListIndentLevel1 = `var(${ctrlListIndentLevel1Raw}, var(${paddingCtrlHorizontalDefaultRaw}))`; +export const ctrlListIndentLevel2 = `var(${ctrlListIndentLevel2Raw})`; +export const ctrlListIndentLevel3 = `var(${ctrlListIndentLevel3Raw})`; +export const ctrlListBackgroundSelectedRest = `var(${ctrlListBackgroundSelectedRestRaw}, var(${backgroundCtrlSubtleRestRaw}))`; +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(${foregroundCtrlBrandRestRaw}))`; +export const ctrlListChoiceForegroundSelectedDisabled = `var(${ctrlListChoiceForegroundSelectedDisabledRaw}, var(${foregroundCtrlBrandDisabledRaw}))`; +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 ctrlListChoiceCheckboxIconSizeFigmaonly = `var(${ctrlListChoiceCheckboxIconSizeFigmaonlyRaw})`; +export const ctrlListChoiceDotSize = `var(${ctrlListChoiceDotSizeRaw})`; +export const ctrlListChoiceDotSizeFigmaonly = `var(${ctrlListChoiceDotSizeFigmaonlyRaw})`; +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 ctrlListShadowSelectedKey = `var(${ctrlListShadowSelectedKeyRaw}, unset)`; +export const ctrlListShadowSelectedAmbient = `var(${ctrlListShadowSelectedAmbientRaw})`; 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 0000000000000..67db5e2c3fb6c --- /dev/null +++ b/packages/semantic-tokens/src/components/list/variables.ts @@ -0,0 +1,52 @@ +// 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-fullwidth'; +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 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 ctrlListChoiceCheckboxIconSizeFigmaonlyRaw = '--smtc-ctrl-list-choice-checkbox-icon-sizefigmaonly'; +export const ctrlListChoiceDotSizeRaw = '--smtc-ctrl-list-choice-dot-size'; +export const ctrlListChoiceDotSizeFigmaonlyRaw = '--smtc-ctrl-list-choice-dot-sizefigmaonly'; +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-showdivider'; +export const ctrlListShadowSelectedKeyRaw = '--smtc-ctrl-list-shadow-selected-key'; +export const ctrlListShadowSelectedAmbientRaw = '--smtc-ctrl-list-shadow-selected-ambient'; 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 0000000000000..a05d37d34a654 --- /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 0000000000000..e0f5c9d5be775 --- /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-litefilter-background-selected'; +export const ctrlLitefilterStrokeSelectedRaw = '--smtc-ctrl-litefilter-stroke-selected'; +export const ctrlLitefilterForegroundSelectedRaw = '--smtc-ctrl-litefilter-foreground-selected'; +export const ctrlLitefilterStrokewidthSelectedRaw = '--smtc-ctrl-litefilter-strokewidth-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 0000000000000..7f654e6f2a140 --- /dev/null +++ b/packages/semantic-tokens/src/components/progress/tokens.ts @@ -0,0 +1,23 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { backgroundCtrlBrandRestRaw, cornerCircularRaw } from '../../control/variables'; +import { + ctrlProgressBackgroundEmptyRaw, + ctrlProgressBackgroundFilledRaw, + ctrlProgressCornerRaw, + ctrlProgressHeightFilledRaw, + ctrlProgressHeightEmptyRaw, + ctrlProgressSmHeightFilledRaw, + ctrlProgressSmHeightEmptyRaw, + ctrlProgressLgHeightFilledRaw, + ctrlProgressLgHeightEmptyRaw, +} from './variables'; + +export const ctrlProgressBackgroundEmpty = `var(${ctrlProgressBackgroundEmptyRaw})`; +export const ctrlProgressBackgroundFilled = `var(${ctrlProgressBackgroundFilledRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const ctrlProgressCorner = `var(${ctrlProgressCornerRaw}, var(${cornerCircularRaw}))`; +export const ctrlProgressHeightFilled = `var(${ctrlProgressHeightFilledRaw})`; +export const ctrlProgressHeightEmpty = `var(${ctrlProgressHeightEmptyRaw}, var(${ctrlProgressHeightFilledRaw}))`; +export const ctrlProgressSmHeightFilled = `var(${ctrlProgressSmHeightFilledRaw})`; +export const ctrlProgressSmHeightEmpty = `var(${ctrlProgressSmHeightEmptyRaw}, var(${ctrlProgressSmHeightFilledRaw}))`; +export const ctrlProgressLgHeightFilled = `var(${ctrlProgressLgHeightFilledRaw})`; +export const ctrlProgressLgHeightEmpty = `var(${ctrlProgressLgHeightEmptyRaw}, var(${ctrlProgressLgHeightFilledRaw}))`; 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 0000000000000..a25933bb4e03f --- /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 0000000000000..5b074016482b4 --- /dev/null +++ b/packages/semantic-tokens/src/components/rating/tokens.ts @@ -0,0 +1,16 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { iconthemeCtrlDefaultRestRaw, backgroundCtrlBrandRestRaw, sizeCtrlIconRaw } from '../../control/variables'; +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}))`; +export const ctrlRatingIconForegroundEmpty = `var(${ctrlRatingIconForegroundEmptyRaw}, var(${ctrlProgressBackgroundEmptyRaw}))`; +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 0000000000000..b48396e925c3c --- /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 0000000000000..f0e32348ebe35 --- /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})`; +export const ctrlSegmentedSmItemCornerPressed = `var(${ctrlSegmentedSmItemCornerPressedRaw})`; +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 0000000000000..1a2eb26ebf7ab --- /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 0000000000000..1168c839d63d8 --- /dev/null +++ b/packages/semantic-tokens/src/components/slider/tokens.ts @@ -0,0 +1,99 @@ +// 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 { + 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}))`; +export const ctrlSliderBarCorner = `var(${ctrlSliderBarCornerRaw}, var(${cornerCircularRaw}))`; +export const ctrlSliderBarForegroundFilledRest = `var(${ctrlSliderBarForegroundFilledRestRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const ctrlSliderBarForegroundEmptyRest = `var(${ctrlSliderBarForegroundEmptyRestRaw}, var(${ctrlProgressBackgroundEmptyRaw}))`; +export const ctrlSliderBarForegroundEmptyHover = `var(${ctrlSliderBarForegroundEmptyHoverRaw}, var(${ctrlProgressBackgroundEmptyRaw}))`; +export const ctrlSliderBarForegroundEmptyPressed = `var(${ctrlSliderBarForegroundEmptyPressedRaw}, var(${ctrlProgressBackgroundEmptyRaw}))`; +export const ctrlSliderBarForegroundEmptyDisabled = `var(${ctrlSliderBarForegroundEmptyDisabledRaw}, var(${ctrlProgressBackgroundEmptyRaw}))`; +export const ctrlSliderBarForegroundFilledHover = `var(${ctrlSliderBarForegroundFilledHoverRaw}, var(${backgroundCtrlBrandHoverRaw}))`; +export const ctrlSliderBarForegroundFilledPressed = `var(${ctrlSliderBarForegroundFilledPressedRaw}, var(${backgroundCtrlBrandPressedRaw}))`; +export const ctrlSliderBarForegroundFilledDisabled = `var(${ctrlSliderBarForegroundFilledDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; +export const ctrlSliderThumbCorner = `var(${ctrlSliderThumbCornerRaw}, var(${cornerCircularRaw}))`; +export const ctrlSliderThumbSizeRest = `var(${ctrlSliderThumbSizeRestRaw}, var(${sizeCtrlIconRaw}))`; +export const ctrlSliderThumbSizeHover = `var(${ctrlSliderThumbSizeHoverRaw}, var(${sizeCtrlIconRaw}))`; +export const ctrlSliderThumbSizePressed = `var(${ctrlSliderThumbSizePressedRaw}, var(${sizeCtrlIconRaw}))`; +export const ctrlSliderThumbBackgroundRest = `var(${ctrlSliderThumbBackgroundRestRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const ctrlSliderThumbBackgroundHover = `var(${ctrlSliderThumbBackgroundHoverRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const ctrlSliderThumbBackgroundPressed = `var(${ctrlSliderThumbBackgroundPressedRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const ctrlSliderThumbBackgroundDisabled = `var(${ctrlSliderThumbBackgroundDisabledRaw}, var(${foregroundCtrlOnbrandDisabledRaw}))`; +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}))`; +export const ctrlSliderThumbInnerStrokeHover = `var(${ctrlSliderThumbInnerStrokeHoverRaw}, var(${backgroundCtrlBrandHoverRaw}))`; +export const ctrlSliderThumbInnerStrokePressed = `var(${ctrlSliderThumbInnerStrokePressedRaw}, var(${backgroundCtrlBrandPressedRaw}))`; +export const ctrlSliderThumbInnerStrokeDisabled = `var(${ctrlSliderThumbInnerStrokeDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; +export const ctrlSliderThumbOuterStrokewidth = `var(${ctrlSliderThumbOuterStrokewidthRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlSliderThumbOuterStrokeRest = `var(${ctrlSliderThumbOuterStrokeRestRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const ctrlSliderThumbOuterStrokeHover = `var(${ctrlSliderThumbOuterStrokeHoverRaw}, var(${backgroundCtrlBrandHoverRaw}))`; +export const ctrlSliderThumbOuterStrokePressed = `var(${ctrlSliderThumbOuterStrokePressedRaw}, var(${backgroundCtrlBrandPressedRaw}))`; +export const ctrlSliderThumbOuterStrokeDisabled = `var(${ctrlSliderThumbOuterStrokeDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; +export const ctrlSliderSmThumbSizeRest = `var(${ctrlSliderSmThumbSizeRestRaw}, var(${sizeCtrlSmIconRaw}))`; +export const ctrlSliderSmThumbSizeHover = `var(${ctrlSliderSmThumbSizeHoverRaw}, var(${sizeCtrlSmIconRaw}))`; +export const ctrlSliderSmThumbSizePressed = `var(${ctrlSliderSmThumbSizePressedRaw}, var(${sizeCtrlSmIconRaw}))`; +export const ctrlSliderSmBarHeight = `var(${ctrlSliderSmBarHeightRaw}, var(${ctrlProgressSmHeightFilledRaw}))`; +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 0000000000000..a4b0ce3ee544f --- /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-strokewidth-rest'; +export const ctrlSliderThumbInnerStrokewidthHoverRaw = '--smtc-ctrl-slider-thumb-inner-strokewidth-hover'; +export const ctrlSliderThumbInnerStrokewidthPressedRaw = '--smtc-ctrl-slider-thumb-inner-strokewidth-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-strokewidth'; +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 0000000000000..15046039e0cf7 --- /dev/null +++ b/packages/semantic-tokens/src/components/spinner/tokens.ts @@ -0,0 +1,6 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { ctrlProgressHeightFilledRaw } from '../progress/variables'; +import { ctrlSpinnerStrokewidthRaw, ctrlSpinnerShowemptytrackRaw } from './variables'; + +export const ctrlSpinnerStrokewidth = `var(${ctrlSpinnerStrokewidthRaw}, var(${ctrlProgressHeightFilledRaw}))`; +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 0000000000000..0a29772638096 --- /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-strokewidth'; +export const ctrlSpinnerShowemptytrackRaw = '--smtc-ctrl-spinner-showemptytrack'; 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 0000000000000..b6714dd3be2eb --- /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 0000000000000..ee394f33b0370 --- /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-strokewidth'; +export const ctrlSplitDividerStrokewidthOnoutlineRaw = '--smtc-ctrl-split-divider-strokewidth-onoutline'; +export const ctrlSplitDividerStrokewidthOnsubtleRaw = '--smtc-ctrl-split-divider-strokewidth-onsubtle'; 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 0000000000000..f6d30ff6dc571 --- /dev/null +++ b/packages/semantic-tokens/src/components/tooltip/tokens.ts @@ -0,0 +1,16 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { cornerCtrlRestRaw } from '../../control/variables'; +import { ctrlFabShadowRestKeyRaw, ctrlFabShadowRestAmbientRaw } from '../fab/variables'; +import { + ctrlTooltipCornerRaw, + ctrlTooltipBackgroundRaw, + ctrlTooltipForegroundRaw, + ctrlTooltipShadowKeyRaw, + ctrlTooltipShadowAmbientRaw, +} from './variables'; + +export const ctrlTooltipCorner = `var(${ctrlTooltipCornerRaw}, var(${cornerCtrlRestRaw}))`; +export const ctrlTooltipBackground = `var(${ctrlTooltipBackgroundRaw})`; +export const ctrlTooltipForeground = `var(${ctrlTooltipForegroundRaw})`; +export const ctrlTooltipShadowKey = `var(${ctrlTooltipShadowKeyRaw}, var(${ctrlFabShadowRestKeyRaw}))`; +export const ctrlTooltipShadowAmbient = `var(${ctrlTooltipShadowAmbientRaw}, var(${ctrlFabShadowRestAmbientRaw}))`; 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 0000000000000..73513a3928a8e --- /dev/null +++ b/packages/semantic-tokens/src/components/tooltip/variables.ts @@ -0,0 +1,6 @@ +// 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 ctrlTooltipShadowKeyRaw = '--smtc-ctrl-tooltip-shadow-key'; +export const ctrlTooltipShadowAmbientRaw = '--smtc-ctrl-tooltip-shadow-ambient'; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts new file mode 100644 index 0000000000000..b2528b8a725e1 --- /dev/null +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -0,0 +1,420 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { tokens } from '@fluentui/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, + sizeCtrlIconFigmaonlyRaw, + sizeCtrlIconsecondaryRaw, + textCtrlWeightSelectedRaw, + sizeCtrlSmDefaultRaw, + sizeCtrlSmIconRaw, + sizeCtrlLgDefaultRaw, + sizeCtrlLgIconRaw, + sizeCtrlSmIconFigmaonlyRaw, + sizeCtrlLgIconFigmaonlyRaw, + paddingContentAlignDefaultRaw, + paddingContentAlignOutdentIcononsubtleRaw, + paddingContentAlignOutdentTextonsubtleRaw, + paddingContentNoneRaw, + 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, + shadowFlyoutKeyRaw, + shadowFlyoutAmbientRaw, + shadowToolbarKeyRaw, + shadowToolbarAmbientRaw, + shadowWindowActiveKeyRaw, + shadowWindowActiveAmbientRaw, + shadowWindowInactiveAmbientRaw, +} from './variables'; +export const textGlobalDisplay1Fontsize = `var(${textGlobalDisplay1FontsizeRaw})`; +export const textGlobalDisplay1Lineheight = `var(${textGlobalDisplay1LineheightRaw})`; +export const textGlobalDisplay2Fontsize = `var(${textGlobalDisplay2FontsizeRaw})`; +export const textGlobalDisplay2Lineheight = `var(${textGlobalDisplay2LineheightRaw})`; +export const textGlobalTitle1Fontsize = `var(${textGlobalTitle1FontsizeRaw})`; +export const textGlobalTitle1Lineheight = `var(${textGlobalTitle1LineheightRaw})`; +export const textGlobalTitle2Fontsize = `var(${textGlobalTitle2FontsizeRaw})`; +export const textGlobalTitle2Lineheight = `var(${textGlobalTitle2LineheightRaw})`; +export const textGlobalSubtitle1Fontsize = `var(${textGlobalSubtitle1FontsizeRaw})`; +export const textGlobalSubtitle1Lineheight = `var(${textGlobalSubtitle1LineheightRaw})`; +export const textGlobalSubtitle2Fontsize = `var(${textGlobalSubtitle2FontsizeRaw})`; +export const textGlobalSubtitle2Lineheight = `var(${textGlobalSubtitle2LineheightRaw})`; +export const textGlobalBody1Fontsize = `var(${textGlobalBody1FontsizeRaw})`; +export const textGlobalBody1Lineheight = `var(${textGlobalBody1LineheightRaw})`; +export const textGlobalBody2Fontsize = `var(${textGlobalBody2FontsizeRaw})`; +export const textGlobalBody2Lineheight = `var(${textGlobalBody2LineheightRaw})`; +export const textGlobalBody3Fontsize = `var(${textGlobalBody3FontsizeRaw}, ${tokens.fontSizeBase300})`; +export const textGlobalBody3Lineheight = `var(${textGlobalBody3LineheightRaw})`; +export const textGlobalCaption1Fontsize = `var(${textGlobalCaption1FontsizeRaw})`; +export const textGlobalCaption1Lineheight = `var(${textGlobalCaption1LineheightRaw})`; +export const textGlobalCaption2Fontsize = `var(${textGlobalCaption2FontsizeRaw})`; +export const textGlobalCaption2Lineheight = `var(${textGlobalCaption2LineheightRaw})`; +export const textStyleDefaultRegularFontfamily = `var(${textStyleDefaultRegularFontfamilyRaw}, ${tokens.fontFamilyBase})`; +export const textStyleDefaultRegularWeight = `var(${textStyleDefaultRegularWeightRaw}, ${tokens.fontWeightRegular})`; +export const textStyleDefaultRegularLetterspacing = `var(${textStyleDefaultRegularLetterspacingRaw})`; +export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightRaw})`; +export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw})`; +export const sizeCtrlIcon = `var(${sizeCtrlIconRaw})`; +export const sizeCtrlIconFigmaonly = `var(${sizeCtrlIconFigmaonlyRaw})`; +export const sizeCtrlIconsecondary = `var(${sizeCtrlIconsecondaryRaw})`; +export const textCtrlWeightSelected = `var(${textCtrlWeightSelectedRaw})`; +export const sizeCtrlSmDefault = `var(${sizeCtrlSmDefaultRaw})`; +export const sizeCtrlSmIcon = `var(${sizeCtrlSmIconRaw})`; +export const sizeCtrlLgDefault = `var(${sizeCtrlLgDefaultRaw})`; +export const sizeCtrlLgIcon = `var(${sizeCtrlLgIconRaw})`; +export const sizeCtrlSmIconFigmaonly = `var(${sizeCtrlSmIconFigmaonlyRaw})`; +export const sizeCtrlLgIconFigmaonly = `var(${sizeCtrlLgIconFigmaonlyRaw})`; +export const paddingContentAlignDefault = `var(${paddingContentAlignDefaultRaw})`; +export const paddingContentAlignOutdentIcononsubtle = `var(${paddingContentAlignOutdentIcononsubtleRaw})`; +export const paddingContentAlignOutdentTextonsubtle = `var(${paddingContentAlignOutdentTextonsubtleRaw})`; +export const paddingContentNone = `var(${paddingContentNoneRaw})`; +export const paddingContentXxsmall = `var(${paddingContentXxsmallRaw})`; +export const paddingContentXsmall = `var(${paddingContentXsmallRaw})`; +export const paddingContentSmall = `var(${paddingContentSmallRaw})`; +export const paddingContentMedium = `var(${paddingContentMediumRaw})`; +export const paddingContentLarge = `var(${paddingContentLargeRaw})`; +export const paddingContentXlarge = `var(${paddingContentXlargeRaw})`; +export const paddingContentXxlarge = `var(${paddingContentXxlargeRaw})`; +export const paddingContentXxxlarge = `var(${paddingContentXxxlargeRaw})`; +export const paddingCtrlHorizontalDefault = `var(${paddingCtrlHorizontalDefaultRaw})`; +export const paddingCtrlHorizontalIcononly = `var(${paddingCtrlHorizontalIcononlyRaw})`; +export const paddingCtrlTexttop = `var(${paddingCtrlTexttopRaw})`; +export const paddingCtrlTextside = `var(${paddingCtrlTextsideRaw})`; +export const paddingCtrlTonestedcontrol = `var(${paddingCtrlTonestedcontrolRaw})`; +export const paddingCtrlSmHorizontalDefault = `var(${paddingCtrlSmHorizontalDefaultRaw})`; +export const paddingCtrlSmHorizontalIcononly = `var(${paddingCtrlSmHorizontalIcononlyRaw})`; +export const paddingCtrlSmTexttop = `var(${paddingCtrlSmTexttopRaw})`; +export const paddingCtrlSmTonestedcontrol = `var(${paddingCtrlSmTonestedcontrolRaw})`; +export const paddingCtrlLgHorizontalDefault = `var(${paddingCtrlLgHorizontalDefaultRaw})`; +export const paddingCtrlLgHorizontalIcononly = `var(${paddingCtrlLgHorizontalIcononlyRaw})`; +export const paddingCtrlLgTexttop = `var(${paddingCtrlLgTexttopRaw})`; +export const paddingCtrlLgTonestedcontrol = `var(${paddingCtrlLgTonestedcontrolRaw})`; +export const gapBetweenContentNone = `var(${gapBetweenContentNoneRaw})`; +export const gapBetweenContentXxsmall = `var(${gapBetweenContentXxsmallRaw})`; +export const gapBetweenContentXsmall = `var(${gapBetweenContentXsmallRaw})`; +export const gapBetweenContentSmall = `var(${gapBetweenContentSmallRaw})`; +export const gapBetweenCtrlDefault = `var(${gapBetweenCtrlDefaultRaw})`; +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})`; +export const gapBetweenCtrlSmDefault = `var(${gapBetweenCtrlSmDefaultRaw})`; +export const gapInsideCtrlDefault = `var(${gapInsideCtrlDefaultRaw})`; +export const gapInsideCtrlSmDefault = `var(${gapInsideCtrlSmDefaultRaw})`; +export const gapInsideCtrlSmTosecondaryicon = `var(${gapInsideCtrlSmTosecondaryiconRaw})`; +export const gapInsideCtrlLgDefault = `var(${gapInsideCtrlLgDefaultRaw})`; +export const gapInsideCtrlLgTosecondaryicon = `var(${gapInsideCtrlLgTosecondaryiconRaw})`; +export const gapInsideCtrlTosecondaryicon = `var(${gapInsideCtrlTosecondaryiconRaw})`; +export const gapInsideCtrlTolabel = `var(${gapInsideCtrlTolabelRaw})`; +export const gapInsideCtrlSmTolabel = `var(${gapInsideCtrlSmTolabelRaw})`; +export const gapInsideCtrlLgTolabel = `var(${gapInsideCtrlLgTolabelRaw})`; +export const cornerCircular = `var(${cornerCircularRaw})`; +export const strokewidthDefault = `var(${strokewidthDefaultRaw}, ${tokens.strokeWidthThin})`; +export const backgroundSmoke = `var(${backgroundSmokeRaw})`; +export const strokeCtrlOnoutlineRest = `var(${strokeCtrlOnoutlineRestRaw})`; +export const strokeCtrlOnoutlineHover = `var(${strokeCtrlOnoutlineHoverRaw})`; +export const strokeCtrlOnoutlinePressed = `var(${strokeCtrlOnoutlinePressedRaw})`; +export const strokeCtrlOnoutlineDisabled = `var(${strokeCtrlOnoutlineDisabledRaw})`; +export const strokeCtrlDividerOnbrand = `var(${strokeCtrlDividerOnbrandRaw})`; +export const strokeCtrlDividerOnneutral = `var(${strokeCtrlDividerOnneutralRaw})`; +export const strokeCtrlDividerOnoutline = `var(${strokeCtrlDividerOnoutlineRaw})`; +export const strokeDividerDefault = `var(${strokeDividerDefaultRaw})`; +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})`; +export const backgroundCtrlBrandRest = `var(${backgroundCtrlBrandRestRaw})`; +export const backgroundCtrlBrandHover = `var(${backgroundCtrlBrandHoverRaw})`; +export const backgroundCtrlBrandPressed = `var(${backgroundCtrlBrandPressedRaw})`; +export const backgroundCtrlBrandDisabled = `var(${backgroundCtrlBrandDisabledRaw})`; +export const backgroundCtrlNeutralRest = `var(${backgroundCtrlNeutralRestRaw})`; +export const backgroundCtrlNeutralHover = `var(${backgroundCtrlNeutralHoverRaw})`; +export const backgroundCtrlNeutralPressed = `var(${backgroundCtrlNeutralPressedRaw})`; +export const backgroundCtrlNeutralDisabled = `var(${backgroundCtrlNeutralDisabledRaw})`; +export const backgroundCtrlSubtleHover = `var(${backgroundCtrlSubtleHoverRaw})`; +export const backgroundCtrlSubtlePressed = `var(${backgroundCtrlSubtlePressedRaw})`; +export const backgroundFlyoutLumblend = `var(${backgroundFlyoutLumblendRaw})`; +export const backgroundFlyoutColorblend = `var(${backgroundFlyoutColorblendRaw})`; +export const cornerZero = `var(${cornerZeroRaw})`; +export const cornerBezel = `var(${cornerBezelRaw})`; +export const cornerWindowDefault = `var(${cornerWindowDefaultRaw})`; +export const cornerFlyoutRest = `var(${cornerFlyoutRestRaw})`; +export const cornerLayerDefault = `var(${cornerLayerDefaultRaw})`; +export const cornerCardRest = `var(${cornerCardRestRaw})`; +export const cornerCtrlRest = `var(${cornerCtrlRestRaw})`; +export const cornerCtrlSmRest = `var(${cornerCtrlSmRestRaw})`; +export const cornerCtrlLgRest = `var(${cornerCtrlLgRestRaw})`; +export const cornerImageIncard = `var(${cornerImageIncardRaw})`; +export const foregroundCtrlNeutralPrimaryRest = `var(${foregroundCtrlNeutralPrimaryRestRaw})`; +export const foregroundCtrlNeutralPrimaryDisabled = `var(${foregroundCtrlNeutralPrimaryDisabledRaw}, ${tokens.colorNeutralForegroundDisabled})`; +export const foregroundCtrlNeutralSecondaryRest = `var(${foregroundCtrlNeutralSecondaryRestRaw})`; +export const foregroundCtrlNeutralSecondaryDisabled = `var(${foregroundCtrlNeutralSecondaryDisabledRaw})`; +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})`; +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})`; +export const statusBrandTintStroke = `var(${statusBrandTintStrokeRaw})`; +export const statusDangerBackground = `var(${statusDangerBackgroundRaw})`; +export const statusDangerTintBackground = `var(${statusDangerTintBackgroundRaw})`; +export const statusDangerTintStroke = `var(${statusDangerTintStrokeRaw})`; +export const statusDangerTintForeground = `var(${statusDangerTintForegroundRaw})`; +export const statusWarningBackground = `var(${statusWarningBackgroundRaw})`; +export const statusWarningTintBackground = `var(${statusWarningTintBackgroundRaw})`; +export const statusWarningTintStroke = `var(${statusWarningTintStrokeRaw})`; +export const statusWarningTintForeground = `var(${statusWarningTintForegroundRaw})`; +export const statusSuccessBackground = `var(${statusSuccessBackgroundRaw})`; +export const statusSuccessTintBackground = `var(${statusSuccessTintBackgroundRaw})`; +export const statusSuccessTintStroke = `var(${statusSuccessTintStrokeRaw})`; +export const statusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw})`; +export const statusImportantBackground = `var(${statusImportantBackgroundRaw})`; +export const statusImportantTintBackground = `var(${statusImportantTintBackgroundRaw})`; +export const statusImportantTintStroke = `var(${statusImportantTintStrokeRaw})`; +export const statusImportantTintForeground = `var(${statusImportantTintForegroundRaw})`; +export const statusInformativeBackground = `var(${statusInformativeBackgroundRaw})`; +export const statusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw})`; +export const statusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw})`; +export const statusInformativeTintBackground = `var(${statusInformativeTintBackgroundRaw})`; +export const statusAwayForeground = `var(${statusAwayForegroundRaw})`; +export const statusOofForeground = `var(${statusOofForegroundRaw})`; +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})`; +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 shadowFlyoutKey = `var(${shadowFlyoutKeyRaw})`; +export const shadowFlyoutAmbient = `var(${shadowFlyoutAmbientRaw})`; +export const shadowToolbarKey = `var(${shadowToolbarKeyRaw})`; +export const shadowToolbarAmbient = `var(${shadowToolbarAmbientRaw})`; +export const shadowWindowActiveKey = `var(${shadowWindowActiveKeyRaw})`; +export const shadowWindowActiveAmbient = `var(${shadowWindowActiveAmbientRaw})`; +export const shadowWindowInactiveAmbient = `var(${shadowWindowInactiveAmbientRaw})`; diff --git a/packages/semantic-tokens/src/control/variables.ts b/packages/semantic-tokens/src/control/variables.ts new file mode 100644 index 0000000000000..798418fcdc610 --- /dev/null +++ b/packages/semantic-tokens/src/control/variables.ts @@ -0,0 +1,209 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const textGlobalDisplay1FontsizeRaw = '--smtc-text-global-display1-fontsize'; +export const textGlobalDisplay1LineheightRaw = '--smtc-text-global-display1-lineheight'; +export const textGlobalDisplay2FontsizeRaw = '--smtc-text-global-display2-fontsize'; +export const textGlobalDisplay2LineheightRaw = '--smtc-text-global-display2-lineheight'; +export const textGlobalTitle1FontsizeRaw = '--smtc-text-global-title1-fontsize'; +export const textGlobalTitle1LineheightRaw = '--smtc-text-global-title1-lineheight'; +export const textGlobalTitle2FontsizeRaw = '--smtc-text-global-title2-fontsize'; +export const textGlobalTitle2LineheightRaw = '--smtc-text-global-title2-lineheight'; +export const textGlobalSubtitle1FontsizeRaw = '--smtc-text-global-subtitle1-fontsize'; +export const textGlobalSubtitle1LineheightRaw = '--smtc-text-global-subtitle1-lineheight'; +export const textGlobalSubtitle2FontsizeRaw = '--smtc-text-global-subtitle2-fontsize'; +export const textGlobalSubtitle2LineheightRaw = '--smtc-text-global-subtitle2-lineheight'; +export const textGlobalBody1FontsizeRaw = '--smtc-text-global-body1-fontsize'; +export const textGlobalBody1LineheightRaw = '--smtc-text-global-body1-lineheight'; +export const textGlobalBody2FontsizeRaw = '--smtc-text-global-body2-fontsize'; +export const textGlobalBody2LineheightRaw = '--smtc-text-global-body2-lineheight'; +export const textGlobalBody3FontsizeRaw = '--smtc-text-global-body3-fontsize'; +export const textGlobalBody3LineheightRaw = '--smtc-text-global-body3-lineheight'; +export const textGlobalCaption1FontsizeRaw = '--smtc-text-global-caption1-fontsize'; +export const textGlobalCaption1LineheightRaw = '--smtc-text-global-caption1-lineheight'; +export const textGlobalCaption2FontsizeRaw = '--smtc-text-global-caption2-fontsize'; +export const textGlobalCaption2LineheightRaw = '--smtc-text-global-caption2-lineheight'; +export const textStyleDefaultRegularFontfamilyRaw = '--smtc-text-style-default-regular-fontfamily'; +export const textStyleDefaultRegularWeightRaw = '--smtc-text-style-default-regular-weight'; +export const textStyleDefaultRegularLetterspacingRaw = '--smtc-text-style-default-regular-letterspacing'; +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 sizeCtrlIconFigmaonlyRaw = '--smtc-size-ctrl-iconfigmaonly'; +export const sizeCtrlIconsecondaryRaw = '--smtc-size-ctrl-iconsecondary'; +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 sizeCtrlSmIconFigmaonlyRaw = '--smtc-size-ctrl-sm-iconfigmaonly'; +export const sizeCtrlLgIconFigmaonlyRaw = '--smtc-size-ctrl-lg-iconfigmaonly'; +export const paddingContentAlignDefaultRaw = '--smtc-padding-content-align-default'; +export const paddingContentAlignOutdentIcononsubtleRaw = '--smtc-padding-content-align-outdent-icononsubtle'; +export const paddingContentAlignOutdentTextonsubtleRaw = '--smtc-padding-content-align-outdent-textonsubtle'; +export const paddingContentNoneRaw = '--smtc-padding-content-none'; +export const paddingContentXxsmallRaw = '--smtc-padding-content-xxsmall'; +export const paddingContentXsmallRaw = '--smtc-padding-content-xsmall'; +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-xlarge'; +export const paddingContentXxlargeRaw = '--smtc-padding-content-xxlarge'; +export const paddingContentXxxlargeRaw = '--smtc-padding-content-xxxlarge'; +export const paddingCtrlHorizontalDefaultRaw = '--smtc-padding-ctrl-horizontal-default'; +export const paddingCtrlHorizontalIcononlyRaw = '--smtc-padding-ctrl-horizontal-icononly'; +export const paddingCtrlTexttopRaw = '--smtc-padding-ctrl-texttop'; +export const paddingCtrlTextsideRaw = '--smtc-padding-ctrl-textside'; +export const paddingCtrlTonestedcontrolRaw = '--smtc-padding-ctrl-tonestedcontrol'; +export const paddingCtrlSmHorizontalDefaultRaw = '--smtc-padding-ctrl-sm-horizontal-default'; +export const paddingCtrlSmHorizontalIcononlyRaw = '--smtc-padding-ctrl-sm-horizontal-icononly'; +export const paddingCtrlSmTexttopRaw = '--smtc-padding-ctrl-sm-texttop'; +export const paddingCtrlSmTonestedcontrolRaw = '--smtc-padding-ctrl-sm-tonestedcontrol'; +export const paddingCtrlLgHorizontalDefaultRaw = '--smtc-padding-ctrl-lg-horizontal-default'; +export const paddingCtrlLgHorizontalIcononlyRaw = '--smtc-padding-ctrl-lg-horizontal-icononly'; +export const paddingCtrlLgTexttopRaw = '--smtc-padding-ctrl-lg-texttop'; +export const paddingCtrlLgTonestedcontrolRaw = '--smtc-padding-ctrl-lg-tonestedcontrol'; +export const gapBetweenContentNoneRaw = '--smtc-gap-between-content-none'; +export const gapBetweenContentXxsmallRaw = '--smtc-gap-between-content-xxsmall'; +export const gapBetweenContentXsmallRaw = '--smtc-gap-between-content-xsmall'; +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-xlarge'; +export const gapBetweenContentXxlargeRaw = '--smtc-gap-between-content-xxlarge'; +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-tosecondaryicon'; +export const gapInsideCtrlLgDefaultRaw = '--smtc-gap-inside-ctrl-lg-default'; +export const gapInsideCtrlLgTosecondaryiconRaw = '--smtc-gap-inside-ctrl-lg-tosecondaryicon'; +export const gapInsideCtrlTosecondaryiconRaw = '--smtc-gap-inside-ctrl-tosecondaryicon'; +export const gapInsideCtrlTolabelRaw = '--smtc-gap-inside-ctrl-tolabel'; +export const gapInsideCtrlSmTolabelRaw = '--smtc-gap-inside-ctrl-sm-tolabel'; +export const gapInsideCtrlLgTolabelRaw = '--smtc-gap-inside-ctrl-lg-tolabel'; +export const cornerCircularRaw = '--smtc-corner-circular'; +export const strokewidthDefaultRaw = '--smtc-strokewidth-default'; +export const backgroundSmokeRaw = '--smtc-background-smoke'; +export const strokeCtrlOnoutlineRestRaw = '--smtc-stroke-ctrl-onoutline-rest'; +export const strokeCtrlOnoutlineHoverRaw = '--smtc-stroke-ctrl-onoutline-hover'; +export const strokeCtrlOnoutlinePressedRaw = '--smtc-stroke-ctrl-onoutline-pressed'; +export const strokeCtrlOnoutlineDisabledRaw = '--smtc-stroke-ctrl-onoutline-disabled'; +export const strokeCtrlDividerOnbrandRaw = '--smtc-stroke-ctrl-divider-onbrand'; +export const strokeCtrlDividerOnneutralRaw = '--smtc-stroke-ctrl-divider-onneutral'; +export const strokeCtrlDividerOnoutlineRaw = '--smtc-stroke-ctrl-divider-onoutline'; +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-colorblend'; +export const backgroundWindowPrimaryLumblendRaw = '--smtc-background-window-primary-lumblend'; +export const backgroundWindowSecondarySolidRaw = '--smtc-background-window-secondary-solid'; +export const backgroundWindowSecondaryColorblendRaw = '--smtc-background-window-secondary-colorblend'; +export const backgroundWindowSecondaryLumblendRaw = '--smtc-background-window-secondary-lumblend'; +export const backgroundWindowTabbandColorblendRaw = '--smtc-background-window-tabband-colorblend'; +export const backgroundWindowTabbandLumblendRaw = '--smtc-background-window-tabband-lumblend'; +export const backgroundWindowTabbandSolidRaw = '--smtc-background-window-tabband-solid'; +export const backgroundWebpagePrimaryRaw = '--smtc-background-webpage-primary'; +export const backgroundWebpageSecondaryRaw = '--smtc-background-webpage-secondary'; +export const backgroundLayerPrimarySolidRaw = '--smtc-background-layer-primarysolid'; +export const backgroundCardOnprimaryDefaultRestRaw = '--smtc-background-card-onprimary-default-rest'; +export const backgroundCardOnprimaryAltRestRaw = '--smtc-background-card-onprimary-alt-rest'; +export const backgroundCardOnprimaryAltHoverRaw = '--smtc-background-card-onprimary-alt-hover'; +export const backgroundCardOnprimaryAltPressedRaw = '--smtc-background-card-onprimary-alt-pressed'; +export const backgroundCardOnprimaryAltDisabledRaw = '--smtc-background-card-onprimary-alt-disabled'; +export const backgroundCardOnprimaryDefaultHoverRaw = '--smtc-background-card-onprimary-default-hover'; +export const backgroundCardOnprimaryDefaultPressedRaw = '--smtc-background-card-onprimary-default-pressed'; +export const backgroundCardOnprimaryDefaultDisabledRaw = '--smtc-background-card-onprimary-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-lumblend'; +export const backgroundFlyoutColorblendRaw = '--smtc-background-flyout-colorblend'; +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-incard'; +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-onbrand-rest'; +export const foregroundCtrlOnbrandDisabledRaw = '--smtc-foreground-ctrl-onbrand-disabled'; +export const materialAcrylicBlurRaw = '--smtc-material-acrylic-blur'; +export const materialMicaBlurRaw = '--smtc-material-mica-blur'; +export const iconthemeCtrlDefaultRestRaw = '--smtc-icontheme-ctrl-default-rest'; +export const iconthemeCtrlDefaultSelectedRaw = '--smtc-icontheme-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-onsecondary-default-rest'; +export const backgroundCardOnsecondaryAltRestRaw = '--smtc-background-card-onsecondary-alt-rest'; +export const backgroundCardOnsecondaryAltHoverRaw = '--smtc-background-card-onsecondary-alt-hover'; +export const backgroundCardOnsecondaryAltPressedRaw = '--smtc-background-card-onsecondary-alt-pressed'; +export const backgroundCardOnsecondaryAltDisabledRaw = '--smtc-background-card-onsecondary-alt-disabled'; +export const backgroundCardOnsecondaryDefaultHoverRaw = '--smtc-background-card-onsecondary-default-hover'; +export const backgroundCardOnsecondaryDefaultPressedRaw = '--smtc-background-card-onsecondary-default-pressed'; +export const backgroundCardOnsecondaryDefaultDisabledRaw = '--smtc-background-card-onsecondary-default-disabled'; +export const backgroundCardOnflyoutDefaultRestRaw = '--smtc-background-card-onflyout-default-rest'; +export const backgroundCardOnflyoutDefaultHoverRaw = '--smtc-background-card-onflyout-default-hover'; +export const backgroundCardOnflyoutDefaultPressedRaw = '--smtc-background-card-onflyout-default-pressed'; +export const backgroundCardOnflyoutDefaultDisabledRaw = '--smtc-background-card-onflyout-default-disabled'; +export const shadowFlyoutKeyRaw = '--smtc-shadow-flyout-key'; +export const shadowFlyoutAmbientRaw = '--smtc-shadow-flyout-ambient'; +export const shadowToolbarKeyRaw = '--smtc-shadow-toolbar-key'; +export const shadowToolbarAmbientRaw = '--smtc-shadow-toolbar-ambient'; +export const shadowWindowActiveKeyRaw = '--smtc-shadow-window-active-key'; +export const shadowWindowActiveAmbientRaw = '--smtc-shadow-window-active-ambient'; +export const shadowWindowInactiveAmbientRaw = '--smtc-shadow-window-inactive-ambient'; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index cb0ff5c3b541f..143489db536a8 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1 +1,1817 @@ -export {}; +// 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, + gapTextSmallRaw, + gapTextLargeRaw, + gapBetweenCtrlLgNestedRaw, + gapBetweenCtrlSmNestedRaw, + gapListRaw, + gapCardRaw, + strokewidthDividerDefaultRaw, + strokewidthDividerStrongRaw, + strokewidthCtrlOutlineRestRaw, + strokewidthCtrlOutlineHoverRaw, + strokewidthCtrlOutlinePressedRaw, + strokewidthCtrlOutlineSelectedRaw, + strokewidthWindowDefaultRaw, + backgroundToolbarRaw, + strokeToolbarRaw, + strokeCtrlOnbrandRestStop2Raw, + strokeCtrlOnbrandHoverStop2Raw, + strokeCtrlOnbrandPressedStop2Raw, + strokeCtrlOnbrandDisabledStop2Raw, + strokeCtrlOnneutralRestStop2Raw, + strokeCtrlOnneutralHoverStop2Raw, + strokeCtrlOnneutralPressedStop2Raw, + strokeCtrlOnneutralDisabledStop2Raw, + strokeCtrlOnoutlineRestStop2Raw, + strokeCtrlOnoutlineHoverStop2Raw, + strokeCtrlOnoutlinePressedStop2Raw, + strokeCtrlOnoutlineDisabledStop2Raw, + strokeCtrlOnactivebrandRestRaw, + strokeCtrlDividerOnbrandDisabledRaw, + strokeCtrlDividerOnneutralDisabledRaw, + strokeCtrlDividerOnoutlineDisabledRaw, + strokeCtrlDividerOnactivebrandRaw, + strokeCtrlDividerOnactivebrandDisabledRaw, + 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, + shadowCtrlOndragKeyRaw, + shadowCtrlOndragAmbientRaw, + shadowWindowInactiveKeyRaw, +} 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, + sizeCtrlIconFigmaonlyRaw, + sizeCtrlIconsecondaryRaw, + textCtrlWeightSelectedRaw, + sizeCtrlSmDefaultRaw, + sizeCtrlSmIconRaw, + sizeCtrlLgDefaultRaw, + sizeCtrlLgIconRaw, + sizeCtrlSmIconFigmaonlyRaw, + sizeCtrlLgIconFigmaonlyRaw, + paddingContentAlignDefaultRaw, + paddingContentAlignOutdentIcononsubtleRaw, + paddingContentAlignOutdentTextonsubtleRaw, + paddingContentNoneRaw, + 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, + shadowFlyoutKeyRaw, + shadowFlyoutAmbientRaw, + shadowToolbarKeyRaw, + shadowToolbarAmbientRaw, + shadowWindowActiveKeyRaw, + shadowWindowActiveAmbientRaw, + shadowWindowInactiveAmbientRaw, +} 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, + shadowCardRestKeyRaw, + shadowCardHoverKeyRaw, + shadowCardPressedKeyRaw, + shadowCardDisabledKeyRaw, + shadowCardRestAmbientRaw, + shadowLayerKeyRaw, + shadowLayerAmbientRaw, +} 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, + ctrlBadgeIconSizeFigmaonlyRaw, + ctrlBadgeGapRaw, + ctrlBadgeIconSizeRaw, + ctrlBadgePaddingRaw, + ctrlBadgeSmSizeRaw, + ctrlBadgeSmCornerRaw, + ctrlBadgeSmIconSizeFigmaonlyRaw, + ctrlBadgeSmIconSizeRaw, + ctrlBadgeSmPaddingRaw, + ctrlBadgeLgSizeRaw, + ctrlBadgeLgIconSizeFigmaonlyRaw, + ctrlBadgeLgIconSizeRaw, + ctrlBadgeLgCornerRaw, + ctrlBadgeLgPaddingRaw, +} from './components/badge/variables'; +export { + ctrlChoicePaddingHorizontalRaw, + ctrlChoicePaddingVerticalRaw, + ctrlChoiceBaseSizeRaw, + ctrlChoiceIconThemeRaw, + ctrlChoiceBaseBackgroundRestRaw, + ctrlChoiceBaseBackgroundHoverRaw, + ctrlChoiceBaseBackgroundPressedRaw, + ctrlChoiceBaseBackgroundDisabledRaw, + ctrlChoiceBaseStrokeRestRaw, + ctrlChoiceBaseStrokeHoverRaw, + ctrlChoiceBaseStrokePressedRaw, + ctrlChoiceBaseStrokeDisabledRaw, + ctrlChoiceCheckboxIconSizeRaw, + ctrlChoiceCheckboxCornerRaw, + ctrlChoiceCheckboxIndeterminateCornerRaw, + ctrlChoiceCheckboxIndeterminateHeightRaw, + ctrlChoiceCheckboxIndeterminateWidthRaw, + ctrlChoiceRadioCornerRaw, + ctrlChoiceSwitchCornerRaw, + ctrlChoiceRadioDotSizeRestRaw, + ctrlChoiceRadioDotSizeHoverRaw, + ctrlChoiceRadioDotSizePressedRaw, + ctrlChoiceSwitchPaddingRestRaw, + ctrlChoiceSwitchPaddingHoverRaw, + ctrlChoiceSwitchPaddingPressedRaw, + ctrlChoiceSwitchHeightRaw, + ctrlChoiceSwitchWidthRaw, + ctrlChoiceSwitchThumbWidthRestRaw, + ctrlChoiceSwitchThumbWidthHoverRaw, + ctrlChoiceSwitchThumbWidthPressedRaw, + ctrlChoiceSmBaseSizeRaw, + ctrlChoiceSmCheckboxCornerRaw, + ctrlChoiceSmCheckboxIconSizeRaw, + ctrlChoiceSmCheckboxIconSizeFigmaonlyRaw, + ctrlChoiceSmRadioDotSizeRaw, + ctrlChoiceSmSwitchWidthRaw, + ctrlChoiceSmSwitchHeightRaw, + ctrlChoiceSmSwitchThumbWidthRestRaw, + ctrlChoiceSmSwitchThumbWidthHoverRaw, + ctrlChoiceSmSwitchThumbWidthPressedRaw, + ctrlChoiceLgBaseSizeRaw, + ctrlChoiceLgCheckboxCornerRaw, + ctrlChoiceLgCheckboxIconSizeRaw, + ctrlChoiceLgCheckboxIconSizeFigmaonlyRaw, + ctrlChoiceLgRadioDotSizeRestRaw, + ctrlChoiceLgRadioDotSizeHoverRaw, + ctrlChoiceLgRadioDotSizePressedRaw, + ctrlChoiceLgSwitchWidthRaw, + ctrlChoiceLgSwitchHeightRaw, + ctrlChoiceLgSwitchThumbWidthRestRaw, + ctrlChoiceLgSwitchThumbWidthHoverRaw, + ctrlChoiceLgSwitchThumbWidthPressedRaw, + ctrlChoiceSwitchThumbShadowKeyRaw, + ctrlChoiceSwitchThumbShadowAmbientRaw, +} from './components/choice/variables'; +export { + ctrlDialogBackgroundRaw, + ctrlDialogStrokeRaw, + ctrlDialogBaseCornerRaw, + ctrlDialogLayerBackgroundRaw, + ctrlDialogLayerPaddingBottomRaw, + ctrlDialogBaseShadowKeyRaw, + ctrlDialogBaseShadowAmbientRaw, +} from './components/dialog/variables'; +export { ctrlDividerFixedlineLengthRaw } from './components/divider/variables'; +export { + ctrlDragBackgroundSolidRaw, + ctrlDragBackgroundColorblendRaw, + ctrlDragBackgroundLumblendRaw, +} from './components/drag/variables'; +export { + ctrlFabBackgroundRestRaw, + ctrlFabBackgroundHoverRaw, + ctrlFabBackgroundPressedRaw, + ctrlFabBackgroundDisabledRaw, + ctrlFabCornerRestRaw, + ctrlFabCornerHoverRaw, + ctrlFabCornerPressedRaw, + ctrlFabShadowRestKeyRaw, + ctrlFabShadowRestAmbientRaw, + ctrlFabShadowHoverKeyRaw, + ctrlFabShadowPressedKeyRaw, + ctrlFabShadowDisabledKeyRaw, +} from './components/fab/variables'; +export { + ctrlFocusPositionFigmaonlyRaw, + ctrlFocusInnerStrokewidthRaw, + ctrlFocusInnerStrokeRaw, + ctrlFocusOuterStrokewidthRaw, + ctrlFocusOuterStrokeRaw, +} from './components/focus/variables'; +export { + ctrlInputBackgroundRestRaw, + ctrlInputBackgroundHoverRaw, + ctrlInputBackgroundPressedRaw, + ctrlInputBackgroundDisabledRaw, + ctrlInputBackgroundSelectedRaw, + ctrlInputBackgroundErrorRaw, + ctrlInputStrokeRestRaw, + ctrlInputBottomlineStrokewidthRestRaw, + ctrlInputStrokewidthRestRaw, + ctrlInputTextselectionBackgroundRaw, + ctrlInputTextselectionForegroundRaw, + ctrlInputStrokewidthHoverRaw, + ctrlInputStrokewidthPressedRaw, + ctrlInputStrokewidthSelectedRaw, + ctrlInputBottomlineStrokewidthHoverRaw, + ctrlInputBottomlineStrokewidthPressedRaw, + ctrlInputBottomlineStrokewidthSelectedRaw, + ctrlInputBottomlineStrokeRestRaw, + ctrlInputBottomlineStrokeHoverRaw, + ctrlInputBottomlineStrokePressedRaw, + ctrlInputBottomlineStrokeDisabledRaw, + ctrlInputBottomlineStrokeSelectedRaw, + ctrlInputBottomlineStrokeErrorRaw, + ctrlInputStrokeHoverRaw, + ctrlInputStrokePressedRaw, + ctrlInputStrokeDisabledRaw, + ctrlInputStrokeSelectedRaw, + ctrlInputStrokeErrorRaw, +} from './components/input/variables'; +export { + ctrlLinkForegroundNeutralRestRaw, + ctrlLinkInlineStrokewidthRestRaw, + ctrlLinkInlineStrokewidthHoverRaw, + ctrlLinkInlineUnderlineDashedRaw, + ctrlLinkInlineUnderlineSolidFigmaonlyRaw, + ctrlLinkForegroundNeutralHoverRaw, + ctrlLinkForegroundNeutralPressedRaw, + ctrlLinkForegroundBrandRestRaw, + ctrlLinkForegroundBrandHoverRaw, + ctrlLinkForegroundBrandPressedRaw, + ctrlLinkOnpageStrokewidthRestRaw, + ctrlLinkOnpageStrokewidthHoverRaw, + ctrlLinkOnpageUnderlineDashedRaw, + ctrlLinkOnpageUnderlineSolidFigmaonlyRaw, + ctrlLinkInlineShowunderlineatrestRaw, + ctrlLinkOnpageShowunderlineatrestRaw, +} from './components/link/variables'; +export { + ctrlListPillWidthRaw, + ctrlListPillFullwidthRaw, + ctrlListPillStretchPaddingDefaultRaw, + ctrlListPillStretchPaddingHintRaw, + ctrlListPillLengthRestRaw, + ctrlListPillLengthHoverRaw, + ctrlListPillLengthPressedRaw, + ctrlListPillLengthHintRaw, + ctrlListCornerRestRaw, + ctrlListCornerHoverRaw, + ctrlListCornerPressedRaw, + ctrlListIndentLevel1Raw, + ctrlListIndentLevel2Raw, + ctrlListIndentLevel3Raw, + ctrlListBackgroundSelectedRestRaw, + ctrlListBackgroundSelectedHoverRaw, + ctrlListBackgroundSelectedPressedRaw, + ctrlListBackgroundSelectedDisabledRaw, + ctrlListChoiceBackgroundRestRaw, + ctrlListChoiceStrokeRestRaw, + ctrlListChoiceStrokeDisabledRaw, + ctrlListChoiceStrokeSelectedRestRaw, + ctrlListChoiceStrokeSelectedDisabledRaw, + ctrlListChoiceForegroundHoverRaw, + ctrlListChoiceForegroundSelectedRestRaw, + ctrlListChoiceForegroundSelectedDisabledRaw, + ctrlListChoiceBackgroundDisabledRaw, + ctrlListChoiceBackgroundSelectedRestRaw, + ctrlListChoiceBackgroundSelectedDisabledRaw, + ctrlListChoiceCheckboxCornerRaw, + ctrlListChoiceCheckboxIconSizeRaw, + ctrlListChoiceCheckboxIconSizeFigmaonlyRaw, + ctrlListChoiceDotSizeRaw, + ctrlListChoiceDotSizeFigmaonlyRaw, + ctrlListSplitDividerPaddingInsetRaw, + ctrlListSplitDividerStrokeRaw, + ctrlListSmCornerRestRaw, + ctrlListSmCornerHoverRaw, + ctrlListSmCornerPressedRaw, + ctrlListSmIndentLevel1Raw, + ctrlListSmIndentLevel2Raw, + ctrlListSmIndentLevel3Raw, + ctrlListLgCornerRestRaw, + ctrlListLgCornerHoverRaw, + ctrlListLgCornerPressedRaw, + ctrlListLgIndentLevel1Raw, + ctrlListLgIndentLevel2Raw, + ctrlListLgIndentLevel3Raw, + ctrlListSplitDividerShowdividerRaw, + ctrlListShadowSelectedKeyRaw, + ctrlListShadowSelectedAmbientRaw, +} 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, + ctrlTooltipShadowKeyRaw, + ctrlTooltipShadowAmbientRaw, +} 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, + ctrlComposerContainerShadowKeyRaw, + ctrlComposerContainerShadowAmbientRaw, +} 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, + gapTextSmall, + gapTextLarge, + gapBetweenCtrlLgNested, + gapBetweenCtrlSmNested, + gapList, + gapCard, + strokewidthDividerDefault, + strokewidthDividerStrong, + strokewidthCtrlOutlineRest, + strokewidthCtrlOutlineHover, + strokewidthCtrlOutlinePressed, + strokewidthCtrlOutlineSelected, + strokewidthWindowDefault, + backgroundToolbar, + strokeToolbar, + strokeCtrlOnbrandRestStop2, + strokeCtrlOnbrandHoverStop2, + strokeCtrlOnbrandPressedStop2, + strokeCtrlOnbrandDisabledStop2, + strokeCtrlOnneutralRestStop2, + strokeCtrlOnneutralHoverStop2, + strokeCtrlOnneutralPressedStop2, + strokeCtrlOnneutralDisabledStop2, + strokeCtrlOnoutlineRestStop2, + strokeCtrlOnoutlineHoverStop2, + strokeCtrlOnoutlinePressedStop2, + strokeCtrlOnoutlineDisabledStop2, + strokeCtrlOnactivebrandRest, + strokeCtrlDividerOnbrandDisabled, + strokeCtrlDividerOnneutralDisabled, + strokeCtrlDividerOnoutlineDisabled, + strokeCtrlDividerOnactivebrand, + strokeCtrlDividerOnactivebrandDisabled, + 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, + shadowCtrlOndragKey, + shadowCtrlOndragAmbient, + shadowWindowInactiveKey, +} 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, + sizeCtrlIconFigmaonly, + sizeCtrlIconsecondary, + textCtrlWeightSelected, + sizeCtrlSmDefault, + sizeCtrlSmIcon, + sizeCtrlLgDefault, + sizeCtrlLgIcon, + sizeCtrlSmIconFigmaonly, + sizeCtrlLgIconFigmaonly, + paddingContentAlignDefault, + paddingContentAlignOutdentIcononsubtle, + paddingContentAlignOutdentTextonsubtle, + paddingContentNone, + 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, + shadowFlyoutKey, + shadowFlyoutAmbient, + shadowToolbarKey, + shadowToolbarAmbient, + shadowWindowActiveKey, + shadowWindowActiveAmbient, + shadowWindowInactiveAmbient, +} 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, + shadowCardRestKey, + shadowCardHoverKey, + shadowCardPressedKey, + shadowCardDisabledKey, + shadowCardRestAmbient, + shadowLayerKey, + shadowLayerAmbient, +} 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, + ctrlBadgeIconSizeFigmaonly, + ctrlBadgeGap, + ctrlBadgeIconSize, + ctrlBadgePadding, + ctrlBadgeSmSize, + ctrlBadgeSmCorner, + ctrlBadgeSmIconSizeFigmaonly, + ctrlBadgeSmIconSize, + ctrlBadgeSmPadding, + ctrlBadgeLgSize, + ctrlBadgeLgIconSizeFigmaonly, + ctrlBadgeLgIconSize, + ctrlBadgeLgCorner, + ctrlBadgeLgPadding, +} from './components/badge/tokens'; +export { + ctrlChoicePaddingHorizontal, + ctrlChoicePaddingVertical, + ctrlChoiceBaseSize, + ctrlChoiceIconTheme, + ctrlChoiceBaseBackgroundRest, + ctrlChoiceBaseBackgroundHover, + ctrlChoiceBaseBackgroundPressed, + ctrlChoiceBaseBackgroundDisabled, + ctrlChoiceBaseStrokeRest, + ctrlChoiceBaseStrokeHover, + ctrlChoiceBaseStrokePressed, + ctrlChoiceBaseStrokeDisabled, + ctrlChoiceCheckboxIconSize, + ctrlChoiceCheckboxCorner, + ctrlChoiceCheckboxIndeterminateCorner, + ctrlChoiceCheckboxIndeterminateHeight, + ctrlChoiceCheckboxIndeterminateWidth, + ctrlChoiceRadioCorner, + ctrlChoiceSwitchCorner, + ctrlChoiceRadioDotSizeRest, + ctrlChoiceRadioDotSizeHover, + ctrlChoiceRadioDotSizePressed, + ctrlChoiceSwitchPaddingRest, + ctrlChoiceSwitchPaddingHover, + ctrlChoiceSwitchPaddingPressed, + ctrlChoiceSwitchHeight, + ctrlChoiceSwitchWidth, + ctrlChoiceSwitchThumbWidthRest, + ctrlChoiceSwitchThumbWidthHover, + ctrlChoiceSwitchThumbWidthPressed, + ctrlChoiceSmBaseSize, + ctrlChoiceSmCheckboxCorner, + ctrlChoiceSmCheckboxIconSize, + ctrlChoiceSmCheckboxIconSizeFigmaonly, + ctrlChoiceSmRadioDotSize, + ctrlChoiceSmSwitchWidth, + ctrlChoiceSmSwitchHeight, + ctrlChoiceSmSwitchThumbWidthRest, + ctrlChoiceSmSwitchThumbWidthHover, + ctrlChoiceSmSwitchThumbWidthPressed, + ctrlChoiceLgBaseSize, + ctrlChoiceLgCheckboxCorner, + ctrlChoiceLgCheckboxIconSize, + ctrlChoiceLgCheckboxIconSizeFigmaonly, + ctrlChoiceLgRadioDotSizeRest, + ctrlChoiceLgRadioDotSizeHover, + ctrlChoiceLgRadioDotSizePressed, + ctrlChoiceLgSwitchWidth, + ctrlChoiceLgSwitchHeight, + ctrlChoiceLgSwitchThumbWidthRest, + ctrlChoiceLgSwitchThumbWidthHover, + ctrlChoiceLgSwitchThumbWidthPressed, + ctrlChoiceSwitchThumbShadowKey, + ctrlChoiceSwitchThumbShadowAmbient, +} from './components/choice/tokens'; +export { + ctrlDialogBackground, + ctrlDialogStroke, + ctrlDialogBaseCorner, + ctrlDialogLayerBackground, + ctrlDialogLayerPaddingBottom, + ctrlDialogBaseShadowKey, + ctrlDialogBaseShadowAmbient, +} from './components/dialog/tokens'; +export { ctrlDividerFixedlineLength } from './components/divider/tokens'; +export { + ctrlDragBackgroundSolid, + ctrlDragBackgroundColorblend, + ctrlDragBackgroundLumblend, +} from './components/drag/tokens'; +export { + ctrlFabBackgroundRest, + ctrlFabBackgroundHover, + ctrlFabBackgroundPressed, + ctrlFabBackgroundDisabled, + ctrlFabCornerRest, + ctrlFabCornerHover, + ctrlFabCornerPressed, + ctrlFabShadowRestKey, + ctrlFabShadowRestAmbient, + ctrlFabShadowHoverKey, + ctrlFabShadowPressedKey, + ctrlFabShadowDisabledKey, +} from './components/fab/tokens'; +export { + ctrlFocusPositionFigmaonly, + ctrlFocusInnerStrokewidth, + ctrlFocusInnerStroke, + ctrlFocusOuterStrokewidth, + ctrlFocusOuterStroke, +} from './components/focus/tokens'; +export { + ctrlInputBackgroundRest, + ctrlInputBackgroundHover, + ctrlInputBackgroundPressed, + ctrlInputBackgroundDisabled, + ctrlInputBackgroundSelected, + ctrlInputBackgroundError, + ctrlInputStrokeRest, + ctrlInputBottomlineStrokewidthRest, + ctrlInputStrokewidthRest, + ctrlInputTextselectionBackground, + ctrlInputTextselectionForeground, + ctrlInputStrokewidthHover, + ctrlInputStrokewidthPressed, + ctrlInputStrokewidthSelected, + ctrlInputBottomlineStrokewidthHover, + ctrlInputBottomlineStrokewidthPressed, + ctrlInputBottomlineStrokewidthSelected, + ctrlInputBottomlineStrokeRest, + ctrlInputBottomlineStrokeHover, + ctrlInputBottomlineStrokePressed, + ctrlInputBottomlineStrokeDisabled, + ctrlInputBottomlineStrokeSelected, + ctrlInputBottomlineStrokeError, + ctrlInputStrokeHover, + ctrlInputStrokePressed, + ctrlInputStrokeDisabled, + ctrlInputStrokeSelected, + ctrlInputStrokeError, +} from './components/input/tokens'; +export { + ctrlLinkForegroundNeutralRest, + ctrlLinkInlineStrokewidthRest, + ctrlLinkInlineStrokewidthHover, + ctrlLinkInlineUnderlineDashed, + ctrlLinkInlineUnderlineSolidFigmaonly, + ctrlLinkForegroundNeutralHover, + ctrlLinkForegroundNeutralPressed, + ctrlLinkForegroundBrandRest, + ctrlLinkForegroundBrandHover, + ctrlLinkForegroundBrandPressed, + ctrlLinkOnpageStrokewidthRest, + ctrlLinkOnpageStrokewidthHover, + ctrlLinkOnpageUnderlineDashed, + ctrlLinkOnpageUnderlineSolidFigmaonly, + ctrlLinkInlineShowunderlineatrest, + ctrlLinkOnpageShowunderlineatrest, +} from './components/link/tokens'; +export { + ctrlListPillWidth, + ctrlListPillFullwidth, + ctrlListPillStretchPaddingDefault, + ctrlListPillStretchPaddingHint, + ctrlListPillLengthRest, + ctrlListPillLengthHover, + ctrlListPillLengthPressed, + ctrlListPillLengthHint, + ctrlListCornerRest, + ctrlListCornerHover, + ctrlListCornerPressed, + ctrlListIndentLevel1, + ctrlListIndentLevel2, + ctrlListIndentLevel3, + ctrlListBackgroundSelectedRest, + ctrlListBackgroundSelectedHover, + ctrlListBackgroundSelectedPressed, + ctrlListBackgroundSelectedDisabled, + ctrlListChoiceBackgroundRest, + ctrlListChoiceStrokeRest, + ctrlListChoiceStrokeDisabled, + ctrlListChoiceStrokeSelectedRest, + ctrlListChoiceStrokeSelectedDisabled, + ctrlListChoiceForegroundHover, + ctrlListChoiceForegroundSelectedRest, + ctrlListChoiceForegroundSelectedDisabled, + ctrlListChoiceBackgroundDisabled, + ctrlListChoiceBackgroundSelectedRest, + ctrlListChoiceBackgroundSelectedDisabled, + ctrlListChoiceCheckboxCorner, + ctrlListChoiceCheckboxIconSize, + ctrlListChoiceCheckboxIconSizeFigmaonly, + ctrlListChoiceDotSize, + ctrlListChoiceDotSizeFigmaonly, + ctrlListSplitDividerPaddingInset, + ctrlListSplitDividerStroke, + ctrlListSmCornerRest, + ctrlListSmCornerHover, + ctrlListSmCornerPressed, + ctrlListSmIndentLevel1, + ctrlListSmIndentLevel2, + ctrlListSmIndentLevel3, + ctrlListLgCornerRest, + ctrlListLgCornerHover, + ctrlListLgCornerPressed, + ctrlListLgIndentLevel1, + ctrlListLgIndentLevel2, + ctrlListLgIndentLevel3, + ctrlListSplitDividerShowdivider, + ctrlListShadowSelectedKey, + ctrlListShadowSelectedAmbient, +} 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, + ctrlTooltipShadowKey, + ctrlTooltipShadowAmbient, +} 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, + ctrlComposerContainerShadowKey, + ctrlComposerContainerShadowAmbient, +} from './components/composer/tokens'; +export { + ctrlCardStateRest, + ctrlCardStateHover, + ctrlCardStatePressed, + ctrlCardStateDisabled, +} from './components/card/tokens'; diff --git a/packages/semantic-tokens/src/nullable/tokens.ts b/packages/semantic-tokens/src/nullable/tokens.ts new file mode 100644 index 0000000000000..b7846c3dfe163 --- /dev/null +++ b/packages/semantic-tokens/src/nullable/tokens.ts @@ -0,0 +1,100 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +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, + shadowCardRestKeyRaw, + shadowCardHoverKeyRaw, + shadowCardPressedKeyRaw, + shadowCardDisabledKeyRaw, + shadowCardRestAmbientRaw, + shadowLayerKeyRaw, + shadowLayerAmbientRaw, +} 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}, unset)`; +export const strokeImage = `var(${strokeImageRaw}, unset)`; +export const strokeFlyout = `var(${strokeFlyoutRaw}, unset)`; +export const strokeCtrlOnbrandRest = `var(${strokeCtrlOnbrandRestRaw}, unset)`; +export const strokeCtrlOnbrandHover = `var(${strokeCtrlOnbrandHoverRaw}, unset)`; +export const strokeCtrlOnbrandPressed = `var(${strokeCtrlOnbrandPressedRaw}, unset)`; +export const strokeCtrlOnbrandDisabled = `var(${strokeCtrlOnbrandDisabledRaw}, unset)`; +export const strokeCtrlOnneutralRest = `var(${strokeCtrlOnneutralRestRaw}, unset)`; +export const strokeCtrlOnneutralHover = `var(${strokeCtrlOnneutralHoverRaw}, unset)`; +export const strokeCtrlOnneutralPressed = `var(${strokeCtrlOnneutralPressedRaw}, unset)`; +export const strokeCtrlOnneutralDisabled = `var(${strokeCtrlOnneutralDisabledRaw}, unset)`; +export const strokeCtrlOnsubtleRest = `var(${strokeCtrlOnsubtleRestRaw}, unset)`; +export const strokeCtrlOnsubtleHover = `var(${strokeCtrlOnsubtleHoverRaw}, unset)`; +export const strokeCtrlOnsubtlePressed = `var(${strokeCtrlOnsubtlePressedRaw}, unset)`; +export const strokeCtrlOnsubtleDisabled = `var(${strokeCtrlOnsubtleDisabledRaw}, unset)`; +export const strokeCtrlOnsubtleHoversplit = `var(${strokeCtrlOnsubtleHoversplitRaw}, unset)`; +export const strokeCtrlDividerOnsubtle = `var(${strokeCtrlDividerOnsubtleRaw}, unset)`; +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}, unset)`; +export const backgroundCtrlOutlineHover = `var(${backgroundCtrlOutlineHoverRaw}, unset)`; +export const backgroundCtrlOutlinePressed = `var(${backgroundCtrlOutlinePressedRaw}, unset)`; +export const backgroundCtrlOutlineDisabled = `var(${backgroundCtrlOutlineDisabledRaw}, unset)`; +export const backgroundCtrlSubtleRest = `var(${backgroundCtrlSubtleRestRaw}, unset)`; +export const backgroundCtrlSubtleDisabled = `var(${backgroundCtrlSubtleDisabledRaw}, unset)`; +export const backgroundCtrlSubtleHoversplit = `var(${backgroundCtrlSubtleHoversplitRaw}, unset)`; +export const foregroundCtrlHintDefault = `var(${foregroundCtrlHintDefaultRaw}, unset)`; +export const shadowCardRestKey = `var(${shadowCardRestKeyRaw}, unset)`; +export const shadowCardHoverKey = `var(${shadowCardHoverKeyRaw}, unset)`; +export const shadowCardPressedKey = `var(${shadowCardPressedKeyRaw}, unset)`; +export const shadowCardDisabledKey = `var(${shadowCardDisabledKeyRaw}, unset)`; +export const shadowCardRestAmbient = `var(${shadowCardRestAmbientRaw}, unset)`; +export const shadowLayerKey = `var(${shadowLayerKeyRaw}, unset)`; +export const shadowLayerAmbient = `var(${shadowLayerAmbientRaw}, unset)`; diff --git a/packages/semantic-tokens/src/nullable/variables.ts b/packages/semantic-tokens/src/nullable/variables.ts new file mode 100644 index 0000000000000..21b2da722d93f --- /dev/null +++ b/packages/semantic-tokens/src/nullable/variables.ts @@ -0,0 +1,49 @@ +// 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-dataviz-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-onbrand-rest'; +export const strokeCtrlOnbrandHoverRaw = '--smtc-stroke-ctrl-onbrand-hover'; +export const strokeCtrlOnbrandPressedRaw = '--smtc-stroke-ctrl-onbrand-pressed'; +export const strokeCtrlOnbrandDisabledRaw = '--smtc-stroke-ctrl-onbrand-disabled'; +export const strokeCtrlOnneutralRestRaw = '--smtc-stroke-ctrl-onneutral-rest'; +export const strokeCtrlOnneutralHoverRaw = '--smtc-stroke-ctrl-onneutral-hover'; +export const strokeCtrlOnneutralPressedRaw = '--smtc-stroke-ctrl-onneutral-pressed'; +export const strokeCtrlOnneutralDisabledRaw = '--smtc-stroke-ctrl-onneutral-disabled'; +export const strokeCtrlOnsubtleRestRaw = '--smtc-stroke-ctrl-onsubtle-rest'; +export const strokeCtrlOnsubtleHoverRaw = '--smtc-stroke-ctrl-onsubtle-hover'; +export const strokeCtrlOnsubtlePressedRaw = '--smtc-stroke-ctrl-onsubtle-pressed'; +export const strokeCtrlOnsubtleDisabledRaw = '--smtc-stroke-ctrl-onsubtle-disabled'; +export const strokeCtrlOnsubtleHoversplitRaw = '--smtc-stroke-ctrl-onsubtle-hoversplit'; +export const strokeCtrlDividerOnsubtleRaw = '--smtc-stroke-ctrl-divider-onsubtle'; +export const strokeCtrlDividerOnsubtleDisabledRaw = '--smtc-stroke-ctrl-divider-onsubtle-disabled'; +export const strokeCardSelectedRaw = '--smtc-stroke-card-selected'; +export const strokeCardOnprimaryRestRaw = '--smtc-stroke-card-onprimary-rest'; +export const strokeCardOnprimaryHoverRaw = '--smtc-stroke-card-onprimary-hover'; +export const strokeCardOnprimaryPressedRaw = '--smtc-stroke-card-onprimary-pressed'; +export const strokeCardOnprimaryDisabledRaw = '--smtc-stroke-card-onprimary-disabled'; +export const strokeCardOnsecondaryRestRaw = '--smtc-stroke-card-onsecondary-rest'; +export const strokeCardOnsecondaryHoverRaw = '--smtc-stroke-card-onsecondary-hover'; +export const strokeCardOnsecondaryPressedRaw = '--smtc-stroke-card-onsecondary-pressed'; +export const strokeCardOnsecondaryDisabledRaw = '--smtc-stroke-card-onsecondary-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-hoversplit'; +export const foregroundCtrlHintDefaultRaw = '--smtc-foreground-ctrl-hint-default'; +export const shadowCardRestKeyRaw = '--smtc-shadow-card-rest-key'; +export const shadowCardHoverKeyRaw = '--smtc-shadow-card-hover-key'; +export const shadowCardPressedKeyRaw = '--smtc-shadow-card-pressed-key'; +export const shadowCardDisabledKeyRaw = '--smtc-shadow-card-disabled-key'; +export const shadowCardRestAmbientRaw = '--smtc-shadow-card-rest-ambient'; +export const shadowLayerKeyRaw = '--smtc-shadow-layer-key'; +export const shadowLayerAmbientRaw = '--smtc-shadow-layer-ambient'; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts new file mode 100644 index 0000000000000..4b38ddc8237fe --- /dev/null +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -0,0 +1,597 @@ +// 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, + gapBetweenContentXsmallRaw, + paddingCtrlLgTonestedcontrolRaw, + 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, + shadowFlyoutKeyRaw, + shadowFlyoutAmbientRaw, + shadowWindowActiveKeyRaw, +} from '../control/variables'; +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, + gapTextSmallRaw, + gapTextLargeRaw, + gapBetweenCtrlLgNestedRaw, + gapBetweenCtrlSmNestedRaw, + gapListRaw, + gapCardRaw, + strokewidthDividerDefaultRaw, + strokewidthDividerStrongRaw, + strokewidthCtrlOutlineRestRaw, + strokewidthCtrlOutlineHoverRaw, + strokewidthCtrlOutlinePressedRaw, + strokewidthCtrlOutlineSelectedRaw, + strokewidthWindowDefaultRaw, + backgroundToolbarRaw, + strokeToolbarRaw, + strokeCtrlOnbrandRestStop2Raw, + strokeCtrlOnbrandHoverStop2Raw, + strokeCtrlOnbrandPressedStop2Raw, + strokeCtrlOnbrandDisabledStop2Raw, + strokeCtrlOnneutralRestStop2Raw, + strokeCtrlOnneutralHoverStop2Raw, + strokeCtrlOnneutralPressedStop2Raw, + strokeCtrlOnneutralDisabledStop2Raw, + strokeCtrlOnoutlineRestStop2Raw, + strokeCtrlOnoutlineHoverStop2Raw, + strokeCtrlOnoutlinePressedStop2Raw, + strokeCtrlOnoutlineDisabledStop2Raw, + strokeCtrlOnactivebrandRestRaw, + strokeCtrlDividerOnbrandDisabledRaw, + strokeCtrlDividerOnneutralDisabledRaw, + strokeCtrlDividerOnoutlineDisabledRaw, + strokeCtrlDividerOnactivebrandRaw, + strokeCtrlDividerOnactivebrandDisabledRaw, + 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, + shadowCtrlOndragKeyRaw, + shadowCtrlOndragAmbientRaw, + shadowWindowInactiveKeyRaw, +} from './variables'; + +export const textStyleDefaultHeaderFontfamily = `var(${textStyleDefaultHeaderFontfamilyRaw}, var(${textStyleDefaultRegularFontfamilyRaw}))`; +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}))`; +export const textRampSectionheaderLineheight = `var(${textRampSectionheaderLineheightRaw}, var(${textGlobalSubtitle1LineheightRaw}))`; +export const textRampSubsectionheaderFontsize = `var(${textRampSubsectionheaderFontsizeRaw}, var(${textGlobalSubtitle2FontsizeRaw}))`; +export const textRampSubsectionheaderLineheight = `var(${textRampSubsectionheaderLineheightRaw}, var(${textGlobalSubtitle2LineheightRaw}))`; +export const textRampReadingbodyFontsize = `var(${textRampReadingbodyFontsizeRaw}, var(${textGlobalBody2FontsizeRaw}))`; +export const textRampReadingbodyLineheight = `var(${textRampReadingbodyLineheightRaw}, var(${textGlobalBody2LineheightRaw}))`; +export const textRampItemheaderFontsize = `var(${textRampItemheaderFontsizeRaw}, var(${textGlobalBody2FontsizeRaw}))`; +export const textRampItemheaderLineheight = `var(${textRampItemheaderLineheightRaw}, var(${textGlobalBody2LineheightRaw}))`; +export const textRampItembodyFontsize = `var(${textRampItembodyFontsizeRaw}, var(${textGlobalBody3FontsizeRaw}))`; +export const textRampItembodyLineheight = `var(${textRampItembodyLineheightRaw}, var(${textGlobalBody3LineheightRaw}))`; +export const textRampMetadataFontsize = `var(${textRampMetadataFontsizeRaw}, var(${textGlobalCaption1FontsizeRaw}))`; +export const textRampMetadataLineheight = `var(${textRampMetadataLineheightRaw}, var(${textGlobalCaption1LineheightRaw}))`; +export const textRampLegalFontsize = `var(${textRampLegalFontsizeRaw}, var(${textGlobalCaption2FontsizeRaw}))`; +export const textRampLegalLineheight = `var(${textRampLegalLineheightRaw}, var(${textGlobalCaption2LineheightRaw}))`; +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}))`; +export const textRampSmItembodyLineheight = `var(${textRampSmItembodyLineheightRaw}, var(${textGlobalCaption1LineheightRaw}))`; +export const textRampSmMetadataFontsize = `var(${textRampSmMetadataFontsizeRaw}, var(${textGlobalCaption1FontsizeRaw}))`; +export const textRampSmMetadataLineheight = `var(${textRampSmMetadataLineheightRaw}, var(${textGlobalCaption1LineheightRaw}))`; +export const textRampSmLegalFontsize = `var(${textRampSmLegalFontsizeRaw}, var(${textGlobalCaption2FontsizeRaw}))`; +export const textRampSmLegalLineheight = `var(${textRampSmLegalLineheightRaw}, var(${textGlobalCaption2LineheightRaw}))`; +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}))`; +export const textRampLgItembodyLineheight = `var(${textRampLgItembodyLineheightRaw}, var(${textGlobalBody2LineheightRaw}))`; +export const textRampLgMetadataFontsize = `var(${textRampLgMetadataFontsizeRaw}, var(${textGlobalBody3FontsizeRaw}))`; +export const textRampLgMetadataLineheight = `var(${textRampLgMetadataLineheightRaw}, var(${textGlobalBody3LineheightRaw}))`; +export const textRampLgLegalFontsize = `var(${textRampLgLegalFontsizeRaw}, var(${textGlobalCaption1FontsizeRaw}))`; +export const textRampLgLegalLineheight = `var(${textRampLgLegalLineheightRaw}, var(${textGlobalCaption1LineheightRaw}))`; +export const textCtrlWeightDefault = `var(${textCtrlWeightDefaultRaw}, var(${textStyleDefaultRegularWeightRaw}))`; +export const textCtrlButtonWeightDefault = `var(${textCtrlButtonWeightDefaultRaw}, var(${textStyleDefaultRegularWeightRaw}))`; +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}))`; +export const paddingCardNestedimage = `var(${paddingCardNestedimageRaw}, var(${paddingContentAlignDefaultRaw}))`; +export const paddingCtrlTextbottom = `var(${paddingCtrlTextbottomRaw}, var(${paddingCtrlTexttopRaw}))`; +export const paddingCtrlSmTextbottom = `var(${paddingCtrlSmTextbottomRaw}, var(${paddingCtrlSmTexttopRaw}))`; +export const paddingCtrlLgTextbottom = `var(${paddingCtrlLgTextbottomRaw}, var(${paddingCtrlLgTexttopRaw}))`; +export const gapBetweenCtrlNested = `var(${gapBetweenCtrlNestedRaw}, var(${paddingCtrlTonestedcontrolRaw}))`; +export const gapTextSmall = `var(${gapTextSmallRaw}, var(${gapBetweenContentXxsmallRaw}))`; +export const gapTextLarge = `var(${gapTextLargeRaw}, var(${gapBetweenContentXsmallRaw}))`; +export const gapBetweenCtrlLgNested = `var(${gapBetweenCtrlLgNestedRaw}, var(${paddingCtrlLgTonestedcontrolRaw}))`; +export const gapBetweenCtrlSmNested = `var(${gapBetweenCtrlSmNestedRaw}, var(${paddingCtrlSmTonestedcontrolRaw}))`; +export const gapList = `var(${gapListRaw}, var(${gapBetweenContentXxsmallRaw}))`; +export const gapCard = `var(${gapCardRaw}, var(${gapBetweenContentMediumRaw}))`; +export const strokewidthDividerDefault = `var(${strokewidthDividerDefaultRaw}, var(${strokewidthDefaultRaw}))`; +export const strokewidthDividerStrong = `var(${strokewidthDividerStrongRaw}, var(${strokewidthDefaultRaw}))`; +export const strokewidthCtrlOutlineRest = `var(${strokewidthCtrlOutlineRestRaw}, var(${strokewidthDefaultRaw}))`; +export const strokewidthCtrlOutlineHover = `var(${strokewidthCtrlOutlineHoverRaw}, var(${strokewidthDefaultRaw}))`; +export const strokewidthCtrlOutlinePressed = `var(${strokewidthCtrlOutlinePressedRaw}, var(${strokewidthDefaultRaw}))`; +export const strokewidthCtrlOutlineSelected = `var(${strokewidthCtrlOutlineSelectedRaw}, var(${strokewidthDefaultRaw}))`; +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}))`; +export const strokeCtrlDividerOnbrandDisabled = `var(${strokeCtrlDividerOnbrandDisabledRaw}, var(${strokeCtrlDividerOnbrandRaw}))`; +export const strokeCtrlDividerOnneutralDisabled = `var(${strokeCtrlDividerOnneutralDisabledRaw}, var(${strokeCtrlDividerOnneutralRaw}))`; +export const strokeCtrlDividerOnoutlineDisabled = `var(${strokeCtrlDividerOnoutlineDisabledRaw}, var(${strokeCtrlDividerOnoutlineRaw}))`; +export const strokeCtrlDividerOnactivebrand = `var(${strokeCtrlDividerOnactivebrandRaw}, var(${strokeCtrlDividerOnbrandRaw}))`; +export const strokeCtrlDividerOnactivebrandDisabled = `var(${strokeCtrlDividerOnactivebrandDisabledRaw}, var(${strokeCtrlDividerOnbrandRaw}))`; +export const strokeCtrlOnactivebrandHover = `var(${strokeCtrlOnactivebrandHoverRaw}, var(${strokeCtrlOnbrandHoverRaw}))`; +export const strokeCtrlOnactivebrandPressed = `var(${strokeCtrlOnactivebrandPressedRaw}, var(${strokeCtrlOnbrandPressedRaw}))`; +export const strokeCtrlOnactivebrandDisabled = `var(${strokeCtrlOnactivebrandDisabledRaw}, var(${strokeCtrlOnbrandDisabledRaw}))`; +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}))`; +export const strokeDividerStrong = `var(${strokeDividerStrongRaw}, var(${strokeDividerDefaultRaw}))`; +export const strokeDividerBrand = `var(${strokeDividerBrandRaw}, var(${backgroundCtrlBrandRestRaw}))`; +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}))`; +export const backgroundCtrlActivebrandHover = `var(${backgroundCtrlActivebrandHoverRaw}, var(${backgroundCtrlBrandHoverRaw}))`; +export const backgroundCtrlActivebrandPressed = `var(${backgroundCtrlActivebrandPressedRaw}, var(${backgroundCtrlBrandPressedRaw}))`; +export const backgroundCtrlActivebrandDisabled = `var(${backgroundCtrlActivebrandDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; +export const backgroundCtrlShapesafeActivebrandRest = `var(${backgroundCtrlShapesafeActivebrandRestRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const backgroundCtrlShapesafeActivebrandDisabled = `var(${backgroundCtrlShapesafeActivebrandDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; +export const backgroundCtrlShapesafeNeutralRest = `var(${backgroundCtrlShapesafeNeutralRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const backgroundCtrlShapesafeNeutralHover = `var(${backgroundCtrlShapesafeNeutralHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const backgroundCtrlShapesafeNeutralPressed = `var(${backgroundCtrlShapesafeNeutralPressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const backgroundCtrlShapesafeNeutralDisabled = `var(${backgroundCtrlShapesafeNeutralDisabledRaw}, var(${foregroundCtrlNeutralSecondaryDisabledRaw}))`; +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}))`; +export const cornerCtrlPressed = `var(${cornerCtrlPressedRaw}, var(${cornerCtrlRestRaw}))`; +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}))`; +export const foregroundContentNeutralSecondary = `var(${foregroundContentNeutralSecondaryRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const foregroundContentBrandPrimary = `var(${foregroundContentBrandPrimaryRaw}, var(${foregroundCtrlBrandRestRaw}))`; +export const foregroundCtrlNeutralPrimaryHover = `var(${foregroundCtrlNeutralPrimaryHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlNeutralPrimaryPressed = `var(${foregroundCtrlNeutralPrimaryPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlNeutralSecondaryHover = `var(${foregroundCtrlNeutralSecondaryHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const foregroundCtrlNeutralSecondaryPressed = `var(${foregroundCtrlNeutralSecondaryPressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const foregroundCtrlIconOnneutralRest = `var(${foregroundCtrlIconOnneutralRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnneutralHover = `var(${foregroundCtrlIconOnneutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnneutralPressed = `var(${foregroundCtrlIconOnneutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnneutralDisabled = `var(${foregroundCtrlIconOnneutralDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +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}))`; +export const foregroundCtrlIconOnsubtleHover = `var(${foregroundCtrlIconOnsubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnsubtlePressed = `var(${foregroundCtrlIconOnsubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnsubtleDisabled = `var(${foregroundCtrlIconOnsubtleDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +export const foregroundCtrlOnbrandHover = `var(${foregroundCtrlOnbrandHoverRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const foregroundCtrlOnbrandPressed = `var(${foregroundCtrlOnbrandPressedRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const foregroundCtrlActivebrandRest = `var(${foregroundCtrlActivebrandRestRaw}, var(${foregroundCtrlBrandRestRaw}))`; +export const foregroundCtrlActivebrandHover = `var(${foregroundCtrlActivebrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw}))`; +export const foregroundCtrlActivebrandPressed = `var(${foregroundCtrlActivebrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw}))`; +export const foregroundCtrlActivebrandDisabled = `var(${foregroundCtrlActivebrandDisabledRaw}, var(${foregroundCtrlBrandDisabledRaw}))`; +export const foregroundCtrlOnactivebrandRest = `var(${foregroundCtrlOnactivebrandRestRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const foregroundCtrlOnactivebrandHover = `var(${foregroundCtrlOnactivebrandHoverRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const foregroundCtrlOnactivebrandPressed = `var(${foregroundCtrlOnactivebrandPressedRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const foregroundCtrlOnactivebrandDisabled = `var(${foregroundCtrlOnactivebrandDisabledRaw}, var(${foregroundCtrlOnbrandDisabledRaw}))`; +export const foregroundCtrlOnoutlineRest = `var(${foregroundCtrlOnoutlineRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOnoutlineHover = `var(${foregroundCtrlOnoutlineHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOnoutlinePressed = `var(${foregroundCtrlOnoutlinePressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOnoutlineDisabled = `var(${foregroundCtrlOnoutlineDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +export const foregroundCtrlOnsubtleRest = `var(${foregroundCtrlOnsubtleRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOnsubtleHover = `var(${foregroundCtrlOnsubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryHoverRaw}))`; +export const foregroundCtrlOnsubtlePressed = `var(${foregroundCtrlOnsubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw}))`; +export const foregroundCtrlOnsubtleDisabled = `var(${foregroundCtrlOnsubtleDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +export const foregroundCtrlOntransparentRest = `var(${foregroundCtrlOntransparentRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOntransparentHover = `var(${foregroundCtrlOntransparentHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOntransparentPressed = `var(${foregroundCtrlOntransparentPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOntransparentDisabled = `var(${foregroundCtrlOntransparentDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +export const materialAcrylicDefaultSolid = `var(${materialAcrylicDefaultSolidRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +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}))`; +export const statusBrandStroke = `var(${statusBrandStrokeRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const statusBrandForeground = `var(${statusBrandForegroundRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const statusBrandTintForeground = `var(${statusBrandTintForegroundRaw}, var(${foregroundCtrlBrandRestRaw}))`; +export const statusDangerStroke = `var(${statusDangerStrokeRaw}, var(${statusDangerBackgroundRaw}))`; +export const statusDangerForeground = `var(${statusDangerForegroundRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const statusWarningStroke = `var(${statusWarningStrokeRaw}, var(${statusWarningBackgroundRaw}))`; +export const statusWarningForeground = `var(${statusWarningForegroundRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const statusSuccessStroke = `var(${statusSuccessStrokeRaw}, var(${statusSuccessBackgroundRaw}))`; +export const statusSuccessForeground = `var(${statusSuccessForegroundRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const statusImportantStroke = `var(${statusImportantStrokeRaw}, var(${statusImportantBackgroundRaw}))`; +export const statusImportantForeground = `var(${statusImportantForegroundRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const statusInformativeStroke = `var(${statusInformativeStrokeRaw}, var(${statusInformativeBackgroundRaw}))`; +export const statusInformativeForeground = `var(${statusInformativeForegroundRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +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 shadowCtrlOndragKey = `var(${shadowCtrlOndragKeyRaw}, var(${shadowFlyoutKeyRaw}))`; +export const shadowCtrlOndragAmbient = `var(${shadowCtrlOndragAmbientRaw}, var(${shadowFlyoutAmbientRaw}))`; +export const shadowWindowInactiveKey = `var(${shadowWindowInactiveKeyRaw}, var(${shadowWindowActiveKeyRaw}))`; diff --git a/packages/semantic-tokens/src/optional/variables.ts b/packages/semantic-tokens/src/optional/variables.ts new file mode 100644 index 0000000000000..9957d665e4d3e --- /dev/null +++ b/packages/semantic-tokens/src/optional/variables.ts @@ -0,0 +1,251 @@ +// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +export const textStyleDefaultHeaderFontfamilyRaw = '--smtc-text-style-default-header-fontfamily'; +export const textStyleDefaultHeaderLetterspacingRaw = '--smtc-text-style-default-header-letterspacing'; +export const textStyleAiRegularFontfamilyRaw = '--smtc-text-style-ai-regular-fontfamily'; +export const textStyleAiRegularWeightRaw = '--smtc-text-style-ai-regular-weight'; +export const textStyleAiRegularLetterspacingRaw = '--smtc-text-style-ai-regular-letterspacing'; +export const textStyleAiHeaderFontfamilyRaw = '--smtc-text-style-ai-header-fontfamily'; +export const textStyleAiHeaderWeightRaw = '--smtc-text-style-ai-header-weight'; +export const textStyleAiHeaderLetterspacingRaw = '--smtc-text-style-ai-header-letterspacing'; +export const textStyleArticleRegularFontfamilyRaw = '--smtc-text-style-article-regular-fontfamily'; +export const textStyleArticleRegularWeightRaw = '--smtc-text-style-article-regular-weight'; +export const textStyleArticleRegularLetterspacingRaw = '--smtc-text-style-article-regular-letterspacing'; +export const textStyleArticleHeaderFontfamilyRaw = '--smtc-text-style-article-header-fontfamily'; +export const textStyleArticleHeaderWeightRaw = '--smtc-text-style-article-header-weight'; +export const textStyleArticleHeaderLetterspacingRaw = '--smtc-text-style-article-header-letterspacing'; +export const textStyleCodeRegularFontfamilyRaw = '--smtc-text-style-code-regular-fontfamily'; +export const textStyleCodeRegularWeightRaw = '--smtc-text-style-code-regular-weight'; +export const textStyleCodeRegularLetterspacingRaw = '--smtc-text-style-code-regular-letterspacing'; +export const textStyleCodeHeaderFontfamilyRaw = '--smtc-text-style-code-header-fontfamily'; +export const textStyleCodeHeaderWeightRaw = '--smtc-text-style-code-header-weight'; +export const textStyleCodeHeaderLetterspacingRaw = '--smtc-text-style-code-header-letterspacing'; +export const textStyleDatavizRegularFontfamilyRaw = '--smtc-text-style-dataviz-regular-fontfamily'; +export const textStyleDatavizRegularWeightRaw = '--smtc-text-style-dataviz-regular-weight'; +export const textStyleDatavizRegularLetterspacingRaw = '--smtc-text-style-dataviz-regular-letterspacing'; +export const textStyleDatavizHeaderFontfamilyRaw = '--smtc-text-style-dataviz-header-fontfamily'; +export const textStyleDatavizHeaderWeightRaw = '--smtc-text-style-dataviz-header-weight'; +export const textStyleDatavizHeaderLetterspacingRaw = '--smtc-text-style-dataviz-header-letterspacing'; +export const textStyleQuoteRegularFontfamilyRaw = '--smtc-text-style-quote-regular-fontfamily'; +export const textStyleQuoteRegularWeightRaw = '--smtc-text-style-quote-regular-weight'; +export const textStyleQuoteRegularLetterspacingRaw = '--smtc-text-style-quote-regular-letterspacing'; +export const textStyleQuoteHeaderFontfamilyRaw = '--smtc-text-style-quote-header-fontfamily'; +export const textStyleQuoteHeaderWeightRaw = '--smtc-text-style-quote-header-weight'; +export const textStyleQuoteHeaderLetterspacingRaw = '--smtc-text-style-quote-header-letterspacing'; +export const textRampPageheaderFontsizeRaw = '--smtc-text-ramp-pageheader-fontsize'; +export const textRampPageheaderLineheightRaw = '--smtc-text-ramp-pageheader-lineheight'; +export const textRampSectionheaderFontsizeRaw = '--smtc-text-ramp-sectionheader-fontsize'; +export const textRampSectionheaderLineheightRaw = '--smtc-text-ramp-sectionheader-lineheight'; +export const textRampSubsectionheaderFontsizeRaw = '--smtc-text-ramp-subsectionheader-fontsize'; +export const textRampSubsectionheaderLineheightRaw = '--smtc-text-ramp-subsectionheader-lineheight'; +export const textRampReadingbodyFontsizeRaw = '--smtc-text-ramp-readingbody-fontsize'; +export const textRampReadingbodyLineheightRaw = '--smtc-text-ramp-readingbody-lineheight'; +export const textRampItemheaderFontsizeRaw = '--smtc-text-ramp-itemheader-fontsize'; +export const textRampItemheaderLineheightRaw = '--smtc-text-ramp-itemheader-lineheight'; +export const textRampItembodyFontsizeRaw = '--smtc-text-ramp-itembody-fontsize'; +export const textRampItembodyLineheightRaw = '--smtc-text-ramp-itembody-lineheight'; +export const textRampMetadataFontsizeRaw = '--smtc-text-ramp-metadata-fontsize'; +export const textRampMetadataLineheightRaw = '--smtc-text-ramp-metadata-lineheight'; +export const textRampLegalFontsizeRaw = '--smtc-text-ramp-legal-fontsize'; +export const textRampLegalLineheightRaw = '--smtc-text-ramp-legal-lineheight'; +export const textRampSmPageheaderFontsizeRaw = '--smtc-text-ramp-sm-pageheader-fontsize'; +export const textRampSmPageheaderLineheightRaw = '--smtc-text-ramp-sm-pageheader-lineheight'; +export const textRampSmSectionheaderFontsizeRaw = '--smtc-text-ramp-sm-sectionheader-fontsize'; +export const textRampSmSectionheaderLineheightRaw = '--smtc-text-ramp-sm-sectionheader-lineheight'; +export const textRampSmSubsectionheaderFontsizeRaw = '--smtc-text-ramp-sm-subsectionheader-fontsize'; +export const textRampSmSubsectionheaderLineheightRaw = '--smtc-text-ramp-sm-subsectionheader-lineheight'; +export const textRampSmReadingbodyFontsizeRaw = '--smtc-text-ramp-sm-readingbody-fontsize'; +export const textRampSmReadingbodyLineheightRaw = '--smtc-text-ramp-sm-readingbody-lineheight'; +export const textRampSmItemheaderFontsizeRaw = '--smtc-text-ramp-sm-itemheader-fontsize'; +export const textRampSmItemheaderLineheightRaw = '--smtc-text-ramp-sm-itemheader-lineheight'; +export const textRampSmItembodyFontsizeRaw = '--smtc-text-ramp-sm-itembody-fontsize'; +export const textRampSmItembodyLineheightRaw = '--smtc-text-ramp-sm-itembody-lineheight'; +export const textRampSmMetadataFontsizeRaw = '--smtc-text-ramp-sm-metadata-fontsize'; +export const textRampSmMetadataLineheightRaw = '--smtc-text-ramp-sm-metadata-lineheight'; +export const textRampSmLegalFontsizeRaw = '--smtc-text-ramp-sm-legal-fontsize'; +export const textRampSmLegalLineheightRaw = '--smtc-text-ramp-sm-legal-lineheight'; +export const textRampLgPageheaderFontsizeRaw = '--smtc-text-ramp-lg-pageheader-fontsize'; +export const textRampLgPageheaderLineheightRaw = '--smtc-text-ramp-lg-pageheader-lineheight'; +export const textRampLgSectionheaderFontsizeRaw = '--smtc-text-ramp-lg-sectionheader-fontsize'; +export const textRampLgSectionheaderLineheightRaw = '--smtc-text-ramp-lg-sectionheader-lineheight'; +export const textRampLgSubsectionheaderFontsizeRaw = '--smtc-text-ramp-lg-subsectionheader-fontsize'; +export const textRampLgSubsectionheaderLineheightRaw = '--smtc-text-ramp-lg-subsectionheader-lineheight'; +export const textRampLgReadingbodyFontsizeRaw = '--smtc-text-ramp-lg-readingbody-fontsize'; +export const textRampLgReadingbodyLineheightRaw = '--smtc-text-ramp-lg-readingbody-lineheight'; +export const textRampLgItemheaderFontsizeRaw = '--smtc-text-ramp-lg-itemheader-fontsize'; +export const textRampLgItemheaderLineheightRaw = '--smtc-text-ramp-lg-itemheader-lineheight'; +export const textRampLgItembodyFontsizeRaw = '--smtc-text-ramp-lg-itembody-fontsize'; +export const textRampLgItembodyLineheightRaw = '--smtc-text-ramp-lg-itembody-lineheight'; +export const textRampLgMetadataFontsizeRaw = '--smtc-text-ramp-lg-metadata-fontsize'; +export const textRampLgMetadataLineheightRaw = '--smtc-text-ramp-lg-metadata-lineheight'; +export const textRampLgLegalFontsizeRaw = '--smtc-text-ramp-lg-legal-fontsize'; +export const textRampLgLegalLineheightRaw = '--smtc-text-ramp-lg-legal-lineheight'; +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-nestedimage'; +export const paddingCtrlTextbottomRaw = '--smtc-padding-ctrl-textbottom'; +export const paddingCtrlSmTextbottomRaw = '--smtc-padding-ctrl-sm-textbottom'; +export const paddingCtrlLgTextbottomRaw = '--smtc-padding-ctrl-lg-textbottom'; +export const gapBetweenCtrlNestedRaw = '--smtc-gap-between-ctrl-nested'; +export const gapTextSmallRaw = '--smtc-gap-text-small'; +export const gapTextLargeRaw = '--smtc-gap-text-large'; +export const gapBetweenCtrlLgNestedRaw = '--smtc-gap-between-ctrl-lg-nested'; +export const gapBetweenCtrlSmNestedRaw = '--smtc-gap-between-ctrl-sm-nested'; +export const gapListRaw = '--smtc-gap-list'; +export const gapCardRaw = '--smtc-gap-card'; +export const strokewidthDividerDefaultRaw = '--smtc-strokewidth-divider-default'; +export const strokewidthDividerStrongRaw = '--smtc-strokewidth-divider-strong'; +export const strokewidthCtrlOutlineRestRaw = '--smtc-strokewidth-ctrl-outline-rest'; +export const strokewidthCtrlOutlineHoverRaw = '--smtc-strokewidth-ctrl-outline-hover'; +export const strokewidthCtrlOutlinePressedRaw = '--smtc-strokewidth-ctrl-outline-pressed'; +export const strokewidthCtrlOutlineSelectedRaw = '--smtc-strokewidth-ctrl-outline-selected'; +export const strokewidthWindowDefaultRaw = '--smtc-strokewidth-window-default'; +export const backgroundToolbarRaw = '--smtc-background-toolbar'; +export const strokeToolbarRaw = '--smtc-stroke-toolbar'; +export const strokeCtrlOnbrandRestStop2Raw = '--smtc-stroke-ctrl-onbrand-reststop2'; +export const strokeCtrlOnbrandHoverStop2Raw = '--smtc-stroke-ctrl-onbrand-hoverstop2'; +export const strokeCtrlOnbrandPressedStop2Raw = '--smtc-stroke-ctrl-onbrand-pressedstop2'; +export const strokeCtrlOnbrandDisabledStop2Raw = '--smtc-stroke-ctrl-onbrand-disabledstop2'; +export const strokeCtrlOnneutralRestStop2Raw = '--smtc-stroke-ctrl-onneutral-reststop2'; +export const strokeCtrlOnneutralHoverStop2Raw = '--smtc-stroke-ctrl-onneutral-hoverstop2'; +export const strokeCtrlOnneutralPressedStop2Raw = '--smtc-stroke-ctrl-onneutral-pressedstop2'; +export const strokeCtrlOnneutralDisabledStop2Raw = '--smtc-stroke-ctrl-onneutral-disabledstop2'; +export const strokeCtrlOnoutlineRestStop2Raw = '--smtc-stroke-ctrl-onoutline-reststop2'; +export const strokeCtrlOnoutlineHoverStop2Raw = '--smtc-stroke-ctrl-onoutline-hoverstop2'; +export const strokeCtrlOnoutlinePressedStop2Raw = '--smtc-stroke-ctrl-onoutline-pressedstop2'; +export const strokeCtrlOnoutlineDisabledStop2Raw = '--smtc-stroke-ctrl-onoutline-disabledstop2'; +export const strokeCtrlOnactivebrandRestRaw = '--smtc-stroke-ctrl-onactivebrand-rest'; +export const strokeCtrlDividerOnbrandDisabledRaw = '--smtc-stroke-ctrl-divider-onbrand-disabled'; +export const strokeCtrlDividerOnneutralDisabledRaw = '--smtc-stroke-ctrl-divider-onneutral-disabled'; +export const strokeCtrlDividerOnoutlineDisabledRaw = '--smtc-stroke-ctrl-divider-onoutline-disabled'; +export const strokeCtrlDividerOnactivebrandRaw = '--smtc-stroke-ctrl-divider-onactivebrand'; +export const strokeCtrlDividerOnactivebrandDisabledRaw = '--smtc-stroke-ctrl-divider-onactivebrand-disabled'; +export const strokeCtrlOnactivebrandHoverRaw = '--smtc-stroke-ctrl-onactivebrand-hover'; +export const strokeCtrlOnactivebrandPressedRaw = '--smtc-stroke-ctrl-onactivebrand-pressed'; +export const strokeCtrlOnactivebrandDisabledRaw = '--smtc-stroke-ctrl-onactivebrand-disabled'; +export const strokeCtrlOnactivebrandRestStop2Raw = '--smtc-stroke-ctrl-onactivebrand-reststop2'; +export const strokeCtrlOnactivebrandHoverStop2Raw = '--smtc-stroke-ctrl-onactivebrand-hoverstop2'; +export const strokeCtrlOnactivebrandPressedStop2Raw = '--smtc-stroke-ctrl-onactivebrand-pressedstop2'; +export const strokeCtrlOnactivebrandDisabledStop2Raw = '--smtc-stroke-ctrl-onactivebrand-disabledstop2'; +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-primarystop1'; +export const backgroundLayerPrimaryStop2Raw = '--smtc-background-layer-primarystop2'; +export const backgroundLayerPrimaryStop3Raw = '--smtc-background-layer-primarystop3'; +export const backgroundLayerSecondaryRaw = '--smtc-background-layer-secondary'; +export const backgroundLayerTertiaryRaw = '--smtc-background-layer-tertiary'; +export const backgroundCardOnprimaryDefaultSelectedRaw = '--smtc-background-card-onprimary-default-selected'; +export const backgroundCtrlActivebrandRestRaw = '--smtc-background-ctrl-activebrand-rest'; +export const backgroundCtrlActivebrandHoverRaw = '--smtc-background-ctrl-activebrand-hover'; +export const backgroundCtrlActivebrandPressedRaw = '--smtc-background-ctrl-activebrand-pressed'; +export const backgroundCtrlActivebrandDisabledRaw = '--smtc-background-ctrl-activebrand-disabled'; +export const backgroundCtrlShapesafeActivebrandRestRaw = '--smtc-background-ctrl-shapesafe-activebrand-rest'; +export const backgroundCtrlShapesafeActivebrandDisabledRaw = '--smtc-background-ctrl-shapesafe-activebrand-disabled'; +export const backgroundCtrlShapesafeNeutralRestRaw = '--smtc-background-ctrl-shapesafe-neutral-rest'; +export const backgroundCtrlShapesafeNeutralHoverRaw = '--smtc-background-ctrl-shapesafe-neutral-hover'; +export const backgroundCtrlShapesafeNeutralPressedRaw = '--smtc-background-ctrl-shapesafe-neutral-pressed'; +export const backgroundCtrlShapesafeNeutralDisabledRaw = '--smtc-background-ctrl-shapesafe-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-onpage'; +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-onneutral-rest'; +export const foregroundCtrlIconOnneutralHoverRaw = '--smtc-foreground-ctrl-icon-onneutral-hover'; +export const foregroundCtrlIconOnneutralPressedRaw = '--smtc-foreground-ctrl-icon-onneutral-pressed'; +export const foregroundCtrlIconOnneutralDisabledRaw = '--smtc-foreground-ctrl-icon-onneutral-disabled'; +export const foregroundCtrlIconOnoutlineRestRaw = '--smtc-foreground-ctrl-icon-onoutline-rest'; +export const foregroundCtrlIconOnoutlineHoverRaw = '--smtc-foreground-ctrl-icon-onoutline-hover'; +export const foregroundCtrlIconOnoutlinePressedRaw = '--smtc-foreground-ctrl-icon-onoutline-pressed'; +export const foregroundCtrlIconOnoutlineDisabledRaw = '--smtc-foreground-ctrl-icon-onoutline-disabled'; +export const foregroundCtrlIconOnsubtleRestRaw = '--smtc-foreground-ctrl-icon-onsubtle-rest'; +export const foregroundCtrlIconOnsubtleHoverRaw = '--smtc-foreground-ctrl-icon-onsubtle-hover'; +export const foregroundCtrlIconOnsubtlePressedRaw = '--smtc-foreground-ctrl-icon-onsubtle-pressed'; +export const foregroundCtrlIconOnsubtleDisabledRaw = '--smtc-foreground-ctrl-icon-onsubtle-disabled'; +export const foregroundCtrlOnbrandHoverRaw = '--smtc-foreground-ctrl-onbrand-hover'; +export const foregroundCtrlOnbrandPressedRaw = '--smtc-foreground-ctrl-onbrand-pressed'; +export const foregroundCtrlActivebrandRestRaw = '--smtc-foreground-ctrl-activebrand-rest'; +export const foregroundCtrlActivebrandHoverRaw = '--smtc-foreground-ctrl-activebrand-hover'; +export const foregroundCtrlActivebrandPressedRaw = '--smtc-foreground-ctrl-activebrand-pressed'; +export const foregroundCtrlActivebrandDisabledRaw = '--smtc-foreground-ctrl-activebrand-disabled'; +export const foregroundCtrlOnactivebrandRestRaw = '--smtc-foreground-ctrl-onactivebrand-rest'; +export const foregroundCtrlOnactivebrandHoverRaw = '--smtc-foreground-ctrl-onactivebrand-hover'; +export const foregroundCtrlOnactivebrandPressedRaw = '--smtc-foreground-ctrl-onactivebrand-pressed'; +export const foregroundCtrlOnactivebrandDisabledRaw = '--smtc-foreground-ctrl-onactivebrand-disabled'; +export const foregroundCtrlOnoutlineRestRaw = '--smtc-foreground-ctrl-onoutline-rest'; +export const foregroundCtrlOnoutlineHoverRaw = '--smtc-foreground-ctrl-onoutline-hover'; +export const foregroundCtrlOnoutlinePressedRaw = '--smtc-foreground-ctrl-onoutline-pressed'; +export const foregroundCtrlOnoutlineDisabledRaw = '--smtc-foreground-ctrl-onoutline-disabled'; +export const foregroundCtrlOnsubtleRestRaw = '--smtc-foreground-ctrl-onsubtle-rest'; +export const foregroundCtrlOnsubtleHoverRaw = '--smtc-foreground-ctrl-onsubtle-hover'; +export const foregroundCtrlOnsubtlePressedRaw = '--smtc-foreground-ctrl-onsubtle-pressed'; +export const foregroundCtrlOnsubtleDisabledRaw = '--smtc-foreground-ctrl-onsubtle-disabled'; +export const foregroundCtrlOntransparentRestRaw = '--smtc-foreground-ctrl-ontransparent-rest'; +export const foregroundCtrlOntransparentHoverRaw = '--smtc-foreground-ctrl-ontransparent-hover'; +export const foregroundCtrlOntransparentPressedRaw = '--smtc-foreground-ctrl-ontransparent-pressed'; +export const foregroundCtrlOntransparentDisabledRaw = '--smtc-foreground-ctrl-ontransparent-disabled'; +export const materialAcrylicDefaultSolidRaw = '--smtc-material-acrylic-default-solid'; +export const materialAcrylicDefaultColorblendRaw = '--smtc-material-acrylic-default-colorblend'; +export const materialAcrylicDefaultLumblendRaw = '--smtc-material-acrylic-default-lumblend'; +export const materialMicaDefaultSolidRaw = '--smtc-material-mica-default-solid'; +export const materialMicaDefaultColorblendRaw = '--smtc-material-mica-default-colorblend'; +export const materialMicaDefaultLumblendRaw = '--smtc-material-mica-default-lumblend'; +export const materialMicaDarkerSolidRaw = '--smtc-material-mica-darker-solid'; +export const materialMicaDarkerColorblendRaw = '--smtc-material-mica-darker-colorblend'; +export const materialMicaDarkerLumblendRaw = '--smtc-material-mica-darker-lumblend'; +export const materialMicaThinSolidRaw = '--smtc-material-mica-thin-solid'; +export const materialMicaThinColorblendRaw = '--smtc-material-mica-thin-colorblend'; +export const materialMicaThinLumblendRaw = '--smtc-material-mica-thin-lumblend'; +export const iconthemeCtrlDefaultHoverRaw = '--smtc-icontheme-ctrl-default-hover'; +export const iconthemeCtrlDefaultPressedRaw = '--smtc-icontheme-ctrl-default-pressed'; +export const iconthemeCtrlSubtleRestRaw = '--smtc-icontheme-ctrl-subtle-rest'; +export const iconthemeCtrlSubtleHoverRaw = '--smtc-icontheme-ctrl-subtle-hover'; +export const iconthemeCtrlSubtlePressedRaw = '--smtc-icontheme-ctrl-subtle-pressed'; +export const iconthemeCtrlSubtleSelectedRaw = '--smtc-icontheme-ctrl-subtle-selected'; +export const iconthemeCtrlChevronDefaultRaw = '--smtc-icontheme-ctrl-chevron-default'; +export const iconthemeCtrlChevronSelectedRaw = '--smtc-icontheme-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-colorblend'; +export const materialAcrylicShellDefaultLumblendRaw = '--smtc-material-acrylic-shell-default-lumblend'; +export const backgroundCardOnsecondaryDefaultSelectedRaw = '--smtc-background-card-onsecondary-default-selected'; +export const shadowCtrlOndragKeyRaw = '--smtc-shadow-ctrl-ondrag-key'; +export const shadowCtrlOndragAmbientRaw = '--smtc-shadow-ctrl-ondrag-ambient'; +export const shadowWindowInactiveKeyRaw = '--smtc-shadow-window-inactive-key'; From f47a728fc5d0c72d074f893abead89a7a49820b9 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Mon, 14 Apr 2025 16:11:45 -0700 Subject: [PATCH 04/66] Semantic-tokens: Flat export deprecated tokens (Tree shakability in ESBuild) (#34235) --- .../etc/semantic-tokens.api.md | 24 ++++---- packages/semantic-tokens/package.json | 9 +-- .../semantic-tokens/scripts/legacyTokens.ts | 56 +++++++++++++++++ packages/semantic-tokens/scripts/tokenGen.ts | 22 +++---- .../src/components/focus/tokens.ts | 5 +- .../src/components/link/tokens.ts | 22 ++++--- .../semantic-tokens/src/control/tokens.ts | 19 ++++-- packages/semantic-tokens/src/legacy/tokens.ts | 61 +++++++++++++++++++ 8 files changed, 175 insertions(+), 43 deletions(-) create mode 100644 packages/semantic-tokens/scripts/legacyTokens.ts create mode 100644 packages/semantic-tokens/src/legacy/tokens.ts diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 84a707b9653c4..7b374832feba3 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -1583,7 +1583,7 @@ export const ctrlFocusInnerStrokewidth = "var(--smtc-ctrl-focus-inner-strokewidt export const ctrlFocusInnerStrokewidthRaw = "--smtc-ctrl-focus-inner-strokewidth"; // @public (undocumented) -export const ctrlFocusOuterStroke: string; +export const ctrlFocusOuterStroke = "var(--smtc-ctrl-focus-outer-stroke, var(--smtc-background-ctrl-brand-rest, var(--colorStrokeFocus2)))"; // @public (undocumented) export const ctrlFocusOuterStrokeRaw = "--smtc-ctrl-focus-outer-stroke"; @@ -1769,37 +1769,37 @@ export const ctrlInputTextselectionForeground = "var(--smtc-ctrl-input-textselec export const ctrlInputTextselectionForegroundRaw = "--smtc-ctrl-input-textselection-foreground"; // @public (undocumented) -export const ctrlLinkForegroundBrandHover: string; +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: string; +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: string; +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: string; +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: string; +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: string; +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"; @@ -2927,7 +2927,7 @@ export const foregroundCtrlIconOnsubtleRest = "var(--smtc-foreground-ctrl-icon-o export const foregroundCtrlIconOnsubtleRestRaw = "--smtc-foreground-ctrl-icon-onsubtle-rest"; // @public (undocumented) -export const foregroundCtrlNeutralPrimaryDisabled: string; +export const foregroundCtrlNeutralPrimaryDisabled = "var(--smtc-foreground-ctrl-neutral-primary-disabled, var(--colorNeutralForegroundDisabled))"; // @public (undocumented) export const foregroundCtrlNeutralPrimaryDisabledRaw = "--smtc-foreground-ctrl-neutral-primary-disabled"; @@ -4463,7 +4463,7 @@ export const strokewidthCtrlOutlineSelected = "var(--smtc-strokewidth-ctrl-outli export const strokewidthCtrlOutlineSelectedRaw = "--smtc-strokewidth-ctrl-outline-selected"; // @public (undocumented) -export const strokewidthDefault: string; +export const strokewidthDefault = "var(--smtc-strokewidth-default, var(--strokeWidthThin))"; // @public (undocumented) export const strokewidthDefaultRaw = "--smtc-strokewidth-default"; @@ -4547,7 +4547,7 @@ export const textGlobalBody2Lineheight = "var(--smtc-text-global-body2-lineheigh export const textGlobalBody2LineheightRaw = "--smtc-text-global-body2-lineheight"; // @public (undocumented) -export const textGlobalBody3Fontsize: string; +export const textGlobalBody3Fontsize = "var(--smtc-text-global-body3-fontsize, var(--fontSizeBase300))"; // @public (undocumented) export const textGlobalBody3FontsizeRaw = "--smtc-text-global-body3-fontsize"; @@ -5135,7 +5135,7 @@ export const textStyleDefaultHeaderWeight = "var(--smtc-text-style-default-heade export const textStyleDefaultHeaderWeightRaw = "--smtc-text-style-default-header-weight"; // @public (undocumented) -export const textStyleDefaultRegularFontfamily: string; +export const textStyleDefaultRegularFontfamily = "var(--smtc-text-style-default-regular-fontfamily, var(--fontFamilyBase))"; // @public (undocumented) export const textStyleDefaultRegularFontfamilyRaw = "--smtc-text-style-default-regular-fontfamily"; @@ -5147,7 +5147,7 @@ export const textStyleDefaultRegularLetterspacing = "var(--smtc-text-style-defau export const textStyleDefaultRegularLetterspacingRaw = "--smtc-text-style-default-regular-letterspacing"; // @public (undocumented) -export const textStyleDefaultRegularWeight: string; +export const textStyleDefaultRegularWeight = "var(--smtc-text-style-default-regular-weight, var(--fontWeightRegular))"; // @public (undocumented) export const textStyleDefaultRegularWeightRaw = "--smtc-text-style-default-regular-weight"; diff --git a/packages/semantic-tokens/package.json b/packages/semantic-tokens/package.json index 66e041d13e1ca..6a996906859db 100644 --- a/packages/semantic-tokens/package.json +++ b/packages/semantic-tokens/package.json @@ -13,11 +13,11 @@ "license": "MIT", "devDependencies": { "@fluentui/eslint-plugin": "*", - "@fluentui/scripts-api-extractor": "*" + "@fluentui/scripts-api-extractor": "*", + "@fluentui/tokens": ">=1.0.0-alpha" }, "dependencies": { - "@swc/helpers": "^0.5.1", - "@fluentui/tokens": "1.0.0-alpha.21" + "@swc/helpers": "^0.5.1" }, "beachball": { "disallowedChangeTypes": [ @@ -42,6 +42,7 @@ "lib-commonjs" ], "scripts": { - "generate-tokens": "ts-node scripts/tokenGen.ts" + "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/scripts/legacyTokens.ts b/packages/semantic-tokens/scripts/legacyTokens.ts new file mode 100644 index 0000000000000..b4c7f13b44815 --- /dev/null +++ b/packages/semantic-tokens/scripts/legacyTokens.ts @@ -0,0 +1,56 @@ +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 './fluentOverrides'; +import { format } from 'prettier'; + +const generateLegacyTokens = () => { + console.log('Importing required fluent legacy tokens as flat export'); + + const semanticTokenFallbacks = Object.keys(fluentOverrides); + 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 fluent2Fallback = fluentOverrides[t].f2Token; + if (!fluent2Fallback) { + return ''; + } + if (!Object.keys(tokensPackage.tokens).includes(fluent2Fallback)) { + // 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 ${fluentOverrides[t].f2Token} not found in fluent tokens`); + } + const tokenValue = tokensPackage.tokens[fluent2Fallback as keyof typeof tokensPackage.tokens]; + const token = `/** + * CSS custom property value for the {@link @fluentui/tokens#${fluent2Fallback} | \`${fluent2Fallback}\`} design token. + * @public + */ + export const ${fluent2Fallback} = '${tokenValue}';\n`; + + 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, { + 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/tokenGen.ts b/packages/semantic-tokens/scripts/tokenGen.ts index 773869e8d93a9..1315e24038d1c 100644 --- a/packages/semantic-tokens/scripts/tokenGen.ts +++ b/packages/semantic-tokens/scripts/tokenGen.ts @@ -34,7 +34,7 @@ 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 `\$\{tokens.${token.f2Token}\}`; + return `\$\{${token.f2Token}\}`; } else { // we only have a raw value so we should print it directly. return `${token.rawValue}`; @@ -51,15 +51,6 @@ const writeDirectoryFile = (filePath: string, data: string) => { project.addSourceFileAtPathIfExists(filePath); }; -const addOptionalTokenImport = (data: string) => { - if (data.includes('tokens.')) { - const esLintIgnore = `// eslint-disable-next-line no-restricted-imports\n`; - const tokenImport = `import { tokens } from '@fluentui/tokens';\n`; - return esLintIgnore + tokenImport + data; - } - return data; -}; - const generateTokenRawStrings = () => { let optionalRawTokens = ''; let controlRawTokens = ''; @@ -214,16 +205,23 @@ const generateTokenVariables = () => { }; for (const [tokensCategory, _tokens] of Object.entries(tokens)) { const filePath = path.join(__dirname, `../src/${tokensCategory}/tokens.ts`); - writeDirectoryFile(filePath, addOptionalTokenImport(_tokens)); + writeDirectoryFile(filePath, _tokens); } for (const [component, _tokens] of Object.entries(componentTokens)) { const componentTokensPath = path.join(__dirname, `../src/components/${component}/tokens.ts`); - writeDirectoryFile(componentTokensPath, addOptionalTokenImport(_tokens)); + 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(); diff --git a/packages/semantic-tokens/src/components/focus/tokens.ts b/packages/semantic-tokens/src/components/focus/tokens.ts index 367a684546214..a993bea38b0cb 100644 --- a/packages/semantic-tokens/src/components/focus/tokens.ts +++ b/packages/semantic-tokens/src/components/focus/tokens.ts @@ -1,6 +1,6 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -import { tokens } from '@fluentui/tokens'; import { strokewidthDefaultRaw, backgroundCtrlBrandRestRaw } from '../../control/variables'; +import { colorStrokeFocus2 } from '../../legacy/tokens'; import { ctrlFocusPositionFigmaonlyRaw, ctrlFocusInnerStrokewidthRaw, @@ -8,8 +8,9 @@ import { ctrlFocusOuterStrokewidthRaw, ctrlFocusOuterStrokeRaw, } from './variables'; + export const ctrlFocusPositionFigmaonly = `var(${ctrlFocusPositionFigmaonlyRaw})`; export const ctrlFocusInnerStrokewidth = `var(${ctrlFocusInnerStrokewidthRaw}, var(${strokewidthDefaultRaw}))`; export const ctrlFocusInnerStroke = `var(${ctrlFocusInnerStrokeRaw})`; export const ctrlFocusOuterStrokewidth = `var(${ctrlFocusOuterStrokewidthRaw})`; -export const ctrlFocusOuterStroke = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${tokens.colorStrokeFocus2}))`; +export const ctrlFocusOuterStroke = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorStrokeFocus2}))`; diff --git a/packages/semantic-tokens/src/components/link/tokens.ts b/packages/semantic-tokens/src/components/link/tokens.ts index 4b0fad2e68a14..65fa5b0999774 100644 --- a/packages/semantic-tokens/src/components/link/tokens.ts +++ b/packages/semantic-tokens/src/components/link/tokens.ts @@ -1,5 +1,4 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -import { tokens } from '@fluentui/tokens'; import { foregroundCtrlNeutralPrimaryRestRaw, strokewidthDefaultRaw, @@ -7,6 +6,14 @@ import { foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, } from '../../control/variables'; +import { + colorNeutralForeground2, + colorNeutralForeground2Hover, + colorNeutralForeground2Pressed, + colorBrandForegroundLink, + colorBrandForegroundLinkHover, + colorBrandForegroundLinkPressed, +} from '../../legacy/tokens'; import { ctrlLinkForegroundNeutralRestRaw, ctrlLinkInlineStrokewidthRestRaw, @@ -25,16 +32,17 @@ import { ctrlLinkInlineShowunderlineatrestRaw, ctrlLinkOnpageShowunderlineatrestRaw, } from './variables'; -export const ctrlLinkForegroundNeutralRest = `var(${ctrlLinkForegroundNeutralRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${tokens.colorNeutralForeground2}))`; + +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 ctrlLinkInlineUnderlineSolidFigmaonly = `var(${ctrlLinkInlineUnderlineSolidFigmaonlyRaw})`; -export const ctrlLinkForegroundNeutralHover = `var(${ctrlLinkForegroundNeutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${tokens.colorNeutralForeground2Hover}))`; -export const ctrlLinkForegroundNeutralPressed = `var(${ctrlLinkForegroundNeutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${tokens.colorNeutralForeground2Pressed}))`; -export const ctrlLinkForegroundBrandRest = `var(${ctrlLinkForegroundBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${tokens.colorBrandForegroundLink}))`; -export const ctrlLinkForegroundBrandHover = `var(${ctrlLinkForegroundBrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw}, ${tokens.colorBrandForegroundLinkHover}))`; -export const ctrlLinkForegroundBrandPressed = `var(${ctrlLinkForegroundBrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw}, ${tokens.colorBrandForegroundLinkPressed}))`; +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})`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index b2528b8a725e1..fda55162ddc38 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -1,5 +1,11 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -import { tokens } from '@fluentui/tokens'; +import { + fontSizeBase300, + fontFamilyBase, + fontWeightRegular, + strokeWidthThin, + colorNeutralForegroundDisabled, +} from '../legacy/tokens'; import { textGlobalDisplay1FontsizeRaw, textGlobalDisplay1LineheightRaw, @@ -210,6 +216,7 @@ import { shadowWindowActiveAmbientRaw, shadowWindowInactiveAmbientRaw, } from './variables'; + export const textGlobalDisplay1Fontsize = `var(${textGlobalDisplay1FontsizeRaw})`; export const textGlobalDisplay1Lineheight = `var(${textGlobalDisplay1LineheightRaw})`; export const textGlobalDisplay2Fontsize = `var(${textGlobalDisplay2FontsizeRaw})`; @@ -226,14 +233,14 @@ export const textGlobalBody1Fontsize = `var(${textGlobalBody1FontsizeRaw})`; export const textGlobalBody1Lineheight = `var(${textGlobalBody1LineheightRaw})`; export const textGlobalBody2Fontsize = `var(${textGlobalBody2FontsizeRaw})`; export const textGlobalBody2Lineheight = `var(${textGlobalBody2LineheightRaw})`; -export const textGlobalBody3Fontsize = `var(${textGlobalBody3FontsizeRaw}, ${tokens.fontSizeBase300})`; +export const textGlobalBody3Fontsize = `var(${textGlobalBody3FontsizeRaw}, ${fontSizeBase300})`; export const textGlobalBody3Lineheight = `var(${textGlobalBody3LineheightRaw})`; export const textGlobalCaption1Fontsize = `var(${textGlobalCaption1FontsizeRaw})`; export const textGlobalCaption1Lineheight = `var(${textGlobalCaption1LineheightRaw})`; export const textGlobalCaption2Fontsize = `var(${textGlobalCaption2FontsizeRaw})`; export const textGlobalCaption2Lineheight = `var(${textGlobalCaption2LineheightRaw})`; -export const textStyleDefaultRegularFontfamily = `var(${textStyleDefaultRegularFontfamilyRaw}, ${tokens.fontFamilyBase})`; -export const textStyleDefaultRegularWeight = `var(${textStyleDefaultRegularWeightRaw}, ${tokens.fontWeightRegular})`; +export const textStyleDefaultRegularFontfamily = `var(${textStyleDefaultRegularFontfamilyRaw}, ${fontFamilyBase})`; +export const textStyleDefaultRegularWeight = `var(${textStyleDefaultRegularWeightRaw}, ${fontWeightRegular})`; export const textStyleDefaultRegularLetterspacing = `var(${textStyleDefaultRegularLetterspacingRaw})`; export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightRaw})`; export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw})`; @@ -293,7 +300,7 @@ export const gapInsideCtrlTolabel = `var(${gapInsideCtrlTolabelRaw})`; export const gapInsideCtrlSmTolabel = `var(${gapInsideCtrlSmTolabelRaw})`; export const gapInsideCtrlLgTolabel = `var(${gapInsideCtrlLgTolabelRaw})`; export const cornerCircular = `var(${cornerCircularRaw})`; -export const strokewidthDefault = `var(${strokewidthDefaultRaw}, ${tokens.strokeWidthThin})`; +export const strokewidthDefault = `var(${strokewidthDefaultRaw}, ${strokeWidthThin})`; export const backgroundSmoke = `var(${backgroundSmokeRaw})`; export const strokeCtrlOnoutlineRest = `var(${strokeCtrlOnoutlineRestRaw})`; export const strokeCtrlOnoutlineHover = `var(${strokeCtrlOnoutlineHoverRaw})`; @@ -348,7 +355,7 @@ export const cornerCtrlSmRest = `var(${cornerCtrlSmRestRaw})`; export const cornerCtrlLgRest = `var(${cornerCtrlLgRestRaw})`; export const cornerImageIncard = `var(${cornerImageIncardRaw})`; export const foregroundCtrlNeutralPrimaryRest = `var(${foregroundCtrlNeutralPrimaryRestRaw})`; -export const foregroundCtrlNeutralPrimaryDisabled = `var(${foregroundCtrlNeutralPrimaryDisabledRaw}, ${tokens.colorNeutralForegroundDisabled})`; +export const foregroundCtrlNeutralPrimaryDisabled = `var(${foregroundCtrlNeutralPrimaryDisabledRaw}, ${colorNeutralForegroundDisabled})`; export const foregroundCtrlNeutralSecondaryRest = `var(${foregroundCtrlNeutralSecondaryRestRaw})`; export const foregroundCtrlNeutralSecondaryDisabled = `var(${foregroundCtrlNeutralSecondaryDisabledRaw})`; export const foregroundCtrlBrandRest = `var(${foregroundCtrlBrandRestRaw})`; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts new file mode 100644 index 0000000000000..d3d7a5ede6886 --- /dev/null +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -0,0 +1,61 @@ +// 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#colorStrokeFocus2 | `colorStrokeFocus2`} design token. + * @public + */ +export const colorStrokeFocus2 = 'var(--colorStrokeFocus2)'; +/** + * 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#fontFamilyBase | `fontFamilyBase`} design token. + * @public + */ +export const fontFamilyBase = 'var(--fontFamilyBase)'; +/** + * 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#fontWeightRegular | `fontWeightRegular`} design token. + * @public + */ +export const fontWeightRegular = 'var(--fontWeightRegular)'; +/** + * 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#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#colorNeutralForeground2 | `colorNeutralForeground2`} design token. + * @public + */ +export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)'; +/** + * 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#colorNeutralForeground2Hover | `colorNeutralForeground2Hover`} design token. + * @public + */ +export const colorNeutralForeground2Hover = 'var(--colorNeutralForeground2Hover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token. + * @public + */ +export const colorNeutralForegroundDisabled = 'var(--colorNeutralForegroundDisabled)'; From 8c45e0e4f817282b578e8c289a20d02a33773d95 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 17 Apr 2025 09:38:59 -0700 Subject: [PATCH 05/66] Semantic-Tokens: React-Link (#34218) --- ...-934b9c1a-08e7-4b38-a2cf-518acb9dd861.json | 7 +++++ .../components/Link/useLinkStyles.styles.ts | 30 ++++++++++--------- 2 files changed, 23 insertions(+), 14 deletions(-) create mode 100644 change/@fluentui-react-link-934b9c1a-08e7-4b38-a2cf-518acb9dd861.json diff --git a/change/@fluentui-react-link-934b9c1a-08e7-4b38-a2cf-518acb9dd861.json b/change/@fluentui-react-link-934b9c1a-08e7-4b38-a2cf-518acb9dd861.json new file mode 100644 index 0000000000000..067c9b5d2f9b4 --- /dev/null +++ b/change/@fluentui-react-link-934b9c1a-08e7-4b38-a2cf-518acb9dd861.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Implement semantic tokens for react-link", + "packageName": "@fluentui/react-link", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts b/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts index df9431726fe82..ac7d580392642 100644 --- a/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts +++ b/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts @@ -1,6 +1,7 @@ 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 type { LinkSlots, LinkState } from './Link.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -10,7 +11,7 @@ export const linkClassNames: SlotClassNames = { const useStyles = makeStyles({ focusIndicator: createCustomFocusIndicatorStyle({ - textDecorationColor: tokens.colorStrokeFocus2, + textDecorationColor: semanticTokens.ctrlFocusOuterStroke, textDecorationLine: 'underline', textDecorationStyle: 'double', outlineStyle: 'none', @@ -22,29 +23,29 @@ const useStyles = makeStyles({ }, backgroundColor: 'transparent', boxSizing: 'border-box', - color: tokens.colorBrandForegroundLink, + color: semanticTokens.ctrlLinkForegroundBrandRest, cursor: 'pointer', display: 'inline', - fontFamily: tokens.fontFamilyBase, - fontSize: tokens.fontSizeBase300, - fontWeight: tokens.fontWeightRegular, + fontFamily: semanticTokens.textStyleDefaultRegularFontfamily, + fontSize: semanticTokens.textGlobalBody3Fontsize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, margin: '0', padding: '0', overflow: 'inherit', textAlign: 'left', textDecorationLine: 'none', - textDecorationThickness: tokens.strokeWidthThin, + textDecorationThickness: semanticTokens.strokewidthDefault, textOverflow: 'inherit', userSelect: 'text', ':hover': { textDecorationLine: 'underline', - color: tokens.colorBrandForegroundLinkHover, + color: semanticTokens.ctrlLinkForegroundBrandHover, }, ':active': { textDecorationLine: 'underline', - color: tokens.colorBrandForegroundLinkPressed, + color: semanticTokens.ctrlLinkForegroundBrandPressed, }, }, // Overrides when the Link renders as a button. @@ -57,16 +58,16 @@ const useStyles = makeStyles({ }, // Overrides when the Link appears subtle. subtle: { - color: tokens.colorNeutralForeground2, + color: semanticTokens.ctrlLinkForegroundNeutralRest, ':hover': { textDecorationLine: 'underline', - color: tokens.colorNeutralForeground2Hover, + color: semanticTokens.ctrlLinkForegroundNeutralHover, }, ':active': { textDecorationLine: 'underline', - color: tokens.colorNeutralForeground2Pressed, + color: semanticTokens.ctrlLinkForegroundNeutralPressed, }, }, // Overrides when the Link is rendered inline within text. @@ -76,20 +77,21 @@ const useStyles = makeStyles({ // Overrides when the Link is disabled. disabled: { textDecorationLine: 'none', - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, cursor: 'not-allowed', ':hover': { textDecorationLine: 'none', - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, }, ':active': { textDecorationLine: 'none', - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, }, }, + // Semantic-tokens does not include inverted tokens, use existing tokens for now. inverted: { color: tokens.colorNeutralForegroundInvertedLink, ':hover': { From af0422d3122889460d3abbfd263d76d545600906 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 17 Apr 2025 12:57:05 -0700 Subject: [PATCH 06/66] Handle duplicate tokens and enable null for f2 overrides (#34277) --- packages/semantic-tokens/scripts/fluentOverrides.ts | 2 +- packages/semantic-tokens/scripts/legacyTokens.ts | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/semantic-tokens/scripts/fluentOverrides.ts b/packages/semantic-tokens/scripts/fluentOverrides.ts index c7823f6698315..dc4a65684eb5f 100644 --- a/packages/semantic-tokens/scripts/fluentOverrides.ts +++ b/packages/semantic-tokens/scripts/fluentOverrides.ts @@ -8,7 +8,7 @@ export type FluentOverrideValue = rawValue: string; }; -export type FluentOverrides = Record; +export type FluentOverrides = Record; export const fluentOverrides: FluentOverrides = { ctrlFocusOuterStroke: { diff --git a/packages/semantic-tokens/scripts/legacyTokens.ts b/packages/semantic-tokens/scripts/legacyTokens.ts index b4c7f13b44815..18378ce0a4983 100644 --- a/packages/semantic-tokens/scripts/legacyTokens.ts +++ b/packages/semantic-tokens/scripts/legacyTokens.ts @@ -10,17 +10,21 @@ 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 fluent2Fallback = fluentOverrides[t].f2Token; - if (!fluent2Fallback) { - return ''; + 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); if (!Object.keys(tokensPackage.tokens).includes(fluent2Fallback)) { // 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 ${fluentOverrides[t].f2Token} not found in fluent tokens`); + throw new Error(`Fluent token ${tokenOverride.f2Token} not found in fluent tokens`); } const tokenValue = tokensPackage.tokens[fluent2Fallback as keyof typeof tokensPackage.tokens]; const token = `/** From 69662113c878a5a2eb239829bf100cde4a33fb3f Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 8 May 2025 13:00:54 -0700 Subject: [PATCH 07/66] Extended-tokens: Cleanup token exports (#34384) --- .../etc/semantic-tokens.api.md | 96 ------------------- packages/semantic-tokens/scripts/tokenGen.ts | 28 +++++- .../src/components/badge/tokens.ts | 6 -- .../src/components/badge/variables.ts | 3 - .../src/components/choice/tokens.ts | 4 - .../src/components/choice/variables.ts | 2 - .../src/components/focus/tokens.ts | 2 - .../src/components/focus/variables.ts | 1 - .../src/components/link/tokens.ts | 4 - .../src/components/link/variables.ts | 2 - .../src/components/list/tokens.ts | 4 - .../src/components/list/variables.ts | 2 - .../semantic-tokens/src/control/tokens.ts | 12 --- .../semantic-tokens/src/control/variables.ts | 6 -- packages/semantic-tokens/src/index.ts | 32 ------- 15 files changed, 25 insertions(+), 179 deletions(-) diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 7b374832feba3..f1c560a5c3db4 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -751,12 +751,6 @@ export const ctrlBadgeGapRaw = "--smtc-ctrl-badge-gap"; // @public (undocumented) export const ctrlBadgeIconSize = "var(--smtc-ctrl-badge-icon-size)"; -// @public (undocumented) -export const ctrlBadgeIconSizeFigmaonly = "var(--smtc-ctrl-badge-icon-sizefigmaonly)"; - -// @public (undocumented) -export const ctrlBadgeIconSizeFigmaonlyRaw = "--smtc-ctrl-badge-icon-sizefigmaonly"; - // @public (undocumented) export const ctrlBadgeIconSizeRaw = "--smtc-ctrl-badge-icon-size"; @@ -775,12 +769,6 @@ export const ctrlBadgeLgCornerRaw = "--smtc-ctrl-badge-lg-corner"; // @public (undocumented) export const ctrlBadgeLgIconSize = "var(--smtc-ctrl-badge-lg-icon-size)"; -// @public (undocumented) -export const ctrlBadgeLgIconSizeFigmaonly = "var(--smtc-ctrl-badge-lg-icon-sizefigmaonly)"; - -// @public (undocumented) -export const ctrlBadgeLgIconSizeFigmaonlyRaw = "--smtc-ctrl-badge-lg-icon-sizefigmaonly"; - // @public (undocumented) export const ctrlBadgeLgIconSizeRaw = "--smtc-ctrl-badge-lg-icon-size"; @@ -829,12 +817,6 @@ export const ctrlBadgeSmCornerRaw = "--smtc-ctrl-badge-sm-corner"; // @public (undocumented) export const ctrlBadgeSmIconSize = "var(--smtc-ctrl-badge-sm-icon-size)"; -// @public (undocumented) -export const ctrlBadgeSmIconSizeFigmaonly = "var(--smtc-ctrl-badge-sm-icon-sizefigmaonly)"; - -// @public (undocumented) -export const ctrlBadgeSmIconSizeFigmaonlyRaw = "--smtc-ctrl-badge-sm-icon-sizefigmaonly"; - // @public (undocumented) export const ctrlBadgeSmIconSizeRaw = "--smtc-ctrl-badge-sm-icon-size"; @@ -1009,12 +991,6 @@ export const ctrlChoiceLgCheckboxCornerRaw = "--smtc-ctrl-choice-lg-checkbox-cor // @public (undocumented) export const ctrlChoiceLgCheckboxIconSize = "var(--smtc-ctrl-choice-lg-checkbox-icon-size, var(--smtc-size-ctrl-iconsecondary))"; -// @public (undocumented) -export const ctrlChoiceLgCheckboxIconSizeFigmaonly = "var(--smtc-ctrl-choice-lg-checkbox-icon-sizefigmaonly)"; - -// @public (undocumented) -export const ctrlChoiceLgCheckboxIconSizeFigmaonlyRaw = "--smtc-ctrl-choice-lg-checkbox-icon-sizefigmaonly"; - // @public (undocumented) export const ctrlChoiceLgCheckboxIconSizeRaw = "--smtc-ctrl-choice-lg-checkbox-icon-size"; @@ -1117,12 +1093,6 @@ export const ctrlChoiceSmCheckboxCornerRaw = "--smtc-ctrl-choice-sm-checkbox-cor // @public (undocumented) export const ctrlChoiceSmCheckboxIconSize = "var(--smtc-ctrl-choice-sm-checkbox-icon-size, var(--smtc-size-ctrl-iconsecondary))"; -// @public (undocumented) -export const ctrlChoiceSmCheckboxIconSizeFigmaonly = "var(--smtc-ctrl-choice-sm-checkbox-icon-sizefigmaonly)"; - -// @public (undocumented) -export const ctrlChoiceSmCheckboxIconSizeFigmaonlyRaw = "--smtc-ctrl-choice-sm-checkbox-icon-sizefigmaonly"; - // @public (undocumented) export const ctrlChoiceSmCheckboxIconSizeRaw = "--smtc-ctrl-choice-sm-checkbox-icon-size"; @@ -1594,12 +1564,6 @@ export const ctrlFocusOuterStrokewidth = "var(--smtc-ctrl-focus-outer-strokewidt // @public (undocumented) export const ctrlFocusOuterStrokewidthRaw = "--smtc-ctrl-focus-outer-strokewidth"; -// @public (undocumented) -export const ctrlFocusPositionFigmaonly = "var(--smtc-ctrl-focus-positionfigmaonly)"; - -// @public (undocumented) -export const ctrlFocusPositionFigmaonlyRaw = "--smtc-ctrl-focus-positionfigmaonly"; - // @public (undocumented) export const ctrlInputBackgroundDisabled = "var(--smtc-ctrl-input-background-disabled, var(--smtc-background-ctrl-neutral-disabled))"; @@ -1828,12 +1792,6 @@ export const ctrlLinkInlineUnderlineDashed = "var(--smtc-ctrl-link-inline-underl // @public (undocumented) export const ctrlLinkInlineUnderlineDashedRaw = "--smtc-ctrl-link-inline-underline-dashed"; -// @public (undocumented) -export const ctrlLinkInlineUnderlineSolidFigmaonly = "var(--smtc-ctrl-link-inline-underline-solidfigmaonly)"; - -// @public (undocumented) -export const ctrlLinkInlineUnderlineSolidFigmaonlyRaw = "--smtc-ctrl-link-inline-underline-solidfigmaonly"; - // @public (undocumented) export const ctrlLinkOnpageShowunderlineatrest = "var(--smtc-ctrl-link-onpage-showunderlineatrest)"; @@ -1858,12 +1816,6 @@ export const ctrlLinkOnpageUnderlineDashed = "var(--smtc-ctrl-link-onpage-underl // @public (undocumented) export const ctrlLinkOnpageUnderlineDashedRaw = "--smtc-ctrl-link-onpage-underline-dashed"; -// @public (undocumented) -export const ctrlLinkOnpageUnderlineSolidFigmaonly = "var(--smtc-ctrl-link-onpage-underline-solidfigmaonly)"; - -// @public (undocumented) -export const ctrlLinkOnpageUnderlineSolidFigmaonlyRaw = "--smtc-ctrl-link-onpage-underline-solidfigmaonly"; - // @public (undocumented) export const ctrlListBackgroundSelectedDisabled = "var(--smtc-ctrl-list-background-selected-disabled, var(--smtc-background-ctrl-subtle-disabled))"; @@ -1921,24 +1873,12 @@ export const ctrlListChoiceCheckboxCornerRaw = "--smtc-ctrl-list-choice-checkbox // @public (undocumented) export const ctrlListChoiceCheckboxIconSize = "var(--smtc-ctrl-list-choice-checkbox-icon-size, var(--smtc-size-ctrl-iconsecondary))"; -// @public (undocumented) -export const ctrlListChoiceCheckboxIconSizeFigmaonly = "var(--smtc-ctrl-list-choice-checkbox-icon-sizefigmaonly)"; - -// @public (undocumented) -export const ctrlListChoiceCheckboxIconSizeFigmaonlyRaw = "--smtc-ctrl-list-choice-checkbox-icon-sizefigmaonly"; - // @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 ctrlListChoiceDotSizeFigmaonly = "var(--smtc-ctrl-list-choice-dot-sizefigmaonly)"; - -// @public (undocumented) -export const ctrlListChoiceDotSizeFigmaonlyRaw = "--smtc-ctrl-list-choice-dot-sizefigmaonly"; - // @public (undocumented) export const ctrlListChoiceDotSizeRaw = "--smtc-ctrl-list-choice-dot-size"; @@ -3418,24 +3358,6 @@ export const materialMicaThinSolid = "var(--smtc-material-mica-thin-solid, var(- // @public (undocumented) export const materialMicaThinSolidRaw = "--smtc-material-mica-thin-solid"; -// @public (undocumented) -export const nullColor = "var(--smtc-null-color)"; - -// @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-nestedimage, var(--smtc-padding-content-align-default))"; @@ -3739,12 +3661,6 @@ export const sizeCtrlDefaultRaw = "--smtc-size-ctrl-default"; // @public (undocumented) export const sizeCtrlIcon = "var(--smtc-size-ctrl-icon)"; -// @public (undocumented) -export const sizeCtrlIconFigmaonly = "var(--smtc-size-ctrl-iconfigmaonly)"; - -// @public (undocumented) -export const sizeCtrlIconFigmaonlyRaw = "--smtc-size-ctrl-iconfigmaonly"; - // @public (undocumented) export const sizeCtrlIconRaw = "--smtc-size-ctrl-icon"; @@ -3763,12 +3679,6 @@ export const sizeCtrlLgDefaultRaw = "--smtc-size-ctrl-lg-default"; // @public (undocumented) export const sizeCtrlLgIcon = "var(--smtc-size-ctrl-lg-icon)"; -// @public (undocumented) -export const sizeCtrlLgIconFigmaonly = "var(--smtc-size-ctrl-lg-iconfigmaonly)"; - -// @public (undocumented) -export const sizeCtrlLgIconFigmaonlyRaw = "--smtc-size-ctrl-lg-iconfigmaonly"; - // @public (undocumented) export const sizeCtrlLgIconRaw = "--smtc-size-ctrl-lg-icon"; @@ -3781,12 +3691,6 @@ export const sizeCtrlSmDefaultRaw = "--smtc-size-ctrl-sm-default"; // @public (undocumented) export const sizeCtrlSmIcon = "var(--smtc-size-ctrl-sm-icon)"; -// @public (undocumented) -export const sizeCtrlSmIconFigmaonly = "var(--smtc-size-ctrl-sm-iconfigmaonly)"; - -// @public (undocumented) -export const sizeCtrlSmIconFigmaonlyRaw = "--smtc-size-ctrl-sm-iconfigmaonly"; - // @public (undocumented) export const sizeCtrlSmIconRaw = "--smtc-size-ctrl-sm-icon"; diff --git a/packages/semantic-tokens/scripts/tokenGen.ts b/packages/semantic-tokens/scripts/tokenGen.ts index 1315e24038d1c..bf9fe07058c06 100644 --- a/packages/semantic-tokens/scripts/tokenGen.ts +++ b/packages/semantic-tokens/scripts/tokenGen.ts @@ -41,6 +41,19 @@ const escapeMixedInlineToken = (token: FluentOverrideValue) => { } }; +const isInvalidToken = (token: string) => { + // Safety check string exists + if (token.length === 0) { + return true; + } + // Blacklist for non-valid tokens + if (token.includes('Figmaonly') || token.startsWith('null')) { + // Superfluous tokens - SKIP + return true; + } + return false; +}; + const writeDirectoryFile = (filePath: string, data: string) => { const dirPath = removeLastDelimiter(filePath, path.sep); if (!fs.existsSync(dirPath)) { @@ -65,6 +78,11 @@ const generateTokenRawStrings = () => { 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; @@ -113,8 +131,8 @@ const tokenExport = (token: string, resolvedTokenFallback: string) => { }; const getResolvedToken = (token: string, tokenData: Token, tokenNameRaw: string) => { - const tokenSemanticRef = - tokenData.fst_reference.length > 0 ? toCamelCase(cleanFstTokenName(tokenData.fst_reference)) + 'Raw' : null; + const fstReferenceName = toCamelCase(cleanFstTokenName(tokenData.fst_reference)); + const tokenSemanticRef = isInvalidToken(fstReferenceName) ? null : fstReferenceName + 'Raw'; const fluentFallback = fluentFallbacks[token]; @@ -124,6 +142,10 @@ const getResolvedToken = (token: string, tokenData: Token, tokenNameRaw: string) )}, ${escapeMixedInlineToken(fluentFallback)}))`; } + if (fluentFallback && tokenData.nullable) { + return `var(${escapeInlineToken(tokenNameRaw)}, var(${escapeMixedInlineToken(fluentFallback)}}, unset))`; + } + if (fluentFallback) { return `var(${escapeInlineToken(tokenNameRaw)}, ${escapeMixedInlineToken(fluentFallback)})`; } @@ -154,7 +176,7 @@ const generateTokenVariables = () => { const getComponentFile = (component: string) => path.join(__dirname, `../src/components/${component}/tokens.ts`); for (const token in tokensJSON) { - if (token.includes('(figma only)')) { + if (isInvalidToken(token)) { // Superfluous tokens - SKIP continue; } diff --git a/packages/semantic-tokens/src/components/badge/tokens.ts b/packages/semantic-tokens/src/components/badge/tokens.ts index 1c4dcafe7cc15..f61e9b6b20189 100644 --- a/packages/semantic-tokens/src/components/badge/tokens.ts +++ b/packages/semantic-tokens/src/components/badge/tokens.ts @@ -11,17 +11,14 @@ import { ctrlBadgeBeaconSizeRaw, ctrlBadgeSizeRaw, ctrlBadgeCornerRaw, - ctrlBadgeIconSizeFigmaonlyRaw, ctrlBadgeGapRaw, ctrlBadgeIconSizeRaw, ctrlBadgePaddingRaw, ctrlBadgeSmSizeRaw, ctrlBadgeSmCornerRaw, - ctrlBadgeSmIconSizeFigmaonlyRaw, ctrlBadgeSmIconSizeRaw, ctrlBadgeSmPaddingRaw, ctrlBadgeLgSizeRaw, - ctrlBadgeLgIconSizeFigmaonlyRaw, ctrlBadgeLgIconSizeRaw, ctrlBadgeLgCornerRaw, ctrlBadgeLgPaddingRaw, @@ -37,17 +34,14 @@ export const ctrlBadgeIconTheme = `var(${ctrlBadgeIconThemeRaw}, var(${icontheme export const ctrlBadgeBeaconSize = `var(${ctrlBadgeBeaconSizeRaw})`; export const ctrlBadgeSize = `var(${ctrlBadgeSizeRaw})`; export const ctrlBadgeCorner = `var(${ctrlBadgeCornerRaw})`; -export const ctrlBadgeIconSizeFigmaonly = `var(${ctrlBadgeIconSizeFigmaonlyRaw})`; export const ctrlBadgeGap = `var(${ctrlBadgeGapRaw})`; export const ctrlBadgeIconSize = `var(${ctrlBadgeIconSizeRaw})`; export const ctrlBadgePadding = `var(${ctrlBadgePaddingRaw})`; export const ctrlBadgeSmSize = `var(${ctrlBadgeSmSizeRaw})`; export const ctrlBadgeSmCorner = `var(${ctrlBadgeSmCornerRaw})`; -export const ctrlBadgeSmIconSizeFigmaonly = `var(${ctrlBadgeSmIconSizeFigmaonlyRaw})`; export const ctrlBadgeSmIconSize = `var(${ctrlBadgeSmIconSizeRaw})`; export const ctrlBadgeSmPadding = `var(${ctrlBadgeSmPaddingRaw})`; export const ctrlBadgeLgSize = `var(${ctrlBadgeLgSizeRaw})`; -export const ctrlBadgeLgIconSizeFigmaonly = `var(${ctrlBadgeLgIconSizeFigmaonlyRaw})`; export const ctrlBadgeLgIconSize = `var(${ctrlBadgeLgIconSizeRaw})`; export const ctrlBadgeLgCorner = `var(${ctrlBadgeLgCornerRaw})`; export const ctrlBadgeLgPadding = `var(${ctrlBadgeLgPaddingRaw})`; diff --git a/packages/semantic-tokens/src/components/badge/variables.ts b/packages/semantic-tokens/src/components/badge/variables.ts index d6006af4fae06..2ed0c030dd6b6 100644 --- a/packages/semantic-tokens/src/components/badge/variables.ts +++ b/packages/semantic-tokens/src/components/badge/variables.ts @@ -9,17 +9,14 @@ 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 ctrlBadgeIconSizeFigmaonlyRaw = '--smtc-ctrl-badge-icon-sizefigmaonly'; 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 ctrlBadgeSmIconSizeFigmaonlyRaw = '--smtc-ctrl-badge-sm-icon-sizefigmaonly'; 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 ctrlBadgeLgIconSizeFigmaonlyRaw = '--smtc-ctrl-badge-lg-icon-sizefigmaonly'; 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/choice/tokens.ts b/packages/semantic-tokens/src/components/choice/tokens.ts index 302c1aff661a9..33efac35323d7 100644 --- a/packages/semantic-tokens/src/components/choice/tokens.ts +++ b/packages/semantic-tokens/src/components/choice/tokens.ts @@ -48,7 +48,6 @@ import { ctrlChoiceSmBaseSizeRaw, ctrlChoiceSmCheckboxCornerRaw, ctrlChoiceSmCheckboxIconSizeRaw, - ctrlChoiceSmCheckboxIconSizeFigmaonlyRaw, ctrlChoiceSmRadioDotSizeRaw, ctrlChoiceSmSwitchWidthRaw, ctrlChoiceSmSwitchHeightRaw, @@ -58,7 +57,6 @@ import { ctrlChoiceLgBaseSizeRaw, ctrlChoiceLgCheckboxCornerRaw, ctrlChoiceLgCheckboxIconSizeRaw, - ctrlChoiceLgCheckboxIconSizeFigmaonlyRaw, ctrlChoiceLgRadioDotSizeRestRaw, ctrlChoiceLgRadioDotSizeHoverRaw, ctrlChoiceLgRadioDotSizePressedRaw, @@ -104,7 +102,6 @@ export const ctrlChoiceSwitchThumbWidthPressed = `var(${ctrlChoiceSwitchThumbWid export const ctrlChoiceSmBaseSize = `var(${ctrlChoiceSmBaseSizeRaw}, var(${sizeCtrlSmIconRaw}))`; export const ctrlChoiceSmCheckboxCorner = `var(${ctrlChoiceSmCheckboxCornerRaw})`; export const ctrlChoiceSmCheckboxIconSize = `var(${ctrlChoiceSmCheckboxIconSizeRaw}, var(${sizeCtrlIconsecondaryRaw}))`; -export const ctrlChoiceSmCheckboxIconSizeFigmaonly = `var(${ctrlChoiceSmCheckboxIconSizeFigmaonlyRaw})`; export const ctrlChoiceSmRadioDotSize = `var(${ctrlChoiceSmRadioDotSizeRaw})`; export const ctrlChoiceSmSwitchWidth = `var(${ctrlChoiceSmSwitchWidthRaw})`; export const ctrlChoiceSmSwitchHeight = `var(${ctrlChoiceSmSwitchHeightRaw}, var(${sizeCtrlSmIconRaw}))`; @@ -114,7 +111,6 @@ export const ctrlChoiceSmSwitchThumbWidthPressed = `var(${ctrlChoiceSmSwitchThum export const ctrlChoiceLgBaseSize = `var(${ctrlChoiceLgBaseSizeRaw}, var(${sizeCtrlLgIconRaw}))`; export const ctrlChoiceLgCheckboxCorner = `var(${ctrlChoiceLgCheckboxCornerRaw})`; export const ctrlChoiceLgCheckboxIconSize = `var(${ctrlChoiceLgCheckboxIconSizeRaw}, var(${sizeCtrlIconsecondaryRaw}))`; -export const ctrlChoiceLgCheckboxIconSizeFigmaonly = `var(${ctrlChoiceLgCheckboxIconSizeFigmaonlyRaw})`; export const ctrlChoiceLgRadioDotSizeRest = `var(${ctrlChoiceLgRadioDotSizeRestRaw})`; export const ctrlChoiceLgRadioDotSizeHover = `var(${ctrlChoiceLgRadioDotSizeHoverRaw}, var(${ctrlChoiceLgRadioDotSizeRestRaw}))`; export const ctrlChoiceLgRadioDotSizePressed = `var(${ctrlChoiceLgRadioDotSizePressedRaw}, var(${ctrlChoiceLgRadioDotSizeRestRaw}))`; diff --git a/packages/semantic-tokens/src/components/choice/variables.ts b/packages/semantic-tokens/src/components/choice/variables.ts index e23b81d4e35a2..3daa190931adc 100644 --- a/packages/semantic-tokens/src/components/choice/variables.ts +++ b/packages/semantic-tokens/src/components/choice/variables.ts @@ -32,7 +32,6 @@ export const ctrlChoiceSwitchThumbWidthPressedRaw = '--smtc-ctrl-choice-switch-t export const ctrlChoiceSmBaseSizeRaw = '--smtc-ctrl-choice-sm-base-size'; export const ctrlChoiceSmCheckboxCornerRaw = '--smtc-ctrl-choice-sm-checkbox-corner'; export const ctrlChoiceSmCheckboxIconSizeRaw = '--smtc-ctrl-choice-sm-checkbox-icon-size'; -export const ctrlChoiceSmCheckboxIconSizeFigmaonlyRaw = '--smtc-ctrl-choice-sm-checkbox-icon-sizefigmaonly'; 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'; @@ -42,7 +41,6 @@ export const ctrlChoiceSmSwitchThumbWidthPressedRaw = '--smtc-ctrl-choice-sm-swi 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 ctrlChoiceLgCheckboxIconSizeFigmaonlyRaw = '--smtc-ctrl-choice-lg-checkbox-icon-sizefigmaonly'; 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'; diff --git a/packages/semantic-tokens/src/components/focus/tokens.ts b/packages/semantic-tokens/src/components/focus/tokens.ts index a993bea38b0cb..8309a95112d63 100644 --- a/packages/semantic-tokens/src/components/focus/tokens.ts +++ b/packages/semantic-tokens/src/components/focus/tokens.ts @@ -2,14 +2,12 @@ import { strokewidthDefaultRaw, backgroundCtrlBrandRestRaw } from '../../control/variables'; import { colorStrokeFocus2 } from '../../legacy/tokens'; import { - ctrlFocusPositionFigmaonlyRaw, ctrlFocusInnerStrokewidthRaw, ctrlFocusInnerStrokeRaw, ctrlFocusOuterStrokewidthRaw, ctrlFocusOuterStrokeRaw, } from './variables'; -export const ctrlFocusPositionFigmaonly = `var(${ctrlFocusPositionFigmaonlyRaw})`; export const ctrlFocusInnerStrokewidth = `var(${ctrlFocusInnerStrokewidthRaw}, var(${strokewidthDefaultRaw}))`; export const ctrlFocusInnerStroke = `var(${ctrlFocusInnerStrokeRaw})`; export const ctrlFocusOuterStrokewidth = `var(${ctrlFocusOuterStrokewidthRaw})`; diff --git a/packages/semantic-tokens/src/components/focus/variables.ts b/packages/semantic-tokens/src/components/focus/variables.ts index 7d9143f3a827c..f8b033f70460d 100644 --- a/packages/semantic-tokens/src/components/focus/variables.ts +++ b/packages/semantic-tokens/src/components/focus/variables.ts @@ -1,5 +1,4 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -export const ctrlFocusPositionFigmaonlyRaw = '--smtc-ctrl-focus-positionfigmaonly'; export const ctrlFocusInnerStrokewidthRaw = '--smtc-ctrl-focus-inner-strokewidth'; export const ctrlFocusInnerStrokeRaw = '--smtc-ctrl-focus-inner-stroke'; export const ctrlFocusOuterStrokewidthRaw = '--smtc-ctrl-focus-outer-strokewidth'; diff --git a/packages/semantic-tokens/src/components/link/tokens.ts b/packages/semantic-tokens/src/components/link/tokens.ts index 65fa5b0999774..3624d46f8b303 100644 --- a/packages/semantic-tokens/src/components/link/tokens.ts +++ b/packages/semantic-tokens/src/components/link/tokens.ts @@ -19,7 +19,6 @@ import { ctrlLinkInlineStrokewidthRestRaw, ctrlLinkInlineStrokewidthHoverRaw, ctrlLinkInlineUnderlineDashedRaw, - ctrlLinkInlineUnderlineSolidFigmaonlyRaw, ctrlLinkForegroundNeutralHoverRaw, ctrlLinkForegroundNeutralPressedRaw, ctrlLinkForegroundBrandRestRaw, @@ -28,7 +27,6 @@ import { ctrlLinkOnpageStrokewidthRestRaw, ctrlLinkOnpageStrokewidthHoverRaw, ctrlLinkOnpageUnderlineDashedRaw, - ctrlLinkOnpageUnderlineSolidFigmaonlyRaw, ctrlLinkInlineShowunderlineatrestRaw, ctrlLinkOnpageShowunderlineatrestRaw, } from './variables'; @@ -37,7 +35,6 @@ export const ctrlLinkForegroundNeutralRest = `var(${ctrlLinkForegroundNeutralRes export const ctrlLinkInlineStrokewidthRest = `var(${ctrlLinkInlineStrokewidthRestRaw}, var(${strokewidthDefaultRaw}))`; export const ctrlLinkInlineStrokewidthHover = `var(${ctrlLinkInlineStrokewidthHoverRaw}, var(${strokewidthDefaultRaw}))`; export const ctrlLinkInlineUnderlineDashed = `var(${ctrlLinkInlineUnderlineDashedRaw})`; -export const ctrlLinkInlineUnderlineSolidFigmaonly = `var(${ctrlLinkInlineUnderlineSolidFigmaonlyRaw})`; export const ctrlLinkForegroundNeutralHover = `var(${ctrlLinkForegroundNeutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2Hover}))`; export const ctrlLinkForegroundNeutralPressed = `var(${ctrlLinkForegroundNeutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2Pressed}))`; export const ctrlLinkForegroundBrandRest = `var(${ctrlLinkForegroundBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForegroundLink}))`; @@ -46,6 +43,5 @@ export const ctrlLinkForegroundBrandPressed = `var(${ctrlLinkForegroundBrandPres export const ctrlLinkOnpageStrokewidthRest = `var(${ctrlLinkOnpageStrokewidthRestRaw}, var(${strokewidthDefaultRaw}))`; export const ctrlLinkOnpageStrokewidthHover = `var(${ctrlLinkOnpageStrokewidthHoverRaw}, var(${strokewidthDefaultRaw}))`; export const ctrlLinkOnpageUnderlineDashed = `var(${ctrlLinkOnpageUnderlineDashedRaw})`; -export const ctrlLinkOnpageUnderlineSolidFigmaonly = `var(${ctrlLinkOnpageUnderlineSolidFigmaonlyRaw})`; 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 index 065dfd097448e..e0f98462687aa 100644 --- a/packages/semantic-tokens/src/components/link/variables.ts +++ b/packages/semantic-tokens/src/components/link/variables.ts @@ -3,7 +3,6 @@ export const ctrlLinkForegroundNeutralRestRaw = '--smtc-ctrl-link-foreground-neu export const ctrlLinkInlineStrokewidthRestRaw = '--smtc-ctrl-link-inline-strokewidth-rest'; export const ctrlLinkInlineStrokewidthHoverRaw = '--smtc-ctrl-link-inline-strokewidth-hover'; export const ctrlLinkInlineUnderlineDashedRaw = '--smtc-ctrl-link-inline-underline-dashed'; -export const ctrlLinkInlineUnderlineSolidFigmaonlyRaw = '--smtc-ctrl-link-inline-underline-solidfigmaonly'; 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'; @@ -12,6 +11,5 @@ export const ctrlLinkForegroundBrandPressedRaw = '--smtc-ctrl-link-foreground-br export const ctrlLinkOnpageStrokewidthRestRaw = '--smtc-ctrl-link-onpage-strokewidth-rest'; export const ctrlLinkOnpageStrokewidthHoverRaw = '--smtc-ctrl-link-onpage-strokewidth-hover'; export const ctrlLinkOnpageUnderlineDashedRaw = '--smtc-ctrl-link-onpage-underline-dashed'; -export const ctrlLinkOnpageUnderlineSolidFigmaonlyRaw = '--smtc-ctrl-link-onpage-underline-solidfigmaonly'; export const ctrlLinkInlineShowunderlineatrestRaw = '--smtc-ctrl-link-inline-showunderlineatrest'; export const ctrlLinkOnpageShowunderlineatrestRaw = '--smtc-ctrl-link-onpage-showunderlineatrest'; diff --git a/packages/semantic-tokens/src/components/list/tokens.ts b/packages/semantic-tokens/src/components/list/tokens.ts index df7dcad9d443f..1895fca678faf 100644 --- a/packages/semantic-tokens/src/components/list/tokens.ts +++ b/packages/semantic-tokens/src/components/list/tokens.ts @@ -51,9 +51,7 @@ import { ctrlListChoiceBackgroundSelectedDisabledRaw, ctrlListChoiceCheckboxCornerRaw, ctrlListChoiceCheckboxIconSizeRaw, - ctrlListChoiceCheckboxIconSizeFigmaonlyRaw, ctrlListChoiceDotSizeRaw, - ctrlListChoiceDotSizeFigmaonlyRaw, ctrlListSplitDividerPaddingInsetRaw, ctrlListSplitDividerStrokeRaw, ctrlListSmCornerRestRaw, @@ -104,9 +102,7 @@ export const ctrlListChoiceBackgroundSelectedRest = `var(${ctrlListChoiceBackgro export const ctrlListChoiceBackgroundSelectedDisabled = `var(${ctrlListChoiceBackgroundSelectedDisabledRaw}, unset)`; export const ctrlListChoiceCheckboxCorner = `var(${ctrlListChoiceCheckboxCornerRaw}, var(${ctrlChoiceCheckboxCornerRaw}))`; export const ctrlListChoiceCheckboxIconSize = `var(${ctrlListChoiceCheckboxIconSizeRaw}, var(${sizeCtrlIconsecondaryRaw}))`; -export const ctrlListChoiceCheckboxIconSizeFigmaonly = `var(${ctrlListChoiceCheckboxIconSizeFigmaonlyRaw})`; export const ctrlListChoiceDotSize = `var(${ctrlListChoiceDotSizeRaw})`; -export const ctrlListChoiceDotSizeFigmaonly = `var(${ctrlListChoiceDotSizeFigmaonlyRaw})`; export const ctrlListSplitDividerPaddingInset = `var(${ctrlListSplitDividerPaddingInsetRaw})`; export const ctrlListSplitDividerStroke = `var(${ctrlListSplitDividerStrokeRaw}, var(${strokeCtrlDividerOnneutralRaw}))`; export const ctrlListSmCornerRest = `var(${ctrlListSmCornerRestRaw}, var(${cornerCtrlSmRestRaw}))`; diff --git a/packages/semantic-tokens/src/components/list/variables.ts b/packages/semantic-tokens/src/components/list/variables.ts index 67db5e2c3fb6c..78307fed6d50e 100644 --- a/packages/semantic-tokens/src/components/list/variables.ts +++ b/packages/semantic-tokens/src/components/list/variables.ts @@ -30,9 +30,7 @@ export const ctrlListChoiceBackgroundSelectedRestRaw = '--smtc-ctrl-list-choice- 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 ctrlListChoiceCheckboxIconSizeFigmaonlyRaw = '--smtc-ctrl-list-choice-checkbox-icon-sizefigmaonly'; export const ctrlListChoiceDotSizeRaw = '--smtc-ctrl-list-choice-dot-size'; -export const ctrlListChoiceDotSizeFigmaonlyRaw = '--smtc-ctrl-list-choice-dot-sizefigmaonly'; 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'; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index fda55162ddc38..bc72d2183a50d 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -35,15 +35,12 @@ import { textStyleDefaultHeaderWeightRaw, sizeCtrlDefaultRaw, sizeCtrlIconRaw, - sizeCtrlIconFigmaonlyRaw, sizeCtrlIconsecondaryRaw, textCtrlWeightSelectedRaw, sizeCtrlSmDefaultRaw, sizeCtrlSmIconRaw, sizeCtrlLgDefaultRaw, sizeCtrlLgIconRaw, - sizeCtrlSmIconFigmaonlyRaw, - sizeCtrlLgIconFigmaonlyRaw, paddingContentAlignDefaultRaw, paddingContentAlignOutdentIcononsubtleRaw, paddingContentAlignOutdentTextonsubtleRaw, @@ -190,12 +187,9 @@ import { aiShimmerStop2Raw, aiShimmerStop3Raw, aiShimmerStop4Raw, - nullColorRaw, statusNeutralBackgroundRaw, statusNeutralTintBackgroundRaw, statusNeutralTintStrokeRaw, - nullNumberRaw, - nullStringRaw, backgroundCardOnsecondaryDefaultRestRaw, backgroundCardOnsecondaryAltRestRaw, backgroundCardOnsecondaryAltHoverRaw, @@ -245,15 +239,12 @@ export const textStyleDefaultRegularLetterspacing = `var(${textStyleDefaultRegul export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightRaw})`; export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw})`; export const sizeCtrlIcon = `var(${sizeCtrlIconRaw})`; -export const sizeCtrlIconFigmaonly = `var(${sizeCtrlIconFigmaonlyRaw})`; export const sizeCtrlIconsecondary = `var(${sizeCtrlIconsecondaryRaw})`; export const textCtrlWeightSelected = `var(${textCtrlWeightSelectedRaw})`; export const sizeCtrlSmDefault = `var(${sizeCtrlSmDefaultRaw})`; export const sizeCtrlSmIcon = `var(${sizeCtrlSmIconRaw})`; export const sizeCtrlLgDefault = `var(${sizeCtrlLgDefaultRaw})`; export const sizeCtrlLgIcon = `var(${sizeCtrlLgIconRaw})`; -export const sizeCtrlSmIconFigmaonly = `var(${sizeCtrlSmIconFigmaonlyRaw})`; -export const sizeCtrlLgIconFigmaonly = `var(${sizeCtrlLgIconFigmaonlyRaw})`; export const paddingContentAlignDefault = `var(${paddingContentAlignDefaultRaw})`; export const paddingContentAlignOutdentIcononsubtle = `var(${paddingContentAlignOutdentIcononsubtleRaw})`; export const paddingContentAlignOutdentTextonsubtle = `var(${paddingContentAlignOutdentTextonsubtleRaw})`; @@ -400,12 +391,9 @@ 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})`; 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})`; diff --git a/packages/semantic-tokens/src/control/variables.ts b/packages/semantic-tokens/src/control/variables.ts index 798418fcdc610..88652a7ff2716 100644 --- a/packages/semantic-tokens/src/control/variables.ts +++ b/packages/semantic-tokens/src/control/variables.ts @@ -27,15 +27,12 @@ export const textStyleDefaultRegularLetterspacingRaw = '--smtc-text-style-defaul 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 sizeCtrlIconFigmaonlyRaw = '--smtc-size-ctrl-iconfigmaonly'; export const sizeCtrlIconsecondaryRaw = '--smtc-size-ctrl-iconsecondary'; 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 sizeCtrlSmIconFigmaonlyRaw = '--smtc-size-ctrl-sm-iconfigmaonly'; -export const sizeCtrlLgIconFigmaonlyRaw = '--smtc-size-ctrl-lg-iconfigmaonly'; export const paddingContentAlignDefaultRaw = '--smtc-padding-content-align-default'; export const paddingContentAlignOutdentIcononsubtleRaw = '--smtc-padding-content-align-outdent-icononsubtle'; export const paddingContentAlignOutdentTextonsubtleRaw = '--smtc-padding-content-align-outdent-textonsubtle'; @@ -182,12 +179,9 @@ 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-onsecondary-default-rest'; export const backgroundCardOnsecondaryAltRestRaw = '--smtc-background-card-onsecondary-alt-rest'; export const backgroundCardOnsecondaryAltHoverRaw = '--smtc-background-card-onsecondary-alt-hover'; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 143489db536a8..96b92ff6c909d 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -280,15 +280,12 @@ export { textStyleDefaultHeaderWeightRaw, sizeCtrlDefaultRaw, sizeCtrlIconRaw, - sizeCtrlIconFigmaonlyRaw, sizeCtrlIconsecondaryRaw, textCtrlWeightSelectedRaw, sizeCtrlSmDefaultRaw, sizeCtrlSmIconRaw, sizeCtrlLgDefaultRaw, sizeCtrlLgIconRaw, - sizeCtrlSmIconFigmaonlyRaw, - sizeCtrlLgIconFigmaonlyRaw, paddingContentAlignDefaultRaw, paddingContentAlignOutdentIcononsubtleRaw, paddingContentAlignOutdentTextonsubtleRaw, @@ -435,12 +432,9 @@ export { aiShimmerStop2Raw, aiShimmerStop3Raw, aiShimmerStop4Raw, - nullColorRaw, statusNeutralBackgroundRaw, statusNeutralTintBackgroundRaw, statusNeutralTintStrokeRaw, - nullNumberRaw, - nullStringRaw, backgroundCardOnsecondaryDefaultRestRaw, backgroundCardOnsecondaryAltRestRaw, backgroundCardOnsecondaryAltHoverRaw, @@ -541,17 +535,14 @@ export { ctrlBadgeBeaconSizeRaw, ctrlBadgeSizeRaw, ctrlBadgeCornerRaw, - ctrlBadgeIconSizeFigmaonlyRaw, ctrlBadgeGapRaw, ctrlBadgeIconSizeRaw, ctrlBadgePaddingRaw, ctrlBadgeSmSizeRaw, ctrlBadgeSmCornerRaw, - ctrlBadgeSmIconSizeFigmaonlyRaw, ctrlBadgeSmIconSizeRaw, ctrlBadgeSmPaddingRaw, ctrlBadgeLgSizeRaw, - ctrlBadgeLgIconSizeFigmaonlyRaw, ctrlBadgeLgIconSizeRaw, ctrlBadgeLgCornerRaw, ctrlBadgeLgPaddingRaw, @@ -590,7 +581,6 @@ export { ctrlChoiceSmBaseSizeRaw, ctrlChoiceSmCheckboxCornerRaw, ctrlChoiceSmCheckboxIconSizeRaw, - ctrlChoiceSmCheckboxIconSizeFigmaonlyRaw, ctrlChoiceSmRadioDotSizeRaw, ctrlChoiceSmSwitchWidthRaw, ctrlChoiceSmSwitchHeightRaw, @@ -600,7 +590,6 @@ export { ctrlChoiceLgBaseSizeRaw, ctrlChoiceLgCheckboxCornerRaw, ctrlChoiceLgCheckboxIconSizeRaw, - ctrlChoiceLgCheckboxIconSizeFigmaonlyRaw, ctrlChoiceLgRadioDotSizeRestRaw, ctrlChoiceLgRadioDotSizeHoverRaw, ctrlChoiceLgRadioDotSizePressedRaw, @@ -642,7 +631,6 @@ export { ctrlFabShadowDisabledKeyRaw, } from './components/fab/variables'; export { - ctrlFocusPositionFigmaonlyRaw, ctrlFocusInnerStrokewidthRaw, ctrlFocusInnerStrokeRaw, ctrlFocusOuterStrokewidthRaw, @@ -683,7 +671,6 @@ export { ctrlLinkInlineStrokewidthRestRaw, ctrlLinkInlineStrokewidthHoverRaw, ctrlLinkInlineUnderlineDashedRaw, - ctrlLinkInlineUnderlineSolidFigmaonlyRaw, ctrlLinkForegroundNeutralHoverRaw, ctrlLinkForegroundNeutralPressedRaw, ctrlLinkForegroundBrandRestRaw, @@ -692,7 +679,6 @@ export { ctrlLinkOnpageStrokewidthRestRaw, ctrlLinkOnpageStrokewidthHoverRaw, ctrlLinkOnpageUnderlineDashedRaw, - ctrlLinkOnpageUnderlineSolidFigmaonlyRaw, ctrlLinkInlineShowunderlineatrestRaw, ctrlLinkOnpageShowunderlineatrestRaw, } from './components/link/variables'; @@ -728,9 +714,7 @@ export { ctrlListChoiceBackgroundSelectedDisabledRaw, ctrlListChoiceCheckboxCornerRaw, ctrlListChoiceCheckboxIconSizeRaw, - ctrlListChoiceCheckboxIconSizeFigmaonlyRaw, ctrlListChoiceDotSizeRaw, - ctrlListChoiceDotSizeFigmaonlyRaw, ctrlListSplitDividerPaddingInsetRaw, ctrlListSplitDividerStrokeRaw, ctrlListSmCornerRestRaw, @@ -1188,15 +1172,12 @@ export { textStyleDefaultHeaderWeight, sizeCtrlDefault, sizeCtrlIcon, - sizeCtrlIconFigmaonly, sizeCtrlIconsecondary, textCtrlWeightSelected, sizeCtrlSmDefault, sizeCtrlSmIcon, sizeCtrlLgDefault, sizeCtrlLgIcon, - sizeCtrlSmIconFigmaonly, - sizeCtrlLgIconFigmaonly, paddingContentAlignDefault, paddingContentAlignOutdentIcononsubtle, paddingContentAlignOutdentTextonsubtle, @@ -1343,12 +1324,9 @@ export { aiShimmerStop2, aiShimmerStop3, aiShimmerStop4, - nullColor, statusNeutralBackground, statusNeutralTintBackground, statusNeutralTintStroke, - nullNumber, - nullString, backgroundCardOnsecondaryDefaultRest, backgroundCardOnsecondaryAltRest, backgroundCardOnsecondaryAltHover, @@ -1449,17 +1427,14 @@ export { ctrlBadgeBeaconSize, ctrlBadgeSize, ctrlBadgeCorner, - ctrlBadgeIconSizeFigmaonly, ctrlBadgeGap, ctrlBadgeIconSize, ctrlBadgePadding, ctrlBadgeSmSize, ctrlBadgeSmCorner, - ctrlBadgeSmIconSizeFigmaonly, ctrlBadgeSmIconSize, ctrlBadgeSmPadding, ctrlBadgeLgSize, - ctrlBadgeLgIconSizeFigmaonly, ctrlBadgeLgIconSize, ctrlBadgeLgCorner, ctrlBadgeLgPadding, @@ -1498,7 +1473,6 @@ export { ctrlChoiceSmBaseSize, ctrlChoiceSmCheckboxCorner, ctrlChoiceSmCheckboxIconSize, - ctrlChoiceSmCheckboxIconSizeFigmaonly, ctrlChoiceSmRadioDotSize, ctrlChoiceSmSwitchWidth, ctrlChoiceSmSwitchHeight, @@ -1508,7 +1482,6 @@ export { ctrlChoiceLgBaseSize, ctrlChoiceLgCheckboxCorner, ctrlChoiceLgCheckboxIconSize, - ctrlChoiceLgCheckboxIconSizeFigmaonly, ctrlChoiceLgRadioDotSizeRest, ctrlChoiceLgRadioDotSizeHover, ctrlChoiceLgRadioDotSizePressed, @@ -1550,7 +1523,6 @@ export { ctrlFabShadowDisabledKey, } from './components/fab/tokens'; export { - ctrlFocusPositionFigmaonly, ctrlFocusInnerStrokewidth, ctrlFocusInnerStroke, ctrlFocusOuterStrokewidth, @@ -1591,7 +1563,6 @@ export { ctrlLinkInlineStrokewidthRest, ctrlLinkInlineStrokewidthHover, ctrlLinkInlineUnderlineDashed, - ctrlLinkInlineUnderlineSolidFigmaonly, ctrlLinkForegroundNeutralHover, ctrlLinkForegroundNeutralPressed, ctrlLinkForegroundBrandRest, @@ -1600,7 +1571,6 @@ export { ctrlLinkOnpageStrokewidthRest, ctrlLinkOnpageStrokewidthHover, ctrlLinkOnpageUnderlineDashed, - ctrlLinkOnpageUnderlineSolidFigmaonly, ctrlLinkInlineShowunderlineatrest, ctrlLinkOnpageShowunderlineatrest, } from './components/link/tokens'; @@ -1636,9 +1606,7 @@ export { ctrlListChoiceBackgroundSelectedDisabled, ctrlListChoiceCheckboxCorner, ctrlListChoiceCheckboxIconSize, - ctrlListChoiceCheckboxIconSizeFigmaonly, ctrlListChoiceDotSize, - ctrlListChoiceDotSizeFigmaonly, ctrlListSplitDividerPaddingInset, ctrlListSplitDividerStroke, ctrlListSmCornerRest, From 5c0a98863816acfc04b84ef2b65ef18e3de2cfb0 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Wed, 14 May 2025 10:49:53 -0700 Subject: [PATCH 08/66] Extended-tokens: Update to latest JSON spec and fix camel casing (#34439) --- .../components/Link/useLinkStyles.styles.ts | 6 +- packages/semantic-tokens/.eslintrc.json | 10 +- .../etc/semantic-tokens.api.md | 1640 ++++---- .../semantic-tokens/scripts/legacyTokens.ts | 2 +- packages/semantic-tokens/scripts/tokenGen.ts | 4 +- packages/semantic-tokens/scripts/tokens.json | 3662 +++++++++-------- .../src/components/avatar/tokens.ts | 50 +- .../src/components/avatar/variables.ts | 26 +- .../src/components/badge/tokens.ts | 4 +- .../src/components/boolean/tokens.ts | 4 +- .../src/components/boolean/variables.ts | 2 +- .../src/components/choice/tokens.ts | 34 +- .../src/components/choice/variables.ts | 14 +- .../src/components/composer/tokens.ts | 44 +- .../src/components/composer/variables.ts | 29 +- .../src/components/divider/tokens.ts | 4 +- .../src/components/divider/variables.ts | 2 +- .../src/components/drag/tokens.ts | 8 +- .../src/components/drag/variables.ts | 4 +- .../src/components/fab/tokens.ts | 11 +- .../src/components/fab/variables.ts | 2 + .../src/components/focus/tokens.ts | 10 +- .../src/components/focus/variables.ts | 4 +- .../src/components/input/tokens.ts | 86 +- .../src/components/input/variables.ts | 32 +- .../src/components/link/tokens.ts | 30 +- .../src/components/link/variables.ts | 14 +- .../src/components/list/tokens.ts | 32 +- .../src/components/list/variables.ts | 10 +- .../src/components/liteFilter/tokens.ts | 22 +- .../src/components/liteFilter/variables.ts | 8 +- .../src/components/rating/tokens.ts | 4 +- .../src/components/segmented/tokens.ts | 4 +- .../src/components/slider/tokens.ts | 30 +- .../src/components/slider/variables.ts | 8 +- .../src/components/spinner/tokens.ts | 6 +- .../src/components/spinner/variables.ts | 4 +- .../src/components/split/tokens.ts | 14 +- .../src/components/split/variables.ts | 6 +- .../semantic-tokens/src/control/tokens.ts | 386 +- .../semantic-tokens/src/control/variables.ts | 195 +- .../{scripts => src}/fluentOverrides.ts | 18 +- packages/semantic-tokens/src/index.ts | 1506 +++---- packages/semantic-tokens/src/legacy/tokens.ts | 44 +- .../semantic-tokens/src/nullable/tokens.ts | 100 +- .../semantic-tokens/src/nullable/variables.ts | 50 +- .../semantic-tokens/src/optional/tokens.ts | 854 ++-- .../semantic-tokens/src/optional/variables.ts | 366 +- packages/semantic-tokens/tsconfig.spec.json | 4 +- .../utils/fluentOverrides.test.ts | 11 + .../semantic-tokens/utils/toCamelCase.test.ts | 11 +- packages/semantic-tokens/utils/toCamelCase.ts | 8 +- 52 files changed, 4853 insertions(+), 4586 deletions(-) rename packages/semantic-tokens/{scripts => src}/fluentOverrides.ts (78%) create mode 100644 packages/semantic-tokens/utils/fluentOverrides.test.ts diff --git a/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts b/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts index ac7d580392642..8485f886f53e9 100644 --- a/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts +++ b/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts @@ -26,15 +26,15 @@ const useStyles = makeStyles({ color: semanticTokens.ctrlLinkForegroundBrandRest, cursor: 'pointer', display: 'inline', - fontFamily: semanticTokens.textStyleDefaultRegularFontfamily, - fontSize: semanticTokens.textGlobalBody3Fontsize, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalBody3FontSize, fontWeight: semanticTokens.textStyleDefaultRegularWeight, margin: '0', padding: '0', overflow: 'inherit', textAlign: 'left', textDecorationLine: 'none', - textDecorationThickness: semanticTokens.strokewidthDefault, + textDecorationThickness: semanticTokens.strokeWidthDefault, textOverflow: 'inherit', userSelect: 'text', diff --git a/packages/semantic-tokens/.eslintrc.json b/packages/semantic-tokens/.eslintrc.json index 3bb2e2adabc30..b09f19d3a6b3d 100644 --- a/packages/semantic-tokens/.eslintrc.json +++ b/packages/semantic-tokens/.eslintrc.json @@ -8,5 +8,13 @@ "patterns": ["react", "react-dom"] } ] - } + }, + "overrides": [ + { + "files": ["./src/fluentOverrides.ts"], + "rules": { + "sort-keys": ["error"] + } + } + ] } diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index f1c560a5c3db4..7d25223a6bb61 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -53,160 +53,160 @@ export const aiShimmerStop4 = "var(--smtc-ai-shimmer-stop4)"; export const aiShimmerStop4Raw = "--smtc-ai-shimmer-stop4"; // @public (undocumented) -export const backgroundCardOnflyoutDefaultDisabled = "var(--smtc-background-card-onflyout-default-disabled)"; +export const backgroundCardOnFlyoutDefaultDisabled = "var(--smtc-background-card-on-flyout-default-disabled)"; // @public (undocumented) -export const backgroundCardOnflyoutDefaultDisabledRaw = "--smtc-background-card-onflyout-default-disabled"; +export const backgroundCardOnFlyoutDefaultDisabledRaw = "--smtc-background-card-on-flyout-default-disabled"; // @public (undocumented) -export const backgroundCardOnflyoutDefaultHover = "var(--smtc-background-card-onflyout-default-hover)"; +export const backgroundCardOnFlyoutDefaultHover = "var(--smtc-background-card-on-flyout-default-hover)"; // @public (undocumented) -export const backgroundCardOnflyoutDefaultHoverRaw = "--smtc-background-card-onflyout-default-hover"; +export const backgroundCardOnFlyoutDefaultHoverRaw = "--smtc-background-card-on-flyout-default-hover"; // @public (undocumented) -export const backgroundCardOnflyoutDefaultPressed = "var(--smtc-background-card-onflyout-default-pressed)"; +export const backgroundCardOnFlyoutDefaultPressed = "var(--smtc-background-card-on-flyout-default-pressed)"; // @public (undocumented) -export const backgroundCardOnflyoutDefaultPressedRaw = "--smtc-background-card-onflyout-default-pressed"; +export const backgroundCardOnFlyoutDefaultPressedRaw = "--smtc-background-card-on-flyout-default-pressed"; // @public (undocumented) -export const backgroundCardOnflyoutDefaultRest = "var(--smtc-background-card-onflyout-default-rest)"; +export const backgroundCardOnFlyoutDefaultRest = "var(--smtc-background-card-on-flyout-default-rest)"; // @public (undocumented) -export const backgroundCardOnflyoutDefaultRestRaw = "--smtc-background-card-onflyout-default-rest"; +export const backgroundCardOnFlyoutDefaultRestRaw = "--smtc-background-card-on-flyout-default-rest"; // @public (undocumented) -export const backgroundCardOnprimaryAltDisabled = "var(--smtc-background-card-onprimary-alt-disabled)"; +export const backgroundCardOnPrimaryAltDisabled = "var(--smtc-background-card-on-primary-alt-disabled)"; // @public (undocumented) -export const backgroundCardOnprimaryAltDisabledRaw = "--smtc-background-card-onprimary-alt-disabled"; +export const backgroundCardOnPrimaryAltDisabledRaw = "--smtc-background-card-on-primary-alt-disabled"; // @public (undocumented) -export const backgroundCardOnprimaryAltHover = "var(--smtc-background-card-onprimary-alt-hover)"; +export const backgroundCardOnPrimaryAltHover = "var(--smtc-background-card-on-primary-alt-hover)"; // @public (undocumented) -export const backgroundCardOnprimaryAltHoverRaw = "--smtc-background-card-onprimary-alt-hover"; +export const backgroundCardOnPrimaryAltHoverRaw = "--smtc-background-card-on-primary-alt-hover"; // @public (undocumented) -export const backgroundCardOnprimaryAltPressed = "var(--smtc-background-card-onprimary-alt-pressed)"; +export const backgroundCardOnPrimaryAltPressed = "var(--smtc-background-card-on-primary-alt-pressed)"; // @public (undocumented) -export const backgroundCardOnprimaryAltPressedRaw = "--smtc-background-card-onprimary-alt-pressed"; +export const backgroundCardOnPrimaryAltPressedRaw = "--smtc-background-card-on-primary-alt-pressed"; // @public (undocumented) -export const backgroundCardOnprimaryAltRest = "var(--smtc-background-card-onprimary-alt-rest)"; +export const backgroundCardOnPrimaryAltRest = "var(--smtc-background-card-on-primary-alt-rest)"; // @public (undocumented) -export const backgroundCardOnprimaryAltRestRaw = "--smtc-background-card-onprimary-alt-rest"; +export const backgroundCardOnPrimaryAltRestRaw = "--smtc-background-card-on-primary-alt-rest"; // @public (undocumented) -export const backgroundCardOnprimaryDefaultDisabled = "var(--smtc-background-card-onprimary-default-disabled)"; +export const backgroundCardOnPrimaryDefaultDisabled = "var(--smtc-background-card-on-primary-default-disabled)"; // @public (undocumented) -export const backgroundCardOnprimaryDefaultDisabledRaw = "--smtc-background-card-onprimary-default-disabled"; +export const backgroundCardOnPrimaryDefaultDisabledRaw = "--smtc-background-card-on-primary-default-disabled"; // @public (undocumented) -export const backgroundCardOnprimaryDefaultHover = "var(--smtc-background-card-onprimary-default-hover)"; +export const backgroundCardOnPrimaryDefaultHover = "var(--smtc-background-card-on-primary-default-hover)"; // @public (undocumented) -export const backgroundCardOnprimaryDefaultHoverRaw = "--smtc-background-card-onprimary-default-hover"; +export const backgroundCardOnPrimaryDefaultHoverRaw = "--smtc-background-card-on-primary-default-hover"; // @public (undocumented) -export const backgroundCardOnprimaryDefaultPressed = "var(--smtc-background-card-onprimary-default-pressed)"; +export const backgroundCardOnPrimaryDefaultPressed = "var(--smtc-background-card-on-primary-default-pressed)"; // @public (undocumented) -export const backgroundCardOnprimaryDefaultPressedRaw = "--smtc-background-card-onprimary-default-pressed"; +export const backgroundCardOnPrimaryDefaultPressedRaw = "--smtc-background-card-on-primary-default-pressed"; // @public (undocumented) -export const backgroundCardOnprimaryDefaultRest = "var(--smtc-background-card-onprimary-default-rest)"; +export const backgroundCardOnPrimaryDefaultRest = "var(--smtc-background-card-on-primary-default-rest)"; // @public (undocumented) -export const backgroundCardOnprimaryDefaultRestRaw = "--smtc-background-card-onprimary-default-rest"; +export const backgroundCardOnPrimaryDefaultRestRaw = "--smtc-background-card-on-primary-default-rest"; // @public (undocumented) -export const backgroundCardOnprimaryDefaultSelected = "var(--smtc-background-card-onprimary-default-selected, var(--smtc-background-card-onprimary-default-rest))"; +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-onprimary-default-selected"; +export const backgroundCardOnPrimaryDefaultSelectedRaw = "--smtc-background-card-on-primary-default-selected"; // @public (undocumented) -export const backgroundCardOnsecondaryAltDisabled = "var(--smtc-background-card-onsecondary-alt-disabled)"; +export const backgroundCardOnSecondaryAltDisabled = "var(--smtc-background-card-on-secondary-alt-disabled)"; // @public (undocumented) -export const backgroundCardOnsecondaryAltDisabledRaw = "--smtc-background-card-onsecondary-alt-disabled"; +export const backgroundCardOnSecondaryAltDisabledRaw = "--smtc-background-card-on-secondary-alt-disabled"; // @public (undocumented) -export const backgroundCardOnsecondaryAltHover = "var(--smtc-background-card-onsecondary-alt-hover)"; +export const backgroundCardOnSecondaryAltHover = "var(--smtc-background-card-on-secondary-alt-hover)"; // @public (undocumented) -export const backgroundCardOnsecondaryAltHoverRaw = "--smtc-background-card-onsecondary-alt-hover"; +export const backgroundCardOnSecondaryAltHoverRaw = "--smtc-background-card-on-secondary-alt-hover"; // @public (undocumented) -export const backgroundCardOnsecondaryAltPressed = "var(--smtc-background-card-onsecondary-alt-pressed)"; +export const backgroundCardOnSecondaryAltPressed = "var(--smtc-background-card-on-secondary-alt-pressed)"; // @public (undocumented) -export const backgroundCardOnsecondaryAltPressedRaw = "--smtc-background-card-onsecondary-alt-pressed"; +export const backgroundCardOnSecondaryAltPressedRaw = "--smtc-background-card-on-secondary-alt-pressed"; // @public (undocumented) -export const backgroundCardOnsecondaryAltRest = "var(--smtc-background-card-onsecondary-alt-rest)"; +export const backgroundCardOnSecondaryAltRest = "var(--smtc-background-card-on-secondary-alt-rest)"; // @public (undocumented) -export const backgroundCardOnsecondaryAltRestRaw = "--smtc-background-card-onsecondary-alt-rest"; +export const backgroundCardOnSecondaryAltRestRaw = "--smtc-background-card-on-secondary-alt-rest"; // @public (undocumented) -export const backgroundCardOnsecondaryDefaultDisabled = "var(--smtc-background-card-onsecondary-default-disabled)"; +export const backgroundCardOnSecondaryDefaultDisabled = "var(--smtc-background-card-on-secondary-default-disabled)"; // @public (undocumented) -export const backgroundCardOnsecondaryDefaultDisabledRaw = "--smtc-background-card-onsecondary-default-disabled"; +export const backgroundCardOnSecondaryDefaultDisabledRaw = "--smtc-background-card-on-secondary-default-disabled"; // @public (undocumented) -export const backgroundCardOnsecondaryDefaultHover = "var(--smtc-background-card-onsecondary-default-hover)"; +export const backgroundCardOnSecondaryDefaultHover = "var(--smtc-background-card-on-secondary-default-hover)"; // @public (undocumented) -export const backgroundCardOnsecondaryDefaultHoverRaw = "--smtc-background-card-onsecondary-default-hover"; +export const backgroundCardOnSecondaryDefaultHoverRaw = "--smtc-background-card-on-secondary-default-hover"; // @public (undocumented) -export const backgroundCardOnsecondaryDefaultPressed = "var(--smtc-background-card-onsecondary-default-pressed)"; +export const backgroundCardOnSecondaryDefaultPressed = "var(--smtc-background-card-on-secondary-default-pressed)"; // @public (undocumented) -export const backgroundCardOnsecondaryDefaultPressedRaw = "--smtc-background-card-onsecondary-default-pressed"; +export const backgroundCardOnSecondaryDefaultPressedRaw = "--smtc-background-card-on-secondary-default-pressed"; // @public (undocumented) -export const backgroundCardOnsecondaryDefaultRest = "var(--smtc-background-card-onsecondary-default-rest)"; +export const backgroundCardOnSecondaryDefaultRest = "var(--smtc-background-card-on-secondary-default-rest)"; // @public (undocumented) -export const backgroundCardOnsecondaryDefaultRestRaw = "--smtc-background-card-onsecondary-default-rest"; +export const backgroundCardOnSecondaryDefaultRestRaw = "--smtc-background-card-on-secondary-default-rest"; // @public (undocumented) -export const backgroundCardOnsecondaryDefaultSelected = "var(--smtc-background-card-onsecondary-default-selected, var(--smtc-background-card-onsecondary-default-rest))"; +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-onsecondary-default-selected"; +export const backgroundCardOnSecondaryDefaultSelectedRaw = "--smtc-background-card-on-secondary-default-selected"; // @public (undocumented) -export const backgroundCtrlActivebrandDisabled = "var(--smtc-background-ctrl-activebrand-disabled, var(--smtc-background-ctrl-brand-disabled))"; +export const backgroundCtrlActiveBrandDisabled = "var(--smtc-background-ctrl-active-brand-disabled, var(--smtc-background-ctrl-brand-disabled))"; // @public (undocumented) -export const backgroundCtrlActivebrandDisabledRaw = "--smtc-background-ctrl-activebrand-disabled"; +export const backgroundCtrlActiveBrandDisabledRaw = "--smtc-background-ctrl-active-brand-disabled"; // @public (undocumented) -export const backgroundCtrlActivebrandHover = "var(--smtc-background-ctrl-activebrand-hover, var(--smtc-background-ctrl-brand-hover))"; +export const backgroundCtrlActiveBrandHover = "var(--smtc-background-ctrl-active-brand-hover, var(--smtc-background-ctrl-brand-hover))"; // @public (undocumented) -export const backgroundCtrlActivebrandHoverRaw = "--smtc-background-ctrl-activebrand-hover"; +export const backgroundCtrlActiveBrandHoverRaw = "--smtc-background-ctrl-active-brand-hover"; // @public (undocumented) -export const backgroundCtrlActivebrandPressed = "var(--smtc-background-ctrl-activebrand-pressed, var(--smtc-background-ctrl-brand-pressed))"; +export const backgroundCtrlActiveBrandPressed = "var(--smtc-background-ctrl-active-brand-pressed, var(--smtc-background-ctrl-brand-pressed))"; // @public (undocumented) -export const backgroundCtrlActivebrandPressedRaw = "--smtc-background-ctrl-activebrand-pressed"; +export const backgroundCtrlActiveBrandPressedRaw = "--smtc-background-ctrl-active-brand-pressed"; // @public (undocumented) -export const backgroundCtrlActivebrandRest = "var(--smtc-background-ctrl-activebrand-rest, var(--smtc-background-ctrl-brand-rest))"; +export const backgroundCtrlActiveBrandRest = "var(--smtc-background-ctrl-active-brand-rest, var(--smtc-background-ctrl-brand-rest))"; // @public (undocumented) -export const backgroundCtrlActivebrandRestRaw = "--smtc-background-ctrl-activebrand-rest"; +export const backgroundCtrlActiveBrandRestRaw = "--smtc-background-ctrl-active-brand-rest"; // @public (undocumented) export const backgroundCtrlBrandDisabled = "var(--smtc-background-ctrl-brand-disabled)"; @@ -281,40 +281,40 @@ export const backgroundCtrlOutlineRest = "var(--smtc-background-ctrl-outline-res export const backgroundCtrlOutlineRestRaw = "--smtc-background-ctrl-outline-rest"; // @public (undocumented) -export const backgroundCtrlShapesafeActivebrandDisabled = "var(--smtc-background-ctrl-shapesafe-activebrand-disabled, var(--smtc-background-ctrl-brand-disabled))"; +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-shapesafe-activebrand-disabled"; +export const backgroundCtrlShapeSafeActiveBrandDisabledRaw = "--smtc-background-ctrl-shape-safe-active-brand-disabled"; // @public (undocumented) -export const backgroundCtrlShapesafeActivebrandRest = "var(--smtc-background-ctrl-shapesafe-activebrand-rest, var(--smtc-background-ctrl-brand-rest))"; +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-shapesafe-activebrand-rest"; +export const backgroundCtrlShapeSafeActiveBrandRestRaw = "--smtc-background-ctrl-shape-safe-active-brand-rest"; // @public (undocumented) -export const backgroundCtrlShapesafeNeutralDisabled = "var(--smtc-background-ctrl-shapesafe-neutral-disabled, var(--smtc-foreground-ctrl-neutral-secondary-disabled))"; +export const backgroundCtrlShapeSafeNeutralDisabled = "var(--smtc-background-ctrl-shape-safe-neutral-disabled, var(--smtc-foreground-ctrl-neutral-secondary-disabled))"; // @public (undocumented) -export const backgroundCtrlShapesafeNeutralDisabledRaw = "--smtc-background-ctrl-shapesafe-neutral-disabled"; +export const backgroundCtrlShapeSafeNeutralDisabledRaw = "--smtc-background-ctrl-shape-safe-neutral-disabled"; // @public (undocumented) -export const backgroundCtrlShapesafeNeutralHover = "var(--smtc-background-ctrl-shapesafe-neutral-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; +export const backgroundCtrlShapeSafeNeutralHover = "var(--smtc-background-ctrl-shape-safe-neutral-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; // @public (undocumented) -export const backgroundCtrlShapesafeNeutralHoverRaw = "--smtc-background-ctrl-shapesafe-neutral-hover"; +export const backgroundCtrlShapeSafeNeutralHoverRaw = "--smtc-background-ctrl-shape-safe-neutral-hover"; // @public (undocumented) -export const backgroundCtrlShapesafeNeutralPressed = "var(--smtc-background-ctrl-shapesafe-neutral-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; +export const backgroundCtrlShapeSafeNeutralPressed = "var(--smtc-background-ctrl-shape-safe-neutral-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; // @public (undocumented) -export const backgroundCtrlShapesafeNeutralPressedRaw = "--smtc-background-ctrl-shapesafe-neutral-pressed"; +export const backgroundCtrlShapeSafeNeutralPressedRaw = "--smtc-background-ctrl-shape-safe-neutral-pressed"; // @public (undocumented) -export const backgroundCtrlShapesafeNeutralRest = "var(--smtc-background-ctrl-shapesafe-neutral-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; +export const backgroundCtrlShapeSafeNeutralRest = "var(--smtc-background-ctrl-shape-safe-neutral-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; // @public (undocumented) -export const backgroundCtrlShapesafeNeutralRestRaw = "--smtc-background-ctrl-shapesafe-neutral-rest"; +export const backgroundCtrlShapeSafeNeutralRestRaw = "--smtc-background-ctrl-shape-safe-neutral-rest"; // @public (undocumented) export const backgroundCtrlSubtleDisabled = "var(--smtc-background-ctrl-subtle-disabled, unset)"; @@ -329,10 +329,10 @@ export const backgroundCtrlSubtleHover = "var(--smtc-background-ctrl-subtle-hove export const backgroundCtrlSubtleHoverRaw = "--smtc-background-ctrl-subtle-hover"; // @public (undocumented) -export const backgroundCtrlSubtleHoversplit = "var(--smtc-background-ctrl-subtle-hoversplit, unset)"; +export const backgroundCtrlSubtleHoverSplit = "var(--smtc-background-ctrl-subtle-hover-split, unset)"; // @public (undocumented) -export const backgroundCtrlSubtleHoversplitRaw = "--smtc-background-ctrl-subtle-hoversplit"; +export const backgroundCtrlSubtleHoverSplitRaw = "--smtc-background-ctrl-subtle-hover-split"; // @public (undocumented) export const backgroundCtrlSubtlePressed = "var(--smtc-background-ctrl-subtle-pressed)"; @@ -347,16 +347,16 @@ export const backgroundCtrlSubtleRest = "var(--smtc-background-ctrl-subtle-rest, export const backgroundCtrlSubtleRestRaw = "--smtc-background-ctrl-subtle-rest"; // @public (undocumented) -export const backgroundFlyoutColorblend = "var(--smtc-background-flyout-colorblend)"; +export const backgroundFlyoutColorBlend = "var(--smtc-background-flyout-color-blend)"; // @public (undocumented) -export const backgroundFlyoutColorblendRaw = "--smtc-background-flyout-colorblend"; +export const backgroundFlyoutColorBlendRaw = "--smtc-background-flyout-color-blend"; // @public (undocumented) -export const backgroundFlyoutLumblend = "var(--smtc-background-flyout-lumblend)"; +export const backgroundFlyoutLumBlend = "var(--smtc-background-flyout-lum-blend)"; // @public (undocumented) -export const backgroundFlyoutLumblendRaw = "--smtc-background-flyout-lumblend"; +export const backgroundFlyoutLumBlendRaw = "--smtc-background-flyout-lum-blend"; // @public (undocumented) export const backgroundFlyoutSolid = "var(--smtc-background-flyout-solid)"; @@ -365,37 +365,37 @@ export const backgroundFlyoutSolid = "var(--smtc-background-flyout-solid)"; export const backgroundFlyoutSolidRaw = "--smtc-background-flyout-solid"; // @public (undocumented) -export const backgroundLayerPrimarySolid = "var(--smtc-background-layer-primarysolid)"; +export const backgroundLayerPrimarySolid = "var(--smtc-background-layer-primary-solid)"; // @public (undocumented) -export const backgroundLayerPrimarySolidRaw = "--smtc-background-layer-primarysolid"; +export const backgroundLayerPrimarySolidRaw = "--smtc-background-layer-primary-solid"; // @public (undocumented) -export const backgroundLayerPrimaryStop1 = "var(--smtc-background-layer-primarystop1, var(--smtc-background-layer-primarysolid))"; +export const backgroundLayerPrimaryStop1 = "var(--smtc-background-layer-primary-stop1, var(--smtc-background-layer-primary-solid))"; // @public (undocumented) -export const backgroundLayerPrimaryStop1Raw = "--smtc-background-layer-primarystop1"; +export const backgroundLayerPrimaryStop1Raw = "--smtc-background-layer-primary-stop1"; // @public (undocumented) -export const backgroundLayerPrimaryStop2 = "var(--smtc-background-layer-primarystop2, var(--smtc-background-layer-primarysolid))"; +export const backgroundLayerPrimaryStop2 = "var(--smtc-background-layer-primary-stop2, var(--smtc-background-layer-primary-solid))"; // @public (undocumented) -export const backgroundLayerPrimaryStop2Raw = "--smtc-background-layer-primarystop2"; +export const backgroundLayerPrimaryStop2Raw = "--smtc-background-layer-primary-stop2"; // @public (undocumented) -export const backgroundLayerPrimaryStop3 = "var(--smtc-background-layer-primarystop3, var(--smtc-background-layer-primarysolid))"; +export const backgroundLayerPrimaryStop3 = "var(--smtc-background-layer-primary-stop3, var(--smtc-background-layer-primary-solid))"; // @public (undocumented) -export const backgroundLayerPrimaryStop3Raw = "--smtc-background-layer-primarystop3"; +export const backgroundLayerPrimaryStop3Raw = "--smtc-background-layer-primary-stop3"; // @public (undocumented) -export const backgroundLayerSecondary = "var(--smtc-background-layer-secondary, var(--smtc-background-layer-primarysolid))"; +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-primarysolid))"; +export const backgroundLayerTertiary = "var(--smtc-background-layer-tertiary, var(--smtc-background-layer-primary-solid))"; // @public (undocumented) export const backgroundLayerTertiaryRaw = "--smtc-background-layer-tertiary"; @@ -407,34 +407,34 @@ export const backgroundSmoke = "var(--smtc-background-smoke)"; export const backgroundSmokeRaw = "--smtc-background-smoke"; // @public (undocumented) -export const backgroundToolbar = "var(--smtc-background-toolbar, var(--smtc-background-card-onprimary-default-rest))"; +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-webpage-primary)"; +export const backgroundWebPagePrimary = "var(--smtc-background-web-page-primary)"; // @public (undocumented) -export const backgroundWebpagePrimaryRaw = "--smtc-background-webpage-primary"; +export const backgroundWebPagePrimaryRaw = "--smtc-background-web-page-primary"; // @public (undocumented) -export const backgroundWebpageSecondary = "var(--smtc-background-webpage-secondary)"; +export const backgroundWebPageSecondary = "var(--smtc-background-web-page-secondary)"; // @public (undocumented) -export const backgroundWebpageSecondaryRaw = "--smtc-background-webpage-secondary"; +export const backgroundWebPageSecondaryRaw = "--smtc-background-web-page-secondary"; // @public (undocumented) -export const backgroundWindowPrimaryColorblend = "var(--smtc-background-window-primary-colorblend)"; +export const backgroundWindowPrimaryColorBlend = "var(--smtc-background-window-primary-color-blend)"; // @public (undocumented) -export const backgroundWindowPrimaryColorblendRaw = "--smtc-background-window-primary-colorblend"; +export const backgroundWindowPrimaryColorBlendRaw = "--smtc-background-window-primary-color-blend"; // @public (undocumented) -export const backgroundWindowPrimaryLumblend = "var(--smtc-background-window-primary-lumblend)"; +export const backgroundWindowPrimaryLumBlend = "var(--smtc-background-window-primary-lum-blend)"; // @public (undocumented) -export const backgroundWindowPrimaryLumblendRaw = "--smtc-background-window-primary-lumblend"; +export const backgroundWindowPrimaryLumBlendRaw = "--smtc-background-window-primary-lum-blend"; // @public (undocumented) export const backgroundWindowPrimarySolid = "var(--smtc-background-window-primary-solid)"; @@ -443,16 +443,16 @@ export const backgroundWindowPrimarySolid = "var(--smtc-background-window-primar export const backgroundWindowPrimarySolidRaw = "--smtc-background-window-primary-solid"; // @public (undocumented) -export const backgroundWindowSecondaryColorblend = "var(--smtc-background-window-secondary-colorblend)"; +export const backgroundWindowSecondaryColorBlend = "var(--smtc-background-window-secondary-color-blend)"; // @public (undocumented) -export const backgroundWindowSecondaryColorblendRaw = "--smtc-background-window-secondary-colorblend"; +export const backgroundWindowSecondaryColorBlendRaw = "--smtc-background-window-secondary-color-blend"; // @public (undocumented) -export const backgroundWindowSecondaryLumblend = "var(--smtc-background-window-secondary-lumblend)"; +export const backgroundWindowSecondaryLumBlend = "var(--smtc-background-window-secondary-lum-blend)"; // @public (undocumented) -export const backgroundWindowSecondaryLumblendRaw = "--smtc-background-window-secondary-lumblend"; +export const backgroundWindowSecondaryLumBlendRaw = "--smtc-background-window-secondary-lum-blend"; // @public (undocumented) export const backgroundWindowSecondarySolid = "var(--smtc-background-window-secondary-solid)"; @@ -461,22 +461,22 @@ export const backgroundWindowSecondarySolid = "var(--smtc-background-window-seco export const backgroundWindowSecondarySolidRaw = "--smtc-background-window-secondary-solid"; // @public (undocumented) -export const backgroundWindowTabbandColorblend = "var(--smtc-background-window-tabband-colorblend)"; +export const backgroundWindowTabBandColorBlend = "var(--smtc-background-window-tab-band-color-blend)"; // @public (undocumented) -export const backgroundWindowTabbandColorblendRaw = "--smtc-background-window-tabband-colorblend"; +export const backgroundWindowTabBandColorBlendRaw = "--smtc-background-window-tab-band-color-blend"; // @public (undocumented) -export const backgroundWindowTabbandLumblend = "var(--smtc-background-window-tabband-lumblend)"; +export const backgroundWindowTabBandLumBlend = "var(--smtc-background-window-tab-band-lum-blend)"; // @public (undocumented) -export const backgroundWindowTabbandLumblendRaw = "--smtc-background-window-tabband-lumblend"; +export const backgroundWindowTabBandLumBlendRaw = "--smtc-background-window-tab-band-lum-blend"; // @public (undocumented) -export const backgroundWindowTabbandSolid = "var(--smtc-background-window-tabband-solid)"; +export const backgroundWindowTabBandSolid = "var(--smtc-background-window-tab-band-solid)"; // @public (undocumented) -export const backgroundWindowTabbandSolidRaw = "--smtc-background-window-tabband-solid"; +export const backgroundWindowTabBandSolidRaw = "--smtc-background-window-tab-band-solid"; // @public (undocumented) export const cornerBezel = "var(--smtc-corner-bezel)"; @@ -587,16 +587,16 @@ export const cornerFlyoutShellRest = "var(--smtc-corner-flyout-shell-rest, var(- export const cornerFlyoutShellRestRaw = "--smtc-corner-flyout-shell-rest"; // @public (undocumented) -export const cornerImageIncard = "var(--smtc-corner-image-incard)"; +export const cornerImageInCard = "var(--smtc-corner-image-in-card)"; // @public (undocumented) -export const cornerImageIncardRaw = "--smtc-corner-image-incard"; +export const cornerImageInCardRaw = "--smtc-corner-image-in-card"; // @public (undocumented) -export const cornerImageOnpage = "var(--smtc-corner-image-onpage, var(--smtc-corner-card-rest))"; +export const cornerImageOnPage = "var(--smtc-corner-image-on-page, var(--smtc-corner-card-rest))"; // @public (undocumented) -export const cornerImageOnpageRaw = "--smtc-corner-image-onpage"; +export const cornerImageOnPageRaw = "--smtc-corner-image-on-page"; // @public (undocumented) export const cornerLayerDefault = "var(--smtc-corner-layer-default)"; @@ -629,22 +629,22 @@ export const cornerZero = "var(--smtc-corner-zero)"; export const cornerZeroRaw = "--smtc-corner-zero"; // @public (undocumented) -export const ctrlAvatarActiveringSize = "var(--smtc-ctrl-avatar-activering-size)"; +export const ctrlAvatarActiveRingSize = "var(--smtc-ctrl-avatar-active-ring-size)"; // @public (undocumented) -export const ctrlAvatarActiveringSizeRaw = "--smtc-ctrl-avatar-activering-size"; +export const ctrlAvatarActiveRingSizeRaw = "--smtc-ctrl-avatar-active-ring-size"; // @public (undocumented) -export const ctrlAvatarActiveringStroke = "var(--smtc-ctrl-avatar-activering-stroke, var(--smtc-background-ctrl-brand-rest))"; +export const ctrlAvatarActiveRingStroke = "var(--smtc-ctrl-avatar-active-ring-stroke, var(--smtc-background-ctrl-brand-rest))"; // @public (undocumented) -export const ctrlAvatarActiveringStrokeRaw = "--smtc-ctrl-avatar-activering-stroke"; +export const ctrlAvatarActiveRingStrokeRaw = "--smtc-ctrl-avatar-active-ring-stroke"; // @public (undocumented) -export const ctrlAvatarActiveringStrokewidth = "var(--smtc-ctrl-avatar-activering-strokewidth)"; +export const ctrlAvatarActiveRingStrokeWidth = "var(--smtc-ctrl-avatar-active-ring-stroke-width)"; // @public (undocumented) -export const ctrlAvatarActiveringStrokewidthRaw = "--smtc-ctrl-avatar-activering-strokewidth"; +export const ctrlAvatarActiveRingStrokeWidthRaw = "--smtc-ctrl-avatar-active-ring-stroke-width"; // @public (undocumented) export const ctrlAvatarBackground = "var(--smtc-ctrl-avatar-background)"; @@ -677,34 +677,34 @@ export const ctrlAvatarIconSize = "var(--smtc-ctrl-avatar-icon-size, var(--smtc- export const ctrlAvatarIconSizeRaw = "--smtc-ctrl-avatar-icon-size"; // @public (undocumented) -export const ctrlAvatarPresencebadgeBackgroundBehindbadge = "var(--smtc-ctrl-avatar-presencebadge-background-behindbadge, var(--smtc-background-layer-primarysolid))"; +export const ctrlAvatarPresenceBadgeBackgroundBehindBadge = "var(--smtc-ctrl-avatar-presence-badge-background-behind-badge, var(--smtc-background-layer-primary-solid))"; // @public (undocumented) -export const ctrlAvatarPresencebadgeBackgroundBehindbadgeRaw = "--smtc-ctrl-avatar-presencebadge-background-behindbadge"; +export const ctrlAvatarPresenceBadgeBackgroundBehindBadgeRaw = "--smtc-ctrl-avatar-presence-badge-background-behind-badge"; // @public (undocumented) -export const ctrlAvatarPresencebadgePaddingBottomrightoffset = "var(--smtc-ctrl-avatar-presencebadge-padding-bottomrightoffset, var(--smtc-strokewidth-default))"; +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-presencebadge-padding-bottomrightoffset"; +export const ctrlAvatarPresenceBadgePaddingBottomRightOffsetRaw = "--smtc-ctrl-avatar-presence-badge-padding-bottom-right-offset"; // @public (undocumented) -export const ctrlAvatarPresencebadgeSize = "var(--smtc-ctrl-avatar-presencebadge-size)"; +export const ctrlAvatarPresenceBadgeSize = "var(--smtc-ctrl-avatar-presence-badge-size)"; // @public (undocumented) -export const ctrlAvatarPresencebadgeSizeRaw = "--smtc-ctrl-avatar-presencebadge-size"; +export const ctrlAvatarPresenceBadgeSizeRaw = "--smtc-ctrl-avatar-presence-badge-size"; // @public (undocumented) -export const ctrlAvatarPresencebadgeStrokewidth = "var(--smtc-ctrl-avatar-presencebadge-strokewidth, var(--smtc-strokewidth-default))"; +export const ctrlAvatarPresenceBadgeStrokeWidth = "var(--smtc-ctrl-avatar-presence-badge-stroke-width, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const ctrlAvatarPresencebadgeStrokewidthRaw = "--smtc-ctrl-avatar-presencebadge-strokewidth"; +export const ctrlAvatarPresenceBadgeStrokeWidthRaw = "--smtc-ctrl-avatar-presence-badge-stroke-width"; // @public (undocumented) -export const ctrlAvatarShowcutout = "var(--smtc-ctrl-avatar-showcutout)"; +export const ctrlAvatarShowCutout = "var(--smtc-ctrl-avatar-show-cutout)"; // @public (undocumented) -export const ctrlAvatarShowcutoutRaw = "--smtc-ctrl-avatar-showcutout"; +export const ctrlAvatarShowCutoutRaw = "--smtc-ctrl-avatar-show-cutout"; // @public (undocumented) export const ctrlAvatarSize = "var(--smtc-ctrl-avatar-size, var(--smtc-size-ctrl-default))"; @@ -713,22 +713,22 @@ export const ctrlAvatarSize = "var(--smtc-ctrl-avatar-size, var(--smtc-size-ctrl export const ctrlAvatarSizeRaw = "--smtc-ctrl-avatar-size"; // @public (undocumented) -export const ctrlAvatarTextFontsize = "var(--smtc-ctrl-avatar-text-fontsize, var(--smtc-text-global-body3-fontsize))"; +export const ctrlAvatarTextFontSize = "var(--smtc-ctrl-avatar-text-font-size, var(--smtc-text-global-body3-font-size))"; // @public (undocumented) -export const ctrlAvatarTextFontsizeRaw = "--smtc-ctrl-avatar-text-fontsize"; +export const ctrlAvatarTextFontSizeRaw = "--smtc-ctrl-avatar-text-font-size"; // @public (undocumented) -export const ctrlAvatarTextLineheight = "var(--smtc-ctrl-avatar-text-lineheight, var(--smtc-text-global-body3-lineheight))"; +export const ctrlAvatarTextLineHeight = "var(--smtc-ctrl-avatar-text-line-height, var(--smtc-text-global-body3-line-height))"; // @public (undocumented) -export const ctrlAvatarTextLineheightRaw = "--smtc-ctrl-avatar-text-lineheight"; +export const ctrlAvatarTextLineHeightRaw = "--smtc-ctrl-avatar-text-line-height"; // @public (undocumented) -export const ctrlAvatarTextPaddingTopoffset = "var(--smtc-ctrl-avatar-text-padding-topoffset, unset)"; +export const ctrlAvatarTextPaddingTopOffset = "var(--smtc-ctrl-avatar-text-padding-top-offset, unset)"; // @public (undocumented) -export const ctrlAvatarTextPaddingTopoffsetRaw = "--smtc-ctrl-avatar-text-padding-topoffset"; +export const ctrlAvatarTextPaddingTopOffsetRaw = "--smtc-ctrl-avatar-text-padding-top-offset"; // @public (undocumented) export const ctrlBadgeBeaconSize = "var(--smtc-ctrl-badge-beacon-size)"; @@ -755,7 +755,7 @@ export const ctrlBadgeIconSize = "var(--smtc-ctrl-badge-icon-size)"; export const ctrlBadgeIconSizeRaw = "--smtc-ctrl-badge-icon-size"; // @public (undocumented) -export const ctrlBadgeIconTheme = "var(--smtc-ctrl-badge-icon-theme, var(--smtc-icontheme-ctrl-default-rest))"; +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"; @@ -857,10 +857,10 @@ export const ctrlBadgeTextPaddingTop = "var(--smtc-ctrl-badge-text-padding-top)" export const ctrlBadgeTextPaddingTopRaw = "--smtc-ctrl-badge-text-padding-top"; // @public (undocumented) -export const ctrlBooleanSelectionhint = "var(--smtc-ctrl-boolean-selectionhint)"; +export const ctrlBooleanSelectionHint = "var(--smtc-ctrl-boolean-selection-hint)"; // @public (undocumented) -export const ctrlBooleanSelectionhintRaw = "--smtc-ctrl-boolean-selectionhint"; +export const ctrlBooleanSelectionHintRaw = "--smtc-ctrl-boolean-selection-hint"; // @public (undocumented) export const ctrlCardStateDisabled = "var(--smtc-ctrl-card-state-disabled)"; @@ -947,7 +947,7 @@ export const ctrlChoiceCheckboxCorner = "var(--smtc-ctrl-choice-checkbox-corner) export const ctrlChoiceCheckboxCornerRaw = "--smtc-ctrl-choice-checkbox-corner"; // @public (undocumented) -export const ctrlChoiceCheckboxIconSize = "var(--smtc-ctrl-choice-checkbox-icon-size, var(--smtc-size-ctrl-iconsecondary))"; +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"; @@ -989,7 +989,7 @@ export const ctrlChoiceLgCheckboxCorner = "var(--smtc-ctrl-choice-lg-checkbox-co 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-iconsecondary))"; +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"; @@ -1091,7 +1091,7 @@ export const ctrlChoiceSmCheckboxCorner = "var(--smtc-ctrl-choice-sm-checkbox-co 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-iconsecondary))"; +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"; @@ -1199,16 +1199,16 @@ export const ctrlChoiceSwitchWidth = "var(--smtc-ctrl-choice-switch-width)"; export const ctrlChoiceSwitchWidthRaw = "--smtc-ctrl-choice-switch-width"; // @public (undocumented) -export const ctrlComposerContainerBackgroundAcryliccolorblend = "var(--smtc-ctrl-composer-container-background-acryliccolorblend, var(--smtc-background-flyout-solid))"; +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-acryliccolorblend"; +export const ctrlComposerContainerBackgroundAcrylicColorBlendRaw = "--smtc-ctrl-composer-container-background-acrylic-color-blend"; // @public (undocumented) -export const ctrlComposerContainerBackgroundAcryliclumblend = "var(--smtc-ctrl-composer-container-background-acryliclumblend, var(--smtc-background-flyout-solid))"; +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-acryliclumblend"; +export const ctrlComposerContainerBackgroundAcrylicLumBlendRaw = "--smtc-ctrl-composer-container-background-acrylic-lum-blend"; // @public (undocumented) export const ctrlComposerContainerBackgroundDefault = "var(--smtc-ctrl-composer-container-background-default)"; @@ -1271,34 +1271,34 @@ export const ctrlComposerInputBackgroundSelectedRest = "var(--smtc-ctrl-composer export const ctrlComposerInputBackgroundSelectedRestRaw = "--smtc-ctrl-composer-input-background-selected-rest"; // @public (undocumented) -export const ctrlComposerInputBottomstrokeDisabled = "var(--smtc-ctrl-composer-input-bottomstroke-disabled, unset)"; +export const ctrlComposerInputBottomStrokeDisabled = "var(--smtc-ctrl-composer-input-bottom-stroke-disabled, unset)"; // @public (undocumented) -export const ctrlComposerInputBottomstrokeDisabledRaw = "--smtc-ctrl-composer-input-bottomstroke-disabled"; +export const ctrlComposerInputBottomStrokeDisabledRaw = "--smtc-ctrl-composer-input-bottom-stroke-disabled"; // @public (undocumented) -export const ctrlComposerInputBottomstrokeHover = "var(--smtc-ctrl-composer-input-bottomstroke-hover, unset)"; +export const ctrlComposerInputBottomStrokeHover = "var(--smtc-ctrl-composer-input-bottom-stroke-hover, unset)"; // @public (undocumented) -export const ctrlComposerInputBottomstrokeHoverRaw = "--smtc-ctrl-composer-input-bottomstroke-hover"; +export const ctrlComposerInputBottomStrokeHoverRaw = "--smtc-ctrl-composer-input-bottom-stroke-hover"; // @public (undocumented) -export const ctrlComposerInputBottomstrokePressed = "var(--smtc-ctrl-composer-input-bottomstroke-pressed, unset)"; +export const ctrlComposerInputBottomStrokePressed = "var(--smtc-ctrl-composer-input-bottom-stroke-pressed, unset)"; // @public (undocumented) -export const ctrlComposerInputBottomstrokePressedRaw = "--smtc-ctrl-composer-input-bottomstroke-pressed"; +export const ctrlComposerInputBottomStrokePressedRaw = "--smtc-ctrl-composer-input-bottom-stroke-pressed"; // @public (undocumented) -export const ctrlComposerInputBottomstrokeRest = "var(--smtc-ctrl-composer-input-bottomstroke-rest, unset)"; +export const ctrlComposerInputBottomStrokeRest = "var(--smtc-ctrl-composer-input-bottom-stroke-rest, unset)"; // @public (undocumented) -export const ctrlComposerInputBottomstrokeRestRaw = "--smtc-ctrl-composer-input-bottomstroke-rest"; +export const ctrlComposerInputBottomStrokeRestRaw = "--smtc-ctrl-composer-input-bottom-stroke-rest"; // @public (undocumented) -export const ctrlComposerInputBottomstrokeSelectedRest = "var(--smtc-ctrl-composer-input-bottomstroke-selected-rest, unset)"; +export const ctrlComposerInputBottomStrokeSelectedRest = "var(--smtc-ctrl-composer-input-bottom-stroke-selected-rest, unset)"; // @public (undocumented) -export const ctrlComposerInputBottomstrokeSelectedRestRaw = "--smtc-ctrl-composer-input-bottomstroke-selected-rest"; +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)"; @@ -1349,22 +1349,22 @@ export const ctrlComposerInputShadow = "var(--smtc-ctrl-composer-input-shadow-x) export const ctrlComposerInputShadowRaw = "--smtc-ctrl-composer-input-shadow-x"; // @public (undocumented) -export const ctrlComposerInputStrokeDisabledUsesgradient = "var(--smtc-ctrl-composer-input-stroke-disabledusesgradient, unset)"; +export const ctrlComposerInputStrokeDisabledUsesGradient = "var(--smtc-ctrl-composer-input-stroke-disabled-uses-gradient, unset)"; // @public (undocumented) -export const ctrlComposerInputStrokeDisabledUsesgradientRaw = "--smtc-ctrl-composer-input-stroke-disabledusesgradient"; +export const ctrlComposerInputStrokeDisabledUsesGradientRaw = "--smtc-ctrl-composer-input-stroke-disabled-uses-gradient"; // @public (undocumented) -export const ctrlComposerInputStrokeHoverUsesgradient = "var(--smtc-ctrl-composer-input-stroke-hoverusesgradient, unset)"; +export const ctrlComposerInputStrokeHoverUsesGradient = "var(--smtc-ctrl-composer-input-stroke-hover-uses-gradient, unset)"; // @public (undocumented) -export const ctrlComposerInputStrokeHoverUsesgradientRaw = "--smtc-ctrl-composer-input-stroke-hoverusesgradient"; +export const ctrlComposerInputStrokeHoverUsesGradientRaw = "--smtc-ctrl-composer-input-stroke-hover-uses-gradient"; // @public (undocumented) -export const ctrlComposerInputStrokePressedUsesgradient = "var(--smtc-ctrl-composer-input-stroke-pressedusesgradient, unset)"; +export const ctrlComposerInputStrokePressedUsesGradient = "var(--smtc-ctrl-composer-input-stroke-pressed-uses-gradient, unset)"; // @public (undocumented) -export const ctrlComposerInputStrokePressedUsesgradientRaw = "--smtc-ctrl-composer-input-stroke-pressedusesgradient"; +export const ctrlComposerInputStrokePressedUsesGradientRaw = "--smtc-ctrl-composer-input-stroke-pressed-uses-gradient"; // @public (undocumented) export const ctrlComposerInputStrokeRest = "var(--smtc-ctrl-composer-input-stroke-rest, unset)"; @@ -1373,10 +1373,10 @@ export const ctrlComposerInputStrokeRest = "var(--smtc-ctrl-composer-input-strok export const ctrlComposerInputStrokeRestRaw = "--smtc-ctrl-composer-input-stroke-rest"; // @public (undocumented) -export const ctrlComposerInputStrokeSelectedRestUsesgradient = "var(--smtc-ctrl-composer-input-stroke-selected-restusesgradient, unset)"; +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-restusesgradient"; +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)"; @@ -1427,7 +1427,7 @@ export const ctrlDialogBaseShadowKey = "var(--smtc-ctrl-dialog-base-shadow-key)" export const ctrlDialogBaseShadowKeyRaw = "--smtc-ctrl-dialog-base-shadow-key"; // @public (undocumented) -export const ctrlDialogLayerBackground = "var(--smtc-ctrl-dialog-layer-background, var(--smtc-background-layer-primarysolid))"; +export const ctrlDialogLayerBackground = "var(--smtc-ctrl-dialog-layer-background, var(--smtc-background-layer-primary-solid))"; // @public (undocumented) export const ctrlDialogLayerBackgroundRaw = "--smtc-ctrl-dialog-layer-background"; @@ -1445,22 +1445,22 @@ export const ctrlDialogStroke = "var(--smtc-ctrl-dialog-stroke, unset)"; export const ctrlDialogStrokeRaw = "--smtc-ctrl-dialog-stroke"; // @public (undocumented) -export const ctrlDividerFixedlineLength = "var(--smtc-ctrl-divider-fixedline-length, var(--smtc-padding-content-align-default))"; +export const ctrlDividerFixedLineLength = "var(--smtc-ctrl-divider-fixed-line-length, var(--smtc-padding-content-align-default))"; // @public (undocumented) -export const ctrlDividerFixedlineLengthRaw = "--smtc-ctrl-divider-fixedline-length"; +export const ctrlDividerFixedLineLengthRaw = "--smtc-ctrl-divider-fixed-line-length"; // @public (undocumented) -export const ctrlDragBackgroundColorblend = "var(--smtc-ctrl-drag-background-colorblend)"; +export const ctrlDragBackgroundColorBlend = "var(--smtc-ctrl-drag-background-color-blend)"; // @public (undocumented) -export const ctrlDragBackgroundColorblendRaw = "--smtc-ctrl-drag-background-colorblend"; +export const ctrlDragBackgroundColorBlendRaw = "--smtc-ctrl-drag-background-color-blend"; // @public (undocumented) -export const ctrlDragBackgroundLumblend = "var(--smtc-ctrl-drag-background-lumblend)"; +export const ctrlDragBackgroundLumBlend = "var(--smtc-ctrl-drag-background-lum-blend)"; // @public (undocumented) -export const ctrlDragBackgroundLumblendRaw = "--smtc-ctrl-drag-background-lumblend"; +export const ctrlDragBackgroundLumBlendRaw = "--smtc-ctrl-drag-background-lum-blend"; // @public (undocumented) export const ctrlDragBackgroundSolid = "var(--smtc-ctrl-drag-background-solid)"; @@ -1510,6 +1510,18 @@ export const ctrlFabCornerRest = "var(--smtc-ctrl-fab-corner-rest, var(--smtc-co // @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 ctrlFabShadowDisabledKey = "var(--smtc-ctrl-fab-shadow-disabled-key, var(--smtc-ctrl-fab-shadow-pressed-key))"; @@ -1547,10 +1559,10 @@ export const ctrlFocusInnerStroke = "var(--smtc-ctrl-focus-inner-stroke)"; export const ctrlFocusInnerStrokeRaw = "--smtc-ctrl-focus-inner-stroke"; // @public (undocumented) -export const ctrlFocusInnerStrokewidth = "var(--smtc-ctrl-focus-inner-strokewidth, var(--smtc-strokewidth-default))"; +export const ctrlFocusInnerStrokeWidth = "var(--smtc-ctrl-focus-inner-stroke-width, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const ctrlFocusInnerStrokewidthRaw = "--smtc-ctrl-focus-inner-strokewidth"; +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(--colorStrokeFocus2)))"; @@ -1559,10 +1571,10 @@ export const ctrlFocusOuterStroke = "var(--smtc-ctrl-focus-outer-stroke, var(--s export const ctrlFocusOuterStrokeRaw = "--smtc-ctrl-focus-outer-stroke"; // @public (undocumented) -export const ctrlFocusOuterStrokewidth = "var(--smtc-ctrl-focus-outer-strokewidth)"; +export const ctrlFocusOuterStrokeWidth = "var(--smtc-ctrl-focus-outer-stroke-width)"; // @public (undocumented) -export const ctrlFocusOuterStrokewidthRaw = "--smtc-ctrl-focus-outer-strokewidth"; +export const ctrlFocusOuterStrokeWidthRaw = "--smtc-ctrl-focus-outer-stroke-width"; // @public (undocumented) export const ctrlInputBackgroundDisabled = "var(--smtc-ctrl-input-background-disabled, var(--smtc-background-ctrl-neutral-disabled))"; @@ -1601,67 +1613,67 @@ export const ctrlInputBackgroundSelected = "var(--smtc-ctrl-input-background-sel export const ctrlInputBackgroundSelectedRaw = "--smtc-ctrl-input-background-selected"; // @public (undocumented) -export const ctrlInputBottomlineStrokeDisabled = "var(--smtc-ctrl-input-bottomline-stroke-disabled, unset)"; +export const ctrlInputBottomLineStrokeDisabled = "var(--smtc-ctrl-input-bottom-line-stroke-disabled, unset)"; // @public (undocumented) -export const ctrlInputBottomlineStrokeDisabledRaw = "--smtc-ctrl-input-bottomline-stroke-disabled"; +export const ctrlInputBottomLineStrokeDisabledRaw = "--smtc-ctrl-input-bottom-line-stroke-disabled"; // @public (undocumented) -export const ctrlInputBottomlineStrokeError = "var(--smtc-ctrl-input-bottomline-stroke-error, unset)"; +export const ctrlInputBottomLineStrokeError = "var(--smtc-ctrl-input-bottom-line-stroke-error, unset)"; // @public (undocumented) -export const ctrlInputBottomlineStrokeErrorRaw = "--smtc-ctrl-input-bottomline-stroke-error"; +export const ctrlInputBottomLineStrokeErrorRaw = "--smtc-ctrl-input-bottom-line-stroke-error"; // @public (undocumented) -export const ctrlInputBottomlineStrokeHover = "var(--smtc-ctrl-input-bottomline-stroke-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; +export const ctrlInputBottomLineStrokeHover = "var(--smtc-ctrl-input-bottom-line-stroke-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; // @public (undocumented) -export const ctrlInputBottomlineStrokeHoverRaw = "--smtc-ctrl-input-bottomline-stroke-hover"; +export const ctrlInputBottomLineStrokeHoverRaw = "--smtc-ctrl-input-bottom-line-stroke-hover"; // @public (undocumented) -export const ctrlInputBottomlineStrokePressed = "var(--smtc-ctrl-input-bottomline-stroke-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; +export const ctrlInputBottomLineStrokePressed = "var(--smtc-ctrl-input-bottom-line-stroke-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; // @public (undocumented) -export const ctrlInputBottomlineStrokePressedRaw = "--smtc-ctrl-input-bottomline-stroke-pressed"; +export const ctrlInputBottomLineStrokePressedRaw = "--smtc-ctrl-input-bottom-line-stroke-pressed"; // @public (undocumented) -export const ctrlInputBottomlineStrokeRest = "var(--smtc-ctrl-input-bottomline-stroke-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; +export const ctrlInputBottomLineStrokeRest = "var(--smtc-ctrl-input-bottom-line-stroke-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; // @public (undocumented) -export const ctrlInputBottomlineStrokeRestRaw = "--smtc-ctrl-input-bottomline-stroke-rest"; +export const ctrlInputBottomLineStrokeRestRaw = "--smtc-ctrl-input-bottom-line-stroke-rest"; // @public (undocumented) -export const ctrlInputBottomlineStrokeSelected = "var(--smtc-ctrl-input-bottomline-stroke-selected, var(--smtc-background-ctrl-brand-rest))"; +export const ctrlInputBottomLineStrokeSelected = "var(--smtc-ctrl-input-bottom-line-stroke-selected, var(--smtc-background-ctrl-brand-rest))"; // @public (undocumented) -export const ctrlInputBottomlineStrokeSelectedRaw = "--smtc-ctrl-input-bottomline-stroke-selected"; +export const ctrlInputBottomLineStrokeSelectedRaw = "--smtc-ctrl-input-bottom-line-stroke-selected"; // @public (undocumented) -export const ctrlInputBottomlineStrokewidthHover = "var(--smtc-ctrl-input-bottomline-strokewidth-hover, var(--smtc-strokewidth-default))"; +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-bottomline-strokewidth-hover"; +export const ctrlInputBottomLineStrokeWidthHoverRaw = "--smtc-ctrl-input-bottom-line-stroke-width-hover"; // @public (undocumented) -export const ctrlInputBottomlineStrokewidthPressed = "var(--smtc-ctrl-input-bottomline-strokewidth-pressed, var(--smtc-ctrl-input-bottomline-strokewidth-selected))"; +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-bottomline-strokewidth-pressed"; +export const ctrlInputBottomLineStrokeWidthPressedRaw = "--smtc-ctrl-input-bottom-line-stroke-width-pressed"; // @public (undocumented) -export const ctrlInputBottomlineStrokewidthRest = "var(--smtc-ctrl-input-bottomline-strokewidth-rest, var(--smtc-strokewidth-default))"; +export const ctrlInputBottomLineStrokeWidthRest = "var(--smtc-ctrl-input-bottom-line-stroke-width-rest, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const ctrlInputBottomlineStrokewidthRestRaw = "--smtc-ctrl-input-bottomline-strokewidth-rest"; +export const ctrlInputBottomLineStrokeWidthRestRaw = "--smtc-ctrl-input-bottom-line-stroke-width-rest"; // @public (undocumented) -export const ctrlInputBottomlineStrokewidthSelected = "var(--smtc-ctrl-input-bottomline-strokewidth-selected)"; +export const ctrlInputBottomLineStrokeWidthSelected = "var(--smtc-ctrl-input-bottom-line-stroke-width-selected)"; // @public (undocumented) -export const ctrlInputBottomlineStrokewidthSelectedRaw = "--smtc-ctrl-input-bottomline-strokewidth-selected"; +export const ctrlInputBottomLineStrokeWidthSelectedRaw = "--smtc-ctrl-input-bottom-line-stroke-width-selected"; // @public (undocumented) -export const ctrlInputStrokeDisabled = "var(--smtc-ctrl-input-stroke-disabled, var(--smtc-stroke-ctrl-onoutline-disabled))"; +export const ctrlInputStrokeDisabled = "var(--smtc-ctrl-input-stroke-disabled, var(--smtc-stroke-ctrl-on-outline-disabled))"; // @public (undocumented) export const ctrlInputStrokeDisabledRaw = "--smtc-ctrl-input-stroke-disabled"; @@ -1673,64 +1685,64 @@ export const ctrlInputStrokeError = "var(--smtc-ctrl-input-stroke-error, var(--s export const ctrlInputStrokeErrorRaw = "--smtc-ctrl-input-stroke-error"; // @public (undocumented) -export const ctrlInputStrokeHover = "var(--smtc-ctrl-input-stroke-hover, var(--smtc-stroke-ctrl-onoutline-hover))"; +export const ctrlInputStrokeHover = "var(--smtc-ctrl-input-stroke-hover, var(--smtc-stroke-ctrl-on-outline-hover))"; // @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-onoutline-pressed))"; +export const ctrlInputStrokePressed = "var(--smtc-ctrl-input-stroke-pressed, var(--smtc-stroke-ctrl-on-outline-pressed))"; // @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-onoutline-rest))"; +export const ctrlInputStrokeRest = "var(--smtc-ctrl-input-stroke-rest, var(--smtc-stroke-ctrl-on-outline-rest))"; // @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-onoutline-rest))"; +export const ctrlInputStrokeSelected = "var(--smtc-ctrl-input-stroke-selected, var(--smtc-stroke-ctrl-on-outline-rest))"; // @public (undocumented) export const ctrlInputStrokeSelectedRaw = "--smtc-ctrl-input-stroke-selected"; // @public (undocumented) -export const ctrlInputStrokewidthHover = "var(--smtc-ctrl-input-strokewidth-hover, var(--smtc-strokewidth-default))"; +export const ctrlInputStrokeWidthHover = "var(--smtc-ctrl-input-stroke-width-hover, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const ctrlInputStrokewidthHoverRaw = "--smtc-ctrl-input-strokewidth-hover"; +export const ctrlInputStrokeWidthHoverRaw = "--smtc-ctrl-input-stroke-width-hover"; // @public (undocumented) -export const ctrlInputStrokewidthPressed = "var(--smtc-ctrl-input-strokewidth-pressed, var(--smtc-strokewidth-default))"; +export const ctrlInputStrokeWidthPressed = "var(--smtc-ctrl-input-stroke-width-pressed, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const ctrlInputStrokewidthPressedRaw = "--smtc-ctrl-input-strokewidth-pressed"; +export const ctrlInputStrokeWidthPressedRaw = "--smtc-ctrl-input-stroke-width-pressed"; // @public (undocumented) -export const ctrlInputStrokewidthRest = "var(--smtc-ctrl-input-strokewidth-rest, var(--smtc-strokewidth-default))"; +export const ctrlInputStrokeWidthRest = "var(--smtc-ctrl-input-stroke-width-rest, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const ctrlInputStrokewidthRestRaw = "--smtc-ctrl-input-strokewidth-rest"; +export const ctrlInputStrokeWidthRestRaw = "--smtc-ctrl-input-stroke-width-rest"; // @public (undocumented) -export const ctrlInputStrokewidthSelected = "var(--smtc-ctrl-input-strokewidth-selected)"; +export const ctrlInputStrokeWidthSelected = "var(--smtc-ctrl-input-stroke-width-selected)"; // @public (undocumented) -export const ctrlInputStrokewidthSelectedRaw = "--smtc-ctrl-input-strokewidth-selected"; +export const ctrlInputStrokeWidthSelectedRaw = "--smtc-ctrl-input-stroke-width-selected"; // @public (undocumented) -export const ctrlInputTextselectionBackground = "var(--smtc-ctrl-input-textselection-background, var(--smtc-background-ctrl-brand-rest))"; +export const ctrlInputTextSelectionBackground = "var(--smtc-ctrl-input-text-selection-background, var(--smtc-background-ctrl-brand-rest))"; // @public (undocumented) -export const ctrlInputTextselectionBackgroundRaw = "--smtc-ctrl-input-textselection-background"; +export const ctrlInputTextSelectionBackgroundRaw = "--smtc-ctrl-input-text-selection-background"; // @public (undocumented) -export const ctrlInputTextselectionForeground = "var(--smtc-ctrl-input-textselection-foreground, var(--smtc-foreground-ctrl-onbrand-rest))"; +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-textselection-foreground"; +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)))"; @@ -1769,22 +1781,22 @@ export const ctrlLinkForegroundNeutralRest = "var(--smtc-ctrl-link-foreground-ne export const ctrlLinkForegroundNeutralRestRaw = "--smtc-ctrl-link-foreground-neutral-rest"; // @public (undocumented) -export const ctrlLinkInlineShowunderlineatrest = "var(--smtc-ctrl-link-inline-showunderlineatrest)"; +export const ctrlLinkInlineShowUnderlineAtRest = "var(--smtc-ctrl-link-inline-show-underline-at-rest)"; // @public (undocumented) -export const ctrlLinkInlineShowunderlineatrestRaw = "--smtc-ctrl-link-inline-showunderlineatrest"; +export const ctrlLinkInlineShowUnderlineAtRestRaw = "--smtc-ctrl-link-inline-show-underline-at-rest"; // @public (undocumented) -export const ctrlLinkInlineStrokewidthHover = "var(--smtc-ctrl-link-inline-strokewidth-hover, var(--smtc-strokewidth-default))"; +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-strokewidth-hover"; +export const ctrlLinkInlineStrokeWidthHoverRaw = "--smtc-ctrl-link-inline-stroke-width-hover"; // @public (undocumented) -export const ctrlLinkInlineStrokewidthRest = "var(--smtc-ctrl-link-inline-strokewidth-rest, var(--smtc-strokewidth-default))"; +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-strokewidth-rest"; +export const ctrlLinkInlineStrokeWidthRestRaw = "--smtc-ctrl-link-inline-stroke-width-rest"; // @public (undocumented) export const ctrlLinkInlineUnderlineDashed = "var(--smtc-ctrl-link-inline-underline-dashed)"; @@ -1793,28 +1805,28 @@ export const ctrlLinkInlineUnderlineDashed = "var(--smtc-ctrl-link-inline-underl export const ctrlLinkInlineUnderlineDashedRaw = "--smtc-ctrl-link-inline-underline-dashed"; // @public (undocumented) -export const ctrlLinkOnpageShowunderlineatrest = "var(--smtc-ctrl-link-onpage-showunderlineatrest)"; +export const ctrlLinkOnPageShowUnderlineAtRest = "var(--smtc-ctrl-link-on-page-show-underline-at-rest)"; // @public (undocumented) -export const ctrlLinkOnpageShowunderlineatrestRaw = "--smtc-ctrl-link-onpage-showunderlineatrest"; +export const ctrlLinkOnPageShowUnderlineAtRestRaw = "--smtc-ctrl-link-on-page-show-underline-at-rest"; // @public (undocumented) -export const ctrlLinkOnpageStrokewidthHover = "var(--smtc-ctrl-link-onpage-strokewidth-hover, var(--smtc-strokewidth-default))"; +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-onpage-strokewidth-hover"; +export const ctrlLinkOnPageStrokeWidthHoverRaw = "--smtc-ctrl-link-on-page-stroke-width-hover"; // @public (undocumented) -export const ctrlLinkOnpageStrokewidthRest = "var(--smtc-ctrl-link-onpage-strokewidth-rest, var(--smtc-strokewidth-default))"; +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-onpage-strokewidth-rest"; +export const ctrlLinkOnPageStrokeWidthRestRaw = "--smtc-ctrl-link-on-page-stroke-width-rest"; // @public (undocumented) -export const ctrlLinkOnpageUnderlineDashed = "var(--smtc-ctrl-link-onpage-underline-dashed)"; +export const ctrlLinkOnPageUnderlineDashed = "var(--smtc-ctrl-link-on-page-underline-dashed)"; // @public (undocumented) -export const ctrlLinkOnpageUnderlineDashedRaw = "--smtc-ctrl-link-onpage-underline-dashed"; +export const ctrlLinkOnPageUnderlineDashedRaw = "--smtc-ctrl-link-on-page-underline-dashed"; // @public (undocumented) export const ctrlListBackgroundSelectedDisabled = "var(--smtc-ctrl-list-background-selected-disabled, var(--smtc-background-ctrl-subtle-disabled))"; @@ -1871,7 +1883,7 @@ export const ctrlListChoiceCheckboxCorner = "var(--smtc-ctrl-list-choice-checkbo 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-iconsecondary))"; +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"; @@ -1889,13 +1901,13 @@ export const ctrlListChoiceForegroundHover = "var(--smtc-ctrl-list-choice-foregr 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-brand-disabled))"; +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-brand-rest))"; +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"; @@ -1942,6 +1954,30 @@ export const ctrlListCornerRest = "var(--smtc-ctrl-list-corner-rest, var(--smtc- // @public (undocumented) export const ctrlListCornerRestRaw = "--smtc-ctrl-list-corner-rest"; +// @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))"; @@ -1997,10 +2033,10 @@ export const ctrlListLgIndentLevel3 = "var(--smtc-ctrl-list-lg-indent-level3)"; export const ctrlListLgIndentLevel3Raw = "--smtc-ctrl-list-lg-indent-level3"; // @public (undocumented) -export const ctrlListPillFullwidth = "var(--smtc-ctrl-list-pill-fullwidth)"; +export const ctrlListPillFullWidth = "var(--smtc-ctrl-list-pill-full-width)"; // @public (undocumented) -export const ctrlListPillFullwidthRaw = "--smtc-ctrl-list-pill-fullwidth"; +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))"; @@ -2051,10 +2087,10 @@ export const ctrlListShadowSelectedAmbient = "var(--smtc-ctrl-list-shadow-select export const ctrlListShadowSelectedAmbientRaw = "--smtc-ctrl-list-shadow-selected-ambient"; // @public (undocumented) -export const ctrlListShadowSelectedKey = "var(--smtc-ctrl-list-shadow-selected-key, unset)"; +export const ctrlListShadowSelectedKey = "var(--smtc-ctrl-list-shadow-selected-key-y, unset)"; // @public (undocumented) -export const ctrlListShadowSelectedKeyRaw = "--smtc-ctrl-list-shadow-selected-key"; +export const ctrlListShadowSelectedKeyRaw = "--smtc-ctrl-list-shadow-selected-key-y"; // @public (undocumented) export const ctrlListSmCornerHover = "var(--smtc-ctrl-list-sm-corner-hover, var(--smtc-corner-ctrl-sm-rest))"; @@ -2099,40 +2135,40 @@ export const ctrlListSplitDividerPaddingInset = "var(--smtc-ctrl-list-split-divi export const ctrlListSplitDividerPaddingInsetRaw = "--smtc-ctrl-list-split-divider-padding-inset"; // @public (undocumented) -export const ctrlListSplitDividerShowdivider = "var(--smtc-ctrl-list-split-divider-showdivider)"; +export const ctrlListSplitDividerShowDivider = "var(--smtc-ctrl-list-split-divider-show-divider)"; // @public (undocumented) -export const ctrlListSplitDividerShowdividerRaw = "--smtc-ctrl-list-split-divider-showdivider"; +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-onneutral))"; +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-litefilter-background-selected, var(--smtc-background-ctrl-brand-rest))"; +export const ctrlLiteFilterBackgroundSelected = "var(--smtc-ctrl-lite-filter-background-selected, var(--smtc-background-ctrl-brand-rest))"; // @public (undocumented) -export const ctrlLitefilterBackgroundSelectedRaw = "--smtc-ctrl-litefilter-background-selected"; +export const ctrlLiteFilterBackgroundSelectedRaw = "--smtc-ctrl-lite-filter-background-selected"; // @public (undocumented) -export const ctrlLitefilterForegroundSelected = "var(--smtc-ctrl-litefilter-foreground-selected, var(--smtc-foreground-ctrl-onbrand-rest))"; +export const ctrlLiteFilterForegroundSelected = "var(--smtc-ctrl-lite-filter-foreground-selected, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) -export const ctrlLitefilterForegroundSelectedRaw = "--smtc-ctrl-litefilter-foreground-selected"; +export const ctrlLiteFilterForegroundSelectedRaw = "--smtc-ctrl-lite-filter-foreground-selected"; // @public (undocumented) -export const ctrlLitefilterStrokeSelected = "var(--smtc-ctrl-litefilter-stroke-selected, var(--smtc-stroke-ctrl-onbrand-rest))"; +export const ctrlLiteFilterStrokeSelected = "var(--smtc-ctrl-lite-filter-stroke-selected, var(--smtc-stroke-ctrl-on-brand-rest))"; // @public (undocumented) -export const ctrlLitefilterStrokeSelectedRaw = "--smtc-ctrl-litefilter-stroke-selected"; +export const ctrlLiteFilterStrokeSelectedRaw = "--smtc-ctrl-lite-filter-stroke-selected"; // @public (undocumented) -export const ctrlLitefilterStrokewidthSelected = "var(--smtc-ctrl-litefilter-strokewidth-selected, var(--smtc-strokewidth-default))"; +export const ctrlLiteFilterStrokeWidthSelected = "var(--smtc-ctrl-lite-filter-stroke-width-selected, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const ctrlLitefilterStrokewidthSelectedRaw = "--smtc-ctrl-litefilter-strokewidth-selected"; +export const ctrlLiteFilterStrokeWidthSelectedRaw = "--smtc-ctrl-lite-filter-stroke-width-selected"; // @public (undocumented) export const ctrlProgressBackgroundEmpty = "var(--smtc-ctrl-progress-background-empty)"; @@ -2213,7 +2249,7 @@ export const ctrlRatingIconSize = "var(--smtc-ctrl-rating-icon-size, var(--smtc- export const ctrlRatingIconSizeRaw = "--smtc-ctrl-rating-icon-size"; // @public (undocumented) -export const ctrlRatingIconTheme = "var(--smtc-ctrl-rating-icon-theme, var(--smtc-icontheme-ctrl-default-rest))"; +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"; @@ -2375,13 +2411,13 @@ export const ctrlSegmentedSmCornerRest = "var(--smtc-ctrl-segmented-sm-corner-re export const ctrlSegmentedSmCornerRestRaw = "--smtc-ctrl-segmented-sm-corner-rest"; // @public (undocumented) -export const ctrlSegmentedSmItemCornerHover = "var(--smtc-ctrl-segmented-sm-item-corner-hover)"; +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)"; +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"; @@ -2543,25 +2579,25 @@ export const ctrlSliderSmThumbSizeRest = "var(--smtc-ctrl-slider-sm-thumb-size-r 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-onbrand-disabled))"; +export const ctrlSliderThumbBackgroundDisabled = "var(--smtc-ctrl-slider-thumb-background-disabled, var(--smtc-foreground-ctrl-on-brand-disabled))"; // @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-onbrand-rest))"; +export const ctrlSliderThumbBackgroundHover = "var(--smtc-ctrl-slider-thumb-background-hover, var(--smtc-foreground-ctrl-on-brand-rest))"; // @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-onbrand-rest))"; +export const ctrlSliderThumbBackgroundPressed = "var(--smtc-ctrl-slider-thumb-background-pressed, var(--smtc-foreground-ctrl-on-brand-rest))"; // @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-onbrand-rest))"; +export const ctrlSliderThumbBackgroundRest = "var(--smtc-ctrl-slider-thumb-background-rest, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) export const ctrlSliderThumbBackgroundRestRaw = "--smtc-ctrl-slider-thumb-background-rest"; @@ -2597,22 +2633,22 @@ export const ctrlSliderThumbInnerStrokeRest = "var(--smtc-ctrl-slider-thumb-inne export const ctrlSliderThumbInnerStrokeRestRaw = "--smtc-ctrl-slider-thumb-inner-stroke-rest"; // @public (undocumented) -export const ctrlSliderThumbInnerStrokewidthHover = "var(--smtc-ctrl-slider-thumb-inner-strokewidth-hover, var(--smtc-ctrl-slider-thumb-inner-strokewidth-rest))"; +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-strokewidth-hover"; +export const ctrlSliderThumbInnerStrokeWidthHoverRaw = "--smtc-ctrl-slider-thumb-inner-stroke-width-hover"; // @public (undocumented) -export const ctrlSliderThumbInnerStrokewidthPressed = "var(--smtc-ctrl-slider-thumb-inner-strokewidth-pressed, var(--smtc-ctrl-slider-thumb-inner-strokewidth-rest))"; +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-strokewidth-pressed"; +export const ctrlSliderThumbInnerStrokeWidthPressedRaw = "--smtc-ctrl-slider-thumb-inner-stroke-width-pressed"; // @public (undocumented) -export const ctrlSliderThumbInnerStrokewidthRest = "var(--smtc-ctrl-slider-thumb-inner-strokewidth-rest)"; +export const ctrlSliderThumbInnerStrokeWidthRest = "var(--smtc-ctrl-slider-thumb-inner-stroke-width-rest)"; // @public (undocumented) -export const ctrlSliderThumbInnerStrokewidthRestRaw = "--smtc-ctrl-slider-thumb-inner-strokewidth-rest"; +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))"; @@ -2639,10 +2675,10 @@ export const ctrlSliderThumbOuterStrokeRest = "var(--smtc-ctrl-slider-thumb-oute export const ctrlSliderThumbOuterStrokeRestRaw = "--smtc-ctrl-slider-thumb-outer-stroke-rest"; // @public (undocumented) -export const ctrlSliderThumbOuterStrokewidth = "var(--smtc-ctrl-slider-thumb-outer-strokewidth, var(--smtc-strokewidth-default))"; +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-strokewidth"; +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))"; @@ -2663,34 +2699,34 @@ export const ctrlSliderThumbSizeRest = "var(--smtc-ctrl-slider-thumb-size-rest, export const ctrlSliderThumbSizeRestRaw = "--smtc-ctrl-slider-thumb-size-rest"; // @public (undocumented) -export const ctrlSpinnerShowemptytrack = "var(--smtc-ctrl-spinner-showemptytrack)"; +export const ctrlSpinnerShowEmptyTrack = "var(--smtc-ctrl-spinner-show-empty-track)"; // @public (undocumented) -export const ctrlSpinnerShowemptytrackRaw = "--smtc-ctrl-spinner-showemptytrack"; +export const ctrlSpinnerShowEmptyTrackRaw = "--smtc-ctrl-spinner-show-empty-track"; // @public (undocumented) -export const ctrlSpinnerStrokewidth = "var(--smtc-ctrl-spinner-strokewidth, var(--smtc-ctrl-progress-height-filled))"; +export const ctrlSpinnerStrokeWidth = "var(--smtc-ctrl-spinner-stroke-width, var(--smtc-ctrl-progress-height-filled))"; // @public (undocumented) -export const ctrlSpinnerStrokewidthRaw = "--smtc-ctrl-spinner-strokewidth"; +export const ctrlSpinnerStrokeWidthRaw = "--smtc-ctrl-spinner-stroke-width"; // @public (undocumented) -export const ctrlSplitDividerStrokewidth = "var(--smtc-ctrl-split-divider-strokewidth, var(--smtc-strokewidth-default))"; +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-strokewidth-onoutline, var(--smtc-strokewidth-default))"; +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-strokewidth-onoutline"; +export const ctrlSplitDividerStrokeWidthOnOutlineRaw = "--smtc-ctrl-split-divider-stroke-width-on-outline"; // @public (undocumented) -export const ctrlSplitDividerStrokewidthOnsubtle = "var(--smtc-ctrl-split-divider-strokewidth-onsubtle, unset)"; +export const ctrlSplitDividerStrokeWidthOnSubtle = "var(--smtc-ctrl-split-divider-stroke-width-on-subtle, unset)"; // @public (undocumented) -export const ctrlSplitDividerStrokewidthOnsubtleRaw = "--smtc-ctrl-split-divider-strokewidth-onsubtle"; +export const ctrlSplitDividerStrokeWidthOnSubtleRaw = "--smtc-ctrl-split-divider-stroke-width-on-subtle"; // @public (undocumented) -export const ctrlSplitDividerStrokewidthRaw = "--smtc-ctrl-split-divider-strokewidth"; +export const ctrlSplitDividerStrokeWidthRaw = "--smtc-ctrl-split-divider-stroke-width"; // @public (undocumented) export const ctrlTooltipBackground = "var(--smtc-ctrl-tooltip-background)"; @@ -2741,28 +2777,28 @@ export const foregroundContentNeutralSecondary = "var(--smtc-foreground-content- export const foregroundContentNeutralSecondaryRaw = "--smtc-foreground-content-neutral-secondary"; // @public (undocumented) -export const foregroundCtrlActivebrandDisabled = "var(--smtc-foreground-ctrl-activebrand-disabled, var(--smtc-foreground-ctrl-brand-disabled))"; +export const foregroundCtrlActiveBrandDisabled = "var(--smtc-foreground-ctrl-active-brand-disabled, var(--smtc-foreground-ctrl-brand-disabled))"; // @public (undocumented) -export const foregroundCtrlActivebrandDisabledRaw = "--smtc-foreground-ctrl-activebrand-disabled"; +export const foregroundCtrlActiveBrandDisabledRaw = "--smtc-foreground-ctrl-active-brand-disabled"; // @public (undocumented) -export const foregroundCtrlActivebrandHover = "var(--smtc-foreground-ctrl-activebrand-hover, var(--smtc-foreground-ctrl-brand-hover))"; +export const foregroundCtrlActiveBrandHover = "var(--smtc-foreground-ctrl-active-brand-hover, var(--smtc-foreground-ctrl-brand-hover))"; // @public (undocumented) -export const foregroundCtrlActivebrandHoverRaw = "--smtc-foreground-ctrl-activebrand-hover"; +export const foregroundCtrlActiveBrandHoverRaw = "--smtc-foreground-ctrl-active-brand-hover"; // @public (undocumented) -export const foregroundCtrlActivebrandPressed = "var(--smtc-foreground-ctrl-activebrand-pressed, var(--smtc-foreground-ctrl-brand-pressed))"; +export const foregroundCtrlActiveBrandPressed = "var(--smtc-foreground-ctrl-active-brand-pressed, var(--smtc-foreground-ctrl-brand-pressed))"; // @public (undocumented) -export const foregroundCtrlActivebrandPressedRaw = "--smtc-foreground-ctrl-activebrand-pressed"; +export const foregroundCtrlActiveBrandPressedRaw = "--smtc-foreground-ctrl-active-brand-pressed"; // @public (undocumented) -export const foregroundCtrlActivebrandRest = "var(--smtc-foreground-ctrl-activebrand-rest, var(--smtc-foreground-ctrl-brand-rest))"; +export const foregroundCtrlActiveBrandRest = "var(--smtc-foreground-ctrl-active-brand-rest, var(--smtc-foreground-ctrl-brand-rest))"; // @public (undocumented) -export const foregroundCtrlActivebrandRestRaw = "--smtc-foreground-ctrl-activebrand-rest"; +export const foregroundCtrlActiveBrandRestRaw = "--smtc-foreground-ctrl-active-brand-rest"; // @public (undocumented) export const foregroundCtrlBrandDisabled = "var(--smtc-foreground-ctrl-brand-disabled)"; @@ -2795,76 +2831,76 @@ export const foregroundCtrlHintDefault = "var(--smtc-foreground-ctrl-hint-defaul export const foregroundCtrlHintDefaultRaw = "--smtc-foreground-ctrl-hint-default"; // @public (undocumented) -export const foregroundCtrlIconOnneutralDisabled = "var(--smtc-foreground-ctrl-icon-onneutral-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; +export const foregroundCtrlIconOnNeutralDisabled = "var(--smtc-foreground-ctrl-icon-on-neutral-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; // @public (undocumented) -export const foregroundCtrlIconOnneutralDisabledRaw = "--smtc-foreground-ctrl-icon-onneutral-disabled"; +export const foregroundCtrlIconOnNeutralDisabledRaw = "--smtc-foreground-ctrl-icon-on-neutral-disabled"; // @public (undocumented) -export const foregroundCtrlIconOnneutralHover = "var(--smtc-foreground-ctrl-icon-onneutral-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +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-onneutral-hover"; +export const foregroundCtrlIconOnNeutralHoverRaw = "--smtc-foreground-ctrl-icon-on-neutral-hover"; // @public (undocumented) -export const foregroundCtrlIconOnneutralPressed = "var(--smtc-foreground-ctrl-icon-onneutral-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +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-onneutral-pressed"; +export const foregroundCtrlIconOnNeutralPressedRaw = "--smtc-foreground-ctrl-icon-on-neutral-pressed"; // @public (undocumented) -export const foregroundCtrlIconOnneutralRest = "var(--smtc-foreground-ctrl-icon-onneutral-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +export const foregroundCtrlIconOnNeutralRest = "var(--smtc-foreground-ctrl-icon-on-neutral-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; // @public (undocumented) -export const foregroundCtrlIconOnneutralRestRaw = "--smtc-foreground-ctrl-icon-onneutral-rest"; +export const foregroundCtrlIconOnNeutralRestRaw = "--smtc-foreground-ctrl-icon-on-neutral-rest"; // @public (undocumented) -export const foregroundCtrlIconOnoutlineDisabled = "var(--smtc-foreground-ctrl-icon-onoutline-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; +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-onoutline-disabled"; +export const foregroundCtrlIconOnOutlineDisabledRaw = "--smtc-foreground-ctrl-icon-on-outline-disabled"; // @public (undocumented) -export const foregroundCtrlIconOnoutlineHover = "var(--smtc-foreground-ctrl-icon-onoutline-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +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-onoutline-hover"; +export const foregroundCtrlIconOnOutlineHoverRaw = "--smtc-foreground-ctrl-icon-on-outline-hover"; // @public (undocumented) -export const foregroundCtrlIconOnoutlinePressed = "var(--smtc-foreground-ctrl-icon-onoutline-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +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-onoutline-pressed"; +export const foregroundCtrlIconOnOutlinePressedRaw = "--smtc-foreground-ctrl-icon-on-outline-pressed"; // @public (undocumented) -export const foregroundCtrlIconOnoutlineRest = "var(--smtc-foreground-ctrl-icon-onoutline-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +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-onoutline-rest"; +export const foregroundCtrlIconOnOutlineRestRaw = "--smtc-foreground-ctrl-icon-on-outline-rest"; // @public (undocumented) -export const foregroundCtrlIconOnsubtleDisabled = "var(--smtc-foreground-ctrl-icon-onsubtle-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; +export const foregroundCtrlIconOnSubtleDisabled = "var(--smtc-foreground-ctrl-icon-on-subtle-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; // @public (undocumented) -export const foregroundCtrlIconOnsubtleDisabledRaw = "--smtc-foreground-ctrl-icon-onsubtle-disabled"; +export const foregroundCtrlIconOnSubtleDisabledRaw = "--smtc-foreground-ctrl-icon-on-subtle-disabled"; // @public (undocumented) -export const foregroundCtrlIconOnsubtleHover = "var(--smtc-foreground-ctrl-icon-onsubtle-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +export const foregroundCtrlIconOnSubtleHover = "var(--smtc-foreground-ctrl-icon-on-subtle-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; // @public (undocumented) -export const foregroundCtrlIconOnsubtleHoverRaw = "--smtc-foreground-ctrl-icon-onsubtle-hover"; +export const foregroundCtrlIconOnSubtleHoverRaw = "--smtc-foreground-ctrl-icon-on-subtle-hover"; // @public (undocumented) -export const foregroundCtrlIconOnsubtlePressed = "var(--smtc-foreground-ctrl-icon-onsubtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +export const foregroundCtrlIconOnSubtlePressed = "var(--smtc-foreground-ctrl-icon-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; // @public (undocumented) -export const foregroundCtrlIconOnsubtlePressedRaw = "--smtc-foreground-ctrl-icon-onsubtle-pressed"; +export const foregroundCtrlIconOnSubtlePressedRaw = "--smtc-foreground-ctrl-icon-on-subtle-pressed"; // @public (undocumented) -export const foregroundCtrlIconOnsubtleRest = "var(--smtc-foreground-ctrl-icon-onsubtle-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +export const foregroundCtrlIconOnSubtleRest = "var(--smtc-foreground-ctrl-icon-on-subtle-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; // @public (undocumented) -export const foregroundCtrlIconOnsubtleRestRaw = "--smtc-foreground-ctrl-icon-onsubtle-rest"; +export const foregroundCtrlIconOnSubtleRestRaw = "--smtc-foreground-ctrl-icon-on-subtle-rest"; // @public (undocumented) export const foregroundCtrlNeutralPrimaryDisabled = "var(--smtc-foreground-ctrl-neutral-primary-disabled, var(--colorNeutralForegroundDisabled))"; @@ -2915,124 +2951,130 @@ export const foregroundCtrlNeutralSecondaryRest = "var(--smtc-foreground-ctrl-ne export const foregroundCtrlNeutralSecondaryRestRaw = "--smtc-foreground-ctrl-neutral-secondary-rest"; // @public (undocumented) -export const foregroundCtrlOnactivebrandDisabled = "var(--smtc-foreground-ctrl-onactivebrand-disabled, var(--smtc-foreground-ctrl-onbrand-disabled))"; +export const foregroundCtrlOnActiveBrandDisabled = "var(--smtc-foreground-ctrl-on-active-brand-disabled, var(--smtc-foreground-ctrl-on-brand-disabled))"; + +// @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))"; // @public (undocumented) -export const foregroundCtrlOnactivebrandDisabledRaw = "--smtc-foreground-ctrl-onactivebrand-disabled"; +export const foregroundCtrlOnActiveBrandHoverRaw = "--smtc-foreground-ctrl-on-active-brand-hover"; // @public (undocumented) -export const foregroundCtrlOnactivebrandHover = "var(--smtc-foreground-ctrl-onactivebrand-hover, var(--smtc-foreground-ctrl-onbrand-rest))"; +export const foregroundCtrlOnActiveBrandPressed = "var(--smtc-foreground-ctrl-on-active-brand-pressed, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) -export const foregroundCtrlOnactivebrandHoverRaw = "--smtc-foreground-ctrl-onactivebrand-hover"; +export const foregroundCtrlOnActiveBrandPressedRaw = "--smtc-foreground-ctrl-on-active-brand-pressed"; // @public (undocumented) -export const foregroundCtrlOnactivebrandPressed = "var(--smtc-foreground-ctrl-onactivebrand-pressed, var(--smtc-foreground-ctrl-onbrand-rest))"; +export const foregroundCtrlOnActiveBrandRest = "var(--smtc-foreground-ctrl-on-active-brand-rest, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) -export const foregroundCtrlOnactivebrandPressedRaw = "--smtc-foreground-ctrl-onactivebrand-pressed"; +export const foregroundCtrlOnActiveBrandRestRaw = "--smtc-foreground-ctrl-on-active-brand-rest"; // @public (undocumented) -export const foregroundCtrlOnactivebrandRest = "var(--smtc-foreground-ctrl-onactivebrand-rest, var(--smtc-foreground-ctrl-onbrand-rest))"; +export const foregroundCtrlOnBrandDisabled = "var(--smtc-foreground-ctrl-on-brand-disabled)"; // @public (undocumented) -export const foregroundCtrlOnactivebrandRestRaw = "--smtc-foreground-ctrl-onactivebrand-rest"; +export const foregroundCtrlOnBrandDisabledRaw = "--smtc-foreground-ctrl-on-brand-disabled"; // @public (undocumented) -export const foregroundCtrlOnbrandDisabled = "var(--smtc-foreground-ctrl-onbrand-disabled)"; +export const foregroundCtrlOnBrandHover = "var(--smtc-foreground-ctrl-on-brand-hover, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) -export const foregroundCtrlOnbrandDisabledRaw = "--smtc-foreground-ctrl-onbrand-disabled"; +export const foregroundCtrlOnBrandHoverRaw = "--smtc-foreground-ctrl-on-brand-hover"; // @public (undocumented) -export const foregroundCtrlOnbrandHover = "var(--smtc-foreground-ctrl-onbrand-hover, var(--smtc-foreground-ctrl-onbrand-rest))"; +export const foregroundCtrlOnBrandPressed = "var(--smtc-foreground-ctrl-on-brand-pressed, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) -export const foregroundCtrlOnbrandHoverRaw = "--smtc-foreground-ctrl-onbrand-hover"; +export const foregroundCtrlOnBrandPressedRaw = "--smtc-foreground-ctrl-on-brand-pressed"; // @public (undocumented) -export const foregroundCtrlOnbrandPressed = "var(--smtc-foreground-ctrl-onbrand-pressed, var(--smtc-foreground-ctrl-onbrand-rest))"; +export const foregroundCtrlOnBrandRest = "var(--smtc-foreground-ctrl-on-brand-rest)"; // @public (undocumented) -export const foregroundCtrlOnbrandPressedRaw = "--smtc-foreground-ctrl-onbrand-pressed"; +export const foregroundCtrlOnBrandRestRaw = "--smtc-foreground-ctrl-on-brand-rest"; // @public (undocumented) -export const foregroundCtrlOnbrandRest = "var(--smtc-foreground-ctrl-onbrand-rest)"; +export const foregroundCtrlOnOutlineDisabled = "var(--smtc-foreground-ctrl-on-outline-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; // @public (undocumented) -export const foregroundCtrlOnbrandRestRaw = "--smtc-foreground-ctrl-onbrand-rest"; +export const foregroundCtrlOnOutlineDisabledRaw = "--smtc-foreground-ctrl-on-outline-disabled"; // @public (undocumented) -export const foregroundCtrlOnoutlineDisabled = "var(--smtc-foreground-ctrl-onoutline-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; +export const foregroundCtrlOnOutlineHover = "var(--smtc-foreground-ctrl-on-outline-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; // @public (undocumented) -export const foregroundCtrlOnoutlineDisabledRaw = "--smtc-foreground-ctrl-onoutline-disabled"; +export const foregroundCtrlOnOutlineHoverRaw = "--smtc-foreground-ctrl-on-outline-hover"; // @public (undocumented) -export const foregroundCtrlOnoutlineHover = "var(--smtc-foreground-ctrl-onoutline-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +export const foregroundCtrlOnOutlinePressed = "var(--smtc-foreground-ctrl-on-outline-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; // @public (undocumented) -export const foregroundCtrlOnoutlineHoverRaw = "--smtc-foreground-ctrl-onoutline-hover"; +export const foregroundCtrlOnOutlinePressedRaw = "--smtc-foreground-ctrl-on-outline-pressed"; // @public (undocumented) -export const foregroundCtrlOnoutlinePressed = "var(--smtc-foreground-ctrl-onoutline-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +export const foregroundCtrlOnOutlineRest = "var(--smtc-foreground-ctrl-on-outline-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; // @public (undocumented) -export const foregroundCtrlOnoutlinePressedRaw = "--smtc-foreground-ctrl-onoutline-pressed"; +export const foregroundCtrlOnOutlineRestRaw = "--smtc-foreground-ctrl-on-outline-rest"; // @public (undocumented) -export const foregroundCtrlOnoutlineRest = "var(--smtc-foreground-ctrl-onoutline-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +export const foregroundCtrlOnSubtleDisabled = "var(--smtc-foreground-ctrl-on-subtle-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; // @public (undocumented) -export const foregroundCtrlOnoutlineRestRaw = "--smtc-foreground-ctrl-onoutline-rest"; +export const foregroundCtrlOnSubtleDisabledRaw = "--smtc-foreground-ctrl-on-subtle-disabled"; // @public (undocumented) -export const foregroundCtrlOnsubtleDisabled = "var(--smtc-foreground-ctrl-onsubtle-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; +export const foregroundCtrlOnSubtleHover = "var(--smtc-foreground-ctrl-on-subtle-hover, var(--smtc-foreground-ctrl-neutral-primary-hover))"; // @public (undocumented) -export const foregroundCtrlOnsubtleDisabledRaw = "--smtc-foreground-ctrl-onsubtle-disabled"; +export const foregroundCtrlOnSubtleHoverRaw = "--smtc-foreground-ctrl-on-subtle-hover"; // @public (undocumented) -export const foregroundCtrlOnsubtleHover = "var(--smtc-foreground-ctrl-onsubtle-hover, var(--smtc-foreground-ctrl-neutral-primary-hover))"; +export const foregroundCtrlOnSubtlePressed = "var(--smtc-foreground-ctrl-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-pressed))"; // @public (undocumented) -export const foregroundCtrlOnsubtleHoverRaw = "--smtc-foreground-ctrl-onsubtle-hover"; +export const foregroundCtrlOnSubtlePressedRaw = "--smtc-foreground-ctrl-on-subtle-pressed"; // @public (undocumented) -export const foregroundCtrlOnsubtlePressed = "var(--smtc-foreground-ctrl-onsubtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-pressed))"; +export const foregroundCtrlOnSubtleRest = "var(--smtc-foreground-ctrl-on-subtle-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; // @public (undocumented) -export const foregroundCtrlOnsubtlePressedRaw = "--smtc-foreground-ctrl-onsubtle-pressed"; +export const foregroundCtrlOnSubtleRestRaw = "--smtc-foreground-ctrl-on-subtle-rest"; // @public (undocumented) -export const foregroundCtrlOnsubtleRest = "var(--smtc-foreground-ctrl-onsubtle-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +export const foregroundCtrlOnTransparentDisabled = "var(--smtc-foreground-ctrl-on-transparent-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; // @public (undocumented) -export const foregroundCtrlOnsubtleRestRaw = "--smtc-foreground-ctrl-onsubtle-rest"; +export const foregroundCtrlOnTransparentDisabledRaw = "--smtc-foreground-ctrl-on-transparent-disabled"; // @public (undocumented) -export const foregroundCtrlOntransparentDisabled = "var(--smtc-foreground-ctrl-ontransparent-disabled, var(--smtc-foreground-ctrl-neutral-primary-disabled))"; +export const foregroundCtrlOnTransparentHover = "var(--smtc-foreground-ctrl-on-transparent-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; // @public (undocumented) -export const foregroundCtrlOntransparentDisabledRaw = "--smtc-foreground-ctrl-ontransparent-disabled"; +export const foregroundCtrlOnTransparentHoverRaw = "--smtc-foreground-ctrl-on-transparent-hover"; // @public (undocumented) -export const foregroundCtrlOntransparentHover = "var(--smtc-foreground-ctrl-ontransparent-hover, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +export const foregroundCtrlOnTransparentPressed = "var(--smtc-foreground-ctrl-on-transparent-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; // @public (undocumented) -export const foregroundCtrlOntransparentHoverRaw = "--smtc-foreground-ctrl-ontransparent-hover"; +export const foregroundCtrlOnTransparentPressedRaw = "--smtc-foreground-ctrl-on-transparent-pressed"; // @public (undocumented) -export const foregroundCtrlOntransparentPressed = "var(--smtc-foreground-ctrl-ontransparent-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +export const foregroundCtrlOnTransparentRest = "var(--smtc-foreground-ctrl-on-transparent-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; // @public (undocumented) -export const foregroundCtrlOntransparentPressedRaw = "--smtc-foreground-ctrl-ontransparent-pressed"; +export const foregroundCtrlOnTransparentRestRaw = "--smtc-foreground-ctrl-on-transparent-rest"; // @public (undocumented) -export const foregroundCtrlOntransparentRest = "var(--smtc-foreground-ctrl-ontransparent-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; +export const gapBetweenCard = "var(--smtc-gap-between-card, var(--smtc-gap-between-content-medium))"; // @public (undocumented) -export const foregroundCtrlOntransparentRestRaw = "--smtc-foreground-ctrl-ontransparent-rest"; +export const gapBetweenCardRaw = "--smtc-gap-between-card"; // @public (undocumented) export const gapBetweenContentLarge = "var(--smtc-gap-between-content-large)"; @@ -3059,28 +3101,28 @@ export const gapBetweenContentSmall = "var(--smtc-gap-between-content-small)"; export const gapBetweenContentSmallRaw = "--smtc-gap-between-content-small"; // @public (undocumented) -export const gapBetweenContentXlarge = "var(--smtc-gap-between-content-xlarge)"; +export const gapBetweenContentXLarge = "var(--smtc-gap-between-content-x-large)"; // @public (undocumented) -export const gapBetweenContentXlargeRaw = "--smtc-gap-between-content-xlarge"; +export const gapBetweenContentXLargeRaw = "--smtc-gap-between-content-x-large"; // @public (undocumented) -export const gapBetweenContentXsmall = "var(--smtc-gap-between-content-xsmall)"; +export const gapBetweenContentXSmall = "var(--smtc-gap-between-content-x-small)"; // @public (undocumented) -export const gapBetweenContentXsmallRaw = "--smtc-gap-between-content-xsmall"; +export const gapBetweenContentXSmallRaw = "--smtc-gap-between-content-x-small"; // @public (undocumented) -export const gapBetweenContentXxlarge = "var(--smtc-gap-between-content-xxlarge)"; +export const gapBetweenContentXxLarge = "var(--smtc-gap-between-content-xx-large)"; // @public (undocumented) -export const gapBetweenContentXxlargeRaw = "--smtc-gap-between-content-xxlarge"; +export const gapBetweenContentXxLargeRaw = "--smtc-gap-between-content-xx-large"; // @public (undocumented) -export const gapBetweenContentXxsmall = "var(--smtc-gap-between-content-xxsmall)"; +export const gapBetweenContentXxSmall = "var(--smtc-gap-between-content-xx-small)"; // @public (undocumented) -export const gapBetweenContentXxsmallRaw = "--smtc-gap-between-content-xxsmall"; +export const gapBetweenContentXxSmallRaw = "--smtc-gap-between-content-xx-small"; // @public (undocumented) export const gapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default)"; @@ -3095,13 +3137,13 @@ export const gapBetweenCtrlLgDefault = "var(--smtc-gap-between-ctrl-lg-default)" 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-tonestedcontrol))"; +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-tonestedcontrol))"; +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"; @@ -3113,148 +3155,142 @@ export const gapBetweenCtrlSmDefault = "var(--smtc-gap-between-ctrl-sm-default)" 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-tonestedcontrol))"; +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 gapCard = "var(--smtc-gap-card, var(--smtc-gap-between-content-medium))"; +export const gapBetweenListItem = "var(--smtc-gap-between-list-item, var(--smtc-gap-between-content-xx-small))"; // @public (undocumented) -export const gapCardRaw = "--smtc-gap-card"; +export const gapBetweenListItemRaw = "--smtc-gap-between-list-item"; // @public (undocumented) -export const gapInsideCtrlDefault = "var(--smtc-gap-inside-ctrl-default)"; - -// @public (undocumented) -export const gapInsideCtrlDefaultRaw = "--smtc-gap-inside-ctrl-default"; - -// @public (undocumented) -export const gapInsideCtrlLgDefault = "var(--smtc-gap-inside-ctrl-lg-default)"; +export const gapBetweenTextLarge = "var(--smtc-gap-between-text-large, var(--smtc-gap-between-content-x-small))"; // @public (undocumented) -export const gapInsideCtrlLgDefaultRaw = "--smtc-gap-inside-ctrl-lg-default"; +export const gapBetweenTextLargeRaw = "--smtc-gap-between-text-large"; // @public (undocumented) -export const gapInsideCtrlLgTolabel = "var(--smtc-gap-inside-ctrl-lg-tolabel)"; +export const gapBetweenTextSmall = "var(--smtc-gap-between-text-small, var(--smtc-gap-between-content-xx-small))"; // @public (undocumented) -export const gapInsideCtrlLgTolabelRaw = "--smtc-gap-inside-ctrl-lg-tolabel"; +export const gapBetweenTextSmallRaw = "--smtc-gap-between-text-small"; // @public (undocumented) -export const gapInsideCtrlLgTosecondaryicon = "var(--smtc-gap-inside-ctrl-lg-tosecondaryicon)"; +export const gapInsideCtrlDefault = "var(--smtc-gap-inside-ctrl-default)"; // @public (undocumented) -export const gapInsideCtrlLgTosecondaryiconRaw = "--smtc-gap-inside-ctrl-lg-tosecondaryicon"; +export const gapInsideCtrlDefaultRaw = "--smtc-gap-inside-ctrl-default"; // @public (undocumented) -export const gapInsideCtrlSmDefault = "var(--smtc-gap-inside-ctrl-sm-default)"; +export const gapInsideCtrlLgDefault = "var(--smtc-gap-inside-ctrl-lg-default)"; // @public (undocumented) -export const gapInsideCtrlSmDefaultRaw = "--smtc-gap-inside-ctrl-sm-default"; +export const gapInsideCtrlLgDefaultRaw = "--smtc-gap-inside-ctrl-lg-default"; // @public (undocumented) -export const gapInsideCtrlSmTolabel = "var(--smtc-gap-inside-ctrl-sm-tolabel)"; +export const gapInsideCtrlLgToLabel = "var(--smtc-gap-inside-ctrl-lg-to-label)"; // @public (undocumented) -export const gapInsideCtrlSmTolabelRaw = "--smtc-gap-inside-ctrl-sm-tolabel"; +export const gapInsideCtrlLgToLabelRaw = "--smtc-gap-inside-ctrl-lg-to-label"; // @public (undocumented) -export const gapInsideCtrlSmTosecondaryicon = "var(--smtc-gap-inside-ctrl-sm-tosecondaryicon)"; +export const gapInsideCtrlLgToSecondaryIcon = "var(--smtc-gap-inside-ctrl-lg-to-secondary-icon)"; // @public (undocumented) -export const gapInsideCtrlSmTosecondaryiconRaw = "--smtc-gap-inside-ctrl-sm-tosecondaryicon"; +export const gapInsideCtrlLgToSecondaryIconRaw = "--smtc-gap-inside-ctrl-lg-to-secondary-icon"; // @public (undocumented) -export const gapInsideCtrlTolabel = "var(--smtc-gap-inside-ctrl-tolabel)"; +export const gapInsideCtrlSmDefault = "var(--smtc-gap-inside-ctrl-sm-default)"; // @public (undocumented) -export const gapInsideCtrlTolabelRaw = "--smtc-gap-inside-ctrl-tolabel"; +export const gapInsideCtrlSmDefaultRaw = "--smtc-gap-inside-ctrl-sm-default"; // @public (undocumented) -export const gapInsideCtrlTosecondaryicon = "var(--smtc-gap-inside-ctrl-tosecondaryicon)"; +export const gapInsideCtrlSmToLabel = "var(--smtc-gap-inside-ctrl-sm-to-label)"; // @public (undocumented) -export const gapInsideCtrlTosecondaryiconRaw = "--smtc-gap-inside-ctrl-tosecondaryicon"; +export const gapInsideCtrlSmToLabelRaw = "--smtc-gap-inside-ctrl-sm-to-label"; // @public (undocumented) -export const gapList = "var(--smtc-gap-list, var(--smtc-gap-between-content-xxsmall))"; +export const gapInsideCtrlSmToSecondaryIcon = "var(--smtc-gap-inside-ctrl-sm-to-secondary-icon)"; // @public (undocumented) -export const gapListRaw = "--smtc-gap-list"; +export const gapInsideCtrlSmToSecondaryIconRaw = "--smtc-gap-inside-ctrl-sm-to-secondary-icon"; // @public (undocumented) -export const gapTextLarge = "var(--smtc-gap-text-large, var(--smtc-gap-between-content-xsmall))"; +export const gapInsideCtrlToLabel = "var(--smtc-gap-inside-ctrl-to-label)"; // @public (undocumented) -export const gapTextLargeRaw = "--smtc-gap-text-large"; +export const gapInsideCtrlToLabelRaw = "--smtc-gap-inside-ctrl-to-label"; // @public (undocumented) -export const gapTextSmall = "var(--smtc-gap-text-small, var(--smtc-gap-between-content-xxsmall))"; +export const gapInsideCtrlToSecondaryIcon = "var(--smtc-gap-inside-ctrl-to-secondary-icon)"; // @public (undocumented) -export const gapTextSmallRaw = "--smtc-gap-text-small"; +export const gapInsideCtrlToSecondaryIconRaw = "--smtc-gap-inside-ctrl-to-secondary-icon"; // @public (undocumented) -export const iconthemeCtrlChevronDefault = "var(--smtc-icontheme-ctrl-chevron-default, var(--smtc-icontheme-ctrl-default-rest))"; +export const iconThemeCtrlChevronDefault = "var(--smtc-icon-theme-ctrl-chevron-default, var(--smtc-icon-theme-ctrl-default-rest))"; // @public (undocumented) -export const iconthemeCtrlChevronDefaultRaw = "--smtc-icontheme-ctrl-chevron-default"; +export const iconThemeCtrlChevronDefaultRaw = "--smtc-icon-theme-ctrl-chevron-default"; // @public (undocumented) -export const iconthemeCtrlChevronSelected = "var(--smtc-icontheme-ctrl-chevron-selected, var(--smtc-icontheme-ctrl-default-selected))"; +export const iconThemeCtrlChevronSelected = "var(--smtc-icon-theme-ctrl-chevron-selected, var(--smtc-icon-theme-ctrl-default-selected))"; // @public (undocumented) -export const iconthemeCtrlChevronSelectedRaw = "--smtc-icontheme-ctrl-chevron-selected"; +export const iconThemeCtrlChevronSelectedRaw = "--smtc-icon-theme-ctrl-chevron-selected"; // @public (undocumented) -export const iconthemeCtrlDefaultHover = "var(--smtc-icontheme-ctrl-default-hover, var(--smtc-icontheme-ctrl-default-rest))"; +export const iconThemeCtrlDefaultHover = "var(--smtc-icon-theme-ctrl-default-hover, var(--smtc-icon-theme-ctrl-default-rest))"; // @public (undocumented) -export const iconthemeCtrlDefaultHoverRaw = "--smtc-icontheme-ctrl-default-hover"; +export const iconThemeCtrlDefaultHoverRaw = "--smtc-icon-theme-ctrl-default-hover"; // @public (undocumented) -export const iconthemeCtrlDefaultPressed = "var(--smtc-icontheme-ctrl-default-pressed, var(--smtc-icontheme-ctrl-default-rest))"; +export const iconThemeCtrlDefaultPressed = "var(--smtc-icon-theme-ctrl-default-pressed, var(--smtc-icon-theme-ctrl-default-rest))"; // @public (undocumented) -export const iconthemeCtrlDefaultPressedRaw = "--smtc-icontheme-ctrl-default-pressed"; +export const iconThemeCtrlDefaultPressedRaw = "--smtc-icon-theme-ctrl-default-pressed"; // @public (undocumented) -export const iconthemeCtrlDefaultRest = "var(--smtc-icontheme-ctrl-default-rest)"; +export const iconThemeCtrlDefaultRest = "var(--smtc-icon-theme-ctrl-default-rest)"; // @public (undocumented) -export const iconthemeCtrlDefaultRestRaw = "--smtc-icontheme-ctrl-default-rest"; +export const iconThemeCtrlDefaultRestRaw = "--smtc-icon-theme-ctrl-default-rest"; // @public (undocumented) -export const iconthemeCtrlDefaultSelected = "var(--smtc-icontheme-ctrl-default-selected)"; +export const iconThemeCtrlDefaultSelected = "var(--smtc-icon-theme-ctrl-default-selected)"; // @public (undocumented) -export const iconthemeCtrlDefaultSelectedRaw = "--smtc-icontheme-ctrl-default-selected"; +export const iconThemeCtrlDefaultSelectedRaw = "--smtc-icon-theme-ctrl-default-selected"; // @public (undocumented) -export const iconthemeCtrlSubtleHover = "var(--smtc-icontheme-ctrl-subtle-hover, var(--smtc-icontheme-ctrl-default-rest))"; +export const iconThemeCtrlSubtleHover = "var(--smtc-icon-theme-ctrl-subtle-hover, var(--smtc-icon-theme-ctrl-default-rest))"; // @public (undocumented) -export const iconthemeCtrlSubtleHoverRaw = "--smtc-icontheme-ctrl-subtle-hover"; +export const iconThemeCtrlSubtleHoverRaw = "--smtc-icon-theme-ctrl-subtle-hover"; // @public (undocumented) -export const iconthemeCtrlSubtlePressed = "var(--smtc-icontheme-ctrl-subtle-pressed, var(--smtc-icontheme-ctrl-default-rest))"; +export const iconThemeCtrlSubtlePressed = "var(--smtc-icon-theme-ctrl-subtle-pressed, var(--smtc-icon-theme-ctrl-default-rest))"; // @public (undocumented) -export const iconthemeCtrlSubtlePressedRaw = "--smtc-icontheme-ctrl-subtle-pressed"; +export const iconThemeCtrlSubtlePressedRaw = "--smtc-icon-theme-ctrl-subtle-pressed"; // @public (undocumented) -export const iconthemeCtrlSubtleRest = "var(--smtc-icontheme-ctrl-subtle-rest, var(--smtc-icontheme-ctrl-default-rest))"; +export const iconThemeCtrlSubtleRest = "var(--smtc-icon-theme-ctrl-subtle-rest, var(--smtc-icon-theme-ctrl-default-rest))"; // @public (undocumented) -export const iconthemeCtrlSubtleRestRaw = "--smtc-icontheme-ctrl-subtle-rest"; +export const iconThemeCtrlSubtleRestRaw = "--smtc-icon-theme-ctrl-subtle-rest"; // @public (undocumented) -export const iconthemeCtrlSubtleSelected = "var(--smtc-icontheme-ctrl-subtle-selected, var(--smtc-icontheme-ctrl-default-selected))"; +export const iconThemeCtrlSubtleSelected = "var(--smtc-icon-theme-ctrl-subtle-selected, var(--smtc-icon-theme-ctrl-default-selected))"; // @public (undocumented) -export const iconthemeCtrlSubtleSelectedRaw = "--smtc-icontheme-ctrl-subtle-selected"; +export const iconThemeCtrlSubtleSelectedRaw = "--smtc-icon-theme-ctrl-subtle-selected"; // @public (undocumented) export const materialAcrylicBlur = "var(--smtc-material-acrylic-blur)"; @@ -3263,37 +3299,37 @@ export const materialAcrylicBlur = "var(--smtc-material-acrylic-blur)"; export const materialAcrylicBlurRaw = "--smtc-material-acrylic-blur"; // @public (undocumented) -export const materialAcrylicDefaultColorblend = "var(--smtc-material-acrylic-default-colorblend, var(--smtc-background-layer-primarysolid))"; +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-colorblend"; +export const materialAcrylicDefaultColorBlendRaw = "--smtc-material-acrylic-default-color-blend"; // @public (undocumented) -export const materialAcrylicDefaultLumblend = "var(--smtc-material-acrylic-default-lumblend, var(--smtc-background-layer-primarysolid))"; +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-lumblend"; +export const materialAcrylicDefaultLumBlendRaw = "--smtc-material-acrylic-default-lum-blend"; // @public (undocumented) -export const materialAcrylicDefaultSolid = "var(--smtc-material-acrylic-default-solid, var(--smtc-background-layer-primarysolid))"; +export const materialAcrylicDefaultSolid = "var(--smtc-material-acrylic-default-solid, var(--smtc-background-layer-primary-solid))"; // @public (undocumented) export const materialAcrylicDefaultSolidRaw = "--smtc-material-acrylic-default-solid"; // @public (undocumented) -export const materialAcrylicShellDefaultColorblend = "var(--smtc-material-acrylic-shell-default-colorblend, var(--smtc-background-layer-primarysolid))"; +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-colorblend"; +export const materialAcrylicShellDefaultColorBlendRaw = "--smtc-material-acrylic-shell-default-color-blend"; // @public (undocumented) -export const materialAcrylicShellDefaultLumblend = "var(--smtc-material-acrylic-shell-default-lumblend, var(--smtc-background-layer-primarysolid))"; +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-lumblend"; +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-primarysolid))"; +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"; @@ -3305,64 +3341,64 @@ export const materialMicaBlur = "var(--smtc-material-mica-blur)"; export const materialMicaBlurRaw = "--smtc-material-mica-blur"; // @public (undocumented) -export const materialMicaDarkerColorblend = "var(--smtc-material-mica-darker-colorblend, var(--smtc-background-layer-primarysolid))"; +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-colorblend"; +export const materialMicaDarkerColorBlendRaw = "--smtc-material-mica-darker-color-blend"; // @public (undocumented) -export const materialMicaDarkerLumblend = "var(--smtc-material-mica-darker-lumblend, var(--smtc-background-layer-primarysolid))"; +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-lumblend"; +export const materialMicaDarkerLumBlendRaw = "--smtc-material-mica-darker-lum-blend"; // @public (undocumented) -export const materialMicaDarkerSolid = "var(--smtc-material-mica-darker-solid, var(--smtc-background-layer-primarysolid))"; +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-colorblend, var(--smtc-background-layer-primarysolid))"; +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-colorblend"; +export const materialMicaDefaultColorBlendRaw = "--smtc-material-mica-default-color-blend"; // @public (undocumented) -export const materialMicaDefaultLumblend = "var(--smtc-material-mica-default-lumblend, var(--smtc-background-layer-primarysolid))"; +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-lumblend"; +export const materialMicaDefaultLumBlendRaw = "--smtc-material-mica-default-lum-blend"; // @public (undocumented) -export const materialMicaDefaultSolid = "var(--smtc-material-mica-default-solid, var(--smtc-background-layer-primarysolid))"; +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-colorblend, var(--smtc-background-layer-primarysolid))"; +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-colorblend"; +export const materialMicaThinColorBlendRaw = "--smtc-material-mica-thin-color-blend"; // @public (undocumented) -export const materialMicaThinLumblend = "var(--smtc-material-mica-thin-lumblend, var(--smtc-background-layer-primarysolid))"; +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-lumblend"; +export const materialMicaThinLumBlendRaw = "--smtc-material-mica-thin-lum-blend"; // @public (undocumented) -export const materialMicaThinSolid = "var(--smtc-material-mica-thin-solid, var(--smtc-background-layer-primarysolid))"; +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 (undocumented) -export const paddingCardNestedimage = "var(--smtc-padding-card-nestedimage, var(--smtc-padding-content-align-default))"; +export const paddingCardNestedImage = "var(--smtc-padding-card-nested-image, var(--smtc-padding-content-align-default))"; // @public (undocumented) -export const paddingCardNestedimageRaw = "--smtc-padding-card-nestedimage"; +export const paddingCardNestedImageRaw = "--smtc-padding-card-nested-image"; // @public (undocumented) export const paddingContentAlignDefault = "var(--smtc-padding-content-align-default)"; @@ -3371,16 +3407,16 @@ export const paddingContentAlignDefault = "var(--smtc-padding-content-align-defa export const paddingContentAlignDefaultRaw = "--smtc-padding-content-align-default"; // @public (undocumented) -export const paddingContentAlignOutdentIcononsubtle = "var(--smtc-padding-content-align-outdent-icononsubtle)"; +export const paddingContentAlignOutdentIconOnSubtle = "var(--smtc-padding-content-align-outdent-icon-on-subtle)"; // @public (undocumented) -export const paddingContentAlignOutdentIcononsubtleRaw = "--smtc-padding-content-align-outdent-icononsubtle"; +export const paddingContentAlignOutdentIconOnSubtleRaw = "--smtc-padding-content-align-outdent-icon-on-subtle"; // @public (undocumented) -export const paddingContentAlignOutdentTextonsubtle = "var(--smtc-padding-content-align-outdent-textonsubtle)"; +export const paddingContentAlignOutdentTextOnSubtle = "var(--smtc-padding-content-align-outdent-text-on-subtle)"; // @public (undocumented) -export const paddingContentAlignOutdentTextonsubtleRaw = "--smtc-padding-content-align-outdent-textonsubtle"; +export const paddingContentAlignOutdentTextOnSubtleRaw = "--smtc-padding-content-align-outdent-text-on-subtle"; // @public (undocumented) export const paddingContentLarge = "var(--smtc-padding-content-large)"; @@ -3407,34 +3443,34 @@ export const paddingContentSmall = "var(--smtc-padding-content-small)"; export const paddingContentSmallRaw = "--smtc-padding-content-small"; // @public (undocumented) -export const paddingContentXlarge = "var(--smtc-padding-content-xlarge)"; +export const paddingContentXLarge = "var(--smtc-padding-content-x-large)"; // @public (undocumented) -export const paddingContentXlargeRaw = "--smtc-padding-content-xlarge"; +export const paddingContentXLargeRaw = "--smtc-padding-content-x-large"; // @public (undocumented) -export const paddingContentXsmall = "var(--smtc-padding-content-xsmall)"; +export const paddingContentXSmall = "var(--smtc-padding-content-x-small)"; // @public (undocumented) -export const paddingContentXsmallRaw = "--smtc-padding-content-xsmall"; +export const paddingContentXSmallRaw = "--smtc-padding-content-x-small"; // @public (undocumented) -export const paddingContentXxlarge = "var(--smtc-padding-content-xxlarge)"; +export const paddingContentXxLarge = "var(--smtc-padding-content-xx-large)"; // @public (undocumented) -export const paddingContentXxlargeRaw = "--smtc-padding-content-xxlarge"; +export const paddingContentXxLargeRaw = "--smtc-padding-content-xx-large"; // @public (undocumented) -export const paddingContentXxsmall = "var(--smtc-padding-content-xxsmall)"; +export const paddingContentXxSmall = "var(--smtc-padding-content-xx-small)"; // @public (undocumented) -export const paddingContentXxsmallRaw = "--smtc-padding-content-xxsmall"; +export const paddingContentXxSmallRaw = "--smtc-padding-content-xx-small"; // @public (undocumented) -export const paddingContentXxxlarge = "var(--smtc-padding-content-xxxlarge)"; +export const paddingContentXxxLarge = "var(--smtc-padding-content-xxx-large)"; // @public (undocumented) -export const paddingContentXxxlargeRaw = "--smtc-padding-content-xxxlarge"; +export const paddingContentXxxLargeRaw = "--smtc-padding-content-xxx-large"; // @public (undocumented) export const paddingCtrlHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default)"; @@ -3443,10 +3479,10 @@ export const paddingCtrlHorizontalDefault = "var(--smtc-padding-ctrl-horizontal- export const paddingCtrlHorizontalDefaultRaw = "--smtc-padding-ctrl-horizontal-default"; // @public (undocumented) -export const paddingCtrlHorizontalIcononly = "var(--smtc-padding-ctrl-horizontal-icononly)"; +export const paddingCtrlHorizontalIconOnly = "var(--smtc-padding-ctrl-horizontal-icon-only)"; // @public (undocumented) -export const paddingCtrlHorizontalIcononlyRaw = "--smtc-padding-ctrl-horizontal-icononly"; +export const paddingCtrlHorizontalIconOnlyRaw = "--smtc-padding-ctrl-horizontal-icon-only"; // @public (undocumented) export const paddingCtrlLgHorizontalDefault = "var(--smtc-padding-ctrl-lg-horizontal-default)"; @@ -3455,28 +3491,28 @@ export const paddingCtrlLgHorizontalDefault = "var(--smtc-padding-ctrl-lg-horizo export const paddingCtrlLgHorizontalDefaultRaw = "--smtc-padding-ctrl-lg-horizontal-default"; // @public (undocumented) -export const paddingCtrlLgHorizontalIcononly = "var(--smtc-padding-ctrl-lg-horizontal-icononly)"; +export const paddingCtrlLgHorizontalIconOnly = "var(--smtc-padding-ctrl-lg-horizontal-icon-only)"; // @public (undocumented) -export const paddingCtrlLgHorizontalIcononlyRaw = "--smtc-padding-ctrl-lg-horizontal-icononly"; +export const paddingCtrlLgHorizontalIconOnlyRaw = "--smtc-padding-ctrl-lg-horizontal-icon-only"; // @public (undocumented) -export const paddingCtrlLgTextbottom = "var(--smtc-padding-ctrl-lg-textbottom, var(--smtc-padding-ctrl-lg-texttop))"; +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-textbottom"; +export const paddingCtrlLgTextBottomRaw = "--smtc-padding-ctrl-lg-text-bottom"; // @public (undocumented) -export const paddingCtrlLgTexttop = "var(--smtc-padding-ctrl-lg-texttop)"; +export const paddingCtrlLgTextTop = "var(--smtc-padding-ctrl-lg-text-top)"; // @public (undocumented) -export const paddingCtrlLgTexttopRaw = "--smtc-padding-ctrl-lg-texttop"; +export const paddingCtrlLgTextTopRaw = "--smtc-padding-ctrl-lg-text-top"; // @public (undocumented) -export const paddingCtrlLgTonestedcontrol = "var(--smtc-padding-ctrl-lg-tonestedcontrol)"; +export const paddingCtrlLgToNestedControl = "var(--smtc-padding-ctrl-lg-to-nested-control)"; // @public (undocumented) -export const paddingCtrlLgTonestedcontrolRaw = "--smtc-padding-ctrl-lg-tonestedcontrol"; +export const paddingCtrlLgToNestedControlRaw = "--smtc-padding-ctrl-lg-to-nested-control"; // @public (undocumented) export const paddingCtrlSmHorizontalDefault = "var(--smtc-padding-ctrl-sm-horizontal-default)"; @@ -3485,67 +3521,67 @@ export const paddingCtrlSmHorizontalDefault = "var(--smtc-padding-ctrl-sm-horizo export const paddingCtrlSmHorizontalDefaultRaw = "--smtc-padding-ctrl-sm-horizontal-default"; // @public (undocumented) -export const paddingCtrlSmHorizontalIcononly = "var(--smtc-padding-ctrl-sm-horizontal-icononly)"; +export const paddingCtrlSmHorizontalIconOnly = "var(--smtc-padding-ctrl-sm-horizontal-icon-only)"; // @public (undocumented) -export const paddingCtrlSmHorizontalIcononlyRaw = "--smtc-padding-ctrl-sm-horizontal-icononly"; +export const paddingCtrlSmHorizontalIconOnlyRaw = "--smtc-padding-ctrl-sm-horizontal-icon-only"; // @public (undocumented) -export const paddingCtrlSmTextbottom = "var(--smtc-padding-ctrl-sm-textbottom, var(--smtc-padding-ctrl-sm-texttop))"; +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-textbottom"; +export const paddingCtrlSmTextBottomRaw = "--smtc-padding-ctrl-sm-text-bottom"; // @public (undocumented) -export const paddingCtrlSmTexttop = "var(--smtc-padding-ctrl-sm-texttop)"; +export const paddingCtrlSmTextTop = "var(--smtc-padding-ctrl-sm-text-top)"; // @public (undocumented) -export const paddingCtrlSmTexttopRaw = "--smtc-padding-ctrl-sm-texttop"; +export const paddingCtrlSmTextTopRaw = "--smtc-padding-ctrl-sm-text-top"; // @public (undocumented) -export const paddingCtrlSmTonestedcontrol = "var(--smtc-padding-ctrl-sm-tonestedcontrol)"; +export const paddingCtrlSmToNestedControl = "var(--smtc-padding-ctrl-sm-to-nested-control)"; // @public (undocumented) -export const paddingCtrlSmTonestedcontrolRaw = "--smtc-padding-ctrl-sm-tonestedcontrol"; +export const paddingCtrlSmToNestedControlRaw = "--smtc-padding-ctrl-sm-to-nested-control"; // @public (undocumented) -export const paddingCtrlTextbottom = "var(--smtc-padding-ctrl-textbottom, var(--smtc-padding-ctrl-texttop))"; +export const paddingCtrlTextBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top))"; // @public (undocumented) -export const paddingCtrlTextbottomRaw = "--smtc-padding-ctrl-textbottom"; +export const paddingCtrlTextBottomRaw = "--smtc-padding-ctrl-text-bottom"; // @public (undocumented) -export const paddingCtrlTextside = "var(--smtc-padding-ctrl-textside)"; +export const paddingCtrlTextSide = "var(--smtc-padding-ctrl-text-side)"; // @public (undocumented) -export const paddingCtrlTextsideRaw = "--smtc-padding-ctrl-textside"; +export const paddingCtrlTextSideRaw = "--smtc-padding-ctrl-text-side"; // @public (undocumented) -export const paddingCtrlTexttop = "var(--smtc-padding-ctrl-texttop)"; +export const paddingCtrlTextTop = "var(--smtc-padding-ctrl-text-top)"; // @public (undocumented) -export const paddingCtrlTexttopRaw = "--smtc-padding-ctrl-texttop"; +export const paddingCtrlTextTopRaw = "--smtc-padding-ctrl-text-top"; // @public (undocumented) -export const paddingCtrlTonestedcontrol = "var(--smtc-padding-ctrl-tonestedcontrol)"; +export const paddingCtrlToNestedControl = "var(--smtc-padding-ctrl-to-nested-control)"; // @public (undocumented) -export const paddingCtrlTonestedcontrolRaw = "--smtc-padding-ctrl-tonestedcontrol"; +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-textonsubtle))"; +export const paddingFlyoutDefault = "var(--smtc-padding-flyout-default, var(--smtc-padding-content-align-outdent-text-on-subtle))"; // @public (undocumented) export const paddingFlyoutDefaultRaw = "--smtc-padding-flyout-default"; // @public (undocumented) -export const paddingToolbarInside = "var(--smtc-padding-toolbar-inside, var(--smtc-padding-content-xsmall))"; +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-xxsmall))"; +export const paddingToolbarOutside = "var(--smtc-padding-toolbar-outside, var(--smtc-padding-content-xx-small))"; // @public (undocumented) export const paddingToolbarOutsideRaw = "--smtc-padding-toolbar-outside"; @@ -3581,16 +3617,16 @@ export const shadowCardRestKey = "var(--smtc-shadow-card-rest-key, unset)"; export const shadowCardRestKeyRaw = "--smtc-shadow-card-rest-key"; // @public (undocumented) -export const shadowCtrlOndragAmbient = "var(--smtc-shadow-ctrl-ondrag-ambient, var(--smtc-shadow-flyout-ambient))"; +export const shadowCtrlOnDragAmbient = "var(--smtc-shadow-ctrl-on-drag-ambient, var(--smtc-shadow-flyout-ambient))"; // @public (undocumented) -export const shadowCtrlOndragAmbientRaw = "--smtc-shadow-ctrl-ondrag-ambient"; +export const shadowCtrlOnDragAmbientRaw = "--smtc-shadow-ctrl-on-drag-ambient"; // @public (undocumented) -export const shadowCtrlOndragKey = "var(--smtc-shadow-ctrl-ondrag-key, var(--smtc-shadow-flyout-key))"; +export const shadowCtrlOnDragKey = "var(--smtc-shadow-ctrl-on-drag-key, var(--smtc-shadow-flyout-key))"; // @public (undocumented) -export const shadowCtrlOndragKeyRaw = "--smtc-shadow-ctrl-ondrag-key"; +export const shadowCtrlOnDragKeyRaw = "--smtc-shadow-ctrl-on-drag-key"; // @public (undocumented) export const shadowFlyoutAmbient = "var(--smtc-shadow-flyout-ambient)"; @@ -3665,10 +3701,10 @@ export const sizeCtrlIcon = "var(--smtc-size-ctrl-icon)"; export const sizeCtrlIconRaw = "--smtc-size-ctrl-icon"; // @public (undocumented) -export const sizeCtrlIconsecondary = "var(--smtc-size-ctrl-iconsecondary)"; +export const sizeCtrlIconSecondary = "var(--smtc-size-ctrl-icon-secondary)"; // @public (undocumented) -export const sizeCtrlIconsecondaryRaw = "--smtc-size-ctrl-iconsecondary"; +export const sizeCtrlIconSecondaryRaw = "--smtc-size-ctrl-icon-secondary"; // @public (undocumented) export const sizeCtrlLgDefault = "var(--smtc-size-ctrl-lg-default)"; @@ -3707,7 +3743,7 @@ export const statusBrandBackground = "var(--smtc-status-brand-background, var(-- export const statusBrandBackgroundRaw = "--smtc-status-brand-background"; // @public (undocumented) -export const statusBrandForeground = "var(--smtc-status-brand-foreground, var(--smtc-foreground-ctrl-onbrand-rest))"; +export const statusBrandForeground = "var(--smtc-status-brand-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) export const statusBrandForegroundRaw = "--smtc-status-brand-foreground"; @@ -3743,7 +3779,7 @@ export const statusDangerBackground = "var(--smtc-status-danger-background)"; export const statusDangerBackgroundRaw = "--smtc-status-danger-background"; // @public (undocumented) -export const statusDangerForeground = "var(--smtc-status-danger-foreground, var(--smtc-foreground-ctrl-onbrand-rest))"; +export const statusDangerForeground = "var(--smtc-status-danger-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) export const statusDangerForegroundRaw = "--smtc-status-danger-foreground"; @@ -3779,7 +3815,7 @@ export const statusImportantBackground = "var(--smtc-status-important-background export const statusImportantBackgroundRaw = "--smtc-status-important-background"; // @public (undocumented) -export const statusImportantForeground = "var(--smtc-status-important-foreground, var(--smtc-foreground-ctrl-onbrand-rest))"; +export const statusImportantForeground = "var(--smtc-status-important-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) export const statusImportantForegroundRaw = "--smtc-status-important-foreground"; @@ -3893,7 +3929,7 @@ export const statusSuccessBackground = "var(--smtc-status-success-background)"; export const statusSuccessBackgroundRaw = "--smtc-status-success-background"; // @public (undocumented) -export const statusSuccessForeground = "var(--smtc-status-success-foreground, var(--smtc-foreground-ctrl-onbrand-rest))"; +export const statusSuccessForeground = "var(--smtc-status-success-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) export const statusSuccessForegroundRaw = "--smtc-status-success-foreground"; @@ -3929,7 +3965,7 @@ export const statusWarningBackground = "var(--smtc-status-warning-background)"; export const statusWarningBackgroundRaw = "--smtc-status-warning-background"; // @public (undocumented) -export const statusWarningForeground = "var(--smtc-status-warning-foreground, var(--smtc-foreground-ctrl-onbrand-rest))"; +export const statusWarningForeground = "var(--smtc-status-warning-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) export const statusWarningForegroundRaw = "--smtc-status-warning-foreground"; @@ -3959,52 +3995,52 @@ export const statusWarningTintStroke = "var(--smtc-status-warning-tint-stroke)"; export const statusWarningTintStrokeRaw = "--smtc-status-warning-tint-stroke"; // @public (undocumented) -export const strokeCardOnprimaryDisabled = "var(--smtc-stroke-card-onprimary-disabled, unset)"; +export const strokeCardOnPrimaryDisabled = "var(--smtc-stroke-card-on-primary-disabled, unset)"; // @public (undocumented) -export const strokeCardOnprimaryDisabledRaw = "--smtc-stroke-card-onprimary-disabled"; +export const strokeCardOnPrimaryDisabledRaw = "--smtc-stroke-card-on-primary-disabled"; // @public (undocumented) -export const strokeCardOnprimaryHover = "var(--smtc-stroke-card-onprimary-hover, unset)"; +export const strokeCardOnPrimaryHover = "var(--smtc-stroke-card-on-primary-hover, unset)"; // @public (undocumented) -export const strokeCardOnprimaryHoverRaw = "--smtc-stroke-card-onprimary-hover"; +export const strokeCardOnPrimaryHoverRaw = "--smtc-stroke-card-on-primary-hover"; // @public (undocumented) -export const strokeCardOnprimaryPressed = "var(--smtc-stroke-card-onprimary-pressed, unset)"; +export const strokeCardOnPrimaryPressed = "var(--smtc-stroke-card-on-primary-pressed, unset)"; // @public (undocumented) -export const strokeCardOnprimaryPressedRaw = "--smtc-stroke-card-onprimary-pressed"; +export const strokeCardOnPrimaryPressedRaw = "--smtc-stroke-card-on-primary-pressed"; // @public (undocumented) -export const strokeCardOnprimaryRest = "var(--smtc-stroke-card-onprimary-rest, unset)"; +export const strokeCardOnPrimaryRest = "var(--smtc-stroke-card-on-primary-rest, unset)"; // @public (undocumented) -export const strokeCardOnprimaryRestRaw = "--smtc-stroke-card-onprimary-rest"; +export const strokeCardOnPrimaryRestRaw = "--smtc-stroke-card-on-primary-rest"; // @public (undocumented) -export const strokeCardOnsecondaryDisabled = "var(--smtc-stroke-card-onsecondary-disabled, unset)"; +export const strokeCardOnSecondaryDisabled = "var(--smtc-stroke-card-on-secondary-disabled, unset)"; // @public (undocumented) -export const strokeCardOnsecondaryDisabledRaw = "--smtc-stroke-card-onsecondary-disabled"; +export const strokeCardOnSecondaryDisabledRaw = "--smtc-stroke-card-on-secondary-disabled"; // @public (undocumented) -export const strokeCardOnsecondaryHover = "var(--smtc-stroke-card-onsecondary-hover, unset)"; +export const strokeCardOnSecondaryHover = "var(--smtc-stroke-card-on-secondary-hover, unset)"; // @public (undocumented) -export const strokeCardOnsecondaryHoverRaw = "--smtc-stroke-card-onsecondary-hover"; +export const strokeCardOnSecondaryHoverRaw = "--smtc-stroke-card-on-secondary-hover"; // @public (undocumented) -export const strokeCardOnsecondaryPressed = "var(--smtc-stroke-card-onsecondary-pressed, unset)"; +export const strokeCardOnSecondaryPressed = "var(--smtc-stroke-card-on-secondary-pressed, unset)"; // @public (undocumented) -export const strokeCardOnsecondaryPressedRaw = "--smtc-stroke-card-onsecondary-pressed"; +export const strokeCardOnSecondaryPressedRaw = "--smtc-stroke-card-on-secondary-pressed"; // @public (undocumented) -export const strokeCardOnsecondaryRest = "var(--smtc-stroke-card-onsecondary-rest, unset)"; +export const strokeCardOnSecondaryRest = "var(--smtc-stroke-card-on-secondary-rest, unset)"; // @public (undocumented) -export const strokeCardOnsecondaryRestRaw = "--smtc-stroke-card-onsecondary-rest"; +export const strokeCardOnSecondaryRestRaw = "--smtc-stroke-card-on-secondary-rest"; // @public (undocumented) export const strokeCardSelected = "var(--smtc-stroke-card-selected, unset)"; @@ -4013,286 +4049,286 @@ export const strokeCardSelected = "var(--smtc-stroke-card-selected, unset)"; export const strokeCardSelectedRaw = "--smtc-stroke-card-selected"; // @public (undocumented) -export const strokeCtrlDividerOnactivebrand = "var(--smtc-stroke-ctrl-divider-onactivebrand, var(--smtc-stroke-ctrl-divider-onbrand))"; +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-onactivebrand-disabled, var(--smtc-stroke-ctrl-divider-onbrand))"; +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-onactivebrand-disabled"; +export const strokeCtrlDividerOnActiveBrandDisabledRaw = "--smtc-stroke-ctrl-divider-on-active-brand-disabled"; // @public (undocumented) -export const strokeCtrlDividerOnactivebrandRaw = "--smtc-stroke-ctrl-divider-onactivebrand"; +export const strokeCtrlDividerOnActiveBrandRaw = "--smtc-stroke-ctrl-divider-on-active-brand"; // @public (undocumented) -export const strokeCtrlDividerOnbrand = "var(--smtc-stroke-ctrl-divider-onbrand)"; +export const strokeCtrlDividerOnBrand = "var(--smtc-stroke-ctrl-divider-on-brand)"; // @public (undocumented) -export const strokeCtrlDividerOnbrandDisabled = "var(--smtc-stroke-ctrl-divider-onbrand-disabled, var(--smtc-stroke-ctrl-divider-onbrand))"; +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-onbrand-disabled"; +export const strokeCtrlDividerOnBrandDisabledRaw = "--smtc-stroke-ctrl-divider-on-brand-disabled"; // @public (undocumented) -export const strokeCtrlDividerOnbrandRaw = "--smtc-stroke-ctrl-divider-onbrand"; +export const strokeCtrlDividerOnBrandRaw = "--smtc-stroke-ctrl-divider-on-brand"; // @public (undocumented) -export const strokeCtrlDividerOnneutral = "var(--smtc-stroke-ctrl-divider-onneutral)"; +export const strokeCtrlDividerOnNeutral = "var(--smtc-stroke-ctrl-divider-on-neutral)"; // @public (undocumented) -export const strokeCtrlDividerOnneutralDisabled = "var(--smtc-stroke-ctrl-divider-onneutral-disabled, var(--smtc-stroke-ctrl-divider-onneutral))"; +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-onneutral-disabled"; +export const strokeCtrlDividerOnNeutralDisabledRaw = "--smtc-stroke-ctrl-divider-on-neutral-disabled"; // @public (undocumented) -export const strokeCtrlDividerOnneutralRaw = "--smtc-stroke-ctrl-divider-onneutral"; +export const strokeCtrlDividerOnNeutralRaw = "--smtc-stroke-ctrl-divider-on-neutral"; // @public (undocumented) -export const strokeCtrlDividerOnoutline = "var(--smtc-stroke-ctrl-divider-onoutline)"; +export const strokeCtrlDividerOnOutline = "var(--smtc-stroke-ctrl-divider-on-outline)"; // @public (undocumented) -export const strokeCtrlDividerOnoutlineDisabled = "var(--smtc-stroke-ctrl-divider-onoutline-disabled, var(--smtc-stroke-ctrl-divider-onoutline))"; +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-onoutline-disabled"; +export const strokeCtrlDividerOnOutlineDisabledRaw = "--smtc-stroke-ctrl-divider-on-outline-disabled"; // @public (undocumented) -export const strokeCtrlDividerOnoutlineRaw = "--smtc-stroke-ctrl-divider-onoutline"; +export const strokeCtrlDividerOnOutlineRaw = "--smtc-stroke-ctrl-divider-on-outline"; // @public (undocumented) -export const strokeCtrlDividerOnsubtle = "var(--smtc-stroke-ctrl-divider-onsubtle, unset)"; +export const strokeCtrlDividerOnSubtle = "var(--smtc-stroke-ctrl-divider-on-subtle, unset)"; // @public (undocumented) -export const strokeCtrlDividerOnsubtleDisabled = "var(--smtc-stroke-ctrl-divider-onsubtle-disabled, unset)"; +export const strokeCtrlDividerOnSubtleDisabled = "var(--smtc-stroke-ctrl-divider-on-subtle-disabled, unset)"; // @public (undocumented) -export const strokeCtrlDividerOnsubtleDisabledRaw = "--smtc-stroke-ctrl-divider-onsubtle-disabled"; +export const strokeCtrlDividerOnSubtleDisabledRaw = "--smtc-stroke-ctrl-divider-on-subtle-disabled"; // @public (undocumented) -export const strokeCtrlDividerOnsubtleRaw = "--smtc-stroke-ctrl-divider-onsubtle"; +export const strokeCtrlDividerOnSubtleRaw = "--smtc-stroke-ctrl-divider-on-subtle"; // @public (undocumented) -export const strokeCtrlOnactivebrandDisabled = "var(--smtc-stroke-ctrl-onactivebrand-disabled, var(--smtc-stroke-ctrl-onbrand-disabled))"; +export const strokeCtrlOnActiveBrandDisabled = "var(--smtc-stroke-ctrl-on-active-brand-disabled, var(--smtc-stroke-ctrl-on-brand-disabled))"; // @public (undocumented) -export const strokeCtrlOnactivebrandDisabledRaw = "--smtc-stroke-ctrl-onactivebrand-disabled"; +export const strokeCtrlOnActiveBrandDisabledRaw = "--smtc-stroke-ctrl-on-active-brand-disabled"; // @public (undocumented) -export const strokeCtrlOnactivebrandDisabledStop2 = "var(--smtc-stroke-ctrl-onactivebrand-disabledstop2, var(--smtc-stroke-ctrl-onbrand-disabled))"; +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-onactivebrand-disabledstop2"; +export const strokeCtrlOnActiveBrandDisabledStop2Raw = "--smtc-stroke-ctrl-on-active-brand-disabled-stop2"; // @public (undocumented) -export const strokeCtrlOnactivebrandHover = "var(--smtc-stroke-ctrl-onactivebrand-hover, var(--smtc-stroke-ctrl-onbrand-hover))"; +export const strokeCtrlOnActiveBrandHover = "var(--smtc-stroke-ctrl-on-active-brand-hover, var(--smtc-stroke-ctrl-on-brand-hover))"; // @public (undocumented) -export const strokeCtrlOnactivebrandHoverRaw = "--smtc-stroke-ctrl-onactivebrand-hover"; +export const strokeCtrlOnActiveBrandHoverRaw = "--smtc-stroke-ctrl-on-active-brand-hover"; // @public (undocumented) -export const strokeCtrlOnactivebrandHoverStop2 = "var(--smtc-stroke-ctrl-onactivebrand-hoverstop2, var(--smtc-stroke-ctrl-onbrand-rest))"; +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-onactivebrand-hoverstop2"; +export const strokeCtrlOnActiveBrandHoverStop2Raw = "--smtc-stroke-ctrl-on-active-brand-hover-stop2"; // @public (undocumented) -export const strokeCtrlOnactivebrandPressed = "var(--smtc-stroke-ctrl-onactivebrand-pressed, var(--smtc-stroke-ctrl-onbrand-pressed))"; +export const strokeCtrlOnActiveBrandPressed = "var(--smtc-stroke-ctrl-on-active-brand-pressed, var(--smtc-stroke-ctrl-on-brand-pressed))"; // @public (undocumented) -export const strokeCtrlOnactivebrandPressedRaw = "--smtc-stroke-ctrl-onactivebrand-pressed"; +export const strokeCtrlOnActiveBrandPressedRaw = "--smtc-stroke-ctrl-on-active-brand-pressed"; // @public (undocumented) -export const strokeCtrlOnactivebrandPressedStop2 = "var(--smtc-stroke-ctrl-onactivebrand-pressedstop2, var(--smtc-stroke-ctrl-onbrand-pressed))"; +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-onactivebrand-pressedstop2"; +export const strokeCtrlOnActiveBrandPressedStop2Raw = "--smtc-stroke-ctrl-on-active-brand-pressed-stop2"; // @public (undocumented) -export const strokeCtrlOnactivebrandRest = "var(--smtc-stroke-ctrl-onactivebrand-rest, var(--smtc-stroke-ctrl-onbrand-rest))"; +export const strokeCtrlOnActiveBrandRest = "var(--smtc-stroke-ctrl-on-active-brand-rest, var(--smtc-stroke-ctrl-on-brand-rest))"; // @public (undocumented) -export const strokeCtrlOnactivebrandRestRaw = "--smtc-stroke-ctrl-onactivebrand-rest"; +export const strokeCtrlOnActiveBrandRestRaw = "--smtc-stroke-ctrl-on-active-brand-rest"; // @public (undocumented) -export const strokeCtrlOnactivebrandRestStop2 = "var(--smtc-stroke-ctrl-onactivebrand-reststop2, var(--smtc-stroke-ctrl-onbrand-rest))"; +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-onactivebrand-reststop2"; +export const strokeCtrlOnActiveBrandRestStop2Raw = "--smtc-stroke-ctrl-on-active-brand-rest-stop2"; // @public (undocumented) -export const strokeCtrlOnbrandDisabled = "var(--smtc-stroke-ctrl-onbrand-disabled, unset)"; +export const strokeCtrlOnBrandDisabled = "var(--smtc-stroke-ctrl-on-brand-disabled, unset)"; // @public (undocumented) -export const strokeCtrlOnbrandDisabledRaw = "--smtc-stroke-ctrl-onbrand-disabled"; +export const strokeCtrlOnBrandDisabledRaw = "--smtc-stroke-ctrl-on-brand-disabled"; // @public (undocumented) -export const strokeCtrlOnbrandDisabledStop2 = "var(--smtc-stroke-ctrl-onbrand-disabledstop2, var(--smtc-stroke-ctrl-onbrand-disabled))"; +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-onbrand-disabledstop2"; +export const strokeCtrlOnBrandDisabledStop2Raw = "--smtc-stroke-ctrl-on-brand-disabled-stop2"; // @public (undocumented) -export const strokeCtrlOnbrandHover = "var(--smtc-stroke-ctrl-onbrand-hover, unset)"; +export const strokeCtrlOnBrandHover = "var(--smtc-stroke-ctrl-on-brand-hover, unset)"; // @public (undocumented) -export const strokeCtrlOnbrandHoverRaw = "--smtc-stroke-ctrl-onbrand-hover"; +export const strokeCtrlOnBrandHoverRaw = "--smtc-stroke-ctrl-on-brand-hover"; // @public (undocumented) -export const strokeCtrlOnbrandHoverStop2 = "var(--smtc-stroke-ctrl-onbrand-hoverstop2, var(--smtc-stroke-ctrl-onbrand-hover))"; +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-onbrand-hoverstop2"; +export const strokeCtrlOnBrandHoverStop2Raw = "--smtc-stroke-ctrl-on-brand-hover-stop2"; // @public (undocumented) -export const strokeCtrlOnbrandPressed = "var(--smtc-stroke-ctrl-onbrand-pressed, unset)"; +export const strokeCtrlOnBrandPressed = "var(--smtc-stroke-ctrl-on-brand-pressed, unset)"; // @public (undocumented) -export const strokeCtrlOnbrandPressedRaw = "--smtc-stroke-ctrl-onbrand-pressed"; +export const strokeCtrlOnBrandPressedRaw = "--smtc-stroke-ctrl-on-brand-pressed"; // @public (undocumented) -export const strokeCtrlOnbrandPressedStop2 = "var(--smtc-stroke-ctrl-onbrand-pressedstop2, var(--smtc-stroke-ctrl-onbrand-pressed))"; +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-onbrand-pressedstop2"; +export const strokeCtrlOnBrandPressedStop2Raw = "--smtc-stroke-ctrl-on-brand-pressed-stop2"; // @public (undocumented) -export const strokeCtrlOnbrandRest = "var(--smtc-stroke-ctrl-onbrand-rest, unset)"; +export const strokeCtrlOnBrandRest = "var(--smtc-stroke-ctrl-on-brand-rest, unset)"; // @public (undocumented) -export const strokeCtrlOnbrandRestRaw = "--smtc-stroke-ctrl-onbrand-rest"; +export const strokeCtrlOnBrandRestRaw = "--smtc-stroke-ctrl-on-brand-rest"; // @public (undocumented) -export const strokeCtrlOnbrandRestStop2 = "var(--smtc-stroke-ctrl-onbrand-reststop2, var(--smtc-stroke-ctrl-onbrand-rest))"; +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-onbrand-reststop2"; +export const strokeCtrlOnBrandRestStop2Raw = "--smtc-stroke-ctrl-on-brand-rest-stop2"; // @public (undocumented) -export const strokeCtrlOnneutralDisabled = "var(--smtc-stroke-ctrl-onneutral-disabled, unset)"; +export const strokeCtrlOnNeutralDisabled = "var(--smtc-stroke-ctrl-on-neutral-disabled, unset)"; // @public (undocumented) -export const strokeCtrlOnneutralDisabledRaw = "--smtc-stroke-ctrl-onneutral-disabled"; +export const strokeCtrlOnNeutralDisabledRaw = "--smtc-stroke-ctrl-on-neutral-disabled"; // @public (undocumented) -export const strokeCtrlOnneutralDisabledStop2 = "var(--smtc-stroke-ctrl-onneutral-disabledstop2, var(--smtc-stroke-ctrl-onneutral-disabled))"; +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-onneutral-disabledstop2"; +export const strokeCtrlOnNeutralDisabledStop2Raw = "--smtc-stroke-ctrl-on-neutral-disabled-stop2"; // @public (undocumented) -export const strokeCtrlOnneutralHover = "var(--smtc-stroke-ctrl-onneutral-hover, unset)"; +export const strokeCtrlOnNeutralHover = "var(--smtc-stroke-ctrl-on-neutral-hover, unset)"; // @public (undocumented) -export const strokeCtrlOnneutralHoverRaw = "--smtc-stroke-ctrl-onneutral-hover"; +export const strokeCtrlOnNeutralHoverRaw = "--smtc-stroke-ctrl-on-neutral-hover"; // @public (undocumented) -export const strokeCtrlOnneutralHoverStop2 = "var(--smtc-stroke-ctrl-onneutral-hoverstop2, var(--smtc-stroke-ctrl-onneutral-pressed))"; +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-onneutral-hoverstop2"; +export const strokeCtrlOnNeutralHoverStop2Raw = "--smtc-stroke-ctrl-on-neutral-hover-stop2"; // @public (undocumented) -export const strokeCtrlOnneutralPressed = "var(--smtc-stroke-ctrl-onneutral-pressed, unset)"; +export const strokeCtrlOnNeutralPressed = "var(--smtc-stroke-ctrl-on-neutral-pressed, unset)"; // @public (undocumented) -export const strokeCtrlOnneutralPressedRaw = "--smtc-stroke-ctrl-onneutral-pressed"; +export const strokeCtrlOnNeutralPressedRaw = "--smtc-stroke-ctrl-on-neutral-pressed"; // @public (undocumented) -export const strokeCtrlOnneutralPressedStop2 = "var(--smtc-stroke-ctrl-onneutral-pressedstop2, var(--smtc-stroke-ctrl-onneutral-hover))"; +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-onneutral-pressedstop2"; +export const strokeCtrlOnNeutralPressedStop2Raw = "--smtc-stroke-ctrl-on-neutral-pressed-stop2"; // @public (undocumented) -export const strokeCtrlOnneutralRest = "var(--smtc-stroke-ctrl-onneutral-rest, unset)"; +export const strokeCtrlOnNeutralRest = "var(--smtc-stroke-ctrl-on-neutral-rest, unset)"; // @public (undocumented) -export const strokeCtrlOnneutralRestRaw = "--smtc-stroke-ctrl-onneutral-rest"; +export const strokeCtrlOnNeutralRestRaw = "--smtc-stroke-ctrl-on-neutral-rest"; // @public (undocumented) -export const strokeCtrlOnneutralRestStop2 = "var(--smtc-stroke-ctrl-onneutral-reststop2, var(--smtc-stroke-ctrl-onneutral-rest))"; +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-onneutral-reststop2"; +export const strokeCtrlOnNeutralRestStop2Raw = "--smtc-stroke-ctrl-on-neutral-rest-stop2"; // @public (undocumented) -export const strokeCtrlOnoutlineDisabled = "var(--smtc-stroke-ctrl-onoutline-disabled)"; +export const strokeCtrlOnOutlineDisabled = "var(--smtc-stroke-ctrl-on-outline-disabled)"; // @public (undocumented) -export const strokeCtrlOnoutlineDisabledRaw = "--smtc-stroke-ctrl-onoutline-disabled"; +export const strokeCtrlOnOutlineDisabledRaw = "--smtc-stroke-ctrl-on-outline-disabled"; // @public (undocumented) -export const strokeCtrlOnoutlineDisabledStop2 = "var(--smtc-stroke-ctrl-onoutline-disabledstop2, var(--smtc-stroke-ctrl-onoutline-disabled))"; +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-onoutline-disabledstop2"; +export const strokeCtrlOnOutlineDisabledStop2Raw = "--smtc-stroke-ctrl-on-outline-disabled-stop2"; // @public (undocumented) -export const strokeCtrlOnoutlineHover = "var(--smtc-stroke-ctrl-onoutline-hover)"; +export const strokeCtrlOnOutlineHover = "var(--smtc-stroke-ctrl-on-outline-hover)"; // @public (undocumented) -export const strokeCtrlOnoutlineHoverRaw = "--smtc-stroke-ctrl-onoutline-hover"; +export const strokeCtrlOnOutlineHoverRaw = "--smtc-stroke-ctrl-on-outline-hover"; // @public (undocumented) -export const strokeCtrlOnoutlineHoverStop2 = "var(--smtc-stroke-ctrl-onoutline-hoverstop2, var(--smtc-stroke-ctrl-onoutline-hover))"; +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-onoutline-hoverstop2"; +export const strokeCtrlOnOutlineHoverStop2Raw = "--smtc-stroke-ctrl-on-outline-hover-stop2"; // @public (undocumented) -export const strokeCtrlOnoutlinePressed = "var(--smtc-stroke-ctrl-onoutline-pressed)"; +export const strokeCtrlOnOutlinePressed = "var(--smtc-stroke-ctrl-on-outline-pressed)"; // @public (undocumented) -export const strokeCtrlOnoutlinePressedRaw = "--smtc-stroke-ctrl-onoutline-pressed"; +export const strokeCtrlOnOutlinePressedRaw = "--smtc-stroke-ctrl-on-outline-pressed"; // @public (undocumented) -export const strokeCtrlOnoutlinePressedStop2 = "var(--smtc-stroke-ctrl-onoutline-pressedstop2, var(--smtc-stroke-ctrl-onoutline-pressed))"; +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-onoutline-pressedstop2"; +export const strokeCtrlOnOutlinePressedStop2Raw = "--smtc-stroke-ctrl-on-outline-pressed-stop2"; // @public (undocumented) -export const strokeCtrlOnoutlineRest = "var(--smtc-stroke-ctrl-onoutline-rest)"; +export const strokeCtrlOnOutlineRest = "var(--smtc-stroke-ctrl-on-outline-rest)"; // @public (undocumented) -export const strokeCtrlOnoutlineRestRaw = "--smtc-stroke-ctrl-onoutline-rest"; +export const strokeCtrlOnOutlineRestRaw = "--smtc-stroke-ctrl-on-outline-rest"; // @public (undocumented) -export const strokeCtrlOnoutlineRestStop2 = "var(--smtc-stroke-ctrl-onoutline-reststop2, var(--smtc-stroke-ctrl-onoutline-rest))"; +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-onoutline-reststop2"; +export const strokeCtrlOnOutlineRestStop2Raw = "--smtc-stroke-ctrl-on-outline-rest-stop2"; // @public (undocumented) -export const strokeCtrlOnsubtleDisabled = "var(--smtc-stroke-ctrl-onsubtle-disabled, unset)"; +export const strokeCtrlOnSubtleDisabled = "var(--smtc-stroke-ctrl-on-subtle-disabled, unset)"; // @public (undocumented) -export const strokeCtrlOnsubtleDisabledRaw = "--smtc-stroke-ctrl-onsubtle-disabled"; +export const strokeCtrlOnSubtleDisabledRaw = "--smtc-stroke-ctrl-on-subtle-disabled"; // @public (undocumented) -export const strokeCtrlOnsubtleHover = "var(--smtc-stroke-ctrl-onsubtle-hover, unset)"; +export const strokeCtrlOnSubtleHover = "var(--smtc-stroke-ctrl-on-subtle-hover, unset)"; // @public (undocumented) -export const strokeCtrlOnsubtleHoverRaw = "--smtc-stroke-ctrl-onsubtle-hover"; +export const strokeCtrlOnSubtleHoverRaw = "--smtc-stroke-ctrl-on-subtle-hover"; // @public (undocumented) -export const strokeCtrlOnsubtleHoversplit = "var(--smtc-stroke-ctrl-onsubtle-hoversplit, unset)"; +export const strokeCtrlOnSubtleHoverSplit = "var(--smtc-stroke-ctrl-on-subtle-hover-split, unset)"; // @public (undocumented) -export const strokeCtrlOnsubtleHoversplitRaw = "--smtc-stroke-ctrl-onsubtle-hoversplit"; +export const strokeCtrlOnSubtleHoverSplitRaw = "--smtc-stroke-ctrl-on-subtle-hover-split"; // @public (undocumented) -export const strokeCtrlOnsubtlePressed = "var(--smtc-stroke-ctrl-onsubtle-pressed, unset)"; +export const strokeCtrlOnSubtlePressed = "var(--smtc-stroke-ctrl-on-subtle-pressed, unset)"; // @public (undocumented) -export const strokeCtrlOnsubtlePressedRaw = "--smtc-stroke-ctrl-onsubtle-pressed"; +export const strokeCtrlOnSubtlePressedRaw = "--smtc-stroke-ctrl-on-subtle-pressed"; // @public (undocumented) -export const strokeCtrlOnsubtleRest = "var(--smtc-stroke-ctrl-onsubtle-rest, unset)"; +export const strokeCtrlOnSubtleRest = "var(--smtc-stroke-ctrl-on-subtle-rest, unset)"; // @public (undocumented) -export const strokeCtrlOnsubtleRestRaw = "--smtc-stroke-ctrl-onsubtle-rest"; +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))"; @@ -4337,58 +4373,58 @@ export const strokeLayer = "var(--smtc-stroke-layer, unset)"; export const strokeLayerRaw = "--smtc-stroke-layer"; // @public (undocumented) -export const strokeToolbar = "var(--smtc-stroke-toolbar, var(--smtc-stroke-card-onprimary-rest))"; +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-strokewidth-ctrl-outline-hover, var(--smtc-strokewidth-default))"; +export const strokeWidthCtrlOutlineHover = "var(--smtc-stroke-width-ctrl-outline-hover, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const strokewidthCtrlOutlineHoverRaw = "--smtc-strokewidth-ctrl-outline-hover"; +export const strokeWidthCtrlOutlineHoverRaw = "--smtc-stroke-width-ctrl-outline-hover"; // @public (undocumented) -export const strokewidthCtrlOutlinePressed = "var(--smtc-strokewidth-ctrl-outline-pressed, var(--smtc-strokewidth-default))"; +export const strokeWidthCtrlOutlinePressed = "var(--smtc-stroke-width-ctrl-outline-pressed, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const strokewidthCtrlOutlinePressedRaw = "--smtc-strokewidth-ctrl-outline-pressed"; +export const strokeWidthCtrlOutlinePressedRaw = "--smtc-stroke-width-ctrl-outline-pressed"; // @public (undocumented) -export const strokewidthCtrlOutlineRest = "var(--smtc-strokewidth-ctrl-outline-rest, var(--smtc-strokewidth-default))"; +export const strokeWidthCtrlOutlineRest = "var(--smtc-stroke-width-ctrl-outline-rest, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const strokewidthCtrlOutlineRestRaw = "--smtc-strokewidth-ctrl-outline-rest"; +export const strokeWidthCtrlOutlineRestRaw = "--smtc-stroke-width-ctrl-outline-rest"; // @public (undocumented) -export const strokewidthCtrlOutlineSelected = "var(--smtc-strokewidth-ctrl-outline-selected, var(--smtc-strokewidth-default))"; +export const strokeWidthCtrlOutlineSelected = "var(--smtc-stroke-width-ctrl-outline-selected, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const strokewidthCtrlOutlineSelectedRaw = "--smtc-strokewidth-ctrl-outline-selected"; +export const strokeWidthCtrlOutlineSelectedRaw = "--smtc-stroke-width-ctrl-outline-selected"; // @public (undocumented) -export const strokewidthDefault = "var(--smtc-strokewidth-default, var(--strokeWidthThin))"; +export const strokeWidthDefault = "var(--smtc-stroke-width-default, var(--strokeWidthThin))"; // @public (undocumented) -export const strokewidthDefaultRaw = "--smtc-strokewidth-default"; +export const strokeWidthDefaultRaw = "--smtc-stroke-width-default"; // @public (undocumented) -export const strokewidthDividerDefault = "var(--smtc-strokewidth-divider-default, var(--smtc-strokewidth-default))"; +export const strokeWidthDividerDefault = "var(--smtc-stroke-width-divider-default, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const strokewidthDividerDefaultRaw = "--smtc-strokewidth-divider-default"; +export const strokeWidthDividerDefaultRaw = "--smtc-stroke-width-divider-default"; // @public (undocumented) -export const strokewidthDividerStrong = "var(--smtc-strokewidth-divider-strong, var(--smtc-strokewidth-default))"; +export const strokeWidthDividerStrong = "var(--smtc-stroke-width-divider-strong, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const strokewidthDividerStrongRaw = "--smtc-strokewidth-divider-strong"; +export const strokeWidthDividerStrongRaw = "--smtc-stroke-width-divider-strong"; // @public (undocumented) -export const strokewidthWindowDefault = "var(--smtc-strokewidth-window-default, var(--smtc-strokewidth-default))"; +export const strokeWidthWindowDefault = "var(--smtc-stroke-width-window-default, var(--smtc-stroke-width-default))"; // @public (undocumented) -export const strokewidthWindowDefaultRaw = "--smtc-strokewidth-window-default"; +export const strokeWidthWindowDefaultRaw = "--smtc-stroke-width-window-default"; // @public (undocumented) export const strokeWindowActive = "var(--smtc-stroke-window-active)"; @@ -4427,424 +4463,424 @@ export const textCtrlWeightSelected = "var(--smtc-text-ctrl-weight-selected)"; export const textCtrlWeightSelectedRaw = "--smtc-text-ctrl-weight-selected"; // @public (undocumented) -export const textGlobalBody1Fontsize = "var(--smtc-text-global-body1-fontsize)"; +export const textGlobalBody1FontSize = "var(--smtc-text-global-body1-font-size)"; // @public (undocumented) -export const textGlobalBody1FontsizeRaw = "--smtc-text-global-body1-fontsize"; +export const textGlobalBody1FontSizeRaw = "--smtc-text-global-body1-font-size"; // @public (undocumented) -export const textGlobalBody1Lineheight = "var(--smtc-text-global-body1-lineheight)"; +export const textGlobalBody1LineHeight = "var(--smtc-text-global-body1-line-height)"; // @public (undocumented) -export const textGlobalBody1LineheightRaw = "--smtc-text-global-body1-lineheight"; +export const textGlobalBody1LineHeightRaw = "--smtc-text-global-body1-line-height"; // @public (undocumented) -export const textGlobalBody2Fontsize = "var(--smtc-text-global-body2-fontsize)"; +export const textGlobalBody2FontSize = "var(--smtc-text-global-body2-font-size)"; // @public (undocumented) -export const textGlobalBody2FontsizeRaw = "--smtc-text-global-body2-fontsize"; +export const textGlobalBody2FontSizeRaw = "--smtc-text-global-body2-font-size"; // @public (undocumented) -export const textGlobalBody2Lineheight = "var(--smtc-text-global-body2-lineheight)"; +export const textGlobalBody2LineHeight = "var(--smtc-text-global-body2-line-height)"; // @public (undocumented) -export const textGlobalBody2LineheightRaw = "--smtc-text-global-body2-lineheight"; +export const textGlobalBody2LineHeightRaw = "--smtc-text-global-body2-line-height"; // @public (undocumented) -export const textGlobalBody3Fontsize = "var(--smtc-text-global-body3-fontsize, var(--fontSizeBase300))"; +export const textGlobalBody3FontSize = "var(--smtc-text-global-body3-font-size, var(--fontSizeBase300))"; // @public (undocumented) -export const textGlobalBody3FontsizeRaw = "--smtc-text-global-body3-fontsize"; +export const textGlobalBody3FontSizeRaw = "--smtc-text-global-body3-font-size"; // @public (undocumented) -export const textGlobalBody3Lineheight = "var(--smtc-text-global-body3-lineheight)"; +export const textGlobalBody3LineHeight = "var(--smtc-text-global-body3-line-height)"; // @public (undocumented) -export const textGlobalBody3LineheightRaw = "--smtc-text-global-body3-lineheight"; +export const textGlobalBody3LineHeightRaw = "--smtc-text-global-body3-line-height"; // @public (undocumented) -export const textGlobalCaption1Fontsize = "var(--smtc-text-global-caption1-fontsize)"; +export const textGlobalCaption1FontSize = "var(--smtc-text-global-caption1-font-size)"; // @public (undocumented) -export const textGlobalCaption1FontsizeRaw = "--smtc-text-global-caption1-fontsize"; +export const textGlobalCaption1FontSizeRaw = "--smtc-text-global-caption1-font-size"; // @public (undocumented) -export const textGlobalCaption1Lineheight = "var(--smtc-text-global-caption1-lineheight)"; +export const textGlobalCaption1LineHeight = "var(--smtc-text-global-caption1-line-height)"; // @public (undocumented) -export const textGlobalCaption1LineheightRaw = "--smtc-text-global-caption1-lineheight"; +export const textGlobalCaption1LineHeightRaw = "--smtc-text-global-caption1-line-height"; // @public (undocumented) -export const textGlobalCaption2Fontsize = "var(--smtc-text-global-caption2-fontsize)"; +export const textGlobalCaption2FontSize = "var(--smtc-text-global-caption2-font-size)"; // @public (undocumented) -export const textGlobalCaption2FontsizeRaw = "--smtc-text-global-caption2-fontsize"; +export const textGlobalCaption2FontSizeRaw = "--smtc-text-global-caption2-font-size"; // @public (undocumented) -export const textGlobalCaption2Lineheight = "var(--smtc-text-global-caption2-lineheight)"; +export const textGlobalCaption2LineHeight = "var(--smtc-text-global-caption2-line-height)"; // @public (undocumented) -export const textGlobalCaption2LineheightRaw = "--smtc-text-global-caption2-lineheight"; +export const textGlobalCaption2LineHeightRaw = "--smtc-text-global-caption2-line-height"; // @public (undocumented) -export const textGlobalDisplay1Fontsize = "var(--smtc-text-global-display1-fontsize)"; +export const textGlobalDisplay1FontSize = "var(--smtc-text-global-display1-font-size)"; // @public (undocumented) -export const textGlobalDisplay1FontsizeRaw = "--smtc-text-global-display1-fontsize"; +export const textGlobalDisplay1FontSizeRaw = "--smtc-text-global-display1-font-size"; // @public (undocumented) -export const textGlobalDisplay1Lineheight = "var(--smtc-text-global-display1-lineheight)"; +export const textGlobalDisplay1LineHeight = "var(--smtc-text-global-display1-line-height)"; // @public (undocumented) -export const textGlobalDisplay1LineheightRaw = "--smtc-text-global-display1-lineheight"; +export const textGlobalDisplay1LineHeightRaw = "--smtc-text-global-display1-line-height"; // @public (undocumented) -export const textGlobalDisplay2Fontsize = "var(--smtc-text-global-display2-fontsize)"; +export const textGlobalDisplay2FontSize = "var(--smtc-text-global-display2-font-size)"; // @public (undocumented) -export const textGlobalDisplay2FontsizeRaw = "--smtc-text-global-display2-fontsize"; +export const textGlobalDisplay2FontSizeRaw = "--smtc-text-global-display2-font-size"; // @public (undocumented) -export const textGlobalDisplay2Lineheight = "var(--smtc-text-global-display2-lineheight)"; +export const textGlobalDisplay2LineHeight = "var(--smtc-text-global-display2-line-height)"; // @public (undocumented) -export const textGlobalDisplay2LineheightRaw = "--smtc-text-global-display2-lineheight"; +export const textGlobalDisplay2LineHeightRaw = "--smtc-text-global-display2-line-height"; // @public (undocumented) -export const textGlobalSubtitle1Fontsize = "var(--smtc-text-global-subtitle1-fontsize)"; +export const textGlobalSubtitle1FontSize = "var(--smtc-text-global-subtitle1-font-size)"; // @public (undocumented) -export const textGlobalSubtitle1FontsizeRaw = "--smtc-text-global-subtitle1-fontsize"; +export const textGlobalSubtitle1FontSizeRaw = "--smtc-text-global-subtitle1-font-size"; // @public (undocumented) -export const textGlobalSubtitle1Lineheight = "var(--smtc-text-global-subtitle1-lineheight)"; +export const textGlobalSubtitle1LineHeight = "var(--smtc-text-global-subtitle1-line-height)"; // @public (undocumented) -export const textGlobalSubtitle1LineheightRaw = "--smtc-text-global-subtitle1-lineheight"; +export const textGlobalSubtitle1LineHeightRaw = "--smtc-text-global-subtitle1-line-height"; // @public (undocumented) -export const textGlobalSubtitle2Fontsize = "var(--smtc-text-global-subtitle2-fontsize)"; +export const textGlobalSubtitle2FontSize = "var(--smtc-text-global-subtitle2-font-size)"; // @public (undocumented) -export const textGlobalSubtitle2FontsizeRaw = "--smtc-text-global-subtitle2-fontsize"; +export const textGlobalSubtitle2FontSizeRaw = "--smtc-text-global-subtitle2-font-size"; // @public (undocumented) -export const textGlobalSubtitle2Lineheight = "var(--smtc-text-global-subtitle2-lineheight)"; +export const textGlobalSubtitle2LineHeight = "var(--smtc-text-global-subtitle2-line-height)"; // @public (undocumented) -export const textGlobalSubtitle2LineheightRaw = "--smtc-text-global-subtitle2-lineheight"; +export const textGlobalSubtitle2LineHeightRaw = "--smtc-text-global-subtitle2-line-height"; // @public (undocumented) -export const textGlobalTitle1Fontsize = "var(--smtc-text-global-title1-fontsize)"; +export const textGlobalTitle1FontSize = "var(--smtc-text-global-title1-font-size)"; // @public (undocumented) -export const textGlobalTitle1FontsizeRaw = "--smtc-text-global-title1-fontsize"; +export const textGlobalTitle1FontSizeRaw = "--smtc-text-global-title1-font-size"; // @public (undocumented) -export const textGlobalTitle1Lineheight = "var(--smtc-text-global-title1-lineheight)"; +export const textGlobalTitle1LineHeight = "var(--smtc-text-global-title1-line-height)"; // @public (undocumented) -export const textGlobalTitle1LineheightRaw = "--smtc-text-global-title1-lineheight"; +export const textGlobalTitle1LineHeightRaw = "--smtc-text-global-title1-line-height"; // @public (undocumented) -export const textGlobalTitle2Fontsize = "var(--smtc-text-global-title2-fontsize)"; +export const textGlobalTitle2FontSize = "var(--smtc-text-global-title2-font-size)"; // @public (undocumented) -export const textGlobalTitle2FontsizeRaw = "--smtc-text-global-title2-fontsize"; +export const textGlobalTitle2FontSizeRaw = "--smtc-text-global-title2-font-size"; // @public (undocumented) -export const textGlobalTitle2Lineheight = "var(--smtc-text-global-title2-lineheight)"; +export const textGlobalTitle2LineHeight = "var(--smtc-text-global-title2-line-height)"; // @public (undocumented) -export const textGlobalTitle2LineheightRaw = "--smtc-text-global-title2-lineheight"; +export const textGlobalTitle2LineHeightRaw = "--smtc-text-global-title2-line-height"; // @public (undocumented) -export const textRampItembodyFontsize = "var(--smtc-text-ramp-itembody-fontsize, var(--smtc-text-global-body3-fontsize))"; +export const textRampItemBodyFontSize = "var(--smtc-text-ramp-item-body-font-size, var(--smtc-text-global-body3-font-size))"; // @public (undocumented) -export const textRampItembodyFontsizeRaw = "--smtc-text-ramp-itembody-fontsize"; +export const textRampItemBodyFontSizeRaw = "--smtc-text-ramp-item-body-font-size"; // @public (undocumented) -export const textRampItembodyLineheight = "var(--smtc-text-ramp-itembody-lineheight, var(--smtc-text-global-body3-lineheight))"; +export const textRampItemBodyLineHeight = "var(--smtc-text-ramp-item-body-line-height, var(--smtc-text-global-body3-line-height))"; // @public (undocumented) -export const textRampItembodyLineheightRaw = "--smtc-text-ramp-itembody-lineheight"; +export const textRampItemBodyLineHeightRaw = "--smtc-text-ramp-item-body-line-height"; // @public (undocumented) -export const textRampItemheaderFontsize = "var(--smtc-text-ramp-itemheader-fontsize, var(--smtc-text-global-body2-fontsize))"; +export const textRampItemHeaderFontSize = "var(--smtc-text-ramp-item-header-font-size, var(--smtc-text-global-body2-font-size))"; // @public (undocumented) -export const textRampItemheaderFontsizeRaw = "--smtc-text-ramp-itemheader-fontsize"; +export const textRampItemHeaderFontSizeRaw = "--smtc-text-ramp-item-header-font-size"; // @public (undocumented) -export const textRampItemheaderLineheight = "var(--smtc-text-ramp-itemheader-lineheight, var(--smtc-text-global-body2-lineheight))"; +export const textRampItemHeaderLineHeight = "var(--smtc-text-ramp-item-header-line-height, var(--smtc-text-global-body2-line-height))"; // @public (undocumented) -export const textRampItemheaderLineheightRaw = "--smtc-text-ramp-itemheader-lineheight"; +export const textRampItemHeaderLineHeightRaw = "--smtc-text-ramp-item-header-line-height"; // @public (undocumented) -export const textRampLegalFontsize = "var(--smtc-text-ramp-legal-fontsize, var(--smtc-text-global-caption2-fontsize))"; +export const textRampLegalFontSize = "var(--smtc-text-ramp-legal-font-size, var(--smtc-text-global-caption2-font-size))"; // @public (undocumented) -export const textRampLegalFontsizeRaw = "--smtc-text-ramp-legal-fontsize"; +export const textRampLegalFontSizeRaw = "--smtc-text-ramp-legal-font-size"; // @public (undocumented) -export const textRampLegalLineheight = "var(--smtc-text-ramp-legal-lineheight, var(--smtc-text-global-caption2-lineheight))"; +export const textRampLegalLineHeight = "var(--smtc-text-ramp-legal-line-height, var(--smtc-text-global-caption2-line-height))"; // @public (undocumented) -export const textRampLegalLineheightRaw = "--smtc-text-ramp-legal-lineheight"; +export const textRampLegalLineHeightRaw = "--smtc-text-ramp-legal-line-height"; // @public (undocumented) -export const textRampLgItembodyFontsize = "var(--smtc-text-ramp-lg-itembody-fontsize, var(--smtc-text-global-body2-fontsize))"; +export const textRampLgItemBodyFontSize = "var(--smtc-text-ramp-lg-item-body-font-size, var(--smtc-text-global-body2-font-size))"; // @public (undocumented) -export const textRampLgItembodyFontsizeRaw = "--smtc-text-ramp-lg-itembody-fontsize"; +export const textRampLgItemBodyFontSizeRaw = "--smtc-text-ramp-lg-item-body-font-size"; // @public (undocumented) -export const textRampLgItembodyLineheight = "var(--smtc-text-ramp-lg-itembody-lineheight, var(--smtc-text-global-body2-lineheight))"; +export const textRampLgItemBodyLineHeight = "var(--smtc-text-ramp-lg-item-body-line-height, var(--smtc-text-global-body2-line-height))"; // @public (undocumented) -export const textRampLgItembodyLineheightRaw = "--smtc-text-ramp-lg-itembody-lineheight"; +export const textRampLgItemBodyLineHeightRaw = "--smtc-text-ramp-lg-item-body-line-height"; // @public (undocumented) -export const textRampLgItemheaderFontsize = "var(--smtc-text-ramp-lg-itemheader-fontsize, var(--smtc-text-global-subtitle2-fontsize))"; +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-itemheader-fontsize"; +export const textRampLgItemHeaderFontSizeRaw = "--smtc-text-ramp-lg-item-header-font-size"; // @public (undocumented) -export const textRampLgItemheaderLineheight = "var(--smtc-text-ramp-lg-itemheader-lineheight, var(--smtc-text-global-subtitle2-lineheight))"; +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-itemheader-lineheight"; +export const textRampLgItemHeaderLineHeightRaw = "--smtc-text-ramp-lg-item-header-line-height"; // @public (undocumented) -export const textRampLgLegalFontsize = "var(--smtc-text-ramp-lg-legal-fontsize, var(--smtc-text-global-caption1-fontsize))"; +export const textRampLgLegalFontSize = "var(--smtc-text-ramp-lg-legal-font-size, var(--smtc-text-global-caption1-font-size))"; // @public (undocumented) -export const textRampLgLegalFontsizeRaw = "--smtc-text-ramp-lg-legal-fontsize"; +export const textRampLgLegalFontSizeRaw = "--smtc-text-ramp-lg-legal-font-size"; // @public (undocumented) -export const textRampLgLegalLineheight = "var(--smtc-text-ramp-lg-legal-lineheight, var(--smtc-text-global-caption1-lineheight))"; +export const textRampLgLegalLineHeight = "var(--smtc-text-ramp-lg-legal-line-height, var(--smtc-text-global-caption1-line-height))"; // @public (undocumented) -export const textRampLgLegalLineheightRaw = "--smtc-text-ramp-lg-legal-lineheight"; +export const textRampLgLegalLineHeightRaw = "--smtc-text-ramp-lg-legal-line-height"; // @public (undocumented) -export const textRampLgMetadataFontsize = "var(--smtc-text-ramp-lg-metadata-fontsize, var(--smtc-text-global-body3-fontsize))"; +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-fontsize"; +export const textRampLgMetadataFontSizeRaw = "--smtc-text-ramp-lg-metadata-font-size"; // @public (undocumented) -export const textRampLgMetadataLineheight = "var(--smtc-text-ramp-lg-metadata-lineheight, var(--smtc-text-global-body3-lineheight))"; +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-lineheight"; +export const textRampLgMetadataLineHeightRaw = "--smtc-text-ramp-lg-metadata-line-height"; // @public (undocumented) -export const textRampLgPageheaderFontsize = "var(--smtc-text-ramp-lg-pageheader-fontsize, var(--smtc-text-global-title1-fontsize))"; +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-pageheader-fontsize"; +export const textRampLgPageHeaderFontSizeRaw = "--smtc-text-ramp-lg-page-header-font-size"; // @public (undocumented) -export const textRampLgPageheaderLineheight = "var(--smtc-text-ramp-lg-pageheader-lineheight, var(--smtc-text-global-title1-lineheight))"; +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-pageheader-lineheight"; +export const textRampLgPageHeaderLineHeightRaw = "--smtc-text-ramp-lg-page-header-line-height"; // @public (undocumented) -export const textRampLgReadingbodyFontsize = "var(--smtc-text-ramp-lg-readingbody-fontsize, var(--smtc-text-global-body1-fontsize))"; +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-readingbody-fontsize"; +export const textRampLgReadingBodyFontSizeRaw = "--smtc-text-ramp-lg-reading-body-font-size"; // @public (undocumented) -export const textRampLgReadingbodyLineheight = "var(--smtc-text-ramp-lg-readingbody-lineheight, var(--smtc-text-global-body1-lineheight))"; +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-readingbody-lineheight"; +export const textRampLgReadingBodyLineHeightRaw = "--smtc-text-ramp-lg-reading-body-line-height"; // @public (undocumented) -export const textRampLgSectionheaderFontsize = "var(--smtc-text-ramp-lg-sectionheader-fontsize, var(--smtc-text-global-title2-fontsize))"; +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-sectionheader-fontsize"; +export const textRampLgSectionHeaderFontSizeRaw = "--smtc-text-ramp-lg-section-header-font-size"; // @public (undocumented) -export const textRampLgSectionheaderLineheight = "var(--smtc-text-ramp-lg-sectionheader-lineheight, var(--smtc-text-global-title2-lineheight))"; +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-sectionheader-lineheight"; +export const textRampLgSectionHeaderLineHeightRaw = "--smtc-text-ramp-lg-section-header-line-height"; // @public (undocumented) -export const textRampLgSubsectionheaderFontsize = "var(--smtc-text-ramp-lg-subsectionheader-fontsize, var(--smtc-text-global-subtitle1-fontsize))"; +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-subsectionheader-fontsize"; +export const textRampLgSubsectionHeaderFontSizeRaw = "--smtc-text-ramp-lg-subsection-header-font-size"; // @public (undocumented) -export const textRampLgSubsectionheaderLineheight = "var(--smtc-text-ramp-lg-subsectionheader-lineheight, var(--smtc-text-global-subtitle1-lineheight))"; +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-subsectionheader-lineheight"; +export const textRampLgSubsectionHeaderLineHeightRaw = "--smtc-text-ramp-lg-subsection-header-line-height"; // @public (undocumented) -export const textRampMetadataFontsize = "var(--smtc-text-ramp-metadata-fontsize, var(--smtc-text-global-caption1-fontsize))"; +export const textRampMetadataFontSize = "var(--smtc-text-ramp-metadata-font-size, var(--smtc-text-global-caption1-font-size))"; // @public (undocumented) -export const textRampMetadataFontsizeRaw = "--smtc-text-ramp-metadata-fontsize"; +export const textRampMetadataFontSizeRaw = "--smtc-text-ramp-metadata-font-size"; // @public (undocumented) -export const textRampMetadataLineheight = "var(--smtc-text-ramp-metadata-lineheight, var(--smtc-text-global-caption1-lineheight))"; +export const textRampMetadataLineHeight = "var(--smtc-text-ramp-metadata-line-height, var(--smtc-text-global-caption1-line-height))"; // @public (undocumented) -export const textRampMetadataLineheightRaw = "--smtc-text-ramp-metadata-lineheight"; +export const textRampMetadataLineHeightRaw = "--smtc-text-ramp-metadata-line-height"; // @public (undocumented) -export const textRampPageheaderFontsize = "var(--smtc-text-ramp-pageheader-fontsize, var(--smtc-text-global-title2-fontsize))"; +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-pageheader-fontsize"; +export const textRampPageHeaderFontSizeRaw = "--smtc-text-ramp-page-header-font-size"; // @public (undocumented) -export const textRampPageheaderLineheight = "var(--smtc-text-ramp-pageheader-lineheight, var(--smtc-text-global-title2-lineheight))"; +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-pageheader-lineheight"; +export const textRampPageHeaderLineHeightRaw = "--smtc-text-ramp-page-header-line-height"; // @public (undocumented) -export const textRampReadingbodyFontsize = "var(--smtc-text-ramp-readingbody-fontsize, var(--smtc-text-global-body2-fontsize))"; +export const textRampReadingBodyFontSize = "var(--smtc-text-ramp-reading-body-font-size, var(--smtc-text-global-body2-font-size))"; // @public (undocumented) -export const textRampReadingbodyFontsizeRaw = "--smtc-text-ramp-readingbody-fontsize"; +export const textRampReadingBodyFontSizeRaw = "--smtc-text-ramp-reading-body-font-size"; // @public (undocumented) -export const textRampReadingbodyLineheight = "var(--smtc-text-ramp-readingbody-lineheight, var(--smtc-text-global-body2-lineheight))"; +export const textRampReadingBodyLineHeight = "var(--smtc-text-ramp-reading-body-line-height, var(--smtc-text-global-body2-line-height))"; // @public (undocumented) -export const textRampReadingbodyLineheightRaw = "--smtc-text-ramp-readingbody-lineheight"; +export const textRampReadingBodyLineHeightRaw = "--smtc-text-ramp-reading-body-line-height"; // @public (undocumented) -export const textRampSectionheaderFontsize = "var(--smtc-text-ramp-sectionheader-fontsize, var(--smtc-text-global-subtitle1-fontsize))"; +export const textRampSectionHeaderFontSize = "var(--smtc-text-ramp-section-header-font-size, var(--smtc-text-global-subtitle1-font-size))"; // @public (undocumented) -export const textRampSectionheaderFontsizeRaw = "--smtc-text-ramp-sectionheader-fontsize"; +export const textRampSectionHeaderFontSizeRaw = "--smtc-text-ramp-section-header-font-size"; // @public (undocumented) -export const textRampSectionheaderLineheight = "var(--smtc-text-ramp-sectionheader-lineheight, var(--smtc-text-global-subtitle1-lineheight))"; +export const textRampSectionHeaderLineHeight = "var(--smtc-text-ramp-section-header-line-height, var(--smtc-text-global-subtitle1-line-height))"; // @public (undocumented) -export const textRampSectionheaderLineheightRaw = "--smtc-text-ramp-sectionheader-lineheight"; +export const textRampSectionHeaderLineHeightRaw = "--smtc-text-ramp-section-header-line-height"; // @public (undocumented) -export const textRampSmItembodyFontsize = "var(--smtc-text-ramp-sm-itembody-fontsize, var(--smtc-text-global-caption1-fontsize))"; +export const textRampSmItemBodyFontSize = "var(--smtc-text-ramp-sm-item-body-font-size, var(--smtc-text-global-caption1-font-size))"; // @public (undocumented) -export const textRampSmItembodyFontsizeRaw = "--smtc-text-ramp-sm-itembody-fontsize"; +export const textRampSmItemBodyFontSizeRaw = "--smtc-text-ramp-sm-item-body-font-size"; // @public (undocumented) -export const textRampSmItembodyLineheight = "var(--smtc-text-ramp-sm-itembody-lineheight, var(--smtc-text-global-caption1-lineheight))"; +export const textRampSmItemBodyLineHeight = "var(--smtc-text-ramp-sm-item-body-line-height, var(--smtc-text-global-caption1-line-height))"; // @public (undocumented) -export const textRampSmItembodyLineheightRaw = "--smtc-text-ramp-sm-itembody-lineheight"; +export const textRampSmItemBodyLineHeightRaw = "--smtc-text-ramp-sm-item-body-line-height"; // @public (undocumented) -export const textRampSmItemheaderFontsize = "var(--smtc-text-ramp-sm-itemheader-fontsize, var(--smtc-text-global-body3-fontsize))"; +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-itemheader-fontsize"; +export const textRampSmItemHeaderFontSizeRaw = "--smtc-text-ramp-sm-item-header-font-size"; // @public (undocumented) -export const textRampSmItemheaderLineheight = "var(--smtc-text-ramp-sm-itemheader-lineheight, var(--smtc-text-global-body3-lineheight))"; +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-itemheader-lineheight"; +export const textRampSmItemHeaderLineHeightRaw = "--smtc-text-ramp-sm-item-header-line-height"; // @public (undocumented) -export const textRampSmLegalFontsize = "var(--smtc-text-ramp-sm-legal-fontsize, var(--smtc-text-global-caption2-fontsize))"; +export const textRampSmLegalFontSize = "var(--smtc-text-ramp-sm-legal-font-size, var(--smtc-text-global-caption2-font-size))"; // @public (undocumented) -export const textRampSmLegalFontsizeRaw = "--smtc-text-ramp-sm-legal-fontsize"; +export const textRampSmLegalFontSizeRaw = "--smtc-text-ramp-sm-legal-font-size"; // @public (undocumented) -export const textRampSmLegalLineheight = "var(--smtc-text-ramp-sm-legal-lineheight, var(--smtc-text-global-caption2-lineheight))"; +export const textRampSmLegalLineHeight = "var(--smtc-text-ramp-sm-legal-line-height, var(--smtc-text-global-caption2-line-height))"; // @public (undocumented) -export const textRampSmLegalLineheightRaw = "--smtc-text-ramp-sm-legal-lineheight"; +export const textRampSmLegalLineHeightRaw = "--smtc-text-ramp-sm-legal-line-height"; // @public (undocumented) -export const textRampSmMetadataFontsize = "var(--smtc-text-ramp-sm-metadata-fontsize, var(--smtc-text-global-caption1-fontsize))"; +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-fontsize"; +export const textRampSmMetadataFontSizeRaw = "--smtc-text-ramp-sm-metadata-font-size"; // @public (undocumented) -export const textRampSmMetadataLineheight = "var(--smtc-text-ramp-sm-metadata-lineheight, var(--smtc-text-global-caption1-lineheight))"; +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-lineheight"; +export const textRampSmMetadataLineHeightRaw = "--smtc-text-ramp-sm-metadata-line-height"; // @public (undocumented) -export const textRampSmPageheaderFontsize = "var(--smtc-text-ramp-sm-pageheader-fontsize, var(--smtc-text-global-subtitle1-fontsize))"; +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-pageheader-fontsize"; +export const textRampSmPageHeaderFontSizeRaw = "--smtc-text-ramp-sm-page-header-font-size"; // @public (undocumented) -export const textRampSmPageheaderLineheight = "var(--smtc-text-ramp-sm-pageheader-lineheight, var(--smtc-text-global-subtitle1-lineheight))"; +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-pageheader-lineheight"; +export const textRampSmPageHeaderLineHeightRaw = "--smtc-text-ramp-sm-page-header-line-height"; // @public (undocumented) -export const textRampSmReadingbodyFontsize = "var(--smtc-text-ramp-sm-readingbody-fontsize, var(--smtc-text-global-body3-fontsize))"; +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-readingbody-fontsize"; +export const textRampSmReadingBodyFontSizeRaw = "--smtc-text-ramp-sm-reading-body-font-size"; // @public (undocumented) -export const textRampSmReadingbodyLineheight = "var(--smtc-text-ramp-sm-readingbody-lineheight, var(--smtc-text-global-body3-lineheight))"; +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-readingbody-lineheight"; +export const textRampSmReadingBodyLineHeightRaw = "--smtc-text-ramp-sm-reading-body-line-height"; // @public (undocumented) -export const textRampSmSectionheaderFontsize = "var(--smtc-text-ramp-sm-sectionheader-fontsize, var(--smtc-text-global-subtitle2-fontsize))"; +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-sectionheader-fontsize"; +export const textRampSmSectionHeaderFontSizeRaw = "--smtc-text-ramp-sm-section-header-font-size"; // @public (undocumented) -export const textRampSmSectionheaderLineheight = "var(--smtc-text-ramp-sm-sectionheader-lineheight, var(--smtc-text-global-subtitle2-lineheight))"; +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-sectionheader-lineheight"; +export const textRampSmSectionHeaderLineHeightRaw = "--smtc-text-ramp-sm-section-header-line-height"; // @public (undocumented) -export const textRampSmSubsectionheaderFontsize = "var(--smtc-text-ramp-sm-subsectionheader-fontsize, var(--smtc-text-global-body1-fontsize))"; +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-subsectionheader-fontsize"; +export const textRampSmSubsectionHeaderFontSizeRaw = "--smtc-text-ramp-sm-subsection-header-font-size"; // @public (undocumented) -export const textRampSmSubsectionheaderLineheight = "var(--smtc-text-ramp-sm-subsectionheader-lineheight, var(--smtc-text-global-body1-lineheight))"; +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-subsectionheader-lineheight"; +export const textRampSmSubsectionHeaderLineHeightRaw = "--smtc-text-ramp-sm-subsection-header-line-height"; // @public (undocumented) -export const textRampSubsectionheaderFontsize = "var(--smtc-text-ramp-subsectionheader-fontsize, var(--smtc-text-global-subtitle2-fontsize))"; +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-subsectionheader-fontsize"; +export const textRampSubsectionHeaderFontSizeRaw = "--smtc-text-ramp-subsection-header-font-size"; // @public (undocumented) -export const textRampSubsectionheaderLineheight = "var(--smtc-text-ramp-subsectionheader-lineheight, var(--smtc-text-global-subtitle2-lineheight))"; +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-subsectionheader-lineheight"; +export const textRampSubsectionHeaderLineHeightRaw = "--smtc-text-ramp-subsection-header-line-height"; // @public (undocumented) export const textStyleAiHeaderCase = "var(--smtc-text-style-ai-header-case, unset)"; @@ -4853,16 +4889,16 @@ export const textStyleAiHeaderCase = "var(--smtc-text-style-ai-header-case, unse export const textStyleAiHeaderCaseRaw = "--smtc-text-style-ai-header-case"; // @public (undocumented) -export const textStyleAiHeaderFontfamily = "var(--smtc-text-style-ai-header-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; +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-fontfamily"; +export const textStyleAiHeaderFontFamilyRaw = "--smtc-text-style-ai-header-font-family"; // @public (undocumented) -export const textStyleAiHeaderLetterspacing = "var(--smtc-text-style-ai-header-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; +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-letterspacing"; +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))"; @@ -4871,16 +4907,16 @@ export const textStyleAiHeaderWeight = "var(--smtc-text-style-ai-header-weight, export const textStyleAiHeaderWeightRaw = "--smtc-text-style-ai-header-weight"; // @public (undocumented) -export const textStyleAiRegularFontfamily = "var(--smtc-text-style-ai-regular-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; +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-fontfamily"; +export const textStyleAiRegularFontFamilyRaw = "--smtc-text-style-ai-regular-font-family"; // @public (undocumented) -export const textStyleAiRegularLetterspacing = "var(--smtc-text-style-ai-regular-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; +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-letterspacing"; +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))"; @@ -4895,16 +4931,16 @@ export const textStyleArticleHeaderCase = "var(--smtc-text-style-article-header- export const textStyleArticleHeaderCaseRaw = "--smtc-text-style-article-header-case"; // @public (undocumented) -export const textStyleArticleHeaderFontfamily = "var(--smtc-text-style-article-header-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; +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-fontfamily"; +export const textStyleArticleHeaderFontFamilyRaw = "--smtc-text-style-article-header-font-family"; // @public (undocumented) -export const textStyleArticleHeaderLetterspacing = "var(--smtc-text-style-article-header-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; +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-letterspacing"; +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))"; @@ -4913,16 +4949,16 @@ export const textStyleArticleHeaderWeight = "var(--smtc-text-style-article-heade export const textStyleArticleHeaderWeightRaw = "--smtc-text-style-article-header-weight"; // @public (undocumented) -export const textStyleArticleRegularFontfamily = "var(--smtc-text-style-article-regular-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; +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-fontfamily"; +export const textStyleArticleRegularFontFamilyRaw = "--smtc-text-style-article-regular-font-family"; // @public (undocumented) -export const textStyleArticleRegularLetterspacing = "var(--smtc-text-style-article-regular-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; +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-letterspacing"; +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))"; @@ -4937,16 +4973,16 @@ export const textStyleCodeHeaderCase = "var(--smtc-text-style-code-header-case, export const textStyleCodeHeaderCaseRaw = "--smtc-text-style-code-header-case"; // @public (undocumented) -export const textStyleCodeHeaderFontfamily = "var(--smtc-text-style-code-header-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; +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-fontfamily"; +export const textStyleCodeHeaderFontFamilyRaw = "--smtc-text-style-code-header-font-family"; // @public (undocumented) -export const textStyleCodeHeaderLetterspacing = "var(--smtc-text-style-code-header-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; +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-letterspacing"; +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))"; @@ -4955,16 +4991,16 @@ export const textStyleCodeHeaderWeight = "var(--smtc-text-style-code-header-weig export const textStyleCodeHeaderWeightRaw = "--smtc-text-style-code-header-weight"; // @public (undocumented) -export const textStyleCodeRegularFontfamily = "var(--smtc-text-style-code-regular-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; +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-fontfamily"; +export const textStyleCodeRegularFontFamilyRaw = "--smtc-text-style-code-regular-font-family"; // @public (undocumented) -export const textStyleCodeRegularLetterspacing = "var(--smtc-text-style-code-regular-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; +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-letterspacing"; +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))"; @@ -4973,46 +5009,64 @@ export const textStyleCodeRegularWeight = "var(--smtc-text-style-code-regular-we export const textStyleCodeRegularWeightRaw = "--smtc-text-style-code-regular-weight"; // @public (undocumented) -export const textStyleDatavizHeaderCase = "var(--smtc-text-style-dataviz-header-case, unset)"; +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 textStyleDatavizHeaderCaseRaw = "--smtc-text-style-dataviz-header-case"; +export const textStyleDataVizHeaderWeightRaw = "--smtc-text-style-data-viz-header-weight"; // @public (undocumented) -export const textStyleDatavizHeaderFontfamily = "var(--smtc-text-style-dataviz-header-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; +export const textStyleDataVizRegularFontFamily = "var(--smtc-text-style-data-viz-regular-font-family, var(--smtc-text-style-default-regular-font-family))"; // @public (undocumented) -export const textStyleDatavizHeaderFontfamilyRaw = "--smtc-text-style-dataviz-header-fontfamily"; +export const textStyleDataVizRegularFontFamilyRaw = "--smtc-text-style-data-viz-regular-font-family"; // @public (undocumented) -export const textStyleDatavizHeaderLetterspacing = "var(--smtc-text-style-dataviz-header-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; +export const textStyleDataVizRegularLetterSpacing = "var(--smtc-text-style-data-viz-regular-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; // @public (undocumented) -export const textStyleDatavizHeaderLetterspacingRaw = "--smtc-text-style-dataviz-header-letterspacing"; +export const textStyleDataVizRegularLetterSpacingRaw = "--smtc-text-style-data-viz-regular-letter-spacing"; // @public (undocumented) -export const textStyleDatavizHeaderWeight = "var(--smtc-text-style-dataviz-header-weight, var(--smtc-text-style-default-header-weight))"; +export const textStyleDataVizRegularWeight = "var(--smtc-text-style-data-viz-regular-weight, var(--smtc-text-style-default-regular-weight))"; // @public (undocumented) -export const textStyleDatavizHeaderWeightRaw = "--smtc-text-style-dataviz-header-weight"; +export const textStyleDataVizRegularWeightRaw = "--smtc-text-style-data-viz-regular-weight"; // @public (undocumented) -export const textStyleDatavizRegularFontfamily = "var(--smtc-text-style-dataviz-regular-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; +export const textStyleDefaultDisplayFontFamily = "var(--smtc-text-style-default-display-font-family, var(--smtc-text-style-default-regular-font-family))"; // @public (undocumented) -export const textStyleDatavizRegularFontfamilyRaw = "--smtc-text-style-dataviz-regular-fontfamily"; +export const textStyleDefaultDisplayFontFamilyRaw = "--smtc-text-style-default-display-font-family"; // @public (undocumented) -export const textStyleDatavizRegularLetterspacing = "var(--smtc-text-style-dataviz-regular-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; +export const textStyleDefaultDisplayLetterSpacing = "var(--smtc-text-style-default-display-letter-spacing, var(--smtc-text-style-default-regular-letter-spacing))"; // @public (undocumented) -export const textStyleDatavizRegularLetterspacingRaw = "--smtc-text-style-dataviz-regular-letterspacing"; +export const textStyleDefaultDisplayLetterSpacingRaw = "--smtc-text-style-default-display-letter-spacing"; // @public (undocumented) -export const textStyleDatavizRegularWeight = "var(--smtc-text-style-dataviz-regular-weight, var(--smtc-text-style-default-regular-weight))"; +export const textStyleDefaultDisplayWeight = "var(--smtc-text-style-default-display-weight)"; // @public (undocumented) -export const textStyleDatavizRegularWeightRaw = "--smtc-text-style-dataviz-regular-weight"; +export const textStyleDefaultDisplayWeightRaw = "--smtc-text-style-default-display-weight"; // @public (undocumented) export const textStyleDefaultHeaderCase = "var(--smtc-text-style-default-header-case, unset)"; @@ -5021,16 +5075,16 @@ export const textStyleDefaultHeaderCase = "var(--smtc-text-style-default-header- export const textStyleDefaultHeaderCaseRaw = "--smtc-text-style-default-header-case"; // @public (undocumented) -export const textStyleDefaultHeaderFontfamily = "var(--smtc-text-style-default-header-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; +export const textStyleDefaultHeaderFontFamily = "var(--smtc-text-style-default-header-font-family, var(--smtc-text-style-default-regular-font-family))"; // @public (undocumented) -export const textStyleDefaultHeaderFontfamilyRaw = "--smtc-text-style-default-header-fontfamily"; +export const textStyleDefaultHeaderFontFamilyRaw = "--smtc-text-style-default-header-font-family"; // @public (undocumented) -export const textStyleDefaultHeaderLetterspacing = "var(--smtc-text-style-default-header-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; +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-letterspacing"; +export const textStyleDefaultHeaderLetterSpacingRaw = "--smtc-text-style-default-header-letter-spacing"; // @public (undocumented) export const textStyleDefaultHeaderWeight = "var(--smtc-text-style-default-header-weight)"; @@ -5039,16 +5093,16 @@ export const textStyleDefaultHeaderWeight = "var(--smtc-text-style-default-heade export const textStyleDefaultHeaderWeightRaw = "--smtc-text-style-default-header-weight"; // @public (undocumented) -export const textStyleDefaultRegularFontfamily = "var(--smtc-text-style-default-regular-fontfamily, var(--fontFamilyBase))"; +export const textStyleDefaultRegularFontFamily = "var(--smtc-text-style-default-regular-font-family, var(--fontFamilyBase))"; // @public (undocumented) -export const textStyleDefaultRegularFontfamilyRaw = "--smtc-text-style-default-regular-fontfamily"; +export const textStyleDefaultRegularFontFamilyRaw = "--smtc-text-style-default-regular-font-family"; // @public (undocumented) -export const textStyleDefaultRegularLetterspacing = "var(--smtc-text-style-default-regular-letterspacing)"; +export const textStyleDefaultRegularLetterSpacing = "var(--smtc-text-style-default-regular-letter-spacing)"; // @public (undocumented) -export const textStyleDefaultRegularLetterspacingRaw = "--smtc-text-style-default-regular-letterspacing"; +export const textStyleDefaultRegularLetterSpacingRaw = "--smtc-text-style-default-regular-letter-spacing"; // @public (undocumented) export const textStyleDefaultRegularWeight = "var(--smtc-text-style-default-regular-weight, var(--fontWeightRegular))"; @@ -5063,16 +5117,16 @@ export const textStyleQuoteHeaderCase = "var(--smtc-text-style-quote-header-case export const textStyleQuoteHeaderCaseRaw = "--smtc-text-style-quote-header-case"; // @public (undocumented) -export const textStyleQuoteHeaderFontfamily = "var(--smtc-text-style-quote-header-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; +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-fontfamily"; +export const textStyleQuoteHeaderFontFamilyRaw = "--smtc-text-style-quote-header-font-family"; // @public (undocumented) -export const textStyleQuoteHeaderLetterspacing = "var(--smtc-text-style-quote-header-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; +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-letterspacing"; +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))"; @@ -5081,16 +5135,16 @@ export const textStyleQuoteHeaderWeight = "var(--smtc-text-style-quote-header-we export const textStyleQuoteHeaderWeightRaw = "--smtc-text-style-quote-header-weight"; // @public (undocumented) -export const textStyleQuoteRegularFontfamily = "var(--smtc-text-style-quote-regular-fontfamily, var(--smtc-text-style-default-regular-fontfamily))"; +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-fontfamily"; +export const textStyleQuoteRegularFontFamilyRaw = "--smtc-text-style-quote-regular-font-family"; // @public (undocumented) -export const textStyleQuoteRegularLetterspacing = "var(--smtc-text-style-quote-regular-letterspacing, var(--smtc-text-style-default-regular-letterspacing))"; +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-letterspacing"; +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))"; diff --git a/packages/semantic-tokens/scripts/legacyTokens.ts b/packages/semantic-tokens/scripts/legacyTokens.ts index 18378ce0a4983..5db8786ede4b9 100644 --- a/packages/semantic-tokens/scripts/legacyTokens.ts +++ b/packages/semantic-tokens/scripts/legacyTokens.ts @@ -3,7 +3,7 @@ import path from 'node:path'; // eslint-disable-next-line no-restricted-imports import * as tokensPackage from '@fluentui/tokens'; -import { fluentOverrides } from './fluentOverrides'; +import { fluentOverrides } from '../src/fluentOverrides'; import { format } from 'prettier'; const generateLegacyTokens = () => { diff --git a/packages/semantic-tokens/scripts/tokenGen.ts b/packages/semantic-tokens/scripts/tokenGen.ts index bf9fe07058c06..88cfa44f55490 100644 --- a/packages/semantic-tokens/scripts/tokenGen.ts +++ b/packages/semantic-tokens/scripts/tokenGen.ts @@ -3,8 +3,8 @@ * 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 './fluentOverrides'; -import type { FluentOverrideValue, FluentOverrides } from './fluentOverrides'; +import { fluentOverrides as fluentFallbacksRaw } from '../src/fluentOverrides'; +import type { FluentOverrideValue, FluentOverrides } from '../src/fluentOverrides'; import fs from 'node:fs'; import { Project } from 'ts-morph'; import { format } from 'prettier'; diff --git a/packages/semantic-tokens/scripts/tokens.json b/packages/semantic-tokens/scripts/tokens.json index aa4c5103c0fb9..1ef71c34753ca 100644 --- a/packages/semantic-tokens/scripts/tokens.json +++ b/packages/semantic-tokens/scripts/tokens.json @@ -1,5 +1,5 @@ { - "textGlobalDisplay1Fontsize": { + "textGlobalDisplay1FontSize": { "no": 1, "name": "text/global/display1/fontSize", "fst_reference": "", @@ -10,9 +10,9 @@ "contrast": "", "fallback": "Font-size/1000", "exceptions": [], - "cssName": "--smtc-text-global-display1-fontsize" + "cssName": "--smtc-text-global-display1-font-size" }, - "textGlobalDisplay1Lineheight": { + "textGlobalDisplay1LineHeight": { "no": 2, "name": "text/global/display1/lineHeight", "fst_reference": "", @@ -23,9 +23,9 @@ "contrast": "", "fallback": "Line-height/1000", "exceptions": [], - "cssName": "--smtc-text-global-display1-lineheight" + "cssName": "--smtc-text-global-display1-line-height" }, - "textGlobalDisplay2Fontsize": { + "textGlobalDisplay2FontSize": { "no": 3, "name": "text/global/display2/fontSize", "fst_reference": "", @@ -34,11 +34,11 @@ "description": "", "components": [], "contrast": "", - "fallback": "", + "fallback": "Font-size/1000", "exceptions": [], - "cssName": "--smtc-text-global-display2-fontsize" + "cssName": "--smtc-text-global-display2-font-size" }, - "textGlobalDisplay2Lineheight": { + "textGlobalDisplay2LineHeight": { "no": 4, "name": "text/global/display2/lineHeight", "fst_reference": "", @@ -47,11 +47,11 @@ "description": "", "components": [], "contrast": "", - "fallback": "", + "fallback": "Line-height/1000", "exceptions": [], - "cssName": "--smtc-text-global-display2-lineheight" + "cssName": "--smtc-text-global-display2-line-height" }, - "textGlobalTitle1Fontsize": { + "textGlobalTitle1FontSize": { "no": 5, "name": "text/global/title1/fontSize", "fst_reference": "", @@ -62,9 +62,9 @@ "contrast": "", "fallback": "Font-size/900", "exceptions": [], - "cssName": "--smtc-text-global-title1-fontsize" + "cssName": "--smtc-text-global-title1-font-size" }, - "textGlobalTitle1Lineheight": { + "textGlobalTitle1LineHeight": { "no": 6, "name": "text/global/title1/lineHeight", "fst_reference": "", @@ -75,9 +75,9 @@ "contrast": "", "fallback": "Line-height/900", "exceptions": [], - "cssName": "--smtc-text-global-title1-lineheight" + "cssName": "--smtc-text-global-title1-line-height" }, - "textGlobalTitle2Fontsize": { + "textGlobalTitle2FontSize": { "no": 7, "name": "text/global/title2/fontSize", "fst_reference": "", @@ -86,11 +86,11 @@ "description": "", "components": [], "contrast": "", - "fallback": "", + "fallback": "Font-size/800", "exceptions": [], - "cssName": "--smtc-text-global-title2-fontsize" + "cssName": "--smtc-text-global-title2-font-size" }, - "textGlobalTitle2Lineheight": { + "textGlobalTitle2LineHeight": { "no": 8, "name": "text/global/title2/lineHeight", "fst_reference": "", @@ -99,11 +99,11 @@ "description": "", "components": [], "contrast": "", - "fallback": "", + "fallback": "Font-size/800", "exceptions": [], - "cssName": "--smtc-text-global-title2-lineheight" + "cssName": "--smtc-text-global-title2-line-height" }, - "textGlobalSubtitle1Fontsize": { + "textGlobalSubtitle1FontSize": { "no": 9, "name": "text/global/subtitle1/fontSize", "fst_reference": "", @@ -112,11 +112,11 @@ "description": "", "components": ["Inline drawer", "Overlay drawer"], "contrast": "", - "fallback": "", + "fallback": "Font-size/700", "exceptions": [], - "cssName": "--smtc-text-global-subtitle1-fontsize" + "cssName": "--smtc-text-global-subtitle1-font-size" }, - "textGlobalSubtitle1Lineheight": { + "textGlobalSubtitle1LineHeight": { "no": 10, "name": "text/global/subtitle1/lineHeight", "fst_reference": "", @@ -125,11 +125,11 @@ "description": "", "components": ["Inline drawer", "Overlay drawer"], "contrast": "", - "fallback": "", + "fallback": "Line-height/700", "exceptions": [], - "cssName": "--smtc-text-global-subtitle1-lineheight" + "cssName": "--smtc-text-global-subtitle1-line-height" }, - "textGlobalSubtitle2Fontsize": { + "textGlobalSubtitle2FontSize": { "no": 11, "name": "text/global/subtitle2/fontSize", "fst_reference": "", @@ -138,11 +138,11 @@ "description": "", "components": ["Dialog"], "contrast": "", - "fallback": "", + "fallback": "Font-size/600", "exceptions": [], - "cssName": "--smtc-text-global-subtitle2-fontsize" + "cssName": "--smtc-text-global-subtitle2-font-size" }, - "textGlobalSubtitle2Lineheight": { + "textGlobalSubtitle2LineHeight": { "no": 12, "name": "text/global/subtitle2/lineHeight", "fst_reference": "", @@ -151,11 +151,11 @@ "description": "", "components": ["Dialog"], "contrast": "", - "fallback": "", + "fallback": "Line-height/600", "exceptions": [], - "cssName": "--smtc-text-global-subtitle2-lineheight" + "cssName": "--smtc-text-global-subtitle2-line-height" }, - "textGlobalBody1Fontsize": { + "textGlobalBody1FontSize": { "no": 13, "name": "text/global/body1/fontSize", "fst_reference": "", @@ -164,11 +164,11 @@ "description": "", "components": [], "contrast": "", - "fallback": "", + "fallback": "Font-size/500", "exceptions": [], - "cssName": "--smtc-text-global-body1-fontsize" + "cssName": "--smtc-text-global-body1-font-size" }, - "textGlobalBody1Lineheight": { + "textGlobalBody1LineHeight": { "no": 14, "name": "text/global/body1/lineHeight", "fst_reference": "", @@ -177,11 +177,11 @@ "description": "", "components": [], "contrast": "", - "fallback": "", + "fallback": "Line-height/500", "exceptions": [], - "cssName": "--smtc-text-global-body1-lineheight" + "cssName": "--smtc-text-global-body1-line-height" }, - "textGlobalBody2Fontsize": { + "textGlobalBody2FontSize": { "no": 15, "name": "text/global/body2/fontSize", "fst_reference": "", @@ -190,11 +190,11 @@ "description": "", "components": ["Field"], "contrast": "", - "fallback": "", + "fallback": "Font-size/400", "exceptions": [], - "cssName": "--smtc-text-global-body2-fontsize" + "cssName": "--smtc-text-global-body2-font-size" }, - "textGlobalBody2Lineheight": { + "textGlobalBody2LineHeight": { "no": 16, "name": "text/global/body2/lineHeight", "fst_reference": "", @@ -203,11 +203,11 @@ "description": "", "components": ["Field"], "contrast": "", - "fallback": "", + "fallback": "Line-height/400", "exceptions": [], - "cssName": "--smtc-text-global-body2-lineheight" + "cssName": "--smtc-text-global-body2-line-height" }, - "textGlobalBody3Fontsize": { + "textGlobalBody3FontSize": { "no": 17, "name": "text/global/body3/fontSize", "fst_reference": "", @@ -218,9 +218,9 @@ "contrast": "", "fallback": "Font-size/300", "exceptions": [], - "cssName": "--smtc-text-global-body3-fontsize" + "cssName": "--smtc-text-global-body3-font-size" }, - "textGlobalBody3Lineheight": { + "textGlobalBody3LineHeight": { "no": 18, "name": "text/global/body3/lineHeight", "fst_reference": "", @@ -248,9 +248,9 @@ "contrast": "", "fallback": "Line-height/300", "exceptions": [], - "cssName": "--smtc-text-global-body3-lineheight" + "cssName": "--smtc-text-global-body3-line-height" }, - "textGlobalCaption1Fontsize": { + "textGlobalCaption1FontSize": { "no": 19, "name": "text/global/caption1/fontSize", "fst_reference": "", @@ -261,9 +261,9 @@ "contrast": "", "fallback": "Font-size/200", "exceptions": [], - "cssName": "--smtc-text-global-caption1-fontsize" + "cssName": "--smtc-text-global-caption1-font-size" }, - "textGlobalCaption1Lineheight": { + "textGlobalCaption1LineHeight": { "no": 20, "name": "text/global/caption1/lineHeight", "fst_reference": "", @@ -274,9 +274,9 @@ "contrast": "", "fallback": "Line-height/200", "exceptions": [], - "cssName": "--smtc-text-global-caption1-lineheight" + "cssName": "--smtc-text-global-caption1-line-height" }, - "textGlobalCaption2Fontsize": { + "textGlobalCaption2FontSize": { "no": 21, "name": "text/global/caption2/fontSize", "fst_reference": "", @@ -287,9 +287,9 @@ "contrast": "", "fallback": "Font-size/100", "exceptions": [], - "cssName": "--smtc-text-global-caption2-fontsize" + "cssName": "--smtc-text-global-caption2-font-size" }, - "textGlobalCaption2Lineheight": { + "textGlobalCaption2LineHeight": { "no": 22, "name": "text/global/caption2/lineHeight", "fst_reference": "", @@ -300,9 +300,9 @@ "contrast": "", "fallback": "Line-height/100", "exceptions": [], - "cssName": "--smtc-text-global-caption2-lineheight" + "cssName": "--smtc-text-global-caption2-line-height" }, - "textStyleDefaultRegularFontfamily": { + "textStyleDefaultRegularFontFamily": { "no": 23, "name": "text/style/default/regular/fontFamily", "fst_reference": "", @@ -341,7 +341,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-default-regular-fontfamily" + "cssName": "--smtc-text-style-default-regular-font-family" }, "textStyleDefaultRegularWeight": { "no": 24, @@ -379,7 +379,7 @@ "exceptions": [], "cssName": "--smtc-text-style-default-regular-weight" }, - "textStyleDefaultRegularLetterspacing": { + "textStyleDefaultRegularLetterSpacing": { "no": 25, "name": "text/style/default/regular/letterSpacing", "fst_reference": "", @@ -418,9 +418,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-default-regular-letterspacing" + "cssName": "--smtc-text-style-default-regular-letter-spacing" }, - "textStyleDefaultHeaderFontfamily": { + "textStyleDefaultHeaderFontFamily": { "no": 26, "name": "text/style/default/header/fontFamily", "fst_reference": "text/style/default/regular/fontFamily", @@ -431,7 +431,7 @@ "contrast": "", "fallback": "Font-family/Base", "exceptions": [], - "cssName": "--smtc-text-style-default-header-fontfamily" + "cssName": "--smtc-text-style-default-header-font-family" }, "textStyleDefaultHeaderWeight": { "no": 27, @@ -446,7 +446,7 @@ "exceptions": [], "cssName": "--smtc-text-style-default-header-weight" }, - "textStyleDefaultHeaderLetterspacing": { + "textStyleDefaultHeaderLetterSpacing": { "no": 28, "name": "text/style/default/header/letterSpacing", "fst_reference": "text/style/default/regular/letterSpacing", @@ -457,7 +457,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-default-header-letterspacing" + "cssName": "--smtc-text-style-default-header-letter-spacing" }, "textStyleDefaultHeaderCase": { "no": 29, @@ -472,7 +472,7 @@ "exceptions": [], "cssName": "--smtc-text-style-default-header-case" }, - "textStyleAiRegularFontfamily": { + "textStyleAiRegularFontFamily": { "no": 30, "name": "text/style/ai/regular/fontFamily", "fst_reference": "text/style/default/regular/fontFamily", @@ -483,7 +483,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-ai-regular-fontfamily" + "cssName": "--smtc-text-style-ai-regular-font-family" }, "textStyleAiRegularWeight": { "no": 31, @@ -498,7 +498,7 @@ "exceptions": [], "cssName": "--smtc-text-style-ai-regular-weight" }, - "textStyleAiRegularLetterspacing": { + "textStyleAiRegularLetterSpacing": { "no": 32, "name": "text/style/ai/regular/letterSpacing", "fst_reference": "text/style/default/regular/letterSpacing", @@ -509,9 +509,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-ai-regular-letterspacing" + "cssName": "--smtc-text-style-ai-regular-letter-spacing" }, - "textStyleAiHeaderFontfamily": { + "textStyleAiHeaderFontFamily": { "no": 33, "name": "text/style/ai/header/fontFamily", "fst_reference": "text/style/default/regular/fontFamily", @@ -522,7 +522,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-ai-header-fontfamily" + "cssName": "--smtc-text-style-ai-header-font-family" }, "textStyleAiHeaderWeight": { "no": 34, @@ -537,7 +537,7 @@ "exceptions": [], "cssName": "--smtc-text-style-ai-header-weight" }, - "textStyleAiHeaderLetterspacing": { + "textStyleAiHeaderLetterSpacing": { "no": 35, "name": "text/style/ai/header/letterSpacing", "fst_reference": "text/style/default/regular/letterSpacing", @@ -548,7 +548,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-ai-header-letterspacing" + "cssName": "--smtc-text-style-ai-header-letter-spacing" }, "textStyleAiHeaderCase": { "no": 36, @@ -563,7 +563,7 @@ "exceptions": [], "cssName": "--smtc-text-style-ai-header-case" }, - "textStyleArticleRegularFontfamily": { + "textStyleArticleRegularFontFamily": { "no": 37, "name": "text/style/article/regular/fontFamily", "fst_reference": "text/style/default/regular/fontFamily", @@ -574,7 +574,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-article-regular-fontfamily" + "cssName": "--smtc-text-style-article-regular-font-family" }, "textStyleArticleRegularWeight": { "no": 38, @@ -589,7 +589,7 @@ "exceptions": [], "cssName": "--smtc-text-style-article-regular-weight" }, - "textStyleArticleRegularLetterspacing": { + "textStyleArticleRegularLetterSpacing": { "no": 39, "name": "text/style/article/regular/letterSpacing", "fst_reference": "text/style/default/regular/letterSpacing", @@ -600,9 +600,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-article-regular-letterspacing" + "cssName": "--smtc-text-style-article-regular-letter-spacing" }, - "textStyleArticleHeaderFontfamily": { + "textStyleArticleHeaderFontFamily": { "no": 40, "name": "text/style/article/header/fontFamily", "fst_reference": "text/style/default/regular/fontFamily", @@ -613,7 +613,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-article-header-fontfamily" + "cssName": "--smtc-text-style-article-header-font-family" }, "textStyleArticleHeaderWeight": { "no": 41, @@ -628,7 +628,7 @@ "exceptions": [], "cssName": "--smtc-text-style-article-header-weight" }, - "textStyleArticleHeaderLetterspacing": { + "textStyleArticleHeaderLetterSpacing": { "no": 42, "name": "text/style/article/header/letterSpacing", "fst_reference": "text/style/default/regular/letterSpacing", @@ -639,7 +639,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-article-header-letterspacing" + "cssName": "--smtc-text-style-article-header-letter-spacing" }, "textStyleArticleHeaderCase": { "no": 43, @@ -654,7 +654,7 @@ "exceptions": [], "cssName": "--smtc-text-style-article-header-case" }, - "textStyleCodeRegularFontfamily": { + "textStyleCodeRegularFontFamily": { "no": 44, "name": "text/style/code/regular/fontFamily", "fst_reference": "text/style/default/regular/fontFamily", @@ -665,7 +665,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-code-regular-fontfamily" + "cssName": "--smtc-text-style-code-regular-font-family" }, "textStyleCodeRegularWeight": { "no": 45, @@ -680,7 +680,7 @@ "exceptions": [], "cssName": "--smtc-text-style-code-regular-weight" }, - "textStyleCodeRegularLetterspacing": { + "textStyleCodeRegularLetterSpacing": { "no": 46, "name": "text/style/code/regular/letterSpacing", "fst_reference": "text/style/default/regular/letterSpacing", @@ -691,9 +691,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-code-regular-letterspacing" + "cssName": "--smtc-text-style-code-regular-letter-spacing" }, - "textStyleCodeHeaderFontfamily": { + "textStyleCodeHeaderFontFamily": { "no": 47, "name": "text/style/code/header/fontFamily", "fst_reference": "text/style/default/regular/fontFamily", @@ -704,7 +704,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-code-header-fontfamily" + "cssName": "--smtc-text-style-code-header-font-family" }, "textStyleCodeHeaderWeight": { "no": 48, @@ -719,7 +719,7 @@ "exceptions": [], "cssName": "--smtc-text-style-code-header-weight" }, - "textStyleCodeHeaderLetterspacing": { + "textStyleCodeHeaderLetterSpacing": { "no": 49, "name": "text/style/code/header/letterSpacing", "fst_reference": "text/style/default/regular/letterSpacing", @@ -730,7 +730,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-code-header-letterspacing" + "cssName": "--smtc-text-style-code-header-letter-spacing" }, "textStyleCodeHeaderCase": { "no": 50, @@ -745,7 +745,7 @@ "exceptions": [], "cssName": "--smtc-text-style-code-header-case" }, - "textStyleDatavizRegularFontfamily": { + "textStyleDataVizRegularFontFamily": { "no": 51, "name": "text/style/dataViz/regular/fontFamily", "fst_reference": "text/style/default/regular/fontFamily", @@ -756,9 +756,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-dataviz-regular-fontfamily" + "cssName": "--smtc-text-style-data-viz-regular-font-family" }, - "textStyleDatavizRegularWeight": { + "textStyleDataVizRegularWeight": { "no": 52, "name": "text/style/dataViz/regular/weight", "fst_reference": "text/style/default/regular/weight", @@ -769,9 +769,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-dataviz-regular-weight" + "cssName": "--smtc-text-style-data-viz-regular-weight" }, - "textStyleDatavizRegularLetterspacing": { + "textStyleDataVizRegularLetterSpacing": { "no": 53, "name": "text/style/dataViz/regular/letterSpacing", "fst_reference": "text/style/default/regular/letterSpacing", @@ -782,9 +782,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-dataviz-regular-letterspacing" + "cssName": "--smtc-text-style-data-viz-regular-letter-spacing" }, - "textStyleDatavizHeaderFontfamily": { + "textStyleDataVizHeaderFontFamily": { "no": 54, "name": "text/style/dataViz/header/fontFamily", "fst_reference": "text/style/default/regular/fontFamily", @@ -795,9 +795,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-dataviz-header-fontfamily" + "cssName": "--smtc-text-style-data-viz-header-font-family" }, - "textStyleDatavizHeaderWeight": { + "textStyleDataVizHeaderWeight": { "no": 55, "name": "text/style/dataViz/header/weight", "fst_reference": "text/style/default/header/weight", @@ -808,9 +808,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-dataviz-header-weight" + "cssName": "--smtc-text-style-data-viz-header-weight" }, - "textStyleDatavizHeaderLetterspacing": { + "textStyleDataVizHeaderLetterSpacing": { "no": 56, "name": "text/style/dataViz/header/letterSpacing", "fst_reference": "text/style/default/regular/letterSpacing", @@ -821,9 +821,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-dataviz-header-letterspacing" + "cssName": "--smtc-text-style-data-viz-header-letter-spacing" }, - "textStyleDatavizHeaderCase": { + "textStyleDataVizHeaderCase": { "no": 57, "name": "text/style/dataViz/header/case", "fst_reference": "NULL/string", @@ -834,9 +834,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-dataviz-header-case" + "cssName": "--smtc-text-style-data-viz-header-case" }, - "textStyleQuoteRegularFontfamily": { + "textStyleQuoteRegularFontFamily": { "no": 58, "name": "text/style/quote/regular/fontFamily", "fst_reference": "text/style/default/regular/fontFamily", @@ -847,7 +847,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-quote-regular-fontfamily" + "cssName": "--smtc-text-style-quote-regular-font-family" }, "textStyleQuoteRegularWeight": { "no": 59, @@ -862,7 +862,7 @@ "exceptions": [], "cssName": "--smtc-text-style-quote-regular-weight" }, - "textStyleQuoteRegularLetterspacing": { + "textStyleQuoteRegularLetterSpacing": { "no": 60, "name": "text/style/quote/regular/letterSpacing", "fst_reference": "text/style/default/regular/letterSpacing", @@ -873,9 +873,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-quote-regular-letterspacing" + "cssName": "--smtc-text-style-quote-regular-letter-spacing" }, - "textStyleQuoteHeaderFontfamily": { + "textStyleQuoteHeaderFontFamily": { "no": 61, "name": "text/style/quote/header/fontFamily", "fst_reference": "text/style/default/regular/fontFamily", @@ -886,7 +886,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-quote-header-fontfamily" + "cssName": "--smtc-text-style-quote-header-font-family" }, "textStyleQuoteHeaderWeight": { "no": 62, @@ -901,7 +901,7 @@ "exceptions": [], "cssName": "--smtc-text-style-quote-header-weight" }, - "textStyleQuoteHeaderLetterspacing": { + "textStyleQuoteHeaderLetterSpacing": { "no": 63, "name": "text/style/quote/header/letterSpacing", "fst_reference": "text/style/default/regular/letterSpacing", @@ -912,7 +912,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-style-quote-header-letterspacing" + "cssName": "--smtc-text-style-quote-header-letter-spacing" }, "textStyleQuoteHeaderCase": { "no": 64, @@ -927,7 +927,7 @@ "exceptions": [], "cssName": "--smtc-text-style-quote-header-case" }, - "textRampPageheaderFontsize": { + "textRampPageHeaderFontSize": { "no": 65, "name": "text/ramp/pageHeader/fontSize", "fst_reference": "text/global/title2/fontSize", @@ -938,9 +938,9 @@ "contrast": "", "fallback": "text/global/subtitle1/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-pageheader-fontsize" + "cssName": "--smtc-text-ramp-page-header-font-size" }, - "textRampPageheaderLineheight": { + "textRampPageHeaderLineHeight": { "no": 66, "name": "text/ramp/pageHeader/lineHeight", "fst_reference": "text/global/title2/lineHeight", @@ -951,9 +951,9 @@ "contrast": "", "fallback": "text/global/subtitle1/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-pageheader-lineheight" + "cssName": "--smtc-text-ramp-page-header-line-height" }, - "textRampSectionheaderFontsize": { + "textRampSectionHeaderFontSize": { "no": 67, "name": "text/ramp/sectionHeader/fontSize", "fst_reference": "text/global/subtitle1/fontSize", @@ -964,9 +964,9 @@ "contrast": "", "fallback": "text/global/subtitle2/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-sectionheader-fontsize" + "cssName": "--smtc-text-ramp-section-header-font-size" }, - "textRampSectionheaderLineheight": { + "textRampSectionHeaderLineHeight": { "no": 68, "name": "text/ramp/sectionHeader/lineHeight", "fst_reference": "text/global/subtitle1/lineHeight", @@ -977,9 +977,9 @@ "contrast": "", "fallback": "text/global/subtitle2/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-sectionheader-lineheight" + "cssName": "--smtc-text-ramp-section-header-line-height" }, - "textRampSubsectionheaderFontsize": { + "textRampSubsectionHeaderFontSize": { "no": 69, "name": "text/ramp/subsectionHeader/fontSize", "fst_reference": "text/global/subtitle2/fontSize", @@ -990,9 +990,9 @@ "contrast": "", "fallback": "text/global/subtitle2/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-subsectionheader-fontsize" + "cssName": "--smtc-text-ramp-subsection-header-font-size" }, - "textRampSubsectionheaderLineheight": { + "textRampSubsectionHeaderLineHeight": { "no": 70, "name": "text/ramp/subsectionHeader/lineHeight", "fst_reference": "text/global/subtitle2/lineHeight", @@ -1003,9 +1003,9 @@ "contrast": "", "fallback": "text/global/subtitle2/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-subsectionheader-lineheight" + "cssName": "--smtc-text-ramp-subsection-header-line-height" }, - "textRampReadingbodyFontsize": { + "textRampReadingBodyFontSize": { "no": 71, "name": "text/ramp/readingBody/fontSize", "fst_reference": "text/global/body2/fontSize", @@ -1016,9 +1016,9 @@ "contrast": "", "fallback": "text/global/body2/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-readingbody-fontsize" + "cssName": "--smtc-text-ramp-reading-body-font-size" }, - "textRampReadingbodyLineheight": { + "textRampReadingBodyLineHeight": { "no": 72, "name": "text/ramp/readingBody/lineHeight", "fst_reference": "text/global/body2/lineHeight", @@ -1029,9 +1029,9 @@ "contrast": "", "fallback": "text/global/body2/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-readingbody-lineheight" + "cssName": "--smtc-text-ramp-reading-body-line-height" }, - "textRampItemheaderFontsize": { + "textRampItemHeaderFontSize": { "no": 73, "name": "text/ramp/itemHeader/fontSize", "fst_reference": "text/global/body2/fontSize", @@ -1042,9 +1042,9 @@ "contrast": "", "fallback": "text/global/body2/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-itemheader-fontsize" + "cssName": "--smtc-text-ramp-item-header-font-size" }, - "textRampItemheaderLineheight": { + "textRampItemHeaderLineHeight": { "no": 74, "name": "text/ramp/itemHeader/lineHeight", "fst_reference": "text/global/body2/lineHeight", @@ -1055,9 +1055,9 @@ "contrast": "", "fallback": "text/global/body2/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-itemheader-lineheight" + "cssName": "--smtc-text-ramp-item-header-line-height" }, - "textRampItembodyFontsize": { + "textRampItemBodyFontSize": { "no": 75, "name": "text/ramp/itemBody/fontSize", "fst_reference": "text/global/body3/fontSize", @@ -1093,9 +1093,9 @@ "contrast": "", "fallback": "Font-size/300", "exceptions": [], - "cssName": "--smtc-text-ramp-itembody-fontsize" + "cssName": "--smtc-text-ramp-item-body-font-size" }, - "textRampItembodyLineheight": { + "textRampItemBodyLineHeight": { "no": 76, "name": "text/ramp/itemBody/lineHeight", "fst_reference": "text/global/body3/lineHeight", @@ -1120,9 +1120,9 @@ "contrast": "", "fallback": "Line-height/300", "exceptions": [], - "cssName": "--smtc-text-ramp-itembody-lineheight" + "cssName": "--smtc-text-ramp-item-body-line-height" }, - "textRampMetadataFontsize": { + "textRampMetadataFontSize": { "no": 77, "name": "text/ramp/metadata/fontSize", "fst_reference": "text/global/caption1/fontSize", @@ -1133,9 +1133,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-metadata-fontsize" + "cssName": "--smtc-text-ramp-metadata-font-size" }, - "textRampMetadataLineheight": { + "textRampMetadataLineHeight": { "no": 78, "name": "text/ramp/metadata/lineHeight", "fst_reference": "text/global/caption1/lineHeight", @@ -1146,9 +1146,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-metadata-lineheight" + "cssName": "--smtc-text-ramp-metadata-line-height" }, - "textRampLegalFontsize": { + "textRampLegalFontSize": { "no": 79, "name": "text/ramp/legal/fontSize", "fst_reference": "text/global/caption2/fontSize", @@ -1159,9 +1159,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-legal-fontsize" + "cssName": "--smtc-text-ramp-legal-font-size" }, - "textRampLegalLineheight": { + "textRampLegalLineHeight": { "no": 80, "name": "text/ramp/legal/lineHeight", "fst_reference": "text/global/caption2/lineHeight", @@ -1172,9 +1172,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-legal-lineheight" + "cssName": "--smtc-text-ramp-legal-line-height" }, - "textRampSmPageheaderFontsize": { + "textRampSmPageHeaderFontSize": { "no": 81, "name": "text/ramp-sm/pageHeader/fontSize", "fst_reference": "text/global/subtitle1/fontSize", @@ -1185,9 +1185,9 @@ "contrast": "", "fallback": "text/global/subtitle2/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-pageheader-fontsize" + "cssName": "--smtc-text-ramp-sm-page-header-font-size" }, - "textRampSmPageheaderLineheight": { + "textRampSmPageHeaderLineHeight": { "no": 82, "name": "text/ramp-sm/pageHeader/lineHeight", "fst_reference": "text/global/subtitle1/lineHeight", @@ -1198,9 +1198,9 @@ "contrast": "", "fallback": "text/global/subtitle2/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-pageheader-lineheight" + "cssName": "--smtc-text-ramp-sm-page-header-line-height" }, - "textRampSmSectionheaderFontsize": { + "textRampSmSectionHeaderFontSize": { "no": 83, "name": "text/ramp-sm/sectionHeader/fontSize", "fst_reference": "text/global/subtitle2/fontSize", @@ -1211,9 +1211,9 @@ "contrast": "", "fallback": "text/global/body1/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-sectionheader-fontsize" + "cssName": "--smtc-text-ramp-sm-section-header-font-size" }, - "textRampSmSectionheaderLineheight": { + "textRampSmSectionHeaderLineHeight": { "no": 84, "name": "text/ramp-sm/sectionHeader/lineHeight", "fst_reference": "text/global/subtitle2/lineHeight", @@ -1224,9 +1224,9 @@ "contrast": "", "fallback": "text/global/body1/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-sectionheader-lineheight" + "cssName": "--smtc-text-ramp-sm-section-header-line-height" }, - "textRampSmSubsectionheaderFontsize": { + "textRampSmSubsectionHeaderFontSize": { "no": 85, "name": "text/ramp-sm/subsectionHeader/fontSize", "fst_reference": "text/global/body1/fontSize", @@ -1237,9 +1237,9 @@ "contrast": "", "fallback": "text/global/body1/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-subsectionheader-fontsize" + "cssName": "--smtc-text-ramp-sm-subsection-header-font-size" }, - "textRampSmSubsectionheaderLineheight": { + "textRampSmSubsectionHeaderLineHeight": { "no": 86, "name": "text/ramp-sm/subsectionHeader/lineHeight", "fst_reference": "text/global/body1/lineHeight", @@ -1250,9 +1250,9 @@ "contrast": "", "fallback": "text/global/body1/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-subsectionheader-lineheight" + "cssName": "--smtc-text-ramp-sm-subsection-header-line-height" }, - "textRampSmReadingbodyFontsize": { + "textRampSmReadingBodyFontSize": { "no": 87, "name": "text/ramp-sm/readingBody/fontSize", "fst_reference": "text/global/body3/fontSize", @@ -1263,9 +1263,9 @@ "contrast": "", "fallback": "text/global/body3/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-readingbody-fontsize" + "cssName": "--smtc-text-ramp-sm-reading-body-font-size" }, - "textRampSmReadingbodyLineheight": { + "textRampSmReadingBodyLineHeight": { "no": 88, "name": "text/ramp-sm/readingBody/lineHeight", "fst_reference": "text/global/body3/lineHeight", @@ -1276,9 +1276,9 @@ "contrast": "", "fallback": "text/global/body3/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-readingbody-lineheight" + "cssName": "--smtc-text-ramp-sm-reading-body-line-height" }, - "textRampSmItemheaderFontsize": { + "textRampSmItemHeaderFontSize": { "no": 89, "name": "text/ramp-sm/itemHeader/fontSize", "fst_reference": "text/global/body3/fontSize", @@ -1289,9 +1289,9 @@ "contrast": "", "fallback": "text/global/body3/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-itemheader-fontsize" + "cssName": "--smtc-text-ramp-sm-item-header-font-size" }, - "textRampSmItemheaderLineheight": { + "textRampSmItemHeaderLineHeight": { "no": 90, "name": "text/ramp-sm/itemHeader/lineHeight", "fst_reference": "text/global/body3/lineHeight", @@ -1302,9 +1302,9 @@ "contrast": "", "fallback": "text/global/body3/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-itemheader-lineheight" + "cssName": "--smtc-text-ramp-sm-item-header-line-height" }, - "textRampSmItembodyFontsize": { + "textRampSmItemBodyFontSize": { "no": 91, "name": "text/ramp-sm/itemBody/fontSize", "fst_reference": "text/global/caption1/fontSize", @@ -1315,9 +1315,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-itembody-fontsize" + "cssName": "--smtc-text-ramp-sm-item-body-font-size" }, - "textRampSmItembodyLineheight": { + "textRampSmItemBodyLineHeight": { "no": 92, "name": "text/ramp-sm/itemBody/lineHeight", "fst_reference": "text/global/caption1/lineHeight", @@ -1328,9 +1328,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-itembody-lineheight" + "cssName": "--smtc-text-ramp-sm-item-body-line-height" }, - "textRampSmMetadataFontsize": { + "textRampSmMetadataFontSize": { "no": 93, "name": "text/ramp-sm/metadata/fontSize", "fst_reference": "text/global/caption1/fontSize", @@ -1341,9 +1341,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-metadata-fontsize" + "cssName": "--smtc-text-ramp-sm-metadata-font-size" }, - "textRampSmMetadataLineheight": { + "textRampSmMetadataLineHeight": { "no": 94, "name": "text/ramp-sm/metadata/lineHeight", "fst_reference": "text/global/caption1/lineHeight", @@ -1354,9 +1354,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-metadata-lineheight" + "cssName": "--smtc-text-ramp-sm-metadata-line-height" }, - "textRampSmLegalFontsize": { + "textRampSmLegalFontSize": { "no": 95, "name": "text/ramp-sm/legal/fontSize", "fst_reference": "text/global/caption2/fontSize", @@ -1367,9 +1367,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-legal-fontsize" + "cssName": "--smtc-text-ramp-sm-legal-font-size" }, - "textRampSmLegalLineheight": { + "textRampSmLegalLineHeight": { "no": 96, "name": "text/ramp-sm/legal/lineHeight", "fst_reference": "text/global/caption2/lineHeight", @@ -1380,9 +1380,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-sm-legal-lineheight" + "cssName": "--smtc-text-ramp-sm-legal-line-height" }, - "textRampLgPageheaderFontsize": { + "textRampLgPageHeaderFontSize": { "no": 97, "name": "text/ramp-lg/pageHeader/fontSize", "fst_reference": "text/global/title1/fontSize", @@ -1393,9 +1393,9 @@ "contrast": "", "fallback": "text/global/title2/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-pageheader-fontsize" + "cssName": "--smtc-text-ramp-lg-page-header-font-size" }, - "textRampLgPageheaderLineheight": { + "textRampLgPageHeaderLineHeight": { "no": 98, "name": "text/ramp-lg/pageHeader/lineHeight", "fst_reference": "text/global/title1/lineHeight", @@ -1406,9 +1406,9 @@ "contrast": "", "fallback": "text/global/title2/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-pageheader-lineheight" + "cssName": "--smtc-text-ramp-lg-page-header-line-height" }, - "textRampLgSectionheaderFontsize": { + "textRampLgSectionHeaderFontSize": { "no": 99, "name": "text/ramp-lg/sectionHeader/fontSize", "fst_reference": "text/global/title2/fontSize", @@ -1419,9 +1419,9 @@ "contrast": "", "fallback": "text/global/subtitle1/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-sectionheader-fontsize" + "cssName": "--smtc-text-ramp-lg-section-header-font-size" }, - "textRampLgSectionheaderLineheight": { + "textRampLgSectionHeaderLineHeight": { "no": 100, "name": "text/ramp-lg/sectionHeader/lineHeight", "fst_reference": "text/global/title2/lineHeight", @@ -1432,9 +1432,9 @@ "contrast": "", "fallback": "text/global/subtitle1/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-sectionheader-lineheight" + "cssName": "--smtc-text-ramp-lg-section-header-line-height" }, - "textRampLgSubsectionheaderFontsize": { + "textRampLgSubsectionHeaderFontSize": { "no": 101, "name": "text/ramp-lg/subsectionHeader/fontSize", "fst_reference": "text/global/subtitle1/fontSize", @@ -1445,9 +1445,9 @@ "contrast": "", "fallback": "text/global/subtitle1/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-subsectionheader-fontsize" + "cssName": "--smtc-text-ramp-lg-subsection-header-font-size" }, - "textRampLgSubsectionheaderLineheight": { + "textRampLgSubsectionHeaderLineHeight": { "no": 102, "name": "text/ramp-lg/subsectionHeader/lineHeight", "fst_reference": "text/global/subtitle1/lineHeight", @@ -1458,9 +1458,9 @@ "contrast": "", "fallback": "text/global/subtitle1/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-subsectionheader-lineheight" + "cssName": "--smtc-text-ramp-lg-subsection-header-line-height" }, - "textRampLgReadingbodyFontsize": { + "textRampLgReadingBodyFontSize": { "no": 103, "name": "text/ramp-lg/readingBody/fontSize", "fst_reference": "text/global/body1/fontSize", @@ -1471,9 +1471,9 @@ "contrast": "", "fallback": "text/global/body1/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-readingbody-fontsize" + "cssName": "--smtc-text-ramp-lg-reading-body-font-size" }, - "textRampLgReadingbodyLineheight": { + "textRampLgReadingBodyLineHeight": { "no": 104, "name": "text/ramp-lg/readingBody/lineHeight", "fst_reference": "text/global/body1/lineHeight", @@ -1484,9 +1484,9 @@ "contrast": "", "fallback": "text/global/body1/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-readingbody-lineheight" + "cssName": "--smtc-text-ramp-lg-reading-body-line-height" }, - "textRampLgItemheaderFontsize": { + "textRampLgItemHeaderFontSize": { "no": 105, "name": "text/ramp-lg/itemHeader/fontSize", "fst_reference": "text/global/subtitle2/fontSize", @@ -1497,9 +1497,9 @@ "contrast": "", "fallback": "text/global/body1/fontSize", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-itemheader-fontsize" + "cssName": "--smtc-text-ramp-lg-item-header-font-size" }, - "textRampLgItemheaderLineheight": { + "textRampLgItemHeaderLineHeight": { "no": 106, "name": "text/ramp-lg/itemHeader/lineHeight", "fst_reference": "text/global/subtitle2/lineHeight", @@ -1510,9 +1510,9 @@ "contrast": "", "fallback": "text/global/body1/lineHeight", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-itemheader-lineheight" + "cssName": "--smtc-text-ramp-lg-item-header-line-height" }, - "textRampLgItembodyFontsize": { + "textRampLgItemBodyFontSize": { "no": 107, "name": "text/ramp-lg/itemBody/fontSize", "fst_reference": "text/global/body2/fontSize", @@ -1523,9 +1523,9 @@ "contrast": "", "fallback": "Font-size/400", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-itembody-fontsize" + "cssName": "--smtc-text-ramp-lg-item-body-font-size" }, - "textRampLgItembodyLineheight": { + "textRampLgItemBodyLineHeight": { "no": 108, "name": "text/ramp-lg/itemBody/lineHeight", "fst_reference": "text/global/body2/lineHeight", @@ -1536,9 +1536,9 @@ "contrast": "", "fallback": "Line-height/400", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-itembody-lineheight" + "cssName": "--smtc-text-ramp-lg-item-body-line-height" }, - "textRampLgMetadataFontsize": { + "textRampLgMetadataFontSize": { "no": 109, "name": "text/ramp-lg/metadata/fontSize", "fst_reference": "text/global/body3/fontSize", @@ -1549,9 +1549,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-metadata-fontsize" + "cssName": "--smtc-text-ramp-lg-metadata-font-size" }, - "textRampLgMetadataLineheight": { + "textRampLgMetadataLineHeight": { "no": 110, "name": "text/ramp-lg/metadata/lineHeight", "fst_reference": "text/global/body3/lineHeight", @@ -1562,9 +1562,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-metadata-lineheight" + "cssName": "--smtc-text-ramp-lg-metadata-line-height" }, - "textRampLgLegalFontsize": { + "textRampLgLegalFontSize": { "no": 111, "name": "text/ramp-lg/legal/fontSize", "fst_reference": "text/global/caption1/fontSize", @@ -1575,9 +1575,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-legal-fontsize" + "cssName": "--smtc-text-ramp-lg-legal-font-size" }, - "textRampLgLegalLineheight": { + "textRampLgLegalLineHeight": { "no": 112, "name": "text/ramp-lg/legal/lineHeight", "fst_reference": "text/global/caption1/lineHeight", @@ -1588,7 +1588,7 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-text-ramp-lg-legal-lineheight" + "cssName": "--smtc-text-ramp-lg-legal-line-height" }, "textCtrlWeightDefault": { "no": 113, @@ -1748,9 +1748,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-size-ctrl-iconfigmaonly" + "cssName": "--smtc-size-ctrl-icon-figmaonly" }, - "sizeCtrlIconsecondary": { + "sizeCtrlIconSecondary": { "no": 119, "name": "size/ctrl/iconSecondary", "fst_reference": "", @@ -1775,10 +1775,23 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-size-ctrl-iconsecondary" + "cssName": "--smtc-size-ctrl-icon-secondary" }, - "textCtrlWeightSelected": { + "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, @@ -1791,7 +1804,7 @@ "cssName": "--smtc-text-ctrl-weight-selected" }, "sizeCtrlSmDefault": { - "no": 121, + "no": 122, "name": "size/ctrl-sm/default", "fst_reference": "", "optional": false, @@ -1804,7 +1817,7 @@ "cssName": "--smtc-size-ctrl-sm-default" }, "sizeCtrlSmIcon": { - "no": 122, + "no": 123, "name": "size/ctrl-sm/icon", "fst_reference": "", "optional": false, @@ -1817,7 +1830,7 @@ "cssName": "--smtc-size-ctrl-sm-icon" }, "sizeCtrlLgDefault": { - "no": 123, + "no": 124, "name": "size/ctrl-lg/default", "fst_reference": "", "optional": false, @@ -1830,7 +1843,7 @@ "cssName": "--smtc-size-ctrl-lg-default" }, "sizeCtrlLgIcon": { - "no": 124, + "no": 125, "name": "size/ctrl-lg/icon", "fst_reference": "", "optional": false, @@ -1843,7 +1856,7 @@ "cssName": "--smtc-size-ctrl-lg-icon" }, "sizeCtrlSmIconFigmaonly": { - "no": 125, + "no": 126, "name": "size/ctrl-sm/icon(figmaonly)", "fst_reference": "", "optional": false, @@ -1853,10 +1866,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-size-ctrl-sm-iconfigmaonly" + "cssName": "--smtc-size-ctrl-sm-icon-figmaonly" }, "sizeCtrlLgIconFigmaonly": { - "no": 126, + "no": 127, "name": "size/ctrl-lg/icon(figmaonly)", "fst_reference": "", "optional": false, @@ -1866,10 +1879,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-size-ctrl-lg-iconfigmaonly" + "cssName": "--smtc-size-ctrl-lg-icon-figmaonly" }, "paddingContentAlignDefault": { - "no": 127, + "no": 128, "name": "padding/content/align/default", "fst_reference": "", "optional": false, @@ -1881,8 +1894,8 @@ "exceptions": [], "cssName": "--smtc-padding-content-align-default" }, - "paddingContentAlignOutdentIcononsubtle": { - "no": 128, + "paddingContentAlignOutdentIconOnSubtle": { + "no": 129, "name": "padding/content/align/outdent-iconOnSubtle", "fst_reference": "", "optional": false, @@ -1892,11 +1905,11 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-content-align-outdent-icononsubtle" + "cssName": "--smtc-padding-content-align-outdent-icon-on-subtle" }, - "paddingContentAlignOutdentTextonsubtle": { - "no": 129, - "name": "padding/content/align/outdent-textOnSubtle", + "paddingContentNone": { + "no": 130, + "name": "padding/content/none", "fst_reference": "", "optional": false, "nullable": false, @@ -1905,11 +1918,11 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-content-align-outdent-textonsubtle" + "cssName": "--smtc-padding-content-none" }, - "paddingContentNone": { - "no": 130, - "name": "padding/content/none", + "paddingContentAlignOutdentTextOnSubtle": { + "no": 131, + "name": "padding/content/align/outdent-textOnSubtle", "fst_reference": "", "optional": false, "nullable": false, @@ -1918,10 +1931,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-content-none" + "cssName": "--smtc-padding-content-align-outdent-text-on-subtle" }, - "paddingContentXxsmall": { - "no": 131, + "paddingContentXxSmall": { + "no": 132, "name": "padding/content/xxSmall", "fst_reference": "", "optional": false, @@ -1931,10 +1944,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-content-xxsmall" + "cssName": "--smtc-padding-content-xx-small" }, - "paddingContentXsmall": { - "no": 132, + "paddingContentXSmall": { + "no": 133, "name": "padding/content/xSmall", "fst_reference": "", "optional": false, @@ -1944,10 +1957,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-content-xsmall" + "cssName": "--smtc-padding-content-x-small" }, "paddingContentSmall": { - "no": 133, + "no": 134, "name": "padding/content/small", "fst_reference": "", "optional": false, @@ -1960,7 +1973,7 @@ "cssName": "--smtc-padding-content-small" }, "paddingContentMedium": { - "no": 134, + "no": 135, "name": "padding/content/medium", "fst_reference": "", "optional": false, @@ -1973,7 +1986,7 @@ "cssName": "--smtc-padding-content-medium" }, "paddingContentLarge": { - "no": 135, + "no": 136, "name": "padding/content/large", "fst_reference": "", "optional": false, @@ -1985,8 +1998,8 @@ "exceptions": [], "cssName": "--smtc-padding-content-large" }, - "paddingContentXlarge": { - "no": 136, + "paddingContentXLarge": { + "no": 137, "name": "padding/content/xLarge", "fst_reference": "", "optional": false, @@ -1996,10 +2009,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-content-xlarge" + "cssName": "--smtc-padding-content-x-large" }, - "paddingContentXxlarge": { - "no": 137, + "paddingContentXxLarge": { + "no": 138, "name": "padding/content/xxLarge", "fst_reference": "", "optional": false, @@ -2009,10 +2022,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-content-xxlarge" + "cssName": "--smtc-padding-content-xx-large" }, - "paddingContentXxxlarge": { - "no": 138, + "paddingContentXxxLarge": { + "no": 139, "name": "padding/content/xxxLarge", "fst_reference": "", "optional": false, @@ -2022,10 +2035,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-content-xxxlarge" + "cssName": "--smtc-padding-content-xxx-large" }, "paddingToolbarInside": { - "no": 139, + "no": 140, "name": "padding/toolbar/inside", "fst_reference": "padding/content/xSmall", "optional": true, @@ -2038,7 +2051,7 @@ "cssName": "--smtc-padding-toolbar-inside" }, "paddingToolbarOutside": { - "no": 140, + "no": 141, "name": "padding/toolbar/outside", "fst_reference": "padding/content/xxSmall", "optional": true, @@ -2051,7 +2064,7 @@ "cssName": "--smtc-padding-toolbar-outside" }, "paddingFlyoutDefault": { - "no": 141, + "no": 142, "name": "padding/flyout/default", "fst_reference": "padding/content/align/outdent-textOnSubtle", "optional": true, @@ -2063,8 +2076,8 @@ "exceptions": [], "cssName": "--smtc-padding-flyout-default" }, - "paddingCardNestedimage": { - "no": 142, + "paddingCardNestedImage": { + "no": 143, "name": "padding/card/nestedImage", "fst_reference": "padding/content/align/default", "optional": true, @@ -2074,10 +2087,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-card-nestedimage" + "cssName": "--smtc-padding-card-nested-image" }, "paddingCtrlHorizontalDefault": { - "no": 143, + "no": 144, "name": "padding/ctrl/horizontal-default", "fst_reference": "", "optional": false, @@ -2106,8 +2119,8 @@ "exceptions": [], "cssName": "--smtc-padding-ctrl-horizontal-default" }, - "paddingCtrlHorizontalIcononly": { - "no": 144, + "paddingCtrlHorizontalIconOnly": { + "no": 145, "name": "padding/ctrl/horizontal-iconOnly", "fst_reference": "", "optional": false, @@ -2126,10 +2139,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-horizontal-icononly" + "cssName": "--smtc-padding-ctrl-horizontal-icon-only" }, - "paddingCtrlTexttop": { - "no": 145, + "paddingCtrlTextTop": { + "no": 146, "name": "padding/ctrl/textTop", "fst_reference": "", "optional": false, @@ -2162,10 +2175,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-texttop" + "cssName": "--smtc-padding-ctrl-text-top" }, - "paddingCtrlTextbottom": { - "no": 146, + "paddingCtrlTextBottom": { + "no": 147, "name": "padding/ctrl/textBottom", "fst_reference": "padding/ctrl/textTop", "optional": true, @@ -2198,10 +2211,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-textbottom" + "cssName": "--smtc-padding-ctrl-text-bottom" }, - "paddingCtrlTextside": { - "no": 147, + "paddingCtrlTextSide": { + "no": 148, "name": "padding/ctrl/textSide", "fst_reference": "", "optional": false, @@ -2220,10 +2233,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-textside" + "cssName": "--smtc-padding-ctrl-text-side" }, - "paddingCtrlTonestedcontrol": { - "no": 148, + "paddingCtrlToNestedControl": { + "no": 149, "name": "padding/ctrl/toNestedControl", "fst_reference": "", "optional": false, @@ -2233,10 +2246,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-tonestedcontrol" + "cssName": "--smtc-padding-ctrl-to-nested-control" }, "paddingCtrlSmHorizontalDefault": { - "no": 149, + "no": 150, "name": "padding/ctrl-sm/horizontal-default", "fst_reference": "", "optional": false, @@ -2248,8 +2261,8 @@ "exceptions": [], "cssName": "--smtc-padding-ctrl-sm-horizontal-default" }, - "paddingCtrlSmHorizontalIcononly": { - "no": 150, + "paddingCtrlSmHorizontalIconOnly": { + "no": 151, "name": "padding/ctrl-sm/horizontal-iconOnly", "fst_reference": "", "optional": false, @@ -2259,10 +2272,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-sm-horizontal-icononly" + "cssName": "--smtc-padding-ctrl-sm-horizontal-icon-only" }, - "paddingCtrlSmTexttop": { - "no": 151, + "paddingCtrlSmTextTop": { + "no": 152, "name": "padding/ctrl-sm/textTop", "fst_reference": "", "optional": false, @@ -2272,10 +2285,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-sm-texttop" + "cssName": "--smtc-padding-ctrl-sm-text-top" }, - "paddingCtrlSmTextbottom": { - "no": 152, + "paddingCtrlSmTextBottom": { + "no": 153, "name": "padding/ctrl-sm/textBottom", "fst_reference": "padding/ctrl-sm/textTop", "optional": true, @@ -2285,10 +2298,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-sm-textbottom" + "cssName": "--smtc-padding-ctrl-sm-text-bottom" }, - "paddingCtrlSmTonestedcontrol": { - "no": 153, + "paddingCtrlSmToNestedControl": { + "no": 154, "name": "padding/ctrl-sm/toNestedControl", "fst_reference": "", "optional": false, @@ -2298,10 +2311,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-sm-tonestedcontrol" + "cssName": "--smtc-padding-ctrl-sm-to-nested-control" }, "paddingCtrlLgHorizontalDefault": { - "no": 154, + "no": 155, "name": "padding/ctrl-lg/horizontal-default", "fst_reference": "", "optional": false, @@ -2313,8 +2326,8 @@ "exceptions": [], "cssName": "--smtc-padding-ctrl-lg-horizontal-default" }, - "paddingCtrlLgHorizontalIcononly": { - "no": 155, + "paddingCtrlLgHorizontalIconOnly": { + "no": 156, "name": "padding/ctrl-lg/horizontal-iconOnly", "fst_reference": "", "optional": false, @@ -2324,10 +2337,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-lg-horizontal-icononly" + "cssName": "--smtc-padding-ctrl-lg-horizontal-icon-only" }, - "paddingCtrlLgTexttop": { - "no": 156, + "paddingCtrlLgTextTop": { + "no": 157, "name": "padding/ctrl-lg/textTop", "fst_reference": "", "optional": false, @@ -2337,10 +2350,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-lg-texttop" + "cssName": "--smtc-padding-ctrl-lg-text-top" }, - "paddingCtrlLgTextbottom": { - "no": 157, + "paddingCtrlLgTextBottom": { + "no": 158, "name": "padding/ctrl-lg/textBottom", "fst_reference": "padding/ctrl-lg/textTop", "optional": true, @@ -2350,10 +2363,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-lg-textbottom" + "cssName": "--smtc-padding-ctrl-lg-text-bottom" }, - "paddingCtrlLgTonestedcontrol": { - "no": 158, + "paddingCtrlLgToNestedControl": { + "no": 159, "name": "padding/ctrl-lg/toNestedControl", "fst_reference": "", "optional": false, @@ -2363,10 +2376,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-padding-ctrl-lg-tonestedcontrol" + "cssName": "--smtc-padding-ctrl-lg-to-nested-control" }, "gapBetweenContentNone": { - "no": 159, + "no": 160, "name": "gap/between/content/none", "fst_reference": "", "optional": false, @@ -2378,8 +2391,8 @@ "exceptions": [], "cssName": "--smtc-gap-between-content-none" }, - "gapBetweenContentXxsmall": { - "no": 160, + "gapBetweenContentXxSmall": { + "no": 161, "name": "gap/between/content/xxSmall", "fst_reference": "", "optional": false, @@ -2389,10 +2402,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-between-content-xxsmall" + "cssName": "--smtc-gap-between-content-xx-small" }, - "gapBetweenContentXsmall": { - "no": 161, + "gapBetweenContentXSmall": { + "no": 162, "name": "gap/between/content/xSmall", "fst_reference": "", "optional": false, @@ -2402,10 +2415,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-between-content-xsmall" + "cssName": "--smtc-gap-between-content-x-small" }, "gapBetweenContentSmall": { - "no": 162, + "no": 163, "name": "gap/between/content/small", "fst_reference": "", "optional": false, @@ -2418,7 +2431,7 @@ "cssName": "--smtc-gap-between-content-small" }, "gapBetweenCtrlDefault": { - "no": 163, + "no": 164, "name": "gap/between/ctrl/default", "fst_reference": "", "optional": false, @@ -2440,7 +2453,7 @@ "cssName": "--smtc-gap-between-ctrl-default" }, "gapBetweenContentMedium": { - "no": 164, + "no": 165, "name": "gap/between/content/medium", "fst_reference": "", "optional": false, @@ -2453,7 +2466,7 @@ "cssName": "--smtc-gap-between-content-medium" }, "gapBetweenContentLarge": { - "no": 165, + "no": 166, "name": "gap/between/content/large", "fst_reference": "", "optional": false, @@ -2465,8 +2478,8 @@ "exceptions": [], "cssName": "--smtc-gap-between-content-large" }, - "gapBetweenContentXlarge": { - "no": 166, + "gapBetweenContentXLarge": { + "no": 167, "name": "gap/between/content/xLarge", "fst_reference": "", "optional": false, @@ -2476,22 +2489,9 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-between-content-xlarge" + "cssName": "--smtc-gap-between-content-x-large" }, - "gapBetweenCtrlNested": { - "no": 167, - "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" - }, - "gapBetweenContentXxlarge": { + "gapBetweenContentXxLarge": { "no": 168, "name": "gap/between/content/xxLarge", "fst_reference": "", @@ -2502,24 +2502,24 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-between-content-xxlarge" + "cssName": "--smtc-gap-between-content-xx-large" }, - "gapBetweenCtrlLgDefault": { + "gapBetweenCtrlNested": { "no": 169, - "name": "gap/between/ctrl-lg/default", - "fst_reference": "", - "optional": false, + "name": "gap/between/ctrl/nested", + "fst_reference": "padding/ctrl/toNestedControl", + "optional": true, "nullable": false, "description": "", "components": [], "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-between-ctrl-lg-default" + "cssName": "--smtc-gap-between-ctrl-nested" }, - "gapTextSmall": { + "gapBetweenTextSmall": { "no": 170, - "name": "gap/text-small", + "name": "gap/between/text-small", "fst_reference": "gap/between/content/xxSmall", "optional": true, "nullable": false, @@ -2528,20 +2528,20 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-text-small" + "cssName": "--smtc-gap-between-text-small" }, - "gapTextLarge": { + "gapBetweenCtrlLgDefault": { "no": 171, - "name": "gap/text-large", - "fst_reference": "gap/between/content/xSmall", - "optional": true, + "name": "gap/between/ctrl-lg/default", + "fst_reference": "", + "optional": false, "nullable": false, "description": "", - "components": ["MessageBar"], + "components": [], "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-text-large" + "cssName": "--smtc-gap-between-ctrl-lg-default" }, "gapBetweenCtrlLgNested": { "no": 172, @@ -2556,8 +2556,21 @@ "exceptions": [], "cssName": "--smtc-gap-between-ctrl-lg-nested" }, - "gapBetweenCtrlSmDefault": { + "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, @@ -2570,7 +2583,7 @@ "cssName": "--smtc-gap-between-ctrl-sm-default" }, "gapBetweenCtrlSmNested": { - "no": 174, + "no": 175, "name": "gap/between/ctrl-sm/nested", "fst_reference": "padding/ctrl-sm/toNestedControl", "optional": true, @@ -2582,9 +2595,9 @@ "exceptions": [], "cssName": "--smtc-gap-between-ctrl-sm-nested" }, - "gapList": { - "no": 175, - "name": "gap/list", + "gapBetweenListItem": { + "no": 176, + "name": "gap/between/listItem", "fst_reference": "gap/between/content/xxSmall", "optional": true, "nullable": false, @@ -2593,11 +2606,11 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-list" + "cssName": "--smtc-gap-between-list-item" }, - "gapCard": { - "no": 176, - "name": "gap/card", + "gapBetweenCard": { + "no": 177, + "name": "gap/between/card", "fst_reference": "gap/between/content/medium", "optional": true, "nullable": false, @@ -2606,10 +2619,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-card" + "cssName": "--smtc-gap-between-card" }, "gapInsideCtrlDefault": { - "no": 177, + "no": 178, "name": "gap/inside/ctrl/default", "fst_reference": "", "optional": false, @@ -2640,7 +2653,7 @@ "cssName": "--smtc-gap-inside-ctrl-default" }, "gapInsideCtrlSmDefault": { - "no": 178, + "no": 179, "name": "gap/inside/ctrl-sm/default", "fst_reference": "", "optional": false, @@ -2652,8 +2665,8 @@ "exceptions": [], "cssName": "--smtc-gap-inside-ctrl-sm-default" }, - "gapInsideCtrlSmTosecondaryicon": { - "no": 179, + "gapInsideCtrlSmToSecondaryIcon": { + "no": 180, "name": "gap/inside/ctrl-sm/toSecondaryIcon", "fst_reference": "", "optional": false, @@ -2663,10 +2676,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-inside-ctrl-sm-tosecondaryicon" + "cssName": "--smtc-gap-inside-ctrl-sm-to-secondary-icon" }, "gapInsideCtrlLgDefault": { - "no": 180, + "no": 181, "name": "gap/inside/ctrl-lg/default", "fst_reference": "", "optional": false, @@ -2678,8 +2691,8 @@ "exceptions": [], "cssName": "--smtc-gap-inside-ctrl-lg-default" }, - "gapInsideCtrlLgTosecondaryicon": { - "no": 181, + "gapInsideCtrlLgToSecondaryIcon": { + "no": 182, "name": "gap/inside/ctrl-lg/toSecondaryIcon", "fst_reference": "", "optional": false, @@ -2689,10 +2702,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-inside-ctrl-lg-tosecondaryicon" + "cssName": "--smtc-gap-inside-ctrl-lg-to-secondary-icon" }, - "gapInsideCtrlTosecondaryicon": { - "no": 182, + "gapInsideCtrlToSecondaryIcon": { + "no": 183, "name": "gap/inside/ctrl/toSecondaryIcon", "fst_reference": "", "optional": false, @@ -2719,10 +2732,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-inside-ctrl-tosecondaryicon" + "cssName": "--smtc-gap-inside-ctrl-to-secondary-icon" }, - "gapInsideCtrlTolabel": { - "no": 183, + "gapInsideCtrlToLabel": { + "no": 184, "name": "gap/inside/ctrl/toLabel", "fst_reference": "", "optional": false, @@ -2732,10 +2745,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-inside-ctrl-tolabel" + "cssName": "--smtc-gap-inside-ctrl-to-label" }, - "gapInsideCtrlSmTolabel": { - "no": 184, + "gapInsideCtrlSmToLabel": { + "no": 185, "name": "gap/inside/ctrl-sm/toLabel", "fst_reference": "", "optional": false, @@ -2745,10 +2758,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-inside-ctrl-sm-tolabel" + "cssName": "--smtc-gap-inside-ctrl-sm-to-label" }, - "gapInsideCtrlLgTolabel": { - "no": 185, + "gapInsideCtrlLgToLabel": { + "no": 186, "name": "gap/inside/ctrl-lg/toLabel", "fst_reference": "", "optional": false, @@ -2758,10 +2771,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-gap-inside-ctrl-lg-tolabel" + "cssName": "--smtc-gap-inside-ctrl-lg-to-label" }, "cornerCircular": { - "no": 186, + "no": 187, "name": "corner/circular", "fst_reference": "", "optional": false, @@ -2773,8 +2786,8 @@ "exceptions": [], "cssName": "--smtc-corner-circular" }, - "strokewidthDefault": { - "no": 187, + "strokeWidthDefault": { + "no": 188, "name": "strokeWidth/default", "fst_reference": "", "optional": false, @@ -2806,10 +2819,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-strokewidth-default" + "cssName": "--smtc-stroke-width-default" }, - "strokewidthDividerDefault": { - "no": 188, + "strokeWidthDividerDefault": { + "no": 189, "name": "strokeWidth/divider/default", "fst_reference": "strokeWidth/default", "optional": true, @@ -2819,10 +2832,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-strokewidth-divider-default" + "cssName": "--smtc-stroke-width-divider-default" }, - "strokewidthDividerStrong": { - "no": 189, + "strokeWidthDividerStrong": { + "no": 190, "name": "strokeWidth/divider/strong", "fst_reference": "strokeWidth/default", "optional": true, @@ -2832,10 +2845,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-strokewidth-divider-strong" + "cssName": "--smtc-stroke-width-divider-strong" }, - "strokewidthCtrlOutlineRest": { - "no": 190, + "strokeWidthCtrlOutlineRest": { + "no": 191, "name": "strokeWidth/ctrl/outline/rest", "fst_reference": "strokeWidth/default", "optional": true, @@ -2853,10 +2866,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-strokewidth-ctrl-outline-rest" + "cssName": "--smtc-stroke-width-ctrl-outline-rest" }, - "strokewidthCtrlOutlineHover": { - "no": 191, + "strokeWidthCtrlOutlineHover": { + "no": 192, "name": "strokeWidth/ctrl/outline/hover", "fst_reference": "strokeWidth/default", "optional": true, @@ -2866,10 +2879,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-strokewidth-ctrl-outline-hover" + "cssName": "--smtc-stroke-width-ctrl-outline-hover" }, - "strokewidthCtrlOutlinePressed": { - "no": 192, + "strokeWidthCtrlOutlinePressed": { + "no": 193, "name": "strokeWidth/ctrl/outline/pressed", "fst_reference": "strokeWidth/default", "optional": true, @@ -2879,10 +2892,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-strokewidth-ctrl-outline-pressed" + "cssName": "--smtc-stroke-width-ctrl-outline-pressed" }, - "strokewidthCtrlOutlineSelected": { - "no": 193, + "strokeWidthCtrlOutlineSelected": { + "no": 194, "name": "strokeWidth/ctrl/outline/selected", "fst_reference": "strokeWidth/default", "optional": true, @@ -2892,10 +2905,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-strokewidth-ctrl-outline-selected" + "cssName": "--smtc-stroke-width-ctrl-outline-selected" }, - "strokewidthWindowDefault": { - "no": 194, + "strokeWidthWindowDefault": { + "no": 195, "name": "strokeWidth/window/default", "fst_reference": "strokeWidth/default", "optional": true, @@ -2905,10 +2918,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-strokewidth-window-default" + "cssName": "--smtc-stroke-width-window-default" }, "backgroundToolbar": { - "no": 195, + "no": 196, "name": "background/toolbar", "fst_reference": "background/card/onPrimary/default/rest", "optional": true, @@ -2921,7 +2934,7 @@ "cssName": "--smtc-background-toolbar" }, "backgroundSmoke": { - "no": 196, + "no": 197, "name": "background/smoke", "fst_reference": "", "optional": false, @@ -2934,7 +2947,7 @@ "cssName": "--smtc-background-smoke" }, "strokeLayer": { - "no": 197, + "no": 198, "name": "stroke/layer", "fst_reference": "NULL/color", "optional": false, @@ -2947,7 +2960,7 @@ "cssName": "--smtc-stroke-layer" }, "strokeImage": { - "no": 198, + "no": 199, "name": "stroke/image", "fst_reference": "NULL/color", "optional": false, @@ -2960,7 +2973,7 @@ "cssName": "--smtc-stroke-image" }, "strokeToolbar": { - "no": 199, + "no": 200, "name": "stroke/toolbar", "fst_reference": "stroke/card/onPrimary/rest", "optional": true, @@ -2973,7 +2986,7 @@ "cssName": "--smtc-stroke-toolbar" }, "strokeFlyout": { - "no": 200, + "no": 201, "name": "stroke/flyout", "fst_reference": "NULL/color", "optional": false, @@ -2985,8 +2998,8 @@ "exceptions": [], "cssName": "--smtc-stroke-flyout" }, - "strokeCtrlOnbrandRest": { - "no": 201, + "strokeCtrlOnBrandRest": { + "no": 202, "name": "stroke/ctrl/onBrand/rest", "fst_reference": "NULL/color", "optional": false, @@ -2996,10 +3009,10 @@ "contrast": "", "fallback": "NULL/color", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onbrand-rest" + "cssName": "--smtc-stroke-ctrl-on-brand-rest" }, - "strokeCtrlOnbrandHover": { - "no": 202, + "strokeCtrlOnBrandHover": { + "no": 203, "name": "stroke/ctrl/onBrand/hover", "fst_reference": "NULL/color", "optional": false, @@ -3009,10 +3022,10 @@ "contrast": "", "fallback": "NULL/color", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onbrand-hover" + "cssName": "--smtc-stroke-ctrl-on-brand-hover" }, - "strokeCtrlOnbrandPressed": { - "no": 203, + "strokeCtrlOnBrandPressed": { + "no": 204, "name": "stroke/ctrl/onBrand/pressed", "fst_reference": "NULL/color", "optional": false, @@ -3022,10 +3035,10 @@ "contrast": "", "fallback": "NULL/color", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onbrand-pressed" + "cssName": "--smtc-stroke-ctrl-on-brand-pressed" }, - "strokeCtrlOnbrandDisabled": { - "no": 204, + "strokeCtrlOnBrandDisabled": { + "no": 205, "name": "stroke/ctrl/onBrand/disabled", "fst_reference": "NULL/color", "optional": false, @@ -3035,10 +3048,10 @@ "contrast": "", "fallback": "NULL/color", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onbrand-disabled" + "cssName": "--smtc-stroke-ctrl-on-brand-disabled" }, - "strokeCtrlOnbrandRestStop2": { - "no": 205, + "strokeCtrlOnBrandRestStop2": { + "no": 206, "name": "stroke/ctrl/onBrand/rest(stop2)", "fst_reference": "stroke/ctrl/onBrand/rest", "optional": true, @@ -3048,10 +3061,10 @@ "contrast": "", "fallback": "stroke/ctrl/onBrand/rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onbrand-reststop2" + "cssName": "--smtc-stroke-ctrl-on-brand-rest-stop2" }, - "strokeCtrlOnbrandHoverStop2": { - "no": 206, + "strokeCtrlOnBrandHoverStop2": { + "no": 207, "name": "stroke/ctrl/onBrand/hover(stop2)", "fst_reference": "stroke/ctrl/onBrand/hover", "optional": true, @@ -3061,10 +3074,10 @@ "contrast": "", "fallback": "stroke/ctrl/onBrand/hover", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onbrand-hoverstop2" + "cssName": "--smtc-stroke-ctrl-on-brand-hover-stop2" }, - "strokeCtrlOnbrandPressedStop2": { - "no": 207, + "strokeCtrlOnBrandPressedStop2": { + "no": 208, "name": "stroke/ctrl/onBrand/pressed(stop2)", "fst_reference": "stroke/ctrl/onBrand/pressed", "optional": true, @@ -3074,10 +3087,10 @@ "contrast": "", "fallback": "stroke/ctrl/onBrand/pressed", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onbrand-pressedstop2" + "cssName": "--smtc-stroke-ctrl-on-brand-pressed-stop2" }, - "strokeCtrlOnbrandDisabledStop2": { - "no": 208, + "strokeCtrlOnBrandDisabledStop2": { + "no": 209, "name": "stroke/ctrl/onBrand/disabled(stop2)", "fst_reference": "stroke/ctrl/onBrand/disabled", "optional": true, @@ -3087,10 +3100,10 @@ "contrast": "", "fallback": "stroke/ctrl/onBrand/disabled", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onbrand-disabledstop2" + "cssName": "--smtc-stroke-ctrl-on-brand-disabled-stop2" }, - "strokeCtrlOnneutralRest": { - "no": 209, + "strokeCtrlOnNeutralRest": { + "no": 210, "name": "stroke/ctrl/onNeutral/rest", "fst_reference": "NULL/color", "optional": false, @@ -3100,10 +3113,10 @@ "contrast": "", "fallback": "Neutral/Stroke/1/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onneutral-rest" + "cssName": "--smtc-stroke-ctrl-on-neutral-rest" }, - "strokeCtrlOnneutralHover": { - "no": 210, + "strokeCtrlOnNeutralHover": { + "no": 211, "name": "stroke/ctrl/onNeutral/hover", "fst_reference": "NULL/color", "optional": false, @@ -3113,10 +3126,10 @@ "contrast": "", "fallback": "Neutral/Stroke/1/Hover", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onneutral-hover" + "cssName": "--smtc-stroke-ctrl-on-neutral-hover" }, - "strokeCtrlOnneutralPressed": { - "no": 211, + "strokeCtrlOnNeutralPressed": { + "no": 212, "name": "stroke/ctrl/onNeutral/pressed", "fst_reference": "NULL/color", "optional": false, @@ -3126,10 +3139,10 @@ "contrast": "", "fallback": "Neutral/Stroke/1/Pressed", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onneutral-pressed" + "cssName": "--smtc-stroke-ctrl-on-neutral-pressed" }, - "strokeCtrlOnneutralDisabled": { - "no": 212, + "strokeCtrlOnNeutralDisabled": { + "no": 213, "name": "stroke/ctrl/onNeutral/disabled", "fst_reference": "NULL/color", "optional": false, @@ -3139,10 +3152,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onneutral-disabled" + "cssName": "--smtc-stroke-ctrl-on-neutral-disabled" }, - "strokeCtrlOnneutralRestStop2": { - "no": 213, + "strokeCtrlOnNeutralRestStop2": { + "no": 214, "name": "stroke/ctrl/onNeutral/rest(stop2)", "fst_reference": "stroke/ctrl/onNeutral/rest", "optional": true, @@ -3152,10 +3165,10 @@ "contrast": "", "fallback": "stroke/ctrl/onNeutral/rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onneutral-reststop2" + "cssName": "--smtc-stroke-ctrl-on-neutral-rest-stop2" }, - "strokeCtrlOnneutralHoverStop2": { - "no": 214, + "strokeCtrlOnNeutralHoverStop2": { + "no": 215, "name": "stroke/ctrl/onNeutral/hover(stop2)", "fst_reference": "stroke/ctrl/onNeutral/pressed", "optional": true, @@ -3165,10 +3178,10 @@ "contrast": "", "fallback": "stroke/ctrl/onNeutral/hover", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onneutral-hoverstop2" + "cssName": "--smtc-stroke-ctrl-on-neutral-hover-stop2" }, - "strokeCtrlOnneutralPressedStop2": { - "no": 215, + "strokeCtrlOnNeutralPressedStop2": { + "no": 216, "name": "stroke/ctrl/onNeutral/pressed(stop2)", "fst_reference": "stroke/ctrl/onNeutral/hover", "optional": true, @@ -3178,10 +3191,10 @@ "contrast": "", "fallback": "stroke/ctrl/onNeutral/pressed", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onneutral-pressedstop2" + "cssName": "--smtc-stroke-ctrl-on-neutral-pressed-stop2" }, - "strokeCtrlOnneutralDisabledStop2": { - "no": 216, + "strokeCtrlOnNeutralDisabledStop2": { + "no": 217, "name": "stroke/ctrl/onNeutral/disabled(stop2)", "fst_reference": "stroke/ctrl/onNeutral/disabled", "optional": true, @@ -3191,10 +3204,10 @@ "contrast": "", "fallback": "stroke/ctrl/onNeutral/disabled", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onneutral-disabledstop2" + "cssName": "--smtc-stroke-ctrl-on-neutral-disabled-stop2" }, - "strokeCtrlOnoutlineRest": { - "no": 217, + "strokeCtrlOnOutlineRest": { + "no": 218, "name": "stroke/ctrl/onOutline/rest", "fst_reference": "", "optional": false, @@ -3204,10 +3217,10 @@ "contrast": "", "fallback": "Neutral/Stroke/1/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onoutline-rest" + "cssName": "--smtc-stroke-ctrl-on-outline-rest" }, - "strokeCtrlOnoutlineHover": { - "no": 218, + "strokeCtrlOnOutlineHover": { + "no": 219, "name": "stroke/ctrl/onOutline/hover", "fst_reference": "", "optional": false, @@ -3217,10 +3230,10 @@ "contrast": "", "fallback": "Neutral/Stroke/1/Hover", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onoutline-hover" + "cssName": "--smtc-stroke-ctrl-on-outline-hover" }, - "strokeCtrlOnoutlinePressed": { - "no": 219, + "strokeCtrlOnOutlinePressed": { + "no": 220, "name": "stroke/ctrl/onOutline/pressed", "fst_reference": "", "optional": false, @@ -3230,10 +3243,10 @@ "contrast": "", "fallback": "Neutral/Stroke/1/Pressed", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onoutline-pressed" + "cssName": "--smtc-stroke-ctrl-on-outline-pressed" }, - "strokeCtrlOnoutlineDisabled": { - "no": 220, + "strokeCtrlOnOutlineDisabled": { + "no": 221, "name": "stroke/ctrl/onOutline/disabled", "fst_reference": "", "optional": false, @@ -3243,10 +3256,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onoutline-disabled" + "cssName": "--smtc-stroke-ctrl-on-outline-disabled" }, - "strokeCtrlOnoutlineRestStop2": { - "no": 221, + "strokeCtrlOnOutlineRestStop2": { + "no": 222, "name": "stroke/ctrl/onOutline/rest(stop2)", "fst_reference": "stroke/ctrl/onOutline/rest", "optional": true, @@ -3256,10 +3269,10 @@ "contrast": "", "fallback": "stroke/ctrl/onOutline/rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onoutline-reststop2" + "cssName": "--smtc-stroke-ctrl-on-outline-rest-stop2" }, - "strokeCtrlOnoutlineHoverStop2": { - "no": 222, + "strokeCtrlOnOutlineHoverStop2": { + "no": 223, "name": "stroke/ctrl/onOutline/hover(stop2)", "fst_reference": "stroke/ctrl/onOutline/hover", "optional": true, @@ -3269,10 +3282,10 @@ "contrast": "", "fallback": "stroke/ctrl/onOutline/hover", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onoutline-hoverstop2" + "cssName": "--smtc-stroke-ctrl-on-outline-hover-stop2" }, - "strokeCtrlOnoutlinePressedStop2": { - "no": 223, + "strokeCtrlOnOutlinePressedStop2": { + "no": 224, "name": "stroke/ctrl/onOutline/pressed(stop2)", "fst_reference": "stroke/ctrl/onOutline/pressed", "optional": true, @@ -3282,10 +3295,10 @@ "contrast": "", "fallback": "stroke/ctrl/onOutline/pressed", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onoutline-pressedstop2" + "cssName": "--smtc-stroke-ctrl-on-outline-pressed-stop2" }, - "strokeCtrlOnoutlineDisabledStop2": { - "no": 224, + "strokeCtrlOnOutlineDisabledStop2": { + "no": 225, "name": "stroke/ctrl/onOutline/disabled(stop2)", "fst_reference": "stroke/ctrl/onOutline/disabled", "optional": true, @@ -3295,10 +3308,10 @@ "contrast": "", "fallback": "stroke/ctrl/divider/onOutline", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onoutline-disabledstop2" + "cssName": "--smtc-stroke-ctrl-on-outline-disabled-stop2" }, - "strokeCtrlOnsubtleRest": { - "no": 225, + "strokeCtrlOnSubtleRest": { + "no": 226, "name": "stroke/ctrl/onSubtle/rest", "fst_reference": "NULL/color", "optional": false, @@ -3316,10 +3329,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onsubtle-rest" + "cssName": "--smtc-stroke-ctrl-on-subtle-rest" }, - "strokeCtrlOnsubtleHover": { - "no": 226, + "strokeCtrlOnSubtleHover": { + "no": 227, "name": "stroke/ctrl/onSubtle/hover", "fst_reference": "NULL/color", "optional": false, @@ -3329,10 +3342,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onsubtle-hover" + "cssName": "--smtc-stroke-ctrl-on-subtle-hover" }, - "strokeCtrlOnsubtlePressed": { - "no": 227, + "strokeCtrlOnSubtlePressed": { + "no": 228, "name": "stroke/ctrl/onSubtle/pressed", "fst_reference": "NULL/color", "optional": false, @@ -3342,10 +3355,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onsubtle-pressed" + "cssName": "--smtc-stroke-ctrl-on-subtle-pressed" }, - "strokeCtrlOnsubtleDisabled": { - "no": 228, + "strokeCtrlOnSubtleDisabled": { + "no": 229, "name": "stroke/ctrl/onSubtle/disabled", "fst_reference": "NULL/color", "optional": false, @@ -3355,10 +3368,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onsubtle-disabled" + "cssName": "--smtc-stroke-ctrl-on-subtle-disabled" }, - "strokeCtrlOnsubtleHoversplit": { - "no": 229, + "strokeCtrlOnSubtleHoverSplit": { + "no": 230, "name": "stroke/ctrl/onSubtle/hoverSplit", "fst_reference": "NULL/color", "optional": false, @@ -3368,10 +3381,10 @@ "contrast": "", "fallback": "Neutral/Background/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onsubtle-hoversplit" + "cssName": "--smtc-stroke-ctrl-on-subtle-hover-split" }, - "strokeCtrlOnactivebrandRest": { - "no": 230, + "strokeCtrlOnActiveBrandRest": { + "no": 231, "name": "stroke/ctrl/onActiveBrand/rest", "fst_reference": "stroke/ctrl/onBrand/rest", "optional": true, @@ -3381,10 +3394,10 @@ "contrast": "", "fallback": "stroke/ctrl/onBrand/rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onactivebrand-rest" + "cssName": "--smtc-stroke-ctrl-on-active-brand-rest" }, - "strokeCtrlDividerOnbrand": { - "no": 231, + "strokeCtrlDividerOnBrand": { + "no": 232, "name": "stroke/ctrl/divider/onBrand", "fst_reference": "", "optional": false, @@ -3394,10 +3407,10 @@ "contrast": "", "fallback": "Neutral/Stroke/onBrand/2/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-divider-onbrand" + "cssName": "--smtc-stroke-ctrl-divider-on-brand" }, - "strokeCtrlDividerOnbrandDisabled": { - "no": 232, + "strokeCtrlDividerOnBrandDisabled": { + "no": 233, "name": "stroke/ctrl/divider/onBrand-disabled", "fst_reference": "stroke/ctrl/divider/onBrand", "optional": true, @@ -3407,10 +3420,36 @@ "contrast": "", "fallback": "Neutral/Stroke/onBrand/2/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-divider-onbrand-disabled" + "cssName": "--smtc-stroke-ctrl-divider-on-brand-disabled" }, - "strokeCtrlDividerOnneutral": { - "no": 233, + "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, @@ -3420,10 +3459,10 @@ "contrast": "", "fallback": "Neutral/Stroke/1/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-divider-onneutral" + "cssName": "--smtc-stroke-ctrl-divider-on-neutral" }, - "strokeCtrlDividerOnneutralDisabled": { - "no": 234, + "strokeCtrlDividerOnNeutralDisabled": { + "no": 237, "name": "stroke/ctrl/divider/onNeutral-disabled", "fst_reference": "stroke/ctrl/divider/onNeutral", "optional": true, @@ -3433,10 +3472,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-divider-onneutral-disabled" + "cssName": "--smtc-stroke-ctrl-divider-on-neutral-disabled" }, - "strokeCtrlDividerOnoutline": { - "no": 235, + "strokeCtrlDividerOnOutline": { + "no": 238, "name": "stroke/ctrl/divider/onOutline", "fst_reference": "", "optional": false, @@ -3446,10 +3485,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-divider-onoutline" + "cssName": "--smtc-stroke-ctrl-divider-on-outline" }, - "strokeCtrlDividerOnoutlineDisabled": { - "no": 236, + "strokeCtrlDividerOnOutlineDisabled": { + "no": 239, "name": "stroke/ctrl/divider/onOutline-disabled", "fst_reference": "stroke/ctrl/divider/onOutline", "optional": true, @@ -3459,10 +3498,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-divider-onoutline-disabled" + "cssName": "--smtc-stroke-ctrl-divider-on-outline-disabled" }, - "strokeCtrlDividerOnsubtle": { - "no": 237, + "strokeCtrlDividerOnSubtle": { + "no": 240, "name": "stroke/ctrl/divider/onSubtle", "fst_reference": "NULL/color", "optional": false, @@ -3472,10 +3511,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-divider-onsubtle" + "cssName": "--smtc-stroke-ctrl-divider-on-subtle" }, - "strokeCtrlDividerOnsubtleDisabled": { - "no": 238, + "strokeCtrlDividerOnSubtleDisabled": { + "no": 241, "name": "stroke/ctrl/divider/onSubtle-disabled", "fst_reference": "NULL/color", "optional": false, @@ -3485,36 +3524,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-divider-onsubtle-disabled" - }, - "strokeCtrlDividerOnactivebrand": { - "no": 239, - "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-onactivebrand" - }, - "strokeCtrlDividerOnactivebrandDisabled": { - "no": 240, - "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-onactivebrand-disabled" + "cssName": "--smtc-stroke-ctrl-divider-on-subtle-disabled" }, - "strokeCtrlOnactivebrandHover": { - "no": 241, + "strokeCtrlOnActiveBrandHover": { + "no": 242, "name": "stroke/ctrl/onActiveBrand/hover", "fst_reference": "stroke/ctrl/onBrand/hover", "optional": true, @@ -3524,10 +3537,10 @@ "contrast": "", "fallback": "stroke/ctrl/onBrand/hover", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onactivebrand-hover" + "cssName": "--smtc-stroke-ctrl-on-active-brand-hover" }, - "strokeCtrlOnactivebrandPressed": { - "no": 242, + "strokeCtrlOnActiveBrandPressed": { + "no": 243, "name": "stroke/ctrl/onActiveBrand/pressed", "fst_reference": "stroke/ctrl/onBrand/pressed", "optional": true, @@ -3537,10 +3550,10 @@ "contrast": "", "fallback": "stroke/ctrl/onBrand/pressed", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onactivebrand-pressed" + "cssName": "--smtc-stroke-ctrl-on-active-brand-pressed" }, - "strokeCtrlOnactivebrandDisabled": { - "no": 243, + "strokeCtrlOnActiveBrandDisabled": { + "no": 244, "name": "stroke/ctrl/onActiveBrand/disabled", "fst_reference": "stroke/ctrl/onBrand/disabled", "optional": true, @@ -3550,10 +3563,10 @@ "contrast": "", "fallback": "stroke/ctrl/onBrand/disabled", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onactivebrand-disabled" + "cssName": "--smtc-stroke-ctrl-on-active-brand-disabled" }, - "strokeCtrlOnactivebrandRestStop2": { - "no": 244, + "strokeCtrlOnActiveBrandRestStop2": { + "no": 245, "name": "stroke/ctrl/onActiveBrand/rest(stop2)", "fst_reference": "stroke/ctrl/onBrand/rest", "optional": true, @@ -3563,10 +3576,10 @@ "contrast": "", "fallback": "stroke/ctrl/onActiveBrand/rest", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onactivebrand-reststop2" + "cssName": "--smtc-stroke-ctrl-on-active-brand-rest-stop2" }, - "strokeCtrlOnactivebrandHoverStop2": { - "no": 245, + "strokeCtrlOnActiveBrandHoverStop2": { + "no": 246, "name": "stroke/ctrl/onActiveBrand/hover(stop2)", "fst_reference": "stroke/ctrl/onBrand/rest", "optional": true, @@ -3576,10 +3589,10 @@ "contrast": "", "fallback": "stroke/ctrl/onActiveBrand/hover", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onactivebrand-hoverstop2" + "cssName": "--smtc-stroke-ctrl-on-active-brand-hover-stop2" }, - "strokeCtrlOnactivebrandPressedStop2": { - "no": 246, + "strokeCtrlOnActiveBrandPressedStop2": { + "no": 247, "name": "stroke/ctrl/onActiveBrand/pressed(stop2)", "fst_reference": "stroke/ctrl/onBrand/pressed", "optional": true, @@ -3589,10 +3602,10 @@ "contrast": "", "fallback": "stroke/ctrl/onActiveBrand/pressed", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onactivebrand-pressedstop2" + "cssName": "--smtc-stroke-ctrl-on-active-brand-pressed-stop2" }, - "strokeCtrlOnactivebrandDisabledStop2": { - "no": 247, + "strokeCtrlOnActiveBrandDisabledStop2": { + "no": 248, "name": "stroke/ctrl/onActiveBrand/disabled(stop2)", "fst_reference": "stroke/ctrl/onBrand/disabled", "optional": true, @@ -3602,10 +3615,10 @@ "contrast": "", "fallback": "stroke/ctrl/onActiveBrand/disabled", "exceptions": [], - "cssName": "--smtc-stroke-ctrl-onactivebrand-disabledstop2" + "cssName": "--smtc-stroke-ctrl-on-active-brand-disabled-stop2" }, "strokeDividerDefault": { - "no": 248, + "no": 249, "name": "stroke/divider/default", "fst_reference": "", "optional": false, @@ -3618,7 +3631,7 @@ "cssName": "--smtc-stroke-divider-default" }, "strokeDividerSubtle": { - "no": 249, + "no": 250, "name": "stroke/divider/subtle", "fst_reference": "stroke/divider/default", "optional": true, @@ -3631,7 +3644,7 @@ "cssName": "--smtc-stroke-divider-subtle" }, "strokeDividerStrong": { - "no": 250, + "no": 251, "name": "stroke/divider/strong", "fst_reference": "stroke/divider/default", "optional": true, @@ -3644,7 +3657,7 @@ "cssName": "--smtc-stroke-divider-strong" }, "strokeDividerBrand": { - "no": 251, + "no": 252, "name": "stroke/divider/brand", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -3657,7 +3670,7 @@ "cssName": "--smtc-stroke-divider-brand" }, "strokeCardSelected": { - "no": 252, + "no": 253, "name": "stroke/card/selected", "fst_reference": "NULL/color", "optional": false, @@ -3669,8 +3682,8 @@ "exceptions": [], "cssName": "--smtc-stroke-card-selected" }, - "strokeCardOnprimaryRest": { - "no": 253, + "strokeCardOnPrimaryRest": { + "no": 254, "name": "stroke/card/onPrimary/rest", "fst_reference": "NULL/color", "optional": false, @@ -3680,10 +3693,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-stroke-card-onprimary-rest" + "cssName": "--smtc-stroke-card-on-primary-rest" }, - "strokeCardOnprimaryHover": { - "no": 254, + "strokeCardOnPrimaryHover": { + "no": 255, "name": "stroke/card/onPrimary/hover", "fst_reference": "NULL/color", "optional": false, @@ -3693,10 +3706,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Interactive/Rest", "exceptions": [], - "cssName": "--smtc-stroke-card-onprimary-hover" + "cssName": "--smtc-stroke-card-on-primary-hover" }, - "strokeCardOnprimaryPressed": { - "no": 255, + "strokeCardOnPrimaryPressed": { + "no": 256, "name": "stroke/card/onPrimary/pressed", "fst_reference": "NULL/color", "optional": false, @@ -3706,10 +3719,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Interactive/Rest", "exceptions": [], - "cssName": "--smtc-stroke-card-onprimary-pressed" + "cssName": "--smtc-stroke-card-on-primary-pressed" }, - "strokeCardOnprimaryDisabled": { - "no": 256, + "strokeCardOnPrimaryDisabled": { + "no": 257, "name": "stroke/card/onPrimary/disabled", "fst_reference": "NULL/color", "optional": false, @@ -3719,10 +3732,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Interactive/Rest", "exceptions": [], - "cssName": "--smtc-stroke-card-onprimary-disabled" + "cssName": "--smtc-stroke-card-on-primary-disabled" }, - "strokeCardOnsecondaryRest": { - "no": 257, + "strokeCardOnSecondaryRest": { + "no": 258, "name": "stroke/card/onSecondary/rest", "fst_reference": "NULL/color", "optional": false, @@ -3732,10 +3745,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-stroke-card-onsecondary-rest" + "cssName": "--smtc-stroke-card-on-secondary-rest" }, - "strokeCardOnsecondaryHover": { - "no": 258, + "strokeCardOnSecondaryHover": { + "no": 259, "name": "stroke/card/onSecondary/hover", "fst_reference": "NULL/color", "optional": false, @@ -3745,10 +3758,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Interactive/Rest", "exceptions": [], - "cssName": "--smtc-stroke-card-onsecondary-hover" + "cssName": "--smtc-stroke-card-on-secondary-hover" }, - "strokeCardOnsecondaryPressed": { - "no": 259, + "strokeCardOnSecondaryPressed": { + "no": 260, "name": "stroke/card/onSecondary/pressed", "fst_reference": "NULL/color", "optional": false, @@ -3758,10 +3771,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Interactive/Rest", "exceptions": [], - "cssName": "--smtc-stroke-card-onsecondary-pressed" + "cssName": "--smtc-stroke-card-on-secondary-pressed" }, - "strokeCardOnsecondaryDisabled": { - "no": 260, + "strokeCardOnSecondaryDisabled": { + "no": 261, "name": "stroke/card/onSecondary/disabled", "fst_reference": "NULL/color", "optional": false, @@ -3771,10 +3784,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Interactive/Rest", "exceptions": [], - "cssName": "--smtc-stroke-card-onsecondary-disabled" + "cssName": "--smtc-stroke-card-on-secondary-disabled" }, "strokeWindowActive": { - "no": 261, + "no": 262, "name": "stroke/window/active", "fst_reference": "", "optional": false, @@ -3787,7 +3800,7 @@ "cssName": "--smtc-stroke-window-active" }, "strokeWindowInactive": { - "no": 262, + "no": 263, "name": "stroke/window/inactive", "fst_reference": "stroke/window/active", "optional": true, @@ -3800,7 +3813,7 @@ "cssName": "--smtc-stroke-window-inactive" }, "backgroundWindowPrimarySolid": { - "no": 263, + "no": 264, "name": "background/window/primary/(solid)", "fst_reference": "", "optional": false, @@ -3812,8 +3825,8 @@ "exceptions": [], "cssName": "--smtc-background-window-primary-solid" }, - "backgroundWindowPrimaryColorblend": { - "no": 264, + "backgroundWindowPrimaryColorBlend": { + "no": 265, "name": "background/window/primary/(colorBlend)", "fst_reference": "", "optional": false, @@ -3823,10 +3836,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-background-window-primary-colorblend" + "cssName": "--smtc-background-window-primary-color-blend" }, - "backgroundWindowPrimaryLumblend": { - "no": 265, + "backgroundWindowPrimaryLumBlend": { + "no": 266, "name": "background/window/primary/(lumBlend)", "fst_reference": "", "optional": false, @@ -3836,10 +3849,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-background-window-primary-lumblend" + "cssName": "--smtc-background-window-primary-lum-blend" }, "backgroundWindowSecondarySolid": { - "no": 266, + "no": 267, "name": "background/window/secondary/(solid)", "fst_reference": "", "optional": false, @@ -3851,8 +3864,8 @@ "exceptions": [], "cssName": "--smtc-background-window-secondary-solid" }, - "backgroundWindowSecondaryColorblend": { - "no": 267, + "backgroundWindowSecondaryColorBlend": { + "no": 268, "name": "background/window/secondary/(colorBlend)", "fst_reference": "", "optional": false, @@ -3862,10 +3875,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-background-window-secondary-colorblend" + "cssName": "--smtc-background-window-secondary-color-blend" }, - "backgroundWindowSecondaryLumblend": { - "no": 268, + "backgroundWindowSecondaryLumBlend": { + "no": 269, "name": "background/window/secondary/(lumBlend)", "fst_reference": "", "optional": false, @@ -3875,10 +3888,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-background-window-secondary-lumblend" + "cssName": "--smtc-background-window-secondary-lum-blend" }, - "backgroundWindowTabbandColorblend": { - "no": 269, + "backgroundWindowTabBandColorBlend": { + "no": 270, "name": "background/window/tabBand/(colorBlend)", "fst_reference": "", "optional": false, @@ -3888,10 +3901,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-background-window-tabband-colorblend" + "cssName": "--smtc-background-window-tab-band-color-blend" }, - "backgroundWindowTabbandLumblend": { - "no": 270, + "backgroundWindowTabBandLumBlend": { + "no": 271, "name": "background/window/tabBand/(lumBlend)", "fst_reference": "", "optional": false, @@ -3901,10 +3914,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-background-window-tabband-lumblend" + "cssName": "--smtc-background-window-tab-band-lum-blend" }, - "backgroundWindowTabbandSolid": { - "no": 271, + "backgroundWindowTabBandSolid": { + "no": 272, "name": "background/window/tabBand/(solid)", "fst_reference": "", "optional": false, @@ -3914,10 +3927,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-background-window-tabband-solid" + "cssName": "--smtc-background-window-tab-band-solid" }, - "backgroundWebpagePrimary": { - "no": 272, + "backgroundWebPagePrimary": { + "no": 273, "name": "background/webPage/primary", "fst_reference": "", "optional": false, @@ -3927,10 +3940,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-background-webpage-primary" + "cssName": "--smtc-background-web-page-primary" }, - "backgroundWebpageSecondary": { - "no": 273, + "backgroundWebPageSecondary": { + "no": 274, "name": "background/webPage/secondary", "fst_reference": "", "optional": false, @@ -3940,10 +3953,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-background-webpage-secondary" + "cssName": "--smtc-background-web-page-secondary" }, "backgroundLayerPrimarySolid": { - "no": 274, + "no": 275, "name": "background/layer/primary(solid)", "fst_reference": "", "optional": false, @@ -3953,10 +3966,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-background-layer-primarysolid" + "cssName": "--smtc-background-layer-primary-solid" }, "backgroundLayerPrimaryStop1": { - "no": 275, + "no": 276, "name": "background/layer/primary(stop1)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -3966,10 +3979,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-background-layer-primarystop1" + "cssName": "--smtc-background-layer-primary-stop1" }, "backgroundLayerPrimaryStop2": { - "no": 276, + "no": 277, "name": "background/layer/primary(stop2)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -3979,10 +3992,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-background-layer-primarystop2" + "cssName": "--smtc-background-layer-primary-stop2" }, "backgroundLayerPrimaryStop3": { - "no": 277, + "no": 278, "name": "background/layer/primary(stop3)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -3992,10 +4005,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-background-layer-primarystop3" + "cssName": "--smtc-background-layer-primary-stop3" }, "backgroundLayerSecondary": { - "no": 278, + "no": 279, "name": "background/layer/secondary", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -4008,7 +4021,7 @@ "cssName": "--smtc-background-layer-secondary" }, "backgroundLayerTertiary": { - "no": 279, + "no": 280, "name": "background/layer/tertiary", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -4020,8 +4033,8 @@ "exceptions": [], "cssName": "--smtc-background-layer-tertiary" }, - "backgroundCardOnprimaryDefaultRest": { - "no": 280, + "backgroundCardOnPrimaryDefaultRest": { + "no": 281, "name": "background/card/onPrimary/default/rest", "fst_reference": "", "optional": false, @@ -4031,10 +4044,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-background-card-onprimary-default-rest" + "cssName": "--smtc-background-card-on-primary-default-rest" }, - "backgroundCardOnprimaryAltRest": { - "no": 281, + "backgroundCardOnPrimaryAltRest": { + "no": 282, "name": "background/card/onPrimary/alt/rest", "fst_reference": "", "optional": false, @@ -4044,10 +4057,10 @@ "contrast": "", "fallback": "background/card/onPrimary/default/rest", "exceptions": [], - "cssName": "--smtc-background-card-onprimary-alt-rest" + "cssName": "--smtc-background-card-on-primary-alt-rest" }, - "backgroundCardOnprimaryAltHover": { - "no": 282, + "backgroundCardOnPrimaryAltHover": { + "no": 283, "name": "background/card/onPrimary/alt/hover", "fst_reference": "", "optional": false, @@ -4057,10 +4070,10 @@ "contrast": "", "fallback": "background/card/onPrimary/default/hover", "exceptions": [], - "cssName": "--smtc-background-card-onprimary-alt-hover" + "cssName": "--smtc-background-card-on-primary-alt-hover" }, - "backgroundCardOnprimaryAltPressed": { - "no": 283, + "backgroundCardOnPrimaryAltPressed": { + "no": 284, "name": "background/card/onPrimary/alt/pressed", "fst_reference": "", "optional": false, @@ -4070,10 +4083,10 @@ "contrast": "", "fallback": "background/card/onPrimary/default/pressed", "exceptions": [], - "cssName": "--smtc-background-card-onprimary-alt-pressed" + "cssName": "--smtc-background-card-on-primary-alt-pressed" }, - "backgroundCardOnprimaryAltDisabled": { - "no": 284, + "backgroundCardOnPrimaryAltDisabled": { + "no": 285, "name": "background/card/onPrimary/alt/disabled", "fst_reference": "", "optional": false, @@ -4083,10 +4096,10 @@ "contrast": "", "fallback": "background/card/onPrimary/default/pressed", "exceptions": [], - "cssName": "--smtc-background-card-onprimary-alt-disabled" + "cssName": "--smtc-background-card-on-primary-alt-disabled" }, - "backgroundCardOnprimaryDefaultHover": { - "no": 285, + "backgroundCardOnPrimaryDefaultHover": { + "no": 286, "name": "background/card/onPrimary/default/hover", "fst_reference": "", "optional": false, @@ -4096,10 +4109,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Hover", "exceptions": [], - "cssName": "--smtc-background-card-onprimary-default-hover" + "cssName": "--smtc-background-card-on-primary-default-hover" }, - "backgroundCardOnprimaryDefaultPressed": { - "no": 286, + "backgroundCardOnPrimaryDefaultPressed": { + "no": 287, "name": "background/card/onPrimary/default/pressed", "fst_reference": "", "optional": false, @@ -4109,10 +4122,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Pressed", "exceptions": [], - "cssName": "--smtc-background-card-onprimary-default-pressed" + "cssName": "--smtc-background-card-on-primary-default-pressed" }, - "backgroundCardOnprimaryDefaultDisabled": { - "no": 287, + "backgroundCardOnPrimaryDefaultDisabled": { + "no": 288, "name": "background/card/onPrimary/default/disabled", "fst_reference": "", "optional": false, @@ -4122,10 +4135,10 @@ "contrast": "", "fallback": "Neutral/Background/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-background-card-onprimary-default-disabled" + "cssName": "--smtc-background-card-on-primary-default-disabled" }, - "backgroundCardOnprimaryDefaultSelected": { - "no": 288, + "backgroundCardOnPrimaryDefaultSelected": { + "no": 289, "name": "background/card/onPrimary/default/selected", "fst_reference": "background/card/onPrimary/default/rest", "optional": true, @@ -4135,10 +4148,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Selected", "exceptions": [], - "cssName": "--smtc-background-card-onprimary-default-selected" + "cssName": "--smtc-background-card-on-primary-default-selected" }, "backgroundFlyoutSolid": { - "no": 289, + "no": 290, "name": "background/flyout/(solid)", "fst_reference": "", "optional": false, @@ -4151,7 +4164,7 @@ "cssName": "--smtc-background-flyout-solid" }, "backgroundCtrlBrandRest": { - "no": 290, + "no": 291, "name": "background/ctrl/brand/rest", "fst_reference": "", "optional": false, @@ -4164,7 +4177,7 @@ "cssName": "--smtc-background-ctrl-brand-rest" }, "backgroundCtrlBrandHover": { - "no": 291, + "no": 292, "name": "background/ctrl/brand/hover", "fst_reference": "", "optional": false, @@ -4177,7 +4190,7 @@ "cssName": "--smtc-background-ctrl-brand-hover" }, "backgroundCtrlBrandPressed": { - "no": 292, + "no": 293, "name": "background/ctrl/brand/pressed", "fst_reference": "", "optional": false, @@ -4190,7 +4203,7 @@ "cssName": "--smtc-background-ctrl-brand-pressed" }, "backgroundCtrlBrandDisabled": { - "no": 293, + "no": 294, "name": "background/ctrl/brand/disabled", "fst_reference": "", "optional": false, @@ -4202,8 +4215,8 @@ "exceptions": [], "cssName": "--smtc-background-ctrl-brand-disabled" }, - "backgroundCtrlActivebrandRest": { - "no": 294, + "backgroundCtrlActiveBrandRest": { + "no": 295, "name": "background/ctrl/activeBrand/rest", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -4213,10 +4226,10 @@ "contrast": "", "fallback": "background/ctrl/brand/rest", "exceptions": [], - "cssName": "--smtc-background-ctrl-activebrand-rest" + "cssName": "--smtc-background-ctrl-active-brand-rest" }, - "backgroundCtrlActivebrandHover": { - "no": 295, + "backgroundCtrlActiveBrandHover": { + "no": 296, "name": "background/ctrl/activeBrand/hover", "fst_reference": "background/ctrl/brand/hover", "optional": true, @@ -4226,10 +4239,10 @@ "contrast": "", "fallback": "background/ctrl/brand/hover", "exceptions": [], - "cssName": "--smtc-background-ctrl-activebrand-hover" + "cssName": "--smtc-background-ctrl-active-brand-hover" }, - "backgroundCtrlActivebrandPressed": { - "no": 296, + "backgroundCtrlActiveBrandPressed": { + "no": 297, "name": "background/ctrl/activeBrand/pressed", "fst_reference": "background/ctrl/brand/pressed", "optional": true, @@ -4239,10 +4252,10 @@ "contrast": "", "fallback": "background/ctrl/brand/pressed", "exceptions": [], - "cssName": "--smtc-background-ctrl-activebrand-pressed" + "cssName": "--smtc-background-ctrl-active-brand-pressed" }, - "backgroundCtrlActivebrandDisabled": { - "no": 297, + "backgroundCtrlActiveBrandDisabled": { + "no": 298, "name": "background/ctrl/activeBrand/disabled", "fst_reference": "background/ctrl/brand/disabled", "optional": true, @@ -4252,10 +4265,10 @@ "contrast": "", "fallback": "background/ctrl/brand/disabled", "exceptions": [], - "cssName": "--smtc-background-ctrl-activebrand-disabled" + "cssName": "--smtc-background-ctrl-active-brand-disabled" }, "backgroundCtrlNeutralRest": { - "no": 298, + "no": 299, "name": "background/ctrl/neutral/rest", "fst_reference": "", "optional": false, @@ -4268,7 +4281,7 @@ "cssName": "--smtc-background-ctrl-neutral-rest" }, "backgroundCtrlNeutralHover": { - "no": 299, + "no": 300, "name": "background/ctrl/neutral/hover", "fst_reference": "", "optional": false, @@ -4281,7 +4294,7 @@ "cssName": "--smtc-background-ctrl-neutral-hover" }, "backgroundCtrlNeutralPressed": { - "no": 300, + "no": 301, "name": "background/ctrl/neutral/pressed", "fst_reference": "", "optional": false, @@ -4294,7 +4307,7 @@ "cssName": "--smtc-background-ctrl-neutral-pressed" }, "backgroundCtrlNeutralDisabled": { - "no": 301, + "no": 302, "name": "background/ctrl/neutral/disabled", "fst_reference": "", "optional": false, @@ -4307,7 +4320,7 @@ "cssName": "--smtc-background-ctrl-neutral-disabled" }, "backgroundCtrlOutlineRest": { - "no": 302, + "no": 303, "name": "background/ctrl/outline/rest", "fst_reference": "NULL/color", "optional": false, @@ -4320,7 +4333,7 @@ "cssName": "--smtc-background-ctrl-outline-rest" }, "backgroundCtrlOutlineHover": { - "no": 303, + "no": 304, "name": "background/ctrl/outline/hover", "fst_reference": "NULL/color", "optional": false, @@ -4333,7 +4346,7 @@ "cssName": "--smtc-background-ctrl-outline-hover" }, "backgroundCtrlOutlinePressed": { - "no": 304, + "no": 305, "name": "background/ctrl/outline/pressed", "fst_reference": "NULL/color", "optional": false, @@ -4346,7 +4359,7 @@ "cssName": "--smtc-background-ctrl-outline-pressed" }, "backgroundCtrlOutlineDisabled": { - "no": 305, + "no": 306, "name": "background/ctrl/outline/disabled", "fst_reference": "NULL/color", "optional": false, @@ -4359,7 +4372,7 @@ "cssName": "--smtc-background-ctrl-outline-disabled" }, "backgroundCtrlSubtleRest": { - "no": 306, + "no": 307, "name": "background/ctrl/subtle/rest", "fst_reference": "NULL/color", "optional": false, @@ -4379,8 +4392,8 @@ "exceptions": [], "cssName": "--smtc-background-ctrl-subtle-rest" }, - "backgroundCtrlShapesafeActivebrandRest": { - "no": 307, + "backgroundCtrlShapeSafeActiveBrandRest": { + "no": 308, "name": "background/ctrl/shapeSafe/activeBrand/rest", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -4390,10 +4403,10 @@ "contrast": "", "fallback": "Brand/Stroke/Compound/Rest", "exceptions": [], - "cssName": "--smtc-background-ctrl-shapesafe-activebrand-rest" + "cssName": "--smtc-background-ctrl-shape-safe-active-brand-rest" }, - "backgroundCtrlShapesafeActivebrandDisabled": { - "no": 308, + "backgroundCtrlShapeSafeActiveBrandDisabled": { + "no": 309, "name": "background/ctrl/shapeSafe/activeBrand/disabled", "fst_reference": "background/ctrl/brand/disabled", "optional": true, @@ -4403,10 +4416,10 @@ "contrast": "", "fallback": "Neutral/Foreground/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-background-ctrl-shapesafe-activebrand-disabled" + "cssName": "--smtc-background-ctrl-shape-safe-active-brand-disabled" }, - "backgroundCtrlShapesafeNeutralRest": { - "no": 309, + "backgroundCtrlShapeSafeNeutralRest": { + "no": 310, "name": "background/ctrl/shapeSafe/neutral/rest", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -4416,10 +4429,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Accessible/Hover", "exceptions": [], - "cssName": "--smtc-background-ctrl-shapesafe-neutral-rest" + "cssName": "--smtc-background-ctrl-shape-safe-neutral-rest" }, - "backgroundCtrlShapesafeNeutralHover": { - "no": 310, + "backgroundCtrlShapeSafeNeutralHover": { + "no": 311, "name": "background/ctrl/shapeSafe/neutral/hover", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -4429,10 +4442,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Accessible/Hover", "exceptions": [], - "cssName": "--smtc-background-ctrl-shapesafe-neutral-hover" + "cssName": "--smtc-background-ctrl-shape-safe-neutral-hover" }, - "backgroundCtrlShapesafeNeutralPressed": { - "no": 311, + "backgroundCtrlShapeSafeNeutralPressed": { + "no": 312, "name": "background/ctrl/shapeSafe/neutral/pressed", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -4442,10 +4455,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Accessible/Pressed", "exceptions": [], - "cssName": "--smtc-background-ctrl-shapesafe-neutral-pressed" + "cssName": "--smtc-background-ctrl-shape-safe-neutral-pressed" }, - "backgroundCtrlShapesafeNeutralDisabled": { - "no": 312, + "backgroundCtrlShapeSafeNeutralDisabled": { + "no": 313, "name": "background/ctrl/shapeSafe/neutral/disabled", "fst_reference": "foreground/ctrl/neutral/secondary/disabled", "optional": true, @@ -4455,10 +4468,10 @@ "contrast": "", "fallback": "Neutral/Foreground/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-background-ctrl-shapesafe-neutral-disabled" + "cssName": "--smtc-background-ctrl-shape-safe-neutral-disabled" }, "backgroundCtrlSubtleHover": { - "no": 313, + "no": 314, "name": "background/ctrl/subtle/hover", "fst_reference": "", "optional": false, @@ -4471,7 +4484,7 @@ "cssName": "--smtc-background-ctrl-subtle-hover" }, "backgroundCtrlSubtlePressed": { - "no": 314, + "no": 315, "name": "background/ctrl/subtle/pressed", "fst_reference": "", "optional": false, @@ -4484,7 +4497,7 @@ "cssName": "--smtc-background-ctrl-subtle-pressed" }, "backgroundCtrlSubtleDisabled": { - "no": 315, + "no": 316, "name": "background/ctrl/subtle/disabled", "fst_reference": "NULL/color", "optional": false, @@ -4496,8 +4509,8 @@ "exceptions": [], "cssName": "--smtc-background-ctrl-subtle-disabled" }, - "backgroundCtrlSubtleHoversplit": { - "no": 316, + "backgroundCtrlSubtleHoverSplit": { + "no": 317, "name": "background/ctrl/subtle/hoverSplit", "fst_reference": "NULL/color", "optional": false, @@ -4507,10 +4520,10 @@ "contrast": "", "fallback": "Neutral/Background/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-background-ctrl-subtle-hoversplit" + "cssName": "--smtc-background-ctrl-subtle-hover-split" }, - "backgroundFlyoutLumblend": { - "no": 317, + "backgroundFlyoutLumBlend": { + "no": 318, "name": "background/flyout/(lumBlend)", "fst_reference": "", "optional": false, @@ -4520,10 +4533,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-background-flyout-lumblend" + "cssName": "--smtc-background-flyout-lum-blend" }, - "backgroundFlyoutColorblend": { - "no": 318, + "backgroundFlyoutColorBlend": { + "no": 319, "name": "background/flyout/(colorBlend)", "fst_reference": "", "optional": false, @@ -4533,10 +4546,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-background-flyout-colorblend" + "cssName": "--smtc-background-flyout-color-blend" }, "cornerZero": { - "no": 319, + "no": 320, "name": "corner/zero", "fst_reference": "", "optional": false, @@ -4549,7 +4562,7 @@ "cssName": "--smtc-corner-zero" }, "cornerBezel": { - "no": 320, + "no": 321, "name": "corner/bezel", "fst_reference": "", "optional": false, @@ -4562,7 +4575,7 @@ "cssName": "--smtc-corner-bezel" }, "cornerWindowDefault": { - "no": 321, + "no": 322, "name": "corner/window/default", "fst_reference": "", "optional": false, @@ -4575,7 +4588,7 @@ "cssName": "--smtc-corner-window-default" }, "cornerFlyoutRest": { - "no": 322, + "no": 323, "name": "corner/flyout/rest", "fst_reference": "", "optional": false, @@ -4588,7 +4601,7 @@ "cssName": "--smtc-corner-flyout-rest" }, "cornerFlyoutHover": { - "no": 323, + "no": 324, "name": "corner/flyout/hover", "fst_reference": "corner/flyout/rest", "optional": true, @@ -4601,7 +4614,7 @@ "cssName": "--smtc-corner-flyout-hover" }, "cornerFlyoutPressed": { - "no": 324, + "no": 325, "name": "corner/flyout/pressed", "fst_reference": "corner/flyout/rest", "optional": true, @@ -4614,7 +4627,7 @@ "cssName": "--smtc-corner-flyout-pressed" }, "cornerLayerDefault": { - "no": 325, + "no": 326, "name": "corner/layer/default", "fst_reference": "", "optional": false, @@ -4627,7 +4640,7 @@ "cssName": "--smtc-corner-layer-default" }, "cornerLayerIntersection": { - "no": 326, + "no": 327, "name": "corner/layer/intersection", "fst_reference": "corner/zero", "optional": true, @@ -4640,7 +4653,7 @@ "cssName": "--smtc-corner-layer-intersection" }, "cornerCardRest": { - "no": 327, + "no": 328, "name": "corner/card/rest", "fst_reference": "", "optional": false, @@ -4653,7 +4666,7 @@ "cssName": "--smtc-corner-card-rest" }, "cornerCardHover": { - "no": 328, + "no": 329, "name": "corner/card/hover", "fst_reference": "corner/card/rest", "optional": true, @@ -4666,7 +4679,7 @@ "cssName": "--smtc-corner-card-hover" }, "cornerCardPressed": { - "no": 329, + "no": 330, "name": "corner/card/pressed", "fst_reference": "corner/card/rest", "optional": true, @@ -4679,7 +4692,7 @@ "cssName": "--smtc-corner-card-pressed" }, "cornerToolbarDefault": { - "no": 330, + "no": 331, "name": "corner/toolbar/default", "fst_reference": "corner/card/rest", "optional": true, @@ -4691,8 +4704,8 @@ "exceptions": [], "cssName": "--smtc-corner-toolbar-default" }, - "cornerImageOnpage": { - "no": 331, + "cornerImageOnPage": { + "no": 332, "name": "corner/image/onPage", "fst_reference": "corner/card/rest", "optional": true, @@ -4702,10 +4715,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-corner-image-onpage" + "cssName": "--smtc-corner-image-on-page" }, "cornerCtrlRest": { - "no": 332, + "no": 333, "name": "corner/ctrl/rest", "fst_reference": "", "optional": false, @@ -4737,7 +4750,7 @@ "cssName": "--smtc-corner-ctrl-rest" }, "cornerCtrlHover": { - "no": 333, + "no": 334, "name": "corner/ctrl/hover", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -4750,7 +4763,7 @@ "cssName": "--smtc-corner-ctrl-hover" }, "cornerCtrlPressed": { - "no": 334, + "no": 335, "name": "corner/ctrl/pressed", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -4763,7 +4776,7 @@ "cssName": "--smtc-corner-ctrl-pressed" }, "cornerCtrlSmRest": { - "no": 335, + "no": 336, "name": "corner/ctrl-sm/rest", "fst_reference": "", "optional": false, @@ -4776,7 +4789,7 @@ "cssName": "--smtc-corner-ctrl-sm-rest" }, "cornerCtrlSmHover": { - "no": 336, + "no": 337, "name": "corner/ctrl-sm/hover", "fst_reference": "corner/ctrl-sm/rest", "optional": true, @@ -4789,7 +4802,7 @@ "cssName": "--smtc-corner-ctrl-sm-hover" }, "cornerCtrlSmPressed": { - "no": 337, + "no": 338, "name": "corner/ctrl-sm/pressed", "fst_reference": "corner/ctrl-sm/rest", "optional": true, @@ -4802,7 +4815,7 @@ "cssName": "--smtc-corner-ctrl-sm-pressed" }, "cornerCtrlLgRest": { - "no": 338, + "no": 339, "name": "corner/ctrl-lg/rest", "fst_reference": "", "optional": false, @@ -4815,7 +4828,7 @@ "cssName": "--smtc-corner-ctrl-lg-rest" }, "cornerCtrlLgHover": { - "no": 339, + "no": 340, "name": "corner/ctrl-lg/hover", "fst_reference": "corner/ctrl-lg/rest", "optional": true, @@ -4828,7 +4841,7 @@ "cssName": "--smtc-corner-ctrl-lg-hover" }, "cornerCtrlLgPressed": { - "no": 340, + "no": 341, "name": "corner/ctrl-lg/pressed", "fst_reference": "corner/ctrl-lg/rest", "optional": true, @@ -4840,8 +4853,8 @@ "exceptions": [], "cssName": "--smtc-corner-ctrl-lg-pressed" }, - "cornerImageIncard": { - "no": 341, + "cornerImageInCard": { + "no": 342, "name": "corner/image/inCard", "fst_reference": "", "optional": false, @@ -4851,10 +4864,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-corner-image-incard" + "cssName": "--smtc-corner-image-in-card" }, "foregroundContentNeutralPrimary": { - "no": 342, + "no": 343, "name": "foreground/content/neutral/primary", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -4867,7 +4880,7 @@ "cssName": "--smtc-foreground-content-neutral-primary" }, "foregroundContentNeutralSecondary": { - "no": 343, + "no": 344, "name": "foreground/content/neutral/secondary", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -4880,7 +4893,7 @@ "cssName": "--smtc-foreground-content-neutral-secondary" }, "foregroundContentBrandPrimary": { - "no": 344, + "no": 345, "name": "foreground/content/brand/primary", "fst_reference": "foreground/ctrl/brand/rest", "optional": true, @@ -4893,7 +4906,7 @@ "cssName": "--smtc-foreground-content-brand-primary" }, "foregroundCtrlNeutralPrimaryRest": { - "no": 345, + "no": 346, "name": "foreground/ctrl/neutral/primary/rest", "fst_reference": "", "optional": false, @@ -4914,7 +4927,7 @@ "cssName": "--smtc-foreground-ctrl-neutral-primary-rest" }, "foregroundCtrlNeutralPrimaryHover": { - "no": 346, + "no": 347, "name": "foreground/ctrl/neutral/primary/hover", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -4927,7 +4940,7 @@ "cssName": "--smtc-foreground-ctrl-neutral-primary-hover" }, "foregroundCtrlNeutralPrimaryPressed": { - "no": 347, + "no": 348, "name": "foreground/ctrl/neutral/primary/pressed", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -4940,7 +4953,7 @@ "cssName": "--smtc-foreground-ctrl-neutral-primary-pressed" }, "foregroundCtrlNeutralPrimaryDisabled": { - "no": 348, + "no": 349, "name": "foreground/ctrl/neutral/primary/disabled", "fst_reference": "", "optional": false, @@ -4953,7 +4966,7 @@ "cssName": "--smtc-foreground-ctrl-neutral-primary-disabled" }, "foregroundCtrlNeutralSecondaryRest": { - "no": 349, + "no": 350, "name": "foreground/ctrl/neutral/secondary/rest", "fst_reference": "", "optional": false, @@ -4966,7 +4979,7 @@ "cssName": "--smtc-foreground-ctrl-neutral-secondary-rest" }, "foregroundCtrlNeutralSecondaryHover": { - "no": 350, + "no": 351, "name": "foreground/ctrl/neutral/secondary/hover", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -4979,7 +4992,7 @@ "cssName": "--smtc-foreground-ctrl-neutral-secondary-hover" }, "foregroundCtrlNeutralSecondaryPressed": { - "no": 351, + "no": 352, "name": "foreground/ctrl/neutral/secondary/pressed", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -4992,7 +5005,7 @@ "cssName": "--smtc-foreground-ctrl-neutral-secondary-pressed" }, "foregroundCtrlNeutralSecondaryDisabled": { - "no": 352, + "no": 353, "name": "foreground/ctrl/neutral/secondary/disabled", "fst_reference": "", "optional": false, @@ -5004,8 +5017,8 @@ "exceptions": [], "cssName": "--smtc-foreground-ctrl-neutral-secondary-disabled" }, - "foregroundCtrlIconOnneutralRest": { - "no": 353, + "foregroundCtrlIconOnNeutralRest": { + "no": 354, "name": "foreground/ctrl/icon/onNeutral/rest", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5025,10 +5038,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-icon-onneutral-rest" + "cssName": "--smtc-foreground-ctrl-icon-on-neutral-rest" }, - "foregroundCtrlIconOnneutralHover": { - "no": 354, + "foregroundCtrlIconOnNeutralHover": { + "no": 355, "name": "foreground/ctrl/icon/onNeutral/hover", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5038,10 +5051,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Hover", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-icon-onneutral-hover" + "cssName": "--smtc-foreground-ctrl-icon-on-neutral-hover" }, - "foregroundCtrlIconOnneutralPressed": { - "no": 355, + "foregroundCtrlIconOnNeutralPressed": { + "no": 356, "name": "foreground/ctrl/icon/onNeutral/pressed", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5051,10 +5064,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Pressed", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-icon-onneutral-pressed" + "cssName": "--smtc-foreground-ctrl-icon-on-neutral-pressed" }, - "foregroundCtrlIconOnneutralDisabled": { - "no": 356, + "foregroundCtrlIconOnNeutralDisabled": { + "no": 357, "name": "foreground/ctrl/icon/onNeutral/disabled", "fst_reference": "foreground/ctrl/neutral/primary/disabled", "optional": true, @@ -5064,10 +5077,10 @@ "contrast": "", "fallback": "Neutral/Foreground/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-icon-onneutral-disabled" + "cssName": "--smtc-foreground-ctrl-icon-on-neutral-disabled" }, - "foregroundCtrlIconOnoutlineRest": { - "no": 357, + "foregroundCtrlIconOnOutlineRest": { + "no": 358, "name": "foreground/ctrl/icon/onOutline/rest", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5077,10 +5090,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-icon-onoutline-rest" + "cssName": "--smtc-foreground-ctrl-icon-on-outline-rest" }, - "foregroundCtrlIconOnoutlineHover": { - "no": 358, + "foregroundCtrlIconOnOutlineHover": { + "no": 359, "name": "foreground/ctrl/icon/onOutline/hover", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5090,10 +5103,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Hover", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-icon-onoutline-hover" + "cssName": "--smtc-foreground-ctrl-icon-on-outline-hover" }, - "foregroundCtrlIconOnoutlinePressed": { - "no": 359, + "foregroundCtrlIconOnOutlinePressed": { + "no": 360, "name": "foreground/ctrl/icon/onOutline/pressed", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5103,10 +5116,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Pressed", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-icon-onoutline-pressed" + "cssName": "--smtc-foreground-ctrl-icon-on-outline-pressed" }, - "foregroundCtrlIconOnoutlineDisabled": { - "no": 360, + "foregroundCtrlIconOnOutlineDisabled": { + "no": 361, "name": "foreground/ctrl/icon/onOutline/disabled", "fst_reference": "foreground/ctrl/neutral/primary/disabled", "optional": true, @@ -5116,10 +5129,10 @@ "contrast": "", "fallback": "Neutral/Foreground/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-icon-onoutline-disabled" + "cssName": "--smtc-foreground-ctrl-icon-on-outline-disabled" }, - "foregroundCtrlIconOnsubtleRest": { - "no": 361, + "foregroundCtrlIconOnSubtleRest": { + "no": 362, "name": "foreground/ctrl/icon/onSubtle/rest", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5129,10 +5142,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-icon-onsubtle-rest" + "cssName": "--smtc-foreground-ctrl-icon-on-subtle-rest" }, - "foregroundCtrlIconOnsubtleHover": { - "no": 362, + "foregroundCtrlIconOnSubtleHover": { + "no": 363, "name": "foreground/ctrl/icon/onSubtle/hover", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5142,10 +5155,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Brand/Hover", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-icon-onsubtle-hover" + "cssName": "--smtc-foreground-ctrl-icon-on-subtle-hover" }, - "foregroundCtrlIconOnsubtlePressed": { - "no": 363, + "foregroundCtrlIconOnSubtlePressed": { + "no": 364, "name": "foreground/ctrl/icon/onSubtle/pressed", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5155,10 +5168,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Brand/Pressed", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-icon-onsubtle-pressed" + "cssName": "--smtc-foreground-ctrl-icon-on-subtle-pressed" }, - "foregroundCtrlIconOnsubtleDisabled": { - "no": 364, + "foregroundCtrlIconOnSubtleDisabled": { + "no": 365, "name": "foreground/ctrl/icon/onSubtle/disabled", "fst_reference": "foreground/ctrl/neutral/primary/disabled", "optional": true, @@ -5168,10 +5181,10 @@ "contrast": "", "fallback": "Neutral/Foreground/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-icon-onsubtle-disabled" + "cssName": "--smtc-foreground-ctrl-icon-on-subtle-disabled" }, "foregroundCtrlBrandRest": { - "no": 365, + "no": 366, "name": "foreground/ctrl/brand/rest", "fst_reference": "", "optional": false, @@ -5184,7 +5197,7 @@ "cssName": "--smtc-foreground-ctrl-brand-rest" }, "foregroundCtrlBrandHover": { - "no": 366, + "no": 367, "name": "foreground/ctrl/brand/hover", "fst_reference": "", "optional": false, @@ -5197,7 +5210,7 @@ "cssName": "--smtc-foreground-ctrl-brand-hover" }, "foregroundCtrlBrandPressed": { - "no": 367, + "no": 368, "name": "foreground/ctrl/brand/pressed", "fst_reference": "", "optional": false, @@ -5210,7 +5223,7 @@ "cssName": "--smtc-foreground-ctrl-brand-pressed" }, "foregroundCtrlBrandDisabled": { - "no": 368, + "no": 369, "name": "foreground/ctrl/brand/disabled", "fst_reference": "", "optional": false, @@ -5222,8 +5235,8 @@ "exceptions": [], "cssName": "--smtc-foreground-ctrl-brand-disabled" }, - "foregroundCtrlOnbrandRest": { - "no": 369, + "foregroundCtrlOnBrandRest": { + "no": 370, "name": "foreground/ctrl/onBrand/rest", "fst_reference": "", "optional": false, @@ -5233,10 +5246,10 @@ "contrast": "", "fallback": "Neutral/Foreground/OnBrand/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onbrand-rest" + "cssName": "--smtc-foreground-ctrl-on-brand-rest" }, - "foregroundCtrlOnbrandHover": { - "no": 370, + "foregroundCtrlOnBrandHover": { + "no": 371, "name": "foreground/ctrl/onBrand/hover", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -5246,10 +5259,10 @@ "contrast": "", "fallback": "Neutral/Foreground/OnBrand/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onbrand-hover" + "cssName": "--smtc-foreground-ctrl-on-brand-hover" }, - "foregroundCtrlOnbrandPressed": { - "no": 371, + "foregroundCtrlOnBrandPressed": { + "no": 372, "name": "foreground/ctrl/onBrand/pressed", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -5259,10 +5272,10 @@ "contrast": "", "fallback": "Neutral/Foreground/OnBrand/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onbrand-pressed" + "cssName": "--smtc-foreground-ctrl-on-brand-pressed" }, - "foregroundCtrlOnbrandDisabled": { - "no": 372, + "foregroundCtrlOnBrandDisabled": { + "no": 373, "name": "foreground/ctrl/onBrand/disabled", "fst_reference": "", "optional": false, @@ -5272,10 +5285,10 @@ "contrast": "", "fallback": "Neutral/Foreground/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onbrand-disabled" + "cssName": "--smtc-foreground-ctrl-on-brand-disabled" }, - "foregroundCtrlActivebrandRest": { - "no": 373, + "foregroundCtrlActiveBrandRest": { + "no": 374, "name": "foreground/ctrl/activeBrand/rest", "fst_reference": "foreground/ctrl/brand/rest", "optional": true, @@ -5285,10 +5298,10 @@ "contrast": "", "fallback": "foreground/ctrl/brand/rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-activebrand-rest" + "cssName": "--smtc-foreground-ctrl-active-brand-rest" }, - "foregroundCtrlActivebrandHover": { - "no": 374, + "foregroundCtrlActiveBrandHover": { + "no": 375, "name": "foreground/ctrl/activeBrand/hover", "fst_reference": "foreground/ctrl/brand/hover", "optional": true, @@ -5298,10 +5311,10 @@ "contrast": "", "fallback": "foreground/ctrl/brand/hover", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-activebrand-hover" + "cssName": "--smtc-foreground-ctrl-active-brand-hover" }, - "foregroundCtrlActivebrandPressed": { - "no": 375, + "foregroundCtrlActiveBrandPressed": { + "no": 376, "name": "foreground/ctrl/activeBrand/pressed", "fst_reference": "foreground/ctrl/brand/pressed", "optional": true, @@ -5311,10 +5324,10 @@ "contrast": "", "fallback": "foreground/ctrl/brand/pressed", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-activebrand-pressed" + "cssName": "--smtc-foreground-ctrl-active-brand-pressed" }, - "foregroundCtrlActivebrandDisabled": { - "no": 376, + "foregroundCtrlActiveBrandDisabled": { + "no": 377, "name": "foreground/ctrl/activeBrand/disabled", "fst_reference": "foreground/ctrl/brand/disabled", "optional": true, @@ -5324,10 +5337,10 @@ "contrast": "", "fallback": "foreground/ctrl/brand/disabled", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-activebrand-disabled" + "cssName": "--smtc-foreground-ctrl-active-brand-disabled" }, - "foregroundCtrlOnactivebrandRest": { - "no": 377, + "foregroundCtrlOnActiveBrandRest": { + "no": 378, "name": "foreground/ctrl/onActiveBrand/rest", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -5337,10 +5350,10 @@ "contrast": "", "fallback": "foreground/ctrl/onBrand/rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onactivebrand-rest" + "cssName": "--smtc-foreground-ctrl-on-active-brand-rest" }, - "foregroundCtrlOnactivebrandHover": { - "no": 378, + "foregroundCtrlOnActiveBrandHover": { + "no": 379, "name": "foreground/ctrl/onActiveBrand/hover", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -5350,10 +5363,10 @@ "contrast": "", "fallback": "foreground/ctrl/onBrand/hover", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onactivebrand-hover" + "cssName": "--smtc-foreground-ctrl-on-active-brand-hover" }, - "foregroundCtrlOnactivebrandPressed": { - "no": 379, + "foregroundCtrlOnActiveBrandPressed": { + "no": 380, "name": "foreground/ctrl/onActiveBrand/pressed", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -5363,10 +5376,10 @@ "contrast": "", "fallback": "foreground/ctrl/onBrand/pressed", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onactivebrand-pressed" + "cssName": "--smtc-foreground-ctrl-on-active-brand-pressed" }, - "foregroundCtrlOnactivebrandDisabled": { - "no": 380, + "foregroundCtrlOnActiveBrandDisabled": { + "no": 381, "name": "foreground/ctrl/onActiveBrand/disabled", "fst_reference": "foreground/ctrl/onBrand/disabled", "optional": true, @@ -5376,10 +5389,10 @@ "contrast": "", "fallback": "foreground/ctrl/onBrand/disabled", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onactivebrand-disabled" + "cssName": "--smtc-foreground-ctrl-on-active-brand-disabled" }, - "foregroundCtrlOnoutlineRest": { - "no": 381, + "foregroundCtrlOnOutlineRest": { + "no": 382, "name": "foreground/ctrl/onOutline/rest", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5389,10 +5402,10 @@ "contrast": "", "fallback": "Neutral/Foreground/1/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onoutline-rest" + "cssName": "--smtc-foreground-ctrl-on-outline-rest" }, - "foregroundCtrlOnoutlineHover": { - "no": 382, + "foregroundCtrlOnOutlineHover": { + "no": 383, "name": "foreground/ctrl/onOutline/hover", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5402,10 +5415,10 @@ "contrast": "", "fallback": "Neutral/Foreground/1/Hover", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onoutline-hover" + "cssName": "--smtc-foreground-ctrl-on-outline-hover" }, - "foregroundCtrlOnoutlinePressed": { - "no": 383, + "foregroundCtrlOnOutlinePressed": { + "no": 384, "name": "foreground/ctrl/onOutline/pressed", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5415,10 +5428,10 @@ "contrast": "", "fallback": "Neutral/Foreground/1/Pressed", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onoutline-pressed" + "cssName": "--smtc-foreground-ctrl-on-outline-pressed" }, - "foregroundCtrlOnoutlineDisabled": { - "no": 384, + "foregroundCtrlOnOutlineDisabled": { + "no": 385, "name": "foreground/ctrl/onOutline/disabled", "fst_reference": "foreground/ctrl/neutral/primary/disabled", "optional": true, @@ -5428,10 +5441,10 @@ "contrast": "", "fallback": "Neutral/Foreground/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onoutline-disabled" + "cssName": "--smtc-foreground-ctrl-on-outline-disabled" }, - "foregroundCtrlOnsubtleRest": { - "no": 385, + "foregroundCtrlOnSubtleRest": { + "no": 386, "name": "foreground/ctrl/onSubtle/rest", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5441,10 +5454,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onsubtle-rest" + "cssName": "--smtc-foreground-ctrl-on-subtle-rest" }, - "foregroundCtrlOnsubtleHover": { - "no": 386, + "foregroundCtrlOnSubtleHover": { + "no": 387, "name": "foreground/ctrl/onSubtle/hover", "fst_reference": "foreground/ctrl/neutral/primary/hover", "optional": true, @@ -5454,10 +5467,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Hover", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onsubtle-hover" + "cssName": "--smtc-foreground-ctrl-on-subtle-hover" }, - "foregroundCtrlOnsubtlePressed": { - "no": 387, + "foregroundCtrlOnSubtlePressed": { + "no": 388, "name": "foreground/ctrl/onSubtle/pressed", "fst_reference": "foreground/ctrl/neutral/primary/pressed", "optional": true, @@ -5467,10 +5480,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Pressed", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onsubtle-pressed" + "cssName": "--smtc-foreground-ctrl-on-subtle-pressed" }, - "foregroundCtrlOnsubtleDisabled": { - "no": 388, + "foregroundCtrlOnSubtleDisabled": { + "no": 389, "name": "foreground/ctrl/onSubtle/disabled", "fst_reference": "foreground/ctrl/neutral/primary/disabled", "optional": true, @@ -5480,10 +5493,10 @@ "contrast": "", "fallback": "Neutral/Foreground/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-onsubtle-disabled" + "cssName": "--smtc-foreground-ctrl-on-subtle-disabled" }, - "foregroundCtrlOntransparentRest": { - "no": 389, + "foregroundCtrlOnTransparentRest": { + "no": 390, "name": "foreground/ctrl/onTransparent/rest", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5493,10 +5506,10 @@ "contrast": "", "fallback": "Neutral/Foreground/1/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-ontransparent-rest" + "cssName": "--smtc-foreground-ctrl-on-transparent-rest" }, - "foregroundCtrlOntransparentHover": { - "no": 390, + "foregroundCtrlOnTransparentHover": { + "no": 391, "name": "foreground/ctrl/onTransparent/hover", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5506,10 +5519,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Brand/Hover", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-ontransparent-hover" + "cssName": "--smtc-foreground-ctrl-on-transparent-hover" }, - "foregroundCtrlOntransparentPressed": { - "no": 391, + "foregroundCtrlOnTransparentPressed": { + "no": 392, "name": "foreground/ctrl/onTransparent/pressed", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -5519,10 +5532,10 @@ "contrast": "", "fallback": "Neutral/Foreground/2/Brand/Pressed", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-ontransparent-pressed" + "cssName": "--smtc-foreground-ctrl-on-transparent-pressed" }, - "foregroundCtrlOntransparentDisabled": { - "no": 392, + "foregroundCtrlOnTransparentDisabled": { + "no": 393, "name": "foreground/ctrl/onTransparent/disabled", "fst_reference": "foreground/ctrl/neutral/primary/disabled", "optional": true, @@ -5532,10 +5545,10 @@ "contrast": "", "fallback": "Neutral/Foreground/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-foreground-ctrl-ontransparent-disabled" + "cssName": "--smtc-foreground-ctrl-on-transparent-disabled" }, "foregroundCtrlHintDefault": { - "no": 393, + "no": 394, "name": "foreground/ctrl/hint/default", "fst_reference": "NULL/color", "optional": false, @@ -5548,7 +5561,7 @@ "cssName": "--smtc-foreground-ctrl-hint-default" }, "shadowCardRestKeyX": { - "no": 394, + "no": 395, "name": "shadow/card/rest/(key)/(x)", "fst_reference": "NULL/number", "optional": false, @@ -5561,7 +5574,7 @@ "cssName": "--smtc-shadow-card-rest-key-x" }, "shadowCardRestKeyY": { - "no": 395, + "no": 396, "name": "shadow/card/rest/(key)/(y)", "fst_reference": "NULL/number", "optional": false, @@ -5574,7 +5587,7 @@ "cssName": "--smtc-shadow-card-rest-key-y" }, "shadowCardRestKeyBlur": { - "no": 396, + "no": 397, "name": "shadow/card/rest/(key)/(blur)", "fst_reference": "NULL/number", "optional": false, @@ -5587,7 +5600,7 @@ "cssName": "--smtc-shadow-card-rest-key-blur" }, "shadowCardRestKeyColor": { - "no": 397, + "no": 398, "name": "shadow/card/rest/(key)/(color)", "fst_reference": "NULL/color", "optional": false, @@ -5600,7 +5613,7 @@ "cssName": "--smtc-shadow-card-rest-key-color" }, "shadowCardHoverKeyX": { - "no": 398, + "no": 399, "name": "shadow/card/hover/(key)/(x)", "fst_reference": "NULL/number", "optional": false, @@ -5613,7 +5626,7 @@ "cssName": "--smtc-shadow-card-hover-key-x" }, "shadowCardHoverKeyY": { - "no": 399, + "no": 400, "name": "shadow/card/hover/(key)/(y)", "fst_reference": "NULL/number", "optional": false, @@ -5626,7 +5639,7 @@ "cssName": "--smtc-shadow-card-hover-key-y" }, "shadowCardHoverKeyBlur": { - "no": 400, + "no": 401, "name": "shadow/card/hover/(key)/(blur)", "fst_reference": "NULL/number", "optional": false, @@ -5639,7 +5652,7 @@ "cssName": "--smtc-shadow-card-hover-key-blur" }, "shadowCardHoverKeyColor": { - "no": 401, + "no": 402, "name": "shadow/card/hover/(key)/(color)", "fst_reference": "NULL/color", "optional": false, @@ -5652,7 +5665,7 @@ "cssName": "--smtc-shadow-card-hover-key-color" }, "shadowCardPressedKeyX": { - "no": 402, + "no": 403, "name": "shadow/card/pressed/(key)/(x)", "fst_reference": "NULL/number", "optional": false, @@ -5665,7 +5678,7 @@ "cssName": "--smtc-shadow-card-pressed-key-x" }, "shadowCardPressedKeyY": { - "no": 403, + "no": 404, "name": "shadow/card/pressed/(key)/(y)", "fst_reference": "NULL/number", "optional": false, @@ -5678,7 +5691,7 @@ "cssName": "--smtc-shadow-card-pressed-key-y" }, "shadowCardPressedKeyBlur": { - "no": 404, + "no": 405, "name": "shadow/card/pressed/(key)/(blur)", "fst_reference": "NULL/number", "optional": false, @@ -5691,7 +5704,7 @@ "cssName": "--smtc-shadow-card-pressed-key-blur" }, "shadowCardPressedKeyColor": { - "no": 405, + "no": 406, "name": "shadow/card/pressed/(key)/(color)", "fst_reference": "NULL/color", "optional": false, @@ -5704,7 +5717,7 @@ "cssName": "--smtc-shadow-card-pressed-key-color" }, "shadowCardDisabledKeyX": { - "no": 406, + "no": 407, "name": "shadow/card/disabled/(key)/(x)", "fst_reference": "NULL/number", "optional": false, @@ -5717,7 +5730,7 @@ "cssName": "--smtc-shadow-card-disabled-key-x" }, "shadowCardDisabledKeyY": { - "no": 407, + "no": 408, "name": "shadow/card/disabled/(key)/(y)", "fst_reference": "NULL/number", "optional": false, @@ -5730,7 +5743,7 @@ "cssName": "--smtc-shadow-card-disabled-key-y" }, "shadowCardDisabledKeyBlur": { - "no": 408, + "no": 409, "name": "shadow/card/disabled/(key)/(blur)", "fst_reference": "NULL/number", "optional": false, @@ -5743,7 +5756,7 @@ "cssName": "--smtc-shadow-card-disabled-key-blur" }, "shadowCardDisabledKeyColor": { - "no": 409, + "no": 410, "name": "shadow/card/disabled/(key)/(color)", "fst_reference": "NULL/color", "optional": false, @@ -5756,7 +5769,7 @@ "cssName": "--smtc-shadow-card-disabled-key-color" }, "shadowCardRestAmbientX": { - "no": 410, + "no": 411, "name": "shadow/card/rest/(ambient)/(x)", "fst_reference": "NULL/number", "optional": false, @@ -5769,7 +5782,7 @@ "cssName": "--smtc-shadow-card-rest-ambient-x" }, "shadowCardRestAmbientY": { - "no": 411, + "no": 412, "name": "shadow/card/rest/(ambient)/(y)", "fst_reference": "NULL/number", "optional": false, @@ -5782,7 +5795,7 @@ "cssName": "--smtc-shadow-card-rest-ambient-y" }, "shadowCardRestAmbientBlur": { - "no": 412, + "no": 413, "name": "shadow/card/rest/(ambient)/(blur)", "fst_reference": "NULL/number", "optional": false, @@ -5795,7 +5808,7 @@ "cssName": "--smtc-shadow-card-rest-ambient-blur" }, "shadowCardRestAmbientColor": { - "no": 413, + "no": 414, "name": "shadow/card/rest/(ambient)/(color)", "fst_reference": "NULL/color", "optional": false, @@ -5808,7 +5821,7 @@ "cssName": "--smtc-shadow-card-rest-ambient-color" }, "shadowFlyoutKeyX": { - "no": 414, + "no": 415, "name": "shadow/flyout/(key)/(x)", "fst_reference": "", "optional": false, @@ -5821,7 +5834,7 @@ "cssName": "--smtc-shadow-flyout-key-x" }, "shadowFlyoutKeyY": { - "no": 415, + "no": 416, "name": "shadow/flyout/(key)/(y)", "fst_reference": "", "optional": false, @@ -5834,7 +5847,7 @@ "cssName": "--smtc-shadow-flyout-key-y" }, "shadowFlyoutKeyBlur": { - "no": 416, + "no": 417, "name": "shadow/flyout/(key)/(blur)", "fst_reference": "", "optional": false, @@ -5847,7 +5860,7 @@ "cssName": "--smtc-shadow-flyout-key-blur" }, "shadowFlyoutKeyColor": { - "no": 417, + "no": 418, "name": "shadow/flyout/(key)/(color)", "fst_reference": "", "optional": false, @@ -5860,7 +5873,7 @@ "cssName": "--smtc-shadow-flyout-key-color" }, "shadowFlyoutAmbientX": { - "no": 418, + "no": 419, "name": "shadow/flyout/(ambient)/(x)", "fst_reference": "", "optional": false, @@ -5873,7 +5886,7 @@ "cssName": "--smtc-shadow-flyout-ambient-x" }, "shadowFlyoutAmbientY": { - "no": 419, + "no": 420, "name": "shadow/flyout/(ambient)/(y)", "fst_reference": "", "optional": false, @@ -5886,7 +5899,7 @@ "cssName": "--smtc-shadow-flyout-ambient-y" }, "shadowFlyoutAmbientBlur": { - "no": 420, + "no": 421, "name": "shadow/flyout/(ambient)/(blur)", "fst_reference": "", "optional": false, @@ -5899,7 +5912,7 @@ "cssName": "--smtc-shadow-flyout-ambient-blur" }, "shadowFlyoutAmbientColor": { - "no": 421, + "no": 422, "name": "shadow/flyout/(ambient)/(color)", "fst_reference": "", "optional": false, @@ -5911,8 +5924,8 @@ "exceptions": [], "cssName": "--smtc-shadow-flyout-ambient-color" }, - "shadowCtrlOndragKeyY": { - "no": 422, + "shadowCtrlOnDragKeyY": { + "no": 423, "name": "shadow/ctrl/onDrag/(key)/(y)", "fst_reference": "shadow/flyout/(key)/(y)", "optional": true, @@ -5922,10 +5935,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-shadow-ctrl-ondrag-key-y" + "cssName": "--smtc-shadow-ctrl-on-drag-key-y" }, - "shadowCtrlOndragKeyX": { - "no": 423, + "shadowCtrlOnDragKeyX": { + "no": 424, "name": "shadow/ctrl/onDrag/(key)/(x)", "fst_reference": "shadow/flyout/(key)/(x)", "optional": true, @@ -5935,10 +5948,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-shadow-ctrl-ondrag-key-x" + "cssName": "--smtc-shadow-ctrl-on-drag-key-x" }, - "shadowCtrlOndragKeyBlur": { - "no": 424, + "shadowCtrlOnDragKeyBlur": { + "no": 425, "name": "shadow/ctrl/onDrag/(key)/(blur)", "fst_reference": "shadow/flyout/(key)/(blur)", "optional": true, @@ -5948,10 +5961,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-shadow-ctrl-ondrag-key-blur" + "cssName": "--smtc-shadow-ctrl-on-drag-key-blur" }, - "shadowCtrlOndragKeyColor": { - "no": 425, + "shadowCtrlOnDragKeyColor": { + "no": 426, "name": "shadow/ctrl/onDrag/(key)/(color)", "fst_reference": "shadow/flyout/(key)/(color)", "optional": true, @@ -5961,10 +5974,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-shadow-ctrl-ondrag-key-color" + "cssName": "--smtc-shadow-ctrl-on-drag-key-color" }, - "shadowCtrlOndragAmbientY": { - "no": 426, + "shadowCtrlOnDragAmbientY": { + "no": 427, "name": "shadow/ctrl/onDrag/(ambient)/(y)", "fst_reference": "shadow/flyout/(ambient)/(y)", "optional": true, @@ -5974,10 +5987,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-shadow-ctrl-ondrag-ambient-y" + "cssName": "--smtc-shadow-ctrl-on-drag-ambient-y" }, - "shadowCtrlOndragAmbientX": { - "no": 427, + "shadowCtrlOnDragAmbientX": { + "no": 428, "name": "shadow/ctrl/onDrag/(ambient)/(x)", "fst_reference": "shadow/flyout/(ambient)/(x)", "optional": true, @@ -5987,10 +6000,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-shadow-ctrl-ondrag-ambient-x" + "cssName": "--smtc-shadow-ctrl-on-drag-ambient-x" }, - "shadowCtrlOndragAmbientBlur": { - "no": 428, + "shadowCtrlOnDragAmbientBlur": { + "no": 429, "name": "shadow/ctrl/onDrag/(ambient)/(blur)", "fst_reference": "shadow/flyout/(ambient)/(blur)", "optional": true, @@ -6000,10 +6013,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-shadow-ctrl-ondrag-ambient-blur" + "cssName": "--smtc-shadow-ctrl-on-drag-ambient-blur" }, - "shadowCtrlOndragAmbientColor": { - "no": 429, + "shadowCtrlOnDragAmbientColor": { + "no": 430, "name": "shadow/ctrl/onDrag/(ambient)/(color)", "fst_reference": "shadow/flyout/(ambient)/(color)", "optional": true, @@ -6013,10 +6026,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-shadow-ctrl-ondrag-ambient-color" + "cssName": "--smtc-shadow-ctrl-on-drag-ambient-color" }, "shadowLayerKeyX": { - "no": 430, + "no": 431, "name": "shadow/layer/(key)/(x)", "fst_reference": "NULL/number", "optional": false, @@ -6029,7 +6042,7 @@ "cssName": "--smtc-shadow-layer-key-x" }, "shadowToolbarKeyX": { - "no": 431, + "no": 432, "name": "shadow/toolbar/(key)/(x)", "fst_reference": "", "optional": false, @@ -6042,7 +6055,7 @@ "cssName": "--smtc-shadow-toolbar-key-x" }, "shadowToolbarKeyY": { - "no": 432, + "no": 433, "name": "shadow/toolbar/(key)/(y)", "fst_reference": "", "optional": false, @@ -6055,7 +6068,7 @@ "cssName": "--smtc-shadow-toolbar-key-y" }, "shadowToolbarKeyBlur": { - "no": 433, + "no": 434, "name": "shadow/toolbar/(key)/(blur)", "fst_reference": "", "optional": false, @@ -6068,7 +6081,7 @@ "cssName": "--smtc-shadow-toolbar-key-blur" }, "shadowToolbarKeyColor": { - "no": 434, + "no": 435, "name": "shadow/toolbar/(key)/(color)", "fst_reference": "", "optional": false, @@ -6081,7 +6094,7 @@ "cssName": "--smtc-shadow-toolbar-key-color" }, "shadowToolbarAmbientX": { - "no": 435, + "no": 436, "name": "shadow/toolbar/(ambient)/(x)", "fst_reference": "", "optional": false, @@ -6094,7 +6107,7 @@ "cssName": "--smtc-shadow-toolbar-ambient-x" }, "shadowToolbarAmbientY": { - "no": 436, + "no": 437, "name": "shadow/toolbar/(ambient)/(y)", "fst_reference": "", "optional": false, @@ -6107,7 +6120,7 @@ "cssName": "--smtc-shadow-toolbar-ambient-y" }, "shadowToolbarAmbientBlur": { - "no": 437, + "no": 438, "name": "shadow/toolbar/(ambient)/(blur)", "fst_reference": "", "optional": false, @@ -6120,7 +6133,7 @@ "cssName": "--smtc-shadow-toolbar-ambient-blur" }, "shadowToolbarAmbientColor": { - "no": 438, + "no": 439, "name": "shadow/toolbar/(ambient)/(color)", "fst_reference": "", "optional": false, @@ -6133,7 +6146,7 @@ "cssName": "--smtc-shadow-toolbar-ambient-color" }, "shadowLayerKeyY": { - "no": 439, + "no": 440, "name": "shadow/layer/(key)/(y)", "fst_reference": "NULL/number", "optional": false, @@ -6146,7 +6159,7 @@ "cssName": "--smtc-shadow-layer-key-y" }, "shadowLayerKeyBlur": { - "no": 440, + "no": 441, "name": "shadow/layer/(key)/(blur)", "fst_reference": "NULL/number", "optional": false, @@ -6159,7 +6172,7 @@ "cssName": "--smtc-shadow-layer-key-blur" }, "shadowLayerKeyColor": { - "no": 441, + "no": 442, "name": "shadow/layer/(key)/(color)", "fst_reference": "NULL/color", "optional": false, @@ -6172,7 +6185,7 @@ "cssName": "--smtc-shadow-layer-key-color" }, "shadowLayerAmbientX": { - "no": 442, + "no": 443, "name": "shadow/layer/(ambient)/(x)", "fst_reference": "NULL/number", "optional": false, @@ -6185,7 +6198,7 @@ "cssName": "--smtc-shadow-layer-ambient-x" }, "shadowLayerAmbientY": { - "no": 443, + "no": 444, "name": "shadow/layer/(ambient)/(y)", "fst_reference": "NULL/number", "optional": false, @@ -6198,7 +6211,7 @@ "cssName": "--smtc-shadow-layer-ambient-y" }, "shadowLayerAmbientBlur": { - "no": 444, + "no": 445, "name": "shadow/layer/(ambient)/(blur)", "fst_reference": "NULL/number", "optional": false, @@ -6211,7 +6224,7 @@ "cssName": "--smtc-shadow-layer-ambient-blur" }, "shadowLayerAmbientColor": { - "no": 445, + "no": 446, "name": "shadow/layer/(ambient)/(color)", "fst_reference": "NULL/color", "optional": false, @@ -6224,7 +6237,7 @@ "cssName": "--smtc-shadow-layer-ambient-color" }, "materialAcrylicDefaultSolid": { - "no": 446, + "no": 447, "name": "material/acrylic/default/(solid)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -6236,8 +6249,8 @@ "exceptions": [], "cssName": "--smtc-material-acrylic-default-solid" }, - "materialAcrylicDefaultColorblend": { - "no": 447, + "materialAcrylicDefaultColorBlend": { + "no": 448, "name": "material/acrylic/default/(colorBlend)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -6247,10 +6260,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-material-acrylic-default-colorblend" + "cssName": "--smtc-material-acrylic-default-color-blend" }, - "materialAcrylicDefaultLumblend": { - "no": 448, + "materialAcrylicDefaultLumBlend": { + "no": 449, "name": "material/acrylic/default/(lumBlend)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -6260,10 +6273,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-material-acrylic-default-lumblend" + "cssName": "--smtc-material-acrylic-default-lum-blend" }, "materialAcrylicBlur": { - "no": 449, + "no": 450, "name": "material/acrylic/blur", "fst_reference": "", "optional": false, @@ -6276,7 +6289,7 @@ "cssName": "--smtc-material-acrylic-blur" }, "materialMicaBlur": { - "no": 450, + "no": 451, "name": "material/mica/blur", "fst_reference": "", "optional": false, @@ -6289,7 +6302,7 @@ "cssName": "--smtc-material-mica-blur" }, "materialMicaDefaultSolid": { - "no": 451, + "no": 452, "name": "material/mica/default/(solid)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -6301,8 +6314,8 @@ "exceptions": [], "cssName": "--smtc-material-mica-default-solid" }, - "materialMicaDefaultColorblend": { - "no": 452, + "materialMicaDefaultColorBlend": { + "no": 453, "name": "material/mica/default/(colorBlend)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -6312,10 +6325,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-material-mica-default-colorblend" + "cssName": "--smtc-material-mica-default-color-blend" }, - "materialMicaDefaultLumblend": { - "no": 453, + "materialMicaDefaultLumBlend": { + "no": 454, "name": "material/mica/default/(lumBlend)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -6325,10 +6338,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-material-mica-default-lumblend" + "cssName": "--smtc-material-mica-default-lum-blend" }, "materialMicaDarkerSolid": { - "no": 454, + "no": 455, "name": "material/mica/darker/(solid)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -6340,8 +6353,8 @@ "exceptions": [], "cssName": "--smtc-material-mica-darker-solid" }, - "materialMicaDarkerColorblend": { - "no": 455, + "materialMicaDarkerColorBlend": { + "no": 456, "name": "material/mica/darker/(colorBlend)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -6351,10 +6364,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-material-mica-darker-colorblend" + "cssName": "--smtc-material-mica-darker-color-blend" }, - "materialMicaDarkerLumblend": { - "no": 456, + "materialMicaDarkerLumBlend": { + "no": 457, "name": "material/mica/darker/(lumBlend)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -6364,10 +6377,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-material-mica-darker-lumblend" + "cssName": "--smtc-material-mica-darker-lum-blend" }, "materialMicaThinSolid": { - "no": 457, + "no": 458, "name": "material/mica/thin/(solid)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -6379,8 +6392,8 @@ "exceptions": [], "cssName": "--smtc-material-mica-thin-solid" }, - "materialMicaThinColorblend": { - "no": 458, + "materialMicaThinColorBlend": { + "no": 459, "name": "material/mica/thin/(colorBlend)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -6390,10 +6403,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-material-mica-thin-colorblend" + "cssName": "--smtc-material-mica-thin-color-blend" }, - "materialMicaThinLumblend": { - "no": 459, + "materialMicaThinLumBlend": { + "no": 460, "name": "material/mica/thin/(lumBlend)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -6403,10 +6416,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-material-mica-thin-lumblend" + "cssName": "--smtc-material-mica-thin-lum-blend" }, "ctrlTooltipShadowKeyX": { - "no": 460, + "no": 461, "name": "CTRL/tooltip/shadow/(key)/(x)", "fst_reference": "CTRL/fab/shadow/rest/(key)/(x)", "optional": true, @@ -6419,7 +6432,7 @@ "cssName": "--smtc-ctrl-tooltip-shadow-key-x" }, "ctrlTooltipShadowKeyY": { - "no": 461, + "no": 462, "name": "CTRL/tooltip/shadow/(key)/(y)", "fst_reference": "CTRL/fab/shadow/rest/(key)/(y)", "optional": true, @@ -6432,7 +6445,7 @@ "cssName": "--smtc-ctrl-tooltip-shadow-key-y" }, "ctrlTooltipShadowKeyBlur": { - "no": 462, + "no": 463, "name": "CTRL/tooltip/shadow/(key)/(blur)", "fst_reference": "CTRL/fab/shadow/rest/(key)/(blur)", "optional": true, @@ -6445,7 +6458,7 @@ "cssName": "--smtc-ctrl-tooltip-shadow-key-blur" }, "ctrlTooltipShadowKeyColor": { - "no": 463, + "no": 464, "name": "CTRL/tooltip/shadow/(key)/(color)", "fst_reference": "CTRL/fab/shadow/rest/(key)/(color)", "optional": true, @@ -6458,7 +6471,7 @@ "cssName": "--smtc-ctrl-tooltip-shadow-key-color" }, "ctrlTooltipShadowAmbientX": { - "no": 464, + "no": 465, "name": "CTRL/tooltip/shadow/(ambient)/(x)", "fst_reference": "CTRL/fab/shadow/rest/(ambient)/(x)", "optional": true, @@ -6471,7 +6484,7 @@ "cssName": "--smtc-ctrl-tooltip-shadow-ambient-x" }, "ctrlTooltipShadowAmbientY": { - "no": 465, + "no": 466, "name": "CTRL/tooltip/shadow/(ambient)/(y)", "fst_reference": "CTRL/fab/shadow/rest/(ambient)/(y)", "optional": true, @@ -6484,7 +6497,7 @@ "cssName": "--smtc-ctrl-tooltip-shadow-ambient-y" }, "ctrlTooltipShadowAmbientBlur": { - "no": 466, + "no": 467, "name": "CTRL/tooltip/shadow/(ambient)/(blur)", "fst_reference": "CTRL/fab/shadow/rest/(ambient)/(blur)", "optional": true, @@ -6497,7 +6510,7 @@ "cssName": "--smtc-ctrl-tooltip-shadow-ambient-blur" }, "ctrlTooltipShadowAmbientColor": { - "no": 467, + "no": 468, "name": "CTRL/tooltip/shadow/(ambient)/(color)", "fst_reference": "CTRL/fab/shadow/rest/(ambient)/(color)", "optional": true, @@ -6509,8 +6522,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-tooltip-shadow-ambient-color" }, - "iconthemeCtrlDefaultRest": { - "no": 468, + "iconThemeCtrlDefaultRest": { + "no": 469, "name": "iconTheme/ctrl/default/rest", "fst_reference": "", "optional": false, @@ -6540,10 +6553,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-icontheme-ctrl-default-rest" + "cssName": "--smtc-icon-theme-ctrl-default-rest" }, - "iconthemeCtrlDefaultHover": { - "no": 469, + "iconThemeCtrlDefaultHover": { + "no": 470, "name": "iconTheme/ctrl/default/hover", "fst_reference": "iconTheme/ctrl/default/rest", "optional": true, @@ -6553,10 +6566,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-icontheme-ctrl-default-hover" + "cssName": "--smtc-icon-theme-ctrl-default-hover" }, - "iconthemeCtrlDefaultPressed": { - "no": 470, + "iconThemeCtrlDefaultPressed": { + "no": 471, "name": "iconTheme/ctrl/default/pressed", "fst_reference": "iconTheme/ctrl/default/rest", "optional": true, @@ -6566,10 +6579,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-icontheme-ctrl-default-pressed" + "cssName": "--smtc-icon-theme-ctrl-default-pressed" }, - "iconthemeCtrlDefaultSelected": { - "no": 471, + "iconThemeCtrlDefaultSelected": { + "no": 472, "name": "iconTheme/ctrl/default/selected", "fst_reference": "", "optional": false, @@ -6579,10 +6592,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-icontheme-ctrl-default-selected" + "cssName": "--smtc-icon-theme-ctrl-default-selected" }, - "iconthemeCtrlSubtleRest": { - "no": 472, + "iconThemeCtrlSubtleRest": { + "no": 473, "name": "iconTheme/ctrl/subtle/rest", "fst_reference": "iconTheme/ctrl/default/rest", "optional": true, @@ -6592,10 +6605,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-icontheme-ctrl-subtle-rest" + "cssName": "--smtc-icon-theme-ctrl-subtle-rest" }, - "iconthemeCtrlSubtleHover": { - "no": 473, + "iconThemeCtrlSubtleHover": { + "no": 474, "name": "iconTheme/ctrl/subtle/hover", "fst_reference": "iconTheme/ctrl/default/rest", "optional": true, @@ -6605,10 +6618,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-icontheme-ctrl-subtle-hover" + "cssName": "--smtc-icon-theme-ctrl-subtle-hover" }, - "iconthemeCtrlSubtlePressed": { - "no": 474, + "iconThemeCtrlSubtlePressed": { + "no": 475, "name": "iconTheme/ctrl/subtle/pressed", "fst_reference": "iconTheme/ctrl/default/rest", "optional": true, @@ -6618,10 +6631,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-icontheme-ctrl-subtle-pressed" + "cssName": "--smtc-icon-theme-ctrl-subtle-pressed" }, - "iconthemeCtrlSubtleSelected": { - "no": 475, + "iconThemeCtrlSubtleSelected": { + "no": 476, "name": "iconTheme/ctrl/subtle/selected", "fst_reference": "iconTheme/ctrl/default/selected", "optional": true, @@ -6631,10 +6644,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-icontheme-ctrl-subtle-selected" + "cssName": "--smtc-icon-theme-ctrl-subtle-selected" }, - "iconthemeCtrlChevronDefault": { - "no": 476, + "iconThemeCtrlChevronDefault": { + "no": 477, "name": "iconTheme/ctrl/chevron/default", "fst_reference": "iconTheme/ctrl/default/rest", "optional": true, @@ -6657,10 +6670,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-icontheme-ctrl-chevron-default" + "cssName": "--smtc-icon-theme-ctrl-chevron-default" }, - "iconthemeCtrlChevronSelected": { - "no": 477, + "iconThemeCtrlChevronSelected": { + "no": 478, "name": "iconTheme/ctrl/chevron/selected", "fst_reference": "iconTheme/ctrl/default/selected", "optional": true, @@ -6670,10 +6683,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-icontheme-ctrl-chevron-selected" + "cssName": "--smtc-icon-theme-ctrl-chevron-selected" }, "ctrlAvatarSize": { - "no": 478, + "no": 479, "name": "CTRL/avatar/size", "fst_reference": "size/ctrl/default", "optional": true, @@ -6686,7 +6699,7 @@ "cssName": "--smtc-ctrl-avatar-size" }, "ctrlAvatarCornerItem": { - "no": 479, + "no": 480, "name": "CTRL/avatar/corner/item", "fst_reference": "corner/circular", "optional": true, @@ -6699,7 +6712,7 @@ "cssName": "--smtc-ctrl-avatar-corner-item" }, "ctrlAvatarBackground": { - "no": 480, + "no": 481, "name": "CTRL/avatar/background", "fst_reference": "", "optional": false, @@ -6712,7 +6725,7 @@ "cssName": "--smtc-ctrl-avatar-background" }, "ctrlAvatarForeground": { - "no": 481, + "no": 482, "name": "CTRL/avatar/foreground", "fst_reference": "", "optional": false, @@ -6725,7 +6738,7 @@ "cssName": "--smtc-ctrl-avatar-foreground" }, "ctrlAvatarIconSize": { - "no": 482, + "no": 483, "name": "CTRL/avatar/icon/size", "fst_reference": "size/ctrl/icon", "optional": true, @@ -6737,8 +6750,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-avatar-icon-size" }, - "ctrlAvatarPresencebadgeSize": { - "no": 483, + "ctrlAvatarPresenceBadgeSize": { + "no": 484, "name": "CTRL/avatar/presenceBadge/size", "fst_reference": "", "optional": false, @@ -6748,10 +6761,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-avatar-presencebadge-size" + "cssName": "--smtc-ctrl-avatar-presence-badge-size" }, - "ctrlAvatarActiveringSize": { - "no": 484, + "ctrlAvatarActiveRingSize": { + "no": 485, "name": "CTRL/avatar/activeRing/size", "fst_reference": "", "optional": false, @@ -6761,10 +6774,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-avatar-activering-size" + "cssName": "--smtc-ctrl-avatar-active-ring-size" }, - "ctrlAvatarPresencebadgePaddingBottomrightoffset": { - "no": 485, + "ctrlAvatarPresenceBadgePaddingBottomRightOffset": { + "no": 486, "name": "CTRL/avatar/presenceBadge/padding/bottomRightOffset", "fst_reference": "strokeWidth/default", "optional": true, @@ -6774,10 +6787,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-avatar-presencebadge-padding-bottomrightoffset" + "cssName": "--smtc-ctrl-avatar-presence-badge-padding-bottom-right-offset" }, "ctrlAvatarCornerGroup": { - "no": 486, + "no": 487, "name": "CTRL/avatar/corner/group", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -6789,8 +6802,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-avatar-corner-group" }, - "ctrlAvatarActiveringStrokewidth": { - "no": 487, + "ctrlAvatarActiveRingStrokeWidth": { + "no": 488, "name": "CTRL/avatar/activeRing/strokeWidth", "fst_reference": "", "optional": false, @@ -6800,10 +6813,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-avatar-activering-strokewidth" + "cssName": "--smtc-ctrl-avatar-active-ring-stroke-width" }, - "ctrlAvatarPresencebadgeStrokewidth": { - "no": 488, + "ctrlAvatarPresenceBadgeStrokeWidth": { + "no": 489, "name": "CTRL/avatar/presenceBadge/strokeWidth", "fst_reference": "strokeWidth/default", "optional": true, @@ -6813,10 +6826,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-avatar-presencebadge-strokewidth" + "cssName": "--smtc-ctrl-avatar-presence-badge-stroke-width" }, - "ctrlAvatarTextFontsize": { - "no": 489, + "ctrlAvatarTextFontSize": { + "no": 490, "name": "CTRL/avatar/text/fontSize", "fst_reference": "text/global/body3/fontSize", "optional": true, @@ -6826,10 +6839,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-avatar-text-fontsize" + "cssName": "--smtc-ctrl-avatar-text-font-size" }, - "ctrlAvatarTextLineheight": { - "no": 490, + "ctrlAvatarTextLineHeight": { + "no": 491, "name": "CTRL/avatar/text/lineHeight", "fst_reference": "text/global/body3/lineHeight", "optional": true, @@ -6839,10 +6852,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-avatar-text-lineheight" + "cssName": "--smtc-ctrl-avatar-text-line-height" }, - "ctrlAvatarTextPaddingTopoffset": { - "no": 491, + "ctrlAvatarTextPaddingTopOffset": { + "no": 492, "name": "CTRL/avatar/text/padding/topOffset", "fst_reference": "NULL/number", "optional": false, @@ -6852,10 +6865,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-avatar-text-padding-topoffset" + "cssName": "--smtc-ctrl-avatar-text-padding-top-offset" }, - "ctrlAvatarActiveringStroke": { - "no": 492, + "ctrlAvatarActiveRingStroke": { + "no": 493, "name": "CTRL/avatar/activeRing/stroke", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -6865,10 +6878,10 @@ "contrast": "", "fallback": "Color/Avatar/Activering", "exceptions": [], - "cssName": "--smtc-ctrl-avatar-activering-stroke" + "cssName": "--smtc-ctrl-avatar-active-ring-stroke" }, - "ctrlAvatarShowcutout": { - "no": 493, + "ctrlAvatarShowCutout": { + "no": 494, "name": "CTRL/avatar/showCutout", "fst_reference": "", "optional": false, @@ -6878,10 +6891,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-avatar-showcutout" + "cssName": "--smtc-ctrl-avatar-show-cutout" }, "ctrlBadgeTextPaddingTop": { - "no": 494, + "no": 495, "name": "CTRL/badge/text/padding/top", "fst_reference": "", "optional": false, @@ -6894,7 +6907,7 @@ "cssName": "--smtc-ctrl-badge-text-padding-top" }, "ctrlBadgeTextPaddingBottom": { - "no": 495, + "no": 496, "name": "CTRL/badge/text/padding/bottom", "fst_reference": "CTRL/badge/text/padding/top", "optional": true, @@ -6907,7 +6920,7 @@ "cssName": "--smtc-ctrl-badge-text-padding-bottom" }, "ctrlBadgeSmTextPaddingTop": { - "no": 496, + "no": 497, "name": "CTRL/badge/sm/text/padding/top", "fst_reference": "", "optional": false, @@ -6920,7 +6933,7 @@ "cssName": "--smtc-ctrl-badge-sm-text-padding-top" }, "ctrlBadgeSmTextPaddingBottom": { - "no": 497, + "no": 498, "name": "CTRL/badge/sm/text/padding/bottom", "fst_reference": "CTRL/badge/sm/text/padding/top", "optional": true, @@ -6933,7 +6946,7 @@ "cssName": "--smtc-ctrl-badge-sm-text-padding-bottom" }, "ctrlBadgeLgTextPaddingTop": { - "no": 498, + "no": 499, "name": "CTRL/badge/lg/text/padding/top", "fst_reference": "", "optional": false, @@ -6946,7 +6959,7 @@ "cssName": "--smtc-ctrl-badge-lg-text-padding-top" }, "ctrlBadgeLgTextPaddingBottom": { - "no": 499, + "no": 500, "name": "CTRL/badge/lg/text/padding/bottom", "fst_reference": "CTRL/badge/lg/text/padding/top", "optional": true, @@ -6959,7 +6972,7 @@ "cssName": "--smtc-ctrl-badge-lg-text-padding-bottom" }, "ctrlBadgeIconTheme": { - "no": 500, + "no": 501, "name": "CTRL/badge/icon/theme", "fst_reference": "iconTheme/ctrl/default/rest", "optional": true, @@ -6972,7 +6985,7 @@ "cssName": "--smtc-ctrl-badge-icon-theme" }, "ctrlBadgeBeaconSize": { - "no": 501, + "no": 502, "name": "CTRL/badge/beacon/size", "fst_reference": "", "optional": false, @@ -6985,7 +6998,7 @@ "cssName": "--smtc-ctrl-badge-beacon-size" }, "ctrlBadgeSize": { - "no": 502, + "no": 503, "name": "CTRL/badge/size", "fst_reference": "", "optional": false, @@ -6998,7 +7011,7 @@ "cssName": "--smtc-ctrl-badge-size" }, "ctrlBadgeCorner": { - "no": 503, + "no": 504, "name": "CTRL/badge/corner", "fst_reference": "", "optional": false, @@ -7010,9 +7023,9 @@ "exceptions": [], "cssName": "--smtc-ctrl-badge-corner" }, - "ctrlBadgeIconSizeFigmaonly": { - "no": 504, - "name": "CTRL/badge/icon/size(figmaonly)", + "ctrlBadgeGap": { + "no": 505, + "name": "CTRL/badge/gap", "fst_reference": "", "optional": false, "nullable": false, @@ -7021,11 +7034,11 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-badge-icon-sizefigmaonly" + "cssName": "--smtc-ctrl-badge-gap" }, - "ctrlBadgeGap": { - "no": 505, - "name": "CTRL/badge/gap", + "ctrlBadgeIconSizeFigmaonly": { + "no": 506, + "name": "CTRL/badge/icon/size(figmaonly)", "fst_reference": "", "optional": false, "nullable": false, @@ -7034,10 +7047,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-badge-gap" + "cssName": "--smtc-ctrl-badge-icon-size-figmaonly" }, "ctrlBadgeIconSize": { - "no": 506, + "no": 507, "name": "CTRL/badge/icon/size", "fst_reference": "", "optional": false, @@ -7050,7 +7063,7 @@ "cssName": "--smtc-ctrl-badge-icon-size" }, "ctrlBadgePadding": { - "no": 507, + "no": 508, "name": "CTRL/badge/padding", "fst_reference": "", "optional": false, @@ -7063,7 +7076,7 @@ "cssName": "--smtc-ctrl-badge-padding" }, "ctrlBadgeSmSize": { - "no": 508, + "no": 509, "name": "CTRL/badge/sm/size", "fst_reference": "", "optional": false, @@ -7076,7 +7089,7 @@ "cssName": "--smtc-ctrl-badge-sm-size" }, "ctrlBadgeSmCorner": { - "no": 509, + "no": 510, "name": "CTRL/badge/sm/corner", "fst_reference": "", "optional": false, @@ -7089,7 +7102,7 @@ "cssName": "--smtc-ctrl-badge-sm-corner" }, "ctrlBadgeSmIconSizeFigmaonly": { - "no": 510, + "no": 511, "name": "CTRL/badge/sm/icon/size(figmaonly)", "fst_reference": "", "optional": false, @@ -7099,10 +7112,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-badge-sm-icon-sizefigmaonly" + "cssName": "--smtc-ctrl-badge-sm-icon-size-figmaonly" }, "ctrlBadgeSmIconSize": { - "no": 511, + "no": 512, "name": "CTRL/badge/sm/icon/size", "fst_reference": "", "optional": false, @@ -7115,7 +7128,7 @@ "cssName": "--smtc-ctrl-badge-sm-icon-size" }, "ctrlBadgeSmPadding": { - "no": 512, + "no": 513, "name": "CTRL/badge/sm/padding", "fst_reference": "", "optional": false, @@ -7128,7 +7141,7 @@ "cssName": "--smtc-ctrl-badge-sm-padding" }, "ctrlBadgeLgSize": { - "no": 513, + "no": 514, "name": "CTRL/badge/lg/size", "fst_reference": "", "optional": false, @@ -7141,7 +7154,7 @@ "cssName": "--smtc-ctrl-badge-lg-size" }, "ctrlBadgeLgIconSizeFigmaonly": { - "no": 514, + "no": 515, "name": "CTRL/badge/lg/icon/size(figmaonly)", "fst_reference": "", "optional": false, @@ -7151,10 +7164,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-badge-lg-icon-sizefigmaonly" + "cssName": "--smtc-ctrl-badge-lg-icon-size-figmaonly" }, "ctrlBadgeLgIconSize": { - "no": 515, + "no": 516, "name": "CTRL/badge/lg/icon/size", "fst_reference": "", "optional": false, @@ -7167,7 +7180,7 @@ "cssName": "--smtc-ctrl-badge-lg-icon-size" }, "ctrlBadgeLgCorner": { - "no": 516, + "no": 517, "name": "CTRL/badge/lg/corner", "fst_reference": "", "optional": false, @@ -7180,7 +7193,7 @@ "cssName": "--smtc-ctrl-badge-lg-corner" }, "ctrlBadgeLgPadding": { - "no": 517, + "no": 518, "name": "CTRL/badge/lg/padding", "fst_reference": "", "optional": false, @@ -7193,7 +7206,7 @@ "cssName": "--smtc-ctrl-badge-lg-padding" }, "ctrlChoicePaddingHorizontal": { - "no": 518, + "no": 519, "name": "CTRL/choice/padding/horizontal", "fst_reference": "", "optional": false, @@ -7206,7 +7219,7 @@ "cssName": "--smtc-ctrl-choice-padding-horizontal" }, "ctrlChoicePaddingVertical": { - "no": 519, + "no": 520, "name": "CTRL/choice/padding/vertical", "fst_reference": "", "optional": false, @@ -7219,7 +7232,7 @@ "cssName": "--smtc-ctrl-choice-padding-vertical" }, "ctrlChoiceBaseSize": { - "no": 520, + "no": 521, "name": "CTRL/choice/base/size", "fst_reference": "size/ctrl/icon", "optional": true, @@ -7232,7 +7245,7 @@ "cssName": "--smtc-ctrl-choice-base-size" }, "ctrlChoiceIconTheme": { - "no": 521, + "no": 522, "name": "CTRL/choice/icon/theme", "fst_reference": "", "optional": false, @@ -7245,7 +7258,7 @@ "cssName": "--smtc-ctrl-choice-icon-theme" }, "ctrlChoiceBaseBackgroundRest": { - "no": 522, + "no": 523, "name": "CTRL/choice/base/background/rest", "fst_reference": "background/ctrl/outline/rest", "optional": true, @@ -7258,7 +7271,7 @@ "cssName": "--smtc-ctrl-choice-base-background-rest" }, "ctrlChoiceBaseBackgroundHover": { - "no": 523, + "no": 524, "name": "CTRL/choice/base/background/hover", "fst_reference": "background/ctrl/outline/hover", "optional": true, @@ -7271,7 +7284,7 @@ "cssName": "--smtc-ctrl-choice-base-background-hover" }, "ctrlChoiceBaseBackgroundPressed": { - "no": 524, + "no": 525, "name": "CTRL/choice/base/background/pressed", "fst_reference": "background/ctrl/outline/pressed", "optional": true, @@ -7284,7 +7297,7 @@ "cssName": "--smtc-ctrl-choice-base-background-pressed" }, "ctrlChoiceBaseBackgroundDisabled": { - "no": 525, + "no": 526, "name": "CTRL/choice/base/background/disabled", "fst_reference": "background/ctrl/outline/disabled", "optional": true, @@ -7297,7 +7310,7 @@ "cssName": "--smtc-ctrl-choice-base-background-disabled" }, "ctrlChoiceBaseStrokeRest": { - "no": 526, + "no": 527, "name": "CTRL/choice/base/stroke/rest", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -7310,7 +7323,7 @@ "cssName": "--smtc-ctrl-choice-base-stroke-rest" }, "ctrlChoiceBaseStrokeHover": { - "no": 527, + "no": 528, "name": "CTRL/choice/base/stroke/hover", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -7323,7 +7336,7 @@ "cssName": "--smtc-ctrl-choice-base-stroke-hover" }, "ctrlChoiceBaseStrokePressed": { - "no": 528, + "no": 529, "name": "CTRL/choice/base/stroke/pressed", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -7336,7 +7349,7 @@ "cssName": "--smtc-ctrl-choice-base-stroke-pressed" }, "ctrlChoiceBaseStrokeDisabled": { - "no": 529, + "no": 530, "name": "CTRL/choice/base/stroke/disabled", "fst_reference": "foreground/ctrl/neutral/secondary/disabled", "optional": true, @@ -7349,7 +7362,7 @@ "cssName": "--smtc-ctrl-choice-base-stroke-disabled" }, "ctrlChoiceCheckboxIconSize": { - "no": 530, + "no": 531, "name": "CTRL/choice/checkbox/icon/size", "fst_reference": "size/ctrl/iconSecondary", "optional": true, @@ -7362,7 +7375,7 @@ "cssName": "--smtc-ctrl-choice-checkbox-icon-size" }, "ctrlChoiceCheckboxCorner": { - "no": 531, + "no": 532, "name": "CTRL/choice/checkbox/corner", "fst_reference": "", "optional": false, @@ -7375,7 +7388,7 @@ "cssName": "--smtc-ctrl-choice-checkbox-corner" }, "ctrlChoiceCheckboxIndeterminateCorner": { - "no": 532, + "no": 533, "name": "CTRL/choice/checkbox/indeterminate/corner", "fst_reference": "corner/circular", "optional": true, @@ -7387,9 +7400,9 @@ "exceptions": [], "cssName": "--smtc-ctrl-choice-checkbox-indeterminate-corner" }, - "ctrlChoiceCheckboxIndeterminateHeight": { - "no": 533, - "name": "CTRL/choice/checkbox/indeterminate/height", + "ctrlChoiceCheckboxIndeterminateWidth": { + "no": 534, + "name": "CTRL/choice/checkbox/indeterminate/width", "fst_reference": "", "optional": false, "nullable": false, @@ -7398,11 +7411,11 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-choice-checkbox-indeterminate-height" + "cssName": "--smtc-ctrl-choice-checkbox-indeterminate-width" }, - "ctrlChoiceCheckboxIndeterminateWidth": { - "no": 534, - "name": "CTRL/choice/checkbox/indeterminate/width", + "ctrlChoiceCheckboxIndeterminateHeight": { + "no": 535, + "name": "CTRL/choice/checkbox/indeterminate/height", "fst_reference": "", "optional": false, "nullable": false, @@ -7411,10 +7424,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-choice-checkbox-indeterminate-width" + "cssName": "--smtc-ctrl-choice-checkbox-indeterminate-height" }, "ctrlChoiceRadioCorner": { - "no": 535, + "no": 536, "name": "CTRL/choice/radio/corner", "fst_reference": "corner/circular", "optional": true, @@ -7427,7 +7440,7 @@ "cssName": "--smtc-ctrl-choice-radio-corner" }, "ctrlChoiceSwitchCorner": { - "no": 536, + "no": 537, "name": "CTRL/choice/switch/corner", "fst_reference": "corner/circular", "optional": true, @@ -7439,44 +7452,31 @@ "exceptions": [], "cssName": "--smtc-ctrl-choice-switch-corner" }, - "ctrlChoiceRadioDotSizeRest": { - "no": 537, - "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": { + "ctrlChoiceSwitchHeight": { "no": 538, - "name": "CTRL/choice/radio/dot/size/hover", - "fst_reference": "CTRL/choice/radio/dot/size/rest", + "name": "CTRL/choice/switch/height", + "fst_reference": "size/ctrl/icon", "optional": true, "nullable": false, "description": "", - "components": [], + "components": [" Switch"], "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-choice-radio-dot-size-hover" + "cssName": "--smtc-ctrl-choice-switch-height" }, - "ctrlChoiceRadioDotSizePressed": { + "ctrlChoiceSwitchWidth": { "no": 539, - "name": "CTRL/choice/radio/dot/size/pressed", - "fst_reference": "CTRL/choice/radio/dot/size/rest", - "optional": true, + "name": "CTRL/choice/switch/width", + "fst_reference": "", + "optional": false, "nullable": false, "description": "", - "components": [], + "components": [" Switch"], "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-choice-radio-dot-size-pressed" + "cssName": "--smtc-ctrl-choice-switch-width" }, "ctrlChoiceSwitchPaddingRest": { "no": 540, @@ -7517,60 +7517,34 @@ "exceptions": [], "cssName": "--smtc-ctrl-choice-switch-padding-pressed" }, - "ctrlChoiceSwitchHeight": { + "ctrlChoiceSwitchThumbWidthRest": { "no": 543, - "name": "CTRL/choice/switch/height", - "fst_reference": "size/ctrl/icon", - "optional": true, + "name": "CTRL/choice/switch/thumb/width/rest", + "fst_reference": "", + "optional": false, "nullable": false, "description": "", "components": [" Switch"], "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-choice-switch-height" + "cssName": "--smtc-ctrl-choice-switch-thumb-width-rest" }, - "ctrlChoiceSwitchWidth": { + "ctrlChoiceSwitchThumbWidthHover": { "no": 544, - "name": "CTRL/choice/switch/width", - "fst_reference": "", - "optional": false, + "name": "CTRL/choice/switch/thumb/width/hover", + "fst_reference": "CTRL/choice/switch/thumb/width/rest", + "optional": true, "nullable": false, "description": "", - "components": [" Switch"], + "components": [], "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-choice-switch-width" + "cssName": "--smtc-ctrl-choice-switch-thumb-width-hover" }, - "ctrlChoiceSwitchThumbWidthRest": { + "ctrlChoiceSwitchThumbWidthPressed": { "no": 545, - "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": 546, - "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": 547, "name": "CTRL/choice/switch/thumb/width/pressed", "fst_reference": "CTRL/choice/switch/thumb/width/rest", "optional": true, @@ -7583,7 +7557,7 @@ "cssName": "--smtc-ctrl-choice-switch-thumb-width-pressed" }, "ctrlChoiceSwitchThumbShadowKeyX": { - "no": 548, + "no": 546, "name": "CTRL/choice/switch/thumb/shadow/(key)/(x)", "fst_reference": "NULL/number", "optional": false, @@ -7596,7 +7570,7 @@ "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-key-x" }, "ctrlChoiceSwitchThumbShadowKeyY": { - "no": 549, + "no": 547, "name": "CTRL/choice/switch/thumb/shadow/(key)/(y)", "fst_reference": "NULL/number", "optional": false, @@ -7609,7 +7583,7 @@ "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-key-y" }, "ctrlChoiceSwitchThumbShadowKeyBlur": { - "no": 550, + "no": 548, "name": "CTRL/choice/switch/thumb/shadow/(key)/(blur)", "fst_reference": "NULL/number", "optional": false, @@ -7622,7 +7596,7 @@ "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-key-blur" }, "ctrlChoiceSwitchThumbShadowKeyColor": { - "no": 551, + "no": 549, "name": "CTRL/choice/switch/thumb/shadow/(key)/(color)", "fst_reference": "NULL/color", "optional": false, @@ -7635,7 +7609,7 @@ "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-key-color" }, "ctrlChoiceSwitchThumbShadowAmbientX": { - "no": 552, + "no": 550, "name": "CTRL/choice/switch/thumb/shadow/(ambient)/(x)", "fst_reference": "NULL/number", "optional": false, @@ -7648,7 +7622,7 @@ "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-ambient-x" }, "ctrlChoiceSwitchThumbShadowAmbientY": { - "no": 553, + "no": 551, "name": "CTRL/choice/switch/thumb/shadow/(ambient)/(y)", "fst_reference": "NULL/number", "optional": false, @@ -7661,7 +7635,7 @@ "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-ambient-y" }, "ctrlChoiceSwitchThumbShadowAmbientBlur": { - "no": 554, + "no": 552, "name": "CTRL/choice/switch/thumb/shadow/(ambient)/(blur)", "fst_reference": "NULL/number", "optional": false, @@ -7674,7 +7648,7 @@ "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-ambient-blur" }, "ctrlChoiceSwitchThumbShadowAmbientColor": { - "no": 555, + "no": 553, "name": "CTRL/choice/switch/thumb/shadow/(ambient)/(color)", "fst_reference": "NULL/color", "optional": false, @@ -7686,10 +7660,36 @@ "exceptions": [], "cssName": "--smtc-ctrl-choice-switch-thumb-shadow-ambient-color" }, - "ctrlChoiceSmBaseSize": { + "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/sm/base/size", - "fst_reference": "size/ctrl-sm/icon", + "name": "CTRL/choice/radio/dot/size/pressed", + "fst_reference": "CTRL/choice/radio/dot/size/rest", "optional": true, "nullable": false, "description": "", @@ -7697,20 +7697,20 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-choice-sm-base-size" + "cssName": "--smtc-ctrl-choice-radio-dot-size-pressed" }, - "ctrlChoiceSmCheckboxCorner": { + "ctrlChoiceSmBaseSize": { "no": 557, - "name": "CTRL/choice/sm/checkbox/corner", - "fst_reference": "", - "optional": false, + "name": "CTRL/choice/sm/base/size", + "fst_reference": "size/ctrl-sm/icon", + "optional": true, "nullable": false, "description": "", "components": [], "contrast": "", - "fallback": "Small", + "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-choice-sm-checkbox-corner" + "cssName": "--smtc-ctrl-choice-sm-base-size" }, "ctrlChoiceSmCheckboxIconSize": { "no": 558, @@ -7725,8 +7725,21 @@ "exceptions": [], "cssName": "--smtc-ctrl-choice-sm-checkbox-icon-size" }, - "ctrlChoiceSmCheckboxIconSizeFigmaonly": { + "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, @@ -7736,10 +7749,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-choice-sm-checkbox-icon-sizefigmaonly" + "cssName": "--smtc-ctrl-choice-sm-checkbox-icon-size-figmaonly" }, "ctrlChoiceSmRadioDotSize": { - "no": 560, + "no": 561, "name": "CTRL/choice/sm/radio/dot/size", "fst_reference": "", "optional": false, @@ -7752,7 +7765,7 @@ "cssName": "--smtc-ctrl-choice-sm-radio-dot-size" }, "ctrlChoiceSmSwitchWidth": { - "no": 561, + "no": 562, "name": "CTRL/choice/sm/switch/width", "fst_reference": "", "optional": false, @@ -7765,7 +7778,7 @@ "cssName": "--smtc-ctrl-choice-sm-switch-width" }, "ctrlChoiceSmSwitchHeight": { - "no": 562, + "no": 563, "name": "CTRL/choice/sm/switch/height", "fst_reference": "size/ctrl-sm/icon", "optional": true, @@ -7778,7 +7791,7 @@ "cssName": "--smtc-ctrl-choice-sm-switch-height" }, "ctrlChoiceSmSwitchThumbWidthRest": { - "no": 563, + "no": 564, "name": "CTRL/choice/sm/switch/thumb/width/rest", "fst_reference": "", "optional": false, @@ -7791,7 +7804,7 @@ "cssName": "--smtc-ctrl-choice-sm-switch-thumb-width-rest" }, "ctrlChoiceSmSwitchThumbWidthHover": { - "no": 564, + "no": 565, "name": "CTRL/choice/sm/switch/thumb/width/hover", "fst_reference": "CTRL/choice/sm/switch/thumb/width/rest", "optional": true, @@ -7804,7 +7817,7 @@ "cssName": "--smtc-ctrl-choice-sm-switch-thumb-width-hover" }, "ctrlChoiceSmSwitchThumbWidthPressed": { - "no": 565, + "no": 566, "name": "CTRL/choice/sm/switch/thumb/width/pressed", "fst_reference": "CTRL/choice/sm/switch/thumb/width/rest", "optional": true, @@ -7817,7 +7830,7 @@ "cssName": "--smtc-ctrl-choice-sm-switch-thumb-width-pressed" }, "ctrlChoiceLgBaseSize": { - "no": 566, + "no": 567, "name": "CTRL/choice/lg/base/size", "fst_reference": "size/ctrl-lg/icon", "optional": true, @@ -7830,7 +7843,7 @@ "cssName": "--smtc-ctrl-choice-lg-base-size" }, "ctrlChoiceLgCheckboxCorner": { - "no": 567, + "no": 568, "name": "CTRL/choice/lg/checkbox/corner", "fst_reference": "", "optional": false, @@ -7843,7 +7856,7 @@ "cssName": "--smtc-ctrl-choice-lg-checkbox-corner" }, "ctrlChoiceLgCheckboxIconSize": { - "no": 568, + "no": 569, "name": "CTRL/choice/lg/checkbox/icon/size", "fst_reference": "size/ctrl/iconSecondary", "optional": true, @@ -7856,7 +7869,7 @@ "cssName": "--smtc-ctrl-choice-lg-checkbox-icon-size" }, "ctrlChoiceLgCheckboxIconSizeFigmaonly": { - "no": 569, + "no": 570, "name": "CTRL/choice/lg/checkbox/icon/size(figmaonly)", "fst_reference": "", "optional": false, @@ -7866,10 +7879,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-choice-lg-checkbox-icon-sizefigmaonly" + "cssName": "--smtc-ctrl-choice-lg-checkbox-icon-size-figmaonly" }, "ctrlChoiceLgRadioDotSizeRest": { - "no": 570, + "no": 571, "name": "CTRL/choice/lg/radio/dot/size/rest", "fst_reference": "", "optional": false, @@ -7882,7 +7895,7 @@ "cssName": "--smtc-ctrl-choice-lg-radio-dot-size-rest" }, "ctrlChoiceLgRadioDotSizeHover": { - "no": 571, + "no": 572, "name": "CTRL/choice/lg/radio/dot/size/hover", "fst_reference": "CTRL/choice/lg/radio/dot/size/rest", "optional": true, @@ -7895,7 +7908,7 @@ "cssName": "--smtc-ctrl-choice-lg-radio-dot-size-hover" }, "ctrlChoiceLgRadioDotSizePressed": { - "no": 572, + "no": 573, "name": "CTRL/choice/lg/radio/dot/size/pressed", "fst_reference": "CTRL/choice/lg/radio/dot/size/rest", "optional": true, @@ -7908,7 +7921,7 @@ "cssName": "--smtc-ctrl-choice-lg-radio-dot-size-pressed" }, "ctrlChoiceLgSwitchWidth": { - "no": 573, + "no": 574, "name": "CTRL/choice/lg/switch/width", "fst_reference": "", "optional": false, @@ -7921,7 +7934,7 @@ "cssName": "--smtc-ctrl-choice-lg-switch-width" }, "ctrlChoiceLgSwitchHeight": { - "no": 574, + "no": 575, "name": "CTRL/choice/lg/switch/height", "fst_reference": "size/ctrl-lg/icon", "optional": true, @@ -7934,7 +7947,7 @@ "cssName": "--smtc-ctrl-choice-lg-switch-height" }, "ctrlChoiceLgSwitchThumbWidthRest": { - "no": 575, + "no": 576, "name": "CTRL/choice/lg/switch/thumb/width/rest", "fst_reference": "", "optional": false, @@ -7947,7 +7960,7 @@ "cssName": "--smtc-ctrl-choice-lg-switch-thumb-width-rest" }, "ctrlChoiceLgSwitchThumbWidthHover": { - "no": 576, + "no": 577, "name": "CTRL/choice/lg/switch/thumb/width/hover", "fst_reference": "CTRL/choice/lg/switch/thumb/width/rest", "optional": true, @@ -7960,7 +7973,7 @@ "cssName": "--smtc-ctrl-choice-lg-switch-thumb-width-hover" }, "ctrlChoiceLgSwitchThumbWidthPressed": { - "no": 577, + "no": 578, "name": "CTRL/choice/lg/switch/thumb/width/pressed", "fst_reference": "CTRL/choice/lg/switch/thumb/width/rest", "optional": true, @@ -7973,7 +7986,7 @@ "cssName": "--smtc-ctrl-choice-lg-switch-thumb-width-pressed" }, "ctrlDialogBackground": { - "no": 578, + "no": 579, "name": "CTRL/dialog/background", "fst_reference": "", "optional": false, @@ -7986,7 +7999,7 @@ "cssName": "--smtc-ctrl-dialog-background" }, "ctrlDialogStroke": { - "no": 579, + "no": 580, "name": "CTRL/dialog/stroke", "fst_reference": "NULL/color", "optional": false, @@ -7999,7 +8012,7 @@ "cssName": "--smtc-ctrl-dialog-stroke" }, "ctrlDialogBaseCorner": { - "no": 580, + "no": 581, "name": "CTRL/dialog/base/corner", "fst_reference": "corner/card/rest", "optional": true, @@ -8012,7 +8025,7 @@ "cssName": "--smtc-ctrl-dialog-base-corner" }, "ctrlDialogBaseShadowKeyX": { - "no": 581, + "no": 582, "name": "CTRL/dialog/base/shadow/(key)/(X)", "fst_reference": "", "optional": false, @@ -8025,7 +8038,7 @@ "cssName": "--smtc-ctrl-dialog-base-shadow-key-x" }, "ctrlDialogBaseShadowKeyY": { - "no": 582, + "no": 583, "name": "CTRL/dialog/base/shadow/(key)/(Y)", "fst_reference": "", "optional": false, @@ -8038,7 +8051,7 @@ "cssName": "--smtc-ctrl-dialog-base-shadow-key-y" }, "ctrlDialogBaseShadowKeyBlur": { - "no": 583, + "no": 584, "name": "CTRL/dialog/base/shadow/(key)/(Blur)", "fst_reference": "", "optional": false, @@ -8051,7 +8064,7 @@ "cssName": "--smtc-ctrl-dialog-base-shadow-key-blur" }, "ctrlDialogBaseShadowKeyColor": { - "no": 584, + "no": 585, "name": "CTRL/dialog/base/shadow/(key)/(Color)", "fst_reference": "", "optional": false, @@ -8064,7 +8077,7 @@ "cssName": "--smtc-ctrl-dialog-base-shadow-key-color" }, "ctrlDialogBaseShadowAmbientX": { - "no": 585, + "no": 586, "name": "CTRL/dialog/base/shadow/(ambient)/(X)", "fst_reference": "", "optional": false, @@ -8077,7 +8090,7 @@ "cssName": "--smtc-ctrl-dialog-base-shadow-ambient-x" }, "ctrlDialogBaseShadowAmbientY": { - "no": 586, + "no": 587, "name": "CTRL/dialog/base/shadow/(ambient)/(Y)", "fst_reference": "", "optional": false, @@ -8090,7 +8103,7 @@ "cssName": "--smtc-ctrl-dialog-base-shadow-ambient-y" }, "ctrlDialogBaseShadowAmbientBlur": { - "no": 587, + "no": 588, "name": "CTRL/dialog/base/shadow/(ambient)/(Blur)", "fst_reference": "", "optional": false, @@ -8103,7 +8116,7 @@ "cssName": "--smtc-ctrl-dialog-base-shadow-ambient-blur" }, "ctrlDialogBaseShadowAmbientColor": { - "no": 588, + "no": 589, "name": "CTRL/dialog/base/shadow/(ambient)/(Color)", "fst_reference": "", "optional": false, @@ -8116,7 +8129,7 @@ "cssName": "--smtc-ctrl-dialog-base-shadow-ambient-color" }, "ctrlDialogLayerBackground": { - "no": 589, + "no": 590, "name": "CTRL/dialog/layer/background", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -8129,7 +8142,7 @@ "cssName": "--smtc-ctrl-dialog-layer-background" }, "ctrlDialogLayerPaddingBottom": { - "no": 590, + "no": 591, "name": "CTRL/dialog/layer/padding-bottom", "fst_reference": "", "optional": false, @@ -8141,8 +8154,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-dialog-layer-padding-bottom" }, - "ctrlDividerFixedlineLength": { - "no": 591, + "ctrlDividerFixedLineLength": { + "no": 592, "name": "CTRL/divider/fixedLine/length", "fst_reference": "padding/content/align/default", "optional": true, @@ -8152,10 +8165,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-divider-fixedline-length" + "cssName": "--smtc-ctrl-divider-fixed-line-length" }, "ctrlDragBackgroundSolid": { - "no": 592, + "no": 593, "name": "CTRL/drag/background/(solid)", "fst_reference": "", "optional": false, @@ -8167,8 +8180,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-drag-background-solid" }, - "ctrlDragBackgroundColorblend": { - "no": 593, + "ctrlDragBackgroundColorBlend": { + "no": 594, "name": "CTRL/drag/background/(colorBlend)", "fst_reference": "", "optional": false, @@ -8178,10 +8191,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-drag-background-colorblend" + "cssName": "--smtc-ctrl-drag-background-color-blend" }, - "ctrlDragBackgroundLumblend": { - "no": 594, + "ctrlDragBackgroundLumBlend": { + "no": 595, "name": "CTRL/drag/background/(lumBlend)", "fst_reference": "", "optional": false, @@ -8191,10 +8204,36 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-drag-background-lumblend" + "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": 595, + "no": 598, "name": "CTRL/fab/background/rest", "fst_reference": "", "optional": false, @@ -8207,7 +8246,7 @@ "cssName": "--smtc-ctrl-fab-background-rest" }, "ctrlFocusPositionFigmaonly": { - "no": 596, + "no": 599, "name": "CTRL/focus/position(figmaonly)", "fst_reference": "", "optional": false, @@ -8227,10 +8266,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-focus-positionfigmaonly" + "cssName": "--smtc-ctrl-focus-position-figmaonly" }, - "ctrlFocusInnerStrokewidth": { - "no": 597, + "ctrlFocusInnerStrokeWidth": { + "no": 600, "name": "CTRL/focus/inner/strokeWidth", "fst_reference": "strokeWidth/default", "optional": true, @@ -8256,10 +8295,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-focus-inner-strokewidth" + "cssName": "--smtc-ctrl-focus-inner-stroke-width" }, "ctrlFocusInnerStroke": { - "no": 598, + "no": 601, "name": "CTRL/focus/inner/stroke", "fst_reference": "", "optional": false, @@ -8287,8 +8326,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-focus-inner-stroke" }, - "ctrlFocusOuterStrokewidth": { - "no": 599, + "ctrlFocusOuterStrokeWidth": { + "no": 602, "name": "CTRL/focus/outer/strokeWidth", "fst_reference": "", "optional": false, @@ -8314,10 +8353,10 @@ "contrast": "", "fallback": "Thick", "exceptions": [], - "cssName": "--smtc-ctrl-focus-outer-strokewidth" + "cssName": "--smtc-ctrl-focus-outer-stroke-width" }, "ctrlFocusOuterStroke": { - "no": 600, + "no": 603, "name": "CTRL/focus/outer/stroke", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -8346,7 +8385,7 @@ "cssName": "--smtc-ctrl-focus-outer-stroke" }, "ctrlFabBackgroundHover": { - "no": 601, + "no": 604, "name": "CTRL/fab/background/hover", "fst_reference": "", "optional": false, @@ -8359,7 +8398,7 @@ "cssName": "--smtc-ctrl-fab-background-hover" }, "ctrlFabBackgroundPressed": { - "no": 602, + "no": 605, "name": "CTRL/fab/background/pressed", "fst_reference": "", "optional": false, @@ -8372,7 +8411,7 @@ "cssName": "--smtc-ctrl-fab-background-pressed" }, "ctrlFabBackgroundDisabled": { - "no": 603, + "no": 606, "name": "CTRL/fab/background/disabled", "fst_reference": "", "optional": false, @@ -8385,7 +8424,7 @@ "cssName": "--smtc-ctrl-fab-background-disabled" }, "ctrlFabCornerRest": { - "no": 604, + "no": 607, "name": "CTRL/fab/corner/rest", "fst_reference": "corner/circular", "optional": true, @@ -8398,7 +8437,7 @@ "cssName": "--smtc-ctrl-fab-corner-rest" }, "ctrlFabShadowRestKeyX": { - "no": 605, + "no": 608, "name": "CTRL/fab/shadow/rest/(key)/(x)", "fst_reference": "", "optional": false, @@ -8411,7 +8450,7 @@ "cssName": "--smtc-ctrl-fab-shadow-rest-key-x" }, "ctrlFabShadowRestKeyY": { - "no": 606, + "no": 609, "name": "CTRL/fab/shadow/rest/(key)/(y)", "fst_reference": "", "optional": false, @@ -8424,7 +8463,7 @@ "cssName": "--smtc-ctrl-fab-shadow-rest-key-y" }, "ctrlFabShadowRestKeyBlur": { - "no": 607, + "no": 610, "name": "CTRL/fab/shadow/rest/(key)/(blur)", "fst_reference": "", "optional": false, @@ -8437,7 +8476,7 @@ "cssName": "--smtc-ctrl-fab-shadow-rest-key-blur" }, "ctrlFabShadowRestKeyColor": { - "no": 608, + "no": 611, "name": "CTRL/fab/shadow/rest/(key)/(color)", "fst_reference": "", "optional": false, @@ -8450,7 +8489,7 @@ "cssName": "--smtc-ctrl-fab-shadow-rest-key-color" }, "ctrlFabShadowRestAmbientX": { - "no": 609, + "no": 612, "name": "CTRL/fab/shadow/rest/(ambient)/(x)", "fst_reference": "", "optional": false, @@ -8463,7 +8502,7 @@ "cssName": "--smtc-ctrl-fab-shadow-rest-ambient-x" }, "ctrlFabShadowRestAmbientY": { - "no": 610, + "no": 613, "name": "CTRL/fab/shadow/rest/(ambient)/(y)", "fst_reference": "", "optional": false, @@ -8476,7 +8515,7 @@ "cssName": "--smtc-ctrl-fab-shadow-rest-ambient-y" }, "ctrlFabShadowRestAmbientBlur": { - "no": 611, + "no": 614, "name": "CTRL/fab/shadow/rest/(ambient)/(blur)", "fst_reference": "", "optional": false, @@ -8489,7 +8528,7 @@ "cssName": "--smtc-ctrl-fab-shadow-rest-ambient-blur" }, "ctrlFabShadowRestAmbientColor": { - "no": 612, + "no": 615, "name": "CTRL/fab/shadow/rest/(ambient)/(color)", "fst_reference": "", "optional": false, @@ -8502,7 +8541,7 @@ "cssName": "--smtc-ctrl-fab-shadow-rest-ambient-color" }, "ctrlFabShadowHoverKeyX": { - "no": 613, + "no": 616, "name": "CTRL/fab/shadow/hover/(key)/(x)", "fst_reference": "shadow/flyout/(key)/(x)", "optional": true, @@ -8515,7 +8554,7 @@ "cssName": "--smtc-ctrl-fab-shadow-hover-key-x" }, "ctrlFabShadowHoverKeyY": { - "no": 614, + "no": 617, "name": "CTRL/fab/shadow/hover/(key)/(y)", "fst_reference": "shadow/flyout/(key)/(y)", "optional": true, @@ -8528,7 +8567,7 @@ "cssName": "--smtc-ctrl-fab-shadow-hover-key-y" }, "ctrlFabShadowHoverKeyBlur": { - "no": 615, + "no": 618, "name": "CTRL/fab/shadow/hover/(key)/(blur)", "fst_reference": "shadow/flyout/(key)/(blur)", "optional": true, @@ -8541,7 +8580,7 @@ "cssName": "--smtc-ctrl-fab-shadow-hover-key-blur" }, "ctrlFabShadowHoverKeyColor": { - "no": 616, + "no": 619, "name": "CTRL/fab/shadow/hover/(key)/(color)", "fst_reference": "shadow/flyout/(key)/(color)", "optional": true, @@ -8554,7 +8593,7 @@ "cssName": "--smtc-ctrl-fab-shadow-hover-key-color" }, "ctrlFabShadowPressedKeyX": { - "no": 617, + "no": 620, "name": "CTRL/fab/shadow/pressed/(key)/(x)", "fst_reference": "", "optional": false, @@ -8567,7 +8606,7 @@ "cssName": "--smtc-ctrl-fab-shadow-pressed-key-x" }, "ctrlFabShadowPressedKeyY": { - "no": 618, + "no": 621, "name": "CTRL/fab/shadow/pressed/(key)/(y)", "fst_reference": "", "optional": false, @@ -8580,7 +8619,7 @@ "cssName": "--smtc-ctrl-fab-shadow-pressed-key-y" }, "ctrlFabShadowPressedKeyBlur": { - "no": 619, + "no": 622, "name": "CTRL/fab/shadow/pressed/(key)/(blur)", "fst_reference": "", "optional": false, @@ -8593,7 +8632,7 @@ "cssName": "--smtc-ctrl-fab-shadow-pressed-key-blur" }, "ctrlFabShadowPressedKeyColor": { - "no": 620, + "no": 623, "name": "CTRL/fab/shadow/pressed/(key)/(color)", "fst_reference": "", "optional": false, @@ -8606,7 +8645,7 @@ "cssName": "--smtc-ctrl-fab-shadow-pressed-key-color" }, "ctrlFabShadowDisabledKeyX": { - "no": 621, + "no": 624, "name": "CTRL/fab/shadow/disabled/(key)/(x)", "fst_reference": "CTRL/fab/shadow/pressed/(key)/(x)", "optional": true, @@ -8619,7 +8658,7 @@ "cssName": "--smtc-ctrl-fab-shadow-disabled-key-x" }, "ctrlFabShadowDisabledKeyY": { - "no": 622, + "no": 625, "name": "CTRL/fab/shadow/disabled/(key)/(y)", "fst_reference": "CTRL/fab/shadow/pressed/(key)/(y)", "optional": true, @@ -8632,7 +8671,7 @@ "cssName": "--smtc-ctrl-fab-shadow-disabled-key-y" }, "ctrlFabShadowDisabledKeyBlur": { - "no": 623, + "no": 626, "name": "CTRL/fab/shadow/disabled/(key)/(blur)", "fst_reference": "CTRL/fab/shadow/pressed/(key)/(blur)", "optional": true, @@ -8645,7 +8684,7 @@ "cssName": "--smtc-ctrl-fab-shadow-disabled-key-blur" }, "ctrlFabShadowDisabledKeyColor": { - "no": 624, + "no": 627, "name": "CTRL/fab/shadow/disabled/(key)/(color)", "fst_reference": "CTRL/fab/shadow/pressed/(key)/(color)", "optional": true, @@ -8658,7 +8697,7 @@ "cssName": "--smtc-ctrl-fab-shadow-disabled-key-color" }, "ctrlFabCornerHover": { - "no": 625, + "no": 628, "name": "CTRL/fab/corner/hover", "fst_reference": "corner/circular", "optional": true, @@ -8671,7 +8710,7 @@ "cssName": "--smtc-ctrl-fab-corner-hover" }, "ctrlFabCornerPressed": { - "no": 626, + "no": 629, "name": "CTRL/fab/corner/pressed", "fst_reference": "corner/circular", "optional": true, @@ -8684,7 +8723,7 @@ "cssName": "--smtc-ctrl-fab-corner-pressed" }, "ctrlInputBackgroundRest": { - "no": 627, + "no": 630, "name": "CTRL/input/background/rest", "fst_reference": "background/ctrl/neutral/rest", "optional": true, @@ -8697,7 +8736,7 @@ "cssName": "--smtc-ctrl-input-background-rest" }, "ctrlInputBackgroundHover": { - "no": 628, + "no": 631, "name": "CTRL/input/background/hover", "fst_reference": "background/ctrl/neutral/hover", "optional": true, @@ -8710,7 +8749,7 @@ "cssName": "--smtc-ctrl-input-background-hover" }, "ctrlInputBackgroundPressed": { - "no": 629, + "no": 632, "name": "CTRL/input/background/pressed", "fst_reference": "background/ctrl/neutral/pressed", "optional": true, @@ -8723,7 +8762,7 @@ "cssName": "--smtc-ctrl-input-background-pressed" }, "ctrlInputBackgroundDisabled": { - "no": 630, + "no": 633, "name": "CTRL/input/background/disabled", "fst_reference": "background/ctrl/neutral/disabled", "optional": true, @@ -8743,7 +8782,7 @@ "cssName": "--smtc-ctrl-input-background-disabled" }, "ctrlInputBackgroundSelected": { - "no": 631, + "no": 634, "name": "CTRL/input/background/selected", "fst_reference": "background/ctrl/neutral/rest", "optional": true, @@ -8756,7 +8795,7 @@ "cssName": "--smtc-ctrl-input-background-selected" }, "ctrlInputBackgroundError": { - "no": 632, + "no": 635, "name": "CTRL/input/background/error", "fst_reference": "background/ctrl/neutral/rest", "optional": true, @@ -8769,7 +8808,7 @@ "cssName": "--smtc-ctrl-input-background-error" }, "ctrlInputStrokeRest": { - "no": 633, + "no": 636, "name": "CTRL/input/stroke/rest", "fst_reference": "stroke/ctrl/onOutline/rest", "optional": true, @@ -8781,29 +8820,22 @@ "exceptions": [], "cssName": "--smtc-ctrl-input-stroke-rest" }, - "ctrlInputBottomlineStrokewidthRest": { - "no": 634, - "name": "CTRL/input/bottomLine/strokeWidth/rest", + "ctrlInputStrokeWidthRest": { + "no": 637, + "name": "CTRL/input/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" - ], + "components": [], "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-input-bottomline-strokewidth-rest" + "cssName": "--smtc-ctrl-input-stroke-width-rest" }, - "ctrlInputStrokewidthRest": { - "no": 635, - "name": "CTRL/input/strokeWidth/rest", + "ctrlInputStrokeWidthHover": { + "no": 638, + "name": "CTRL/input/strokeWidth/hover", "fst_reference": "strokeWidth/default", "optional": true, "nullable": false, @@ -8812,75 +8844,82 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-input-strokewidth-rest" + "cssName": "--smtc-ctrl-input-stroke-width-hover" }, - "ctrlInputTextselectionBackground": { - "no": 636, - "name": "CTRL/input/textSelection/background", - "fst_reference": "background/ctrl/brand/rest", + "ctrlInputStrokeWidthPressed": { + "no": 639, + "name": "CTRL/input/strokeWidth/pressed", + "fst_reference": "strokeWidth/default", "optional": true, "nullable": false, "description": "", "components": [], "contrast": "", - "fallback": "background/ctrl/activeBrand/rest", + "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-input-textselection-background" + "cssName": "--smtc-ctrl-input-stroke-width-pressed" }, - "ctrlInputTextselectionForeground": { - "no": 637, - "name": "CTRL/input/textSelection/foreground", - "fst_reference": "foreground/ctrl/onBrand/rest", - "optional": true, + "ctrlInputStrokeWidthSelected": { + "no": 640, + "name": "CTRL/input/strokeWidth/selected", + "fst_reference": "", + "optional": false, "nullable": false, "description": "", "components": [], "contrast": "", - "fallback": "Neutral/Foreground/4/Rest", + "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-input-textselection-foreground" + "cssName": "--smtc-ctrl-input-stroke-width-selected" }, - "ctrlInputStrokewidthHover": { - "no": 638, - "name": "CTRL/input/strokeWidth/hover", + "ctrlInputBottomLineStrokeWidthRest": { + "no": 641, + "name": "CTRL/input/bottomLine/strokeWidth/rest", "fst_reference": "strokeWidth/default", "optional": true, "nullable": false, "description": "", - "components": [], + "components": [ + "Text input box", + "Search box", + "Password input box", + "Editable dropdown", + "Editable spin button", + "Text area" + ], "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-input-strokewidth-hover" + "cssName": "--smtc-ctrl-input-bottom-line-stroke-width-rest" }, - "ctrlInputStrokewidthPressed": { - "no": 639, - "name": "CTRL/input/strokeWidth/pressed", - "fst_reference": "strokeWidth/default", + "ctrlInputTextSelectionBackground": { + "no": 642, + "name": "CTRL/input/textSelection/background", + "fst_reference": "background/ctrl/brand/rest", "optional": true, "nullable": false, "description": "", "components": [], "contrast": "", - "fallback": "Thin", + "fallback": "background/ctrl/activeBrand/rest", "exceptions": [], - "cssName": "--smtc-ctrl-input-strokewidth-pressed" + "cssName": "--smtc-ctrl-input-text-selection-background" }, - "ctrlInputStrokewidthSelected": { - "no": 640, - "name": "CTRL/input/strokeWidth/selected", - "fst_reference": "", - "optional": false, + "ctrlInputTextSelectionForeground": { + "no": 643, + "name": "CTRL/input/textSelection/foreground", + "fst_reference": "foreground/ctrl/onBrand/rest", + "optional": true, "nullable": false, "description": "", "components": [], "contrast": "", - "fallback": "Thin", + "fallback": "Neutral/Foreground/4/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-input-strokewidth-selected" + "cssName": "--smtc-ctrl-input-text-selection-foreground" }, - "ctrlInputBottomlineStrokewidthHover": { - "no": 641, + "ctrlInputBottomLineStrokeWidthHover": { + "no": 644, "name": "CTRL/input/bottomLine/strokeWidth/hover", "fst_reference": "strokeWidth/default", "optional": true, @@ -8890,10 +8929,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-input-bottomline-strokewidth-hover" + "cssName": "--smtc-ctrl-input-bottom-line-stroke-width-hover" }, - "ctrlInputBottomlineStrokewidthPressed": { - "no": 642, + "ctrlInputBottomLineStrokeWidthPressed": { + "no": 645, "name": "CTRL/input/bottomLine/strokeWidth/pressed", "fst_reference": "CTRL/input/bottomLine/strokeWidth/selected", "optional": true, @@ -8903,10 +8942,10 @@ "contrast": "", "fallback": "Thick", "exceptions": [], - "cssName": "--smtc-ctrl-input-bottomline-strokewidth-pressed" + "cssName": "--smtc-ctrl-input-bottom-line-stroke-width-pressed" }, - "ctrlInputBottomlineStrokewidthSelected": { - "no": 643, + "ctrlInputBottomLineStrokeWidthSelected": { + "no": 646, "name": "CTRL/input/bottomLine/strokeWidth/selected", "fst_reference": "", "optional": false, @@ -8916,10 +8955,10 @@ "contrast": "", "fallback": "Thick", "exceptions": [], - "cssName": "--smtc-ctrl-input-bottomline-strokewidth-selected" + "cssName": "--smtc-ctrl-input-bottom-line-stroke-width-selected" }, - "ctrlInputBottomlineStrokeRest": { - "no": 644, + "ctrlInputBottomLineStrokeRest": { + "no": 647, "name": "CTRL/input/bottomLine/stroke/rest", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -8929,10 +8968,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Accessible/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-input-bottomline-stroke-rest" + "cssName": "--smtc-ctrl-input-bottom-line-stroke-rest" }, - "ctrlInputBottomlineStrokeHover": { - "no": 645, + "ctrlInputBottomLineStrokeHover": { + "no": 648, "name": "CTRL/input/bottomLine/stroke/hover", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -8942,10 +8981,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Accessible/Hover", "exceptions": [], - "cssName": "--smtc-ctrl-input-bottomline-stroke-hover" + "cssName": "--smtc-ctrl-input-bottom-line-stroke-hover" }, - "ctrlInputBottomlineStrokePressed": { - "no": 646, + "ctrlInputBottomLineStrokePressed": { + "no": 649, "name": "CTRL/input/bottomLine/stroke/pressed", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -8955,10 +8994,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Accessible/Pressed", "exceptions": [], - "cssName": "--smtc-ctrl-input-bottomline-stroke-pressed" + "cssName": "--smtc-ctrl-input-bottom-line-stroke-pressed" }, - "ctrlInputBottomlineStrokeDisabled": { - "no": 647, + "ctrlInputBottomLineStrokeDisabled": { + "no": 650, "name": "CTRL/input/bottomLine/stroke/disabled", "fst_reference": "NULL/color", "optional": false, @@ -8975,10 +9014,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-input-bottomline-stroke-disabled" + "cssName": "--smtc-ctrl-input-bottom-line-stroke-disabled" }, - "ctrlInputBottomlineStrokeSelected": { - "no": 648, + "ctrlInputBottomLineStrokeSelected": { + "no": 651, "name": "CTRL/input/bottomLine/stroke/selected", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -8988,10 +9027,10 @@ "contrast": "", "fallback": "Brand/Stroke/1/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-input-bottomline-stroke-selected" + "cssName": "--smtc-ctrl-input-bottom-line-stroke-selected" }, - "ctrlInputBottomlineStrokeError": { - "no": 649, + "ctrlInputBottomLineStrokeError": { + "no": 652, "name": "CTRL/input/bottomLine/stroke/error", "fst_reference": "NULL/color", "optional": false, @@ -9001,10 +9040,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-input-bottomline-stroke-error" + "cssName": "--smtc-ctrl-input-bottom-line-stroke-error" }, "ctrlInputStrokeHover": { - "no": 650, + "no": 653, "name": "CTRL/input/stroke/hover", "fst_reference": "stroke/ctrl/onOutline/hover", "optional": true, @@ -9017,7 +9056,7 @@ "cssName": "--smtc-ctrl-input-stroke-hover" }, "ctrlInputStrokePressed": { - "no": 651, + "no": 654, "name": "CTRL/input/stroke/pressed", "fst_reference": "stroke/ctrl/onOutline/pressed", "optional": true, @@ -9030,7 +9069,7 @@ "cssName": "--smtc-ctrl-input-stroke-pressed" }, "ctrlInputStrokeDisabled": { - "no": 652, + "no": 655, "name": "CTRL/input/stroke/disabled", "fst_reference": "stroke/ctrl/onOutline/disabled", "optional": true, @@ -9050,7 +9089,7 @@ "cssName": "--smtc-ctrl-input-stroke-disabled" }, "ctrlInputStrokeSelected": { - "no": 653, + "no": 656, "name": "CTRL/input/stroke/selected", "fst_reference": "stroke/ctrl/onOutline/rest", "optional": true, @@ -9063,7 +9102,7 @@ "cssName": "--smtc-ctrl-input-stroke-selected" }, "ctrlInputStrokeError": { - "no": 654, + "no": 657, "name": "CTRL/input/stroke/error", "fst_reference": "STATUS/danger/stroke", "optional": true, @@ -9076,7 +9115,7 @@ "cssName": "--smtc-ctrl-input-stroke-error" }, "ctrlLinkForegroundNeutralRest": { - "no": 655, + "no": 658, "name": "CTRL/link/foreground/neutral/rest", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -9088,8 +9127,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-link-foreground-neutral-rest" }, - "ctrlLinkInlineStrokewidthRest": { - "no": 656, + "ctrlLinkInlineStrokeWidthRest": { + "no": 659, "name": "CTRL/link/inline/strokeWidth/rest", "fst_reference": "strokeWidth/default", "optional": true, @@ -9099,10 +9138,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-link-inline-strokewidth-rest" + "cssName": "--smtc-ctrl-link-inline-stroke-width-rest" }, - "ctrlLinkInlineStrokewidthHover": { - "no": 657, + "ctrlLinkInlineStrokeWidthHover": { + "no": 660, "name": "CTRL/link/inline/strokeWidth/hover", "fst_reference": "strokeWidth/default", "optional": true, @@ -9112,10 +9151,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-link-inline-strokewidth-hover" + "cssName": "--smtc-ctrl-link-inline-stroke-width-hover" }, "ctrlLinkInlineUnderlineDashed": { - "no": 658, + "no": 661, "name": "CTRL/link/inline/underline/dashed", "fst_reference": "", "optional": false, @@ -9128,7 +9167,7 @@ "cssName": "--smtc-ctrl-link-inline-underline-dashed" }, "ctrlLinkInlineUnderlineSolidFigmaonly": { - "no": 659, + "no": 662, "name": "CTRL/link/inline/underline/solid(figmaonly)", "fst_reference": "", "optional": false, @@ -9138,10 +9177,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-link-inline-underline-solidfigmaonly" + "cssName": "--smtc-ctrl-link-inline-underline-solid-figmaonly" }, "ctrlLinkForegroundNeutralHover": { - "no": 660, + "no": 663, "name": "CTRL/link/foreground/neutral/hover", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -9154,7 +9193,7 @@ "cssName": "--smtc-ctrl-link-foreground-neutral-hover" }, "ctrlLinkForegroundNeutralPressed": { - "no": 661, + "no": 664, "name": "CTRL/link/foreground/neutral/pressed", "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, @@ -9167,7 +9206,7 @@ "cssName": "--smtc-ctrl-link-foreground-neutral-pressed" }, "ctrlLinkForegroundBrandRest": { - "no": 662, + "no": 665, "name": "CTRL/link/foreground/brand/rest", "fst_reference": "foreground/ctrl/brand/rest", "optional": true, @@ -9180,7 +9219,7 @@ "cssName": "--smtc-ctrl-link-foreground-brand-rest" }, "ctrlLinkForegroundBrandHover": { - "no": 663, + "no": 666, "name": "CTRL/link/foreground/brand/hover", "fst_reference": "foreground/ctrl/brand/hover", "optional": true, @@ -9193,7 +9232,7 @@ "cssName": "--smtc-ctrl-link-foreground-brand-hover" }, "ctrlLinkForegroundBrandPressed": { - "no": 664, + "no": 667, "name": "CTRL/link/foreground/brand/pressed", "fst_reference": "foreground/ctrl/brand/pressed", "optional": true, @@ -9205,8 +9244,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-link-foreground-brand-pressed" }, - "ctrlLinkOnpageStrokewidthRest": { - "no": 665, + "ctrlLinkOnPageStrokeWidthRest": { + "no": 668, "name": "CTRL/link/onPage/strokeWidth/rest", "fst_reference": "strokeWidth/default", "optional": true, @@ -9216,10 +9255,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-link-onpage-strokewidth-rest" + "cssName": "--smtc-ctrl-link-on-page-stroke-width-rest" }, - "ctrlLinkOnpageStrokewidthHover": { - "no": 666, + "ctrlLinkOnPageStrokeWidthHover": { + "no": 669, "name": "CTRL/link/onPage/strokeWidth/hover", "fst_reference": "strokeWidth/default", "optional": true, @@ -9229,10 +9268,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-link-onpage-strokewidth-hover" + "cssName": "--smtc-ctrl-link-on-page-stroke-width-hover" }, - "ctrlLinkOnpageUnderlineDashed": { - "no": 667, + "ctrlLinkOnPageUnderlineDashed": { + "no": 670, "name": "CTRL/link/onPage/underline/dashed", "fst_reference": "", "optional": false, @@ -9242,10 +9281,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-link-onpage-underline-dashed" + "cssName": "--smtc-ctrl-link-on-page-underline-dashed" }, - "ctrlLinkOnpageUnderlineSolidFigmaonly": { - "no": 668, + "ctrlLinkOnPageUnderlineSolidFigmaonly": { + "no": 671, "name": "CTRL/link/onPage/underline/solid(figmaonly)", "fst_reference": "", "optional": false, @@ -9255,10 +9294,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-link-onpage-underline-solidfigmaonly" + "cssName": "--smtc-ctrl-link-on-page-underline-solid-figmaonly" }, - "ctrlLinkInlineShowunderlineatrest": { - "no": 669, + "ctrlLinkInlineShowUnderlineAtRest": { + "no": 672, "name": "CTRL/link/inline/showUnderlineAtRest", "fst_reference": "", "optional": false, @@ -9268,10 +9307,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-link-inline-showunderlineatrest" + "cssName": "--smtc-ctrl-link-inline-show-underline-at-rest" }, - "ctrlLinkOnpageShowunderlineatrest": { - "no": 670, + "ctrlLinkOnPageShowUnderlineAtRest": { + "no": 673, "name": "CTRL/link/onPage/showUnderlineAtRest", "fst_reference": "", "optional": false, @@ -9281,10 +9320,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-link-onpage-showunderlineatrest" + "cssName": "--smtc-ctrl-link-on-page-show-underline-at-rest" }, "ctrlListPillWidth": { - "no": 671, + "no": 674, "name": "CTRL/list/pill/width", "fst_reference": "", "optional": false, @@ -9296,8 +9335,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-list-pill-width" }, - "ctrlListPillFullwidth": { - "no": 672, + "ctrlListPillFullWidth": { + "no": 675, "name": "CTRL/list/pill/fullWidth", "fst_reference": "", "optional": false, @@ -9307,10 +9346,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-list-pill-fullwidth" + "cssName": "--smtc-ctrl-list-pill-full-width" }, "ctrlListPillStretchPaddingDefault": { - "no": 673, + "no": 676, "name": "CTRL/list/pill/stretch/padding/default", "fst_reference": "", "optional": false, @@ -9323,7 +9362,7 @@ "cssName": "--smtc-ctrl-list-pill-stretch-padding-default" }, "ctrlListPillStretchPaddingHint": { - "no": 674, + "no": 677, "name": "CTRL/list/pill/stretch/padding/hint", "fst_reference": "", "optional": false, @@ -9336,7 +9375,7 @@ "cssName": "--smtc-ctrl-list-pill-stretch-padding-hint" }, "ctrlListPillLengthRest": { - "no": 675, + "no": 678, "name": "CTRL/list/pill/length/rest", "fst_reference": "", "optional": false, @@ -9349,7 +9388,7 @@ "cssName": "--smtc-ctrl-list-pill-length-rest" }, "ctrlListPillLengthHover": { - "no": 676, + "no": 679, "name": "CTRL/list/pill/length/hover", "fst_reference": "CTRL/list/pill/length/rest", "optional": true, @@ -9362,7 +9401,7 @@ "cssName": "--smtc-ctrl-list-pill-length-hover" }, "ctrlListPillLengthPressed": { - "no": 677, + "no": 680, "name": "CTRL/list/pill/length/pressed", "fst_reference": "CTRL/list/pill/length/rest", "optional": true, @@ -9375,7 +9414,7 @@ "cssName": "--smtc-ctrl-list-pill-length-pressed" }, "ctrlListPillLengthHint": { - "no": 678, + "no": 681, "name": "CTRL/list/pill/length/hint", "fst_reference": "CTRL/list/pill/length/rest", "optional": true, @@ -9388,7 +9427,7 @@ "cssName": "--smtc-ctrl-list-pill-length-hint" }, "ctrlListCornerRest": { - "no": 679, + "no": 682, "name": "CTRL/list/corner/rest", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -9401,7 +9440,7 @@ "cssName": "--smtc-ctrl-list-corner-rest" }, "ctrlListCornerHover": { - "no": 680, + "no": 683, "name": "CTRL/list/corner/hover", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -9414,7 +9453,7 @@ "cssName": "--smtc-ctrl-list-corner-hover" }, "ctrlListCornerPressed": { - "no": 681, + "no": 684, "name": "CTRL/list/corner/pressed", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -9427,7 +9466,7 @@ "cssName": "--smtc-ctrl-list-corner-pressed" }, "ctrlListIndentLevel1": { - "no": 682, + "no": 685, "name": "CTRL/list/indent/level1", "fst_reference": "padding/ctrl/horizontal-default", "optional": true, @@ -9440,7 +9479,7 @@ "cssName": "--smtc-ctrl-list-indent-level1" }, "ctrlListIndentLevel2": { - "no": 683, + "no": 686, "name": "CTRL/list/indent/(level2)", "fst_reference": "", "optional": false, @@ -9453,7 +9492,7 @@ "cssName": "--smtc-ctrl-list-indent-level2" }, "ctrlListIndentLevel3": { - "no": 684, + "no": 687, "name": "CTRL/list/indent/(level3)", "fst_reference": "", "optional": false, @@ -9466,7 +9505,7 @@ "cssName": "--smtc-ctrl-list-indent-level3" }, "ctrlListBackgroundSelectedRest": { - "no": 685, + "no": 688, "name": "CTRL/list/background/selected-rest", "fst_reference": "background/ctrl/subtle/rest", "optional": true, @@ -9478,9 +9517,61 @@ "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": 686, - "name": "CTRL/list/background/selected-hover", + "no": 693, + "name": "CTRL/list/background/️selected-hover", "fst_reference": "background/ctrl/subtle/hover", "optional": true, "nullable": false, @@ -9492,7 +9583,7 @@ "cssName": "--smtc-ctrl-list-background-selected-hover" }, "ctrlListBackgroundSelectedPressed": { - "no": 687, + "no": 694, "name": "CTRL/list/background/selected-pressed", "fst_reference": "background/ctrl/subtle/pressed", "optional": true, @@ -9505,7 +9596,7 @@ "cssName": "--smtc-ctrl-list-background-selected-pressed" }, "ctrlListBackgroundSelectedDisabled": { - "no": 688, + "no": 695, "name": "CTRL/list/background/selected-disabled", "fst_reference": "background/ctrl/subtle/disabled", "optional": true, @@ -9518,7 +9609,7 @@ "cssName": "--smtc-ctrl-list-background-selected-disabled" }, "ctrlListChoiceBackgroundRest": { - "no": 689, + "no": 696, "name": "CTRL/list/choice/background/rest", "fst_reference": "NULL/color", "optional": false, @@ -9531,7 +9622,7 @@ "cssName": "--smtc-ctrl-list-choice-background-rest" }, "ctrlListChoiceStrokeRest": { - "no": 690, + "no": 697, "name": "CTRL/list/choice/stroke/rest", "fst_reference": "NULL/color", "optional": false, @@ -9544,7 +9635,7 @@ "cssName": "--smtc-ctrl-list-choice-stroke-rest" }, "ctrlListChoiceStrokeDisabled": { - "no": 691, + "no": 698, "name": "CTRL/list/choice/stroke/disabled", "fst_reference": "NULL/color", "optional": false, @@ -9557,7 +9648,7 @@ "cssName": "--smtc-ctrl-list-choice-stroke-disabled" }, "ctrlListChoiceStrokeSelectedRest": { - "no": 692, + "no": 699, "name": "CTRL/list/choice/stroke/selected-rest", "fst_reference": "NULL/color", "optional": false, @@ -9570,7 +9661,7 @@ "cssName": "--smtc-ctrl-list-choice-stroke-selected-rest" }, "ctrlListChoiceStrokeSelectedDisabled": { - "no": 693, + "no": 700, "name": "CTRL/list/choice/stroke/selected-disabled", "fst_reference": "NULL/color", "optional": false, @@ -9583,7 +9674,7 @@ "cssName": "--smtc-ctrl-list-choice-stroke-selected-disabled" }, "ctrlListChoiceForegroundHover": { - "no": 694, + "no": 701, "name": "CTRL/list/choice/foreground/hover", "fst_reference": "foreground/ctrl/hint/default", "optional": true, @@ -9596,9 +9687,9 @@ "cssName": "--smtc-ctrl-list-choice-foreground-hover" }, "ctrlListChoiceForegroundSelectedRest": { - "no": 695, + "no": 702, "name": "CTRL/list/choice/foreground/selected-rest", - "fst_reference": "foreground/ctrl/brand/rest", + "fst_reference": "foreground/ctrl/neutral/primary/rest", "optional": true, "nullable": false, "description": "", @@ -9609,9 +9700,9 @@ "cssName": "--smtc-ctrl-list-choice-foreground-selected-rest" }, "ctrlListChoiceForegroundSelectedDisabled": { - "no": 696, + "no": 703, "name": "CTRL/list/choice/foreground/selected-disabled", - "fst_reference": "foreground/ctrl/brand/disabled", + "fst_reference": "foreground/ctrl/neutral/primary/disabled", "optional": true, "nullable": false, "description": "", @@ -9622,7 +9713,7 @@ "cssName": "--smtc-ctrl-list-choice-foreground-selected-disabled" }, "ctrlListChoiceBackgroundDisabled": { - "no": 697, + "no": 704, "name": "CTRL/list/choice/background/disabled", "fst_reference": "NULL/color", "optional": false, @@ -9635,7 +9726,7 @@ "cssName": "--smtc-ctrl-list-choice-background-disabled" }, "ctrlListChoiceBackgroundSelectedRest": { - "no": 698, + "no": 705, "name": "CTRL/list/choice/background/selected-rest", "fst_reference": "NULL/color", "optional": false, @@ -9648,7 +9739,7 @@ "cssName": "--smtc-ctrl-list-choice-background-selected-rest" }, "ctrlListChoiceBackgroundSelectedDisabled": { - "no": 699, + "no": 706, "name": "CTRL/list/choice/background/selected-disabled", "fst_reference": "NULL/color", "optional": false, @@ -9661,7 +9752,7 @@ "cssName": "--smtc-ctrl-list-choice-background-selected-disabled" }, "ctrlListChoiceCheckboxCorner": { - "no": 700, + "no": 707, "name": "CTRL/list/choice/checkbox/corner", "fst_reference": "CTRL/choice/checkbox/corner", "optional": true, @@ -9674,7 +9765,7 @@ "cssName": "--smtc-ctrl-list-choice-checkbox-corner" }, "ctrlListChoiceCheckboxIconSize": { - "no": 701, + "no": 708, "name": "CTRL/list/choice/checkbox/icon/size", "fst_reference": "size/ctrl/iconSecondary", "optional": true, @@ -9687,7 +9778,7 @@ "cssName": "--smtc-ctrl-list-choice-checkbox-icon-size" }, "ctrlListChoiceCheckboxIconSizeFigmaonly": { - "no": 702, + "no": 709, "name": "CTRL/list/choice/checkbox/icon/size(figmaonly)", "fst_reference": "", "optional": false, @@ -9697,10 +9788,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-list-choice-checkbox-icon-sizefigmaonly" + "cssName": "--smtc-ctrl-list-choice-checkbox-icon-size-figmaonly" }, "ctrlListChoiceDotSize": { - "no": 703, + "no": 710, "name": "CTRL/list/choice/dot/size", "fst_reference": "", "optional": false, @@ -9713,7 +9804,7 @@ "cssName": "--smtc-ctrl-list-choice-dot-size" }, "ctrlListChoiceDotSizeFigmaonly": { - "no": 704, + "no": 711, "name": "CTRL/list/choice/dot/size(figmaonly)", "fst_reference": "", "optional": false, @@ -9723,10 +9814,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-list-choice-dot-sizefigmaonly" + "cssName": "--smtc-ctrl-list-choice-dot-size-figmaonly" }, "ctrlListSplitDividerPaddingInset": { - "no": 705, + "no": 712, "name": "CTRL/list/split/divider/padding/inset", "fst_reference": "", "optional": false, @@ -9739,7 +9830,7 @@ "cssName": "--smtc-ctrl-list-split-divider-padding-inset" }, "ctrlListSplitDividerStroke": { - "no": 706, + "no": 713, "name": "CTRL/list/split/divider/stroke", "fst_reference": "stroke/ctrl/divider/onNeutral", "optional": true, @@ -9752,7 +9843,7 @@ "cssName": "--smtc-ctrl-list-split-divider-stroke" }, "ctrlListSmCornerRest": { - "no": 707, + "no": 714, "name": "CTRL/list/sm/corner/rest", "fst_reference": "corner/ctrl-sm/rest", "optional": true, @@ -9765,7 +9856,7 @@ "cssName": "--smtc-ctrl-list-sm-corner-rest" }, "ctrlListSmCornerHover": { - "no": 708, + "no": 715, "name": "CTRL/list/sm/corner/hover", "fst_reference": "corner/ctrl-sm/rest", "optional": true, @@ -9778,7 +9869,7 @@ "cssName": "--smtc-ctrl-list-sm-corner-hover" }, "ctrlListSmCornerPressed": { - "no": 709, + "no": 716, "name": "CTRL/list/sm/corner/pressed", "fst_reference": "corner/ctrl-sm/rest", "optional": true, @@ -9791,7 +9882,7 @@ "cssName": "--smtc-ctrl-list-sm-corner-pressed" }, "ctrlListSmIndentLevel1": { - "no": 710, + "no": 717, "name": "CTRL/list/sm/indent/level1", "fst_reference": "padding/ctrl-sm/horizontal-default", "optional": true, @@ -9804,7 +9895,7 @@ "cssName": "--smtc-ctrl-list-sm-indent-level1" }, "ctrlListSmIndentLevel2": { - "no": 711, + "no": 718, "name": "CTRL/list/sm/indent/(level2)", "fst_reference": "", "optional": false, @@ -9817,7 +9908,7 @@ "cssName": "--smtc-ctrl-list-sm-indent-level2" }, "ctrlListSmIndentLevel3": { - "no": 712, + "no": 719, "name": "CTRL/list/sm/indent/(level3)", "fst_reference": "", "optional": false, @@ -9830,7 +9921,7 @@ "cssName": "--smtc-ctrl-list-sm-indent-level3" }, "ctrlListLgCornerRest": { - "no": 713, + "no": 720, "name": "CTRL/list/lg/corner/rest", "fst_reference": "corner/ctrl-lg/rest", "optional": true, @@ -9843,7 +9934,7 @@ "cssName": "--smtc-ctrl-list-lg-corner-rest" }, "ctrlListLgCornerHover": { - "no": 714, + "no": 721, "name": "CTRL/list/lg/corner/hover", "fst_reference": "corner/ctrl-lg/rest", "optional": true, @@ -9856,7 +9947,7 @@ "cssName": "--smtc-ctrl-list-lg-corner-hover" }, "ctrlListLgCornerPressed": { - "no": 715, + "no": 722, "name": "CTRL/list/lg/corner/pressed", "fst_reference": "corner/ctrl-lg/rest", "optional": true, @@ -9869,7 +9960,7 @@ "cssName": "--smtc-ctrl-list-lg-corner-pressed" }, "ctrlListLgIndentLevel1": { - "no": 716, + "no": 723, "name": "CTRL/list/lg/indent/level1", "fst_reference": "padding/ctrl-lg/horizontal-default", "optional": true, @@ -9882,7 +9973,7 @@ "cssName": "--smtc-ctrl-list-lg-indent-level1" }, "ctrlListLgIndentLevel2": { - "no": 717, + "no": 724, "name": "CTRL/list/lg/indent/(level2)", "fst_reference": "", "optional": false, @@ -9895,7 +9986,7 @@ "cssName": "--smtc-ctrl-list-lg-indent-level2" }, "ctrlListLgIndentLevel3": { - "no": 718, + "no": 725, "name": "CTRL/list/lg/indent/(level3)", "fst_reference": "", "optional": false, @@ -9907,8 +9998,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-list-lg-indent-level3" }, - "ctrlLitefilterBackgroundSelected": { - "no": 719, + "ctrlLiteFilterBackgroundSelected": { + "no": 726, "name": "CTRL/liteFilter/background/selected", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -9918,10 +10009,10 @@ "contrast": "", "fallback": "background/ctrl/brand/rest", "exceptions": [], - "cssName": "--smtc-ctrl-litefilter-background-selected" + "cssName": "--smtc-ctrl-lite-filter-background-selected" }, - "ctrlLitefilterStrokeSelected": { - "no": 720, + "ctrlLiteFilterStrokeSelected": { + "no": 727, "name": "CTRL/liteFilter/stroke/selected", "fst_reference": "stroke/ctrl/onBrand/rest", "optional": true, @@ -9931,10 +10022,10 @@ "contrast": "", "fallback": "stroke/ctrl/onBrand/rest", "exceptions": [], - "cssName": "--smtc-ctrl-litefilter-stroke-selected" + "cssName": "--smtc-ctrl-lite-filter-stroke-selected" }, - "ctrlLitefilterForegroundSelected": { - "no": 721, + "ctrlLiteFilterForegroundSelected": { + "no": 728, "name": "CTRL/liteFilter/foreground/selected", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -9944,10 +10035,10 @@ "contrast": "", "fallback": "foreground/ctrl/onBrand/rest", "exceptions": [], - "cssName": "--smtc-ctrl-litefilter-foreground-selected" + "cssName": "--smtc-ctrl-lite-filter-foreground-selected" }, "ctrlProgressBackgroundEmpty": { - "no": 722, + "no": 729, "name": "CTRL/progress/background/empty", "fst_reference": "", "optional": false, @@ -9960,7 +10051,7 @@ "cssName": "--smtc-ctrl-progress-background-empty" }, "ctrlProgressBackgroundFilled": { - "no": 723, + "no": 730, "name": "CTRL/progress/background/filled", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -9973,7 +10064,7 @@ "cssName": "--smtc-ctrl-progress-background-filled" }, "ctrlProgressCorner": { - "no": 724, + "no": 731, "name": "CTRL/progress/corner", "fst_reference": "corner/circular", "optional": true, @@ -9986,7 +10077,7 @@ "cssName": "--smtc-ctrl-progress-corner" }, "ctrlProgressHeightFilled": { - "no": 725, + "no": 732, "name": "CTRL/progress/height/filled", "fst_reference": "", "optional": false, @@ -9999,7 +10090,7 @@ "cssName": "--smtc-ctrl-progress-height-filled" }, "ctrlProgressHeightEmpty": { - "no": 726, + "no": 733, "name": "CTRL/progress/height/empty", "fst_reference": "CTRL/progress/height/filled", "optional": true, @@ -10012,7 +10103,7 @@ "cssName": "--smtc-ctrl-progress-height-empty" }, "ctrlProgressSmHeightFilled": { - "no": 727, + "no": 734, "name": "CTRL/progress/sm/height/filled", "fst_reference": "", "optional": false, @@ -10025,7 +10116,7 @@ "cssName": "--smtc-ctrl-progress-sm-height-filled" }, "ctrlProgressSmHeightEmpty": { - "no": 728, + "no": 735, "name": "CTRL/progress/sm/height/empty", "fst_reference": "CTRL/progress/sm/height/filled", "optional": true, @@ -10038,7 +10129,7 @@ "cssName": "--smtc-ctrl-progress-sm-height-empty" }, "ctrlRatingIconTheme": { - "no": 729, + "no": 736, "name": "CTRL/rating/icon/theme", "fst_reference": "iconTheme/ctrl/default/rest", "optional": true, @@ -10051,7 +10142,7 @@ "cssName": "--smtc-ctrl-rating-icon-theme" }, "ctrlRatingIconGap": { - "no": 730, + "no": 737, "name": "CTRL/rating/icon/gap", "fst_reference": "", "optional": false, @@ -10064,7 +10155,7 @@ "cssName": "--smtc-ctrl-rating-icon-gap" }, "ctrlRatingIconForegroundFilled": { - "no": 731, + "no": 738, "name": "CTRL/rating/icon/foreground/filled", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -10077,7 +10168,7 @@ "cssName": "--smtc-ctrl-rating-icon-foreground-filled" }, "ctrlRatingIconForegroundEmpty": { - "no": 732, + "no": 739, "name": "CTRL/rating/icon/foreground/empty", "fst_reference": "CTRL/progress/background/empty", "optional": true, @@ -10090,7 +10181,7 @@ "cssName": "--smtc-ctrl-rating-icon-foreground-empty" }, "ctrlRatingIconSize": { - "no": 733, + "no": 740, "name": "CTRL/rating/icon/size", "fst_reference": "size/ctrl/icon", "optional": true, @@ -10103,7 +10194,7 @@ "cssName": "--smtc-ctrl-rating-icon-size" }, "ctrlSegmentedBackgroundRest": { - "no": 734, + "no": 741, "name": "CTRL/segmented/background/rest", "fst_reference": "background/ctrl/outline/rest", "optional": true, @@ -10116,7 +10207,7 @@ "cssName": "--smtc-ctrl-segmented-background-rest" }, "ctrlSegmentedBackgroundHover": { - "no": 735, + "no": 742, "name": "CTRL/segmented/background/hover", "fst_reference": "background/ctrl/outline/hover", "optional": true, @@ -10129,7 +10220,7 @@ "cssName": "--smtc-ctrl-segmented-background-hover" }, "ctrlSegmentedBackgroundPressed": { - "no": 736, + "no": 743, "name": "CTRL/segmented/background/pressed", "fst_reference": "background/ctrl/outline/pressed", "optional": true, @@ -10142,7 +10233,7 @@ "cssName": "--smtc-ctrl-segmented-background-pressed" }, "ctrlSegmentedBackgroundDisabled": { - "no": 737, + "no": 744, "name": "CTRL/segmented/background/disabled", "fst_reference": "background/ctrl/outline/disabled", "optional": true, @@ -10155,7 +10246,7 @@ "cssName": "--smtc-ctrl-segmented-background-disabled" }, "ctrlSegmentedStrokeRest": { - "no": 738, + "no": 745, "name": "CTRL/segmented/stroke/rest", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -10168,7 +10259,7 @@ "cssName": "--smtc-ctrl-segmented-stroke-rest" }, "ctrlSegmentedStrokeHover": { - "no": 739, + "no": 746, "name": "CTRL/segmented/stroke/hover", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -10181,7 +10272,7 @@ "cssName": "--smtc-ctrl-segmented-stroke-hover" }, "ctrlSegmentedStrokePressed": { - "no": 740, + "no": 747, "name": "CTRL/segmented/stroke/pressed", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -10194,7 +10285,7 @@ "cssName": "--smtc-ctrl-segmented-stroke-pressed" }, "ctrlSegmentedStrokeDisabled": { - "no": 741, + "no": 748, "name": "CTRL/segmented/stroke/disabled", "fst_reference": "foreground/ctrl/neutral/secondary/disabled", "optional": true, @@ -10207,7 +10298,7 @@ "cssName": "--smtc-ctrl-segmented-stroke-disabled" }, "ctrlSegmentedCornerRest": { - "no": 742, + "no": 749, "name": "CTRL/segmented/corner/rest", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -10220,7 +10311,7 @@ "cssName": "--smtc-ctrl-segmented-corner-rest" }, "ctrlSegmentedCornerHover": { - "no": 743, + "no": 750, "name": "CTRL/segmented/corner/hover", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -10233,7 +10324,7 @@ "cssName": "--smtc-ctrl-segmented-corner-hover" }, "ctrlSegmentedCornerPressed": { - "no": 744, + "no": 751, "name": "CTRL/segmented/corner/pressed", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -10246,7 +10337,7 @@ "cssName": "--smtc-ctrl-segmented-corner-pressed" }, "ctrlSegmentedPaddingRest": { - "no": 745, + "no": 752, "name": "CTRL/segmented/padding/rest", "fst_reference": "", "optional": false, @@ -10259,7 +10350,7 @@ "cssName": "--smtc-ctrl-segmented-padding-rest" }, "ctrlSegmentedPaddingHover": { - "no": 746, + "no": 753, "name": "CTRL/segmented/padding/hover", "fst_reference": "CTRL/segmented/padding/rest", "optional": true, @@ -10272,7 +10363,7 @@ "cssName": "--smtc-ctrl-segmented-padding-hover" }, "ctrlSegmentedPaddingPressed": { - "no": 747, + "no": 754, "name": "CTRL/segmented/padding/pressed", "fst_reference": "CTRL/segmented/padding/rest", "optional": true, @@ -10285,7 +10376,7 @@ "cssName": "--smtc-ctrl-segmented-padding-pressed" }, "ctrlSegmentedGap": { - "no": 748, + "no": 755, "name": "CTRL/segmented/gap", "fst_reference": "NULL/number", "optional": false, @@ -10298,7 +10389,7 @@ "cssName": "--smtc-ctrl-segmented-gap" }, "ctrlSegmentedItemCornerRest": { - "no": 749, + "no": 756, "name": "CTRL/segmented/Item/corner/rest", "fst_reference": "corner/ctrl-sm/rest", "optional": true, @@ -10311,7 +10402,7 @@ "cssName": "--smtc-ctrl-segmented-item-corner-rest" }, "ctrlSegmentedItemCornerHover": { - "no": 750, + "no": 757, "name": "CTRL/segmented/Item/corner/hover", "fst_reference": "corner/ctrl-sm/rest", "optional": true, @@ -10324,7 +10415,7 @@ "cssName": "--smtc-ctrl-segmented-item-corner-hover" }, "ctrlSegmentedItemCornerPressed": { - "no": 751, + "no": 758, "name": "CTRL/segmented/Item/corner/pressed", "fst_reference": "corner/ctrl-sm/rest", "optional": true, @@ -10337,7 +10428,7 @@ "cssName": "--smtc-ctrl-segmented-item-corner-pressed" }, "ctrlSliderBarHeight": { - "no": 752, + "no": 759, "name": "CTRL/slider/bar/height", "fst_reference": "CTRL/progress/height/filled", "optional": true, @@ -10349,8 +10440,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-slider-bar-height" }, - "ctrlSplitDividerStrokewidth": { - "no": 753, + "ctrlSplitDividerStrokeWidth": { + "no": 760, "name": "CTRL/split/divider/strokeWidth", "fst_reference": "strokeWidth/default", "optional": true, @@ -10360,10 +10451,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-split-divider-strokewidth" + "cssName": "--smtc-ctrl-split-divider-stroke-width" }, - "ctrlSplitDividerStrokewidthOnoutline": { - "no": 754, + "ctrlSplitDividerStrokeWidthOnOutline": { + "no": 761, "name": "CTRL/split/divider/strokeWidth-onOutline", "fst_reference": "strokeWidth/default", "optional": true, @@ -10373,10 +10464,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-split-divider-strokewidth-onoutline" + "cssName": "--smtc-ctrl-split-divider-stroke-width-on-outline" }, - "ctrlSplitDividerStrokewidthOnsubtle": { - "no": 755, + "ctrlSplitDividerStrokeWidthOnSubtle": { + "no": 762, "name": "CTRL/split/divider/strokeWidth-onSubtle", "fst_reference": "NULL/number", "optional": false, @@ -10386,10 +10477,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-split-divider-strokewidth-onsubtle" + "cssName": "--smtc-ctrl-split-divider-stroke-width-on-subtle" }, - "ctrlSpinnerStrokewidth": { - "no": 756, + "ctrlSpinnerStrokeWidth": { + "no": 763, "name": "CTRL/spinner/strokeWidth", "fst_reference": "CTRL/progress/height/filled", "optional": true, @@ -10399,10 +10490,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-spinner-strokewidth" + "cssName": "--smtc-ctrl-spinner-stroke-width" }, - "ctrlSpinnerShowemptytrack": { - "no": 757, + "ctrlSpinnerShowEmptyTrack": { + "no": 764, "name": "CTRL/spinner/showEmptyTrack", "fst_reference": "", "optional": false, @@ -10412,10 +10503,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-spinner-showemptytrack" + "cssName": "--smtc-ctrl-spinner-show-empty-track" }, "ctrlTooltipCorner": { - "no": 758, + "no": 765, "name": "CTRL/tooltip/corner", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -10428,7 +10519,7 @@ "cssName": "--smtc-ctrl-tooltip-corner" }, "ctrlTooltipBackground": { - "no": 759, + "no": 766, "name": "CTRL/tooltip/background", "fst_reference": "", "optional": false, @@ -10441,7 +10532,7 @@ "cssName": "--smtc-ctrl-tooltip-background" }, "ctrlTooltipForeground": { - "no": 760, + "no": 767, "name": "CTRL/tooltip/foreground", "fst_reference": "", "optional": false, @@ -10454,7 +10545,7 @@ "cssName": "--smtc-ctrl-tooltip-foreground" }, "ctrlSliderBarCorner": { - "no": 761, + "no": 768, "name": "CTRL/slider/bar/corner", "fst_reference": "corner/circular", "optional": true, @@ -10467,7 +10558,7 @@ "cssName": "--smtc-ctrl-slider-bar-corner" }, "ctrlSliderBarForegroundFilledRest": { - "no": 762, + "no": 769, "name": "CTRL/slider/bar/foreground/filled/rest", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -10480,7 +10571,7 @@ "cssName": "--smtc-ctrl-slider-bar-foreground-filled-rest" }, "ctrlSliderBarForegroundEmptyRest": { - "no": 763, + "no": 770, "name": "CTRL/slider/bar/foreground/empty/rest", "fst_reference": "CTRL/progress/background/empty", "optional": true, @@ -10493,7 +10584,7 @@ "cssName": "--smtc-ctrl-slider-bar-foreground-empty-rest" }, "ctrlSliderBarForegroundEmptyHover": { - "no": 764, + "no": 771, "name": "CTRL/slider/bar/foreground/empty/hover", "fst_reference": "CTRL/progress/background/empty", "optional": true, @@ -10506,7 +10597,7 @@ "cssName": "--smtc-ctrl-slider-bar-foreground-empty-hover" }, "ctrlSliderBarForegroundEmptyPressed": { - "no": 765, + "no": 772, "name": "CTRL/slider/bar/foreground/empty/pressed", "fst_reference": "CTRL/progress/background/empty", "optional": true, @@ -10519,7 +10610,7 @@ "cssName": "--smtc-ctrl-slider-bar-foreground-empty-pressed" }, "ctrlSliderBarForegroundEmptyDisabled": { - "no": 766, + "no": 773, "name": "CTRL/slider/bar/foreground/empty/disabled", "fst_reference": "CTRL/progress/background/empty", "optional": true, @@ -10532,7 +10623,7 @@ "cssName": "--smtc-ctrl-slider-bar-foreground-empty-disabled" }, "ctrlSliderBarForegroundFilledHover": { - "no": 767, + "no": 774, "name": "CTRL/slider/bar/foreground/filled/hover", "fst_reference": "background/ctrl/brand/hover", "optional": true, @@ -10545,7 +10636,7 @@ "cssName": "--smtc-ctrl-slider-bar-foreground-filled-hover" }, "ctrlSliderBarForegroundFilledPressed": { - "no": 768, + "no": 775, "name": "CTRL/slider/bar/foreground/filled/pressed", "fst_reference": "background/ctrl/brand/pressed", "optional": true, @@ -10558,7 +10649,7 @@ "cssName": "--smtc-ctrl-slider-bar-foreground-filled-pressed" }, "ctrlSliderBarForegroundFilledDisabled": { - "no": 769, + "no": 776, "name": "CTRL/slider/bar/foreground/filled/disabled", "fst_reference": "background/ctrl/brand/disabled", "optional": true, @@ -10571,7 +10662,7 @@ "cssName": "--smtc-ctrl-slider-bar-foreground-filled-disabled" }, "ctrlSliderThumbCorner": { - "no": 770, + "no": 777, "name": "CTRL/slider/thumb/corner", "fst_reference": "corner/circular", "optional": true, @@ -10584,7 +10675,7 @@ "cssName": "--smtc-ctrl-slider-thumb-corner" }, "ctrlSliderThumbSizeRest": { - "no": 771, + "no": 778, "name": "CTRL/slider/thumb/size/rest", "fst_reference": "size/ctrl/icon", "optional": true, @@ -10597,7 +10688,7 @@ "cssName": "--smtc-ctrl-slider-thumb-size-rest" }, "ctrlSliderThumbSizeHover": { - "no": 772, + "no": 779, "name": "CTRL/slider/thumb/size/hover", "fst_reference": "size/ctrl/icon", "optional": true, @@ -10610,7 +10701,7 @@ "cssName": "--smtc-ctrl-slider-thumb-size-hover" }, "ctrlSliderThumbSizePressed": { - "no": 773, + "no": 780, "name": "CTRL/slider/thumb/size/pressed", "fst_reference": "size/ctrl/icon", "optional": true, @@ -10623,7 +10714,7 @@ "cssName": "--smtc-ctrl-slider-thumb-size-pressed" }, "ctrlSliderThumbBackgroundRest": { - "no": 774, + "no": 781, "name": "CTRL/slider/thumb/background/rest", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -10636,7 +10727,7 @@ "cssName": "--smtc-ctrl-slider-thumb-background-rest" }, "ctrlSliderThumbBackgroundHover": { - "no": 775, + "no": 782, "name": "CTRL/slider/thumb/background/hover", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -10649,7 +10740,7 @@ "cssName": "--smtc-ctrl-slider-thumb-background-hover" }, "ctrlSliderThumbBackgroundPressed": { - "no": 776, + "no": 783, "name": "CTRL/slider/thumb/background/pressed", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -10662,7 +10753,7 @@ "cssName": "--smtc-ctrl-slider-thumb-background-pressed" }, "ctrlSliderThumbBackgroundDisabled": { - "no": 777, + "no": 784, "name": "CTRL/slider/thumb/background/disabled", "fst_reference": "foreground/ctrl/onBrand/disabled", "optional": true, @@ -10674,8 +10765,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-slider-thumb-background-disabled" }, - "ctrlSliderThumbInnerStrokewidthRest": { - "no": 778, + "ctrlSliderThumbInnerStrokeWidthRest": { + "no": 785, "name": "CTRL/slider/thumb/inner/strokeWidth/rest", "fst_reference": "", "optional": false, @@ -10685,10 +10776,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-slider-thumb-inner-strokewidth-rest" + "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-width-rest" }, - "ctrlSliderThumbInnerStrokewidthHover": { - "no": 779, + "ctrlSliderThumbInnerStrokeWidthHover": { + "no": 786, "name": "CTRL/slider/thumb/inner/strokeWidth/hover", "fst_reference": "CTRL/slider/thumb/inner/strokeWidth/rest", "optional": true, @@ -10698,10 +10789,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-slider-thumb-inner-strokewidth-hover" + "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-width-hover" }, - "ctrlSliderThumbInnerStrokewidthPressed": { - "no": 780, + "ctrlSliderThumbInnerStrokeWidthPressed": { + "no": 787, "name": "CTRL/slider/thumb/inner/strokeWidth/pressed", "fst_reference": "CTRL/slider/thumb/inner/strokeWidth/rest", "optional": true, @@ -10711,10 +10802,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-slider-thumb-inner-strokewidth-pressed" + "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-width-pressed" }, "ctrlSliderThumbInnerStrokeRest": { - "no": 781, + "no": 788, "name": "CTRL/slider/thumb/inner/stroke/rest", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -10727,7 +10818,7 @@ "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-rest" }, "ctrlSliderThumbInnerStrokeHover": { - "no": 782, + "no": 789, "name": "CTRL/slider/thumb/inner/stroke/hover", "fst_reference": "background/ctrl/brand/hover", "optional": true, @@ -10740,7 +10831,7 @@ "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-hover" }, "ctrlSliderThumbInnerStrokePressed": { - "no": 783, + "no": 790, "name": "CTRL/slider/thumb/inner/stroke/pressed", "fst_reference": "background/ctrl/brand/pressed", "optional": true, @@ -10753,7 +10844,7 @@ "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-pressed" }, "ctrlSliderThumbInnerStrokeDisabled": { - "no": 784, + "no": 791, "name": "CTRL/slider/thumb/inner/stroke/disabled", "fst_reference": "background/ctrl/brand/disabled", "optional": true, @@ -10765,8 +10856,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-slider-thumb-inner-stroke-disabled" }, - "ctrlSliderThumbOuterStrokewidth": { - "no": 785, + "ctrlSliderThumbOuterStrokeWidth": { + "no": 792, "name": "CTRL/slider/thumb/outer/strokeWidth", "fst_reference": "strokeWidth/default", "optional": true, @@ -10776,10 +10867,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-slider-thumb-outer-strokewidth" + "cssName": "--smtc-ctrl-slider-thumb-outer-stroke-width" }, "ctrlSliderThumbOuterStrokeRest": { - "no": 786, + "no": 793, "name": "CTRL/slider/thumb/outer/stroke/rest", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -10792,7 +10883,7 @@ "cssName": "--smtc-ctrl-slider-thumb-outer-stroke-rest" }, "ctrlSliderThumbOuterStrokeHover": { - "no": 787, + "no": 794, "name": "CTRL/slider/thumb/outer/stroke/hover", "fst_reference": "background/ctrl/brand/hover", "optional": true, @@ -10805,7 +10896,7 @@ "cssName": "--smtc-ctrl-slider-thumb-outer-stroke-hover" }, "ctrlSliderThumbOuterStrokePressed": { - "no": 788, + "no": 795, "name": "CTRL/slider/thumb/outer/stroke/pressed", "fst_reference": "background/ctrl/brand/pressed", "optional": true, @@ -10818,7 +10909,7 @@ "cssName": "--smtc-ctrl-slider-thumb-outer-stroke-pressed" }, "ctrlSliderThumbOuterStrokeDisabled": { - "no": 789, + "no": 796, "name": "CTRL/slider/thumb/outer/stroke/disabled", "fst_reference": "background/ctrl/brand/disabled", "optional": true, @@ -10831,7 +10922,7 @@ "cssName": "--smtc-ctrl-slider-thumb-outer-stroke-disabled" }, "ctrlSliderSmThumbSizeRest": { - "no": 790, + "no": 797, "name": "CTRL/slider/sm/thumb/size/rest", "fst_reference": "size/ctrl-sm/icon", "optional": true, @@ -10844,7 +10935,7 @@ "cssName": "--smtc-ctrl-slider-sm-thumb-size-rest" }, "ctrlSliderSmThumbSizeHover": { - "no": 791, + "no": 798, "name": "CTRL/slider/sm/thumb/size/hover", "fst_reference": "size/ctrl-sm/icon", "optional": true, @@ -10857,7 +10948,7 @@ "cssName": "--smtc-ctrl-slider-sm-thumb-size-hover" }, "ctrlSliderSmThumbSizePressed": { - "no": 792, + "no": 799, "name": "CTRL/slider/sm/thumb/size/pressed", "fst_reference": "size/ctrl-sm/icon", "optional": true, @@ -10870,7 +10961,7 @@ "cssName": "--smtc-ctrl-slider-sm-thumb-size-pressed" }, "ctrlSliderSmBarHeight": { - "no": 793, + "no": 800, "name": "CTRL/slider/sm/bar/height", "fst_reference": "CTRL/progress/sm/height/filled", "optional": true, @@ -10883,7 +10974,7 @@ "cssName": "--smtc-ctrl-slider-sm-bar-height" }, "ctrlSliderLgThumbSizeRest": { - "no": 794, + "no": 801, "name": "CTRL/slider/lg/thumb/size/rest", "fst_reference": "size/ctrl-lg/icon", "optional": true, @@ -10896,7 +10987,7 @@ "cssName": "--smtc-ctrl-slider-lg-thumb-size-rest" }, "ctrlSliderLgBarHeight": { - "no": 795, + "no": 802, "name": "CTRL/slider/lg/bar/height", "fst_reference": "CTRL/progress/lg/height/filled", "optional": true, @@ -10909,7 +11000,7 @@ "cssName": "--smtc-ctrl-slider-lg-bar-height" }, "ctrlSliderLgThumbSizeHover": { - "no": 796, + "no": 803, "name": "CTRL/slider/lg/thumb/size/hover", "fst_reference": "size/ctrl-lg/icon", "optional": true, @@ -10922,7 +11013,7 @@ "cssName": "--smtc-ctrl-slider-lg-thumb-size-hover" }, "ctrlSliderLgThumbSizePressed": { - "no": 797, + "no": 804, "name": "CTRL/slider/lg/thumb/size/pressed", "fst_reference": "size/ctrl-lg/icon", "optional": true, @@ -10934,8 +11025,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-slider-lg-thumb-size-pressed" }, - "ctrlListSplitDividerShowdivider": { - "no": 798, + "ctrlListSplitDividerShowDivider": { + "no": 805, "name": "CTRL/list/split/divider/showDivider", "fst_reference": "", "optional": false, @@ -10945,10 +11036,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-list-split-divider-showdivider" + "cssName": "--smtc-ctrl-list-split-divider-show-divider" }, - "ctrlAvatarPresencebadgeBackgroundBehindbadge": { - "no": 799, + "ctrlAvatarPresenceBadgeBackgroundBehindBadge": { + "no": 806, "name": "CTRL/avatar/presenceBadge/background/behindBadge", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -10958,10 +11049,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-avatar-presencebadge-background-behindbadge" + "cssName": "--smtc-ctrl-avatar-presence-badge-background-behind-badge" }, "statusBrandBackground": { - "no": 800, + "no": 807, "name": "STATUS/brand/background", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -10974,7 +11065,7 @@ "cssName": "--smtc-status-brand-background" }, "statusBrandStroke": { - "no": 801, + "no": 808, "name": "STATUS/brand/stroke", "fst_reference": "background/ctrl/brand/rest", "optional": true, @@ -10987,7 +11078,7 @@ "cssName": "--smtc-status-brand-stroke" }, "statusBrandForeground": { - "no": 802, + "no": 809, "name": "STATUS/brand/foreground", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -11000,7 +11091,7 @@ "cssName": "--smtc-status-brand-foreground" }, "statusBrandTintBackground": { - "no": 803, + "no": 810, "name": "STATUS/brand/tint/background", "fst_reference": "", "optional": false, @@ -11013,7 +11104,7 @@ "cssName": "--smtc-status-brand-tint-background" }, "statusBrandTintStroke": { - "no": 804, + "no": 811, "name": "STATUS/brand/tint/stroke", "fst_reference": "", "optional": false, @@ -11026,7 +11117,7 @@ "cssName": "--smtc-status-brand-tint-stroke" }, "statusBrandTintForeground": { - "no": 805, + "no": 812, "name": "STATUS/brand/tint/foreground", "fst_reference": "foreground/ctrl/brand/rest", "optional": true, @@ -11039,7 +11130,7 @@ "cssName": "--smtc-status-brand-tint-foreground" }, "statusDangerBackground": { - "no": 806, + "no": 813, "name": "STATUS/danger/background", "fst_reference": "", "optional": false, @@ -11052,7 +11143,7 @@ "cssName": "--smtc-status-danger-background" }, "statusDangerStroke": { - "no": 807, + "no": 814, "name": "STATUS/danger/stroke", "fst_reference": "STATUS/danger/background", "optional": true, @@ -11065,7 +11156,7 @@ "cssName": "--smtc-status-danger-stroke" }, "statusDangerForeground": { - "no": 808, + "no": 815, "name": "STATUS/danger/foreground", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -11078,7 +11169,7 @@ "cssName": "--smtc-status-danger-foreground" }, "statusDangerTintBackground": { - "no": 809, + "no": 816, "name": "STATUS/danger/tint/background", "fst_reference": "", "optional": false, @@ -11091,7 +11182,7 @@ "cssName": "--smtc-status-danger-tint-background" }, "statusDangerTintStroke": { - "no": 810, + "no": 817, "name": "STATUS/danger/tint/stroke", "fst_reference": "", "optional": false, @@ -11104,7 +11195,7 @@ "cssName": "--smtc-status-danger-tint-stroke" }, "statusDangerTintForeground": { - "no": 811, + "no": 818, "name": "STATUS/danger/tint/foreground", "fst_reference": "", "optional": false, @@ -11117,7 +11208,7 @@ "cssName": "--smtc-status-danger-tint-foreground" }, "statusWarningBackground": { - "no": 812, + "no": 819, "name": "STATUS/warning/background", "fst_reference": "", "optional": false, @@ -11130,7 +11221,7 @@ "cssName": "--smtc-status-warning-background" }, "statusWarningStroke": { - "no": 813, + "no": 820, "name": "STATUS/warning/stroke", "fst_reference": "STATUS/warning/background", "optional": true, @@ -11143,7 +11234,7 @@ "cssName": "--smtc-status-warning-stroke" }, "statusWarningForeground": { - "no": 814, + "no": 821, "name": "STATUS/warning/foreground", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -11156,7 +11247,7 @@ "cssName": "--smtc-status-warning-foreground" }, "statusWarningTintBackground": { - "no": 815, + "no": 822, "name": "STATUS/warning/tint/background", "fst_reference": "", "optional": false, @@ -11169,7 +11260,7 @@ "cssName": "--smtc-status-warning-tint-background" }, "statusWarningTintStroke": { - "no": 816, + "no": 823, "name": "STATUS/warning/tint/stroke", "fst_reference": "", "optional": false, @@ -11182,7 +11273,7 @@ "cssName": "--smtc-status-warning-tint-stroke" }, "statusWarningTintForeground": { - "no": 817, + "no": 824, "name": "STATUS/warning/tint/foreground", "fst_reference": "", "optional": false, @@ -11195,7 +11286,7 @@ "cssName": "--smtc-status-warning-tint-foreground" }, "statusSuccessBackground": { - "no": 818, + "no": 825, "name": "STATUS/success/background", "fst_reference": "", "optional": false, @@ -11208,7 +11299,7 @@ "cssName": "--smtc-status-success-background" }, "statusSuccessStroke": { - "no": 819, + "no": 826, "name": "STATUS/success/stroke", "fst_reference": "STATUS/success/background", "optional": true, @@ -11221,7 +11312,7 @@ "cssName": "--smtc-status-success-stroke" }, "statusSuccessForeground": { - "no": 820, + "no": 827, "name": "STATUS/success/foreground", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -11234,7 +11325,7 @@ "cssName": "--smtc-status-success-foreground" }, "statusSuccessTintBackground": { - "no": 821, + "no": 828, "name": "STATUS/success/tint/background", "fst_reference": "", "optional": false, @@ -11247,7 +11338,7 @@ "cssName": "--smtc-status-success-tint-background" }, "statusSuccessTintStroke": { - "no": 822, + "no": 829, "name": "STATUS/success/tint/stroke", "fst_reference": "", "optional": false, @@ -11260,7 +11351,7 @@ "cssName": "--smtc-status-success-tint-stroke" }, "statusSuccessTintForeground": { - "no": 823, + "no": 830, "name": "STATUS/success/tint/foreground", "fst_reference": "", "optional": false, @@ -11273,7 +11364,7 @@ "cssName": "--smtc-status-success-tint-foreground" }, "statusImportantBackground": { - "no": 824, + "no": 831, "name": "STATUS/important/background", "fst_reference": "", "optional": false, @@ -11286,7 +11377,7 @@ "cssName": "--smtc-status-important-background" }, "statusImportantStroke": { - "no": 825, + "no": 832, "name": "STATUS/important/stroke", "fst_reference": "STATUS/important/background", "optional": true, @@ -11299,7 +11390,7 @@ "cssName": "--smtc-status-important-stroke" }, "statusImportantForeground": { - "no": 826, + "no": 833, "name": "STATUS/important/foreground", "fst_reference": "foreground/ctrl/onBrand/rest", "optional": true, @@ -11312,7 +11403,7 @@ "cssName": "--smtc-status-important-foreground" }, "statusImportantTintBackground": { - "no": 827, + "no": 834, "name": "STATUS/important/tint/background", "fst_reference": "", "optional": false, @@ -11325,7 +11416,7 @@ "cssName": "--smtc-status-important-tint-background" }, "statusImportantTintStroke": { - "no": 828, + "no": 835, "name": "STATUS/important/tint/stroke", "fst_reference": "", "optional": false, @@ -11338,7 +11429,7 @@ "cssName": "--smtc-status-important-tint-stroke" }, "statusImportantTintForeground": { - "no": 829, + "no": 836, "name": "STATUS/important/tint/foreground", "fst_reference": "", "optional": false, @@ -11351,7 +11442,7 @@ "cssName": "--smtc-status-important-tint-foreground" }, "statusInformativeBackground": { - "no": 830, + "no": 837, "name": "STATUS/informative/background", "fst_reference": "", "optional": false, @@ -11364,7 +11455,7 @@ "cssName": "--smtc-status-informative-background" }, "statusInformativeStroke": { - "no": 831, + "no": 838, "name": "STATUS/informative/stroke", "fst_reference": "STATUS/informative/background", "optional": true, @@ -11377,7 +11468,7 @@ "cssName": "--smtc-status-informative-stroke" }, "statusInformativeForeground": { - "no": 832, + "no": 839, "name": "STATUS/informative/foreground", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -11390,7 +11481,7 @@ "cssName": "--smtc-status-informative-foreground" }, "statusInformativeTintForeground": { - "no": 833, + "no": 840, "name": "STATUS/informative/tint/foreground", "fst_reference": "", "optional": false, @@ -11403,7 +11494,7 @@ "cssName": "--smtc-status-informative-tint-foreground" }, "statusInformativeTintStroke": { - "no": 834, + "no": 841, "name": "STATUS/informative/tint/stroke", "fst_reference": "", "optional": false, @@ -11416,7 +11507,7 @@ "cssName": "--smtc-status-informative-tint-stroke" }, "statusInformativeTintBackground": { - "no": 835, + "no": 842, "name": "STATUS/informative/tint/background", "fst_reference": "", "optional": false, @@ -11429,7 +11520,7 @@ "cssName": "--smtc-status-informative-tint-background" }, "statusAwayForeground": { - "no": 836, + "no": 843, "name": "STATUS/away/foreground", "fst_reference": "", "optional": false, @@ -11442,7 +11533,7 @@ "cssName": "--smtc-status-away-foreground" }, "statusOofForeground": { - "no": 837, + "no": 844, "name": "STATUS/oof/foreground", "fst_reference": "", "optional": false, @@ -11454,8 +11545,8 @@ "exceptions": [], "cssName": "--smtc-status-oof-foreground" }, - "ctrlBooleanSelectionhint": { - "no": 838, + "ctrlBooleanSelectionHint": { + "no": 845, "name": "CTRL/boolean/selectionHint", "fst_reference": "", "optional": false, @@ -11465,10 +11556,10 @@ "contrast": "", "fallback": "", "exceptions": [], - "cssName": "--smtc-ctrl-boolean-selectionhint" + "cssName": "--smtc-ctrl-boolean-selection-hint" }, "ctrlComposerInputBottomStrokeWidthSelectedRest": { - "no": 839, + "no": 846, "name": "CTRL/composer/Input/Bottom-Stroke-Width/Selected-Rest", "fst_reference": "", "optional": false, @@ -11481,7 +11572,7 @@ "cssName": "--smtc-ctrl-composer-input-bottom-stroke-width-selected-rest" }, "ctrlComposerInputBottomStrokeWidthRest": { - "no": 840, + "no": 847, "name": "CTRL/composer/Input/Bottom-Stroke-Width/Rest", "fst_reference": "", "optional": false, @@ -11494,7 +11585,7 @@ "cssName": "--smtc-ctrl-composer-input-bottom-stroke-width-rest" }, "ctrlComposerInputBottomStrokeWidthHover": { - "no": 841, + "no": 848, "name": "CTRL/composer/Input/Bottom-Stroke-Width/Hover", "fst_reference": "", "optional": false, @@ -11507,7 +11598,7 @@ "cssName": "--smtc-ctrl-composer-input-bottom-stroke-width-hover" }, "ctrlComposerInputBottomStrokeWidthPressed": { - "no": 842, + "no": 849, "name": "CTRL/composer/Input/Bottom-Stroke-Width/Pressed", "fst_reference": "", "optional": false, @@ -11520,7 +11611,7 @@ "cssName": "--smtc-ctrl-composer-input-bottom-stroke-width-pressed" }, "ctrlComposerInputCornerRest": { - "no": 843, + "no": 850, "name": "CTRL/composer/Input/Corner/Rest", "fst_reference": "", "optional": false, @@ -11533,7 +11624,7 @@ "cssName": "--smtc-ctrl-composer-input-corner-rest" }, "ctrlComposerInputCornerHover": { - "no": 844, + "no": 851, "name": "CTRL/composer/Input/Corner/Hover", "fst_reference": "", "optional": false, @@ -11546,7 +11637,7 @@ "cssName": "--smtc-ctrl-composer-input-corner-hover" }, "ctrlComposerInputCornerPressed": { - "no": 845, + "no": 852, "name": "CTRL/composer/Input/Corner/Pressed", "fst_reference": "", "optional": false, @@ -11559,7 +11650,7 @@ "cssName": "--smtc-ctrl-composer-input-corner-pressed" }, "ctrlComposerInputBackgroundRest": { - "no": 846, + "no": 853, "name": "CTRL/composer/Input/Background/Rest", "fst_reference": "", "optional": false, @@ -11572,7 +11663,7 @@ "cssName": "--smtc-ctrl-composer-input-background-rest" }, "ctrlComposerInputBackgroundPressed": { - "no": 847, + "no": 854, "name": "CTRL/composer/Input/Background/Pressed", "fst_reference": "", "optional": false, @@ -11585,7 +11676,7 @@ "cssName": "--smtc-ctrl-composer-input-background-pressed" }, "ctrlComposerInputBackgroundDisabled": { - "no": 848, + "no": 855, "name": "CTRL/composer/Input/Background/Disabled", "fst_reference": "", "optional": false, @@ -11598,7 +11689,7 @@ "cssName": "--smtc-ctrl-composer-input-background-disabled" }, "ctrlComposerInputBackgroundSelectedRest": { - "no": 849, + "no": 856, "name": "CTRL/composer/Input/Background/Selected-Rest", "fst_reference": "", "optional": false, @@ -11611,7 +11702,7 @@ "cssName": "--smtc-ctrl-composer-input-background-selected-rest" }, "ctrlComposerInputBackgroundHover": { - "no": 850, + "no": 857, "name": "CTRL/composer/Input/Background/Hover", "fst_reference": "", "optional": false, @@ -11624,7 +11715,7 @@ "cssName": "--smtc-ctrl-composer-input-background-hover" }, "ctrlComposerInputStrokeRest": { - "no": 851, + "no": 858, "name": "CTRL/composer/Input/Stroke/Rest", "fst_reference": "NULL/color", "optional": false, @@ -11636,8 +11727,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-composer-input-stroke-rest" }, - "ctrlComposerInputStrokeHoverUsesgradient": { - "no": 852, + "ctrlComposerInputStrokeHoverUsesGradient": { + "no": 859, "name": "CTRL/composer/Input/Stroke/Hover(UsesGradient)", "fst_reference": "NULL/color", "optional": false, @@ -11647,10 +11738,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-composer-input-stroke-hoverusesgradient" + "cssName": "--smtc-ctrl-composer-input-stroke-hover-uses-gradient" }, - "ctrlComposerInputStrokePressedUsesgradient": { - "no": 853, + "ctrlComposerInputStrokePressedUsesGradient": { + "no": 860, "name": "CTRL/composer/Input/Stroke/Pressed(UsesGradient)", "fst_reference": "NULL/color", "optional": false, @@ -11660,10 +11751,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-composer-input-stroke-pressedusesgradient" + "cssName": "--smtc-ctrl-composer-input-stroke-pressed-uses-gradient" }, - "ctrlComposerInputStrokeDisabledUsesgradient": { - "no": 854, + "ctrlComposerInputStrokeDisabledUsesGradient": { + "no": 861, "name": "CTRL/composer/Input/Stroke/Disabled(UsesGradient)", "fst_reference": "NULL/color", "optional": false, @@ -11673,10 +11764,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-composer-input-stroke-disabledusesgradient" + "cssName": "--smtc-ctrl-composer-input-stroke-disabled-uses-gradient" }, - "ctrlComposerInputStrokeSelectedRestUsesgradient": { - "no": 855, + "ctrlComposerInputStrokeSelectedRestUsesGradient": { + "no": 862, "name": "CTRL/composer/Input/Stroke/Selected-Rest(UsesGradient)", "fst_reference": "NULL/color", "optional": false, @@ -11686,10 +11777,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-composer-input-stroke-selected-restusesgradient" + "cssName": "--smtc-ctrl-composer-input-stroke-selected-rest-uses-gradient" }, "ctrlComposerInputStrokeWidthRest": { - "no": 856, + "no": 863, "name": "CTRL/composer/Input/Stroke-Width/Rest", "fst_reference": "", "optional": false, @@ -11702,7 +11793,7 @@ "cssName": "--smtc-ctrl-composer-input-stroke-width-rest" }, "ctrlComposerInputStrokeWidthHover": { - "no": 857, + "no": 864, "name": "CTRL/composer/Input/Stroke-Width/Hover", "fst_reference": "", "optional": false, @@ -11715,7 +11806,7 @@ "cssName": "--smtc-ctrl-composer-input-stroke-width-hover" }, "ctrlComposerInputStrokeWidthPressed": { - "no": 858, + "no": 865, "name": "CTRL/composer/Input/Stroke-Width/Pressed", "fst_reference": "", "optional": false, @@ -11728,7 +11819,7 @@ "cssName": "--smtc-ctrl-composer-input-stroke-width-pressed" }, "ctrlComposerInputStrokeWidthSelectedRest": { - "no": 859, + "no": 866, "name": "CTRL/composer/Input/Stroke-Width/Selected-Rest", "fst_reference": "", "optional": false, @@ -11740,8 +11831,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-composer-input-stroke-width-selected-rest" }, - "ctrlComposerInputBottomstrokeRest": { - "no": 860, + "ctrlComposerInputBottomStrokeRest": { + "no": 867, "name": "CTRL/composer/Input/BottomStroke/Rest", "fst_reference": "NULL/color", "optional": false, @@ -11751,10 +11842,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-composer-input-bottomstroke-rest" + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-rest" }, - "ctrlComposerInputBottomstrokeHover": { - "no": 861, + "ctrlComposerInputBottomStrokeHover": { + "no": 868, "name": "CTRL/composer/Input/BottomStroke/Hover", "fst_reference": "NULL/color", "optional": false, @@ -11764,10 +11855,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-composer-input-bottomstroke-hover" + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-hover" }, - "ctrlComposerInputBottomstrokePressed": { - "no": 862, + "ctrlComposerInputBottomStrokePressed": { + "no": 869, "name": "CTRL/composer/Input/BottomStroke/Pressed", "fst_reference": "NULL/color", "optional": false, @@ -11777,10 +11868,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-composer-input-bottomstroke-pressed" + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-pressed" }, - "ctrlComposerInputBottomstrokeDisabled": { - "no": 863, + "ctrlComposerInputBottomStrokeDisabled": { + "no": 870, "name": "CTRL/composer/Input/BottomStroke/Disabled", "fst_reference": "NULL/color", "optional": false, @@ -11790,10 +11881,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-composer-input-bottomstroke-disabled" + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-disabled" }, - "ctrlComposerInputBottomstrokeSelectedRest": { - "no": 864, + "ctrlComposerInputBottomStrokeSelectedRest": { + "no": 871, "name": "CTRL/composer/Input/BottomStroke/Selected-Rest", "fst_reference": "NULL/color", "optional": false, @@ -11803,10 +11894,10 @@ "contrast": "", "fallback": "Neutral/Stroke/Transparent/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-composer-input-bottomstroke-selected-rest" + "cssName": "--smtc-ctrl-composer-input-bottom-stroke-selected-rest" }, "ctrlComposerInputShadowXOffset": { - "no": 865, + "no": 872, "name": "CTRL/composer/Input/Shadow/(X-offset)", "fst_reference": "", "optional": false, @@ -11819,7 +11910,7 @@ "cssName": "--smtc-ctrl-composer-input-shadow-x-offset" }, "ctrlComposerInputShadowY": { - "no": 866, + "no": 873, "name": "CTRL/composer/Input/Shadow/(Y)", "fst_reference": "", "optional": false, @@ -11832,7 +11923,7 @@ "cssName": "--smtc-ctrl-composer-input-shadow-y" }, "ctrlComposerInputShadowBlur": { - "no": 867, + "no": 874, "name": "CTRL/composer/Input/Shadow/(Blur)", "fst_reference": "", "optional": false, @@ -11845,7 +11936,7 @@ "cssName": "--smtc-ctrl-composer-input-shadow-blur" }, "ctrlComposerInputShadowColor": { - "no": 868, + "no": 875, "name": "CTRL/composer/Input/Shadow/(Color)", "fst_reference": "", "optional": false, @@ -11858,7 +11949,7 @@ "cssName": "--smtc-ctrl-composer-input-shadow-color" }, "ctrlComposerContainerCorner": { - "no": 869, + "no": 876, "name": "CTRL/composer/Container/Corner", "fst_reference": "", "optional": false, @@ -11871,7 +11962,7 @@ "cssName": "--smtc-ctrl-composer-container-corner" }, "ctrlComposerContainerBackgroundDefault": { - "no": 870, + "no": 877, "name": "CTRL/composer/Container/Background/Default", "fst_reference": "", "optional": false, @@ -11883,8 +11974,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-composer-container-background-default" }, - "ctrlComposerContainerBackgroundAcryliccolorblend": { - "no": 871, + "ctrlComposerContainerBackgroundAcrylicColorBlend": { + "no": 878, "name": "CTRL/composer/Container/Background/(AcrylicColorBlend)", "fst_reference": "background/flyout/(solid)", "optional": true, @@ -11894,10 +11985,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-composer-container-background-acryliccolorblend" + "cssName": "--smtc-ctrl-composer-container-background-acrylic-color-blend" }, - "ctrlComposerContainerBackgroundAcryliclumblend": { - "no": 872, + "ctrlComposerContainerBackgroundAcrylicLumBlend": { + "no": 879, "name": "CTRL/composer/Container/Background/(AcrylicLumBlend)", "fst_reference": "background/flyout/(solid)", "optional": true, @@ -11907,10 +11998,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-ctrl-composer-container-background-acryliclumblend" + "cssName": "--smtc-ctrl-composer-container-background-acrylic-lum-blend" }, "ctrlComposerContainerShadowKeyX": { - "no": 873, + "no": 880, "name": "CTRL/composer/Container/Shadow/Key/(X)", "fst_reference": "", "optional": false, @@ -11923,7 +12014,7 @@ "cssName": "--smtc-ctrl-composer-container-shadow-key-x" }, "ctrlComposerContainerShadowKeyY": { - "no": 874, + "no": 881, "name": "CTRL/composer/Container/Shadow/Key/(Y)", "fst_reference": "", "optional": false, @@ -11936,7 +12027,7 @@ "cssName": "--smtc-ctrl-composer-container-shadow-key-y" }, "ctrlComposerContainerShadowKeyBlur": { - "no": 875, + "no": 882, "name": "CTRL/composer/Container/Shadow/Key/(Blur)", "fst_reference": "", "optional": false, @@ -11949,7 +12040,7 @@ "cssName": "--smtc-ctrl-composer-container-shadow-key-blur" }, "ctrlComposerContainerShadowKeyColor": { - "no": 876, + "no": 883, "name": "CTRL/composer/Container/Shadow/Key/(Color)", "fst_reference": "", "optional": false, @@ -11962,7 +12053,7 @@ "cssName": "--smtc-ctrl-composer-container-shadow-key-color" }, "ctrlComposerContainerShadowAmbientX": { - "no": 877, + "no": 884, "name": "CTRL/composer/Container/Shadow/Ambient/(X)", "fst_reference": "", "optional": false, @@ -11975,7 +12066,7 @@ "cssName": "--smtc-ctrl-composer-container-shadow-ambient-x" }, "ctrlComposerContainerShadowAmbientY": { - "no": 878, + "no": 885, "name": "CTRL/composer/Container/Shadow/Ambient/(Y)", "fst_reference": "", "optional": false, @@ -11988,7 +12079,7 @@ "cssName": "--smtc-ctrl-composer-container-shadow-ambient-y" }, "ctrlComposerContainerShadowAmbientBlur": { - "no": 879, + "no": 886, "name": "CTRL/composer/Container/Shadow/Ambient/(Blur)", "fst_reference": "", "optional": false, @@ -12001,7 +12092,7 @@ "cssName": "--smtc-ctrl-composer-container-shadow-ambient-blur" }, "ctrlComposerContainerShadowAmbientColor": { - "no": 880, + "no": 887, "name": "CTRL/composer/Container/Shadow/Ambient/(Color)", "fst_reference": "", "optional": false, @@ -12014,7 +12105,7 @@ "cssName": "--smtc-ctrl-composer-container-shadow-ambient-color" }, "ctrlComposerContainerStrokeDefault": { - "no": 881, + "no": 888, "name": "CTRL/composer/Container/Stroke/Default", "fst_reference": "NULL/color", "optional": false, @@ -12027,7 +12118,7 @@ "cssName": "--smtc-ctrl-composer-container-stroke-default" }, "aiBrandStop1": { - "no": 882, + "no": 889, "name": "AI/brand/(stop1)", "fst_reference": "", "optional": false, @@ -12040,7 +12131,7 @@ "cssName": "--smtc-ai-brand-stop1" }, "aiBrandStop2": { - "no": 883, + "no": 890, "name": "AI/brand/(stop2)", "fst_reference": "", "optional": false, @@ -12053,7 +12144,7 @@ "cssName": "--smtc-ai-brand-stop2" }, "aiBrandStop3": { - "no": 884, + "no": 891, "name": "AI/brand/(stop3)", "fst_reference": "", "optional": false, @@ -12066,7 +12157,7 @@ "cssName": "--smtc-ai-brand-stop3" }, "aiBrandStop4": { - "no": 885, + "no": 892, "name": "AI/brand/(stop4)", "fst_reference": "", "optional": false, @@ -12079,7 +12170,7 @@ "cssName": "--smtc-ai-brand-stop4" }, "aiShimmerStop1": { - "no": 886, + "no": 893, "name": "AI/shimmer/(stop1)", "fst_reference": "", "optional": false, @@ -12092,7 +12183,7 @@ "cssName": "--smtc-ai-shimmer-stop1" }, "aiShimmerStop2": { - "no": 887, + "no": 894, "name": "AI/shimmer/(stop2)", "fst_reference": "", "optional": false, @@ -12105,7 +12196,7 @@ "cssName": "--smtc-ai-shimmer-stop2" }, "aiShimmerStop3": { - "no": 888, + "no": 895, "name": "AI/shimmer/(stop3)", "fst_reference": "", "optional": false, @@ -12118,7 +12209,7 @@ "cssName": "--smtc-ai-shimmer-stop3" }, "aiShimmerStop4": { - "no": 889, + "no": 896, "name": "AI/shimmer/(stop4)", "fst_reference": "", "optional": false, @@ -12131,7 +12222,7 @@ "cssName": "--smtc-ai-shimmer-stop4" }, "shadowWindowActiveKeyX": { - "no": 890, + "no": 897, "name": "shadow/window/active/(key)/(x)", "fst_reference": "", "optional": false, @@ -12144,7 +12235,7 @@ "cssName": "--smtc-shadow-window-active-key-x" }, "shadowWindowActiveKeyY": { - "no": 891, + "no": 898, "name": "shadow/window/active/(key)/(y)", "fst_reference": "", "optional": false, @@ -12157,7 +12248,7 @@ "cssName": "--smtc-shadow-window-active-key-y" }, "shadowWindowActiveKeyBlur": { - "no": 892, + "no": 899, "name": "shadow/window/active/(key)/(blur)", "fst_reference": "", "optional": false, @@ -12170,7 +12261,7 @@ "cssName": "--smtc-shadow-window-active-key-blur" }, "shadowWindowActiveKeyColor": { - "no": 893, + "no": 900, "name": "shadow/window/active/(key)/(color)", "fst_reference": "", "optional": false, @@ -12183,7 +12274,7 @@ "cssName": "--smtc-shadow-window-active-key-color" }, "shadowWindowActiveAmbientX": { - "no": 894, + "no": 901, "name": "shadow/window/active/(ambient)/(x)", "fst_reference": "", "optional": false, @@ -12196,7 +12287,7 @@ "cssName": "--smtc-shadow-window-active-ambient-x" }, "shadowWindowActiveAmbientY": { - "no": 895, + "no": 902, "name": "shadow/window/active/(ambient)/(y)", "fst_reference": "", "optional": false, @@ -12209,7 +12300,7 @@ "cssName": "--smtc-shadow-window-active-ambient-y" }, "shadowWindowActiveAmbientBlur": { - "no": 896, + "no": 903, "name": "shadow/window/active/(ambient)/(blur)", "fst_reference": "", "optional": false, @@ -12222,7 +12313,7 @@ "cssName": "--smtc-shadow-window-active-ambient-blur" }, "shadowWindowActiveAmbientColor": { - "no": 897, + "no": 904, "name": "shadow/window/active/(ambient)/(color)", "fst_reference": "", "optional": false, @@ -12235,7 +12326,7 @@ "cssName": "--smtc-shadow-window-active-ambient-color" }, "shadowWindowInactiveKeyX": { - "no": 898, + "no": 905, "name": "shadow/window/inactive/(key)/(x)", "fst_reference": "shadow/window/active/(key)/(x)", "optional": true, @@ -12248,7 +12339,7 @@ "cssName": "--smtc-shadow-window-inactive-key-x" }, "shadowWindowInactiveKeyY": { - "no": 899, + "no": 906, "name": "shadow/window/inactive/(key)/(y)", "fst_reference": "shadow/window/active/(key)/(y)", "optional": true, @@ -12261,7 +12352,7 @@ "cssName": "--smtc-shadow-window-inactive-key-y" }, "shadowWindowInactiveKeyBlur": { - "no": 900, + "no": 907, "name": "shadow/window/inactive/(key)/(blur)", "fst_reference": "shadow/window/active/(key)/(blur)", "optional": true, @@ -12274,7 +12365,7 @@ "cssName": "--smtc-shadow-window-inactive-key-blur" }, "shadowWindowInactiveKeyColor": { - "no": 901, + "no": 908, "name": "shadow/window/inactive/(key)/(Color)", "fst_reference": "shadow/window/active/(key)/(color)", "optional": true, @@ -12287,7 +12378,7 @@ "cssName": "--smtc-shadow-window-inactive-key-color" }, "shadowWindowInactiveAmbientX": { - "no": 902, + "no": 909, "name": "shadow/window/inactive/(ambient)/(x)", "fst_reference": "", "optional": false, @@ -12300,7 +12391,7 @@ "cssName": "--smtc-shadow-window-inactive-ambient-x" }, "shadowWindowInactiveAmbientY": { - "no": 903, + "no": 910, "name": "shadow/window/inactive/(ambient)/(y)", "fst_reference": "", "optional": false, @@ -12313,7 +12404,7 @@ "cssName": "--smtc-shadow-window-inactive-ambient-y" }, "shadowWindowInactiveAmbientBlur": { - "no": 904, + "no": 911, "name": "shadow/window/inactive/(ambient)/(blur)", "fst_reference": "", "optional": false, @@ -12326,7 +12417,7 @@ "cssName": "--smtc-shadow-window-inactive-ambient-blur" }, "shadowWindowInactiveAmbientColor": { - "no": 905, + "no": 912, "name": "shadow/window/inactive/(ambient)/(color)", "fst_reference": "", "optional": false, @@ -12339,7 +12430,7 @@ "cssName": "--smtc-shadow-window-inactive-ambient-color" }, "nullColor": { - "no": 906, + "no": 913, "name": "NULL/color", "fst_reference": "", "optional": false, @@ -12362,7 +12453,7 @@ "cssName": "--smtc-null-color" }, "ctrlCardStateRest": { - "no": 907, + "no": 914, "name": "CTRL/card/state/(rest)", "fst_reference": "", "optional": false, @@ -12375,7 +12466,7 @@ "cssName": "--smtc-ctrl-card-state-rest" }, "ctrlCardStateHover": { - "no": 908, + "no": 915, "name": "CTRL/card/state/(hover)", "fst_reference": "", "optional": false, @@ -12388,7 +12479,7 @@ "cssName": "--smtc-ctrl-card-state-hover" }, "ctrlCardStatePressed": { - "no": 909, + "no": 916, "name": "CTRL/card/state/(pressed)", "fst_reference": "", "optional": false, @@ -12401,7 +12492,7 @@ "cssName": "--smtc-ctrl-card-state-pressed" }, "ctrlCardStateDisabled": { - "no": 910, + "no": 917, "name": "CTRL/card/state/(disabled)", "fst_reference": "", "optional": false, @@ -12414,7 +12505,7 @@ "cssName": "--smtc-ctrl-card-state-disabled" }, "ctrlListShadowSelectedKeyY2": { - "no": 911, + "no": 918, "name": "CTRL/list/shadow/selected/(key)/(y)2", "fst_reference": "NULL/number", "optional": false, @@ -12424,10 +12515,10 @@ "contrast": "", "fallback": "NULL/number", "exceptions": [], - "cssName": "--smtc-ctrl-list-shadow-selected-key-y2" + "cssName": "--smtc-ctrl-list-shadow-selected-key-y-2" }, "ctrlListShadowSelectedKeyX": { - "no": 912, + "no": 919, "name": "CTRL/list/shadow/selected/(key)/(x)", "fst_reference": "", "optional": false, @@ -12440,7 +12531,7 @@ "cssName": "--smtc-ctrl-list-shadow-selected-key-x" }, "ctrlListShadowSelectedKeyY": { - "no": 913, + "no": 920, "name": "CTRL/list/shadow/selected/(key)/(y)", "fst_reference": "", "optional": false, @@ -12453,7 +12544,7 @@ "cssName": "--smtc-ctrl-list-shadow-selected-key-y" }, "ctrlListShadowSelectedKeyBlur": { - "no": 914, + "no": 921, "name": "CTRL/list/shadow/selected/(key)/(blur)", "fst_reference": "", "optional": false, @@ -12466,7 +12557,7 @@ "cssName": "--smtc-ctrl-list-shadow-selected-key-blur" }, "ctrlListShadowSelectedKeyColor": { - "no": 915, + "no": 922, "name": "CTRL/list/shadow/selected/(key)/(color)", "fst_reference": "", "optional": false, @@ -12479,7 +12570,7 @@ "cssName": "--smtc-ctrl-list-shadow-selected-key-color" }, "ctrlListShadowSelectedAmbientX": { - "no": 916, + "no": 923, "name": "CTRL/list/shadow/selected/(ambient)/(x)", "fst_reference": "", "optional": false, @@ -12492,7 +12583,7 @@ "cssName": "--smtc-ctrl-list-shadow-selected-ambient-x" }, "ctrlListShadowSelectedAmbientY": { - "no": 917, + "no": 924, "name": "CTRL/list/shadow/selected/(ambient)/(y)", "fst_reference": "", "optional": false, @@ -12505,7 +12596,7 @@ "cssName": "--smtc-ctrl-list-shadow-selected-ambient-y" }, "ctrlListShadowSelectedAmbientBlur": { - "no": 918, + "no": 925, "name": "CTRL/list/shadow/selected/(ambient)/(blur)", "fst_reference": "", "optional": false, @@ -12518,7 +12609,7 @@ "cssName": "--smtc-ctrl-list-shadow-selected-ambient-blur" }, "ctrlListShadowSelectedAmbientColor": { - "no": 919, + "no": 926, "name": "CTRL/list/shadow/selected/(ambient)/(color)", "fst_reference": "", "optional": false, @@ -12531,7 +12622,7 @@ "cssName": "--smtc-ctrl-list-shadow-selected-ambient-color" }, "statusNeutralBackground": { - "no": 920, + "no": 927, "name": "STATUS/neutral/background", "fst_reference": "", "optional": false, @@ -12544,7 +12635,7 @@ "cssName": "--smtc-status-neutral-background" }, "statusNeutralStroke": { - "no": 921, + "no": 928, "name": "STATUS/neutral/stroke", "fst_reference": "STATUS/neutral/background", "optional": true, @@ -12557,7 +12648,7 @@ "cssName": "--smtc-status-neutral-stroke" }, "statusNeutralForeground": { - "no": 922, + "no": 929, "name": "STATUS/neutral/foreground", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -12570,7 +12661,7 @@ "cssName": "--smtc-status-neutral-foreground" }, "statusNeutralTintBackground": { - "no": 923, + "no": 930, "name": "STATUS/neutral/tint/background", "fst_reference": "", "optional": false, @@ -12583,7 +12674,7 @@ "cssName": "--smtc-status-neutral-tint-background" }, "statusNeutralTintStroke": { - "no": 924, + "no": 931, "name": "STATUS/neutral/tint/stroke", "fst_reference": "", "optional": false, @@ -12596,7 +12687,7 @@ "cssName": "--smtc-status-neutral-tint-stroke" }, "statusNeutralTintForeground": { - "no": 925, + "no": 932, "name": "STATUS/neutral/tint/foreground", "fst_reference": "foreground/ctrl/neutral/secondary/rest", "optional": true, @@ -12609,7 +12700,7 @@ "cssName": "--smtc-status-neutral-tint-foreground" }, "cornerFlyoutShellRest": { - "no": 926, + "no": 933, "name": "corner/flyout/shell-rest", "fst_reference": "corner/flyout/rest", "optional": true, @@ -12622,7 +12713,7 @@ "cssName": "--smtc-corner-flyout-shell-rest" }, "nullNumber": { - "no": 927, + "no": 934, "name": "NULL/number", "fst_reference": "", "optional": false, @@ -12635,7 +12726,7 @@ "cssName": "--smtc-null-number" }, "nullString": { - "no": 928, + "no": 935, "name": "NULL/string", "fst_reference": "", "optional": false, @@ -12648,7 +12739,7 @@ "cssName": "--smtc-null-string" }, "ctrlSegmentedSmPaddingRest": { - "no": 929, + "no": 936, "name": "CTRL/segmented/sm/padding/rest", "fst_reference": "", "optional": false, @@ -12661,7 +12752,7 @@ "cssName": "--smtc-ctrl-segmented-sm-padding-rest" }, "ctrlSegmentedSmPaddingHover": { - "no": 930, + "no": 937, "name": "CTRL/segmented/sm/padding/hover", "fst_reference": "CTRL/segmented/sm/padding/rest", "optional": true, @@ -12674,7 +12765,7 @@ "cssName": "--smtc-ctrl-segmented-sm-padding-hover" }, "ctrlSegmentedSmPaddingPressed": { - "no": 931, + "no": 938, "name": "CTRL/segmented/sm/padding/pressed", "fst_reference": "CTRL/segmented/sm/padding/rest", "optional": true, @@ -12687,7 +12778,7 @@ "cssName": "--smtc-ctrl-segmented-sm-padding-pressed" }, "ctrlSegmentedLgPaddingRest": { - "no": 932, + "no": 939, "name": "CTRL/segmented/lg/padding/rest", "fst_reference": "", "optional": false, @@ -12700,7 +12791,7 @@ "cssName": "--smtc-ctrl-segmented-lg-padding-rest" }, "ctrlSegmentedLgPaddingHover": { - "no": 933, + "no": 940, "name": "CTRL/segmented/lg/padding/hover", "fst_reference": "CTRL/segmented/lg/padding/rest", "optional": true, @@ -12713,7 +12804,7 @@ "cssName": "--smtc-ctrl-segmented-lg-padding-hover" }, "ctrlSegmentedLgPaddingPressed": { - "no": 934, + "no": 941, "name": "CTRL/segmented/lg/padding/pressed", "fst_reference": "CTRL/segmented/lg/padding/rest", "optional": true, @@ -12726,7 +12817,7 @@ "cssName": "--smtc-ctrl-segmented-lg-padding-pressed" }, "ctrlSegmentedSmItemCornerRest": { - "no": 935, + "no": 942, "name": "CTRL/segmented/sm/item/corner/rest", "fst_reference": "", "optional": false, @@ -12739,10 +12830,10 @@ "cssName": "--smtc-ctrl-segmented-sm-item-corner-rest" }, "ctrlSegmentedSmItemCornerHover": { - "no": 936, + "no": 943, "name": "CTRL/segmented/sm/item/corner/hover", - "fst_reference": "", - "optional": false, + "fst_reference": "CTRL/segmented/sm/item/corner/rest", + "optional": true, "nullable": false, "description": "", "components": [], @@ -12752,10 +12843,10 @@ "cssName": "--smtc-ctrl-segmented-sm-item-corner-hover" }, "ctrlSegmentedSmItemCornerPressed": { - "no": 937, + "no": 944, "name": "CTRL/segmented/sm/item/corner/pressed", - "fst_reference": "", - "optional": false, + "fst_reference": "CTRL/segmented/sm/item/corner/rest", + "optional": true, "nullable": false, "description": "", "components": [], @@ -12765,7 +12856,7 @@ "cssName": "--smtc-ctrl-segmented-sm-item-corner-pressed" }, "ctrlSegmentedLgItemCornerRest": { - "no": 938, + "no": 945, "name": "CTRL/segmented/lg/item/corner/rest", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -12778,7 +12869,7 @@ "cssName": "--smtc-ctrl-segmented-lg-item-corner-rest" }, "ctrlSegmentedLgItemCornerHover": { - "no": 939, + "no": 946, "name": "CTRL/segmented/lg/item/corner/hover", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -12791,7 +12882,7 @@ "cssName": "--smtc-ctrl-segmented-lg-item-corner-hover" }, "ctrlSegmentedLgItemCornerPressed": { - "no": 940, + "no": 947, "name": "CTRL/segmented/lg/item/corner/pressed", "fst_reference": "corner/ctrl/rest", "optional": true, @@ -12804,7 +12895,7 @@ "cssName": "--smtc-ctrl-segmented-lg-item-corner-pressed" }, "ctrlSegmentedSmCornerRest": { - "no": 941, + "no": 948, "name": "CTRL/segmented/sm/corner/rest", "fst_reference": "corner/ctrl-sm/rest", "optional": true, @@ -12817,7 +12908,7 @@ "cssName": "--smtc-ctrl-segmented-sm-corner-rest" }, "ctrlSegmentedSmCornerHover": { - "no": 942, + "no": 949, "name": "CTRL/segmented/sm/corner/hover", "fst_reference": "corner/ctrl-sm/rest", "optional": true, @@ -12830,7 +12921,7 @@ "cssName": "--smtc-ctrl-segmented-sm-corner-hover" }, "ctrlSegmentedSmCornerPressed": { - "no": 943, + "no": 950, "name": "CTRL/segmented/sm/corner/pressed", "fst_reference": "corner/ctrl-sm/rest", "optional": true, @@ -12843,7 +12934,7 @@ "cssName": "--smtc-ctrl-segmented-sm-corner-pressed" }, "ctrlSegmentedLgCornerRest": { - "no": 944, + "no": 951, "name": "CTRL/segmented/lg/corner/rest", "fst_reference": "corner/ctrl-lg/rest", "optional": true, @@ -12856,7 +12947,7 @@ "cssName": "--smtc-ctrl-segmented-lg-corner-rest" }, "ctrlSegmentedLgCornerHover": { - "no": 945, + "no": 952, "name": "CTRL/segmented/lg/corner/hover", "fst_reference": "corner/ctrl-lg/rest", "optional": true, @@ -12869,7 +12960,7 @@ "cssName": "--smtc-ctrl-segmented-lg-corner-hover" }, "ctrlSegmentedLgCornerPressed": { - "no": 946, + "no": 953, "name": "CTRL/segmented/lg/corner/pressed", "fst_reference": "corner/ctrl-lg/rest", "optional": true, @@ -12881,8 +12972,8 @@ "exceptions": [], "cssName": "--smtc-ctrl-segmented-lg-corner-pressed" }, - "ctrlLitefilterStrokewidthSelected": { - "no": 947, + "ctrlLiteFilterStrokeWidthSelected": { + "no": 954, "name": "CTRL/liteFilter/strokeWidth/selected", "fst_reference": "strokeWidth/default", "optional": true, @@ -12892,10 +12983,10 @@ "contrast": "", "fallback": "Thin", "exceptions": [], - "cssName": "--smtc-ctrl-litefilter-strokewidth-selected" + "cssName": "--smtc-ctrl-lite-filter-stroke-width-selected" }, "materialAcrylicShellDefaultSolid": { - "no": 948, + "no": 955, "name": "material/acrylic/shell-default/(solid)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -12907,8 +12998,8 @@ "exceptions": [], "cssName": "--smtc-material-acrylic-shell-default-solid" }, - "materialAcrylicShellDefaultColorblend": { - "no": 949, + "materialAcrylicShellDefaultColorBlend": { + "no": 956, "name": "material/acrylic/shell-default/(colorBlend)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -12918,10 +13009,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-material-acrylic-shell-default-colorblend" + "cssName": "--smtc-material-acrylic-shell-default-color-blend" }, - "materialAcrylicShellDefaultLumblend": { - "no": 950, + "materialAcrylicShellDefaultLumBlend": { + "no": 957, "name": "material/acrylic/shell-default/(lumBlend)", "fst_reference": "background/layer/primary(solid)", "optional": true, @@ -12931,10 +13022,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-material-acrylic-shell-default-lumblend" + "cssName": "--smtc-material-acrylic-shell-default-lum-blend" }, - "backgroundCardOnsecondaryDefaultRest": { - "no": 951, + "backgroundCardOnSecondaryDefaultRest": { + "no": 958, "name": "background/card/onSecondary/default/rest", "fst_reference": "", "optional": false, @@ -12944,10 +13035,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Rest", "exceptions": [], - "cssName": "--smtc-background-card-onsecondary-default-rest" + "cssName": "--smtc-background-card-on-secondary-default-rest" }, - "backgroundCardOnsecondaryAltRest": { - "no": 952, + "backgroundCardOnSecondaryAltRest": { + "no": 959, "name": "background/card/onSecondary/alt/rest", "fst_reference": "", "optional": false, @@ -12957,10 +13048,10 @@ "contrast": "", "fallback": "background/card/onPrimary/default/rest", "exceptions": [], - "cssName": "--smtc-background-card-onsecondary-alt-rest" + "cssName": "--smtc-background-card-on-secondary-alt-rest" }, - "backgroundCardOnsecondaryAltHover": { - "no": 953, + "backgroundCardOnSecondaryAltHover": { + "no": 960, "name": "background/card/onSecondary/alt/hover", "fst_reference": "", "optional": false, @@ -12970,10 +13061,10 @@ "contrast": "", "fallback": "background/card/onPrimary/default/hover", "exceptions": [], - "cssName": "--smtc-background-card-onsecondary-alt-hover" + "cssName": "--smtc-background-card-on-secondary-alt-hover" }, - "backgroundCardOnsecondaryAltPressed": { - "no": 954, + "backgroundCardOnSecondaryAltPressed": { + "no": 961, "name": "background/card/onSecondary/alt/pressed", "fst_reference": "", "optional": false, @@ -12983,10 +13074,10 @@ "contrast": "", "fallback": "background/card/onPrimary/default/pressed", "exceptions": [], - "cssName": "--smtc-background-card-onsecondary-alt-pressed" + "cssName": "--smtc-background-card-on-secondary-alt-pressed" }, - "backgroundCardOnsecondaryAltDisabled": { - "no": 955, + "backgroundCardOnSecondaryAltDisabled": { + "no": 962, "name": "background/card/onSecondary/alt/disabled", "fst_reference": "", "optional": false, @@ -12996,10 +13087,10 @@ "contrast": "", "fallback": "background/card/onPrimary/default/pressed", "exceptions": [], - "cssName": "--smtc-background-card-onsecondary-alt-disabled" + "cssName": "--smtc-background-card-on-secondary-alt-disabled" }, - "backgroundCardOnsecondaryDefaultHover": { - "no": 956, + "backgroundCardOnSecondaryDefaultHover": { + "no": 963, "name": "background/card/onSecondary/default/hover", "fst_reference": "", "optional": false, @@ -13009,10 +13100,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Hover", "exceptions": [], - "cssName": "--smtc-background-card-onsecondary-default-hover" + "cssName": "--smtc-background-card-on-secondary-default-hover" }, - "backgroundCardOnsecondaryDefaultPressed": { - "no": 957, + "backgroundCardOnSecondaryDefaultPressed": { + "no": 964, "name": "background/card/onSecondary/default/pressed", "fst_reference": "", "optional": false, @@ -13022,10 +13113,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Pressed", "exceptions": [], - "cssName": "--smtc-background-card-onsecondary-default-pressed" + "cssName": "--smtc-background-card-on-secondary-default-pressed" }, - "backgroundCardOnsecondaryDefaultDisabled": { - "no": 958, + "backgroundCardOnSecondaryDefaultDisabled": { + "no": 965, "name": "background/card/onSecondary/default/disabled", "fst_reference": "", "optional": false, @@ -13035,10 +13126,10 @@ "contrast": "", "fallback": "Neutral/Background/Disabled/Rest", "exceptions": [], - "cssName": "--smtc-background-card-onsecondary-default-disabled" + "cssName": "--smtc-background-card-on-secondary-default-disabled" }, - "backgroundCardOnsecondaryDefaultSelected": { - "no": 959, + "backgroundCardOnSecondaryDefaultSelected": { + "no": 966, "name": "background/card/onSecondary/default/selected", "fst_reference": "background/card/onSecondary/default/rest", "optional": true, @@ -13048,10 +13139,10 @@ "contrast": "", "fallback": "Neutral/Background/1/Selected", "exceptions": [], - "cssName": "--smtc-background-card-onsecondary-default-selected" + "cssName": "--smtc-background-card-on-secondary-default-selected" }, - "backgroundCardOnflyoutDefaultRest": { - "no": 960, + "backgroundCardOnFlyoutDefaultRest": { + "no": 967, "name": "background/card/onFlyout/default/rest", "fst_reference": "", "optional": false, @@ -13061,10 +13152,10 @@ "contrast": "", "fallback": "background/card/onPrimary/default/rest", "exceptions": [], - "cssName": "--smtc-background-card-onflyout-default-rest" + "cssName": "--smtc-background-card-on-flyout-default-rest" }, - "backgroundCardOnflyoutDefaultHover": { - "no": 961, + "backgroundCardOnFlyoutDefaultHover": { + "no": 968, "name": "background/card/onFlyout/default/hover", "fst_reference": "", "optional": false, @@ -13074,10 +13165,10 @@ "contrast": "", "fallback": "background/card/onPrimary/default/hover", "exceptions": [], - "cssName": "--smtc-background-card-onflyout-default-hover" + "cssName": "--smtc-background-card-on-flyout-default-hover" }, - "backgroundCardOnflyoutDefaultPressed": { - "no": 962, + "backgroundCardOnFlyoutDefaultPressed": { + "no": 969, "name": "background/card/onFlyout/default/pressed", "fst_reference": "", "optional": false, @@ -13087,10 +13178,10 @@ "contrast": "", "fallback": "background/card/onPrimary/default/pressed", "exceptions": [], - "cssName": "--smtc-background-card-onflyout-default-pressed" + "cssName": "--smtc-background-card-on-flyout-default-pressed" }, - "backgroundCardOnflyoutDefaultDisabled": { - "no": 963, + "backgroundCardOnFlyoutDefaultDisabled": { + "no": 970, "name": "background/card/onFlyout/default/disabled", "fst_reference": "", "optional": false, @@ -13100,10 +13191,10 @@ "contrast": "", "fallback": "background/card/onPrimary/default/pressed", "exceptions": [], - "cssName": "--smtc-background-card-onflyout-default-disabled" + "cssName": "--smtc-background-card-on-flyout-default-disabled" }, "ctrlProgressLgHeightFilled": { - "no": 964, + "no": 971, "name": "CTRL/progress/lg/height/filled", "fst_reference": "", "optional": false, @@ -13116,7 +13207,7 @@ "cssName": "--smtc-ctrl-progress-lg-height-filled" }, "ctrlProgressLgHeightEmpty": { - "no": 965, + "no": 972, "name": "CTRL/progress/lg/height/empty", "fst_reference": "CTRL/progress/lg/height/filled", "optional": true, @@ -13127,5 +13218,44 @@ "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 index 63b0ef7490d86..1c48ba952cfa9 100644 --- a/packages/semantic-tokens/src/components/avatar/tokens.ts +++ b/packages/semantic-tokens/src/components/avatar/tokens.ts @@ -3,10 +3,10 @@ import { sizeCtrlDefaultRaw, cornerCircularRaw, sizeCtrlIconRaw, - strokewidthDefaultRaw, + strokeWidthDefaultRaw, cornerCtrlRestRaw, - textGlobalBody3FontsizeRaw, - textGlobalBody3LineheightRaw, + textGlobalBody3FontSizeRaw, + textGlobalBody3LineHeightRaw, backgroundCtrlBrandRestRaw, backgroundLayerPrimarySolidRaw, } from '../../control/variables'; @@ -16,18 +16,18 @@ import { ctrlAvatarBackgroundRaw, ctrlAvatarForegroundRaw, ctrlAvatarIconSizeRaw, - ctrlAvatarPresencebadgeSizeRaw, - ctrlAvatarActiveringSizeRaw, - ctrlAvatarPresencebadgePaddingBottomrightoffsetRaw, + ctrlAvatarPresenceBadgeSizeRaw, + ctrlAvatarActiveRingSizeRaw, + ctrlAvatarPresenceBadgePaddingBottomRightOffsetRaw, ctrlAvatarCornerGroupRaw, - ctrlAvatarActiveringStrokewidthRaw, - ctrlAvatarPresencebadgeStrokewidthRaw, - ctrlAvatarTextFontsizeRaw, - ctrlAvatarTextLineheightRaw, - ctrlAvatarTextPaddingTopoffsetRaw, - ctrlAvatarActiveringStrokeRaw, - ctrlAvatarShowcutoutRaw, - ctrlAvatarPresencebadgeBackgroundBehindbadgeRaw, + ctrlAvatarActiveRingStrokeWidthRaw, + ctrlAvatarPresenceBadgeStrokeWidthRaw, + ctrlAvatarTextFontSizeRaw, + ctrlAvatarTextLineHeightRaw, + ctrlAvatarTextPaddingTopOffsetRaw, + ctrlAvatarActiveRingStrokeRaw, + ctrlAvatarShowCutoutRaw, + ctrlAvatarPresenceBadgeBackgroundBehindBadgeRaw, } from './variables'; export const ctrlAvatarSize = `var(${ctrlAvatarSizeRaw}, var(${sizeCtrlDefaultRaw}))`; @@ -35,15 +35,15 @@ export const ctrlAvatarCornerItem = `var(${ctrlAvatarCornerItemRaw}, var(${corne export const ctrlAvatarBackground = `var(${ctrlAvatarBackgroundRaw})`; export const ctrlAvatarForeground = `var(${ctrlAvatarForegroundRaw})`; 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 ctrlAvatarPresenceBadgeSize = `var(${ctrlAvatarPresenceBadgeSizeRaw})`; +export const ctrlAvatarActiveRingSize = `var(${ctrlAvatarActiveRingSizeRaw})`; +export const ctrlAvatarPresenceBadgePaddingBottomRightOffset = `var(${ctrlAvatarPresenceBadgePaddingBottomRightOffsetRaw}, var(${strokeWidthDefaultRaw}))`; export const ctrlAvatarCornerGroup = `var(${ctrlAvatarCornerGroupRaw}, var(${cornerCtrlRestRaw}))`; -export const ctrlAvatarActiveringStrokewidth = `var(${ctrlAvatarActiveringStrokewidthRaw})`; -export const ctrlAvatarPresencebadgeStrokewidth = `var(${ctrlAvatarPresencebadgeStrokewidthRaw}, var(${strokewidthDefaultRaw}))`; -export const ctrlAvatarTextFontsize = `var(${ctrlAvatarTextFontsizeRaw}, var(${textGlobalBody3FontsizeRaw}))`; -export const ctrlAvatarTextLineheight = `var(${ctrlAvatarTextLineheightRaw}, var(${textGlobalBody3LineheightRaw}))`; -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}))`; +export const ctrlAvatarActiveRingStrokeWidth = `var(${ctrlAvatarActiveRingStrokeWidthRaw})`; +export const ctrlAvatarPresenceBadgeStrokeWidth = `var(${ctrlAvatarPresenceBadgeStrokeWidthRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlAvatarTextFontSize = `var(${ctrlAvatarTextFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}))`; +export const ctrlAvatarTextLineHeight = `var(${ctrlAvatarTextLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}))`; +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}))`; diff --git a/packages/semantic-tokens/src/components/avatar/variables.ts b/packages/semantic-tokens/src/components/avatar/variables.ts index 7f63fa9d49072..8289782260d1b 100644 --- a/packages/semantic-tokens/src/components/avatar/variables.ts +++ b/packages/semantic-tokens/src/components/avatar/variables.ts @@ -4,17 +4,17 @@ 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-presencebadge-size'; -export const ctrlAvatarActiveringSizeRaw = '--smtc-ctrl-avatar-activering-size'; -export const ctrlAvatarPresencebadgePaddingBottomrightoffsetRaw = - '--smtc-ctrl-avatar-presencebadge-padding-bottomrightoffset'; +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-activering-strokewidth'; -export const ctrlAvatarPresencebadgeStrokewidthRaw = '--smtc-ctrl-avatar-presencebadge-strokewidth'; -export const ctrlAvatarTextFontsizeRaw = '--smtc-ctrl-avatar-text-fontsize'; -export const ctrlAvatarTextLineheightRaw = '--smtc-ctrl-avatar-text-lineheight'; -export const ctrlAvatarTextPaddingTopoffsetRaw = '--smtc-ctrl-avatar-text-padding-topoffset'; -export const ctrlAvatarActiveringStrokeRaw = '--smtc-ctrl-avatar-activering-stroke'; -export const ctrlAvatarShowcutoutRaw = '--smtc-ctrl-avatar-showcutout'; -export const ctrlAvatarPresencebadgeBackgroundBehindbadgeRaw = - '--smtc-ctrl-avatar-presencebadge-background-behindbadge'; +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 index f61e9b6b20189..ad02e02f05691 100644 --- a/packages/semantic-tokens/src/components/badge/tokens.ts +++ b/packages/semantic-tokens/src/components/badge/tokens.ts @@ -1,5 +1,5 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -import { iconthemeCtrlDefaultRestRaw } from '../../control/variables'; +import { iconThemeCtrlDefaultRestRaw } from '../../control/variables'; import { ctrlBadgeTextPaddingTopRaw, ctrlBadgeTextPaddingBottomRaw, @@ -30,7 +30,7 @@ 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 ctrlBadgeIconTheme = `var(${ctrlBadgeIconThemeRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; export const ctrlBadgeBeaconSize = `var(${ctrlBadgeBeaconSizeRaw})`; export const ctrlBadgeSize = `var(${ctrlBadgeSizeRaw})`; export const ctrlBadgeCorner = `var(${ctrlBadgeCornerRaw})`; diff --git a/packages/semantic-tokens/src/components/boolean/tokens.ts b/packages/semantic-tokens/src/components/boolean/tokens.ts index a5b98d56f349c..ac02d2b56dd9a 100644 --- a/packages/semantic-tokens/src/components/boolean/tokens.ts +++ b/packages/semantic-tokens/src/components/boolean/tokens.ts @@ -1,4 +1,4 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -import { ctrlBooleanSelectionhintRaw } from './variables'; +import { ctrlBooleanSelectionHintRaw } from './variables'; -export const ctrlBooleanSelectionhint = `var(${ctrlBooleanSelectionhintRaw})`; +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 index 7ba3c9d705c60..e259f2844f56d 100644 --- a/packages/semantic-tokens/src/components/boolean/variables.ts +++ b/packages/semantic-tokens/src/components/boolean/variables.ts @@ -1,2 +1,2 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -export const ctrlBooleanSelectionhintRaw = '--smtc-ctrl-boolean-selectionhint'; +export const ctrlBooleanSelectionHintRaw = '--smtc-ctrl-boolean-selection-hint'; diff --git a/packages/semantic-tokens/src/components/choice/tokens.ts b/packages/semantic-tokens/src/components/choice/tokens.ts index 33efac35323d7..4b87453875d89 100644 --- a/packages/semantic-tokens/src/components/choice/tokens.ts +++ b/packages/semantic-tokens/src/components/choice/tokens.ts @@ -3,7 +3,7 @@ import { sizeCtrlIconRaw, foregroundCtrlNeutralSecondaryRestRaw, foregroundCtrlNeutralSecondaryDisabledRaw, - sizeCtrlIconsecondaryRaw, + sizeCtrlIconSecondaryRaw, cornerCircularRaw, sizeCtrlSmIconRaw, sizeCtrlLgIconRaw, @@ -30,24 +30,24 @@ import { ctrlChoiceCheckboxIconSizeRaw, ctrlChoiceCheckboxCornerRaw, ctrlChoiceCheckboxIndeterminateCornerRaw, - ctrlChoiceCheckboxIndeterminateHeightRaw, ctrlChoiceCheckboxIndeterminateWidthRaw, + ctrlChoiceCheckboxIndeterminateHeightRaw, ctrlChoiceRadioCornerRaw, ctrlChoiceSwitchCornerRaw, - ctrlChoiceRadioDotSizeRestRaw, - ctrlChoiceRadioDotSizeHoverRaw, - ctrlChoiceRadioDotSizePressedRaw, + ctrlChoiceSwitchHeightRaw, + ctrlChoiceSwitchWidthRaw, ctrlChoiceSwitchPaddingRestRaw, ctrlChoiceSwitchPaddingHoverRaw, ctrlChoiceSwitchPaddingPressedRaw, - ctrlChoiceSwitchHeightRaw, - ctrlChoiceSwitchWidthRaw, ctrlChoiceSwitchThumbWidthRestRaw, ctrlChoiceSwitchThumbWidthHoverRaw, ctrlChoiceSwitchThumbWidthPressedRaw, + ctrlChoiceRadioDotSizeRestRaw, + ctrlChoiceRadioDotSizeHoverRaw, + ctrlChoiceRadioDotSizePressedRaw, ctrlChoiceSmBaseSizeRaw, - ctrlChoiceSmCheckboxCornerRaw, ctrlChoiceSmCheckboxIconSizeRaw, + ctrlChoiceSmCheckboxCornerRaw, ctrlChoiceSmRadioDotSizeRaw, ctrlChoiceSmSwitchWidthRaw, ctrlChoiceSmSwitchHeightRaw, @@ -81,27 +81,27 @@ export const ctrlChoiceBaseStrokeRest = `var(${ctrlChoiceBaseStrokeRestRaw}, var export const ctrlChoiceBaseStrokeHover = `var(${ctrlChoiceBaseStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; export const ctrlChoiceBaseStrokePressed = `var(${ctrlChoiceBaseStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; export const ctrlChoiceBaseStrokeDisabled = `var(${ctrlChoiceBaseStrokeDisabledRaw}, var(${foregroundCtrlNeutralSecondaryDisabledRaw}))`; -export const ctrlChoiceCheckboxIconSize = `var(${ctrlChoiceCheckboxIconSizeRaw}, var(${sizeCtrlIconsecondaryRaw}))`; +export const ctrlChoiceCheckboxIconSize = `var(${ctrlChoiceCheckboxIconSizeRaw}, var(${sizeCtrlIconSecondaryRaw}))`; export const ctrlChoiceCheckboxCorner = `var(${ctrlChoiceCheckboxCornerRaw})`; export const ctrlChoiceCheckboxIndeterminateCorner = `var(${ctrlChoiceCheckboxIndeterminateCornerRaw}, var(${cornerCircularRaw}))`; -export const ctrlChoiceCheckboxIndeterminateHeight = `var(${ctrlChoiceCheckboxIndeterminateHeightRaw})`; export const ctrlChoiceCheckboxIndeterminateWidth = `var(${ctrlChoiceCheckboxIndeterminateWidthRaw})`; +export const ctrlChoiceCheckboxIndeterminateHeight = `var(${ctrlChoiceCheckboxIndeterminateHeightRaw})`; export const ctrlChoiceRadioCorner = `var(${ctrlChoiceRadioCornerRaw}, var(${cornerCircularRaw}))`; export const ctrlChoiceSwitchCorner = `var(${ctrlChoiceSwitchCornerRaw}, var(${cornerCircularRaw}))`; -export const ctrlChoiceRadioDotSizeRest = `var(${ctrlChoiceRadioDotSizeRestRaw})`; -export const ctrlChoiceRadioDotSizeHover = `var(${ctrlChoiceRadioDotSizeHoverRaw}, var(${ctrlChoiceRadioDotSizeRestRaw}))`; -export const ctrlChoiceRadioDotSizePressed = `var(${ctrlChoiceRadioDotSizePressedRaw}, var(${ctrlChoiceRadioDotSizeRestRaw}))`; +export const ctrlChoiceSwitchHeight = `var(${ctrlChoiceSwitchHeightRaw}, var(${sizeCtrlIconRaw}))`; +export const ctrlChoiceSwitchWidth = `var(${ctrlChoiceSwitchWidthRaw})`; export const ctrlChoiceSwitchPaddingRest = `var(${ctrlChoiceSwitchPaddingRestRaw})`; export const ctrlChoiceSwitchPaddingHover = `var(${ctrlChoiceSwitchPaddingHoverRaw}, var(${ctrlChoiceSwitchPaddingRestRaw}))`; export const ctrlChoiceSwitchPaddingPressed = `var(${ctrlChoiceSwitchPaddingPressedRaw}, var(${ctrlChoiceSwitchPaddingRestRaw}))`; -export const ctrlChoiceSwitchHeight = `var(${ctrlChoiceSwitchHeightRaw}, var(${sizeCtrlIconRaw}))`; -export const ctrlChoiceSwitchWidth = `var(${ctrlChoiceSwitchWidthRaw})`; export const ctrlChoiceSwitchThumbWidthRest = `var(${ctrlChoiceSwitchThumbWidthRestRaw})`; export const ctrlChoiceSwitchThumbWidthHover = `var(${ctrlChoiceSwitchThumbWidthHoverRaw}, var(${ctrlChoiceSwitchThumbWidthRestRaw}))`; export const ctrlChoiceSwitchThumbWidthPressed = `var(${ctrlChoiceSwitchThumbWidthPressedRaw}, var(${ctrlChoiceSwitchThumbWidthRestRaw}))`; +export const ctrlChoiceRadioDotSizeRest = `var(${ctrlChoiceRadioDotSizeRestRaw})`; +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 ctrlChoiceSmCheckboxIconSize = `var(${ctrlChoiceSmCheckboxIconSizeRaw}, var(${sizeCtrlIconsecondaryRaw}))`; export const ctrlChoiceSmRadioDotSize = `var(${ctrlChoiceSmRadioDotSizeRaw})`; export const ctrlChoiceSmSwitchWidth = `var(${ctrlChoiceSmSwitchWidthRaw})`; export const ctrlChoiceSmSwitchHeight = `var(${ctrlChoiceSmSwitchHeightRaw}, var(${sizeCtrlSmIconRaw}))`; @@ -110,7 +110,7 @@ export const ctrlChoiceSmSwitchThumbWidthHover = `var(${ctrlChoiceSmSwitchThumbW 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 ctrlChoiceLgCheckboxIconSize = `var(${ctrlChoiceLgCheckboxIconSizeRaw}, var(${sizeCtrlIconSecondaryRaw}))`; export const ctrlChoiceLgRadioDotSizeRest = `var(${ctrlChoiceLgRadioDotSizeRestRaw})`; export const ctrlChoiceLgRadioDotSizeHover = `var(${ctrlChoiceLgRadioDotSizeHoverRaw}, var(${ctrlChoiceLgRadioDotSizeRestRaw}))`; export const ctrlChoiceLgRadioDotSizePressed = `var(${ctrlChoiceLgRadioDotSizePressedRaw}, var(${ctrlChoiceLgRadioDotSizeRestRaw}))`; diff --git a/packages/semantic-tokens/src/components/choice/variables.ts b/packages/semantic-tokens/src/components/choice/variables.ts index 3daa190931adc..64ae9fd9eb122 100644 --- a/packages/semantic-tokens/src/components/choice/variables.ts +++ b/packages/semantic-tokens/src/components/choice/variables.ts @@ -14,24 +14,24 @@ export const ctrlChoiceBaseStrokeDisabledRaw = '--smtc-ctrl-choice-base-stroke-d 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 ctrlChoiceCheckboxIndeterminateHeightRaw = '--smtc-ctrl-choice-checkbox-indeterminate-height'; 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 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 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 ctrlChoiceSwitchHeightRaw = '--smtc-ctrl-choice-switch-height'; -export const ctrlChoiceSwitchWidthRaw = '--smtc-ctrl-choice-switch-width'; 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 ctrlChoiceSmCheckboxCornerRaw = '--smtc-ctrl-choice-sm-checkbox-corner'; 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'; diff --git a/packages/semantic-tokens/src/components/composer/tokens.ts b/packages/semantic-tokens/src/components/composer/tokens.ts index ceea300cb73c3..6eaf601a5e0b1 100644 --- a/packages/semantic-tokens/src/components/composer/tokens.ts +++ b/packages/semantic-tokens/src/components/composer/tokens.ts @@ -14,23 +14,23 @@ import { ctrlComposerInputBackgroundSelectedRestRaw, ctrlComposerInputBackgroundHoverRaw, ctrlComposerInputStrokeRestRaw, - ctrlComposerInputStrokeHoverUsesgradientRaw, - ctrlComposerInputStrokePressedUsesgradientRaw, - ctrlComposerInputStrokeDisabledUsesgradientRaw, - ctrlComposerInputStrokeSelectedRestUsesgradientRaw, + ctrlComposerInputStrokeHoverUsesGradientRaw, + ctrlComposerInputStrokePressedUsesGradientRaw, + ctrlComposerInputStrokeDisabledUsesGradientRaw, + ctrlComposerInputStrokeSelectedRestUsesGradientRaw, ctrlComposerInputStrokeWidthRestRaw, ctrlComposerInputStrokeWidthHoverRaw, ctrlComposerInputStrokeWidthPressedRaw, ctrlComposerInputStrokeWidthSelectedRestRaw, - ctrlComposerInputBottomstrokeRestRaw, - ctrlComposerInputBottomstrokeHoverRaw, - ctrlComposerInputBottomstrokePressedRaw, - ctrlComposerInputBottomstrokeDisabledRaw, - ctrlComposerInputBottomstrokeSelectedRestRaw, + ctrlComposerInputBottomStrokeRestRaw, + ctrlComposerInputBottomStrokeHoverRaw, + ctrlComposerInputBottomStrokePressedRaw, + ctrlComposerInputBottomStrokeDisabledRaw, + ctrlComposerInputBottomStrokeSelectedRestRaw, ctrlComposerContainerCornerRaw, ctrlComposerContainerBackgroundDefaultRaw, - ctrlComposerContainerBackgroundAcryliccolorblendRaw, - ctrlComposerContainerBackgroundAcryliclumblendRaw, + ctrlComposerContainerBackgroundAcrylicColorBlendRaw, + ctrlComposerContainerBackgroundAcrylicLumBlendRaw, ctrlComposerContainerStrokeDefaultRaw, ctrlComposerInputShadowRaw, ctrlComposerContainerShadowKeyRaw, @@ -50,23 +50,23 @@ export const ctrlComposerInputBackgroundDisabled = `var(${ctrlComposerInputBackg 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 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 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 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 ctrlComposerContainerShadowKey = `var(${ctrlComposerContainerShadowKeyRaw})`; diff --git a/packages/semantic-tokens/src/components/composer/variables.ts b/packages/semantic-tokens/src/components/composer/variables.ts index 482735d883c21..46c79c6fa869c 100644 --- a/packages/semantic-tokens/src/components/composer/variables.ts +++ b/packages/semantic-tokens/src/components/composer/variables.ts @@ -13,26 +13,27 @@ export const ctrlComposerInputBackgroundDisabledRaw = '--smtc-ctrl-composer-inpu 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-hoverusesgradient'; -export const ctrlComposerInputStrokePressedUsesgradientRaw = '--smtc-ctrl-composer-input-stroke-pressedusesgradient'; -export const ctrlComposerInputStrokeDisabledUsesgradientRaw = '--smtc-ctrl-composer-input-stroke-disabledusesgradient'; -export const ctrlComposerInputStrokeSelectedRestUsesgradientRaw = - '--smtc-ctrl-composer-input-stroke-selected-restusesgradient'; +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-bottomstroke-rest'; -export const ctrlComposerInputBottomstrokeHoverRaw = '--smtc-ctrl-composer-input-bottomstroke-hover'; -export const ctrlComposerInputBottomstrokePressedRaw = '--smtc-ctrl-composer-input-bottomstroke-pressed'; -export const ctrlComposerInputBottomstrokeDisabledRaw = '--smtc-ctrl-composer-input-bottomstroke-disabled'; -export const ctrlComposerInputBottomstrokeSelectedRestRaw = '--smtc-ctrl-composer-input-bottomstroke-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-acryliccolorblend'; -export const ctrlComposerContainerBackgroundAcryliclumblendRaw = - '--smtc-ctrl-composer-container-background-acryliclumblend'; +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-x'; export const ctrlComposerContainerShadowKeyRaw = '--smtc-ctrl-composer-container-shadow-key'; diff --git a/packages/semantic-tokens/src/components/divider/tokens.ts b/packages/semantic-tokens/src/components/divider/tokens.ts index c5e16d1cde48c..aa8756e487a94 100644 --- a/packages/semantic-tokens/src/components/divider/tokens.ts +++ b/packages/semantic-tokens/src/components/divider/tokens.ts @@ -1,5 +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'; +import { ctrlDividerFixedLineLengthRaw } from './variables'; -export const ctrlDividerFixedlineLength = `var(${ctrlDividerFixedlineLengthRaw}, var(${paddingContentAlignDefaultRaw}))`; +export const ctrlDividerFixedLineLength = `var(${ctrlDividerFixedLineLengthRaw}, var(${paddingContentAlignDefaultRaw}))`; diff --git a/packages/semantic-tokens/src/components/divider/variables.ts b/packages/semantic-tokens/src/components/divider/variables.ts index 354af4188358b..d0dc2044610c0 100644 --- a/packages/semantic-tokens/src/components/divider/variables.ts +++ b/packages/semantic-tokens/src/components/divider/variables.ts @@ -1,2 +1,2 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -export const ctrlDividerFixedlineLengthRaw = '--smtc-ctrl-divider-fixedline-length'; +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 index 38d8bb0acc849..739bcd4610dc4 100644 --- a/packages/semantic-tokens/src/components/drag/tokens.ts +++ b/packages/semantic-tokens/src/components/drag/tokens.ts @@ -1,10 +1,10 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE import { ctrlDragBackgroundSolidRaw, - ctrlDragBackgroundColorblendRaw, - ctrlDragBackgroundLumblendRaw, + ctrlDragBackgroundColorBlendRaw, + ctrlDragBackgroundLumBlendRaw, } from './variables'; export const ctrlDragBackgroundSolid = `var(${ctrlDragBackgroundSolidRaw})`; -export const ctrlDragBackgroundColorblend = `var(${ctrlDragBackgroundColorblendRaw})`; -export const ctrlDragBackgroundLumblend = `var(${ctrlDragBackgroundLumblendRaw})`; +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 index 989f274b38b31..28a7077e6e520 100644 --- a/packages/semantic-tokens/src/components/drag/variables.ts +++ b/packages/semantic-tokens/src/components/drag/variables.ts @@ -1,4 +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-colorblend'; -export const ctrlDragBackgroundLumblendRaw = '--smtc-ctrl-drag-background-lumblend'; +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 index 3f2bc8c1b76ea..e7c3756accab8 100644 --- a/packages/semantic-tokens/src/components/fab/tokens.ts +++ b/packages/semantic-tokens/src/components/fab/tokens.ts @@ -1,6 +1,13 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -import { cornerCircularRaw, shadowFlyoutKeyRaw } from '../../control/variables'; import { + foregroundCtrlNeutralPrimaryRestRaw, + foregroundCtrlNeutralPrimaryDisabledRaw, + cornerCircularRaw, + shadowFlyoutKeyRaw, +} from '../../control/variables'; +import { + ctrlFabForegroundRestNewRaw, + ctrlFabForegroundDisabledNewRaw, ctrlFabBackgroundRestRaw, ctrlFabBackgroundHoverRaw, ctrlFabBackgroundPressedRaw, @@ -15,6 +22,8 @@ import { ctrlFabShadowDisabledKeyRaw, } 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})`; diff --git a/packages/semantic-tokens/src/components/fab/variables.ts b/packages/semantic-tokens/src/components/fab/variables.ts index 63c5d4c28fe68..fbb666aa03dd8 100644 --- a/packages/semantic-tokens/src/components/fab/variables.ts +++ b/packages/semantic-tokens/src/components/fab/variables.ts @@ -1,4 +1,6 @@ // 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'; diff --git a/packages/semantic-tokens/src/components/focus/tokens.ts b/packages/semantic-tokens/src/components/focus/tokens.ts index 8309a95112d63..93475f34e7fbe 100644 --- a/packages/semantic-tokens/src/components/focus/tokens.ts +++ b/packages/semantic-tokens/src/components/focus/tokens.ts @@ -1,14 +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 { strokeWidthDefaultRaw, backgroundCtrlBrandRestRaw } from '../../control/variables'; import { colorStrokeFocus2 } from '../../legacy/tokens'; import { - ctrlFocusInnerStrokewidthRaw, + ctrlFocusInnerStrokeWidthRaw, ctrlFocusInnerStrokeRaw, - ctrlFocusOuterStrokewidthRaw, + ctrlFocusOuterStrokeWidthRaw, ctrlFocusOuterStrokeRaw, } from './variables'; -export const ctrlFocusInnerStrokewidth = `var(${ctrlFocusInnerStrokewidthRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlFocusInnerStrokeWidth = `var(${ctrlFocusInnerStrokeWidthRaw}, var(${strokeWidthDefaultRaw}))`; export const ctrlFocusInnerStroke = `var(${ctrlFocusInnerStrokeRaw})`; -export const ctrlFocusOuterStrokewidth = `var(${ctrlFocusOuterStrokewidthRaw})`; +export const ctrlFocusOuterStrokeWidth = `var(${ctrlFocusOuterStrokeWidthRaw})`; export const ctrlFocusOuterStroke = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorStrokeFocus2}))`; diff --git a/packages/semantic-tokens/src/components/focus/variables.ts b/packages/semantic-tokens/src/components/focus/variables.ts index f8b033f70460d..a1f26772f25cf 100644 --- a/packages/semantic-tokens/src/components/focus/variables.ts +++ b/packages/semantic-tokens/src/components/focus/variables.ts @@ -1,5 +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-strokewidth'; +export const ctrlFocusInnerStrokeWidthRaw = '--smtc-ctrl-focus-inner-stroke-width'; export const ctrlFocusInnerStrokeRaw = '--smtc-ctrl-focus-inner-stroke'; -export const ctrlFocusOuterStrokewidthRaw = '--smtc-ctrl-focus-outer-strokewidth'; +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 index 5e015bb09b62e..2bddeefcc40ed 100644 --- a/packages/semantic-tokens/src/components/input/tokens.ts +++ b/packages/semantic-tokens/src/components/input/tokens.ts @@ -4,14 +4,14 @@ import { backgroundCtrlNeutralHoverRaw, backgroundCtrlNeutralPressedRaw, backgroundCtrlNeutralDisabledRaw, - strokeCtrlOnoutlineRestRaw, - strokewidthDefaultRaw, + strokeCtrlOnOutlineRestRaw, + strokeWidthDefaultRaw, backgroundCtrlBrandRestRaw, - foregroundCtrlOnbrandRestRaw, + foregroundCtrlOnBrandRestRaw, foregroundCtrlNeutralSecondaryRestRaw, - strokeCtrlOnoutlineHoverRaw, - strokeCtrlOnoutlinePressedRaw, - strokeCtrlOnoutlineDisabledRaw, + strokeCtrlOnOutlineHoverRaw, + strokeCtrlOnOutlinePressedRaw, + strokeCtrlOnOutlineDisabledRaw, } from '../../control/variables'; import { statusDangerStrokeRaw } from '../../optional/variables'; import { @@ -22,22 +22,22 @@ import { ctrlInputBackgroundSelectedRaw, ctrlInputBackgroundErrorRaw, ctrlInputStrokeRestRaw, - ctrlInputBottomlineStrokewidthRestRaw, - ctrlInputStrokewidthRestRaw, - ctrlInputTextselectionBackgroundRaw, - ctrlInputTextselectionForegroundRaw, - ctrlInputStrokewidthHoverRaw, - ctrlInputStrokewidthPressedRaw, - ctrlInputStrokewidthSelectedRaw, - ctrlInputBottomlineStrokewidthHoverRaw, - ctrlInputBottomlineStrokewidthPressedRaw, - ctrlInputBottomlineStrokewidthSelectedRaw, - ctrlInputBottomlineStrokeRestRaw, - ctrlInputBottomlineStrokeHoverRaw, - ctrlInputBottomlineStrokePressedRaw, - ctrlInputBottomlineStrokeDisabledRaw, - ctrlInputBottomlineStrokeSelectedRaw, - ctrlInputBottomlineStrokeErrorRaw, + ctrlInputStrokeWidthRestRaw, + ctrlInputStrokeWidthHoverRaw, + ctrlInputStrokeWidthPressedRaw, + ctrlInputStrokeWidthSelectedRaw, + ctrlInputBottomLineStrokeWidthRestRaw, + ctrlInputTextSelectionBackgroundRaw, + ctrlInputTextSelectionForegroundRaw, + ctrlInputBottomLineStrokeWidthHoverRaw, + ctrlInputBottomLineStrokeWidthPressedRaw, + ctrlInputBottomLineStrokeWidthSelectedRaw, + ctrlInputBottomLineStrokeRestRaw, + ctrlInputBottomLineStrokeHoverRaw, + ctrlInputBottomLineStrokePressedRaw, + ctrlInputBottomLineStrokeDisabledRaw, + ctrlInputBottomLineStrokeSelectedRaw, + ctrlInputBottomLineStrokeErrorRaw, ctrlInputStrokeHoverRaw, ctrlInputStrokePressedRaw, ctrlInputStrokeDisabledRaw, @@ -51,25 +51,25 @@ export const ctrlInputBackgroundPressed = `var(${ctrlInputBackgroundPressedRaw}, export const ctrlInputBackgroundDisabled = `var(${ctrlInputBackgroundDisabledRaw}, var(${backgroundCtrlNeutralDisabledRaw}))`; export const ctrlInputBackgroundSelected = `var(${ctrlInputBackgroundSelectedRaw}, var(${backgroundCtrlNeutralRestRaw}))`; export const ctrlInputBackgroundError = `var(${ctrlInputBackgroundErrorRaw}, var(${backgroundCtrlNeutralRestRaw}))`; -export const ctrlInputStrokeRest = `var(${ctrlInputStrokeRestRaw}, var(${strokeCtrlOnoutlineRestRaw}))`; -export const ctrlInputBottomlineStrokewidthRest = `var(${ctrlInputBottomlineStrokewidthRestRaw}, var(${strokewidthDefaultRaw}))`; -export const ctrlInputStrokewidthRest = `var(${ctrlInputStrokewidthRestRaw}, var(${strokewidthDefaultRaw}))`; -export const ctrlInputTextselectionBackground = `var(${ctrlInputTextselectionBackgroundRaw}, var(${backgroundCtrlBrandRestRaw}))`; -export const ctrlInputTextselectionForeground = `var(${ctrlInputTextselectionForegroundRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; -export const ctrlInputStrokewidthHover = `var(${ctrlInputStrokewidthHoverRaw}, var(${strokewidthDefaultRaw}))`; -export const ctrlInputStrokewidthPressed = `var(${ctrlInputStrokewidthPressedRaw}, var(${strokewidthDefaultRaw}))`; -export const ctrlInputStrokewidthSelected = `var(${ctrlInputStrokewidthSelectedRaw})`; -export const ctrlInputBottomlineStrokewidthHover = `var(${ctrlInputBottomlineStrokewidthHoverRaw}, var(${strokewidthDefaultRaw}))`; -export const ctrlInputBottomlineStrokewidthPressed = `var(${ctrlInputBottomlineStrokewidthPressedRaw}, var(${ctrlInputBottomlineStrokewidthSelectedRaw}))`; -export const ctrlInputBottomlineStrokewidthSelected = `var(${ctrlInputBottomlineStrokewidthSelectedRaw})`; -export const ctrlInputBottomlineStrokeRest = `var(${ctrlInputBottomlineStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const ctrlInputBottomlineStrokeHover = `var(${ctrlInputBottomlineStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const ctrlInputBottomlineStrokePressed = `var(${ctrlInputBottomlineStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const ctrlInputBottomlineStrokeDisabled = `var(${ctrlInputBottomlineStrokeDisabledRaw}, unset)`; -export const ctrlInputBottomlineStrokeSelected = `var(${ctrlInputBottomlineStrokeSelectedRaw}, var(${backgroundCtrlBrandRestRaw}))`; -export const ctrlInputBottomlineStrokeError = `var(${ctrlInputBottomlineStrokeErrorRaw}, unset)`; -export const ctrlInputStrokeHover = `var(${ctrlInputStrokeHoverRaw}, var(${strokeCtrlOnoutlineHoverRaw}))`; -export const ctrlInputStrokePressed = `var(${ctrlInputStrokePressedRaw}, var(${strokeCtrlOnoutlinePressedRaw}))`; -export const ctrlInputStrokeDisabled = `var(${ctrlInputStrokeDisabledRaw}, var(${strokeCtrlOnoutlineDisabledRaw}))`; -export const ctrlInputStrokeSelected = `var(${ctrlInputStrokeSelectedRaw}, var(${strokeCtrlOnoutlineRestRaw}))`; +export const ctrlInputStrokeRest = `var(${ctrlInputStrokeRestRaw}, var(${strokeCtrlOnOutlineRestRaw}))`; +export const ctrlInputStrokeWidthRest = `var(${ctrlInputStrokeWidthRestRaw}, var(${strokeWidthDefaultRaw}))`; +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}))`; +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})`; +export const ctrlInputBottomLineStrokeRest = `var(${ctrlInputBottomLineStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const ctrlInputBottomLineStrokeHover = `var(${ctrlInputBottomLineStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const ctrlInputBottomLineStrokePressed = `var(${ctrlInputBottomLineStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const ctrlInputBottomLineStrokeDisabled = `var(${ctrlInputBottomLineStrokeDisabledRaw}, unset)`; +export const ctrlInputBottomLineStrokeSelected = `var(${ctrlInputBottomLineStrokeSelectedRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const ctrlInputBottomLineStrokeError = `var(${ctrlInputBottomLineStrokeErrorRaw}, unset)`; +export const ctrlInputStrokeHover = `var(${ctrlInputStrokeHoverRaw}, var(${strokeCtrlOnOutlineHoverRaw}))`; +export const ctrlInputStrokePressed = `var(${ctrlInputStrokePressedRaw}, var(${strokeCtrlOnOutlinePressedRaw}))`; +export const ctrlInputStrokeDisabled = `var(${ctrlInputStrokeDisabledRaw}, var(${strokeCtrlOnOutlineDisabledRaw}))`; +export const ctrlInputStrokeSelected = `var(${ctrlInputStrokeSelectedRaw}, var(${strokeCtrlOnOutlineRestRaw}))`; 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 index 8d4c028b2c533..a19e6ff16e4cb 100644 --- a/packages/semantic-tokens/src/components/input/variables.ts +++ b/packages/semantic-tokens/src/components/input/variables.ts @@ -6,22 +6,22 @@ export const ctrlInputBackgroundDisabledRaw = '--smtc-ctrl-input-background-disa 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 ctrlInputBottomlineStrokewidthRestRaw = '--smtc-ctrl-input-bottomline-strokewidth-rest'; -export const ctrlInputStrokewidthRestRaw = '--smtc-ctrl-input-strokewidth-rest'; -export const ctrlInputTextselectionBackgroundRaw = '--smtc-ctrl-input-textselection-background'; -export const ctrlInputTextselectionForegroundRaw = '--smtc-ctrl-input-textselection-foreground'; -export const ctrlInputStrokewidthHoverRaw = '--smtc-ctrl-input-strokewidth-hover'; -export const ctrlInputStrokewidthPressedRaw = '--smtc-ctrl-input-strokewidth-pressed'; -export const ctrlInputStrokewidthSelectedRaw = '--smtc-ctrl-input-strokewidth-selected'; -export const ctrlInputBottomlineStrokewidthHoverRaw = '--smtc-ctrl-input-bottomline-strokewidth-hover'; -export const ctrlInputBottomlineStrokewidthPressedRaw = '--smtc-ctrl-input-bottomline-strokewidth-pressed'; -export const ctrlInputBottomlineStrokewidthSelectedRaw = '--smtc-ctrl-input-bottomline-strokewidth-selected'; -export const ctrlInputBottomlineStrokeRestRaw = '--smtc-ctrl-input-bottomline-stroke-rest'; -export const ctrlInputBottomlineStrokeHoverRaw = '--smtc-ctrl-input-bottomline-stroke-hover'; -export const ctrlInputBottomlineStrokePressedRaw = '--smtc-ctrl-input-bottomline-stroke-pressed'; -export const ctrlInputBottomlineStrokeDisabledRaw = '--smtc-ctrl-input-bottomline-stroke-disabled'; -export const ctrlInputBottomlineStrokeSelectedRaw = '--smtc-ctrl-input-bottomline-stroke-selected'; -export const ctrlInputBottomlineStrokeErrorRaw = '--smtc-ctrl-input-bottomline-stroke-error'; +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'; diff --git a/packages/semantic-tokens/src/components/link/tokens.ts b/packages/semantic-tokens/src/components/link/tokens.ts index 3624d46f8b303..5c4988bbdcea0 100644 --- a/packages/semantic-tokens/src/components/link/tokens.ts +++ b/packages/semantic-tokens/src/components/link/tokens.ts @@ -1,7 +1,7 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE import { foregroundCtrlNeutralPrimaryRestRaw, - strokewidthDefaultRaw, + strokeWidthDefaultRaw, foregroundCtrlBrandRestRaw, foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, @@ -16,32 +16,32 @@ import { } from '../../legacy/tokens'; import { ctrlLinkForegroundNeutralRestRaw, - ctrlLinkInlineStrokewidthRestRaw, - ctrlLinkInlineStrokewidthHoverRaw, + ctrlLinkInlineStrokeWidthRestRaw, + ctrlLinkInlineStrokeWidthHoverRaw, ctrlLinkInlineUnderlineDashedRaw, ctrlLinkForegroundNeutralHoverRaw, ctrlLinkForegroundNeutralPressedRaw, ctrlLinkForegroundBrandRestRaw, ctrlLinkForegroundBrandHoverRaw, ctrlLinkForegroundBrandPressedRaw, - ctrlLinkOnpageStrokewidthRestRaw, - ctrlLinkOnpageStrokewidthHoverRaw, - ctrlLinkOnpageUnderlineDashedRaw, - ctrlLinkInlineShowunderlineatrestRaw, - ctrlLinkOnpageShowunderlineatrestRaw, + 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 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})`; +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 index e0f98462687aa..5740694598865 100644 --- a/packages/semantic-tokens/src/components/link/variables.ts +++ b/packages/semantic-tokens/src/components/link/variables.ts @@ -1,15 +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-strokewidth-rest'; -export const ctrlLinkInlineStrokewidthHoverRaw = '--smtc-ctrl-link-inline-strokewidth-hover'; +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-onpage-strokewidth-rest'; -export const ctrlLinkOnpageStrokewidthHoverRaw = '--smtc-ctrl-link-onpage-strokewidth-hover'; -export const ctrlLinkOnpageUnderlineDashedRaw = '--smtc-ctrl-link-onpage-underline-dashed'; -export const ctrlLinkInlineShowunderlineatrestRaw = '--smtc-ctrl-link-inline-showunderlineatrest'; -export const ctrlLinkOnpageShowunderlineatrestRaw = '--smtc-ctrl-link-onpage-showunderlineatrest'; +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 index 1895fca678faf..dd5f380257aeb 100644 --- a/packages/semantic-tokens/src/components/list/tokens.ts +++ b/packages/semantic-tokens/src/components/list/tokens.ts @@ -4,10 +4,10 @@ import { paddingCtrlHorizontalDefaultRaw, backgroundCtrlSubtleHoverRaw, backgroundCtrlSubtlePressedRaw, - foregroundCtrlBrandRestRaw, - foregroundCtrlBrandDisabledRaw, - sizeCtrlIconsecondaryRaw, - strokeCtrlDividerOnneutralRaw, + foregroundCtrlNeutralPrimaryRestRaw, + foregroundCtrlNeutralPrimaryDisabledRaw, + sizeCtrlIconSecondaryRaw, + strokeCtrlDividerOnNeutralRaw, cornerCtrlSmRestRaw, paddingCtrlSmHorizontalDefaultRaw, cornerCtrlLgRestRaw, @@ -21,7 +21,7 @@ import { import { ctrlChoiceCheckboxCornerRaw } from '../choice/variables'; import { ctrlListPillWidthRaw, - ctrlListPillFullwidthRaw, + ctrlListPillFullWidthRaw, ctrlListPillStretchPaddingDefaultRaw, ctrlListPillStretchPaddingHintRaw, ctrlListPillLengthRestRaw, @@ -35,6 +35,10 @@ import { ctrlListIndentLevel2Raw, ctrlListIndentLevel3Raw, ctrlListBackgroundSelectedRestRaw, + ctrlListForegroundSelectedRestRaw, + ctrlListForegroundSelectedHoverRaw, + ctrlListForegroundSelectedPressedRaw, + ctrlListForegroundSelectedDisabledRaw, ctrlListBackgroundSelectedHoverRaw, ctrlListBackgroundSelectedPressedRaw, ctrlListBackgroundSelectedDisabledRaw, @@ -66,13 +70,13 @@ import { ctrlListLgIndentLevel1Raw, ctrlListLgIndentLevel2Raw, ctrlListLgIndentLevel3Raw, - ctrlListSplitDividerShowdividerRaw, + ctrlListSplitDividerShowDividerRaw, ctrlListShadowSelectedKeyRaw, ctrlListShadowSelectedAmbientRaw, } from './variables'; export const ctrlListPillWidth = `var(${ctrlListPillWidthRaw})`; -export const ctrlListPillFullwidth = `var(${ctrlListPillFullwidthRaw})`; +export const ctrlListPillFullWidth = `var(${ctrlListPillFullWidthRaw})`; export const ctrlListPillStretchPaddingDefault = `var(${ctrlListPillStretchPaddingDefaultRaw})`; export const ctrlListPillStretchPaddingHint = `var(${ctrlListPillStretchPaddingHintRaw})`; export const ctrlListPillLengthRest = `var(${ctrlListPillLengthRestRaw})`; @@ -86,6 +90,10 @@ export const ctrlListIndentLevel1 = `var(${ctrlListIndentLevel1Raw}, var(${paddi 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}))`; @@ -95,16 +103,16 @@ export const ctrlListChoiceStrokeDisabled = `var(${ctrlListChoiceStrokeDisabledR 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(${foregroundCtrlBrandRestRaw}))`; -export const ctrlListChoiceForegroundSelectedDisabled = `var(${ctrlListChoiceForegroundSelectedDisabledRaw}, var(${foregroundCtrlBrandDisabledRaw}))`; +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 ctrlListChoiceCheckboxIconSize = `var(${ctrlListChoiceCheckboxIconSizeRaw}, var(${sizeCtrlIconSecondaryRaw}))`; export const ctrlListChoiceDotSize = `var(${ctrlListChoiceDotSizeRaw})`; export const ctrlListSplitDividerPaddingInset = `var(${ctrlListSplitDividerPaddingInsetRaw})`; -export const ctrlListSplitDividerStroke = `var(${ctrlListSplitDividerStrokeRaw}, var(${strokeCtrlDividerOnneutralRaw}))`; +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}))`; @@ -117,6 +125,6 @@ export const ctrlListLgCornerPressed = `var(${ctrlListLgCornerPressedRaw}, var($ export const ctrlListLgIndentLevel1 = `var(${ctrlListLgIndentLevel1Raw}, var(${paddingCtrlLgHorizontalDefaultRaw}))`; export const ctrlListLgIndentLevel2 = `var(${ctrlListLgIndentLevel2Raw})`; export const ctrlListLgIndentLevel3 = `var(${ctrlListLgIndentLevel3Raw})`; -export const ctrlListSplitDividerShowdivider = `var(${ctrlListSplitDividerShowdividerRaw})`; +export const ctrlListSplitDividerShowDivider = `var(${ctrlListSplitDividerShowDividerRaw})`; export const ctrlListShadowSelectedKey = `var(${ctrlListShadowSelectedKeyRaw}, unset)`; export const ctrlListShadowSelectedAmbient = `var(${ctrlListShadowSelectedAmbientRaw})`; diff --git a/packages/semantic-tokens/src/components/list/variables.ts b/packages/semantic-tokens/src/components/list/variables.ts index 78307fed6d50e..cb0db33952fe6 100644 --- a/packages/semantic-tokens/src/components/list/variables.ts +++ b/packages/semantic-tokens/src/components/list/variables.ts @@ -1,6 +1,6 @@ // 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-fullwidth'; +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'; @@ -14,6 +14,10 @@ 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'; @@ -45,6 +49,6 @@ 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-showdivider'; -export const ctrlListShadowSelectedKeyRaw = '--smtc-ctrl-list-shadow-selected-key'; +export const ctrlListSplitDividerShowDividerRaw = '--smtc-ctrl-list-split-divider-show-divider'; +export const ctrlListShadowSelectedKeyRaw = '--smtc-ctrl-list-shadow-selected-key-y'; export const ctrlListShadowSelectedAmbientRaw = '--smtc-ctrl-list-shadow-selected-ambient'; diff --git a/packages/semantic-tokens/src/components/liteFilter/tokens.ts b/packages/semantic-tokens/src/components/liteFilter/tokens.ts index a05d37d34a654..8b5c663ff2d4d 100644 --- a/packages/semantic-tokens/src/components/liteFilter/tokens.ts +++ b/packages/semantic-tokens/src/components/liteFilter/tokens.ts @@ -1,18 +1,18 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE import { backgroundCtrlBrandRestRaw, - foregroundCtrlOnbrandRestRaw, - strokewidthDefaultRaw, + foregroundCtrlOnBrandRestRaw, + strokeWidthDefaultRaw, } from '../../control/variables'; -import { strokeCtrlOnbrandRestRaw } from '../../nullable/variables'; +import { strokeCtrlOnBrandRestRaw } from '../../nullable/variables'; import { - ctrlLitefilterBackgroundSelectedRaw, - ctrlLitefilterStrokeSelectedRaw, - ctrlLitefilterForegroundSelectedRaw, - ctrlLitefilterStrokewidthSelectedRaw, + 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}))`; +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 index e0f5c9d5be775..83f6b13e4c010 100644 --- a/packages/semantic-tokens/src/components/liteFilter/variables.ts +++ b/packages/semantic-tokens/src/components/liteFilter/variables.ts @@ -1,5 +1,5 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -export const ctrlLitefilterBackgroundSelectedRaw = '--smtc-ctrl-litefilter-background-selected'; -export const ctrlLitefilterStrokeSelectedRaw = '--smtc-ctrl-litefilter-stroke-selected'; -export const ctrlLitefilterForegroundSelectedRaw = '--smtc-ctrl-litefilter-foreground-selected'; -export const ctrlLitefilterStrokewidthSelectedRaw = '--smtc-ctrl-litefilter-strokewidth-selected'; +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/rating/tokens.ts b/packages/semantic-tokens/src/components/rating/tokens.ts index 5b074016482b4..f6facdb9f9824 100644 --- a/packages/semantic-tokens/src/components/rating/tokens.ts +++ b/packages/semantic-tokens/src/components/rating/tokens.ts @@ -1,5 +1,5 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -import { iconthemeCtrlDefaultRestRaw, backgroundCtrlBrandRestRaw, sizeCtrlIconRaw } from '../../control/variables'; +import { iconThemeCtrlDefaultRestRaw, backgroundCtrlBrandRestRaw, sizeCtrlIconRaw } from '../../control/variables'; import { ctrlProgressBackgroundEmptyRaw } from '../progress/variables'; import { ctrlRatingIconThemeRaw, @@ -9,7 +9,7 @@ import { ctrlRatingIconSizeRaw, } from './variables'; -export const ctrlRatingIconTheme = `var(${ctrlRatingIconThemeRaw}, var(${iconthemeCtrlDefaultRestRaw}))`; +export const ctrlRatingIconTheme = `var(${ctrlRatingIconThemeRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; export const ctrlRatingIconGap = `var(${ctrlRatingIconGapRaw})`; export const ctrlRatingIconForegroundFilled = `var(${ctrlRatingIconForegroundFilledRaw}, var(${backgroundCtrlBrandRestRaw}))`; export const ctrlRatingIconForegroundEmpty = `var(${ctrlRatingIconForegroundEmptyRaw}, var(${ctrlProgressBackgroundEmptyRaw}))`; diff --git a/packages/semantic-tokens/src/components/segmented/tokens.ts b/packages/semantic-tokens/src/components/segmented/tokens.ts index f0e32348ebe35..d4d1bded2e8d7 100644 --- a/packages/semantic-tokens/src/components/segmented/tokens.ts +++ b/packages/semantic-tokens/src/components/segmented/tokens.ts @@ -76,8 +76,8 @@ 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})`; -export const ctrlSegmentedSmItemCornerPressed = `var(${ctrlSegmentedSmItemCornerPressedRaw})`; +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}))`; diff --git a/packages/semantic-tokens/src/components/slider/tokens.ts b/packages/semantic-tokens/src/components/slider/tokens.ts index 1168c839d63d8..f33e9b78e0e3f 100644 --- a/packages/semantic-tokens/src/components/slider/tokens.ts +++ b/packages/semantic-tokens/src/components/slider/tokens.ts @@ -6,9 +6,9 @@ import { backgroundCtrlBrandPressedRaw, backgroundCtrlBrandDisabledRaw, sizeCtrlIconRaw, - foregroundCtrlOnbrandRestRaw, - foregroundCtrlOnbrandDisabledRaw, - strokewidthDefaultRaw, + foregroundCtrlOnBrandRestRaw, + foregroundCtrlOnBrandDisabledRaw, + strokeWidthDefaultRaw, sizeCtrlSmIconRaw, sizeCtrlLgIconRaw, } from '../../control/variables'; @@ -37,14 +37,14 @@ import { ctrlSliderThumbBackgroundHoverRaw, ctrlSliderThumbBackgroundPressedRaw, ctrlSliderThumbBackgroundDisabledRaw, - ctrlSliderThumbInnerStrokewidthRestRaw, - ctrlSliderThumbInnerStrokewidthHoverRaw, - ctrlSliderThumbInnerStrokewidthPressedRaw, + ctrlSliderThumbInnerStrokeWidthRestRaw, + ctrlSliderThumbInnerStrokeWidthHoverRaw, + ctrlSliderThumbInnerStrokeWidthPressedRaw, ctrlSliderThumbInnerStrokeRestRaw, ctrlSliderThumbInnerStrokeHoverRaw, ctrlSliderThumbInnerStrokePressedRaw, ctrlSliderThumbInnerStrokeDisabledRaw, - ctrlSliderThumbOuterStrokewidthRaw, + ctrlSliderThumbOuterStrokeWidthRaw, ctrlSliderThumbOuterStrokeRestRaw, ctrlSliderThumbOuterStrokeHoverRaw, ctrlSliderThumbOuterStrokePressedRaw, @@ -73,18 +73,18 @@ export const ctrlSliderThumbCorner = `var(${ctrlSliderThumbCornerRaw}, var(${cor export const ctrlSliderThumbSizeRest = `var(${ctrlSliderThumbSizeRestRaw}, var(${sizeCtrlIconRaw}))`; export const ctrlSliderThumbSizeHover = `var(${ctrlSliderThumbSizeHoverRaw}, var(${sizeCtrlIconRaw}))`; export const ctrlSliderThumbSizePressed = `var(${ctrlSliderThumbSizePressedRaw}, var(${sizeCtrlIconRaw}))`; -export const ctrlSliderThumbBackgroundRest = `var(${ctrlSliderThumbBackgroundRestRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; -export const ctrlSliderThumbBackgroundHover = `var(${ctrlSliderThumbBackgroundHoverRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; -export const ctrlSliderThumbBackgroundPressed = `var(${ctrlSliderThumbBackgroundPressedRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; -export const ctrlSliderThumbBackgroundDisabled = `var(${ctrlSliderThumbBackgroundDisabledRaw}, var(${foregroundCtrlOnbrandDisabledRaw}))`; -export const ctrlSliderThumbInnerStrokewidthRest = `var(${ctrlSliderThumbInnerStrokewidthRestRaw})`; -export const ctrlSliderThumbInnerStrokewidthHover = `var(${ctrlSliderThumbInnerStrokewidthHoverRaw}, var(${ctrlSliderThumbInnerStrokewidthRestRaw}))`; -export const ctrlSliderThumbInnerStrokewidthPressed = `var(${ctrlSliderThumbInnerStrokewidthPressedRaw}, var(${ctrlSliderThumbInnerStrokewidthRestRaw}))`; +export const ctrlSliderThumbBackgroundRest = `var(${ctrlSliderThumbBackgroundRestRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +export const ctrlSliderThumbBackgroundHover = `var(${ctrlSliderThumbBackgroundHoverRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +export const ctrlSliderThumbBackgroundPressed = `var(${ctrlSliderThumbBackgroundPressedRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +export const ctrlSliderThumbBackgroundDisabled = `var(${ctrlSliderThumbBackgroundDisabledRaw}, var(${foregroundCtrlOnBrandDisabledRaw}))`; +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}))`; export const ctrlSliderThumbInnerStrokeHover = `var(${ctrlSliderThumbInnerStrokeHoverRaw}, var(${backgroundCtrlBrandHoverRaw}))`; export const ctrlSliderThumbInnerStrokePressed = `var(${ctrlSliderThumbInnerStrokePressedRaw}, var(${backgroundCtrlBrandPressedRaw}))`; export const ctrlSliderThumbInnerStrokeDisabled = `var(${ctrlSliderThumbInnerStrokeDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; -export const ctrlSliderThumbOuterStrokewidth = `var(${ctrlSliderThumbOuterStrokewidthRaw}, var(${strokewidthDefaultRaw}))`; +export const ctrlSliderThumbOuterStrokeWidth = `var(${ctrlSliderThumbOuterStrokeWidthRaw}, var(${strokeWidthDefaultRaw}))`; export const ctrlSliderThumbOuterStrokeRest = `var(${ctrlSliderThumbOuterStrokeRestRaw}, var(${backgroundCtrlBrandRestRaw}))`; export const ctrlSliderThumbOuterStrokeHover = `var(${ctrlSliderThumbOuterStrokeHoverRaw}, var(${backgroundCtrlBrandHoverRaw}))`; export const ctrlSliderThumbOuterStrokePressed = `var(${ctrlSliderThumbOuterStrokePressedRaw}, var(${backgroundCtrlBrandPressedRaw}))`; diff --git a/packages/semantic-tokens/src/components/slider/variables.ts b/packages/semantic-tokens/src/components/slider/variables.ts index a4b0ce3ee544f..78e669696fea6 100644 --- a/packages/semantic-tokens/src/components/slider/variables.ts +++ b/packages/semantic-tokens/src/components/slider/variables.ts @@ -17,14 +17,14 @@ export const ctrlSliderThumbBackgroundRestRaw = '--smtc-ctrl-slider-thumb-backgr 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-strokewidth-rest'; -export const ctrlSliderThumbInnerStrokewidthHoverRaw = '--smtc-ctrl-slider-thumb-inner-strokewidth-hover'; -export const ctrlSliderThumbInnerStrokewidthPressedRaw = '--smtc-ctrl-slider-thumb-inner-strokewidth-pressed'; +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-strokewidth'; +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'; diff --git a/packages/semantic-tokens/src/components/spinner/tokens.ts b/packages/semantic-tokens/src/components/spinner/tokens.ts index 15046039e0cf7..29219e3f594a0 100644 --- a/packages/semantic-tokens/src/components/spinner/tokens.ts +++ b/packages/semantic-tokens/src/components/spinner/tokens.ts @@ -1,6 +1,6 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE import { ctrlProgressHeightFilledRaw } from '../progress/variables'; -import { ctrlSpinnerStrokewidthRaw, ctrlSpinnerShowemptytrackRaw } from './variables'; +import { ctrlSpinnerStrokeWidthRaw, ctrlSpinnerShowEmptyTrackRaw } from './variables'; -export const ctrlSpinnerStrokewidth = `var(${ctrlSpinnerStrokewidthRaw}, var(${ctrlProgressHeightFilledRaw}))`; -export const ctrlSpinnerShowemptytrack = `var(${ctrlSpinnerShowemptytrackRaw})`; +export const ctrlSpinnerStrokeWidth = `var(${ctrlSpinnerStrokeWidthRaw}, var(${ctrlProgressHeightFilledRaw}))`; +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 index 0a29772638096..e8f1cb3b0287f 100644 --- a/packages/semantic-tokens/src/components/spinner/variables.ts +++ b/packages/semantic-tokens/src/components/spinner/variables.ts @@ -1,3 +1,3 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -export const ctrlSpinnerStrokewidthRaw = '--smtc-ctrl-spinner-strokewidth'; -export const ctrlSpinnerShowemptytrackRaw = '--smtc-ctrl-spinner-showemptytrack'; +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 index b6714dd3be2eb..b8dcb0ce06257 100644 --- a/packages/semantic-tokens/src/components/split/tokens.ts +++ b/packages/semantic-tokens/src/components/split/tokens.ts @@ -1,11 +1,11 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -import { strokewidthDefaultRaw } from '../../control/variables'; +import { strokeWidthDefaultRaw } from '../../control/variables'; import { - ctrlSplitDividerStrokewidthRaw, - ctrlSplitDividerStrokewidthOnoutlineRaw, - ctrlSplitDividerStrokewidthOnsubtleRaw, + 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)`; +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 index ee394f33b0370..5f941a9040ae5 100644 --- a/packages/semantic-tokens/src/components/split/variables.ts +++ b/packages/semantic-tokens/src/components/split/variables.ts @@ -1,4 +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-strokewidth'; -export const ctrlSplitDividerStrokewidthOnoutlineRaw = '--smtc-ctrl-split-divider-strokewidth-onoutline'; -export const ctrlSplitDividerStrokewidthOnsubtleRaw = '--smtc-ctrl-split-divider-strokewidth-onsubtle'; +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/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index bc72d2183a50d..8ac2c4f8d1f3c 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -7,117 +7,117 @@ import { colorNeutralForegroundDisabled, } 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, + 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, + textStyleDefaultRegularLetterSpacingRaw, textStyleDefaultHeaderWeightRaw, sizeCtrlDefaultRaw, sizeCtrlIconRaw, - sizeCtrlIconsecondaryRaw, + sizeCtrlIconSecondaryRaw, textCtrlWeightSelectedRaw, sizeCtrlSmDefaultRaw, sizeCtrlSmIconRaw, sizeCtrlLgDefaultRaw, sizeCtrlLgIconRaw, paddingContentAlignDefaultRaw, - paddingContentAlignOutdentIcononsubtleRaw, - paddingContentAlignOutdentTextonsubtleRaw, + paddingContentAlignOutdentIconOnSubtleRaw, paddingContentNoneRaw, - paddingContentXxsmallRaw, - paddingContentXsmallRaw, + paddingContentAlignOutdentTextOnSubtleRaw, + paddingContentXxSmallRaw, + paddingContentXSmallRaw, paddingContentSmallRaw, paddingContentMediumRaw, paddingContentLargeRaw, - paddingContentXlargeRaw, - paddingContentXxlargeRaw, - paddingContentXxxlargeRaw, + paddingContentXLargeRaw, + paddingContentXxLargeRaw, + paddingContentXxxLargeRaw, paddingCtrlHorizontalDefaultRaw, - paddingCtrlHorizontalIcononlyRaw, - paddingCtrlTexttopRaw, - paddingCtrlTextsideRaw, - paddingCtrlTonestedcontrolRaw, + paddingCtrlHorizontalIconOnlyRaw, + paddingCtrlTextTopRaw, + paddingCtrlTextSideRaw, + paddingCtrlToNestedControlRaw, paddingCtrlSmHorizontalDefaultRaw, - paddingCtrlSmHorizontalIcononlyRaw, - paddingCtrlSmTexttopRaw, - paddingCtrlSmTonestedcontrolRaw, + paddingCtrlSmHorizontalIconOnlyRaw, + paddingCtrlSmTextTopRaw, + paddingCtrlSmToNestedControlRaw, paddingCtrlLgHorizontalDefaultRaw, - paddingCtrlLgHorizontalIcononlyRaw, - paddingCtrlLgTexttopRaw, - paddingCtrlLgTonestedcontrolRaw, + paddingCtrlLgHorizontalIconOnlyRaw, + paddingCtrlLgTextTopRaw, + paddingCtrlLgToNestedControlRaw, gapBetweenContentNoneRaw, - gapBetweenContentXxsmallRaw, - gapBetweenContentXsmallRaw, + gapBetweenContentXxSmallRaw, + gapBetweenContentXSmallRaw, gapBetweenContentSmallRaw, gapBetweenCtrlDefaultRaw, gapBetweenContentMediumRaw, gapBetweenContentLargeRaw, - gapBetweenContentXlargeRaw, - gapBetweenContentXxlargeRaw, + gapBetweenContentXLargeRaw, + gapBetweenContentXxLargeRaw, gapBetweenCtrlLgDefaultRaw, gapBetweenCtrlSmDefaultRaw, gapInsideCtrlDefaultRaw, gapInsideCtrlSmDefaultRaw, - gapInsideCtrlSmTosecondaryiconRaw, + gapInsideCtrlSmToSecondaryIconRaw, gapInsideCtrlLgDefaultRaw, - gapInsideCtrlLgTosecondaryiconRaw, - gapInsideCtrlTosecondaryiconRaw, - gapInsideCtrlTolabelRaw, - gapInsideCtrlSmTolabelRaw, - gapInsideCtrlLgTolabelRaw, + gapInsideCtrlLgToSecondaryIconRaw, + gapInsideCtrlToSecondaryIconRaw, + gapInsideCtrlToLabelRaw, + gapInsideCtrlSmToLabelRaw, + gapInsideCtrlLgToLabelRaw, cornerCircularRaw, - strokewidthDefaultRaw, + strokeWidthDefaultRaw, backgroundSmokeRaw, - strokeCtrlOnoutlineRestRaw, - strokeCtrlOnoutlineHoverRaw, - strokeCtrlOnoutlinePressedRaw, - strokeCtrlOnoutlineDisabledRaw, - strokeCtrlDividerOnbrandRaw, - strokeCtrlDividerOnneutralRaw, - strokeCtrlDividerOnoutlineRaw, + strokeCtrlOnOutlineRestRaw, + strokeCtrlOnOutlineHoverRaw, + strokeCtrlOnOutlinePressedRaw, + strokeCtrlOnOutlineDisabledRaw, + strokeCtrlDividerOnBrandRaw, + strokeCtrlDividerOnNeutralRaw, + strokeCtrlDividerOnOutlineRaw, strokeDividerDefaultRaw, strokeWindowActiveRaw, backgroundWindowPrimarySolidRaw, - backgroundWindowPrimaryColorblendRaw, - backgroundWindowPrimaryLumblendRaw, + backgroundWindowPrimaryColorBlendRaw, + backgroundWindowPrimaryLumBlendRaw, backgroundWindowSecondarySolidRaw, - backgroundWindowSecondaryColorblendRaw, - backgroundWindowSecondaryLumblendRaw, - backgroundWindowTabbandColorblendRaw, - backgroundWindowTabbandLumblendRaw, - backgroundWindowTabbandSolidRaw, - backgroundWebpagePrimaryRaw, - backgroundWebpageSecondaryRaw, + backgroundWindowSecondaryColorBlendRaw, + backgroundWindowSecondaryLumBlendRaw, + backgroundWindowTabBandColorBlendRaw, + backgroundWindowTabBandLumBlendRaw, + backgroundWindowTabBandSolidRaw, + backgroundWebPagePrimaryRaw, + backgroundWebPageSecondaryRaw, backgroundLayerPrimarySolidRaw, - backgroundCardOnprimaryDefaultRestRaw, - backgroundCardOnprimaryAltRestRaw, - backgroundCardOnprimaryAltHoverRaw, - backgroundCardOnprimaryAltPressedRaw, - backgroundCardOnprimaryAltDisabledRaw, - backgroundCardOnprimaryDefaultHoverRaw, - backgroundCardOnprimaryDefaultPressedRaw, - backgroundCardOnprimaryDefaultDisabledRaw, + backgroundCardOnPrimaryDefaultRestRaw, + backgroundCardOnPrimaryAltRestRaw, + backgroundCardOnPrimaryAltHoverRaw, + backgroundCardOnPrimaryAltPressedRaw, + backgroundCardOnPrimaryAltDisabledRaw, + backgroundCardOnPrimaryDefaultHoverRaw, + backgroundCardOnPrimaryDefaultPressedRaw, + backgroundCardOnPrimaryDefaultDisabledRaw, backgroundFlyoutSolidRaw, backgroundCtrlBrandRestRaw, backgroundCtrlBrandHoverRaw, @@ -129,8 +129,8 @@ import { backgroundCtrlNeutralDisabledRaw, backgroundCtrlSubtleHoverRaw, backgroundCtrlSubtlePressedRaw, - backgroundFlyoutLumblendRaw, - backgroundFlyoutColorblendRaw, + backgroundFlyoutLumBlendRaw, + backgroundFlyoutColorBlendRaw, cornerZeroRaw, cornerBezelRaw, cornerWindowDefaultRaw, @@ -140,7 +140,7 @@ import { cornerCtrlRestRaw, cornerCtrlSmRestRaw, cornerCtrlLgRestRaw, - cornerImageIncardRaw, + cornerImageInCardRaw, foregroundCtrlNeutralPrimaryRestRaw, foregroundCtrlNeutralPrimaryDisabledRaw, foregroundCtrlNeutralSecondaryRestRaw, @@ -149,12 +149,12 @@ import { foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, foregroundCtrlBrandDisabledRaw, - foregroundCtrlOnbrandRestRaw, - foregroundCtrlOnbrandDisabledRaw, + foregroundCtrlOnBrandRestRaw, + foregroundCtrlOnBrandDisabledRaw, materialAcrylicBlurRaw, materialMicaBlurRaw, - iconthemeCtrlDefaultRestRaw, - iconthemeCtrlDefaultSelectedRaw, + iconThemeCtrlDefaultRestRaw, + iconThemeCtrlDefaultSelectedRaw, statusBrandTintBackgroundRaw, statusBrandTintStrokeRaw, statusDangerBackgroundRaw, @@ -190,18 +190,19 @@ import { statusNeutralBackgroundRaw, statusNeutralTintBackgroundRaw, statusNeutralTintStrokeRaw, - backgroundCardOnsecondaryDefaultRestRaw, - backgroundCardOnsecondaryAltRestRaw, - backgroundCardOnsecondaryAltHoverRaw, - backgroundCardOnsecondaryAltPressedRaw, - backgroundCardOnsecondaryAltDisabledRaw, - backgroundCardOnsecondaryDefaultHoverRaw, - backgroundCardOnsecondaryDefaultPressedRaw, - backgroundCardOnsecondaryDefaultDisabledRaw, - backgroundCardOnflyoutDefaultRestRaw, - backgroundCardOnflyoutDefaultHoverRaw, - backgroundCardOnflyoutDefaultPressedRaw, - backgroundCardOnflyoutDefaultDisabledRaw, + backgroundCardOnSecondaryDefaultRestRaw, + backgroundCardOnSecondaryAltRestRaw, + backgroundCardOnSecondaryAltHoverRaw, + backgroundCardOnSecondaryAltPressedRaw, + backgroundCardOnSecondaryAltDisabledRaw, + backgroundCardOnSecondaryDefaultHoverRaw, + backgroundCardOnSecondaryDefaultPressedRaw, + backgroundCardOnSecondaryDefaultDisabledRaw, + backgroundCardOnFlyoutDefaultRestRaw, + backgroundCardOnFlyoutDefaultHoverRaw, + backgroundCardOnFlyoutDefaultPressedRaw, + backgroundCardOnFlyoutDefaultDisabledRaw, + textStyleDefaultDisplayWeightRaw, shadowFlyoutKeyRaw, shadowFlyoutAmbientRaw, shadowToolbarKeyRaw, @@ -211,117 +212,117 @@ import { shadowWindowInactiveAmbientRaw, } from './variables'; -export const textGlobalDisplay1Fontsize = `var(${textGlobalDisplay1FontsizeRaw})`; -export const textGlobalDisplay1Lineheight = `var(${textGlobalDisplay1LineheightRaw})`; -export const textGlobalDisplay2Fontsize = `var(${textGlobalDisplay2FontsizeRaw})`; -export const textGlobalDisplay2Lineheight = `var(${textGlobalDisplay2LineheightRaw})`; -export const textGlobalTitle1Fontsize = `var(${textGlobalTitle1FontsizeRaw})`; -export const textGlobalTitle1Lineheight = `var(${textGlobalTitle1LineheightRaw})`; -export const textGlobalTitle2Fontsize = `var(${textGlobalTitle2FontsizeRaw})`; -export const textGlobalTitle2Lineheight = `var(${textGlobalTitle2LineheightRaw})`; -export const textGlobalSubtitle1Fontsize = `var(${textGlobalSubtitle1FontsizeRaw})`; -export const textGlobalSubtitle1Lineheight = `var(${textGlobalSubtitle1LineheightRaw})`; -export const textGlobalSubtitle2Fontsize = `var(${textGlobalSubtitle2FontsizeRaw})`; -export const textGlobalSubtitle2Lineheight = `var(${textGlobalSubtitle2LineheightRaw})`; -export const textGlobalBody1Fontsize = `var(${textGlobalBody1FontsizeRaw})`; -export const textGlobalBody1Lineheight = `var(${textGlobalBody1LineheightRaw})`; -export const textGlobalBody2Fontsize = `var(${textGlobalBody2FontsizeRaw})`; -export const textGlobalBody2Lineheight = `var(${textGlobalBody2LineheightRaw})`; -export const textGlobalBody3Fontsize = `var(${textGlobalBody3FontsizeRaw}, ${fontSizeBase300})`; -export const textGlobalBody3Lineheight = `var(${textGlobalBody3LineheightRaw})`; -export const textGlobalCaption1Fontsize = `var(${textGlobalCaption1FontsizeRaw})`; -export const textGlobalCaption1Lineheight = `var(${textGlobalCaption1LineheightRaw})`; -export const textGlobalCaption2Fontsize = `var(${textGlobalCaption2FontsizeRaw})`; -export const textGlobalCaption2Lineheight = `var(${textGlobalCaption2LineheightRaw})`; -export const textStyleDefaultRegularFontfamily = `var(${textStyleDefaultRegularFontfamilyRaw}, ${fontFamilyBase})`; +export const textGlobalDisplay1FontSize = `var(${textGlobalDisplay1FontSizeRaw})`; +export const textGlobalDisplay1LineHeight = `var(${textGlobalDisplay1LineHeightRaw})`; +export const textGlobalDisplay2FontSize = `var(${textGlobalDisplay2FontSizeRaw})`; +export const textGlobalDisplay2LineHeight = `var(${textGlobalDisplay2LineHeightRaw})`; +export const textGlobalTitle1FontSize = `var(${textGlobalTitle1FontSizeRaw})`; +export const textGlobalTitle1LineHeight = `var(${textGlobalTitle1LineHeightRaw})`; +export const textGlobalTitle2FontSize = `var(${textGlobalTitle2FontSizeRaw})`; +export const textGlobalTitle2LineHeight = `var(${textGlobalTitle2LineHeightRaw})`; +export const textGlobalSubtitle1FontSize = `var(${textGlobalSubtitle1FontSizeRaw})`; +export const textGlobalSubtitle1LineHeight = `var(${textGlobalSubtitle1LineHeightRaw})`; +export const textGlobalSubtitle2FontSize = `var(${textGlobalSubtitle2FontSizeRaw})`; +export const textGlobalSubtitle2LineHeight = `var(${textGlobalSubtitle2LineHeightRaw})`; +export const textGlobalBody1FontSize = `var(${textGlobalBody1FontSizeRaw})`; +export const textGlobalBody1LineHeight = `var(${textGlobalBody1LineHeightRaw})`; +export const textGlobalBody2FontSize = `var(${textGlobalBody2FontSizeRaw})`; +export const textGlobalBody2LineHeight = `var(${textGlobalBody2LineHeightRaw})`; +export const textGlobalBody3FontSize = `var(${textGlobalBody3FontSizeRaw}, ${fontSizeBase300})`; +export const textGlobalBody3LineHeight = `var(${textGlobalBody3LineHeightRaw})`; +export const textGlobalCaption1FontSize = `var(${textGlobalCaption1FontSizeRaw})`; +export const textGlobalCaption1LineHeight = `var(${textGlobalCaption1LineHeightRaw})`; +export const textGlobalCaption2FontSize = `var(${textGlobalCaption2FontSizeRaw})`; +export const textGlobalCaption2LineHeight = `var(${textGlobalCaption2LineHeightRaw})`; +export const textStyleDefaultRegularFontFamily = `var(${textStyleDefaultRegularFontFamilyRaw}, ${fontFamilyBase})`; export const textStyleDefaultRegularWeight = `var(${textStyleDefaultRegularWeightRaw}, ${fontWeightRegular})`; -export const textStyleDefaultRegularLetterspacing = `var(${textStyleDefaultRegularLetterspacingRaw})`; +export const textStyleDefaultRegularLetterSpacing = `var(${textStyleDefaultRegularLetterSpacingRaw})`; export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightRaw})`; export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw})`; export const sizeCtrlIcon = `var(${sizeCtrlIconRaw})`; -export const sizeCtrlIconsecondary = `var(${sizeCtrlIconsecondaryRaw})`; +export const sizeCtrlIconSecondary = `var(${sizeCtrlIconSecondaryRaw})`; export const textCtrlWeightSelected = `var(${textCtrlWeightSelectedRaw})`; export const sizeCtrlSmDefault = `var(${sizeCtrlSmDefaultRaw})`; export const sizeCtrlSmIcon = `var(${sizeCtrlSmIconRaw})`; export const sizeCtrlLgDefault = `var(${sizeCtrlLgDefaultRaw})`; export const sizeCtrlLgIcon = `var(${sizeCtrlLgIconRaw})`; export const paddingContentAlignDefault = `var(${paddingContentAlignDefaultRaw})`; -export const paddingContentAlignOutdentIcononsubtle = `var(${paddingContentAlignOutdentIcononsubtleRaw})`; -export const paddingContentAlignOutdentTextonsubtle = `var(${paddingContentAlignOutdentTextonsubtleRaw})`; +export const paddingContentAlignOutdentIconOnSubtle = `var(${paddingContentAlignOutdentIconOnSubtleRaw})`; export const paddingContentNone = `var(${paddingContentNoneRaw})`; -export const paddingContentXxsmall = `var(${paddingContentXxsmallRaw})`; -export const paddingContentXsmall = `var(${paddingContentXsmallRaw})`; +export const paddingContentAlignOutdentTextOnSubtle = `var(${paddingContentAlignOutdentTextOnSubtleRaw})`; +export const paddingContentXxSmall = `var(${paddingContentXxSmallRaw})`; +export const paddingContentXSmall = `var(${paddingContentXSmallRaw})`; export const paddingContentSmall = `var(${paddingContentSmallRaw})`; export const paddingContentMedium = `var(${paddingContentMediumRaw})`; export const paddingContentLarge = `var(${paddingContentLargeRaw})`; -export const paddingContentXlarge = `var(${paddingContentXlargeRaw})`; -export const paddingContentXxlarge = `var(${paddingContentXxlargeRaw})`; -export const paddingContentXxxlarge = `var(${paddingContentXxxlargeRaw})`; +export const paddingContentXLarge = `var(${paddingContentXLargeRaw})`; +export const paddingContentXxLarge = `var(${paddingContentXxLargeRaw})`; +export const paddingContentXxxLarge = `var(${paddingContentXxxLargeRaw})`; export const paddingCtrlHorizontalDefault = `var(${paddingCtrlHorizontalDefaultRaw})`; -export const paddingCtrlHorizontalIcononly = `var(${paddingCtrlHorizontalIcononlyRaw})`; -export const paddingCtrlTexttop = `var(${paddingCtrlTexttopRaw})`; -export const paddingCtrlTextside = `var(${paddingCtrlTextsideRaw})`; -export const paddingCtrlTonestedcontrol = `var(${paddingCtrlTonestedcontrolRaw})`; +export const paddingCtrlHorizontalIconOnly = `var(${paddingCtrlHorizontalIconOnlyRaw})`; +export const paddingCtrlTextTop = `var(${paddingCtrlTextTopRaw})`; +export const paddingCtrlTextSide = `var(${paddingCtrlTextSideRaw})`; +export const paddingCtrlToNestedControl = `var(${paddingCtrlToNestedControlRaw})`; export const paddingCtrlSmHorizontalDefault = `var(${paddingCtrlSmHorizontalDefaultRaw})`; -export const paddingCtrlSmHorizontalIcononly = `var(${paddingCtrlSmHorizontalIcononlyRaw})`; -export const paddingCtrlSmTexttop = `var(${paddingCtrlSmTexttopRaw})`; -export const paddingCtrlSmTonestedcontrol = `var(${paddingCtrlSmTonestedcontrolRaw})`; +export const paddingCtrlSmHorizontalIconOnly = `var(${paddingCtrlSmHorizontalIconOnlyRaw})`; +export const paddingCtrlSmTextTop = `var(${paddingCtrlSmTextTopRaw})`; +export const paddingCtrlSmToNestedControl = `var(${paddingCtrlSmToNestedControlRaw})`; export const paddingCtrlLgHorizontalDefault = `var(${paddingCtrlLgHorizontalDefaultRaw})`; -export const paddingCtrlLgHorizontalIcononly = `var(${paddingCtrlLgHorizontalIcononlyRaw})`; -export const paddingCtrlLgTexttop = `var(${paddingCtrlLgTexttopRaw})`; -export const paddingCtrlLgTonestedcontrol = `var(${paddingCtrlLgTonestedcontrolRaw})`; +export const paddingCtrlLgHorizontalIconOnly = `var(${paddingCtrlLgHorizontalIconOnlyRaw})`; +export const paddingCtrlLgTextTop = `var(${paddingCtrlLgTextTopRaw})`; +export const paddingCtrlLgToNestedControl = `var(${paddingCtrlLgToNestedControlRaw})`; export const gapBetweenContentNone = `var(${gapBetweenContentNoneRaw})`; -export const gapBetweenContentXxsmall = `var(${gapBetweenContentXxsmallRaw})`; -export const gapBetweenContentXsmall = `var(${gapBetweenContentXsmallRaw})`; +export const gapBetweenContentXxSmall = `var(${gapBetweenContentXxSmallRaw})`; +export const gapBetweenContentXSmall = `var(${gapBetweenContentXSmallRaw})`; export const gapBetweenContentSmall = `var(${gapBetweenContentSmallRaw})`; export const gapBetweenCtrlDefault = `var(${gapBetweenCtrlDefaultRaw})`; export const gapBetweenContentMedium = `var(${gapBetweenContentMediumRaw})`; export const gapBetweenContentLarge = `var(${gapBetweenContentLargeRaw})`; -export const gapBetweenContentXlarge = `var(${gapBetweenContentXlargeRaw})`; -export const gapBetweenContentXxlarge = `var(${gapBetweenContentXxlargeRaw})`; +export const gapBetweenContentXLarge = `var(${gapBetweenContentXLargeRaw})`; +export const gapBetweenContentXxLarge = `var(${gapBetweenContentXxLargeRaw})`; export const gapBetweenCtrlLgDefault = `var(${gapBetweenCtrlLgDefaultRaw})`; export const gapBetweenCtrlSmDefault = `var(${gapBetweenCtrlSmDefaultRaw})`; export const gapInsideCtrlDefault = `var(${gapInsideCtrlDefaultRaw})`; export const gapInsideCtrlSmDefault = `var(${gapInsideCtrlSmDefaultRaw})`; -export const gapInsideCtrlSmTosecondaryicon = `var(${gapInsideCtrlSmTosecondaryiconRaw})`; +export const gapInsideCtrlSmToSecondaryIcon = `var(${gapInsideCtrlSmToSecondaryIconRaw})`; export const gapInsideCtrlLgDefault = `var(${gapInsideCtrlLgDefaultRaw})`; -export const gapInsideCtrlLgTosecondaryicon = `var(${gapInsideCtrlLgTosecondaryiconRaw})`; -export const gapInsideCtrlTosecondaryicon = `var(${gapInsideCtrlTosecondaryiconRaw})`; -export const gapInsideCtrlTolabel = `var(${gapInsideCtrlTolabelRaw})`; -export const gapInsideCtrlSmTolabel = `var(${gapInsideCtrlSmTolabelRaw})`; -export const gapInsideCtrlLgTolabel = `var(${gapInsideCtrlLgTolabelRaw})`; +export const gapInsideCtrlLgToSecondaryIcon = `var(${gapInsideCtrlLgToSecondaryIconRaw})`; +export const gapInsideCtrlToSecondaryIcon = `var(${gapInsideCtrlToSecondaryIconRaw})`; +export const gapInsideCtrlToLabel = `var(${gapInsideCtrlToLabelRaw})`; +export const gapInsideCtrlSmToLabel = `var(${gapInsideCtrlSmToLabelRaw})`; +export const gapInsideCtrlLgToLabel = `var(${gapInsideCtrlLgToLabelRaw})`; export const cornerCircular = `var(${cornerCircularRaw})`; -export const strokewidthDefault = `var(${strokewidthDefaultRaw}, ${strokeWidthThin})`; +export const strokeWidthDefault = `var(${strokeWidthDefaultRaw}, ${strokeWidthThin})`; export const backgroundSmoke = `var(${backgroundSmokeRaw})`; -export const strokeCtrlOnoutlineRest = `var(${strokeCtrlOnoutlineRestRaw})`; -export const strokeCtrlOnoutlineHover = `var(${strokeCtrlOnoutlineHoverRaw})`; -export const strokeCtrlOnoutlinePressed = `var(${strokeCtrlOnoutlinePressedRaw})`; -export const strokeCtrlOnoutlineDisabled = `var(${strokeCtrlOnoutlineDisabledRaw})`; -export const strokeCtrlDividerOnbrand = `var(${strokeCtrlDividerOnbrandRaw})`; -export const strokeCtrlDividerOnneutral = `var(${strokeCtrlDividerOnneutralRaw})`; -export const strokeCtrlDividerOnoutline = `var(${strokeCtrlDividerOnoutlineRaw})`; +export const strokeCtrlOnOutlineRest = `var(${strokeCtrlOnOutlineRestRaw})`; +export const strokeCtrlOnOutlineHover = `var(${strokeCtrlOnOutlineHoverRaw})`; +export const strokeCtrlOnOutlinePressed = `var(${strokeCtrlOnOutlinePressedRaw})`; +export const strokeCtrlOnOutlineDisabled = `var(${strokeCtrlOnOutlineDisabledRaw})`; +export const strokeCtrlDividerOnBrand = `var(${strokeCtrlDividerOnBrandRaw})`; +export const strokeCtrlDividerOnNeutral = `var(${strokeCtrlDividerOnNeutralRaw})`; +export const strokeCtrlDividerOnOutline = `var(${strokeCtrlDividerOnOutlineRaw})`; export const strokeDividerDefault = `var(${strokeDividerDefaultRaw})`; export const strokeWindowActive = `var(${strokeWindowActiveRaw})`; export const backgroundWindowPrimarySolid = `var(${backgroundWindowPrimarySolidRaw})`; -export const backgroundWindowPrimaryColorblend = `var(${backgroundWindowPrimaryColorblendRaw})`; -export const backgroundWindowPrimaryLumblend = `var(${backgroundWindowPrimaryLumblendRaw})`; +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 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 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})`; export const backgroundCtrlBrandRest = `var(${backgroundCtrlBrandRestRaw})`; export const backgroundCtrlBrandHover = `var(${backgroundCtrlBrandHoverRaw})`; @@ -333,8 +334,8 @@ export const backgroundCtrlNeutralPressed = `var(${backgroundCtrlNeutralPressedR export const backgroundCtrlNeutralDisabled = `var(${backgroundCtrlNeutralDisabledRaw})`; export const backgroundCtrlSubtleHover = `var(${backgroundCtrlSubtleHoverRaw})`; export const backgroundCtrlSubtlePressed = `var(${backgroundCtrlSubtlePressedRaw})`; -export const backgroundFlyoutLumblend = `var(${backgroundFlyoutLumblendRaw})`; -export const backgroundFlyoutColorblend = `var(${backgroundFlyoutColorblendRaw})`; +export const backgroundFlyoutLumBlend = `var(${backgroundFlyoutLumBlendRaw})`; +export const backgroundFlyoutColorBlend = `var(${backgroundFlyoutColorBlendRaw})`; export const cornerZero = `var(${cornerZeroRaw})`; export const cornerBezel = `var(${cornerBezelRaw})`; export const cornerWindowDefault = `var(${cornerWindowDefaultRaw})`; @@ -344,7 +345,7 @@ export const cornerCardRest = `var(${cornerCardRestRaw})`; export const cornerCtrlRest = `var(${cornerCtrlRestRaw})`; export const cornerCtrlSmRest = `var(${cornerCtrlSmRestRaw})`; export const cornerCtrlLgRest = `var(${cornerCtrlLgRestRaw})`; -export const cornerImageIncard = `var(${cornerImageIncardRaw})`; +export const cornerImageInCard = `var(${cornerImageInCardRaw})`; export const foregroundCtrlNeutralPrimaryRest = `var(${foregroundCtrlNeutralPrimaryRestRaw})`; export const foregroundCtrlNeutralPrimaryDisabled = `var(${foregroundCtrlNeutralPrimaryDisabledRaw}, ${colorNeutralForegroundDisabled})`; export const foregroundCtrlNeutralSecondaryRest = `var(${foregroundCtrlNeutralSecondaryRestRaw})`; @@ -353,12 +354,12 @@ 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})`; -export const foregroundCtrlOnbrandDisabled = `var(${foregroundCtrlOnbrandDisabledRaw})`; +export const foregroundCtrlOnBrandRest = `var(${foregroundCtrlOnBrandRestRaw})`; +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 iconThemeCtrlDefaultRest = `var(${iconThemeCtrlDefaultRestRaw})`; +export const iconThemeCtrlDefaultSelected = `var(${iconThemeCtrlDefaultSelectedRaw})`; export const statusBrandTintBackground = `var(${statusBrandTintBackgroundRaw})`; export const statusBrandTintStroke = `var(${statusBrandTintStrokeRaw})`; export const statusDangerBackground = `var(${statusDangerBackgroundRaw})`; @@ -394,18 +395,19 @@ export const aiShimmerStop4 = `var(${aiShimmerStop4Raw})`; export const statusNeutralBackground = `var(${statusNeutralBackgroundRaw})`; export const statusNeutralTintBackground = `var(${statusNeutralTintBackgroundRaw})`; export const statusNeutralTintStroke = `var(${statusNeutralTintStrokeRaw})`; -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 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 shadowFlyoutKey = `var(${shadowFlyoutKeyRaw})`; export const shadowFlyoutAmbient = `var(${shadowFlyoutAmbientRaw})`; export const shadowToolbarKey = `var(${shadowToolbarKeyRaw})`; diff --git a/packages/semantic-tokens/src/control/variables.ts b/packages/semantic-tokens/src/control/variables.ts index 88652a7ff2716..a0364f9640c4d 100644 --- a/packages/semantic-tokens/src/control/variables.ts +++ b/packages/semantic-tokens/src/control/variables.ts @@ -1,115 +1,115 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -export const textGlobalDisplay1FontsizeRaw = '--smtc-text-global-display1-fontsize'; -export const textGlobalDisplay1LineheightRaw = '--smtc-text-global-display1-lineheight'; -export const textGlobalDisplay2FontsizeRaw = '--smtc-text-global-display2-fontsize'; -export const textGlobalDisplay2LineheightRaw = '--smtc-text-global-display2-lineheight'; -export const textGlobalTitle1FontsizeRaw = '--smtc-text-global-title1-fontsize'; -export const textGlobalTitle1LineheightRaw = '--smtc-text-global-title1-lineheight'; -export const textGlobalTitle2FontsizeRaw = '--smtc-text-global-title2-fontsize'; -export const textGlobalTitle2LineheightRaw = '--smtc-text-global-title2-lineheight'; -export const textGlobalSubtitle1FontsizeRaw = '--smtc-text-global-subtitle1-fontsize'; -export const textGlobalSubtitle1LineheightRaw = '--smtc-text-global-subtitle1-lineheight'; -export const textGlobalSubtitle2FontsizeRaw = '--smtc-text-global-subtitle2-fontsize'; -export const textGlobalSubtitle2LineheightRaw = '--smtc-text-global-subtitle2-lineheight'; -export const textGlobalBody1FontsizeRaw = '--smtc-text-global-body1-fontsize'; -export const textGlobalBody1LineheightRaw = '--smtc-text-global-body1-lineheight'; -export const textGlobalBody2FontsizeRaw = '--smtc-text-global-body2-fontsize'; -export const textGlobalBody2LineheightRaw = '--smtc-text-global-body2-lineheight'; -export const textGlobalBody3FontsizeRaw = '--smtc-text-global-body3-fontsize'; -export const textGlobalBody3LineheightRaw = '--smtc-text-global-body3-lineheight'; -export const textGlobalCaption1FontsizeRaw = '--smtc-text-global-caption1-fontsize'; -export const textGlobalCaption1LineheightRaw = '--smtc-text-global-caption1-lineheight'; -export const textGlobalCaption2FontsizeRaw = '--smtc-text-global-caption2-fontsize'; -export const textGlobalCaption2LineheightRaw = '--smtc-text-global-caption2-lineheight'; -export const textStyleDefaultRegularFontfamilyRaw = '--smtc-text-style-default-regular-fontfamily'; +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-letterspacing'; +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-iconsecondary'; +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-icononsubtle'; -export const paddingContentAlignOutdentTextonsubtleRaw = '--smtc-padding-content-align-outdent-textonsubtle'; +export const paddingContentAlignOutdentIconOnSubtleRaw = '--smtc-padding-content-align-outdent-icon-on-subtle'; export const paddingContentNoneRaw = '--smtc-padding-content-none'; -export const paddingContentXxsmallRaw = '--smtc-padding-content-xxsmall'; -export const paddingContentXsmallRaw = '--smtc-padding-content-xsmall'; +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-xlarge'; -export const paddingContentXxlargeRaw = '--smtc-padding-content-xxlarge'; -export const paddingContentXxxlargeRaw = '--smtc-padding-content-xxxlarge'; +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-icononly'; -export const paddingCtrlTexttopRaw = '--smtc-padding-ctrl-texttop'; -export const paddingCtrlTextsideRaw = '--smtc-padding-ctrl-textside'; -export const paddingCtrlTonestedcontrolRaw = '--smtc-padding-ctrl-tonestedcontrol'; +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-icononly'; -export const paddingCtrlSmTexttopRaw = '--smtc-padding-ctrl-sm-texttop'; -export const paddingCtrlSmTonestedcontrolRaw = '--smtc-padding-ctrl-sm-tonestedcontrol'; +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-icononly'; -export const paddingCtrlLgTexttopRaw = '--smtc-padding-ctrl-lg-texttop'; -export const paddingCtrlLgTonestedcontrolRaw = '--smtc-padding-ctrl-lg-tonestedcontrol'; +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-xxsmall'; -export const gapBetweenContentXsmallRaw = '--smtc-gap-between-content-xsmall'; +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-xlarge'; -export const gapBetweenContentXxlargeRaw = '--smtc-gap-between-content-xxlarge'; +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-tosecondaryicon'; +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-tosecondaryicon'; -export const gapInsideCtrlTosecondaryiconRaw = '--smtc-gap-inside-ctrl-tosecondaryicon'; -export const gapInsideCtrlTolabelRaw = '--smtc-gap-inside-ctrl-tolabel'; -export const gapInsideCtrlSmTolabelRaw = '--smtc-gap-inside-ctrl-sm-tolabel'; -export const gapInsideCtrlLgTolabelRaw = '--smtc-gap-inside-ctrl-lg-tolabel'; +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-strokewidth-default'; +export const strokeWidthDefaultRaw = '--smtc-stroke-width-default'; export const backgroundSmokeRaw = '--smtc-background-smoke'; -export const strokeCtrlOnoutlineRestRaw = '--smtc-stroke-ctrl-onoutline-rest'; -export const strokeCtrlOnoutlineHoverRaw = '--smtc-stroke-ctrl-onoutline-hover'; -export const strokeCtrlOnoutlinePressedRaw = '--smtc-stroke-ctrl-onoutline-pressed'; -export const strokeCtrlOnoutlineDisabledRaw = '--smtc-stroke-ctrl-onoutline-disabled'; -export const strokeCtrlDividerOnbrandRaw = '--smtc-stroke-ctrl-divider-onbrand'; -export const strokeCtrlDividerOnneutralRaw = '--smtc-stroke-ctrl-divider-onneutral'; -export const strokeCtrlDividerOnoutlineRaw = '--smtc-stroke-ctrl-divider-onoutline'; +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-colorblend'; -export const backgroundWindowPrimaryLumblendRaw = '--smtc-background-window-primary-lumblend'; +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-colorblend'; -export const backgroundWindowSecondaryLumblendRaw = '--smtc-background-window-secondary-lumblend'; -export const backgroundWindowTabbandColorblendRaw = '--smtc-background-window-tabband-colorblend'; -export const backgroundWindowTabbandLumblendRaw = '--smtc-background-window-tabband-lumblend'; -export const backgroundWindowTabbandSolidRaw = '--smtc-background-window-tabband-solid'; -export const backgroundWebpagePrimaryRaw = '--smtc-background-webpage-primary'; -export const backgroundWebpageSecondaryRaw = '--smtc-background-webpage-secondary'; -export const backgroundLayerPrimarySolidRaw = '--smtc-background-layer-primarysolid'; -export const backgroundCardOnprimaryDefaultRestRaw = '--smtc-background-card-onprimary-default-rest'; -export const backgroundCardOnprimaryAltRestRaw = '--smtc-background-card-onprimary-alt-rest'; -export const backgroundCardOnprimaryAltHoverRaw = '--smtc-background-card-onprimary-alt-hover'; -export const backgroundCardOnprimaryAltPressedRaw = '--smtc-background-card-onprimary-alt-pressed'; -export const backgroundCardOnprimaryAltDisabledRaw = '--smtc-background-card-onprimary-alt-disabled'; -export const backgroundCardOnprimaryDefaultHoverRaw = '--smtc-background-card-onprimary-default-hover'; -export const backgroundCardOnprimaryDefaultPressedRaw = '--smtc-background-card-onprimary-default-pressed'; -export const backgroundCardOnprimaryDefaultDisabledRaw = '--smtc-background-card-onprimary-default-disabled'; +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'; @@ -121,8 +121,8 @@ export const backgroundCtrlNeutralPressedRaw = '--smtc-background-ctrl-neutral-p 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-lumblend'; -export const backgroundFlyoutColorblendRaw = '--smtc-background-flyout-colorblend'; +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'; @@ -132,7 +132,7 @@ 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-incard'; +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'; @@ -141,12 +141,12 @@ 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-onbrand-rest'; -export const foregroundCtrlOnbrandDisabledRaw = '--smtc-foreground-ctrl-onbrand-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-icontheme-ctrl-default-rest'; -export const iconthemeCtrlDefaultSelectedRaw = '--smtc-icontheme-ctrl-default-selected'; +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'; @@ -182,18 +182,19 @@ export const aiShimmerStop4Raw = '--smtc-ai-shimmer-stop4'; 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 backgroundCardOnsecondaryDefaultRestRaw = '--smtc-background-card-onsecondary-default-rest'; -export const backgroundCardOnsecondaryAltRestRaw = '--smtc-background-card-onsecondary-alt-rest'; -export const backgroundCardOnsecondaryAltHoverRaw = '--smtc-background-card-onsecondary-alt-hover'; -export const backgroundCardOnsecondaryAltPressedRaw = '--smtc-background-card-onsecondary-alt-pressed'; -export const backgroundCardOnsecondaryAltDisabledRaw = '--smtc-background-card-onsecondary-alt-disabled'; -export const backgroundCardOnsecondaryDefaultHoverRaw = '--smtc-background-card-onsecondary-default-hover'; -export const backgroundCardOnsecondaryDefaultPressedRaw = '--smtc-background-card-onsecondary-default-pressed'; -export const backgroundCardOnsecondaryDefaultDisabledRaw = '--smtc-background-card-onsecondary-default-disabled'; -export const backgroundCardOnflyoutDefaultRestRaw = '--smtc-background-card-onflyout-default-rest'; -export const backgroundCardOnflyoutDefaultHoverRaw = '--smtc-background-card-onflyout-default-hover'; -export const backgroundCardOnflyoutDefaultPressedRaw = '--smtc-background-card-onflyout-default-pressed'; -export const backgroundCardOnflyoutDefaultDisabledRaw = '--smtc-background-card-onflyout-default-disabled'; +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 shadowFlyoutKeyRaw = '--smtc-shadow-flyout-key'; export const shadowFlyoutAmbientRaw = '--smtc-shadow-flyout-ambient'; export const shadowToolbarKeyRaw = '--smtc-shadow-toolbar-key'; diff --git a/packages/semantic-tokens/scripts/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts similarity index 78% rename from packages/semantic-tokens/scripts/fluentOverrides.ts rename to packages/semantic-tokens/src/fluentOverrides.ts index dc4a65684eb5f..8b99894366fd7 100644 --- a/packages/semantic-tokens/scripts/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -11,18 +11,16 @@ export type FluentOverrideValue = export type FluentOverrides = Record; export const fluentOverrides: FluentOverrides = { - ctrlFocusOuterStroke: { - f2Token: 'colorStrokeFocus2', - }, - ctrlLinkForegroundBrandRest: { f2Token: 'colorBrandForegroundLink' }, - textStyleDefaultRegularFontfamily: { f2Token: 'fontFamilyBase' }, - textGlobalBody3Fontsize: { f2Token: 'fontSizeBase300' }, - textStyleDefaultRegularWeight: { f2Token: 'fontWeightRegular' }, - strokewidthDefault: { f2Token: 'strokeWidthThin' }, + ctrlFocusOuterStroke: { f2Token: 'colorStrokeFocus2' }, ctrlLinkForegroundBrandHover: { f2Token: 'colorBrandForegroundLinkHover' }, ctrlLinkForegroundBrandPressed: { f2Token: 'colorBrandForegroundLinkPressed' }, - ctrlLinkForegroundNeutralRest: { f2Token: 'colorNeutralForeground2' }, - ctrlLinkForegroundNeutralPressed: { f2Token: 'colorNeutralForeground2Pressed' }, + ctrlLinkForegroundBrandRest: { f2Token: 'colorBrandForegroundLink' }, ctrlLinkForegroundNeutralHover: { f2Token: 'colorNeutralForeground2Hover' }, + ctrlLinkForegroundNeutralPressed: { f2Token: 'colorNeutralForeground2Pressed' }, + ctrlLinkForegroundNeutralRest: { f2Token: 'colorNeutralForeground2' }, foregroundCtrlNeutralPrimaryDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + strokeWidthDefault: { f2Token: 'strokeWidthThin' }, + textGlobalBody3FontSize: { f2Token: 'fontSizeBase300' }, + textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' }, + textStyleDefaultRegularWeight: { f2Token: 'fontWeightRegular' }, }; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 96b92ff6c909d..27ee76ee79e88 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1,136 +1,136 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE export { - textStyleDefaultHeaderFontfamilyRaw, - textStyleDefaultHeaderLetterspacingRaw, - textStyleAiRegularFontfamilyRaw, + textStyleDefaultHeaderFontFamilyRaw, + textStyleDefaultHeaderLetterSpacingRaw, + textStyleAiRegularFontFamilyRaw, textStyleAiRegularWeightRaw, - textStyleAiRegularLetterspacingRaw, - textStyleAiHeaderFontfamilyRaw, + textStyleAiRegularLetterSpacingRaw, + textStyleAiHeaderFontFamilyRaw, textStyleAiHeaderWeightRaw, - textStyleAiHeaderLetterspacingRaw, - textStyleArticleRegularFontfamilyRaw, + textStyleAiHeaderLetterSpacingRaw, + textStyleArticleRegularFontFamilyRaw, textStyleArticleRegularWeightRaw, - textStyleArticleRegularLetterspacingRaw, - textStyleArticleHeaderFontfamilyRaw, + textStyleArticleRegularLetterSpacingRaw, + textStyleArticleHeaderFontFamilyRaw, textStyleArticleHeaderWeightRaw, - textStyleArticleHeaderLetterspacingRaw, - textStyleCodeRegularFontfamilyRaw, + textStyleArticleHeaderLetterSpacingRaw, + textStyleCodeRegularFontFamilyRaw, textStyleCodeRegularWeightRaw, - textStyleCodeRegularLetterspacingRaw, - textStyleCodeHeaderFontfamilyRaw, + textStyleCodeRegularLetterSpacingRaw, + textStyleCodeHeaderFontFamilyRaw, textStyleCodeHeaderWeightRaw, - textStyleCodeHeaderLetterspacingRaw, - textStyleDatavizRegularFontfamilyRaw, - textStyleDatavizRegularWeightRaw, - textStyleDatavizRegularLetterspacingRaw, - textStyleDatavizHeaderFontfamilyRaw, - textStyleDatavizHeaderWeightRaw, - textStyleDatavizHeaderLetterspacingRaw, - textStyleQuoteRegularFontfamilyRaw, + textStyleCodeHeaderLetterSpacingRaw, + textStyleDataVizRegularFontFamilyRaw, + textStyleDataVizRegularWeightRaw, + textStyleDataVizRegularLetterSpacingRaw, + textStyleDataVizHeaderFontFamilyRaw, + textStyleDataVizHeaderWeightRaw, + textStyleDataVizHeaderLetterSpacingRaw, + textStyleQuoteRegularFontFamilyRaw, textStyleQuoteRegularWeightRaw, - textStyleQuoteRegularLetterspacingRaw, - textStyleQuoteHeaderFontfamilyRaw, + 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, + 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, + paddingCardNestedImageRaw, + paddingCtrlTextBottomRaw, + paddingCtrlSmTextBottomRaw, + paddingCtrlLgTextBottomRaw, gapBetweenCtrlNestedRaw, - gapTextSmallRaw, - gapTextLargeRaw, + gapBetweenTextSmallRaw, gapBetweenCtrlLgNestedRaw, + gapBetweenTextLargeRaw, gapBetweenCtrlSmNestedRaw, - gapListRaw, - gapCardRaw, - strokewidthDividerDefaultRaw, - strokewidthDividerStrongRaw, - strokewidthCtrlOutlineRestRaw, - strokewidthCtrlOutlineHoverRaw, - strokewidthCtrlOutlinePressedRaw, - strokewidthCtrlOutlineSelectedRaw, - strokewidthWindowDefaultRaw, + 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, - strokeCtrlDividerOnneutralDisabledRaw, - strokeCtrlDividerOnoutlineDisabledRaw, - strokeCtrlDividerOnactivebrandRaw, - strokeCtrlDividerOnactivebrandDisabledRaw, - strokeCtrlOnactivebrandHoverRaw, - strokeCtrlOnactivebrandPressedRaw, - strokeCtrlOnactivebrandDisabledRaw, - strokeCtrlOnactivebrandRestStop2Raw, - strokeCtrlOnactivebrandHoverStop2Raw, - strokeCtrlOnactivebrandPressedStop2Raw, - strokeCtrlOnactivebrandDisabledStop2Raw, + 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, @@ -140,24 +140,24 @@ export { backgroundLayerPrimaryStop3Raw, backgroundLayerSecondaryRaw, backgroundLayerTertiaryRaw, - backgroundCardOnprimaryDefaultSelectedRaw, - backgroundCtrlActivebrandRestRaw, - backgroundCtrlActivebrandHoverRaw, - backgroundCtrlActivebrandPressedRaw, - backgroundCtrlActivebrandDisabledRaw, - backgroundCtrlShapesafeActivebrandRestRaw, - backgroundCtrlShapesafeActivebrandDisabledRaw, - backgroundCtrlShapesafeNeutralRestRaw, - backgroundCtrlShapesafeNeutralHoverRaw, - backgroundCtrlShapesafeNeutralPressedRaw, - backgroundCtrlShapesafeNeutralDisabledRaw, + backgroundCardOnPrimaryDefaultSelectedRaw, + backgroundCtrlActiveBrandRestRaw, + backgroundCtrlActiveBrandHoverRaw, + backgroundCtrlActiveBrandPressedRaw, + backgroundCtrlActiveBrandDisabledRaw, + backgroundCtrlShapeSafeActiveBrandRestRaw, + backgroundCtrlShapeSafeActiveBrandDisabledRaw, + backgroundCtrlShapeSafeNeutralRestRaw, + backgroundCtrlShapeSafeNeutralHoverRaw, + backgroundCtrlShapeSafeNeutralPressedRaw, + backgroundCtrlShapeSafeNeutralDisabledRaw, cornerFlyoutHoverRaw, cornerFlyoutPressedRaw, cornerLayerIntersectionRaw, cornerCardHoverRaw, cornerCardPressedRaw, cornerToolbarDefaultRaw, - cornerImageOnpageRaw, + cornerImageOnPageRaw, cornerCtrlHoverRaw, cornerCtrlPressedRaw, cornerCtrlSmHoverRaw, @@ -171,60 +171,60 @@ export { 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, + 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, + materialAcrylicDefaultColorBlendRaw, + materialAcrylicDefaultLumBlendRaw, materialMicaDefaultSolidRaw, - materialMicaDefaultColorblendRaw, - materialMicaDefaultLumblendRaw, + materialMicaDefaultColorBlendRaw, + materialMicaDefaultLumBlendRaw, materialMicaDarkerSolidRaw, - materialMicaDarkerColorblendRaw, - materialMicaDarkerLumblendRaw, + materialMicaDarkerColorBlendRaw, + materialMicaDarkerLumBlendRaw, materialMicaThinSolidRaw, - materialMicaThinColorblendRaw, - materialMicaThinLumblendRaw, - iconthemeCtrlDefaultHoverRaw, - iconthemeCtrlDefaultPressedRaw, - iconthemeCtrlSubtleRestRaw, - iconthemeCtrlSubtleHoverRaw, - iconthemeCtrlSubtlePressedRaw, - iconthemeCtrlSubtleSelectedRaw, - iconthemeCtrlChevronDefaultRaw, - iconthemeCtrlChevronSelectedRaw, + materialMicaThinColorBlendRaw, + materialMicaThinLumBlendRaw, + iconThemeCtrlDefaultHoverRaw, + iconThemeCtrlDefaultPressedRaw, + iconThemeCtrlSubtleRestRaw, + iconThemeCtrlSubtleHoverRaw, + iconThemeCtrlSubtlePressedRaw, + iconThemeCtrlSubtleSelectedRaw, + iconThemeCtrlChevronDefaultRaw, + iconThemeCtrlChevronSelectedRaw, statusBrandBackgroundRaw, statusBrandStrokeRaw, statusBrandForegroundRaw, @@ -244,125 +244,127 @@ export { statusNeutralTintForegroundRaw, cornerFlyoutShellRestRaw, materialAcrylicShellDefaultSolidRaw, - materialAcrylicShellDefaultColorblendRaw, - materialAcrylicShellDefaultLumblendRaw, - backgroundCardOnsecondaryDefaultSelectedRaw, - shadowCtrlOndragKeyRaw, - shadowCtrlOndragAmbientRaw, + materialAcrylicShellDefaultColorBlendRaw, + materialAcrylicShellDefaultLumBlendRaw, + backgroundCardOnSecondaryDefaultSelectedRaw, + textStyleDefaultDisplayFontFamilyRaw, + textStyleDefaultDisplayLetterSpacingRaw, + shadowCtrlOnDragKeyRaw, + shadowCtrlOnDragAmbientRaw, shadowWindowInactiveKeyRaw, } 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, + 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, + textStyleDefaultRegularLetterSpacingRaw, textStyleDefaultHeaderWeightRaw, sizeCtrlDefaultRaw, sizeCtrlIconRaw, - sizeCtrlIconsecondaryRaw, + sizeCtrlIconSecondaryRaw, textCtrlWeightSelectedRaw, sizeCtrlSmDefaultRaw, sizeCtrlSmIconRaw, sizeCtrlLgDefaultRaw, sizeCtrlLgIconRaw, paddingContentAlignDefaultRaw, - paddingContentAlignOutdentIcononsubtleRaw, - paddingContentAlignOutdentTextonsubtleRaw, + paddingContentAlignOutdentIconOnSubtleRaw, paddingContentNoneRaw, - paddingContentXxsmallRaw, - paddingContentXsmallRaw, + paddingContentAlignOutdentTextOnSubtleRaw, + paddingContentXxSmallRaw, + paddingContentXSmallRaw, paddingContentSmallRaw, paddingContentMediumRaw, paddingContentLargeRaw, - paddingContentXlargeRaw, - paddingContentXxlargeRaw, - paddingContentXxxlargeRaw, + paddingContentXLargeRaw, + paddingContentXxLargeRaw, + paddingContentXxxLargeRaw, paddingCtrlHorizontalDefaultRaw, - paddingCtrlHorizontalIcononlyRaw, - paddingCtrlTexttopRaw, - paddingCtrlTextsideRaw, - paddingCtrlTonestedcontrolRaw, + paddingCtrlHorizontalIconOnlyRaw, + paddingCtrlTextTopRaw, + paddingCtrlTextSideRaw, + paddingCtrlToNestedControlRaw, paddingCtrlSmHorizontalDefaultRaw, - paddingCtrlSmHorizontalIcononlyRaw, - paddingCtrlSmTexttopRaw, - paddingCtrlSmTonestedcontrolRaw, + paddingCtrlSmHorizontalIconOnlyRaw, + paddingCtrlSmTextTopRaw, + paddingCtrlSmToNestedControlRaw, paddingCtrlLgHorizontalDefaultRaw, - paddingCtrlLgHorizontalIcononlyRaw, - paddingCtrlLgTexttopRaw, - paddingCtrlLgTonestedcontrolRaw, + paddingCtrlLgHorizontalIconOnlyRaw, + paddingCtrlLgTextTopRaw, + paddingCtrlLgToNestedControlRaw, gapBetweenContentNoneRaw, - gapBetweenContentXxsmallRaw, - gapBetweenContentXsmallRaw, + gapBetweenContentXxSmallRaw, + gapBetweenContentXSmallRaw, gapBetweenContentSmallRaw, gapBetweenCtrlDefaultRaw, gapBetweenContentMediumRaw, gapBetweenContentLargeRaw, - gapBetweenContentXlargeRaw, - gapBetweenContentXxlargeRaw, + gapBetweenContentXLargeRaw, + gapBetweenContentXxLargeRaw, gapBetweenCtrlLgDefaultRaw, gapBetweenCtrlSmDefaultRaw, gapInsideCtrlDefaultRaw, gapInsideCtrlSmDefaultRaw, - gapInsideCtrlSmTosecondaryiconRaw, + gapInsideCtrlSmToSecondaryIconRaw, gapInsideCtrlLgDefaultRaw, - gapInsideCtrlLgTosecondaryiconRaw, - gapInsideCtrlTosecondaryiconRaw, - gapInsideCtrlTolabelRaw, - gapInsideCtrlSmTolabelRaw, - gapInsideCtrlLgTolabelRaw, + gapInsideCtrlLgToSecondaryIconRaw, + gapInsideCtrlToSecondaryIconRaw, + gapInsideCtrlToLabelRaw, + gapInsideCtrlSmToLabelRaw, + gapInsideCtrlLgToLabelRaw, cornerCircularRaw, - strokewidthDefaultRaw, + strokeWidthDefaultRaw, backgroundSmokeRaw, - strokeCtrlOnoutlineRestRaw, - strokeCtrlOnoutlineHoverRaw, - strokeCtrlOnoutlinePressedRaw, - strokeCtrlOnoutlineDisabledRaw, - strokeCtrlDividerOnbrandRaw, - strokeCtrlDividerOnneutralRaw, - strokeCtrlDividerOnoutlineRaw, + strokeCtrlOnOutlineRestRaw, + strokeCtrlOnOutlineHoverRaw, + strokeCtrlOnOutlinePressedRaw, + strokeCtrlOnOutlineDisabledRaw, + strokeCtrlDividerOnBrandRaw, + strokeCtrlDividerOnNeutralRaw, + strokeCtrlDividerOnOutlineRaw, strokeDividerDefaultRaw, strokeWindowActiveRaw, backgroundWindowPrimarySolidRaw, - backgroundWindowPrimaryColorblendRaw, - backgroundWindowPrimaryLumblendRaw, + backgroundWindowPrimaryColorBlendRaw, + backgroundWindowPrimaryLumBlendRaw, backgroundWindowSecondarySolidRaw, - backgroundWindowSecondaryColorblendRaw, - backgroundWindowSecondaryLumblendRaw, - backgroundWindowTabbandColorblendRaw, - backgroundWindowTabbandLumblendRaw, - backgroundWindowTabbandSolidRaw, - backgroundWebpagePrimaryRaw, - backgroundWebpageSecondaryRaw, + backgroundWindowSecondaryColorBlendRaw, + backgroundWindowSecondaryLumBlendRaw, + backgroundWindowTabBandColorBlendRaw, + backgroundWindowTabBandLumBlendRaw, + backgroundWindowTabBandSolidRaw, + backgroundWebPagePrimaryRaw, + backgroundWebPageSecondaryRaw, backgroundLayerPrimarySolidRaw, - backgroundCardOnprimaryDefaultRestRaw, - backgroundCardOnprimaryAltRestRaw, - backgroundCardOnprimaryAltHoverRaw, - backgroundCardOnprimaryAltPressedRaw, - backgroundCardOnprimaryAltDisabledRaw, - backgroundCardOnprimaryDefaultHoverRaw, - backgroundCardOnprimaryDefaultPressedRaw, - backgroundCardOnprimaryDefaultDisabledRaw, + backgroundCardOnPrimaryDefaultRestRaw, + backgroundCardOnPrimaryAltRestRaw, + backgroundCardOnPrimaryAltHoverRaw, + backgroundCardOnPrimaryAltPressedRaw, + backgroundCardOnPrimaryAltDisabledRaw, + backgroundCardOnPrimaryDefaultHoverRaw, + backgroundCardOnPrimaryDefaultPressedRaw, + backgroundCardOnPrimaryDefaultDisabledRaw, backgroundFlyoutSolidRaw, backgroundCtrlBrandRestRaw, backgroundCtrlBrandHoverRaw, @@ -374,8 +376,8 @@ export { backgroundCtrlNeutralDisabledRaw, backgroundCtrlSubtleHoverRaw, backgroundCtrlSubtlePressedRaw, - backgroundFlyoutLumblendRaw, - backgroundFlyoutColorblendRaw, + backgroundFlyoutLumBlendRaw, + backgroundFlyoutColorBlendRaw, cornerZeroRaw, cornerBezelRaw, cornerWindowDefaultRaw, @@ -385,7 +387,7 @@ export { cornerCtrlRestRaw, cornerCtrlSmRestRaw, cornerCtrlLgRestRaw, - cornerImageIncardRaw, + cornerImageInCardRaw, foregroundCtrlNeutralPrimaryRestRaw, foregroundCtrlNeutralPrimaryDisabledRaw, foregroundCtrlNeutralSecondaryRestRaw, @@ -394,12 +396,12 @@ export { foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, foregroundCtrlBrandDisabledRaw, - foregroundCtrlOnbrandRestRaw, - foregroundCtrlOnbrandDisabledRaw, + foregroundCtrlOnBrandRestRaw, + foregroundCtrlOnBrandDisabledRaw, materialAcrylicBlurRaw, materialMicaBlurRaw, - iconthemeCtrlDefaultRestRaw, - iconthemeCtrlDefaultSelectedRaw, + iconThemeCtrlDefaultRestRaw, + iconThemeCtrlDefaultSelectedRaw, statusBrandTintBackgroundRaw, statusBrandTintStrokeRaw, statusDangerBackgroundRaw, @@ -435,18 +437,19 @@ export { statusNeutralBackgroundRaw, statusNeutralTintBackgroundRaw, statusNeutralTintStrokeRaw, - backgroundCardOnsecondaryDefaultRestRaw, - backgroundCardOnsecondaryAltRestRaw, - backgroundCardOnsecondaryAltHoverRaw, - backgroundCardOnsecondaryAltPressedRaw, - backgroundCardOnsecondaryAltDisabledRaw, - backgroundCardOnsecondaryDefaultHoverRaw, - backgroundCardOnsecondaryDefaultPressedRaw, - backgroundCardOnsecondaryDefaultDisabledRaw, - backgroundCardOnflyoutDefaultRestRaw, - backgroundCardOnflyoutDefaultHoverRaw, - backgroundCardOnflyoutDefaultPressedRaw, - backgroundCardOnflyoutDefaultDisabledRaw, + backgroundCardOnSecondaryDefaultRestRaw, + backgroundCardOnSecondaryAltRestRaw, + backgroundCardOnSecondaryAltHoverRaw, + backgroundCardOnSecondaryAltPressedRaw, + backgroundCardOnSecondaryAltDisabledRaw, + backgroundCardOnSecondaryDefaultHoverRaw, + backgroundCardOnSecondaryDefaultPressedRaw, + backgroundCardOnSecondaryDefaultDisabledRaw, + backgroundCardOnFlyoutDefaultRestRaw, + backgroundCardOnFlyoutDefaultHoverRaw, + backgroundCardOnFlyoutDefaultPressedRaw, + backgroundCardOnFlyoutDefaultDisabledRaw, + textStyleDefaultDisplayWeightRaw, shadowFlyoutKeyRaw, shadowFlyoutAmbientRaw, shadowToolbarKeyRaw, @@ -460,42 +463,42 @@ export { textStyleAiHeaderCaseRaw, textStyleArticleHeaderCaseRaw, textStyleCodeHeaderCaseRaw, - textStyleDatavizHeaderCaseRaw, + textStyleDataVizHeaderCaseRaw, textStyleQuoteHeaderCaseRaw, strokeLayerRaw, strokeImageRaw, strokeFlyoutRaw, - strokeCtrlOnbrandRestRaw, - strokeCtrlOnbrandHoverRaw, - strokeCtrlOnbrandPressedRaw, - strokeCtrlOnbrandDisabledRaw, - strokeCtrlOnneutralRestRaw, - strokeCtrlOnneutralHoverRaw, - strokeCtrlOnneutralPressedRaw, - strokeCtrlOnneutralDisabledRaw, - strokeCtrlOnsubtleRestRaw, - strokeCtrlOnsubtleHoverRaw, - strokeCtrlOnsubtlePressedRaw, - strokeCtrlOnsubtleDisabledRaw, - strokeCtrlOnsubtleHoversplitRaw, - strokeCtrlDividerOnsubtleRaw, - strokeCtrlDividerOnsubtleDisabledRaw, + strokeCtrlOnBrandRestRaw, + strokeCtrlOnBrandHoverRaw, + strokeCtrlOnBrandPressedRaw, + strokeCtrlOnBrandDisabledRaw, + strokeCtrlOnNeutralRestRaw, + strokeCtrlOnNeutralHoverRaw, + strokeCtrlOnNeutralPressedRaw, + strokeCtrlOnNeutralDisabledRaw, + strokeCtrlOnSubtleRestRaw, + strokeCtrlOnSubtleHoverRaw, + strokeCtrlOnSubtlePressedRaw, + strokeCtrlOnSubtleDisabledRaw, + strokeCtrlOnSubtleHoverSplitRaw, + strokeCtrlDividerOnSubtleRaw, + strokeCtrlDividerOnSubtleDisabledRaw, strokeCardSelectedRaw, - strokeCardOnprimaryRestRaw, - strokeCardOnprimaryHoverRaw, - strokeCardOnprimaryPressedRaw, - strokeCardOnprimaryDisabledRaw, - strokeCardOnsecondaryRestRaw, - strokeCardOnsecondaryHoverRaw, - strokeCardOnsecondaryPressedRaw, - strokeCardOnsecondaryDisabledRaw, + strokeCardOnPrimaryRestRaw, + strokeCardOnPrimaryHoverRaw, + strokeCardOnPrimaryPressedRaw, + strokeCardOnPrimaryDisabledRaw, + strokeCardOnSecondaryRestRaw, + strokeCardOnSecondaryHoverRaw, + strokeCardOnSecondaryPressedRaw, + strokeCardOnSecondaryDisabledRaw, backgroundCtrlOutlineRestRaw, backgroundCtrlOutlineHoverRaw, backgroundCtrlOutlinePressedRaw, backgroundCtrlOutlineDisabledRaw, backgroundCtrlSubtleRestRaw, backgroundCtrlSubtleDisabledRaw, - backgroundCtrlSubtleHoversplitRaw, + backgroundCtrlSubtleHoverSplitRaw, foregroundCtrlHintDefaultRaw, shadowCardRestKeyRaw, shadowCardHoverKeyRaw, @@ -511,18 +514,18 @@ export { ctrlAvatarBackgroundRaw, ctrlAvatarForegroundRaw, ctrlAvatarIconSizeRaw, - ctrlAvatarPresencebadgeSizeRaw, - ctrlAvatarActiveringSizeRaw, - ctrlAvatarPresencebadgePaddingBottomrightoffsetRaw, + ctrlAvatarPresenceBadgeSizeRaw, + ctrlAvatarActiveRingSizeRaw, + ctrlAvatarPresenceBadgePaddingBottomRightOffsetRaw, ctrlAvatarCornerGroupRaw, - ctrlAvatarActiveringStrokewidthRaw, - ctrlAvatarPresencebadgeStrokewidthRaw, - ctrlAvatarTextFontsizeRaw, - ctrlAvatarTextLineheightRaw, - ctrlAvatarTextPaddingTopoffsetRaw, - ctrlAvatarActiveringStrokeRaw, - ctrlAvatarShowcutoutRaw, - ctrlAvatarPresencebadgeBackgroundBehindbadgeRaw, + ctrlAvatarActiveRingStrokeWidthRaw, + ctrlAvatarPresenceBadgeStrokeWidthRaw, + ctrlAvatarTextFontSizeRaw, + ctrlAvatarTextLineHeightRaw, + ctrlAvatarTextPaddingTopOffsetRaw, + ctrlAvatarActiveRingStrokeRaw, + ctrlAvatarShowCutoutRaw, + ctrlAvatarPresenceBadgeBackgroundBehindBadgeRaw, } from './components/avatar/variables'; export { ctrlBadgeTextPaddingTopRaw, @@ -563,24 +566,24 @@ export { ctrlChoiceCheckboxIconSizeRaw, ctrlChoiceCheckboxCornerRaw, ctrlChoiceCheckboxIndeterminateCornerRaw, - ctrlChoiceCheckboxIndeterminateHeightRaw, ctrlChoiceCheckboxIndeterminateWidthRaw, + ctrlChoiceCheckboxIndeterminateHeightRaw, ctrlChoiceRadioCornerRaw, ctrlChoiceSwitchCornerRaw, - ctrlChoiceRadioDotSizeRestRaw, - ctrlChoiceRadioDotSizeHoverRaw, - ctrlChoiceRadioDotSizePressedRaw, + ctrlChoiceSwitchHeightRaw, + ctrlChoiceSwitchWidthRaw, ctrlChoiceSwitchPaddingRestRaw, ctrlChoiceSwitchPaddingHoverRaw, ctrlChoiceSwitchPaddingPressedRaw, - ctrlChoiceSwitchHeightRaw, - ctrlChoiceSwitchWidthRaw, ctrlChoiceSwitchThumbWidthRestRaw, ctrlChoiceSwitchThumbWidthHoverRaw, ctrlChoiceSwitchThumbWidthPressedRaw, + ctrlChoiceRadioDotSizeRestRaw, + ctrlChoiceRadioDotSizeHoverRaw, + ctrlChoiceRadioDotSizePressedRaw, ctrlChoiceSmBaseSizeRaw, - ctrlChoiceSmCheckboxCornerRaw, ctrlChoiceSmCheckboxIconSizeRaw, + ctrlChoiceSmCheckboxCornerRaw, ctrlChoiceSmRadioDotSizeRaw, ctrlChoiceSmSwitchWidthRaw, ctrlChoiceSmSwitchHeightRaw, @@ -610,13 +613,15 @@ export { ctrlDialogBaseShadowKeyRaw, ctrlDialogBaseShadowAmbientRaw, } from './components/dialog/variables'; -export { ctrlDividerFixedlineLengthRaw } from './components/divider/variables'; +export { ctrlDividerFixedLineLengthRaw } from './components/divider/variables'; export { ctrlDragBackgroundSolidRaw, - ctrlDragBackgroundColorblendRaw, - ctrlDragBackgroundLumblendRaw, + ctrlDragBackgroundColorBlendRaw, + ctrlDragBackgroundLumBlendRaw, } from './components/drag/variables'; export { + ctrlFabForegroundRestNewRaw, + ctrlFabForegroundDisabledNewRaw, ctrlFabBackgroundRestRaw, ctrlFabBackgroundHoverRaw, ctrlFabBackgroundPressedRaw, @@ -631,9 +636,9 @@ export { ctrlFabShadowDisabledKeyRaw, } from './components/fab/variables'; export { - ctrlFocusInnerStrokewidthRaw, + ctrlFocusInnerStrokeWidthRaw, ctrlFocusInnerStrokeRaw, - ctrlFocusOuterStrokewidthRaw, + ctrlFocusOuterStrokeWidthRaw, ctrlFocusOuterStrokeRaw, } from './components/focus/variables'; export { @@ -644,22 +649,22 @@ export { ctrlInputBackgroundSelectedRaw, ctrlInputBackgroundErrorRaw, ctrlInputStrokeRestRaw, - ctrlInputBottomlineStrokewidthRestRaw, - ctrlInputStrokewidthRestRaw, - ctrlInputTextselectionBackgroundRaw, - ctrlInputTextselectionForegroundRaw, - ctrlInputStrokewidthHoverRaw, - ctrlInputStrokewidthPressedRaw, - ctrlInputStrokewidthSelectedRaw, - ctrlInputBottomlineStrokewidthHoverRaw, - ctrlInputBottomlineStrokewidthPressedRaw, - ctrlInputBottomlineStrokewidthSelectedRaw, - ctrlInputBottomlineStrokeRestRaw, - ctrlInputBottomlineStrokeHoverRaw, - ctrlInputBottomlineStrokePressedRaw, - ctrlInputBottomlineStrokeDisabledRaw, - ctrlInputBottomlineStrokeSelectedRaw, - ctrlInputBottomlineStrokeErrorRaw, + ctrlInputStrokeWidthRestRaw, + ctrlInputStrokeWidthHoverRaw, + ctrlInputStrokeWidthPressedRaw, + ctrlInputStrokeWidthSelectedRaw, + ctrlInputBottomLineStrokeWidthRestRaw, + ctrlInputTextSelectionBackgroundRaw, + ctrlInputTextSelectionForegroundRaw, + ctrlInputBottomLineStrokeWidthHoverRaw, + ctrlInputBottomLineStrokeWidthPressedRaw, + ctrlInputBottomLineStrokeWidthSelectedRaw, + ctrlInputBottomLineStrokeRestRaw, + ctrlInputBottomLineStrokeHoverRaw, + ctrlInputBottomLineStrokePressedRaw, + ctrlInputBottomLineStrokeDisabledRaw, + ctrlInputBottomLineStrokeSelectedRaw, + ctrlInputBottomLineStrokeErrorRaw, ctrlInputStrokeHoverRaw, ctrlInputStrokePressedRaw, ctrlInputStrokeDisabledRaw, @@ -668,23 +673,23 @@ export { } from './components/input/variables'; export { ctrlLinkForegroundNeutralRestRaw, - ctrlLinkInlineStrokewidthRestRaw, - ctrlLinkInlineStrokewidthHoverRaw, + ctrlLinkInlineStrokeWidthRestRaw, + ctrlLinkInlineStrokeWidthHoverRaw, ctrlLinkInlineUnderlineDashedRaw, ctrlLinkForegroundNeutralHoverRaw, ctrlLinkForegroundNeutralPressedRaw, ctrlLinkForegroundBrandRestRaw, ctrlLinkForegroundBrandHoverRaw, ctrlLinkForegroundBrandPressedRaw, - ctrlLinkOnpageStrokewidthRestRaw, - ctrlLinkOnpageStrokewidthHoverRaw, - ctrlLinkOnpageUnderlineDashedRaw, - ctrlLinkInlineShowunderlineatrestRaw, - ctrlLinkOnpageShowunderlineatrestRaw, + ctrlLinkOnPageStrokeWidthRestRaw, + ctrlLinkOnPageStrokeWidthHoverRaw, + ctrlLinkOnPageUnderlineDashedRaw, + ctrlLinkInlineShowUnderlineAtRestRaw, + ctrlLinkOnPageShowUnderlineAtRestRaw, } from './components/link/variables'; export { ctrlListPillWidthRaw, - ctrlListPillFullwidthRaw, + ctrlListPillFullWidthRaw, ctrlListPillStretchPaddingDefaultRaw, ctrlListPillStretchPaddingHintRaw, ctrlListPillLengthRestRaw, @@ -698,6 +703,10 @@ export { ctrlListIndentLevel2Raw, ctrlListIndentLevel3Raw, ctrlListBackgroundSelectedRestRaw, + ctrlListForegroundSelectedRestRaw, + ctrlListForegroundSelectedHoverRaw, + ctrlListForegroundSelectedPressedRaw, + ctrlListForegroundSelectedDisabledRaw, ctrlListBackgroundSelectedHoverRaw, ctrlListBackgroundSelectedPressedRaw, ctrlListBackgroundSelectedDisabledRaw, @@ -729,15 +738,15 @@ export { ctrlListLgIndentLevel1Raw, ctrlListLgIndentLevel2Raw, ctrlListLgIndentLevel3Raw, - ctrlListSplitDividerShowdividerRaw, + ctrlListSplitDividerShowDividerRaw, ctrlListShadowSelectedKeyRaw, ctrlListShadowSelectedAmbientRaw, } from './components/list/variables'; export { - ctrlLitefilterBackgroundSelectedRaw, - ctrlLitefilterStrokeSelectedRaw, - ctrlLitefilterForegroundSelectedRaw, - ctrlLitefilterStrokewidthSelectedRaw, + ctrlLiteFilterBackgroundSelectedRaw, + ctrlLiteFilterStrokeSelectedRaw, + ctrlLiteFilterForegroundSelectedRaw, + ctrlLiteFilterStrokeWidthSelectedRaw, } from './components/liteFilter/variables'; export { ctrlProgressBackgroundEmptyRaw, @@ -814,14 +823,14 @@ export { ctrlSliderThumbBackgroundHoverRaw, ctrlSliderThumbBackgroundPressedRaw, ctrlSliderThumbBackgroundDisabledRaw, - ctrlSliderThumbInnerStrokewidthRestRaw, - ctrlSliderThumbInnerStrokewidthHoverRaw, - ctrlSliderThumbInnerStrokewidthPressedRaw, + ctrlSliderThumbInnerStrokeWidthRestRaw, + ctrlSliderThumbInnerStrokeWidthHoverRaw, + ctrlSliderThumbInnerStrokeWidthPressedRaw, ctrlSliderThumbInnerStrokeRestRaw, ctrlSliderThumbInnerStrokeHoverRaw, ctrlSliderThumbInnerStrokePressedRaw, ctrlSliderThumbInnerStrokeDisabledRaw, - ctrlSliderThumbOuterStrokewidthRaw, + ctrlSliderThumbOuterStrokeWidthRaw, ctrlSliderThumbOuterStrokeRestRaw, ctrlSliderThumbOuterStrokeHoverRaw, ctrlSliderThumbOuterStrokePressedRaw, @@ -836,11 +845,11 @@ export { ctrlSliderLgThumbSizePressedRaw, } from './components/slider/variables'; export { - ctrlSplitDividerStrokewidthRaw, - ctrlSplitDividerStrokewidthOnoutlineRaw, - ctrlSplitDividerStrokewidthOnsubtleRaw, + ctrlSplitDividerStrokeWidthRaw, + ctrlSplitDividerStrokeWidthOnOutlineRaw, + ctrlSplitDividerStrokeWidthOnSubtleRaw, } from './components/split/variables'; -export { ctrlSpinnerStrokewidthRaw, ctrlSpinnerShowemptytrackRaw } from './components/spinner/variables'; +export { ctrlSpinnerStrokeWidthRaw, ctrlSpinnerShowEmptyTrackRaw } from './components/spinner/variables'; export { ctrlTooltipCornerRaw, ctrlTooltipBackgroundRaw, @@ -848,7 +857,7 @@ export { ctrlTooltipShadowKeyRaw, ctrlTooltipShadowAmbientRaw, } from './components/tooltip/variables'; -export { ctrlBooleanSelectionhintRaw } from './components/boolean/variables'; +export { ctrlBooleanSelectionHintRaw } from './components/boolean/variables'; export { ctrlComposerInputBottomStrokeWidthSelectedRestRaw, ctrlComposerInputBottomStrokeWidthRestRaw, @@ -863,23 +872,23 @@ export { ctrlComposerInputBackgroundSelectedRestRaw, ctrlComposerInputBackgroundHoverRaw, ctrlComposerInputStrokeRestRaw, - ctrlComposerInputStrokeHoverUsesgradientRaw, - ctrlComposerInputStrokePressedUsesgradientRaw, - ctrlComposerInputStrokeDisabledUsesgradientRaw, - ctrlComposerInputStrokeSelectedRestUsesgradientRaw, + ctrlComposerInputStrokeHoverUsesGradientRaw, + ctrlComposerInputStrokePressedUsesGradientRaw, + ctrlComposerInputStrokeDisabledUsesGradientRaw, + ctrlComposerInputStrokeSelectedRestUsesGradientRaw, ctrlComposerInputStrokeWidthRestRaw, ctrlComposerInputStrokeWidthHoverRaw, ctrlComposerInputStrokeWidthPressedRaw, ctrlComposerInputStrokeWidthSelectedRestRaw, - ctrlComposerInputBottomstrokeRestRaw, - ctrlComposerInputBottomstrokeHoverRaw, - ctrlComposerInputBottomstrokePressedRaw, - ctrlComposerInputBottomstrokeDisabledRaw, - ctrlComposerInputBottomstrokeSelectedRestRaw, + ctrlComposerInputBottomStrokeRestRaw, + ctrlComposerInputBottomStrokeHoverRaw, + ctrlComposerInputBottomStrokePressedRaw, + ctrlComposerInputBottomStrokeDisabledRaw, + ctrlComposerInputBottomStrokeSelectedRestRaw, ctrlComposerContainerCornerRaw, ctrlComposerContainerBackgroundDefaultRaw, - ctrlComposerContainerBackgroundAcryliccolorblendRaw, - ctrlComposerContainerBackgroundAcryliclumblendRaw, + ctrlComposerContainerBackgroundAcrylicColorBlendRaw, + ctrlComposerContainerBackgroundAcrylicLumBlendRaw, ctrlComposerContainerStrokeDefaultRaw, ctrlComposerInputShadowRaw, ctrlComposerContainerShadowKeyRaw, @@ -892,137 +901,137 @@ export { ctrlCardStateDisabledRaw, } from './components/card/variables'; export { - textStyleDefaultHeaderFontfamily, - textStyleDefaultHeaderLetterspacing, - textStyleAiRegularFontfamily, + textStyleDefaultHeaderFontFamily, + textStyleDefaultHeaderLetterSpacing, + textStyleAiRegularFontFamily, textStyleAiRegularWeight, - textStyleAiRegularLetterspacing, - textStyleAiHeaderFontfamily, + textStyleAiRegularLetterSpacing, + textStyleAiHeaderFontFamily, textStyleAiHeaderWeight, - textStyleAiHeaderLetterspacing, - textStyleArticleRegularFontfamily, + textStyleAiHeaderLetterSpacing, + textStyleArticleRegularFontFamily, textStyleArticleRegularWeight, - textStyleArticleRegularLetterspacing, - textStyleArticleHeaderFontfamily, + textStyleArticleRegularLetterSpacing, + textStyleArticleHeaderFontFamily, textStyleArticleHeaderWeight, - textStyleArticleHeaderLetterspacing, - textStyleCodeRegularFontfamily, + textStyleArticleHeaderLetterSpacing, + textStyleCodeRegularFontFamily, textStyleCodeRegularWeight, - textStyleCodeRegularLetterspacing, - textStyleCodeHeaderFontfamily, + textStyleCodeRegularLetterSpacing, + textStyleCodeHeaderFontFamily, textStyleCodeHeaderWeight, - textStyleCodeHeaderLetterspacing, - textStyleDatavizRegularFontfamily, - textStyleDatavizRegularWeight, - textStyleDatavizRegularLetterspacing, - textStyleDatavizHeaderFontfamily, - textStyleDatavizHeaderWeight, - textStyleDatavizHeaderLetterspacing, - textStyleQuoteRegularFontfamily, + textStyleCodeHeaderLetterSpacing, + textStyleDataVizRegularFontFamily, + textStyleDataVizRegularWeight, + textStyleDataVizRegularLetterSpacing, + textStyleDataVizHeaderFontFamily, + textStyleDataVizHeaderWeight, + textStyleDataVizHeaderLetterSpacing, + textStyleQuoteRegularFontFamily, textStyleQuoteRegularWeight, - textStyleQuoteRegularLetterspacing, - textStyleQuoteHeaderFontfamily, + 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, + 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, + paddingCardNestedImage, + paddingCtrlTextBottom, + paddingCtrlSmTextBottom, + paddingCtrlLgTextBottom, gapBetweenCtrlNested, - gapTextSmall, - gapTextLarge, + gapBetweenTextSmall, gapBetweenCtrlLgNested, + gapBetweenTextLarge, gapBetweenCtrlSmNested, - gapList, - gapCard, - strokewidthDividerDefault, - strokewidthDividerStrong, - strokewidthCtrlOutlineRest, - strokewidthCtrlOutlineHover, - strokewidthCtrlOutlinePressed, - strokewidthCtrlOutlineSelected, - strokewidthWindowDefault, + 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, - strokeCtrlDividerOnneutralDisabled, - strokeCtrlDividerOnoutlineDisabled, - strokeCtrlDividerOnactivebrand, - strokeCtrlDividerOnactivebrandDisabled, - strokeCtrlOnactivebrandHover, - strokeCtrlOnactivebrandPressed, - strokeCtrlOnactivebrandDisabled, - strokeCtrlOnactivebrandRestStop2, - strokeCtrlOnactivebrandHoverStop2, - strokeCtrlOnactivebrandPressedStop2, - strokeCtrlOnactivebrandDisabledStop2, + 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, @@ -1032,24 +1041,24 @@ export { backgroundLayerPrimaryStop3, backgroundLayerSecondary, backgroundLayerTertiary, - backgroundCardOnprimaryDefaultSelected, - backgroundCtrlActivebrandRest, - backgroundCtrlActivebrandHover, - backgroundCtrlActivebrandPressed, - backgroundCtrlActivebrandDisabled, - backgroundCtrlShapesafeActivebrandRest, - backgroundCtrlShapesafeActivebrandDisabled, - backgroundCtrlShapesafeNeutralRest, - backgroundCtrlShapesafeNeutralHover, - backgroundCtrlShapesafeNeutralPressed, - backgroundCtrlShapesafeNeutralDisabled, + backgroundCardOnPrimaryDefaultSelected, + backgroundCtrlActiveBrandRest, + backgroundCtrlActiveBrandHover, + backgroundCtrlActiveBrandPressed, + backgroundCtrlActiveBrandDisabled, + backgroundCtrlShapeSafeActiveBrandRest, + backgroundCtrlShapeSafeActiveBrandDisabled, + backgroundCtrlShapeSafeNeutralRest, + backgroundCtrlShapeSafeNeutralHover, + backgroundCtrlShapeSafeNeutralPressed, + backgroundCtrlShapeSafeNeutralDisabled, cornerFlyoutHover, cornerFlyoutPressed, cornerLayerIntersection, cornerCardHover, cornerCardPressed, cornerToolbarDefault, - cornerImageOnpage, + cornerImageOnPage, cornerCtrlHover, cornerCtrlPressed, cornerCtrlSmHover, @@ -1063,60 +1072,60 @@ export { 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, + 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, + materialAcrylicDefaultColorBlend, + materialAcrylicDefaultLumBlend, materialMicaDefaultSolid, - materialMicaDefaultColorblend, - materialMicaDefaultLumblend, + materialMicaDefaultColorBlend, + materialMicaDefaultLumBlend, materialMicaDarkerSolid, - materialMicaDarkerColorblend, - materialMicaDarkerLumblend, + materialMicaDarkerColorBlend, + materialMicaDarkerLumBlend, materialMicaThinSolid, - materialMicaThinColorblend, - materialMicaThinLumblend, - iconthemeCtrlDefaultHover, - iconthemeCtrlDefaultPressed, - iconthemeCtrlSubtleRest, - iconthemeCtrlSubtleHover, - iconthemeCtrlSubtlePressed, - iconthemeCtrlSubtleSelected, - iconthemeCtrlChevronDefault, - iconthemeCtrlChevronSelected, + materialMicaThinColorBlend, + materialMicaThinLumBlend, + iconThemeCtrlDefaultHover, + iconThemeCtrlDefaultPressed, + iconThemeCtrlSubtleRest, + iconThemeCtrlSubtleHover, + iconThemeCtrlSubtlePressed, + iconThemeCtrlSubtleSelected, + iconThemeCtrlChevronDefault, + iconThemeCtrlChevronSelected, statusBrandBackground, statusBrandStroke, statusBrandForeground, @@ -1136,125 +1145,127 @@ export { statusNeutralTintForeground, cornerFlyoutShellRest, materialAcrylicShellDefaultSolid, - materialAcrylicShellDefaultColorblend, - materialAcrylicShellDefaultLumblend, - backgroundCardOnsecondaryDefaultSelected, - shadowCtrlOndragKey, - shadowCtrlOndragAmbient, + materialAcrylicShellDefaultColorBlend, + materialAcrylicShellDefaultLumBlend, + backgroundCardOnSecondaryDefaultSelected, + textStyleDefaultDisplayFontFamily, + textStyleDefaultDisplayLetterSpacing, + shadowCtrlOnDragKey, + shadowCtrlOnDragAmbient, shadowWindowInactiveKey, } 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, + 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, + textStyleDefaultRegularLetterSpacing, textStyleDefaultHeaderWeight, sizeCtrlDefault, sizeCtrlIcon, - sizeCtrlIconsecondary, + sizeCtrlIconSecondary, textCtrlWeightSelected, sizeCtrlSmDefault, sizeCtrlSmIcon, sizeCtrlLgDefault, sizeCtrlLgIcon, paddingContentAlignDefault, - paddingContentAlignOutdentIcononsubtle, - paddingContentAlignOutdentTextonsubtle, + paddingContentAlignOutdentIconOnSubtle, paddingContentNone, - paddingContentXxsmall, - paddingContentXsmall, + paddingContentAlignOutdentTextOnSubtle, + paddingContentXxSmall, + paddingContentXSmall, paddingContentSmall, paddingContentMedium, paddingContentLarge, - paddingContentXlarge, - paddingContentXxlarge, - paddingContentXxxlarge, + paddingContentXLarge, + paddingContentXxLarge, + paddingContentXxxLarge, paddingCtrlHorizontalDefault, - paddingCtrlHorizontalIcononly, - paddingCtrlTexttop, - paddingCtrlTextside, - paddingCtrlTonestedcontrol, + paddingCtrlHorizontalIconOnly, + paddingCtrlTextTop, + paddingCtrlTextSide, + paddingCtrlToNestedControl, paddingCtrlSmHorizontalDefault, - paddingCtrlSmHorizontalIcononly, - paddingCtrlSmTexttop, - paddingCtrlSmTonestedcontrol, + paddingCtrlSmHorizontalIconOnly, + paddingCtrlSmTextTop, + paddingCtrlSmToNestedControl, paddingCtrlLgHorizontalDefault, - paddingCtrlLgHorizontalIcononly, - paddingCtrlLgTexttop, - paddingCtrlLgTonestedcontrol, + paddingCtrlLgHorizontalIconOnly, + paddingCtrlLgTextTop, + paddingCtrlLgToNestedControl, gapBetweenContentNone, - gapBetweenContentXxsmall, - gapBetweenContentXsmall, + gapBetweenContentXxSmall, + gapBetweenContentXSmall, gapBetweenContentSmall, gapBetweenCtrlDefault, gapBetweenContentMedium, gapBetweenContentLarge, - gapBetweenContentXlarge, - gapBetweenContentXxlarge, + gapBetweenContentXLarge, + gapBetweenContentXxLarge, gapBetweenCtrlLgDefault, gapBetweenCtrlSmDefault, gapInsideCtrlDefault, gapInsideCtrlSmDefault, - gapInsideCtrlSmTosecondaryicon, + gapInsideCtrlSmToSecondaryIcon, gapInsideCtrlLgDefault, - gapInsideCtrlLgTosecondaryicon, - gapInsideCtrlTosecondaryicon, - gapInsideCtrlTolabel, - gapInsideCtrlSmTolabel, - gapInsideCtrlLgTolabel, + gapInsideCtrlLgToSecondaryIcon, + gapInsideCtrlToSecondaryIcon, + gapInsideCtrlToLabel, + gapInsideCtrlSmToLabel, + gapInsideCtrlLgToLabel, cornerCircular, - strokewidthDefault, + strokeWidthDefault, backgroundSmoke, - strokeCtrlOnoutlineRest, - strokeCtrlOnoutlineHover, - strokeCtrlOnoutlinePressed, - strokeCtrlOnoutlineDisabled, - strokeCtrlDividerOnbrand, - strokeCtrlDividerOnneutral, - strokeCtrlDividerOnoutline, + strokeCtrlOnOutlineRest, + strokeCtrlOnOutlineHover, + strokeCtrlOnOutlinePressed, + strokeCtrlOnOutlineDisabled, + strokeCtrlDividerOnBrand, + strokeCtrlDividerOnNeutral, + strokeCtrlDividerOnOutline, strokeDividerDefault, strokeWindowActive, backgroundWindowPrimarySolid, - backgroundWindowPrimaryColorblend, - backgroundWindowPrimaryLumblend, + backgroundWindowPrimaryColorBlend, + backgroundWindowPrimaryLumBlend, backgroundWindowSecondarySolid, - backgroundWindowSecondaryColorblend, - backgroundWindowSecondaryLumblend, - backgroundWindowTabbandColorblend, - backgroundWindowTabbandLumblend, - backgroundWindowTabbandSolid, - backgroundWebpagePrimary, - backgroundWebpageSecondary, + backgroundWindowSecondaryColorBlend, + backgroundWindowSecondaryLumBlend, + backgroundWindowTabBandColorBlend, + backgroundWindowTabBandLumBlend, + backgroundWindowTabBandSolid, + backgroundWebPagePrimary, + backgroundWebPageSecondary, backgroundLayerPrimarySolid, - backgroundCardOnprimaryDefaultRest, - backgroundCardOnprimaryAltRest, - backgroundCardOnprimaryAltHover, - backgroundCardOnprimaryAltPressed, - backgroundCardOnprimaryAltDisabled, - backgroundCardOnprimaryDefaultHover, - backgroundCardOnprimaryDefaultPressed, - backgroundCardOnprimaryDefaultDisabled, + backgroundCardOnPrimaryDefaultRest, + backgroundCardOnPrimaryAltRest, + backgroundCardOnPrimaryAltHover, + backgroundCardOnPrimaryAltPressed, + backgroundCardOnPrimaryAltDisabled, + backgroundCardOnPrimaryDefaultHover, + backgroundCardOnPrimaryDefaultPressed, + backgroundCardOnPrimaryDefaultDisabled, backgroundFlyoutSolid, backgroundCtrlBrandRest, backgroundCtrlBrandHover, @@ -1266,8 +1277,8 @@ export { backgroundCtrlNeutralDisabled, backgroundCtrlSubtleHover, backgroundCtrlSubtlePressed, - backgroundFlyoutLumblend, - backgroundFlyoutColorblend, + backgroundFlyoutLumBlend, + backgroundFlyoutColorBlend, cornerZero, cornerBezel, cornerWindowDefault, @@ -1277,7 +1288,7 @@ export { cornerCtrlRest, cornerCtrlSmRest, cornerCtrlLgRest, - cornerImageIncard, + cornerImageInCard, foregroundCtrlNeutralPrimaryRest, foregroundCtrlNeutralPrimaryDisabled, foregroundCtrlNeutralSecondaryRest, @@ -1286,12 +1297,12 @@ export { foregroundCtrlBrandHover, foregroundCtrlBrandPressed, foregroundCtrlBrandDisabled, - foregroundCtrlOnbrandRest, - foregroundCtrlOnbrandDisabled, + foregroundCtrlOnBrandRest, + foregroundCtrlOnBrandDisabled, materialAcrylicBlur, materialMicaBlur, - iconthemeCtrlDefaultRest, - iconthemeCtrlDefaultSelected, + iconThemeCtrlDefaultRest, + iconThemeCtrlDefaultSelected, statusBrandTintBackground, statusBrandTintStroke, statusDangerBackground, @@ -1327,18 +1338,19 @@ export { statusNeutralBackground, statusNeutralTintBackground, statusNeutralTintStroke, - backgroundCardOnsecondaryDefaultRest, - backgroundCardOnsecondaryAltRest, - backgroundCardOnsecondaryAltHover, - backgroundCardOnsecondaryAltPressed, - backgroundCardOnsecondaryAltDisabled, - backgroundCardOnsecondaryDefaultHover, - backgroundCardOnsecondaryDefaultPressed, - backgroundCardOnsecondaryDefaultDisabled, - backgroundCardOnflyoutDefaultRest, - backgroundCardOnflyoutDefaultHover, - backgroundCardOnflyoutDefaultPressed, - backgroundCardOnflyoutDefaultDisabled, + backgroundCardOnSecondaryDefaultRest, + backgroundCardOnSecondaryAltRest, + backgroundCardOnSecondaryAltHover, + backgroundCardOnSecondaryAltPressed, + backgroundCardOnSecondaryAltDisabled, + backgroundCardOnSecondaryDefaultHover, + backgroundCardOnSecondaryDefaultPressed, + backgroundCardOnSecondaryDefaultDisabled, + backgroundCardOnFlyoutDefaultRest, + backgroundCardOnFlyoutDefaultHover, + backgroundCardOnFlyoutDefaultPressed, + backgroundCardOnFlyoutDefaultDisabled, + textStyleDefaultDisplayWeight, shadowFlyoutKey, shadowFlyoutAmbient, shadowToolbarKey, @@ -1352,42 +1364,42 @@ export { textStyleAiHeaderCase, textStyleArticleHeaderCase, textStyleCodeHeaderCase, - textStyleDatavizHeaderCase, + textStyleDataVizHeaderCase, textStyleQuoteHeaderCase, strokeLayer, strokeImage, strokeFlyout, - strokeCtrlOnbrandRest, - strokeCtrlOnbrandHover, - strokeCtrlOnbrandPressed, - strokeCtrlOnbrandDisabled, - strokeCtrlOnneutralRest, - strokeCtrlOnneutralHover, - strokeCtrlOnneutralPressed, - strokeCtrlOnneutralDisabled, - strokeCtrlOnsubtleRest, - strokeCtrlOnsubtleHover, - strokeCtrlOnsubtlePressed, - strokeCtrlOnsubtleDisabled, - strokeCtrlOnsubtleHoversplit, - strokeCtrlDividerOnsubtle, - strokeCtrlDividerOnsubtleDisabled, + strokeCtrlOnBrandRest, + strokeCtrlOnBrandHover, + strokeCtrlOnBrandPressed, + strokeCtrlOnBrandDisabled, + strokeCtrlOnNeutralRest, + strokeCtrlOnNeutralHover, + strokeCtrlOnNeutralPressed, + strokeCtrlOnNeutralDisabled, + strokeCtrlOnSubtleRest, + strokeCtrlOnSubtleHover, + strokeCtrlOnSubtlePressed, + strokeCtrlOnSubtleDisabled, + strokeCtrlOnSubtleHoverSplit, + strokeCtrlDividerOnSubtle, + strokeCtrlDividerOnSubtleDisabled, strokeCardSelected, - strokeCardOnprimaryRest, - strokeCardOnprimaryHover, - strokeCardOnprimaryPressed, - strokeCardOnprimaryDisabled, - strokeCardOnsecondaryRest, - strokeCardOnsecondaryHover, - strokeCardOnsecondaryPressed, - strokeCardOnsecondaryDisabled, + strokeCardOnPrimaryRest, + strokeCardOnPrimaryHover, + strokeCardOnPrimaryPressed, + strokeCardOnPrimaryDisabled, + strokeCardOnSecondaryRest, + strokeCardOnSecondaryHover, + strokeCardOnSecondaryPressed, + strokeCardOnSecondaryDisabled, backgroundCtrlOutlineRest, backgroundCtrlOutlineHover, backgroundCtrlOutlinePressed, backgroundCtrlOutlineDisabled, backgroundCtrlSubtleRest, backgroundCtrlSubtleDisabled, - backgroundCtrlSubtleHoversplit, + backgroundCtrlSubtleHoverSplit, foregroundCtrlHintDefault, shadowCardRestKey, shadowCardHoverKey, @@ -1403,18 +1415,18 @@ export { ctrlAvatarBackground, ctrlAvatarForeground, ctrlAvatarIconSize, - ctrlAvatarPresencebadgeSize, - ctrlAvatarActiveringSize, - ctrlAvatarPresencebadgePaddingBottomrightoffset, + ctrlAvatarPresenceBadgeSize, + ctrlAvatarActiveRingSize, + ctrlAvatarPresenceBadgePaddingBottomRightOffset, ctrlAvatarCornerGroup, - ctrlAvatarActiveringStrokewidth, - ctrlAvatarPresencebadgeStrokewidth, - ctrlAvatarTextFontsize, - ctrlAvatarTextLineheight, - ctrlAvatarTextPaddingTopoffset, - ctrlAvatarActiveringStroke, - ctrlAvatarShowcutout, - ctrlAvatarPresencebadgeBackgroundBehindbadge, + ctrlAvatarActiveRingStrokeWidth, + ctrlAvatarPresenceBadgeStrokeWidth, + ctrlAvatarTextFontSize, + ctrlAvatarTextLineHeight, + ctrlAvatarTextPaddingTopOffset, + ctrlAvatarActiveRingStroke, + ctrlAvatarShowCutout, + ctrlAvatarPresenceBadgeBackgroundBehindBadge, } from './components/avatar/tokens'; export { ctrlBadgeTextPaddingTop, @@ -1455,24 +1467,24 @@ export { ctrlChoiceCheckboxIconSize, ctrlChoiceCheckboxCorner, ctrlChoiceCheckboxIndeterminateCorner, - ctrlChoiceCheckboxIndeterminateHeight, ctrlChoiceCheckboxIndeterminateWidth, + ctrlChoiceCheckboxIndeterminateHeight, ctrlChoiceRadioCorner, ctrlChoiceSwitchCorner, - ctrlChoiceRadioDotSizeRest, - ctrlChoiceRadioDotSizeHover, - ctrlChoiceRadioDotSizePressed, + ctrlChoiceSwitchHeight, + ctrlChoiceSwitchWidth, ctrlChoiceSwitchPaddingRest, ctrlChoiceSwitchPaddingHover, ctrlChoiceSwitchPaddingPressed, - ctrlChoiceSwitchHeight, - ctrlChoiceSwitchWidth, ctrlChoiceSwitchThumbWidthRest, ctrlChoiceSwitchThumbWidthHover, ctrlChoiceSwitchThumbWidthPressed, + ctrlChoiceRadioDotSizeRest, + ctrlChoiceRadioDotSizeHover, + ctrlChoiceRadioDotSizePressed, ctrlChoiceSmBaseSize, - ctrlChoiceSmCheckboxCorner, ctrlChoiceSmCheckboxIconSize, + ctrlChoiceSmCheckboxCorner, ctrlChoiceSmRadioDotSize, ctrlChoiceSmSwitchWidth, ctrlChoiceSmSwitchHeight, @@ -1502,13 +1514,15 @@ export { ctrlDialogBaseShadowKey, ctrlDialogBaseShadowAmbient, } from './components/dialog/tokens'; -export { ctrlDividerFixedlineLength } from './components/divider/tokens'; +export { ctrlDividerFixedLineLength } from './components/divider/tokens'; export { ctrlDragBackgroundSolid, - ctrlDragBackgroundColorblend, - ctrlDragBackgroundLumblend, + ctrlDragBackgroundColorBlend, + ctrlDragBackgroundLumBlend, } from './components/drag/tokens'; export { + ctrlFabForegroundRestNew, + ctrlFabForegroundDisabledNew, ctrlFabBackgroundRest, ctrlFabBackgroundHover, ctrlFabBackgroundPressed, @@ -1523,9 +1537,9 @@ export { ctrlFabShadowDisabledKey, } from './components/fab/tokens'; export { - ctrlFocusInnerStrokewidth, + ctrlFocusInnerStrokeWidth, ctrlFocusInnerStroke, - ctrlFocusOuterStrokewidth, + ctrlFocusOuterStrokeWidth, ctrlFocusOuterStroke, } from './components/focus/tokens'; export { @@ -1536,22 +1550,22 @@ export { ctrlInputBackgroundSelected, ctrlInputBackgroundError, ctrlInputStrokeRest, - ctrlInputBottomlineStrokewidthRest, - ctrlInputStrokewidthRest, - ctrlInputTextselectionBackground, - ctrlInputTextselectionForeground, - ctrlInputStrokewidthHover, - ctrlInputStrokewidthPressed, - ctrlInputStrokewidthSelected, - ctrlInputBottomlineStrokewidthHover, - ctrlInputBottomlineStrokewidthPressed, - ctrlInputBottomlineStrokewidthSelected, - ctrlInputBottomlineStrokeRest, - ctrlInputBottomlineStrokeHover, - ctrlInputBottomlineStrokePressed, - ctrlInputBottomlineStrokeDisabled, - ctrlInputBottomlineStrokeSelected, - ctrlInputBottomlineStrokeError, + ctrlInputStrokeWidthRest, + ctrlInputStrokeWidthHover, + ctrlInputStrokeWidthPressed, + ctrlInputStrokeWidthSelected, + ctrlInputBottomLineStrokeWidthRest, + ctrlInputTextSelectionBackground, + ctrlInputTextSelectionForeground, + ctrlInputBottomLineStrokeWidthHover, + ctrlInputBottomLineStrokeWidthPressed, + ctrlInputBottomLineStrokeWidthSelected, + ctrlInputBottomLineStrokeRest, + ctrlInputBottomLineStrokeHover, + ctrlInputBottomLineStrokePressed, + ctrlInputBottomLineStrokeDisabled, + ctrlInputBottomLineStrokeSelected, + ctrlInputBottomLineStrokeError, ctrlInputStrokeHover, ctrlInputStrokePressed, ctrlInputStrokeDisabled, @@ -1560,23 +1574,23 @@ export { } from './components/input/tokens'; export { ctrlLinkForegroundNeutralRest, - ctrlLinkInlineStrokewidthRest, - ctrlLinkInlineStrokewidthHover, + ctrlLinkInlineStrokeWidthRest, + ctrlLinkInlineStrokeWidthHover, ctrlLinkInlineUnderlineDashed, ctrlLinkForegroundNeutralHover, ctrlLinkForegroundNeutralPressed, ctrlLinkForegroundBrandRest, ctrlLinkForegroundBrandHover, ctrlLinkForegroundBrandPressed, - ctrlLinkOnpageStrokewidthRest, - ctrlLinkOnpageStrokewidthHover, - ctrlLinkOnpageUnderlineDashed, - ctrlLinkInlineShowunderlineatrest, - ctrlLinkOnpageShowunderlineatrest, + ctrlLinkOnPageStrokeWidthRest, + ctrlLinkOnPageStrokeWidthHover, + ctrlLinkOnPageUnderlineDashed, + ctrlLinkInlineShowUnderlineAtRest, + ctrlLinkOnPageShowUnderlineAtRest, } from './components/link/tokens'; export { ctrlListPillWidth, - ctrlListPillFullwidth, + ctrlListPillFullWidth, ctrlListPillStretchPaddingDefault, ctrlListPillStretchPaddingHint, ctrlListPillLengthRest, @@ -1590,6 +1604,10 @@ export { ctrlListIndentLevel2, ctrlListIndentLevel3, ctrlListBackgroundSelectedRest, + ctrlListForegroundSelectedRest, + ctrlListForegroundSelectedHover, + ctrlListForegroundSelectedPressed, + ctrlListForegroundSelectedDisabled, ctrlListBackgroundSelectedHover, ctrlListBackgroundSelectedPressed, ctrlListBackgroundSelectedDisabled, @@ -1621,15 +1639,15 @@ export { ctrlListLgIndentLevel1, ctrlListLgIndentLevel2, ctrlListLgIndentLevel3, - ctrlListSplitDividerShowdivider, + ctrlListSplitDividerShowDivider, ctrlListShadowSelectedKey, ctrlListShadowSelectedAmbient, } from './components/list/tokens'; export { - ctrlLitefilterBackgroundSelected, - ctrlLitefilterStrokeSelected, - ctrlLitefilterForegroundSelected, - ctrlLitefilterStrokewidthSelected, + ctrlLiteFilterBackgroundSelected, + ctrlLiteFilterStrokeSelected, + ctrlLiteFilterForegroundSelected, + ctrlLiteFilterStrokeWidthSelected, } from './components/liteFilter/tokens'; export { ctrlProgressBackgroundEmpty, @@ -1706,14 +1724,14 @@ export { ctrlSliderThumbBackgroundHover, ctrlSliderThumbBackgroundPressed, ctrlSliderThumbBackgroundDisabled, - ctrlSliderThumbInnerStrokewidthRest, - ctrlSliderThumbInnerStrokewidthHover, - ctrlSliderThumbInnerStrokewidthPressed, + ctrlSliderThumbInnerStrokeWidthRest, + ctrlSliderThumbInnerStrokeWidthHover, + ctrlSliderThumbInnerStrokeWidthPressed, ctrlSliderThumbInnerStrokeRest, ctrlSliderThumbInnerStrokeHover, ctrlSliderThumbInnerStrokePressed, ctrlSliderThumbInnerStrokeDisabled, - ctrlSliderThumbOuterStrokewidth, + ctrlSliderThumbOuterStrokeWidth, ctrlSliderThumbOuterStrokeRest, ctrlSliderThumbOuterStrokeHover, ctrlSliderThumbOuterStrokePressed, @@ -1728,11 +1746,11 @@ export { ctrlSliderLgThumbSizePressed, } from './components/slider/tokens'; export { - ctrlSplitDividerStrokewidth, - ctrlSplitDividerStrokewidthOnoutline, - ctrlSplitDividerStrokewidthOnsubtle, + ctrlSplitDividerStrokeWidth, + ctrlSplitDividerStrokeWidthOnOutline, + ctrlSplitDividerStrokeWidthOnSubtle, } from './components/split/tokens'; -export { ctrlSpinnerStrokewidth, ctrlSpinnerShowemptytrack } from './components/spinner/tokens'; +export { ctrlSpinnerStrokeWidth, ctrlSpinnerShowEmptyTrack } from './components/spinner/tokens'; export { ctrlTooltipCorner, ctrlTooltipBackground, @@ -1740,7 +1758,7 @@ export { ctrlTooltipShadowKey, ctrlTooltipShadowAmbient, } from './components/tooltip/tokens'; -export { ctrlBooleanSelectionhint } from './components/boolean/tokens'; +export { ctrlBooleanSelectionHint } from './components/boolean/tokens'; export { ctrlComposerInputBottomStrokeWidthSelectedRest, ctrlComposerInputBottomStrokeWidthRest, @@ -1755,23 +1773,23 @@ export { ctrlComposerInputBackgroundSelectedRest, ctrlComposerInputBackgroundHover, ctrlComposerInputStrokeRest, - ctrlComposerInputStrokeHoverUsesgradient, - ctrlComposerInputStrokePressedUsesgradient, - ctrlComposerInputStrokeDisabledUsesgradient, - ctrlComposerInputStrokeSelectedRestUsesgradient, + ctrlComposerInputStrokeHoverUsesGradient, + ctrlComposerInputStrokePressedUsesGradient, + ctrlComposerInputStrokeDisabledUsesGradient, + ctrlComposerInputStrokeSelectedRestUsesGradient, ctrlComposerInputStrokeWidthRest, ctrlComposerInputStrokeWidthHover, ctrlComposerInputStrokeWidthPressed, ctrlComposerInputStrokeWidthSelectedRest, - ctrlComposerInputBottomstrokeRest, - ctrlComposerInputBottomstrokeHover, - ctrlComposerInputBottomstrokePressed, - ctrlComposerInputBottomstrokeDisabled, - ctrlComposerInputBottomstrokeSelectedRest, + ctrlComposerInputBottomStrokeRest, + ctrlComposerInputBottomStrokeHover, + ctrlComposerInputBottomStrokePressed, + ctrlComposerInputBottomStrokeDisabled, + ctrlComposerInputBottomStrokeSelectedRest, ctrlComposerContainerCorner, ctrlComposerContainerBackgroundDefault, - ctrlComposerContainerBackgroundAcryliccolorblend, - ctrlComposerContainerBackgroundAcryliclumblend, + ctrlComposerContainerBackgroundAcrylicColorBlend, + ctrlComposerContainerBackgroundAcrylicLumBlend, ctrlComposerContainerStrokeDefault, ctrlComposerInputShadow, ctrlComposerContainerShadowKey, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index d3d7a5ede6886..15c6fe0d50c66 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -5,57 +5,57 @@ */ export const colorStrokeFocus2 = 'var(--colorStrokeFocus2)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLink | `colorBrandForegroundLink`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkHover | `colorBrandForegroundLinkHover`} design token. * @public */ -export const colorBrandForegroundLink = 'var(--colorBrandForegroundLink)'; +export const colorBrandForegroundLinkHover = 'var(--colorBrandForegroundLinkHover)'; /** - * CSS custom property value for the {@link @fluentui/tokens#fontFamilyBase | `fontFamilyBase`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkPressed | `colorBrandForegroundLinkPressed`} design token. * @public */ -export const fontFamilyBase = 'var(--fontFamilyBase)'; +export const colorBrandForegroundLinkPressed = 'var(--colorBrandForegroundLinkPressed)'; /** - * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase300 | `fontSizeBase300`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLink | `colorBrandForegroundLink`} design token. * @public */ -export const fontSizeBase300 = 'var(--fontSizeBase300)'; +export const colorBrandForegroundLink = 'var(--colorBrandForegroundLink)'; /** - * CSS custom property value for the {@link @fluentui/tokens#fontWeightRegular | `fontWeightRegular`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Hover | `colorNeutralForeground2Hover`} design token. * @public */ -export const fontWeightRegular = 'var(--fontWeightRegular)'; +export const colorNeutralForeground2Hover = 'var(--colorNeutralForeground2Hover)'; /** - * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThin | `strokeWidthThin`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Pressed | `colorNeutralForeground2Pressed`} design token. * @public */ -export const strokeWidthThin = 'var(--strokeWidthThin)'; +export const colorNeutralForeground2Pressed = 'var(--colorNeutralForeground2Pressed)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkHover | `colorBrandForegroundLinkHover`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2 | `colorNeutralForeground2`} design token. * @public */ -export const colorBrandForegroundLinkHover = 'var(--colorBrandForegroundLinkHover)'; +export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkPressed | `colorBrandForegroundLinkPressed`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token. * @public */ -export const colorBrandForegroundLinkPressed = 'var(--colorBrandForegroundLinkPressed)'; +export const colorNeutralForegroundDisabled = 'var(--colorNeutralForegroundDisabled)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2 | `colorNeutralForeground2`} design token. + * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThin | `strokeWidthThin`} design token. * @public */ -export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)'; +export const strokeWidthThin = 'var(--strokeWidthThin)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Pressed | `colorNeutralForeground2Pressed`} design token. + * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase300 | `fontSizeBase300`} design token. * @public */ -export const colorNeutralForeground2Pressed = 'var(--colorNeutralForeground2Pressed)'; +export const fontSizeBase300 = 'var(--fontSizeBase300)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Hover | `colorNeutralForeground2Hover`} design token. + * CSS custom property value for the {@link @fluentui/tokens#fontFamilyBase | `fontFamilyBase`} design token. * @public */ -export const colorNeutralForeground2Hover = 'var(--colorNeutralForeground2Hover)'; +export const fontFamilyBase = 'var(--fontFamilyBase)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token. + * CSS custom property value for the {@link @fluentui/tokens#fontWeightRegular | `fontWeightRegular`} design token. * @public */ -export const colorNeutralForegroundDisabled = 'var(--colorNeutralForegroundDisabled)'; +export const fontWeightRegular = 'var(--fontWeightRegular)'; diff --git a/packages/semantic-tokens/src/nullable/tokens.ts b/packages/semantic-tokens/src/nullable/tokens.ts index b7846c3dfe163..3f1bb77fa996d 100644 --- a/packages/semantic-tokens/src/nullable/tokens.ts +++ b/packages/semantic-tokens/src/nullable/tokens.ts @@ -4,42 +4,42 @@ import { textStyleAiHeaderCaseRaw, textStyleArticleHeaderCaseRaw, textStyleCodeHeaderCaseRaw, - textStyleDatavizHeaderCaseRaw, + textStyleDataVizHeaderCaseRaw, textStyleQuoteHeaderCaseRaw, strokeLayerRaw, strokeImageRaw, strokeFlyoutRaw, - strokeCtrlOnbrandRestRaw, - strokeCtrlOnbrandHoverRaw, - strokeCtrlOnbrandPressedRaw, - strokeCtrlOnbrandDisabledRaw, - strokeCtrlOnneutralRestRaw, - strokeCtrlOnneutralHoverRaw, - strokeCtrlOnneutralPressedRaw, - strokeCtrlOnneutralDisabledRaw, - strokeCtrlOnsubtleRestRaw, - strokeCtrlOnsubtleHoverRaw, - strokeCtrlOnsubtlePressedRaw, - strokeCtrlOnsubtleDisabledRaw, - strokeCtrlOnsubtleHoversplitRaw, - strokeCtrlDividerOnsubtleRaw, - strokeCtrlDividerOnsubtleDisabledRaw, + strokeCtrlOnBrandRestRaw, + strokeCtrlOnBrandHoverRaw, + strokeCtrlOnBrandPressedRaw, + strokeCtrlOnBrandDisabledRaw, + strokeCtrlOnNeutralRestRaw, + strokeCtrlOnNeutralHoverRaw, + strokeCtrlOnNeutralPressedRaw, + strokeCtrlOnNeutralDisabledRaw, + strokeCtrlOnSubtleRestRaw, + strokeCtrlOnSubtleHoverRaw, + strokeCtrlOnSubtlePressedRaw, + strokeCtrlOnSubtleDisabledRaw, + strokeCtrlOnSubtleHoverSplitRaw, + strokeCtrlDividerOnSubtleRaw, + strokeCtrlDividerOnSubtleDisabledRaw, strokeCardSelectedRaw, - strokeCardOnprimaryRestRaw, - strokeCardOnprimaryHoverRaw, - strokeCardOnprimaryPressedRaw, - strokeCardOnprimaryDisabledRaw, - strokeCardOnsecondaryRestRaw, - strokeCardOnsecondaryHoverRaw, - strokeCardOnsecondaryPressedRaw, - strokeCardOnsecondaryDisabledRaw, + strokeCardOnPrimaryRestRaw, + strokeCardOnPrimaryHoverRaw, + strokeCardOnPrimaryPressedRaw, + strokeCardOnPrimaryDisabledRaw, + strokeCardOnSecondaryRestRaw, + strokeCardOnSecondaryHoverRaw, + strokeCardOnSecondaryPressedRaw, + strokeCardOnSecondaryDisabledRaw, backgroundCtrlOutlineRestRaw, backgroundCtrlOutlineHoverRaw, backgroundCtrlOutlinePressedRaw, backgroundCtrlOutlineDisabledRaw, backgroundCtrlSubtleRestRaw, backgroundCtrlSubtleDisabledRaw, - backgroundCtrlSubtleHoversplitRaw, + backgroundCtrlSubtleHoverSplitRaw, foregroundCtrlHintDefaultRaw, shadowCardRestKeyRaw, shadowCardHoverKeyRaw, @@ -54,42 +54,42 @@ export const textStyleDefaultHeaderCase = `var(${textStyleDefaultHeaderCaseRaw}, 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 textStyleDataVizHeaderCase = `var(${textStyleDataVizHeaderCaseRaw}, unset)`; export const textStyleQuoteHeaderCase = `var(${textStyleQuoteHeaderCaseRaw}, unset)`; export const strokeLayer = `var(${strokeLayerRaw}, unset)`; export const strokeImage = `var(${strokeImageRaw}, unset)`; export const strokeFlyout = `var(${strokeFlyoutRaw}, unset)`; -export const strokeCtrlOnbrandRest = `var(${strokeCtrlOnbrandRestRaw}, unset)`; -export const strokeCtrlOnbrandHover = `var(${strokeCtrlOnbrandHoverRaw}, unset)`; -export const strokeCtrlOnbrandPressed = `var(${strokeCtrlOnbrandPressedRaw}, unset)`; -export const strokeCtrlOnbrandDisabled = `var(${strokeCtrlOnbrandDisabledRaw}, unset)`; -export const strokeCtrlOnneutralRest = `var(${strokeCtrlOnneutralRestRaw}, unset)`; -export const strokeCtrlOnneutralHover = `var(${strokeCtrlOnneutralHoverRaw}, unset)`; -export const strokeCtrlOnneutralPressed = `var(${strokeCtrlOnneutralPressedRaw}, unset)`; -export const strokeCtrlOnneutralDisabled = `var(${strokeCtrlOnneutralDisabledRaw}, unset)`; -export const strokeCtrlOnsubtleRest = `var(${strokeCtrlOnsubtleRestRaw}, unset)`; -export const strokeCtrlOnsubtleHover = `var(${strokeCtrlOnsubtleHoverRaw}, unset)`; -export const strokeCtrlOnsubtlePressed = `var(${strokeCtrlOnsubtlePressedRaw}, unset)`; -export const strokeCtrlOnsubtleDisabled = `var(${strokeCtrlOnsubtleDisabledRaw}, unset)`; -export const strokeCtrlOnsubtleHoversplit = `var(${strokeCtrlOnsubtleHoversplitRaw}, unset)`; -export const strokeCtrlDividerOnsubtle = `var(${strokeCtrlDividerOnsubtleRaw}, unset)`; -export const strokeCtrlDividerOnsubtleDisabled = `var(${strokeCtrlDividerOnsubtleDisabledRaw}, unset)`; +export const strokeCtrlOnBrandRest = `var(${strokeCtrlOnBrandRestRaw}, unset)`; +export const strokeCtrlOnBrandHover = `var(${strokeCtrlOnBrandHoverRaw}, unset)`; +export const strokeCtrlOnBrandPressed = `var(${strokeCtrlOnBrandPressedRaw}, unset)`; +export const strokeCtrlOnBrandDisabled = `var(${strokeCtrlOnBrandDisabledRaw}, unset)`; +export const strokeCtrlOnNeutralRest = `var(${strokeCtrlOnNeutralRestRaw}, unset)`; +export const strokeCtrlOnNeutralHover = `var(${strokeCtrlOnNeutralHoverRaw}, unset)`; +export const strokeCtrlOnNeutralPressed = `var(${strokeCtrlOnNeutralPressedRaw}, unset)`; +export const strokeCtrlOnNeutralDisabled = `var(${strokeCtrlOnNeutralDisabledRaw}, unset)`; +export const strokeCtrlOnSubtleRest = `var(${strokeCtrlOnSubtleRestRaw}, unset)`; +export const strokeCtrlOnSubtleHover = `var(${strokeCtrlOnSubtleHoverRaw}, unset)`; +export const strokeCtrlOnSubtlePressed = `var(${strokeCtrlOnSubtlePressedRaw}, unset)`; +export const strokeCtrlOnSubtleDisabled = `var(${strokeCtrlOnSubtleDisabledRaw}, unset)`; +export const strokeCtrlOnSubtleHoverSplit = `var(${strokeCtrlOnSubtleHoverSplitRaw}, unset)`; +export const strokeCtrlDividerOnSubtle = `var(${strokeCtrlDividerOnSubtleRaw}, unset)`; +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 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}, unset)`; export const backgroundCtrlOutlineHover = `var(${backgroundCtrlOutlineHoverRaw}, unset)`; export const backgroundCtrlOutlinePressed = `var(${backgroundCtrlOutlinePressedRaw}, unset)`; export const backgroundCtrlOutlineDisabled = `var(${backgroundCtrlOutlineDisabledRaw}, unset)`; export const backgroundCtrlSubtleRest = `var(${backgroundCtrlSubtleRestRaw}, unset)`; export const backgroundCtrlSubtleDisabled = `var(${backgroundCtrlSubtleDisabledRaw}, unset)`; -export const backgroundCtrlSubtleHoversplit = `var(${backgroundCtrlSubtleHoversplitRaw}, unset)`; +export const backgroundCtrlSubtleHoverSplit = `var(${backgroundCtrlSubtleHoverSplitRaw}, unset)`; export const foregroundCtrlHintDefault = `var(${foregroundCtrlHintDefaultRaw}, unset)`; export const shadowCardRestKey = `var(${shadowCardRestKeyRaw}, unset)`; export const shadowCardHoverKey = `var(${shadowCardHoverKeyRaw}, unset)`; diff --git a/packages/semantic-tokens/src/nullable/variables.ts b/packages/semantic-tokens/src/nullable/variables.ts index 21b2da722d93f..9b2c3bf872bfa 100644 --- a/packages/semantic-tokens/src/nullable/variables.ts +++ b/packages/semantic-tokens/src/nullable/variables.ts @@ -3,42 +3,42 @@ export const textStyleDefaultHeaderCaseRaw = '--smtc-text-style-default-header-c 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-dataviz-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-onbrand-rest'; -export const strokeCtrlOnbrandHoverRaw = '--smtc-stroke-ctrl-onbrand-hover'; -export const strokeCtrlOnbrandPressedRaw = '--smtc-stroke-ctrl-onbrand-pressed'; -export const strokeCtrlOnbrandDisabledRaw = '--smtc-stroke-ctrl-onbrand-disabled'; -export const strokeCtrlOnneutralRestRaw = '--smtc-stroke-ctrl-onneutral-rest'; -export const strokeCtrlOnneutralHoverRaw = '--smtc-stroke-ctrl-onneutral-hover'; -export const strokeCtrlOnneutralPressedRaw = '--smtc-stroke-ctrl-onneutral-pressed'; -export const strokeCtrlOnneutralDisabledRaw = '--smtc-stroke-ctrl-onneutral-disabled'; -export const strokeCtrlOnsubtleRestRaw = '--smtc-stroke-ctrl-onsubtle-rest'; -export const strokeCtrlOnsubtleHoverRaw = '--smtc-stroke-ctrl-onsubtle-hover'; -export const strokeCtrlOnsubtlePressedRaw = '--smtc-stroke-ctrl-onsubtle-pressed'; -export const strokeCtrlOnsubtleDisabledRaw = '--smtc-stroke-ctrl-onsubtle-disabled'; -export const strokeCtrlOnsubtleHoversplitRaw = '--smtc-stroke-ctrl-onsubtle-hoversplit'; -export const strokeCtrlDividerOnsubtleRaw = '--smtc-stroke-ctrl-divider-onsubtle'; -export const strokeCtrlDividerOnsubtleDisabledRaw = '--smtc-stroke-ctrl-divider-onsubtle-disabled'; +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-onprimary-rest'; -export const strokeCardOnprimaryHoverRaw = '--smtc-stroke-card-onprimary-hover'; -export const strokeCardOnprimaryPressedRaw = '--smtc-stroke-card-onprimary-pressed'; -export const strokeCardOnprimaryDisabledRaw = '--smtc-stroke-card-onprimary-disabled'; -export const strokeCardOnsecondaryRestRaw = '--smtc-stroke-card-onsecondary-rest'; -export const strokeCardOnsecondaryHoverRaw = '--smtc-stroke-card-onsecondary-hover'; -export const strokeCardOnsecondaryPressedRaw = '--smtc-stroke-card-onsecondary-pressed'; -export const strokeCardOnsecondaryDisabledRaw = '--smtc-stroke-card-onsecondary-disabled'; +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-hoversplit'; +export const backgroundCtrlSubtleHoverSplitRaw = '--smtc-background-ctrl-subtle-hover-split'; export const foregroundCtrlHintDefaultRaw = '--smtc-foreground-ctrl-hint-default'; export const shadowCardRestKeyRaw = '--smtc-shadow-card-rest-key'; export const shadowCardHoverKeyRaw = '--smtc-shadow-card-hover-key'; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index 4b38ddc8237fe..eeab3454710d6 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -1,50 +1,50 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE import { - textStyleDefaultRegularFontfamilyRaw, - textStyleDefaultRegularLetterspacingRaw, + textStyleDefaultRegularFontFamilyRaw, + textStyleDefaultRegularLetterSpacingRaw, textStyleDefaultRegularWeightRaw, textStyleDefaultHeaderWeightRaw, - textGlobalTitle2FontsizeRaw, - textGlobalTitle2LineheightRaw, - textGlobalSubtitle1FontsizeRaw, - textGlobalSubtitle1LineheightRaw, - textGlobalSubtitle2FontsizeRaw, - textGlobalSubtitle2LineheightRaw, - textGlobalBody2FontsizeRaw, - textGlobalBody2LineheightRaw, - textGlobalBody3FontsizeRaw, - textGlobalBody3LineheightRaw, - textGlobalCaption1FontsizeRaw, - textGlobalCaption1LineheightRaw, - textGlobalCaption2FontsizeRaw, - textGlobalCaption2LineheightRaw, - textGlobalBody1FontsizeRaw, - textGlobalBody1LineheightRaw, - textGlobalTitle1FontsizeRaw, - textGlobalTitle1LineheightRaw, + textGlobalTitle2FontSizeRaw, + textGlobalTitle2LineHeightRaw, + textGlobalSubtitle1FontSizeRaw, + textGlobalSubtitle1LineHeightRaw, + textGlobalSubtitle2FontSizeRaw, + textGlobalSubtitle2LineHeightRaw, + textGlobalBody2FontSizeRaw, + textGlobalBody2LineHeightRaw, + textGlobalBody3FontSizeRaw, + textGlobalBody3LineHeightRaw, + textGlobalCaption1FontSizeRaw, + textGlobalCaption1LineHeightRaw, + textGlobalCaption2FontSizeRaw, + textGlobalCaption2LineHeightRaw, + textGlobalBody1FontSizeRaw, + textGlobalBody1LineHeightRaw, + textGlobalTitle1FontSizeRaw, + textGlobalTitle1LineHeightRaw, textCtrlWeightSelectedRaw, - paddingContentXsmallRaw, - paddingContentXxsmallRaw, - paddingContentAlignOutdentTextonsubtleRaw, + paddingContentXSmallRaw, + paddingContentXxSmallRaw, + paddingContentAlignOutdentTextOnSubtleRaw, paddingContentAlignDefaultRaw, - paddingCtrlTexttopRaw, - paddingCtrlSmTexttopRaw, - paddingCtrlLgTexttopRaw, - paddingCtrlTonestedcontrolRaw, - gapBetweenContentXxsmallRaw, - gapBetweenContentXsmallRaw, - paddingCtrlLgTonestedcontrolRaw, - paddingCtrlSmTonestedcontrolRaw, + paddingCtrlTextTopRaw, + paddingCtrlSmTextTopRaw, + paddingCtrlLgTextTopRaw, + paddingCtrlToNestedControlRaw, + gapBetweenContentXxSmallRaw, + paddingCtrlLgToNestedControlRaw, + gapBetweenContentXSmallRaw, + paddingCtrlSmToNestedControlRaw, gapBetweenContentMediumRaw, - strokewidthDefaultRaw, - backgroundCardOnprimaryDefaultRestRaw, - strokeCtrlOnoutlineRestRaw, - strokeCtrlOnoutlineHoverRaw, - strokeCtrlOnoutlinePressedRaw, - strokeCtrlOnoutlineDisabledRaw, - strokeCtrlDividerOnbrandRaw, - strokeCtrlDividerOnneutralRaw, - strokeCtrlDividerOnoutlineRaw, + strokeWidthDefaultRaw, + backgroundCardOnPrimaryDefaultRestRaw, + strokeCtrlOnOutlineRestRaw, + strokeCtrlOnOutlineHoverRaw, + strokeCtrlOnOutlinePressedRaw, + strokeCtrlOnOutlineDisabledRaw, + strokeCtrlDividerOnBrandRaw, + strokeCtrlDividerOnNeutralRaw, + strokeCtrlDividerOnOutlineRaw, strokeDividerDefaultRaw, backgroundCtrlBrandRestRaw, strokeWindowActiveRaw, @@ -63,167 +63,167 @@ import { foregroundCtrlNeutralPrimaryRestRaw, foregroundCtrlBrandRestRaw, foregroundCtrlNeutralPrimaryDisabledRaw, - foregroundCtrlOnbrandRestRaw, + foregroundCtrlOnBrandRestRaw, foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, foregroundCtrlBrandDisabledRaw, - foregroundCtrlOnbrandDisabledRaw, - iconthemeCtrlDefaultRestRaw, - iconthemeCtrlDefaultSelectedRaw, + foregroundCtrlOnBrandDisabledRaw, + iconThemeCtrlDefaultRestRaw, + iconThemeCtrlDefaultSelectedRaw, statusDangerBackgroundRaw, statusWarningBackgroundRaw, statusSuccessBackgroundRaw, statusImportantBackgroundRaw, statusInformativeBackgroundRaw, statusNeutralBackgroundRaw, - backgroundCardOnsecondaryDefaultRestRaw, + backgroundCardOnSecondaryDefaultRestRaw, shadowFlyoutKeyRaw, shadowFlyoutAmbientRaw, shadowWindowActiveKeyRaw, } from '../control/variables'; import { - strokeCardOnprimaryRestRaw, - strokeCtrlOnbrandRestRaw, - strokeCtrlOnbrandHoverRaw, - strokeCtrlOnbrandPressedRaw, - strokeCtrlOnbrandDisabledRaw, - strokeCtrlOnneutralRestRaw, - strokeCtrlOnneutralPressedRaw, - strokeCtrlOnneutralHoverRaw, - strokeCtrlOnneutralDisabledRaw, + strokeCardOnPrimaryRestRaw, + strokeCtrlOnBrandRestRaw, + strokeCtrlOnBrandHoverRaw, + strokeCtrlOnBrandPressedRaw, + strokeCtrlOnBrandDisabledRaw, + strokeCtrlOnNeutralRestRaw, + strokeCtrlOnNeutralPressedRaw, + strokeCtrlOnNeutralHoverRaw, + strokeCtrlOnNeutralDisabledRaw, } from '../nullable/variables'; import { - textStyleDefaultHeaderFontfamilyRaw, - textStyleDefaultHeaderLetterspacingRaw, - textStyleAiRegularFontfamilyRaw, + textStyleDefaultHeaderFontFamilyRaw, + textStyleDefaultHeaderLetterSpacingRaw, + textStyleAiRegularFontFamilyRaw, textStyleAiRegularWeightRaw, - textStyleAiRegularLetterspacingRaw, - textStyleAiHeaderFontfamilyRaw, + textStyleAiRegularLetterSpacingRaw, + textStyleAiHeaderFontFamilyRaw, textStyleAiHeaderWeightRaw, - textStyleAiHeaderLetterspacingRaw, - textStyleArticleRegularFontfamilyRaw, + textStyleAiHeaderLetterSpacingRaw, + textStyleArticleRegularFontFamilyRaw, textStyleArticleRegularWeightRaw, - textStyleArticleRegularLetterspacingRaw, - textStyleArticleHeaderFontfamilyRaw, + textStyleArticleRegularLetterSpacingRaw, + textStyleArticleHeaderFontFamilyRaw, textStyleArticleHeaderWeightRaw, - textStyleArticleHeaderLetterspacingRaw, - textStyleCodeRegularFontfamilyRaw, + textStyleArticleHeaderLetterSpacingRaw, + textStyleCodeRegularFontFamilyRaw, textStyleCodeRegularWeightRaw, - textStyleCodeRegularLetterspacingRaw, - textStyleCodeHeaderFontfamilyRaw, + textStyleCodeRegularLetterSpacingRaw, + textStyleCodeHeaderFontFamilyRaw, textStyleCodeHeaderWeightRaw, - textStyleCodeHeaderLetterspacingRaw, - textStyleDatavizRegularFontfamilyRaw, - textStyleDatavizRegularWeightRaw, - textStyleDatavizRegularLetterspacingRaw, - textStyleDatavizHeaderFontfamilyRaw, - textStyleDatavizHeaderWeightRaw, - textStyleDatavizHeaderLetterspacingRaw, - textStyleQuoteRegularFontfamilyRaw, + textStyleCodeHeaderLetterSpacingRaw, + textStyleDataVizRegularFontFamilyRaw, + textStyleDataVizRegularWeightRaw, + textStyleDataVizRegularLetterSpacingRaw, + textStyleDataVizHeaderFontFamilyRaw, + textStyleDataVizHeaderWeightRaw, + textStyleDataVizHeaderLetterSpacingRaw, + textStyleQuoteRegularFontFamilyRaw, textStyleQuoteRegularWeightRaw, - textStyleQuoteRegularLetterspacingRaw, - textStyleQuoteHeaderFontfamilyRaw, + 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, + 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, + paddingCardNestedImageRaw, + paddingCtrlTextBottomRaw, + paddingCtrlSmTextBottomRaw, + paddingCtrlLgTextBottomRaw, gapBetweenCtrlNestedRaw, - gapTextSmallRaw, - gapTextLargeRaw, + gapBetweenTextSmallRaw, gapBetweenCtrlLgNestedRaw, + gapBetweenTextLargeRaw, gapBetweenCtrlSmNestedRaw, - gapListRaw, - gapCardRaw, - strokewidthDividerDefaultRaw, - strokewidthDividerStrongRaw, - strokewidthCtrlOutlineRestRaw, - strokewidthCtrlOutlineHoverRaw, - strokewidthCtrlOutlinePressedRaw, - strokewidthCtrlOutlineSelectedRaw, - strokewidthWindowDefaultRaw, + 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, - strokeCtrlDividerOnneutralDisabledRaw, - strokeCtrlDividerOnoutlineDisabledRaw, - strokeCtrlDividerOnactivebrandRaw, - strokeCtrlDividerOnactivebrandDisabledRaw, - strokeCtrlOnactivebrandHoverRaw, - strokeCtrlOnactivebrandPressedRaw, - strokeCtrlOnactivebrandDisabledRaw, - strokeCtrlOnactivebrandRestStop2Raw, - strokeCtrlOnactivebrandHoverStop2Raw, - strokeCtrlOnactivebrandPressedStop2Raw, - strokeCtrlOnactivebrandDisabledStop2Raw, + 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, @@ -233,24 +233,24 @@ import { backgroundLayerPrimaryStop3Raw, backgroundLayerSecondaryRaw, backgroundLayerTertiaryRaw, - backgroundCardOnprimaryDefaultSelectedRaw, - backgroundCtrlActivebrandRestRaw, - backgroundCtrlActivebrandHoverRaw, - backgroundCtrlActivebrandPressedRaw, - backgroundCtrlActivebrandDisabledRaw, - backgroundCtrlShapesafeActivebrandRestRaw, - backgroundCtrlShapesafeActivebrandDisabledRaw, - backgroundCtrlShapesafeNeutralRestRaw, - backgroundCtrlShapesafeNeutralHoverRaw, - backgroundCtrlShapesafeNeutralPressedRaw, - backgroundCtrlShapesafeNeutralDisabledRaw, + backgroundCardOnPrimaryDefaultSelectedRaw, + backgroundCtrlActiveBrandRestRaw, + backgroundCtrlActiveBrandHoverRaw, + backgroundCtrlActiveBrandPressedRaw, + backgroundCtrlActiveBrandDisabledRaw, + backgroundCtrlShapeSafeActiveBrandRestRaw, + backgroundCtrlShapeSafeActiveBrandDisabledRaw, + backgroundCtrlShapeSafeNeutralRestRaw, + backgroundCtrlShapeSafeNeutralHoverRaw, + backgroundCtrlShapeSafeNeutralPressedRaw, + backgroundCtrlShapeSafeNeutralDisabledRaw, cornerFlyoutHoverRaw, cornerFlyoutPressedRaw, cornerLayerIntersectionRaw, cornerCardHoverRaw, cornerCardPressedRaw, cornerToolbarDefaultRaw, - cornerImageOnpageRaw, + cornerImageOnPageRaw, cornerCtrlHoverRaw, cornerCtrlPressedRaw, cornerCtrlSmHoverRaw, @@ -264,60 +264,60 @@ import { 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, + 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, + materialAcrylicDefaultColorBlendRaw, + materialAcrylicDefaultLumBlendRaw, materialMicaDefaultSolidRaw, - materialMicaDefaultColorblendRaw, - materialMicaDefaultLumblendRaw, + materialMicaDefaultColorBlendRaw, + materialMicaDefaultLumBlendRaw, materialMicaDarkerSolidRaw, - materialMicaDarkerColorblendRaw, - materialMicaDarkerLumblendRaw, + materialMicaDarkerColorBlendRaw, + materialMicaDarkerLumBlendRaw, materialMicaThinSolidRaw, - materialMicaThinColorblendRaw, - materialMicaThinLumblendRaw, - iconthemeCtrlDefaultHoverRaw, - iconthemeCtrlDefaultPressedRaw, - iconthemeCtrlSubtleRestRaw, - iconthemeCtrlSubtleHoverRaw, - iconthemeCtrlSubtlePressedRaw, - iconthemeCtrlSubtleSelectedRaw, - iconthemeCtrlChevronDefaultRaw, - iconthemeCtrlChevronSelectedRaw, + materialMicaThinColorBlendRaw, + materialMicaThinLumBlendRaw, + iconThemeCtrlDefaultHoverRaw, + iconThemeCtrlDefaultPressedRaw, + iconThemeCtrlSubtleRestRaw, + iconThemeCtrlSubtleHoverRaw, + iconThemeCtrlSubtlePressedRaw, + iconThemeCtrlSubtleSelectedRaw, + iconThemeCtrlChevronDefaultRaw, + iconThemeCtrlChevronSelectedRaw, statusBrandBackgroundRaw, statusBrandStrokeRaw, statusBrandForegroundRaw, @@ -337,145 +337,147 @@ import { statusNeutralTintForegroundRaw, cornerFlyoutShellRestRaw, materialAcrylicShellDefaultSolidRaw, - materialAcrylicShellDefaultColorblendRaw, - materialAcrylicShellDefaultLumblendRaw, - backgroundCardOnsecondaryDefaultSelectedRaw, - shadowCtrlOndragKeyRaw, - shadowCtrlOndragAmbientRaw, + materialAcrylicShellDefaultColorBlendRaw, + materialAcrylicShellDefaultLumBlendRaw, + backgroundCardOnSecondaryDefaultSelectedRaw, + textStyleDefaultDisplayFontFamilyRaw, + textStyleDefaultDisplayLetterSpacingRaw, + shadowCtrlOnDragKeyRaw, + shadowCtrlOnDragAmbientRaw, shadowWindowInactiveKeyRaw, } from './variables'; -export const textStyleDefaultHeaderFontfamily = `var(${textStyleDefaultHeaderFontfamilyRaw}, var(${textStyleDefaultRegularFontfamilyRaw}))`; -export const textStyleDefaultHeaderLetterspacing = `var(${textStyleDefaultHeaderLetterspacingRaw}, var(${textStyleDefaultRegularLetterspacingRaw}))`; -export const textStyleAiRegularFontfamily = `var(${textStyleAiRegularFontfamilyRaw}, var(${textStyleDefaultRegularFontfamilyRaw}))`; +export const textStyleDefaultHeaderFontFamily = `var(${textStyleDefaultHeaderFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +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 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 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 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 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 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 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 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}))`; -export const textRampSectionheaderLineheight = `var(${textRampSectionheaderLineheightRaw}, var(${textGlobalSubtitle1LineheightRaw}))`; -export const textRampSubsectionheaderFontsize = `var(${textRampSubsectionheaderFontsizeRaw}, var(${textGlobalSubtitle2FontsizeRaw}))`; -export const textRampSubsectionheaderLineheight = `var(${textRampSubsectionheaderLineheightRaw}, var(${textGlobalSubtitle2LineheightRaw}))`; -export const textRampReadingbodyFontsize = `var(${textRampReadingbodyFontsizeRaw}, var(${textGlobalBody2FontsizeRaw}))`; -export const textRampReadingbodyLineheight = `var(${textRampReadingbodyLineheightRaw}, var(${textGlobalBody2LineheightRaw}))`; -export const textRampItemheaderFontsize = `var(${textRampItemheaderFontsizeRaw}, var(${textGlobalBody2FontsizeRaw}))`; -export const textRampItemheaderLineheight = `var(${textRampItemheaderLineheightRaw}, var(${textGlobalBody2LineheightRaw}))`; -export const textRampItembodyFontsize = `var(${textRampItembodyFontsizeRaw}, var(${textGlobalBody3FontsizeRaw}))`; -export const textRampItembodyLineheight = `var(${textRampItembodyLineheightRaw}, var(${textGlobalBody3LineheightRaw}))`; -export const textRampMetadataFontsize = `var(${textRampMetadataFontsizeRaw}, var(${textGlobalCaption1FontsizeRaw}))`; -export const textRampMetadataLineheight = `var(${textRampMetadataLineheightRaw}, var(${textGlobalCaption1LineheightRaw}))`; -export const textRampLegalFontsize = `var(${textRampLegalFontsizeRaw}, var(${textGlobalCaption2FontsizeRaw}))`; -export const textRampLegalLineheight = `var(${textRampLegalLineheightRaw}, var(${textGlobalCaption2LineheightRaw}))`; -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}))`; -export const textRampSmItembodyLineheight = `var(${textRampSmItembodyLineheightRaw}, var(${textGlobalCaption1LineheightRaw}))`; -export const textRampSmMetadataFontsize = `var(${textRampSmMetadataFontsizeRaw}, var(${textGlobalCaption1FontsizeRaw}))`; -export const textRampSmMetadataLineheight = `var(${textRampSmMetadataLineheightRaw}, var(${textGlobalCaption1LineheightRaw}))`; -export const textRampSmLegalFontsize = `var(${textRampSmLegalFontsizeRaw}, var(${textGlobalCaption2FontsizeRaw}))`; -export const textRampSmLegalLineheight = `var(${textRampSmLegalLineheightRaw}, var(${textGlobalCaption2LineheightRaw}))`; -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}))`; -export const textRampLgItembodyLineheight = `var(${textRampLgItembodyLineheightRaw}, var(${textGlobalBody2LineheightRaw}))`; -export const textRampLgMetadataFontsize = `var(${textRampLgMetadataFontsizeRaw}, var(${textGlobalBody3FontsizeRaw}))`; -export const textRampLgMetadataLineheight = `var(${textRampLgMetadataLineheightRaw}, var(${textGlobalBody3LineheightRaw}))`; -export const textRampLgLegalFontsize = `var(${textRampLgLegalFontsizeRaw}, var(${textGlobalCaption1FontsizeRaw}))`; -export const textRampLgLegalLineheight = `var(${textRampLgLegalLineheightRaw}, var(${textGlobalCaption1LineheightRaw}))`; +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}))`; +export const textRampSectionHeaderLineHeight = `var(${textRampSectionHeaderLineHeightRaw}, var(${textGlobalSubtitle1LineHeightRaw}))`; +export const textRampSubsectionHeaderFontSize = `var(${textRampSubsectionHeaderFontSizeRaw}, var(${textGlobalSubtitle2FontSizeRaw}))`; +export const textRampSubsectionHeaderLineHeight = `var(${textRampSubsectionHeaderLineHeightRaw}, var(${textGlobalSubtitle2LineHeightRaw}))`; +export const textRampReadingBodyFontSize = `var(${textRampReadingBodyFontSizeRaw}, var(${textGlobalBody2FontSizeRaw}))`; +export const textRampReadingBodyLineHeight = `var(${textRampReadingBodyLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}))`; +export const textRampItemHeaderFontSize = `var(${textRampItemHeaderFontSizeRaw}, var(${textGlobalBody2FontSizeRaw}))`; +export const textRampItemHeaderLineHeight = `var(${textRampItemHeaderLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}))`; +export const textRampItemBodyFontSize = `var(${textRampItemBodyFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}))`; +export const textRampItemBodyLineHeight = `var(${textRampItemBodyLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}))`; +export const textRampMetadataFontSize = `var(${textRampMetadataFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}))`; +export const textRampMetadataLineHeight = `var(${textRampMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; +export const textRampLegalFontSize = `var(${textRampLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}))`; +export const textRampLegalLineHeight = `var(${textRampLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}))`; +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}))`; +export const textRampSmItemBodyLineHeight = `var(${textRampSmItemBodyLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; +export const textRampSmMetadataFontSize = `var(${textRampSmMetadataFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}))`; +export const textRampSmMetadataLineHeight = `var(${textRampSmMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; +export const textRampSmLegalFontSize = `var(${textRampSmLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}))`; +export const textRampSmLegalLineHeight = `var(${textRampSmLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}))`; +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}))`; +export const textRampLgItemBodyLineHeight = `var(${textRampLgItemBodyLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}))`; +export const textRampLgMetadataFontSize = `var(${textRampLgMetadataFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}))`; +export const textRampLgMetadataLineHeight = `var(${textRampLgMetadataLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}))`; +export const textRampLgLegalFontSize = `var(${textRampLgLegalFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}))`; +export const textRampLgLegalLineHeight = `var(${textRampLgLegalLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; export const textCtrlWeightDefault = `var(${textCtrlWeightDefaultRaw}, var(${textStyleDefaultRegularWeightRaw}))`; export const textCtrlButtonWeightDefault = `var(${textCtrlButtonWeightDefaultRaw}, var(${textStyleDefaultRegularWeightRaw}))`; 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}))`; -export const paddingCardNestedimage = `var(${paddingCardNestedimageRaw}, var(${paddingContentAlignDefaultRaw}))`; -export const paddingCtrlTextbottom = `var(${paddingCtrlTextbottomRaw}, var(${paddingCtrlTexttopRaw}))`; -export const paddingCtrlSmTextbottom = `var(${paddingCtrlSmTextbottomRaw}, var(${paddingCtrlSmTexttopRaw}))`; -export const paddingCtrlLgTextbottom = `var(${paddingCtrlLgTextbottomRaw}, var(${paddingCtrlLgTexttopRaw}))`; -export const gapBetweenCtrlNested = `var(${gapBetweenCtrlNestedRaw}, var(${paddingCtrlTonestedcontrolRaw}))`; -export const gapTextSmall = `var(${gapTextSmallRaw}, var(${gapBetweenContentXxsmallRaw}))`; -export const gapTextLarge = `var(${gapTextLargeRaw}, var(${gapBetweenContentXsmallRaw}))`; -export const gapBetweenCtrlLgNested = `var(${gapBetweenCtrlLgNestedRaw}, var(${paddingCtrlLgTonestedcontrolRaw}))`; -export const gapBetweenCtrlSmNested = `var(${gapBetweenCtrlSmNestedRaw}, var(${paddingCtrlSmTonestedcontrolRaw}))`; -export const gapList = `var(${gapListRaw}, var(${gapBetweenContentXxsmallRaw}))`; -export const gapCard = `var(${gapCardRaw}, var(${gapBetweenContentMediumRaw}))`; -export const strokewidthDividerDefault = `var(${strokewidthDividerDefaultRaw}, var(${strokewidthDefaultRaw}))`; -export const strokewidthDividerStrong = `var(${strokewidthDividerStrongRaw}, var(${strokewidthDefaultRaw}))`; -export const strokewidthCtrlOutlineRest = `var(${strokewidthCtrlOutlineRestRaw}, var(${strokewidthDefaultRaw}))`; -export const strokewidthCtrlOutlineHover = `var(${strokewidthCtrlOutlineHoverRaw}, var(${strokewidthDefaultRaw}))`; -export const strokewidthCtrlOutlinePressed = `var(${strokewidthCtrlOutlinePressedRaw}, var(${strokewidthDefaultRaw}))`; -export const strokewidthCtrlOutlineSelected = `var(${strokewidthCtrlOutlineSelectedRaw}, var(${strokewidthDefaultRaw}))`; -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}))`; -export const strokeCtrlDividerOnbrandDisabled = `var(${strokeCtrlDividerOnbrandDisabledRaw}, var(${strokeCtrlDividerOnbrandRaw}))`; -export const strokeCtrlDividerOnneutralDisabled = `var(${strokeCtrlDividerOnneutralDisabledRaw}, var(${strokeCtrlDividerOnneutralRaw}))`; -export const strokeCtrlDividerOnoutlineDisabled = `var(${strokeCtrlDividerOnoutlineDisabledRaw}, var(${strokeCtrlDividerOnoutlineRaw}))`; -export const strokeCtrlDividerOnactivebrand = `var(${strokeCtrlDividerOnactivebrandRaw}, var(${strokeCtrlDividerOnbrandRaw}))`; -export const strokeCtrlDividerOnactivebrandDisabled = `var(${strokeCtrlDividerOnactivebrandDisabledRaw}, var(${strokeCtrlDividerOnbrandRaw}))`; -export const strokeCtrlOnactivebrandHover = `var(${strokeCtrlOnactivebrandHoverRaw}, var(${strokeCtrlOnbrandHoverRaw}))`; -export const strokeCtrlOnactivebrandPressed = `var(${strokeCtrlOnactivebrandPressedRaw}, var(${strokeCtrlOnbrandPressedRaw}))`; -export const strokeCtrlOnactivebrandDisabled = `var(${strokeCtrlOnactivebrandDisabledRaw}, var(${strokeCtrlOnbrandDisabledRaw}))`; -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 paddingToolbarInside = `var(${paddingToolbarInsideRaw}, var(${paddingContentXSmallRaw}))`; +export const paddingToolbarOutside = `var(${paddingToolbarOutsideRaw}, var(${paddingContentXxSmallRaw}))`; +export const paddingFlyoutDefault = `var(${paddingFlyoutDefaultRaw}, var(${paddingContentAlignOutdentTextOnSubtleRaw}))`; +export const paddingCardNestedImage = `var(${paddingCardNestedImageRaw}, var(${paddingContentAlignDefaultRaw}))`; +export const paddingCtrlTextBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}))`; +export const paddingCtrlSmTextBottom = `var(${paddingCtrlSmTextBottomRaw}, var(${paddingCtrlSmTextTopRaw}))`; +export const paddingCtrlLgTextBottom = `var(${paddingCtrlLgTextBottomRaw}, var(${paddingCtrlLgTextTopRaw}))`; +export const gapBetweenCtrlNested = `var(${gapBetweenCtrlNestedRaw}, var(${paddingCtrlToNestedControlRaw}))`; +export const gapBetweenTextSmall = `var(${gapBetweenTextSmallRaw}, var(${gapBetweenContentXxSmallRaw}))`; +export const 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}))`; +export const gapBetweenCard = `var(${gapBetweenCardRaw}, var(${gapBetweenContentMediumRaw}))`; +export const strokeWidthDividerDefault = `var(${strokeWidthDividerDefaultRaw}, var(${strokeWidthDefaultRaw}))`; +export const strokeWidthDividerStrong = `var(${strokeWidthDividerStrongRaw}, var(${strokeWidthDefaultRaw}))`; +export const strokeWidthCtrlOutlineRest = `var(${strokeWidthCtrlOutlineRestRaw}, var(${strokeWidthDefaultRaw}))`; +export const strokeWidthCtrlOutlineHover = `var(${strokeWidthCtrlOutlineHoverRaw}, var(${strokeWidthDefaultRaw}))`; +export const strokeWidthCtrlOutlinePressed = `var(${strokeWidthCtrlOutlinePressedRaw}, var(${strokeWidthDefaultRaw}))`; +export const strokeWidthCtrlOutlineSelected = `var(${strokeWidthCtrlOutlineSelectedRaw}, var(${strokeWidthDefaultRaw}))`; +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}))`; +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}))`; +export const strokeCtrlOnActiveBrandPressed = `var(${strokeCtrlOnActiveBrandPressedRaw}, var(${strokeCtrlOnBrandPressedRaw}))`; +export const strokeCtrlOnActiveBrandDisabled = `var(${strokeCtrlOnActiveBrandDisabledRaw}, var(${strokeCtrlOnBrandDisabledRaw}))`; +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}))`; export const strokeDividerStrong = `var(${strokeDividerStrongRaw}, var(${strokeDividerDefaultRaw}))`; export const strokeDividerBrand = `var(${strokeDividerBrandRaw}, var(${backgroundCtrlBrandRestRaw}))`; @@ -485,24 +487,24 @@ export const backgroundLayerPrimaryStop2 = `var(${backgroundLayerPrimaryStop2Raw 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}))`; -export const backgroundCtrlActivebrandHover = `var(${backgroundCtrlActivebrandHoverRaw}, var(${backgroundCtrlBrandHoverRaw}))`; -export const backgroundCtrlActivebrandPressed = `var(${backgroundCtrlActivebrandPressedRaw}, var(${backgroundCtrlBrandPressedRaw}))`; -export const backgroundCtrlActivebrandDisabled = `var(${backgroundCtrlActivebrandDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; -export const backgroundCtrlShapesafeActivebrandRest = `var(${backgroundCtrlShapesafeActivebrandRestRaw}, var(${backgroundCtrlBrandRestRaw}))`; -export const backgroundCtrlShapesafeActivebrandDisabled = `var(${backgroundCtrlShapesafeActivebrandDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; -export const backgroundCtrlShapesafeNeutralRest = `var(${backgroundCtrlShapesafeNeutralRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const backgroundCtrlShapesafeNeutralHover = `var(${backgroundCtrlShapesafeNeutralHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const backgroundCtrlShapesafeNeutralPressed = `var(${backgroundCtrlShapesafeNeutralPressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const backgroundCtrlShapesafeNeutralDisabled = `var(${backgroundCtrlShapesafeNeutralDisabledRaw}, var(${foregroundCtrlNeutralSecondaryDisabledRaw}))`; +export const backgroundCardOnPrimaryDefaultSelected = `var(${backgroundCardOnPrimaryDefaultSelectedRaw}, var(${backgroundCardOnPrimaryDefaultRestRaw}))`; +export const backgroundCtrlActiveBrandRest = `var(${backgroundCtrlActiveBrandRestRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const backgroundCtrlActiveBrandHover = `var(${backgroundCtrlActiveBrandHoverRaw}, var(${backgroundCtrlBrandHoverRaw}))`; +export const backgroundCtrlActiveBrandPressed = `var(${backgroundCtrlActiveBrandPressedRaw}, var(${backgroundCtrlBrandPressedRaw}))`; +export const backgroundCtrlActiveBrandDisabled = `var(${backgroundCtrlActiveBrandDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; +export const backgroundCtrlShapeSafeActiveBrandRest = `var(${backgroundCtrlShapeSafeActiveBrandRestRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const backgroundCtrlShapeSafeActiveBrandDisabled = `var(${backgroundCtrlShapeSafeActiveBrandDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; +export const backgroundCtrlShapeSafeNeutralRest = `var(${backgroundCtrlShapeSafeNeutralRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const backgroundCtrlShapeSafeNeutralHover = `var(${backgroundCtrlShapeSafeNeutralHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const backgroundCtrlShapeSafeNeutralPressed = `var(${backgroundCtrlShapeSafeNeutralPressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const backgroundCtrlShapeSafeNeutralDisabled = `var(${backgroundCtrlShapeSafeNeutralDisabledRaw}, var(${foregroundCtrlNeutralSecondaryDisabledRaw}))`; 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 cornerImageOnPage = `var(${cornerImageOnPageRaw}, var(${cornerCardRestRaw}))`; export const cornerCtrlHover = `var(${cornerCtrlHoverRaw}, var(${cornerCtrlRestRaw}))`; export const cornerCtrlPressed = `var(${cornerCtrlPressedRaw}, var(${cornerCtrlRestRaw}))`; export const cornerCtrlSmHover = `var(${cornerCtrlSmHoverRaw}, var(${cornerCtrlSmRestRaw}))`; @@ -516,72 +518,72 @@ export const foregroundCtrlNeutralPrimaryHover = `var(${foregroundCtrlNeutralPri export const foregroundCtrlNeutralPrimaryPressed = `var(${foregroundCtrlNeutralPrimaryPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; export const foregroundCtrlNeutralSecondaryHover = `var(${foregroundCtrlNeutralSecondaryHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; export const foregroundCtrlNeutralSecondaryPressed = `var(${foregroundCtrlNeutralSecondaryPressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const foregroundCtrlIconOnneutralRest = `var(${foregroundCtrlIconOnneutralRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlIconOnneutralHover = `var(${foregroundCtrlIconOnneutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlIconOnneutralPressed = `var(${foregroundCtrlIconOnneutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlIconOnneutralDisabled = `var(${foregroundCtrlIconOnneutralDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; -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}))`; -export const foregroundCtrlIconOnsubtleHover = `var(${foregroundCtrlIconOnsubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlIconOnsubtlePressed = `var(${foregroundCtrlIconOnsubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlIconOnsubtleDisabled = `var(${foregroundCtrlIconOnsubtleDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; -export const foregroundCtrlOnbrandHover = `var(${foregroundCtrlOnbrandHoverRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; -export const foregroundCtrlOnbrandPressed = `var(${foregroundCtrlOnbrandPressedRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; -export const foregroundCtrlActivebrandRest = `var(${foregroundCtrlActivebrandRestRaw}, var(${foregroundCtrlBrandRestRaw}))`; -export const foregroundCtrlActivebrandHover = `var(${foregroundCtrlActivebrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw}))`; -export const foregroundCtrlActivebrandPressed = `var(${foregroundCtrlActivebrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw}))`; -export const foregroundCtrlActivebrandDisabled = `var(${foregroundCtrlActivebrandDisabledRaw}, var(${foregroundCtrlBrandDisabledRaw}))`; -export const foregroundCtrlOnactivebrandRest = `var(${foregroundCtrlOnactivebrandRestRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; -export const foregroundCtrlOnactivebrandHover = `var(${foregroundCtrlOnactivebrandHoverRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; -export const foregroundCtrlOnactivebrandPressed = `var(${foregroundCtrlOnactivebrandPressedRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; -export const foregroundCtrlOnactivebrandDisabled = `var(${foregroundCtrlOnactivebrandDisabledRaw}, var(${foregroundCtrlOnbrandDisabledRaw}))`; -export const foregroundCtrlOnoutlineRest = `var(${foregroundCtrlOnoutlineRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOnoutlineHover = `var(${foregroundCtrlOnoutlineHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOnoutlinePressed = `var(${foregroundCtrlOnoutlinePressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOnoutlineDisabled = `var(${foregroundCtrlOnoutlineDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; -export const foregroundCtrlOnsubtleRest = `var(${foregroundCtrlOnsubtleRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOnsubtleHover = `var(${foregroundCtrlOnsubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryHoverRaw}))`; -export const foregroundCtrlOnsubtlePressed = `var(${foregroundCtrlOnsubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw}))`; -export const foregroundCtrlOnsubtleDisabled = `var(${foregroundCtrlOnsubtleDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; -export const foregroundCtrlOntransparentRest = `var(${foregroundCtrlOntransparentRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOntransparentHover = `var(${foregroundCtrlOntransparentHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOntransparentPressed = `var(${foregroundCtrlOntransparentPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOntransparentDisabled = `var(${foregroundCtrlOntransparentDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +export const foregroundCtrlIconOnNeutralRest = `var(${foregroundCtrlIconOnNeutralRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnNeutralHover = `var(${foregroundCtrlIconOnNeutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnNeutralPressed = `var(${foregroundCtrlIconOnNeutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnNeutralDisabled = `var(${foregroundCtrlIconOnNeutralDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +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}))`; +export const foregroundCtrlIconOnSubtleHover = `var(${foregroundCtrlIconOnSubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnSubtlePressed = `var(${foregroundCtrlIconOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlIconOnSubtleDisabled = `var(${foregroundCtrlIconOnSubtleDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +export const foregroundCtrlOnBrandHover = `var(${foregroundCtrlOnBrandHoverRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +export const foregroundCtrlOnBrandPressed = `var(${foregroundCtrlOnBrandPressedRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +export const foregroundCtrlActiveBrandRest = `var(${foregroundCtrlActiveBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}))`; +export const foregroundCtrlActiveBrandHover = `var(${foregroundCtrlActiveBrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw}))`; +export const foregroundCtrlActiveBrandPressed = `var(${foregroundCtrlActiveBrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw}))`; +export const foregroundCtrlActiveBrandDisabled = `var(${foregroundCtrlActiveBrandDisabledRaw}, var(${foregroundCtrlBrandDisabledRaw}))`; +export const foregroundCtrlOnActiveBrandRest = `var(${foregroundCtrlOnActiveBrandRestRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +export const foregroundCtrlOnActiveBrandHover = `var(${foregroundCtrlOnActiveBrandHoverRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +export const foregroundCtrlOnActiveBrandPressed = `var(${foregroundCtrlOnActiveBrandPressedRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +export const foregroundCtrlOnActiveBrandDisabled = `var(${foregroundCtrlOnActiveBrandDisabledRaw}, var(${foregroundCtrlOnBrandDisabledRaw}))`; +export const foregroundCtrlOnOutlineRest = `var(${foregroundCtrlOnOutlineRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOnOutlineHover = `var(${foregroundCtrlOnOutlineHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOnOutlinePressed = `var(${foregroundCtrlOnOutlinePressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOnOutlineDisabled = `var(${foregroundCtrlOnOutlineDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +export const foregroundCtrlOnSubtleRest = `var(${foregroundCtrlOnSubtleRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOnSubtleHover = `var(${foregroundCtrlOnSubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryHoverRaw}))`; +export const foregroundCtrlOnSubtlePressed = `var(${foregroundCtrlOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw}))`; +export const foregroundCtrlOnSubtleDisabled = `var(${foregroundCtrlOnSubtleDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +export const foregroundCtrlOnTransparentRest = `var(${foregroundCtrlOnTransparentRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOnTransparentHover = `var(${foregroundCtrlOnTransparentHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOnTransparentPressed = `var(${foregroundCtrlOnTransparentPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; +export const foregroundCtrlOnTransparentDisabled = `var(${foregroundCtrlOnTransparentDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; export const materialAcrylicDefaultSolid = `var(${materialAcrylicDefaultSolidRaw}, var(${backgroundLayerPrimarySolidRaw}))`; -export const materialAcrylicDefaultColorblend = `var(${materialAcrylicDefaultColorblendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; -export const materialAcrylicDefaultLumblend = `var(${materialAcrylicDefaultLumblendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +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 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 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 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}))`; export const statusBrandStroke = `var(${statusBrandStrokeRaw}, var(${backgroundCtrlBrandRestRaw}))`; -export const statusBrandForeground = `var(${statusBrandForegroundRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const statusBrandForeground = `var(${statusBrandForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; export const statusBrandTintForeground = `var(${statusBrandTintForegroundRaw}, var(${foregroundCtrlBrandRestRaw}))`; export const statusDangerStroke = `var(${statusDangerStrokeRaw}, var(${statusDangerBackgroundRaw}))`; -export const statusDangerForeground = `var(${statusDangerForegroundRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const statusDangerForeground = `var(${statusDangerForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; export const statusWarningStroke = `var(${statusWarningStrokeRaw}, var(${statusWarningBackgroundRaw}))`; -export const statusWarningForeground = `var(${statusWarningForegroundRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const statusWarningForeground = `var(${statusWarningForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; export const statusSuccessStroke = `var(${statusSuccessStrokeRaw}, var(${statusSuccessBackgroundRaw}))`; -export const statusSuccessForeground = `var(${statusSuccessForegroundRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const statusSuccessForeground = `var(${statusSuccessForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; export const statusImportantStroke = `var(${statusImportantStrokeRaw}, var(${statusImportantBackgroundRaw}))`; -export const statusImportantForeground = `var(${statusImportantForegroundRaw}, var(${foregroundCtrlOnbrandRestRaw}))`; +export const statusImportantForeground = `var(${statusImportantForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; export const statusInformativeStroke = `var(${statusInformativeStrokeRaw}, var(${statusInformativeBackgroundRaw}))`; export const statusInformativeForeground = `var(${statusInformativeForegroundRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; export const statusNeutralStroke = `var(${statusNeutralStrokeRaw}, var(${statusNeutralBackgroundRaw}))`; @@ -589,9 +591,11 @@ export const statusNeutralForeground = `var(${statusNeutralForegroundRaw}, var($ 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 shadowCtrlOndragKey = `var(${shadowCtrlOndragKeyRaw}, var(${shadowFlyoutKeyRaw}))`; -export const shadowCtrlOndragAmbient = `var(${shadowCtrlOndragAmbientRaw}, var(${shadowFlyoutAmbientRaw}))`; +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 shadowCtrlOnDragKey = `var(${shadowCtrlOnDragKeyRaw}, var(${shadowFlyoutKeyRaw}))`; +export const shadowCtrlOnDragAmbient = `var(${shadowCtrlOnDragAmbientRaw}, var(${shadowFlyoutAmbientRaw}))`; export const shadowWindowInactiveKey = `var(${shadowWindowInactiveKeyRaw}, var(${shadowWindowActiveKeyRaw}))`; diff --git a/packages/semantic-tokens/src/optional/variables.ts b/packages/semantic-tokens/src/optional/variables.ts index 9957d665e4d3e..bdb91699ed7af 100644 --- a/packages/semantic-tokens/src/optional/variables.ts +++ b/packages/semantic-tokens/src/optional/variables.ts @@ -1,162 +1,162 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -export const textStyleDefaultHeaderFontfamilyRaw = '--smtc-text-style-default-header-fontfamily'; -export const textStyleDefaultHeaderLetterspacingRaw = '--smtc-text-style-default-header-letterspacing'; -export const textStyleAiRegularFontfamilyRaw = '--smtc-text-style-ai-regular-fontfamily'; +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-letterspacing'; -export const textStyleAiHeaderFontfamilyRaw = '--smtc-text-style-ai-header-fontfamily'; +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-letterspacing'; -export const textStyleArticleRegularFontfamilyRaw = '--smtc-text-style-article-regular-fontfamily'; +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-letterspacing'; -export const textStyleArticleHeaderFontfamilyRaw = '--smtc-text-style-article-header-fontfamily'; +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-letterspacing'; -export const textStyleCodeRegularFontfamilyRaw = '--smtc-text-style-code-regular-fontfamily'; +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-letterspacing'; -export const textStyleCodeHeaderFontfamilyRaw = '--smtc-text-style-code-header-fontfamily'; +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-letterspacing'; -export const textStyleDatavizRegularFontfamilyRaw = '--smtc-text-style-dataviz-regular-fontfamily'; -export const textStyleDatavizRegularWeightRaw = '--smtc-text-style-dataviz-regular-weight'; -export const textStyleDatavizRegularLetterspacingRaw = '--smtc-text-style-dataviz-regular-letterspacing'; -export const textStyleDatavizHeaderFontfamilyRaw = '--smtc-text-style-dataviz-header-fontfamily'; -export const textStyleDatavizHeaderWeightRaw = '--smtc-text-style-dataviz-header-weight'; -export const textStyleDatavizHeaderLetterspacingRaw = '--smtc-text-style-dataviz-header-letterspacing'; -export const textStyleQuoteRegularFontfamilyRaw = '--smtc-text-style-quote-regular-fontfamily'; +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-letterspacing'; -export const textStyleQuoteHeaderFontfamilyRaw = '--smtc-text-style-quote-header-fontfamily'; +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-letterspacing'; -export const textRampPageheaderFontsizeRaw = '--smtc-text-ramp-pageheader-fontsize'; -export const textRampPageheaderLineheightRaw = '--smtc-text-ramp-pageheader-lineheight'; -export const textRampSectionheaderFontsizeRaw = '--smtc-text-ramp-sectionheader-fontsize'; -export const textRampSectionheaderLineheightRaw = '--smtc-text-ramp-sectionheader-lineheight'; -export const textRampSubsectionheaderFontsizeRaw = '--smtc-text-ramp-subsectionheader-fontsize'; -export const textRampSubsectionheaderLineheightRaw = '--smtc-text-ramp-subsectionheader-lineheight'; -export const textRampReadingbodyFontsizeRaw = '--smtc-text-ramp-readingbody-fontsize'; -export const textRampReadingbodyLineheightRaw = '--smtc-text-ramp-readingbody-lineheight'; -export const textRampItemheaderFontsizeRaw = '--smtc-text-ramp-itemheader-fontsize'; -export const textRampItemheaderLineheightRaw = '--smtc-text-ramp-itemheader-lineheight'; -export const textRampItembodyFontsizeRaw = '--smtc-text-ramp-itembody-fontsize'; -export const textRampItembodyLineheightRaw = '--smtc-text-ramp-itembody-lineheight'; -export const textRampMetadataFontsizeRaw = '--smtc-text-ramp-metadata-fontsize'; -export const textRampMetadataLineheightRaw = '--smtc-text-ramp-metadata-lineheight'; -export const textRampLegalFontsizeRaw = '--smtc-text-ramp-legal-fontsize'; -export const textRampLegalLineheightRaw = '--smtc-text-ramp-legal-lineheight'; -export const textRampSmPageheaderFontsizeRaw = '--smtc-text-ramp-sm-pageheader-fontsize'; -export const textRampSmPageheaderLineheightRaw = '--smtc-text-ramp-sm-pageheader-lineheight'; -export const textRampSmSectionheaderFontsizeRaw = '--smtc-text-ramp-sm-sectionheader-fontsize'; -export const textRampSmSectionheaderLineheightRaw = '--smtc-text-ramp-sm-sectionheader-lineheight'; -export const textRampSmSubsectionheaderFontsizeRaw = '--smtc-text-ramp-sm-subsectionheader-fontsize'; -export const textRampSmSubsectionheaderLineheightRaw = '--smtc-text-ramp-sm-subsectionheader-lineheight'; -export const textRampSmReadingbodyFontsizeRaw = '--smtc-text-ramp-sm-readingbody-fontsize'; -export const textRampSmReadingbodyLineheightRaw = '--smtc-text-ramp-sm-readingbody-lineheight'; -export const textRampSmItemheaderFontsizeRaw = '--smtc-text-ramp-sm-itemheader-fontsize'; -export const textRampSmItemheaderLineheightRaw = '--smtc-text-ramp-sm-itemheader-lineheight'; -export const textRampSmItembodyFontsizeRaw = '--smtc-text-ramp-sm-itembody-fontsize'; -export const textRampSmItembodyLineheightRaw = '--smtc-text-ramp-sm-itembody-lineheight'; -export const textRampSmMetadataFontsizeRaw = '--smtc-text-ramp-sm-metadata-fontsize'; -export const textRampSmMetadataLineheightRaw = '--smtc-text-ramp-sm-metadata-lineheight'; -export const textRampSmLegalFontsizeRaw = '--smtc-text-ramp-sm-legal-fontsize'; -export const textRampSmLegalLineheightRaw = '--smtc-text-ramp-sm-legal-lineheight'; -export const textRampLgPageheaderFontsizeRaw = '--smtc-text-ramp-lg-pageheader-fontsize'; -export const textRampLgPageheaderLineheightRaw = '--smtc-text-ramp-lg-pageheader-lineheight'; -export const textRampLgSectionheaderFontsizeRaw = '--smtc-text-ramp-lg-sectionheader-fontsize'; -export const textRampLgSectionheaderLineheightRaw = '--smtc-text-ramp-lg-sectionheader-lineheight'; -export const textRampLgSubsectionheaderFontsizeRaw = '--smtc-text-ramp-lg-subsectionheader-fontsize'; -export const textRampLgSubsectionheaderLineheightRaw = '--smtc-text-ramp-lg-subsectionheader-lineheight'; -export const textRampLgReadingbodyFontsizeRaw = '--smtc-text-ramp-lg-readingbody-fontsize'; -export const textRampLgReadingbodyLineheightRaw = '--smtc-text-ramp-lg-readingbody-lineheight'; -export const textRampLgItemheaderFontsizeRaw = '--smtc-text-ramp-lg-itemheader-fontsize'; -export const textRampLgItemheaderLineheightRaw = '--smtc-text-ramp-lg-itemheader-lineheight'; -export const textRampLgItembodyFontsizeRaw = '--smtc-text-ramp-lg-itembody-fontsize'; -export const textRampLgItembodyLineheightRaw = '--smtc-text-ramp-lg-itembody-lineheight'; -export const textRampLgMetadataFontsizeRaw = '--smtc-text-ramp-lg-metadata-fontsize'; -export const textRampLgMetadataLineheightRaw = '--smtc-text-ramp-lg-metadata-lineheight'; -export const textRampLgLegalFontsizeRaw = '--smtc-text-ramp-lg-legal-fontsize'; -export const textRampLgLegalLineheightRaw = '--smtc-text-ramp-lg-legal-lineheight'; +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-nestedimage'; -export const paddingCtrlTextbottomRaw = '--smtc-padding-ctrl-textbottom'; -export const paddingCtrlSmTextbottomRaw = '--smtc-padding-ctrl-sm-textbottom'; -export const paddingCtrlLgTextbottomRaw = '--smtc-padding-ctrl-lg-textbottom'; +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 gapTextSmallRaw = '--smtc-gap-text-small'; -export const gapTextLargeRaw = '--smtc-gap-text-large'; +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 gapListRaw = '--smtc-gap-list'; -export const gapCardRaw = '--smtc-gap-card'; -export const strokewidthDividerDefaultRaw = '--smtc-strokewidth-divider-default'; -export const strokewidthDividerStrongRaw = '--smtc-strokewidth-divider-strong'; -export const strokewidthCtrlOutlineRestRaw = '--smtc-strokewidth-ctrl-outline-rest'; -export const strokewidthCtrlOutlineHoverRaw = '--smtc-strokewidth-ctrl-outline-hover'; -export const strokewidthCtrlOutlinePressedRaw = '--smtc-strokewidth-ctrl-outline-pressed'; -export const strokewidthCtrlOutlineSelectedRaw = '--smtc-strokewidth-ctrl-outline-selected'; -export const strokewidthWindowDefaultRaw = '--smtc-strokewidth-window-default'; +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-onbrand-reststop2'; -export const strokeCtrlOnbrandHoverStop2Raw = '--smtc-stroke-ctrl-onbrand-hoverstop2'; -export const strokeCtrlOnbrandPressedStop2Raw = '--smtc-stroke-ctrl-onbrand-pressedstop2'; -export const strokeCtrlOnbrandDisabledStop2Raw = '--smtc-stroke-ctrl-onbrand-disabledstop2'; -export const strokeCtrlOnneutralRestStop2Raw = '--smtc-stroke-ctrl-onneutral-reststop2'; -export const strokeCtrlOnneutralHoverStop2Raw = '--smtc-stroke-ctrl-onneutral-hoverstop2'; -export const strokeCtrlOnneutralPressedStop2Raw = '--smtc-stroke-ctrl-onneutral-pressedstop2'; -export const strokeCtrlOnneutralDisabledStop2Raw = '--smtc-stroke-ctrl-onneutral-disabledstop2'; -export const strokeCtrlOnoutlineRestStop2Raw = '--smtc-stroke-ctrl-onoutline-reststop2'; -export const strokeCtrlOnoutlineHoverStop2Raw = '--smtc-stroke-ctrl-onoutline-hoverstop2'; -export const strokeCtrlOnoutlinePressedStop2Raw = '--smtc-stroke-ctrl-onoutline-pressedstop2'; -export const strokeCtrlOnoutlineDisabledStop2Raw = '--smtc-stroke-ctrl-onoutline-disabledstop2'; -export const strokeCtrlOnactivebrandRestRaw = '--smtc-stroke-ctrl-onactivebrand-rest'; -export const strokeCtrlDividerOnbrandDisabledRaw = '--smtc-stroke-ctrl-divider-onbrand-disabled'; -export const strokeCtrlDividerOnneutralDisabledRaw = '--smtc-stroke-ctrl-divider-onneutral-disabled'; -export const strokeCtrlDividerOnoutlineDisabledRaw = '--smtc-stroke-ctrl-divider-onoutline-disabled'; -export const strokeCtrlDividerOnactivebrandRaw = '--smtc-stroke-ctrl-divider-onactivebrand'; -export const strokeCtrlDividerOnactivebrandDisabledRaw = '--smtc-stroke-ctrl-divider-onactivebrand-disabled'; -export const strokeCtrlOnactivebrandHoverRaw = '--smtc-stroke-ctrl-onactivebrand-hover'; -export const strokeCtrlOnactivebrandPressedRaw = '--smtc-stroke-ctrl-onactivebrand-pressed'; -export const strokeCtrlOnactivebrandDisabledRaw = '--smtc-stroke-ctrl-onactivebrand-disabled'; -export const strokeCtrlOnactivebrandRestStop2Raw = '--smtc-stroke-ctrl-onactivebrand-reststop2'; -export const strokeCtrlOnactivebrandHoverStop2Raw = '--smtc-stroke-ctrl-onactivebrand-hoverstop2'; -export const strokeCtrlOnactivebrandPressedStop2Raw = '--smtc-stroke-ctrl-onactivebrand-pressedstop2'; -export const strokeCtrlOnactivebrandDisabledStop2Raw = '--smtc-stroke-ctrl-onactivebrand-disabledstop2'; +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-primarystop1'; -export const backgroundLayerPrimaryStop2Raw = '--smtc-background-layer-primarystop2'; -export const backgroundLayerPrimaryStop3Raw = '--smtc-background-layer-primarystop3'; +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-onprimary-default-selected'; -export const backgroundCtrlActivebrandRestRaw = '--smtc-background-ctrl-activebrand-rest'; -export const backgroundCtrlActivebrandHoverRaw = '--smtc-background-ctrl-activebrand-hover'; -export const backgroundCtrlActivebrandPressedRaw = '--smtc-background-ctrl-activebrand-pressed'; -export const backgroundCtrlActivebrandDisabledRaw = '--smtc-background-ctrl-activebrand-disabled'; -export const backgroundCtrlShapesafeActivebrandRestRaw = '--smtc-background-ctrl-shapesafe-activebrand-rest'; -export const backgroundCtrlShapesafeActivebrandDisabledRaw = '--smtc-background-ctrl-shapesafe-activebrand-disabled'; -export const backgroundCtrlShapesafeNeutralRestRaw = '--smtc-background-ctrl-shapesafe-neutral-rest'; -export const backgroundCtrlShapesafeNeutralHoverRaw = '--smtc-background-ctrl-shapesafe-neutral-hover'; -export const backgroundCtrlShapesafeNeutralPressedRaw = '--smtc-background-ctrl-shapesafe-neutral-pressed'; -export const backgroundCtrlShapesafeNeutralDisabledRaw = '--smtc-background-ctrl-shapesafe-neutral-disabled'; +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-onpage'; +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'; @@ -170,60 +170,60 @@ export const foregroundCtrlNeutralPrimaryHoverRaw = '--smtc-foreground-ctrl-neut 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-onneutral-rest'; -export const foregroundCtrlIconOnneutralHoverRaw = '--smtc-foreground-ctrl-icon-onneutral-hover'; -export const foregroundCtrlIconOnneutralPressedRaw = '--smtc-foreground-ctrl-icon-onneutral-pressed'; -export const foregroundCtrlIconOnneutralDisabledRaw = '--smtc-foreground-ctrl-icon-onneutral-disabled'; -export const foregroundCtrlIconOnoutlineRestRaw = '--smtc-foreground-ctrl-icon-onoutline-rest'; -export const foregroundCtrlIconOnoutlineHoverRaw = '--smtc-foreground-ctrl-icon-onoutline-hover'; -export const foregroundCtrlIconOnoutlinePressedRaw = '--smtc-foreground-ctrl-icon-onoutline-pressed'; -export const foregroundCtrlIconOnoutlineDisabledRaw = '--smtc-foreground-ctrl-icon-onoutline-disabled'; -export const foregroundCtrlIconOnsubtleRestRaw = '--smtc-foreground-ctrl-icon-onsubtle-rest'; -export const foregroundCtrlIconOnsubtleHoverRaw = '--smtc-foreground-ctrl-icon-onsubtle-hover'; -export const foregroundCtrlIconOnsubtlePressedRaw = '--smtc-foreground-ctrl-icon-onsubtle-pressed'; -export const foregroundCtrlIconOnsubtleDisabledRaw = '--smtc-foreground-ctrl-icon-onsubtle-disabled'; -export const foregroundCtrlOnbrandHoverRaw = '--smtc-foreground-ctrl-onbrand-hover'; -export const foregroundCtrlOnbrandPressedRaw = '--smtc-foreground-ctrl-onbrand-pressed'; -export const foregroundCtrlActivebrandRestRaw = '--smtc-foreground-ctrl-activebrand-rest'; -export const foregroundCtrlActivebrandHoverRaw = '--smtc-foreground-ctrl-activebrand-hover'; -export const foregroundCtrlActivebrandPressedRaw = '--smtc-foreground-ctrl-activebrand-pressed'; -export const foregroundCtrlActivebrandDisabledRaw = '--smtc-foreground-ctrl-activebrand-disabled'; -export const foregroundCtrlOnactivebrandRestRaw = '--smtc-foreground-ctrl-onactivebrand-rest'; -export const foregroundCtrlOnactivebrandHoverRaw = '--smtc-foreground-ctrl-onactivebrand-hover'; -export const foregroundCtrlOnactivebrandPressedRaw = '--smtc-foreground-ctrl-onactivebrand-pressed'; -export const foregroundCtrlOnactivebrandDisabledRaw = '--smtc-foreground-ctrl-onactivebrand-disabled'; -export const foregroundCtrlOnoutlineRestRaw = '--smtc-foreground-ctrl-onoutline-rest'; -export const foregroundCtrlOnoutlineHoverRaw = '--smtc-foreground-ctrl-onoutline-hover'; -export const foregroundCtrlOnoutlinePressedRaw = '--smtc-foreground-ctrl-onoutline-pressed'; -export const foregroundCtrlOnoutlineDisabledRaw = '--smtc-foreground-ctrl-onoutline-disabled'; -export const foregroundCtrlOnsubtleRestRaw = '--smtc-foreground-ctrl-onsubtle-rest'; -export const foregroundCtrlOnsubtleHoverRaw = '--smtc-foreground-ctrl-onsubtle-hover'; -export const foregroundCtrlOnsubtlePressedRaw = '--smtc-foreground-ctrl-onsubtle-pressed'; -export const foregroundCtrlOnsubtleDisabledRaw = '--smtc-foreground-ctrl-onsubtle-disabled'; -export const foregroundCtrlOntransparentRestRaw = '--smtc-foreground-ctrl-ontransparent-rest'; -export const foregroundCtrlOntransparentHoverRaw = '--smtc-foreground-ctrl-ontransparent-hover'; -export const foregroundCtrlOntransparentPressedRaw = '--smtc-foreground-ctrl-ontransparent-pressed'; -export const foregroundCtrlOntransparentDisabledRaw = '--smtc-foreground-ctrl-ontransparent-disabled'; +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-colorblend'; -export const materialAcrylicDefaultLumblendRaw = '--smtc-material-acrylic-default-lumblend'; +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-colorblend'; -export const materialMicaDefaultLumblendRaw = '--smtc-material-mica-default-lumblend'; +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-colorblend'; -export const materialMicaDarkerLumblendRaw = '--smtc-material-mica-darker-lumblend'; +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-colorblend'; -export const materialMicaThinLumblendRaw = '--smtc-material-mica-thin-lumblend'; -export const iconthemeCtrlDefaultHoverRaw = '--smtc-icontheme-ctrl-default-hover'; -export const iconthemeCtrlDefaultPressedRaw = '--smtc-icontheme-ctrl-default-pressed'; -export const iconthemeCtrlSubtleRestRaw = '--smtc-icontheme-ctrl-subtle-rest'; -export const iconthemeCtrlSubtleHoverRaw = '--smtc-icontheme-ctrl-subtle-hover'; -export const iconthemeCtrlSubtlePressedRaw = '--smtc-icontheme-ctrl-subtle-pressed'; -export const iconthemeCtrlSubtleSelectedRaw = '--smtc-icontheme-ctrl-subtle-selected'; -export const iconthemeCtrlChevronDefaultRaw = '--smtc-icontheme-ctrl-chevron-default'; -export const iconthemeCtrlChevronSelectedRaw = '--smtc-icontheme-ctrl-chevron-selected'; +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'; @@ -243,9 +243,11 @@ 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-colorblend'; -export const materialAcrylicShellDefaultLumblendRaw = '--smtc-material-acrylic-shell-default-lumblend'; -export const backgroundCardOnsecondaryDefaultSelectedRaw = '--smtc-background-card-onsecondary-default-selected'; -export const shadowCtrlOndragKeyRaw = '--smtc-shadow-ctrl-ondrag-key'; -export const shadowCtrlOndragAmbientRaw = '--smtc-shadow-ctrl-ondrag-ambient'; +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 shadowCtrlOnDragKeyRaw = '--smtc-shadow-ctrl-on-drag-key'; +export const shadowCtrlOnDragAmbientRaw = '--smtc-shadow-ctrl-on-drag-ambient'; export const shadowWindowInactiveKeyRaw = '--smtc-shadow-window-inactive-key'; diff --git a/packages/semantic-tokens/tsconfig.spec.json b/packages/semantic-tokens/tsconfig.spec.json index 4d20fc98b71dd..b9bbf3e45ca8a 100644 --- a/packages/semantic-tokens/tsconfig.spec.json +++ b/packages/semantic-tokens/tsconfig.spec.json @@ -3,7 +3,9 @@ "compilerOptions": { "module": "CommonJS", "outDir": "dist", - "types": ["jest", "node"] + "types": ["jest", "node"], + "resolveJsonModule": true, + "esModuleInterop": true }, "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"] } diff --git a/packages/semantic-tokens/utils/fluentOverrides.test.ts b/packages/semantic-tokens/utils/fluentOverrides.test.ts new file mode 100644 index 0000000000000..a647a085f76fb --- /dev/null +++ b/packages/semantic-tokens/utils/fluentOverrides.test.ts @@ -0,0 +1,11 @@ +import { fluentOverrides } from '../src/fluentOverrides'; +import tokens from '../scripts/tokens.json'; + +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 => { + expect(tokens[fluentOverrideKey as keyof typeof tokens]).toBeTruthy(); + }); + }); +}); diff --git a/packages/semantic-tokens/utils/toCamelCase.test.ts b/packages/semantic-tokens/utils/toCamelCase.test.ts index 525205aa62319..efda9fb113798 100644 --- a/packages/semantic-tokens/utils/toCamelCase.test.ts +++ b/packages/semantic-tokens/utils/toCamelCase.test.ts @@ -2,7 +2,16 @@ import { toCamelCase } from './toCamelCase'; describe('toCamelCase', () => { it('Splits and camel cases strings separated by forward slash', () => { - // We use path.sep as it is platform dependent 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 index 86c253287e1fe..9bd0a29ee59da 100644 --- a/packages/semantic-tokens/utils/toCamelCase.ts +++ b/packages/semantic-tokens/utils/toCamelCase.ts @@ -4,10 +4,14 @@ export const toCamelCase = (str: string) => { .map((word: string, index: number) => { // If it is the first word make sure to lowercase all the chars. if (index === 0) { - return word.toLowerCase(); + if (word === 'CTRL' || word === 'STATUS') { + // 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).toLowerCase(); + return word.charAt(0).toUpperCase() + word.slice(1); }) .join(''); }; From a8fc02ac2466bd0246804e40a3cfaf03f0f67f65 Mon Sep 17 00:00:00 2001 From: Xue <39594459+etudie@users.noreply.github.com> Date: Wed, 14 May 2025 14:38:25 -0400 Subject: [PATCH 09/66] Semantic Tokens: Progress Bar (#34403) Co-authored-by: Mitch-At-Work --- ...-7802143c-d54f-4bd3-9e8e-075ca4cff496.json | 7 ++++ .../useProgressBarStyles.styles.ts | 36 ++++++++++--------- .../etc/semantic-tokens.api.md | 22 ++++++------ .../src/components/progress/tokens.ts | 15 ++++---- .../semantic-tokens/src/control/tokens.ts | 12 ++++--- .../semantic-tokens/src/fluentOverrides.ts | 11 ++++++ packages/semantic-tokens/src/legacy/tokens.ts | 35 ++++++++++++++++++ 7 files changed, 99 insertions(+), 39 deletions(-) create mode 100644 change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json diff --git a/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json b/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json new file mode 100644 index 0000000000000..3c7c5f32adfff --- /dev/null +++ b/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Feat: Add semantic tokens to Progress Bar", + "packageName": "@fluentui/react-progress", + "email": "xuehua@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts b/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts index 2053cbc6649df..7b052bc146613 100644 --- a/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts +++ b/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts @@ -1,4 +1,5 @@ import { makeStyles, mergeClasses } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; import { tokens } from '@fluentui/react-theme'; import type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -12,11 +13,6 @@ export const progressBarClassNames: SlotClassNames = { // This prevents animations on reset to 0 scenarios. const ZERO_THRESHOLD = 0.01; -const barThicknessValues = { - medium: '2px', - large: '4px', -}; - const indeterminateProgressBar = { '0%': { left: '-33%', // matches indeterminate bar width @@ -44,7 +40,7 @@ const indeterminateProgressBarReducedMotion = { const useRootStyles = makeStyles({ root: { display: 'block', - backgroundColor: tokens.colorNeutralBackground6, + backgroundColor: semanticTokens.ctrlProgressBackgroundEmpty, width: '100%', overflow: 'hidden', @@ -53,16 +49,16 @@ const useRootStyles = makeStyles({ }, }, rounded: { - borderRadius: tokens.borderRadiusMedium, + borderRadius: semanticTokens.ctrlProgressCorner, }, square: { - borderRadius: tokens.borderRadiusNone, + borderRadius: semanticTokens.cornerZero, }, medium: { - height: barThicknessValues.medium, + height: semanticTokens.ctrlProgressHeightEmpty, }, large: { - height: barThicknessValues.large, + height: semanticTokens.ctrlProgressLgHeightEmpty, }, }); @@ -75,7 +71,12 @@ const useBarStyles = makeStyles({ backgroundColor: 'Highlight', }, borderRadius: 'inherit', - height: '100%', + }, + medium: { + height: semanticTokens.ctrlProgressHeightFilled, + }, + large: { + height: semanticTokens.ctrlProgressLgHeightFilled, }, nonZeroDeterminate: { transitionProperty: 'width', @@ -87,9 +88,9 @@ const useBarStyles = makeStyles({ position: 'relative', backgroundImage: `linear-gradient( to right, - ${tokens.colorNeutralBackground6} 0%, + ${semanticTokens.ctrlProgressBackgroundEmpty} 0%, ${tokens.colorTransparentBackground} 50%, - ${tokens.colorNeutralBackground6} 100% + ${semanticTokens.ctrlProgressBackgroundEmpty} 100% )`, animationName: indeterminateProgressBar, animationDuration: '3s', @@ -104,17 +105,17 @@ const useBarStyles = makeStyles({ }, brand: { - backgroundColor: tokens.colorCompoundBrandBackground, + backgroundColor: semanticTokens.ctrlProgressBackgroundFilled, }, error: { - backgroundColor: tokens.colorPaletteRedBackground3, + backgroundColor: semanticTokens.statusDangerBackground, }, warning: { - backgroundColor: tokens.colorPaletteDarkOrangeBackground3, + backgroundColor: semanticTokens.statusWarningBackground, }, success: { - backgroundColor: tokens.colorPaletteGreenBackground3, + backgroundColor: semanticTokens.statusSuccessBackground, }, }); @@ -141,6 +142,7 @@ export const useProgressBarStyles_unstable = (state: ProgressBarState): Progress progressBarClassNames.bar, barStyles.base, barStyles.brand, + barStyles[thickness], value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 7d25223a6bb61..eebced2d2b4c1 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -623,7 +623,7 @@ export const cornerWindowDefault = "var(--smtc-corner-window-default)"; export const cornerWindowDefaultRaw = "--smtc-corner-window-default"; // @public (undocumented) -export const cornerZero = "var(--smtc-corner-zero)"; +export const cornerZero = "var(--smtc-corner-zero, var(--borderRadiusNone))"; // @public (undocumented) export const cornerZeroRaw = "--smtc-corner-zero"; @@ -2171,43 +2171,43 @@ export const ctrlLiteFilterStrokeWidthSelected = "var(--smtc-ctrl-lite-filter-st export const ctrlLiteFilterStrokeWidthSelectedRaw = "--smtc-ctrl-lite-filter-stroke-width-selected"; // @public (undocumented) -export const ctrlProgressBackgroundEmpty = "var(--smtc-ctrl-progress-background-empty)"; +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))"; +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))"; +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))"; +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)"; +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))"; +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)"; +export const ctrlProgressLgHeightFilled = "var(--smtc-ctrl-progress-lg-height-filled, 100%)"; // @public (undocumented) export const ctrlProgressLgHeightFilledRaw = "--smtc-ctrl-progress-lg-height-filled"; @@ -3773,7 +3773,7 @@ export const statusBrandTintStroke = "var(--smtc-status-brand-tint-stroke)"; export const statusBrandTintStrokeRaw = "--smtc-status-brand-tint-stroke"; // @public (undocumented) -export const statusDangerBackground = "var(--smtc-status-danger-background)"; +export const statusDangerBackground = "var(--smtc-status-danger-background, var(--colorPaletteRedBackground3))"; // @public (undocumented) export const statusDangerBackgroundRaw = "--smtc-status-danger-background"; @@ -3923,7 +3923,7 @@ export const statusOofForeground = "var(--smtc-status-oof-foreground)"; export const statusOofForegroundRaw = "--smtc-status-oof-foreground"; // @public (undocumented) -export const statusSuccessBackground = "var(--smtc-status-success-background)"; +export const statusSuccessBackground = "var(--smtc-status-success-background, var(--colorPaletteGreenBackground3))"; // @public (undocumented) export const statusSuccessBackgroundRaw = "--smtc-status-success-background"; @@ -3959,7 +3959,7 @@ export const statusSuccessTintStroke = "var(--smtc-status-success-tint-stroke)"; export const statusSuccessTintStrokeRaw = "--smtc-status-success-tint-stroke"; // @public (undocumented) -export const statusWarningBackground = "var(--smtc-status-warning-background)"; +export const statusWarningBackground = "var(--smtc-status-warning-background, var(--colorPaletteDarkOrangeBackground3))"; // @public (undocumented) export const statusWarningBackgroundRaw = "--smtc-status-warning-background"; diff --git a/packages/semantic-tokens/src/components/progress/tokens.ts b/packages/semantic-tokens/src/components/progress/tokens.ts index 7f654e6f2a140..a0bf4ae8289db 100644 --- a/packages/semantic-tokens/src/components/progress/tokens.ts +++ b/packages/semantic-tokens/src/components/progress/tokens.ts @@ -1,5 +1,6 @@ // 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, @@ -12,12 +13,12 @@ import { ctrlProgressLgHeightEmptyRaw, } from './variables'; -export const ctrlProgressBackgroundEmpty = `var(${ctrlProgressBackgroundEmptyRaw})`; -export const ctrlProgressBackgroundFilled = `var(${ctrlProgressBackgroundFilledRaw}, var(${backgroundCtrlBrandRestRaw}))`; -export const ctrlProgressCorner = `var(${ctrlProgressCornerRaw}, var(${cornerCircularRaw}))`; -export const ctrlProgressHeightFilled = `var(${ctrlProgressHeightFilledRaw})`; -export const ctrlProgressHeightEmpty = `var(${ctrlProgressHeightEmptyRaw}, var(${ctrlProgressHeightFilledRaw}))`; +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})`; -export const ctrlProgressLgHeightEmpty = `var(${ctrlProgressLgHeightEmptyRaw}, var(${ctrlProgressLgHeightFilledRaw}))`; +export const ctrlProgressLgHeightFilled = `var(${ctrlProgressLgHeightFilledRaw}, 100%)`; +export const ctrlProgressLgHeightEmpty = `var(${ctrlProgressLgHeightEmptyRaw}, var(${ctrlProgressLgHeightFilledRaw}, 4px))`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index 8ac2c4f8d1f3c..6d6b843959a58 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -4,7 +4,11 @@ import { fontFamilyBase, fontWeightRegular, strokeWidthThin, + borderRadiusNone, colorNeutralForegroundDisabled, + colorPaletteRedBackground3, + colorPaletteDarkOrangeBackground3, + colorPaletteGreenBackground3, } from '../legacy/tokens'; import { textGlobalDisplay1FontSizeRaw, @@ -336,7 +340,7 @@ export const backgroundCtrlSubtleHover = `var(${backgroundCtrlSubtleHoverRaw})`; export const backgroundCtrlSubtlePressed = `var(${backgroundCtrlSubtlePressedRaw})`; export const backgroundFlyoutLumBlend = `var(${backgroundFlyoutLumBlendRaw})`; export const backgroundFlyoutColorBlend = `var(${backgroundFlyoutColorBlendRaw})`; -export const cornerZero = `var(${cornerZeroRaw})`; +export const cornerZero = `var(${cornerZeroRaw}, ${borderRadiusNone})`; export const cornerBezel = `var(${cornerBezelRaw})`; export const cornerWindowDefault = `var(${cornerWindowDefaultRaw})`; export const cornerFlyoutRest = `var(${cornerFlyoutRestRaw})`; @@ -362,15 +366,15 @@ export const iconThemeCtrlDefaultRest = `var(${iconThemeCtrlDefaultRestRaw})`; export const iconThemeCtrlDefaultSelected = `var(${iconThemeCtrlDefaultSelectedRaw})`; export const statusBrandTintBackground = `var(${statusBrandTintBackgroundRaw})`; export const statusBrandTintStroke = `var(${statusBrandTintStrokeRaw})`; -export const statusDangerBackground = `var(${statusDangerBackgroundRaw})`; +export const statusDangerBackground = `var(${statusDangerBackgroundRaw}, ${colorPaletteRedBackground3})`; export const statusDangerTintBackground = `var(${statusDangerTintBackgroundRaw})`; export const statusDangerTintStroke = `var(${statusDangerTintStrokeRaw})`; export const statusDangerTintForeground = `var(${statusDangerTintForegroundRaw})`; -export const statusWarningBackground = `var(${statusWarningBackgroundRaw})`; +export const statusWarningBackground = `var(${statusWarningBackgroundRaw}, ${colorPaletteDarkOrangeBackground3})`; export const statusWarningTintBackground = `var(${statusWarningTintBackgroundRaw})`; export const statusWarningTintStroke = `var(${statusWarningTintStrokeRaw})`; export const statusWarningTintForeground = `var(${statusWarningTintForegroundRaw})`; -export const statusSuccessBackground = `var(${statusSuccessBackgroundRaw})`; +export const statusSuccessBackground = `var(${statusSuccessBackgroundRaw}, ${colorPaletteGreenBackground3})`; export const statusSuccessTintBackground = `var(${statusSuccessTintBackgroundRaw})`; export const statusSuccessTintStroke = `var(${statusSuccessTintStrokeRaw})`; export const statusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw})`; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 8b99894366fd7..271267472fb10 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -11,6 +11,7 @@ export type FluentOverrideValue = export type FluentOverrides = Record; export const fluentOverrides: FluentOverrides = { + cornerZero: { f2Token: 'borderRadiusNone' }, ctrlFocusOuterStroke: { f2Token: 'colorStrokeFocus2' }, ctrlLinkForegroundBrandHover: { f2Token: 'colorBrandForegroundLinkHover' }, ctrlLinkForegroundBrandPressed: { f2Token: 'colorBrandForegroundLinkPressed' }, @@ -18,7 +19,17 @@ export const fluentOverrides: FluentOverrides = { ctrlLinkForegroundNeutralHover: { f2Token: 'colorNeutralForeground2Hover' }, ctrlLinkForegroundNeutralPressed: { f2Token: 'colorNeutralForeground2Pressed' }, ctrlLinkForegroundNeutralRest: { f2Token: 'colorNeutralForeground2' }, + ctrlProgressBackgroundEmpty: { f2Token: 'colorNeutralBackground6' }, + ctrlProgressBackgroundFilled: { f2Token: 'colorCompoundBrandBackground' }, + ctrlProgressCorner: { f2Token: 'borderRadiusMedium' }, + ctrlProgressHeightEmpty: { rawValue: '2px' }, + ctrlProgressHeightFilled: { rawValue: '100%' }, + ctrlProgressLgHeightEmpty: { rawValue: '4px' }, + ctrlProgressLgHeightFilled: { rawValue: '100%' }, foregroundCtrlNeutralPrimaryDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + statusDangerBackground: { f2Token: 'colorPaletteRedBackground3' }, + statusSuccessBackground: { f2Token: 'colorPaletteGreenBackground3' }, + statusWarningBackground: { f2Token: 'colorPaletteDarkOrangeBackground3' }, strokeWidthDefault: { f2Token: 'strokeWidthThin' }, textGlobalBody3FontSize: { f2Token: 'fontSizeBase300' }, textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' }, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 15c6fe0d50c66..e07f8f67a34ba 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -1,4 +1,9 @@ // 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#borderRadiusNone | `borderRadiusNone`} design token. + * @public + */ +export const borderRadiusNone = 'var(--borderRadiusNone)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorStrokeFocus2 | `colorStrokeFocus2`} design token. * @public @@ -34,11 +39,41 @@ export const colorNeutralForeground2Pressed = 'var(--colorNeutralForeground2Pres * @public */ export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)'; +/** + * 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#colorCompoundBrandBackground | `colorCompoundBrandBackground`} design token. + * @public + */ +export const colorCompoundBrandBackground = 'var(--colorCompoundBrandBackground)'; +/** + * 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#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token. * @public */ export const colorNeutralForegroundDisabled = 'var(--colorNeutralForegroundDisabled)'; +/** + * 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#colorPaletteGreenBackground3 | `colorPaletteGreenBackground3`} design token. + * @public + */ +export const colorPaletteGreenBackground3 = 'var(--colorPaletteGreenBackground3)'; +/** + * 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#strokeWidthThin | `strokeWidthThin`} design token. * @public From cec0fd5e077780df5d917096b38a82e220ac08ed Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 15 May 2025 11:12:36 -0700 Subject: [PATCH 10/66] Extended-tokens: Fix regressions from new JSON refactor (#34458) --- packages/semantic-tokens/etc/semantic-tokens.api.md | 4 ++-- packages/semantic-tokens/scripts/tokenGen.ts | 6 +----- packages/semantic-tokens/src/components/focus/tokens.ts | 6 +++--- packages/semantic-tokens/src/fluentOverrides.ts | 3 ++- packages/semantic-tokens/src/legacy/tokens.ts | 5 +++++ 5 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index eebced2d2b4c1..c6c07c98421c7 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -1553,7 +1553,7 @@ export const ctrlFabShadowRestKey = "var(--smtc-ctrl-fab-shadow-rest-key)"; export const ctrlFabShadowRestKeyRaw = "--smtc-ctrl-fab-shadow-rest-key"; // @public (undocumented) -export const ctrlFocusInnerStroke = "var(--smtc-ctrl-focus-inner-stroke)"; +export const ctrlFocusInnerStroke = "var(--smtc-ctrl-focus-inner-stroke, var(--colorStrokeFocus2))"; // @public (undocumented) export const ctrlFocusInnerStrokeRaw = "--smtc-ctrl-focus-inner-stroke"; @@ -1565,7 +1565,7 @@ export const ctrlFocusInnerStrokeWidth = "var(--smtc-ctrl-focus-inner-stroke-wid 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(--colorStrokeFocus2)))"; +export const ctrlFocusOuterStroke = "var(--smtc-ctrl-focus-outer-stroke, var(--smtc-background-ctrl-brand-rest, var(--colorTransparentStroke)))"; // @public (undocumented) export const ctrlFocusOuterStrokeRaw = "--smtc-ctrl-focus-outer-stroke"; diff --git a/packages/semantic-tokens/scripts/tokenGen.ts b/packages/semantic-tokens/scripts/tokenGen.ts index 88cfa44f55490..4e9e402b641c0 100644 --- a/packages/semantic-tokens/scripts/tokenGen.ts +++ b/packages/semantic-tokens/scripts/tokenGen.ts @@ -47,7 +47,7 @@ const isInvalidToken = (token: string) => { return true; } // Blacklist for non-valid tokens - if (token.includes('Figmaonly') || token.startsWith('null')) { + if (token.includes('Figmaonly') || token.toLocaleLowerCase().startsWith('null')) { // Superfluous tokens - SKIP return true; } @@ -142,10 +142,6 @@ const getResolvedToken = (token: string, tokenData: Token, tokenNameRaw: string) )}, ${escapeMixedInlineToken(fluentFallback)}))`; } - if (fluentFallback && tokenData.nullable) { - return `var(${escapeInlineToken(tokenNameRaw)}, var(${escapeMixedInlineToken(fluentFallback)}}, unset))`; - } - if (fluentFallback) { return `var(${escapeInlineToken(tokenNameRaw)}, ${escapeMixedInlineToken(fluentFallback)})`; } diff --git a/packages/semantic-tokens/src/components/focus/tokens.ts b/packages/semantic-tokens/src/components/focus/tokens.ts index 93475f34e7fbe..7598d8ad13674 100644 --- a/packages/semantic-tokens/src/components/focus/tokens.ts +++ b/packages/semantic-tokens/src/components/focus/tokens.ts @@ -1,6 +1,6 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE import { strokeWidthDefaultRaw, backgroundCtrlBrandRestRaw } from '../../control/variables'; -import { colorStrokeFocus2 } from '../../legacy/tokens'; +import { colorStrokeFocus2, colorTransparentStroke } from '../../legacy/tokens'; import { ctrlFocusInnerStrokeWidthRaw, ctrlFocusInnerStrokeRaw, @@ -9,6 +9,6 @@ import { } from './variables'; export const ctrlFocusInnerStrokeWidth = `var(${ctrlFocusInnerStrokeWidthRaw}, var(${strokeWidthDefaultRaw}))`; -export const ctrlFocusInnerStroke = `var(${ctrlFocusInnerStrokeRaw})`; +export const ctrlFocusInnerStroke = `var(${ctrlFocusInnerStrokeRaw}, ${colorStrokeFocus2})`; export const ctrlFocusOuterStrokeWidth = `var(${ctrlFocusOuterStrokeWidthRaw})`; -export const ctrlFocusOuterStroke = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorStrokeFocus2}))`; +export const ctrlFocusOuterStroke = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorTransparentStroke}))`; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 271267472fb10..8202bf94a1c86 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -12,7 +12,8 @@ export type FluentOverrides = Record; export const fluentOverrides: FluentOverrides = { cornerZero: { f2Token: 'borderRadiusNone' }, - ctrlFocusOuterStroke: { f2Token: 'colorStrokeFocus2' }, + ctrlFocusInnerStroke: { f2Token: 'colorStrokeFocus2' }, + ctrlFocusOuterStroke: { f2Token: 'colorTransparentStroke' }, ctrlLinkForegroundBrandHover: { f2Token: 'colorBrandForegroundLinkHover' }, ctrlLinkForegroundBrandPressed: { f2Token: 'colorBrandForegroundLinkPressed' }, ctrlLinkForegroundBrandRest: { f2Token: 'colorBrandForegroundLink' }, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index e07f8f67a34ba..ac932fcdc6546 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -9,6 +9,11 @@ export const borderRadiusNone = 'var(--borderRadiusNone)'; * @public */ export const colorStrokeFocus2 = 'var(--colorStrokeFocus2)'; +/** + * 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#colorBrandForegroundLinkHover | `colorBrandForegroundLinkHover`} design token. * @public From 5717832f4bc5111b1f2584af38b22cce9e075588 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 15 May 2025 12:13:14 -0700 Subject: [PATCH 11/66] Extended-tokens: Fix link focus reference (changed in latest JSON update) (#34459) --- .../library/src/components/Link/useLinkStyles.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts b/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts index 8485f886f53e9..0b4b739e3d09d 100644 --- a/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts +++ b/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts @@ -11,7 +11,7 @@ export const linkClassNames: SlotClassNames = { const useStyles = makeStyles({ focusIndicator: createCustomFocusIndicatorStyle({ - textDecorationColor: semanticTokens.ctrlFocusOuterStroke, + textDecorationColor: semanticTokens.ctrlFocusInnerStroke, textDecorationLine: 'underline', textDecorationStyle: 'double', outlineStyle: 'none', From e3e278e771fed687c041fe5b1db1a7663a660c52 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 15 May 2025 12:34:47 -0700 Subject: [PATCH 12/66] Semantic Tokens: React-text and react-label (#34350) --- ...-c07b8517-e9be-4633-bc25-ff642141d9cc.json | 7 ++ ...-eeaf75be-7606-437b-9af5-12a9b5f566b4.json | 7 ++ .../components/Label/useLabelStyles.styles.ts | 22 ++-- .../library/src/components/Text/Text.test.tsx | 76 +++++++------ .../components/Text/useTextStyles.styles.ts | 45 ++++---- .../etc/semantic-tokens.api.md | 42 +++---- .../semantic-tokens/src/control/tokens.ts | 60 ++++++---- .../semantic-tokens/src/fluentOverrides.ts | 21 ++++ packages/semantic-tokens/src/legacy/tokens.ts | 105 ++++++++++++++++++ .../semantic-tokens/src/optional/tokens.ts | 3 +- 10 files changed, 282 insertions(+), 106 deletions(-) create mode 100644 change/@fluentui-react-label-c07b8517-e9be-4633-bc25-ff642141d9cc.json create mode 100644 change/@fluentui-react-text-eeaf75be-7606-437b-9af5-12a9b5f566b4.json diff --git a/change/@fluentui-react-label-c07b8517-e9be-4633-bc25-ff642141d9cc.json b/change/@fluentui-react-label-c07b8517-e9be-4633-bc25-ff642141d9cc.json new file mode 100644 index 0000000000000..78854aa0f31c6 --- /dev/null +++ b/change/@fluentui-react-label-c07b8517-e9be-4633-bc25-ff642141d9cc.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Add semantic tokens", + "packageName": "@fluentui/react-label", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-text-eeaf75be-7606-437b-9af5-12a9b5f566b4.json b/change/@fluentui-react-text-eeaf75be-7606-437b-9af5-12a9b5f566b4.json new file mode 100644 index 0000000000000..089bed43987a6 --- /dev/null +++ b/change/@fluentui-react-text-eeaf75be-7606-437b-9af5-12a9b5f566b4.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Add semantic tokens", + "packageName": "@fluentui/react-text", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-label/library/src/components/Label/useLabelStyles.styles.ts b/packages/react-components/react-label/library/src/components/Label/useLabelStyles.styles.ts index 42d11b089720a..0391bd13ce7b4 100644 --- a/packages/react-components/react-label/library/src/components/Label/useLabelStyles.styles.ts +++ b/packages/react-components/react-label/library/src/components/Label/useLabelStyles.styles.ts @@ -2,6 +2,7 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import type { LabelSlots, LabelState } from './Label.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const labelClassNames: SlotClassNames = { root: 'fui-Label', @@ -13,35 +14,36 @@ export const labelClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { - fontFamily: tokens.fontFamilyBase, - color: tokens.colorNeutralForeground1, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + color: semanticTokens.foregroundContentNeutralPrimary, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, }, disabled: { - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, '@media (forced-colors: active)': { color: 'GrayText', }, }, required: { - color: tokens.colorPaletteRedForeground3, + color: semanticTokens.statusDangerTintForeground, paddingLeft: tokens.spacingHorizontalXS, }, small: { - fontSize: tokens.fontSizeBase200, - lineHeight: tokens.lineHeightBase200, + fontSize: semanticTokens.textGlobalCaption1FontSize, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, }, medium: { - fontSize: tokens.fontSizeBase300, - lineHeight: tokens.lineHeightBase300, + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, }, large: { - fontSize: tokens.fontSizeBase400, - lineHeight: tokens.lineHeightBase400, + fontSize: semanticTokens.textGlobalBody2FontSize, + lineHeight: semanticTokens.textGlobalBody2LineHeight, fontWeight: tokens.fontWeightSemibold, }, diff --git a/packages/react-components/react-text/library/src/components/Text/Text.test.tsx b/packages/react-components/react-text/library/src/components/Text/Text.test.tsx index b5ebefe48c1aa..ae2e55e2d28bb 100644 --- a/packages/react-components/react-text/library/src/components/Text/Text.test.tsx +++ b/packages/react-components/react-text/library/src/components/Text/Text.test.tsx @@ -33,10 +33,10 @@ describe('Text', () => { const textElement = getByText('Test'); expect(textElement.nodeName).toBe('SPAN'); expect(textElement).toHaveStyle(` - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-size: var(--smtc-text-global-body3-font-size, var(--fontSizeBase300)); + font-family: var(--smtc-text-style-default-regular-font-family, var(--fontFamilyBase)); + font-weight: var(--smtc-text-style-default-regular-weight, var(--fontWeightRegular)); + line-height: var(--smtc-text-global-body3-line-height, var(--lineHeightBase300)); display: inline; text-align: start; white-space: normal; @@ -114,51 +114,63 @@ describe('Text', () => { }); it.each([ - [100, 'Base', '100'], - [200, 'Base', '200'], - [300, 'Base', '300'], - [400, 'Base', '400'], - [500, 'Base', '500'], - [600, 'Base', '600'], - [700, 'Hero', '700'], - [800, 'Hero', '800'], - [900, 'Hero', '900'], - [1000, 'Hero', '1000'], - ] as const)('applies the %s token sizing styles', (sizeToken, expectedPrefix, expectedValue) => { + [100, 'Base', '100', '--smtc-text-global-caption2'], + [200, 'Base', '200', '--smtc-text-global-caption1'], + [300, 'Base', '300', '--smtc-text-global-body3'], + [400, 'Base', '400', '--smtc-text-global-body2'], + [500, 'Base', '500', '--smtc-text-global-body1'], + [600, 'Base', '600', '--smtc-text-global-subtitle2'], + [700, 'Hero', '700', '--smtc-text-global-subtitle1'], + [800, 'Hero', '800', '--smtc-text-global-title2'], + [900, 'Hero', '900', '--smtc-text-global-title1'], + [1000, 'Hero', '1000', '--smtc-text-global-display2'], + ] as const)('applies the %s token sizing styles', (sizeToken, expectedPrefix, expectedValue, semanticToken) => { const { getByText } = render(Test); const textElement = getByText('Test'); expect(textElement).toHaveStyle(` - font-size: var(--fontSize${expectedPrefix}${expectedValue}); - line-height: var(--lineHeight${expectedPrefix}${expectedValue}); + font-size: var(${semanticToken + '-font-size'}, var(--fontSize${expectedPrefix}${expectedValue})); + line-height: var(${semanticToken + '-line-height'}, var(--lineHeight${expectedPrefix}${expectedValue})); `); }); it.each([ - ['base', 'Base'], - ['monospace', 'Monospace'], - ['numeric', 'Numeric'], - ] as const)('applies %s font', (input, expectedValue) => { + ['base', 'Base', '--smtc-text-style-default-regular-font-family'], + ['monospace', 'Monospace', null], + ['numeric', 'Numeric', null], + ] as const)('applies %s font', (input, expectedValue, semanticToken) => { const { getByText } = render(Test); const textElement = getByText('Test'); - expect(textElement).toHaveStyle(` - font-family: var(--fontFamily${expectedValue}); - `); + if (semanticToken) { + expect(textElement).toHaveStyle(` + font-family: var(${semanticToken}, var(--fontFamily${expectedValue})); + `); + } else { + expect(textElement).toHaveStyle(` + font-family: var(--fontFamily${expectedValue}); + `); + } }); it.each([ - ['regular', 'Regular'], - ['medium', 'Medium'], - ['semibold', 'Semibold'], - ['bold', 'Bold'], - ] as const)('applies %s weight', (input, expectedValue) => { + ['regular', 'Regular', '--smtc-text-style-default-regular-weight'], + ['medium', 'Medium', null], + ['semibold', 'Semibold', null], + ['bold', 'Bold', null], + ] as const)('applies %s weight', (input, expectedValue, semanticToken) => { const { getByText } = render(Test); const textElement = getByText('Test'); - expect(textElement).toHaveStyle(` - font-weight: var(--fontWeight${expectedValue}); - `); + if (semanticToken) { + expect(textElement).toHaveStyle(` + font-weight: var(${semanticToken}, var(--fontWeight${expectedValue})); + `); + } else { + expect(textElement).toHaveStyle(` + font-weight: var(--fontWeight${expectedValue}); + `); + } }); it.each([ diff --git a/packages/react-components/react-text/library/src/components/Text/useTextStyles.styles.ts b/packages/react-components/react-text/library/src/components/Text/useTextStyles.styles.ts index 6fd1bd586fa5c..8fb76a2cdc103 100644 --- a/packages/react-components/react-text/library/src/components/Text/useTextStyles.styles.ts +++ b/packages/react-components/react-text/library/src/components/Text/useTextStyles.styles.ts @@ -2,6 +2,7 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import type { TextSlots, TextState } from './Text.types'; import { SlotClassNames } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const textClassNames: SlotClassNames = { root: 'fui-Text', @@ -12,10 +13,10 @@ export const textClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { - fontFamily: tokens.fontFamilyBase, - fontSize: tokens.fontSizeBase300, - lineHeight: tokens.lineHeightBase300, - fontWeight: tokens.fontWeightRegular, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, textAlign: 'start', display: 'inline', whiteSpace: 'normal', @@ -45,40 +46,40 @@ const useStyles = makeStyles({ textDecorationLine: 'line-through underline', }, base100: { - fontSize: tokens.fontSizeBase100, - lineHeight: tokens.lineHeightBase100, + fontSize: semanticTokens.textGlobalCaption2FontSize, + lineHeight: semanticTokens.textGlobalCaption2LineHeight, }, base200: { - fontSize: tokens.fontSizeBase200, - lineHeight: tokens.lineHeightBase200, + fontSize: semanticTokens.textGlobalCaption1FontSize, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, }, base400: { - fontSize: tokens.fontSizeBase400, - lineHeight: tokens.lineHeightBase400, + fontSize: semanticTokens.textGlobalBody2FontSize, + lineHeight: semanticTokens.textGlobalBody2LineHeight, }, base500: { - fontSize: tokens.fontSizeBase500, - lineHeight: tokens.lineHeightBase500, + fontSize: semanticTokens.textGlobalBody1FontSize, + lineHeight: semanticTokens.textGlobalBody1LineHeight, }, base600: { - fontSize: tokens.fontSizeBase600, - lineHeight: tokens.lineHeightBase600, + fontSize: semanticTokens.textGlobalSubtitle2FontSize, + lineHeight: semanticTokens.textGlobalSubtitle2LineHeight, }, hero700: { - fontSize: tokens.fontSizeHero700, - lineHeight: tokens.lineHeightHero700, + fontSize: semanticTokens.textGlobalSubtitle1FontSize, + lineHeight: semanticTokens.textGlobalSubtitle1LineHeight, }, hero800: { - fontSize: tokens.fontSizeHero800, - lineHeight: tokens.lineHeightHero800, + fontSize: semanticTokens.textGlobalTitle2FontSize, + lineHeight: semanticTokens.textGlobalTitle2LineHeight, }, hero900: { - fontSize: tokens.fontSizeHero900, - lineHeight: tokens.lineHeightHero900, + fontSize: semanticTokens.textGlobalTitle1FontSize, + lineHeight: semanticTokens.textGlobalTitle1LineHeight, }, hero1000: { - fontSize: tokens.fontSizeHero1000, - lineHeight: tokens.lineHeightHero1000, + fontSize: semanticTokens.textGlobalDisplay2FontSize, + lineHeight: semanticTokens.textGlobalDisplay2LineHeight, }, monospace: { fontFamily: tokens.fontFamilyMonospace, diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index c6c07c98421c7..77616531b7106 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -2765,7 +2765,7 @@ export const foregroundContentBrandPrimary = "var(--smtc-foreground-content-bran 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))"; +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"; @@ -3797,7 +3797,7 @@ export const statusDangerTintBackground = "var(--smtc-status-danger-tint-backgro export const statusDangerTintBackgroundRaw = "--smtc-status-danger-tint-background"; // @public (undocumented) -export const statusDangerTintForeground = "var(--smtc-status-danger-tint-foreground)"; +export const statusDangerTintForeground = "var(--smtc-status-danger-tint-foreground, var(--colorPaletteRedForeground3))"; // @public (undocumented) export const statusDangerTintForegroundRaw = "--smtc-status-danger-tint-foreground"; @@ -4463,25 +4463,25 @@ export const textCtrlWeightSelected = "var(--smtc-text-ctrl-weight-selected)"; export const textCtrlWeightSelectedRaw = "--smtc-text-ctrl-weight-selected"; // @public (undocumented) -export const textGlobalBody1FontSize = "var(--smtc-text-global-body1-font-size)"; +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)"; +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)"; +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)"; +export const textGlobalBody2LineHeight = "var(--smtc-text-global-body2-line-height, var(--lineHeightBase400))"; // @public (undocumented) export const textGlobalBody2LineHeightRaw = "--smtc-text-global-body2-line-height"; @@ -4493,31 +4493,31 @@ export const textGlobalBody3FontSize = "var(--smtc-text-global-body3-font-size, export const textGlobalBody3FontSizeRaw = "--smtc-text-global-body3-font-size"; // @public (undocumented) -export const textGlobalBody3LineHeight = "var(--smtc-text-global-body3-line-height)"; +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)"; +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)"; +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)"; +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)"; +export const textGlobalCaption2LineHeight = "var(--smtc-text-global-caption2-line-height, var(--lineHeightBase100))"; // @public (undocumented) export const textGlobalCaption2LineHeightRaw = "--smtc-text-global-caption2-line-height"; @@ -4535,61 +4535,61 @@ export const textGlobalDisplay1LineHeight = "var(--smtc-text-global-display1-lin export const textGlobalDisplay1LineHeightRaw = "--smtc-text-global-display1-line-height"; // @public (undocumented) -export const textGlobalDisplay2FontSize = "var(--smtc-text-global-display2-font-size)"; +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)"; +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)"; +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)"; +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)"; +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)"; +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)"; +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)"; +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)"; +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)"; +export const textGlobalTitle2LineHeight = "var(--smtc-text-global-title2-line-height, var(--lineHeightHero800))"; // @public (undocumented) export const textGlobalTitle2LineHeightRaw = "--smtc-text-global-title2-line-height"; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index 6d6b843959a58..c6eccfce5229c 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -1,12 +1,32 @@ // 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, strokeWidthThin, borderRadiusNone, colorNeutralForegroundDisabled, colorPaletteRedBackground3, + colorPaletteRedForeground3, colorPaletteDarkOrangeBackground3, colorPaletteGreenBackground3, } from '../legacy/tokens'; @@ -218,26 +238,26 @@ import { export const textGlobalDisplay1FontSize = `var(${textGlobalDisplay1FontSizeRaw})`; export const textGlobalDisplay1LineHeight = `var(${textGlobalDisplay1LineHeightRaw})`; -export const textGlobalDisplay2FontSize = `var(${textGlobalDisplay2FontSizeRaw})`; -export const textGlobalDisplay2LineHeight = `var(${textGlobalDisplay2LineHeightRaw})`; -export const textGlobalTitle1FontSize = `var(${textGlobalTitle1FontSizeRaw})`; -export const textGlobalTitle1LineHeight = `var(${textGlobalTitle1LineHeightRaw})`; -export const textGlobalTitle2FontSize = `var(${textGlobalTitle2FontSizeRaw})`; -export const textGlobalTitle2LineHeight = `var(${textGlobalTitle2LineHeightRaw})`; -export const textGlobalSubtitle1FontSize = `var(${textGlobalSubtitle1FontSizeRaw})`; -export const textGlobalSubtitle1LineHeight = `var(${textGlobalSubtitle1LineHeightRaw})`; -export const textGlobalSubtitle2FontSize = `var(${textGlobalSubtitle2FontSizeRaw})`; -export const textGlobalSubtitle2LineHeight = `var(${textGlobalSubtitle2LineHeightRaw})`; -export const textGlobalBody1FontSize = `var(${textGlobalBody1FontSizeRaw})`; -export const textGlobalBody1LineHeight = `var(${textGlobalBody1LineHeightRaw})`; -export const textGlobalBody2FontSize = `var(${textGlobalBody2FontSizeRaw})`; -export const textGlobalBody2LineHeight = `var(${textGlobalBody2LineHeightRaw})`; +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})`; -export const textGlobalCaption1FontSize = `var(${textGlobalCaption1FontSizeRaw})`; -export const textGlobalCaption1LineHeight = `var(${textGlobalCaption1LineHeightRaw})`; -export const textGlobalCaption2FontSize = `var(${textGlobalCaption2FontSizeRaw})`; -export const textGlobalCaption2LineHeight = `var(${textGlobalCaption2LineHeightRaw})`; +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})`; @@ -369,7 +389,7 @@ export const statusBrandTintStroke = `var(${statusBrandTintStrokeRaw})`; export const statusDangerBackground = `var(${statusDangerBackgroundRaw}, ${colorPaletteRedBackground3})`; export const statusDangerTintBackground = `var(${statusDangerTintBackgroundRaw})`; export const statusDangerTintStroke = `var(${statusDangerTintStrokeRaw})`; -export const statusDangerTintForeground = `var(${statusDangerTintForegroundRaw})`; +export const statusDangerTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorPaletteRedForeground3})`; export const statusWarningBackground = `var(${statusWarningBackgroundRaw}, ${colorPaletteDarkOrangeBackground3})`; export const statusWarningTintBackground = `var(${statusWarningTintBackgroundRaw})`; export const statusWarningTintStroke = `var(${statusWarningTintStrokeRaw})`; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 8202bf94a1c86..bcf7a40e2a441 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -27,12 +27,33 @@ export const fluentOverrides: FluentOverrides = { ctrlProgressHeightFilled: { rawValue: '100%' }, ctrlProgressLgHeightEmpty: { rawValue: '4px' }, ctrlProgressLgHeightFilled: { rawValue: '100%' }, + foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' }, foregroundCtrlNeutralPrimaryDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, statusDangerBackground: { f2Token: 'colorPaletteRedBackground3' }, + statusDangerTintForeground: { f2Token: 'colorPaletteRedForeground3' }, statusSuccessBackground: { f2Token: 'colorPaletteGreenBackground3' }, statusWarningBackground: { f2Token: 'colorPaletteDarkOrangeBackground3' }, strokeWidthDefault: { f2Token: 'strokeWidthThin' }, + 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' }, textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' }, textStyleDefaultRegularWeight: { f2Token: 'fontWeightRegular' }, }; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index ac932fcdc6546..fbf63cdec71b7 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -59,6 +59,11 @@ export const colorCompoundBrandBackground = 'var(--colorCompoundBrandBackground) * @public */ export const borderRadiusMedium = 'var(--borderRadiusMedium)'; +/** + * 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#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token. * @public @@ -69,6 +74,11 @@ export const colorNeutralForegroundDisabled = 'var(--colorNeutralForegroundDisab * @public */ export const colorPaletteRedBackground3 = 'var(--colorPaletteRedBackground3)'; +/** + * 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#colorPaletteGreenBackground3 | `colorPaletteGreenBackground3`} design token. * @public @@ -84,11 +94,106 @@ export const colorPaletteDarkOrangeBackground3 = 'var(--colorPaletteDarkOrangeBa * @public */ export const strokeWidthThin = 'var(--strokeWidthThin)'; +/** + * 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#fontSizeBase300 | `fontSizeBase300`} design token. * @public */ export const fontSizeBase300 = 'var(--fontSizeBase300)'; +/** + * 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 diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index eeab3454710d6..395430d483602 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -81,6 +81,7 @@ import { shadowFlyoutAmbientRaw, shadowWindowActiveKeyRaw, } from '../control/variables'; +import { colorNeutralForeground1 } from '../legacy/tokens'; import { strokeCardOnPrimaryRestRaw, strokeCtrlOnBrandRestRaw, @@ -511,7 +512,7 @@ export const cornerCtrlSmHover = `var(${cornerCtrlSmHoverRaw}, var(${cornerCtrlS 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}))`; +export const foregroundContentNeutralPrimary = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1}))`; export const foregroundContentNeutralSecondary = `var(${foregroundContentNeutralSecondaryRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; export const foregroundContentBrandPrimary = `var(${foregroundContentBrandPrimaryRaw}, var(${foregroundCtrlBrandRestRaw}))`; export const foregroundCtrlNeutralPrimaryHover = `var(${foregroundCtrlNeutralPrimaryHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; From 86ae2fc07305b1aa2b93fe8475b8aa27baf0e69e Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Tue, 20 May 2025 10:32:17 -0700 Subject: [PATCH 13/66] Semantic-tokens: React-button (#34276) --- ...-25711b5f-c147-443a-8378-23edd3819c31.json | 7 + .../Button/useButtonStyles.styles.ts | 287 +++++++++++------- .../useCompoundButtonStyles.styles.ts | 51 ++-- .../MenuButton/useMenuButtonStyles.styles.ts | 25 +- .../useSplitButtonStyles.styles.ts | 40 ++- .../useToggleButtonStyles.styles.ts | 59 ++-- .../etc/semantic-tokens.api.md | 196 ++++++------ .../src/components/focus/tokens.ts | 6 +- .../semantic-tokens/src/control/tokens.ts | 102 ++++--- .../semantic-tokens/src/fluentOverrides.ts | 98 ++++++ packages/semantic-tokens/src/legacy/tokens.ts | 164 +++++++++- .../semantic-tokens/src/nullable/tokens.ts | 47 +-- .../semantic-tokens/src/optional/tokens.ts | 97 +++--- .../utils/fluentOverrides.test.ts | 1 + 14 files changed, 791 insertions(+), 389 deletions(-) create mode 100644 change/@fluentui-react-button-25711b5f-c147-443a-8378-23edd3819c31.json diff --git a/change/@fluentui-react-button-25711b5f-c147-443a-8378-23edd3819c31.json b/change/@fluentui-react-button-25711b5f-c147-443a-8378-23edd3819c31.json new file mode 100644 index 0000000000000..f3f0f5829deae --- /dev/null +++ b/change/@fluentui-react-button-25711b5f-c147-443a-8378-23edd3819c31.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: React-button semantic tokens", + "packageName": "@fluentui/react-button", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts index e2ed9b065e57f..7020d797ec5d9 100644 --- a/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts @@ -4,6 +4,7 @@ import { tokens } from '@fluentui/react-theme'; import { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { ButtonSlots, ButtonState } from './Button.types'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const buttonClassNames: SlotClassNames = { root: 'fui-Button', @@ -18,11 +19,15 @@ 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(${tokens.strokeWidthThin} + 0.25px)`; +const boxShadowStrokeWidthThinMoz = `calc(${semanticTokens.ctrlFocusInnerStrokeWidth} + 0.25px)`; const useRootBaseClassName = makeResetStyles({ alignItems: 'center', @@ -35,39 +40,39 @@ const useRootBaseClassName = makeResetStyles({ margin: 0, overflow: 'hidden', - backgroundColor: tokens.colorNeutralBackground1, - color: tokens.colorNeutralForeground1, - border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`, + backgroundColor: semanticTokens.backgroundCtrlNeutralRest, + color: semanticTokens.foregroundCtrlNeutralPrimaryRest, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeCtrlOnNeutralRest}`, - fontFamily: tokens.fontFamilyBase, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, outlineStyle: 'none', ':hover': { - backgroundColor: tokens.colorNeutralBackground1Hover, - borderColor: tokens.colorNeutralStroke1Hover, - color: tokens.colorNeutralForeground1Hover, + backgroundColor: semanticTokens.backgroundCtrlNeutralHover, + borderColor: semanticTokens.strokeCtrlOnNeutralHover, + color: semanticTokens.foregroundCtrlNeutralPrimaryHover, cursor: 'pointer', }, ':hover:active': { - backgroundColor: tokens.colorNeutralBackground1Pressed, - borderColor: tokens.colorNeutralStroke1Pressed, - color: tokens.colorNeutralForeground1Pressed, + backgroundColor: semanticTokens.backgroundCtrlNeutralPressed, + borderColor: semanticTokens.strokeCtrlOnNeutralPressed, + color: semanticTokens.foregroundCtrlNeutralPrimaryPressed, outlineStyle: 'none', }, - padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`, - minWidth: '96px', - borderRadius: tokens.borderRadiusMedium, + padding: `${semanticTokens.paddingCtrlTextTop} ${paddingHorizontalNoIcon} ${semanticTokens.paddingCtrlTextBottom} ${paddingHorizontalNoIcon}`, + minWidth: semanticTokens.sizeCtrlDefault, + borderRadius: semanticTokens.cornerCtrlRest, - fontSize: tokens.fontSizeBase300, - fontWeight: tokens.fontWeightSemibold, - lineHeight: tokens.lineHeightBase300, + 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, @@ -99,13 +104,12 @@ const useRootBaseClassName = makeResetStyles({ }, // Focus styles - ...createCustomFocusIndicatorStyle({ - borderColor: tokens.colorStrokeFocus2, - borderRadius: tokens.borderRadiusMedium, + borderColor: semanticTokens.ctrlFocusInnerStroke, + borderRadius: semanticTokens.cornerCtrlRest, borderWidth: '1px', - outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`, - boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusOuterStroke}`, + boxShadow: `0 0 0 ${semanticTokens.ctrlFocusInnerStrokeWidth} ${semanticTokens.ctrlFocusInnerStroke} inset `, zIndex: 1, @@ -114,7 +118,7 @@ const useRootBaseClassName = makeResetStyles({ // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642) '@supports (-moz-appearance:button)': { ...createCustomFocusIndicatorStyle({ - boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} + boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.ctrlFocusInnerStroke} inset `, }), @@ -126,41 +130,47 @@ const useIconBaseClassName = makeResetStyles({ display: 'inline-flex', justifyContent: 'center', - fontSize: '20px', - height: '20px', - width: '20px', + fontSize: semanticTokens.sizeCtrlIcon, + height: semanticTokens.sizeCtrlIcon, + width: semanticTokens.sizeCtrlIcon, - [iconSpacingVar]: tokens.spacingHorizontalSNudge, + [iconSpacingVar]: `calc(${semanticTokens.gapInsideCtrlDefault} + ${semanticTokens.paddingCtrlTextSide})`, }); const useRootStyles = makeStyles({ // Appearance variations outline: { - backgroundColor: tokens.colorTransparentBackground, - + backgroundColor: semanticTokens.backgroundCtrlOutlineRest, + border: `${semanticTokens.strokeWidthCtrlOutlineRest} solid ${semanticTokens.strokeCtrlOnOutlineRest}`, + color: semanticTokens.foregroundCtrlOnOutlineRest, ':hover': { - backgroundColor: tokens.colorTransparentBackgroundHover, + backgroundColor: semanticTokens.backgroundCtrlOutlineHover, + border: `${semanticTokens.strokeWidthCtrlOutlineHover} solid ${semanticTokens.strokeCtrlOnOutlineHover}`, + color: semanticTokens.foregroundCtrlOnOutlineHover, }, ':hover:active': { - backgroundColor: tokens.colorTransparentBackgroundPressed, + backgroundColor: semanticTokens.backgroundCtrlOutlinePressed, + border: `${semanticTokens.strokeWidthCtrlOutlinePressed} solid ${semanticTokens.strokeCtrlOnOutlinePressed}`, + color: semanticTokens.foregroundCtrlOnOutlinePressed, }, }, + primary: { - backgroundColor: tokens.colorBrandBackground, - ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForegroundOnBrand, + backgroundColor: semanticTokens.backgroundCtrlBrandRest, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandRest), + color: semanticTokens.foregroundCtrlOnBrandRest, ':hover': { - backgroundColor: tokens.colorBrandBackgroundHover, - ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForegroundOnBrand, + backgroundColor: semanticTokens.backgroundCtrlBrandHover, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandHover), + color: semanticTokens.foregroundCtrlOnBrandHover, }, ':hover:active': { - backgroundColor: tokens.colorBrandBackgroundPressed, - ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForegroundOnBrand, + backgroundColor: semanticTokens.backgroundCtrlBrandPressed, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandPressed), + color: semanticTokens.foregroundCtrlOnBrandPressed, }, '@media (forced-colors: active)': { @@ -186,14 +196,17 @@ const useRootStyles = makeStyles({ /* The secondary styles are exactly the same as the base styles. */ }, subtle: { - backgroundColor: tokens.colorSubtleBackground, - ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2, + backgroundColor: semanticTokens.backgroundCtrlSubtleRest, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleRest), + color: semanticTokens.foregroundCtrlOnSubtleRest, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnSubtleRest, + }, ':hover': { - backgroundColor: tokens.colorSubtleBackgroundHover, - ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2Hover, + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleHover), + color: semanticTokens.foregroundCtrlOnSubtleHover, [`& .${iconFilledClassName}`]: { display: 'inline', }, @@ -201,14 +214,14 @@ const useRootStyles = makeStyles({ display: 'none', }, [`& .${buttonClassNames.icon}`]: { - color: tokens.colorNeutralForeground2BrandHover, + color: semanticTokens.foregroundCtrlIconOnSubtleHover, }, }, ':hover:active': { - backgroundColor: tokens.colorSubtleBackgroundPressed, - ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2Pressed, + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtlePressed), + color: semanticTokens.foregroundCtrlOnSubtlePressed, [`& .${iconFilledClassName}`]: { display: 'inline', }, @@ -216,7 +229,7 @@ const useRootStyles = makeStyles({ display: 'none', }, [`& .${buttonClassNames.icon}`]: { - color: tokens.colorNeutralForeground2BrandPressed, + color: semanticTokens.foregroundCtrlIconOnSubtlePressed, }, }, @@ -240,12 +253,12 @@ const useRootStyles = makeStyles({ transparent: { backgroundColor: tokens.colorTransparentBackground, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2, + color: semanticTokens.foregroundCtrlOnTransparentRest, ':hover': { backgroundColor: tokens.colorTransparentBackgroundHover, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2BrandHover, + color: semanticTokens.foregroundCtrlOnTransparentHover, [`& .${iconFilledClassName}`]: { display: 'inline', }, @@ -257,7 +270,7 @@ const useRootStyles = makeStyles({ ':hover:active': { backgroundColor: tokens.colorTransparentBackgroundPressed, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2BrandPressed, + color: semanticTokens.foregroundCtrlOnTransparentPressed, [`& .${iconFilledClassName}`]: { display: 'inline', }, @@ -279,60 +292,83 @@ const useRootStyles = makeStyles({ }, // Shape variations - circular: { borderRadius: tokens.borderRadiusCircular }, + circular: { borderRadius: semanticTokens.cornerCircular }, rounded: { /* The borderRadius rounded styles are handled in the size variations */ }, - square: { borderRadius: tokens.borderRadiusNone }, + square: { borderRadius: semanticTokens.cornerZero }, // Size variations small: { - minWidth: '64px', - padding: `${buttonSpacingSmall} ${tokens.spacingHorizontalS}`, - borderRadius: tokens.borderRadiusMedium, + minWidth: semanticTokens.sizeCtrlSmDefault, + padding: `${buttonSpacingSmall} ${paddingSmHorizontalNoIcon}`, + borderRadius: semanticTokens.cornerCtrlSmRest, - fontSize: tokens.fontSizeBase200, - fontWeight: tokens.fontWeightRegular, - lineHeight: tokens.lineHeightBase200, + fontSize: semanticTokens.textRampSmItemBodyFontSize, + fontWeight: semanticTokens.textCtrlButtonWeightDefault, + 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: '96px', - padding: `${buttonSpacingLarge} ${tokens.spacingHorizontalL}`, - borderRadius: tokens.borderRadiusMedium, + minWidth: semanticTokens.sizeCtrlLgDefault, + padding: `${buttonSpacingLarge} ${paddingLgHorizontalNoIcon}`, + borderRadius: semanticTokens.cornerCtrlLgRest, - fontSize: tokens.fontSizeBase400, - fontWeight: tokens.fontWeightSemibold, - lineHeight: tokens.lineHeightBase400, + 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: tokens.colorNeutralBackgroundDisabled, - ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), - color: tokens.colorNeutralForegroundDisabled, - + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, cursor: 'not-allowed', [`& .${buttonClassNames.icon}`]: { - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlIconOnNeutralDisabled, }, ':hover': { - backgroundColor: tokens.colorNeutralBackgroundDisabled, - ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), - color: tokens.colorNeutralForegroundDisabled, + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, cursor: 'not-allowed', @@ -343,14 +379,14 @@ const useRootDisabledStyles = makeStyles({ display: 'inline', }, [`& .${buttonClassNames.icon}`]: { - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlIconOnNeutralDisabled, }, }, ':hover:active': { - backgroundColor: tokens.colorNeutralBackgroundDisabled, - ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), - color: tokens.colorNeutralForegroundDisabled, + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, cursor: 'not-allowed', @@ -361,7 +397,7 @@ const useRootDisabledStyles = makeStyles({ display: 'inline', }, [`& .${buttonClassNames.icon}`]: { - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlIconOnNeutralDisabled, }, }, }, @@ -406,6 +442,8 @@ const useRootDisabledStyles = makeStyles({ // Appearance variations outline: { backgroundColor: tokens.colorTransparentBackground, + color: semanticTokens.foregroundCtrlOnOutlineDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnOutlineDisabled), ':hover': { backgroundColor: tokens.colorTransparentBackground, @@ -416,34 +454,42 @@ const useRootDisabledStyles = makeStyles({ }, }, primary: { - ...shorthands.borderColor('transparent'), + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandDisabled), ':hover': { - ...shorthands.borderColor('transparent'), + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandDisabled), }, ':hover:active': { - ...shorthands.borderColor('transparent'), + ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandDisabled), }, }, secondary: { - /* The secondary styles are exactly the same as the base styles. */ + color: semanticTokens.foregroundCtrlNeutralSecondaryDisabled, }, subtle: { - backgroundColor: tokens.colorTransparentBackground, - ...shorthands.borderColor('transparent'), + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + color: semanticTokens.foregroundCtrlOnSubtleDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleDisabled), + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlIconOnSubtleDisabled, + }, ':hover': { - backgroundColor: tokens.colorTransparentBackground, - ...shorthands.borderColor('transparent'), + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleDisabled), }, ':hover:active': { - backgroundColor: tokens.colorTransparentBackground, - ...shorthands.borderColor('transparent'), + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleDisabled), }, }, transparent: { + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.foregroundCtrlOnTransparentDisabled, + }, + color: semanticTokens.foregroundCtrlOnTransparentDisabled, backgroundColor: tokens.colorTransparentBackground, ...shorthands.borderColor('transparent'), @@ -461,58 +507,59 @@ const useRootDisabledStyles = makeStyles({ const useRootFocusStyles = makeStyles({ // Shape variations - circular: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }), + circular: createCustomFocusIndicatorStyle({ borderRadius: semanticTokens.cornerCircular }), rounded: { /* The rounded styles are exactly the same as the base styles. */ }, - square: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }), - + square: createCustomFocusIndicatorStyle({ borderRadius: semanticTokens.cornerZero }), // Primary styles primary: { ...createCustomFocusIndicatorStyle({ - ...shorthands.borderColor(tokens.colorStrokeFocus2), - boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`, + ...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 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`, - ...shorthands.borderColor(tokens.colorStrokeFocus2), + 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({ - boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`, + // 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} ${tokens.colorStrokeFocus2} inset`, + boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.strokeCtrlOnActiveBrandHover} inset`, }, }), }, }, - // Size variations - small: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusSmall }), + small: createCustomFocusIndicatorStyle({ + borderRadius: `calc(${semanticTokens.cornerCtrlSmRest} - ${semanticTokens.ctrlFocusOuterStrokeWidth})`, + }), medium: { /* defined in base styles */ }, - large: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusLarge }), + large: createCustomFocusIndicatorStyle({ + borderRadius: `calc(${semanticTokens.cornerCtrlLgRest} + ${semanticTokens.ctrlFocusOuterStrokeWidth})`, + }), }); const useRootIconOnlyStyles = makeStyles({ // Size variations small: { - padding: buttonSpacingSmallWithIcon, - + padding: `${buttonSpacingSmallWithIcon} ${semanticTokens.paddingCtrlSmHorizontalIconOnly}`, minWidth: '24px', maxWidth: '24px', }, medium: { - padding: buttonSpacingMedium, - + padding: `${buttonSpacingMedium} ${semanticTokens.paddingCtrlHorizontalIconOnly}`, minWidth: '32px', maxWidth: '32px', }, large: { - padding: buttonSpacingLargeWithIcon, + padding: `${buttonSpacingLargeWithIcon} ${semanticTokens.paddingCtrlLgHorizontalIconOnly}`, minWidth: '40px', maxWidth: '40px', @@ -522,21 +569,21 @@ const useRootIconOnlyStyles = makeStyles({ const useIconStyles = makeStyles({ // Size variations small: { - fontSize: '20px', - height: '20px', - width: '20px', + fontSize: semanticTokens.sizeCtrlSmIcon, + height: semanticTokens.sizeCtrlSmIcon, + width: semanticTokens.sizeCtrlSmIcon, - [iconSpacingVar]: tokens.spacingHorizontalXS, + [iconSpacingVar]: `calc(${semanticTokens.gapInsideCtrlSmDefault} + ${semanticTokens.paddingCtrlTextSide})`, }, medium: { /* defined in base styles */ }, large: { - fontSize: '24px', - height: '24px', - width: '24px', + fontSize: semanticTokens.sizeCtrlLgIcon, + height: semanticTokens.sizeCtrlLgIcon, + width: semanticTokens.sizeCtrlLgIcon, - [iconSpacingVar]: tokens.spacingHorizontalSNudge, + [iconSpacingVar]: `calc(${semanticTokens.gapInsideCtrlLgDefault} + ${semanticTokens.paddingCtrlTextSide})`, }, // Icon position variations @@ -569,8 +616,14 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => { 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 diff --git a/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts index accdc3b2d9f13..f8281ccf8225b 100644 --- a/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts @@ -1,4 +1,5 @@ import { tokens } from '@fluentui/react-theme'; +import * as semanticTokens from '@fluentui/semantic-tokens'; import { mergeClasses, makeStyles } from '@griffel/react'; import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -17,18 +18,18 @@ const useRootStyles = makeStyles({ height: 'auto', [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForeground2, + color: semanticTokens.foregroundCtrlNeutralSecondaryRest, }, ':hover': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForeground2Hover, + color: semanticTokens.foregroundCtrlNeutralSecondaryHover, }, }, ':hover:active': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForeground2Pressed, + color: semanticTokens.foregroundCtrlNeutralSecondaryPressed, }, }, }, @@ -56,18 +57,18 @@ const useRootStyles = makeStyles({ }, primary: { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForegroundOnBrand, + color: semanticTokens.foregroundCtrlOnBrandRest, }, ':hover': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForegroundOnBrand, + color: semanticTokens.foregroundCtrlOnBrandHover, }, }, ':hover:active': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForegroundOnBrand, + color: semanticTokens.foregroundCtrlOnBrandPressed, }, }, @@ -82,18 +83,18 @@ const useRootStyles = makeStyles({ }, subtle: { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForeground2, + color: semanticTokens.foregroundCtrlOnSubtleRest, }, ':hover': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForeground2Hover, + color: semanticTokens.foregroundCtrlOnSubtleHover, }, }, ':hover:active': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForeground2Pressed, + color: semanticTokens.foregroundCtrlOnSubtlePressed, }, }, @@ -112,18 +113,18 @@ const useRootStyles = makeStyles({ }, transparent: { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForeground2, + color: semanticTokens.foregroundCtrlOnTransparentRest, }, ':hover': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForeground2BrandHover, + color: semanticTokens.foregroundCtrlOnTransparentHover, }, }, ':hover:active': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForeground2BrandPressed, + color: semanticTokens.foregroundCtrlOnTransparentPressed, }, }, }, @@ -132,37 +133,37 @@ const useRootStyles = makeStyles({ small: { padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`, - fontSize: tokens.fontSizeBase300, - lineHeight: tokens.lineHeightBase300, + fontSize: semanticTokens.textRampItemBodyFontSize, + lineHeight: semanticTokens.textRampItemBodyLineHeight, }, medium: { padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`, - fontSize: tokens.fontSizeBase300, - lineHeight: tokens.lineHeightBase300, + fontSize: semanticTokens.textRampItemBodyFontSize, + lineHeight: semanticTokens.textRampItemBodyLineHeight, }, large: { padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`, - fontSize: tokens.fontSizeBase400, - lineHeight: tokens.lineHeightBase400, + fontSize: semanticTokens.textRampLgItemBodyFontSize, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, }, // Disabled styles disabled: { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, }, ':hover': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, }, }, ':hover:active': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, }, }, }, @@ -241,18 +242,18 @@ const useSecondaryContentStyles = makeStyles({ // Base styles base: { lineHeight: '100%', - fontWeight: tokens.fontWeightRegular, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, }, // Size variations small: { - fontSize: tokens.fontSizeBase200, + fontSize: semanticTokens.textRampSmItemBodyFontSize, }, medium: { - fontSize: tokens.fontSizeBase200, + fontSize: semanticTokens.textRampSmItemBodyFontSize, }, large: { - fontSize: tokens.fontSizeBase300, + fontSize: semanticTokens.textRampItemBodyFontSize, }, }); diff --git a/packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts index 635476a2407ec..f4a616e1d9d61 100644 --- a/packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts @@ -4,6 +4,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; import { mergeClasses, makeStyles, shorthands } from '@griffel/react'; import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles'; import type { MenuButtonSlots, MenuButtonState } from './MenuButton.types'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const menuButtonClassNames: SlotClassNames = { root: 'fui-MenuButton', @@ -24,8 +25,22 @@ const useRootExpandedStyles = makeStyles({ // Appearance variations outline: { ...shorthands.borderColor(tokens.colorNeutralStroke1Selected), - ...shorthands.borderWidth(tokens.strokeWidthThicker), + ...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, @@ -81,25 +96,25 @@ const useMenuIconStyles = makeStyles({ small: { fontSize: '12px', height: '12px', - lineHeight: tokens.lineHeightBase200, + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, width: '12px', }, medium: { fontSize: '12px', height: '12px', - lineHeight: tokens.lineHeightBase200, + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, width: '12px', }, large: { fontSize: '16px', height: '16px', - lineHeight: tokens.lineHeightBase400, + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, width: '16px', }, // Not-icon only notIconOnly: { - marginLeft: tokens.spacingHorizontalXS, + marginLeft: semanticTokens.gapInsideCtrlSmDefault, }, }); diff --git a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts index f5b9d126160cc..067cca7496436 100644 --- a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts @@ -1,8 +1,9 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; -import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { SplitButtonSlots, SplitButtonState } from './SplitButton.types'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { tokens } from '@fluentui/react-theme'; export const splitButtonClassNames: SlotClassNames = { root: 'fui-SplitButton', @@ -50,22 +51,39 @@ const useRootStyles = makeStyles({ // Appearance variations outline: { - /* No styles */ + [`& .${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: tokens.colorNeutralStrokeOnBrand, + borderRightColor: semanticTokens.strokeCtrlDividerOnBrand, }, ':hover': { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: tokens.colorNeutralStrokeOnBrand, + borderRightColor: semanticTokens.strokeCtrlDividerOnBrand, }, }, ':hover:active': { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: tokens.colorNeutralStrokeOnBrand, + borderRightColor: semanticTokens.strokeCtrlDividerOnBrand, }, }, @@ -92,18 +110,18 @@ const useRootStyles = makeStyles({ }, subtle: { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: tokens.colorTransparentBackground, + borderRightColor: semanticTokens.strokeCtrlDividerOnSubtle, }, ':hover': { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: tokens.colorTransparentBackgroundHover, + borderRightColor: semanticTokens.strokeCtrlDividerOnSubtle, }, }, ':hover:active': { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: tokens.colorTransparentBackgroundPressed, + borderRightColor: semanticTokens.strokeCtrlDividerOnSubtle, }, }, }, @@ -133,18 +151,18 @@ const useRootStyles = makeStyles({ // Disabled styles disabled: { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: tokens.colorNeutralStrokeDisabled, + borderRightColor: semanticTokens.strokeCtrlOnNeutralDisabled, }, ':hover': { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: tokens.colorNeutralStrokeDisabled, + borderRightColor: semanticTokens.strokeCtrlOnNeutralDisabled, }, }, ':hover:active': { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: tokens.colorNeutralStrokeDisabled, + borderRightColor: semanticTokens.strokeCtrlOnNeutralDisabled, }, }, }, diff --git a/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts index 34328b156211b..5fc811aa67285 100644 --- a/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts @@ -2,10 +2,11 @@ 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 { useButtonStyles_unstable } from '../Button/useButtonStyles.styles'; +import { buttonClassNames, useButtonStyles_unstable } from '../Button/useButtonStyles.styles'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { ButtonSlots } from '../Button/Button.types'; import type { ToggleButtonState } from './ToggleButton.types'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const toggleButtonClassNames: SlotClassNames = { root: 'fui-ToggleButton', @@ -16,10 +17,9 @@ const useRootCheckedStyles = makeStyles({ // Base styles base: { backgroundColor: tokens.colorNeutralBackground1Selected, - ...shorthands.borderColor(tokens.colorNeutralStroke1), + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralRest), color: tokens.colorNeutralForeground1Selected, - - ...shorthands.borderWidth(tokens.strokeWidthThin), + ...shorthands.borderWidth(semanticTokens.strokeWidthDefault), [`& .${iconFilledClassName}`]: { display: 'inline', @@ -29,15 +29,15 @@ const useRootCheckedStyles = makeStyles({ }, ':hover': { - backgroundColor: tokens.colorNeutralBackground1Hover, - ...shorthands.borderColor(tokens.colorNeutralStroke1Hover), - color: tokens.colorNeutralForeground1Hover, + backgroundColor: semanticTokens.backgroundCtrlNeutralHover, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralHover), + color: semanticTokens.foregroundCtrlNeutralPrimaryHover, }, ':hover:active': { - backgroundColor: tokens.colorNeutralBackground1Pressed, - ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed), - color: tokens.colorNeutralForeground1Pressed, + backgroundColor: semanticTokens.backgroundCtrlNeutralPressed, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralPressed), + color: semanticTokens.foregroundCtrlNeutralPrimaryPressed, }, }, @@ -67,23 +67,26 @@ const useRootCheckedStyles = makeStyles({ }, }, }, - // Appearance variations outline: { backgroundColor: tokens.colorTransparentBackgroundSelected, - ...shorthands.borderColor(tokens.colorNeutralStroke1), - ...shorthands.borderWidth(tokens.strokeWidthThicker), + ...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(tokens.colorNeutralStroke1), + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralRest), }), }, primary: { @@ -111,6 +114,10 @@ const useRootCheckedStyles = makeStyles({ ...shorthands.borderColor('transparent'), color: tokens.colorNeutralForeground2Selected, + [`& .${buttonClassNames.icon}`]: { + color: tokens.colorNeutralForeground2BrandSelected, + }, + ':hover': { backgroundColor: tokens.colorSubtleBackgroundHover, ...shorthands.borderColor('transparent'), @@ -145,20 +152,20 @@ const useRootCheckedStyles = makeStyles({ const useRootDisabledStyles = makeStyles({ // Base styles base: { - backgroundColor: tokens.colorNeutralBackgroundDisabled, - ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), - color: tokens.colorNeutralForegroundDisabled, + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, ':hover': { - backgroundColor: tokens.colorNeutralBackgroundDisabled, - ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), - color: tokens.colorNeutralForegroundDisabled, + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, }, ':hover:active': { - backgroundColor: tokens.colorNeutralBackgroundDisabled, - ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), - color: tokens.colorNeutralForegroundDisabled, + backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, }, }, @@ -181,16 +188,16 @@ const useRootDisabledStyles = makeStyles({ /* The secondary styles are exactly the same as the base styles. */ }, subtle: { - backgroundColor: tokens.colorTransparentBackground, + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, ...shorthands.borderColor('transparent'), ':hover': { - backgroundColor: tokens.colorTransparentBackgroundHover, + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, ...shorthands.borderColor('transparent'), }, ':hover:active': { - backgroundColor: tokens.colorTransparentBackgroundPressed, + backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, ...shorthands.borderColor('transparent'), }, }, diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 77616531b7106..f74abf1a10ff2 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -215,43 +215,43 @@ export const backgroundCtrlBrandDisabled = "var(--smtc-background-ctrl-brand-dis export const backgroundCtrlBrandDisabledRaw = "--smtc-background-ctrl-brand-disabled"; // @public (undocumented) -export const backgroundCtrlBrandHover = "var(--smtc-background-ctrl-brand-hover)"; +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)"; +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)"; +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)"; +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)"; +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)"; +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)"; +export const backgroundCtrlNeutralRest = "var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground1))"; // @public (undocumented) export const backgroundCtrlNeutralRestRaw = "--smtc-background-ctrl-neutral-rest"; @@ -263,19 +263,19 @@ export const backgroundCtrlOutlineDisabled = "var(--smtc-background-ctrl-outline export const backgroundCtrlOutlineDisabledRaw = "--smtc-background-ctrl-outline-disabled"; // @public (undocumented) -export const backgroundCtrlOutlineHover = "var(--smtc-background-ctrl-outline-hover, unset)"; +export const backgroundCtrlOutlineHover = "var(--smtc-background-ctrl-outline-hover, var(--colorTransparentBackground))"; // @public (undocumented) export const backgroundCtrlOutlineHoverRaw = "--smtc-background-ctrl-outline-hover"; // @public (undocumented) -export const backgroundCtrlOutlinePressed = "var(--smtc-background-ctrl-outline-pressed, unset)"; +export const backgroundCtrlOutlinePressed = "var(--smtc-background-ctrl-outline-pressed, var(--colorTransparentBackground))"; // @public (undocumented) export const backgroundCtrlOutlinePressedRaw = "--smtc-background-ctrl-outline-pressed"; // @public (undocumented) -export const backgroundCtrlOutlineRest = "var(--smtc-background-ctrl-outline-rest, unset)"; +export const backgroundCtrlOutlineRest = "var(--smtc-background-ctrl-outline-rest, var(--colorTransparentBackground))"; // @public (undocumented) export const backgroundCtrlOutlineRestRaw = "--smtc-background-ctrl-outline-rest"; @@ -317,13 +317,13 @@ export const backgroundCtrlShapeSafeNeutralRest = "var(--smtc-background-ctrl-sh export const backgroundCtrlShapeSafeNeutralRestRaw = "--smtc-background-ctrl-shape-safe-neutral-rest"; // @public (undocumented) -export const backgroundCtrlSubtleDisabled = "var(--smtc-background-ctrl-subtle-disabled, unset)"; +export const backgroundCtrlSubtleDisabled = "var(--smtc-background-ctrl-subtle-disabled, var(--colorTransparentBackground))"; // @public (undocumented) export const backgroundCtrlSubtleDisabledRaw = "--smtc-background-ctrl-subtle-disabled"; // @public (undocumented) -export const backgroundCtrlSubtleHover = "var(--smtc-background-ctrl-subtle-hover)"; +export const backgroundCtrlSubtleHover = "var(--smtc-background-ctrl-subtle-hover, var(--colorSubtleBackgroundHover))"; // @public (undocumented) export const backgroundCtrlSubtleHoverRaw = "--smtc-background-ctrl-subtle-hover"; @@ -335,13 +335,13 @@ export const backgroundCtrlSubtleHoverSplit = "var(--smtc-background-ctrl-subtle export const backgroundCtrlSubtleHoverSplitRaw = "--smtc-background-ctrl-subtle-hover-split"; // @public (undocumented) -export const backgroundCtrlSubtlePressed = "var(--smtc-background-ctrl-subtle-pressed)"; +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, unset)"; +export const backgroundCtrlSubtleRest = "var(--smtc-background-ctrl-subtle-rest, var(--colorSubtleBackground))"; // @public (undocumented) export const backgroundCtrlSubtleRestRaw = "--smtc-background-ctrl-subtle-rest"; @@ -503,7 +503,7 @@ export const cornerCardRest = "var(--smtc-corner-card-rest)"; export const cornerCardRestRaw = "--smtc-corner-card-rest"; // @public (undocumented) -export const cornerCircular = "var(--smtc-corner-circular)"; +export const cornerCircular = "var(--smtc-corner-circular, var(--borderRadiusCircular))"; // @public (undocumented) export const cornerCircularRaw = "--smtc-corner-circular"; @@ -527,7 +527,7 @@ export const cornerCtrlLgPressed = "var(--smtc-corner-ctrl-lg-pressed, var(--smt export const cornerCtrlLgPressedRaw = "--smtc-corner-ctrl-lg-pressed"; // @public (undocumented) -export const cornerCtrlLgRest = "var(--smtc-corner-ctrl-lg-rest)"; +export const cornerCtrlLgRest = "var(--smtc-corner-ctrl-lg-rest, var(--borderRadiusMedium))"; // @public (undocumented) export const cornerCtrlLgRestRaw = "--smtc-corner-ctrl-lg-rest"; @@ -539,7 +539,7 @@ export const cornerCtrlPressed = "var(--smtc-corner-ctrl-pressed, var(--smtc-cor export const cornerCtrlPressedRaw = "--smtc-corner-ctrl-pressed"; // @public (undocumented) -export const cornerCtrlRest = "var(--smtc-corner-ctrl-rest)"; +export const cornerCtrlRest = "var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium))"; // @public (undocumented) export const cornerCtrlRestRaw = "--smtc-corner-ctrl-rest"; @@ -557,7 +557,7 @@ export const cornerCtrlSmPressed = "var(--smtc-corner-ctrl-sm-pressed, var(--smt export const cornerCtrlSmPressedRaw = "--smtc-corner-ctrl-sm-pressed"; // @public (undocumented) -export const cornerCtrlSmRest = "var(--smtc-corner-ctrl-sm-rest)"; +export const cornerCtrlSmRest = "var(--smtc-corner-ctrl-sm-rest, var(--borderRadiusMedium))"; // @public (undocumented) export const cornerCtrlSmRestRaw = "--smtc-corner-ctrl-sm-rest"; @@ -1559,7 +1559,7 @@ export const ctrlFocusInnerStroke = "var(--smtc-ctrl-focus-inner-stroke, var(--c 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))"; +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"; @@ -1571,7 +1571,7 @@ export const ctrlFocusOuterStroke = "var(--smtc-ctrl-focus-outer-stroke, var(--s export const ctrlFocusOuterStrokeRaw = "--smtc-ctrl-focus-outer-stroke"; // @public (undocumented) -export const ctrlFocusOuterStrokeWidth = "var(--smtc-ctrl-focus-outer-stroke-width)"; +export const ctrlFocusOuterStrokeWidth = "var(--smtc-ctrl-focus-outer-stroke-width, var(--strokeWidthThick))"; // @public (undocumented) export const ctrlFocusOuterStrokeWidthRaw = "--smtc-ctrl-focus-outer-stroke-width"; @@ -2831,7 +2831,7 @@ export const foregroundCtrlHintDefault = "var(--smtc-foreground-ctrl-hint-defaul 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))"; +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"; @@ -2879,25 +2879,25 @@ export const foregroundCtrlIconOnOutlineRest = "var(--smtc-foreground-ctrl-icon- 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))"; +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))"; +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))"; +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))"; +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"; @@ -2909,43 +2909,43 @@ export const foregroundCtrlNeutralPrimaryDisabled = "var(--smtc-foreground-ctrl- 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))"; +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))"; +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)"; +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)"; +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))"; +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))"; +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)"; +export const foregroundCtrlNeutralSecondaryRest = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground2))"; // @public (undocumented) export const foregroundCtrlNeutralSecondaryRestRaw = "--smtc-foreground-ctrl-neutral-secondary-rest"; @@ -2981,91 +2981,91 @@ export const foregroundCtrlOnBrandDisabled = "var(--smtc-foreground-ctrl-on-bran 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))"; +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))"; +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)"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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"; @@ -3179,13 +3179,13 @@ export const gapBetweenTextSmall = "var(--smtc-gap-between-text-small, var(--smt export const gapBetweenTextSmallRaw = "--smtc-gap-between-text-small"; // @public (undocumented) -export const gapInsideCtrlDefault = "var(--smtc-gap-inside-ctrl-default)"; +export const gapInsideCtrlDefault = "var(--smtc-gap-inside-ctrl-default, var(--spacingHorizontalSNudge))"; // @public (undocumented) export const gapInsideCtrlDefaultRaw = "--smtc-gap-inside-ctrl-default"; // @public (undocumented) -export const gapInsideCtrlLgDefault = "var(--smtc-gap-inside-ctrl-lg-default)"; +export const gapInsideCtrlLgDefault = "var(--smtc-gap-inside-ctrl-lg-default, var(--spacingHorizontalSNudge))"; // @public (undocumented) export const gapInsideCtrlLgDefaultRaw = "--smtc-gap-inside-ctrl-lg-default"; @@ -3203,7 +3203,7 @@ export const gapInsideCtrlLgToSecondaryIcon = "var(--smtc-gap-inside-ctrl-lg-to- export const gapInsideCtrlLgToSecondaryIconRaw = "--smtc-gap-inside-ctrl-lg-to-secondary-icon"; // @public (undocumented) -export const gapInsideCtrlSmDefault = "var(--smtc-gap-inside-ctrl-sm-default)"; +export const gapInsideCtrlSmDefault = "var(--smtc-gap-inside-ctrl-sm-default, var(--spacingHorizontalXS))"; // @public (undocumented) export const gapInsideCtrlSmDefaultRaw = "--smtc-gap-inside-ctrl-sm-default"; @@ -3473,25 +3473,25 @@ export const paddingContentXxxLarge = "var(--smtc-padding-content-xxx-large)"; export const paddingContentXxxLargeRaw = "--smtc-padding-content-xxx-large"; // @public (undocumented) -export const paddingCtrlHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default)"; +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)"; +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)"; +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)"; +export const paddingCtrlLgHorizontalIconOnly = "var(--smtc-padding-ctrl-lg-horizontal-icon-only, 7px)"; // @public (undocumented) export const paddingCtrlLgHorizontalIconOnlyRaw = "--smtc-padding-ctrl-lg-horizontal-icon-only"; @@ -3515,13 +3515,13 @@ export const paddingCtrlLgToNestedControl = "var(--smtc-padding-ctrl-lg-to-neste export const paddingCtrlLgToNestedControlRaw = "--smtc-padding-ctrl-lg-to-nested-control"; // @public (undocumented) -export const paddingCtrlSmHorizontalDefault = "var(--smtc-padding-ctrl-sm-horizontal-default)"; +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)"; +export const paddingCtrlSmHorizontalIconOnly = "var(--smtc-padding-ctrl-sm-horizontal-icon-only, 1px)"; // @public (undocumented) export const paddingCtrlSmHorizontalIconOnlyRaw = "--smtc-padding-ctrl-sm-horizontal-icon-only"; @@ -3545,19 +3545,19 @@ export const paddingCtrlSmToNestedControl = "var(--smtc-padding-ctrl-sm-to-neste 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))"; +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)"; +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)"; +export const paddingCtrlTextTop = "var(--smtc-padding-ctrl-text-top, 5px)"; // @public (undocumented) export const paddingCtrlTextTopRaw = "--smtc-padding-ctrl-text-top"; @@ -3689,13 +3689,13 @@ export const shadowWindowInactiveKey = "var(--smtc-shadow-window-inactive-key, v export const shadowWindowInactiveKeyRaw = "--smtc-shadow-window-inactive-key"; // @public (undocumented) -export const sizeCtrlDefault = "var(--smtc-size-ctrl-default)"; +export const sizeCtrlDefault = "var(--smtc-size-ctrl-default, 96px)"; // @public (undocumented) export const sizeCtrlDefaultRaw = "--smtc-size-ctrl-default"; // @public (undocumented) -export const sizeCtrlIcon = "var(--smtc-size-ctrl-icon)"; +export const sizeCtrlIcon = "var(--smtc-size-ctrl-icon, 20px)"; // @public (undocumented) export const sizeCtrlIconRaw = "--smtc-size-ctrl-icon"; @@ -3707,25 +3707,25 @@ export const sizeCtrlIconSecondary = "var(--smtc-size-ctrl-icon-secondary)"; export const sizeCtrlIconSecondaryRaw = "--smtc-size-ctrl-icon-secondary"; // @public (undocumented) -export const sizeCtrlLgDefault = "var(--smtc-size-ctrl-lg-default)"; +export const sizeCtrlLgDefault = "var(--smtc-size-ctrl-lg-default, 96px)"; // @public (undocumented) export const sizeCtrlLgDefaultRaw = "--smtc-size-ctrl-lg-default"; // @public (undocumented) -export const sizeCtrlLgIcon = "var(--smtc-size-ctrl-lg-icon)"; +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)"; +export const sizeCtrlSmDefault = "var(--smtc-size-ctrl-sm-default, 64px)"; // @public (undocumented) export const sizeCtrlSmDefaultRaw = "--smtc-size-ctrl-sm-default"; // @public (undocumented) -export const sizeCtrlSmIcon = "var(--smtc-size-ctrl-sm-icon)"; +export const sizeCtrlSmIcon = "var(--smtc-size-ctrl-sm-icon, 20px)"; // @public (undocumented) export const sizeCtrlSmIconRaw = "--smtc-size-ctrl-sm-icon"; @@ -4061,7 +4061,7 @@ export const strokeCtrlDividerOnActiveBrandDisabledRaw = "--smtc-stroke-ctrl-div export const strokeCtrlDividerOnActiveBrandRaw = "--smtc-stroke-ctrl-divider-on-active-brand"; // @public (undocumented) -export const strokeCtrlDividerOnBrand = "var(--smtc-stroke-ctrl-divider-on-brand)"; +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))"; @@ -4085,7 +4085,7 @@ export const strokeCtrlDividerOnNeutralDisabledRaw = "--smtc-stroke-ctrl-divider export const strokeCtrlDividerOnNeutralRaw = "--smtc-stroke-ctrl-divider-on-neutral"; // @public (undocumented) -export const strokeCtrlDividerOnOutline = "var(--smtc-stroke-ctrl-divider-on-outline)"; +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))"; @@ -4097,7 +4097,7 @@ export const strokeCtrlDividerOnOutlineDisabledRaw = "--smtc-stroke-ctrl-divider export const strokeCtrlDividerOnOutlineRaw = "--smtc-stroke-ctrl-divider-on-outline"; // @public (undocumented) -export const strokeCtrlDividerOnSubtle = "var(--smtc-stroke-ctrl-divider-on-subtle, unset)"; +export const strokeCtrlDividerOnSubtle = "var(--smtc-stroke-ctrl-divider-on-subtle, transparent)"; // @public (undocumented) export const strokeCtrlDividerOnSubtleDisabled = "var(--smtc-stroke-ctrl-divider-on-subtle-disabled, unset)"; @@ -4121,7 +4121,7 @@ export const strokeCtrlOnActiveBrandDisabledStop2 = "var(--smtc-stroke-ctrl-on-a 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))"; +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"; @@ -4145,7 +4145,7 @@ export const strokeCtrlOnActiveBrandPressedStop2 = "var(--smtc-stroke-ctrl-on-ac 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))"; +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"; @@ -4157,7 +4157,7 @@ export const strokeCtrlOnActiveBrandRestStop2 = "var(--smtc-stroke-ctrl-on-activ export const strokeCtrlOnActiveBrandRestStop2Raw = "--smtc-stroke-ctrl-on-active-brand-rest-stop2"; // @public (undocumented) -export const strokeCtrlOnBrandDisabled = "var(--smtc-stroke-ctrl-on-brand-disabled, unset)"; +export const strokeCtrlOnBrandDisabled = "var(--smtc-stroke-ctrl-on-brand-disabled, transparent)"; // @public (undocumented) export const strokeCtrlOnBrandDisabledRaw = "--smtc-stroke-ctrl-on-brand-disabled"; @@ -4169,7 +4169,7 @@ export const strokeCtrlOnBrandDisabledStop2 = "var(--smtc-stroke-ctrl-on-brand-d export const strokeCtrlOnBrandDisabledStop2Raw = "--smtc-stroke-ctrl-on-brand-disabled-stop2"; // @public (undocumented) -export const strokeCtrlOnBrandHover = "var(--smtc-stroke-ctrl-on-brand-hover, unset)"; +export const strokeCtrlOnBrandHover = "var(--smtc-stroke-ctrl-on-brand-hover, transparent)"; // @public (undocumented) export const strokeCtrlOnBrandHoverRaw = "--smtc-stroke-ctrl-on-brand-hover"; @@ -4181,7 +4181,7 @@ export const strokeCtrlOnBrandHoverStop2 = "var(--smtc-stroke-ctrl-on-brand-hove export const strokeCtrlOnBrandHoverStop2Raw = "--smtc-stroke-ctrl-on-brand-hover-stop2"; // @public (undocumented) -export const strokeCtrlOnBrandPressed = "var(--smtc-stroke-ctrl-on-brand-pressed, unset)"; +export const strokeCtrlOnBrandPressed = "var(--smtc-stroke-ctrl-on-brand-pressed, transparent)"; // @public (undocumented) export const strokeCtrlOnBrandPressedRaw = "--smtc-stroke-ctrl-on-brand-pressed"; @@ -4193,7 +4193,7 @@ export const strokeCtrlOnBrandPressedStop2 = "var(--smtc-stroke-ctrl-on-brand-pr export const strokeCtrlOnBrandPressedStop2Raw = "--smtc-stroke-ctrl-on-brand-pressed-stop2"; // @public (undocumented) -export const strokeCtrlOnBrandRest = "var(--smtc-stroke-ctrl-on-brand-rest, unset)"; +export const strokeCtrlOnBrandRest = "var(--smtc-stroke-ctrl-on-brand-rest, transparent)"; // @public (undocumented) export const strokeCtrlOnBrandRestRaw = "--smtc-stroke-ctrl-on-brand-rest"; @@ -4205,7 +4205,7 @@ export const strokeCtrlOnBrandRestStop2 = "var(--smtc-stroke-ctrl-on-brand-rest- export const strokeCtrlOnBrandRestStop2Raw = "--smtc-stroke-ctrl-on-brand-rest-stop2"; // @public (undocumented) -export const strokeCtrlOnNeutralDisabled = "var(--smtc-stroke-ctrl-on-neutral-disabled, unset)"; +export const strokeCtrlOnNeutralDisabled = "var(--smtc-stroke-ctrl-on-neutral-disabled, var(--colorNeutralStrokeDisabled))"; // @public (undocumented) export const strokeCtrlOnNeutralDisabledRaw = "--smtc-stroke-ctrl-on-neutral-disabled"; @@ -4217,7 +4217,7 @@ export const strokeCtrlOnNeutralDisabledStop2 = "var(--smtc-stroke-ctrl-on-neutr export const strokeCtrlOnNeutralDisabledStop2Raw = "--smtc-stroke-ctrl-on-neutral-disabled-stop2"; // @public (undocumented) -export const strokeCtrlOnNeutralHover = "var(--smtc-stroke-ctrl-on-neutral-hover, unset)"; +export const strokeCtrlOnNeutralHover = "var(--smtc-stroke-ctrl-on-neutral-hover, var(--colorNeutralStroke1Hover))"; // @public (undocumented) export const strokeCtrlOnNeutralHoverRaw = "--smtc-stroke-ctrl-on-neutral-hover"; @@ -4229,7 +4229,7 @@ export const strokeCtrlOnNeutralHoverStop2 = "var(--smtc-stroke-ctrl-on-neutral- export const strokeCtrlOnNeutralHoverStop2Raw = "--smtc-stroke-ctrl-on-neutral-hover-stop2"; // @public (undocumented) -export const strokeCtrlOnNeutralPressed = "var(--smtc-stroke-ctrl-on-neutral-pressed, unset)"; +export const strokeCtrlOnNeutralPressed = "var(--smtc-stroke-ctrl-on-neutral-pressed, var(--colorNeutralStroke1Pressed))"; // @public (undocumented) export const strokeCtrlOnNeutralPressedRaw = "--smtc-stroke-ctrl-on-neutral-pressed"; @@ -4241,7 +4241,7 @@ export const strokeCtrlOnNeutralPressedStop2 = "var(--smtc-stroke-ctrl-on-neutra export const strokeCtrlOnNeutralPressedStop2Raw = "--smtc-stroke-ctrl-on-neutral-pressed-stop2"; // @public (undocumented) -export const strokeCtrlOnNeutralRest = "var(--smtc-stroke-ctrl-on-neutral-rest, unset)"; +export const strokeCtrlOnNeutralRest = "var(--smtc-stroke-ctrl-on-neutral-rest, var(--colorNeutralStroke1))"; // @public (undocumented) export const strokeCtrlOnNeutralRestRaw = "--smtc-stroke-ctrl-on-neutral-rest"; @@ -4253,7 +4253,7 @@ export const strokeCtrlOnNeutralRestStop2 = "var(--smtc-stroke-ctrl-on-neutral-r export const strokeCtrlOnNeutralRestStop2Raw = "--smtc-stroke-ctrl-on-neutral-rest-stop2"; // @public (undocumented) -export const strokeCtrlOnOutlineDisabled = "var(--smtc-stroke-ctrl-on-outline-disabled)"; +export const strokeCtrlOnOutlineDisabled = "var(--smtc-stroke-ctrl-on-outline-disabled, var(--colorNeutralStrokeDisabled))"; // @public (undocumented) export const strokeCtrlOnOutlineDisabledRaw = "--smtc-stroke-ctrl-on-outline-disabled"; @@ -4265,7 +4265,7 @@ export const strokeCtrlOnOutlineDisabledStop2 = "var(--smtc-stroke-ctrl-on-outli export const strokeCtrlOnOutlineDisabledStop2Raw = "--smtc-stroke-ctrl-on-outline-disabled-stop2"; // @public (undocumented) -export const strokeCtrlOnOutlineHover = "var(--smtc-stroke-ctrl-on-outline-hover)"; +export const strokeCtrlOnOutlineHover = "var(--smtc-stroke-ctrl-on-outline-hover, var(--colorNeutralStroke1))"; // @public (undocumented) export const strokeCtrlOnOutlineHoverRaw = "--smtc-stroke-ctrl-on-outline-hover"; @@ -4277,7 +4277,7 @@ export const strokeCtrlOnOutlineHoverStop2 = "var(--smtc-stroke-ctrl-on-outline- export const strokeCtrlOnOutlineHoverStop2Raw = "--smtc-stroke-ctrl-on-outline-hover-stop2"; // @public (undocumented) -export const strokeCtrlOnOutlinePressed = "var(--smtc-stroke-ctrl-on-outline-pressed)"; +export const strokeCtrlOnOutlinePressed = "var(--smtc-stroke-ctrl-on-outline-pressed, var(--colorNeutralStroke1))"; // @public (undocumented) export const strokeCtrlOnOutlinePressedRaw = "--smtc-stroke-ctrl-on-outline-pressed"; @@ -4289,7 +4289,7 @@ export const strokeCtrlOnOutlinePressedStop2 = "var(--smtc-stroke-ctrl-on-outlin export const strokeCtrlOnOutlinePressedStop2Raw = "--smtc-stroke-ctrl-on-outline-pressed-stop2"; // @public (undocumented) -export const strokeCtrlOnOutlineRest = "var(--smtc-stroke-ctrl-on-outline-rest)"; +export const strokeCtrlOnOutlineRest = "var(--smtc-stroke-ctrl-on-outline-rest, var(--colorNeutralStroke1))"; // @public (undocumented) export const strokeCtrlOnOutlineRestRaw = "--smtc-stroke-ctrl-on-outline-rest"; @@ -4301,13 +4301,13 @@ export const strokeCtrlOnOutlineRestStop2 = "var(--smtc-stroke-ctrl-on-outline-r export const strokeCtrlOnOutlineRestStop2Raw = "--smtc-stroke-ctrl-on-outline-rest-stop2"; // @public (undocumented) -export const strokeCtrlOnSubtleDisabled = "var(--smtc-stroke-ctrl-on-subtle-disabled, unset)"; +export const strokeCtrlOnSubtleDisabled = "var(--smtc-stroke-ctrl-on-subtle-disabled, transparent)"; // @public (undocumented) export const strokeCtrlOnSubtleDisabledRaw = "--smtc-stroke-ctrl-on-subtle-disabled"; // @public (undocumented) -export const strokeCtrlOnSubtleHover = "var(--smtc-stroke-ctrl-on-subtle-hover, unset)"; +export const strokeCtrlOnSubtleHover = "var(--smtc-stroke-ctrl-on-subtle-hover, transparent)"; // @public (undocumented) export const strokeCtrlOnSubtleHoverRaw = "--smtc-stroke-ctrl-on-subtle-hover"; @@ -4319,13 +4319,13 @@ export const strokeCtrlOnSubtleHoverSplit = "var(--smtc-stroke-ctrl-on-subtle-ho export const strokeCtrlOnSubtleHoverSplitRaw = "--smtc-stroke-ctrl-on-subtle-hover-split"; // @public (undocumented) -export const strokeCtrlOnSubtlePressed = "var(--smtc-stroke-ctrl-on-subtle-pressed, unset)"; +export const strokeCtrlOnSubtlePressed = "var(--smtc-stroke-ctrl-on-subtle-pressed, transparent)"; // @public (undocumented) export const strokeCtrlOnSubtlePressedRaw = "--smtc-stroke-ctrl-on-subtle-pressed"; // @public (undocumented) -export const strokeCtrlOnSubtleRest = "var(--smtc-stroke-ctrl-on-subtle-rest, unset)"; +export const strokeCtrlOnSubtleRest = "var(--smtc-stroke-ctrl-on-subtle-rest, transparent)"; // @public (undocumented) export const strokeCtrlOnSubtleRestRaw = "--smtc-stroke-ctrl-on-subtle-rest"; @@ -4367,7 +4367,7 @@ export const strokeImage = "var(--smtc-stroke-image, unset)"; export const strokeImageRaw = "--smtc-stroke-image"; // @public (undocumented) -export const strokeLayer = "var(--smtc-stroke-layer, unset)"; +export const strokeLayer = "var(--smtc-stroke-layer, var(--colorTransparentStroke))"; // @public (undocumented) export const strokeLayerRaw = "--smtc-stroke-layer"; @@ -4379,25 +4379,25 @@ export const strokeToolbar = "var(--smtc-stroke-toolbar, var(--smtc-stroke-card- export const strokeToolbarRaw = "--smtc-stroke-toolbar"; // @public (undocumented) -export const strokeWidthCtrlOutlineHover = "var(--smtc-stroke-width-ctrl-outline-hover, var(--smtc-stroke-width-default))"; +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))"; +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))"; +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))"; +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"; @@ -4439,7 +4439,7 @@ export const strokeWindowInactive = "var(--smtc-stroke-window-inactive, var(--sm 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))"; +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"; @@ -4595,13 +4595,13 @@ export const textGlobalTitle2LineHeight = "var(--smtc-text-global-title2-line-he 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))"; +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))"; +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"; @@ -4631,13 +4631,13 @@ export const textRampLegalLineHeight = "var(--smtc-text-ramp-legal-line-height, 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))"; +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))"; +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"; @@ -4775,13 +4775,13 @@ export const textRampSectionHeaderLineHeight = "var(--smtc-text-ramp-section-hea 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))"; +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))"; +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"; diff --git a/packages/semantic-tokens/src/components/focus/tokens.ts b/packages/semantic-tokens/src/components/focus/tokens.ts index 7598d8ad13674..1c9c749398b51 100644 --- a/packages/semantic-tokens/src/components/focus/tokens.ts +++ b/packages/semantic-tokens/src/components/focus/tokens.ts @@ -1,6 +1,6 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE import { strokeWidthDefaultRaw, backgroundCtrlBrandRestRaw } from '../../control/variables'; -import { colorStrokeFocus2, colorTransparentStroke } from '../../legacy/tokens'; +import { strokeWidthThin, colorStrokeFocus2, strokeWidthThick, colorTransparentStroke } from '../../legacy/tokens'; import { ctrlFocusInnerStrokeWidthRaw, ctrlFocusInnerStrokeRaw, @@ -8,7 +8,7 @@ import { ctrlFocusOuterStrokeRaw, } from './variables'; -export const ctrlFocusInnerStrokeWidth = `var(${ctrlFocusInnerStrokeWidthRaw}, var(${strokeWidthDefaultRaw}))`; +export const ctrlFocusInnerStrokeWidth = `var(${ctrlFocusInnerStrokeWidthRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; export const ctrlFocusInnerStroke = `var(${ctrlFocusInnerStrokeRaw}, ${colorStrokeFocus2})`; -export const ctrlFocusOuterStrokeWidth = `var(${ctrlFocusOuterStrokeWidthRaw})`; +export const ctrlFocusOuterStrokeWidth = `var(${ctrlFocusOuterStrokeWidthRaw}, ${strokeWidthThick})`; export const ctrlFocusOuterStroke = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorTransparentStroke}))`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index c6eccfce5229c..af1285536a9aa 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -22,9 +22,31 @@ import { lineHeightBase100, fontFamilyBase, fontWeightRegular, + spacingHorizontalM, + spacingHorizontalS, + spacingHorizontalL, + spacingHorizontalSNudge, + spacingHorizontalXS, + borderRadiusCircular, strokeWidthThin, + colorNeutralStroke1, + colorNeutralStrokeDisabled, + colorNeutralStrokeOnBrand, + colorBrandBackground, + colorBrandBackgroundHover, + colorBrandBackgroundPressed, + colorNeutralBackground1, + colorNeutralBackground1Hover, + colorNeutralBackground1Pressed, + colorNeutralBackgroundDisabled, + colorSubtleBackgroundHover, + colorSubtleBackgroundPressed, borderRadiusNone, + borderRadiusMedium, + colorNeutralForeground1, colorNeutralForegroundDisabled, + colorNeutralForeground2, + colorNeutralForegroundOnBrand, colorPaletteRedBackground3, colorPaletteRedForeground3, colorPaletteDarkOrangeBackground3, @@ -262,14 +284,14 @@ export const textStyleDefaultRegularFontFamily = `var(${textStyleDefaultRegularF export const textStyleDefaultRegularWeight = `var(${textStyleDefaultRegularWeightRaw}, ${fontWeightRegular})`; export const textStyleDefaultRegularLetterSpacing = `var(${textStyleDefaultRegularLetterSpacingRaw})`; export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightRaw})`; -export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw})`; -export const sizeCtrlIcon = `var(${sizeCtrlIconRaw})`; +export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw}, 96px)`; +export const sizeCtrlIcon = `var(${sizeCtrlIconRaw}, 20px)`; export const sizeCtrlIconSecondary = `var(${sizeCtrlIconSecondaryRaw})`; export const textCtrlWeightSelected = `var(${textCtrlWeightSelectedRaw})`; -export const sizeCtrlSmDefault = `var(${sizeCtrlSmDefaultRaw})`; -export const sizeCtrlSmIcon = `var(${sizeCtrlSmIconRaw})`; -export const sizeCtrlLgDefault = `var(${sizeCtrlLgDefaultRaw})`; -export const sizeCtrlLgIcon = `var(${sizeCtrlLgIconRaw})`; +export const sizeCtrlSmDefault = `var(${sizeCtrlSmDefaultRaw}, 64px)`; +export const sizeCtrlSmIcon = `var(${sizeCtrlSmIconRaw}, 20px)`; +export const sizeCtrlLgDefault = `var(${sizeCtrlLgDefaultRaw}, 96px)`; +export const sizeCtrlLgIcon = `var(${sizeCtrlLgIconRaw}, 24px)`; export const paddingContentAlignDefault = `var(${paddingContentAlignDefaultRaw})`; export const paddingContentAlignOutdentIconOnSubtle = `var(${paddingContentAlignOutdentIconOnSubtleRaw})`; export const paddingContentNone = `var(${paddingContentNoneRaw})`; @@ -282,17 +304,17 @@ export const paddingContentLarge = `var(${paddingContentLargeRaw})`; export const paddingContentXLarge = `var(${paddingContentXLargeRaw})`; export const paddingContentXxLarge = `var(${paddingContentXxLargeRaw})`; export const paddingContentXxxLarge = `var(${paddingContentXxxLargeRaw})`; -export const paddingCtrlHorizontalDefault = `var(${paddingCtrlHorizontalDefaultRaw})`; -export const paddingCtrlHorizontalIconOnly = `var(${paddingCtrlHorizontalIconOnlyRaw})`; -export const paddingCtrlTextTop = `var(${paddingCtrlTextTopRaw})`; -export const paddingCtrlTextSide = `var(${paddingCtrlTextSideRaw})`; +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})`; -export const paddingCtrlSmHorizontalIconOnly = `var(${paddingCtrlSmHorizontalIconOnlyRaw})`; +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})`; -export const paddingCtrlLgHorizontalIconOnly = `var(${paddingCtrlLgHorizontalIconOnlyRaw})`; +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})`; @@ -306,25 +328,25 @@ export const gapBetweenContentXLarge = `var(${gapBetweenContentXLargeRaw})`; export const gapBetweenContentXxLarge = `var(${gapBetweenContentXxLargeRaw})`; export const gapBetweenCtrlLgDefault = `var(${gapBetweenCtrlLgDefaultRaw})`; export const gapBetweenCtrlSmDefault = `var(${gapBetweenCtrlSmDefaultRaw})`; -export const gapInsideCtrlDefault = `var(${gapInsideCtrlDefaultRaw})`; -export const gapInsideCtrlSmDefault = `var(${gapInsideCtrlSmDefaultRaw})`; +export const gapInsideCtrlDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingHorizontalSNudge})`; +export const gapInsideCtrlSmDefault = `var(${gapInsideCtrlSmDefaultRaw}, ${spacingHorizontalXS})`; export const gapInsideCtrlSmToSecondaryIcon = `var(${gapInsideCtrlSmToSecondaryIconRaw})`; -export const gapInsideCtrlLgDefault = `var(${gapInsideCtrlLgDefaultRaw})`; +export const gapInsideCtrlLgDefault = `var(${gapInsideCtrlLgDefaultRaw}, ${spacingHorizontalSNudge})`; export const gapInsideCtrlLgToSecondaryIcon = `var(${gapInsideCtrlLgToSecondaryIconRaw})`; export const gapInsideCtrlToSecondaryIcon = `var(${gapInsideCtrlToSecondaryIconRaw})`; export const gapInsideCtrlToLabel = `var(${gapInsideCtrlToLabelRaw})`; export const gapInsideCtrlSmToLabel = `var(${gapInsideCtrlSmToLabelRaw})`; export const gapInsideCtrlLgToLabel = `var(${gapInsideCtrlLgToLabelRaw})`; -export const cornerCircular = `var(${cornerCircularRaw})`; +export const cornerCircular = `var(${cornerCircularRaw}, ${borderRadiusCircular})`; export const strokeWidthDefault = `var(${strokeWidthDefaultRaw}, ${strokeWidthThin})`; export const backgroundSmoke = `var(${backgroundSmokeRaw})`; -export const strokeCtrlOnOutlineRest = `var(${strokeCtrlOnOutlineRestRaw})`; -export const strokeCtrlOnOutlineHover = `var(${strokeCtrlOnOutlineHoverRaw})`; -export const strokeCtrlOnOutlinePressed = `var(${strokeCtrlOnOutlinePressedRaw})`; -export const strokeCtrlOnOutlineDisabled = `var(${strokeCtrlOnOutlineDisabledRaw})`; -export const strokeCtrlDividerOnBrand = `var(${strokeCtrlDividerOnBrandRaw})`; +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})`; +export const strokeCtrlDividerOnOutline = `var(${strokeCtrlDividerOnOutlineRaw}, ${colorNeutralStroke1})`; export const strokeDividerDefault = `var(${strokeDividerDefaultRaw})`; export const strokeWindowActive = `var(${strokeWindowActiveRaw})`; export const backgroundWindowPrimarySolid = `var(${backgroundWindowPrimarySolidRaw})`; @@ -348,16 +370,16 @@ export const backgroundCardOnPrimaryDefaultHover = `var(${backgroundCardOnPrimar export const backgroundCardOnPrimaryDefaultPressed = `var(${backgroundCardOnPrimaryDefaultPressedRaw})`; export const backgroundCardOnPrimaryDefaultDisabled = `var(${backgroundCardOnPrimaryDefaultDisabledRaw})`; export const backgroundFlyoutSolid = `var(${backgroundFlyoutSolidRaw})`; -export const backgroundCtrlBrandRest = `var(${backgroundCtrlBrandRestRaw})`; -export const backgroundCtrlBrandHover = `var(${backgroundCtrlBrandHoverRaw})`; -export const backgroundCtrlBrandPressed = `var(${backgroundCtrlBrandPressedRaw})`; +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})`; -export const backgroundCtrlNeutralHover = `var(${backgroundCtrlNeutralHoverRaw})`; -export const backgroundCtrlNeutralPressed = `var(${backgroundCtrlNeutralPressedRaw})`; -export const backgroundCtrlNeutralDisabled = `var(${backgroundCtrlNeutralDisabledRaw})`; -export const backgroundCtrlSubtleHover = `var(${backgroundCtrlSubtleHoverRaw})`; -export const backgroundCtrlSubtlePressed = `var(${backgroundCtrlSubtlePressedRaw})`; +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})`; export const backgroundFlyoutColorBlend = `var(${backgroundFlyoutColorBlendRaw})`; export const cornerZero = `var(${cornerZeroRaw}, ${borderRadiusNone})`; @@ -366,19 +388,19 @@ export const cornerWindowDefault = `var(${cornerWindowDefaultRaw})`; export const cornerFlyoutRest = `var(${cornerFlyoutRestRaw})`; export const cornerLayerDefault = `var(${cornerLayerDefaultRaw})`; export const cornerCardRest = `var(${cornerCardRestRaw})`; -export const cornerCtrlRest = `var(${cornerCtrlRestRaw})`; -export const cornerCtrlSmRest = `var(${cornerCtrlSmRestRaw})`; -export const cornerCtrlLgRest = `var(${cornerCtrlLgRestRaw})`; +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})`; +export const foregroundCtrlNeutralPrimaryRest = `var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1})`; export const foregroundCtrlNeutralPrimaryDisabled = `var(${foregroundCtrlNeutralPrimaryDisabledRaw}, ${colorNeutralForegroundDisabled})`; -export const foregroundCtrlNeutralSecondaryRest = `var(${foregroundCtrlNeutralSecondaryRestRaw})`; -export const foregroundCtrlNeutralSecondaryDisabled = `var(${foregroundCtrlNeutralSecondaryDisabledRaw})`; +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})`; +export const foregroundCtrlOnBrandRest = `var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundOnBrand})`; export const foregroundCtrlOnBrandDisabled = `var(${foregroundCtrlOnBrandDisabledRaw})`; export const materialAcrylicBlur = `var(${materialAcrylicBlurRaw})`; export const materialMicaBlur = `var(${materialMicaBlurRaw})`; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index bcf7a40e2a441..6fad81d9703f9 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -11,9 +11,29 @@ export type FluentOverrideValue = export type FluentOverrides = Record; export const fluentOverrides: FluentOverrides = { + backgroundCtrlBrandHover: { f2Token: 'colorBrandBackgroundHover' }, + backgroundCtrlBrandPressed: { f2Token: 'colorBrandBackgroundPressed' }, + backgroundCtrlBrandRest: { f2Token: 'colorBrandBackground' }, + backgroundCtrlNeutralDisabled: { f2Token: 'colorNeutralBackgroundDisabled' }, + backgroundCtrlNeutralHover: { f2Token: 'colorNeutralBackground1Hover' }, + backgroundCtrlNeutralPressed: { f2Token: 'colorNeutralBackground1Pressed' }, + backgroundCtrlNeutralRest: { f2Token: 'colorNeutralBackground1' }, + backgroundCtrlOutlineHover: { f2Token: 'colorTransparentBackground' }, + backgroundCtrlOutlinePressed: { f2Token: 'colorTransparentBackground' }, + backgroundCtrlOutlineRest: { f2Token: 'colorTransparentBackground' }, + backgroundCtrlSubtleDisabled: { f2Token: 'colorTransparentBackground' }, + backgroundCtrlSubtleHover: { f2Token: 'colorSubtleBackgroundHover' }, + backgroundCtrlSubtlePressed: { f2Token: 'colorSubtleBackgroundPressed' }, + backgroundCtrlSubtleRest: { f2Token: 'colorSubtleBackground' }, + cornerCircular: { f2Token: 'borderRadiusCircular' }, + cornerCtrlLgRest: { f2Token: 'borderRadiusMedium' }, // Button uses borderRadiusMedium in all sizes + cornerCtrlRest: { f2Token: 'borderRadiusMedium' }, + cornerCtrlSmRest: { f2Token: 'borderRadiusMedium' }, // Button uses borderRadiusMedium in all sizes cornerZero: { f2Token: 'borderRadiusNone' }, ctrlFocusInnerStroke: { f2Token: 'colorStrokeFocus2' }, + ctrlFocusInnerStrokeWidth: { f2Token: 'strokeWidthThin' }, ctrlFocusOuterStroke: { f2Token: 'colorTransparentStroke' }, + ctrlFocusOuterStrokeWidth: { f2Token: 'strokeWidthThick' }, ctrlLinkForegroundBrandHover: { f2Token: 'colorBrandForegroundLinkHover' }, ctrlLinkForegroundBrandPressed: { f2Token: 'colorBrandForegroundLinkPressed' }, ctrlLinkForegroundBrandRest: { f2Token: 'colorBrandForegroundLink' }, @@ -28,12 +48,84 @@ export const fluentOverrides: FluentOverrides = { ctrlProgressLgHeightEmpty: { rawValue: '4px' }, ctrlProgressLgHeightFilled: { rawValue: '100%' }, foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' }, + foregroundCtrlIconOnNeutralDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + 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' }, + 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' }, + gapInsideCtrlDefault: { f2Token: 'spacingHorizontalSNudge' }, + gapInsideCtrlLgDefault: { f2Token: 'spacingHorizontalSNudge' }, + gapInsideCtrlSmDefault: { f2Token: 'spacingHorizontalXS' }, + paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' }, + paddingCtrlHorizontalIconOnly: { rawValue: '5px' }, + paddingCtrlLgHorizontalDefault: { f2Token: 'spacingHorizontalL' }, + paddingCtrlLgHorizontalIconOnly: { rawValue: '7px' }, + paddingCtrlSmHorizontalDefault: { f2Token: 'spacingHorizontalS' }, + paddingCtrlSmHorizontalIconOnly: { rawValue: '1px' }, + paddingCtrlTextBottom: { rawValue: '5px' }, + paddingCtrlTextSide: { rawValue: '0px' }, // For now, text padding is not applied (use default); + paddingCtrlTextTop: { rawValue: '5px' }, + sizeCtrlDefault: { rawValue: '96px' }, + sizeCtrlIcon: { rawValue: '20px' }, + sizeCtrlLgDefault: { rawValue: '96px' }, + sizeCtrlLgIcon: { rawValue: '24px' }, + sizeCtrlSmDefault: { rawValue: '64px' }, + sizeCtrlSmIcon: { rawValue: '20px' }, statusDangerBackground: { f2Token: 'colorPaletteRedBackground3' }, statusDangerTintForeground: { f2Token: 'colorPaletteRedForeground3' }, statusSuccessBackground: { f2Token: 'colorPaletteGreenBackground3' }, statusWarningBackground: { f2Token: 'colorPaletteDarkOrangeBackground3' }, + strokeCtrlDividerOnBrand: { f2Token: 'colorNeutralStrokeOnBrand' }, + strokeCtrlDividerOnOutline: { f2Token: 'colorNeutralStroke1' }, + strokeCtrlDividerOnSubtle: { rawValue: 'transparent' }, + strokeCtrlOnActiveBrandHover: { f2Token: 'colorStrokeFocus2' }, + 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' }, + strokeLayer: { f2Token: 'colorTransparentStroke' }, + strokeWidthCtrlOutlineHover: { f2Token: 'strokeWidthThin' }, + strokeWidthCtrlOutlinePressed: { f2Token: 'strokeWidthThin' }, + strokeWidthCtrlOutlineRest: { f2Token: 'strokeWidthThin' }, + strokeWidthCtrlOutlineSelected: { f2Token: 'strokeWidthThicker' }, strokeWidthDefault: { f2Token: 'strokeWidthThin' }, + textCtrlButtonWeightDefault: { f2Token: 'fontWeightSemibold' }, textGlobalBody1FontSize: { f2Token: 'fontSizeBase500' }, textGlobalBody1LineHeight: { f2Token: 'lineHeightBase500' }, textGlobalBody2FontSize: { f2Token: 'fontSizeBase400' }, @@ -54,6 +146,12 @@ export const fluentOverrides: FluentOverrides = { textGlobalTitle1LineHeight: { f2Token: 'lineHeightHero900' }, textGlobalTitle2FontSize: { f2Token: 'fontSizeHero800' }, textGlobalTitle2LineHeight: { f2Token: 'lineHeightHero800' }, + textRampItemBodyFontSize: { f2Token: 'fontSizeBase300' }, + textRampItemBodyLineHeight: { f2Token: 'lineHeightBase300' }, + textRampLgItemBodyFontSize: { f2Token: 'fontSizeBase400' }, + textRampLgItemBodyLineHeight: { f2Token: 'lineHeightBase400' }, + textRampSmItemBodyFontSize: { f2Token: 'fontSizeBase200' }, + textRampSmItemBodyLineHeight: { f2Token: 'lineHeightBase200' }, textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' }, textStyleDefaultRegularWeight: { f2Token: 'fontWeightRegular' }, }; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index fbf63cdec71b7..367baed8c6558 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -1,4 +1,69 @@ // 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#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#colorNeutralBackgroundDisabled | `colorNeutralBackgroundDisabled`} design token. + * @public + */ +export const colorNeutralBackgroundDisabled = 'var(--colorNeutralBackgroundDisabled)'; +/** + * 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#colorTransparentBackground | `colorTransparentBackground`} design token. + * @public + */ +export const colorTransparentBackground = 'var(--colorTransparentBackground)'; +/** + * 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#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 @@ -9,11 +74,21 @@ export const borderRadiusNone = 'var(--borderRadiusNone)'; * @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#strokeWidthThick | `strokeWidthThick`} design token. + * @public + */ +export const strokeWidthThick = 'var(--strokeWidthThick)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkHover | `colorBrandForegroundLinkHover`} design token. * @public @@ -54,11 +129,6 @@ export const colorNeutralBackground6 = 'var(--colorNeutralBackground6)'; * @public */ export const colorCompoundBrandBackground = 'var(--colorCompoundBrandBackground)'; -/** - * 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#colorNeutralForeground1 | `colorNeutralForeground1`} design token. * @public @@ -69,6 +139,56 @@ export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)'; * @public */ export const colorNeutralForegroundDisabled = 'var(--colorNeutralForegroundDisabled)'; +/** + * 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#colorNeutralForegroundOnBrand | `colorNeutralForegroundOnBrand`} design token. + * @public + */ +export const colorNeutralForegroundOnBrand = 'var(--colorNeutralForegroundOnBrand)'; +/** + * 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#spacingHorizontalXS | `spacingHorizontalXS`} design token. + * @public + */ +export const spacingHorizontalXS = 'var(--spacingHorizontalXS)'; +/** + * 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#spacingHorizontalL | `spacingHorizontalL`} design token. + * @public + */ +export const spacingHorizontalL = 'var(--spacingHorizontalL)'; +/** + * 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#colorPaletteRedBackground3 | `colorPaletteRedBackground3`} design token. * @public @@ -90,10 +210,40 @@ export const colorPaletteGreenBackground3 = 'var(--colorPaletteGreenBackground3) */ export const colorPaletteDarkOrangeBackground3 = 'var(--colorPaletteDarkOrangeBackground3)'; /** - * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThin | `strokeWidthThin`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeOnBrand | `colorNeutralStrokeOnBrand`} design token. * @public */ -export const strokeWidthThin = 'var(--strokeWidthThin)'; +export const colorNeutralStrokeOnBrand = 'var(--colorNeutralStrokeOnBrand)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1 | `colorNeutralStroke1`} design token. + * @public + */ +export const colorNeutralStroke1 = 'var(--colorNeutralStroke1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeDisabled | `colorNeutralStrokeDisabled`} design token. + * @public + */ +export const colorNeutralStrokeDisabled = 'var(--colorNeutralStrokeDisabled)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Hover | `colorNeutralStroke1Hover`} design token. + * @public + */ +export const colorNeutralStroke1Hover = 'var(--colorNeutralStroke1Hover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Pressed | `colorNeutralStroke1Pressed`} design token. + * @public + */ +export const colorNeutralStroke1Pressed = 'var(--colorNeutralStroke1Pressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThicker | `strokeWidthThicker`} design token. + * @public + */ +export const strokeWidthThicker = 'var(--strokeWidthThicker)'; +/** + * 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 diff --git a/packages/semantic-tokens/src/nullable/tokens.ts b/packages/semantic-tokens/src/nullable/tokens.ts index 3f1bb77fa996d..5aea2238d42cf 100644 --- a/packages/semantic-tokens/src/nullable/tokens.ts +++ b/packages/semantic-tokens/src/nullable/tokens.ts @@ -1,4 +1,13 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { + colorTransparentStroke, + colorNeutralStroke1, + colorNeutralStroke1Hover, + colorNeutralStroke1Pressed, + colorNeutralStrokeDisabled, + colorTransparentBackground, + colorSubtleBackground, +} from '../legacy/tokens'; import { textStyleDefaultHeaderCaseRaw, textStyleAiHeaderCaseRaw, @@ -56,23 +65,23 @@ export const textStyleArticleHeaderCase = `var(${textStyleArticleHeaderCaseRaw}, export const textStyleCodeHeaderCase = `var(${textStyleCodeHeaderCaseRaw}, unset)`; export const textStyleDataVizHeaderCase = `var(${textStyleDataVizHeaderCaseRaw}, unset)`; export const textStyleQuoteHeaderCase = `var(${textStyleQuoteHeaderCaseRaw}, unset)`; -export const strokeLayer = `var(${strokeLayerRaw}, unset)`; +export const strokeLayer = `var(${strokeLayerRaw}, ${colorTransparentStroke})`; export const strokeImage = `var(${strokeImageRaw}, unset)`; export const strokeFlyout = `var(${strokeFlyoutRaw}, unset)`; -export const strokeCtrlOnBrandRest = `var(${strokeCtrlOnBrandRestRaw}, unset)`; -export const strokeCtrlOnBrandHover = `var(${strokeCtrlOnBrandHoverRaw}, unset)`; -export const strokeCtrlOnBrandPressed = `var(${strokeCtrlOnBrandPressedRaw}, unset)`; -export const strokeCtrlOnBrandDisabled = `var(${strokeCtrlOnBrandDisabledRaw}, unset)`; -export const strokeCtrlOnNeutralRest = `var(${strokeCtrlOnNeutralRestRaw}, unset)`; -export const strokeCtrlOnNeutralHover = `var(${strokeCtrlOnNeutralHoverRaw}, unset)`; -export const strokeCtrlOnNeutralPressed = `var(${strokeCtrlOnNeutralPressedRaw}, unset)`; -export const strokeCtrlOnNeutralDisabled = `var(${strokeCtrlOnNeutralDisabledRaw}, unset)`; -export const strokeCtrlOnSubtleRest = `var(${strokeCtrlOnSubtleRestRaw}, unset)`; -export const strokeCtrlOnSubtleHover = `var(${strokeCtrlOnSubtleHoverRaw}, unset)`; -export const strokeCtrlOnSubtlePressed = `var(${strokeCtrlOnSubtlePressedRaw}, unset)`; -export const strokeCtrlOnSubtleDisabled = `var(${strokeCtrlOnSubtleDisabledRaw}, unset)`; +export const strokeCtrlOnBrandRest = `var(${strokeCtrlOnBrandRestRaw}, transparent)`; +export const strokeCtrlOnBrandHover = `var(${strokeCtrlOnBrandHoverRaw}, transparent)`; +export const strokeCtrlOnBrandPressed = `var(${strokeCtrlOnBrandPressedRaw}, transparent)`; +export const strokeCtrlOnBrandDisabled = `var(${strokeCtrlOnBrandDisabledRaw}, transparent)`; +export const strokeCtrlOnNeutralRest = `var(${strokeCtrlOnNeutralRestRaw}, ${colorNeutralStroke1})`; +export const strokeCtrlOnNeutralHover = `var(${strokeCtrlOnNeutralHoverRaw}, ${colorNeutralStroke1Hover})`; +export const strokeCtrlOnNeutralPressed = `var(${strokeCtrlOnNeutralPressedRaw}, ${colorNeutralStroke1Pressed})`; +export const strokeCtrlOnNeutralDisabled = `var(${strokeCtrlOnNeutralDisabledRaw}, ${colorNeutralStrokeDisabled})`; +export const strokeCtrlOnSubtleRest = `var(${strokeCtrlOnSubtleRestRaw}, transparent)`; +export const strokeCtrlOnSubtleHover = `var(${strokeCtrlOnSubtleHoverRaw}, transparent)`; +export const strokeCtrlOnSubtlePressed = `var(${strokeCtrlOnSubtlePressedRaw}, transparent)`; +export const strokeCtrlOnSubtleDisabled = `var(${strokeCtrlOnSubtleDisabledRaw}, transparent)`; export const strokeCtrlOnSubtleHoverSplit = `var(${strokeCtrlOnSubtleHoverSplitRaw}, unset)`; -export const strokeCtrlDividerOnSubtle = `var(${strokeCtrlDividerOnSubtleRaw}, unset)`; +export const strokeCtrlDividerOnSubtle = `var(${strokeCtrlDividerOnSubtleRaw}, transparent)`; export const strokeCtrlDividerOnSubtleDisabled = `var(${strokeCtrlDividerOnSubtleDisabledRaw}, unset)`; export const strokeCardSelected = `var(${strokeCardSelectedRaw}, unset)`; export const strokeCardOnPrimaryRest = `var(${strokeCardOnPrimaryRestRaw}, unset)`; @@ -83,12 +92,12 @@ export const strokeCardOnSecondaryRest = `var(${strokeCardOnSecondaryRestRaw}, u export const strokeCardOnSecondaryHover = `var(${strokeCardOnSecondaryHoverRaw}, unset)`; export const strokeCardOnSecondaryPressed = `var(${strokeCardOnSecondaryPressedRaw}, unset)`; export const strokeCardOnSecondaryDisabled = `var(${strokeCardOnSecondaryDisabledRaw}, unset)`; -export const backgroundCtrlOutlineRest = `var(${backgroundCtrlOutlineRestRaw}, unset)`; -export const backgroundCtrlOutlineHover = `var(${backgroundCtrlOutlineHoverRaw}, unset)`; -export const backgroundCtrlOutlinePressed = `var(${backgroundCtrlOutlinePressedRaw}, unset)`; +export const backgroundCtrlOutlineRest = `var(${backgroundCtrlOutlineRestRaw}, ${colorTransparentBackground})`; +export const backgroundCtrlOutlineHover = `var(${backgroundCtrlOutlineHoverRaw}, ${colorTransparentBackground})`; +export const backgroundCtrlOutlinePressed = `var(${backgroundCtrlOutlinePressedRaw}, ${colorTransparentBackground})`; export const backgroundCtrlOutlineDisabled = `var(${backgroundCtrlOutlineDisabledRaw}, unset)`; -export const backgroundCtrlSubtleRest = `var(${backgroundCtrlSubtleRestRaw}, unset)`; -export const backgroundCtrlSubtleDisabled = `var(${backgroundCtrlSubtleDisabledRaw}, unset)`; +export const backgroundCtrlSubtleRest = `var(${backgroundCtrlSubtleRestRaw}, ${colorSubtleBackground})`; +export const backgroundCtrlSubtleDisabled = `var(${backgroundCtrlSubtleDisabledRaw}, ${colorTransparentBackground})`; export const backgroundCtrlSubtleHoverSplit = `var(${backgroundCtrlSubtleHoverSplitRaw}, unset)`; export const foregroundCtrlHintDefault = `var(${foregroundCtrlHintDefaultRaw}, unset)`; export const shadowCardRestKey = `var(${shadowCardRestKeyRaw}, unset)`; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index 395430d483602..af2df393bdf74 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -81,7 +81,28 @@ import { shadowFlyoutAmbientRaw, shadowWindowActiveKeyRaw, } from '../control/variables'; -import { colorNeutralForeground1 } from '../legacy/tokens'; +import { + fontSizeBase300, + lineHeightBase300, + fontSizeBase200, + lineHeightBase200, + fontSizeBase400, + lineHeightBase400, + fontWeightSemibold, + strokeWidthThin, + strokeWidthThicker, + colorNeutralForegroundOnBrand, + colorStrokeFocus2, + colorNeutralForeground1, + colorNeutralForeground1Hover, + colorNeutralForeground1Pressed, + colorNeutralForeground2Hover, + colorNeutralForeground2Pressed, + colorNeutralForegroundDisabled, + colorNeutralForeground2, + colorNeutralForeground2BrandHover, + colorNeutralForeground2BrandPressed, +} from '../legacy/tokens'; import { strokeCardOnPrimaryRestRaw, strokeCtrlOnBrandRestRaw, @@ -390,8 +411,8 @@ export const textRampReadingBodyFontSize = `var(${textRampReadingBodyFontSizeRaw export const textRampReadingBodyLineHeight = `var(${textRampReadingBodyLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}))`; export const textRampItemHeaderFontSize = `var(${textRampItemHeaderFontSizeRaw}, var(${textGlobalBody2FontSizeRaw}))`; export const textRampItemHeaderLineHeight = `var(${textRampItemHeaderLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}))`; -export const textRampItemBodyFontSize = `var(${textRampItemBodyFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}))`; -export const textRampItemBodyLineHeight = `var(${textRampItemBodyLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}))`; +export const textRampItemBodyFontSize = `var(${textRampItemBodyFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}, ${fontSizeBase300}))`; +export const textRampItemBodyLineHeight = `var(${textRampItemBodyLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}, ${lineHeightBase300}))`; export const textRampMetadataFontSize = `var(${textRampMetadataFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}))`; export const textRampMetadataLineHeight = `var(${textRampMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; export const textRampLegalFontSize = `var(${textRampLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}))`; @@ -406,8 +427,8 @@ export const textRampSmReadingBodyFontSize = `var(${textRampSmReadingBodyFontSiz 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}))`; -export const textRampSmItemBodyLineHeight = `var(${textRampSmItemBodyLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; +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}))`; @@ -422,20 +443,20 @@ export const textRampLgReadingBodyFontSize = `var(${textRampLgReadingBodyFontSiz 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}))`; -export const textRampLgItemBodyLineHeight = `var(${textRampLgItemBodyLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}))`; +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}))`; export const textRampLgLegalLineHeight = `var(${textRampLgLegalLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; export const textCtrlWeightDefault = `var(${textCtrlWeightDefaultRaw}, var(${textStyleDefaultRegularWeightRaw}))`; -export const textCtrlButtonWeightDefault = `var(${textCtrlButtonWeightDefaultRaw}, 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}))`; export const paddingCardNestedImage = `var(${paddingCardNestedImageRaw}, var(${paddingContentAlignDefaultRaw}))`; -export const paddingCtrlTextBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}))`; +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}))`; @@ -447,10 +468,10 @@ export const gapBetweenListItem = `var(${gapBetweenListItemRaw}, var(${gapBetwee export const gapBetweenCard = `var(${gapBetweenCardRaw}, var(${gapBetweenContentMediumRaw}))`; export const strokeWidthDividerDefault = `var(${strokeWidthDividerDefaultRaw}, var(${strokeWidthDefaultRaw}))`; export const strokeWidthDividerStrong = `var(${strokeWidthDividerStrongRaw}, var(${strokeWidthDefaultRaw}))`; -export const strokeWidthCtrlOutlineRest = `var(${strokeWidthCtrlOutlineRestRaw}, var(${strokeWidthDefaultRaw}))`; -export const strokeWidthCtrlOutlineHover = `var(${strokeWidthCtrlOutlineHoverRaw}, var(${strokeWidthDefaultRaw}))`; -export const strokeWidthCtrlOutlinePressed = `var(${strokeWidthCtrlOutlinePressedRaw}, var(${strokeWidthDefaultRaw}))`; -export const strokeWidthCtrlOutlineSelected = `var(${strokeWidthCtrlOutlineSelectedRaw}, 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}))`; @@ -466,13 +487,13 @@ export const strokeCtrlOnOutlineRestStop2 = `var(${strokeCtrlOnOutlineRestStop2R 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}))`; +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}))`; +export const strokeCtrlOnActiveBrandHover = `var(${strokeCtrlOnActiveBrandHoverRaw}, var(${strokeCtrlOnBrandHoverRaw}, ${colorStrokeFocus2}))`; export const strokeCtrlOnActiveBrandPressed = `var(${strokeCtrlOnActiveBrandPressedRaw}, var(${strokeCtrlOnBrandPressedRaw}))`; export const strokeCtrlOnActiveBrandDisabled = `var(${strokeCtrlOnActiveBrandDisabledRaw}, var(${strokeCtrlOnBrandDisabledRaw}))`; export const strokeCtrlOnActiveBrandRestStop2 = `var(${strokeCtrlOnActiveBrandRestStop2Raw}, var(${strokeCtrlOnBrandRestRaw}))`; @@ -515,24 +536,24 @@ export const cornerCtrlLgPressed = `var(${cornerCtrlLgPressedRaw}, var(${cornerC export const foregroundContentNeutralPrimary = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1}))`; export const foregroundContentNeutralSecondary = `var(${foregroundContentNeutralSecondaryRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; export const foregroundContentBrandPrimary = `var(${foregroundContentBrandPrimaryRaw}, var(${foregroundCtrlBrandRestRaw}))`; -export const foregroundCtrlNeutralPrimaryHover = `var(${foregroundCtrlNeutralPrimaryHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlNeutralPrimaryPressed = `var(${foregroundCtrlNeutralPrimaryPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlNeutralSecondaryHover = `var(${foregroundCtrlNeutralSecondaryHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const foregroundCtrlNeutralSecondaryPressed = `var(${foregroundCtrlNeutralSecondaryPressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +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}))`; export const foregroundCtrlIconOnNeutralHover = `var(${foregroundCtrlIconOnNeutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; export const foregroundCtrlIconOnNeutralPressed = `var(${foregroundCtrlIconOnNeutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlIconOnNeutralDisabled = `var(${foregroundCtrlIconOnNeutralDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +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}))`; -export const foregroundCtrlIconOnSubtleHover = `var(${foregroundCtrlIconOnSubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlIconOnSubtlePressed = `var(${foregroundCtrlIconOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlIconOnSubtleDisabled = `var(${foregroundCtrlIconOnSubtleDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; -export const foregroundCtrlOnBrandHover = `var(${foregroundCtrlOnBrandHoverRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const foregroundCtrlOnBrandPressed = `var(${foregroundCtrlOnBrandPressedRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +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}))`; export const foregroundCtrlActiveBrandHover = `var(${foregroundCtrlActiveBrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw}))`; export const foregroundCtrlActiveBrandPressed = `var(${foregroundCtrlActiveBrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw}))`; @@ -541,18 +562,18 @@ export const foregroundCtrlOnActiveBrandRest = `var(${foregroundCtrlOnActiveBran export const foregroundCtrlOnActiveBrandHover = `var(${foregroundCtrlOnActiveBrandHoverRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; export const foregroundCtrlOnActiveBrandPressed = `var(${foregroundCtrlOnActiveBrandPressedRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; export const foregroundCtrlOnActiveBrandDisabled = `var(${foregroundCtrlOnActiveBrandDisabledRaw}, var(${foregroundCtrlOnBrandDisabledRaw}))`; -export const foregroundCtrlOnOutlineRest = `var(${foregroundCtrlOnOutlineRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOnOutlineHover = `var(${foregroundCtrlOnOutlineHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOnOutlinePressed = `var(${foregroundCtrlOnOutlinePressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOnOutlineDisabled = `var(${foregroundCtrlOnOutlineDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; -export const foregroundCtrlOnSubtleRest = `var(${foregroundCtrlOnSubtleRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOnSubtleHover = `var(${foregroundCtrlOnSubtleHoverRaw}, var(${foregroundCtrlNeutralPrimaryHoverRaw}))`; -export const foregroundCtrlOnSubtlePressed = `var(${foregroundCtrlOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw}))`; -export const foregroundCtrlOnSubtleDisabled = `var(${foregroundCtrlOnSubtleDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; -export const foregroundCtrlOnTransparentRest = `var(${foregroundCtrlOnTransparentRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOnTransparentHover = `var(${foregroundCtrlOnTransparentHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOnTransparentPressed = `var(${foregroundCtrlOnTransparentPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; -export const foregroundCtrlOnTransparentDisabled = `var(${foregroundCtrlOnTransparentDisabledRaw}, var(${foregroundCtrlNeutralPrimaryDisabledRaw}))`; +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}))`; export const materialAcrylicDefaultColorBlend = `var(${materialAcrylicDefaultColorBlendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; export const materialAcrylicDefaultLumBlend = `var(${materialAcrylicDefaultLumBlendRaw}, var(${backgroundLayerPrimarySolidRaw}))`; diff --git a/packages/semantic-tokens/utils/fluentOverrides.test.ts b/packages/semantic-tokens/utils/fluentOverrides.test.ts index a647a085f76fb..cfac05aa99ee5 100644 --- a/packages/semantic-tokens/utils/fluentOverrides.test.ts +++ b/packages/semantic-tokens/utils/fluentOverrides.test.ts @@ -5,6 +5,7 @@ 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(tokens[fluentOverrideKey as keyof typeof tokens]).toBeTruthy(); }); }); From 158b560dea7c47b0e1a31466667a8ac1fdeff3a6 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 22 May 2025 13:37:13 -0700 Subject: [PATCH 14/66] Extended-tokens: Fluent variant fallbacks (#34498) Landing legacy fallback structure --- .../Button/useButtonStyles.styles.ts | 2 +- .../etc/semantic-tokens.api.md | 5 ++- packages/semantic-tokens/scripts/tokenGen.ts | 35 ++++++++++++++++++- .../semantic-tokens/src/control/tokens.ts | 4 +-- .../src/fluentLegacyVariants.ts | 17 +++++++++ .../semantic-tokens/src/fluentOverrides.ts | 2 +- packages/semantic-tokens/src/index.ts | 1 + packages/semantic-tokens/src/legacy/tokens.ts | 10 +++--- .../src/legacyVariant/tokens.ts | 11 ++++++ .../semantic-tokens/src/variants/tokens.ts | 5 +++ 10 files changed, 81 insertions(+), 11 deletions(-) create mode 100644 packages/semantic-tokens/src/fluentLegacyVariants.ts create mode 100644 packages/semantic-tokens/src/legacyVariant/tokens.ts create mode 100644 packages/semantic-tokens/src/variants/tokens.ts diff --git a/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts index 7020d797ec5d9..e56a4f20d8fd2 100644 --- a/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts @@ -134,7 +134,7 @@ const useIconBaseClassName = makeResetStyles({ height: semanticTokens.sizeCtrlIcon, width: semanticTokens.sizeCtrlIcon, - [iconSpacingVar]: `calc(${semanticTokens.gapInsideCtrlDefault} + ${semanticTokens.paddingCtrlTextSide})`, + [iconSpacingVar]: `calc(${semanticTokens._ctrlButtonGapInsideDefault} + ${semanticTokens.paddingCtrlTextSide})`, }); const useRootStyles = makeStyles({ diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index f74abf1a10ff2..48029984bc81d 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -862,6 +862,9 @@ export const ctrlBooleanSelectionHint = "var(--smtc-ctrl-boolean-selection-hint) // @public (undocumented) export const ctrlBooleanSelectionHintRaw = "--smtc-ctrl-boolean-selection-hint"; +// @public +export const _ctrlButtonGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, var(--spacingHorizontalSNudge))"; + // @public (undocumented) export const ctrlCardStateDisabled = "var(--smtc-ctrl-card-state-disabled)"; @@ -3179,7 +3182,7 @@ export const gapBetweenTextSmall = "var(--smtc-gap-between-text-small, var(--smt export const gapBetweenTextSmallRaw = "--smtc-gap-between-text-small"; // @public (undocumented) -export const gapInsideCtrlDefault = "var(--smtc-gap-inside-ctrl-default, var(--spacingHorizontalSNudge))"; +export const gapInsideCtrlDefault = "var(--smtc-gap-inside-ctrl-default, var(--spacingHorizontalS))"; // @public (undocumented) export const gapInsideCtrlDefaultRaw = "--smtc-gap-inside-ctrl-default"; diff --git a/packages/semantic-tokens/scripts/tokenGen.ts b/packages/semantic-tokens/scripts/tokenGen.ts index 4e9e402b641c0..22f6ea14cbc81 100644 --- a/packages/semantic-tokens/scripts/tokenGen.ts +++ b/packages/semantic-tokens/scripts/tokenGen.ts @@ -5,6 +5,7 @@ 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'; @@ -134,7 +135,9 @@ const getResolvedToken = (token: string, tokenData: Token, tokenNameRaw: string) const fstReferenceName = toCamelCase(cleanFstTokenName(tokenData.fst_reference)); const tokenSemanticRef = isInvalidToken(fstReferenceName) ? null : fstReferenceName + 'Raw'; - const fluentFallback = fluentFallbacks[token]; + // 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( @@ -215,12 +218,42 @@ const generateTokenVariables = () => { } } + 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); diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index af1285536a9aa..767d3e59d69e3 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -25,8 +25,8 @@ import { spacingHorizontalM, spacingHorizontalS, spacingHorizontalL, - spacingHorizontalSNudge, spacingHorizontalXS, + spacingHorizontalSNudge, borderRadiusCircular, strokeWidthThin, colorNeutralStroke1, @@ -328,7 +328,7 @@ export const gapBetweenContentXLarge = `var(${gapBetweenContentXLargeRaw})`; export const gapBetweenContentXxLarge = `var(${gapBetweenContentXxLargeRaw})`; export const gapBetweenCtrlLgDefault = `var(${gapBetweenCtrlLgDefaultRaw})`; export const gapBetweenCtrlSmDefault = `var(${gapBetweenCtrlSmDefaultRaw})`; -export const gapInsideCtrlDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingHorizontalSNudge})`; +export const gapInsideCtrlDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingHorizontalS})`; export const gapInsideCtrlSmDefault = `var(${gapInsideCtrlSmDefaultRaw}, ${spacingHorizontalXS})`; export const gapInsideCtrlSmToSecondaryIcon = `var(${gapInsideCtrlSmToSecondaryIconRaw})`; export const gapInsideCtrlLgDefault = `var(${gapInsideCtrlLgDefaultRaw}, ${spacingHorizontalSNudge})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts new file mode 100644 index 0000000000000..310946994b4a1 --- /dev/null +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -0,0 +1,17 @@ +export type LegacyFluentVariantValue = + | { + originalToken: string; + f2Token: string; + rawValue?: never; + } + | { + originalToken: string; + f2Token?: never; + rawValue: string; + }; + +export type LegacyFluentVariants = Record; + +export const legacyFluentVariantsValues: LegacyFluentVariants = { + _ctrlButtonGapInsideDefault: { originalToken: 'gapInsideCtrlDefault', f2Token: 'spacingHorizontalSNudge' }, +}; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 6fad81d9703f9..0f6b84ca536cf 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -76,7 +76,7 @@ export const fluentOverrides: FluentOverrides = { foregroundCtrlOnTransparentHover: { f2Token: 'colorNeutralForeground2BrandHover' }, foregroundCtrlOnTransparentPressed: { f2Token: 'colorNeutralForeground2BrandPressed' }, foregroundCtrlOnTransparentRest: { f2Token: 'colorNeutralForeground2' }, - gapInsideCtrlDefault: { f2Token: 'spacingHorizontalSNudge' }, + gapInsideCtrlDefault: { f2Token: 'spacingHorizontalS' }, gapInsideCtrlLgDefault: { f2Token: 'spacingHorizontalSNudge' }, gapInsideCtrlSmDefault: { f2Token: 'spacingHorizontalXS' }, paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 27ee76ee79e88..a89f27841294b 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1801,3 +1801,4 @@ export { ctrlCardStatePressed, ctrlCardStateDisabled, } from './components/card/tokens'; +export { _ctrlButtonGapInsideDefault } from './legacyVariant/tokens'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 367baed8c6558..451e7ee2fee09 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -164,6 +164,11 @@ export const colorNeutralForeground1Pressed = 'var(--colorNeutralForeground1Pres * @public */ export const colorNeutralForegroundOnBrand = 'var(--colorNeutralForegroundOnBrand)'; +/** + * 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#spacingHorizontalSNudge | `spacingHorizontalSNudge`} design token. * @public @@ -184,11 +189,6 @@ export const spacingHorizontalM = 'var(--spacingHorizontalM)'; * @public */ export const spacingHorizontalL = 'var(--spacingHorizontalL)'; -/** - * 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#colorPaletteRedBackground3 | `colorPaletteRedBackground3`} design token. * @public diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts new file mode 100644 index 0000000000000..405faab5636a5 --- /dev/null +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -0,0 +1,11 @@ +// 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'; + +/** + * 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})`; diff --git a/packages/semantic-tokens/src/variants/tokens.ts b/packages/semantic-tokens/src/variants/tokens.ts new file mode 100644 index 0000000000000..519d3ba9fc5e3 --- /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})`; From 66406452fd8cf6ee7f203e87a200df033cda1fcc Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 29 May 2025 09:42:13 -0700 Subject: [PATCH 15/66] Extended-tokens: Accordion (#34500) --- ...-7122841d-a550-4271-ba00-e723fea484a0.json | 7 ++ .../useAccordionHeaderStyles.styles.ts | 75 +++++++++++++------ .../Button/useButtonStyles.styles.ts | 10 ++- packages/semantic-tokens/.eslintrc.json | 2 +- .../etc/semantic-tokens.api.md | 19 +++-- .../src/components/choice/tokens.ts | 2 +- .../src/components/list/tokens.ts | 3 +- .../semantic-tokens/src/control/tokens.ts | 6 +- .../src/fluentLegacyVariants.ts | 14 +++- .../semantic-tokens/src/fluentOverrides.ts | 12 ++- packages/semantic-tokens/src/index.ts | 7 +- .../src/legacyVariant/tokens.ts | 30 +++++++- 12 files changed, 143 insertions(+), 44 deletions(-) create mode 100644 change/@fluentui-react-accordion-7122841d-a550-4271-ba00-e723fea484a0.json diff --git a/change/@fluentui-react-accordion-7122841d-a550-4271-ba00-e723fea484a0.json b/change/@fluentui-react-accordion-7122841d-a550-4271-ba00-e723fea484a0.json new file mode 100644 index 0000000000000..80d695482f6d8 --- /dev/null +++ b/change/@fluentui-react-accordion-7122841d-a550-4271-ba00-e723fea484a0.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Implement semantic tokens", + "packageName": "@fluentui/react-accordion", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts index 6a799680fd194..bff5fe9158287 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts +++ b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts @@ -1,8 +1,9 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; -import { tokens, typographyStyles } from '@fluentui/react-theme'; import type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { tokens } from '@fluentui/react-theme'; export const accordionHeaderClassNames: SlotClassNames = { root: 'fui-AccordionHeader', @@ -11,6 +12,8 @@ export const accordionHeaderClassNames: SlotClassNames = { icon: 'fui-AccordionHeader__icon', }; +const paddingCtrlHorizontalDefaultNudge = `max(calc(${semanticTokens.paddingCtrlHorizontalDefault} - 2px), 2px)`; + const useStyles = makeStyles({ // TODO: this should be extracted to another package resetButton: { @@ -27,14 +30,22 @@ const useStyles = makeStyles({ }, focusIndicator: createFocusOutlineStyle(), root: { - color: tokens.colorNeutralForeground1, + color: semanticTokens._ctrlAccordionForegroundRest, backgroundColor: tokens.colorTransparentBackground, margin: '0', - borderRadius: tokens.borderRadiusMedium, + borderRadius: semanticTokens.ctrlListCornerRest, + + ':hover': { + color: semanticTokens._ctrlAccordionForegroundHover, + }, + + ':hover:active': { + color: semanticTokens._ctrlAccordionForegroundPressed, + }, }, rootDisabled: { backgroundImage: 'none', - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlOnTransparentDisabled, }, rootInline: { display: 'inline-block', @@ -43,47 +54,65 @@ const useStyles = makeStyles({ position: 'relative', width: '100%', ...shorthands.borderWidth('0'), - padding: `0 ${tokens.spacingHorizontalM} 0 ${tokens.spacingHorizontalMNudge}`, - minHeight: '44px', + padding: `0 ${semanticTokens.paddingCtrlHorizontalDefault} 0 ${paddingCtrlHorizontalDefaultNudge}`, + minHeight: semanticTokens.sizeCtrlDefault, + paddingTop: semanticTokens.paddingCtrlTextTop, + paddingBottom: semanticTokens.paddingCtrlTextBottom, display: 'flex', alignItems: 'center', cursor: 'pointer', - ...typographyStyles.body1, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, boxSizing: 'border-box', }, buttonSmall: { - minHeight: '32px', - fontSize: tokens.fontSizeBase200, + minHeight: semanticTokens.sizeCtrlSmDefault, + fontSize: semanticTokens.textGlobalCaption1FontSize, + paddingTop: semanticTokens.paddingCtrlSmTextTop, + paddingBottom: semanticTokens.paddingCtrlSmTextBottom, }, buttonLarge: { - lineHeight: tokens.lineHeightBase400, - fontSize: tokens.fontSizeBase400, + minHeight: semanticTokens.sizeCtrlLgDefault, + lineHeight: semanticTokens.textGlobalBody2LineHeight, + fontSize: semanticTokens.textGlobalBody2FontSize, + paddingTop: semanticTokens.paddingCtrlLgTextTop, + paddingBottom: semanticTokens.paddingCtrlLgTextBottom, }, buttonExtraLarge: { - lineHeight: tokens.lineHeightBase500, - fontSize: tokens.fontSizeBase500, + minHeight: semanticTokens.sizeCtrlLgDefault, + lineHeight: semanticTokens.textGlobalBody1LineHeight, + fontSize: semanticTokens.textGlobalBody1FontSize, + paddingTop: semanticTokens.paddingCtrlLgTextTop, + paddingBottom: semanticTokens.paddingCtrlLgTextBottom, }, buttonInline: { display: 'inline-flex', }, buttonExpandIconEndNoIcon: { - paddingLeft: tokens.spacingHorizontalM, + paddingLeft: semanticTokens.paddingCtrlHorizontalDefault, }, buttonExpandIconEnd: { - paddingRight: tokens.spacingHorizontalMNudge, + paddingRight: paddingCtrlHorizontalDefaultNudge, }, buttonDisabled: { cursor: 'not-allowed', }, expandIcon: { - height: '100%', + height: semanticTokens.ctrlChoiceBaseSize, + width: semanticTokens.ctrlChoiceBaseSize, display: 'flex', alignItems: 'center', - lineHeight: tokens.lineHeightBase500, - fontSize: tokens.fontSizeBase500, + lineHeight: semanticTokens.textGlobalBody1LineHeight, + fontSize: semanticTokens.sizeCtrlIcon, + '> *': { + height: semanticTokens.sizeCtrlIcon, + width: semanticTokens.sizeCtrlIcon, + }, }, expandIconStart: { - paddingRight: tokens.spacingHorizontalS, + paddingRight: semanticTokens.gapInsideCtrlDefault, }, expandIconEnd: { flexGrow: 1, @@ -91,15 +120,15 @@ const useStyles = makeStyles({ flexBasis: '0%', display: 'flex', justifyContent: 'flex-end', - paddingLeft: tokens.spacingHorizontalS, + paddingLeft: semanticTokens.gapInsideCtrlDefault, }, icon: { height: '100%', display: 'flex', alignItems: 'center', - paddingRight: tokens.spacingHorizontalS, - lineHeight: tokens.lineHeightBase500, - fontSize: tokens.fontSizeBase500, + paddingRight: semanticTokens.gapInsideCtrlDefault, + lineHeight: semanticTokens.textGlobalBody1LineHeight, + fontSize: semanticTokens.textGlobalBody1FontSize, }, }); diff --git a/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts index e56a4f20d8fd2..300a93028f646 100644 --- a/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts @@ -29,6 +29,10 @@ const paddingLgHorizontalNoIcon = `calc(${semanticTokens.paddingCtrlLgHorizontal */ 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', @@ -64,7 +68,7 @@ const useRootBaseClassName = makeResetStyles({ }, padding: `${semanticTokens.paddingCtrlTextTop} ${paddingHorizontalNoIcon} ${semanticTokens.paddingCtrlTextBottom} ${paddingHorizontalNoIcon}`, - minWidth: semanticTokens.sizeCtrlDefault, + minWidth: minButtonWidth, borderRadius: semanticTokens.cornerCtrlRest, fontSize: semanticTokens.textRampItemBodyFontSize, @@ -300,7 +304,7 @@ const useRootStyles = makeStyles({ // Size variations small: { - minWidth: semanticTokens.sizeCtrlSmDefault, + minWidth: minButtonSmWidth, padding: `${buttonSpacingSmall} ${paddingSmHorizontalNoIcon}`, borderRadius: semanticTokens.cornerCtrlSmRest, @@ -332,7 +336,7 @@ const useRootStyles = makeStyles({ paddingLeft: paddingHorizontalNoIcon, }, large: { - minWidth: semanticTokens.sizeCtrlLgDefault, + minWidth: minButtonLgWidth, padding: `${buttonSpacingLarge} ${paddingLgHorizontalNoIcon}`, borderRadius: semanticTokens.cornerCtrlLgRest, diff --git a/packages/semantic-tokens/.eslintrc.json b/packages/semantic-tokens/.eslintrc.json index b09f19d3a6b3d..f91d91e764c7c 100644 --- a/packages/semantic-tokens/.eslintrc.json +++ b/packages/semantic-tokens/.eslintrc.json @@ -11,7 +11,7 @@ }, "overrides": [ { - "files": ["./src/fluentOverrides.ts"], + "files": ["./src/fluentOverrides.ts", "./src/fluentLegacyVariants.ts"], "rules": { "sort-keys": ["error"] } diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 48029984bc81d..f5fdfe3553205 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -628,6 +628,15 @@ export const cornerZero = "var(--smtc-corner-zero, var(--borderRadiusNone))"; // @public (undocumented) export const cornerZeroRaw = "--smtc-corner-zero"; +// @public +export const _ctrlAccordionForegroundHover = "var(--smtc-foreground-ctrl-on-transparent-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; + +// @public +export const _ctrlAccordionForegroundPressed = "var(--smtc-foreground-ctrl-on-transparent-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; + +// @public +export const _ctrlAccordionForegroundRest = "var(--smtc-foreground-ctrl-on-transparent-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; + // @public (undocumented) export const ctrlAvatarActiveRingSize = "var(--smtc-ctrl-avatar-active-ring-size)"; @@ -914,7 +923,7 @@ export const ctrlChoiceBaseBackgroundRest = "var(--smtc-ctrl-choice-base-backgro 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))"; +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"; @@ -1952,7 +1961,7 @@ export const ctrlListCornerPressed = "var(--smtc-ctrl-list-corner-pressed, var(- export const ctrlListCornerPressedRaw = "--smtc-ctrl-list-corner-pressed"; // @public (undocumented) -export const ctrlListCornerRest = "var(--smtc-ctrl-list-corner-rest, var(--smtc-corner-ctrl-rest))"; +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"; @@ -3692,7 +3701,7 @@ export const shadowWindowInactiveKey = "var(--smtc-shadow-window-inactive-key, v export const shadowWindowInactiveKeyRaw = "--smtc-shadow-window-inactive-key"; // @public (undocumented) -export const sizeCtrlDefault = "var(--smtc-size-ctrl-default, 96px)"; +export const sizeCtrlDefault = "var(--smtc-size-ctrl-default, 44px)"; // @public (undocumented) export const sizeCtrlDefaultRaw = "--smtc-size-ctrl-default"; @@ -3710,7 +3719,7 @@ export const sizeCtrlIconSecondary = "var(--smtc-size-ctrl-icon-secondary)"; export const sizeCtrlIconSecondaryRaw = "--smtc-size-ctrl-icon-secondary"; // @public (undocumented) -export const sizeCtrlLgDefault = "var(--smtc-size-ctrl-lg-default, 96px)"; +export const sizeCtrlLgDefault = "var(--smtc-size-ctrl-lg-default, 44px)"; // @public (undocumented) export const sizeCtrlLgDefaultRaw = "--smtc-size-ctrl-lg-default"; @@ -3722,7 +3731,7 @@ export const sizeCtrlLgIcon = "var(--smtc-size-ctrl-lg-icon, 24px)"; export const sizeCtrlLgIconRaw = "--smtc-size-ctrl-lg-icon"; // @public (undocumented) -export const sizeCtrlSmDefault = "var(--smtc-size-ctrl-sm-default, 64px)"; +export const sizeCtrlSmDefault = "var(--smtc-size-ctrl-sm-default, 32px)"; // @public (undocumented) export const sizeCtrlSmDefaultRaw = "--smtc-size-ctrl-sm-default"; diff --git a/packages/semantic-tokens/src/components/choice/tokens.ts b/packages/semantic-tokens/src/components/choice/tokens.ts index 4b87453875d89..043e8b5dfe8d7 100644 --- a/packages/semantic-tokens/src/components/choice/tokens.ts +++ b/packages/semantic-tokens/src/components/choice/tokens.ts @@ -71,7 +71,7 @@ import { export const ctrlChoicePaddingHorizontal = `var(${ctrlChoicePaddingHorizontalRaw})`; export const ctrlChoicePaddingVertical = `var(${ctrlChoicePaddingVerticalRaw})`; -export const ctrlChoiceBaseSize = `var(${ctrlChoiceBaseSizeRaw}, var(${sizeCtrlIconRaw}))`; +export const ctrlChoiceBaseSize = `var(${ctrlChoiceBaseSizeRaw}, var(${sizeCtrlIconRaw}, 20px))`; export const ctrlChoiceIconTheme = `var(${ctrlChoiceIconThemeRaw})`; export const ctrlChoiceBaseBackgroundRest = `var(${ctrlChoiceBaseBackgroundRestRaw}, var(${backgroundCtrlOutlineRestRaw}))`; export const ctrlChoiceBaseBackgroundHover = `var(${ctrlChoiceBaseBackgroundHoverRaw}, var(${backgroundCtrlOutlineHoverRaw}))`; diff --git a/packages/semantic-tokens/src/components/list/tokens.ts b/packages/semantic-tokens/src/components/list/tokens.ts index dd5f380257aeb..0e6f143e558ac 100644 --- a/packages/semantic-tokens/src/components/list/tokens.ts +++ b/packages/semantic-tokens/src/components/list/tokens.ts @@ -13,6 +13,7 @@ import { cornerCtrlLgRestRaw, paddingCtrlLgHorizontalDefaultRaw, } from '../../control/variables'; +import { borderRadiusMedium } from '../../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, backgroundCtrlSubtleDisabledRaw, @@ -83,7 +84,7 @@ 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}))`; +export const ctrlListCornerRest = `var(${ctrlListCornerRestRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusMedium}))`; export const ctrlListCornerHover = `var(${ctrlListCornerHoverRaw}, var(${cornerCtrlRestRaw}))`; export const ctrlListCornerPressed = `var(${ctrlListCornerPressedRaw}, var(${cornerCtrlRestRaw}))`; export const ctrlListIndentLevel1 = `var(${ctrlListIndentLevel1Raw}, var(${paddingCtrlHorizontalDefaultRaw}))`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index 767d3e59d69e3..1f81de7b6b6b3 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -284,13 +284,13 @@ export const textStyleDefaultRegularFontFamily = `var(${textStyleDefaultRegularF export const textStyleDefaultRegularWeight = `var(${textStyleDefaultRegularWeightRaw}, ${fontWeightRegular})`; export const textStyleDefaultRegularLetterSpacing = `var(${textStyleDefaultRegularLetterSpacingRaw})`; export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightRaw})`; -export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw}, 96px)`; +export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw}, 44px)`; export const sizeCtrlIcon = `var(${sizeCtrlIconRaw}, 20px)`; export const sizeCtrlIconSecondary = `var(${sizeCtrlIconSecondaryRaw})`; export const textCtrlWeightSelected = `var(${textCtrlWeightSelectedRaw})`; -export const sizeCtrlSmDefault = `var(${sizeCtrlSmDefaultRaw}, 64px)`; +export const sizeCtrlSmDefault = `var(${sizeCtrlSmDefaultRaw}, 32px)`; export const sizeCtrlSmIcon = `var(${sizeCtrlSmIconRaw}, 20px)`; -export const sizeCtrlLgDefault = `var(${sizeCtrlLgDefaultRaw}, 96px)`; +export const sizeCtrlLgDefault = `var(${sizeCtrlLgDefaultRaw}, 44px)`; export const sizeCtrlLgIcon = `var(${sizeCtrlLgIconRaw}, 24px)`; export const paddingContentAlignDefault = `var(${paddingContentAlignDefaultRaw})`; export const paddingContentAlignOutdentIconOnSubtle = `var(${paddingContentAlignOutdentIconOnSubtleRaw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 310946994b4a1..5123a88dd7a37 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -13,5 +13,17 @@ export type LegacyFluentVariantValue = export type LegacyFluentVariants = Record; export const legacyFluentVariantsValues: LegacyFluentVariants = { - _ctrlButtonGapInsideDefault: { originalToken: 'gapInsideCtrlDefault', f2Token: 'spacingHorizontalSNudge' }, + _ctrlAccordionForegroundHover: { + f2Token: 'colorNeutralForeground2', + originalToken: 'foregroundCtrlOnTransparentHover', + }, + _ctrlAccordionForegroundPressed: { + f2Token: 'colorNeutralForeground2', + originalToken: 'foregroundCtrlOnTransparentPressed', + }, + _ctrlAccordionForegroundRest: { + f2Token: 'colorNeutralForeground2', + originalToken: 'foregroundCtrlOnTransparentRest', + }, + _ctrlButtonGapInsideDefault: { f2Token: 'spacingHorizontalSNudge', originalToken: 'gapInsideCtrlDefault' }, }; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 0f6b84ca536cf..c5ad254f77afe 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -30,6 +30,7 @@ export const fluentOverrides: FluentOverrides = { cornerCtrlRest: { f2Token: 'borderRadiusMedium' }, cornerCtrlSmRest: { f2Token: 'borderRadiusMedium' }, // Button uses borderRadiusMedium in all sizes cornerZero: { f2Token: 'borderRadiusNone' }, + ctrlChoiceBaseSize: { rawValue: '20px' }, ctrlFocusInnerStroke: { f2Token: 'colorStrokeFocus2' }, ctrlFocusInnerStrokeWidth: { f2Token: 'strokeWidthThin' }, ctrlFocusOuterStroke: { f2Token: 'colorTransparentStroke' }, @@ -40,6 +41,7 @@ export const fluentOverrides: FluentOverrides = { ctrlLinkForegroundNeutralHover: { f2Token: 'colorNeutralForeground2Hover' }, ctrlLinkForegroundNeutralPressed: { f2Token: 'colorNeutralForeground2Pressed' }, ctrlLinkForegroundNeutralRest: { f2Token: 'colorNeutralForeground2' }, + ctrlListCornerRest: { f2Token: 'borderRadiusMedium' }, ctrlProgressBackgroundEmpty: { f2Token: 'colorNeutralBackground6' }, ctrlProgressBackgroundFilled: { f2Token: 'colorCompoundBrandBackground' }, ctrlProgressCorner: { f2Token: 'borderRadiusMedium' }, @@ -83,16 +85,20 @@ export const fluentOverrides: FluentOverrides = { paddingCtrlHorizontalIconOnly: { rawValue: '5px' }, paddingCtrlLgHorizontalDefault: { f2Token: 'spacingHorizontalL' }, paddingCtrlLgHorizontalIconOnly: { rawValue: '7px' }, + paddingCtrlLgTextBottom: null, // We can add a value here if needed, but for now it's a noop in Accordion + paddingCtrlLgTextTop: null, // We can add a value here if needed, but for now it's a noop in Accordion paddingCtrlSmHorizontalDefault: { f2Token: 'spacingHorizontalS' }, paddingCtrlSmHorizontalIconOnly: { rawValue: '1px' }, + paddingCtrlSmTextBottom: null, // We can add a value here if needed, but for now it's a noop in Accordion + paddingCtrlSmTextTop: null, // We can add a value here if needed, but for now it's a noop in Accordion paddingCtrlTextBottom: { rawValue: '5px' }, paddingCtrlTextSide: { rawValue: '0px' }, // For now, text padding is not applied (use default); paddingCtrlTextTop: { rawValue: '5px' }, - sizeCtrlDefault: { rawValue: '96px' }, + sizeCtrlDefault: { rawValue: '44px' }, sizeCtrlIcon: { rawValue: '20px' }, - sizeCtrlLgDefault: { rawValue: '96px' }, + sizeCtrlLgDefault: { rawValue: '44px' }, sizeCtrlLgIcon: { rawValue: '24px' }, - sizeCtrlSmDefault: { rawValue: '64px' }, + sizeCtrlSmDefault: { rawValue: '32px' }, sizeCtrlSmIcon: { rawValue: '20px' }, statusDangerBackground: { f2Token: 'colorPaletteRedBackground3' }, statusDangerTintForeground: { f2Token: 'colorPaletteRedForeground3' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index a89f27841294b..56b2b6bd21ca8 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1801,4 +1801,9 @@ export { ctrlCardStatePressed, ctrlCardStateDisabled, } from './components/card/tokens'; -export { _ctrlButtonGapInsideDefault } from './legacyVariant/tokens'; +export { + _ctrlAccordionForegroundHover, + _ctrlAccordionForegroundPressed, + _ctrlAccordionForegroundRest, + _ctrlButtonGapInsideDefault, +} from './legacyVariant/tokens'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 405faab5636a5..81ccff65bd003 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -1,7 +1,33 @@ // 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'; +import { foregroundCtrlNeutralPrimaryRestRaw, gapInsideCtrlDefaultRaw } from '../control/variables'; +import { colorNeutralForeground2, spacingHorizontalSNudge } from '../legacy/tokens'; +import { + foregroundCtrlOnTransparentHoverRaw, + foregroundCtrlOnTransparentPressedRaw, + foregroundCtrlOnTransparentRestRaw, +} from '../optional/variables'; +/** + * 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}, ${colorNeutralForeground2}))`; +/** + * 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}, ${colorNeutralForeground2}))`; +/** + * 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}, ${colorNeutralForeground2}))`; /** * This is a legacy variant for gapInsideCtrlDefault to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. From 534318d14daa8763ed55b890c1e545a6a3d74209 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 29 May 2025 09:46:50 -0700 Subject: [PATCH 16/66] Extended-tokens: Ensure legacy variants also get flat exported from legacy tokens (bugfix) (#34551) --- .../semantic-tokens/scripts/legacyTokens.ts | 46 ++++++++++++++----- 1 file changed, 35 insertions(+), 11 deletions(-) diff --git a/packages/semantic-tokens/scripts/legacyTokens.ts b/packages/semantic-tokens/scripts/legacyTokens.ts index 5db8786ede4b9..20fc9ae220465 100644 --- a/packages/semantic-tokens/scripts/legacyTokens.ts +++ b/packages/semantic-tokens/scripts/legacyTokens.ts @@ -4,8 +4,25 @@ 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'); @@ -21,17 +38,24 @@ const generateLegacyTokens = () => { } // Add it to our list of exported tokens exportedTokens.push(fluent2Fallback); - if (!Object.keys(tokensPackage.tokens).includes(fluent2Fallback)) { - // 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 ${tokenOverride.f2Token} not found in fluent tokens`); + + // 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; } - const tokenValue = tokensPackage.tokens[fluent2Fallback as keyof typeof tokensPackage.tokens]; - const token = `/** - * CSS custom property value for the {@link @fluentui/tokens#${fluent2Fallback} | \`${fluent2Fallback}\`} design token. - * @public - */ - export const ${fluent2Fallback} = '${tokenValue}';\n`; + // Add it to our list of exported tokens + exportedTokens.push(fluent2Fallback); + + // Format exported token + const token = formatLegacyTokens(fluent2Fallback); return acc + token; }, ''); @@ -43,7 +67,7 @@ const generateLegacyTokens = () => { } // Run prettier to format the generated tokens - const formattedText = format(comment + generatedTokens, { + const formattedText = format(comment + generatedTokens + legacyVariantTokens, { parser: 'typescript', singleQuote: true, printWidth: 120, From 5f9c8fbde7da144d8138ee283edf86811f596146 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 29 May 2025 11:26:31 -0700 Subject: [PATCH 17/66] Extended-tokens: Add Kumo semantic theme (TEMPORARY - REMOVE BEFORE MERGE TO MASTER) (#34542) REMOVE BEFORE MERGING TO MASTER Force merging to extended-tokens as this is a temporary local update only needed for testing --- ...-c9a2a07b-3285-40b5-820a-ddcb8b185189.json | 7 + .../etc/react-storybook-addon.api.md | 3 + .../etc/semantic-tokens.api.md | 542 +++++++++++++++++ packages/semantic-tokens/scripts/tokenGen.ts | 7 + packages/semantic-tokens/src/index.ts | 1 + .../semantic-tokens/src/themes/kumoTheme.ts | 547 ++++++++++++++++++ 6 files changed, 1107 insertions(+) create mode 100644 change/@fluentui-react-storybook-addon-c9a2a07b-3285-40b5-820a-ddcb8b185189.json create mode 100644 packages/semantic-tokens/src/themes/kumoTheme.ts diff --git a/change/@fluentui-react-storybook-addon-c9a2a07b-3285-40b5-820a-ddcb8b185189.json b/change/@fluentui-react-storybook-addon-c9a2a07b-3285-40b5-820a-ddcb8b185189.json new file mode 100644 index 0000000000000..3d1facbb55f4f --- /dev/null +++ b/change/@fluentui-react-storybook-addon-c9a2a07b-3285-40b5-820a-ddcb8b185189.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "docs: Temporarily add kumo semantic theme (will be removed before merge)", + "packageName": "@fluentui/react-storybook-addon", + "email": "mifraser@microsoft.com", + "dependentChangeType": "none" +} diff --git a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md index 2d6fd538018df..d1c6f2a1aa3cd 100644 --- a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md +++ b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md @@ -83,6 +83,9 @@ export const themes: readonly [{ }, { readonly id: "teams-high-contrast"; readonly label: "Teams High Contrast"; +}, { + readonly id: "semantic-kumo"; + readonly label: "Semantic Kumo (Experimental)"; }]; // (No @packageDocumentation comment for this package) diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index f5fdfe3553205..2854e4e18775d 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -3304,6 +3304,548 @@ export const iconThemeCtrlSubtleSelected = "var(--smtc-icon-theme-ctrl-subtle-se // @public (undocumented) export const iconThemeCtrlSubtleSelectedRaw = "--smtc-icon-theme-ctrl-subtle-selected"; +// @public +export const kumoSemanticTokens: { + 'smtc-ai-brand-stop1': string; + 'smtc-ai-brand-stop2': string; + 'smtc-ai-brand-stop3': string; + 'smtc-ai-brand-stop4': string; + 'smtc-ai-shimmer-stop1': string; + 'smtc-ai-shimmer-stop2': string; + 'smtc-ai-shimmer-stop3': string; + 'smtc-ai-shimmer-stop4': string; + 'smtc-background-card-on-flyout-default-disabled': string; + 'smtc-background-card-on-flyout-default-hover': string; + 'smtc-background-card-on-flyout-default-pressed': string; + 'smtc-background-card-on-flyout-default-rest': string; + 'smtc-background-card-on-primary-alt-disabled': string; + 'smtc-background-card-on-primary-alt-hover': string; + 'smtc-background-card-on-primary-alt-pressed': string; + 'smtc-background-card-on-primary-alt-rest': string; + 'smtc-background-card-on-primary-default-disabled': string; + 'smtc-background-card-on-primary-default-hover': string; + 'smtc-background-card-on-primary-default-pressed': string; + 'smtc-background-card-on-primary-default-rest': string; + 'smtc-background-card-on-primary-default-selected': string; + 'smtc-background-card-on-secondary-alt-disabled': string; + 'smtc-background-card-on-secondary-alt-hover': string; + 'smtc-background-card-on-secondary-alt-pressed': string; + 'smtc-background-card-on-secondary-alt-rest': string; + 'smtc-background-card-on-secondary-default-disabled': string; + 'smtc-background-card-on-secondary-default-hover': string; + 'smtc-background-card-on-secondary-default-pressed': string; + 'smtc-background-card-on-secondary-default-rest': string; + 'smtc-background-ctrl-brand-disabled': string; + 'smtc-background-ctrl-brand-hover': string; + 'smtc-background-ctrl-brand-pressed': string; + 'smtc-background-ctrl-brand-rest': string; + 'smtc-background-ctrl-neutral-disabled': string; + 'smtc-background-ctrl-neutral-hover': string; + 'smtc-background-ctrl-neutral-pressed': string; + 'smtc-background-ctrl-neutral-rest': string; + 'smtc-background-ctrl-shape-safe-active-brand-disabled': string; + 'smtc-background-ctrl-shape-safe-neutral-hover': string; + 'smtc-background-ctrl-shape-safe-neutral-pressed': string; + 'smtc-background-ctrl-shape-safe-neutral-rest': string; + 'smtc-background-ctrl-subtle-hover': string; + 'smtc-background-ctrl-subtle-pressed': string; + 'smtc-background-flyout-color-blend': string; + 'smtc-background-flyout-lum-blend': string; + 'smtc-background-flyout-solid': string; + 'smtc-background-layer-primary-solid': string; + 'smtc-background-layer-secondary': string; + 'smtc-background-layer-tertiary': string; + 'smtc-background-smoke': string; + 'smtc-background-web-page-primary': string; + 'smtc-background-web-page-secondary': string; + 'smtc-background-window-primary-color-blend': string; + 'smtc-background-window-primary-lum-blend': string; + 'smtc-background-window-primary-solid': string; + 'smtc-background-window-secondary-color-blend': string; + 'smtc-background-window-secondary-lum-blend': string; + 'smtc-background-window-secondary-solid': string; + 'smtc-background-window-tab-band-color-blend': string; + 'smtc-background-window-tab-band-lum-blend': string; + 'smtc-background-window-tab-band-solid': string; + 'smtc-corner-bezel': string; + 'smtc-corner-card-rest': string; + 'smtc-corner-circular': string; + 'smtc-corner-ctrl-lg-rest': string; + 'smtc-corner-ctrl-rest': string; + 'smtc-corner-ctrl-sm-rest': string; + 'smtc-corner-flyout-rest': string; + 'smtc-corner-flyout-shell-rest': string; + 'smtc-corner-image-in-card': string; + 'smtc-corner-image-on-page': string; + 'smtc-corner-layer-default': string; + 'smtc-corner-toolbar-default': string; + 'smtc-corner-window-default': string; + 'smtc-corner-zero': string; + 'smtc-ctrl-avatar-active-ring-size': string; + 'smtc-ctrl-avatar-active-ring-stroke': string; + 'smtc-ctrl-avatar-active-ring-stroke-width': string; + 'smtc-ctrl-avatar-background': string; + 'smtc-ctrl-avatar-corner-group': string; + 'smtc-ctrl-avatar-foreground': string; + 'smtc-ctrl-avatar-icon-size': string; + 'smtc-ctrl-avatar-presence-badge-padding-bottom-right-offset': string; + 'smtc-ctrl-avatar-presence-badge-size': string; + 'smtc-ctrl-avatar-show-cutout': string; + 'smtc-ctrl-avatar-text-font-size': string; + 'smtc-ctrl-avatar-text-line-height': string; + 'smtc-ctrl-avatar-text-padding-top-offset': string; + 'smtc-ctrl-badge-beacon-size': string; + 'smtc-ctrl-badge-corner': string; + 'smtc-ctrl-badge-gap': string; + 'smtc-ctrl-badge-icon-size': string; + 'smtc-ctrl-badge-icon-size-figmaonly': string; + 'smtc-ctrl-badge-lg-corner': string; + 'smtc-ctrl-badge-lg-icon-size': string; + 'smtc-ctrl-badge-lg-icon-size-figmaonly': string; + 'smtc-ctrl-badge-lg-padding': string; + 'smtc-ctrl-badge-lg-size': string; + 'smtc-ctrl-badge-lg-text-padding-top': string; + 'smtc-ctrl-badge-padding': string; + 'smtc-ctrl-badge-size': string; + 'smtc-ctrl-badge-sm-corner': string; + 'smtc-ctrl-badge-sm-icon-size': string; + 'smtc-ctrl-badge-sm-icon-size-figmaonly': string; + 'smtc-ctrl-badge-sm-padding': string; + 'smtc-ctrl-badge-sm-size': string; + 'smtc-ctrl-badge-sm-text-padding-top': string; + 'smtc-ctrl-badge-text-padding-top': string; + 'smtc-ctrl-boolean-selection-hint': string; + 'smtc-ctrl-card-state-disabled': string; + 'smtc-ctrl-card-state-hover': string; + 'smtc-ctrl-card-state-pressed': string; + 'smtc-ctrl-card-state-rest': string; + 'smtc-ctrl-choice-base-background-disabled': string; + 'smtc-ctrl-choice-base-background-hover': string; + 'smtc-ctrl-choice-base-background-pressed': string; + 'smtc-ctrl-choice-base-background-rest': string; + 'smtc-ctrl-choice-base-stroke-hover': string; + 'smtc-ctrl-choice-base-stroke-pressed': string; + 'smtc-ctrl-choice-checkbox-corner': string; + 'smtc-ctrl-choice-checkbox-icon-size': string; + 'smtc-ctrl-choice-checkbox-indeterminate-height': string; + 'smtc-ctrl-choice-checkbox-indeterminate-width': string; + 'smtc-ctrl-choice-icon-theme': string; + 'smtc-ctrl-choice-lg-base-size': string; + 'smtc-ctrl-choice-lg-checkbox-corner': string; + 'smtc-ctrl-choice-lg-checkbox-icon-size': string; + 'smtc-ctrl-choice-lg-checkbox-icon-size-figmaonly': string; + 'smtc-ctrl-choice-lg-radio-dot-size-hover': string; + 'smtc-ctrl-choice-lg-radio-dot-size-pressed': string; + 'smtc-ctrl-choice-lg-radio-dot-size-rest': string; + 'smtc-ctrl-choice-lg-switch-height': string; + 'smtc-ctrl-choice-lg-switch-thumb-width-hover': string; + 'smtc-ctrl-choice-lg-switch-thumb-width-pressed': string; + 'smtc-ctrl-choice-lg-switch-thumb-width-rest': string; + 'smtc-ctrl-choice-lg-switch-width': string; + 'smtc-ctrl-choice-padding-horizontal': string; + 'smtc-ctrl-choice-padding-vertical': string; + 'smtc-ctrl-choice-radio-dot-size-rest': string; + 'smtc-ctrl-choice-sm-checkbox-corner': string; + 'smtc-ctrl-choice-sm-checkbox-icon-size': string; + 'smtc-ctrl-choice-sm-checkbox-icon-size-figmaonly': string; + 'smtc-ctrl-choice-sm-radio-dot-size': string; + 'smtc-ctrl-choice-sm-switch-height': string; + 'smtc-ctrl-choice-sm-switch-thumb-width-hover': string; + 'smtc-ctrl-choice-sm-switch-thumb-width-pressed': string; + 'smtc-ctrl-choice-sm-switch-thumb-width-rest': string; + 'smtc-ctrl-choice-sm-switch-width': string; + 'smtc-ctrl-choice-switch-padding-rest': string; + 'smtc-ctrl-choice-switch-thumb-shadow-ambient': string; + 'smtc-ctrl-choice-switch-thumb-shadow-key': string; + 'smtc-ctrl-choice-switch-thumb-width-pressed': string; + 'smtc-ctrl-choice-switch-thumb-width-rest': string; + 'smtc-ctrl-choice-switch-width': string; + 'smtc-ctrl-composer-container-background-default': string; + 'smtc-ctrl-composer-container-corner': string; + 'smtc-ctrl-composer-container-shadow-ambient': string; + 'smtc-ctrl-composer-container-shadow-key': string; + 'smtc-ctrl-composer-input-background-disabled': string; + 'smtc-ctrl-composer-input-background-hover': string; + 'smtc-ctrl-composer-input-background-pressed': string; + 'smtc-ctrl-composer-input-background-rest': string; + 'smtc-ctrl-composer-input-background-selected-rest': string; + 'smtc-ctrl-composer-input-bottom-stroke-width-hover': string; + 'smtc-ctrl-composer-input-bottom-stroke-width-pressed': string; + 'smtc-ctrl-composer-input-bottom-stroke-width-rest': string; + 'smtc-ctrl-composer-input-bottom-stroke-width-selected-rest': string; + 'smtc-ctrl-composer-input-corner-hover': string; + 'smtc-ctrl-composer-input-corner-pressed': string; + 'smtc-ctrl-composer-input-corner-rest': string; + 'smtc-ctrl-composer-input-shadow': string; + 'smtc-ctrl-composer-input-shadow-x-offset': string; + 'smtc-ctrl-composer-input-stroke-disabled': string; + 'smtc-ctrl-composer-input-stroke-hover': string; + 'smtc-ctrl-composer-input-stroke-pressed': string; + 'smtc-ctrl-composer-input-stroke-selected-rest': string; + 'smtc-ctrl-composer-input-stroke-width-hover': string; + 'smtc-ctrl-composer-input-stroke-width-pressed': string; + 'smtc-ctrl-composer-input-stroke-width-rest': string; + 'smtc-ctrl-composer-input-stroke-width-selected-rest': string; + 'smtc-ctrl-dialog-background': string; + 'smtc-ctrl-dialog-base-corner': string; + 'smtc-ctrl-dialog-base-shadow-ambient': string; + 'smtc-ctrl-dialog-base-shadow-key': string; + 'smtc-ctrl-dialog-layer-padding-bottom': string; + 'smtc-ctrl-divider-fixed-line-length': string; + 'smtc-ctrl-drag-background-color-blend': string; + 'smtc-ctrl-drag-background-lum-blend': string; + 'smtc-ctrl-drag-background-solid': string; + 'smtc-ctrl-fab-background-disabled': string; + 'smtc-ctrl-fab-background-hover': string; + 'smtc-ctrl-fab-background-pressed': string; + 'smtc-ctrl-fab-background-rest': string; + 'smtc-ctrl-fab-corner-hover': string; + 'smtc-ctrl-fab-corner-pressed': string; + 'smtc-ctrl-fab-corner-rest': string; + 'smtc-ctrl-fab-shadow-disabled-key': string; + 'smtc-ctrl-fab-shadow-hover-key': string; + 'smtc-ctrl-fab-shadow-pressed-key': string; + 'smtc-ctrl-fab-shadow-rest-ambient': string; + 'smtc-ctrl-fab-shadow-rest-key': string; + 'smtc-ctrl-focus-inner-stroke': string; + 'smtc-ctrl-focus-outer-stroke-width': string; + 'smtc-ctrl-focus-position-figmaonly': string; + 'smtc-ctrl-input-bottom-line-stroke-hover': string; + 'smtc-ctrl-input-bottom-line-stroke-pressed': string; + 'smtc-ctrl-input-bottom-line-stroke-rest': string; + 'smtc-ctrl-input-bottom-line-stroke-width-selected': string; + 'smtc-ctrl-input-stroke-disabled': string; + 'smtc-ctrl-input-stroke-error': string; + 'smtc-ctrl-input-stroke-hover': string; + 'smtc-ctrl-input-stroke-pressed': string; + 'smtc-ctrl-input-stroke-rest': string; + 'smtc-ctrl-input-stroke-selected': string; + 'smtc-ctrl-input-stroke-width-selected': string; + 'smtc-ctrl-link-foreground-brand-hover': string; + 'smtc-ctrl-link-foreground-brand-pressed': string; + 'smtc-ctrl-link-foreground-brand-rest': string; + 'smtc-ctrl-link-inline-show-underline-at-rest': string; + 'smtc-ctrl-link-inline-underline-dashed': string; + 'smtc-ctrl-link-inline-underline-solid-figmaonly': string; + 'smtc-ctrl-link-on-page-show-underline-at-rest': string; + 'smtc-ctrl-link-on-page-underline-dashed': string; + 'smtc-ctrl-link-on-page-underline-solid-figmaonly': string; + 'smtc-ctrl-list-background-selected-disabled': string; + 'smtc-ctrl-list-background-selected-hover': string; + 'smtc-ctrl-list-background-selected-pressed': string; + 'smtc-ctrl-list-background-selected-rest': string; + 'smtc-ctrl-list-choice-checkbox-corner': string; + 'smtc-ctrl-list-choice-checkbox-icon-size': string; + 'smtc-ctrl-list-choice-checkbox-icon-size-figmaonly': string; + 'smtc-ctrl-list-choice-dot-size': string; + 'smtc-ctrl-list-choice-dot-size-figmaonly': string; + 'smtc-ctrl-list-choice-foreground-hover': string; + 'smtc-ctrl-list-indent-level2': string; + 'smtc-ctrl-list-indent-level3': string; + 'smtc-ctrl-list-lg-indent-level1': string; + 'smtc-ctrl-list-lg-indent-level2': string; + 'smtc-ctrl-list-lg-indent-level3': string; + 'smtc-ctrl-list-pill-full-width': string; + 'smtc-ctrl-list-pill-length-rest': string; + 'smtc-ctrl-list-pill-stretch-padding-default': string; + 'smtc-ctrl-list-pill-stretch-padding-hint': string; + 'smtc-ctrl-list-pill-width': string; + 'smtc-ctrl-list-shadow-selected-ambient': string; + 'smtc-ctrl-list-shadow-selected-key': string; + 'smtc-ctrl-list-sm-indent-level2': string; + 'smtc-ctrl-list-sm-indent-level3': string; + 'smtc-ctrl-list-split-divider-padding-inset': string; + 'smtc-ctrl-list-split-divider-show-divider': string; + 'smtc-ctrl-list-split-divider-stroke': string; + 'smtc-ctrl-lite-filter-background-selected': string; + 'smtc-ctrl-lite-filter-foreground-selected': string; + 'smtc-ctrl-lite-filter-stroke-selected': string; + 'smtc-ctrl-progress-background-empty': string; + 'smtc-ctrl-progress-height-filled': string; + 'smtc-ctrl-progress-lg-height-filled': string; + 'smtc-ctrl-progress-sm-height-filled': string; + 'smtc-ctrl-rating-icon-gap': string; + 'smtc-ctrl-rating-icon-size': string; + 'smtc-ctrl-rating-icon-theme': string; + 'smtc-ctrl-segmented-background-disabled': string; + 'smtc-ctrl-segmented-background-hover': string; + 'smtc-ctrl-segmented-background-pressed': string; + 'smtc-ctrl-segmented-background-rest': string; + 'smtc-ctrl-segmented-lg-corner-hover': string; + 'smtc-ctrl-segmented-lg-corner-pressed': string; + 'smtc-ctrl-segmented-lg-corner-rest': string; + 'smtc-ctrl-segmented-lg-item-corner-hover': string; + 'smtc-ctrl-segmented-lg-item-corner-pressed': string; + 'smtc-ctrl-segmented-lg-item-corner-rest': string; + 'smtc-ctrl-segmented-lg-padding-rest': string; + 'smtc-ctrl-segmented-padding-hover': string; + 'smtc-ctrl-segmented-padding-pressed': string; + 'smtc-ctrl-segmented-padding-rest': string; + 'smtc-ctrl-segmented-sm-corner-hover': string; + 'smtc-ctrl-segmented-sm-corner-pressed': string; + 'smtc-ctrl-segmented-sm-corner-rest': string; + 'smtc-ctrl-segmented-sm-item-corner-rest': string; + 'smtc-ctrl-segmented-sm-padding-rest': string; + 'smtc-ctrl-segmented-stroke-disabled': string; + 'smtc-ctrl-segmented-stroke-hover': string; + 'smtc-ctrl-segmented-stroke-pressed': string; + 'smtc-ctrl-segmented-stroke-rest': string; + 'smtc-ctrl-slider-bar-foreground-empty-disabled': string; + 'smtc-ctrl-slider-bar-foreground-empty-hover': string; + 'smtc-ctrl-slider-bar-foreground-empty-pressed': string; + 'smtc-ctrl-slider-bar-foreground-empty-rest': string; + 'smtc-ctrl-slider-bar-foreground-filled-disabled': string; + 'smtc-ctrl-slider-bar-foreground-filled-hover': string; + 'smtc-ctrl-slider-bar-foreground-filled-pressed': string; + 'smtc-ctrl-slider-lg-bar-height': string; + 'smtc-ctrl-slider-lg-thumb-size-hover': string; + 'smtc-ctrl-slider-lg-thumb-size-pressed': string; + 'smtc-ctrl-slider-lg-thumb-size-rest': string; + 'smtc-ctrl-slider-sm-bar-height': string; + 'smtc-ctrl-slider-sm-thumb-size-hover': string; + 'smtc-ctrl-slider-sm-thumb-size-pressed': string; + 'smtc-ctrl-slider-sm-thumb-size-rest': string; + 'smtc-ctrl-slider-thumb-background-hover': string; + 'smtc-ctrl-slider-thumb-background-pressed': string; + 'smtc-ctrl-slider-thumb-background-rest': string; + 'smtc-ctrl-slider-thumb-inner-stroke-disabled': string; + 'smtc-ctrl-slider-thumb-inner-stroke-hover': string; + 'smtc-ctrl-slider-thumb-inner-stroke-pressed': string; + 'smtc-ctrl-slider-thumb-inner-stroke-rest': string; + 'smtc-ctrl-slider-thumb-inner-stroke-width-rest': string; + 'smtc-ctrl-slider-thumb-outer-stroke-hover': string; + 'smtc-ctrl-slider-thumb-outer-stroke-pressed': string; + 'smtc-ctrl-slider-thumb-outer-stroke-rest': string; + 'smtc-ctrl-slider-thumb-size-hover': string; + 'smtc-ctrl-slider-thumb-size-pressed': string; + 'smtc-ctrl-spinner-show-empty-track': string; + 'smtc-ctrl-tooltip-background': string; + 'smtc-ctrl-tooltip-foreground': string; + 'smtc-ctrl-tooltip-shadow-ambient': string; + 'smtc-ctrl-tooltip-shadow-key': string; + 'smtc-foreground-ctrl-brand-disabled': string; + 'smtc-foreground-ctrl-brand-hover': string; + 'smtc-foreground-ctrl-brand-pressed': string; + 'smtc-foreground-ctrl-brand-rest': string; + 'smtc-foreground-ctrl-hint-default': string; + 'smtc-foreground-ctrl-neutral-primary-disabled': string; + 'smtc-foreground-ctrl-neutral-primary-rest': string; + 'smtc-foreground-ctrl-neutral-secondary-disabled': string; + 'smtc-foreground-ctrl-neutral-secondary-rest': string; + 'smtc-foreground-ctrl-on-brand-disabled': string; + 'smtc-foreground-ctrl-on-brand-rest': string; + 'smtc-foreground-ctrl-on-subtle-hover': string; + 'smtc-foreground-ctrl-on-subtle-pressed': string; + 'smtc-gap-between-card': string; + 'smtc-gap-between-content-large': string; + 'smtc-gap-between-content-medium': string; + 'smtc-gap-between-content-none': string; + 'smtc-gap-between-content-small': string; + 'smtc-gap-between-content-x-large': string; + 'smtc-gap-between-content-x-small': string; + 'smtc-gap-between-content-xx-large': string; + 'smtc-gap-between-content-xx-small': string; + 'smtc-gap-between-ctrl-default': string; + 'smtc-gap-between-ctrl-lg-default': string; + 'smtc-gap-between-ctrl-nested': string; + 'smtc-gap-between-ctrl-sm-default': string; + 'smtc-gap-between-list-item': string; + 'smtc-gap-between-text-large': string; + 'smtc-gap-between-text-small': string; + 'smtc-gap-inside-ctrl-default': string; + 'smtc-gap-inside-ctrl-lg-default': string; + 'smtc-gap-inside-ctrl-lg-to-label': string; + 'smtc-gap-inside-ctrl-lg-to-secondary-icon': string; + 'smtc-gap-inside-ctrl-sm-default': string; + 'smtc-gap-inside-ctrl-sm-to-label': string; + 'smtc-gap-inside-ctrl-sm-to-secondary-icon': string; + 'smtc-gap-inside-ctrl-to-label': string; + 'smtc-gap-inside-ctrl-to-secondary-icon': string; + 'smtc-icon-theme-ctrl-default-hover': string; + 'smtc-icon-theme-ctrl-default-pressed': string; + 'smtc-icon-theme-ctrl-default-rest': string; + 'smtc-icon-theme-ctrl-default-selected': string; + 'smtc-icon-theme-ctrl-subtle-hover': string; + 'smtc-icon-theme-ctrl-subtle-pressed': string; + 'smtc-material-acrylic-blur': string; + 'smtc-material-acrylic-default-color-blend': string; + 'smtc-material-acrylic-default-lum-blend': string; + 'smtc-material-mica-blur': string; + 'smtc-null-color': string; + 'smtc-null-number': string; + 'smtc-null-string': string; + 'smtc-padding-content-align-default': string; + 'smtc-padding-content-align-outdent-icon-on-subtle': string; + 'smtc-padding-content-align-outdent-text-on-subtle': string; + 'smtc-padding-content-large': string; + 'smtc-padding-content-medium': string; + 'smtc-padding-content-none': string; + 'smtc-padding-content-small': string; + 'smtc-padding-content-x-large': string; + 'smtc-padding-content-x-small': string; + 'smtc-padding-content-xx-large': string; + 'smtc-padding-content-xx-small': string; + 'smtc-padding-content-xxx-large': string; + 'smtc-padding-ctrl-horizontal-default': string; + 'smtc-padding-ctrl-horizontal-icon-only': string; + 'smtc-padding-ctrl-lg-horizontal-default': string; + 'smtc-padding-ctrl-lg-horizontal-icon-only': string; + 'smtc-padding-ctrl-lg-text-top': string; + 'smtc-padding-ctrl-lg-to-nested-control': string; + 'smtc-padding-ctrl-sm-horizontal-default': string; + 'smtc-padding-ctrl-sm-horizontal-icon-only': string; + 'smtc-padding-ctrl-sm-text-top': string; + 'smtc-padding-ctrl-sm-to-nested-control': string; + 'smtc-padding-ctrl-text-side': string; + 'smtc-padding-ctrl-text-top': string; + 'smtc-padding-ctrl-to-nested-control': string; + 'smtc-shadow-card-disabled-key': string; + 'smtc-shadow-card-hover-key': string; + 'smtc-shadow-card-pressed-key': string; + 'smtc-shadow-card-rest-ambient': string; + 'smtc-shadow-card-rest-key': string; + 'smtc-shadow-ctrl-on-drag-ambient': string; + 'smtc-shadow-ctrl-on-drag-key': string; + 'smtc-shadow-flyout-ambient': string; + 'smtc-shadow-flyout-key': string; + 'smtc-shadow-layer-ambient': string; + 'smtc-shadow-layer-key': string; + 'smtc-shadow-toolbar-ambient': string; + 'smtc-shadow-toolbar-key': string; + 'smtc-shadow-window-active-ambient': string; + 'smtc-shadow-window-active-key': string; + 'smtc-shadow-window-inactive-ambient': string; + 'smtc-shadow-window-inactive-key': string; + 'smtc-size-ctrl-default': string; + 'smtc-size-ctrl-icon': string; + 'smtc-size-ctrl-icon-figmaonly': string; + 'smtc-size-ctrl-icon-secondary': string; + 'smtc-size-ctrl-lg-default': string; + 'smtc-size-ctrl-lg-icon': string; + 'smtc-size-ctrl-lg-icon-figmaonly': string; + 'smtc-size-ctrl-sm-default': string; + 'smtc-size-ctrl-sm-icon': string; + 'smtc-size-ctrl-sm-icon-figmaonly': string; + 'smtc-status-away-foreground': string; + 'smtc-status-brand-background': string; + 'smtc-status-brand-stroke': string; + 'smtc-status-brand-tint-background': string; + 'smtc-status-brand-tint-foreground': string; + 'smtc-status-brand-tint-stroke': string; + 'smtc-status-danger-background': string; + 'smtc-status-danger-stroke': string; + 'smtc-status-danger-tint-background': string; + 'smtc-status-danger-tint-foreground': string; + 'smtc-status-danger-tint-stroke': string; + 'smtc-status-important-background': string; + 'smtc-status-important-foreground': string; + 'smtc-status-important-tint-background': string; + 'smtc-status-important-tint-foreground': string; + 'smtc-status-important-tint-stroke': string; + 'smtc-status-informative-background': string; + 'smtc-status-informative-foreground': string; + 'smtc-status-informative-stroke': string; + 'smtc-status-informative-tint-background': string; + 'smtc-status-informative-tint-foreground': string; + 'smtc-status-informative-tint-stroke': string; + 'smtc-status-neutral-background': string; + 'smtc-status-neutral-foreground': string; + 'smtc-status-neutral-tint-background': string; + 'smtc-status-neutral-tint-foreground': string; + 'smtc-status-neutral-tint-stroke': string; + 'smtc-status-oof-foreground': string; + 'smtc-status-success-background': string; + 'smtc-status-success-stroke': string; + 'smtc-status-success-tint-background': string; + 'smtc-status-success-tint-foreground': string; + 'smtc-status-success-tint-stroke': string; + 'smtc-status-warning-background': string; + 'smtc-status-warning-stroke': string; + 'smtc-status-warning-tint-background': string; + 'smtc-status-warning-tint-foreground': string; + 'smtc-status-warning-tint-stroke': string; + 'smtc-stroke-ctrl-divider-on-brand': string; + 'smtc-stroke-ctrl-divider-on-neutral': string; + 'smtc-stroke-ctrl-divider-on-outline': string; + 'smtc-stroke-ctrl-on-active-brand-disabled': string; + 'smtc-stroke-ctrl-on-active-brand-disabled-stop2': string; + 'smtc-stroke-ctrl-on-active-brand-hover': string; + 'smtc-stroke-ctrl-on-active-brand-hover-stop2': string; + 'smtc-stroke-ctrl-on-active-brand-pressed': string; + 'smtc-stroke-ctrl-on-active-brand-pressed-stop2': string; + 'smtc-stroke-ctrl-on-active-brand-rest': string; + 'smtc-stroke-ctrl-on-active-brand-rest-stop2': string; + 'smtc-stroke-ctrl-on-brand-disabled-stop2': string; + 'smtc-stroke-ctrl-on-brand-hover-stop2': string; + 'smtc-stroke-ctrl-on-brand-pressed-stop2': string; + 'smtc-stroke-ctrl-on-brand-rest-stop2': string; + 'smtc-stroke-ctrl-on-neutral-disabled-stop2': string; + 'smtc-stroke-ctrl-on-neutral-hover-stop2': string; + 'smtc-stroke-ctrl-on-neutral-pressed-stop2': string; + 'smtc-stroke-ctrl-on-neutral-rest-stop2': string; + 'smtc-stroke-ctrl-on-outline-disabled': string; + 'smtc-stroke-ctrl-on-outline-hover': string; + 'smtc-stroke-ctrl-on-outline-pressed': string; + 'smtc-stroke-ctrl-on-outline-rest': string; + 'smtc-stroke-divider-default': string; + 'smtc-stroke-divider-subtle': string; + 'smtc-stroke-toolbar': string; + 'smtc-stroke-width-ctrl-outline-hover': string; + 'smtc-stroke-width-ctrl-outline-pressed': string; + 'smtc-stroke-width-ctrl-outline-selected': string; + 'smtc-stroke-width-default': string; + 'smtc-stroke-width-window-default': string; + 'smtc-stroke-window-active': string; + 'smtc-text-ctrl-weight-selected': string; + 'smtc-text-global-body1-font-size': string; + 'smtc-text-global-body1-line-height': string; + 'smtc-text-global-body2-font-size': string; + 'smtc-text-global-body2-line-height': string; + 'smtc-text-global-body3-font-size': string; + 'smtc-text-global-body3-line-height': string; + 'smtc-text-global-caption1-font-size': string; + 'smtc-text-global-caption1-line-height': string; + 'smtc-text-global-caption2-font-size': string; + 'smtc-text-global-caption2-line-height': string; + 'smtc-text-global-display1-font-size': string; + 'smtc-text-global-display1-line-height': string; + 'smtc-text-global-display2-font-size': string; + 'smtc-text-global-display2-line-height': string; + 'smtc-text-global-subtitle1-font-size': string; + 'smtc-text-global-subtitle1-line-height': string; + 'smtc-text-global-subtitle2-font-size': string; + 'smtc-text-global-subtitle2-line-height': string; + 'smtc-text-global-title1-font-size': string; + 'smtc-text-global-title1-line-height': string; + 'smtc-text-global-title2-font-size': string; + 'smtc-text-global-title2-line-height': string; + 'smtc-text-ramp-item-header-font-size': string; + 'smtc-text-ramp-item-header-line-height': string; + 'smtc-text-ramp-legal-font-size': string; + 'smtc-text-ramp-legal-line-height': string; + 'smtc-text-ramp-lg-legal-font-size': string; + 'smtc-text-ramp-lg-legal-line-height': string; + 'smtc-text-ramp-lg-section-header-font-size': string; + 'smtc-text-ramp-lg-section-header-line-height': string; + 'smtc-text-ramp-sm-item-header-font-size': string; + 'smtc-text-ramp-sm-item-header-line-height': string; + 'smtc-text-ramp-sm-legal-font-size': string; + 'smtc-text-ramp-sm-legal-line-height': string; + 'smtc-text-ramp-sm-section-header-font-size': string; + 'smtc-text-ramp-sm-section-header-line-height': string; + 'smtc-text-style-ai-header-font-family': string; + 'smtc-text-style-ai-header-weight': string; + 'smtc-text-style-article-header-font-family': string; + 'smtc-text-style-article-header-weight': string; + 'smtc-text-style-article-regular-font-family': string; + 'smtc-text-style-default-display-weight': string; + 'smtc-text-style-default-header-weight': string; + 'smtc-text-style-default-regular-font-family': string; + 'smtc-text-style-default-regular-letter-spacing': string; + 'smtc-text-style-default-regular-weight': string; + 'smtc-text-style-quote-regular-letter-spacing': string; +}; + // @public (undocumented) export const materialAcrylicBlur = "var(--smtc-material-acrylic-blur)"; diff --git a/packages/semantic-tokens/scripts/tokenGen.ts b/packages/semantic-tokens/scripts/tokenGen.ts index 22f6ea14cbc81..11658793d780f 100644 --- a/packages/semantic-tokens/scripts/tokenGen.ts +++ b/packages/semantic-tokens/scripts/tokenGen.ts @@ -309,6 +309,13 @@ const generateTokenVariables = () => { }); } + // TODO: Remove this before merging to master + const kumoThemePath = './themes/kumoTheme'; + indexSourceFile.addExportDeclaration({ + namedExports: ['kumoSemanticTokens'], + moduleSpecifier: kumoThemePath, + }); + const rawText = indexSourceFile.getText(); const formattedText = format(rawText, { parser: 'typescript', diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 56b2b6bd21ca8..82c5c95448a13 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1807,3 +1807,4 @@ export { _ctrlAccordionForegroundRest, _ctrlButtonGapInsideDefault, } from './legacyVariant/tokens'; +export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/themes/kumoTheme.ts b/packages/semantic-tokens/src/themes/kumoTheme.ts new file mode 100644 index 0000000000000..71de164381712 --- /dev/null +++ b/packages/semantic-tokens/src/themes/kumoTheme.ts @@ -0,0 +1,547 @@ +/** + * A temporary testing theme for Kumo + * This is not a production-ready theme and is subject to change. + * It is intended for internal testing purposes only. + * Fluent Semantic Themes package will eventually replace this. + */ +export const kumoSemanticTokens = { + 'smtc-ai-brand-stop1': '#ffffffff', + 'smtc-ai-brand-stop2': '#ffffffff', + 'smtc-ai-brand-stop3': '#ffffffff', + 'smtc-ai-brand-stop4': '#ffffffff', + 'smtc-ai-shimmer-stop1': '#ffffff00', + 'smtc-ai-shimmer-stop2': '#ffffff00', + 'smtc-ai-shimmer-stop3': '#ffffff00', + 'smtc-ai-shimmer-stop4': '#ffffff00', + 'smtc-background-card-on-flyout-default-disabled': '#ffffffff', + 'smtc-background-card-on-flyout-default-hover': '#ffffffff', + 'smtc-background-card-on-flyout-default-pressed': '#ffffffff', + 'smtc-background-card-on-flyout-default-rest': '#ffffffff', + 'smtc-background-card-on-primary-alt-disabled': '#eaeef4ff', + 'smtc-background-card-on-primary-alt-hover': '#daeaffff', + 'smtc-background-card-on-primary-alt-pressed': '#b4d5ffff', + 'smtc-background-card-on-primary-alt-rest': '#ecf4ffff', + 'smtc-background-card-on-primary-default-disabled': '#eaeef4ff', + 'smtc-background-card-on-primary-default-hover': '#f3f7fbff', + 'smtc-background-card-on-primary-default-pressed': '#e2e6eaff', + 'smtc-background-card-on-primary-default-rest': '#ffffffff', + 'smtc-background-card-on-primary-default-selected': '#eff4faff', + 'smtc-background-card-on-secondary-alt-disabled': '#ffffffff', + 'smtc-background-card-on-secondary-alt-hover': '#ffffffff', + 'smtc-background-card-on-secondary-alt-pressed': '#ffffffff', + 'smtc-background-card-on-secondary-alt-rest': '#ffffffff', + 'smtc-background-card-on-secondary-default-disabled': '#ffffffff', + 'smtc-background-card-on-secondary-default-hover': '#ffffffff', + 'smtc-background-card-on-secondary-default-pressed': '#ffffffff', + 'smtc-background-card-on-secondary-default-rest': '#ffffffff', + 'smtc-background-ctrl-brand-disabled': '#eaeef4ff', + 'smtc-background-ctrl-brand-hover': '#2b2e35ff', + 'smtc-background-ctrl-brand-pressed': '#383b43ff', + 'smtc-background-ctrl-brand-rest': '#24282fff', + 'smtc-background-ctrl-neutral-disabled': '#eaeef4ff', + 'smtc-background-ctrl-neutral-hover': '#e7ebf1ff', + 'smtc-background-ctrl-neutral-pressed': '#d6dae0ff', + 'smtc-background-ctrl-neutral-rest': '#eff4faff', + 'smtc-background-ctrl-shape-safe-active-brand-disabled': '#a4a9b0ff', + 'smtc-background-ctrl-shape-safe-neutral-hover': '#8d9198ff', + 'smtc-background-ctrl-shape-safe-neutral-pressed': '#8d9198ff', + 'smtc-background-ctrl-shape-safe-neutral-rest': '#8d9198ff', + 'smtc-background-ctrl-subtle-hover': '#f3f7fbff', + 'smtc-background-ctrl-subtle-pressed': '#e2e6eaff', + 'smtc-background-flyout-color-blend': '#ffffffff', + 'smtc-background-flyout-lum-blend': '#ffffffff', + 'smtc-background-flyout-solid': '#ffffffff', + 'smtc-background-layer-primary-solid': '#ffffffff', + 'smtc-background-layer-secondary': '#f6fafeff', + 'smtc-background-layer-tertiary': '#f6fafeff', + 'smtc-background-smoke': '#0000004d', + 'smtc-background-web-page-primary': '#ffffffff', + 'smtc-background-web-page-secondary': '#ffffffff', + 'smtc-background-window-primary-color-blend': '#ffffffff', + 'smtc-background-window-primary-lum-blend': '#ffffffff', + 'smtc-background-window-primary-solid': '#ffffffff', + 'smtc-background-window-secondary-color-blend': '#ffffffff', + 'smtc-background-window-secondary-lum-blend': '#ffffffff', + 'smtc-background-window-secondary-solid': '#ffffffff', + 'smtc-background-window-tab-band-color-blend': '#ffffffff', + 'smtc-background-window-tab-band-lum-blend': '#ffffffff', + 'smtc-background-window-tab-band-solid': '#d9dde3ff', + 'smtc-corner-bezel': '16px', + 'smtc-corner-card-rest': '24px', + 'smtc-corner-circular': '9999px', + 'smtc-corner-ctrl-lg-rest': '12px', + 'smtc-corner-ctrl-rest': '12px', + 'smtc-corner-ctrl-sm-rest': '10px', + 'smtc-corner-flyout-rest': '20px', + 'smtc-corner-flyout-shell-rest': '24px', + 'smtc-corner-image-in-card': '12px', + 'smtc-corner-image-on-page': '12px', + 'smtc-corner-layer-default': '24px', + 'smtc-corner-toolbar-default': '12px', + 'smtc-corner-window-default': '8px', + 'smtc-corner-zero': '0', + 'smtc-ctrl-avatar-active-ring-size': '36px', + 'smtc-ctrl-avatar-active-ring-stroke': '#000000ff', + 'smtc-ctrl-avatar-active-ring-stroke-width': '2px', + 'smtc-ctrl-avatar-background': '#eff4faff', + 'smtc-ctrl-avatar-corner-group': '2px', + 'smtc-ctrl-avatar-foreground': '#1e2024ff', + 'smtc-ctrl-avatar-icon-size': '12px', + 'smtc-ctrl-avatar-presence-badge-padding-bottom-right-offset': '2px', + 'smtc-ctrl-avatar-presence-badge-size': '6px', + 'smtc-ctrl-avatar-show-cutout': 'visible', + 'smtc-ctrl-avatar-text-font-size': '10px', + 'smtc-ctrl-avatar-text-line-height': '12px', + 'smtc-ctrl-avatar-text-padding-top-offset': '11px', + 'smtc-ctrl-badge-beacon-size': '4px', + 'smtc-ctrl-badge-corner': '6px', + 'smtc-ctrl-badge-gap': '2px', + 'smtc-ctrl-badge-icon-size': '16px', + 'smtc-ctrl-badge-icon-size-figmaonly': '16', + 'smtc-ctrl-badge-lg-corner': '6px', + 'smtc-ctrl-badge-lg-icon-size': '20px', + 'smtc-ctrl-badge-lg-icon-size-figmaonly': '20', + 'smtc-ctrl-badge-lg-padding': '4px', + 'smtc-ctrl-badge-lg-size': '28px', + 'smtc-ctrl-badge-lg-text-padding-top': '0', + 'smtc-ctrl-badge-padding': '4px', + 'smtc-ctrl-badge-size': '24px', + 'smtc-ctrl-badge-sm-corner': '6px', + 'smtc-ctrl-badge-sm-icon-size': '12px', + 'smtc-ctrl-badge-sm-icon-size-figmaonly': '12', + 'smtc-ctrl-badge-sm-padding': '4px', + 'smtc-ctrl-badge-sm-size': '20px', + 'smtc-ctrl-badge-sm-text-padding-top': '0', + 'smtc-ctrl-badge-text-padding-top': '0', + 'smtc-ctrl-boolean-selection-hint': 'true', + 'smtc-ctrl-card-state-disabled': 'Disabled', + 'smtc-ctrl-card-state-hover': 'Hover', + 'smtc-ctrl-card-state-pressed': 'Pressed', + 'smtc-ctrl-card-state-rest': 'Rest', + 'smtc-ctrl-choice-base-background-disabled': '#ffffff00', + 'smtc-ctrl-choice-base-background-hover': '#ffffff00', + 'smtc-ctrl-choice-base-background-pressed': '#ffffff00', + 'smtc-ctrl-choice-base-background-rest': '#ffffff00', + 'smtc-ctrl-choice-base-stroke-hover': '#676b72ff', + 'smtc-ctrl-choice-base-stroke-pressed': '#585c63ff', + 'smtc-ctrl-choice-checkbox-corner': '6px', + 'smtc-ctrl-choice-checkbox-icon-size': '10px', + 'smtc-ctrl-choice-checkbox-indeterminate-height': '1.5px', + 'smtc-ctrl-choice-checkbox-indeterminate-width': '8px', + 'smtc-ctrl-choice-icon-theme': 'Filled', + 'smtc-ctrl-choice-lg-base-size': '28px', + 'smtc-ctrl-choice-lg-checkbox-corner': '4px', + 'smtc-ctrl-choice-lg-checkbox-icon-size': '0', + 'smtc-ctrl-choice-lg-checkbox-icon-size-figmaonly': '16', + 'smtc-ctrl-choice-lg-radio-dot-size-hover': '16px', + 'smtc-ctrl-choice-lg-radio-dot-size-pressed': '12px', + 'smtc-ctrl-choice-lg-radio-dot-size-rest': '14px', + 'smtc-ctrl-choice-lg-switch-height': '28px', + 'smtc-ctrl-choice-lg-switch-thumb-width-hover': '20px', + 'smtc-ctrl-choice-lg-switch-thumb-width-pressed': '24px', + 'smtc-ctrl-choice-lg-switch-thumb-width-rest': '18px', + 'smtc-ctrl-choice-lg-switch-width': '52px', + 'smtc-ctrl-choice-padding-horizontal': '0', + 'smtc-ctrl-choice-padding-vertical': '4px', + 'smtc-ctrl-choice-radio-dot-size-rest': '10px', + 'smtc-ctrl-choice-sm-checkbox-corner': '8px', + 'smtc-ctrl-choice-sm-checkbox-icon-size': '0', + 'smtc-ctrl-choice-sm-checkbox-icon-size-figmaonly': '12', + 'smtc-ctrl-choice-sm-radio-dot-size': '8px', + 'smtc-ctrl-choice-sm-switch-height': '20px', + 'smtc-ctrl-choice-sm-switch-thumb-width-hover': '12px', + 'smtc-ctrl-choice-sm-switch-thumb-width-pressed': '16px', + 'smtc-ctrl-choice-sm-switch-thumb-width-rest': '10px', + 'smtc-ctrl-choice-sm-switch-width': '36px', + 'smtc-ctrl-choice-switch-padding-rest': '4px', + 'smtc-ctrl-choice-switch-thumb-shadow-ambient': '0 0 0 #ffffff00', + 'smtc-ctrl-choice-switch-thumb-shadow-key': '0 0 0 #ffffff00', + 'smtc-ctrl-choice-switch-thumb-width-pressed': '20px', + 'smtc-ctrl-choice-switch-thumb-width-rest': '12px', + 'smtc-ctrl-choice-switch-width': '36px', + 'smtc-ctrl-composer-container-background-default': '#ffffff99', + 'smtc-ctrl-composer-container-corner': '24px', + 'smtc-ctrl-composer-container-shadow-ambient': '0 0 4px #001e441a', + 'smtc-ctrl-composer-container-shadow-key': '0 6px 12px #ffffff00', + 'smtc-ctrl-composer-input-background-disabled': '#ffffff00', + 'smtc-ctrl-composer-input-background-hover': '#ffffff00', + 'smtc-ctrl-composer-input-background-pressed': '#ffffff00', + 'smtc-ctrl-composer-input-background-rest': '#ffffff00', + 'smtc-ctrl-composer-input-background-selected-rest': '#ffffff00', + 'smtc-ctrl-composer-input-bottom-stroke-width-hover': '0', + 'smtc-ctrl-composer-input-bottom-stroke-width-pressed': '0', + 'smtc-ctrl-composer-input-bottom-stroke-width-rest': '0', + 'smtc-ctrl-composer-input-bottom-stroke-width-selected-rest': '0', + 'smtc-ctrl-composer-input-corner-hover': '26px', + 'smtc-ctrl-composer-input-corner-pressed': '28px', + 'smtc-ctrl-composer-input-corner-rest': '24px', + 'smtc-ctrl-composer-input-shadow': '0 1px 2px #001e441a', + 'smtc-ctrl-composer-input-shadow-x-offset': '0', + 'smtc-ctrl-composer-input-stroke-disabled': '#ffffff00', + 'smtc-ctrl-composer-input-stroke-hover': '#ffffff00', + 'smtc-ctrl-composer-input-stroke-pressed': '#ffffff00', + 'smtc-ctrl-composer-input-stroke-selected-rest': '#ffffff00', + 'smtc-ctrl-composer-input-stroke-width-hover': '0', + 'smtc-ctrl-composer-input-stroke-width-pressed': '0', + 'smtc-ctrl-composer-input-stroke-width-rest': '0', + 'smtc-ctrl-composer-input-stroke-width-selected-rest': '0', + 'smtc-ctrl-dialog-background': '#ffffffff', + 'smtc-ctrl-dialog-base-corner': '20px', + 'smtc-ctrl-dialog-base-shadow-ambient': '0 0 8px #212d3d0f', + 'smtc-ctrl-dialog-base-shadow-key': '0 16px 24px #212d3d1f', + 'smtc-ctrl-dialog-layer-padding-bottom': '0', + 'smtc-ctrl-divider-fixed-line-length': '8px', + 'smtc-ctrl-drag-background-color-blend': '#ffffffff', + 'smtc-ctrl-drag-background-lum-blend': '#ffffffff', + 'smtc-ctrl-drag-background-solid': '#ffffffff', + 'smtc-ctrl-fab-background-disabled': '#eaeef4ff', + 'smtc-ctrl-fab-background-hover': '#f3f7fbff', + 'smtc-ctrl-fab-background-pressed': '#e2e6eaff', + 'smtc-ctrl-fab-background-rest': '#ffffffff', + 'smtc-ctrl-fab-corner-hover': '12px', + 'smtc-ctrl-fab-corner-pressed': '12px', + 'smtc-ctrl-fab-corner-rest': '12px', + 'smtc-ctrl-fab-shadow-disabled-key': '0 0.5px 4px #1b355614', + 'smtc-ctrl-fab-shadow-hover-key': '0 6px 12px #1b355614', + 'smtc-ctrl-fab-shadow-pressed-key': '0 0.5px 4px #1b355614', + 'smtc-ctrl-fab-shadow-rest-ambient': '0 0 4px #1b35560a', + 'smtc-ctrl-fab-shadow-rest-key': '0 4px 6px #1b355614', + 'smtc-ctrl-focus-inner-stroke': '#ffffffff', + 'smtc-ctrl-focus-outer-stroke-width': '2px', + 'smtc-ctrl-focus-position-figmaonly': 'Both Outside', + 'smtc-ctrl-input-bottom-line-stroke-hover': '#8d9198ff', + 'smtc-ctrl-input-bottom-line-stroke-pressed': '#8d9198ff', + 'smtc-ctrl-input-bottom-line-stroke-rest': '#ffffff00', + 'smtc-ctrl-input-bottom-line-stroke-width-selected': '2px', + 'smtc-ctrl-input-stroke-disabled': '#ffffff00', + 'smtc-ctrl-input-stroke-error': '#df3c4aff', + 'smtc-ctrl-input-stroke-hover': '#ffffff00', + 'smtc-ctrl-input-stroke-pressed': '#ffffff00', + 'smtc-ctrl-input-stroke-rest': '#ffffff00', + 'smtc-ctrl-input-stroke-selected': '#ffffff00', + 'smtc-ctrl-input-stroke-width-selected': '1px', + 'smtc-ctrl-link-foreground-brand-hover': '#016dd4ff', + 'smtc-ctrl-link-foreground-brand-pressed': '#016dd4ff', + 'smtc-ctrl-link-foreground-brand-rest': '#016dd4ff', + 'smtc-ctrl-link-inline-show-underline-at-rest': 'hidden', + 'smtc-ctrl-link-inline-underline-dashed': 'dashed', + 'smtc-ctrl-link-inline-underline-solid-figmaonly': 'solid', + 'smtc-ctrl-link-on-page-show-underline-at-rest': 'hidden', + 'smtc-ctrl-link-on-page-underline-dashed': 'dashed', + 'smtc-ctrl-link-on-page-underline-solid-figmaonly': 'solid', + 'smtc-ctrl-list-background-selected-disabled': '#eaeef4ff', + 'smtc-ctrl-list-background-selected-hover': '#e7ebf1ff', + 'smtc-ctrl-list-background-selected-pressed': '#d6dae0ff', + 'smtc-ctrl-list-background-selected-rest': '#eff4faff', + 'smtc-ctrl-list-choice-checkbox-corner': '0', + 'smtc-ctrl-list-choice-checkbox-icon-size': '16px', + 'smtc-ctrl-list-choice-checkbox-icon-size-figmaonly': '16', + 'smtc-ctrl-list-choice-dot-size': '4px', + 'smtc-ctrl-list-choice-dot-size-figmaonly': '4', + 'smtc-ctrl-list-choice-foreground-hover': '#c8ccd3ff', + 'smtc-ctrl-list-indent-level2': '32px', + 'smtc-ctrl-list-indent-level3': '56px', + 'smtc-ctrl-list-lg-indent-level1': '0', + 'smtc-ctrl-list-lg-indent-level2': '42px', + 'smtc-ctrl-list-lg-indent-level3': '74px', + 'smtc-ctrl-list-pill-full-width': 'false', + 'smtc-ctrl-list-pill-length-rest': '20px', + 'smtc-ctrl-list-pill-stretch-padding-default': '12px', + 'smtc-ctrl-list-pill-stretch-padding-hint': '20px', + 'smtc-ctrl-list-pill-width': '3px', + 'smtc-ctrl-list-shadow-selected-ambient': '0 0 2px #ffffff00', + 'smtc-ctrl-list-shadow-selected-key': '0 1px 2px #ffffff00', + 'smtc-ctrl-list-sm-indent-level2': '34px', + 'smtc-ctrl-list-sm-indent-level3': '58px', + 'smtc-ctrl-list-split-divider-padding-inset': '4px', + 'smtc-ctrl-list-split-divider-show-divider': 'visible', + 'smtc-ctrl-list-split-divider-stroke': '#eaeef4ff', + 'smtc-ctrl-lite-filter-background-selected': '#eff4faff', + 'smtc-ctrl-lite-filter-foreground-selected': '#1e2024ff', + 'smtc-ctrl-lite-filter-stroke-selected': '#6e7279ff', + 'smtc-ctrl-progress-background-empty': '#d9dde3ff', + 'smtc-ctrl-progress-height-filled': '3px', + 'smtc-ctrl-progress-lg-height-filled': '4px', + 'smtc-ctrl-progress-sm-height-filled': '1px', + 'smtc-ctrl-rating-icon-gap': '2px', + 'smtc-ctrl-rating-icon-size': '12px', + 'smtc-ctrl-rating-icon-theme': 'Filled', + 'smtc-ctrl-segmented-background-disabled': '#ffffff00', + 'smtc-ctrl-segmented-background-hover': '#ffffff00', + 'smtc-ctrl-segmented-background-pressed': '#ffffff00', + 'smtc-ctrl-segmented-background-rest': '#ffffff00', + 'smtc-ctrl-segmented-lg-corner-hover': '0', + 'smtc-ctrl-segmented-lg-corner-pressed': '0', + 'smtc-ctrl-segmented-lg-corner-rest': '0', + 'smtc-ctrl-segmented-lg-item-corner-hover': '0', + 'smtc-ctrl-segmented-lg-item-corner-pressed': '0', + 'smtc-ctrl-segmented-lg-item-corner-rest': '0', + 'smtc-ctrl-segmented-lg-padding-rest': '0', + 'smtc-ctrl-segmented-padding-hover': '5px', + 'smtc-ctrl-segmented-padding-pressed': '7px', + 'smtc-ctrl-segmented-padding-rest': '4px', + 'smtc-ctrl-segmented-sm-corner-hover': '0', + 'smtc-ctrl-segmented-sm-corner-pressed': '0', + 'smtc-ctrl-segmented-sm-corner-rest': '0', + 'smtc-ctrl-segmented-sm-item-corner-rest': '0', + 'smtc-ctrl-segmented-sm-padding-rest': '0', + 'smtc-ctrl-segmented-stroke-disabled': '#ffffffff', + 'smtc-ctrl-segmented-stroke-hover': '#ffffffff', + 'smtc-ctrl-segmented-stroke-pressed': '#ffffffff', + 'smtc-ctrl-segmented-stroke-rest': '#ffffffff', + 'smtc-ctrl-slider-bar-foreground-empty-disabled': '#eaeef4ff', + 'smtc-ctrl-slider-bar-foreground-empty-hover': '#8d9198ff', + 'smtc-ctrl-slider-bar-foreground-empty-pressed': '#8d9198ff', + 'smtc-ctrl-slider-bar-foreground-empty-rest': '#8d9198ff', + 'smtc-ctrl-slider-bar-foreground-filled-disabled': '#a4a9b0ff', + 'smtc-ctrl-slider-bar-foreground-filled-hover': '#24282fff', + 'smtc-ctrl-slider-bar-foreground-filled-pressed': '#24282fff', + 'smtc-ctrl-slider-lg-bar-height': '0', + 'smtc-ctrl-slider-lg-thumb-size-hover': '0', + 'smtc-ctrl-slider-lg-thumb-size-pressed': '0', + 'smtc-ctrl-slider-lg-thumb-size-rest': '20px', + 'smtc-ctrl-slider-sm-bar-height': '0', + 'smtc-ctrl-slider-sm-thumb-size-hover': '0', + 'smtc-ctrl-slider-sm-thumb-size-pressed': '0', + 'smtc-ctrl-slider-sm-thumb-size-rest': '20px', + 'smtc-ctrl-slider-thumb-background-hover': '#2b2e35ff', + 'smtc-ctrl-slider-thumb-background-pressed': '#383b43ff', + 'smtc-ctrl-slider-thumb-background-rest': '#24282fff', + 'smtc-ctrl-slider-thumb-inner-stroke-disabled': '#ffffffff', + 'smtc-ctrl-slider-thumb-inner-stroke-hover': '#ffffffff', + 'smtc-ctrl-slider-thumb-inner-stroke-pressed': '#ffffffff', + 'smtc-ctrl-slider-thumb-inner-stroke-rest': '#ffffffff', + 'smtc-ctrl-slider-thumb-inner-stroke-width-rest': '4px', + 'smtc-ctrl-slider-thumb-outer-stroke-hover': '#eaeef4ff', + 'smtc-ctrl-slider-thumb-outer-stroke-pressed': '#eaeef4ff', + 'smtc-ctrl-slider-thumb-outer-stroke-rest': '#eaeef4ff', + 'smtc-ctrl-slider-thumb-size-hover': '22px', + 'smtc-ctrl-slider-thumb-size-pressed': '18px', + 'smtc-ctrl-spinner-show-empty-track': 'hidden', + 'smtc-ctrl-tooltip-background': '#ffffffff', + 'smtc-ctrl-tooltip-foreground': '#1e2024ff', + 'smtc-ctrl-tooltip-shadow-ambient': '0 0 4px #1b35560a', + 'smtc-ctrl-tooltip-shadow-key': '0 4px 6px #1b355614', + 'smtc-foreground-ctrl-brand-disabled': '#a4a9b0ff', + 'smtc-foreground-ctrl-brand-hover': '#24282fff', + 'smtc-foreground-ctrl-brand-pressed': '#24282fff', + 'smtc-foreground-ctrl-brand-rest': '#24282fff', + 'smtc-foreground-ctrl-hint-default': '#c8ccd3ff', + 'smtc-foreground-ctrl-neutral-primary-disabled': '#a4a9b0ff', + 'smtc-foreground-ctrl-neutral-primary-rest': '#1e2024ff', + 'smtc-foreground-ctrl-neutral-secondary-disabled': '#a4a9b0ff', + 'smtc-foreground-ctrl-neutral-secondary-rest': '#6e7279ff', + 'smtc-foreground-ctrl-on-brand-disabled': '#a4a9b0ff', + 'smtc-foreground-ctrl-on-brand-rest': '#ffffffff', + 'smtc-foreground-ctrl-on-subtle-hover': '#1e2024ff', + 'smtc-foreground-ctrl-on-subtle-pressed': '#1e2024ff', + 'smtc-gap-between-card': '24px', + 'smtc-gap-between-content-large': '20px', + 'smtc-gap-between-content-medium': '16px', + 'smtc-gap-between-content-none': '0', + 'smtc-gap-between-content-small': '8px', + 'smtc-gap-between-content-x-large': '24px', + 'smtc-gap-between-content-x-small': '4px', + 'smtc-gap-between-content-xx-large': '36px', + 'smtc-gap-between-content-xx-small': '2px', + 'smtc-gap-between-ctrl-default': '8px', + 'smtc-gap-between-ctrl-lg-default': '12px', + 'smtc-gap-between-ctrl-nested': '2px', + 'smtc-gap-between-ctrl-sm-default': '6px', + 'smtc-gap-between-list-item': '4px', + 'smtc-gap-between-text-large': '6px', + 'smtc-gap-between-text-small': '4px', + 'smtc-gap-inside-ctrl-default': '4px', + 'smtc-gap-inside-ctrl-lg-default': '4px', + 'smtc-gap-inside-ctrl-lg-to-label': '8px', + 'smtc-gap-inside-ctrl-lg-to-secondary-icon': '2px', + 'smtc-gap-inside-ctrl-sm-default': '4px', + 'smtc-gap-inside-ctrl-sm-to-label': '8px', + 'smtc-gap-inside-ctrl-sm-to-secondary-icon': '0', + 'smtc-gap-inside-ctrl-to-label': '8px', + 'smtc-gap-inside-ctrl-to-secondary-icon': '4px', + 'smtc-icon-theme-ctrl-default-hover': 'Filled', + 'smtc-icon-theme-ctrl-default-pressed': 'Filled', + 'smtc-icon-theme-ctrl-default-rest': 'Regular', + 'smtc-icon-theme-ctrl-default-selected': 'Filled', + 'smtc-icon-theme-ctrl-subtle-hover': 'Filled', + 'smtc-icon-theme-ctrl-subtle-pressed': 'Filled', + 'smtc-material-acrylic-blur': '60px', + 'smtc-material-acrylic-default-color-blend': '#ffffff00', + 'smtc-material-acrylic-default-lum-blend': '#ffffff00', + 'smtc-material-mica-blur': '240px', + 'smtc-null-color': '#ffffff00', + 'smtc-null-number': '0', + 'smtc-null-string': 'String value', + 'smtc-padding-content-align-default': '20px', + 'smtc-padding-content-align-outdent-icon-on-subtle': '12px', + 'smtc-padding-content-align-outdent-text-on-subtle': '10px', + 'smtc-padding-content-large': '24px', + 'smtc-padding-content-medium': '20px', + 'smtc-padding-content-none': '0', + 'smtc-padding-content-small': '12px', + 'smtc-padding-content-x-large': '40px', + 'smtc-padding-content-x-small': '8px', + 'smtc-padding-content-xx-large': '32px', + 'smtc-padding-content-xx-small': '4px', + 'smtc-padding-content-xxx-large': '40px', + 'smtc-padding-ctrl-horizontal-default': '8px', + 'smtc-padding-ctrl-horizontal-icon-only': '6px', + 'smtc-padding-ctrl-lg-horizontal-default': '8px', + 'smtc-padding-ctrl-lg-horizontal-icon-only': '6px', + 'smtc-padding-ctrl-lg-text-top': '6px', + 'smtc-padding-ctrl-lg-to-nested-control': '4px', + 'smtc-padding-ctrl-sm-horizontal-default': '8px', + 'smtc-padding-ctrl-sm-horizontal-icon-only': '6px', + 'smtc-padding-ctrl-sm-text-top': '4px', + 'smtc-padding-ctrl-sm-to-nested-control': '0', + 'smtc-padding-ctrl-text-side': '2px', + 'smtc-padding-ctrl-text-top': '6px', + 'smtc-padding-ctrl-to-nested-control': '4px', + 'smtc-shadow-card-disabled-key': '0 1px 2px #ffffff00', + 'smtc-shadow-card-hover-key': '0 3px 10px #ffffff00', + 'smtc-shadow-card-pressed-key': '0 1px 8px #ffffff00', + 'smtc-shadow-card-rest-ambient': '0 0 2px #ffffff00', + 'smtc-shadow-card-rest-key': '0 1px 2px #ffffff00', + 'smtc-shadow-ctrl-on-drag-ambient': '0 0 12px #1b35560a', + 'smtc-shadow-ctrl-on-drag-key': '0 6px 12px #1b355614', + 'smtc-shadow-flyout-ambient': '0 0 4px #1b35560a', + 'smtc-shadow-flyout-key': '0 6px 12px #1b355614', + 'smtc-shadow-layer-ambient': '0 0 0 #212d3d0f', + 'smtc-shadow-layer-key': '0 0 0 #212d3d1f', + 'smtc-shadow-toolbar-ambient': '0 0 0 #ffffff00', + 'smtc-shadow-toolbar-key': '0 0 0 #ffffff00', + 'smtc-shadow-window-active-ambient': '0 0 4px #212d3d0f', + 'smtc-shadow-window-active-key': '0 6px 12px #212d3d1f', + 'smtc-shadow-window-inactive-ambient': '0 3px 12px #212d3d0f', + 'smtc-shadow-window-inactive-key': '0 3px 12px #212d3d1f', + 'smtc-size-ctrl-default': '32px', + 'smtc-size-ctrl-icon': '20px', + 'smtc-size-ctrl-icon-figmaonly': '20', + 'smtc-size-ctrl-icon-secondary': '12px', + 'smtc-size-ctrl-lg-default': '36px', + 'smtc-size-ctrl-lg-icon': '24px', + 'smtc-size-ctrl-lg-icon-figmaonly': '24', + 'smtc-size-ctrl-sm-default': '28px', + 'smtc-size-ctrl-sm-icon': '16px', + 'smtc-size-ctrl-sm-icon-figmaonly': '16', + 'smtc-status-away-foreground': '#c85d00ff', + 'smtc-status-brand-background': '#016dd4ff', + 'smtc-status-brand-stroke': '#007ef4ff', + 'smtc-status-brand-tint-background': '#ecf4ffff', + 'smtc-status-brand-tint-foreground': '#016dd4ff', + 'smtc-status-brand-tint-stroke': '#ffffff00', + 'smtc-status-danger-background': '#d1203aff', + 'smtc-status-danger-stroke': '#df3c4aff', + 'smtc-status-danger-tint-background': '#fff0efff', + 'smtc-status-danger-tint-foreground': '#d1203aff', + 'smtc-status-danger-tint-stroke': '#ffffff00', + 'smtc-status-important-background': '#ffffff00', + 'smtc-status-important-foreground': '#ffffff00', + 'smtc-status-important-tint-background': '#ffffff00', + 'smtc-status-important-tint-foreground': '#ffffff00', + 'smtc-status-important-tint-stroke': '#ffffff00', + 'smtc-status-informative-background': '#ecf4ffff', + 'smtc-status-informative-foreground': '#5b5f66ff', + 'smtc-status-informative-stroke': '#ffffff00', + 'smtc-status-informative-tint-background': '#eff4faff', + 'smtc-status-informative-tint-foreground': '#1e2024ff', + 'smtc-status-informative-tint-stroke': '#ffffff00', + 'smtc-status-neutral-background': '#ffffff00', + 'smtc-status-neutral-foreground': '#ffffff00', + 'smtc-status-neutral-tint-background': '#ffffff00', + 'smtc-status-neutral-tint-foreground': '#ffffff00', + 'smtc-status-neutral-tint-stroke': '#ffffff00', + 'smtc-status-oof-foreground': '#8a42abff', + 'smtc-status-success-background': '#018050ff', + 'smtc-status-success-stroke': '#009d63ff', + 'smtc-status-success-tint-background': '#eaf7f0ff', + 'smtc-status-success-tint-foreground': '#018050ff', + 'smtc-status-success-tint-stroke': '#ffffff00', + 'smtc-status-warning-background': '#c85d00ff', + 'smtc-status-warning-stroke': '#c96000ff', + 'smtc-status-warning-tint-background': '#fdf1e9ff', + 'smtc-status-warning-tint-foreground': '#c85d00ff', + 'smtc-status-warning-tint-stroke': '#ffffff00', + 'smtc-stroke-ctrl-divider-on-brand': '#ffffff00', + 'smtc-stroke-ctrl-divider-on-neutral': '#ffffff00', + 'smtc-stroke-ctrl-divider-on-outline': '#ffffff00', + 'smtc-stroke-ctrl-on-active-brand-disabled': '#ffffff00', + 'smtc-stroke-ctrl-on-active-brand-disabled-stop2': '#ffffff00', + 'smtc-stroke-ctrl-on-active-brand-hover': '#ffffff00', + 'smtc-stroke-ctrl-on-active-brand-hover-stop2': '#ffffff00', + 'smtc-stroke-ctrl-on-active-brand-pressed': '#ffffff00', + 'smtc-stroke-ctrl-on-active-brand-pressed-stop2': '#ffffff00', + 'smtc-stroke-ctrl-on-active-brand-rest': '#ffffff00', + 'smtc-stroke-ctrl-on-active-brand-rest-stop2': '#ffffff00', + 'smtc-stroke-ctrl-on-brand-disabled-stop2': '#ffffff00', + 'smtc-stroke-ctrl-on-brand-hover-stop2': '#ffffff00', + 'smtc-stroke-ctrl-on-brand-pressed-stop2': '#ffffff00', + 'smtc-stroke-ctrl-on-brand-rest-stop2': '#ffffff00', + 'smtc-stroke-ctrl-on-neutral-disabled-stop2': '#ffffff00', + 'smtc-stroke-ctrl-on-neutral-hover-stop2': '#ffffff00', + 'smtc-stroke-ctrl-on-neutral-pressed-stop2': '#ffffff00', + 'smtc-stroke-ctrl-on-neutral-rest-stop2': '#ffffff00', + 'smtc-stroke-ctrl-on-outline-disabled': '#eaeef4ff', + 'smtc-stroke-ctrl-on-outline-hover': '#bfc4caff', + 'smtc-stroke-ctrl-on-outline-pressed': '#afb4baff', + 'smtc-stroke-ctrl-on-outline-rest': '#c8ccd3ff', + 'smtc-stroke-divider-default': '#c8ccd3ff', + 'smtc-stroke-divider-subtle': '#eaeef4ff', + 'smtc-stroke-toolbar': '#ffffff00', + 'smtc-stroke-width-ctrl-outline-hover': '2px', + 'smtc-stroke-width-ctrl-outline-pressed': '2px', + 'smtc-stroke-width-ctrl-outline-selected': '2px', + 'smtc-stroke-width-default': '1px', + 'smtc-stroke-width-window-default': '0', + 'smtc-stroke-window-active': '#ffffff00', + 'smtc-text-ctrl-weight-selected': '550', + 'smtc-text-global-body1-font-size': '18px', + 'smtc-text-global-body1-line-height': '28px', + 'smtc-text-global-body2-font-size': '16px', + 'smtc-text-global-body2-line-height': '24px', + 'smtc-text-global-body3-font-size': '14px', + 'smtc-text-global-body3-line-height': '20px', + 'smtc-text-global-caption1-font-size': '12px', + 'smtc-text-global-caption1-line-height': '16px', + 'smtc-text-global-caption2-font-size': '10px', + 'smtc-text-global-caption2-line-height': '14px', + 'smtc-text-global-display1-font-size': '74px', + 'smtc-text-global-display1-line-height': '112px', + 'smtc-text-global-display2-font-size': '56px', + 'smtc-text-global-display2-line-height': '84px', + 'smtc-text-global-subtitle1-font-size': '20px', + 'smtc-text-global-subtitle1-line-height': '28px', + 'smtc-text-global-subtitle2-font-size': '16px', + 'smtc-text-global-subtitle2-line-height': '24px', + 'smtc-text-global-title1-font-size': '32px', + 'smtc-text-global-title1-line-height': '48px', + 'smtc-text-global-title2-font-size': '24px', + 'smtc-text-global-title2-line-height': '32px', + 'smtc-text-ramp-item-header-font-size': '14px', + 'smtc-text-ramp-item-header-line-height': '20px', + 'smtc-text-ramp-legal-font-size': '14px', + 'smtc-text-ramp-legal-line-height': '20px', + 'smtc-text-ramp-lg-legal-font-size': '16px', + 'smtc-text-ramp-lg-legal-line-height': '24px', + 'smtc-text-ramp-lg-section-header-font-size': '20px', + 'smtc-text-ramp-lg-section-header-line-height': '28px', + 'smtc-text-ramp-sm-item-header-font-size': '12px', + 'smtc-text-ramp-sm-item-header-line-height': '16px', + 'smtc-text-ramp-sm-legal-font-size': '12px', + 'smtc-text-ramp-sm-legal-line-height': '16px', + 'smtc-text-ramp-sm-section-header-font-size': '18px', + 'smtc-text-ramp-sm-section-header-line-height': '28px', + 'smtc-text-style-ai-header-font-family': '"Lora", serif', + 'smtc-text-style-ai-header-weight': '500', + 'smtc-text-style-article-header-font-family': '"Lora", serif', + 'smtc-text-style-article-header-weight': '500', + 'smtc-text-style-article-regular-font-family': '"Lora", serif', + 'smtc-text-style-default-display-weight': '400', + 'smtc-text-style-default-header-weight': '550', + 'smtc-text-style-default-regular-font-family': + '"Segoe Sans", "Segoe UI", "Segoe UI Web (West European)",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif', + 'smtc-text-style-default-regular-letter-spacing': '0', + 'smtc-text-style-default-regular-weight': '400', + 'smtc-text-style-quote-regular-letter-spacing': '400px', +}; From 01b5ee22002a5d48de0c7f872a99652842848ce1 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Fri, 30 May 2025 12:20:18 -0700 Subject: [PATCH 18/66] Extended-tokens: Enable null tokens (#34544) --- .../etc/semantic-tokens.api.md | 56 ++++++++++++------- packages/semantic-tokens/scripts/tokenGen.ts | 2 +- .../semantic-tokens/src/control/tokens.ts | 7 +++ .../semantic-tokens/src/control/variables.ts | 3 + .../semantic-tokens/src/fluentOverrides.ts | 1 + packages/semantic-tokens/src/index.ts | 6 ++ .../semantic-tokens/src/nullable/tokens.ts | 39 ++++++------- packages/semantic-tokens/utils/toCamelCase.ts | 2 +- 8 files changed, 76 insertions(+), 40 deletions(-) diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 2854e4e18775d..4f4a5f2487458 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -263,19 +263,19 @@ export const backgroundCtrlOutlineDisabled = "var(--smtc-background-ctrl-outline export const backgroundCtrlOutlineDisabledRaw = "--smtc-background-ctrl-outline-disabled"; // @public (undocumented) -export const backgroundCtrlOutlineHover = "var(--smtc-background-ctrl-outline-hover, var(--colorTransparentBackground))"; +export const backgroundCtrlOutlineHover = "var(--smtc-background-ctrl-outline-hover, var(--smtc-null-color, var(--colorTransparentBackground)))"; // @public (undocumented) export const backgroundCtrlOutlineHoverRaw = "--smtc-background-ctrl-outline-hover"; // @public (undocumented) -export const backgroundCtrlOutlinePressed = "var(--smtc-background-ctrl-outline-pressed, var(--colorTransparentBackground))"; +export const backgroundCtrlOutlinePressed = "var(--smtc-background-ctrl-outline-pressed, var(--smtc-null-color, var(--colorTransparentBackground)))"; // @public (undocumented) export const backgroundCtrlOutlinePressedRaw = "--smtc-background-ctrl-outline-pressed"; // @public (undocumented) -export const backgroundCtrlOutlineRest = "var(--smtc-background-ctrl-outline-rest, var(--colorTransparentBackground))"; +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"; @@ -317,7 +317,7 @@ export const backgroundCtrlShapeSafeNeutralRest = "var(--smtc-background-ctrl-sh export const backgroundCtrlShapeSafeNeutralRestRaw = "--smtc-background-ctrl-shape-safe-neutral-rest"; // @public (undocumented) -export const backgroundCtrlSubtleDisabled = "var(--smtc-background-ctrl-subtle-disabled, var(--colorTransparentBackground))"; +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"; @@ -341,7 +341,7 @@ export const backgroundCtrlSubtlePressed = "var(--smtc-background-ctrl-subtle-pr export const backgroundCtrlSubtlePressedRaw = "--smtc-background-ctrl-subtle-pressed"; // @public (undocumented) -export const backgroundCtrlSubtleRest = "var(--smtc-background-ctrl-subtle-rest, var(--colorSubtleBackground))"; +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"; @@ -3948,6 +3948,24 @@ export const materialMicaThinSolid = "var(--smtc-material-mica-thin-solid, var(- // @public (undocumented) export const materialMicaThinSolidRaw = "--smtc-material-mica-thin-solid"; +// @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))"; @@ -4651,7 +4669,7 @@ export const strokeCtrlDividerOnOutlineDisabledRaw = "--smtc-stroke-ctrl-divider export const strokeCtrlDividerOnOutlineRaw = "--smtc-stroke-ctrl-divider-on-outline"; // @public (undocumented) -export const strokeCtrlDividerOnSubtle = "var(--smtc-stroke-ctrl-divider-on-subtle, transparent)"; +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)"; @@ -4711,7 +4729,7 @@ export const strokeCtrlOnActiveBrandRestStop2 = "var(--smtc-stroke-ctrl-on-activ export const strokeCtrlOnActiveBrandRestStop2Raw = "--smtc-stroke-ctrl-on-active-brand-rest-stop2"; // @public (undocumented) -export const strokeCtrlOnBrandDisabled = "var(--smtc-stroke-ctrl-on-brand-disabled, transparent)"; +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"; @@ -4723,7 +4741,7 @@ export const strokeCtrlOnBrandDisabledStop2 = "var(--smtc-stroke-ctrl-on-brand-d export const strokeCtrlOnBrandDisabledStop2Raw = "--smtc-stroke-ctrl-on-brand-disabled-stop2"; // @public (undocumented) -export const strokeCtrlOnBrandHover = "var(--smtc-stroke-ctrl-on-brand-hover, transparent)"; +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"; @@ -4735,7 +4753,7 @@ export const strokeCtrlOnBrandHoverStop2 = "var(--smtc-stroke-ctrl-on-brand-hove export const strokeCtrlOnBrandHoverStop2Raw = "--smtc-stroke-ctrl-on-brand-hover-stop2"; // @public (undocumented) -export const strokeCtrlOnBrandPressed = "var(--smtc-stroke-ctrl-on-brand-pressed, transparent)"; +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"; @@ -4747,7 +4765,7 @@ export const strokeCtrlOnBrandPressedStop2 = "var(--smtc-stroke-ctrl-on-brand-pr export const strokeCtrlOnBrandPressedStop2Raw = "--smtc-stroke-ctrl-on-brand-pressed-stop2"; // @public (undocumented) -export const strokeCtrlOnBrandRest = "var(--smtc-stroke-ctrl-on-brand-rest, transparent)"; +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"; @@ -4759,7 +4777,7 @@ export const strokeCtrlOnBrandRestStop2 = "var(--smtc-stroke-ctrl-on-brand-rest- export const strokeCtrlOnBrandRestStop2Raw = "--smtc-stroke-ctrl-on-brand-rest-stop2"; // @public (undocumented) -export const strokeCtrlOnNeutralDisabled = "var(--smtc-stroke-ctrl-on-neutral-disabled, var(--colorNeutralStrokeDisabled))"; +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"; @@ -4771,7 +4789,7 @@ export const strokeCtrlOnNeutralDisabledStop2 = "var(--smtc-stroke-ctrl-on-neutr export const strokeCtrlOnNeutralDisabledStop2Raw = "--smtc-stroke-ctrl-on-neutral-disabled-stop2"; // @public (undocumented) -export const strokeCtrlOnNeutralHover = "var(--smtc-stroke-ctrl-on-neutral-hover, var(--colorNeutralStroke1Hover))"; +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"; @@ -4783,7 +4801,7 @@ export const strokeCtrlOnNeutralHoverStop2 = "var(--smtc-stroke-ctrl-on-neutral- export const strokeCtrlOnNeutralHoverStop2Raw = "--smtc-stroke-ctrl-on-neutral-hover-stop2"; // @public (undocumented) -export const strokeCtrlOnNeutralPressed = "var(--smtc-stroke-ctrl-on-neutral-pressed, var(--colorNeutralStroke1Pressed))"; +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"; @@ -4795,7 +4813,7 @@ export const strokeCtrlOnNeutralPressedStop2 = "var(--smtc-stroke-ctrl-on-neutra export const strokeCtrlOnNeutralPressedStop2Raw = "--smtc-stroke-ctrl-on-neutral-pressed-stop2"; // @public (undocumented) -export const strokeCtrlOnNeutralRest = "var(--smtc-stroke-ctrl-on-neutral-rest, var(--colorNeutralStroke1))"; +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"; @@ -4855,13 +4873,13 @@ export const strokeCtrlOnOutlineRestStop2 = "var(--smtc-stroke-ctrl-on-outline-r export const strokeCtrlOnOutlineRestStop2Raw = "--smtc-stroke-ctrl-on-outline-rest-stop2"; // @public (undocumented) -export const strokeCtrlOnSubtleDisabled = "var(--smtc-stroke-ctrl-on-subtle-disabled, transparent)"; +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, transparent)"; +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"; @@ -4873,13 +4891,13 @@ export const strokeCtrlOnSubtleHoverSplit = "var(--smtc-stroke-ctrl-on-subtle-ho export const strokeCtrlOnSubtleHoverSplitRaw = "--smtc-stroke-ctrl-on-subtle-hover-split"; // @public (undocumented) -export const strokeCtrlOnSubtlePressed = "var(--smtc-stroke-ctrl-on-subtle-pressed, transparent)"; +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, transparent)"; +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"; @@ -4921,7 +4939,7 @@ export const strokeImage = "var(--smtc-stroke-image, unset)"; export const strokeImageRaw = "--smtc-stroke-image"; // @public (undocumented) -export const strokeLayer = "var(--smtc-stroke-layer, var(--colorTransparentStroke))"; +export const strokeLayer = "var(--smtc-stroke-layer, var(--smtc-null-color, var(--colorTransparentStroke)))"; // @public (undocumented) export const strokeLayerRaw = "--smtc-stroke-layer"; diff --git a/packages/semantic-tokens/scripts/tokenGen.ts b/packages/semantic-tokens/scripts/tokenGen.ts index 11658793d780f..36e4ce4e0f70a 100644 --- a/packages/semantic-tokens/scripts/tokenGen.ts +++ b/packages/semantic-tokens/scripts/tokenGen.ts @@ -48,7 +48,7 @@ const isInvalidToken = (token: string) => { return true; } // Blacklist for non-valid tokens - if (token.includes('Figmaonly') || token.toLocaleLowerCase().startsWith('null')) { + if (token.includes('Figmaonly')) { // Superfluous tokens - SKIP return true; } diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index 1f81de7b6b6b3..52cdeb4e8ea51 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -51,6 +51,7 @@ import { colorPaletteRedForeground3, colorPaletteDarkOrangeBackground3, colorPaletteGreenBackground3, + colorTransparentBackground, } from '../legacy/tokens'; import { textGlobalDisplay1FontSizeRaw, @@ -233,9 +234,12 @@ import { aiShimmerStop2Raw, aiShimmerStop3Raw, aiShimmerStop4Raw, + nullColorRaw, statusNeutralBackgroundRaw, statusNeutralTintBackgroundRaw, statusNeutralTintStrokeRaw, + nullNumberRaw, + nullStringRaw, backgroundCardOnSecondaryDefaultRestRaw, backgroundCardOnSecondaryAltRestRaw, backgroundCardOnSecondaryAltHoverRaw, @@ -438,9 +442,12 @@ 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})`; diff --git a/packages/semantic-tokens/src/control/variables.ts b/packages/semantic-tokens/src/control/variables.ts index a0364f9640c4d..a9e792f2803f9 100644 --- a/packages/semantic-tokens/src/control/variables.ts +++ b/packages/semantic-tokens/src/control/variables.ts @@ -179,9 +179,12 @@ 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'; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index c5ad254f77afe..4fac021374ad9 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -81,6 +81,7 @@ export const fluentOverrides: FluentOverrides = { gapInsideCtrlDefault: { f2Token: 'spacingHorizontalS' }, gapInsideCtrlLgDefault: { f2Token: 'spacingHorizontalSNudge' }, gapInsideCtrlSmDefault: { f2Token: 'spacingHorizontalXS' }, + nullColor: { f2Token: 'colorTransparentBackground' }, paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' }, paddingCtrlHorizontalIconOnly: { rawValue: '5px' }, paddingCtrlLgHorizontalDefault: { f2Token: 'spacingHorizontalL' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 82c5c95448a13..319b39a0b33fe 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -434,9 +434,12 @@ export { aiShimmerStop2Raw, aiShimmerStop3Raw, aiShimmerStop4Raw, + nullColorRaw, statusNeutralBackgroundRaw, statusNeutralTintBackgroundRaw, statusNeutralTintStrokeRaw, + nullNumberRaw, + nullStringRaw, backgroundCardOnSecondaryDefaultRestRaw, backgroundCardOnSecondaryAltRestRaw, backgroundCardOnSecondaryAltHoverRaw, @@ -1335,9 +1338,12 @@ export { aiShimmerStop2, aiShimmerStop3, aiShimmerStop4, + nullColor, statusNeutralBackground, statusNeutralTintBackground, statusNeutralTintStroke, + nullNumber, + nullString, backgroundCardOnSecondaryDefaultRest, backgroundCardOnSecondaryAltRest, backgroundCardOnSecondaryAltHover, diff --git a/packages/semantic-tokens/src/nullable/tokens.ts b/packages/semantic-tokens/src/nullable/tokens.ts index 5aea2238d42cf..d27f16fea3aa6 100644 --- a/packages/semantic-tokens/src/nullable/tokens.ts +++ b/packages/semantic-tokens/src/nullable/tokens.ts @@ -1,4 +1,5 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +import { nullColorRaw } from '../control/variables'; import { colorTransparentStroke, colorNeutralStroke1, @@ -65,23 +66,23 @@ export const textStyleArticleHeaderCase = `var(${textStyleArticleHeaderCaseRaw}, export const textStyleCodeHeaderCase = `var(${textStyleCodeHeaderCaseRaw}, unset)`; export const textStyleDataVizHeaderCase = `var(${textStyleDataVizHeaderCaseRaw}, unset)`; export const textStyleQuoteHeaderCase = `var(${textStyleQuoteHeaderCaseRaw}, unset)`; -export const strokeLayer = `var(${strokeLayerRaw}, ${colorTransparentStroke})`; +export const strokeLayer = `var(${strokeLayerRaw}, var(${nullColorRaw}, ${colorTransparentStroke}))`; export const strokeImage = `var(${strokeImageRaw}, unset)`; export const strokeFlyout = `var(${strokeFlyoutRaw}, unset)`; -export const strokeCtrlOnBrandRest = `var(${strokeCtrlOnBrandRestRaw}, transparent)`; -export const strokeCtrlOnBrandHover = `var(${strokeCtrlOnBrandHoverRaw}, transparent)`; -export const strokeCtrlOnBrandPressed = `var(${strokeCtrlOnBrandPressedRaw}, transparent)`; -export const strokeCtrlOnBrandDisabled = `var(${strokeCtrlOnBrandDisabledRaw}, transparent)`; -export const strokeCtrlOnNeutralRest = `var(${strokeCtrlOnNeutralRestRaw}, ${colorNeutralStroke1})`; -export const strokeCtrlOnNeutralHover = `var(${strokeCtrlOnNeutralHoverRaw}, ${colorNeutralStroke1Hover})`; -export const strokeCtrlOnNeutralPressed = `var(${strokeCtrlOnNeutralPressedRaw}, ${colorNeutralStroke1Pressed})`; -export const strokeCtrlOnNeutralDisabled = `var(${strokeCtrlOnNeutralDisabledRaw}, ${colorNeutralStrokeDisabled})`; -export const strokeCtrlOnSubtleRest = `var(${strokeCtrlOnSubtleRestRaw}, transparent)`; -export const strokeCtrlOnSubtleHover = `var(${strokeCtrlOnSubtleHoverRaw}, transparent)`; -export const strokeCtrlOnSubtlePressed = `var(${strokeCtrlOnSubtlePressedRaw}, transparent)`; -export const strokeCtrlOnSubtleDisabled = `var(${strokeCtrlOnSubtleDisabledRaw}, transparent)`; +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}, transparent)`; +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)`; @@ -92,12 +93,12 @@ export const strokeCardOnSecondaryRest = `var(${strokeCardOnSecondaryRestRaw}, u export const strokeCardOnSecondaryHover = `var(${strokeCardOnSecondaryHoverRaw}, unset)`; export const strokeCardOnSecondaryPressed = `var(${strokeCardOnSecondaryPressedRaw}, unset)`; export const strokeCardOnSecondaryDisabled = `var(${strokeCardOnSecondaryDisabledRaw}, unset)`; -export const backgroundCtrlOutlineRest = `var(${backgroundCtrlOutlineRestRaw}, ${colorTransparentBackground})`; -export const backgroundCtrlOutlineHover = `var(${backgroundCtrlOutlineHoverRaw}, ${colorTransparentBackground})`; -export const backgroundCtrlOutlinePressed = `var(${backgroundCtrlOutlinePressedRaw}, ${colorTransparentBackground})`; +export const backgroundCtrlOutlineRest = `var(${backgroundCtrlOutlineRestRaw}, var(${nullColorRaw}, ${colorTransparentBackground}))`; +export const backgroundCtrlOutlineHover = `var(${backgroundCtrlOutlineHoverRaw}, var(${nullColorRaw}, ${colorTransparentBackground}))`; +export const backgroundCtrlOutlinePressed = `var(${backgroundCtrlOutlinePressedRaw}, var(${nullColorRaw}, ${colorTransparentBackground}))`; export const backgroundCtrlOutlineDisabled = `var(${backgroundCtrlOutlineDisabledRaw}, unset)`; -export const backgroundCtrlSubtleRest = `var(${backgroundCtrlSubtleRestRaw}, ${colorSubtleBackground})`; -export const backgroundCtrlSubtleDisabled = `var(${backgroundCtrlSubtleDisabledRaw}, ${colorTransparentBackground})`; +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 shadowCardRestKey = `var(${shadowCardRestKeyRaw}, unset)`; diff --git a/packages/semantic-tokens/utils/toCamelCase.ts b/packages/semantic-tokens/utils/toCamelCase.ts index 9bd0a29ee59da..dfc900c4e7692 100644 --- a/packages/semantic-tokens/utils/toCamelCase.ts +++ b/packages/semantic-tokens/utils/toCamelCase.ts @@ -4,7 +4,7 @@ export const toCamelCase = (str: string) => { .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') { + if (word === 'CTRL' || word === 'STATUS' || word === 'NULL') { // Special cases where we need to convert to lower case return word.toLowerCase(); } From eaab8ac31bdc95496b0f9bce01143c3701189223 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Thu, 5 Jun 2025 12:04:52 -0400 Subject: [PATCH 19/66] update avatar to use semantic tokens (#34553) --- ...-3f82613f-24a6-4370-9608-eede7b2e345d.json | 7 ++ .../Avatar/useAvatarStyles.styles.ts | 61 ++++++------- .../etc/semantic-tokens.api.md | 49 ++++++++--- .../src/components/avatar/tokens.ts | 26 ++++-- .../semantic-tokens/src/control/tokens.ts | 3 +- .../src/fluentLegacyVariants.ts | 41 ++++++++- .../semantic-tokens/src/fluentOverrides.ts | 11 +++ packages/semantic-tokens/src/index.ts | 9 ++ packages/semantic-tokens/src/legacy/tokens.ts | 55 ++++++++---- .../src/legacyVariant/tokens.ts | 88 ++++++++++++++++++- .../semantic-tokens/src/optional/tokens.ts | 3 +- 11 files changed, 283 insertions(+), 70 deletions(-) create mode 100644 change/@fluentui-react-avatar-3f82613f-24a6-4370-9608-eede7b2e345d.json diff --git a/change/@fluentui-react-avatar-3f82613f-24a6-4370-9608-eede7b2e345d.json b/change/@fluentui-react-avatar-3f82613f-24a6-4370-9608-eede7b2e345d.json new file mode 100644 index 0000000000000..011c36e895c67 --- /dev/null +++ b/change/@fluentui-react-avatar-3f82613f-24a6-4370-9608-eede7b2e345d.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "update avatar to use semantic tokens", + "packageName": "@fluentui/react-avatar", + "email": "rachelyoo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-avatar/library/src/components/Avatar/useAvatarStyles.styles.ts b/packages/react-components/react-avatar/library/src/components/Avatar/useAvatarStyles.styles.ts index 40f6d46252967..73449bd6143a8 100644 --- a/packages/react-components/react-avatar/library/src/components/Avatar/useAvatarStyles.styles.ts +++ b/packages/react-components/react-avatar/library/src/components/Avatar/useAvatarStyles.styles.ts @@ -2,6 +2,7 @@ import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { AvatarSlots, AvatarState } from './Avatar.types'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const avatarClassNames: SlotClassNames = { root: 'fui-Avatar', @@ -24,15 +25,15 @@ const useRootClassName = makeResetStyles({ flexShrink: 0, position: 'relative', verticalAlign: 'middle', - borderRadius: tokens.borderRadiusCircular, - fontFamily: tokens.fontFamilyBase, - fontWeight: tokens.fontWeightSemibold, - fontSize: tokens.fontSizeBase300, - width: '32px', - height: '32px', + 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 clases set content: "" to display them when appropriate. + // These are not displayed by default; the ring and shadow classes set content: "" to display them when appropriate. '::before,::after': { position: 'absolute', top: 0, @@ -74,8 +75,8 @@ const useIconInitialsClassName = makeResetStyles({ left: 0, width: '100%', height: '100%', - lineHeight: '1', - border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`, + lineHeight: semanticTokens.ctrlAvatarTextLineHeight, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeLayer}`, display: 'flex', alignItems: 'center', @@ -103,21 +104,21 @@ const badgeMask = (margin?: string) => { return ( `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + - `transparent ${innerRadius}, white ${outerRadius})` + `transparent ${innerRadius}, ${semanticTokens.ctrlAvatarPresenceBadgeBackgroundBehindBadge} ${outerRadius})` ); }; const useStyles = makeStyles({ - textCaption2Strong: { fontSize: tokens.fontSizeBase100 }, - textCaption1Strong: { fontSize: tokens.fontSizeBase200 }, - textSubtitle2: { fontSize: tokens.fontSizeBase400 }, - textSubtitle1: { fontSize: tokens.fontSizeBase500 }, - textTitle3: { fontSize: tokens.fontSizeBase600 }, + textCaption2Strong: { fontSize: semanticTokens.textGlobalCaption2FontSize }, + textCaption1Strong: { fontSize: semanticTokens.textGlobalCaption1FontSize }, + textSubtitle2: { fontSize: semanticTokens.textGlobalBody2FontSize }, + textSubtitle1: { fontSize: semanticTokens.textGlobalBody1FontSize }, + textTitle3: { fontSize: semanticTokens.textGlobalSubtitle2FontSize }, - squareSmall: { borderRadius: tokens.borderRadiusSmall }, - squareMedium: { borderRadius: tokens.borderRadiusMedium }, - squareLarge: { borderRadius: tokens.borderRadiusLarge }, - squareXLarge: { borderRadius: tokens.borderRadiusXLarge }, + 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 @@ -138,13 +139,13 @@ const useStyles = makeStyles({ '::before': { maskImage: badgeMask(/*margin =*/ `2 * var(${vars.ringWidth})`) }, }, ringThick: { - [vars.ringWidth]: tokens.strokeWidthThick, + [vars.ringWidth]: semanticTokens._ctrlAvatarActiveRingStrokeWidthSm, }, ringThicker: { - [vars.ringWidth]: tokens.strokeWidthThicker, + [vars.ringWidth]: semanticTokens._ctrlAvatarActiveRingStrokeWidthMd, }, ringThickest: { - [vars.ringWidth]: tokens.strokeWidthThickest, + [vars.ringWidth]: semanticTokens._ctrlAvatarActiveRingStrokeWidthLg, }, shadow: { @@ -198,27 +199,27 @@ const useStyles = makeStyles({ // Badge size: applied to root when there is a badge tiny: { [vars.badgeRadius]: '3px', - [vars.badgeGap]: tokens.strokeWidthThin, + [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthSm, }, 'extra-small': { [vars.badgeRadius]: '5px', - [vars.badgeGap]: tokens.strokeWidthThin, + [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthSm, }, small: { [vars.badgeRadius]: '6px', - [vars.badgeGap]: tokens.strokeWidthThin, + [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthSm, }, medium: { [vars.badgeRadius]: '8px', - [vars.badgeGap]: tokens.strokeWidthThin, + [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthSm, }, large: { [vars.badgeRadius]: '10px', - [vars.badgeGap]: tokens.strokeWidthThick, + [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthLg, }, 'extra-large': { [vars.badgeRadius]: '14px', - [vars.badgeGap]: tokens.strokeWidthThick, + [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthLg, }, icon12: { fontSize: '12px' }, @@ -249,8 +250,8 @@ export const useSizeStyles = makeStyles({ const useColorStyles = makeStyles({ neutral: { - color: tokens.colorNeutralForeground3, - backgroundColor: tokens.colorNeutralBackground6, + color: semanticTokens.ctrlAvatarForeground, + backgroundColor: semanticTokens.ctrlAvatarBackground, }, brand: { color: tokens.colorNeutralForegroundStaticInverted, diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 4f4a5f2487458..dec52aff9ca41 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -650,31 +650,52 @@ export const ctrlAvatarActiveRingStroke = "var(--smtc-ctrl-avatar-active-ring-st export const ctrlAvatarActiveRingStrokeRaw = "--smtc-ctrl-avatar-active-ring-stroke"; // @public (undocumented) -export const ctrlAvatarActiveRingStrokeWidth = "var(--smtc-ctrl-avatar-active-ring-stroke-width)"; +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)"; +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))"; +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))"; +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)"; +export const ctrlAvatarForeground = "var(--smtc-ctrl-avatar-foreground, var(--colorNeutralForeground3))"; // @public (undocumented) export const ctrlAvatarForegroundRaw = "--smtc-ctrl-avatar-foreground"; @@ -686,7 +707,7 @@ export const ctrlAvatarIconSize = "var(--smtc-ctrl-avatar-icon-size, var(--smtc- 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))"; +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"; @@ -706,9 +727,15 @@ export const ctrlAvatarPresenceBadgeSizeRaw = "--smtc-ctrl-avatar-presence-badge // @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)"; @@ -716,19 +743,19 @@ export const ctrlAvatarShowCutout = "var(--smtc-ctrl-avatar-show-cutout)"; export const ctrlAvatarShowCutoutRaw = "--smtc-ctrl-avatar-show-cutout"; // @public (undocumented) -export const ctrlAvatarSize = "var(--smtc-ctrl-avatar-size, var(--smtc-size-ctrl-default))"; +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))"; +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))"; +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"; @@ -5647,7 +5674,7 @@ export const textStyleDefaultHeaderCase = "var(--smtc-text-style-default-header- 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))"; +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"; @@ -5659,7 +5686,7 @@ export const textStyleDefaultHeaderLetterSpacing = "var(--smtc-text-style-defaul export const textStyleDefaultHeaderLetterSpacingRaw = "--smtc-text-style-default-header-letter-spacing"; // @public (undocumented) -export const textStyleDefaultHeaderWeight = "var(--smtc-text-style-default-header-weight)"; +export const textStyleDefaultHeaderWeight = "var(--smtc-text-style-default-header-weight, var(--fontWeightSemibold))"; // @public (undocumented) export const textStyleDefaultHeaderWeightRaw = "--smtc-text-style-default-header-weight"; diff --git a/packages/semantic-tokens/src/components/avatar/tokens.ts b/packages/semantic-tokens/src/components/avatar/tokens.ts index 1c48ba952cfa9..4658591a4a641 100644 --- a/packages/semantic-tokens/src/components/avatar/tokens.ts +++ b/packages/semantic-tokens/src/components/avatar/tokens.ts @@ -10,6 +10,14 @@ import { backgroundCtrlBrandRestRaw, backgroundLayerPrimarySolidRaw, } from '../../control/variables'; +import { + borderRadiusCircular, + colorNeutralBackground6, + colorNeutralForeground3, + borderRadiusMedium, + strokeWidthThick, + fontSizeBase300, +} from '../../legacy/tokens'; import { ctrlAvatarSizeRaw, ctrlAvatarCornerItemRaw, @@ -30,20 +38,20 @@ import { ctrlAvatarPresenceBadgeBackgroundBehindBadgeRaw, } from './variables'; -export const ctrlAvatarSize = `var(${ctrlAvatarSizeRaw}, var(${sizeCtrlDefaultRaw}))`; -export const ctrlAvatarCornerItem = `var(${ctrlAvatarCornerItemRaw}, var(${cornerCircularRaw}))`; -export const ctrlAvatarBackground = `var(${ctrlAvatarBackgroundRaw})`; -export const ctrlAvatarForeground = `var(${ctrlAvatarForegroundRaw})`; +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}))`; -export const ctrlAvatarActiveRingStrokeWidth = `var(${ctrlAvatarActiveRingStrokeWidthRaw})`; +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}))`; -export const ctrlAvatarTextLineHeight = `var(${ctrlAvatarTextLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}))`; +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}))`; +export const ctrlAvatarPresenceBadgeBackgroundBehindBadge = `var(${ctrlAvatarPresenceBadgeBackgroundBehindBadgeRaw}, var(${backgroundLayerPrimarySolidRaw}, white))`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index 52cdeb4e8ea51..77fba59bf0826 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -22,6 +22,7 @@ import { lineHeightBase100, fontFamilyBase, fontWeightRegular, + fontWeightSemibold, spacingHorizontalM, spacingHorizontalS, spacingHorizontalL, @@ -287,7 +288,7 @@ export const textGlobalCaption2LineHeight = `var(${textGlobalCaption2LineHeightR export const textStyleDefaultRegularFontFamily = `var(${textStyleDefaultRegularFontFamilyRaw}, ${fontFamilyBase})`; export const textStyleDefaultRegularWeight = `var(${textStyleDefaultRegularWeightRaw}, ${fontWeightRegular})`; export const textStyleDefaultRegularLetterSpacing = `var(${textStyleDefaultRegularLetterSpacingRaw})`; -export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightRaw})`; +export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightRaw}, ${fontWeightSemibold})`; export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw}, 44px)`; export const sizeCtrlIcon = `var(${sizeCtrlIconRaw}, 20px)`; export const sizeCtrlIconSecondary = `var(${sizeCtrlIconSecondaryRaw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 5123a88dd7a37..2de3fffc323a3 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -25,5 +25,44 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorNeutralForeground2', originalToken: 'foregroundCtrlOnTransparentRest', }, - _ctrlButtonGapInsideDefault: { f2Token: 'spacingHorizontalSNudge', originalToken: 'gapInsideCtrlDefault' }, + _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', + }, + _ctrlButtonGapInsideDefault: { + f2Token: 'spacingHorizontalSNudge', + originalToken: 'gapInsideCtrlDefault', + }, }; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 4fac021374ad9..9811ad8e514ba 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -30,6 +30,15 @@ export const fluentOverrides: FluentOverrides = { cornerCtrlRest: { f2Token: 'borderRadiusMedium' }, cornerCtrlSmRest: { f2Token: 'borderRadiusMedium' }, // Button uses borderRadiusMedium in all sizes 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' }, ctrlChoiceBaseSize: { rawValue: '20px' }, ctrlFocusInnerStroke: { f2Token: 'colorStrokeFocus2' }, ctrlFocusInnerStrokeWidth: { f2Token: 'strokeWidthThin' }, @@ -159,6 +168,8 @@ export const fluentOverrides: FluentOverrides = { textRampLgItemBodyLineHeight: { f2Token: 'lineHeightBase400' }, textRampSmItemBodyFontSize: { f2Token: 'fontSizeBase200' }, textRampSmItemBodyLineHeight: { f2Token: 'lineHeightBase200' }, + textStyleDefaultHeaderFontFamily: { f2Token: 'fontFamilyBase' }, + textStyleDefaultHeaderWeight: { f2Token: 'fontWeightSemibold' }, textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' }, textStyleDefaultRegularWeight: { f2Token: 'fontWeightRegular' }, }; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 319b39a0b33fe..ff5564677347a 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1812,5 +1812,14 @@ export { _ctrlAccordionForegroundPressed, _ctrlAccordionForegroundRest, _ctrlButtonGapInsideDefault, + _ctrlAvatarActiveRingStrokeWidthSm, + _ctrlAvatarActiveRingStrokeWidthMd, + _ctrlAvatarActiveRingStrokeWidthLg, + _ctrlAvatarCornerGroupSm, + _ctrlAvatarCornerGroupMd, + _ctrlAvatarCornerGroupLg, + _ctrlAvatarCornerGroupXLg, + _ctrlAvatarPresenceBadgeStrokeWidthSm, + _ctrlAvatarPresenceBadgeStrokeWidthLg, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 451e7ee2fee09..8912f2461fa63 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -69,6 +69,26 @@ export const borderRadiusMedium = 'var(--borderRadiusMedium)'; * @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#colorStrokeFocus2 | `colorStrokeFocus2`} design token. * @public @@ -84,11 +104,6 @@ export const strokeWidthThin = 'var(--strokeWidthThin)'; * @public */ export const colorTransparentStroke = 'var(--colorTransparentStroke)'; -/** - * 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#colorBrandForegroundLinkHover | `colorBrandForegroundLinkHover`} design token. * @public @@ -119,11 +134,6 @@ export const colorNeutralForeground2Pressed = 'var(--colorNeutralForeground2Pres * @public */ export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)'; -/** - * 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#colorCompoundBrandBackground | `colorCompoundBrandBackground`} design token. * @public @@ -264,11 +274,6 @@ export const fontSizeBase400 = 'var(--fontSizeBase400)'; * @public */ export const lineHeightBase400 = 'var(--lineHeightBase400)'; -/** - * 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#lineHeightBase300 | `lineHeightBase300`} design token. * @public @@ -354,3 +359,23 @@ export const fontFamilyBase = 'var(--fontFamilyBase)'; * @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#borderRadiusSmall | `borderRadiusSmall`} design token. + * @public + */ +export const borderRadiusSmall = 'var(--borderRadiusSmall)'; +/** + * 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#borderRadiusXLarge | `borderRadiusXLarge`} design token. + * @public + */ +export const borderRadiusXLarge = 'var(--borderRadiusXLarge)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 81ccff65bd003..0ca00dbc88f34 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -1,6 +1,27 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -import { foregroundCtrlNeutralPrimaryRestRaw, gapInsideCtrlDefaultRaw } from '../control/variables'; -import { colorNeutralForeground2, spacingHorizontalSNudge } from '../legacy/tokens'; +import { + ctrlAvatarActiveRingStrokeWidthRaw, + ctrlAvatarCornerGroupRaw, + ctrlAvatarPresenceBadgeStrokeWidthRaw, +} from '../components/avatar/variables'; +import { + foregroundCtrlNeutralPrimaryRestRaw, + gapInsideCtrlDefaultRaw, + cornerCtrlRestRaw, + strokeWidthDefaultRaw, +} from '../control/variables'; +import { + colorNeutralForeground2, + spacingHorizontalSNudge, + strokeWidthThick, + strokeWidthThicker, + strokeWidthThickest, + borderRadiusSmall, + borderRadiusMedium, + borderRadiusLarge, + borderRadiusXLarge, + strokeWidthThin, +} from '../legacy/tokens'; import { foregroundCtrlOnTransparentHoverRaw, foregroundCtrlOnTransparentPressedRaw, @@ -35,3 +56,66 @@ export const _ctrlAccordionForegroundRest = `var(${foregroundCtrlOnTransparentRe * please use gapInsideCtrlDefault instead. */ export const _ctrlButtonGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingHorizontalSNudge})`; +/** + * 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 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 _ctrlAvatarActiveRingStrokeWidthLg = `var(${ctrlAvatarActiveRingStrokeWidthRaw}, ${strokeWidthThickest})`; +/** + * 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 _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 _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 _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 _ctrlAvatarPresenceBadgeStrokeWidthSm = `var(${ctrlAvatarPresenceBadgeStrokeWidthRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; +/** + * 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}))`; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index af2df393bdf74..3373e44017abf 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -82,6 +82,7 @@ import { shadowWindowActiveKeyRaw, } from '../control/variables'; import { + fontFamilyBase, fontSizeBase300, lineHeightBase300, fontSizeBase200, @@ -369,7 +370,7 @@ import { shadowWindowInactiveKeyRaw, } from './variables'; -export const textStyleDefaultHeaderFontFamily = `var(${textStyleDefaultHeaderFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; +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}))`; From 7a109d30c9196b0ac64affe18060ec738d871e2b Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Fri, 13 Jun 2025 12:58:18 -0400 Subject: [PATCH 20/66] update divider to use semantic tokens (#34601) --- ...-d8f2c84a-5eb0-4825-b7ec-40db4c411087.json | 7 ++ .../Divider/useDividerStyles.styles.ts | 96 +++++++++---------- .../etc/semantic-tokens.api.md | 21 ++-- .../src/components/divider/tokens.ts | 2 +- .../semantic-tokens/src/control/tokens.ts | 5 +- .../src/fluentLegacyVariants.ts | 4 + .../semantic-tokens/src/fluentOverrides.ts | 9 ++ packages/semantic-tokens/src/index.ts | 13 +-- packages/semantic-tokens/src/legacy/tokens.ts | 28 +++++- .../src/legacyVariant/tokens.ts | 48 ++++++---- .../semantic-tokens/src/optional/tokens.ts | 18 ++-- 11 files changed, 153 insertions(+), 98 deletions(-) create mode 100644 change/@fluentui-react-divider-d8f2c84a-5eb0-4825-b7ec-40db4c411087.json diff --git a/change/@fluentui-react-divider-d8f2c84a-5eb0-4825-b7ec-40db4c411087.json b/change/@fluentui-react-divider-d8f2c84a-5eb0-4825-b7ec-40db4c411087.json new file mode 100644 index 0000000000000..0145a804d25f6 --- /dev/null +++ b/change/@fluentui-react-divider-d8f2c84a-5eb0-4825-b7ec-40db4c411087.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Feat: Add semantic tokens to Divider", + "packageName": "@fluentui/react-divider", + "email": "rachelyoo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts b/packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts index 87113fc556a57..f421889612523 100644 --- a/packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts +++ b/packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts @@ -1,18 +1,13 @@ import { mergeClasses, shorthands, makeStyles } from '@griffel/react'; -import { tokens } from '@fluentui/react-theme'; import { DividerSlots, DividerState } from './Divider.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const dividerClassNames: SlotClassNames = { root: 'fui-Divider', wrapper: 'fui-Divider__wrapper', }; -const contentSpacing = '12px'; -const insetSpacing = '12px'; -const maxStartEndLength = '8px'; -const minStartEndLength = '8px;'; - const useBaseStyles = makeStyles({ // Base styles base: { @@ -23,10 +18,11 @@ const useBaseStyles = makeStyles({ flexGrow: 1, position: 'relative', - fontFamily: tokens.fontFamilyBase, - fontSize: tokens.fontSizeBase200, - fontWeight: tokens.fontWeightRegular, - lineHeight: tokens.lineHeightBase200, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption1FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + letterSpacing: semanticTokens.textStyleDefaultRegularLetterSpacing, textAlign: 'center', '::before': { @@ -77,47 +73,47 @@ const useBaseStyles = makeStyles({ // Appearance variations brand: { - color: tokens.colorBrandForeground1, + color: semanticTokens.foregroundContentBrandPrimary, '::before': { - ...shorthands.borderColor(tokens.colorBrandStroke1), + ...shorthands.borderColor(semanticTokens.strokeDividerBrand), }, '::after': { - ...shorthands.borderColor(tokens.colorBrandStroke1), + ...shorthands.borderColor(semanticTokens.strokeDividerBrand), }, }, default: { - color: tokens.colorNeutralForeground2, + color: semanticTokens.foregroundContentNeutralSecondary, '::before': { - ...shorthands.borderColor(tokens.colorNeutralStroke2), + ...shorthands.borderColor(semanticTokens.strokeDividerDefault), }, '::after': { - ...shorthands.borderColor(tokens.colorNeutralStroke2), + ...shorthands.borderColor(semanticTokens.strokeDividerDefault), }, }, subtle: { - color: tokens.colorNeutralForeground3, + color: semanticTokens._ctrlDividerForegroundSubtle, '::before': { - ...shorthands.borderColor(tokens.colorNeutralStroke3), + ...shorthands.borderColor(semanticTokens.strokeDividerSubtle), }, '::after': { - ...shorthands.borderColor(tokens.colorNeutralStroke3), + ...shorthands.borderColor(semanticTokens.strokeDividerSubtle), }, }, strong: { - color: tokens.colorNeutralForeground1, + color: semanticTokens.foregroundContentNeutralPrimary, '::before': { - ...shorthands.borderColor(tokens.colorNeutralStroke1), + ...shorthands.borderColor(semanticTokens.strokeDividerStrong), }, '::after': { - ...shorthands.borderColor(tokens.colorNeutralStroke1), + ...shorthands.borderColor(semanticTokens.strokeDividerStrong), }, }, }); @@ -129,21 +125,21 @@ const useHorizontalStyles = makeStyles({ '::before': { borderTopStyle: 'solid', - borderTopWidth: tokens.strokeWidthThin, - minWidth: minStartEndLength, + borderTopWidth: semanticTokens.strokeWidthDividerDefault, + minWidth: semanticTokens.ctrlDividerFixedLineLength, }, '::after': { borderTopStyle: 'solid', - borderTopWidth: tokens.strokeWidthThin, - minWidth: minStartEndLength, + borderTopWidth: semanticTokens.strokeWidthDividerDefault, + minWidth: semanticTokens.ctrlDividerFixedLineLength, }, }, // Inset styles inset: { - paddingLeft: insetSpacing, - paddingRight: insetSpacing, + paddingLeft: semanticTokens.paddingCtrlHorizontalDefault, + paddingRight: semanticTokens.paddingCtrlHorizontalDefault, }, // Alignment variations @@ -152,34 +148,34 @@ const useHorizontalStyles = makeStyles({ '::before': { content: '""', - marginRight: contentSpacing, - maxWidth: maxStartEndLength, + marginRight: semanticTokens.paddingCtrlHorizontalDefault, + maxWidth: semanticTokens.ctrlDividerFixedLineLength, }, '::after': { - marginLeft: contentSpacing, + marginLeft: semanticTokens.paddingCtrlHorizontalDefault, }, }, center: { textAlign: 'center', '::before': { - marginRight: contentSpacing, + marginRight: semanticTokens.paddingCtrlHorizontalDefault, }, '::after': { - marginLeft: contentSpacing, + marginLeft: semanticTokens.paddingCtrlHorizontalDefault, }, }, end: { textAlign: 'right', '::before': { - marginRight: contentSpacing, + marginRight: semanticTokens.paddingCtrlHorizontalDefault, }, '::after': { content: '""', - marginLeft: contentSpacing, - maxWidth: maxStartEndLength, + marginLeft: semanticTokens.paddingCtrlHorizontalDefault, + maxWidth: semanticTokens.ctrlDividerFixedLineLength, }, }, }); @@ -192,21 +188,21 @@ const useVerticalStyles = makeStyles({ '::before': { borderRightStyle: 'solid', - borderRightWidth: tokens.strokeWidthThin, - minHeight: minStartEndLength, + borderRightWidth: semanticTokens.strokeWidthDividerDefault, + minHeight: semanticTokens.ctrlDividerFixedLineLength, }, '::after': { borderRightStyle: 'solid', - borderRightWidth: tokens.strokeWidthThin, - minHeight: minStartEndLength, + borderRightWidth: semanticTokens.strokeWidthDividerDefault, + minHeight: semanticTokens.ctrlDividerFixedLineLength, }, }, // Inset styles inset: { - marginTop: insetSpacing, - marginBottom: insetSpacing, + marginTop: semanticTokens.paddingCtrlHorizontalDefault, + marginBottom: semanticTokens.paddingCtrlHorizontalDefault, }, // With children styles @@ -218,30 +214,30 @@ const useVerticalStyles = makeStyles({ start: { '::before': { content: '""', - marginBottom: contentSpacing, - maxHeight: maxStartEndLength, + marginBottom: semanticTokens.paddingCtrlHorizontalDefault, + maxHeight: semanticTokens.ctrlDividerFixedLineLength, }, '::after': { - marginTop: contentSpacing, + marginTop: semanticTokens.paddingCtrlHorizontalDefault, }, }, center: { '::before': { - marginBottom: contentSpacing, + marginBottom: semanticTokens.paddingCtrlHorizontalDefault, }, '::after': { - marginTop: contentSpacing, + marginTop: semanticTokens.paddingCtrlHorizontalDefault, }, }, end: { '::before': { - marginBottom: contentSpacing, + marginBottom: semanticTokens.paddingCtrlHorizontalDefault, }, '::after': { content: '""', - marginTop: contentSpacing, - maxHeight: maxStartEndLength, + marginTop: semanticTokens.paddingCtrlHorizontalDefault, + maxHeight: semanticTokens.ctrlDividerFixedLineLength, }, }, }); diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index dec52aff9ca41..07c554e103f92 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -1484,11 +1484,14 @@ export const ctrlDialogStroke = "var(--smtc-ctrl-dialog-stroke, unset)"; 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))"; +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)"; @@ -2798,7 +2801,7 @@ export const ctrlTooltipShadowKey = "var(--smtc-ctrl-tooltip-shadow-key, var(--s export const ctrlTooltipShadowKeyRaw = "--smtc-ctrl-tooltip-shadow-key"; // @public (undocumented) -export const foregroundContentBrandPrimary = "var(--smtc-foreground-content-brand-primary, var(--smtc-foreground-ctrl-brand-rest))"; +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"; @@ -2810,7 +2813,7 @@ export const foregroundContentNeutralPrimary = "var(--smtc-foreground-content-ne 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))"; +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"; @@ -4930,25 +4933,25 @@ export const strokeCtrlOnSubtleRest = "var(--smtc-stroke-ctrl-on-subtle-rest, va 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))"; +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)"; +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))"; +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))"; +export const strokeDividerSubtle = "var(--smtc-stroke-divider-subtle, var(--smtc-stroke-divider-default, var(--colorNeutralStroke3)))"; // @public (undocumented) export const strokeDividerSubtleRaw = "--smtc-stroke-divider-subtle"; @@ -5008,7 +5011,7 @@ export const strokeWidthDefault = "var(--smtc-stroke-width-default, var(--stroke export const strokeWidthDefaultRaw = "--smtc-stroke-width-default"; // @public (undocumented) -export const strokeWidthDividerDefault = "var(--smtc-stroke-width-divider-default, var(--smtc-stroke-width-default))"; +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"; @@ -5698,7 +5701,7 @@ export const textStyleDefaultRegularFontFamily = "var(--smtc-text-style-default- export const textStyleDefaultRegularFontFamilyRaw = "--smtc-text-style-default-regular-font-family"; // @public (undocumented) -export const textStyleDefaultRegularLetterSpacing = "var(--smtc-text-style-default-regular-letter-spacing)"; +export const textStyleDefaultRegularLetterSpacing = "var(--smtc-text-style-default-regular-letter-spacing, 0)"; // @public (undocumented) export const textStyleDefaultRegularLetterSpacingRaw = "--smtc-text-style-default-regular-letter-spacing"; diff --git a/packages/semantic-tokens/src/components/divider/tokens.ts b/packages/semantic-tokens/src/components/divider/tokens.ts index aa8756e487a94..272da1e02e389 100644 --- a/packages/semantic-tokens/src/components/divider/tokens.ts +++ b/packages/semantic-tokens/src/components/divider/tokens.ts @@ -2,4 +2,4 @@ import { paddingContentAlignDefaultRaw } from '../../control/variables'; import { ctrlDividerFixedLineLengthRaw } from './variables'; -export const ctrlDividerFixedLineLength = `var(${ctrlDividerFixedLineLengthRaw}, var(${paddingContentAlignDefaultRaw}))`; +export const ctrlDividerFixedLineLength = `var(${ctrlDividerFixedLineLengthRaw}, var(${paddingContentAlignDefaultRaw}, 8px))`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index 77fba59bf0826..d44de70afc248 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -33,6 +33,7 @@ import { colorNeutralStroke1, colorNeutralStrokeDisabled, colorNeutralStrokeOnBrand, + colorNeutralStroke2, colorBrandBackground, colorBrandBackgroundHover, colorBrandBackgroundPressed, @@ -287,7 +288,7 @@ export const textGlobalCaption2FontSize = `var(${textGlobalCaption2FontSizeRaw}, export const textGlobalCaption2LineHeight = `var(${textGlobalCaption2LineHeightRaw}, ${lineHeightBase100})`; export const textStyleDefaultRegularFontFamily = `var(${textStyleDefaultRegularFontFamilyRaw}, ${fontFamilyBase})`; export const textStyleDefaultRegularWeight = `var(${textStyleDefaultRegularWeightRaw}, ${fontWeightRegular})`; -export const textStyleDefaultRegularLetterSpacing = `var(${textStyleDefaultRegularLetterSpacingRaw})`; +export const textStyleDefaultRegularLetterSpacing = `var(${textStyleDefaultRegularLetterSpacingRaw}, 0)`; export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightRaw}, ${fontWeightSemibold})`; export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw}, 44px)`; export const sizeCtrlIcon = `var(${sizeCtrlIconRaw}, 20px)`; @@ -352,7 +353,7 @@ export const strokeCtrlOnOutlineDisabled = `var(${strokeCtrlOnOutlineDisabledRaw export const strokeCtrlDividerOnBrand = `var(${strokeCtrlDividerOnBrandRaw}, ${colorNeutralStrokeOnBrand})`; export const strokeCtrlDividerOnNeutral = `var(${strokeCtrlDividerOnNeutralRaw})`; export const strokeCtrlDividerOnOutline = `var(${strokeCtrlDividerOnOutlineRaw}, ${colorNeutralStroke1})`; -export const strokeDividerDefault = `var(${strokeDividerDefaultRaw})`; +export const strokeDividerDefault = `var(${strokeDividerDefaultRaw}, ${colorNeutralStroke2})`; export const strokeWindowActive = `var(${strokeWindowActiveRaw})`; export const backgroundWindowPrimarySolid = `var(${backgroundWindowPrimarySolidRaw})`; export const backgroundWindowPrimaryColorBlend = `var(${backgroundWindowPrimaryColorBlendRaw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 2de3fffc323a3..9959fcc5bbd0f 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -65,4 +65,8 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'spacingHorizontalSNudge', originalToken: 'gapInsideCtrlDefault', }, + _ctrlDividerForegroundSubtle: { + f2Token: 'colorNeutralForeground3', + originalToken: 'foregroundCtrlHintDefault', + }, }; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 9811ad8e514ba..d4d6b1ebd170d 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -40,6 +40,7 @@ export const fluentOverrides: FluentOverrides = { ctrlAvatarTextFontSize: { f2Token: 'fontSizeBase300' }, ctrlAvatarTextLineHeight: { rawValue: '1' }, ctrlChoiceBaseSize: { rawValue: '20px' }, + ctrlDividerFixedLineLength: { rawValue: '8px' }, ctrlFocusInnerStroke: { f2Token: 'colorStrokeFocus2' }, ctrlFocusInnerStrokeWidth: { f2Token: 'strokeWidthThin' }, ctrlFocusOuterStroke: { f2Token: 'colorTransparentStroke' }, @@ -58,7 +59,9 @@ export const fluentOverrides: FluentOverrides = { ctrlProgressHeightFilled: { rawValue: '100%' }, ctrlProgressLgHeightEmpty: { rawValue: '4px' }, ctrlProgressLgHeightFilled: { rawValue: '100%' }, + foregroundContentBrandPrimary: { f2Token: 'colorBrandForeground1' }, foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' }, + foregroundContentNeutralSecondary: { f2Token: 'colorNeutralForeground2' }, foregroundCtrlIconOnNeutralDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, foregroundCtrlIconOnSubtleDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, foregroundCtrlIconOnSubtleHover: { f2Token: 'colorNeutralForeground2BrandHover' }, @@ -135,12 +138,17 @@ export const fluentOverrides: FluentOverrides = { strokeCtrlOnSubtleHover: { rawValue: 'transparent' }, strokeCtrlOnSubtlePressed: { rawValue: 'transparent' }, strokeCtrlOnSubtleRest: { rawValue: 'transparent' }, + strokeDividerBrand: { f2Token: 'colorBrandStroke1' }, + strokeDividerDefault: { f2Token: 'colorNeutralStroke2' }, + strokeDividerStrong: { f2Token: 'colorNeutralStroke1' }, + strokeDividerSubtle: { f2Token: 'colorNeutralStroke3' }, strokeLayer: { f2Token: 'colorTransparentStroke' }, strokeWidthCtrlOutlineHover: { f2Token: 'strokeWidthThin' }, strokeWidthCtrlOutlinePressed: { f2Token: 'strokeWidthThin' }, strokeWidthCtrlOutlineRest: { f2Token: 'strokeWidthThin' }, strokeWidthCtrlOutlineSelected: { f2Token: 'strokeWidthThicker' }, strokeWidthDefault: { f2Token: 'strokeWidthThin' }, + strokeWidthDividerDefault: { f2Token: 'strokeWidthThin' }, textCtrlButtonWeightDefault: { f2Token: 'fontWeightSemibold' }, textGlobalBody1FontSize: { f2Token: 'fontSizeBase500' }, textGlobalBody1LineHeight: { f2Token: 'lineHeightBase500' }, @@ -171,5 +179,6 @@ export const fluentOverrides: FluentOverrides = { 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 index ff5564677347a..888da39f3aa0e 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1811,15 +1811,16 @@ export { _ctrlAccordionForegroundHover, _ctrlAccordionForegroundPressed, _ctrlAccordionForegroundRest, - _ctrlButtonGapInsideDefault, - _ctrlAvatarActiveRingStrokeWidthSm, - _ctrlAvatarActiveRingStrokeWidthMd, _ctrlAvatarActiveRingStrokeWidthLg, - _ctrlAvatarCornerGroupSm, - _ctrlAvatarCornerGroupMd, + _ctrlAvatarActiveRingStrokeWidthMd, + _ctrlAvatarActiveRingStrokeWidthSm, _ctrlAvatarCornerGroupLg, + _ctrlAvatarCornerGroupMd, + _ctrlAvatarCornerGroupSm, _ctrlAvatarCornerGroupXLg, - _ctrlAvatarPresenceBadgeStrokeWidthSm, _ctrlAvatarPresenceBadgeStrokeWidthLg, + _ctrlAvatarPresenceBadgeStrokeWidthSm, + _ctrlButtonGapInsideDefault, + _ctrlDividerForegroundSubtle, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 8912f2461fa63..ff98725c50699 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -139,6 +139,11 @@ export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)'; * @public */ export const colorCompoundBrandBackground = 'var(--colorCompoundBrandBackground)'; +/** + * 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#colorNeutralForeground1 | `colorNeutralForeground1`} design token. * @public @@ -244,6 +249,21 @@ export const colorNeutralStroke1Hover = 'var(--colorNeutralStroke1Hover)'; * @public */ export const colorNeutralStroke1Pressed = 'var(--colorNeutralStroke1Pressed)'; +/** + * 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#colorNeutralStroke2 | `colorNeutralStroke2`} design token. + * @public + */ +export const colorNeutralStroke2 = 'var(--colorNeutralStroke2)'; +/** + * 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#strokeWidthThicker | `strokeWidthThicker`} design token. * @public @@ -365,15 +385,15 @@ export const fontWeightRegular = 'var(--fontWeightRegular)'; */ export const strokeWidthThickest = 'var(--strokeWidthThickest)'; /** - * CSS custom property value for the {@link @fluentui/tokens#borderRadiusSmall | `borderRadiusSmall`} design token. + * CSS custom property value for the {@link @fluentui/tokens#borderRadiusLarge | `borderRadiusLarge`} design token. * @public */ -export const borderRadiusSmall = 'var(--borderRadiusSmall)'; +export const borderRadiusLarge = 'var(--borderRadiusLarge)'; /** - * CSS custom property value for the {@link @fluentui/tokens#borderRadiusLarge | `borderRadiusLarge`} design token. + * CSS custom property value for the {@link @fluentui/tokens#borderRadiusSmall | `borderRadiusSmall`} design token. * @public */ -export const borderRadiusLarge = 'var(--borderRadiusLarge)'; +export const borderRadiusSmall = 'var(--borderRadiusSmall)'; /** * CSS custom property value for the {@link @fluentui/tokens#borderRadiusXLarge | `borderRadiusXLarge`} design token. * @public diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 0ca00dbc88f34..51ee5a4fc4265 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -6,22 +6,25 @@ import { } from '../components/avatar/variables'; import { foregroundCtrlNeutralPrimaryRestRaw, - gapInsideCtrlDefaultRaw, cornerCtrlRestRaw, strokeWidthDefaultRaw, + gapInsideCtrlDefaultRaw, + nullColorRaw, } from '../control/variables'; import { colorNeutralForeground2, - spacingHorizontalSNudge, - strokeWidthThick, - strokeWidthThicker, strokeWidthThickest, - borderRadiusSmall, - borderRadiusMedium, + strokeWidthThicker, + strokeWidthThick, borderRadiusLarge, + borderRadiusMedium, + borderRadiusSmall, borderRadiusXLarge, strokeWidthThin, + spacingHorizontalSNudge, + colorNeutralForeground3, } from '../legacy/tokens'; +import { foregroundCtrlHintDefaultRaw } from '../nullable/variables'; import { foregroundCtrlOnTransparentHoverRaw, foregroundCtrlOnTransparentPressedRaw, @@ -49,20 +52,13 @@ export const _ctrlAccordionForegroundPressed = `var(${foregroundCtrlOnTransparen * please use foregroundCtrlOnTransparentRest instead. */ export const _ctrlAccordionForegroundRest = `var(${foregroundCtrlOnTransparentRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground2}))`; -/** - * 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 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})`; +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. @@ -76,14 +72,14 @@ export const _ctrlAvatarActiveRingStrokeWidthMd = `var(${ctrlAvatarActiveRingStr * This token is not intended for use in new semantic theme implementations * please use ctrlAvatarActiveRingStrokeWidth instead. */ -export const _ctrlAvatarActiveRingStrokeWidthLg = `var(${ctrlAvatarActiveRingStrokeWidthRaw}, ${strokeWidthThickest})`; +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 _ctrlAvatarCornerGroupSm = `var(${ctrlAvatarCornerGroupRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusSmall}))`; +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. @@ -97,7 +93,7 @@ export const _ctrlAvatarCornerGroupMd = `var(${ctrlAvatarCornerGroupRaw}, var(${ * This token is not intended for use in new semantic theme implementations * please use ctrlAvatarCornerGroup instead. */ -export const _ctrlAvatarCornerGroupLg = `var(${ctrlAvatarCornerGroupRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusLarge}))`; +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. @@ -111,11 +107,25 @@ export const _ctrlAvatarCornerGroupXLg = `var(${ctrlAvatarCornerGroupRaw}, var($ * This token is not intended for use in new semantic theme implementations * please use ctrlAvatarPresenceBadgeStrokeWidth instead. */ -export const _ctrlAvatarPresenceBadgeStrokeWidthSm = `var(${ctrlAvatarPresenceBadgeStrokeWidthRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; +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 _ctrlAvatarPresenceBadgeStrokeWidthLg = `var(${ctrlAvatarPresenceBadgeStrokeWidthRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThick}))`; +export const _ctrlAvatarPresenceBadgeStrokeWidthSm = `var(${ctrlAvatarPresenceBadgeStrokeWidthRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; +/** + * 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 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}))`; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index 3373e44017abf..f2dda706a872f 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -94,13 +94,17 @@ import { strokeWidthThicker, colorNeutralForegroundOnBrand, colorStrokeFocus2, + colorNeutralStroke3, + colorNeutralStroke1, + colorBrandStroke1, colorNeutralForeground1, + colorNeutralForeground2, + colorBrandForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForegroundDisabled, - colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, } from '../legacy/tokens'; @@ -467,7 +471,7 @@ export const gapBetweenTextLarge = `var(${gapBetweenTextLargeRaw}, var(${gapBetw export const gapBetweenCtrlSmNested = `var(${gapBetweenCtrlSmNestedRaw}, var(${paddingCtrlSmToNestedControlRaw}))`; export const gapBetweenListItem = `var(${gapBetweenListItemRaw}, var(${gapBetweenContentXxSmallRaw}))`; export const gapBetweenCard = `var(${gapBetweenCardRaw}, var(${gapBetweenContentMediumRaw}))`; -export const strokeWidthDividerDefault = `var(${strokeWidthDividerDefaultRaw}, var(${strokeWidthDefaultRaw}))`; +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}))`; @@ -501,9 +505,9 @@ export const strokeCtrlOnActiveBrandRestStop2 = `var(${strokeCtrlOnActiveBrandRe 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}))`; -export const strokeDividerStrong = `var(${strokeDividerStrongRaw}, var(${strokeDividerDefaultRaw}))`; -export const strokeDividerBrand = `var(${strokeDividerBrandRaw}, var(${backgroundCtrlBrandRestRaw}))`; +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}))`; @@ -535,8 +539,8 @@ export const cornerCtrlSmPressed = `var(${cornerCtrlSmPressedRaw}, var(${cornerC 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}))`; -export const foregroundContentBrandPrimary = `var(${foregroundContentBrandPrimaryRaw}, var(${foregroundCtrlBrandRestRaw}))`; +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}))`; From 216cc87c11239766ac708ff57c84625d034c0f67 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Mon, 16 Jun 2025 19:05:01 -0700 Subject: [PATCH 21/66] Extended-tokens: Simplify shadow set (#34660) --- .../etc/semantic-tokens.api.md | 158 +++++------------- .../src/components/choice/tokens.ts | 6 +- .../src/components/choice/variables.ts | 3 +- .../src/components/composer/tokens.ts | 6 +- .../src/components/composer/variables.ts | 5 +- .../src/components/dialog/tokens.ts | 6 +- .../src/components/dialog/variables.ts | 3 +- .../src/components/fab/tokens.ts | 20 +-- .../src/components/fab/variables.ts | 9 +- .../src/components/list/tokens.ts | 6 +- .../src/components/list/variables.ts | 3 +- .../src/components/tooltip/tokens.ts | 8 +- .../src/components/tooltip/variables.ts | 3 +- .../semantic-tokens/src/control/tokens.ts | 20 +-- .../semantic-tokens/src/control/variables.ts | 10 +- packages/semantic-tokens/src/index.ts | 102 +++++------ .../semantic-tokens/src/nullable/tokens.ts | 24 ++- .../semantic-tokens/src/nullable/variables.ts | 12 +- .../semantic-tokens/src/optional/tokens.ts | 15 +- .../semantic-tokens/src/optional/variables.ts | 5 +- .../utils/chopLastCamelCasePart.test.ts | 8 + .../utils/chopLastCamelCasePart.ts | 12 +- .../utils/dedupeShadowTokens.test.ts | 124 +++++++++++++- .../utils/dedupeShadowTokens.ts | 45 ++++- 24 files changed, 308 insertions(+), 305 deletions(-) diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 07c554e103f92..467515bef804a 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -1202,16 +1202,10 @@ export const ctrlChoiceSwitchPaddingRest = "var(--smtc-ctrl-choice-switch-paddin export const ctrlChoiceSwitchPaddingRestRaw = "--smtc-ctrl-choice-switch-padding-rest"; // @public (undocumented) -export const ctrlChoiceSwitchThumbShadowAmbient = "var(--smtc-ctrl-choice-switch-thumb-shadow-ambient, unset)"; +export const ctrlChoiceSwitchThumbShadow = "var(--smtc-ctrl-choice-switch-thumb-shadow, unset)"; // @public (undocumented) -export const ctrlChoiceSwitchThumbShadowAmbientRaw = "--smtc-ctrl-choice-switch-thumb-shadow-ambient"; - -// @public (undocumented) -export const ctrlChoiceSwitchThumbShadowKey = "var(--smtc-ctrl-choice-switch-thumb-shadow-key, unset)"; - -// @public (undocumented) -export const ctrlChoiceSwitchThumbShadowKeyRaw = "--smtc-ctrl-choice-switch-thumb-shadow-key"; +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))"; @@ -1262,16 +1256,10 @@ export const ctrlComposerContainerCorner = "var(--smtc-ctrl-composer-container-c export const ctrlComposerContainerCornerRaw = "--smtc-ctrl-composer-container-corner"; // @public (undocumented) -export const ctrlComposerContainerShadowAmbient = "var(--smtc-ctrl-composer-container-shadow-ambient)"; +export const ctrlComposerContainerShadow = "var(--smtc-ctrl-composer-container-shadow)"; // @public (undocumented) -export const ctrlComposerContainerShadowAmbientRaw = "--smtc-ctrl-composer-container-shadow-ambient"; - -// @public (undocumented) -export const ctrlComposerContainerShadowKey = "var(--smtc-ctrl-composer-container-shadow-key)"; - -// @public (undocumented) -export const ctrlComposerContainerShadowKeyRaw = "--smtc-ctrl-composer-container-shadow-key"; +export const ctrlComposerContainerShadowRaw = "--smtc-ctrl-composer-container-shadow"; // @public (undocumented) export const ctrlComposerContainerStrokeDefault = "var(--smtc-ctrl-composer-container-stroke-default, unset)"; @@ -1382,10 +1370,10 @@ export const ctrlComposerInputCornerRest = "var(--smtc-ctrl-composer-input-corne export const ctrlComposerInputCornerRestRaw = "--smtc-ctrl-composer-input-corner-rest"; // @public (undocumented) -export const ctrlComposerInputShadow = "var(--smtc-ctrl-composer-input-shadow-x)"; +export const ctrlComposerInputShadow = "var(--smtc-ctrl-composer-input-shadow)"; // @public (undocumented) -export const ctrlComposerInputShadowRaw = "--smtc-ctrl-composer-input-shadow-x"; +export const ctrlComposerInputShadowRaw = "--smtc-ctrl-composer-input-shadow"; // @public (undocumented) export const ctrlComposerInputStrokeDisabledUsesGradient = "var(--smtc-ctrl-composer-input-stroke-disabled-uses-gradient, unset)"; @@ -1454,16 +1442,10 @@ export const ctrlDialogBaseCorner = "var(--smtc-ctrl-dialog-base-corner, var(--s export const ctrlDialogBaseCornerRaw = "--smtc-ctrl-dialog-base-corner"; // @public (undocumented) -export const ctrlDialogBaseShadowAmbient = "var(--smtc-ctrl-dialog-base-shadow-ambient)"; - -// @public (undocumented) -export const ctrlDialogBaseShadowAmbientRaw = "--smtc-ctrl-dialog-base-shadow-ambient"; +export const ctrlDialogBaseShadow = "var(--smtc-ctrl-dialog-base-shadow)"; // @public (undocumented) -export const ctrlDialogBaseShadowKey = "var(--smtc-ctrl-dialog-base-shadow-key)"; - -// @public (undocumented) -export const ctrlDialogBaseShadowKeyRaw = "--smtc-ctrl-dialog-base-shadow-key"; +export const ctrlDialogBaseShadowRaw = "--smtc-ctrl-dialog-base-shadow"; // @public (undocumented) export const ctrlDialogLayerBackground = "var(--smtc-ctrl-dialog-layer-background, var(--smtc-background-layer-primary-solid))"; @@ -1565,34 +1547,28 @@ export const ctrlFabForegroundRestNew = "var(--smtc-ctrl-fab-foreground-rest-new export const ctrlFabForegroundRestNewRaw = "--smtc-ctrl-fab-foreground-rest-new"; // @public (undocumented) -export const ctrlFabShadowDisabledKey = "var(--smtc-ctrl-fab-shadow-disabled-key, var(--smtc-ctrl-fab-shadow-pressed-key))"; - -// @public (undocumented) -export const ctrlFabShadowDisabledKeyRaw = "--smtc-ctrl-fab-shadow-disabled-key"; - -// @public (undocumented) -export const ctrlFabShadowHoverKey = "var(--smtc-ctrl-fab-shadow-hover-key, var(--smtc-shadow-flyout-key))"; +export const ctrlFabShadowDisabled = "var(--smtc-ctrl-fab-shadow-disabled, var(--smtc-ctrl-fab-shadow-pressed))"; // @public (undocumented) -export const ctrlFabShadowHoverKeyRaw = "--smtc-ctrl-fab-shadow-hover-key"; +export const ctrlFabShadowDisabledRaw = "--smtc-ctrl-fab-shadow-disabled"; // @public (undocumented) -export const ctrlFabShadowPressedKey = "var(--smtc-ctrl-fab-shadow-pressed-key)"; +export const ctrlFabShadowHover = "var(--smtc-ctrl-fab-shadow-hover, var(--smtc-shadow-flyout))"; // @public (undocumented) -export const ctrlFabShadowPressedKeyRaw = "--smtc-ctrl-fab-shadow-pressed-key"; +export const ctrlFabShadowHoverRaw = "--smtc-ctrl-fab-shadow-hover"; // @public (undocumented) -export const ctrlFabShadowRestAmbient = "var(--smtc-ctrl-fab-shadow-rest-ambient)"; +export const ctrlFabShadowPressed = "var(--smtc-ctrl-fab-shadow-pressed)"; // @public (undocumented) -export const ctrlFabShadowRestAmbientRaw = "--smtc-ctrl-fab-shadow-rest-ambient"; +export const ctrlFabShadowPressedRaw = "--smtc-ctrl-fab-shadow-pressed"; // @public (undocumented) -export const ctrlFabShadowRestKey = "var(--smtc-ctrl-fab-shadow-rest-key)"; +export const ctrlFabShadowRest = "var(--smtc-ctrl-fab-shadow-rest)"; // @public (undocumented) -export const ctrlFabShadowRestKeyRaw = "--smtc-ctrl-fab-shadow-rest-key"; +export const ctrlFabShadowRestRaw = "--smtc-ctrl-fab-shadow-rest"; // @public (undocumented) export const ctrlFocusInnerStroke = "var(--smtc-ctrl-focus-inner-stroke, var(--colorStrokeFocus2))"; @@ -2123,16 +2099,10 @@ export const ctrlListPillWidth = "var(--smtc-ctrl-list-pill-width)"; export const ctrlListPillWidthRaw = "--smtc-ctrl-list-pill-width"; // @public (undocumented) -export const ctrlListShadowSelectedAmbient = "var(--smtc-ctrl-list-shadow-selected-ambient)"; - -// @public (undocumented) -export const ctrlListShadowSelectedAmbientRaw = "--smtc-ctrl-list-shadow-selected-ambient"; - -// @public (undocumented) -export const ctrlListShadowSelectedKey = "var(--smtc-ctrl-list-shadow-selected-key-y, unset)"; +export const ctrlListShadowSelected = "var(--smtc-ctrl-list-shadow-selected)"; // @public (undocumented) -export const ctrlListShadowSelectedKeyRaw = "--smtc-ctrl-list-shadow-selected-key-y"; +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))"; @@ -2789,16 +2759,10 @@ export const ctrlTooltipForeground = "var(--smtc-ctrl-tooltip-foreground)"; export const ctrlTooltipForegroundRaw = "--smtc-ctrl-tooltip-foreground"; // @public (undocumented) -export const ctrlTooltipShadowAmbient = "var(--smtc-ctrl-tooltip-shadow-ambient, var(--smtc-ctrl-fab-shadow-rest-ambient))"; +export const ctrlTooltipShadow = "var(--smtc-ctrl-tooltip-shadow, var(--smtc-ctrl-fab-shadow-rest))"; // @public (undocumented) -export const ctrlTooltipShadowAmbientRaw = "--smtc-ctrl-tooltip-shadow-ambient"; - -// @public (undocumented) -export const ctrlTooltipShadowKey = "var(--smtc-ctrl-tooltip-shadow-key, var(--smtc-ctrl-fab-shadow-rest-key))"; - -// @public (undocumented) -export const ctrlTooltipShadowKeyRaw = "--smtc-ctrl-tooltip-shadow-key"; +export const ctrlTooltipShadowRaw = "--smtc-ctrl-tooltip-shadow"; // @public (undocumented) export const foregroundContentBrandPrimary = "var(--smtc-foreground-content-brand-primary, var(--smtc-foreground-ctrl-brand-rest, var(--colorBrandForeground1)))"; @@ -4189,106 +4153,64 @@ export const paddingToolbarOutside = "var(--smtc-padding-toolbar-outside, var(-- export const paddingToolbarOutsideRaw = "--smtc-padding-toolbar-outside"; // @public (undocumented) -export const shadowCardDisabledKey = "var(--smtc-shadow-card-disabled-key, unset)"; - -// @public (undocumented) -export const shadowCardDisabledKeyRaw = "--smtc-shadow-card-disabled-key"; - -// @public (undocumented) -export const shadowCardHoverKey = "var(--smtc-shadow-card-hover-key, unset)"; - -// @public (undocumented) -export const shadowCardHoverKeyRaw = "--smtc-shadow-card-hover-key"; - -// @public (undocumented) -export const shadowCardPressedKey = "var(--smtc-shadow-card-pressed-key, unset)"; - -// @public (undocumented) -export const shadowCardPressedKeyRaw = "--smtc-shadow-card-pressed-key"; - -// @public (undocumented) -export const shadowCardRestAmbient = "var(--smtc-shadow-card-rest-ambient, unset)"; - -// @public (undocumented) -export const shadowCardRestAmbientRaw = "--smtc-shadow-card-rest-ambient"; - -// @public (undocumented) -export const shadowCardRestKey = "var(--smtc-shadow-card-rest-key, unset)"; - -// @public (undocumented) -export const shadowCardRestKeyRaw = "--smtc-shadow-card-rest-key"; - -// @public (undocumented) -export const shadowCtrlOnDragAmbient = "var(--smtc-shadow-ctrl-on-drag-ambient, var(--smtc-shadow-flyout-ambient))"; - -// @public (undocumented) -export const shadowCtrlOnDragAmbientRaw = "--smtc-shadow-ctrl-on-drag-ambient"; - -// @public (undocumented) -export const shadowCtrlOnDragKey = "var(--smtc-shadow-ctrl-on-drag-key, var(--smtc-shadow-flyout-key))"; - -// @public (undocumented) -export const shadowCtrlOnDragKeyRaw = "--smtc-shadow-ctrl-on-drag-key"; - -// @public (undocumented) -export const shadowFlyoutAmbient = "var(--smtc-shadow-flyout-ambient)"; +export const shadowCardDisabled = "var(--smtc-shadow-card-disabled, unset)"; // @public (undocumented) -export const shadowFlyoutAmbientRaw = "--smtc-shadow-flyout-ambient"; +export const shadowCardDisabledRaw = "--smtc-shadow-card-disabled"; // @public (undocumented) -export const shadowFlyoutKey = "var(--smtc-shadow-flyout-key)"; +export const shadowCardHover = "var(--smtc-shadow-card-hover, unset)"; // @public (undocumented) -export const shadowFlyoutKeyRaw = "--smtc-shadow-flyout-key"; +export const shadowCardHoverRaw = "--smtc-shadow-card-hover"; // @public (undocumented) -export const shadowLayerAmbient = "var(--smtc-shadow-layer-ambient, unset)"; +export const shadowCardPressed = "var(--smtc-shadow-card-pressed, unset)"; // @public (undocumented) -export const shadowLayerAmbientRaw = "--smtc-shadow-layer-ambient"; +export const shadowCardPressedRaw = "--smtc-shadow-card-pressed"; // @public (undocumented) -export const shadowLayerKey = "var(--smtc-shadow-layer-key, unset)"; +export const shadowCardRest = "var(--smtc-shadow-card-rest, unset)"; // @public (undocumented) -export const shadowLayerKeyRaw = "--smtc-shadow-layer-key"; +export const shadowCardRestRaw = "--smtc-shadow-card-rest"; // @public (undocumented) -export const shadowToolbarAmbient = "var(--smtc-shadow-toolbar-ambient)"; +export const shadowCtrlOnDrag = "var(--smtc-shadow-ctrl-on-drag, var(--smtc-shadow-flyout))"; // @public (undocumented) -export const shadowToolbarAmbientRaw = "--smtc-shadow-toolbar-ambient"; +export const shadowCtrlOnDragRaw = "--smtc-shadow-ctrl-on-drag"; // @public (undocumented) -export const shadowToolbarKey = "var(--smtc-shadow-toolbar-key)"; +export const shadowFlyout = "var(--smtc-shadow-flyout)"; // @public (undocumented) -export const shadowToolbarKeyRaw = "--smtc-shadow-toolbar-key"; +export const shadowFlyoutRaw = "--smtc-shadow-flyout"; // @public (undocumented) -export const shadowWindowActiveAmbient = "var(--smtc-shadow-window-active-ambient)"; +export const shadowLayer = "var(--smtc-shadow-layer, unset)"; // @public (undocumented) -export const shadowWindowActiveAmbientRaw = "--smtc-shadow-window-active-ambient"; +export const shadowLayerRaw = "--smtc-shadow-layer"; // @public (undocumented) -export const shadowWindowActiveKey = "var(--smtc-shadow-window-active-key)"; +export const shadowToolbar = "var(--smtc-shadow-toolbar)"; // @public (undocumented) -export const shadowWindowActiveKeyRaw = "--smtc-shadow-window-active-key"; +export const shadowToolbarRaw = "--smtc-shadow-toolbar"; // @public (undocumented) -export const shadowWindowInactiveAmbient = "var(--smtc-shadow-window-inactive-ambient)"; +export const shadowWindowActive = "var(--smtc-shadow-window-active)"; // @public (undocumented) -export const shadowWindowInactiveAmbientRaw = "--smtc-shadow-window-inactive-ambient"; +export const shadowWindowActiveRaw = "--smtc-shadow-window-active"; // @public (undocumented) -export const shadowWindowInactiveKey = "var(--smtc-shadow-window-inactive-key, var(--smtc-shadow-window-active-key))"; +export const shadowWindowInactive = "var(--smtc-shadow-window-inactive, var(--smtc-shadow-window-active))"; // @public (undocumented) -export const shadowWindowInactiveKeyRaw = "--smtc-shadow-window-inactive-key"; +export const shadowWindowInactiveRaw = "--smtc-shadow-window-inactive"; // @public (undocumented) export const sizeCtrlDefault = "var(--smtc-size-ctrl-default, 44px)"; diff --git a/packages/semantic-tokens/src/components/choice/tokens.ts b/packages/semantic-tokens/src/components/choice/tokens.ts index 043e8b5dfe8d7..4132de5787a71 100644 --- a/packages/semantic-tokens/src/components/choice/tokens.ts +++ b/packages/semantic-tokens/src/components/choice/tokens.ts @@ -65,8 +65,7 @@ import { ctrlChoiceLgSwitchThumbWidthRestRaw, ctrlChoiceLgSwitchThumbWidthHoverRaw, ctrlChoiceLgSwitchThumbWidthPressedRaw, - ctrlChoiceSwitchThumbShadowKeyRaw, - ctrlChoiceSwitchThumbShadowAmbientRaw, + ctrlChoiceSwitchThumbShadowRaw, } from './variables'; export const ctrlChoicePaddingHorizontal = `var(${ctrlChoicePaddingHorizontalRaw})`; @@ -119,5 +118,4 @@ export const ctrlChoiceLgSwitchHeight = `var(${ctrlChoiceLgSwitchHeightRaw}, var export const ctrlChoiceLgSwitchThumbWidthRest = `var(${ctrlChoiceLgSwitchThumbWidthRestRaw})`; export const ctrlChoiceLgSwitchThumbWidthHover = `var(${ctrlChoiceLgSwitchThumbWidthHoverRaw}, var(${ctrlChoiceLgSwitchThumbWidthRestRaw}))`; export const ctrlChoiceLgSwitchThumbWidthPressed = `var(${ctrlChoiceLgSwitchThumbWidthPressedRaw}, var(${ctrlChoiceLgSwitchThumbWidthRestRaw}))`; -export const ctrlChoiceSwitchThumbShadowKey = `var(${ctrlChoiceSwitchThumbShadowKeyRaw}, unset)`; -export const ctrlChoiceSwitchThumbShadowAmbient = `var(${ctrlChoiceSwitchThumbShadowAmbientRaw}, unset)`; +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 index 64ae9fd9eb122..9ace362e06fab 100644 --- a/packages/semantic-tokens/src/components/choice/variables.ts +++ b/packages/semantic-tokens/src/components/choice/variables.ts @@ -49,5 +49,4 @@ 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 ctrlChoiceSwitchThumbShadowKeyRaw = '--smtc-ctrl-choice-switch-thumb-shadow-key'; -export const ctrlChoiceSwitchThumbShadowAmbientRaw = '--smtc-ctrl-choice-switch-thumb-shadow-ambient'; +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 index 6eaf601a5e0b1..ab041a173fd85 100644 --- a/packages/semantic-tokens/src/components/composer/tokens.ts +++ b/packages/semantic-tokens/src/components/composer/tokens.ts @@ -33,8 +33,7 @@ import { ctrlComposerContainerBackgroundAcrylicLumBlendRaw, ctrlComposerContainerStrokeDefaultRaw, ctrlComposerInputShadowRaw, - ctrlComposerContainerShadowKeyRaw, - ctrlComposerContainerShadowAmbientRaw, + ctrlComposerContainerShadowRaw, } from './variables'; export const ctrlComposerInputBottomStrokeWidthSelectedRest = `var(${ctrlComposerInputBottomStrokeWidthSelectedRestRaw})`; @@ -69,5 +68,4 @@ export const ctrlComposerContainerBackgroundAcrylicColorBlend = `var(${ctrlCompo export const ctrlComposerContainerBackgroundAcrylicLumBlend = `var(${ctrlComposerContainerBackgroundAcrylicLumBlendRaw}, var(${backgroundFlyoutSolidRaw}))`; export const ctrlComposerContainerStrokeDefault = `var(${ctrlComposerContainerStrokeDefaultRaw}, unset)`; export const ctrlComposerInputShadow = `var(${ctrlComposerInputShadowRaw})`; -export const ctrlComposerContainerShadowKey = `var(${ctrlComposerContainerShadowKeyRaw})`; -export const ctrlComposerContainerShadowAmbient = `var(${ctrlComposerContainerShadowAmbientRaw})`; +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 index 46c79c6fa869c..6cf0d686655fa 100644 --- a/packages/semantic-tokens/src/components/composer/variables.ts +++ b/packages/semantic-tokens/src/components/composer/variables.ts @@ -35,6 +35,5 @@ export const ctrlComposerContainerBackgroundAcrylicColorBlendRaw = 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-x'; -export const ctrlComposerContainerShadowKeyRaw = '--smtc-ctrl-composer-container-shadow-key'; -export const ctrlComposerContainerShadowAmbientRaw = '--smtc-ctrl-composer-container-shadow-ambient'; +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 index f764d5068069f..87349246c35a4 100644 --- a/packages/semantic-tokens/src/components/dialog/tokens.ts +++ b/packages/semantic-tokens/src/components/dialog/tokens.ts @@ -6,8 +6,7 @@ import { ctrlDialogBaseCornerRaw, ctrlDialogLayerBackgroundRaw, ctrlDialogLayerPaddingBottomRaw, - ctrlDialogBaseShadowKeyRaw, - ctrlDialogBaseShadowAmbientRaw, + ctrlDialogBaseShadowRaw, } from './variables'; export const ctrlDialogBackground = `var(${ctrlDialogBackgroundRaw})`; @@ -15,5 +14,4 @@ export const ctrlDialogStroke = `var(${ctrlDialogStrokeRaw}, unset)`; export const ctrlDialogBaseCorner = `var(${ctrlDialogBaseCornerRaw}, var(${cornerCardRestRaw}))`; export const ctrlDialogLayerBackground = `var(${ctrlDialogLayerBackgroundRaw}, var(${backgroundLayerPrimarySolidRaw}))`; export const ctrlDialogLayerPaddingBottom = `var(${ctrlDialogLayerPaddingBottomRaw})`; -export const ctrlDialogBaseShadowKey = `var(${ctrlDialogBaseShadowKeyRaw})`; -export const ctrlDialogBaseShadowAmbient = `var(${ctrlDialogBaseShadowAmbientRaw})`; +export const ctrlDialogBaseShadow = `var(${ctrlDialogBaseShadowRaw})`; diff --git a/packages/semantic-tokens/src/components/dialog/variables.ts b/packages/semantic-tokens/src/components/dialog/variables.ts index 64b94cb2dfbcf..d98044c011dfa 100644 --- a/packages/semantic-tokens/src/components/dialog/variables.ts +++ b/packages/semantic-tokens/src/components/dialog/variables.ts @@ -4,5 +4,4 @@ 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 ctrlDialogBaseShadowKeyRaw = '--smtc-ctrl-dialog-base-shadow-key'; -export const ctrlDialogBaseShadowAmbientRaw = '--smtc-ctrl-dialog-base-shadow-ambient'; +export const ctrlDialogBaseShadowRaw = '--smtc-ctrl-dialog-base-shadow'; diff --git a/packages/semantic-tokens/src/components/fab/tokens.ts b/packages/semantic-tokens/src/components/fab/tokens.ts index e7c3756accab8..21d801c17abf0 100644 --- a/packages/semantic-tokens/src/components/fab/tokens.ts +++ b/packages/semantic-tokens/src/components/fab/tokens.ts @@ -3,7 +3,7 @@ import { foregroundCtrlNeutralPrimaryRestRaw, foregroundCtrlNeutralPrimaryDisabledRaw, cornerCircularRaw, - shadowFlyoutKeyRaw, + shadowFlyoutRaw, } from '../../control/variables'; import { ctrlFabForegroundRestNewRaw, @@ -15,11 +15,10 @@ import { ctrlFabCornerRestRaw, ctrlFabCornerHoverRaw, ctrlFabCornerPressedRaw, - ctrlFabShadowRestKeyRaw, - ctrlFabShadowRestAmbientRaw, - ctrlFabShadowHoverKeyRaw, - ctrlFabShadowPressedKeyRaw, - ctrlFabShadowDisabledKeyRaw, + ctrlFabShadowRestRaw, + ctrlFabShadowHoverRaw, + ctrlFabShadowPressedRaw, + ctrlFabShadowDisabledRaw, } from './variables'; export const ctrlFabForegroundRestNew = `var(${ctrlFabForegroundRestNewRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}))`; @@ -31,8 +30,7 @@ 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 ctrlFabShadowRestKey = `var(${ctrlFabShadowRestKeyRaw})`; -export const ctrlFabShadowRestAmbient = `var(${ctrlFabShadowRestAmbientRaw})`; -export const ctrlFabShadowHoverKey = `var(${ctrlFabShadowHoverKeyRaw}, var(${shadowFlyoutKeyRaw}))`; -export const ctrlFabShadowPressedKey = `var(${ctrlFabShadowPressedKeyRaw})`; -export const ctrlFabShadowDisabledKey = `var(${ctrlFabShadowDisabledKeyRaw}, var(${ctrlFabShadowPressedKeyRaw}))`; +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 index fbb666aa03dd8..5a71413b67b73 100644 --- a/packages/semantic-tokens/src/components/fab/variables.ts +++ b/packages/semantic-tokens/src/components/fab/variables.ts @@ -8,8 +8,7 @@ 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 ctrlFabShadowRestKeyRaw = '--smtc-ctrl-fab-shadow-rest-key'; -export const ctrlFabShadowRestAmbientRaw = '--smtc-ctrl-fab-shadow-rest-ambient'; -export const ctrlFabShadowHoverKeyRaw = '--smtc-ctrl-fab-shadow-hover-key'; -export const ctrlFabShadowPressedKeyRaw = '--smtc-ctrl-fab-shadow-pressed-key'; -export const ctrlFabShadowDisabledKeyRaw = '--smtc-ctrl-fab-shadow-disabled-key'; +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/list/tokens.ts b/packages/semantic-tokens/src/components/list/tokens.ts index 0e6f143e558ac..b5d4f87cf4111 100644 --- a/packages/semantic-tokens/src/components/list/tokens.ts +++ b/packages/semantic-tokens/src/components/list/tokens.ts @@ -72,8 +72,7 @@ import { ctrlListLgIndentLevel2Raw, ctrlListLgIndentLevel3Raw, ctrlListSplitDividerShowDividerRaw, - ctrlListShadowSelectedKeyRaw, - ctrlListShadowSelectedAmbientRaw, + ctrlListShadowSelectedRaw, } from './variables'; export const ctrlListPillWidth = `var(${ctrlListPillWidthRaw})`; @@ -127,5 +126,4 @@ export const ctrlListLgIndentLevel1 = `var(${ctrlListLgIndentLevel1Raw}, var(${p export const ctrlListLgIndentLevel2 = `var(${ctrlListLgIndentLevel2Raw})`; export const ctrlListLgIndentLevel3 = `var(${ctrlListLgIndentLevel3Raw})`; export const ctrlListSplitDividerShowDivider = `var(${ctrlListSplitDividerShowDividerRaw})`; -export const ctrlListShadowSelectedKey = `var(${ctrlListShadowSelectedKeyRaw}, unset)`; -export const ctrlListShadowSelectedAmbient = `var(${ctrlListShadowSelectedAmbientRaw})`; +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 index cb0db33952fe6..4af85afa8044c 100644 --- a/packages/semantic-tokens/src/components/list/variables.ts +++ b/packages/semantic-tokens/src/components/list/variables.ts @@ -50,5 +50,4 @@ 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 ctrlListShadowSelectedKeyRaw = '--smtc-ctrl-list-shadow-selected-key-y'; -export const ctrlListShadowSelectedAmbientRaw = '--smtc-ctrl-list-shadow-selected-ambient'; +export const ctrlListShadowSelectedRaw = '--smtc-ctrl-list-shadow-selected'; diff --git a/packages/semantic-tokens/src/components/tooltip/tokens.ts b/packages/semantic-tokens/src/components/tooltip/tokens.ts index f6d30ff6dc571..447e1286986fd 100644 --- a/packages/semantic-tokens/src/components/tooltip/tokens.ts +++ b/packages/semantic-tokens/src/components/tooltip/tokens.ts @@ -1,16 +1,14 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE import { cornerCtrlRestRaw } from '../../control/variables'; -import { ctrlFabShadowRestKeyRaw, ctrlFabShadowRestAmbientRaw } from '../fab/variables'; +import { ctrlFabShadowRestRaw } from '../fab/variables'; import { ctrlTooltipCornerRaw, ctrlTooltipBackgroundRaw, ctrlTooltipForegroundRaw, - ctrlTooltipShadowKeyRaw, - ctrlTooltipShadowAmbientRaw, + ctrlTooltipShadowRaw, } from './variables'; export const ctrlTooltipCorner = `var(${ctrlTooltipCornerRaw}, var(${cornerCtrlRestRaw}))`; export const ctrlTooltipBackground = `var(${ctrlTooltipBackgroundRaw})`; export const ctrlTooltipForeground = `var(${ctrlTooltipForegroundRaw})`; -export const ctrlTooltipShadowKey = `var(${ctrlTooltipShadowKeyRaw}, var(${ctrlFabShadowRestKeyRaw}))`; -export const ctrlTooltipShadowAmbient = `var(${ctrlTooltipShadowAmbientRaw}, var(${ctrlFabShadowRestAmbientRaw}))`; +export const ctrlTooltipShadow = `var(${ctrlTooltipShadowRaw}, var(${ctrlFabShadowRestRaw}))`; diff --git a/packages/semantic-tokens/src/components/tooltip/variables.ts b/packages/semantic-tokens/src/components/tooltip/variables.ts index 73513a3928a8e..c864c1cc4872a 100644 --- a/packages/semantic-tokens/src/components/tooltip/variables.ts +++ b/packages/semantic-tokens/src/components/tooltip/variables.ts @@ -2,5 +2,4 @@ export const ctrlTooltipCornerRaw = '--smtc-ctrl-tooltip-corner'; export const ctrlTooltipBackgroundRaw = '--smtc-ctrl-tooltip-background'; export const ctrlTooltipForegroundRaw = '--smtc-ctrl-tooltip-foreground'; -export const ctrlTooltipShadowKeyRaw = '--smtc-ctrl-tooltip-shadow-key'; -export const ctrlTooltipShadowAmbientRaw = '--smtc-ctrl-tooltip-shadow-ambient'; +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 index d44de70afc248..b0a4d3c34869b 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -255,13 +255,9 @@ import { backgroundCardOnFlyoutDefaultPressedRaw, backgroundCardOnFlyoutDefaultDisabledRaw, textStyleDefaultDisplayWeightRaw, - shadowFlyoutKeyRaw, - shadowFlyoutAmbientRaw, - shadowToolbarKeyRaw, - shadowToolbarAmbientRaw, - shadowWindowActiveKeyRaw, - shadowWindowActiveAmbientRaw, - shadowWindowInactiveAmbientRaw, + shadowFlyoutRaw, + shadowToolbarRaw, + shadowWindowActiveRaw, } from './variables'; export const textGlobalDisplay1FontSize = `var(${textGlobalDisplay1FontSizeRaw})`; @@ -463,10 +459,6 @@ export const backgroundCardOnFlyoutDefaultHover = `var(${backgroundCardOnFlyoutD export const backgroundCardOnFlyoutDefaultPressed = `var(${backgroundCardOnFlyoutDefaultPressedRaw})`; export const backgroundCardOnFlyoutDefaultDisabled = `var(${backgroundCardOnFlyoutDefaultDisabledRaw})`; export const textStyleDefaultDisplayWeight = `var(${textStyleDefaultDisplayWeightRaw})`; -export const shadowFlyoutKey = `var(${shadowFlyoutKeyRaw})`; -export const shadowFlyoutAmbient = `var(${shadowFlyoutAmbientRaw})`; -export const shadowToolbarKey = `var(${shadowToolbarKeyRaw})`; -export const shadowToolbarAmbient = `var(${shadowToolbarAmbientRaw})`; -export const shadowWindowActiveKey = `var(${shadowWindowActiveKeyRaw})`; -export const shadowWindowActiveAmbient = `var(${shadowWindowActiveAmbientRaw})`; -export const shadowWindowInactiveAmbient = `var(${shadowWindowInactiveAmbientRaw})`; +export const shadowFlyout = `var(${shadowFlyoutRaw})`; +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 index a9e792f2803f9..0ea46e921b783 100644 --- a/packages/semantic-tokens/src/control/variables.ts +++ b/packages/semantic-tokens/src/control/variables.ts @@ -198,10 +198,6 @@ export const backgroundCardOnFlyoutDefaultHoverRaw = '--smtc-background-card-on- 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 shadowFlyoutKeyRaw = '--smtc-shadow-flyout-key'; -export const shadowFlyoutAmbientRaw = '--smtc-shadow-flyout-ambient'; -export const shadowToolbarKeyRaw = '--smtc-shadow-toolbar-key'; -export const shadowToolbarAmbientRaw = '--smtc-shadow-toolbar-ambient'; -export const shadowWindowActiveKeyRaw = '--smtc-shadow-window-active-key'; -export const shadowWindowActiveAmbientRaw = '--smtc-shadow-window-active-ambient'; -export const shadowWindowInactiveAmbientRaw = '--smtc-shadow-window-inactive-ambient'; +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/index.ts b/packages/semantic-tokens/src/index.ts index 888da39f3aa0e..dc7d5b4d0322b 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -249,9 +249,8 @@ export { backgroundCardOnSecondaryDefaultSelectedRaw, textStyleDefaultDisplayFontFamilyRaw, textStyleDefaultDisplayLetterSpacingRaw, - shadowCtrlOnDragKeyRaw, - shadowCtrlOnDragAmbientRaw, - shadowWindowInactiveKeyRaw, + shadowCtrlOnDragRaw, + shadowWindowInactiveRaw, } from './optional/variables'; export { textGlobalDisplay1FontSizeRaw, @@ -453,13 +452,9 @@ export { backgroundCardOnFlyoutDefaultPressedRaw, backgroundCardOnFlyoutDefaultDisabledRaw, textStyleDefaultDisplayWeightRaw, - shadowFlyoutKeyRaw, - shadowFlyoutAmbientRaw, - shadowToolbarKeyRaw, - shadowToolbarAmbientRaw, - shadowWindowActiveKeyRaw, - shadowWindowActiveAmbientRaw, - shadowWindowInactiveAmbientRaw, + shadowFlyoutRaw, + shadowToolbarRaw, + shadowWindowActiveRaw, } from './control/variables'; export { textStyleDefaultHeaderCaseRaw, @@ -503,13 +498,11 @@ export { backgroundCtrlSubtleDisabledRaw, backgroundCtrlSubtleHoverSplitRaw, foregroundCtrlHintDefaultRaw, - shadowCardRestKeyRaw, - shadowCardHoverKeyRaw, - shadowCardPressedKeyRaw, - shadowCardDisabledKeyRaw, - shadowCardRestAmbientRaw, - shadowLayerKeyRaw, - shadowLayerAmbientRaw, + shadowCardRestRaw, + shadowCardHoverRaw, + shadowCardPressedRaw, + shadowCardDisabledRaw, + shadowLayerRaw, } from './nullable/variables'; export { ctrlAvatarSizeRaw, @@ -604,8 +597,7 @@ export { ctrlChoiceLgSwitchThumbWidthRestRaw, ctrlChoiceLgSwitchThumbWidthHoverRaw, ctrlChoiceLgSwitchThumbWidthPressedRaw, - ctrlChoiceSwitchThumbShadowKeyRaw, - ctrlChoiceSwitchThumbShadowAmbientRaw, + ctrlChoiceSwitchThumbShadowRaw, } from './components/choice/variables'; export { ctrlDialogBackgroundRaw, @@ -613,8 +605,7 @@ export { ctrlDialogBaseCornerRaw, ctrlDialogLayerBackgroundRaw, ctrlDialogLayerPaddingBottomRaw, - ctrlDialogBaseShadowKeyRaw, - ctrlDialogBaseShadowAmbientRaw, + ctrlDialogBaseShadowRaw, } from './components/dialog/variables'; export { ctrlDividerFixedLineLengthRaw } from './components/divider/variables'; export { @@ -632,11 +623,10 @@ export { ctrlFabCornerRestRaw, ctrlFabCornerHoverRaw, ctrlFabCornerPressedRaw, - ctrlFabShadowRestKeyRaw, - ctrlFabShadowRestAmbientRaw, - ctrlFabShadowHoverKeyRaw, - ctrlFabShadowPressedKeyRaw, - ctrlFabShadowDisabledKeyRaw, + ctrlFabShadowRestRaw, + ctrlFabShadowHoverRaw, + ctrlFabShadowPressedRaw, + ctrlFabShadowDisabledRaw, } from './components/fab/variables'; export { ctrlFocusInnerStrokeWidthRaw, @@ -742,8 +732,7 @@ export { ctrlListLgIndentLevel2Raw, ctrlListLgIndentLevel3Raw, ctrlListSplitDividerShowDividerRaw, - ctrlListShadowSelectedKeyRaw, - ctrlListShadowSelectedAmbientRaw, + ctrlListShadowSelectedRaw, } from './components/list/variables'; export { ctrlLiteFilterBackgroundSelectedRaw, @@ -857,8 +846,7 @@ export { ctrlTooltipCornerRaw, ctrlTooltipBackgroundRaw, ctrlTooltipForegroundRaw, - ctrlTooltipShadowKeyRaw, - ctrlTooltipShadowAmbientRaw, + ctrlTooltipShadowRaw, } from './components/tooltip/variables'; export { ctrlBooleanSelectionHintRaw } from './components/boolean/variables'; export { @@ -894,8 +882,7 @@ export { ctrlComposerContainerBackgroundAcrylicLumBlendRaw, ctrlComposerContainerStrokeDefaultRaw, ctrlComposerInputShadowRaw, - ctrlComposerContainerShadowKeyRaw, - ctrlComposerContainerShadowAmbientRaw, + ctrlComposerContainerShadowRaw, } from './components/composer/variables'; export { ctrlCardStateRestRaw, @@ -1153,9 +1140,8 @@ export { backgroundCardOnSecondaryDefaultSelected, textStyleDefaultDisplayFontFamily, textStyleDefaultDisplayLetterSpacing, - shadowCtrlOnDragKey, - shadowCtrlOnDragAmbient, - shadowWindowInactiveKey, + shadowCtrlOnDrag, + shadowWindowInactive, } from './optional/tokens'; export { textGlobalDisplay1FontSize, @@ -1357,13 +1343,9 @@ export { backgroundCardOnFlyoutDefaultPressed, backgroundCardOnFlyoutDefaultDisabled, textStyleDefaultDisplayWeight, - shadowFlyoutKey, - shadowFlyoutAmbient, - shadowToolbarKey, - shadowToolbarAmbient, - shadowWindowActiveKey, - shadowWindowActiveAmbient, - shadowWindowInactiveAmbient, + shadowFlyout, + shadowToolbar, + shadowWindowActive, } from './control/tokens'; export { textStyleDefaultHeaderCase, @@ -1407,13 +1389,11 @@ export { backgroundCtrlSubtleDisabled, backgroundCtrlSubtleHoverSplit, foregroundCtrlHintDefault, - shadowCardRestKey, - shadowCardHoverKey, - shadowCardPressedKey, - shadowCardDisabledKey, - shadowCardRestAmbient, - shadowLayerKey, - shadowLayerAmbient, + shadowCardRest, + shadowCardHover, + shadowCardPressed, + shadowCardDisabled, + shadowLayer, } from './nullable/tokens'; export { ctrlAvatarSize, @@ -1508,8 +1488,7 @@ export { ctrlChoiceLgSwitchThumbWidthRest, ctrlChoiceLgSwitchThumbWidthHover, ctrlChoiceLgSwitchThumbWidthPressed, - ctrlChoiceSwitchThumbShadowKey, - ctrlChoiceSwitchThumbShadowAmbient, + ctrlChoiceSwitchThumbShadow, } from './components/choice/tokens'; export { ctrlDialogBackground, @@ -1517,8 +1496,7 @@ export { ctrlDialogBaseCorner, ctrlDialogLayerBackground, ctrlDialogLayerPaddingBottom, - ctrlDialogBaseShadowKey, - ctrlDialogBaseShadowAmbient, + ctrlDialogBaseShadow, } from './components/dialog/tokens'; export { ctrlDividerFixedLineLength } from './components/divider/tokens'; export { @@ -1536,11 +1514,10 @@ export { ctrlFabCornerRest, ctrlFabCornerHover, ctrlFabCornerPressed, - ctrlFabShadowRestKey, - ctrlFabShadowRestAmbient, - ctrlFabShadowHoverKey, - ctrlFabShadowPressedKey, - ctrlFabShadowDisabledKey, + ctrlFabShadowRest, + ctrlFabShadowHover, + ctrlFabShadowPressed, + ctrlFabShadowDisabled, } from './components/fab/tokens'; export { ctrlFocusInnerStrokeWidth, @@ -1646,8 +1623,7 @@ export { ctrlListLgIndentLevel2, ctrlListLgIndentLevel3, ctrlListSplitDividerShowDivider, - ctrlListShadowSelectedKey, - ctrlListShadowSelectedAmbient, + ctrlListShadowSelected, } from './components/list/tokens'; export { ctrlLiteFilterBackgroundSelected, @@ -1761,8 +1737,7 @@ export { ctrlTooltipCorner, ctrlTooltipBackground, ctrlTooltipForeground, - ctrlTooltipShadowKey, - ctrlTooltipShadowAmbient, + ctrlTooltipShadow, } from './components/tooltip/tokens'; export { ctrlBooleanSelectionHint } from './components/boolean/tokens'; export { @@ -1798,8 +1773,7 @@ export { ctrlComposerContainerBackgroundAcrylicLumBlend, ctrlComposerContainerStrokeDefault, ctrlComposerInputShadow, - ctrlComposerContainerShadowKey, - ctrlComposerContainerShadowAmbient, + ctrlComposerContainerShadow, } from './components/composer/tokens'; export { ctrlCardStateRest, diff --git a/packages/semantic-tokens/src/nullable/tokens.ts b/packages/semantic-tokens/src/nullable/tokens.ts index d27f16fea3aa6..f6da23c541e66 100644 --- a/packages/semantic-tokens/src/nullable/tokens.ts +++ b/packages/semantic-tokens/src/nullable/tokens.ts @@ -51,13 +51,11 @@ import { backgroundCtrlSubtleDisabledRaw, backgroundCtrlSubtleHoverSplitRaw, foregroundCtrlHintDefaultRaw, - shadowCardRestKeyRaw, - shadowCardHoverKeyRaw, - shadowCardPressedKeyRaw, - shadowCardDisabledKeyRaw, - shadowCardRestAmbientRaw, - shadowLayerKeyRaw, - shadowLayerAmbientRaw, + shadowCardRestRaw, + shadowCardHoverRaw, + shadowCardPressedRaw, + shadowCardDisabledRaw, + shadowLayerRaw, } from './variables'; export const textStyleDefaultHeaderCase = `var(${textStyleDefaultHeaderCaseRaw}, unset)`; @@ -101,10 +99,8 @@ export const backgroundCtrlSubtleRest = `var(${backgroundCtrlSubtleRestRaw}, var export const backgroundCtrlSubtleDisabled = `var(${backgroundCtrlSubtleDisabledRaw}, var(${nullColorRaw}, ${colorTransparentBackground}))`; export const backgroundCtrlSubtleHoverSplit = `var(${backgroundCtrlSubtleHoverSplitRaw}, unset)`; export const foregroundCtrlHintDefault = `var(${foregroundCtrlHintDefaultRaw}, unset)`; -export const shadowCardRestKey = `var(${shadowCardRestKeyRaw}, unset)`; -export const shadowCardHoverKey = `var(${shadowCardHoverKeyRaw}, unset)`; -export const shadowCardPressedKey = `var(${shadowCardPressedKeyRaw}, unset)`; -export const shadowCardDisabledKey = `var(${shadowCardDisabledKeyRaw}, unset)`; -export const shadowCardRestAmbient = `var(${shadowCardRestAmbientRaw}, unset)`; -export const shadowLayerKey = `var(${shadowLayerKeyRaw}, unset)`; -export const shadowLayerAmbient = `var(${shadowLayerAmbientRaw}, 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 index 9b2c3bf872bfa..62c76235c5390 100644 --- a/packages/semantic-tokens/src/nullable/variables.ts +++ b/packages/semantic-tokens/src/nullable/variables.ts @@ -40,10 +40,8 @@ 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 shadowCardRestKeyRaw = '--smtc-shadow-card-rest-key'; -export const shadowCardHoverKeyRaw = '--smtc-shadow-card-hover-key'; -export const shadowCardPressedKeyRaw = '--smtc-shadow-card-pressed-key'; -export const shadowCardDisabledKeyRaw = '--smtc-shadow-card-disabled-key'; -export const shadowCardRestAmbientRaw = '--smtc-shadow-card-rest-ambient'; -export const shadowLayerKeyRaw = '--smtc-shadow-layer-key'; -export const shadowLayerAmbientRaw = '--smtc-shadow-layer-ambient'; +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 index f2dda706a872f..325d4da81fec4 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -77,9 +77,8 @@ import { statusInformativeBackgroundRaw, statusNeutralBackgroundRaw, backgroundCardOnSecondaryDefaultRestRaw, - shadowFlyoutKeyRaw, - shadowFlyoutAmbientRaw, - shadowWindowActiveKeyRaw, + shadowFlyoutRaw, + shadowWindowActiveRaw, } from '../control/variables'; import { fontFamilyBase, @@ -369,9 +368,8 @@ import { backgroundCardOnSecondaryDefaultSelectedRaw, textStyleDefaultDisplayFontFamilyRaw, textStyleDefaultDisplayLetterSpacingRaw, - shadowCtrlOnDragKeyRaw, - shadowCtrlOnDragAmbientRaw, - shadowWindowInactiveKeyRaw, + shadowCtrlOnDragRaw, + shadowWindowInactiveRaw, } from './variables'; export const textStyleDefaultHeaderFontFamily = `var(${textStyleDefaultHeaderFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}, ${fontFamilyBase}))`; @@ -623,6 +621,5 @@ export const materialAcrylicShellDefaultLumBlend = `var(${materialAcrylicShellDe export const backgroundCardOnSecondaryDefaultSelected = `var(${backgroundCardOnSecondaryDefaultSelectedRaw}, var(${backgroundCardOnSecondaryDefaultRestRaw}))`; export const textStyleDefaultDisplayFontFamily = `var(${textStyleDefaultDisplayFontFamilyRaw}, var(${textStyleDefaultRegularFontFamilyRaw}))`; export const textStyleDefaultDisplayLetterSpacing = `var(${textStyleDefaultDisplayLetterSpacingRaw}, var(${textStyleDefaultRegularLetterSpacingRaw}))`; -export const shadowCtrlOnDragKey = `var(${shadowCtrlOnDragKeyRaw}, var(${shadowFlyoutKeyRaw}))`; -export const shadowCtrlOnDragAmbient = `var(${shadowCtrlOnDragAmbientRaw}, var(${shadowFlyoutAmbientRaw}))`; -export const shadowWindowInactiveKey = `var(${shadowWindowInactiveKeyRaw}, var(${shadowWindowActiveKeyRaw}))`; +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 index bdb91699ed7af..e710d29914515 100644 --- a/packages/semantic-tokens/src/optional/variables.ts +++ b/packages/semantic-tokens/src/optional/variables.ts @@ -248,6 +248,5 @@ export const materialAcrylicShellDefaultLumBlendRaw = '--smtc-material-acrylic-s 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 shadowCtrlOnDragKeyRaw = '--smtc-shadow-ctrl-on-drag-key'; -export const shadowCtrlOnDragAmbientRaw = '--smtc-shadow-ctrl-on-drag-ambient'; -export const shadowWindowInactiveKeyRaw = '--smtc-shadow-window-inactive-key'; +export const shadowCtrlOnDragRaw = '--smtc-shadow-ctrl-on-drag'; +export const shadowWindowInactiveRaw = '--smtc-shadow-window-inactive'; diff --git a/packages/semantic-tokens/utils/chopLastCamelCasePart.test.ts b/packages/semantic-tokens/utils/chopLastCamelCasePart.test.ts index 40dd91941ef6a..a06e224128fa0 100644 --- a/packages/semantic-tokens/utils/chopLastCamelCasePart.test.ts +++ b/packages/semantic-tokens/utils/chopLastCamelCasePart.test.ts @@ -10,4 +10,12 @@ describe('chopLastCamelCasePart', () => { 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 index a33897a457c73..4e0ad5a4b0ba7 100644 --- a/packages/semantic-tokens/utils/chopLastCamelCasePart.ts +++ b/packages/semantic-tokens/utils/chopLastCamelCasePart.ts @@ -1,6 +1,6 @@ -export const chopLastCamelCasePart = (str: string) => - str - .replace(/([a-z])([A-Z])/g, '$1 $2') - .split(' ') - .slice(0, -1) - .join(''); +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/dedupeShadowTokens.test.ts b/packages/semantic-tokens/utils/dedupeShadowTokens.test.ts index 5bea49a780f8d..3d5e8dcfdfaa3 100644 --- a/packages/semantic-tokens/utils/dedupeShadowTokens.test.ts +++ b/packages/semantic-tokens/utils/dedupeShadowTokens.test.ts @@ -107,26 +107,138 @@ const shadowTokens = { 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 - expect(Object.keys(dedupedTokens).length).toEqual(2); + // 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.shadowCardRestKey).toBeTruthy(); + expect(dedupedTokens.shadowCardRest).toBeTruthy(); }); it('Updates token name to combined version', () => { // New combined token has correct name - expect(dedupedTokens.shadowCardRestKey.name).toMatch('shadow/card/rest/(key)'); + expect(dedupedTokens.shadowCardRest.name).toMatch('shadow/card/rest'); }); it('Updates token CSS name to combined version', () => { // New combined token has correct name - expect(dedupedTokens.shadowCardRestKey.cssName).toMatch('--smtc-shadow-card-rest-key'); + expect(dedupedTokens.shadowCardRest.cssName).toMatch('--smtc-shadow-card-rest'); }); it('Handles combined fallbacks correctly', () => { // Ensure fallbacks are handled correctly - expect(dedupedTokens.shadowWindowInactiveKey.fst_reference).toMatch('shadow/window/active/(key)'); + 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 index dcaabca6a6a62..c89e1009f1d43 100644 --- a/packages/semantic-tokens/utils/dedupeShadowTokens.ts +++ b/packages/semantic-tokens/utils/dedupeShadowTokens.ts @@ -2,26 +2,53 @@ 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 + /* 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)) { - const tokenData: Token = _tokenJSON[token]; - const combinedShadowName = chopLastCamelCasePart(token); - if (tokenData.name.toLowerCase().includes('shadow/')) { + 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) - tokenData.cssName = removeLastDelimiter(tokenData.cssName, '-'); - tokenData.fst_reference = removeLastDelimiter(tokenData.fst_reference, '/'); - tokenData.name = removeLastDelimiter(tokenData.name, '/'); + // 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]; } From 19b24e4aabcdef40afb0b974f2d6e0812a905143 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Wed, 18 Jun 2025 12:40:13 -0400 Subject: [PATCH 22/66] update fluentOverrides test to dedupe shadow tokens first (#34678) --- packages/semantic-tokens/utils/fluentOverrides.test.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/semantic-tokens/utils/fluentOverrides.test.ts b/packages/semantic-tokens/utils/fluentOverrides.test.ts index cfac05aa99ee5..82384bec7e677 100644 --- a/packages/semantic-tokens/utils/fluentOverrides.test.ts +++ b/packages/semantic-tokens/utils/fluentOverrides.test.ts @@ -1,12 +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(tokens[fluentOverrideKey as keyof typeof tokens]).toBeTruthy(); + expect(tokensJSON[fluentOverrideKey as keyof typeof tokensJSON]).toBeTruthy(); }); }); }); From fbd23bf73cfdd717cdab34b983e6b69820d4634b Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Wed, 25 Jun 2025 10:59:19 -0400 Subject: [PATCH 23/66] update switch to use semantic tokens (#34489) Co-authored-by: Mitch-At-Work --- ...-3eafd24b-30a8-4b38-9ad6-fa04250f9806.json | 7 ++ .../Switch/useSwitchStyles.styles.ts | 103 +++++++++++------- .../etc/semantic-tokens.api.md | 78 +++++++------ .../src/components/choice/tokens.ts | 48 ++++---- .../src/fluentLegacyVariants.ts | 16 +++ .../semantic-tokens/src/fluentOverrides.ts | 33 ++++++ packages/semantic-tokens/src/index.ts | 4 + packages/semantic-tokens/src/legacy/tokens.ts | 102 +++++++++++++---- .../src/legacyVariant/tokens.ts | 41 ++++++- .../semantic-tokens/src/optional/tokens.ts | 42 ++++--- .../semantic-tokens/src/themes/kumoTheme.ts | 88 +++++++-------- 11 files changed, 388 insertions(+), 174 deletions(-) create mode 100644 change/@fluentui-react-switch-3eafd24b-30a8-4b38-9ad6-fa04250f9806.json diff --git a/change/@fluentui-react-switch-3eafd24b-30a8-4b38-9ad6-fa04250f9806.json b/change/@fluentui-react-switch-3eafd24b-30a8-4b38-9ad6-fa04250f9806.json new file mode 100644 index 0000000000000..8a3ce52b1b8b8 --- /dev/null +++ b/change/@fluentui-react-switch-3eafd24b-30a8-4b38-9ad6-fa04250f9806.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Feat: Add semantic tokens to Switch", + "packageName": "@fluentui/react-switch", + "email": "rachelyoo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-switch/library/src/components/Switch/useSwitchStyles.styles.ts b/packages/react-components/react-switch/library/src/components/Switch/useSwitchStyles.styles.ts index a3a8d81c1e871..1625b4ce9e8e2 100644 --- a/packages/react-components/react-switch/library/src/components/Switch/useSwitchStyles.styles.ts +++ b/packages/react-components/react-switch/library/src/components/Switch/useSwitchStyles.styles.ts @@ -3,6 +3,7 @@ import { tokens } from '@fluentui/react-theme'; import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { SwitchSlots, SwitchState } from './Switch.types'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const switchClassNames: SlotClassNames = { root: 'fui-Switch', @@ -16,11 +17,7 @@ export const switchClassNames: SlotClassNames = { */ export const switchClassName = switchClassNames.root; -// Thumb and track sizes used by the component. -const spaceBetweenThumbAndTrack = 2; -const trackHeight = 20; -const trackWidth = 40; -const thumbSize = trackHeight - spaceBetweenThumbAndTrack; +const thumbHeight = `calc(${semanticTokens.ctrlChoiceSwitchHeight} - (${semanticTokens.ctrlChoiceSwitchPaddingRest} * 2))`; const useRootBaseClassName = makeResetStyles({ alignItems: 'flex-start', @@ -38,20 +35,19 @@ const useRootStyles = makeStyles({ }); const useIndicatorBaseClassName = makeResetStyles({ - borderRadius: tokens.borderRadiusCircular, - border: '1px solid', - lineHeight: 0, boxSizing: 'border-box', + borderRadius: semanticTokens.ctrlChoiceSwitchCorner, + borderStyle: 'solid', + lineHeight: 0, fill: 'currentColor', flexShrink: 0, - fontSize: `${thumbSize}px`, - height: `${trackHeight}px`, - margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS, + height: semanticTokens.ctrlChoiceSwitchHeight, + margin: semanticTokens.ctrlChoicePaddingVertical + ' ' + semanticTokens.ctrlChoicePaddingHorizontal, pointerEvents: 'none', transitionDuration: tokens.durationNormal, transitionTimingFunction: tokens.curveEasyEase, transitionProperty: 'background, border, color', - width: `${trackWidth}px`, + width: semanticTokens.ctrlChoiceSwitchWidth, '@media screen and (prefers-reduced-motion: reduce)': { transitionDuration: '0.01ms', @@ -65,6 +61,11 @@ const useIndicatorBaseClassName = makeResetStyles({ }, '> *': { + position: 'relative', + height: thumbHeight, + width: semanticTokens.ctrlChoiceSwitchThumbWidthRest, + fontSize: thumbHeight, + top: `calc(50% - ${thumbHeight} / 2)`, transitionDuration: tokens.durationNormal, transitionTimingFunction: tokens.curveEasyEase, transitionProperty: 'transform', @@ -91,13 +92,17 @@ const useInputBaseClassName = makeResetStyles({ // 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(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`, + width: `calc(${semanticTokens.ctrlChoiceSwitchWidth} + (2 * ${semanticTokens.ctrlChoicePaddingHorizontal}))`, // Checked (both enabled and disabled) ':checked': { [`& ~ .${switchClassNames.indicator}`]: { '> *': { - transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`, + 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})))`, + }, }, }, }, @@ -107,37 +112,43 @@ const useInputBaseClassName = makeResetStyles({ cursor: 'default', [`& ~ .${switchClassNames.indicator}`]: { - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, }, [`& ~ .${switchClassNames.label}`]: { cursor: 'default', - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, }, }, // Enabled and unchecked ':enabled:not(:checked)': { [`& ~ .${switchClassNames.indicator}`]: { - color: tokens.colorNeutralStrokeAccessible, - borderColor: tokens.colorNeutralStrokeAccessible, + backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundRest, + borderColor: semanticTokens.ctrlChoiceBaseStrokeRest, + borderWidth: semanticTokens.strokeWidthCtrlOutlineRest, + color: semanticTokens.backgroundCtrlShapeSafeNeutralRest, }, [`& ~ .${switchClassNames.label}`]: { - color: tokens.colorNeutralForeground1, + color: semanticTokens.foregroundContentNeutralPrimary, }, ':hover': { [`& ~ .${switchClassNames.indicator}`]: { - color: tokens.colorNeutralStrokeAccessibleHover, - borderColor: tokens.colorNeutralStrokeAccessibleHover, + backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundHover, + borderColor: semanticTokens.ctrlChoiceBaseStrokeHover, + borderWidth: semanticTokens.strokeWidthCtrlOutlineHover, + color: semanticTokens.backgroundCtrlShapeSafeNeutralHover, }, }, ':hover:active': { [`& ~ .${switchClassNames.indicator}`]: { - color: tokens.colorNeutralStrokeAccessiblePressed, - borderColor: tokens.colorNeutralStrokeAccessiblePressed, + backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundPressed, + borderColor: semanticTokens.ctrlChoiceBaseStrokePressed, + borderWidth: semanticTokens.strokeWidthCtrlOutlinePressed, + color: semanticTokens.backgroundCtrlShapeSafeNeutralPressed, }, }, }, @@ -145,22 +156,27 @@ const useInputBaseClassName = makeResetStyles({ // Enabled and checked ':enabled:checked': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: tokens.colorCompoundBrandBackground, - color: tokens.colorNeutralForegroundInverted, - borderColor: tokens.colorTransparentStroke, + backgroundColor: semanticTokens.backgroundCtrlActiveBrandRest, + borderColor: semanticTokens.strokeCtrlOnBrandRest, + borderWidth: semanticTokens.strokeWidthCtrlOutlineRest, + color: semanticTokens.foregroundCtrlOnActiveBrandRest, }, ':hover': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: tokens.colorCompoundBrandBackgroundHover, - borderColor: tokens.colorTransparentStrokeInteractive, + backgroundColor: semanticTokens.backgroundCtrlActiveBrandHover, + borderColor: semanticTokens._ctrlSwitchStrokeOnActiveBrandHover, + borderWidth: semanticTokens.strokeWidthCtrlOutlineHover, + color: semanticTokens.foregroundCtrlOnActiveBrandHover, }, }, ':hover:active': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: tokens.colorCompoundBrandBackgroundPressed, - borderColor: tokens.colorTransparentStrokeInteractive, + backgroundColor: semanticTokens.backgroundCtrlActiveBrandPressed, + borderColor: semanticTokens.strokeCtrlOnActiveBrandPressed, + borderWidth: semanticTokens.strokeWidthCtrlOutlinePressed, + color: semanticTokens.foregroundCtrlOnActiveBrandPressed, }, }, }, @@ -168,15 +184,20 @@ const useInputBaseClassName = makeResetStyles({ // Disabled and unchecked ':disabled:not(:checked)': { [`& ~ .${switchClassNames.indicator}`]: { - borderColor: tokens.colorNeutralStrokeDisabled, + backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundDisabled, + borderColor: semanticTokens.ctrlChoiceBaseStrokeDisabled, + borderWidth: semanticTokens.strokeWidthCtrlOutlineRest, + color: semanticTokens.backgroundCtrlShapeSafeNeutralDisabled, }, }, // Disabled and checked ':disabled:checked': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: tokens.colorNeutralBackgroundDisabled, - borderColor: tokens.colorTransparentStrokeDisabled, + backgroundColor: semanticTokens.backgroundCtrlActiveBrandDisabled, + borderColor: semanticTokens.strokeCtrlOnActiveBrandDisabled, + borderWidth: semanticTokens.strokeWidthDefault, + color: semanticTokens.foregroundCtrlOnActiveBrandDisabled, }, }, @@ -229,7 +250,7 @@ const useInputStyles = makeStyles({ }, above: { bottom: 0, - height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`, + height: `calc(${semanticTokens.ctrlChoiceSwitchHeight} + ${semanticTokens.ctrlChoicePaddingVertical})`, width: '100%', }, }); @@ -241,20 +262,20 @@ const useLabelStyles = makeStyles({ // 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((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`, - marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`, - padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`, + marginBottom: `calc((${semanticTokens.ctrlChoiceSwitchHeight} - ${semanticTokens.textGlobalBody3LineHeight}) / 2)`, + marginTop: `calc((${semanticTokens.ctrlChoiceSwitchHeight} - ${semanticTokens.textGlobalBody3LineHeight}) / 2)`, + padding: `${semanticTokens.ctrlChoicePaddingVertical} ${semanticTokens.ctrlChoicePaddingHorizontal}`, }, above: { - paddingTop: tokens.spacingVerticalXS, - paddingBottom: tokens.spacingVerticalXS, + paddingTop: semanticTokens._ctrlSwitchPaddingTextTop, + paddingBottom: semanticTokens._ctrlSwitchPaddingTextBottom, width: '100%', }, after: { - paddingLeft: tokens.spacingHorizontalXS, + paddingLeft: semanticTokens.gapInsideCtrlSmDefault, }, before: { - paddingRight: tokens.spacingHorizontalXS, + paddingRight: semanticTokens.gapInsideCtrlSmDefault, }, }); diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 467515bef804a..f9d17b5ebb3f9 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -185,25 +185,25 @@ export const backgroundCardOnSecondaryDefaultSelected = "var(--smtc-background-c 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))"; +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))"; +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))"; +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))"; +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"; @@ -293,25 +293,25 @@ export const backgroundCtrlShapeSafeActiveBrandRest = "var(--smtc-background-ctr 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))"; +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))"; +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))"; +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))"; +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"; @@ -926,25 +926,25 @@ export const ctrlCardStateRest = "var(--smtc-ctrl-card-state-rest)"; export const ctrlCardStateRestRaw = "--smtc-ctrl-card-state-rest"; // @public (undocumented) -export const ctrlChoiceBaseBackgroundDisabled = "var(--smtc-ctrl-choice-base-background-disabled, var(--smtc-background-ctrl-outline-disabled))"; +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))"; +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))"; +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))"; +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"; @@ -956,25 +956,25 @@ export const ctrlChoiceBaseSize = "var(--smtc-ctrl-choice-base-size, var(--smtc- 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))"; +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))"; +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))"; +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))"; +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"; @@ -1082,13 +1082,13 @@ export const ctrlChoiceLgSwitchWidth = "var(--smtc-ctrl-choice-lg-switch-width)" export const ctrlChoiceLgSwitchWidthRaw = "--smtc-ctrl-choice-lg-switch-width"; // @public (undocumented) -export const ctrlChoicePaddingHorizontal = "var(--smtc-ctrl-choice-padding-horizontal)"; +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)"; +export const ctrlChoicePaddingVertical = "var(--smtc-ctrl-choice-padding-vertical, var(--spacingVerticalS))"; // @public (undocumented) export const ctrlChoicePaddingVerticalRaw = "--smtc-ctrl-choice-padding-vertical"; @@ -1172,31 +1172,31 @@ export const ctrlChoiceSmSwitchWidth = "var(--smtc-ctrl-choice-sm-switch-width)" export const ctrlChoiceSmSwitchWidthRaw = "--smtc-ctrl-choice-sm-switch-width"; // @public (undocumented) -export const ctrlChoiceSwitchCorner = "var(--smtc-ctrl-choice-switch-corner, var(--smtc-corner-circular))"; +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))"; +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))"; +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))"; +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)"; +export const ctrlChoiceSwitchPaddingRest = "var(--smtc-ctrl-choice-switch-padding-rest, 1px)"; // @public (undocumented) export const ctrlChoiceSwitchPaddingRestRaw = "--smtc-ctrl-choice-switch-padding-rest"; @@ -1208,25 +1208,25 @@ export const ctrlChoiceSwitchThumbShadow = "var(--smtc-ctrl-choice-switch-thumb- 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))"; +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))"; +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)"; +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)"; +export const ctrlChoiceSwitchWidth = "var(--smtc-ctrl-choice-switch-width, 40px)"; // @public (undocumented) export const ctrlChoiceSwitchWidthRaw = "--smtc-ctrl-choice-switch-width"; @@ -2740,6 +2740,18 @@ export const ctrlSplitDividerStrokeWidthOnSubtleRaw = "--smtc-ctrl-split-divider // @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 (undocumented) export const ctrlTooltipBackground = "var(--smtc-ctrl-tooltip-background)"; @@ -2957,25 +2969,25 @@ export const foregroundCtrlNeutralSecondaryRest = "var(--smtc-foreground-ctrl-ne 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))"; +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))"; +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))"; +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))"; +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"; @@ -4633,7 +4645,7 @@ export const strokeCtrlDividerOnSubtleDisabledRaw = "--smtc-stroke-ctrl-divider- 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))"; +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"; @@ -4657,7 +4669,7 @@ export const strokeCtrlOnActiveBrandHoverStop2 = "var(--smtc-stroke-ctrl-on-acti 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))"; +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"; diff --git a/packages/semantic-tokens/src/components/choice/tokens.ts b/packages/semantic-tokens/src/components/choice/tokens.ts index 4132de5787a71..3a229eca1fc85 100644 --- a/packages/semantic-tokens/src/components/choice/tokens.ts +++ b/packages/semantic-tokens/src/components/choice/tokens.ts @@ -8,6 +8,16 @@ import { sizeCtrlSmIconRaw, sizeCtrlLgIconRaw, } from '../../control/variables'; +import { + spacingHorizontalS, + spacingVerticalS, + colorTransparentBackground, + colorNeutralStrokeAccessiblePressed, + colorNeutralStrokeAccessible, + colorNeutralStrokeAccessibleHover, + colorNeutralStrokeDisabled, + borderRadiusCircular, +} from '../../legacy/tokens'; import { backgroundCtrlOutlineRestRaw, backgroundCtrlOutlineHoverRaw, @@ -68,33 +78,33 @@ import { ctrlChoiceSwitchThumbShadowRaw, } from './variables'; -export const ctrlChoicePaddingHorizontal = `var(${ctrlChoicePaddingHorizontalRaw})`; -export const ctrlChoicePaddingVertical = `var(${ctrlChoicePaddingVerticalRaw})`; +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}))`; -export const ctrlChoiceBaseBackgroundHover = `var(${ctrlChoiceBaseBackgroundHoverRaw}, var(${backgroundCtrlOutlineHoverRaw}))`; -export const ctrlChoiceBaseBackgroundPressed = `var(${ctrlChoiceBaseBackgroundPressedRaw}, var(${backgroundCtrlOutlinePressedRaw}))`; -export const ctrlChoiceBaseBackgroundDisabled = `var(${ctrlChoiceBaseBackgroundDisabledRaw}, var(${backgroundCtrlOutlineDisabledRaw}))`; -export const ctrlChoiceBaseStrokeRest = `var(${ctrlChoiceBaseStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const ctrlChoiceBaseStrokeHover = `var(${ctrlChoiceBaseStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const ctrlChoiceBaseStrokePressed = `var(${ctrlChoiceBaseStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const ctrlChoiceBaseStrokeDisabled = `var(${ctrlChoiceBaseStrokeDisabledRaw}, var(${foregroundCtrlNeutralSecondaryDisabledRaw}))`; +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})`; export const ctrlChoiceCheckboxIndeterminateCorner = `var(${ctrlChoiceCheckboxIndeterminateCornerRaw}, var(${cornerCircularRaw}))`; export const ctrlChoiceCheckboxIndeterminateWidth = `var(${ctrlChoiceCheckboxIndeterminateWidthRaw})`; export const ctrlChoiceCheckboxIndeterminateHeight = `var(${ctrlChoiceCheckboxIndeterminateHeightRaw})`; export const ctrlChoiceRadioCorner = `var(${ctrlChoiceRadioCornerRaw}, var(${cornerCircularRaw}))`; -export const ctrlChoiceSwitchCorner = `var(${ctrlChoiceSwitchCornerRaw}, var(${cornerCircularRaw}))`; -export const ctrlChoiceSwitchHeight = `var(${ctrlChoiceSwitchHeightRaw}, var(${sizeCtrlIconRaw}))`; -export const ctrlChoiceSwitchWidth = `var(${ctrlChoiceSwitchWidthRaw})`; -export const ctrlChoiceSwitchPaddingRest = `var(${ctrlChoiceSwitchPaddingRestRaw})`; -export const ctrlChoiceSwitchPaddingHover = `var(${ctrlChoiceSwitchPaddingHoverRaw}, var(${ctrlChoiceSwitchPaddingRestRaw}))`; -export const ctrlChoiceSwitchPaddingPressed = `var(${ctrlChoiceSwitchPaddingPressedRaw}, var(${ctrlChoiceSwitchPaddingRestRaw}))`; -export const ctrlChoiceSwitchThumbWidthRest = `var(${ctrlChoiceSwitchThumbWidthRestRaw})`; -export const ctrlChoiceSwitchThumbWidthHover = `var(${ctrlChoiceSwitchThumbWidthHoverRaw}, var(${ctrlChoiceSwitchThumbWidthRestRaw}))`; -export const ctrlChoiceSwitchThumbWidthPressed = `var(${ctrlChoiceSwitchThumbWidthPressedRaw}, var(${ctrlChoiceSwitchThumbWidthRestRaw}))`; +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})`; export const ctrlChoiceRadioDotSizeHover = `var(${ctrlChoiceRadioDotSizeHoverRaw}, var(${ctrlChoiceRadioDotSizeRestRaw}))`; export const ctrlChoiceRadioDotSizePressed = `var(${ctrlChoiceRadioDotSizePressedRaw}, var(${ctrlChoiceRadioDotSizeRestRaw}))`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 9959fcc5bbd0f..af33d26f5d814 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -69,4 +69,20 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorNeutralForeground3', originalToken: 'foregroundCtrlHintDefault', }, + _ctrlSwitchPaddingTextBottom: { + f2Token: 'spacingVerticalXS', + originalToken: 'paddingCtrlTextBottom', + }, + _ctrlSwitchPaddingTextTop: { + f2Token: 'spacingVerticalXS', + originalToken: 'paddingCtrlTextTop', + }, + _ctrlSwitchStrokeOnActiveBrandHover: { + f2Token: 'colorTransparentStrokeInteractive', + originalToken: 'strokeCtrlOnActiveBrandHover', + }, + _ctrlSwitchStrokeOnActiveBrandRest: { + f2Token: 'colorTransparentStroke', + originalToken: 'strokeCtrlOnActiveBrandRest', + }, }; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index d4d6b1ebd170d..65249e6795b3a 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -11,6 +11,10 @@ export type FluentOverrideValue = 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' }, @@ -21,6 +25,10 @@ export const fluentOverrides: FluentOverrides = { backgroundCtrlOutlineHover: { f2Token: 'colorTransparentBackground' }, backgroundCtrlOutlinePressed: { f2Token: 'colorTransparentBackground' }, backgroundCtrlOutlineRest: { f2Token: 'colorTransparentBackground' }, + backgroundCtrlShapeSafeNeutralDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + backgroundCtrlShapeSafeNeutralHover: { f2Token: 'colorNeutralStrokeAccessibleHover' }, + backgroundCtrlShapeSafeNeutralPressed: { f2Token: 'colorNeutralStrokeAccessiblePressed' }, + backgroundCtrlShapeSafeNeutralRest: { f2Token: 'colorNeutralStrokeAccessible' }, backgroundCtrlSubtleDisabled: { f2Token: 'colorTransparentBackground' }, backgroundCtrlSubtleHover: { f2Token: 'colorSubtleBackgroundHover' }, backgroundCtrlSubtlePressed: { f2Token: 'colorSubtleBackgroundPressed' }, @@ -39,7 +47,26 @@ export const fluentOverrides: FluentOverrides = { ctrlAvatarSize: { rawValue: '32px' }, ctrlAvatarTextFontSize: { f2Token: 'fontSizeBase300' }, ctrlAvatarTextLineHeight: { rawValue: '1' }, + 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' }, + ctrlChoicePaddingHorizontal: { f2Token: 'spacingHorizontalS' }, + ctrlChoicePaddingVertical: { f2Token: 'spacingVerticalS' }, + 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' }, ctrlDividerFixedLineLength: { rawValue: '8px' }, ctrlFocusInnerStroke: { f2Token: 'colorStrokeFocus2' }, ctrlFocusInnerStrokeWidth: { f2Token: 'strokeWidthThin' }, @@ -75,6 +102,10 @@ export const fluentOverrides: FluentOverrides = { 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' }, @@ -120,7 +151,9 @@ export const fluentOverrides: FluentOverrides = { 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' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index dc7d5b4d0322b..62fe0e57a7223 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1796,5 +1796,9 @@ export { _ctrlAvatarPresenceBadgeStrokeWidthSm, _ctrlButtonGapInsideDefault, _ctrlDividerForegroundSubtle, + _ctrlSwitchPaddingTextBottom, + _ctrlSwitchPaddingTextTop, + _ctrlSwitchStrokeOnActiveBrandHover, + _ctrlSwitchStrokeOnActiveBrandRest, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index ff98725c50699..efee503cd6c25 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -1,4 +1,24 @@ // 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 @@ -14,11 +34,6 @@ export const colorBrandBackgroundPressed = 'var(--colorBrandBackgroundPressed)'; * @public */ export const colorBrandBackground = 'var(--colorBrandBackground)'; -/** - * 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#colorNeutralBackground1Hover | `colorNeutralBackground1Hover`} design token. * @public @@ -39,6 +54,26 @@ export const colorNeutralBackground1 = 'var(--colorNeutralBackground1)'; * @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 @@ -89,6 +124,21 @@ export const colorNeutralForeground3 = 'var(--colorNeutralForeground3)'; * @public */ export const fontSizeBase300 = 'var(--fontSizeBase300)'; +/** + * 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#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#colorStrokeFocus2 | `colorStrokeFocus2`} design token. * @public @@ -134,11 +184,6 @@ export const colorNeutralForeground2Pressed = 'var(--colorNeutralForeground2Pres * @public */ export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)'; -/** - * 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#colorBrandForeground1 | `colorBrandForeground1`} design token. * @public @@ -149,11 +194,6 @@ export const colorBrandForeground1 = 'var(--colorBrandForeground1)'; * @public */ export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)'; -/** - * 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#colorNeutralForeground2BrandHover | `colorNeutralForeground2BrandHover`} design token. * @public @@ -175,15 +215,25 @@ export const colorNeutralForeground1Hover = 'var(--colorNeutralForeground1Hover) */ export const colorNeutralForeground1Pressed = 'var(--colorNeutralForeground1Pressed)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundOnBrand | `colorNeutralForegroundOnBrand`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedHover | `colorNeutralForegroundInvertedHover`} design token. * @public */ -export const colorNeutralForegroundOnBrand = 'var(--colorNeutralForegroundOnBrand)'; +export const colorNeutralForegroundInvertedHover = 'var(--colorNeutralForegroundInvertedHover)'; /** - * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalS | `spacingHorizontalS`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedPressed | `colorNeutralForegroundInvertedPressed`} design token. * @public */ -export const spacingHorizontalS = 'var(--spacingHorizontalS)'; +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#spacingHorizontalSNudge | `spacingHorizontalSNudge`} design token. * @public @@ -235,10 +285,15 @@ export const colorNeutralStrokeOnBrand = 'var(--colorNeutralStrokeOnBrand)'; */ export const colorNeutralStroke1 = 'var(--colorNeutralStroke1)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeDisabled | `colorNeutralStrokeDisabled`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorTransparentStrokeDisabled | `colorTransparentStrokeDisabled`} design token. * @public */ -export const colorNeutralStrokeDisabled = 'var(--colorNeutralStrokeDisabled)'; +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#colorNeutralStroke1Hover | `colorNeutralStroke1Hover`} design token. * @public @@ -399,3 +454,8 @@ export const borderRadiusSmall = 'var(--borderRadiusSmall)'; * @public */ export const borderRadiusXLarge = 'var(--borderRadiusXLarge)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXS | `spacingVerticalXS`} design token. + * @public + */ +export const spacingVerticalXS = 'var(--spacingVerticalXS)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 51ee5a4fc4265..64eafbf3cc7af 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -10,6 +10,7 @@ import { strokeWidthDefaultRaw, gapInsideCtrlDefaultRaw, nullColorRaw, + paddingCtrlTextTopRaw, } from '../control/variables'; import { colorNeutralForeground2, @@ -23,12 +24,22 @@ import { strokeWidthThin, spacingHorizontalSNudge, colorNeutralForeground3, + spacingVerticalXS, + colorTransparentStrokeInteractive, + colorTransparentStroke, } from '../legacy/tokens'; -import { foregroundCtrlHintDefaultRaw } from '../nullable/variables'; +import { + foregroundCtrlHintDefaultRaw, + strokeCtrlOnBrandHoverRaw, + strokeCtrlOnBrandRestRaw, +} from '../nullable/variables'; import { foregroundCtrlOnTransparentHoverRaw, foregroundCtrlOnTransparentPressedRaw, foregroundCtrlOnTransparentRestRaw, + paddingCtrlTextBottomRaw, + strokeCtrlOnActiveBrandHoverRaw, + strokeCtrlOnActiveBrandRestRaw, } from '../optional/variables'; /** @@ -129,3 +140,31 @@ export const _ctrlButtonGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${sp * please use foregroundCtrlHintDefault instead. */ export const _ctrlDividerForegroundSubtle = `var(${foregroundCtrlHintDefaultRaw}, var(${nullColorRaw}, ${colorNeutralForeground3}))`; +/** + * 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}))`; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index 325d4da81fec4..69642818987d0 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -93,9 +93,19 @@ import { strokeWidthThicker, colorNeutralForegroundOnBrand, colorStrokeFocus2, + colorTransparentStrokeInteractive, + colorTransparentStrokeDisabled, colorNeutralStroke3, colorNeutralStroke1, colorBrandStroke1, + colorCompoundBrandBackground, + colorCompoundBrandBackgroundHover, + colorCompoundBrandBackgroundPressed, + colorNeutralBackgroundDisabled, + colorNeutralStrokeAccessible, + colorNeutralStrokeAccessibleHover, + colorNeutralStrokeAccessiblePressed, + colorNeutralForegroundDisabled, colorNeutralForeground1, colorNeutralForeground2, colorBrandForeground1, @@ -103,9 +113,11 @@ import { colorNeutralForeground1Pressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, - colorNeutralForegroundDisabled, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, + colorNeutralForegroundInverted, + colorNeutralForegroundInvertedHover, + colorNeutralForegroundInvertedPressed, } from '../legacy/tokens'; import { strokeCardOnPrimaryRestRaw, @@ -497,8 +509,8 @@ export const strokeCtrlDividerOnActiveBrandDisabled = `var(${strokeCtrlDividerOn 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}))`; -export const strokeCtrlOnActiveBrandDisabled = `var(${strokeCtrlOnActiveBrandDisabledRaw}, var(${strokeCtrlOnBrandDisabledRaw}))`; +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}))`; @@ -513,16 +525,16 @@ export const backgroundLayerPrimaryStop3 = `var(${backgroundLayerPrimaryStop3Raw 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}))`; -export const backgroundCtrlActiveBrandHover = `var(${backgroundCtrlActiveBrandHoverRaw}, var(${backgroundCtrlBrandHoverRaw}))`; -export const backgroundCtrlActiveBrandPressed = `var(${backgroundCtrlActiveBrandPressedRaw}, var(${backgroundCtrlBrandPressedRaw}))`; -export const backgroundCtrlActiveBrandDisabled = `var(${backgroundCtrlActiveBrandDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; +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}))`; -export const backgroundCtrlShapeSafeNeutralHover = `var(${backgroundCtrlShapeSafeNeutralHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const backgroundCtrlShapeSafeNeutralPressed = `var(${backgroundCtrlShapeSafeNeutralPressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const backgroundCtrlShapeSafeNeutralDisabled = `var(${backgroundCtrlShapeSafeNeutralDisabledRaw}, var(${foregroundCtrlNeutralSecondaryDisabledRaw}))`; +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}))`; @@ -561,10 +573,10 @@ export const foregroundCtrlActiveBrandRest = `var(${foregroundCtrlActiveBrandRes export const foregroundCtrlActiveBrandHover = `var(${foregroundCtrlActiveBrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw}))`; export const foregroundCtrlActiveBrandPressed = `var(${foregroundCtrlActiveBrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw}))`; export const foregroundCtrlActiveBrandDisabled = `var(${foregroundCtrlActiveBrandDisabledRaw}, var(${foregroundCtrlBrandDisabledRaw}))`; -export const foregroundCtrlOnActiveBrandRest = `var(${foregroundCtrlOnActiveBrandRestRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const foregroundCtrlOnActiveBrandHover = `var(${foregroundCtrlOnActiveBrandHoverRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const foregroundCtrlOnActiveBrandPressed = `var(${foregroundCtrlOnActiveBrandPressedRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const foregroundCtrlOnActiveBrandDisabled = `var(${foregroundCtrlOnActiveBrandDisabledRaw}, var(${foregroundCtrlOnBrandDisabledRaw}))`; +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}))`; diff --git a/packages/semantic-tokens/src/themes/kumoTheme.ts b/packages/semantic-tokens/src/themes/kumoTheme.ts index 71de164381712..df3431b5ce8d1 100644 --- a/packages/semantic-tokens/src/themes/kumoTheme.ts +++ b/packages/semantic-tokens/src/themes/kumoTheme.ts @@ -79,7 +79,7 @@ export const kumoSemanticTokens = { 'smtc-corner-layer-default': '24px', 'smtc-corner-toolbar-default': '12px', 'smtc-corner-window-default': '8px', - 'smtc-corner-zero': '0', + 'smtc-corner-zero': '0px', 'smtc-ctrl-avatar-active-ring-size': '36px', 'smtc-ctrl-avatar-active-ring-stroke': '#000000ff', 'smtc-ctrl-avatar-active-ring-stroke-width': '2px', @@ -103,7 +103,7 @@ export const kumoSemanticTokens = { 'smtc-ctrl-badge-lg-icon-size-figmaonly': '20', 'smtc-ctrl-badge-lg-padding': '4px', 'smtc-ctrl-badge-lg-size': '28px', - 'smtc-ctrl-badge-lg-text-padding-top': '0', + 'smtc-ctrl-badge-lg-text-padding-top': '0px', 'smtc-ctrl-badge-padding': '4px', 'smtc-ctrl-badge-size': '24px', 'smtc-ctrl-badge-sm-corner': '6px', @@ -111,8 +111,8 @@ export const kumoSemanticTokens = { 'smtc-ctrl-badge-sm-icon-size-figmaonly': '12', 'smtc-ctrl-badge-sm-padding': '4px', 'smtc-ctrl-badge-sm-size': '20px', - 'smtc-ctrl-badge-sm-text-padding-top': '0', - 'smtc-ctrl-badge-text-padding-top': '0', + 'smtc-ctrl-badge-sm-text-padding-top': '0px', + 'smtc-ctrl-badge-text-padding-top': '0px', 'smtc-ctrl-boolean-selection-hint': 'true', 'smtc-ctrl-card-state-disabled': 'Disabled', 'smtc-ctrl-card-state-hover': 'Hover', @@ -131,7 +131,7 @@ export const kumoSemanticTokens = { 'smtc-ctrl-choice-icon-theme': 'Filled', 'smtc-ctrl-choice-lg-base-size': '28px', 'smtc-ctrl-choice-lg-checkbox-corner': '4px', - 'smtc-ctrl-choice-lg-checkbox-icon-size': '0', + 'smtc-ctrl-choice-lg-checkbox-icon-size': '0px', 'smtc-ctrl-choice-lg-checkbox-icon-size-figmaonly': '16', 'smtc-ctrl-choice-lg-radio-dot-size-hover': '16px', 'smtc-ctrl-choice-lg-radio-dot-size-pressed': '12px', @@ -141,11 +141,11 @@ export const kumoSemanticTokens = { 'smtc-ctrl-choice-lg-switch-thumb-width-pressed': '24px', 'smtc-ctrl-choice-lg-switch-thumb-width-rest': '18px', 'smtc-ctrl-choice-lg-switch-width': '52px', - 'smtc-ctrl-choice-padding-horizontal': '0', + 'smtc-ctrl-choice-padding-horizontal': '0px', 'smtc-ctrl-choice-padding-vertical': '4px', 'smtc-ctrl-choice-radio-dot-size-rest': '10px', 'smtc-ctrl-choice-sm-checkbox-corner': '8px', - 'smtc-ctrl-choice-sm-checkbox-icon-size': '0', + 'smtc-ctrl-choice-sm-checkbox-icon-size': '0px', 'smtc-ctrl-choice-sm-checkbox-icon-size-figmaonly': '12', 'smtc-ctrl-choice-sm-radio-dot-size': '8px', 'smtc-ctrl-choice-sm-switch-height': '20px', @@ -168,28 +168,28 @@ export const kumoSemanticTokens = { 'smtc-ctrl-composer-input-background-pressed': '#ffffff00', 'smtc-ctrl-composer-input-background-rest': '#ffffff00', 'smtc-ctrl-composer-input-background-selected-rest': '#ffffff00', - 'smtc-ctrl-composer-input-bottom-stroke-width-hover': '0', - 'smtc-ctrl-composer-input-bottom-stroke-width-pressed': '0', - 'smtc-ctrl-composer-input-bottom-stroke-width-rest': '0', - 'smtc-ctrl-composer-input-bottom-stroke-width-selected-rest': '0', + 'smtc-ctrl-composer-input-bottom-stroke-width-hover': '0px', + 'smtc-ctrl-composer-input-bottom-stroke-width-pressed': '0px', + 'smtc-ctrl-composer-input-bottom-stroke-width-rest': '0px', + 'smtc-ctrl-composer-input-bottom-stroke-width-selected-rest': '0px', 'smtc-ctrl-composer-input-corner-hover': '26px', 'smtc-ctrl-composer-input-corner-pressed': '28px', 'smtc-ctrl-composer-input-corner-rest': '24px', 'smtc-ctrl-composer-input-shadow': '0 1px 2px #001e441a', - 'smtc-ctrl-composer-input-shadow-x-offset': '0', + 'smtc-ctrl-composer-input-shadow-x-offset': '0px', 'smtc-ctrl-composer-input-stroke-disabled': '#ffffff00', 'smtc-ctrl-composer-input-stroke-hover': '#ffffff00', 'smtc-ctrl-composer-input-stroke-pressed': '#ffffff00', 'smtc-ctrl-composer-input-stroke-selected-rest': '#ffffff00', - 'smtc-ctrl-composer-input-stroke-width-hover': '0', - 'smtc-ctrl-composer-input-stroke-width-pressed': '0', - 'smtc-ctrl-composer-input-stroke-width-rest': '0', - 'smtc-ctrl-composer-input-stroke-width-selected-rest': '0', + 'smtc-ctrl-composer-input-stroke-width-hover': '0px', + 'smtc-ctrl-composer-input-stroke-width-pressed': '0px', + 'smtc-ctrl-composer-input-stroke-width-rest': '0px', + 'smtc-ctrl-composer-input-stroke-width-selected-rest': '0px', 'smtc-ctrl-dialog-background': '#ffffffff', 'smtc-ctrl-dialog-base-corner': '20px', 'smtc-ctrl-dialog-base-shadow-ambient': '0 0 8px #212d3d0f', 'smtc-ctrl-dialog-base-shadow-key': '0 16px 24px #212d3d1f', - 'smtc-ctrl-dialog-layer-padding-bottom': '0', + 'smtc-ctrl-dialog-layer-padding-bottom': '0px', 'smtc-ctrl-divider-fixed-line-length': '8px', 'smtc-ctrl-drag-background-color-blend': '#ffffffff', 'smtc-ctrl-drag-background-lum-blend': '#ffffffff', @@ -233,7 +233,7 @@ export const kumoSemanticTokens = { 'smtc-ctrl-list-background-selected-hover': '#e7ebf1ff', 'smtc-ctrl-list-background-selected-pressed': '#d6dae0ff', 'smtc-ctrl-list-background-selected-rest': '#eff4faff', - 'smtc-ctrl-list-choice-checkbox-corner': '0', + 'smtc-ctrl-list-choice-checkbox-corner': '0px', 'smtc-ctrl-list-choice-checkbox-icon-size': '16px', 'smtc-ctrl-list-choice-checkbox-icon-size-figmaonly': '16', 'smtc-ctrl-list-choice-dot-size': '4px', @@ -241,7 +241,7 @@ export const kumoSemanticTokens = { 'smtc-ctrl-list-choice-foreground-hover': '#c8ccd3ff', 'smtc-ctrl-list-indent-level2': '32px', 'smtc-ctrl-list-indent-level3': '56px', - 'smtc-ctrl-list-lg-indent-level1': '0', + 'smtc-ctrl-list-lg-indent-level1': '0px', 'smtc-ctrl-list-lg-indent-level2': '42px', 'smtc-ctrl-list-lg-indent-level3': '74px', 'smtc-ctrl-list-pill-full-width': 'false', @@ -270,21 +270,21 @@ export const kumoSemanticTokens = { 'smtc-ctrl-segmented-background-hover': '#ffffff00', 'smtc-ctrl-segmented-background-pressed': '#ffffff00', 'smtc-ctrl-segmented-background-rest': '#ffffff00', - 'smtc-ctrl-segmented-lg-corner-hover': '0', - 'smtc-ctrl-segmented-lg-corner-pressed': '0', - 'smtc-ctrl-segmented-lg-corner-rest': '0', - 'smtc-ctrl-segmented-lg-item-corner-hover': '0', - 'smtc-ctrl-segmented-lg-item-corner-pressed': '0', - 'smtc-ctrl-segmented-lg-item-corner-rest': '0', - 'smtc-ctrl-segmented-lg-padding-rest': '0', + 'smtc-ctrl-segmented-lg-corner-hover': '0px', + 'smtc-ctrl-segmented-lg-corner-pressed': '0px', + 'smtc-ctrl-segmented-lg-corner-rest': '0px', + 'smtc-ctrl-segmented-lg-item-corner-hover': '0px', + 'smtc-ctrl-segmented-lg-item-corner-pressed': '0px', + 'smtc-ctrl-segmented-lg-item-corner-rest': '0px', + 'smtc-ctrl-segmented-lg-padding-rest': '0px', 'smtc-ctrl-segmented-padding-hover': '5px', 'smtc-ctrl-segmented-padding-pressed': '7px', 'smtc-ctrl-segmented-padding-rest': '4px', - 'smtc-ctrl-segmented-sm-corner-hover': '0', - 'smtc-ctrl-segmented-sm-corner-pressed': '0', - 'smtc-ctrl-segmented-sm-corner-rest': '0', - 'smtc-ctrl-segmented-sm-item-corner-rest': '0', - 'smtc-ctrl-segmented-sm-padding-rest': '0', + 'smtc-ctrl-segmented-sm-corner-hover': '0px', + 'smtc-ctrl-segmented-sm-corner-pressed': '0px', + 'smtc-ctrl-segmented-sm-corner-rest': '0px', + 'smtc-ctrl-segmented-sm-item-corner-rest': '0px', + 'smtc-ctrl-segmented-sm-padding-rest': '0px', 'smtc-ctrl-segmented-stroke-disabled': '#ffffffff', 'smtc-ctrl-segmented-stroke-hover': '#ffffffff', 'smtc-ctrl-segmented-stroke-pressed': '#ffffffff', @@ -296,13 +296,13 @@ export const kumoSemanticTokens = { 'smtc-ctrl-slider-bar-foreground-filled-disabled': '#a4a9b0ff', 'smtc-ctrl-slider-bar-foreground-filled-hover': '#24282fff', 'smtc-ctrl-slider-bar-foreground-filled-pressed': '#24282fff', - 'smtc-ctrl-slider-lg-bar-height': '0', - 'smtc-ctrl-slider-lg-thumb-size-hover': '0', - 'smtc-ctrl-slider-lg-thumb-size-pressed': '0', + 'smtc-ctrl-slider-lg-bar-height': '0px', + 'smtc-ctrl-slider-lg-thumb-size-hover': '0px', + 'smtc-ctrl-slider-lg-thumb-size-pressed': '0px', 'smtc-ctrl-slider-lg-thumb-size-rest': '20px', - 'smtc-ctrl-slider-sm-bar-height': '0', - 'smtc-ctrl-slider-sm-thumb-size-hover': '0', - 'smtc-ctrl-slider-sm-thumb-size-pressed': '0', + 'smtc-ctrl-slider-sm-bar-height': '0px', + 'smtc-ctrl-slider-sm-thumb-size-hover': '0px', + 'smtc-ctrl-slider-sm-thumb-size-pressed': '0px', 'smtc-ctrl-slider-sm-thumb-size-rest': '20px', 'smtc-ctrl-slider-thumb-background-hover': '#2b2e35ff', 'smtc-ctrl-slider-thumb-background-pressed': '#383b43ff', @@ -338,7 +338,7 @@ export const kumoSemanticTokens = { 'smtc-gap-between-card': '24px', 'smtc-gap-between-content-large': '20px', 'smtc-gap-between-content-medium': '16px', - 'smtc-gap-between-content-none': '0', + 'smtc-gap-between-content-none': '0px', 'smtc-gap-between-content-small': '8px', 'smtc-gap-between-content-x-large': '24px', 'smtc-gap-between-content-x-small': '4px', @@ -357,7 +357,7 @@ export const kumoSemanticTokens = { 'smtc-gap-inside-ctrl-lg-to-secondary-icon': '2px', 'smtc-gap-inside-ctrl-sm-default': '4px', 'smtc-gap-inside-ctrl-sm-to-label': '8px', - 'smtc-gap-inside-ctrl-sm-to-secondary-icon': '0', + 'smtc-gap-inside-ctrl-sm-to-secondary-icon': '0px', 'smtc-gap-inside-ctrl-to-label': '8px', 'smtc-gap-inside-ctrl-to-secondary-icon': '4px', 'smtc-icon-theme-ctrl-default-hover': 'Filled', @@ -371,14 +371,14 @@ export const kumoSemanticTokens = { 'smtc-material-acrylic-default-lum-blend': '#ffffff00', 'smtc-material-mica-blur': '240px', 'smtc-null-color': '#ffffff00', - 'smtc-null-number': '0', + 'smtc-null-number': '0px', 'smtc-null-string': 'String value', 'smtc-padding-content-align-default': '20px', 'smtc-padding-content-align-outdent-icon-on-subtle': '12px', 'smtc-padding-content-align-outdent-text-on-subtle': '10px', 'smtc-padding-content-large': '24px', 'smtc-padding-content-medium': '20px', - 'smtc-padding-content-none': '0', + 'smtc-padding-content-none': '0px', 'smtc-padding-content-small': '12px', 'smtc-padding-content-x-large': '40px', 'smtc-padding-content-x-small': '8px', @@ -394,7 +394,7 @@ export const kumoSemanticTokens = { 'smtc-padding-ctrl-sm-horizontal-default': '8px', 'smtc-padding-ctrl-sm-horizontal-icon-only': '6px', 'smtc-padding-ctrl-sm-text-top': '4px', - 'smtc-padding-ctrl-sm-to-nested-control': '0', + 'smtc-padding-ctrl-sm-to-nested-control': '0px', 'smtc-padding-ctrl-text-side': '2px', 'smtc-padding-ctrl-text-top': '6px', 'smtc-padding-ctrl-to-nested-control': '4px', @@ -493,7 +493,7 @@ export const kumoSemanticTokens = { 'smtc-stroke-width-ctrl-outline-pressed': '2px', 'smtc-stroke-width-ctrl-outline-selected': '2px', 'smtc-stroke-width-default': '1px', - 'smtc-stroke-width-window-default': '0', + 'smtc-stroke-width-window-default': '0px', 'smtc-stroke-window-active': '#ffffff00', 'smtc-text-ctrl-weight-selected': '550', 'smtc-text-global-body1-font-size': '18px', @@ -541,7 +541,7 @@ export const kumoSemanticTokens = { 'smtc-text-style-default-header-weight': '550', 'smtc-text-style-default-regular-font-family': '"Segoe Sans", "Segoe UI", "Segoe UI Web (West European)",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif', - 'smtc-text-style-default-regular-letter-spacing': '0', + 'smtc-text-style-default-regular-letter-spacing': '0px', 'smtc-text-style-default-regular-weight': '400', 'smtc-text-style-quote-regular-letter-spacing': '400px', }; From 0c94c4393068317188b2e3b7f93cd6baf99349f4 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Wed, 25 Jun 2025 11:30:20 -0400 Subject: [PATCH 24/66] update rating to use semantic tokens (#34672) --- ...-926a3c55-ac71-473a-9972-c164503663e7.json | 7 ++++++ .../useRatingDisplayStyles.styles.ts | 25 +++++++++++-------- .../RatingItem/useRatingItemStyles.styles.ts | 7 +++--- .../etc/semantic-tokens.api.md | 10 ++++---- .../src/components/rating/tokens.ts | 5 ++-- .../semantic-tokens/src/control/tokens.ts | 6 ++--- .../semantic-tokens/src/fluentOverrides.ts | 5 ++++ packages/semantic-tokens/src/legacy/tokens.ts | 8 +++--- 8 files changed, 45 insertions(+), 28 deletions(-) create mode 100644 change/@fluentui-react-rating-926a3c55-ac71-473a-9972-c164503663e7.json diff --git a/change/@fluentui-react-rating-926a3c55-ac71-473a-9972-c164503663e7.json b/change/@fluentui-react-rating-926a3c55-ac71-473a-9972-c164503663e7.json new file mode 100644 index 0000000000000..6c54acfe7e560 --- /dev/null +++ b/change/@fluentui-react-rating-926a3c55-ac71-473a-9972-c164503663e7.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Feat: Add semantic tokens to Rating", + "packageName": "@fluentui/react-rating", + "email": "rachelyoo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayStyles.styles.ts b/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayStyles.styles.ts index 3e171c1f6427e..4871260a9451a 100644 --- a/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayStyles.styles.ts +++ b/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayStyles.styles.ts @@ -1,7 +1,7 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { RatingDisplaySlots, RatingDisplayState } from './RatingDisplay.types'; -import { tokens, typographyStyles } from '@fluentui/react-theme'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const ratingDisplayClassNames: SlotClassNames = { root: 'fui-RatingDisplay', @@ -20,24 +20,27 @@ const useRootClassName = makeResetStyles({ }); const useLabelClassName = makeResetStyles({ - color: tokens.colorNeutralForeground1, - marginLeft: tokens.spacingHorizontalXS, - ...typographyStyles.caption1, + color: semanticTokens.foregroundCtrlNeutralPrimaryRest, + marginLeft: semanticTokens.gapInsideCtrlSmToLabel, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampSmItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, }); const useLabelStyles = makeStyles({ large: { - fontSize: tokens.fontSizeBase300, - lineHeight: tokens.lineHeightBase300, - marginLeft: tokens.spacingHorizontalSNudge, + fontSize: semanticTokens.textRampItemBodyFontSize, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + marginLeft: semanticTokens.gapInsideCtrlToLabel, }, extraLarge: { - fontSize: tokens.fontSizeBase400, - lineHeight: tokens.lineHeightBase400, - marginLeft: tokens.spacingHorizontalS, + fontSize: semanticTokens.textRampLgItemBodyFontSize, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + marginLeft: semanticTokens.gapInsideCtrlLgToLabel, }, strong: { - fontWeight: tokens.fontWeightSemibold, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, }, divider: { '::before': { diff --git a/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts b/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts index 71e5b6ddfb132..a0398a843365c 100644 --- a/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts +++ b/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts @@ -3,6 +3,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; import { tokens } from '@fluentui/react-theme'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import type { RatingItemSlots, RatingItemState } from './RatingItem.types'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const ratingItemClassNames: SlotClassNames = { root: 'fui-RatingItem', @@ -70,7 +71,7 @@ const useInputStyles = makeStyles({ const useIndicatorBaseClassName = makeResetStyles({ display: 'flex', overflow: 'hidden', - color: tokens.colorNeutralForeground1, + color: semanticTokens.ctrlRatingIconForegroundFilled, fill: 'currentColor', pointerEvents: 'none', position: 'absolute', @@ -98,8 +99,8 @@ const useIndicatorStyles = makeStyles({ color: tokens.colorPaletteMarigoldBorderActive, }, filled: { - color: tokens.colorNeutralBackground6, - stroke: tokens.colorTransparentStroke, + color: semanticTokens.ctrlRatingIconForegroundEmpty, + stroke: semanticTokens.strokeLayer, '@media (forced-colors: active)': { color: 'Canvas', stroke: 'CanvasText', diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index f9d17b5ebb3f9..c8d9d29af130f 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -2237,13 +2237,13 @@ export const ctrlProgressSmHeightFilled = "var(--smtc-ctrl-progress-sm-height-fi export const ctrlProgressSmHeightFilledRaw = "--smtc-ctrl-progress-sm-height-filled"; // @public (undocumented) -export const ctrlRatingIconForegroundEmpty = "var(--smtc-ctrl-rating-icon-foreground-empty, var(--smtc-ctrl-progress-background-empty))"; +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))"; +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"; @@ -3209,7 +3209,7 @@ export const gapInsideCtrlLgDefault = "var(--smtc-gap-inside-ctrl-lg-default, va export const gapInsideCtrlLgDefaultRaw = "--smtc-gap-inside-ctrl-lg-default"; // @public (undocumented) -export const gapInsideCtrlLgToLabel = "var(--smtc-gap-inside-ctrl-lg-to-label)"; +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"; @@ -3227,7 +3227,7 @@ export const gapInsideCtrlSmDefault = "var(--smtc-gap-inside-ctrl-sm-default, va export const gapInsideCtrlSmDefaultRaw = "--smtc-gap-inside-ctrl-sm-default"; // @public (undocumented) -export const gapInsideCtrlSmToLabel = "var(--smtc-gap-inside-ctrl-sm-to-label)"; +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"; @@ -3239,7 +3239,7 @@ export const gapInsideCtrlSmToSecondaryIcon = "var(--smtc-gap-inside-ctrl-sm-to- export const gapInsideCtrlSmToSecondaryIconRaw = "--smtc-gap-inside-ctrl-sm-to-secondary-icon"; // @public (undocumented) -export const gapInsideCtrlToLabel = "var(--smtc-gap-inside-ctrl-to-label)"; +export const gapInsideCtrlToLabel = "var(--smtc-gap-inside-ctrl-to-label, var(--spacingHorizontalSNudge))"; // @public (undocumented) export const gapInsideCtrlToLabelRaw = "--smtc-gap-inside-ctrl-to-label"; diff --git a/packages/semantic-tokens/src/components/rating/tokens.ts b/packages/semantic-tokens/src/components/rating/tokens.ts index f6facdb9f9824..6cfa25bbea4ef 100644 --- a/packages/semantic-tokens/src/components/rating/tokens.ts +++ b/packages/semantic-tokens/src/components/rating/tokens.ts @@ -1,5 +1,6 @@ // 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, @@ -11,6 +12,6 @@ import { export const ctrlRatingIconTheme = `var(${ctrlRatingIconThemeRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; export const ctrlRatingIconGap = `var(${ctrlRatingIconGapRaw})`; -export const ctrlRatingIconForegroundFilled = `var(${ctrlRatingIconForegroundFilledRaw}, var(${backgroundCtrlBrandRestRaw}))`; -export const ctrlRatingIconForegroundEmpty = `var(${ctrlRatingIconForegroundEmptyRaw}, var(${ctrlProgressBackgroundEmptyRaw}))`; +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/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index b0a4d3c34869b..dcf74ba9c5e13 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -336,9 +336,9 @@ export const gapInsideCtrlSmToSecondaryIcon = `var(${gapInsideCtrlSmToSecondaryI export const gapInsideCtrlLgDefault = `var(${gapInsideCtrlLgDefaultRaw}, ${spacingHorizontalSNudge})`; export const gapInsideCtrlLgToSecondaryIcon = `var(${gapInsideCtrlLgToSecondaryIconRaw})`; export const gapInsideCtrlToSecondaryIcon = `var(${gapInsideCtrlToSecondaryIconRaw})`; -export const gapInsideCtrlToLabel = `var(${gapInsideCtrlToLabelRaw})`; -export const gapInsideCtrlSmToLabel = `var(${gapInsideCtrlSmToLabelRaw})`; -export const gapInsideCtrlLgToLabel = `var(${gapInsideCtrlLgToLabelRaw})`; +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})`; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 65249e6795b3a..148761425e905 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -86,6 +86,8 @@ export const fluentOverrides: FluentOverrides = { 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 foregroundContentBrandPrimary: { f2Token: 'colorBrandForeground1' }, foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' }, foregroundContentNeutralSecondary: { f2Token: 'colorNeutralForeground2' }, @@ -123,7 +125,10 @@ export const fluentOverrides: FluentOverrides = { foregroundCtrlOnTransparentRest: { f2Token: 'colorNeutralForeground2' }, 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 nullColor: { f2Token: 'colorTransparentBackground' }, paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' }, paddingCtrlHorizontalIconOnly: { rawValue: '5px' }, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index efee503cd6c25..be87fc308d262 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -185,15 +185,15 @@ export const colorNeutralForeground2Pressed = 'var(--colorNeutralForeground2Pres */ export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground1 | `colorBrandForeground1`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1`} design token. * @public */ -export const colorBrandForeground1 = 'var(--colorBrandForeground1)'; +export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground1 | `colorBrandForeground1`} design token. * @public */ -export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)'; +export const colorBrandForeground1 = 'var(--colorBrandForeground1)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandHover | `colorNeutralForeground2BrandHover`} design token. * @public From b1d62fdd3b1fce620a8c15f8ce70f585bf9e7a29 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Wed, 25 Jun 2025 10:09:36 -0700 Subject: [PATCH 25/66] Extended Tokens: React-Drawer (#34683) --- ...er-3d02f911-0ba4-47d1-b205-9179f96bfd84.json | 7 +++++++ .../DrawerBody/useDrawerBodyStyles.styles.ts | 8 ++++---- .../useInlineDrawerStyles.styles.ts | 4 ++-- .../useOverlayDrawerSurfaceStyles.styles.ts | 3 ++- .../library/src/shared/drawerMotions.ts | 3 ++- .../library/src/shared/drawerSeparatorStyles.ts | 3 ++- .../src/shared/useDrawerBaseStyles.styles.ts | 17 +++++++++++------ .../semantic-tokens/etc/semantic-tokens.api.md | 10 +++++----- packages/semantic-tokens/src/control/tokens.ts | 12 +++++++----- packages/semantic-tokens/src/fluentOverrides.ts | 5 +++++ packages/semantic-tokens/src/legacy/tokens.ts | 15 +++++++++++++++ packages/semantic-tokens/src/nullable/tokens.ts | 3 ++- 12 files changed, 64 insertions(+), 26 deletions(-) create mode 100644 change/@fluentui-react-drawer-3d02f911-0ba4-47d1-b205-9179f96bfd84.json diff --git a/change/@fluentui-react-drawer-3d02f911-0ba4-47d1-b205-9179f96bfd84.json b/change/@fluentui-react-drawer-3d02f911-0ba4-47d1-b205-9179f96bfd84.json new file mode 100644 index 0000000000000..53fca2a12c4e9 --- /dev/null +++ b/change/@fluentui-react-drawer-3d02f911-0ba4-47d1-b205-9179f96bfd84.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Implement semantic tokens", + "packageName": "@fluentui/react-drawer", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBodyStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBodyStyles.styles.ts index d7c7757005837..3b90221ad04e8 100644 --- a/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBodyStyles.styles.ts +++ b/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBodyStyles.styles.ts @@ -1,6 +1,6 @@ import { makeResetStyles, mergeClasses } from '@griffel/react'; -import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; import type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types'; @@ -12,7 +12,7 @@ export const drawerBodyClassNames: SlotClassNames = { * Styles for the root slot */ const useStyles = makeResetStyles({ - padding: `0 ${tokens.spacingHorizontalXXL}`, + padding: `0 ${semanticTokens.paddingContentLarge}`, flex: 1, alignSelf: 'stretch', position: 'relative', @@ -20,11 +20,11 @@ const useStyles = makeResetStyles({ overflow: 'auto', ':last-child': { - paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`, + paddingBottom: `calc(${semanticTokens.paddingContentLarge} + 1px)`, }, ':first-child': { - paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`, + paddingTop: `calc(${semanticTokens.paddingContentLarge} + 1px)`, }, }); diff --git a/packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawerStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawerStyles.styles.ts index 46ce10d99636c..672e82ca1620f 100644 --- a/packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawerStyles.styles.ts +++ b/packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawerStyles.styles.ts @@ -1,6 +1,6 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { tokens } from '@fluentui/react-theme'; +import * as semanticTokens from '@fluentui/semantic-tokens'; import type { InlineDrawerSlots, InlineDrawerState } from './InlineDrawer.types'; import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles'; @@ -17,7 +17,7 @@ const useDrawerResetStyles = makeResetStyles({ /** * Styles for the root slot */ -const borderValue = `1px solid ${tokens.colorNeutralBackground3}`; +const borderValue = ` ${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeFlyout}`; const useDrawerRootStyles = makeStyles({ /* Separator */ separatorStart: { borderRight: borderValue }, diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts index 1b79b8bf68186..88191dc4fac0a 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts @@ -1,6 +1,7 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import { DialogSurfaceState } from '@fluentui/react-dialog'; +import * as semanticTokens from '@fluentui/semantic-tokens'; /** * Styles for the backdrop slot @@ -13,7 +14,7 @@ const useBackdropResetStyles = makeResetStyles({ const useBackdropStyles = makeStyles({ nested: { - backgroundColor: tokens.colorTransparentBackground, + backgroundColor: semanticTokens.nullColor, }, }); diff --git a/packages/react-components/react-drawer/library/src/shared/drawerMotions.ts b/packages/react-components/react-drawer/library/src/shared/drawerMotions.ts index 22e362432bc55..6938a6ad1972f 100644 --- a/packages/react-components/react-drawer/library/src/shared/drawerMotions.ts +++ b/packages/react-components/react-drawer/library/src/shared/drawerMotions.ts @@ -1,6 +1,7 @@ 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 { DrawerBaseProps } from './DrawerBase.types'; import { drawerCSSVars } from './useDrawerBaseStyles.styles'; @@ -91,7 +92,7 @@ export const OverlayDrawerMotion = createPresenceComponent(( }, { transform: 'translate3d(0, 0, 0)', - boxShadow: tokens.shadow64, + boxShadow: semanticTokens.shadowFlyout, opacity: 1, }, ]; diff --git a/packages/react-components/react-drawer/library/src/shared/drawerSeparatorStyles.ts b/packages/react-components/react-drawer/library/src/shared/drawerSeparatorStyles.ts index cc2928cd0d338..57319686a8a5a 100644 --- a/packages/react-components/react-drawer/library/src/shared/drawerSeparatorStyles.ts +++ b/packages/react-components/react-drawer/library/src/shared/drawerSeparatorStyles.ts @@ -1,5 +1,6 @@ import { tokens } from '@fluentui/react-theme'; import { GriffelStyle } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const drawerSeparatorStyles: GriffelStyle = { height: '1px', @@ -7,7 +8,7 @@ export const drawerSeparatorStyles: GriffelStyle = { right: 0, left: 0, opacity: 0, - backgroundColor: tokens.colorNeutralStroke1, + backgroundColor: semanticTokens.strokeDividerStrong, transitionDuration: tokens.durationNormal, transitionProperty: 'opacity', transitionTimingFunction: tokens.curveEasyEase, diff --git a/packages/react-components/react-drawer/library/src/shared/useDrawerBaseStyles.styles.ts b/packages/react-components/react-drawer/library/src/shared/useDrawerBaseStyles.styles.ts index ec53290af397a..cb11d58a60837 100644 --- a/packages/react-components/react-drawer/library/src/shared/useDrawerBaseStyles.styles.ts +++ b/packages/react-components/react-drawer/library/src/shared/useDrawerBaseStyles.styles.ts @@ -1,7 +1,6 @@ import { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react'; -import { tokens } from '@fluentui/react-theme'; - import { DrawerBaseState } from './DrawerBase.types'; +import * as semanticTokens from '@fluentui/semantic-tokens'; /** * CSS variable names used internally for uniform styling in Drawer. @@ -25,8 +24,8 @@ export const drawerDefaultStyles: GriffelResetStyle = { flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', - backgroundColor: tokens.colorNeutralBackground1, - color: tokens.colorNeutralForeground1, + backgroundColor: semanticTokens.backgroundFlyoutSolid, + color: semanticTokens.foregroundContentNeutralPrimary, }; /** @@ -35,20 +34,26 @@ export const drawerDefaultStyles: GriffelResetStyle = { const useDrawerStyles = makeStyles({ /* Positioning */ start: { - borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`, + borderRight: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.nullColor}`, left: 0, right: 'auto', + borderEndEndRadius: semanticTokens.cornerFlyoutRest, + borderStartEndRadius: semanticTokens.cornerFlyoutRest, }, end: { - borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`, + 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 */ diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index c8d9d29af130f..cd972ec7b8075 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -359,7 +359,7 @@ export const backgroundFlyoutLumBlend = "var(--smtc-background-flyout-lum-blend) export const backgroundFlyoutLumBlendRaw = "--smtc-background-flyout-lum-blend"; // @public (undocumented) -export const backgroundFlyoutSolid = "var(--smtc-background-flyout-solid)"; +export const backgroundFlyoutSolid = "var(--smtc-background-flyout-solid, var(--colorNeutralBackground1))"; // @public (undocumented) export const backgroundFlyoutSolidRaw = "--smtc-background-flyout-solid"; @@ -575,7 +575,7 @@ export const cornerFlyoutPressed = "var(--smtc-corner-flyout-pressed, var(--smtc export const cornerFlyoutPressedRaw = "--smtc-corner-flyout-pressed"; // @public (undocumented) -export const cornerFlyoutRest = "var(--smtc-corner-flyout-rest)"; +export const cornerFlyoutRest = "var(--smtc-corner-flyout-rest, 0px)"; // @public (undocumented) export const cornerFlyoutRestRaw = "--smtc-corner-flyout-rest"; @@ -3997,7 +3997,7 @@ export const paddingContentAlignOutdentTextOnSubtle = "var(--smtc-padding-conten export const paddingContentAlignOutdentTextOnSubtleRaw = "--smtc-padding-content-align-outdent-text-on-subtle"; // @public (undocumented) -export const paddingContentLarge = "var(--smtc-padding-content-large)"; +export const paddingContentLarge = "var(--smtc-padding-content-large, var(--spacingHorizontalXXL))"; // @public (undocumented) export const paddingContentLargeRaw = "--smtc-padding-content-large"; @@ -4195,7 +4195,7 @@ export const shadowCtrlOnDrag = "var(--smtc-shadow-ctrl-on-drag, var(--smtc-shad export const shadowCtrlOnDragRaw = "--smtc-shadow-ctrl-on-drag"; // @public (undocumented) -export const shadowFlyout = "var(--smtc-shadow-flyout)"; +export const shadowFlyout = "var(--smtc-shadow-flyout, var(--shadow64))"; // @public (undocumented) export const shadowFlyoutRaw = "--smtc-shadow-flyout"; @@ -4891,7 +4891,7 @@ export const strokeDividerSubtle = "var(--smtc-stroke-divider-subtle, var(--smtc export const strokeDividerSubtleRaw = "--smtc-stroke-divider-subtle"; // @public (undocumented) -export const strokeFlyout = "var(--smtc-stroke-flyout, unset)"; +export const strokeFlyout = "var(--smtc-stroke-flyout, var(--smtc-null-color, var(--colorNeutralBackground3)))"; // @public (undocumented) export const strokeFlyoutRaw = "--smtc-stroke-flyout"; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index dcf74ba9c5e13..8c81f0e365246 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -23,6 +23,7 @@ import { fontFamilyBase, fontWeightRegular, fontWeightSemibold, + spacingHorizontalXXL, spacingHorizontalM, spacingHorizontalS, spacingHorizontalL, @@ -34,10 +35,10 @@ import { colorNeutralStrokeDisabled, colorNeutralStrokeOnBrand, colorNeutralStroke2, + colorNeutralBackground1, colorBrandBackground, colorBrandBackgroundHover, colorBrandBackgroundPressed, - colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackgroundDisabled, @@ -54,6 +55,7 @@ import { colorPaletteDarkOrangeBackground3, colorPaletteGreenBackground3, colorTransparentBackground, + shadow64, } from '../legacy/tokens'; import { textGlobalDisplay1FontSizeRaw, @@ -302,7 +304,7 @@ export const paddingContentXxSmall = `var(${paddingContentXxSmallRaw})`; export const paddingContentXSmall = `var(${paddingContentXSmallRaw})`; export const paddingContentSmall = `var(${paddingContentSmallRaw})`; export const paddingContentMedium = `var(${paddingContentMediumRaw})`; -export const paddingContentLarge = `var(${paddingContentLargeRaw})`; +export const paddingContentLarge = `var(${paddingContentLargeRaw}, ${spacingHorizontalXXL})`; export const paddingContentXLarge = `var(${paddingContentXLargeRaw})`; export const paddingContentXxLarge = `var(${paddingContentXxLargeRaw})`; export const paddingContentXxxLarge = `var(${paddingContentXxxLargeRaw})`; @@ -371,7 +373,7 @@ export const backgroundCardOnPrimaryAltDisabled = `var(${backgroundCardOnPrimary export const backgroundCardOnPrimaryDefaultHover = `var(${backgroundCardOnPrimaryDefaultHoverRaw})`; export const backgroundCardOnPrimaryDefaultPressed = `var(${backgroundCardOnPrimaryDefaultPressedRaw})`; export const backgroundCardOnPrimaryDefaultDisabled = `var(${backgroundCardOnPrimaryDefaultDisabledRaw})`; -export const backgroundFlyoutSolid = `var(${backgroundFlyoutSolidRaw})`; +export const backgroundFlyoutSolid = `var(${backgroundFlyoutSolidRaw}, ${colorNeutralBackground1})`; export const backgroundCtrlBrandRest = `var(${backgroundCtrlBrandRestRaw}, ${colorBrandBackground})`; export const backgroundCtrlBrandHover = `var(${backgroundCtrlBrandHoverRaw}, ${colorBrandBackgroundHover})`; export const backgroundCtrlBrandPressed = `var(${backgroundCtrlBrandPressedRaw}, ${colorBrandBackgroundPressed})`; @@ -387,7 +389,7 @@ 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})`; +export const cornerFlyoutRest = `var(${cornerFlyoutRestRaw}, 0px)`; export const cornerLayerDefault = `var(${cornerLayerDefaultRaw})`; export const cornerCardRest = `var(${cornerCardRestRaw})`; export const cornerCtrlRest = `var(${cornerCtrlRestRaw}, ${borderRadiusMedium})`; @@ -459,6 +461,6 @@ export const backgroundCardOnFlyoutDefaultHover = `var(${backgroundCardOnFlyoutD export const backgroundCardOnFlyoutDefaultPressed = `var(${backgroundCardOnFlyoutDefaultPressedRaw})`; export const backgroundCardOnFlyoutDefaultDisabled = `var(${backgroundCardOnFlyoutDefaultDisabledRaw})`; export const textStyleDefaultDisplayWeight = `var(${textStyleDefaultDisplayWeightRaw})`; -export const shadowFlyout = `var(${shadowFlyoutRaw})`; +export const shadowFlyout = `var(${shadowFlyoutRaw}, ${shadow64})`; export const shadowToolbar = `var(${shadowToolbarRaw})`; export const shadowWindowActive = `var(${shadowWindowActiveRaw})`; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 148761425e905..ee7fc03bf6392 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -33,10 +33,12 @@ export const fluentOverrides: FluentOverrides = { backgroundCtrlSubtleHover: { f2Token: 'colorSubtleBackgroundHover' }, backgroundCtrlSubtlePressed: { f2Token: 'colorSubtleBackgroundPressed' }, backgroundCtrlSubtleRest: { f2Token: 'colorSubtleBackground' }, + backgroundFlyoutSolid: { f2Token: 'colorNeutralBackground1' }, cornerCircular: { f2Token: 'borderRadiusCircular' }, cornerCtrlLgRest: { f2Token: 'borderRadiusMedium' }, // Button uses borderRadiusMedium in all sizes cornerCtrlRest: { f2Token: 'borderRadiusMedium' }, cornerCtrlSmRest: { f2Token: 'borderRadiusMedium' }, // Button uses borderRadiusMedium in all sizes + cornerFlyoutRest: { rawValue: '0px' }, cornerZero: { f2Token: 'borderRadiusNone' }, ctrlAvatarActiveRingStrokeWidth: { f2Token: 'strokeWidthThick' }, ctrlAvatarBackground: { f2Token: 'colorNeutralBackground6' }, @@ -130,6 +132,7 @@ export const fluentOverrides: FluentOverrides = { 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 nullColor: { f2Token: 'colorTransparentBackground' }, + paddingContentLarge: { f2Token: 'spacingHorizontalXXL' }, paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' }, paddingCtrlHorizontalIconOnly: { rawValue: '5px' }, paddingCtrlLgHorizontalDefault: { f2Token: 'spacingHorizontalL' }, @@ -143,6 +146,7 @@ export const fluentOverrides: FluentOverrides = { paddingCtrlTextBottom: { rawValue: '5px' }, paddingCtrlTextSide: { rawValue: '0px' }, // For now, text padding is not applied (use default); paddingCtrlTextTop: { rawValue: '5px' }, + shadowFlyout: { f2Token: 'shadow64' }, sizeCtrlDefault: { rawValue: '44px' }, sizeCtrlIcon: { rawValue: '20px' }, sizeCtrlLgDefault: { rawValue: '44px' }, @@ -180,6 +184,7 @@ export const fluentOverrides: FluentOverrides = { strokeDividerDefault: { f2Token: 'colorNeutralStroke2' }, strokeDividerStrong: { f2Token: 'colorNeutralStroke1' }, strokeDividerSubtle: { f2Token: 'colorNeutralStroke3' }, + strokeFlyout: { f2Token: 'colorNeutralBackground3' }, strokeLayer: { f2Token: 'colorTransparentStroke' }, strokeWidthCtrlOutlineHover: { f2Token: 'strokeWidthThin' }, strokeWidthCtrlOutlinePressed: { f2Token: 'strokeWidthThin' }, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index be87fc308d262..416d98be2faef 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -244,6 +244,11 @@ export const spacingHorizontalSNudge = 'var(--spacingHorizontalSNudge)'; * @public */ export const spacingHorizontalXS = 'var(--spacingHorizontalXS)'; +/** + * 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#spacingHorizontalM | `spacingHorizontalM`} design token. * @public @@ -254,6 +259,11 @@ export const spacingHorizontalM = 'var(--spacingHorizontalM)'; * @public */ export const spacingHorizontalL = 'var(--spacingHorizontalL)'; +/** + * 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#colorPaletteRedBackground3 | `colorPaletteRedBackground3`} design token. * @public @@ -319,6 +329,11 @@ export const colorNeutralStroke2 = 'var(--colorNeutralStroke2)'; * @public */ export const colorNeutralStroke3 = 'var(--colorNeutralStroke3)'; +/** + * 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#strokeWidthThicker | `strokeWidthThicker`} design token. * @public diff --git a/packages/semantic-tokens/src/nullable/tokens.ts b/packages/semantic-tokens/src/nullable/tokens.ts index f6da23c541e66..21acddcd0d1dc 100644 --- a/packages/semantic-tokens/src/nullable/tokens.ts +++ b/packages/semantic-tokens/src/nullable/tokens.ts @@ -2,6 +2,7 @@ import { nullColorRaw } from '../control/variables'; import { colorTransparentStroke, + colorNeutralBackground3, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, @@ -66,7 +67,7 @@ export const textStyleDataVizHeaderCase = `var(${textStyleDataVizHeaderCaseRaw}, 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}, 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))`; From 7544c1ff25c9181cf023c1076b8e96513279ddf2 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Wed, 25 Jun 2025 10:51:03 -0700 Subject: [PATCH 26/66] Extended Tokens: React-Spinner (#34645) --- ...-f55b0651-0938-48b2-a5ba-4191ee23f204.json | 7 ++ .../Spinner/useSpinnerStyles.styles.ts | 60 +++++++++++------ .../etc/semantic-tokens.api.md | 23 ++++++- .../src/components/spinner/tokens.ts | 3 +- .../src/fluentLegacyVariants.ts | 28 ++++++++ .../semantic-tokens/src/fluentOverrides.ts | 1 + packages/semantic-tokens/src/index.ts | 7 ++ packages/semantic-tokens/src/legacy/tokens.ts | 15 +++-- .../src/legacyVariant/tokens.ts | 66 +++++++++++++++++++ 9 files changed, 183 insertions(+), 27 deletions(-) create mode 100644 change/@fluentui-react-spinner-f55b0651-0938-48b2-a5ba-4191ee23f204.json diff --git a/change/@fluentui-react-spinner-f55b0651-0938-48b2-a5ba-4191ee23f204.json b/change/@fluentui-react-spinner-f55b0651-0938-48b2-a5ba-4191ee23f204.json new file mode 100644 index 0000000000000..8726bdebdc6e2 --- /dev/null +++ b/change/@fluentui-react-spinner-f55b0651-0938-48b2-a5ba-4191ee23f204.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Enable semantic tokens", + "packageName": "@fluentui/react-spinner", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-spinner/library/src/components/Spinner/useSpinnerStyles.styles.ts b/packages/react-components/react-spinner/library/src/components/Spinner/useSpinnerStyles.styles.ts index 61df2ed50a0e1..eb30f91b91519 100644 --- a/packages/react-components/react-spinner/library/src/components/Spinner/useSpinnerStyles.styles.ts +++ b/packages/react-components/react-spinner/library/src/components/Spinner/useSpinnerStyles.styles.ts @@ -1,8 +1,9 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; -import { tokens, typographyStyles } from '@fluentui/react-theme'; +import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { SpinnerSlots, SpinnerState } from './Spinner.types'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const spinnerClassNames: SlotClassNames = { root: 'fui-Spinner', @@ -23,7 +24,7 @@ const useRootBaseClassName = makeResetStyles({ alignItems: 'center', justifyContent: 'center', lineHeight: '0', - gap: '8px', + gap: semanticTokens.gapInsideCtrlToLabel, overflow: 'hidden', // prevents height changes from rotating children }); @@ -44,8 +45,9 @@ const useSpinnerBaseClassName = makeResetStyles({ `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`, - backgroundColor: tokens.colorBrandStroke2Contrast, - color: tokens.colorBrandStroke1, + backgroundColor: semanticTokens._ctrlSpinnerBackgroundEmpty, + + color: semanticTokens._ctrlSpinnerBackgroundFilled, '@media screen and (forced-colors: active)': { backgroundColor: 'HighlightText', color: 'Highlight', @@ -136,87 +138,104 @@ const useSpinnerStyles = makeStyles({ 'extra-tiny': { height: '16px', width: '16px', - [vars.strokeWidth]: tokens.strokeWidthThick, + [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth, }, tiny: { height: '20px', width: '20px', - [vars.strokeWidth]: tokens.strokeWidthThick, + [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth, }, 'extra-small': { height: '24px', width: '24px', - [vars.strokeWidth]: tokens.strokeWidthThick, + [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth, }, small: { height: '28px', width: '28px', - [vars.strokeWidth]: tokens.strokeWidthThick, + [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth, }, medium: { height: '32px', width: '32px', - [vars.strokeWidth]: tokens.strokeWidthThicker, + [vars.strokeWidth]: semanticTokens.ctrlSpinnerStrokeWidth, }, large: { height: '36px', width: '36px', - [vars.strokeWidth]: tokens.strokeWidthThicker, + [vars.strokeWidth]: semanticTokens.ctrlSpinnerStrokeWidth, }, 'extra-large': { height: '40px', width: '40px', - [vars.strokeWidth]: tokens.strokeWidthThicker, + [vars.strokeWidth]: semanticTokens.ctrlSpinnerStrokeWidth, }, huge: { height: '44px', width: '44px', - [vars.strokeWidth]: tokens.strokeWidthThickest, + [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeLgWidth, }, }); const useLabelStyles = makeStyles({ + default: { + color: semanticTokens.foregroundContentNeutralPrimary, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + }, inverted: { color: tokens.colorNeutralForegroundStaticInverted, }, 'extra-tiny': { - ...typographyStyles.body1, + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, }, tiny: { - ...typographyStyles.body1, + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, }, 'extra-small': { - ...typographyStyles.body1, + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, }, small: { - ...typographyStyles.body1, + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, }, medium: { - ...typographyStyles.subtitle2, + fontSize: semanticTokens._ctrlSpinnerItemBodyFontSize, + fontWeight: semanticTokens._ctrlSpinnerTextStyleRegularWeight, + lineHeight: semanticTokens._ctrlSpinnerItemBodyLineHeight, }, large: { - ...typographyStyles.subtitle2, + fontSize: semanticTokens.textRampLgItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, }, 'extra-large': { - ...typographyStyles.subtitle2, + fontSize: semanticTokens.textRampLgItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, }, huge: { - ...typographyStyles.subtitle1, + fontSize: semanticTokens.textGlobalBody1FontSize, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + lineHeight: semanticTokens.textGlobalBody1LineHeight, }, }); @@ -262,6 +281,7 @@ export const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => if (state.label) { state.label.className = mergeClasses( spinnerClassNames.label, + labelStyles.default, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className, diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index cd972ec7b8075..8da4d5bb5f095 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -2710,18 +2710,39 @@ export const ctrlSliderThumbSizeRest = "var(--smtc-ctrl-slider-thumb-size-rest, // @public (undocumented) export const ctrlSliderThumbSizeRestRaw = "--smtc-ctrl-slider-thumb-size-rest"; +// @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))"; +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))"; diff --git a/packages/semantic-tokens/src/components/spinner/tokens.ts b/packages/semantic-tokens/src/components/spinner/tokens.ts index 29219e3f594a0..c1325c776c6c0 100644 --- a/packages/semantic-tokens/src/components/spinner/tokens.ts +++ b/packages/semantic-tokens/src/components/spinner/tokens.ts @@ -1,6 +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}))`; +export const ctrlSpinnerStrokeWidth = `var(${ctrlSpinnerStrokeWidthRaw}, var(${ctrlProgressHeightFilledRaw}, ${strokeWidthThicker}))`; export const ctrlSpinnerShowEmptyTrack = `var(${ctrlSpinnerShowEmptyTrackRaw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index af33d26f5d814..df53b224d62e5 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -69,6 +69,34 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorNeutralForeground3', originalToken: 'foregroundCtrlHintDefault', }, + _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', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index ee7fc03bf6392..05d104db717cd 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -90,6 +90,7 @@ export const fluentOverrides: FluentOverrides = { ctrlProgressLgHeightFilled: { rawValue: '100%' }, ctrlRatingIconForegroundEmpty: { f2Token: 'colorNeutralBackground6' }, // should be #D9DDE3 per design ctrlRatingIconForegroundFilled: { f2Token: 'colorNeutralForeground1' }, // should be #24282F per design + ctrlSpinnerStrokeWidth: { f2Token: 'strokeWidthThicker' }, foregroundContentBrandPrimary: { f2Token: 'colorBrandForeground1' }, foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' }, foregroundContentNeutralSecondary: { f2Token: 'colorNeutralForeground2' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 62fe0e57a7223..809b2d1e22120 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1796,6 +1796,13 @@ export { _ctrlAvatarPresenceBadgeStrokeWidthSm, _ctrlButtonGapInsideDefault, _ctrlDividerForegroundSubtle, + _ctrlSpinnerBackgroundEmpty, + _ctrlSpinnerBackgroundFilled, + _ctrlSpinnerItemBodyFontSize, + _ctrlSpinnerItemBodyLineHeight, + _ctrlSpinnerStrokeLgWidth, + _ctrlSpinnerStrokeSmWidth, + _ctrlSpinnerTextStyleRegularWeight, _ctrlSwitchPaddingTextBottom, _ctrlSwitchPaddingTextTop, _ctrlSwitchStrokeOnActiveBrandHover, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 416d98be2faef..550d527a58114 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -194,6 +194,11 @@ export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)'; * @public */ export const colorBrandForeground1 = 'var(--colorBrandForeground1)'; +/** + * 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#colorNeutralForeground2BrandHover | `colorNeutralForeground2BrandHover`} design token. * @public @@ -334,11 +339,6 @@ export const colorNeutralStroke3 = 'var(--colorNeutralStroke3)'; * @public */ export const colorNeutralBackground3 = 'var(--colorNeutralBackground3)'; -/** - * 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#fontWeightSemibold | `fontWeightSemibold`} design token. * @public @@ -469,6 +469,11 @@ export const borderRadiusSmall = 'var(--borderRadiusSmall)'; * @public */ export const borderRadiusXLarge = 'var(--borderRadiusXLarge)'; +/** + * 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#spacingVerticalXS | `spacingVerticalXS`} design token. * @public diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 64eafbf3cc7af..4d8e7d9fc53ba 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -4,12 +4,22 @@ import { ctrlAvatarCornerGroupRaw, ctrlAvatarPresenceBadgeStrokeWidthRaw, } from '../components/avatar/variables'; +import { + ctrlProgressBackgroundEmptyRaw, + ctrlProgressBackgroundFilledRaw, + ctrlProgressHeightFilledRaw, +} from '../components/progress/variables'; +import { ctrlSpinnerStrokeWidthRaw } from '../components/spinner/variables'; import { foregroundCtrlNeutralPrimaryRestRaw, cornerCtrlRestRaw, strokeWidthDefaultRaw, gapInsideCtrlDefaultRaw, nullColorRaw, + backgroundCtrlBrandRestRaw, + textGlobalBody3FontSizeRaw, + textGlobalBody3LineHeightRaw, + textStyleDefaultRegularWeightRaw, paddingCtrlTextTopRaw, } from '../control/variables'; import { @@ -24,6 +34,11 @@ import { strokeWidthThin, spacingHorizontalSNudge, colorNeutralForeground3, + colorBrandStroke2Contrast, + colorBrandStroke1, + fontSizeBase400, + lineHeightBase400, + fontWeightSemibold, spacingVerticalXS, colorTransparentStrokeInteractive, colorTransparentStroke, @@ -37,6 +52,8 @@ import { foregroundCtrlOnTransparentHoverRaw, foregroundCtrlOnTransparentPressedRaw, foregroundCtrlOnTransparentRestRaw, + textRampItemBodyFontSizeRaw, + textRampItemBodyLineHeightRaw, paddingCtrlTextBottomRaw, strokeCtrlOnActiveBrandHoverRaw, strokeCtrlOnActiveBrandRestRaw, @@ -140,6 +157,55 @@ export const _ctrlButtonGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${sp * please use foregroundCtrlHintDefault instead. */ export const _ctrlDividerForegroundSubtle = `var(${foregroundCtrlHintDefaultRaw}, var(${nullColorRaw}, ${colorNeutralForeground3}))`; +/** + * 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. From 1b76b0ca5b701f447324cf7f230165bfc64363cf Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Wed, 25 Jun 2025 12:43:29 -0700 Subject: [PATCH 27/66] React-Tree: Upgrade to extended tokens (#34602) --- ...-e1994951-8afe-4559-8b5b-cc8dfdceeb53.json | 7 + .../useAccordionHeaderStyles.styles.ts | 16 +- .../FlatTree/useFlatTreeStyles.styles.ts | 4 +- .../components/Tree/useTreeStyles.styles.ts | 6 +- .../TreeItem/useTreeItemStyles.styles.ts | 19 ++- .../useTreeItemLayoutStyles.styles.ts | 39 +++-- .../useTreeItemPersonaLayoutStyles.styles.ts | 19 +-- .../etc/semantic-tokens.api.md | 60 ++++++- .../src/components/list/tokens.ts | 4 +- .../semantic-tokens/src/control/tokens.ts | 3 +- .../src/fluentLegacyVariants.ts | 70 ++++++++- .../semantic-tokens/src/fluentOverrides.ts | 13 +- packages/semantic-tokens/src/index.ts | 16 ++ packages/semantic-tokens/src/legacy/tokens.ts | 37 ++++- .../src/legacyVariant/tokens.ts | 147 ++++++++++++++++-- .../semantic-tokens/src/optional/tokens.ts | 3 +- 16 files changed, 386 insertions(+), 77 deletions(-) create mode 100644 change/@fluentui-react-tree-e1994951-8afe-4559-8b5b-cc8dfdceeb53.json diff --git a/change/@fluentui-react-tree-e1994951-8afe-4559-8b5b-cc8dfdceeb53.json b/change/@fluentui-react-tree-e1994951-8afe-4559-8b5b-cc8dfdceeb53.json new file mode 100644 index 0000000000000..6b14d0f8215b9 --- /dev/null +++ b/change/@fluentui-react-tree-e1994951-8afe-4559-8b5b-cc8dfdceeb53.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Enable semantic tokens", + "packageName": "@fluentui/react-tree", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts index bff5fe9158287..a929e67cbe6e0 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts +++ b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts @@ -3,7 +3,6 @@ import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; import * as semanticTokens from '@fluentui/semantic-tokens'; -import { tokens } from '@fluentui/react-theme'; export const accordionHeaderClassNames: SlotClassNames = { root: 'fui-AccordionHeader', @@ -28,10 +27,17 @@ const useStyles = makeStyles({ WebkitAppearance: 'button', textAlign: 'unset', }, - focusIndicator: createFocusOutlineStyle(), + focusIndicator: createFocusOutlineStyle({ + style: { + outlineRadius: semanticTokens.ctrlListCornerRest, + outlineOffset: semanticTokens._ctrlAccordionFocusInnerStrokeWidth, + outlineColor: semanticTokens._ctrlAccordionFocusOuterStroke, + outlineWidth: semanticTokens.ctrlFocusOuterStrokeWidth, + }, + }), root: { color: semanticTokens._ctrlAccordionForegroundRest, - backgroundColor: tokens.colorTransparentBackground, + backgroundColor: semanticTokens._ctrlAccordionBackgroundRest, margin: '0', borderRadius: semanticTokens.ctrlListCornerRest, @@ -54,10 +60,8 @@ const useStyles = makeStyles({ position: 'relative', width: '100%', ...shorthands.borderWidth('0'), - padding: `0 ${semanticTokens.paddingCtrlHorizontalDefault} 0 ${paddingCtrlHorizontalDefaultNudge}`, + padding: `${semanticTokens._ctrlAccordionPaddingTextTop} ${semanticTokens.paddingCtrlHorizontalDefault} ${semanticTokens._ctrlAccordionPaddingTextBottom} ${paddingCtrlHorizontalDefaultNudge}`, minHeight: semanticTokens.sizeCtrlDefault, - paddingTop: semanticTokens.paddingCtrlTextTop, - paddingBottom: semanticTokens.paddingCtrlTextBottom, display: 'flex', alignItems: 'center', cursor: 'pointer', diff --git a/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTreeStyles.styles.ts b/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTreeStyles.styles.ts index 0086c72db2817..7546743f72f25 100644 --- a/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTreeStyles.styles.ts +++ b/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTreeStyles.styles.ts @@ -1,7 +1,7 @@ import { makeResetStyles, mergeClasses } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { tokens } from '@fluentui/react-theme'; import { FlatTreeSlots, FlatTreeState } from './FlatTree.types'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const flatTreeClassNames: SlotClassNames> = { root: 'fui-FlatTree', @@ -10,7 +10,7 @@ export const flatTreeClassNames: SlotClassNames { diff --git a/packages/react-components/react-tree/library/src/components/Tree/useTreeStyles.styles.ts b/packages/react-components/react-tree/library/src/components/Tree/useTreeStyles.styles.ts index ff2ab6fa83415..065533f71b98d 100644 --- a/packages/react-components/react-tree/library/src/components/Tree/useTreeStyles.styles.ts +++ b/packages/react-components/react-tree/library/src/components/Tree/useTreeStyles.styles.ts @@ -1,7 +1,7 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { TreeSlots, TreeState } from './Tree.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { tokens } from '@fluentui/react-theme'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const treeClassNames: SlotClassNames> = { root: 'fui-Tree', @@ -10,12 +10,12 @@ export const treeClassNames: SlotClassNames> = const useBaseStyles = makeResetStyles({ display: 'flex', flexDirection: 'column', - rowGap: tokens.spacingVerticalXXS, + rowGap: semanticTokens._ctrlTreeGapInsideDefault, }); const useStyles = makeStyles({ subtree: { - paddingTop: tokens.spacingVerticalXXS, + paddingTop: semanticTokens._ctrlTreeGapInsideDefault, }, }); diff --git a/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts b/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts index 22d1afc695dbb..2684fb82c7d69 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts +++ b/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts @@ -1,11 +1,11 @@ import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { tokens } from '@fluentui/react-theme'; import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; import { treeItemLevelToken } from '../../utils/tokens'; import { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles'; import { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const treeItemClassNames: SlotClassNames = { root: 'fui-TreeItem', @@ -17,9 +17,9 @@ const useBaseStyles = makeResetStyles({ display: 'flex', flexDirection: 'column', boxSizing: 'border-box', - backgroundColor: tokens.colorSubtleBackground, - color: tokens.colorNeutralForeground2, - paddingRight: tokens.spacingHorizontalNone, + 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', @@ -30,12 +30,11 @@ const useBaseStyles = makeResetStyles({ // This adds the focus outline for the TreeItemLayout element ...createCustomFocusIndicatorStyle( { - borderRadius: tokens.borderRadiusMedium, - outlineColor: tokens.colorStrokeFocus2, - outlineRadius: tokens.borderRadiusMedium, - // FIXME: tokens.strokeWidthThick causes some weird bugs - outlineWidth: '2px', - outlineStyle: 'solid', + 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 => diff --git a/packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts b/packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts index 4d1ab56638ed9..15b66505a4682 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts +++ b/packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts @@ -1,10 +1,11 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { tokens, typographyStyles } from '@fluentui/react-theme'; +import { tokens } from '@fluentui/react-theme'; import { useTreeContext_unstable } from '../../contexts/treeContext'; import { treeItemLevelToken } from '../../utils/tokens'; import { useTreeItemContext_unstable } from '../../contexts/treeItemContext'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const treeItemLayoutClassNames: SlotClassNames = { root: 'fui-TreeItemLayout', @@ -24,11 +25,11 @@ const useRootBaseStyles = makeResetStyles({ boxSizing: 'border-box', gridArea: 'layout', ':hover': { - color: tokens.colorNeutralForeground2Hover, - backgroundColor: tokens.colorSubtleBackgroundHover, + color: semanticTokens.foregroundCtrlOnSubtleHover, + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, // TODO: stop using treeItemLayoutClassNames.expandIcon for styling [`& .${treeItemLayoutClassNames.expandIcon}`]: { - color: tokens.colorNeutralForeground3Hover, + color: semanticTokens._ctrlTreeIconOnSubtleHover, }, }, ':active': { @@ -46,17 +47,23 @@ const useRootBaseStyles = makeResetStyles({ */ const useRootStyles = makeStyles({ leaf: { - paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`, + paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${semanticTokens.ctrlListIndentLevel1})`, }, branch: { - paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`, + paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${semanticTokens.ctrlListIndentLevel1})`, }, medium: { - ...typographyStyles.body1, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + lineHeight: semanticTokens.textRampItemBodyLineHeight, }, small: { minHeight: '24px', - ...typographyStyles.caption1, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampSmItemBodyFontSize, + lineHeight: semanticTokens.textRampSmItemBodyLineHeight, }, // Appearance variations subtle: {}, @@ -69,12 +76,15 @@ const useRootStyles = makeStyles({ }, }, transparent: { - backgroundColor: tokens.colorTransparentBackground, + backgroundColor: semanticTokens.nullColor, + color: semanticTokens.foregroundCtrlOnTransparentRest, ':hover': { backgroundColor: tokens.colorTransparentBackgroundHover, + color: semanticTokens._ctrlTreeOnTransparentHover, }, ':active': { backgroundColor: tokens.colorTransparentBackgroundPressed, + color: semanticTokens._ctrlTreeOnTransparentPressed, }, }, }); @@ -112,7 +122,7 @@ const useExpandIconBaseStyles = makeResetStyles({ justifyContent: 'center', minWidth: '24px', boxSizing: 'border-box', - color: tokens.colorNeutralForeground3, + color: semanticTokens._ctrlTreeIconOnSubtle, flex: `0 0 auto`, padding: `${tokens.spacingVerticalXS} 0`, }); @@ -121,7 +131,8 @@ const useExpandIconBaseStyles = makeResetStyles({ * Styles for the content slot */ const useMainBaseStyles = makeResetStyles({ - padding: `0 ${tokens.spacingHorizontalXXS}`, + // padding: `0 ${tokens.spacingHorizontalXXS}`, + padding: `${semanticTokens._ctrlTreePaddingTextTop} ${semanticTokens._ctrlTreePaddingTextRight} ${semanticTokens._ctrlTreePaddingTextBottom} ${semanticTokens._ctrlTreePaddingTextLeft}`, }); /** @@ -130,9 +141,9 @@ const useMainBaseStyles = makeResetStyles({ const useIconBaseStyles = makeResetStyles({ display: 'flex', alignItems: 'center', - color: tokens.colorNeutralForeground2, - lineHeight: tokens.lineHeightBase500, - fontSize: tokens.fontSizeBase500, + color: semanticTokens.foregroundCtrlOnSubtleRest, + lineHeight: semanticTokens.textGlobalBody1LineHeight, + fontSize: semanticTokens.textGlobalBody1FontSize, }); const useIconBeforeStyles = makeStyles({ diff --git a/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts b/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts index 4c1fb490f214c..a0a0a6ccccbbf 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts +++ b/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts @@ -4,6 +4,7 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import { tokens, typographyStyles } from '@fluentui/react-theme'; import { treeItemLevelToken } from '../../utils/tokens'; import { useTreeItemContext_unstable } from '../../contexts/treeItemContext'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const treeItemPersonaLayoutClassNames: SlotClassNames = { root: 'fui-TreeItemPersonaLayout', @@ -27,19 +28,19 @@ const useRootBaseStyles = makeResetStyles({ alignItems: 'center', ...typographyStyles.body1, ':active': { - color: tokens.colorNeutralForeground2Pressed, - backgroundColor: tokens.colorSubtleBackgroundPressed, + color: semanticTokens.foregroundCtrlOnSubtlePressed, + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: { - color: tokens.colorNeutralForeground3Pressed, + color: semanticTokens._ctrlPersonaTreeIconOnSubtlePressed, }, }, ':hover': { - color: tokens.colorNeutralForeground2Hover, - backgroundColor: tokens.colorSubtleBackgroundHover, + color: semanticTokens.foregroundCtrlOnSubtleHover, + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: { - color: tokens.colorNeutralForeground3Hover, + color: semanticTokens._ctrlTreeIconOnSubtleHover, }, }, }); @@ -49,10 +50,10 @@ const useRootBaseStyles = makeResetStyles({ */ const useRootStyles = makeStyles({ leaf: { - paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`, + paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${semanticTokens.ctrlListIndentLevel1})`, }, branch: { - paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`, + paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${semanticTokens.ctrlListIndentLevel1})`, }, }); @@ -118,7 +119,7 @@ const useExpandIconBaseStyles = makeResetStyles({ justifyContent: 'center', minWidth: '24px', boxSizing: 'border-box', - color: tokens.colorNeutralForeground3, + color: semanticTokens._ctrlTreeIconOnSubtle, gridArea: 'expandIcon', flex: `0 0 auto`, padding: `${tokens.spacingVerticalXS} 0`, diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 8da4d5bb5f095..19ea23c9d9632 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -629,13 +629,28 @@ export const cornerZero = "var(--smtc-corner-zero, var(--borderRadiusNone))"; export const cornerZeroRaw = "--smtc-corner-zero"; // @public -export const _ctrlAccordionForegroundHover = "var(--smtc-foreground-ctrl-on-transparent-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; +export const _ctrlAccordionBackgroundRest = "var(--smtc-background-ctrl-subtle-rest, var(--smtc-null-color, var(--colorTransparentBackground)))"; // @public -export const _ctrlAccordionForegroundPressed = "var(--smtc-foreground-ctrl-on-transparent-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; +export const _ctrlAccordionFocusInnerStrokeWidth = "var(--smtc-ctrl-focus-inner-stroke-width, var(--smtc-stroke-width-default, 0px))"; // @public -export const _ctrlAccordionForegroundRest = "var(--smtc-foreground-ctrl-on-transparent-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; +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)"; @@ -1997,7 +2012,7 @@ export const ctrlListForegroundSelectedRest = "var(--smtc-ctrl-list-foreground-s 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))"; +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"; @@ -2182,6 +2197,9 @@ export const ctrlLiteFilterStrokeWidthSelected = "var(--smtc-ctrl-lite-filter-st // @public (undocumented) export const ctrlLiteFilterStrokeWidthSelectedRaw = "--smtc-ctrl-lite-filter-stroke-width-selected"; +// @public +export const _ctrlPersonaTreeIconOnSubtlePressed = "var(--smtc-foreground-ctrl-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-pressed, var(--colorNeutralForeground3Pressed)))"; + // @public (undocumented) export const ctrlProgressBackgroundEmpty = "var(--smtc-ctrl-progress-background-empty, var(--colorNeutralBackground6))"; @@ -2797,6 +2815,36 @@ export const ctrlTooltipShadow = "var(--smtc-ctrl-tooltip-shadow, var(--smtc-ctr // @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)))"; @@ -3200,7 +3248,7 @@ export const gapBetweenCtrlSmNested = "var(--smtc-gap-between-ctrl-sm-nested, va 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))"; +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"; @@ -4030,7 +4078,7 @@ export const paddingContentMedium = "var(--smtc-padding-content-medium)"; export const paddingContentMediumRaw = "--smtc-padding-content-medium"; // @public (undocumented) -export const paddingContentNone = "var(--smtc-padding-content-none)"; +export const paddingContentNone = "var(--smtc-padding-content-none, var(--spacingHorizontalNone))"; // @public (undocumented) export const paddingContentNoneRaw = "--smtc-padding-content-none"; diff --git a/packages/semantic-tokens/src/components/list/tokens.ts b/packages/semantic-tokens/src/components/list/tokens.ts index b5d4f87cf4111..cf3713534d3ff 100644 --- a/packages/semantic-tokens/src/components/list/tokens.ts +++ b/packages/semantic-tokens/src/components/list/tokens.ts @@ -13,7 +13,7 @@ import { cornerCtrlLgRestRaw, paddingCtrlLgHorizontalDefaultRaw, } from '../../control/variables'; -import { borderRadiusMedium } from '../../legacy/tokens'; +import { borderRadiusMedium, spacingHorizontalXXL } from '../../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, backgroundCtrlSubtleDisabledRaw, @@ -86,7 +86,7 @@ export const ctrlListPillLengthHint = `var(${ctrlListPillLengthHintRaw}, var(${c export const ctrlListCornerRest = `var(${ctrlListCornerRestRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusMedium}))`; export const ctrlListCornerHover = `var(${ctrlListCornerHoverRaw}, var(${cornerCtrlRestRaw}))`; export const ctrlListCornerPressed = `var(${ctrlListCornerPressedRaw}, var(${cornerCtrlRestRaw}))`; -export const ctrlListIndentLevel1 = `var(${ctrlListIndentLevel1Raw}, var(${paddingCtrlHorizontalDefaultRaw}))`; +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}))`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index 8c81f0e365246..9e41bc469e1f4 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -23,6 +23,7 @@ import { fontFamilyBase, fontWeightRegular, fontWeightSemibold, + spacingHorizontalNone, spacingHorizontalXXL, spacingHorizontalM, spacingHorizontalS, @@ -298,7 +299,7 @@ export const sizeCtrlLgDefault = `var(${sizeCtrlLgDefaultRaw}, 44px)`; export const sizeCtrlLgIcon = `var(${sizeCtrlLgIconRaw}, 24px)`; export const paddingContentAlignDefault = `var(${paddingContentAlignDefaultRaw})`; export const paddingContentAlignOutdentIconOnSubtle = `var(${paddingContentAlignOutdentIconOnSubtleRaw})`; -export const paddingContentNone = `var(${paddingContentNoneRaw})`; +export const paddingContentNone = `var(${paddingContentNoneRaw}, ${spacingHorizontalNone})`; export const paddingContentAlignOutdentTextOnSubtle = `var(${paddingContentAlignOutdentTextOnSubtleRaw})`; export const paddingContentXxSmall = `var(${paddingContentXxSmallRaw})`; export const paddingContentXSmall = `var(${paddingContentXSmallRaw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index df53b224d62e5..e3198f87aa333 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -13,18 +13,38 @@ export type LegacyFluentVariantValue = 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: 'colorNeutralForeground2', + f2Token: 'colorNeutralForeground1', originalToken: 'foregroundCtrlOnTransparentHover', }, _ctrlAccordionForegroundPressed: { - f2Token: 'colorNeutralForeground2', + f2Token: 'colorNeutralForeground1', originalToken: 'foregroundCtrlOnTransparentPressed', }, _ctrlAccordionForegroundRest: { - f2Token: 'colorNeutralForeground2', + f2Token: 'colorNeutralForeground1', originalToken: 'foregroundCtrlOnTransparentRest', }, + _ctrlAccordionPaddingTextBottom: { + originalToken: 'paddingCtrlTextBottom', + rawValue: '0px', + }, + _ctrlAccordionPaddingTextTop: { + originalToken: 'paddingCtrlTextTop', + rawValue: '0px', + }, _ctrlAvatarActiveRingStrokeWidthLg: { f2Token: 'strokeWidthThickest', originalToken: 'ctrlAvatarActiveRingStrokeWidth', @@ -69,6 +89,10 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorNeutralForeground3', originalToken: 'foregroundCtrlHintDefault', }, + _ctrlPersonaTreeIconOnSubtlePressed: { + f2Token: 'colorNeutralForeground3Pressed', + originalToken: 'foregroundCtrlOnSubtlePressed', + }, _ctrlSpinnerBackgroundEmpty: { f2Token: 'colorBrandStroke2Contrast', originalToken: 'ctrlProgressBackgroundEmpty', @@ -113,4 +137,44 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorTransparentStroke', originalToken: 'strokeCtrlOnActiveBrandRest', }, + _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', + }, }; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 05d104db717cd..2ef6834c06116 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -81,6 +81,7 @@ export const fluentOverrides: FluentOverrides = { ctrlLinkForegroundNeutralPressed: { f2Token: 'colorNeutralForeground2Pressed' }, ctrlLinkForegroundNeutralRest: { f2Token: 'colorNeutralForeground2' }, ctrlListCornerRest: { f2Token: 'borderRadiusMedium' }, + ctrlListIndentLevel1: { f2Token: 'spacingHorizontalXXL' }, ctrlProgressBackgroundEmpty: { f2Token: 'colorNeutralBackground6' }, ctrlProgressBackgroundFilled: { f2Token: 'colorCompoundBrandBackground' }, ctrlProgressCorner: { f2Token: 'borderRadiusMedium' }, @@ -126,6 +127,7 @@ export const fluentOverrides: FluentOverrides = { foregroundCtrlOnTransparentHover: { f2Token: 'colorNeutralForeground2BrandHover' }, foregroundCtrlOnTransparentPressed: { f2Token: 'colorNeutralForeground2BrandPressed' }, foregroundCtrlOnTransparentRest: { f2Token: 'colorNeutralForeground2' }, + gapBetweenListItem: { f2Token: 'spacingVerticalXXS' }, gapInsideCtrlDefault: { f2Token: 'spacingHorizontalS' }, gapInsideCtrlLgDefault: { f2Token: 'spacingHorizontalSNudge' }, gapInsideCtrlLgToLabel: { f2Token: 'spacingHorizontalS' }, @@ -134,18 +136,19 @@ export const fluentOverrides: FluentOverrides = { gapInsideCtrlToLabel: { f2Token: 'spacingHorizontalSNudge' }, // Rating uses 8px, or spacingHorizontalS, for all gaps between icons and label in design nullColor: { f2Token: 'colorTransparentBackground' }, paddingContentLarge: { f2Token: 'spacingHorizontalXXL' }, + paddingContentNone: { f2Token: 'spacingHorizontalNone' }, paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' }, paddingCtrlHorizontalIconOnly: { rawValue: '5px' }, paddingCtrlLgHorizontalDefault: { f2Token: 'spacingHorizontalL' }, paddingCtrlLgHorizontalIconOnly: { rawValue: '7px' }, - paddingCtrlLgTextBottom: null, // We can add a value here if needed, but for now it's a noop in Accordion - paddingCtrlLgTextTop: null, // We can add a value here if needed, but for now it's a noop in Accordion + 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, // We can add a value here if needed, but for now it's a noop in Accordion - paddingCtrlSmTextTop: null, // We can add a value here if needed, but for now it's a noop in Accordion + 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' }, // For now, text padding is not applied (use default); + paddingCtrlTextSide: { rawValue: '0px' }, // Enable for semantic, but legacy should fallback to 0px paddingCtrlTextTop: { rawValue: '5px' }, shadowFlyout: { f2Token: 'shadow64' }, sizeCtrlDefault: { rawValue: '44px' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 809b2d1e22120..fe3b7350da2d7 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1782,9 +1782,14 @@ export { ctrlCardStateDisabled, } from './components/card/tokens'; export { + _ctrlAccordionBackgroundRest, + _ctrlAccordionFocusInnerStrokeWidth, + _ctrlAccordionFocusOuterStroke, _ctrlAccordionForegroundHover, _ctrlAccordionForegroundPressed, _ctrlAccordionForegroundRest, + _ctrlAccordionPaddingTextBottom, + _ctrlAccordionPaddingTextTop, _ctrlAvatarActiveRingStrokeWidthLg, _ctrlAvatarActiveRingStrokeWidthMd, _ctrlAvatarActiveRingStrokeWidthSm, @@ -1796,6 +1801,7 @@ export { _ctrlAvatarPresenceBadgeStrokeWidthSm, _ctrlButtonGapInsideDefault, _ctrlDividerForegroundSubtle, + _ctrlPersonaTreeIconOnSubtlePressed, _ctrlSpinnerBackgroundEmpty, _ctrlSpinnerBackgroundFilled, _ctrlSpinnerItemBodyFontSize, @@ -1807,5 +1813,15 @@ export { _ctrlSwitchPaddingTextTop, _ctrlSwitchStrokeOnActiveBrandHover, _ctrlSwitchStrokeOnActiveBrandRest, + _ctrlTreeGapInsideDefault, + _ctrlTreeIconOnSubtle, + _ctrlTreeIconOnSubtleHover, + _ctrlTreeIconOnSubtlePressed, + _ctrlTreeOnTransparentHover, + _ctrlTreeOnTransparentPressed, + _ctrlTreePaddingTextBottom, + _ctrlTreePaddingTextLeft, + _ctrlTreePaddingTextRight, + _ctrlTreePaddingTextTop, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 550d527a58114..eb74f73580ec7 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -185,20 +185,25 @@ export const colorNeutralForeground2Pressed = 'var(--colorNeutralForeground2Pres */ export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1`} design token. + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXXL | `spacingHorizontalXXL`} design token. * @public */ -export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)'; +export const spacingHorizontalXXL = 'var(--spacingHorizontalXXL)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground1 | `colorBrandForeground1`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1`} design token. * @public */ -export const colorBrandForeground1 = 'var(--colorBrandForeground1)'; +export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)'; /** * 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#colorBrandForeground1 | `colorBrandForeground1`} design token. + * @public + */ +export const colorBrandForeground1 = 'var(--colorBrandForeground1)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandHover | `colorNeutralForeground2BrandHover`} design token. * @public @@ -239,6 +244,11 @@ export const colorNeutralForegroundInverted = 'var(--colorNeutralForegroundInver * @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 @@ -250,10 +260,10 @@ export const spacingHorizontalSNudge = 'var(--spacingHorizontalSNudge)'; */ export const spacingHorizontalXS = 'var(--spacingHorizontalXS)'; /** - * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXXL | `spacingHorizontalXXL`} design token. + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalNone | `spacingHorizontalNone`} design token. * @public */ -export const spacingHorizontalXXL = 'var(--spacingHorizontalXXL)'; +export const spacingHorizontalNone = 'var(--spacingHorizontalNone)'; /** * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalM | `spacingHorizontalM`} design token. * @public @@ -469,6 +479,11 @@ export const borderRadiusSmall = 'var(--borderRadiusSmall)'; * @public */ export const borderRadiusXLarge = 'var(--borderRadiusXLarge)'; +/** + * 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#colorBrandStroke2Contrast | `colorBrandStroke2Contrast`} design token. * @public @@ -479,3 +494,13 @@ export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)'; * @public */ export const spacingVerticalXS = 'var(--spacingVerticalXS)'; +/** + * 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#spacingHorizontalXXS | `spacingHorizontalXXS`} design token. + * @public + */ +export const spacingHorizontalXXS = 'var(--spacingHorizontalXXS)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 4d8e7d9fc53ba..574d2d01d9c89 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -4,6 +4,7 @@ import { ctrlAvatarCornerGroupRaw, ctrlAvatarPresenceBadgeStrokeWidthRaw, } from '../components/avatar/variables'; +import { ctrlFocusInnerStrokeWidthRaw, ctrlFocusOuterStrokeRaw } from '../components/focus/variables'; import { ctrlProgressBackgroundEmptyRaw, ctrlProgressBackgroundFilledRaw, @@ -11,19 +12,23 @@ import { } from '../components/progress/variables'; import { ctrlSpinnerStrokeWidthRaw } from '../components/spinner/variables'; import { + nullColorRaw, + strokeWidthDefaultRaw, + backgroundCtrlBrandRestRaw, foregroundCtrlNeutralPrimaryRestRaw, + paddingCtrlTextTopRaw, cornerCtrlRestRaw, - strokeWidthDefaultRaw, gapInsideCtrlDefaultRaw, - nullColorRaw, - backgroundCtrlBrandRestRaw, textGlobalBody3FontSizeRaw, textGlobalBody3LineHeightRaw, textStyleDefaultRegularWeightRaw, - paddingCtrlTextTopRaw, + paddingCtrlTextSideRaw, + paddingCtrlHorizontalDefaultRaw, } from '../control/variables'; import { - colorNeutralForeground2, + colorTransparentBackground, + colorStrokeFocus2, + colorNeutralForeground1, strokeWidthThickest, strokeWidthThicker, strokeWidthThick, @@ -34,6 +39,7 @@ import { strokeWidthThin, spacingHorizontalSNudge, colorNeutralForeground3, + colorNeutralForeground3Pressed, colorBrandStroke2Contrast, colorBrandStroke1, fontSizeBase400, @@ -42,8 +48,14 @@ import { spacingVerticalXS, colorTransparentStrokeInteractive, colorTransparentStroke, + spacingVerticalXXS, + colorNeutralForeground3Hover, + colorNeutralForeground2Hover, + colorNeutralForeground2Pressed, + spacingHorizontalXXS, } from '../legacy/tokens'; import { + backgroundCtrlSubtleRestRaw, foregroundCtrlHintDefaultRaw, strokeCtrlOnBrandHoverRaw, strokeCtrlOnBrandRestRaw, @@ -52,34 +64,74 @@ import { foregroundCtrlOnTransparentHoverRaw, foregroundCtrlOnTransparentPressedRaw, foregroundCtrlOnTransparentRestRaw, + paddingCtrlTextBottomRaw, + foregroundCtrlOnSubtlePressedRaw, + foregroundCtrlNeutralPrimaryPressedRaw, textRampItemBodyFontSizeRaw, textRampItemBodyLineHeightRaw, - paddingCtrlTextBottomRaw, strokeCtrlOnActiveBrandHoverRaw, strokeCtrlOnActiveBrandRestRaw, + foregroundCtrlOnSubtleRestRaw, + foregroundCtrlOnSubtleHoverRaw, + foregroundCtrlNeutralPrimaryHoverRaw, } 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}, ${colorNeutralForeground2}))`; +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}, ${colorNeutralForeground2}))`; +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}, ${colorNeutralForeground2}))`; +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. @@ -157,6 +209,13 @@ export const _ctrlButtonGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${sp * please use foregroundCtrlHintDefault instead. */ export const _ctrlDividerForegroundSubtle = `var(${foregroundCtrlHintDefaultRaw}, var(${nullColorRaw}, ${colorNeutralForeground3}))`; +/** + * 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 ctrlProgressBackgroundEmpty to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -234,3 +293,73 @@ export const _ctrlSwitchStrokeOnActiveBrandHover = `var(${strokeCtrlOnActiveBran * please use strokeCtrlOnActiveBrandRest instead. */ export const _ctrlSwitchStrokeOnActiveBrandRest = `var(${strokeCtrlOnActiveBrandRestRaw}, var(${strokeCtrlOnBrandRestRaw}, ${colorTransparentStroke}))`; +/** + * 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)`; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index 69642818987d0..7a6756a22eadb 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -89,6 +89,7 @@ import { fontSizeBase400, lineHeightBase400, fontWeightSemibold, + spacingVerticalXXS, strokeWidthThin, strokeWidthThicker, colorNeutralForegroundOnBrand, @@ -479,7 +480,7 @@ export const gapBetweenTextSmall = `var(${gapBetweenTextSmallRaw}, var(${gapBetw 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}))`; +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}))`; From 97066447593735167fc01a1c2c9c6c8ec872183b Mon Sep 17 00:00:00 2001 From: Xue <39594459+etudie@users.noreply.github.com> Date: Wed, 25 Jun 2025 16:45:49 -0400 Subject: [PATCH 28/66] Extended Tokens: Text area (#34692) Co-authored-by: Mitch-At-Work --- ...-348f9b49-d704-4a66-9a74-3955ff6fcdc0.json | 7 ++ .../Textarea/useTextareaStyles.styles.ts | 111 +++++++++++------- .../etc/semantic-tokens.api.md | 38 ++++-- .../src/components/input/tokens.ts | 39 ++++-- .../src/fluentLegacyVariants.ts | 16 +++ .../semantic-tokens/src/fluentOverrides.ts | 13 ++ packages/semantic-tokens/src/index.ts | 4 + packages/semantic-tokens/src/legacy/tokens.ts | 45 ++++--- .../src/legacyVariant/tokens.ts | 36 +++++- 9 files changed, 223 insertions(+), 86 deletions(-) create mode 100644 change/@fluentui-react-textarea-348f9b49-d704-4a66-9a74-3955ff6fcdc0.json diff --git a/change/@fluentui-react-textarea-348f9b49-d704-4a66-9a74-3955ff6fcdc0.json b/change/@fluentui-react-textarea-348f9b49-d704-4a66-9a74-3955ff6fcdc0.json new file mode 100644 index 0000000000000..347d5ed04fdca --- /dev/null +++ b/change/@fluentui-react-textarea-348f9b49-d704-4a66-9a74-3955ff6fcdc0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Fix: TextArea changes", + "packageName": "@fluentui/react-textarea", + "email": "xuehua@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts b/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts index 10e9827c2e360..5a593dc205e6f 100644 --- a/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts +++ b/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts @@ -1,13 +1,20 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; -import { tokens, typographyStyles } from '@fluentui/react-theme'; +import { tokens } from '@fluentui/react-theme'; import { SlotClassNames } from '@fluentui/react-utilities'; import type { TextareaSlots, TextareaState } from './Textarea.types'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const textareaClassNames: SlotClassNames = { root: 'fui-Textarea', textarea: 'fui-Textarea__textarea', }; +// Maintaining the correct corner radius: +// Use the whole border-radius as the height and only put radii on the bottom corners. +// (Otherwise the radius would be automatically reduced to fit available space.) +// max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0. +const inputBottomFocusBorderStroke = `max(${semanticTokens.ctrlInputBottomLineStrokeWidthSelected}, ${semanticTokens.cornerCtrlRest})`; + /** * Styles for the root(wrapper) slot */ @@ -17,15 +24,19 @@ const useRootStyles = makeStyles({ boxSizing: 'border-box', position: 'relative', // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size. - padding: `0 0 ${tokens.strokeWidthThick} 0`, + padding: `0 0 ${semanticTokens.ctrlInputBottomLineStrokeWidthSelected} 0`, margin: '0', - borderRadius: tokens.borderRadiusMedium, + borderRadius: semanticTokens.cornerCtrlRest, verticalAlign: 'top', + backgroundColor: semanticTokens.ctrlInputBackgroundRest, + ':focus-within': { + backgroundColor: semanticTokens.ctrlInputBackgroundSelected, + }, }, disabled: { - backgroundColor: tokens.colorTransparentBackground, - border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`, + backgroundColor: semanticTokens.ctrlInputBackgroundDisabled, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeCtrlOnNeutralDisabled}`, '@media (forced-colors: active)': { ...shorthands.borderColor('GrayText'), @@ -43,20 +54,15 @@ const useRootStyles = makeStyles({ bottom: '-1px', right: '-1px', - // Maintaining the correct corner radius: - // Use the whole border-radius as the height and only put radii on the bottom corners. - // (Otherwise the radius would be automatically reduced to fit available space.) - // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0. - height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`, - borderBottomLeftRadius: tokens.borderRadiusMedium, - borderBottomRightRadius: tokens.borderRadiusMedium, + height: inputBottomFocusBorderStroke, + borderBottomLeftRadius: semanticTokens.cornerCtrlRest, + borderBottomRightRadius: semanticTokens.cornerCtrlRest, - // Flat 2px border: // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off. // (This could be done without trimming using `background: linear-gradient(...)`, but using // borderBottom makes it easier for people to override the color if needed.) - borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`, - clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`, + borderBottom: `${semanticTokens.ctrlInputBottomLineStrokeWidthSelected} solid ${semanticTokens.ctrlInputBottomLineStrokeSelected}`, + clipPath: `inset(calc(100% - ${semanticTokens.ctrlInputBottomLineStrokeWidthSelected}) 0 0 0)`, // Animation for focus OUT transform: 'scaleX(0)', @@ -83,63 +89,77 @@ const useRootStyles = makeStyles({ }, ':focus-within:active::after': { // This is if the user clicks the field again while it's already focused - borderBottomColor: tokens.colorCompoundBrandStrokePressed, + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected, }, ':focus-within': { - outlineWidth: tokens.strokeWidthThick, + outlineWidth: semanticTokens.ctrlFocusOuterStrokeWidth, outlineStyle: 'solid', - outlineColor: 'transparent', + outlineColor: semanticTokens.nullColor, }, }, filled: { - border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlFocusOuterStroke}`, ':hover,:focus-within': { - ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive), + ...shorthands.borderColor(semanticTokens._ctrlFocusOuterStrokeInteractive), }, }, 'filled-darker': { - backgroundColor: tokens.colorNeutralBackground3, + backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, + ':focus-within': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, + }, }, 'filled-lighter': { - backgroundColor: tokens.colorNeutralBackground1, + backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, + ':focus-within': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, + }, }, 'filled-darker-shadow': { - backgroundColor: tokens.colorNeutralBackground3, - border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`, + backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlFocusInnerStroke}`, boxShadow: tokens.shadow2, + ':focus-within': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, + }, }, 'filled-lighter-shadow': { - backgroundColor: tokens.colorNeutralBackground1, - border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`, + backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens._ctrlFocusOuterStrokeInteractive}`, boxShadow: tokens.shadow2, + ':focus-within': { + backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, + }, }, outline: { - backgroundColor: tokens.colorNeutralBackground1, - border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`, - borderBottomColor: tokens.colorNeutralStrokeAccessible, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeRest}`, + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeRest, }, outlineInteractive: { ':hover': { - border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`, - borderBottomColor: tokens.colorNeutralStrokeAccessibleHover, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeHover}`, + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeHover, + ':focus-within': { + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected, + }, }, ':active': { - border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`, - borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokePressed}`, + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokePressed, }, ':focus-within': { - border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`, - borderBottomColor: tokens.colorCompoundBrandStroke, + border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeSelected}`, + borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected, }, }, invalid: { ':not(:focus-within),:hover:not(:focus-within)': { - ...shorthands.borderColor(tokens.colorPaletteRedBorder2), + ...shorthands.borderColor(semanticTokens.ctrlInputBackgroundError), }, }, }); @@ -153,13 +173,13 @@ const useTextareaStyles = makeStyles({ margin: '0', backgroundColor: 'transparent', boxSizing: 'border-box', - color: tokens.colorNeutralForeground1, + color: semanticTokens.foregroundContentNeutralPrimary, flexGrow: 1, - fontFamily: tokens.fontFamilyBase, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, height: '100%', '::placeholder': { - color: tokens.colorNeutralForeground4, + color: semanticTokens._ctrlInputNeutralForegroundPlaceholder, opacity: 1, }, @@ -167,10 +187,10 @@ const useTextareaStyles = makeStyles({ }, disabled: { - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, cursor: 'not-allowed', '::placeholder': { - color: tokens.colorNeutralForegroundDisabled, + color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, }, }, @@ -180,19 +200,22 @@ const useTextareaStyles = makeStyles({ minHeight: '40px', padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`, maxHeight: '200px', - ...typographyStyles.caption1, + fontSize: semanticTokens.textGlobalCaption1FontSize, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, }, medium: { minHeight: '52px', padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`, maxHeight: '260px', - ...typographyStyles.body1, + fontSize: semanticTokens.textGlobalBody3FontSize, + lineHeight: semanticTokens.textGlobalBody3LineHeight, }, large: { minHeight: '64px', padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`, maxHeight: '320px', - ...typographyStyles.body2, + fontSize: semanticTokens.textGlobalBody2FontSize, + lineHeight: semanticTokens.textGlobalBody2LineHeight, }, }); diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 19ea23c9d9632..44ec47ba7d61b 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -1600,6 +1600,9 @@ export const ctrlFocusInnerStrokeWidthRaw = "--smtc-ctrl-focus-inner-stroke-widt // @public (undocumented) export const ctrlFocusOuterStroke = "var(--smtc-ctrl-focus-outer-stroke, var(--smtc-background-ctrl-brand-rest, var(--colorTransparentStroke)))"; +// @public +export const _ctrlFocusOuterStrokeInteractive = "var(--smtc-ctrl-focus-outer-stroke, var(--smtc-background-ctrl-brand-rest, var(--colorTransparentStrokeInteractive)))"; + // @public (undocumented) export const ctrlFocusOuterStrokeRaw = "--smtc-ctrl-focus-outer-stroke"; @@ -1610,13 +1613,13 @@ export const ctrlFocusOuterStrokeWidth = "var(--smtc-ctrl-focus-outer-stroke-wid export const ctrlFocusOuterStrokeWidthRaw = "--smtc-ctrl-focus-outer-stroke-width"; // @public (undocumented) -export const ctrlInputBackgroundDisabled = "var(--smtc-ctrl-input-background-disabled, var(--smtc-background-ctrl-neutral-disabled))"; +export const ctrlInputBackgroundDisabled = "var(--smtc-ctrl-input-background-disabled, var(--smtc-background-ctrl-neutral-disabled, var(--colorNeutralBackgroundDisabled)))"; // @public (undocumented) export const ctrlInputBackgroundDisabledRaw = "--smtc-ctrl-input-background-disabled"; // @public (undocumented) -export const ctrlInputBackgroundError = "var(--smtc-ctrl-input-background-error, var(--smtc-background-ctrl-neutral-rest))"; +export const ctrlInputBackgroundError = "var(--smtc-ctrl-input-background-error, var(--smtc-background-ctrl-neutral-rest, var(--colorPaletteRedBorder2)))"; // @public (undocumented) export const ctrlInputBackgroundErrorRaw = "--smtc-ctrl-input-background-error"; @@ -1634,13 +1637,19 @@ export const ctrlInputBackgroundPressed = "var(--smtc-ctrl-input-background-pres export const ctrlInputBackgroundPressedRaw = "--smtc-ctrl-input-background-pressed"; // @public (undocumented) -export const ctrlInputBackgroundRest = "var(--smtc-ctrl-input-background-rest, var(--smtc-background-ctrl-neutral-rest))"; +export const ctrlInputBackgroundRest = "var(--smtc-ctrl-input-background-rest, var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground1)))"; + +// @public +export const _ctrlInputBackgroundRestDarker = "var(--smtc-ctrl-input-background-rest, var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground3)))"; + +// @public +export const _ctrlInputBackgroundRestLighter = "var(--smtc-ctrl-input-background-rest, var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground1)))"; // @public (undocumented) export const ctrlInputBackgroundRestRaw = "--smtc-ctrl-input-background-rest"; // @public (undocumented) -export const ctrlInputBackgroundSelected = "var(--smtc-ctrl-input-background-selected, var(--smtc-background-ctrl-neutral-rest))"; +export const ctrlInputBackgroundSelected = "var(--smtc-ctrl-input-background-selected, var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground1)))"; // @public (undocumented) export const ctrlInputBackgroundSelectedRaw = "--smtc-ctrl-input-background-selected"; @@ -1658,25 +1667,25 @@ export const ctrlInputBottomLineStrokeError = "var(--smtc-ctrl-input-bottom-line export const ctrlInputBottomLineStrokeErrorRaw = "--smtc-ctrl-input-bottom-line-stroke-error"; // @public (undocumented) -export const ctrlInputBottomLineStrokeHover = "var(--smtc-ctrl-input-bottom-line-stroke-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; +export const ctrlInputBottomLineStrokeHover = "var(--smtc-ctrl-input-bottom-line-stroke-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessibleHover)))"; // @public (undocumented) export const ctrlInputBottomLineStrokeHoverRaw = "--smtc-ctrl-input-bottom-line-stroke-hover"; // @public (undocumented) -export const ctrlInputBottomLineStrokePressed = "var(--smtc-ctrl-input-bottom-line-stroke-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; +export const ctrlInputBottomLineStrokePressed = "var(--smtc-ctrl-input-bottom-line-stroke-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessiblePressed)))"; // @public (undocumented) export const ctrlInputBottomLineStrokePressedRaw = "--smtc-ctrl-input-bottom-line-stroke-pressed"; // @public (undocumented) -export const ctrlInputBottomLineStrokeRest = "var(--smtc-ctrl-input-bottom-line-stroke-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; +export const ctrlInputBottomLineStrokeRest = "var(--smtc-ctrl-input-bottom-line-stroke-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessible)))"; // @public (undocumented) export const ctrlInputBottomLineStrokeRestRaw = "--smtc-ctrl-input-bottom-line-stroke-rest"; // @public (undocumented) -export const ctrlInputBottomLineStrokeSelected = "var(--smtc-ctrl-input-bottom-line-stroke-selected, var(--smtc-background-ctrl-brand-rest))"; +export const ctrlInputBottomLineStrokeSelected = "var(--smtc-ctrl-input-bottom-line-stroke-selected, var(--smtc-background-ctrl-brand-rest, var(--colorCompoundBrandStroke)))"; // @public (undocumented) export const ctrlInputBottomLineStrokeSelectedRaw = "--smtc-ctrl-input-bottom-line-stroke-selected"; @@ -1700,11 +1709,14 @@ export const ctrlInputBottomLineStrokeWidthRest = "var(--smtc-ctrl-input-bottom- export const ctrlInputBottomLineStrokeWidthRestRaw = "--smtc-ctrl-input-bottom-line-stroke-width-rest"; // @public (undocumented) -export const ctrlInputBottomLineStrokeWidthSelected = "var(--smtc-ctrl-input-bottom-line-stroke-width-selected)"; +export const ctrlInputBottomLineStrokeWidthSelected = "var(--smtc-ctrl-input-bottom-line-stroke-width-selected, var(--strokeWidthThick))"; // @public (undocumented) export const ctrlInputBottomLineStrokeWidthSelectedRaw = "--smtc-ctrl-input-bottom-line-stroke-width-selected"; +// @public +export const _ctrlInputNeutralForegroundPlaceholder = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground4))"; + // @public (undocumented) export const ctrlInputStrokeDisabled = "var(--smtc-ctrl-input-stroke-disabled, var(--smtc-stroke-ctrl-on-outline-disabled))"; @@ -1718,25 +1730,25 @@ export const ctrlInputStrokeError = "var(--smtc-ctrl-input-stroke-error, var(--s export const ctrlInputStrokeErrorRaw = "--smtc-ctrl-input-stroke-error"; // @public (undocumented) -export const ctrlInputStrokeHover = "var(--smtc-ctrl-input-stroke-hover, var(--smtc-stroke-ctrl-on-outline-hover))"; +export const ctrlInputStrokeHover = "var(--smtc-ctrl-input-stroke-hover, var(--smtc-stroke-ctrl-on-outline-hover, var(--colorNeutralStroke1Hover)))"; // @public (undocumented) export const ctrlInputStrokeHoverRaw = "--smtc-ctrl-input-stroke-hover"; // @public (undocumented) -export const ctrlInputStrokePressed = "var(--smtc-ctrl-input-stroke-pressed, var(--smtc-stroke-ctrl-on-outline-pressed))"; +export const ctrlInputStrokePressed = "var(--smtc-ctrl-input-stroke-pressed, var(--smtc-stroke-ctrl-on-outline-pressed, var(--colorNeutralStroke1Pressed)))"; // @public (undocumented) export const ctrlInputStrokePressedRaw = "--smtc-ctrl-input-stroke-pressed"; // @public (undocumented) -export const ctrlInputStrokeRest = "var(--smtc-ctrl-input-stroke-rest, var(--smtc-stroke-ctrl-on-outline-rest))"; +export const ctrlInputStrokeRest = "var(--smtc-ctrl-input-stroke-rest, var(--smtc-stroke-ctrl-on-outline-rest, var(--colorNeutralStroke1)))"; // @public (undocumented) export const ctrlInputStrokeRestRaw = "--smtc-ctrl-input-stroke-rest"; // @public (undocumented) -export const ctrlInputStrokeSelected = "var(--smtc-ctrl-input-stroke-selected, var(--smtc-stroke-ctrl-on-outline-rest))"; +export const ctrlInputStrokeSelected = "var(--smtc-ctrl-input-stroke-selected, var(--smtc-stroke-ctrl-on-outline-rest, var(--colorNeutralStroke1)))"; // @public (undocumented) export const ctrlInputStrokeSelectedRaw = "--smtc-ctrl-input-stroke-selected"; diff --git a/packages/semantic-tokens/src/components/input/tokens.ts b/packages/semantic-tokens/src/components/input/tokens.ts index 2bddeefcc40ed..6fd0179f1398f 100644 --- a/packages/semantic-tokens/src/components/input/tokens.ts +++ b/packages/semantic-tokens/src/components/input/tokens.ts @@ -13,6 +13,19 @@ import { strokeCtrlOnOutlinePressedRaw, strokeCtrlOnOutlineDisabledRaw, } from '../../control/variables'; +import { + colorNeutralBackground1, + colorNeutralBackgroundDisabled, + colorPaletteRedBorder2, + colorNeutralStroke1, + strokeWidthThick, + colorNeutralStrokeAccessible, + colorNeutralStrokeAccessibleHover, + colorNeutralStrokeAccessiblePressed, + colorCompoundBrandStroke, + colorNeutralStroke1Hover, + colorNeutralStroke1Pressed, +} from '../../legacy/tokens'; import { statusDangerStrokeRaw } from '../../optional/variables'; import { ctrlInputBackgroundRestRaw, @@ -45,13 +58,13 @@ import { ctrlInputStrokeErrorRaw, } from './variables'; -export const ctrlInputBackgroundRest = `var(${ctrlInputBackgroundRestRaw}, var(${backgroundCtrlNeutralRestRaw}))`; +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}))`; -export const ctrlInputBackgroundSelected = `var(${ctrlInputBackgroundSelectedRaw}, var(${backgroundCtrlNeutralRestRaw}))`; -export const ctrlInputBackgroundError = `var(${ctrlInputBackgroundErrorRaw}, var(${backgroundCtrlNeutralRestRaw}))`; -export const ctrlInputStrokeRest = `var(${ctrlInputStrokeRestRaw}, var(${strokeCtrlOnOutlineRestRaw}))`; +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}))`; export const ctrlInputStrokeWidthHover = `var(${ctrlInputStrokeWidthHoverRaw}, var(${strokeWidthDefaultRaw}))`; export const ctrlInputStrokeWidthPressed = `var(${ctrlInputStrokeWidthPressedRaw}, var(${strokeWidthDefaultRaw}))`; @@ -61,15 +74,15 @@ export const ctrlInputTextSelectionBackground = `var(${ctrlInputTextSelectionBac 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})`; -export const ctrlInputBottomLineStrokeRest = `var(${ctrlInputBottomLineStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const ctrlInputBottomLineStrokeHover = `var(${ctrlInputBottomLineStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; -export const ctrlInputBottomLineStrokePressed = `var(${ctrlInputBottomLineStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +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}))`; +export const ctrlInputBottomLineStrokeSelected = `var(${ctrlInputBottomLineStrokeSelectedRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorCompoundBrandStroke}))`; export const ctrlInputBottomLineStrokeError = `var(${ctrlInputBottomLineStrokeErrorRaw}, unset)`; -export const ctrlInputStrokeHover = `var(${ctrlInputStrokeHoverRaw}, var(${strokeCtrlOnOutlineHoverRaw}))`; -export const ctrlInputStrokePressed = `var(${ctrlInputStrokePressedRaw}, var(${strokeCtrlOnOutlinePressedRaw}))`; +export const ctrlInputStrokeHover = `var(${ctrlInputStrokeHoverRaw}, var(${strokeCtrlOnOutlineHoverRaw}, ${colorNeutralStroke1Hover}))`; +export const ctrlInputStrokePressed = `var(${ctrlInputStrokePressedRaw}, var(${strokeCtrlOnOutlinePressedRaw}, ${colorNeutralStroke1Pressed}))`; export const ctrlInputStrokeDisabled = `var(${ctrlInputStrokeDisabledRaw}, var(${strokeCtrlOnOutlineDisabledRaw}))`; -export const ctrlInputStrokeSelected = `var(${ctrlInputStrokeSelectedRaw}, var(${strokeCtrlOnOutlineRestRaw}))`; +export const ctrlInputStrokeSelected = `var(${ctrlInputStrokeSelectedRaw}, var(${strokeCtrlOnOutlineRestRaw}, ${colorNeutralStroke1}))`; export const ctrlInputStrokeError = `var(${ctrlInputStrokeErrorRaw}, var(${statusDangerStrokeRaw}))`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index e3198f87aa333..71ed7c33d7ccd 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -89,6 +89,22 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorNeutralForeground3', originalToken: 'foregroundCtrlHintDefault', }, + _ctrlFocusOuterStrokeInteractive: { + f2Token: 'colorTransparentStrokeInteractive', + originalToken: 'ctrlFocusOuterStroke', + }, + _ctrlInputBackgroundRestDarker: { + f2Token: 'colorNeutralBackground3', + originalToken: 'ctrlInputBackgroundRest', + }, + _ctrlInputBackgroundRestLighter: { + f2Token: 'colorNeutralBackground1', + originalToken: 'ctrlInputBackgroundRest', + }, + _ctrlInputNeutralForegroundPlaceholder: { + f2Token: 'colorNeutralForeground4', + originalToken: 'foregroundCtrlNeutralSecondaryRest', + }, _ctrlPersonaTreeIconOnSubtlePressed: { f2Token: 'colorNeutralForeground3Pressed', originalToken: 'foregroundCtrlOnSubtlePressed', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 2ef6834c06116..11b42680aa4c0 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -74,6 +74,19 @@ export const fluentOverrides: FluentOverrides = { 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' }, + ctrlInputBottomLineStrokeWidthSelected: { f2Token: 'strokeWidthThick' }, + ctrlInputStrokeHover: { f2Token: 'colorNeutralStroke1Hover' }, + ctrlInputStrokePressed: { f2Token: 'colorNeutralStroke1Pressed' }, + ctrlInputStrokeRest: { f2Token: 'colorNeutralStroke1' }, + ctrlInputStrokeSelected: { f2Token: 'colorNeutralStroke1' }, ctrlLinkForegroundBrandHover: { f2Token: 'colorBrandForegroundLinkHover' }, ctrlLinkForegroundBrandPressed: { f2Token: 'colorBrandForegroundLinkPressed' }, ctrlLinkForegroundBrandRest: { f2Token: 'colorBrandForegroundLink' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index fe3b7350da2d7..993c0b61f249f 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1801,6 +1801,10 @@ export { _ctrlAvatarPresenceBadgeStrokeWidthSm, _ctrlButtonGapInsideDefault, _ctrlDividerForegroundSubtle, + _ctrlFocusOuterStrokeInteractive, + _ctrlInputBackgroundRestDarker, + _ctrlInputBackgroundRestLighter, + _ctrlInputNeutralForegroundPlaceholder, _ctrlPersonaTreeIconOnSubtlePressed, _ctrlSpinnerBackgroundEmpty, _ctrlSpinnerBackgroundFilled, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index eb74f73580ec7..c95ff0fb21160 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -154,6 +154,31 @@ export const strokeWidthThin = 'var(--strokeWidthThin)'; * @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 @@ -304,11 +329,6 @@ export const colorPaletteDarkOrangeBackground3 = 'var(--colorPaletteDarkOrangeBa * @public */ export const colorNeutralStrokeOnBrand = 'var(--colorNeutralStrokeOnBrand)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1 | `colorNeutralStroke1`} design token. - * @public - */ -export const colorNeutralStroke1 = 'var(--colorNeutralStroke1)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorTransparentStrokeDisabled | `colorTransparentStrokeDisabled`} design token. * @public @@ -319,16 +339,6 @@ export const colorTransparentStrokeDisabled = 'var(--colorTransparentStrokeDisab * @public */ export const colorTransparentStrokeInteractive = 'var(--colorTransparentStrokeInteractive)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Hover | `colorNeutralStroke1Hover`} design token. - * @public - */ -export const colorNeutralStroke1Hover = 'var(--colorNeutralStroke1Hover)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Pressed | `colorNeutralStroke1Pressed`} design token. - * @public - */ -export const colorNeutralStroke1Pressed = 'var(--colorNeutralStroke1Pressed)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke1 | `colorBrandStroke1`} design token. * @public @@ -479,6 +489,11 @@ export const borderRadiusSmall = 'var(--borderRadiusSmall)'; * @public */ export const borderRadiusXLarge = 'var(--borderRadiusXLarge)'; +/** + * 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#colorNeutralForeground3Pressed | `colorNeutralForeground3Pressed`} design token. * @public diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 574d2d01d9c89..3230c309cc223 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -5,6 +5,7 @@ import { ctrlAvatarPresenceBadgeStrokeWidthRaw, } from '../components/avatar/variables'; import { ctrlFocusInnerStrokeWidthRaw, ctrlFocusOuterStrokeRaw } from '../components/focus/variables'; +import { ctrlInputBackgroundRestRaw } from '../components/input/variables'; import { ctrlProgressBackgroundEmptyRaw, ctrlProgressBackgroundFilledRaw, @@ -19,6 +20,8 @@ import { paddingCtrlTextTopRaw, cornerCtrlRestRaw, gapInsideCtrlDefaultRaw, + backgroundCtrlNeutralRestRaw, + foregroundCtrlNeutralSecondaryRestRaw, textGlobalBody3FontSizeRaw, textGlobalBody3LineHeightRaw, textStyleDefaultRegularWeightRaw, @@ -39,6 +42,10 @@ import { strokeWidthThin, spacingHorizontalSNudge, colorNeutralForeground3, + colorTransparentStrokeInteractive, + colorNeutralBackground3, + colorNeutralBackground1, + colorNeutralForeground4, colorNeutralForeground3Pressed, colorBrandStroke2Contrast, colorBrandStroke1, @@ -46,7 +53,6 @@ import { lineHeightBase400, fontWeightSemibold, spacingVerticalXS, - colorTransparentStrokeInteractive, colorTransparentStroke, spacingVerticalXXS, colorNeutralForeground3Hover, @@ -209,6 +215,34 @@ export const _ctrlButtonGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${sp * please use foregroundCtrlHintDefault instead. */ export const _ctrlDividerForegroundSubtle = `var(${foregroundCtrlHintDefaultRaw}, var(${nullColorRaw}, ${colorNeutralForeground3}))`; +/** + * 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 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 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 foregroundCtrlOnSubtlePressed to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. From b5b4d4b98817fb920582e06c5c9bea8ee7a89f0b Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Fri, 4 Jul 2025 08:38:21 -0700 Subject: [PATCH 29/66] Extended tokens: Migrate to custom style hooks + Button example (#34735) --- .github/CODEOWNERS | 2 + ...-2fefb723-8232-43c0-aa3f-417c55d0949a.json | 7 + .../Button/useButtonStyles.styles.ts | 291 ++++---- .../useCompoundButtonStyles.styles.ts | 51 +- .../MenuButton/useMenuButtonStyles.styles.ts | 25 +- .../useSplitButtonStyles.styles.ts | 40 +- .../useToggleButtonStyles.styles.ts | 59 +- .../src/decorators/withFluentProvider.tsx | 6 +- .../library/.babelrc.json | 4 + .../library/.eslintrc.json | 4 + .../library/.swcrc | 30 + .../library/LICENSE | 15 + .../library/README.md | 5 + .../library/config/api-extractor.json | 5 + .../library/config/tests.js | 1 + .../library/docs/Spec.md | 63 ++ .../etc/semantic-style-hooks-preview.api.md | 34 + .../library/jest.config.js | 34 + .../library/package.json | 60 ++ .../library/project.json | 8 + .../src/component-styles/Button/index.ts | 5 + .../Button/useSemanticButtonStyles.styles.ts | 660 ++++++++++++++++++ .../useSemanticCompoundButtonStyles.styles.ts | 317 +++++++++ .../useSemanticMenuButtonStyles.styles.ts | 155 ++++ .../useSemanticSplitButtonStyles.styles.ts | 225 ++++++ .../useSemanticToggleButtonStyles.styles.ts | 297 ++++++++ .../component-styles/semanticStyleHooks.ts | 18 + .../library/src/index.ts | 8 + .../library/src/testing/isConformant.ts | 15 + .../library/tsconfig.json | 22 + .../library/tsconfig.lib.json | 22 + .../library/tsconfig.spec.json | 17 + .../stories/.eslintrc.json | 12 + .../stories/.storybook/main.js | 14 + .../stories/.storybook/preview.js | 7 + .../stories/.storybook/tsconfig.json | 10 + .../stories/README.md | 17 + .../stories/package.json | 11 + .../stories/project.json | 8 + .../stories/src/.gitkeep | 0 .../stories/src/index.ts | 1 + .../stories/tsconfig.json | 22 + .../stories/tsconfig.lib.json | 10 + scripts/monorepo/src/getDependencies.spec.js | 5 + tsconfig.base.all.json | 10 +- tsconfig.base.json | 6 + tsconfig.base.wc.json | 3 +- 47 files changed, 2355 insertions(+), 286 deletions(-) create mode 100644 change/@fluentui-semantic-style-hooks-preview-2fefb723-8232-43c0-aa3f-417c55d0949a.json create mode 100644 packages/react-components/semantic-style-hooks-preview/library/.babelrc.json create mode 100644 packages/react-components/semantic-style-hooks-preview/library/.eslintrc.json create mode 100644 packages/react-components/semantic-style-hooks-preview/library/.swcrc create mode 100644 packages/react-components/semantic-style-hooks-preview/library/LICENSE create mode 100644 packages/react-components/semantic-style-hooks-preview/library/README.md create mode 100644 packages/react-components/semantic-style-hooks-preview/library/config/api-extractor.json create mode 100644 packages/react-components/semantic-style-hooks-preview/library/config/tests.js create mode 100644 packages/react-components/semantic-style-hooks-preview/library/docs/Spec.md create mode 100644 packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md create mode 100644 packages/react-components/semantic-style-hooks-preview/library/jest.config.js create mode 100644 packages/react-components/semantic-style-hooks-preview/library/package.json create mode 100644 packages/react-components/semantic-style-hooks-preview/library/project.json create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticCompoundButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticMenuButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticSplitButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticToggleButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/testing/isConformant.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/tsconfig.json create mode 100644 packages/react-components/semantic-style-hooks-preview/library/tsconfig.lib.json create mode 100644 packages/react-components/semantic-style-hooks-preview/library/tsconfig.spec.json create mode 100644 packages/react-components/semantic-style-hooks-preview/stories/.eslintrc.json create mode 100644 packages/react-components/semantic-style-hooks-preview/stories/.storybook/main.js create mode 100644 packages/react-components/semantic-style-hooks-preview/stories/.storybook/preview.js create mode 100644 packages/react-components/semantic-style-hooks-preview/stories/.storybook/tsconfig.json create mode 100644 packages/react-components/semantic-style-hooks-preview/stories/README.md create mode 100644 packages/react-components/semantic-style-hooks-preview/stories/package.json create mode 100644 packages/react-components/semantic-style-hooks-preview/stories/project.json create mode 100644 packages/react-components/semantic-style-hooks-preview/stories/src/.gitkeep create mode 100644 packages/react-components/semantic-style-hooks-preview/stories/src/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/stories/tsconfig.json create mode 100644 packages/react-components/semantic-style-hooks-preview/stories/tsconfig.lib.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 6bc3c7f3db4fc..ee06811d02bca 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -338,6 +338,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 0000000000000..213ae919bd413 --- /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 and button example", + "packageName": "@fluentui/semantic-style-hooks-preview", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts index 300a93028f646..e2ed9b065e57f 100644 --- a/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts @@ -4,7 +4,6 @@ import { tokens } from '@fluentui/react-theme'; import { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { ButtonSlots, ButtonState } from './Button.types'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const buttonClassNames: SlotClassNames = { root: 'fui-Button', @@ -19,19 +18,11 @@ 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 boxShadowStrokeWidthThinMoz = `calc(${tokens.strokeWidthThin} + 0.25px)`; const useRootBaseClassName = makeResetStyles({ alignItems: 'center', @@ -44,39 +35,39 @@ const useRootBaseClassName = makeResetStyles({ margin: 0, overflow: 'hidden', - backgroundColor: semanticTokens.backgroundCtrlNeutralRest, - color: semanticTokens.foregroundCtrlNeutralPrimaryRest, - border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeCtrlOnNeutralRest}`, + backgroundColor: tokens.colorNeutralBackground1, + color: tokens.colorNeutralForeground1, + border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`, - fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontFamily: tokens.fontFamilyBase, outlineStyle: 'none', ':hover': { - backgroundColor: semanticTokens.backgroundCtrlNeutralHover, - borderColor: semanticTokens.strokeCtrlOnNeutralHover, - color: semanticTokens.foregroundCtrlNeutralPrimaryHover, + backgroundColor: tokens.colorNeutralBackground1Hover, + borderColor: tokens.colorNeutralStroke1Hover, + color: tokens.colorNeutralForeground1Hover, cursor: 'pointer', }, ':hover:active': { - backgroundColor: semanticTokens.backgroundCtrlNeutralPressed, - borderColor: semanticTokens.strokeCtrlOnNeutralPressed, - color: semanticTokens.foregroundCtrlNeutralPrimaryPressed, + backgroundColor: tokens.colorNeutralBackground1Pressed, + borderColor: tokens.colorNeutralStroke1Pressed, + color: tokens.colorNeutralForeground1Pressed, outlineStyle: 'none', }, - padding: `${semanticTokens.paddingCtrlTextTop} ${paddingHorizontalNoIcon} ${semanticTokens.paddingCtrlTextBottom} ${paddingHorizontalNoIcon}`, - minWidth: minButtonWidth, - borderRadius: semanticTokens.cornerCtrlRest, + padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`, + minWidth: '96px', + borderRadius: tokens.borderRadiusMedium, - fontSize: semanticTokens.textRampItemBodyFontSize, - fontWeight: semanticTokens.textCtrlButtonWeightDefault, - lineHeight: semanticTokens.textRampItemBodyLineHeight, + fontSize: tokens.fontSizeBase300, + fontWeight: tokens.fontWeightSemibold, + lineHeight: tokens.lineHeightBase300, // Transition styles - // TODO: Motion semantic tokens are still in definition phase, refactor these later + transitionDuration: tokens.durationFaster, transitionProperty: 'background, border, color', transitionTimingFunction: tokens.curveEasyEase, @@ -108,12 +99,13 @@ const useRootBaseClassName = makeResetStyles({ }, // Focus styles + ...createCustomFocusIndicatorStyle({ - borderColor: semanticTokens.ctrlFocusInnerStroke, - borderRadius: semanticTokens.cornerCtrlRest, + borderColor: tokens.colorStrokeFocus2, + borderRadius: tokens.borderRadiusMedium, borderWidth: '1px', - outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusOuterStroke}`, - boxShadow: `0 0 0 ${semanticTokens.ctrlFocusInnerStrokeWidth} ${semanticTokens.ctrlFocusInnerStroke} + outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`, + boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset `, zIndex: 1, @@ -122,7 +114,7 @@ const useRootBaseClassName = makeResetStyles({ // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642) '@supports (-moz-appearance:button)': { ...createCustomFocusIndicatorStyle({ - boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.ctrlFocusInnerStroke} + boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset `, }), @@ -134,47 +126,41 @@ const useIconBaseClassName = makeResetStyles({ display: 'inline-flex', justifyContent: 'center', - fontSize: semanticTokens.sizeCtrlIcon, - height: semanticTokens.sizeCtrlIcon, - width: semanticTokens.sizeCtrlIcon, + fontSize: '20px', + height: '20px', + width: '20px', - [iconSpacingVar]: `calc(${semanticTokens._ctrlButtonGapInsideDefault} + ${semanticTokens.paddingCtrlTextSide})`, + [iconSpacingVar]: tokens.spacingHorizontalSNudge, }); const useRootStyles = makeStyles({ // Appearance variations outline: { - backgroundColor: semanticTokens.backgroundCtrlOutlineRest, - border: `${semanticTokens.strokeWidthCtrlOutlineRest} solid ${semanticTokens.strokeCtrlOnOutlineRest}`, - color: semanticTokens.foregroundCtrlOnOutlineRest, + backgroundColor: tokens.colorTransparentBackground, + ':hover': { - backgroundColor: semanticTokens.backgroundCtrlOutlineHover, - border: `${semanticTokens.strokeWidthCtrlOutlineHover} solid ${semanticTokens.strokeCtrlOnOutlineHover}`, - color: semanticTokens.foregroundCtrlOnOutlineHover, + backgroundColor: tokens.colorTransparentBackgroundHover, }, ':hover:active': { - backgroundColor: semanticTokens.backgroundCtrlOutlinePressed, - border: `${semanticTokens.strokeWidthCtrlOutlinePressed} solid ${semanticTokens.strokeCtrlOnOutlinePressed}`, - color: semanticTokens.foregroundCtrlOnOutlinePressed, + backgroundColor: tokens.colorTransparentBackgroundPressed, }, }, - primary: { - backgroundColor: semanticTokens.backgroundCtrlBrandRest, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandRest), - color: semanticTokens.foregroundCtrlOnBrandRest, + backgroundColor: tokens.colorBrandBackground, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForegroundOnBrand, ':hover': { - backgroundColor: semanticTokens.backgroundCtrlBrandHover, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandHover), - color: semanticTokens.foregroundCtrlOnBrandHover, + backgroundColor: tokens.colorBrandBackgroundHover, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForegroundOnBrand, }, ':hover:active': { - backgroundColor: semanticTokens.backgroundCtrlBrandPressed, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandPressed), - color: semanticTokens.foregroundCtrlOnBrandPressed, + backgroundColor: tokens.colorBrandBackgroundPressed, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForegroundOnBrand, }, '@media (forced-colors: active)': { @@ -200,17 +186,14 @@ const useRootStyles = makeStyles({ /* 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, - }, + backgroundColor: tokens.colorSubtleBackground, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForeground2, ':hover': { - backgroundColor: semanticTokens.backgroundCtrlSubtleHover, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleHover), - color: semanticTokens.foregroundCtrlOnSubtleHover, + backgroundColor: tokens.colorSubtleBackgroundHover, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForeground2Hover, [`& .${iconFilledClassName}`]: { display: 'inline', }, @@ -218,14 +201,14 @@ const useRootStyles = makeStyles({ display: 'none', }, [`& .${buttonClassNames.icon}`]: { - color: semanticTokens.foregroundCtrlIconOnSubtleHover, + color: tokens.colorNeutralForeground2BrandHover, }, }, ':hover:active': { - backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtlePressed), - color: semanticTokens.foregroundCtrlOnSubtlePressed, + backgroundColor: tokens.colorSubtleBackgroundPressed, + ...shorthands.borderColor('transparent'), + color: tokens.colorNeutralForeground2Pressed, [`& .${iconFilledClassName}`]: { display: 'inline', }, @@ -233,7 +216,7 @@ const useRootStyles = makeStyles({ display: 'none', }, [`& .${buttonClassNames.icon}`]: { - color: semanticTokens.foregroundCtrlIconOnSubtlePressed, + color: tokens.colorNeutralForeground2BrandPressed, }, }, @@ -257,12 +240,12 @@ const useRootStyles = makeStyles({ transparent: { backgroundColor: tokens.colorTransparentBackground, ...shorthands.borderColor('transparent'), - color: semanticTokens.foregroundCtrlOnTransparentRest, + color: tokens.colorNeutralForeground2, ':hover': { backgroundColor: tokens.colorTransparentBackgroundHover, ...shorthands.borderColor('transparent'), - color: semanticTokens.foregroundCtrlOnTransparentHover, + color: tokens.colorNeutralForeground2BrandHover, [`& .${iconFilledClassName}`]: { display: 'inline', }, @@ -274,7 +257,7 @@ const useRootStyles = makeStyles({ ':hover:active': { backgroundColor: tokens.colorTransparentBackgroundPressed, ...shorthands.borderColor('transparent'), - color: semanticTokens.foregroundCtrlOnTransparentPressed, + color: tokens.colorNeutralForeground2BrandPressed, [`& .${iconFilledClassName}`]: { display: 'inline', }, @@ -296,83 +279,60 @@ const useRootStyles = makeStyles({ }, // Shape variations - circular: { borderRadius: semanticTokens.cornerCircular }, + circular: { borderRadius: tokens.borderRadiusCircular }, rounded: { /* The borderRadius rounded styles are handled in the size variations */ }, - square: { borderRadius: semanticTokens.cornerZero }, + square: { borderRadius: tokens.borderRadiusNone }, // Size variations small: { - minWidth: minButtonSmWidth, - padding: `${buttonSpacingSmall} ${paddingSmHorizontalNoIcon}`, - borderRadius: semanticTokens.cornerCtrlSmRest, + minWidth: '64px', + padding: `${buttonSpacingSmall} ${tokens.spacingHorizontalS}`, + borderRadius: tokens.borderRadiusMedium, - fontSize: semanticTokens.textRampSmItemBodyFontSize, - fontWeight: semanticTokens.textCtrlButtonWeightDefault, - lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + fontSize: tokens.fontSizeBase200, + fontWeight: tokens.fontWeightRegular, + lineHeight: tokens.lineHeightBase200, }, 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, + minWidth: '96px', + padding: `${buttonSpacingLarge} ${tokens.spacingHorizontalL}`, + borderRadius: tokens.borderRadiusMedium, - fontSize: semanticTokens.textRampLgItemBodyFontSize, - fontWeight: semanticTokens.textCtrlButtonWeightDefault, - lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + fontSize: tokens.fontSizeBase400, + fontWeight: tokens.fontWeightSemibold, + lineHeight: tokens.lineHeightBase400, }, 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, + backgroundColor: tokens.colorNeutralBackgroundDisabled, + ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), + color: tokens.colorNeutralForegroundDisabled, + cursor: 'not-allowed', [`& .${buttonClassNames.icon}`]: { - color: semanticTokens.foregroundCtrlIconOnNeutralDisabled, + color: tokens.colorNeutralForegroundDisabled, }, ':hover': { - backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + backgroundColor: tokens.colorNeutralBackgroundDisabled, + ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), + color: tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', @@ -383,14 +343,14 @@ const useRootDisabledStyles = makeStyles({ display: 'inline', }, [`& .${buttonClassNames.icon}`]: { - color: semanticTokens.foregroundCtrlIconOnNeutralDisabled, + color: tokens.colorNeutralForegroundDisabled, }, }, ':hover:active': { - backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + backgroundColor: tokens.colorNeutralBackgroundDisabled, + ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), + color: tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', @@ -401,7 +361,7 @@ const useRootDisabledStyles = makeStyles({ display: 'inline', }, [`& .${buttonClassNames.icon}`]: { - color: semanticTokens.foregroundCtrlIconOnNeutralDisabled, + color: tokens.colorNeutralForegroundDisabled, }, }, }, @@ -446,8 +406,6 @@ const useRootDisabledStyles = makeStyles({ // Appearance variations outline: { backgroundColor: tokens.colorTransparentBackground, - color: semanticTokens.foregroundCtrlOnOutlineDisabled, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnOutlineDisabled), ':hover': { backgroundColor: tokens.colorTransparentBackground, @@ -458,42 +416,34 @@ const useRootDisabledStyles = makeStyles({ }, }, primary: { - ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandDisabled), + ...shorthands.borderColor('transparent'), ':hover': { - ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandDisabled), + ...shorthands.borderColor('transparent'), }, ':hover:active': { - ...shorthands.borderColor(semanticTokens.strokeCtrlOnBrandDisabled), + ...shorthands.borderColor('transparent'), }, }, secondary: { - color: semanticTokens.foregroundCtrlNeutralSecondaryDisabled, + /* The secondary styles are exactly the same as the base styles. */ }, subtle: { - backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, - color: semanticTokens.foregroundCtrlOnSubtleDisabled, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleDisabled), + backgroundColor: tokens.colorTransparentBackground, + ...shorthands.borderColor('transparent'), - [`& .${buttonClassNames.icon}`]: { - color: semanticTokens.foregroundCtrlIconOnSubtleDisabled, - }, ':hover': { - backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleDisabled), + backgroundColor: tokens.colorTransparentBackground, + ...shorthands.borderColor('transparent'), }, ':hover:active': { - backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnSubtleDisabled), + backgroundColor: tokens.colorTransparentBackground, + ...shorthands.borderColor('transparent'), }, }, transparent: { - [`& .${buttonClassNames.icon}`]: { - color: semanticTokens.foregroundCtrlOnTransparentDisabled, - }, - color: semanticTokens.foregroundCtrlOnTransparentDisabled, backgroundColor: tokens.colorTransparentBackground, ...shorthands.borderColor('transparent'), @@ -511,59 +461,58 @@ const useRootDisabledStyles = makeStyles({ const useRootFocusStyles = makeStyles({ // Shape variations - circular: createCustomFocusIndicatorStyle({ borderRadius: semanticTokens.cornerCircular }), + circular: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }), rounded: { /* The rounded styles are exactly the same as the base styles. */ }, - square: createCustomFocusIndicatorStyle({ borderRadius: semanticTokens.cornerZero }), + square: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }), + // 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`, + ...shorthands.borderColor(tokens.colorStrokeFocus2), + boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`, ':hover': { - boxShadow: `${tokens.shadow2}, 0 0 0 ${semanticTokens.ctrlFocusInnerStrokeWidth} ${semanticTokens.ctrlFocusInnerStroke} inset`, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandHover), + boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`, + ...shorthands.borderColor(tokens.colorStrokeFocus2), }, }), // 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`, + boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`, ':hover': { - boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.strokeCtrlOnActiveBrandHover} inset`, + boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`, }, }), }, }, + // Size variations - small: createCustomFocusIndicatorStyle({ - borderRadius: `calc(${semanticTokens.cornerCtrlSmRest} - ${semanticTokens.ctrlFocusOuterStrokeWidth})`, - }), + small: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusSmall }), medium: { /* defined in base styles */ }, - large: createCustomFocusIndicatorStyle({ - borderRadius: `calc(${semanticTokens.cornerCtrlLgRest} + ${semanticTokens.ctrlFocusOuterStrokeWidth})`, - }), + large: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusLarge }), }); const useRootIconOnlyStyles = makeStyles({ // Size variations small: { - padding: `${buttonSpacingSmallWithIcon} ${semanticTokens.paddingCtrlSmHorizontalIconOnly}`, + padding: buttonSpacingSmallWithIcon, + minWidth: '24px', maxWidth: '24px', }, medium: { - padding: `${buttonSpacingMedium} ${semanticTokens.paddingCtrlHorizontalIconOnly}`, + padding: buttonSpacingMedium, + minWidth: '32px', maxWidth: '32px', }, large: { - padding: `${buttonSpacingLargeWithIcon} ${semanticTokens.paddingCtrlLgHorizontalIconOnly}`, + padding: buttonSpacingLargeWithIcon, minWidth: '40px', maxWidth: '40px', @@ -573,21 +522,21 @@ const useRootIconOnlyStyles = makeStyles({ const useIconStyles = makeStyles({ // Size variations small: { - fontSize: semanticTokens.sizeCtrlSmIcon, - height: semanticTokens.sizeCtrlSmIcon, - width: semanticTokens.sizeCtrlSmIcon, + fontSize: '20px', + height: '20px', + width: '20px', - [iconSpacingVar]: `calc(${semanticTokens.gapInsideCtrlSmDefault} + ${semanticTokens.paddingCtrlTextSide})`, + [iconSpacingVar]: tokens.spacingHorizontalXS, }, medium: { /* defined in base styles */ }, large: { - fontSize: semanticTokens.sizeCtrlLgIcon, - height: semanticTokens.sizeCtrlLgIcon, - width: semanticTokens.sizeCtrlLgIcon, + fontSize: '24px', + height: '24px', + width: '24px', - [iconSpacingVar]: `calc(${semanticTokens.gapInsideCtrlLgDefault} + ${semanticTokens.paddingCtrlTextSide})`, + [iconSpacingVar]: tokens.spacingHorizontalSNudge, }, // Icon position variations @@ -620,14 +569,8 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => { 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 diff --git a/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts index f8281ccf8225b..accdc3b2d9f13 100644 --- a/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts @@ -1,5 +1,4 @@ import { tokens } from '@fluentui/react-theme'; -import * as semanticTokens from '@fluentui/semantic-tokens'; import { mergeClasses, makeStyles } from '@griffel/react'; import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -18,18 +17,18 @@ const useRootStyles = makeStyles({ height: 'auto', [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlNeutralSecondaryRest, + color: tokens.colorNeutralForeground2, }, ':hover': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlNeutralSecondaryHover, + color: tokens.colorNeutralForeground2Hover, }, }, ':hover:active': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlNeutralSecondaryPressed, + color: tokens.colorNeutralForeground2Pressed, }, }, }, @@ -57,18 +56,18 @@ const useRootStyles = makeStyles({ }, primary: { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlOnBrandRest, + color: tokens.colorNeutralForegroundOnBrand, }, ':hover': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlOnBrandHover, + color: tokens.colorNeutralForegroundOnBrand, }, }, ':hover:active': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlOnBrandPressed, + color: tokens.colorNeutralForegroundOnBrand, }, }, @@ -83,18 +82,18 @@ const useRootStyles = makeStyles({ }, subtle: { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlOnSubtleRest, + color: tokens.colorNeutralForeground2, }, ':hover': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlOnSubtleHover, + color: tokens.colorNeutralForeground2Hover, }, }, ':hover:active': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlOnSubtlePressed, + color: tokens.colorNeutralForeground2Pressed, }, }, @@ -113,18 +112,18 @@ const useRootStyles = makeStyles({ }, transparent: { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlOnTransparentRest, + color: tokens.colorNeutralForeground2, }, ':hover': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlOnTransparentHover, + color: tokens.colorNeutralForeground2BrandHover, }, }, ':hover:active': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlOnTransparentPressed, + color: tokens.colorNeutralForeground2BrandPressed, }, }, }, @@ -133,37 +132,37 @@ const useRootStyles = makeStyles({ small: { padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`, - fontSize: semanticTokens.textRampItemBodyFontSize, - lineHeight: semanticTokens.textRampItemBodyLineHeight, + fontSize: tokens.fontSizeBase300, + lineHeight: tokens.lineHeightBase300, }, medium: { padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`, - fontSize: semanticTokens.textRampItemBodyFontSize, - lineHeight: semanticTokens.textRampItemBodyLineHeight, + fontSize: tokens.fontSizeBase300, + lineHeight: tokens.lineHeightBase300, }, large: { padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`, - fontSize: semanticTokens.textRampLgItemBodyFontSize, - lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + fontSize: tokens.fontSizeBase400, + lineHeight: tokens.lineHeightBase400, }, // Disabled styles disabled: { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + color: tokens.colorNeutralForegroundDisabled, }, ':hover': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + color: tokens.colorNeutralForegroundDisabled, }, }, ':hover:active': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + color: tokens.colorNeutralForegroundDisabled, }, }, }, @@ -242,18 +241,18 @@ const useSecondaryContentStyles = makeStyles({ // Base styles base: { lineHeight: '100%', - fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontWeight: tokens.fontWeightRegular, }, // Size variations small: { - fontSize: semanticTokens.textRampSmItemBodyFontSize, + fontSize: tokens.fontSizeBase200, }, medium: { - fontSize: semanticTokens.textRampSmItemBodyFontSize, + fontSize: tokens.fontSizeBase200, }, large: { - fontSize: semanticTokens.textRampItemBodyFontSize, + fontSize: tokens.fontSizeBase300, }, }); diff --git a/packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts index f4a616e1d9d61..635476a2407ec 100644 --- a/packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts @@ -4,7 +4,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; import { mergeClasses, makeStyles, shorthands } from '@griffel/react'; import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles'; import type { MenuButtonSlots, MenuButtonState } from './MenuButton.types'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const menuButtonClassNames: SlotClassNames = { root: 'fui-MenuButton', @@ -25,22 +24,8 @@ const useRootExpandedStyles = makeStyles({ // Appearance variations outline: { ...shorthands.borderColor(tokens.colorNeutralStroke1Selected), - ...shorthands.borderWidth(semanticTokens.strokeWidthCtrlOutlineSelected), + ...shorthands.borderWidth(tokens.strokeWidthThicker), 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, @@ -96,25 +81,25 @@ const useMenuIconStyles = makeStyles({ small: { fontSize: '12px', height: '12px', - lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + lineHeight: tokens.lineHeightBase200, width: '12px', }, medium: { fontSize: '12px', height: '12px', - lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + lineHeight: tokens.lineHeightBase200, width: '12px', }, large: { fontSize: '16px', height: '16px', - lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + lineHeight: tokens.lineHeightBase400, width: '16px', }, // Not-icon only notIconOnly: { - marginLeft: semanticTokens.gapInsideCtrlSmDefault, + marginLeft: tokens.spacingHorizontalXS, }, }); diff --git a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts index 067cca7496436..f5b9d126160cc 100644 --- a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts @@ -1,9 +1,8 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { SplitButtonSlots, SplitButtonState } from './SplitButton.types'; -import * as semanticTokens from '@fluentui/semantic-tokens'; -import { tokens } from '@fluentui/react-theme'; export const splitButtonClassNames: SlotClassNames = { root: 'fui-SplitButton', @@ -51,39 +50,22 @@ const useRootStyles = makeStyles({ // 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 }, - }, + /* No styles */ }, primary: { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: semanticTokens.strokeCtrlDividerOnBrand, + borderRightColor: tokens.colorNeutralStrokeOnBrand, }, ':hover': { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: semanticTokens.strokeCtrlDividerOnBrand, + borderRightColor: tokens.colorNeutralStrokeOnBrand, }, }, ':hover:active': { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: semanticTokens.strokeCtrlDividerOnBrand, + borderRightColor: tokens.colorNeutralStrokeOnBrand, }, }, @@ -110,18 +92,18 @@ const useRootStyles = makeStyles({ }, subtle: { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: semanticTokens.strokeCtrlDividerOnSubtle, + borderRightColor: tokens.colorTransparentBackground, }, ':hover': { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: semanticTokens.strokeCtrlDividerOnSubtle, + borderRightColor: tokens.colorTransparentBackgroundHover, }, }, ':hover:active': { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: semanticTokens.strokeCtrlDividerOnSubtle, + borderRightColor: tokens.colorTransparentBackgroundPressed, }, }, }, @@ -151,18 +133,18 @@ const useRootStyles = makeStyles({ // Disabled styles disabled: { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: semanticTokens.strokeCtrlOnNeutralDisabled, + borderRightColor: tokens.colorNeutralStrokeDisabled, }, ':hover': { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: semanticTokens.strokeCtrlOnNeutralDisabled, + borderRightColor: tokens.colorNeutralStrokeDisabled, }, }, ':hover:active': { [`& .${splitButtonClassNames.primaryActionButton}`]: { - borderRightColor: semanticTokens.strokeCtrlOnNeutralDisabled, + borderRightColor: tokens.colorNeutralStrokeDisabled, }, }, }, diff --git a/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts index 5fc811aa67285..34328b156211b 100644 --- a/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts +++ b/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts @@ -2,11 +2,10 @@ 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 { buttonClassNames, useButtonStyles_unstable } from '../Button/useButtonStyles.styles'; +import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { ButtonSlots } from '../Button/Button.types'; import type { ToggleButtonState } from './ToggleButton.types'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const toggleButtonClassNames: SlotClassNames = { root: 'fui-ToggleButton', @@ -17,9 +16,10 @@ const useRootCheckedStyles = makeStyles({ // Base styles base: { backgroundColor: tokens.colorNeutralBackground1Selected, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralRest), + ...shorthands.borderColor(tokens.colorNeutralStroke1), color: tokens.colorNeutralForeground1Selected, - ...shorthands.borderWidth(semanticTokens.strokeWidthDefault), + + ...shorthands.borderWidth(tokens.strokeWidthThin), [`& .${iconFilledClassName}`]: { display: 'inline', @@ -29,15 +29,15 @@ const useRootCheckedStyles = makeStyles({ }, ':hover': { - backgroundColor: semanticTokens.backgroundCtrlNeutralHover, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralHover), - color: semanticTokens.foregroundCtrlNeutralPrimaryHover, + backgroundColor: tokens.colorNeutralBackground1Hover, + ...shorthands.borderColor(tokens.colorNeutralStroke1Hover), + color: tokens.colorNeutralForeground1Hover, }, ':hover:active': { - backgroundColor: semanticTokens.backgroundCtrlNeutralPressed, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralPressed), - color: semanticTokens.foregroundCtrlNeutralPrimaryPressed, + backgroundColor: tokens.colorNeutralBackground1Pressed, + ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed), + color: tokens.colorNeutralForeground1Pressed, }, }, @@ -67,26 +67,23 @@ const useRootCheckedStyles = makeStyles({ }, }, }, + // Appearance variations outline: { backgroundColor: tokens.colorTransparentBackgroundSelected, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnOutlineRest), - ...shorthands.borderWidth(semanticTokens.strokeWidthCtrlOutlineSelected), + ...shorthands.borderColor(tokens.colorNeutralStroke1), + ...shorthands.borderWidth(tokens.strokeWidthThicker), ':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), + ...shorthands.borderColor(tokens.colorNeutralStroke1), }), }, primary: { @@ -114,10 +111,6 @@ const useRootCheckedStyles = makeStyles({ ...shorthands.borderColor('transparent'), color: tokens.colorNeutralForeground2Selected, - [`& .${buttonClassNames.icon}`]: { - color: tokens.colorNeutralForeground2BrandSelected, - }, - ':hover': { backgroundColor: tokens.colorSubtleBackgroundHover, ...shorthands.borderColor('transparent'), @@ -152,20 +145,20 @@ const useRootCheckedStyles = makeStyles({ const useRootDisabledStyles = makeStyles({ // Base styles base: { - backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + backgroundColor: tokens.colorNeutralBackgroundDisabled, + ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), + color: tokens.colorNeutralForegroundDisabled, ':hover': { - backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + backgroundColor: tokens.colorNeutralBackgroundDisabled, + ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), + color: tokens.colorNeutralForegroundDisabled, }, ':hover:active': { - backgroundColor: semanticTokens.backgroundCtrlNeutralDisabled, - ...shorthands.borderColor(semanticTokens.strokeCtrlOnNeutralDisabled), - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + backgroundColor: tokens.colorNeutralBackgroundDisabled, + ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), + color: tokens.colorNeutralForegroundDisabled, }, }, @@ -188,16 +181,16 @@ const useRootDisabledStyles = makeStyles({ /* The secondary styles are exactly the same as the base styles. */ }, subtle: { - backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + backgroundColor: tokens.colorTransparentBackground, ...shorthands.borderColor('transparent'), ':hover': { - backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + backgroundColor: tokens.colorTransparentBackgroundHover, ...shorthands.borderColor('transparent'), }, ':hover:active': { - backgroundColor: semanticTokens.backgroundCtrlSubtleDisabled, + backgroundColor: tokens.colorTransparentBackgroundPressed, ...shorthands.borderColor('transparent'), }, }, diff --git a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx index 6719fc1dde37a..3cf9edf2ce248 100644 --- a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx +++ b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx @@ -16,6 +16,8 @@ import { defaultTheme, ThemeIds } from '../theme'; import { DIR_ID, THEME_ID } from '../constants'; import { FluentStoryContext } from '../hooks'; import { isDecoratorDisabled } from '../utils/isDecoratorDisabled'; +import { CustomStyleHooksProvider_unstable as CustomStyleHooksProvider } from '@fluentui/react-shared-contexts'; +import { SEMANTIC_STYLE_HOOKS } from '@fluentui/semantic-style-hooks-preview'; const themes: Record = { 'web-light': webLightTheme, @@ -47,7 +49,9 @@ export const withFluentProvider = (StoryFn: () => JSXElement, context: FluentSto return ( - {isVrTest ? StoryFn() : {StoryFn()}} + + {isVrTest ? StoryFn() : {StoryFn()}} + ); }; 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 0000000000000..630deaf765c49 --- /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 0000000000000..ceea884c70dcc --- /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 0000000000000..b4ffa86dee306 --- /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 0000000000000..ba9922bffd038 --- /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 0000000000000..0e4086b1d87cd --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/README.md @@ -0,0 +1,5 @@ +# @fluentui/semantic-style-hooks-preview + +**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. 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 0000000000000..8d482156d10d5 --- /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 0000000000000..2e211ae9e2142 --- /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 0000000000000..b0bbe7444a92d --- /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 0000000000000..af60d81c1f5a3 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -0,0 +1,34 @@ +## 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 { ButtonState } from '@fluentui/react-button'; +import { CompoundButtonState } from '@fluentui/react-button'; +import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider'; +import { MenuButtonState } from '@fluentui/react-button'; +import { SplitButtonState } from '@fluentui/react-button'; +import { ToggleButtonState } from '@fluentui/react-button'; + +// @public (undocumented) +export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks; + +// @public (undocumented) +export const useSemanticButtonStyles: (_state: unknown) => ButtonState; + +// @public (undocumented) +export const useSemanticCompoundButtonStyles: (_state: unknown) => CompoundButtonState; + +// @public (undocumented) +export const useSemanticMenuButtonStyles: (_state: unknown) => MenuButtonState; + +// @public (undocumented) +export const useSemanticSplitButtonStyles: (_state: unknown) => SplitButtonState; + +// @public (undocumented) +export const useSemanticToggleButtonStyles: (_state: unknown) => ToggleButtonState; + +// (No @packageDocumentation comment for this package) + +``` diff --git a/packages/react-components/semantic-style-hooks-preview/library/jest.config.js b/packages/react-components/semantic-style-hooks-preview/library/jest.config.js new file mode 100644 index 0000000000000..d4681dc8a030c --- /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 0000000000000..2c2bbf4648ab6 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -0,0 +1,60 @@ +{ + "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-button": "^9.4.6", + "@fluentui/react-icons": "^2.0.245", + "@fluentui/react-tabster": "^9.24.6", + "@fluentui/react-jsx-runtime": "^9.0.54", + "@fluentui/react-provider": "^9.20.6", + "@fluentui/react-shared-contexts": "^9.23.1", + "@fluentui/react-theme": "^9.1.24", + "@fluentui/react-utilities": "^9.19.0", + "@fluentui/semantic-tokens": "0.0.0-alpha.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 0000000000000..40d7448b53491 --- /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/Button/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/index.ts new file mode 100644 index 0000000000000..bf8519b437057 --- /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 0000000000000..b20437dee453e --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticButtonStyles.styles.ts @@ -0,0 +1,660 @@ +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, 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( + 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], + + // User provided class name + state.root.className, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + buttonClassNames.icon, + iconBaseClassName, + !!state.root.children && iconStyles[iconPosition], + iconStyles[size], + state.icon.className, + 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 0000000000000..6170dc19d007c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticCompoundButtonStyles.styles.ts @@ -0,0 +1,317 @@ +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, 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( + 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], + + // User provided class name + state.root.className, + getSlotClassNameProp_unstable(state.root), + ); + + state.contentContainer.className = mergeClasses( + compoundButtonClassNames.contentContainer, + contentContainerStyles.base, + state.contentContainer.className, + getSlotClassNameProp_unstable(state.contentContainer), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + compoundButtonClassNames.icon, + iconStyles.base, + state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], + state.icon.className, + getSlotClassNameProp_unstable(state.icon), + ); + } + + if (state.secondaryContent) { + state.secondaryContent.className = mergeClasses( + compoundButtonClassNames.secondaryContent, + secondaryContentStyles.base, + secondaryContentStyles[size], + state.secondaryContent.className, + 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 0000000000000..37c726c62eaa0 --- /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, 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( + menuButtonClassNames.root, + state.root['aria-expanded'] && rootExpandedStyles.base, + state.root['aria-expanded'] && rootExpandedStyles[state.appearance], + state.root.className, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + menuButtonClassNames.icon, + state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, + state.icon.className, + getSlotClassNameProp_unstable(state.icon), + ); + } + + if (state.menuIcon) { + state.menuIcon.className = mergeClasses( + menuButtonClassNames.menuIcon, + menuIconStyles.base, + menuIconStyles[state.size], + !state.iconOnly && menuIconStyles.notIconOnly, + state.menuIcon.className, + 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 0000000000000..98d28067cfccb --- /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, 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( + splitButtonClassNames.root, + rootStyles.base, + appearance && rootStyles[appearance], + (disabled || disabledFocusable) && rootStyles.disabled, + (disabled || disabledFocusable) && rootStyles.disabledHighContrast, + state.root.className, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.menuButton) { + state.menuButton.className = mergeClasses( + splitButtonClassNames.menuButton, + focusStyles.menuButton, + state.menuButton.className, + getSlotClassNameProp_unstable(state.menuButton), + ); + } + + if (state.primaryActionButton) { + state.primaryActionButton.className = mergeClasses( + splitButtonClassNames.primaryActionButton, + focusStyles.primaryActionButton, + state.primaryActionButton.className, + 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 0000000000000..e9b276a6ea1ba --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticToggleButtonStyles.styles.ts @@ -0,0 +1,297 @@ +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, 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( + 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], + + // User provided class name + state.root.className, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + toggleButtonClassNames.icon, + checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, + iconCheckedStyles.highContrast, + state.icon.className, + getSlotClassNameProp_unstable(state.icon), + ); + } + + useSemanticButtonStyles(state); + + 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 0000000000000..c30d01eded18f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -0,0 +1,18 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider'; +import { + useSemanticButtonStyles, + useSemanticCompoundButtonStyles, + useSemanticMenuButtonStyles, + useSemanticSplitButtonStyles, + useSemanticToggleButtonStyles, +} from './Button/index'; + +export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { + useButtonStyles_unstable: useSemanticButtonStyles, + useToggleButtonStyles_unstable: useSemanticToggleButtonStyles, + useSplitButtonStyles_unstable: useSemanticSplitButtonStyles, + useMenuButtonStyles_unstable: useSemanticMenuButtonStyles, + useCompoundButtonStyles_unstable: useSemanticCompoundButtonStyles, + // ... more component style overrides +}; 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 0000000000000..ad4135289e5af --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -0,0 +1,8 @@ +export { SEMANTIC_STYLE_HOOKS } from './component-styles/semanticStyleHooks'; +export { + useSemanticButtonStyles, + useSemanticCompoundButtonStyles, + useSemanticMenuButtonStyles, + useSemanticSplitButtonStyles, + useSemanticToggleButtonStyles, +} from './component-styles/Button/index'; 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 0000000000000..a3d988f29a172 --- /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 0000000000000..32bdbdf1ac26f --- /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 0000000000000..53066fdd11fff --- /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 0000000000000..911456fe4b4d9 --- /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 0000000000000..a41120835dcc9 --- /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 0000000000000..b380cd896aea1 --- /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 0000000000000..94455f782364e --- /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 0000000000000..4cdd1ce9d006f --- /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 0000000000000..cff1b737698c6 --- /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 0000000000000..06b14912c5ad9 --- /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 0000000000000..059387ca1b818 --- /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 0000000000000..e69de29bb2d1d 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 0000000000000..cb0ff5c3b541f --- /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 0000000000000..efc50169d1df1 --- /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 0000000000000..9486b224643d9 --- /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/scripts/monorepo/src/getDependencies.spec.js b/scripts/monorepo/src/getDependencies.spec.js index d7c662973b524..ce702b4761ac9 100644 --- a/scripts/monorepo/src/getDependencies.spec.js +++ b/scripts/monorepo/src/getDependencies.spec.js @@ -32,6 +32,11 @@ describe(`#getDependencies`, () => { "isTopLevel": true, "name": "react-jsx-runtime", }, + Object { + "dependencyType": "dependencies", + "isTopLevel": true, + "name": "semantic-tokens", + }, Object { "dependencyType": "dependencies", "isTopLevel": false, diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json index 03a483b6d06bc..c63c0530194f4 100644 --- a/tsconfig.base.all.json +++ b/tsconfig.base.all.json @@ -249,12 +249,18 @@ ], "@fluentui/recipes": ["packages/react-components/recipes/src/index.ts"], "@fluentui/storybook-llms-extractor": ["tools/storybook-llms-extractor/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/theme-designer": ["packages/react-components/theme-designer/src/index.ts"], "@fluentui/tokens": ["packages/tokens/src/index.ts"], - "@fluentui/semantic-tokens": ["packages/semantic-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 08b21d52b9514..a08f4cfc96fd0 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -205,6 +205,12 @@ ], "@fluentui/recipes": ["packages/react-components/recipes/src/index.ts"], "@fluentui/storybook-llms-extractor": ["tools/storybook-llms-extractor/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/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 d86ffaf7df1f1..2cc2e8bb4c18c 100644 --- a/tsconfig.base.wc.json +++ b/tsconfig.base.wc.json @@ -15,7 +15,8 @@ "@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/semantic-tokens": ["packages/semantic-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"] } } } From d789fc876e2dfc7a3dbe83125ca91dac058f203a Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Fri, 4 Jul 2025 14:03:23 -0700 Subject: [PATCH 30/66] Extended-tokens: Migrate all semantic styles into custom style hooks (#34786) --- ...-7122841d-a550-4271-ba00-e723fea484a0.json | 7 - ...-3f82613f-24a6-4370-9608-eede7b2e345d.json | 7 - ...-25711b5f-c147-443a-8378-23edd3819c31.json | 7 - ...-d8f2c84a-5eb0-4825-b7ec-40db4c411087.json | 7 - ...d8471d3e-b5bd-4826-b835-b5b411cad36f.json} | 2 +- ...-c07b8517-e9be-4633-bc25-ff642141d9cc.json | 7 - ...-934b9c1a-08e7-4b38-a2cf-518acb9dd861.json | 7 - ...-7802143c-d54f-4bd3-9e8e-075ca4cff496.json | 7 - ...-926a3c55-ac71-473a-9972-c164503663e7.json | 7 - ...-f55b0651-0938-48b2-a5ba-4191ee23f204.json | 7 - ...-3eafd24b-30a8-4b38-9ad6-fa04250f9806.json | 7 - ...-eeaf75be-7606-437b-9af5-12a9b5f566b4.json | 7 - ...-348f9b49-d704-4a66-9a74-3955ff6fcdc0.json | 7 - ...-e1994951-8afe-4559-8b5b-cc8dfdceeb53.json | 7 - ...-2fefb723-8232-43c0-aa3f-417c55d0949a.json | 2 +- .../useAccordionHeaderStyles.styles.ts | 83 +-- .../Avatar/useAvatarStyles.styles.ts | 61 +- .../Divider/useDividerStyles.styles.ts | 96 +-- .../library/etc/react-drawer.api.md | 6 + .../DrawerBody/useDrawerBodyStyles.styles.ts | 8 +- .../useInlineDrawerStyles.styles.ts | 4 +- .../useOverlayDrawerSurfaceStyles.styles.ts | 3 +- .../react-drawer/library/src/index.ts | 2 + .../library/src/shared/drawerMotions.ts | 3 +- .../src/shared/drawerSeparatorStyles.ts | 3 +- .../react-drawer/library/src/shared/index.ts | 1 + .../src/shared/useDrawerBaseStyles.styles.ts | 17 +- .../components/Label/useLabelStyles.styles.ts | 22 +- .../components/Link/useLinkStyles.styles.ts | 30 +- .../useProgressBarStyles.styles.ts | 36 +- .../useRatingDisplayStyles.styles.ts | 25 +- .../RatingItem/useRatingItemStyles.styles.ts | 7 +- .../Spinner/useSpinnerStyles.styles.ts | 60 +- .../Switch/useSwitchStyles.styles.ts | 103 ++- .../library/src/components/Text/Text.test.tsx | 76 +-- .../components/Text/useTextStyles.styles.ts | 45 +- .../Textarea/useTextareaStyles.styles.ts | 111 ++-- .../FlatTree/useFlatTreeStyles.styles.ts | 4 +- .../components/Tree/useTreeStyles.styles.ts | 6 +- .../TreeItem/useTreeItemStyles.styles.ts | 19 +- .../useTreeItemLayoutStyles.styles.ts | 47 +- .../useTreeItemPersonaLayoutStyles.styles.ts | 19 +- .../etc/semantic-style-hooks-preview.api.md | 84 +++ .../library/package.json | 17 +- .../src/component-styles/Accordion/index.ts | 1 + ...useSemanticAccordionHeaderStyles.styles.ts | 185 ++++++ .../src/component-styles/Avatar/index.ts | 1 + .../Avatar/useSemanticAvatarStyles.styles.ts | 625 ++++++++++++++++++ .../Button/useSemanticButtonStyles.styles.ts | 7 +- .../useSemanticCompoundButtonStyles.styles.ts | 11 +- .../useSemanticMenuButtonStyles.styles.ts | 8 +- .../useSemanticSplitButtonStyles.styles.ts | 8 +- .../useSemanticToggleButtonStyles.styles.ts | 7 +- .../src/component-styles/Divider/index.ts | 1 + .../useSemanticDividerStyles.styles.ts | 280 ++++++++ .../src/component-styles/Drawer/index.ts | 5 + .../Drawer/semanticDrawSeparatorStyles.ts | 16 + .../Drawer/semanticDrawerMotion.ts | 134 ++++ .../useSemanticDrawerBaseStyles.styles.ts | 99 +++ .../useSemanticDrawerBodyStyles.styles.ts | 45 ++ .../useSemanticDrawerFooterStyles.styles.ts | 60 ++ .../useSemanticDrawerHeaderStyles.styles.ts | 59 ++ .../useSemanticInlineDrawerStyles.styles.ts | 79 +++ ...manticOverlayDrawerSurfaceStyles.styles.ts | 43 ++ .../src/component-styles/Label/index.ts | 1 + .../Label/useSemanticLabelStyles.styles.ts | 80 +++ .../src/component-styles/Link/index.ts | 1 + .../Link/useSemanticLinkStyles.styles.ts | 125 ++++ .../src/component-styles/ProgressBar/index.ts | 1 + .../useSemanticProgressBarStyles.styles.ts | 146 ++++ .../src/component-styles/Rating/index.ts | 2 + .../useSemanticRatingDisplayStyles.styles.ts | 84 +++ .../useSemanticRatingItemStyles.styles.ts | 178 +++++ .../src/component-styles/Spinner/index.ts | 1 + .../useSemanticSpinnerStyles.styles.ts | 291 ++++++++ .../src/component-styles/Switch/index.ts | 1 + .../Switch/useSemanticSwitchStyles.styles.ts | 328 +++++++++ .../src/component-styles/Text/index.ts | 1 + .../Text/useSemanticTextStyles.styles.ts | 148 +++++ .../src/component-styles/Textarea/index.ts | 1 + .../useSemanticTextareaStyles.styles.ts | 280 ++++++++ .../src/component-styles/Tree/index.ts | 5 + .../Tree/useSemanticFlatTreeStyles.styles.ts | 25 + .../useSemanticTreeItemLayoutStyles.styles.ts | 249 +++++++ ...anticTreeItemPersonaLayoutStyles.styles.ts | 205 ++++++ .../Tree/useSemanticTreeItemStyles.styles.ts | 83 +++ .../Tree/useSemanticTreeStyles.styles.ts | 34 + .../component-styles/semanticStyleHooks.ts | 64 +- .../library/src/index.ts | 28 +- 89 files changed, 4501 insertions(+), 628 deletions(-) delete mode 100644 change/@fluentui-react-accordion-7122841d-a550-4271-ba00-e723fea484a0.json delete mode 100644 change/@fluentui-react-avatar-3f82613f-24a6-4370-9608-eede7b2e345d.json delete mode 100644 change/@fluentui-react-button-25711b5f-c147-443a-8378-23edd3819c31.json delete mode 100644 change/@fluentui-react-divider-d8f2c84a-5eb0-4825-b7ec-40db4c411087.json rename change/{@fluentui-react-drawer-3d02f911-0ba4-47d1-b205-9179f96bfd84.json => @fluentui-react-drawer-d8471d3e-b5bd-4826-b835-b5b411cad36f.json} (68%) delete mode 100644 change/@fluentui-react-label-c07b8517-e9be-4633-bc25-ff642141d9cc.json delete mode 100644 change/@fluentui-react-link-934b9c1a-08e7-4b38-a2cf-518acb9dd861.json delete mode 100644 change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json delete mode 100644 change/@fluentui-react-rating-926a3c55-ac71-473a-9972-c164503663e7.json delete mode 100644 change/@fluentui-react-spinner-f55b0651-0938-48b2-a5ba-4191ee23f204.json delete mode 100644 change/@fluentui-react-switch-3eafd24b-30a8-4b38-9ad6-fa04250f9806.json delete mode 100644 change/@fluentui-react-text-eeaf75be-7606-437b-9af5-12a9b5f566b4.json delete mode 100644 change/@fluentui-react-textarea-348f9b49-d704-4a66-9a74-3955ff6fcdc0.json delete mode 100644 change/@fluentui-react-tree-e1994951-8afe-4559-8b5b-cc8dfdceeb53.json create mode 100644 packages/react-components/react-drawer/library/src/shared/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Accordion/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Accordion/useSemanticAccordionHeaderStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Avatar/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Avatar/useSemanticAvatarStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Divider/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Divider/useSemanticDividerStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/semanticDrawSeparatorStyles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/semanticDrawerMotion.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerBaseStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerBodyStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerFooterStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerHeaderStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticInlineDrawerStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticOverlayDrawerSurfaceStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Label/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Label/useSemanticLabelStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Link/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Link/useSemanticLinkStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/ProgressBar/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/ProgressBar/useSemanticProgressBarStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/useSemanticRatingDisplayStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/useSemanticRatingItemStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Spinner/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Spinner/useSemanticSpinnerStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Switch/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Switch/useSemanticSwitchStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Text/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Text/useSemanticTextStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Textarea/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Textarea/useSemanticTextareaStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticFlatTreeStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeItemLayoutStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeItemPersonaLayoutStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeItemStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/useSemanticTreeStyles.styles.ts diff --git a/change/@fluentui-react-accordion-7122841d-a550-4271-ba00-e723fea484a0.json b/change/@fluentui-react-accordion-7122841d-a550-4271-ba00-e723fea484a0.json deleted file mode 100644 index 80d695482f6d8..0000000000000 --- a/change/@fluentui-react-accordion-7122841d-a550-4271-ba00-e723fea484a0.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: Implement semantic tokens", - "packageName": "@fluentui/react-accordion", - "email": "mifraser@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-avatar-3f82613f-24a6-4370-9608-eede7b2e345d.json b/change/@fluentui-react-avatar-3f82613f-24a6-4370-9608-eede7b2e345d.json deleted file mode 100644 index 011c36e895c67..0000000000000 --- a/change/@fluentui-react-avatar-3f82613f-24a6-4370-9608-eede7b2e345d.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "update avatar to use semantic tokens", - "packageName": "@fluentui/react-avatar", - "email": "rachelyoo@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-button-25711b5f-c147-443a-8378-23edd3819c31.json b/change/@fluentui-react-button-25711b5f-c147-443a-8378-23edd3819c31.json deleted file mode 100644 index f3f0f5829deae..0000000000000 --- a/change/@fluentui-react-button-25711b5f-c147-443a-8378-23edd3819c31.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: React-button semantic tokens", - "packageName": "@fluentui/react-button", - "email": "mifraser@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-divider-d8f2c84a-5eb0-4825-b7ec-40db4c411087.json b/change/@fluentui-react-divider-d8f2c84a-5eb0-4825-b7ec-40db4c411087.json deleted file mode 100644 index 0145a804d25f6..0000000000000 --- a/change/@fluentui-react-divider-d8f2c84a-5eb0-4825-b7ec-40db4c411087.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "Feat: Add semantic tokens to Divider", - "packageName": "@fluentui/react-divider", - "email": "rachelyoo@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-drawer-3d02f911-0ba4-47d1-b205-9179f96bfd84.json b/change/@fluentui-react-drawer-d8471d3e-b5bd-4826-b835-b5b411cad36f.json similarity index 68% rename from change/@fluentui-react-drawer-3d02f911-0ba4-47d1-b205-9179f96bfd84.json rename to change/@fluentui-react-drawer-d8471d3e-b5bd-4826-b835-b5b411cad36f.json index 53fca2a12c4e9..d15f7f13e37aa 100644 --- a/change/@fluentui-react-drawer-3d02f911-0ba4-47d1-b205-9179f96bfd84.json +++ b/change/@fluentui-react-drawer-d8471d3e-b5bd-4826-b835-b5b411cad36f.json @@ -1,6 +1,6 @@ { "type": "minor", - "comment": "feat: Implement semantic tokens", + "comment": "feat: Export DrawerBaseState for external usage", "packageName": "@fluentui/react-drawer", "email": "mifraser@microsoft.com", "dependentChangeType": "patch" diff --git a/change/@fluentui-react-label-c07b8517-e9be-4633-bc25-ff642141d9cc.json b/change/@fluentui-react-label-c07b8517-e9be-4633-bc25-ff642141d9cc.json deleted file mode 100644 index 78854aa0f31c6..0000000000000 --- a/change/@fluentui-react-label-c07b8517-e9be-4633-bc25-ff642141d9cc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: Add semantic tokens", - "packageName": "@fluentui/react-label", - "email": "mifraser@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-link-934b9c1a-08e7-4b38-a2cf-518acb9dd861.json b/change/@fluentui-react-link-934b9c1a-08e7-4b38-a2cf-518acb9dd861.json deleted file mode 100644 index 067c9b5d2f9b4..0000000000000 --- a/change/@fluentui-react-link-934b9c1a-08e7-4b38-a2cf-518acb9dd861.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: Implement semantic tokens for react-link", - "packageName": "@fluentui/react-link", - "email": "mifraser@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json b/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json deleted file mode 100644 index 3c7c5f32adfff..0000000000000 --- a/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "Feat: Add semantic tokens to Progress Bar", - "packageName": "@fluentui/react-progress", - "email": "xuehua@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-rating-926a3c55-ac71-473a-9972-c164503663e7.json b/change/@fluentui-react-rating-926a3c55-ac71-473a-9972-c164503663e7.json deleted file mode 100644 index 6c54acfe7e560..0000000000000 --- a/change/@fluentui-react-rating-926a3c55-ac71-473a-9972-c164503663e7.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "Feat: Add semantic tokens to Rating", - "packageName": "@fluentui/react-rating", - "email": "rachelyoo@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-spinner-f55b0651-0938-48b2-a5ba-4191ee23f204.json b/change/@fluentui-react-spinner-f55b0651-0938-48b2-a5ba-4191ee23f204.json deleted file mode 100644 index 8726bdebdc6e2..0000000000000 --- a/change/@fluentui-react-spinner-f55b0651-0938-48b2-a5ba-4191ee23f204.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: Enable semantic tokens", - "packageName": "@fluentui/react-spinner", - "email": "mifraser@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-switch-3eafd24b-30a8-4b38-9ad6-fa04250f9806.json b/change/@fluentui-react-switch-3eafd24b-30a8-4b38-9ad6-fa04250f9806.json deleted file mode 100644 index 8a3ce52b1b8b8..0000000000000 --- a/change/@fluentui-react-switch-3eafd24b-30a8-4b38-9ad6-fa04250f9806.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "Feat: Add semantic tokens to Switch", - "packageName": "@fluentui/react-switch", - "email": "rachelyoo@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-text-eeaf75be-7606-437b-9af5-12a9b5f566b4.json b/change/@fluentui-react-text-eeaf75be-7606-437b-9af5-12a9b5f566b4.json deleted file mode 100644 index 089bed43987a6..0000000000000 --- a/change/@fluentui-react-text-eeaf75be-7606-437b-9af5-12a9b5f566b4.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: Add semantic tokens", - "packageName": "@fluentui/react-text", - "email": "mifraser@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-textarea-348f9b49-d704-4a66-9a74-3955ff6fcdc0.json b/change/@fluentui-react-textarea-348f9b49-d704-4a66-9a74-3955ff6fcdc0.json deleted file mode 100644 index 347d5ed04fdca..0000000000000 --- a/change/@fluentui-react-textarea-348f9b49-d704-4a66-9a74-3955ff6fcdc0.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Fix: TextArea changes", - "packageName": "@fluentui/react-textarea", - "email": "xuehua@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-tree-e1994951-8afe-4559-8b5b-cc8dfdceeb53.json b/change/@fluentui-react-tree-e1994951-8afe-4559-8b5b-cc8dfdceeb53.json deleted file mode 100644 index 6b14d0f8215b9..0000000000000 --- a/change/@fluentui-react-tree-e1994951-8afe-4559-8b5b-cc8dfdceeb53.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: Enable semantic tokens", - "packageName": "@fluentui/react-tree", - "email": "mifraser@microsoft.com", - "dependentChangeType": "patch" -} 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 index 213ae919bd413..440c1dc64fd1a 100644 --- 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 @@ -1,6 +1,6 @@ { "type": "minor", - "comment": "feat: Implement semantic style hooks framework and button example", + "comment": "feat: Implement semantic style hooks framework", "packageName": "@fluentui/semantic-style-hooks-preview", "email": "mifraser@microsoft.com", "dependentChangeType": "patch" diff --git a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts index a929e67cbe6e0..6a799680fd194 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts +++ b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts @@ -1,8 +1,8 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; +import { tokens, typographyStyles } from '@fluentui/react-theme'; import type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const accordionHeaderClassNames: SlotClassNames = { root: 'fui-AccordionHeader', @@ -11,8 +11,6 @@ export const accordionHeaderClassNames: SlotClassNames = { icon: 'fui-AccordionHeader__icon', }; -const paddingCtrlHorizontalDefaultNudge = `max(calc(${semanticTokens.paddingCtrlHorizontalDefault} - 2px), 2px)`; - const useStyles = makeStyles({ // TODO: this should be extracted to another package resetButton: { @@ -27,31 +25,16 @@ const useStyles = makeStyles({ WebkitAppearance: 'button', textAlign: 'unset', }, - focusIndicator: createFocusOutlineStyle({ - style: { - outlineRadius: semanticTokens.ctrlListCornerRest, - outlineOffset: semanticTokens._ctrlAccordionFocusInnerStrokeWidth, - outlineColor: semanticTokens._ctrlAccordionFocusOuterStroke, - outlineWidth: semanticTokens.ctrlFocusOuterStrokeWidth, - }, - }), + focusIndicator: createFocusOutlineStyle(), root: { - color: semanticTokens._ctrlAccordionForegroundRest, - backgroundColor: semanticTokens._ctrlAccordionBackgroundRest, + color: tokens.colorNeutralForeground1, + backgroundColor: tokens.colorTransparentBackground, margin: '0', - borderRadius: semanticTokens.ctrlListCornerRest, - - ':hover': { - color: semanticTokens._ctrlAccordionForegroundHover, - }, - - ':hover:active': { - color: semanticTokens._ctrlAccordionForegroundPressed, - }, + borderRadius: tokens.borderRadiusMedium, }, rootDisabled: { backgroundImage: 'none', - color: semanticTokens.foregroundCtrlOnTransparentDisabled, + color: tokens.colorNeutralForegroundDisabled, }, rootInline: { display: 'inline-block', @@ -60,63 +43,47 @@ const useStyles = makeStyles({ position: 'relative', width: '100%', ...shorthands.borderWidth('0'), - padding: `${semanticTokens._ctrlAccordionPaddingTextTop} ${semanticTokens.paddingCtrlHorizontalDefault} ${semanticTokens._ctrlAccordionPaddingTextBottom} ${paddingCtrlHorizontalDefaultNudge}`, - minHeight: semanticTokens.sizeCtrlDefault, + padding: `0 ${tokens.spacingHorizontalM} 0 ${tokens.spacingHorizontalMNudge}`, + minHeight: '44px', display: 'flex', alignItems: 'center', cursor: 'pointer', - fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, - fontWeight: semanticTokens.textStyleDefaultRegularWeight, - fontSize: semanticTokens.textGlobalBody3FontSize, - lineHeight: semanticTokens.textGlobalBody3LineHeight, + ...typographyStyles.body1, boxSizing: 'border-box', }, buttonSmall: { - minHeight: semanticTokens.sizeCtrlSmDefault, - fontSize: semanticTokens.textGlobalCaption1FontSize, - paddingTop: semanticTokens.paddingCtrlSmTextTop, - paddingBottom: semanticTokens.paddingCtrlSmTextBottom, + minHeight: '32px', + fontSize: tokens.fontSizeBase200, }, buttonLarge: { - minHeight: semanticTokens.sizeCtrlLgDefault, - lineHeight: semanticTokens.textGlobalBody2LineHeight, - fontSize: semanticTokens.textGlobalBody2FontSize, - paddingTop: semanticTokens.paddingCtrlLgTextTop, - paddingBottom: semanticTokens.paddingCtrlLgTextBottom, + lineHeight: tokens.lineHeightBase400, + fontSize: tokens.fontSizeBase400, }, buttonExtraLarge: { - minHeight: semanticTokens.sizeCtrlLgDefault, - lineHeight: semanticTokens.textGlobalBody1LineHeight, - fontSize: semanticTokens.textGlobalBody1FontSize, - paddingTop: semanticTokens.paddingCtrlLgTextTop, - paddingBottom: semanticTokens.paddingCtrlLgTextBottom, + lineHeight: tokens.lineHeightBase500, + fontSize: tokens.fontSizeBase500, }, buttonInline: { display: 'inline-flex', }, buttonExpandIconEndNoIcon: { - paddingLeft: semanticTokens.paddingCtrlHorizontalDefault, + paddingLeft: tokens.spacingHorizontalM, }, buttonExpandIconEnd: { - paddingRight: paddingCtrlHorizontalDefaultNudge, + paddingRight: tokens.spacingHorizontalMNudge, }, buttonDisabled: { cursor: 'not-allowed', }, expandIcon: { - height: semanticTokens.ctrlChoiceBaseSize, - width: semanticTokens.ctrlChoiceBaseSize, + height: '100%', display: 'flex', alignItems: 'center', - lineHeight: semanticTokens.textGlobalBody1LineHeight, - fontSize: semanticTokens.sizeCtrlIcon, - '> *': { - height: semanticTokens.sizeCtrlIcon, - width: semanticTokens.sizeCtrlIcon, - }, + lineHeight: tokens.lineHeightBase500, + fontSize: tokens.fontSizeBase500, }, expandIconStart: { - paddingRight: semanticTokens.gapInsideCtrlDefault, + paddingRight: tokens.spacingHorizontalS, }, expandIconEnd: { flexGrow: 1, @@ -124,15 +91,15 @@ const useStyles = makeStyles({ flexBasis: '0%', display: 'flex', justifyContent: 'flex-end', - paddingLeft: semanticTokens.gapInsideCtrlDefault, + paddingLeft: tokens.spacingHorizontalS, }, icon: { height: '100%', display: 'flex', alignItems: 'center', - paddingRight: semanticTokens.gapInsideCtrlDefault, - lineHeight: semanticTokens.textGlobalBody1LineHeight, - fontSize: semanticTokens.textGlobalBody1FontSize, + paddingRight: tokens.spacingHorizontalS, + lineHeight: tokens.lineHeightBase500, + fontSize: tokens.fontSizeBase500, }, }); diff --git a/packages/react-components/react-avatar/library/src/components/Avatar/useAvatarStyles.styles.ts b/packages/react-components/react-avatar/library/src/components/Avatar/useAvatarStyles.styles.ts index 73449bd6143a8..40f6d46252967 100644 --- a/packages/react-components/react-avatar/library/src/components/Avatar/useAvatarStyles.styles.ts +++ b/packages/react-components/react-avatar/library/src/components/Avatar/useAvatarStyles.styles.ts @@ -2,7 +2,6 @@ import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { AvatarSlots, AvatarState } from './Avatar.types'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const avatarClassNames: SlotClassNames = { root: 'fui-Avatar', @@ -25,15 +24,15 @@ const useRootClassName = makeResetStyles({ flexShrink: 0, position: 'relative', verticalAlign: 'middle', - borderRadius: semanticTokens.ctrlAvatarCornerItem, - fontFamily: semanticTokens.textStyleDefaultHeaderFontFamily, - fontWeight: semanticTokens.textStyleDefaultHeaderWeight, - fontSize: semanticTokens.ctrlAvatarTextFontSize, - width: semanticTokens.ctrlAvatarSize, - height: semanticTokens.ctrlAvatarSize, + borderRadius: tokens.borderRadiusCircular, + fontFamily: tokens.fontFamilyBase, + fontWeight: tokens.fontWeightSemibold, + fontSize: tokens.fontSizeBase300, + width: '32px', + height: '32px', // ::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. + // These are not displayed by default; the ring and shadow clases set content: "" to display them when appropriate. '::before,::after': { position: 'absolute', top: 0, @@ -75,8 +74,8 @@ const useIconInitialsClassName = makeResetStyles({ left: 0, width: '100%', height: '100%', - lineHeight: semanticTokens.ctrlAvatarTextLineHeight, - border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeLayer}`, + lineHeight: '1', + border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`, display: 'flex', alignItems: 'center', @@ -104,21 +103,21 @@ const badgeMask = (margin?: string) => { return ( `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + - `transparent ${innerRadius}, ${semanticTokens.ctrlAvatarPresenceBadgeBackgroundBehindBadge} ${outerRadius})` + `transparent ${innerRadius}, white ${outerRadius})` ); }; const useStyles = makeStyles({ - textCaption2Strong: { fontSize: semanticTokens.textGlobalCaption2FontSize }, - textCaption1Strong: { fontSize: semanticTokens.textGlobalCaption1FontSize }, - textSubtitle2: { fontSize: semanticTokens.textGlobalBody2FontSize }, - textSubtitle1: { fontSize: semanticTokens.textGlobalBody1FontSize }, - textTitle3: { fontSize: semanticTokens.textGlobalSubtitle2FontSize }, + textCaption2Strong: { fontSize: tokens.fontSizeBase100 }, + textCaption1Strong: { fontSize: tokens.fontSizeBase200 }, + textSubtitle2: { fontSize: tokens.fontSizeBase400 }, + textSubtitle1: { fontSize: tokens.fontSizeBase500 }, + textTitle3: { fontSize: tokens.fontSizeBase600 }, - squareSmall: { borderRadius: semanticTokens._ctrlAvatarCornerGroupSm }, - squareMedium: { borderRadius: semanticTokens._ctrlAvatarCornerGroupMd }, - squareLarge: { borderRadius: semanticTokens._ctrlAvatarCornerGroupLg }, - squareXLarge: { borderRadius: semanticTokens._ctrlAvatarCornerGroupXLg }, + squareSmall: { borderRadius: tokens.borderRadiusSmall }, + squareMedium: { borderRadius: tokens.borderRadiusMedium }, + squareLarge: { borderRadius: tokens.borderRadiusLarge }, + squareXLarge: { borderRadius: tokens.borderRadiusXLarge }, activeOrInactive: { transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation @@ -139,13 +138,13 @@ const useStyles = makeStyles({ '::before': { maskImage: badgeMask(/*margin =*/ `2 * var(${vars.ringWidth})`) }, }, ringThick: { - [vars.ringWidth]: semanticTokens._ctrlAvatarActiveRingStrokeWidthSm, + [vars.ringWidth]: tokens.strokeWidthThick, }, ringThicker: { - [vars.ringWidth]: semanticTokens._ctrlAvatarActiveRingStrokeWidthMd, + [vars.ringWidth]: tokens.strokeWidthThicker, }, ringThickest: { - [vars.ringWidth]: semanticTokens._ctrlAvatarActiveRingStrokeWidthLg, + [vars.ringWidth]: tokens.strokeWidthThickest, }, shadow: { @@ -199,27 +198,27 @@ const useStyles = makeStyles({ // Badge size: applied to root when there is a badge tiny: { [vars.badgeRadius]: '3px', - [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthSm, + [vars.badgeGap]: tokens.strokeWidthThin, }, 'extra-small': { [vars.badgeRadius]: '5px', - [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthSm, + [vars.badgeGap]: tokens.strokeWidthThin, }, small: { [vars.badgeRadius]: '6px', - [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthSm, + [vars.badgeGap]: tokens.strokeWidthThin, }, medium: { [vars.badgeRadius]: '8px', - [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthSm, + [vars.badgeGap]: tokens.strokeWidthThin, }, large: { [vars.badgeRadius]: '10px', - [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthLg, + [vars.badgeGap]: tokens.strokeWidthThick, }, 'extra-large': { [vars.badgeRadius]: '14px', - [vars.badgeGap]: semanticTokens._ctrlAvatarPresenceBadgeStrokeWidthLg, + [vars.badgeGap]: tokens.strokeWidthThick, }, icon12: { fontSize: '12px' }, @@ -250,8 +249,8 @@ export const useSizeStyles = makeStyles({ const useColorStyles = makeStyles({ neutral: { - color: semanticTokens.ctrlAvatarForeground, - backgroundColor: semanticTokens.ctrlAvatarBackground, + color: tokens.colorNeutralForeground3, + backgroundColor: tokens.colorNeutralBackground6, }, brand: { color: tokens.colorNeutralForegroundStaticInverted, diff --git a/packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts b/packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts index f421889612523..87113fc556a57 100644 --- a/packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts +++ b/packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts @@ -1,13 +1,18 @@ import { mergeClasses, shorthands, makeStyles } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; import { DividerSlots, DividerState } from './Divider.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const dividerClassNames: SlotClassNames = { root: 'fui-Divider', wrapper: 'fui-Divider__wrapper', }; +const contentSpacing = '12px'; +const insetSpacing = '12px'; +const maxStartEndLength = '8px'; +const minStartEndLength = '8px;'; + const useBaseStyles = makeStyles({ // Base styles base: { @@ -18,11 +23,10 @@ const useBaseStyles = makeStyles({ flexGrow: 1, position: 'relative', - fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, - fontSize: semanticTokens.textGlobalCaption1FontSize, - fontWeight: semanticTokens.textStyleDefaultRegularWeight, - lineHeight: semanticTokens.textGlobalCaption1LineHeight, - letterSpacing: semanticTokens.textStyleDefaultRegularLetterSpacing, + fontFamily: tokens.fontFamilyBase, + fontSize: tokens.fontSizeBase200, + fontWeight: tokens.fontWeightRegular, + lineHeight: tokens.lineHeightBase200, textAlign: 'center', '::before': { @@ -73,47 +77,47 @@ const useBaseStyles = makeStyles({ // Appearance variations brand: { - color: semanticTokens.foregroundContentBrandPrimary, + color: tokens.colorBrandForeground1, '::before': { - ...shorthands.borderColor(semanticTokens.strokeDividerBrand), + ...shorthands.borderColor(tokens.colorBrandStroke1), }, '::after': { - ...shorthands.borderColor(semanticTokens.strokeDividerBrand), + ...shorthands.borderColor(tokens.colorBrandStroke1), }, }, default: { - color: semanticTokens.foregroundContentNeutralSecondary, + color: tokens.colorNeutralForeground2, '::before': { - ...shorthands.borderColor(semanticTokens.strokeDividerDefault), + ...shorthands.borderColor(tokens.colorNeutralStroke2), }, '::after': { - ...shorthands.borderColor(semanticTokens.strokeDividerDefault), + ...shorthands.borderColor(tokens.colorNeutralStroke2), }, }, subtle: { - color: semanticTokens._ctrlDividerForegroundSubtle, + color: tokens.colorNeutralForeground3, '::before': { - ...shorthands.borderColor(semanticTokens.strokeDividerSubtle), + ...shorthands.borderColor(tokens.colorNeutralStroke3), }, '::after': { - ...shorthands.borderColor(semanticTokens.strokeDividerSubtle), + ...shorthands.borderColor(tokens.colorNeutralStroke3), }, }, strong: { - color: semanticTokens.foregroundContentNeutralPrimary, + color: tokens.colorNeutralForeground1, '::before': { - ...shorthands.borderColor(semanticTokens.strokeDividerStrong), + ...shorthands.borderColor(tokens.colorNeutralStroke1), }, '::after': { - ...shorthands.borderColor(semanticTokens.strokeDividerStrong), + ...shorthands.borderColor(tokens.colorNeutralStroke1), }, }, }); @@ -125,21 +129,21 @@ const useHorizontalStyles = makeStyles({ '::before': { borderTopStyle: 'solid', - borderTopWidth: semanticTokens.strokeWidthDividerDefault, - minWidth: semanticTokens.ctrlDividerFixedLineLength, + borderTopWidth: tokens.strokeWidthThin, + minWidth: minStartEndLength, }, '::after': { borderTopStyle: 'solid', - borderTopWidth: semanticTokens.strokeWidthDividerDefault, - minWidth: semanticTokens.ctrlDividerFixedLineLength, + borderTopWidth: tokens.strokeWidthThin, + minWidth: minStartEndLength, }, }, // Inset styles inset: { - paddingLeft: semanticTokens.paddingCtrlHorizontalDefault, - paddingRight: semanticTokens.paddingCtrlHorizontalDefault, + paddingLeft: insetSpacing, + paddingRight: insetSpacing, }, // Alignment variations @@ -148,34 +152,34 @@ const useHorizontalStyles = makeStyles({ '::before': { content: '""', - marginRight: semanticTokens.paddingCtrlHorizontalDefault, - maxWidth: semanticTokens.ctrlDividerFixedLineLength, + marginRight: contentSpacing, + maxWidth: maxStartEndLength, }, '::after': { - marginLeft: semanticTokens.paddingCtrlHorizontalDefault, + marginLeft: contentSpacing, }, }, center: { textAlign: 'center', '::before': { - marginRight: semanticTokens.paddingCtrlHorizontalDefault, + marginRight: contentSpacing, }, '::after': { - marginLeft: semanticTokens.paddingCtrlHorizontalDefault, + marginLeft: contentSpacing, }, }, end: { textAlign: 'right', '::before': { - marginRight: semanticTokens.paddingCtrlHorizontalDefault, + marginRight: contentSpacing, }, '::after': { content: '""', - marginLeft: semanticTokens.paddingCtrlHorizontalDefault, - maxWidth: semanticTokens.ctrlDividerFixedLineLength, + marginLeft: contentSpacing, + maxWidth: maxStartEndLength, }, }, }); @@ -188,21 +192,21 @@ const useVerticalStyles = makeStyles({ '::before': { borderRightStyle: 'solid', - borderRightWidth: semanticTokens.strokeWidthDividerDefault, - minHeight: semanticTokens.ctrlDividerFixedLineLength, + borderRightWidth: tokens.strokeWidthThin, + minHeight: minStartEndLength, }, '::after': { borderRightStyle: 'solid', - borderRightWidth: semanticTokens.strokeWidthDividerDefault, - minHeight: semanticTokens.ctrlDividerFixedLineLength, + borderRightWidth: tokens.strokeWidthThin, + minHeight: minStartEndLength, }, }, // Inset styles inset: { - marginTop: semanticTokens.paddingCtrlHorizontalDefault, - marginBottom: semanticTokens.paddingCtrlHorizontalDefault, + marginTop: insetSpacing, + marginBottom: insetSpacing, }, // With children styles @@ -214,30 +218,30 @@ const useVerticalStyles = makeStyles({ start: { '::before': { content: '""', - marginBottom: semanticTokens.paddingCtrlHorizontalDefault, - maxHeight: semanticTokens.ctrlDividerFixedLineLength, + marginBottom: contentSpacing, + maxHeight: maxStartEndLength, }, '::after': { - marginTop: semanticTokens.paddingCtrlHorizontalDefault, + marginTop: contentSpacing, }, }, center: { '::before': { - marginBottom: semanticTokens.paddingCtrlHorizontalDefault, + marginBottom: contentSpacing, }, '::after': { - marginTop: semanticTokens.paddingCtrlHorizontalDefault, + marginTop: contentSpacing, }, }, end: { '::before': { - marginBottom: semanticTokens.paddingCtrlHorizontalDefault, + marginBottom: contentSpacing, }, '::after': { content: '""', - marginTop: semanticTokens.paddingCtrlHorizontalDefault, - maxHeight: semanticTokens.ctrlDividerFixedLineLength, + marginTop: contentSpacing, + maxHeight: maxStartEndLength, }, }, }); diff --git a/packages/react-components/react-drawer/library/etc/react-drawer.api.md b/packages/react-components/react-drawer/library/etc/react-drawer.api.md index ec1339a5bedcf..4974f8edbdcd3 100644 --- a/packages/react-components/react-drawer/library/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/library/etc/react-drawer.api.md @@ -19,6 +19,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; // @public export const Drawer: ForwardRefComponent; +// @public (undocumented) +export type DrawerBaseState = Required> & { + motion: MotionState; + open?: boolean; +}; + // @public export const DrawerBody: ForwardRefComponent; diff --git a/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBodyStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBodyStyles.styles.ts index 3b90221ad04e8..d7c7757005837 100644 --- a/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBodyStyles.styles.ts +++ b/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBodyStyles.styles.ts @@ -1,6 +1,6 @@ import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import * as semanticTokens from '@fluentui/semantic-tokens'; import type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types'; @@ -12,7 +12,7 @@ export const drawerBodyClassNames: SlotClassNames = { * Styles for the root slot */ const useStyles = makeResetStyles({ - padding: `0 ${semanticTokens.paddingContentLarge}`, + padding: `0 ${tokens.spacingHorizontalXXL}`, flex: 1, alignSelf: 'stretch', position: 'relative', @@ -20,11 +20,11 @@ const useStyles = makeResetStyles({ overflow: 'auto', ':last-child': { - paddingBottom: `calc(${semanticTokens.paddingContentLarge} + 1px)`, + paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`, }, ':first-child': { - paddingTop: `calc(${semanticTokens.paddingContentLarge} + 1px)`, + paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`, }, }); diff --git a/packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawerStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawerStyles.styles.ts index 672e82ca1620f..46ce10d99636c 100644 --- a/packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawerStyles.styles.ts +++ b/packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawerStyles.styles.ts @@ -1,6 +1,6 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import * as semanticTokens from '@fluentui/semantic-tokens'; +import { tokens } from '@fluentui/react-theme'; import type { InlineDrawerSlots, InlineDrawerState } from './InlineDrawer.types'; import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles'; @@ -17,7 +17,7 @@ const useDrawerResetStyles = makeResetStyles({ /** * Styles for the root slot */ -const borderValue = ` ${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeFlyout}`; +const borderValue = `1px solid ${tokens.colorNeutralBackground3}`; const useDrawerRootStyles = makeStyles({ /* Separator */ separatorStart: { borderRight: borderValue }, diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts index 88191dc4fac0a..1b79b8bf68186 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts @@ -1,7 +1,6 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import { DialogSurfaceState } from '@fluentui/react-dialog'; -import * as semanticTokens from '@fluentui/semantic-tokens'; /** * Styles for the backdrop slot @@ -14,7 +13,7 @@ const useBackdropResetStyles = makeResetStyles({ const useBackdropStyles = makeStyles({ nested: { - backgroundColor: semanticTokens.nullColor, + backgroundColor: tokens.colorTransparentBackground, }, }); diff --git a/packages/react-components/react-drawer/library/src/index.ts b/packages/react-components/react-drawer/library/src/index.ts index fc9aabb6bb003..1a07570c9d9c1 100644 --- a/packages/react-components/react-drawer/library/src/index.ts +++ b/packages/react-components/react-drawer/library/src/index.ts @@ -70,3 +70,5 @@ export { useDrawerFooter_unstable, } from './DrawerFooter'; export type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './DrawerFooter'; + +export type { DrawerBaseState } from './shared'; diff --git a/packages/react-components/react-drawer/library/src/shared/drawerMotions.ts b/packages/react-components/react-drawer/library/src/shared/drawerMotions.ts index 6938a6ad1972f..22e362432bc55 100644 --- a/packages/react-components/react-drawer/library/src/shared/drawerMotions.ts +++ b/packages/react-components/react-drawer/library/src/shared/drawerMotions.ts @@ -1,7 +1,6 @@ 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 { DrawerBaseProps } from './DrawerBase.types'; import { drawerCSSVars } from './useDrawerBaseStyles.styles'; @@ -92,7 +91,7 @@ export const OverlayDrawerMotion = createPresenceComponent(( }, { transform: 'translate3d(0, 0, 0)', - boxShadow: semanticTokens.shadowFlyout, + boxShadow: tokens.shadow64, opacity: 1, }, ]; diff --git a/packages/react-components/react-drawer/library/src/shared/drawerSeparatorStyles.ts b/packages/react-components/react-drawer/library/src/shared/drawerSeparatorStyles.ts index 57319686a8a5a..cc2928cd0d338 100644 --- a/packages/react-components/react-drawer/library/src/shared/drawerSeparatorStyles.ts +++ b/packages/react-components/react-drawer/library/src/shared/drawerSeparatorStyles.ts @@ -1,6 +1,5 @@ import { tokens } from '@fluentui/react-theme'; import { GriffelStyle } from '@griffel/react'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const drawerSeparatorStyles: GriffelStyle = { height: '1px', @@ -8,7 +7,7 @@ export const drawerSeparatorStyles: GriffelStyle = { right: 0, left: 0, opacity: 0, - backgroundColor: semanticTokens.strokeDividerStrong, + backgroundColor: tokens.colorNeutralStroke1, transitionDuration: tokens.durationNormal, transitionProperty: 'opacity', transitionTimingFunction: tokens.curveEasyEase, diff --git a/packages/react-components/react-drawer/library/src/shared/index.ts b/packages/react-components/react-drawer/library/src/shared/index.ts new file mode 100644 index 0000000000000..41259e2a6f7d5 --- /dev/null +++ b/packages/react-components/react-drawer/library/src/shared/index.ts @@ -0,0 +1 @@ +export type { DrawerBaseState } from './DrawerBase.types'; diff --git a/packages/react-components/react-drawer/library/src/shared/useDrawerBaseStyles.styles.ts b/packages/react-components/react-drawer/library/src/shared/useDrawerBaseStyles.styles.ts index cb11d58a60837..ec53290af397a 100644 --- a/packages/react-components/react-drawer/library/src/shared/useDrawerBaseStyles.styles.ts +++ b/packages/react-components/react-drawer/library/src/shared/useDrawerBaseStyles.styles.ts @@ -1,6 +1,7 @@ import { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; + import { DrawerBaseState } from './DrawerBase.types'; -import * as semanticTokens from '@fluentui/semantic-tokens'; /** * CSS variable names used internally for uniform styling in Drawer. @@ -24,8 +25,8 @@ export const drawerDefaultStyles: GriffelResetStyle = { flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', - backgroundColor: semanticTokens.backgroundFlyoutSolid, - color: semanticTokens.foregroundContentNeutralPrimary, + backgroundColor: tokens.colorNeutralBackground1, + color: tokens.colorNeutralForeground1, }; /** @@ -34,26 +35,20 @@ export const drawerDefaultStyles: GriffelResetStyle = { const useDrawerStyles = makeStyles({ /* Positioning */ start: { - borderRight: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.nullColor}`, + borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`, left: 0, right: 'auto', - borderEndEndRadius: semanticTokens.cornerFlyoutRest, - borderStartEndRadius: semanticTokens.cornerFlyoutRest, }, end: { - borderLeft: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.nullColor}`, + borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`, right: 0, left: 'auto', - borderStartStartRadius: semanticTokens.cornerFlyoutRest, - borderEndStartRadius: semanticTokens.cornerFlyoutRest, }, bottom: { bottom: 0, top: 'auto', - borderTopRightRadius: semanticTokens.cornerFlyoutRest, - borderTopLeftRadius: semanticTokens.cornerFlyoutRest, }, /* Sizes */ diff --git a/packages/react-components/react-label/library/src/components/Label/useLabelStyles.styles.ts b/packages/react-components/react-label/library/src/components/Label/useLabelStyles.styles.ts index 0391bd13ce7b4..42d11b089720a 100644 --- a/packages/react-components/react-label/library/src/components/Label/useLabelStyles.styles.ts +++ b/packages/react-components/react-label/library/src/components/Label/useLabelStyles.styles.ts @@ -2,7 +2,6 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import type { LabelSlots, LabelState } from './Label.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const labelClassNames: SlotClassNames = { root: 'fui-Label', @@ -14,36 +13,35 @@ export const labelClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { - fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, - color: semanticTokens.foregroundContentNeutralPrimary, - fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontFamily: tokens.fontFamilyBase, + color: tokens.colorNeutralForeground1, }, disabled: { - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + color: tokens.colorNeutralForegroundDisabled, '@media (forced-colors: active)': { color: 'GrayText', }, }, required: { - color: semanticTokens.statusDangerTintForeground, + color: tokens.colorPaletteRedForeground3, paddingLeft: tokens.spacingHorizontalXS, }, small: { - fontSize: semanticTokens.textGlobalCaption1FontSize, - lineHeight: semanticTokens.textGlobalCaption1LineHeight, + fontSize: tokens.fontSizeBase200, + lineHeight: tokens.lineHeightBase200, }, medium: { - fontSize: semanticTokens.textGlobalBody3FontSize, - lineHeight: semanticTokens.textGlobalBody3LineHeight, + fontSize: tokens.fontSizeBase300, + lineHeight: tokens.lineHeightBase300, }, large: { - fontSize: semanticTokens.textGlobalBody2FontSize, - lineHeight: semanticTokens.textGlobalBody2LineHeight, + fontSize: tokens.fontSizeBase400, + lineHeight: tokens.lineHeightBase400, fontWeight: tokens.fontWeightSemibold, }, diff --git a/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts b/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts index 0b4b739e3d09d..df9431726fe82 100644 --- a/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts +++ b/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts @@ -1,7 +1,6 @@ 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 type { LinkSlots, LinkState } from './Link.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -11,7 +10,7 @@ export const linkClassNames: SlotClassNames = { const useStyles = makeStyles({ focusIndicator: createCustomFocusIndicatorStyle({ - textDecorationColor: semanticTokens.ctrlFocusInnerStroke, + textDecorationColor: tokens.colorStrokeFocus2, textDecorationLine: 'underline', textDecorationStyle: 'double', outlineStyle: 'none', @@ -23,29 +22,29 @@ const useStyles = makeStyles({ }, backgroundColor: 'transparent', boxSizing: 'border-box', - color: semanticTokens.ctrlLinkForegroundBrandRest, + color: tokens.colorBrandForegroundLink, cursor: 'pointer', display: 'inline', - fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, - fontSize: semanticTokens.textGlobalBody3FontSize, - fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontFamily: tokens.fontFamilyBase, + fontSize: tokens.fontSizeBase300, + fontWeight: tokens.fontWeightRegular, margin: '0', padding: '0', overflow: 'inherit', textAlign: 'left', textDecorationLine: 'none', - textDecorationThickness: semanticTokens.strokeWidthDefault, + textDecorationThickness: tokens.strokeWidthThin, textOverflow: 'inherit', userSelect: 'text', ':hover': { textDecorationLine: 'underline', - color: semanticTokens.ctrlLinkForegroundBrandHover, + color: tokens.colorBrandForegroundLinkHover, }, ':active': { textDecorationLine: 'underline', - color: semanticTokens.ctrlLinkForegroundBrandPressed, + color: tokens.colorBrandForegroundLinkPressed, }, }, // Overrides when the Link renders as a button. @@ -58,16 +57,16 @@ const useStyles = makeStyles({ }, // Overrides when the Link appears subtle. subtle: { - color: semanticTokens.ctrlLinkForegroundNeutralRest, + color: tokens.colorNeutralForeground2, ':hover': { textDecorationLine: 'underline', - color: semanticTokens.ctrlLinkForegroundNeutralHover, + color: tokens.colorNeutralForeground2Hover, }, ':active': { textDecorationLine: 'underline', - color: semanticTokens.ctrlLinkForegroundNeutralPressed, + color: tokens.colorNeutralForeground2Pressed, }, }, // Overrides when the Link is rendered inline within text. @@ -77,21 +76,20 @@ const useStyles = makeStyles({ // Overrides when the Link is disabled. disabled: { textDecorationLine: 'none', - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + color: tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', ':hover': { textDecorationLine: 'none', - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + color: tokens.colorNeutralForegroundDisabled, }, ':active': { textDecorationLine: 'none', - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + color: tokens.colorNeutralForegroundDisabled, }, }, - // Semantic-tokens does not include inverted tokens, use existing tokens for now. inverted: { color: tokens.colorNeutralForegroundInvertedLink, ':hover': { diff --git a/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts b/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts index 7b052bc146613..2053cbc6649df 100644 --- a/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts +++ b/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts @@ -1,5 +1,4 @@ import { makeStyles, mergeClasses } from '@griffel/react'; -import * as semanticTokens from '@fluentui/semantic-tokens'; import { tokens } from '@fluentui/react-theme'; import type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -13,6 +12,11 @@ export const progressBarClassNames: SlotClassNames = { // This prevents animations on reset to 0 scenarios. const ZERO_THRESHOLD = 0.01; +const barThicknessValues = { + medium: '2px', + large: '4px', +}; + const indeterminateProgressBar = { '0%': { left: '-33%', // matches indeterminate bar width @@ -40,7 +44,7 @@ const indeterminateProgressBarReducedMotion = { const useRootStyles = makeStyles({ root: { display: 'block', - backgroundColor: semanticTokens.ctrlProgressBackgroundEmpty, + backgroundColor: tokens.colorNeutralBackground6, width: '100%', overflow: 'hidden', @@ -49,16 +53,16 @@ const useRootStyles = makeStyles({ }, }, rounded: { - borderRadius: semanticTokens.ctrlProgressCorner, + borderRadius: tokens.borderRadiusMedium, }, square: { - borderRadius: semanticTokens.cornerZero, + borderRadius: tokens.borderRadiusNone, }, medium: { - height: semanticTokens.ctrlProgressHeightEmpty, + height: barThicknessValues.medium, }, large: { - height: semanticTokens.ctrlProgressLgHeightEmpty, + height: barThicknessValues.large, }, }); @@ -71,12 +75,7 @@ const useBarStyles = makeStyles({ backgroundColor: 'Highlight', }, borderRadius: 'inherit', - }, - medium: { - height: semanticTokens.ctrlProgressHeightFilled, - }, - large: { - height: semanticTokens.ctrlProgressLgHeightFilled, + height: '100%', }, nonZeroDeterminate: { transitionProperty: 'width', @@ -88,9 +87,9 @@ const useBarStyles = makeStyles({ position: 'relative', backgroundImage: `linear-gradient( to right, - ${semanticTokens.ctrlProgressBackgroundEmpty} 0%, + ${tokens.colorNeutralBackground6} 0%, ${tokens.colorTransparentBackground} 50%, - ${semanticTokens.ctrlProgressBackgroundEmpty} 100% + ${tokens.colorNeutralBackground6} 100% )`, animationName: indeterminateProgressBar, animationDuration: '3s', @@ -105,17 +104,17 @@ const useBarStyles = makeStyles({ }, brand: { - backgroundColor: semanticTokens.ctrlProgressBackgroundFilled, + backgroundColor: tokens.colorCompoundBrandBackground, }, error: { - backgroundColor: semanticTokens.statusDangerBackground, + backgroundColor: tokens.colorPaletteRedBackground3, }, warning: { - backgroundColor: semanticTokens.statusWarningBackground, + backgroundColor: tokens.colorPaletteDarkOrangeBackground3, }, success: { - backgroundColor: semanticTokens.statusSuccessBackground, + backgroundColor: tokens.colorPaletteGreenBackground3, }, }); @@ -142,7 +141,6 @@ export const useProgressBarStyles_unstable = (state: ProgressBarState): Progress progressBarClassNames.bar, barStyles.base, barStyles.brand, - barStyles[thickness], value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], diff --git a/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayStyles.styles.ts b/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayStyles.styles.ts index 4871260a9451a..3e171c1f6427e 100644 --- a/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayStyles.styles.ts +++ b/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayStyles.styles.ts @@ -1,7 +1,7 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { RatingDisplaySlots, RatingDisplayState } from './RatingDisplay.types'; -import * as semanticTokens from '@fluentui/semantic-tokens'; +import { tokens, typographyStyles } from '@fluentui/react-theme'; export const ratingDisplayClassNames: SlotClassNames = { root: 'fui-RatingDisplay', @@ -20,27 +20,24 @@ const useRootClassName = makeResetStyles({ }); const useLabelClassName = makeResetStyles({ - color: semanticTokens.foregroundCtrlNeutralPrimaryRest, - marginLeft: semanticTokens.gapInsideCtrlSmToLabel, - fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, - fontSize: semanticTokens.textRampSmItemBodyFontSize, - fontWeight: semanticTokens.textStyleDefaultRegularWeight, - lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + color: tokens.colorNeutralForeground1, + marginLeft: tokens.spacingHorizontalXS, + ...typographyStyles.caption1, }); const useLabelStyles = makeStyles({ large: { - fontSize: semanticTokens.textRampItemBodyFontSize, - lineHeight: semanticTokens.textRampItemBodyLineHeight, - marginLeft: semanticTokens.gapInsideCtrlToLabel, + fontSize: tokens.fontSizeBase300, + lineHeight: tokens.lineHeightBase300, + marginLeft: tokens.spacingHorizontalSNudge, }, extraLarge: { - fontSize: semanticTokens.textRampLgItemBodyFontSize, - lineHeight: semanticTokens.textRampLgItemBodyLineHeight, - marginLeft: semanticTokens.gapInsideCtrlLgToLabel, + fontSize: tokens.fontSizeBase400, + lineHeight: tokens.lineHeightBase400, + marginLeft: tokens.spacingHorizontalS, }, strong: { - fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + fontWeight: tokens.fontWeightSemibold, }, divider: { '::before': { diff --git a/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts b/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts index a0398a843365c..71e5b6ddfb132 100644 --- a/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts +++ b/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts @@ -3,7 +3,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; import { tokens } from '@fluentui/react-theme'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import type { RatingItemSlots, RatingItemState } from './RatingItem.types'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const ratingItemClassNames: SlotClassNames = { root: 'fui-RatingItem', @@ -71,7 +70,7 @@ const useInputStyles = makeStyles({ const useIndicatorBaseClassName = makeResetStyles({ display: 'flex', overflow: 'hidden', - color: semanticTokens.ctrlRatingIconForegroundFilled, + color: tokens.colorNeutralForeground1, fill: 'currentColor', pointerEvents: 'none', position: 'absolute', @@ -99,8 +98,8 @@ const useIndicatorStyles = makeStyles({ color: tokens.colorPaletteMarigoldBorderActive, }, filled: { - color: semanticTokens.ctrlRatingIconForegroundEmpty, - stroke: semanticTokens.strokeLayer, + color: tokens.colorNeutralBackground6, + stroke: tokens.colorTransparentStroke, '@media (forced-colors: active)': { color: 'Canvas', stroke: 'CanvasText', diff --git a/packages/react-components/react-spinner/library/src/components/Spinner/useSpinnerStyles.styles.ts b/packages/react-components/react-spinner/library/src/components/Spinner/useSpinnerStyles.styles.ts index eb30f91b91519..61df2ed50a0e1 100644 --- a/packages/react-components/react-spinner/library/src/components/Spinner/useSpinnerStyles.styles.ts +++ b/packages/react-components/react-spinner/library/src/components/Spinner/useSpinnerStyles.styles.ts @@ -1,9 +1,8 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; -import { tokens } from '@fluentui/react-theme'; +import { tokens, typographyStyles } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { SpinnerSlots, SpinnerState } from './Spinner.types'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const spinnerClassNames: SlotClassNames = { root: 'fui-Spinner', @@ -24,7 +23,7 @@ const useRootBaseClassName = makeResetStyles({ alignItems: 'center', justifyContent: 'center', lineHeight: '0', - gap: semanticTokens.gapInsideCtrlToLabel, + gap: '8px', overflow: 'hidden', // prevents height changes from rotating children }); @@ -45,9 +44,8 @@ const useSpinnerBaseClassName = makeResetStyles({ `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`, - backgroundColor: semanticTokens._ctrlSpinnerBackgroundEmpty, - - color: semanticTokens._ctrlSpinnerBackgroundFilled, + backgroundColor: tokens.colorBrandStroke2Contrast, + color: tokens.colorBrandStroke1, '@media screen and (forced-colors: active)': { backgroundColor: 'HighlightText', color: 'Highlight', @@ -138,104 +136,87 @@ const useSpinnerStyles = makeStyles({ 'extra-tiny': { height: '16px', width: '16px', - [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth, + [vars.strokeWidth]: tokens.strokeWidthThick, }, tiny: { height: '20px', width: '20px', - [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth, + [vars.strokeWidth]: tokens.strokeWidthThick, }, 'extra-small': { height: '24px', width: '24px', - [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth, + [vars.strokeWidth]: tokens.strokeWidthThick, }, small: { height: '28px', width: '28px', - [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth, + [vars.strokeWidth]: tokens.strokeWidthThick, }, medium: { height: '32px', width: '32px', - [vars.strokeWidth]: semanticTokens.ctrlSpinnerStrokeWidth, + [vars.strokeWidth]: tokens.strokeWidthThicker, }, large: { height: '36px', width: '36px', - [vars.strokeWidth]: semanticTokens.ctrlSpinnerStrokeWidth, + [vars.strokeWidth]: tokens.strokeWidthThicker, }, 'extra-large': { height: '40px', width: '40px', - [vars.strokeWidth]: semanticTokens.ctrlSpinnerStrokeWidth, + [vars.strokeWidth]: tokens.strokeWidthThicker, }, huge: { height: '44px', width: '44px', - [vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeLgWidth, + [vars.strokeWidth]: tokens.strokeWidthThickest, }, }); 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, + ...typographyStyles.body1, }, tiny: { - fontSize: semanticTokens.textGlobalBody3FontSize, - lineHeight: semanticTokens.textGlobalBody3LineHeight, + ...typographyStyles.body1, }, 'extra-small': { - fontSize: semanticTokens.textGlobalBody3FontSize, - lineHeight: semanticTokens.textGlobalBody3LineHeight, + ...typographyStyles.body1, }, small: { - fontSize: semanticTokens.textGlobalBody3FontSize, - lineHeight: semanticTokens.textGlobalBody3LineHeight, + ...typographyStyles.body1, }, medium: { - fontSize: semanticTokens._ctrlSpinnerItemBodyFontSize, - fontWeight: semanticTokens._ctrlSpinnerTextStyleRegularWeight, - lineHeight: semanticTokens._ctrlSpinnerItemBodyLineHeight, + ...typographyStyles.subtitle2, }, large: { - fontSize: semanticTokens.textRampLgItemBodyFontSize, - fontWeight: semanticTokens.textStyleDefaultHeaderWeight, - lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + ...typographyStyles.subtitle2, }, 'extra-large': { - fontSize: semanticTokens.textRampLgItemBodyFontSize, - fontWeight: semanticTokens.textStyleDefaultHeaderWeight, - lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + ...typographyStyles.subtitle2, }, huge: { - fontSize: semanticTokens.textGlobalBody1FontSize, - fontWeight: semanticTokens.textStyleDefaultHeaderWeight, - lineHeight: semanticTokens.textGlobalBody1LineHeight, + ...typographyStyles.subtitle1, }, }); @@ -281,7 +262,6 @@ export const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => if (state.label) { state.label.className = mergeClasses( spinnerClassNames.label, - labelStyles.default, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className, diff --git a/packages/react-components/react-switch/library/src/components/Switch/useSwitchStyles.styles.ts b/packages/react-components/react-switch/library/src/components/Switch/useSwitchStyles.styles.ts index 1625b4ce9e8e2..a3a8d81c1e871 100644 --- a/packages/react-components/react-switch/library/src/components/Switch/useSwitchStyles.styles.ts +++ b/packages/react-components/react-switch/library/src/components/Switch/useSwitchStyles.styles.ts @@ -3,7 +3,6 @@ import { tokens } from '@fluentui/react-theme'; import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { SwitchSlots, SwitchState } from './Switch.types'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const switchClassNames: SlotClassNames = { root: 'fui-Switch', @@ -17,7 +16,11 @@ export const switchClassNames: SlotClassNames = { */ export const switchClassName = switchClassNames.root; -const thumbHeight = `calc(${semanticTokens.ctrlChoiceSwitchHeight} - (${semanticTokens.ctrlChoiceSwitchPaddingRest} * 2))`; +// Thumb and track sizes used by the component. +const spaceBetweenThumbAndTrack = 2; +const trackHeight = 20; +const trackWidth = 40; +const thumbSize = trackHeight - spaceBetweenThumbAndTrack; const useRootBaseClassName = makeResetStyles({ alignItems: 'flex-start', @@ -35,19 +38,20 @@ const useRootStyles = makeStyles({ }); const useIndicatorBaseClassName = makeResetStyles({ - boxSizing: 'border-box', - borderRadius: semanticTokens.ctrlChoiceSwitchCorner, - borderStyle: 'solid', + borderRadius: tokens.borderRadiusCircular, + border: '1px solid', lineHeight: 0, + boxSizing: 'border-box', fill: 'currentColor', flexShrink: 0, - height: semanticTokens.ctrlChoiceSwitchHeight, - margin: semanticTokens.ctrlChoicePaddingVertical + ' ' + semanticTokens.ctrlChoicePaddingHorizontal, + fontSize: `${thumbSize}px`, + height: `${trackHeight}px`, + margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS, pointerEvents: 'none', transitionDuration: tokens.durationNormal, transitionTimingFunction: tokens.curveEasyEase, transitionProperty: 'background, border, color', - width: semanticTokens.ctrlChoiceSwitchWidth, + width: `${trackWidth}px`, '@media screen and (prefers-reduced-motion: reduce)': { transitionDuration: '0.01ms', @@ -61,11 +65,6 @@ const useIndicatorBaseClassName = makeResetStyles({ }, '> *': { - position: 'relative', - height: thumbHeight, - width: semanticTokens.ctrlChoiceSwitchThumbWidthRest, - fontSize: thumbHeight, - top: `calc(50% - ${thumbHeight} / 2)`, transitionDuration: tokens.durationNormal, transitionTimingFunction: tokens.curveEasyEase, transitionProperty: 'transform', @@ -92,17 +91,13 @@ const useInputBaseClassName = makeResetStyles({ // 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}))`, + width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`, // 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})))`, - }, + transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`, }, }, }, @@ -112,43 +107,37 @@ const useInputBaseClassName = makeResetStyles({ cursor: 'default', [`& ~ .${switchClassNames.indicator}`]: { - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + color: tokens.colorNeutralForegroundDisabled, }, [`& ~ .${switchClassNames.label}`]: { cursor: 'default', - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + color: tokens.colorNeutralForegroundDisabled, }, }, // Enabled and unchecked ':enabled:not(:checked)': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundRest, - borderColor: semanticTokens.ctrlChoiceBaseStrokeRest, - borderWidth: semanticTokens.strokeWidthCtrlOutlineRest, - color: semanticTokens.backgroundCtrlShapeSafeNeutralRest, + color: tokens.colorNeutralStrokeAccessible, + borderColor: tokens.colorNeutralStrokeAccessible, }, [`& ~ .${switchClassNames.label}`]: { - color: semanticTokens.foregroundContentNeutralPrimary, + color: tokens.colorNeutralForeground1, }, ':hover': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundHover, - borderColor: semanticTokens.ctrlChoiceBaseStrokeHover, - borderWidth: semanticTokens.strokeWidthCtrlOutlineHover, - color: semanticTokens.backgroundCtrlShapeSafeNeutralHover, + color: tokens.colorNeutralStrokeAccessibleHover, + borderColor: tokens.colorNeutralStrokeAccessibleHover, }, }, ':hover:active': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundPressed, - borderColor: semanticTokens.ctrlChoiceBaseStrokePressed, - borderWidth: semanticTokens.strokeWidthCtrlOutlinePressed, - color: semanticTokens.backgroundCtrlShapeSafeNeutralPressed, + color: tokens.colorNeutralStrokeAccessiblePressed, + borderColor: tokens.colorNeutralStrokeAccessiblePressed, }, }, }, @@ -156,27 +145,22 @@ const useInputBaseClassName = makeResetStyles({ // Enabled and checked ':enabled:checked': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: semanticTokens.backgroundCtrlActiveBrandRest, - borderColor: semanticTokens.strokeCtrlOnBrandRest, - borderWidth: semanticTokens.strokeWidthCtrlOutlineRest, - color: semanticTokens.foregroundCtrlOnActiveBrandRest, + backgroundColor: tokens.colorCompoundBrandBackground, + color: tokens.colorNeutralForegroundInverted, + borderColor: tokens.colorTransparentStroke, }, ':hover': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: semanticTokens.backgroundCtrlActiveBrandHover, - borderColor: semanticTokens._ctrlSwitchStrokeOnActiveBrandHover, - borderWidth: semanticTokens.strokeWidthCtrlOutlineHover, - color: semanticTokens.foregroundCtrlOnActiveBrandHover, + backgroundColor: tokens.colorCompoundBrandBackgroundHover, + borderColor: tokens.colorTransparentStrokeInteractive, }, }, ':hover:active': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: semanticTokens.backgroundCtrlActiveBrandPressed, - borderColor: semanticTokens.strokeCtrlOnActiveBrandPressed, - borderWidth: semanticTokens.strokeWidthCtrlOutlinePressed, - color: semanticTokens.foregroundCtrlOnActiveBrandPressed, + backgroundColor: tokens.colorCompoundBrandBackgroundPressed, + borderColor: tokens.colorTransparentStrokeInteractive, }, }, }, @@ -184,20 +168,15 @@ const useInputBaseClassName = makeResetStyles({ // Disabled and unchecked ':disabled:not(:checked)': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: semanticTokens.ctrlChoiceBaseBackgroundDisabled, - borderColor: semanticTokens.ctrlChoiceBaseStrokeDisabled, - borderWidth: semanticTokens.strokeWidthCtrlOutlineRest, - color: semanticTokens.backgroundCtrlShapeSafeNeutralDisabled, + borderColor: tokens.colorNeutralStrokeDisabled, }, }, // Disabled and checked ':disabled:checked': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: semanticTokens.backgroundCtrlActiveBrandDisabled, - borderColor: semanticTokens.strokeCtrlOnActiveBrandDisabled, - borderWidth: semanticTokens.strokeWidthDefault, - color: semanticTokens.foregroundCtrlOnActiveBrandDisabled, + backgroundColor: tokens.colorNeutralBackgroundDisabled, + borderColor: tokens.colorTransparentStrokeDisabled, }, }, @@ -250,7 +229,7 @@ const useInputStyles = makeStyles({ }, above: { bottom: 0, - height: `calc(${semanticTokens.ctrlChoiceSwitchHeight} + ${semanticTokens.ctrlChoicePaddingVertical})`, + height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`, width: '100%', }, }); @@ -262,20 +241,20 @@ const useLabelStyles = makeStyles({ // 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}`, + marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`, + marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`, + padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`, }, above: { - paddingTop: semanticTokens._ctrlSwitchPaddingTextTop, - paddingBottom: semanticTokens._ctrlSwitchPaddingTextBottom, + paddingTop: tokens.spacingVerticalXS, + paddingBottom: tokens.spacingVerticalXS, width: '100%', }, after: { - paddingLeft: semanticTokens.gapInsideCtrlSmDefault, + paddingLeft: tokens.spacingHorizontalXS, }, before: { - paddingRight: semanticTokens.gapInsideCtrlSmDefault, + paddingRight: tokens.spacingHorizontalXS, }, }); diff --git a/packages/react-components/react-text/library/src/components/Text/Text.test.tsx b/packages/react-components/react-text/library/src/components/Text/Text.test.tsx index ae2e55e2d28bb..b5ebefe48c1aa 100644 --- a/packages/react-components/react-text/library/src/components/Text/Text.test.tsx +++ b/packages/react-components/react-text/library/src/components/Text/Text.test.tsx @@ -33,10 +33,10 @@ describe('Text', () => { const textElement = getByText('Test'); expect(textElement.nodeName).toBe('SPAN'); expect(textElement).toHaveStyle(` - font-size: var(--smtc-text-global-body3-font-size, var(--fontSizeBase300)); - font-family: var(--smtc-text-style-default-regular-font-family, var(--fontFamilyBase)); - font-weight: var(--smtc-text-style-default-regular-weight, var(--fontWeightRegular)); - line-height: var(--smtc-text-global-body3-line-height, var(--lineHeightBase300)); + font-family: var(--fontFamilyBase); + font-size: var(--fontSizeBase300); + font-weight: var(--fontWeightRegular); + line-height: var(--lineHeightBase300); display: inline; text-align: start; white-space: normal; @@ -114,63 +114,51 @@ describe('Text', () => { }); it.each([ - [100, 'Base', '100', '--smtc-text-global-caption2'], - [200, 'Base', '200', '--smtc-text-global-caption1'], - [300, 'Base', '300', '--smtc-text-global-body3'], - [400, 'Base', '400', '--smtc-text-global-body2'], - [500, 'Base', '500', '--smtc-text-global-body1'], - [600, 'Base', '600', '--smtc-text-global-subtitle2'], - [700, 'Hero', '700', '--smtc-text-global-subtitle1'], - [800, 'Hero', '800', '--smtc-text-global-title2'], - [900, 'Hero', '900', '--smtc-text-global-title1'], - [1000, 'Hero', '1000', '--smtc-text-global-display2'], - ] as const)('applies the %s token sizing styles', (sizeToken, expectedPrefix, expectedValue, semanticToken) => { + [100, 'Base', '100'], + [200, 'Base', '200'], + [300, 'Base', '300'], + [400, 'Base', '400'], + [500, 'Base', '500'], + [600, 'Base', '600'], + [700, 'Hero', '700'], + [800, 'Hero', '800'], + [900, 'Hero', '900'], + [1000, 'Hero', '1000'], + ] as const)('applies the %s token sizing styles', (sizeToken, expectedPrefix, expectedValue) => { const { getByText } = render(Test); const textElement = getByText('Test'); expect(textElement).toHaveStyle(` - font-size: var(${semanticToken + '-font-size'}, var(--fontSize${expectedPrefix}${expectedValue})); - line-height: var(${semanticToken + '-line-height'}, var(--lineHeight${expectedPrefix}${expectedValue})); + font-size: var(--fontSize${expectedPrefix}${expectedValue}); + line-height: var(--lineHeight${expectedPrefix}${expectedValue}); `); }); it.each([ - ['base', 'Base', '--smtc-text-style-default-regular-font-family'], - ['monospace', 'Monospace', null], - ['numeric', 'Numeric', null], - ] as const)('applies %s font', (input, expectedValue, semanticToken) => { + ['base', 'Base'], + ['monospace', 'Monospace'], + ['numeric', 'Numeric'], + ] as const)('applies %s font', (input, expectedValue) => { const { getByText } = render(Test); const textElement = getByText('Test'); - if (semanticToken) { - expect(textElement).toHaveStyle(` - font-family: var(${semanticToken}, var(--fontFamily${expectedValue})); - `); - } else { - expect(textElement).toHaveStyle(` - font-family: var(--fontFamily${expectedValue}); - `); - } + expect(textElement).toHaveStyle(` + font-family: var(--fontFamily${expectedValue}); + `); }); it.each([ - ['regular', 'Regular', '--smtc-text-style-default-regular-weight'], - ['medium', 'Medium', null], - ['semibold', 'Semibold', null], - ['bold', 'Bold', null], - ] as const)('applies %s weight', (input, expectedValue, semanticToken) => { + ['regular', 'Regular'], + ['medium', 'Medium'], + ['semibold', 'Semibold'], + ['bold', 'Bold'], + ] as const)('applies %s weight', (input, expectedValue) => { const { getByText } = render(Test); const textElement = getByText('Test'); - if (semanticToken) { - expect(textElement).toHaveStyle(` - font-weight: var(${semanticToken}, var(--fontWeight${expectedValue})); - `); - } else { - expect(textElement).toHaveStyle(` - font-weight: var(--fontWeight${expectedValue}); - `); - } + expect(textElement).toHaveStyle(` + font-weight: var(--fontWeight${expectedValue}); + `); }); it.each([ diff --git a/packages/react-components/react-text/library/src/components/Text/useTextStyles.styles.ts b/packages/react-components/react-text/library/src/components/Text/useTextStyles.styles.ts index 8fb76a2cdc103..6fd1bd586fa5c 100644 --- a/packages/react-components/react-text/library/src/components/Text/useTextStyles.styles.ts +++ b/packages/react-components/react-text/library/src/components/Text/useTextStyles.styles.ts @@ -2,7 +2,6 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import type { TextSlots, TextState } from './Text.types'; import { SlotClassNames } from '@fluentui/react-utilities'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const textClassNames: SlotClassNames = { root: 'fui-Text', @@ -13,10 +12,10 @@ export const textClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { - fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, - fontSize: semanticTokens.textGlobalBody3FontSize, - lineHeight: semanticTokens.textGlobalBody3LineHeight, - fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontFamily: tokens.fontFamilyBase, + fontSize: tokens.fontSizeBase300, + lineHeight: tokens.lineHeightBase300, + fontWeight: tokens.fontWeightRegular, textAlign: 'start', display: 'inline', whiteSpace: 'normal', @@ -46,40 +45,40 @@ const useStyles = makeStyles({ textDecorationLine: 'line-through underline', }, base100: { - fontSize: semanticTokens.textGlobalCaption2FontSize, - lineHeight: semanticTokens.textGlobalCaption2LineHeight, + fontSize: tokens.fontSizeBase100, + lineHeight: tokens.lineHeightBase100, }, base200: { - fontSize: semanticTokens.textGlobalCaption1FontSize, - lineHeight: semanticTokens.textGlobalCaption1LineHeight, + fontSize: tokens.fontSizeBase200, + lineHeight: tokens.lineHeightBase200, }, base400: { - fontSize: semanticTokens.textGlobalBody2FontSize, - lineHeight: semanticTokens.textGlobalBody2LineHeight, + fontSize: tokens.fontSizeBase400, + lineHeight: tokens.lineHeightBase400, }, base500: { - fontSize: semanticTokens.textGlobalBody1FontSize, - lineHeight: semanticTokens.textGlobalBody1LineHeight, + fontSize: tokens.fontSizeBase500, + lineHeight: tokens.lineHeightBase500, }, base600: { - fontSize: semanticTokens.textGlobalSubtitle2FontSize, - lineHeight: semanticTokens.textGlobalSubtitle2LineHeight, + fontSize: tokens.fontSizeBase600, + lineHeight: tokens.lineHeightBase600, }, hero700: { - fontSize: semanticTokens.textGlobalSubtitle1FontSize, - lineHeight: semanticTokens.textGlobalSubtitle1LineHeight, + fontSize: tokens.fontSizeHero700, + lineHeight: tokens.lineHeightHero700, }, hero800: { - fontSize: semanticTokens.textGlobalTitle2FontSize, - lineHeight: semanticTokens.textGlobalTitle2LineHeight, + fontSize: tokens.fontSizeHero800, + lineHeight: tokens.lineHeightHero800, }, hero900: { - fontSize: semanticTokens.textGlobalTitle1FontSize, - lineHeight: semanticTokens.textGlobalTitle1LineHeight, + fontSize: tokens.fontSizeHero900, + lineHeight: tokens.lineHeightHero900, }, hero1000: { - fontSize: semanticTokens.textGlobalDisplay2FontSize, - lineHeight: semanticTokens.textGlobalDisplay2LineHeight, + fontSize: tokens.fontSizeHero1000, + lineHeight: tokens.lineHeightHero1000, }, monospace: { fontFamily: tokens.fontFamilyMonospace, diff --git a/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts b/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts index 5a593dc205e6f..10e9827c2e360 100644 --- a/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts +++ b/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts @@ -1,20 +1,13 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; -import { tokens } from '@fluentui/react-theme'; +import { tokens, typographyStyles } from '@fluentui/react-theme'; import { SlotClassNames } from '@fluentui/react-utilities'; import type { TextareaSlots, TextareaState } from './Textarea.types'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const textareaClassNames: SlotClassNames = { root: 'fui-Textarea', textarea: 'fui-Textarea__textarea', }; -// Maintaining the correct corner radius: -// Use the whole border-radius as the height and only put radii on the bottom corners. -// (Otherwise the radius would be automatically reduced to fit available space.) -// max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0. -const inputBottomFocusBorderStroke = `max(${semanticTokens.ctrlInputBottomLineStrokeWidthSelected}, ${semanticTokens.cornerCtrlRest})`; - /** * Styles for the root(wrapper) slot */ @@ -24,19 +17,15 @@ const useRootStyles = makeStyles({ boxSizing: 'border-box', position: 'relative', // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size. - padding: `0 0 ${semanticTokens.ctrlInputBottomLineStrokeWidthSelected} 0`, + padding: `0 0 ${tokens.strokeWidthThick} 0`, margin: '0', - borderRadius: semanticTokens.cornerCtrlRest, + borderRadius: tokens.borderRadiusMedium, verticalAlign: 'top', - backgroundColor: semanticTokens.ctrlInputBackgroundRest, - ':focus-within': { - backgroundColor: semanticTokens.ctrlInputBackgroundSelected, - }, }, disabled: { - backgroundColor: semanticTokens.ctrlInputBackgroundDisabled, - border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeCtrlOnNeutralDisabled}`, + backgroundColor: tokens.colorTransparentBackground, + border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`, '@media (forced-colors: active)': { ...shorthands.borderColor('GrayText'), @@ -54,15 +43,20 @@ const useRootStyles = makeStyles({ bottom: '-1px', right: '-1px', - height: inputBottomFocusBorderStroke, - borderBottomLeftRadius: semanticTokens.cornerCtrlRest, - borderBottomRightRadius: semanticTokens.cornerCtrlRest, + // Maintaining the correct corner radius: + // Use the whole border-radius as the height and only put radii on the bottom corners. + // (Otherwise the radius would be automatically reduced to fit available space.) + // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0. + height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`, + borderBottomLeftRadius: tokens.borderRadiusMedium, + borderBottomRightRadius: tokens.borderRadiusMedium, + // 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: `${semanticTokens.ctrlInputBottomLineStrokeWidthSelected} solid ${semanticTokens.ctrlInputBottomLineStrokeSelected}`, - clipPath: `inset(calc(100% - ${semanticTokens.ctrlInputBottomLineStrokeWidthSelected}) 0 0 0)`, + borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`, + clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`, // Animation for focus OUT transform: 'scaleX(0)', @@ -89,77 +83,63 @@ const useRootStyles = makeStyles({ }, ':focus-within:active::after': { // This is if the user clicks the field again while it's already focused - borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected, + borderBottomColor: tokens.colorCompoundBrandStrokePressed, }, ':focus-within': { - outlineWidth: semanticTokens.ctrlFocusOuterStrokeWidth, + outlineWidth: tokens.strokeWidthThick, outlineStyle: 'solid', - outlineColor: semanticTokens.nullColor, + outlineColor: 'transparent', }, }, filled: { - border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlFocusOuterStroke}`, + border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`, ':hover,:focus-within': { - ...shorthands.borderColor(semanticTokens._ctrlFocusOuterStrokeInteractive), + ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive), }, }, 'filled-darker': { - backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, - ':focus-within': { - backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, - }, + backgroundColor: tokens.colorNeutralBackground3, }, 'filled-lighter': { - backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, - ':focus-within': { - backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, - }, + backgroundColor: tokens.colorNeutralBackground1, }, 'filled-darker-shadow': { - backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, - border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlFocusInnerStroke}`, + backgroundColor: tokens.colorNeutralBackground3, + border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`, boxShadow: tokens.shadow2, - ':focus-within': { - backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker, - }, }, 'filled-lighter-shadow': { - backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, - border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens._ctrlFocusOuterStrokeInteractive}`, + backgroundColor: tokens.colorNeutralBackground1, + border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`, boxShadow: tokens.shadow2, - ':focus-within': { - backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter, - }, }, outline: { - border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeRest}`, - borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeRest, + backgroundColor: tokens.colorNeutralBackground1, + border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`, + borderBottomColor: tokens.colorNeutralStrokeAccessible, }, outlineInteractive: { ':hover': { - border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeHover}`, - borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeHover, - ':focus-within': { - borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected, - }, + border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`, + borderBottomColor: tokens.colorNeutralStrokeAccessibleHover, }, ':active': { - border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokePressed}`, - borderBottomColor: semanticTokens.ctrlInputBottomLineStrokePressed, + border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`, + borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed, }, ':focus-within': { - border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeSelected}`, - borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected, + border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`, + borderBottomColor: tokens.colorCompoundBrandStroke, }, }, invalid: { ':not(:focus-within),:hover:not(:focus-within)': { - ...shorthands.borderColor(semanticTokens.ctrlInputBackgroundError), + ...shorthands.borderColor(tokens.colorPaletteRedBorder2), }, }, }); @@ -173,13 +153,13 @@ const useTextareaStyles = makeStyles({ margin: '0', backgroundColor: 'transparent', boxSizing: 'border-box', - color: semanticTokens.foregroundContentNeutralPrimary, + color: tokens.colorNeutralForeground1, flexGrow: 1, - fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontFamily: tokens.fontFamilyBase, height: '100%', '::placeholder': { - color: semanticTokens._ctrlInputNeutralForegroundPlaceholder, + color: tokens.colorNeutralForeground4, opacity: 1, }, @@ -187,10 +167,10 @@ const useTextareaStyles = makeStyles({ }, disabled: { - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + color: tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', '::placeholder': { - color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled, + color: tokens.colorNeutralForegroundDisabled, }, }, @@ -200,22 +180,19 @@ const useTextareaStyles = makeStyles({ minHeight: '40px', padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`, maxHeight: '200px', - fontSize: semanticTokens.textGlobalCaption1FontSize, - lineHeight: semanticTokens.textGlobalCaption1LineHeight, + ...typographyStyles.caption1, }, medium: { minHeight: '52px', padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`, maxHeight: '260px', - fontSize: semanticTokens.textGlobalBody3FontSize, - lineHeight: semanticTokens.textGlobalBody3LineHeight, + ...typographyStyles.body1, }, large: { minHeight: '64px', padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`, maxHeight: '320px', - fontSize: semanticTokens.textGlobalBody2FontSize, - lineHeight: semanticTokens.textGlobalBody2LineHeight, + ...typographyStyles.body2, }, }); diff --git a/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTreeStyles.styles.ts b/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTreeStyles.styles.ts index 7546743f72f25..0086c72db2817 100644 --- a/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTreeStyles.styles.ts +++ b/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTreeStyles.styles.ts @@ -1,7 +1,7 @@ import { makeResetStyles, mergeClasses } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; +import { tokens } from '@fluentui/react-theme'; import { FlatTreeSlots, FlatTreeState } from './FlatTree.types'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const flatTreeClassNames: SlotClassNames> = { root: 'fui-FlatTree', @@ -10,7 +10,7 @@ export const flatTreeClassNames: SlotClassNames { diff --git a/packages/react-components/react-tree/library/src/components/Tree/useTreeStyles.styles.ts b/packages/react-components/react-tree/library/src/components/Tree/useTreeStyles.styles.ts index 065533f71b98d..ff2ab6fa83415 100644 --- a/packages/react-components/react-tree/library/src/components/Tree/useTreeStyles.styles.ts +++ b/packages/react-components/react-tree/library/src/components/Tree/useTreeStyles.styles.ts @@ -1,7 +1,7 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { TreeSlots, TreeState } from './Tree.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import * as semanticTokens from '@fluentui/semantic-tokens'; +import { tokens } from '@fluentui/react-theme'; export const treeClassNames: SlotClassNames> = { root: 'fui-Tree', @@ -10,12 +10,12 @@ export const treeClassNames: SlotClassNames> = const useBaseStyles = makeResetStyles({ display: 'flex', flexDirection: 'column', - rowGap: semanticTokens._ctrlTreeGapInsideDefault, + rowGap: tokens.spacingVerticalXXS, }); const useStyles = makeStyles({ subtree: { - paddingTop: semanticTokens._ctrlTreeGapInsideDefault, + paddingTop: tokens.spacingVerticalXXS, }, }); diff --git a/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts b/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts index 2684fb82c7d69..22d1afc695dbb 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts +++ b/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts @@ -1,11 +1,11 @@ import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; +import { tokens } from '@fluentui/react-theme'; import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; import { treeItemLevelToken } from '../../utils/tokens'; import { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles'; import { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const treeItemClassNames: SlotClassNames = { root: 'fui-TreeItem', @@ -17,9 +17,9 @@ const useBaseStyles = makeResetStyles({ display: 'flex', flexDirection: 'column', boxSizing: 'border-box', - backgroundColor: semanticTokens.backgroundCtrlSubtleRest, - color: semanticTokens.foregroundCtrlOnSubtleRest, - paddingRight: semanticTokens.paddingContentNone, + backgroundColor: tokens.colorSubtleBackground, + color: tokens.colorNeutralForeground2, + paddingRight: tokens.spacingHorizontalNone, // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser ':focus': { outlineStyle: 'none', @@ -30,11 +30,12 @@ const useBaseStyles = makeResetStyles({ // 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, + borderRadius: tokens.borderRadiusMedium, + outlineColor: tokens.colorStrokeFocus2, + outlineRadius: tokens.borderRadiusMedium, + // FIXME: tokens.strokeWidthThick causes some weird bugs + outlineWidth: '2px', + outlineStyle: 'solid', }, { customizeSelector: selector => diff --git a/packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts b/packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts index 15b66505a4682..05d682d1510bb 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts +++ b/packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts @@ -1,11 +1,10 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { tokens } from '@fluentui/react-theme'; +import { tokens, typographyStyles } from '@fluentui/react-theme'; import { useTreeContext_unstable } from '../../contexts/treeContext'; import { treeItemLevelToken } from '../../utils/tokens'; import { useTreeItemContext_unstable } from '../../contexts/treeItemContext'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const treeItemLayoutClassNames: SlotClassNames = { root: 'fui-TreeItemLayout', @@ -25,11 +24,19 @@ const useRootBaseStyles = makeResetStyles({ boxSizing: 'border-box', gridArea: 'layout', ':hover': { - color: semanticTokens.foregroundCtrlOnSubtleHover, - backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + color: tokens.colorNeutralForeground2Hover, + backgroundColor: tokens.colorSubtleBackgroundHover, // TODO: stop using treeItemLayoutClassNames.expandIcon for styling [`& .${treeItemLayoutClassNames.expandIcon}`]: { - color: semanticTokens._ctrlTreeIconOnSubtleHover, + color: tokens.colorNeutralForeground3Hover, + }, + }, + ':active': { + color: tokens.colorNeutralForeground2Pressed, + backgroundColor: tokens.colorSubtleBackgroundPressed, + // TODO: stop using treeItemLayoutClassNames.expandIcon for styling + [`& .${treeItemLayoutClassNames.expandIcon}`]: { + color: tokens.colorNeutralForeground3Pressed, }, }, ':active': { @@ -47,23 +54,17 @@ const useRootBaseStyles = makeResetStyles({ */ const useRootStyles = makeStyles({ leaf: { - paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${semanticTokens.ctrlListIndentLevel1})`, + paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`, }, branch: { - paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${semanticTokens.ctrlListIndentLevel1})`, + paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`, }, medium: { - fontWeight: semanticTokens.textStyleDefaultRegularWeight, - fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, - fontSize: semanticTokens.textRampItemBodyFontSize, - lineHeight: semanticTokens.textRampItemBodyLineHeight, + ...typographyStyles.body1, }, small: { minHeight: '24px', - fontWeight: semanticTokens.textStyleDefaultRegularWeight, - fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, - fontSize: semanticTokens.textRampSmItemBodyFontSize, - lineHeight: semanticTokens.textRampSmItemBodyLineHeight, + ...typographyStyles.caption1, }, // Appearance variations subtle: {}, @@ -76,15 +77,12 @@ const useRootStyles = makeStyles({ }, }, transparent: { - backgroundColor: semanticTokens.nullColor, - color: semanticTokens.foregroundCtrlOnTransparentRest, + backgroundColor: tokens.colorTransparentBackground, ':hover': { backgroundColor: tokens.colorTransparentBackgroundHover, - color: semanticTokens._ctrlTreeOnTransparentHover, }, ':active': { backgroundColor: tokens.colorTransparentBackgroundPressed, - color: semanticTokens._ctrlTreeOnTransparentPressed, }, }, }); @@ -122,7 +120,7 @@ const useExpandIconBaseStyles = makeResetStyles({ justifyContent: 'center', minWidth: '24px', boxSizing: 'border-box', - color: semanticTokens._ctrlTreeIconOnSubtle, + color: tokens.colorNeutralForeground3, flex: `0 0 auto`, padding: `${tokens.spacingVerticalXS} 0`, }); @@ -131,8 +129,7 @@ const useExpandIconBaseStyles = makeResetStyles({ * Styles for the content slot */ const useMainBaseStyles = makeResetStyles({ - // padding: `0 ${tokens.spacingHorizontalXXS}`, - padding: `${semanticTokens._ctrlTreePaddingTextTop} ${semanticTokens._ctrlTreePaddingTextRight} ${semanticTokens._ctrlTreePaddingTextBottom} ${semanticTokens._ctrlTreePaddingTextLeft}`, + padding: `0 ${tokens.spacingHorizontalXXS}`, }); /** @@ -141,9 +138,9 @@ const useMainBaseStyles = makeResetStyles({ const useIconBaseStyles = makeResetStyles({ display: 'flex', alignItems: 'center', - color: semanticTokens.foregroundCtrlOnSubtleRest, - lineHeight: semanticTokens.textGlobalBody1LineHeight, - fontSize: semanticTokens.textGlobalBody1FontSize, + color: tokens.colorNeutralForeground2, + lineHeight: tokens.lineHeightBase500, + fontSize: tokens.fontSizeBase500, }); const useIconBeforeStyles = makeStyles({ diff --git a/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts b/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts index a0a0a6ccccbbf..4c1fb490f214c 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts +++ b/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts @@ -4,7 +4,6 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import { tokens, typographyStyles } from '@fluentui/react-theme'; import { treeItemLevelToken } from '../../utils/tokens'; import { useTreeItemContext_unstable } from '../../contexts/treeItemContext'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const treeItemPersonaLayoutClassNames: SlotClassNames = { root: 'fui-TreeItemPersonaLayout', @@ -28,19 +27,19 @@ const useRootBaseStyles = makeResetStyles({ alignItems: 'center', ...typographyStyles.body1, ':active': { - color: semanticTokens.foregroundCtrlOnSubtlePressed, - backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + color: tokens.colorNeutralForeground2Pressed, + backgroundColor: tokens.colorSubtleBackgroundPressed, // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: { - color: semanticTokens._ctrlPersonaTreeIconOnSubtlePressed, + color: tokens.colorNeutralForeground3Pressed, }, }, ':hover': { - color: semanticTokens.foregroundCtrlOnSubtleHover, - backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + color: tokens.colorNeutralForeground2Hover, + backgroundColor: tokens.colorSubtleBackgroundHover, // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: { - color: semanticTokens._ctrlTreeIconOnSubtleHover, + color: tokens.colorNeutralForeground3Hover, }, }, }); @@ -50,10 +49,10 @@ const useRootBaseStyles = makeResetStyles({ */ const useRootStyles = makeStyles({ leaf: { - paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${semanticTokens.ctrlListIndentLevel1})`, + paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`, }, branch: { - paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${semanticTokens.ctrlListIndentLevel1})`, + paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`, }, }); @@ -119,7 +118,7 @@ const useExpandIconBaseStyles = makeResetStyles({ justifyContent: 'center', minWidth: '24px', boxSizing: 'border-box', - color: semanticTokens._ctrlTreeIconOnSubtle, + color: tokens.colorNeutralForeground3, gridArea: 'expandIcon', flex: `0 0 auto`, padding: `${tokens.spacingVerticalXS} 0`, diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index af60d81c1f5a3..1b264e4f37e63 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -4,31 +4,115 @@ ```ts +import { AccordionHeaderState } from '@fluentui/react-accordion'; +import { AvatarState } from '@fluentui/react-avatar'; import { ButtonState } from '@fluentui/react-button'; import { CompoundButtonState } from '@fluentui/react-button'; +import { DialogSurfaceState } 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 { FlatTreeState } from '@fluentui/react-tree'; import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider'; +import { InlineDrawerState } from '@fluentui/react-drawer'; +import { LabelState } from '@fluentui/react-label'; +import { LinkState } from '@fluentui/react-link'; import { MenuButtonState } from '@fluentui/react-button'; +import { ProgressBarState } from '@fluentui/react-progress'; +import { RatingDisplayState } from '@fluentui/react-rating'; +import { RatingItemState } from '@fluentui/react-rating'; +import { SpinnerState } from '@fluentui/react-spinner'; import { SplitButtonState } from '@fluentui/react-button'; +import { SwitchState } from '@fluentui/react-switch'; +import { TextareaState } from '@fluentui/react-textarea'; +import { TextState } from '@fluentui/react-text'; import { ToggleButtonState } from '@fluentui/react-button'; +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 (undocumented) export const useSemanticButtonStyles: (_state: unknown) => ButtonState; // @public (undocumented) export const useSemanticCompoundButtonStyles: (_state: unknown) => CompoundButtonState; +// @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 (undocumented) +export const useSemanticFlatTreeStyles: (_state: unknown) => FlatTreeState; + +// @public +export const useSemanticInlineDrawerStyles: (_state: unknown) => InlineDrawerState; + +// @public +export const useSemanticLabelStyles: (_state: unknown) => LabelState; + +// @public (undocumented) +export const useSemanticLinkStyles: (_state: unknown) => LinkState; + // @public (undocumented) export const useSemanticMenuButtonStyles: (_state: unknown) => MenuButtonState; +// @public +export const useSemanticOverlayDrawerSurfaceStyles: (_state: unknown) => DialogSurfaceState; + +// @public +export const useSemanticProgressBarStyles: (_state: unknown) => ProgressBarState; + +// @public +export const useSemanticRatingDisplayStyles: (_state: unknown) => RatingDisplayState; + +// @public +export const useSemanticRatingItemStyles: (_state: unknown) => RatingItemState; + +// @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 useSemanticTextareaStyles: (_state: unknown) => TextareaState; + +// @public +export const useSemanticTextStyles: (_state: unknown) => TextState; + // @public (undocumented) export const useSemanticToggleButtonStyles: (_state: unknown) => ToggleButtonState; +// @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/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 2c2bbf4648ab6..210db57a9874a 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -24,13 +24,28 @@ "@fluentui/scripts-api-extractor": "*" }, "dependencies": { + "@fluentui/react-accordion": "^9.6.8", + "@fluentui/react-avatar": "^9.7.6", "@fluentui/react-button": "^9.4.6", + "@fluentui/react-dialog": "^9.12.8", + "@fluentui/react-divider": "^9.2.86", + "@fluentui/react-drawer": "^9.7.8", "@fluentui/react-icons": "^2.0.245", - "@fluentui/react-tabster": "^9.24.6", "@fluentui/react-jsx-runtime": "^9.0.54", + "@fluentui/react-label": "^9.1.87", + "@fluentui/react-link": "^9.4.6", + "@fluentui/react-motion": "^9.7.2", + "@fluentui/react-progress": "^9.2.6", "@fluentui/react-provider": "^9.20.6", + "@fluentui/react-rating": "^9.1.6", "@fluentui/react-shared-contexts": "^9.23.1", + "@fluentui/react-spinner": "^9.5.11", + "@fluentui/react-switch": "^9.2.6", + "@fluentui/react-tabster": "^9.24.6", + "@fluentui/react-text": "^9.4.36", + "@fluentui/react-textarea": "^9.4.6", "@fluentui/react-theme": "^9.1.24", + "@fluentui/react-tree": "^9.10.9", "@fluentui/react-utilities": "^9.19.0", "@fluentui/semantic-tokens": "0.0.0-alpha.1", "@griffel/react": "^1.5.22", 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 0000000000000..c45968b9876de --- /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 0000000000000..48a48e466093f --- /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( + accordionHeaderClassNames.root, + styles.root, + state.inline && styles.rootInline, + state.disabled && styles.rootDisabled, + state.root.className, + getSlotClassNameProp_unstable(state.root), + ); + + state.button.className = mergeClasses( + 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, + state.button.className, + getSlotClassNameProp_unstable(state.button), + ); + + if (state.expandIcon) { + state.expandIcon.className = mergeClasses( + accordionHeaderClassNames.expandIcon, + styles.expandIcon, + state.expandIconPosition === 'start' && styles.expandIconStart, + state.expandIconPosition === 'end' && styles.expandIconEnd, + state.expandIcon.className, + getSlotClassNameProp_unstable(state.expandIcon), + ); + } + + if (state.icon) { + state.icon.className = mergeClasses( + accordionHeaderClassNames.icon, + styles.icon, + state.icon.className, + 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 0000000000000..fa4d8569fb8d5 --- /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 0000000000000..319a01212a226 --- /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( + avatarClassNames.badge, + styles.badge, + state.badge.className, + getSlotClassNameProp_unstable(state.badge), + ); + } + + if (state.image) { + state.image.className = mergeClasses( + avatarClassNames.image, + imageClassName, + colorStyles[color], + state.badge && styles.badgeCutout, + state.image.className, + getSlotClassNameProp_unstable(state.image), + ); + } + + if (state.initials) { + state.initials.className = mergeClasses( + avatarClassNames.initials, + iconInitialsClassName, + colorStyles[color], + state.badge && styles.badgeCutout, + state.initials.className, + 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( + avatarClassNames.icon, + iconInitialsClassName, + iconSizeClass, + colorStyles[color], + state.badge && styles.badgeCutout, + state.icon.className, + getSlotClassNameProp_unstable(state.icon), + ); + } + + return state; +}; 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 index b20437dee453e..15da0f602447f 100644 --- 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 @@ -3,7 +3,7 @@ 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, ButtonState } from '@fluentui/react-button'; +import { buttonClassNames, type ButtonState } from '@fluentui/react-button'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; const iconSpacingVar = '--fui-Button__icon--spacing'; @@ -611,6 +611,7 @@ export const useSemanticButtonStyles = (_state: unknown): ButtonState => { const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state; state.root.className = mergeClasses( + state.root.className, buttonClassNames.root, rootBaseClassName, @@ -640,18 +641,16 @@ export const useSemanticButtonStyles = (_state: unknown): ButtonState => { // Icon-only styles iconOnly && rootIconOnlyStyles[size], - // User provided class name - state.root.className, getSlotClassNameProp_unstable(state.root), ); if (state.icon) { state.icon.className = mergeClasses( + state.icon.className, buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], - state.icon.className, getSlotClassNameProp_unstable(state.icon), ); } 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 index 6170dc19d007c..8c2ab9b5894f5 100644 --- 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 @@ -2,7 +2,7 @@ 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, CompoundButtonState } from '@fluentui/react-button'; +import { compoundButtonClassNames, type CompoundButtonState } from '@fluentui/react-button'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; const useRootStyles = makeStyles({ @@ -264,6 +264,7 @@ export const useSemanticCompoundButtonStyles = (_state: unknown): CompoundButton const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state; state.root.className = mergeClasses( + state.root.className, compoundButtonClassNames.root, // Root styles @@ -279,34 +280,32 @@ export const useSemanticCompoundButtonStyles = (_state: unknown): CompoundButton // Icon-only styles iconOnly && rootIconOnlyStyles[size], - // User provided class name - state.root.className, getSlotClassNameProp_unstable(state.root), ); state.contentContainer.className = mergeClasses( + state.contentContainer.className, compoundButtonClassNames.contentContainer, contentContainerStyles.base, - state.contentContainer.className, 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], - state.icon.className, getSlotClassNameProp_unstable(state.icon), ); } if (state.secondaryContent) { state.secondaryContent.className = mergeClasses( + state.secondaryContent.className, compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], - state.secondaryContent.className, getSlotClassNameProp_unstable(state.secondaryContent), ); } 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 index 37c726c62eaa0..99a57fe2ebc59 100644 --- 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 @@ -2,7 +2,7 @@ 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, MenuButtonState } from '@fluentui/react-button'; +import { menuButtonClassNames, type MenuButtonState } from '@fluentui/react-button'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; import { useSemanticButtonStyles } from './useSemanticButtonStyles.styles'; @@ -122,29 +122,29 @@ export const useSemanticMenuButtonStyles = (_state: unknown): MenuButtonState => 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], - state.root.className, 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, - state.icon.className, 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, - state.menuIcon.className, getSlotClassNameProp_unstable(state.menuIcon), ); } 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 index 98d28067cfccb..dfbd5e4c99614 100644 --- 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 @@ -2,7 +2,7 @@ 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, SplitButtonState } from '@fluentui/react-button'; +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: @@ -194,29 +194,29 @@ export const useSemanticSplitButtonStyles = (_state: unknown): SplitButtonState 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, - state.root.className, getSlotClassNameProp_unstable(state.root), ); if (state.menuButton) { state.menuButton.className = mergeClasses( + state.menuButton.className, splitButtonClassNames.menuButton, focusStyles.menuButton, - state.menuButton.className, getSlotClassNameProp_unstable(state.menuButton), ); } if (state.primaryActionButton) { state.primaryActionButton.className = mergeClasses( + state.primaryActionButton.className, splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, - state.primaryActionButton.className, getSlotClassNameProp_unstable(state.primaryActionButton), ); } 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 index e9b276a6ea1ba..3114ebf903d27 100644 --- 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 @@ -3,7 +3,7 @@ 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, ToggleButtonState, toggleButtonClassNames } from '@fluentui/react-button'; +import { buttonClassNames, type ToggleButtonState, toggleButtonClassNames } from '@fluentui/react-button'; import { useSemanticButtonStyles } from './useSemanticButtonStyles.styles'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; @@ -261,6 +261,7 @@ export const useSemanticToggleButtonStyles = (_state: unknown): ToggleButtonStat const { appearance, checked, disabled, disabledFocusable } = state; state.root.className = mergeClasses( + state.root.className, toggleButtonClassNames.root, // Primary high contrast styles @@ -276,17 +277,15 @@ export const useSemanticToggleButtonStyles = (_state: unknown): ToggleButtonStat (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], - // User provided class name - state.root.className, 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, - state.icon.className, getSlotClassNameProp_unstable(state.icon), ); } 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 0000000000000..ae7b6861aa395 --- /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 0000000000000..865c3f5d8c144 --- /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 0000000000000..b68e642906b2e --- /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 0000000000000..57319686a8a5a --- /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 0000000000000..59058aecd25e8 --- /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 0000000000000..ec4012207b30c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Drawer/useSemanticDrawerBaseStyles.styles.ts @@ -0,0 +1,99 @@ +import { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react'; +import type { DrawerBaseState } from '@fluentui/react-drawer'; +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 }: DrawerBaseState) => { + 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 0000000000000..ee9e9c6a46628 --- /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 0000000000000..713bcb3611dfe --- /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 0000000000000..678247dfe5691 --- /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 0000000000000..d55e6a6002423 --- /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 0000000000000..dfaa85d301a93 --- /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/Label/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Label/index.ts new file mode 100644 index 0000000000000..7c6b0a3eed31f --- /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 0000000000000..fff88db1963a1 --- /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 0000000000000..d42201fedd3d1 --- /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 0000000000000..2655267222b43 --- /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/ProgressBar/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/ProgressBar/index.ts new file mode 100644 index 0000000000000..96cb2329fd629 --- /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 0000000000000..3fcf2f625ebc4 --- /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/Rating/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Rating/index.ts new file mode 100644 index 0000000000000..96e32a10a0076 --- /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 0000000000000..8da4071c6706d --- /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 0000000000000..6854f81eb7311 --- /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/Spinner/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Spinner/index.ts new file mode 100644 index 0000000000000..f2642461bd5be --- /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 0000000000000..1e42153d0f603 --- /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 0000000000000..db314d7070e41 --- /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 0000000000000..0faeab93888f3 --- /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/Text/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Text/index.ts new file mode 100644 index 0000000000000..59be20e722dc4 --- /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 0000000000000..7b1a30a081cd1 --- /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 0000000000000..59e91ff2b2386 --- /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 0000000000000..70e916a5d3f91 --- /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.ctrlInputBottomLineStrokeSelected, + }, + ':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/Tree/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tree/index.ts new file mode 100644 index 0000000000000..a8f966d543fa7 --- /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 0000000000000..01cf3f3736457 --- /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 0000000000000..a6bcac25743b8 --- /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 0000000000000..0b903dbc9dc24 --- /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 0000000000000..4c0bb876da291 --- /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 0000000000000..9e5d86b28a7dd --- /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 index c30d01eded18f..3058914e9fba4 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -6,13 +6,73 @@ import { useSemanticMenuButtonStyles, useSemanticSplitButtonStyles, useSemanticToggleButtonStyles, -} from './Button/index'; +} from './Button'; +import { useSemanticAccordionHeaderStyles } from './Accordion'; +import { useSemanticAvatarStyles } from './Avatar'; +import { useSemanticDividerStyles } from './Divider'; +import { + useSemanticInlineDrawerStyles, + useSemanticDrawerBodyStyles, + useSemanticDrawerFooterStyles, + useSemanticDrawerHeaderStyles, + useSemanticOverlayDrawerSurfaceStyles, +} from './Drawer'; +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'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { + // Accordion styles + useAccordionHeaderStyles_unstable: useSemanticAccordionHeaderStyles, + // Avatar styles + useAvatarStyles_unstable: useSemanticAvatarStyles, + // Button styles useButtonStyles_unstable: useSemanticButtonStyles, useToggleButtonStyles_unstable: useSemanticToggleButtonStyles, useSplitButtonStyles_unstable: useSemanticSplitButtonStyles, useMenuButtonStyles_unstable: useSemanticMenuButtonStyles, useCompoundButtonStyles_unstable: useSemanticCompoundButtonStyles, - // ... more component style overrides + // Divider styles + useDividerStyles_unstable: useSemanticDividerStyles, + // Drawer styles + useInlineDrawerStyles_unstable: useSemanticInlineDrawerStyles, + useDrawerBodyStyles_unstable: useSemanticDrawerBodyStyles, + useDrawerFooterStyles_unstable: useSemanticDrawerFooterStyles, + useDrawerHeaderStyles_unstable: useSemanticDrawerHeaderStyles, + useOverlayDrawerSurfaceStyles_unstable: useSemanticOverlayDrawerSurfaceStyles, + // 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, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index ad4135289e5af..ede197eca2c36 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -1,8 +1,32 @@ -export { SEMANTIC_STYLE_HOOKS } from './component-styles/semanticStyleHooks'; +export { SEMANTIC_STYLE_HOOKS } from './component-styles//semanticStyleHooks'; export { useSemanticButtonStyles, useSemanticCompoundButtonStyles, useSemanticMenuButtonStyles, useSemanticSplitButtonStyles, useSemanticToggleButtonStyles, -} from './component-styles/Button/index'; +} from './component-styles//Button'; +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 { 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'; From b0c11cbfe387a3ac67a744f98c32a1aae965ffbb Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Mon, 7 Jul 2025 17:20:13 -0700 Subject: [PATCH 31/66] Semantic Style Hooks: Update Readme (#34797) --- .../src/decorators/withFluentProvider.tsx | 7 +--- .../library/README.md | 37 +++++++++++++++++++ 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx index 3cf9edf2ce248..7b25c42215555 100644 --- a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx +++ b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx @@ -16,7 +16,6 @@ import { defaultTheme, ThemeIds } from '../theme'; import { DIR_ID, THEME_ID } from '../constants'; import { FluentStoryContext } from '../hooks'; import { isDecoratorDisabled } from '../utils/isDecoratorDisabled'; -import { CustomStyleHooksProvider_unstable as CustomStyleHooksProvider } from '@fluentui/react-shared-contexts'; import { SEMANTIC_STYLE_HOOKS } from '@fluentui/semantic-style-hooks-preview'; const themes: Record = { @@ -48,10 +47,8 @@ export const withFluentProvider = (StoryFn: () => JSXElement, context: FluentSto const theme = paramTheme ?? globalTheme ?? themes[defaultTheme.id]; return ( - - - {isVrTest ? StoryFn() : {StoryFn()}} - + + {isVrTest ? StoryFn() : {StoryFn()}} ); }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/README.md b/packages/react-components/semantic-style-hooks-preview/library/README.md index 0e4086b1d87cd..3d2737baa0071 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/README.md +++ b/packages/react-components/semantic-style-hooks-preview/library/README.md @@ -3,3 +3,40 @@ **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. From cd3e1b0d476dc744be72a9c015ca0b8c57d1ea18 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 10 Jul 2025 09:45:30 -0700 Subject: [PATCH 32/66] React-Image: Add Semantic Tokens (#34625) --- .../etc/semantic-style-hooks-preview.api.md | 4 + .../library/package.json | 1 + .../src/component-styles/Image/index.ts | 1 + .../Image/useSemanticImageStyles.styles.ts | 89 +++++++++++++++++++ .../component-styles/semanticStyleHooks.ts | 3 + .../library/src/index.ts | 1 + 6 files changed, 99 insertions(+) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Image/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Image/useSemanticImageStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 1b264e4f37e63..110592196e056 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -15,6 +15,7 @@ import { DrawerFooterState } from '@fluentui/react-drawer'; import { DrawerHeaderState } from '@fluentui/react-drawer'; import { FlatTreeState } from '@fluentui/react-tree'; import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider'; +import { ImageState } from '@fluentui/react-image'; import { InlineDrawerState } from '@fluentui/react-drawer'; import { LabelState } from '@fluentui/react-label'; import { LinkState } from '@fluentui/react-link'; @@ -62,6 +63,9 @@ export const useSemanticDrawerHeaderStyles: (_state: unknown) => DrawerHeaderSta // @public (undocumented) export const useSemanticFlatTreeStyles: (_state: unknown) => FlatTreeState; +// @public (undocumented) +export const useSemanticImageStyles: (_state: unknown) => ImageState; + // @public export const useSemanticInlineDrawerStyles: (_state: unknown) => InlineDrawerState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 210db57a9874a..35049e491eb33 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -31,6 +31,7 @@ "@fluentui/react-divider": "^9.2.86", "@fluentui/react-drawer": "^9.7.8", "@fluentui/react-icons": "^2.0.245", + "@fluentui/react-image": "^9.1.84", "@fluentui/react-jsx-runtime": "^9.0.54", "@fluentui/react-label": "^9.1.87", "@fluentui/react-link": "^9.4.6", 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 0000000000000..9c2c5843cbe2a --- /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 0000000000000..52b5529f81d7b --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 3058914e9fba4..34c361d7837c9 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -32,6 +32,7 @@ import { useSemanticTreeStyles, useSemanticTreeItemPersonaLayoutStyles, } from './Tree'; +import { useSemanticImageStyles } from './Image'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -75,4 +76,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useTreeItemLayoutStyles_unstable: useSemanticTreeItemLayoutStyles, useTreeItemPersonaLayoutStyles_unstable: useSemanticTreeItemPersonaLayoutStyles, useTreeItemStyles_unstable: useSemanticTreeItemStyles, + // Image styles + useImageStyles_unstable: useSemanticImageStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index ede197eca2c36..80b625decc5e7 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -30,3 +30,4 @@ export { useSemanticTreeItemStyles, useSemanticTreeStyles, } from './component-styles/Tree'; +export { useSemanticImageStyles } from './component-styles/Image'; From 6a4fd14dcdfff4e0444bf3f9be52e9ace3e1249a Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Thu, 10 Jul 2025 10:52:35 -0700 Subject: [PATCH 33/66] Extended-tokens: React-List (#34706) --- .../src/List/ListActiveElement.stories.tsx | 6 ++ .../etc/semantic-style-hooks-preview.api.md | 4 + .../library/package.json | 1 + .../src/component-styles/List/index.ts | 1 + .../List/useSemanticListItemStyles.styles.ts | 93 +++++++++++++++++++ .../component-styles/semanticStyleHooks.ts | 3 + .../library/src/index.ts | 1 + .../etc/semantic-tokens.api.md | 25 ++++- .../src/fluentLegacyVariants.ts | 28 ++++++ .../semantic-tokens/src/fluentOverrides.ts | 2 + packages/semantic-tokens/src/index.ts | 7 ++ .../src/legacyVariant/tokens.ts | 58 +++++++++++- .../semantic-tokens/src/optional/tokens.ts | 5 +- 13 files changed, 227 insertions(+), 7 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/List/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/List/useSemanticListItemStyles.styles.ts diff --git a/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx b/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx index 32e1fcd08fc17..904575afee7ee 100644 --- a/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx +++ b/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx @@ -38,6 +38,12 @@ const useStyles = makeStyles({ }, itemSelected: { backgroundColor: tokens.colorSubtleBackgroundSelected, + ':hover': { + backgroundColor: tokens.colorSubtleBackgroundSelected, + }, + ':active': { + backgroundColor: tokens.colorSubtleBackgroundSelected, + }, '@media (forced-colors:active)': { background: 'Highlight', }, diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 110592196e056..f34b34ad4713e 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -19,6 +19,7 @@ import { ImageState } from '@fluentui/react-image'; import { InlineDrawerState } from '@fluentui/react-drawer'; 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 { ProgressBarState } from '@fluentui/react-progress'; import { RatingDisplayState } from '@fluentui/react-rating'; @@ -75,6 +76,9 @@ 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; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 35049e491eb33..2d177d1896082 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -35,6 +35,7 @@ "@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-progress": "^9.2.6", "@fluentui/react-provider": "^9.20.6", 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 0000000000000..e327e1b23a29b --- /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 0000000000000..327599a3b5a1e --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 34c361d7837c9..a62a6eaec4474 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -33,6 +33,7 @@ import { useSemanticTreeItemPersonaLayoutStyles, } from './Tree'; import { useSemanticImageStyles } from './Image'; +import { useSemanticListItemStyles } from './List'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -78,4 +79,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useTreeItemStyles_unstable: useSemanticTreeItemStyles, // Image styles useImageStyles_unstable: useSemanticImageStyles, + // List styles + useListItemStyles_unstable: useSemanticListItemStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index 80b625decc5e7..d5d226ae6fdb8 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -31,3 +31,4 @@ export { useSemanticTreeStyles, } from './component-styles/Tree'; export { useSemanticImageStyles } from './component-styles/Image'; +export { useSemanticListItemStyles } from './component-styles/List'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 44ec47ba7d61b..8c48f11b4268e 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -509,7 +509,7 @@ export const cornerCircular = "var(--smtc-corner-circular, var(--borderRadiusCir export const cornerCircularRaw = "--smtc-corner-circular"; // @public (undocumented) -export const cornerCtrlHover = "var(--smtc-corner-ctrl-hover, var(--smtc-corner-ctrl-rest))"; +export const cornerCtrlHover = "var(--smtc-corner-ctrl-hover, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; // @public (undocumented) export const cornerCtrlHoverRaw = "--smtc-corner-ctrl-hover"; @@ -533,7 +533,7 @@ export const cornerCtrlLgRest = "var(--smtc-corner-ctrl-lg-rest, var(--borderRad export const cornerCtrlLgRestRaw = "--smtc-corner-ctrl-lg-rest"; // @public (undocumented) -export const cornerCtrlPressed = "var(--smtc-corner-ctrl-pressed, var(--smtc-corner-ctrl-rest))"; +export const cornerCtrlPressed = "var(--smtc-corner-ctrl-pressed, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; // @public (undocumented) export const cornerCtrlPressedRaw = "--smtc-corner-ctrl-pressed"; @@ -1873,6 +1873,15 @@ export const ctrlLinkOnPageUnderlineDashed = "var(--smtc-ctrl-link-on-page-under // @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))"; @@ -1999,6 +2008,15 @@ export const ctrlListCornerRest = "var(--smtc-ctrl-list-corner-rest, var(--smtc- // @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))"; @@ -2041,6 +2059,9 @@ 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))"; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 71ed7c33d7ccd..b6f727b170a87 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -105,6 +105,34 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { 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', + }, _ctrlPersonaTreeIconOnSubtlePressed: { f2Token: 'colorNeutralForeground3Pressed', originalToken: 'foregroundCtrlOnSubtlePressed', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 11b42680aa4c0..8c5d4e9b61477 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -35,7 +35,9 @@ export const fluentOverrides: FluentOverrides = { backgroundCtrlSubtleRest: { f2Token: 'colorSubtleBackground' }, backgroundFlyoutSolid: { f2Token: 'colorNeutralBackground1' }, 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' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 993c0b61f249f..1e9bcf78b7925 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1805,6 +1805,13 @@ export { _ctrlInputBackgroundRestDarker, _ctrlInputBackgroundRestLighter, _ctrlInputNeutralForegroundPlaceholder, + _ctrlListBackgroundColorHover, + _ctrlListBackgroundColorPressed, + _ctrlListBackgroundColorRest, + _ctrlListForegroundColorHover, + _ctrlListForegroundColorPressed, + _ctrlListForegroundColorRest, + _ctrlListItemStroke, _ctrlPersonaTreeIconOnSubtlePressed, _ctrlSpinnerBackgroundEmpty, _ctrlSpinnerBackgroundFilled, diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 3230c309cc223..380cb0d8e8993 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -22,6 +22,8 @@ import { gapInsideCtrlDefaultRaw, backgroundCtrlNeutralRestRaw, foregroundCtrlNeutralSecondaryRestRaw, + backgroundCtrlSubtleHoverRaw, + backgroundCtrlSubtlePressedRaw, textGlobalBody3FontSizeRaw, textGlobalBody3LineHeightRaw, textStyleDefaultRegularWeightRaw, @@ -71,15 +73,16 @@ import { foregroundCtrlOnTransparentPressedRaw, foregroundCtrlOnTransparentRestRaw, paddingCtrlTextBottomRaw, + foregroundCtrlOnSubtleHoverRaw, + foregroundCtrlNeutralPrimaryHoverRaw, foregroundCtrlOnSubtlePressedRaw, foregroundCtrlNeutralPrimaryPressedRaw, + foregroundCtrlOnSubtleRestRaw, + strokeWidthCtrlOutlineRestRaw, textRampItemBodyFontSizeRaw, textRampItemBodyLineHeightRaw, strokeCtrlOnActiveBrandHoverRaw, strokeCtrlOnActiveBrandRestRaw, - foregroundCtrlOnSubtleRestRaw, - foregroundCtrlOnSubtleHoverRaw, - foregroundCtrlNeutralPrimaryHoverRaw, } from '../optional/variables'; /** @@ -243,6 +246,55 @@ export const _ctrlInputBackgroundRestLighter = `var(${ctrlInputBackgroundRestRaw * 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 foregroundCtrlOnSubtlePressed to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index 7a6756a22eadb..56b015b1ed763 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -107,6 +107,7 @@ import { colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralForegroundDisabled, + borderRadiusMedium, colorNeutralForeground1, colorNeutralForeground2, colorBrandForeground1, @@ -543,8 +544,8 @@ export const cornerCardHover = `var(${cornerCardHoverRaw}, var(${cornerCardRestR 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}))`; -export const cornerCtrlPressed = `var(${cornerCtrlPressedRaw}, var(${cornerCtrlRestRaw}))`; +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}))`; From 259b4a6fd99235265927e6b4195fea0195e61ab6 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Thu, 10 Jul 2025 15:09:10 -0400 Subject: [PATCH 34/66] update dialog to use semantic tokens (#34624) Co-authored-by: Mitch-At-Work --- .github/CODEOWNERS | 5 - .../library/etc/react-dialog.api.md | 9 ++ .../etc/semantic-style-hooks-preview.api.md | 19 ++++ .../src/component-styles/Dialog/index.ts | 5 + .../useSemanticDialogActionsStyles.styles.ts | 75 +++++++++++++ .../useSemanticDialogBodyStyles.styles.ts | 55 ++++++++++ .../useSemanticDialogContentStyles.styles.ts | 45 ++++++++ .../useSemanticDialogSurfaceStyles.styles.ts | 103 ++++++++++++++++++ .../useSemanticDialogTitleStyles.styles.ts | 89 +++++++++++++++ .../component-styles/semanticStyleHooks.ts | 13 +++ .../library/src/index.ts | 7 ++ .../etc/semantic-tokens.api.md | 25 +++-- .../src/components/dialog/tokens.ts | 11 +- .../semantic-tokens/src/control/tokens.ts | 7 +- .../src/fluentLegacyVariants.ts | 4 + .../semantic-tokens/src/fluentOverrides.ts | 11 ++ packages/semantic-tokens/src/index.ts | 1 + packages/semantic-tokens/src/legacy/tokens.ts | 35 +++--- .../src/legacyVariant/tokens.ts | 8 ++ .../semantic-tokens/src/optional/tokens.ts | 10 +- 20 files changed, 494 insertions(+), 43 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogActionsStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogBodyStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogContentStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogSurfaceStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogTitleStyles.styles.ts diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index ee06811d02bca..25e0a479e31b4 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -275,14 +275,9 @@ 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 -<<<<<<< HEAD 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/semantic-tokens @microsoft/xc-uxe -packages/react-components/react-tags/library @microsoft/cxe-prg @microsoft/teams-prg -packages/react-components/react-tags/stories @microsoft/cxe-prg @microsoft/teams-prg ->>>>>>> 48fdc34685 (Semantic-tokens: Add initial package (#34121)) packages/react-components/react-migration-v0-v9/library @microsoft/teams-prg packages/react-components/react-migration-v0-v9/stories @microsoft/teams-prg packages/react-components/react-datepicker-compat/library @microsoft/cxe-prg @ValentinaKozlova diff --git a/packages/react-components/react-dialog/library/etc/react-dialog.api.md b/packages/react-components/react-dialog/library/etc/react-dialog.api.md index 0e9c0514812d8..15e784bdc206d 100644 --- a/packages/react-components/react-dialog/library/etc/react-dialog.api.md +++ b/packages/react-components/react-dialog/library/etc/react-dialog.api.md @@ -231,6 +231,15 @@ export type DialogTriggerState = { children: React_2.ReactElement | null; }; +// @public (undocumented) +export const FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = "4px"; + +// @public (undocumented) +export const MEDIA_QUERY_BREAKPOINT_SELECTOR = "@media screen and (max-width: 480px)"; + +// @public (undocumented) +export const MEDIA_QUERY_SHORT_SCREEN = "@media screen and (max-height: 359px)"; + // @public export const renderDialog_unstable: (state: DialogState, contextValues: DialogContextValues) => JSX.Element; diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index f34b34ad4713e..fa1214a04dbce 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -8,7 +8,11 @@ import { AccordionHeaderState } from '@fluentui/react-accordion'; import { AvatarState } from '@fluentui/react-avatar'; import { ButtonState } from '@fluentui/react-button'; import { CompoundButtonState } from '@fluentui/react-button'; +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'; @@ -49,6 +53,21 @@ export const useSemanticButtonStyles: (_state: unknown) => ButtonState; // @public (undocumented) export const useSemanticCompoundButtonStyles: (_state: unknown) => CompoundButtonState; +// @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; 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 0000000000000..5ebb22f5989f1 --- /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 0000000000000..8a0794c7f122b --- /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, + 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, + [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + flexDirection: 'column', + justifySelf: 'stretch', + }, +}); + +const useStyles = makeStyles({ + gridPositionEnd: { + justifySelf: 'end', + gridColumnStart: 2, + gridColumnEnd: 4, + [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + gridColumnStart: 1, + gridRowStart: 4, + gridRowEnd: 'auto', + }, + }, + gridPositionStart: { + justifySelf: 'start', + gridColumnStart: 1, + gridColumnEnd: 2, + [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 0000000000000..aac7b5f8bc16a --- /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, + MEDIA_QUERY_BREAKPOINT_SELECTOR, + 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})`, + }, + + [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + maxWidth: '100vw', + gridTemplateRows: 'auto 1fr auto', + }, + + [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 0000000000000..4bbaa5aa283ad --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Dialog/useSemanticDialogContentStyles.styles.ts @@ -0,0 +1,45 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { dialogContentClassNames, type DialogContentState, 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, + + [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 0000000000000..86c967219de42 --- /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, + FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + MEDIA_QUERY_BREAKPOINT_SELECTOR, + 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', + }, + + [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + maxWidth: '100vw', + }, + + [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} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`, + borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + borderBottomWidth: 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 0000000000000..5370b4cb50697 --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index a62a6eaec4474..12e2bed558d17 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -34,6 +34,13 @@ import { } from './Tree'; import { useSemanticImageStyles } from './Image'; import { useSemanticListItemStyles } from './List'; +import { + useSemanticDialogActionsStyles, + useSemanticDialogBodyStyles, + useSemanticDialogContentStyles, + useSemanticDialogSurfaceStyles, + useSemanticDialogTitleStyles, +} from './Dialog'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -81,4 +88,10 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useImageStyles_unstable: useSemanticImageStyles, // List styles useListItemStyles_unstable: useSemanticListItemStyles, + // Dialog + useDialogActionsStyles_unstable: useSemanticDialogActionsStyles, + useDialogBodyStyles_unstable: useSemanticDialogBodyStyles, + useDialogContentStyles_unstable: useSemanticDialogContentStyles, + useDialogSurfaceStyles_unstable: useSemanticDialogSurfaceStyles, + useDialogTitleStyles_unstable: useSemanticDialogTitleStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index d5d226ae6fdb8..afbff184b30f4 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -32,3 +32,10 @@ export { } 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'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 8c48f11b4268e..2b114131848c3 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -401,7 +401,7 @@ export const backgroundLayerTertiary = "var(--smtc-background-layer-tertiary, va export const backgroundLayerTertiaryRaw = "--smtc-background-layer-tertiary"; // @public (undocumented) -export const backgroundSmoke = "var(--smtc-background-smoke)"; +export const backgroundSmoke = "var(--smtc-background-smoke, var(--colorBackgroundOverlay))"; // @public (undocumented) export const backgroundSmokeRaw = "--smtc-background-smoke"; @@ -1451,19 +1451,22 @@ export const ctrlDialogBackground = "var(--smtc-ctrl-dialog-background)"; export const ctrlDialogBackgroundRaw = "--smtc-ctrl-dialog-background"; // @public (undocumented) -export const ctrlDialogBaseCorner = "var(--smtc-ctrl-dialog-base-corner, var(--smtc-corner-card-rest))"; +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)"; +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))"; +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"; @@ -1475,7 +1478,7 @@ export const ctrlDialogLayerPaddingBottom = "var(--smtc-ctrl-dialog-layer-paddin export const ctrlDialogLayerPaddingBottomRaw = "--smtc-ctrl-dialog-layer-padding-bottom"; // @public (undocumented) -export const ctrlDialogStroke = "var(--smtc-ctrl-dialog-stroke, unset)"; +export const ctrlDialogStroke = "var(--smtc-ctrl-dialog-stroke, var(--smtc-null-color, var(--colorNeutralStroke2)))"; // @public (undocumented) export const ctrlDialogStrokeRaw = "--smtc-ctrl-dialog-stroke"; @@ -3215,7 +3218,7 @@ export const gapBetweenContentNone = "var(--smtc-gap-between-content-none)"; export const gapBetweenContentNoneRaw = "--smtc-gap-between-content-none"; // @public (undocumented) -export const gapBetweenContentSmall = "var(--smtc-gap-between-content-small)"; +export const gapBetweenContentSmall = "var(--smtc-gap-between-content-small, 8px)"; // @public (undocumented) export const gapBetweenContentSmallRaw = "--smtc-gap-between-content-small"; @@ -3245,7 +3248,7 @@ export const gapBetweenContentXxSmall = "var(--smtc-gap-between-content-xx-small export const gapBetweenContentXxSmallRaw = "--smtc-gap-between-content-xx-small"; // @public (undocumented) -export const gapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default)"; +export const gapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default, 8px)"; // @public (undocumented) export const gapBetweenCtrlDefaultRaw = "--smtc-gap-between-ctrl-default"; @@ -5389,25 +5392,25 @@ export const textRampPageHeaderLineHeight = "var(--smtc-text-ramp-page-header-li 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))"; +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))"; +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))"; +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))"; +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"; diff --git a/packages/semantic-tokens/src/components/dialog/tokens.ts b/packages/semantic-tokens/src/components/dialog/tokens.ts index 87349246c35a4..41b09323da732 100644 --- a/packages/semantic-tokens/src/components/dialog/tokens.ts +++ b/packages/semantic-tokens/src/components/dialog/tokens.ts @@ -1,5 +1,6 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE -import { cornerCardRestRaw, backgroundLayerPrimarySolidRaw } from '../../control/variables'; +import { nullColorRaw, cornerCardRestRaw, backgroundLayerPrimarySolidRaw } from '../../control/variables'; +import { colorNeutralStroke2, borderRadiusXLarge, colorNeutralBackground1, shadow64 } from '../../legacy/tokens'; import { ctrlDialogBackgroundRaw, ctrlDialogStrokeRaw, @@ -10,8 +11,8 @@ import { } from './variables'; export const ctrlDialogBackground = `var(${ctrlDialogBackgroundRaw})`; -export const ctrlDialogStroke = `var(${ctrlDialogStrokeRaw}, unset)`; -export const ctrlDialogBaseCorner = `var(${ctrlDialogBaseCornerRaw}, var(${cornerCardRestRaw}))`; -export const ctrlDialogLayerBackground = `var(${ctrlDialogLayerBackgroundRaw}, var(${backgroundLayerPrimarySolidRaw}))`; +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})`; +export const ctrlDialogBaseShadow = `var(${ctrlDialogBaseShadowRaw}, ${shadow64})`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index 9e41bc469e1f4..c2538c795cd2f 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -32,6 +32,7 @@ import { spacingHorizontalSNudge, borderRadiusCircular, strokeWidthThin, + colorBackgroundOverlay, colorNeutralStroke1, colorNeutralStrokeDisabled, colorNeutralStrokeOnBrand, @@ -325,8 +326,8 @@ export const paddingCtrlLgToNestedControl = `var(${paddingCtrlLgToNestedControlR export const gapBetweenContentNone = `var(${gapBetweenContentNoneRaw})`; export const gapBetweenContentXxSmall = `var(${gapBetweenContentXxSmallRaw})`; export const gapBetweenContentXSmall = `var(${gapBetweenContentXSmallRaw})`; -export const gapBetweenContentSmall = `var(${gapBetweenContentSmallRaw})`; -export const gapBetweenCtrlDefault = `var(${gapBetweenCtrlDefaultRaw})`; +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})`; @@ -344,7 +345,7 @@ export const gapInsideCtrlSmToLabel = `var(${gapInsideCtrlSmToLabelRaw}, ${spaci export const gapInsideCtrlLgToLabel = `var(${gapInsideCtrlLgToLabelRaw}, ${spacingHorizontalS})`; export const cornerCircular = `var(${cornerCircularRaw}, ${borderRadiusCircular})`; export const strokeWidthDefault = `var(${strokeWidthDefaultRaw}, ${strokeWidthThin})`; -export const backgroundSmoke = `var(${backgroundSmokeRaw})`; +export const backgroundSmoke = `var(${backgroundSmokeRaw}, ${colorBackgroundOverlay})`; export const strokeCtrlOnOutlineRest = `var(${strokeCtrlOnOutlineRestRaw}, ${colorNeutralStroke1})`; export const strokeCtrlOnOutlineHover = `var(${strokeCtrlOnOutlineHoverRaw}, ${colorNeutralStroke1})`; export const strokeCtrlOnOutlinePressed = `var(${strokeCtrlOnOutlinePressedRaw}, ${colorNeutralStroke1})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index b6f727b170a87..4b113547e41c8 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -85,6 +85,10 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'spacingHorizontalSNudge', originalToken: 'gapInsideCtrlDefault', }, + _ctrlDialogGapBetweenContentMedium: { + originalToken: 'gapBetweenContentMedium', + rawValue: '8px', // should be 24px + }, _ctrlDividerForegroundSubtle: { f2Token: 'colorNeutralForeground3', originalToken: 'foregroundCtrlHintDefault', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 8c5d4e9b61477..c92758bf72162 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -34,6 +34,7 @@ export const fluentOverrides: FluentOverrides = { backgroundCtrlSubtlePressed: { f2Token: 'colorSubtleBackgroundPressed' }, backgroundCtrlSubtleRest: { f2Token: 'colorSubtleBackground' }, backgroundFlyoutSolid: { f2Token: 'colorNeutralBackground1' }, + backgroundSmoke: { f2Token: 'colorBackgroundOverlay' }, cornerCircular: { f2Token: 'borderRadiusCircular' }, cornerCtrlHover: { f2Token: 'borderRadiusMedium' }, cornerCtrlLgRest: { f2Token: 'borderRadiusMedium' }, // Button uses borderRadiusMedium in all sizes @@ -71,6 +72,10 @@ export const fluentOverrides: FluentOverrides = { 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' }, @@ -142,6 +147,8 @@ export const fluentOverrides: FluentOverrides = { foregroundCtrlOnTransparentHover: { f2Token: 'colorNeutralForeground2BrandHover' }, foregroundCtrlOnTransparentPressed: { f2Token: 'colorNeutralForeground2BrandPressed' }, foregroundCtrlOnTransparentRest: { f2Token: 'colorNeutralForeground2' }, + gapBetweenContentSmall: { rawValue: '8px' }, + gapBetweenCtrlDefault: { rawValue: '8px' }, gapBetweenListItem: { f2Token: 'spacingVerticalXXS' }, gapInsideCtrlDefault: { f2Token: 'spacingHorizontalS' }, gapInsideCtrlLgDefault: { f2Token: 'spacingHorizontalSNudge' }, @@ -236,6 +243,10 @@ export const fluentOverrides: FluentOverrides = { textRampItemBodyLineHeight: { f2Token: 'lineHeightBase300' }, textRampLgItemBodyFontSize: { f2Token: 'fontSizeBase400' }, textRampLgItemBodyLineHeight: { f2Token: 'lineHeightBase400' }, + textRampReadingBodyFontSize: { f2Token: 'fontSizeBase300' }, + textRampReadingBodyLineHeight: { f2Token: 'lineHeightBase300' }, + textRampSectionHeaderFontSize: { f2Token: 'fontSizeBase500' }, + textRampSectionHeaderLineHeight: { f2Token: 'lineHeightBase500' }, textRampSmItemBodyFontSize: { f2Token: 'fontSizeBase200' }, textRampSmItemBodyLineHeight: { f2Token: 'lineHeightBase200' }, textStyleDefaultHeaderFontFamily: { f2Token: 'fontFamilyBase' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 1e9bcf78b7925..d759ef663bb17 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1800,6 +1800,7 @@ export { _ctrlAvatarPresenceBadgeStrokeWidthLg, _ctrlAvatarPresenceBadgeStrokeWidthSm, _ctrlButtonGapInsideDefault, + _ctrlDialogGapBetweenContentMedium, _ctrlDividerForegroundSubtle, _ctrlFocusOuterStrokeInteractive, _ctrlInputBackgroundRestDarker, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index c95ff0fb21160..b233ffde6678c 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -89,6 +89,11 @@ export const colorSubtleBackgroundPressed = 'var(--colorSubtleBackgroundPressed) * @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 @@ -139,6 +144,21 @@ export const spacingHorizontalS = 'var(--spacingHorizontalS)'; * @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 @@ -299,11 +319,6 @@ export const spacingHorizontalM = 'var(--spacingHorizontalM)'; * @public */ export const spacingHorizontalL = 'var(--spacingHorizontalL)'; -/** - * 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#colorPaletteRedBackground3 | `colorPaletteRedBackground3`} design token. * @public @@ -344,11 +359,6 @@ export const colorTransparentStrokeInteractive = 'var(--colorTransparentStrokeIn * @public */ export const colorBrandStroke1 = 'var(--colorBrandStroke1)'; -/** - * 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#colorNeutralStroke3 | `colorNeutralStroke3`} design token. * @public @@ -484,11 +494,6 @@ export const borderRadiusLarge = 'var(--borderRadiusLarge)'; * @public */ export const borderRadiusSmall = 'var(--borderRadiusSmall)'; -/** - * 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#colorNeutralForeground4 | `colorNeutralForeground4`} design token. * @public diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 380cb0d8e8993..ea6120980ba94 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -20,6 +20,7 @@ import { paddingCtrlTextTopRaw, cornerCtrlRestRaw, gapInsideCtrlDefaultRaw, + gapBetweenContentMediumRaw, backgroundCtrlNeutralRestRaw, foregroundCtrlNeutralSecondaryRestRaw, backgroundCtrlSubtleHoverRaw, @@ -211,6 +212,13 @@ export const _ctrlAvatarPresenceBadgeStrokeWidthSm = `var(${ctrlAvatarPresenceBa * please use gapInsideCtrlDefault instead. */ export const _ctrlButtonGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingHorizontalSNudge})`; +/** + * 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. diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index 56b015b1ed763..b4c1f293dcce6 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -82,6 +82,8 @@ import { } from '../control/variables'; import { fontFamilyBase, + fontSizeBase500, + lineHeightBase500, fontSizeBase300, lineHeightBase300, fontSizeBase200, @@ -420,12 +422,12 @@ export const textStyleQuoteHeaderWeight = `var(${textStyleQuoteHeaderWeightRaw}, 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}))`; -export const textRampSectionHeaderLineHeight = `var(${textRampSectionHeaderLineHeightRaw}, var(${textGlobalSubtitle1LineHeightRaw}))`; +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}))`; -export const textRampReadingBodyLineHeight = `var(${textRampReadingBodyLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}))`; +export const textRampReadingBodyFontSize = `var(${textRampReadingBodyFontSizeRaw}, var(${textGlobalBody2FontSizeRaw}, ${fontSizeBase300}))`; +export const textRampReadingBodyLineHeight = `var(${textRampReadingBodyLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}, ${lineHeightBase300}))`; export const textRampItemHeaderFontSize = `var(${textRampItemHeaderFontSizeRaw}, var(${textGlobalBody2FontSizeRaw}))`; export const textRampItemHeaderLineHeight = `var(${textRampItemHeaderLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}))`; export const textRampItemBodyFontSize = `var(${textRampItemBodyFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}, ${fontSizeBase300}))`; From bf273db0666077be97aa648a20c7c3069db8a934 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Thu, 10 Jul 2025 16:54:03 -0400 Subject: [PATCH 35/66] update message bar to use semantic tokens (#34657) Co-authored-by: Mitch-At-Work --- .../etc/semantic-style-hooks-preview.api.md | 16 +++ .../library/package.json | 1 + .../src/component-styles/MessageBar/index.ts | 4 + ...eSemanticMessageBarActionsStyles.styles.ts | 63 ++++++++ .../useSemanticMessageBarBodyStyles.styles.ts | 31 ++++ .../useSemanticMessageBarStyles.styles.ts | 134 ++++++++++++++++++ ...useSemanticMessageBarTitleStyles.styles.ts | 36 +++++ .../component-styles/semanticStyleHooks.ts | 11 ++ .../library/src/index.ts | 6 + .../etc/semantic-tokens.api.md | 54 +++++-- .../semantic-tokens/src/control/tokens.ts | 36 +++-- .../src/fluentLegacyVariants.ts | 34 ++++- .../semantic-tokens/src/fluentOverrides.ts | 15 ++ packages/semantic-tokens/src/index.ts | 8 ++ packages/semantic-tokens/src/legacy/tokens.ts | 73 ++++++++-- .../src/legacyVariant/tokens.ts | 68 +++++++++ .../semantic-tokens/src/optional/tokens.ts | 9 +- 17 files changed, 557 insertions(+), 42 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarActionsStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarBodyStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/MessageBar/useSemanticMessageBarTitleStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index fa1214a04dbce..a6cb9ad8c4d78 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -25,6 +25,10 @@ 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 { 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 { ProgressBarState } from '@fluentui/react-progress'; import { RatingDisplayState } from '@fluentui/react-rating'; import { RatingItemState } from '@fluentui/react-rating'; @@ -101,6 +105,18 @@ export const useSemanticListItemStyles: (_state: unknown) => ListItemState; // @public (undocumented) export const useSemanticMenuButtonStyles: (_state: unknown) => MenuButtonState; +// @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; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 2d177d1896082..4237cc1909fc7 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -37,6 +37,7 @@ "@fluentui/react-link": "^9.4.6", "@fluentui/react-list": "^9.1.6", "@fluentui/react-motion": "^9.7.2", + "@fluentui/react-message-bar": "^9.4.7", "@fluentui/react-progress": "^9.2.6", "@fluentui/react-provider": "^9.20.6", "@fluentui/react-rating": "^9.1.6", 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 0000000000000..40a00f62d0144 --- /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 0000000000000..cb81a7ac24df2 --- /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 0000000000000..b267d39344822 --- /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 0000000000000..22f31adce2979 --- /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 0000000000000..97bd2865baa32 --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 12e2bed558d17..a5c03c8997697 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -41,6 +41,12 @@ import { useSemanticDialogSurfaceStyles, useSemanticDialogTitleStyles, } from './Dialog'; +import { + useSemanticMessageBarStyles, + useSemanticMessageBarBodyStyles, + useSemanticMessageBarActionsStyles, + useSemanticMessageBarTitleStyles, +} from './MessageBar'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -94,4 +100,9 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useDialogContentStyles_unstable: useSemanticDialogContentStyles, useDialogSurfaceStyles_unstable: useSemanticDialogSurfaceStyles, useDialogTitleStyles_unstable: useSemanticDialogTitleStyles, + // MessageBar styles + useMessageBarStyles_unstable: useSemanticMessageBarStyles, + useMessageBarBodyStyles_unstable: useSemanticMessageBarBodyStyles, + useMessageBarActionsStyles_unstable: useSemanticMessageBarActionsStyles, + useMessageBarTitleStyles_unstable: useSemanticMessageBarTitleStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index afbff184b30f4..a655f4c25c409 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -39,3 +39,9 @@ export { useSemanticDialogSurfaceStyles, useSemanticDialogTitleStyles, } from './component-styles/Dialog'; +export { + useSemanticMessageBarStyles, + useSemanticMessageBarBodyStyles, + useSemanticMessageBarActionsStyles, + useSemanticMessageBarTitleStyles, +} from './component-styles/MessageBar'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 2b114131848c3..c7491255acbba 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -2233,6 +2233,30 @@ export const ctrlLiteFilterStrokeWidthSelected = "var(--smtc-ctrl-lite-filter-st // @public (undocumented) export const ctrlLiteFilterStrokeWidthSelectedRaw = "--smtc-ctrl-lite-filter-stroke-width-selected"; +// @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)))"; @@ -2972,7 +2996,7 @@ export const foregroundCtrlIconOnNeutralPressed = "var(--smtc-foreground-ctrl-ic 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))"; +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"; @@ -4084,13 +4108,13 @@ export const paddingCardNestedImage = "var(--smtc-padding-card-nested-image, var export const paddingCardNestedImageRaw = "--smtc-padding-card-nested-image"; // @public (undocumented) -export const paddingContentAlignDefault = "var(--smtc-padding-content-align-default)"; +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)"; +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"; @@ -4432,7 +4456,7 @@ export const statusDangerStroke = "var(--smtc-status-danger-stroke, var(--smtc-s export const statusDangerStrokeRaw = "--smtc-status-danger-stroke"; // @public (undocumented) -export const statusDangerTintBackground = "var(--smtc-status-danger-tint-background)"; +export const statusDangerTintBackground = "var(--smtc-status-danger-tint-background, var(--colorStatusDangerBackground1))"; // @public (undocumented) export const statusDangerTintBackgroundRaw = "--smtc-status-danger-tint-background"; @@ -4444,7 +4468,7 @@ export const statusDangerTintForeground = "var(--smtc-status-danger-tint-foregro export const statusDangerTintForegroundRaw = "--smtc-status-danger-tint-foreground"; // @public (undocumented) -export const statusDangerTintStroke = "var(--smtc-status-danger-tint-stroke)"; +export const statusDangerTintStroke = "var(--smtc-status-danger-tint-stroke, var(--colorStatusDangerBorder1))"; // @public (undocumented) export const statusDangerTintStrokeRaw = "--smtc-status-danger-tint-stroke"; @@ -4468,7 +4492,7 @@ export const statusImportantStroke = "var(--smtc-status-important-stroke, var(-- export const statusImportantStrokeRaw = "--smtc-status-important-stroke"; // @public (undocumented) -export const statusImportantTintBackground = "var(--smtc-status-important-tint-background)"; +export const statusImportantTintBackground = "var(--smtc-status-important-tint-background, var(--colorNeutralBackground3))"; // @public (undocumented) export const statusImportantTintBackgroundRaw = "--smtc-status-important-tint-background"; @@ -4516,7 +4540,7 @@ export const statusInformativeTintForeground = "var(--smtc-status-informative-ti export const statusInformativeTintForegroundRaw = "--smtc-status-informative-tint-foreground"; // @public (undocumented) -export const statusInformativeTintStroke = "var(--smtc-status-informative-tint-stroke)"; +export const statusInformativeTintStroke = "var(--smtc-status-informative-tint-stroke, var(--colorNeutralStroke1))"; // @public (undocumented) export const statusInformativeTintStrokeRaw = "--smtc-status-informative-tint-stroke"; @@ -4582,19 +4606,19 @@ export const statusSuccessStroke = "var(--smtc-status-success-stroke, var(--smtc export const statusSuccessStrokeRaw = "--smtc-status-success-stroke"; // @public (undocumented) -export const statusSuccessTintBackground = "var(--smtc-status-success-tint-background)"; +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)"; +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)"; +export const statusSuccessTintStroke = "var(--smtc-status-success-tint-stroke, var(--colorStatusSuccessBorder1))"; // @public (undocumented) export const statusSuccessTintStrokeRaw = "--smtc-status-success-tint-stroke"; @@ -4618,19 +4642,19 @@ export const statusWarningStroke = "var(--smtc-status-warning-stroke, var(--smtc export const statusWarningStrokeRaw = "--smtc-status-warning-stroke"; // @public (undocumented) -export const statusWarningTintBackground = "var(--smtc-status-warning-tint-background)"; +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)"; +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)"; +export const statusWarningTintStroke = "var(--smtc-status-warning-tint-stroke, var(--colorStatusWarningBorder1))"; // @public (undocumented) export const statusWarningTintStrokeRaw = "--smtc-status-warning-tint-stroke"; @@ -5248,13 +5272,13 @@ export const textRampItemBodyLineHeight = "var(--smtc-text-ramp-item-body-line-h 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))"; +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))"; +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"; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index c2538c795cd2f..f8e97df593814 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -23,9 +23,10 @@ import { fontFamilyBase, fontWeightRegular, fontWeightSemibold, + spacingVerticalS, + spacingHorizontalM, spacingHorizontalNone, spacingHorizontalXXL, - spacingHorizontalM, spacingHorizontalS, spacingHorizontalL, spacingHorizontalXS, @@ -53,9 +54,18 @@ import { colorNeutralForeground2, colorNeutralForegroundOnBrand, colorPaletteRedBackground3, + colorStatusDangerBackground1, + colorStatusDangerBorder1, colorPaletteRedForeground3, colorPaletteDarkOrangeBackground3, + colorStatusWarningBackground1, + colorStatusWarningBorder1, + colorStatusWarningForeground3, colorPaletteGreenBackground3, + colorStatusSuccessBackground1, + colorStatusSuccessBorder1, + colorStatusSuccessForeground1, + colorNeutralBackground3, colorTransparentBackground, shadow64, } from '../legacy/tokens'; @@ -298,8 +308,8 @@ 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})`; -export const paddingContentAlignOutdentIconOnSubtle = `var(${paddingContentAlignOutdentIconOnSubtleRaw})`; +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})`; @@ -415,24 +425,24 @@ export const iconThemeCtrlDefaultSelected = `var(${iconThemeCtrlDefaultSelectedR export const statusBrandTintBackground = `var(${statusBrandTintBackgroundRaw})`; export const statusBrandTintStroke = `var(${statusBrandTintStrokeRaw})`; export const statusDangerBackground = `var(${statusDangerBackgroundRaw}, ${colorPaletteRedBackground3})`; -export const statusDangerTintBackground = `var(${statusDangerTintBackgroundRaw})`; -export const statusDangerTintStroke = `var(${statusDangerTintStrokeRaw})`; +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})`; -export const statusWarningTintStroke = `var(${statusWarningTintStrokeRaw})`; -export const statusWarningTintForeground = `var(${statusWarningTintForegroundRaw})`; +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})`; -export const statusSuccessTintStroke = `var(${statusSuccessTintStrokeRaw})`; -export const statusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw})`; +export const statusSuccessTintBackground = `var(${statusSuccessTintBackgroundRaw}, ${colorStatusSuccessBackground1})`; +export const statusSuccessTintStroke = `var(${statusSuccessTintStrokeRaw}, ${colorStatusSuccessBorder1})`; +export const statusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorStatusSuccessForeground1})`; export const statusImportantBackground = `var(${statusImportantBackgroundRaw})`; -export const statusImportantTintBackground = `var(${statusImportantTintBackgroundRaw})`; +export const statusImportantTintBackground = `var(${statusImportantTintBackgroundRaw}, ${colorNeutralBackground3})`; export const statusImportantTintStroke = `var(${statusImportantTintStrokeRaw})`; export const statusImportantTintForeground = `var(${statusImportantTintForegroundRaw})`; export const statusInformativeBackground = `var(${statusInformativeBackgroundRaw})`; export const statusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw})`; -export const statusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw})`; +export const statusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw}, ${colorNeutralStroke1})`; export const statusInformativeTintBackground = `var(${statusInformativeTintBackgroundRaw})`; export const statusAwayForeground = `var(${statusAwayForegroundRaw})`; export const statusOofForeground = `var(${statusOofForegroundRaw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 4b113547e41c8..45bdc57b3cb6f 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -87,7 +87,7 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { }, _ctrlDialogGapBetweenContentMedium: { originalToken: 'gapBetweenContentMedium', - rawValue: '8px', // should be 24px + rawValue: '8px', }, _ctrlDividerForegroundSubtle: { f2Token: 'colorNeutralForeground3', @@ -137,6 +137,38 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorStrokeFocus2', originalToken: 'strokeWidthCtrlOutlineRest', }, + _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', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index c92758bf72162..4e346ced5ced9 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -116,6 +116,7 @@ export const fluentOverrides: FluentOverrides = { foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' }, foregroundContentNeutralSecondary: { f2Token: 'colorNeutralForeground2' }, foregroundCtrlIconOnNeutralDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + foregroundCtrlIconOnNeutralRest: { f2Token: 'colorNeutralForeground3' }, foregroundCtrlIconOnSubtleDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, foregroundCtrlIconOnSubtleHover: { f2Token: 'colorNeutralForeground2BrandHover' }, foregroundCtrlIconOnSubtlePressed: { f2Token: 'colorNeutralForeground2BrandPressed' }, @@ -157,6 +158,8 @@ export const fluentOverrides: FluentOverrides = { 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 nullColor: { f2Token: 'colorTransparentBackground' }, + paddingContentAlignDefault: { f2Token: 'spacingVerticalS' }, + paddingContentAlignOutdentIconOnSubtle: { f2Token: 'spacingHorizontalM' }, paddingContentLarge: { f2Token: 'spacingHorizontalXXL' }, paddingContentNone: { f2Token: 'spacingHorizontalNone' }, paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' }, @@ -180,9 +183,19 @@ export const fluentOverrides: FluentOverrides = { sizeCtrlSmDefault: { rawValue: '32px' }, sizeCtrlSmIcon: { rawValue: '20px' }, statusDangerBackground: { f2Token: 'colorPaletteRedBackground3' }, + statusDangerTintBackground: { f2Token: 'colorStatusDangerBackground1' }, statusDangerTintForeground: { f2Token: 'colorPaletteRedForeground3' }, + statusDangerTintStroke: { f2Token: 'colorStatusDangerBorder1' }, + statusImportantTintBackground: { f2Token: 'colorNeutralBackground3' }, + statusInformativeTintStroke: { f2Token: 'colorNeutralStroke1' }, statusSuccessBackground: { f2Token: 'colorPaletteGreenBackground3' }, + statusSuccessTintBackground: { f2Token: 'colorStatusSuccessBackground1' }, + statusSuccessTintForeground: { f2Token: 'colorStatusSuccessForeground1' }, + statusSuccessTintStroke: { f2Token: 'colorStatusSuccessBorder1' }, statusWarningBackground: { f2Token: 'colorPaletteDarkOrangeBackground3' }, + statusWarningTintBackground: { f2Token: 'colorStatusWarningBackground1' }, + statusWarningTintForeground: { f2Token: 'colorStatusWarningForeground3' }, + statusWarningTintStroke: { f2Token: 'colorStatusWarningBorder1' }, strokeCtrlDividerOnBrand: { f2Token: 'colorNeutralStrokeOnBrand' }, strokeCtrlDividerOnOutline: { f2Token: 'colorNeutralStroke1' }, strokeCtrlDividerOnSubtle: { rawValue: 'transparent' }, @@ -241,6 +254,8 @@ export const fluentOverrides: FluentOverrides = { textGlobalTitle2LineHeight: { f2Token: 'lineHeightHero800' }, textRampItemBodyFontSize: { f2Token: 'fontSizeBase300' }, textRampItemBodyLineHeight: { f2Token: 'lineHeightBase300' }, + textRampItemHeaderFontSize: { f2Token: 'fontSizeBase300' }, + textRampItemHeaderLineHeight: { f2Token: 'lineHeightBase400' }, textRampLgItemBodyFontSize: { f2Token: 'fontSizeBase400' }, textRampLgItemBodyLineHeight: { f2Token: 'lineHeightBase400' }, textRampReadingBodyFontSize: { f2Token: 'fontSizeBase300' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index d759ef663bb17..261f8de5bae04 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1813,6 +1813,14 @@ export { _ctrlListForegroundColorPressed, _ctrlListForegroundColorRest, _ctrlListItemStroke, + _ctrlMessageBarActionsMultilinePaddingRight, + _ctrlMessageBarErrorIconColor, + _ctrlMessageBarGapBetweenCtrl, + _ctrlMessageBarPaddingContentAlignDefault, + _ctrlMessageBarPaddingVertical, + _ctrlMessageBarReflowSpacerMarginBottom, + _ctrlMessageBarSpacingTop, + _ctrlMessageBarTitleLineHeight, _ctrlPersonaTreeIconOnSubtlePressed, _ctrlSpinnerBackgroundEmpty, _ctrlSpinnerBackgroundFilled, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index b233ffde6678c..4aaf8970b59e4 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -305,15 +305,15 @@ export const spacingHorizontalSNudge = 'var(--spacingHorizontalSNudge)'; */ export const spacingHorizontalXS = 'var(--spacingHorizontalXS)'; /** - * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalNone | `spacingHorizontalNone`} design token. + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalM | `spacingHorizontalM`} design token. * @public */ -export const spacingHorizontalNone = 'var(--spacingHorizontalNone)'; +export const spacingHorizontalM = 'var(--spacingHorizontalM)'; /** - * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalM | `spacingHorizontalM`} design token. + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalNone | `spacingHorizontalNone`} design token. * @public */ -export const spacingHorizontalM = 'var(--spacingHorizontalM)'; +export const spacingHorizontalNone = 'var(--spacingHorizontalNone)'; /** * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalL | `spacingHorizontalL`} design token. * @public @@ -324,21 +324,66 @@ export const spacingHorizontalL = 'var(--spacingHorizontalL)'; * @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#colorPaletteGreenBackground3 | `colorPaletteGreenBackground3`} design token. * @public */ export const colorPaletteGreenBackground3 = 'var(--colorPaletteGreenBackground3)'; +/** + * 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#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 @@ -364,11 +409,6 @@ export const colorBrandStroke1 = 'var(--colorBrandStroke1)'; * @public */ export const colorNeutralStroke3 = 'var(--colorNeutralStroke3)'; -/** - * 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#fontWeightSemibold | `fontWeightSemibold`} design token. * @public @@ -499,6 +539,21 @@ export const borderRadiusSmall = 'var(--borderRadiusSmall)'; * @public */ export const colorNeutralForeground4 = 'var(--colorNeutralForeground4)'; +/** + * 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#colorNeutralForeground3Pressed | `colorNeutralForeground3Pressed`} design token. * @public diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index ea6120980ba94..185c8ea407769 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -25,6 +25,11 @@ import { foregroundCtrlNeutralSecondaryRestRaw, backgroundCtrlSubtleHoverRaw, backgroundCtrlSubtlePressedRaw, + paddingContentAlignDefaultRaw, + statusDangerTintForegroundRaw, + gapBetweenCtrlDefaultRaw, + paddingContentAlignOutdentIconOnSubtleRaw, + textGlobalBody2LineHeightRaw, textGlobalBody3FontSizeRaw, textGlobalBody3LineHeightRaw, textStyleDefaultRegularWeightRaw, @@ -49,6 +54,12 @@ import { colorNeutralBackground3, colorNeutralBackground1, colorNeutralForeground4, + spacingVerticalM, + colorStatusDangerForeground1, + spacingHorizontalM, + spacingVerticalS, + spacingVerticalMNudge, + lineHeightBase300, colorNeutralForeground3Pressed, colorBrandStroke2Contrast, colorBrandStroke1, @@ -80,6 +91,7 @@ import { foregroundCtrlNeutralPrimaryPressedRaw, foregroundCtrlOnSubtleRestRaw, strokeWidthCtrlOutlineRestRaw, + textRampItemHeaderLineHeightRaw, textRampItemBodyFontSizeRaw, textRampItemBodyLineHeightRaw, strokeCtrlOnActiveBrandHoverRaw, @@ -303,6 +315,62 @@ export const _ctrlListForegroundColorRest = `var(${foregroundCtrlOnSubtleRestRaw * please use strokeWidthCtrlOutlineRest instead. */ export const _ctrlListItemStroke = `var(${strokeWidthCtrlOutlineRestRaw}, var(${strokeWidthDefaultRaw}, ${colorStrokeFocus2}))`; +/** + * 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. diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index b4c1f293dcce6..8b51e75f8820f 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -86,10 +86,10 @@ import { lineHeightBase500, fontSizeBase300, lineHeightBase300, + lineHeightBase400, fontSizeBase200, lineHeightBase200, fontSizeBase400, - lineHeightBase400, fontWeightSemibold, spacingVerticalXXS, strokeWidthThin, @@ -117,6 +117,7 @@ import { colorNeutralForeground1Pressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, + colorNeutralForeground3, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForegroundInverted, @@ -428,8 +429,8 @@ export const textRampSubsectionHeaderFontSize = `var(${textRampSubsectionHeaderF 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}))`; -export const textRampItemHeaderLineHeight = `var(${textRampItemHeaderLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}))`; +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}))`; @@ -559,7 +560,7 @@ export const foregroundCtrlNeutralPrimaryHover = `var(${foregroundCtrlNeutralPri 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}))`; +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}))`; From bb6682d1f4283bcd4bc0001a584b8dc581f97e48 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Thu, 10 Jul 2025 20:22:55 -0400 Subject: [PATCH 36/66] update tabs to use semantic tokens (#34782) Co-authored-by: Mitch-At-Work --- ...-65ced89f-3e02-4450-aa4a-729e5381851d.json | 7 - .../react-tabs/library/etc/react-tabs.api.md | 5 + .../etc/semantic-style-hooks-preview.api.md | 17 + .../library/package.json | 1 + .../src/component-styles/Tabs/index.ts | 7 + .../Tabs/useSemanticTabListStyles.styles.ts | 56 ++ .../Tabs/useSemanticTabsStyles.styles.ts | 812 ++++++++++++++++++ .../component-styles/semanticStyleHooks.ts | 5 + .../library/src/index.ts | 8 + .../etc/semantic-tokens.api.md | 58 +- .../src/components/list/tokens.ts | 4 +- .../semantic-tokens/src/control/tokens.ts | 2 +- .../src/fluentLegacyVariants.ts | 64 ++ .../semantic-tokens/src/fluentOverrides.ts | 5 + packages/semantic-tokens/src/index.ts | 16 + packages/semantic-tokens/src/legacy/tokens.ts | 42 +- .../src/legacyVariant/tokens.ts | 135 ++- .../semantic-tokens/src/optional/tokens.ts | 9 +- 18 files changed, 1226 insertions(+), 27 deletions(-) delete mode 100644 change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tabs/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tabs/useSemanticTabListStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tabs/useSemanticTabsStyles.styles.ts diff --git a/change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json b/change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json deleted file mode 100644 index 308dda6b633b4..0000000000000 --- a/change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: Export tabReservedSpaceClassNames and useTabAnimatedIndicatorStyles_unstable for style overrides", - "packageName": "@fluentui/react-tabs", - "email": "mifraser@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/packages/react-components/react-tabs/library/etc/react-tabs.api.md b/packages/react-components/react-tabs/library/etc/react-tabs.api.md index ecf9daa0f9c1f..f828b1a7fadc8 100644 --- a/packages/react-components/react-tabs/library/etc/react-tabs.api.md +++ b/packages/react-components/react-tabs/library/etc/react-tabs.api.md @@ -24,6 +24,11 @@ export const renderTab_unstable: (state: TabState) => JSX.Element; // @public export const renderTabList_unstable: (state: TabListState, contextValues: TabListContextValues) => JSX.Element; +// @public (undocumented) +export const reservedSpaceClassNames: { + content: string; +}; + // @public (undocumented) export type SelectTabData = { value: TabValue; diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index a6cb9ad8c4d78..d5d0d570a606c 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -35,6 +35,8 @@ import { RatingItemState } from '@fluentui/react-rating'; import { SpinnerState } from '@fluentui/react-spinner'; import { SplitButtonState } from '@fluentui/react-button'; import { SwitchState } from '@fluentui/react-switch'; +import { TabListState } from '@fluentui/react-tabs'; +import { TabState } from '@fluentui/react-tabs'; import { TextareaState } from '@fluentui/react-textarea'; import { TextState } from '@fluentui/react-text'; import { ToggleButtonState } from '@fluentui/react-button'; @@ -138,6 +140,21 @@ 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 useSemanticTabListStyles: (_state: unknown) => TabListState; + +// @public +export const useSemanticTabStyles: (_state: unknown) => TabState; + // @public export const useSemanticTextareaStyles: (_state: unknown) => TextareaState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 4237cc1909fc7..ae799afdcafd8 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -45,6 +45,7 @@ "@fluentui/react-spinner": "^9.5.11", "@fluentui/react-switch": "^9.2.6", "@fluentui/react-tabster": "^9.24.6", + "@fluentui/react-tabs": "^9.7.6", "@fluentui/react-text": "^9.4.36", "@fluentui/react-textarea": "^9.4.6", "@fluentui/react-theme": "^9.1.24", 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 0000000000000..38bf3de7a5068 --- /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 0000000000000..e803ed2b521c5 --- /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 0000000000000..15aa349143618 --- /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 { + reservedSpaceClassNames, + 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, + reservedSpaceClassNames.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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index a5c03c8997697..14ccce4b728b9 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -47,6 +47,8 @@ import { useSemanticMessageBarActionsStyles, useSemanticMessageBarTitleStyles, } from './MessageBar'; +import { useSemanticTabStyles } from './Tabs/useSemanticTabsStyles.styles'; +import { useSemanticTabListStyles } from './Tabs/index'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -105,4 +107,7 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useMessageBarBodyStyles_unstable: useSemanticMessageBarBodyStyles, useMessageBarActionsStyles_unstable: useSemanticMessageBarActionsStyles, useMessageBarTitleStyles_unstable: useSemanticMessageBarTitleStyles, + // Tabs styles + useTabStyles_unstable: useSemanticTabStyles, + useTabListStyles_unstable: useSemanticTabListStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index a655f4c25c409..8c87f4c511ff0 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -45,3 +45,11 @@ export { 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'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index c7491255acbba..619942e4b12e4 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -2144,7 +2144,7 @@ export const ctrlListPillStretchPaddingHint = "var(--smtc-ctrl-list-pill-stretch export const ctrlListPillStretchPaddingHintRaw = "--smtc-ctrl-list-pill-stretch-padding-hint"; // @public (undocumented) -export const ctrlListPillWidth = "var(--smtc-ctrl-list-pill-width)"; +export const ctrlListPillWidth = "var(--smtc-ctrl-list-pill-width, var(--strokeWidthThicker))"; // @public (undocumented) export const ctrlListPillWidthRaw = "--smtc-ctrl-list-pill-width"; @@ -2851,6 +2851,48 @@ export const _ctrlSwitchStrokeOnActiveBrandHover = "var(--smtc-stroke-ctrl-on-ac // @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 (undocumented) export const ctrlTooltipBackground = "var(--smtc-ctrl-tooltip-background)"; @@ -2930,19 +2972,19 @@ export const foregroundCtrlActiveBrandDisabled = "var(--smtc-foreground-ctrl-act 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))"; +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))"; +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))"; +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"; @@ -4083,6 +4125,12 @@ export const materialMicaThinSolid = "var(--smtc-material-mica-thin-solid, var(- // @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))"; @@ -5122,7 +5170,7 @@ export const textCtrlWeightDefault = "var(--smtc-text-ctrl-weight-default, var(- export const textCtrlWeightDefaultRaw = "--smtc-text-ctrl-weight-default"; // @public (undocumented) -export const textCtrlWeightSelected = "var(--smtc-text-ctrl-weight-selected)"; +export const textCtrlWeightSelected = "var(--smtc-text-ctrl-weight-selected, var(--fontWeightSemibold))"; // @public (undocumented) export const textCtrlWeightSelectedRaw = "--smtc-text-ctrl-weight-selected"; diff --git a/packages/semantic-tokens/src/components/list/tokens.ts b/packages/semantic-tokens/src/components/list/tokens.ts index cf3713534d3ff..36cada0c95b6e 100644 --- a/packages/semantic-tokens/src/components/list/tokens.ts +++ b/packages/semantic-tokens/src/components/list/tokens.ts @@ -13,7 +13,7 @@ import { cornerCtrlLgRestRaw, paddingCtrlLgHorizontalDefaultRaw, } from '../../control/variables'; -import { borderRadiusMedium, spacingHorizontalXXL } from '../../legacy/tokens'; +import { strokeWidthThicker, borderRadiusMedium, spacingHorizontalXXL } from '../../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, backgroundCtrlSubtleDisabledRaw, @@ -75,7 +75,7 @@ import { ctrlListShadowSelectedRaw, } from './variables'; -export const ctrlListPillWidth = `var(${ctrlListPillWidthRaw})`; +export const ctrlListPillWidth = `var(${ctrlListPillWidthRaw}, ${strokeWidthThicker})`; export const ctrlListPillFullWidth = `var(${ctrlListPillFullWidthRaw})`; export const ctrlListPillStretchPaddingDefault = `var(${ctrlListPillStretchPaddingDefaultRaw})`; export const ctrlListPillStretchPaddingHint = `var(${ctrlListPillStretchPaddingHintRaw})`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index f8e97df593814..5c7dc4aefdb2d 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -303,7 +303,7 @@ export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightR export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw}, 44px)`; export const sizeCtrlIcon = `var(${sizeCtrlIconRaw}, 20px)`; export const sizeCtrlIconSecondary = `var(${sizeCtrlIconSecondaryRaw})`; -export const textCtrlWeightSelected = `var(${textCtrlWeightSelectedRaw})`; +export const textCtrlWeightSelected = `var(${textCtrlWeightSelectedRaw}, ${fontWeightSemibold})`; export const sizeCtrlSmDefault = `var(${sizeCtrlSmDefaultRaw}, 32px)`; export const sizeCtrlSmIcon = `var(${sizeCtrlSmIconRaw}, 20px)`; export const sizeCtrlLgDefault = `var(${sizeCtrlLgDefaultRaw}, 44px)`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 45bdc57b3cb6f..4ff88de470fcd 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -217,6 +217,62 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { 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', + }, _ctrlTreeGapInsideDefault: { f2Token: 'spacingVerticalXXS', originalToken: 'gapInsideCtrlDefault', @@ -257,4 +313,12 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { 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 index 4e346ced5ced9..9ea9c7c673a9c 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -102,6 +102,7 @@ export const fluentOverrides: FluentOverrides = { ctrlLinkForegroundNeutralRest: { f2Token: 'colorNeutralForeground2' }, ctrlListCornerRest: { f2Token: 'borderRadiusMedium' }, ctrlListIndentLevel1: { f2Token: 'spacingHorizontalXXL' }, + ctrlListPillWidth: { f2Token: 'strokeWidthThicker' }, ctrlProgressBackgroundEmpty: { f2Token: 'colorNeutralBackground6' }, ctrlProgressBackgroundFilled: { f2Token: 'colorCompoundBrandBackground' }, ctrlProgressCorner: { f2Token: 'borderRadiusMedium' }, @@ -115,6 +116,9 @@ export const fluentOverrides: FluentOverrides = { 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' }, @@ -232,6 +236,7 @@ export const fluentOverrides: FluentOverrides = { strokeWidthDefault: { f2Token: 'strokeWidthThin' }, strokeWidthDividerDefault: { f2Token: 'strokeWidthThin' }, textCtrlButtonWeightDefault: { f2Token: 'fontWeightSemibold' }, + textCtrlWeightSelected: { f2Token: 'fontWeightSemibold' }, textGlobalBody1FontSize: { f2Token: 'fontSizeBase500' }, textGlobalBody1LineHeight: { f2Token: 'lineHeightBase500' }, textGlobalBody2FontSize: { f2Token: 'fontSizeBase400' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 261f8de5bae04..06030e8525b93 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1833,6 +1833,20 @@ export { _ctrlSwitchPaddingTextTop, _ctrlSwitchStrokeOnActiveBrandHover, _ctrlSwitchStrokeOnActiveBrandRest, + _ctrlTabBackgroundActiveBrandDisabled, + _ctrlTabForegroundActiveBrandHover, + _ctrlTabForegroundActiveBrandPressed, + _ctrlTabForegroundActiveBrandRest, + _ctrlTabForegroundOnSubtleHover, + _ctrlTabForegroundOnSubtlePressed, + _ctrlTabForegroundOnTransparentHover, + _ctrlTabForegroundOnTransparentPressed, + _ctrlTabGapInsideDefault, + _ctrlTabPaddingHorizontalDefault, + _ctrlTabPaddingTextSide, + _ctrlTabSizeDefault, + _ctrlTabSmGapInsideDefault, + _ctrlTabSmPaddingHorizontalDefault, _ctrlTreeGapInsideDefault, _ctrlTreeIconOnSubtle, _ctrlTreeIconOnSubtleHover, @@ -1843,5 +1857,7 @@ export { _ctrlTreePaddingTextLeft, _ctrlTreePaddingTextRight, _ctrlTreePaddingTextTop, + _nullBackgroundColorHover, + _nullBackgroundColorPressed, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 4aaf8970b59e4..6f71c9ebec6ad 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -235,20 +235,35 @@ export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)'; */ export const spacingHorizontalXXL = 'var(--spacingHorizontalXXL)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1`} design token. + * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThicker | `strokeWidthThicker`} design token. * @public */ -export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)'; +export const strokeWidthThicker = 'var(--strokeWidthThicker)'; /** - * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThicker | `strokeWidthThicker`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1`} design token. * @public */ -export const strokeWidthThicker = 'var(--strokeWidthThicker)'; +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 @@ -570,12 +585,27 @@ export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)'; */ export const spacingVerticalXS = 'var(--spacingVerticalXS)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Hover | `colorNeutralForeground3Hover`} design token. + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalMNudge | `spacingHorizontalMNudge`} design token. * @public */ -export const colorNeutralForeground3Hover = 'var(--colorNeutralForeground3Hover)'; +export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)'; /** * 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#colorNeutralForeground3Hover | `colorNeutralForeground3Hover`} design token. + * @public + */ +export const colorNeutralForeground3Hover = 'var(--colorNeutralForeground3Hover)'; +/** + * 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)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 185c8ea407769..7f028a765948d 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -33,8 +33,13 @@ import { textGlobalBody3FontSizeRaw, textGlobalBody3LineHeightRaw, textStyleDefaultRegularWeightRaw, - paddingCtrlTextSideRaw, + backgroundCtrlBrandDisabledRaw, + foregroundCtrlBrandHoverRaw, + foregroundCtrlBrandPressedRaw, + foregroundCtrlBrandRestRaw, paddingCtrlHorizontalDefaultRaw, + paddingCtrlTextSideRaw, + sizeCtrlDefaultRaw, } from '../control/variables'; import { colorTransparentBackground, @@ -68,11 +73,17 @@ import { fontWeightSemibold, spacingVerticalXS, colorTransparentStroke, - spacingVerticalXXS, - colorNeutralForeground3Hover, + colorNeutralForegroundDisabled, + colorNeutralForeground1Hover, + colorNeutralForeground1Pressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, + spacingHorizontalMNudge, spacingHorizontalXXS, + spacingVerticalXXS, + colorNeutralForeground3Hover, + colorTransparentBackgroundHover, + colorTransparentBackgroundPressed, } from '../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, @@ -96,6 +107,12 @@ import { textRampItemBodyLineHeightRaw, strokeCtrlOnActiveBrandHoverRaw, strokeCtrlOnActiveBrandRestRaw, + backgroundCtrlActiveBrandDisabledRaw, + foregroundCtrlActiveBrandHoverRaw, + foregroundCtrlActiveBrandPressedRaw, + foregroundCtrlActiveBrandRestRaw, + foregroundCtrlIconOnSubtleHoverRaw, + foregroundCtrlIconOnSubtlePressedRaw, } from '../optional/variables'; /** @@ -455,6 +472,104 @@ export const _ctrlSwitchStrokeOnActiveBrandHover = `var(${strokeCtrlOnActiveBran * 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 gapInsideCtrlDefault to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -525,3 +640,17 @@ export const _ctrlTreePaddingTextRight = `var(${paddingCtrlHorizontalDefaultRaw} * 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/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index 8b51e75f8820f..7f7af5e744cec 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -120,6 +120,9 @@ import { colorNeutralForeground3, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, + colorCompoundBrandForeground1, + colorCompoundBrandForeground1Hover, + colorCompoundBrandForeground1Pressed, colorNeutralForegroundInverted, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedPressed, @@ -574,9 +577,9 @@ export const foregroundCtrlIconOnSubtlePressed = `var(${foregroundCtrlIconOnSubt 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}))`; -export const foregroundCtrlActiveBrandHover = `var(${foregroundCtrlActiveBrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw}))`; -export const foregroundCtrlActiveBrandPressed = `var(${foregroundCtrlActiveBrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw}))`; +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}))`; From 6576715af1691c227b8e806f6488c466f8aff8f9 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Fri, 11 Jul 2025 14:10:48 -0400 Subject: [PATCH 37/66] update slider to use semantic tokens (#34758) Co-authored-by: Mitch-At-Work --- .../etc/semantic-style-hooks-preview.api.md | 4 + .../library/package.json | 1 + .../src/component-styles/Slider/index.ts | 1 + .../Slider/useSemanticSliderStyles.styles.ts | 388 ++++++++++++++++++ .../component-styles/semanticStyleHooks.ts | 5 +- .../library/src/index.ts | 1 + .../etc/semantic-tokens.api.md | 72 ++-- .../src/components/slider/tokens.ts | 72 ++-- .../src/fluentLegacyVariants.ts | 16 + .../semantic-tokens/src/fluentOverrides.ts | 30 ++ packages/semantic-tokens/src/index.ts | 4 + .../src/legacyVariant/tokens.ts | 32 +- 12 files changed, 563 insertions(+), 63 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Slider/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Slider/useSemanticSliderStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index d5d0d570a606c..f58c00afb4ed9 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -32,6 +32,7 @@ import { MessageBarTitleState } from '@fluentui/react-message-bar'; import { ProgressBarState } from '@fluentui/react-progress'; import { RatingDisplayState } from '@fluentui/react-rating'; import { RatingItemState } from '@fluentui/react-rating'; +import { SliderState } from '@fluentui/react-slider'; import { SpinnerState } from '@fluentui/react-spinner'; import { SplitButtonState } from '@fluentui/react-button'; import { SwitchState } from '@fluentui/react-switch'; @@ -131,6 +132,9 @@ export const useSemanticRatingDisplayStyles: (_state: unknown) => RatingDisplayS // @public export const useSemanticRatingItemStyles: (_state: unknown) => RatingItemState; +// @public +export const useSemanticSliderStyles: (_state: unknown) => SliderState; + // @public export const useSemanticSpinnerStyles: (_state: unknown) => SpinnerState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index ae799afdcafd8..81733081b0703 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -42,6 +42,7 @@ "@fluentui/react-provider": "^9.20.6", "@fluentui/react-rating": "^9.1.6", "@fluentui/react-shared-contexts": "^9.23.1", + "@fluentui/react-slider": "^9.3.7", "@fluentui/react-spinner": "^9.5.11", "@fluentui/react-switch": "^9.2.6", "@fluentui/react-tabster": "^9.24.6", 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 0000000000000..433e7d1e5f0cc --- /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 0000000000000..318476d9787e2 --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 14ccce4b728b9..c33775554df9c 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -48,7 +48,8 @@ import { useSemanticMessageBarTitleStyles, } from './MessageBar'; import { useSemanticTabStyles } from './Tabs/useSemanticTabsStyles.styles'; -import { useSemanticTabListStyles } from './Tabs/index'; +import { useSemanticTabListStyles } from './Tabs'; +import { useSemanticSliderStyles } from './Slider'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -110,4 +111,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Tabs styles useTabStyles_unstable: useSemanticTabStyles, useTabListStyles_unstable: useSemanticTabListStyles, + // Slider styles + useSliderStyles_unstable: useSemanticSliderStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index 8c87f4c511ff0..1dec82103d0c4 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -53,3 +53,4 @@ export { useSemanticTabContentStyles_unstable, useSemanticTabIndicatorStyles_unstable, } from './component-styles/Tabs'; +export { useSemanticSliderStyles } from './component-styles/Slider'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 619942e4b12e4..59e42548130de 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -2561,65 +2561,68 @@ export const ctrlSegmentedStrokeRest = "var(--smtc-ctrl-segmented-stroke-rest, v export const ctrlSegmentedStrokeRestRaw = "--smtc-ctrl-segmented-stroke-rest"; // @public (undocumented) -export const ctrlSliderBarCorner = "var(--smtc-ctrl-slider-bar-corner, var(--smtc-corner-circular))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; @@ -2644,80 +2647,89 @@ export const ctrlSliderLgThumbSizeRest = "var(--smtc-ctrl-slider-lg-thumb-size-r // @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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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))"; +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"; @@ -2741,25 +2753,25 @@ export const ctrlSliderThumbInnerStrokeWidthRest = "var(--smtc-ctrl-slider-thumb 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))"; +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))"; +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))"; +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))"; +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"; @@ -2771,19 +2783,19 @@ export const ctrlSliderThumbOuterStrokeWidth = "var(--smtc-ctrl-slider-thumb-out 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))"; +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))"; +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))"; +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"; diff --git a/packages/semantic-tokens/src/components/slider/tokens.ts b/packages/semantic-tokens/src/components/slider/tokens.ts index f33e9b78e0e3f..5541c72fc63bd 100644 --- a/packages/semantic-tokens/src/components/slider/tokens.ts +++ b/packages/semantic-tokens/src/components/slider/tokens.ts @@ -12,6 +12,18 @@ import { sizeCtrlSmIconRaw, sizeCtrlLgIconRaw, } from '../../control/variables'; +import { + borderRadiusXLarge, + colorCompoundBrandBackground, + colorNeutralStrokeAccessible, + colorNeutralBackgroundDisabled, + colorCompoundBrandBackgroundHover, + colorCompoundBrandBackgroundPressed, + colorNeutralForegroundDisabled, + borderRadiusCircular, + colorNeutralBackground1, + colorNeutralStroke1, +} from '../../legacy/tokens'; import { ctrlProgressHeightFilledRaw, ctrlProgressBackgroundEmptyRaw, @@ -59,40 +71,40 @@ import { ctrlSliderLgThumbSizePressedRaw, } from './variables'; -export const ctrlSliderBarHeight = `var(${ctrlSliderBarHeightRaw}, var(${ctrlProgressHeightFilledRaw}))`; -export const ctrlSliderBarCorner = `var(${ctrlSliderBarCornerRaw}, var(${cornerCircularRaw}))`; -export const ctrlSliderBarForegroundFilledRest = `var(${ctrlSliderBarForegroundFilledRestRaw}, var(${backgroundCtrlBrandRestRaw}))`; -export const ctrlSliderBarForegroundEmptyRest = `var(${ctrlSliderBarForegroundEmptyRestRaw}, var(${ctrlProgressBackgroundEmptyRaw}))`; -export const ctrlSliderBarForegroundEmptyHover = `var(${ctrlSliderBarForegroundEmptyHoverRaw}, var(${ctrlProgressBackgroundEmptyRaw}))`; -export const ctrlSliderBarForegroundEmptyPressed = `var(${ctrlSliderBarForegroundEmptyPressedRaw}, var(${ctrlProgressBackgroundEmptyRaw}))`; -export const ctrlSliderBarForegroundEmptyDisabled = `var(${ctrlSliderBarForegroundEmptyDisabledRaw}, var(${ctrlProgressBackgroundEmptyRaw}))`; -export const ctrlSliderBarForegroundFilledHover = `var(${ctrlSliderBarForegroundFilledHoverRaw}, var(${backgroundCtrlBrandHoverRaw}))`; -export const ctrlSliderBarForegroundFilledPressed = `var(${ctrlSliderBarForegroundFilledPressedRaw}, var(${backgroundCtrlBrandPressedRaw}))`; -export const ctrlSliderBarForegroundFilledDisabled = `var(${ctrlSliderBarForegroundFilledDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; -export const ctrlSliderThumbCorner = `var(${ctrlSliderThumbCornerRaw}, var(${cornerCircularRaw}))`; -export const ctrlSliderThumbSizeRest = `var(${ctrlSliderThumbSizeRestRaw}, var(${sizeCtrlIconRaw}))`; -export const ctrlSliderThumbSizeHover = `var(${ctrlSliderThumbSizeHoverRaw}, var(${sizeCtrlIconRaw}))`; -export const ctrlSliderThumbSizePressed = `var(${ctrlSliderThumbSizePressedRaw}, var(${sizeCtrlIconRaw}))`; -export const ctrlSliderThumbBackgroundRest = `var(${ctrlSliderThumbBackgroundRestRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const ctrlSliderThumbBackgroundHover = `var(${ctrlSliderThumbBackgroundHoverRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const ctrlSliderThumbBackgroundPressed = `var(${ctrlSliderThumbBackgroundPressedRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const ctrlSliderThumbBackgroundDisabled = `var(${ctrlSliderThumbBackgroundDisabledRaw}, var(${foregroundCtrlOnBrandDisabledRaw}))`; +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}))`; -export const ctrlSliderThumbInnerStrokeHover = `var(${ctrlSliderThumbInnerStrokeHoverRaw}, var(${backgroundCtrlBrandHoverRaw}))`; -export const ctrlSliderThumbInnerStrokePressed = `var(${ctrlSliderThumbInnerStrokePressedRaw}, var(${backgroundCtrlBrandPressedRaw}))`; -export const ctrlSliderThumbInnerStrokeDisabled = `var(${ctrlSliderThumbInnerStrokeDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; +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}))`; -export const ctrlSliderThumbOuterStrokeHover = `var(${ctrlSliderThumbOuterStrokeHoverRaw}, var(${backgroundCtrlBrandHoverRaw}))`; -export const ctrlSliderThumbOuterStrokePressed = `var(${ctrlSliderThumbOuterStrokePressedRaw}, var(${backgroundCtrlBrandPressedRaw}))`; -export const ctrlSliderThumbOuterStrokeDisabled = `var(${ctrlSliderThumbOuterStrokeDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}))`; -export const ctrlSliderSmThumbSizeRest = `var(${ctrlSliderSmThumbSizeRestRaw}, var(${sizeCtrlSmIconRaw}))`; -export const ctrlSliderSmThumbSizeHover = `var(${ctrlSliderSmThumbSizeHoverRaw}, var(${sizeCtrlSmIconRaw}))`; -export const ctrlSliderSmThumbSizePressed = `var(${ctrlSliderSmThumbSizePressedRaw}, var(${sizeCtrlSmIconRaw}))`; -export const ctrlSliderSmBarHeight = `var(${ctrlSliderSmBarHeightRaw}, var(${ctrlProgressSmHeightFilledRaw}))`; +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}))`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 4ff88de470fcd..6d672fe281c7b 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -173,6 +173,22 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorNeutralForeground3Pressed', originalToken: 'foregroundCtrlOnSubtlePressed', }, + _ctrlSliderBarSizeDefault: { + originalToken: 'sizeCtrlDefault', + rawValue: '32px', + }, + _ctrlSliderPaddingDefault: { + originalToken: 'paddingCtrlHorizontalDefault', + rawValue: '10px', + }, + _ctrlSliderSmBarSizeDefault: { + originalToken: 'sizeCtrlDefault', + rawValue: '24px', + }, + _ctrlSliderSmPaddingDefault: { + originalToken: 'paddingCtrlHorizontalDefault', + rawValue: '8px', + }, _ctrlSpinnerBackgroundEmpty: { f2Token: 'colorBrandStroke2Contrast', originalToken: 'ctrlProgressBackgroundEmpty', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 9ea9c7c673a9c..5b1ae883fa4d2 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -112,6 +112,36 @@ export const fluentOverrides: FluentOverrides = { 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' }, foregroundContentBrandPrimary: { f2Token: 'colorBrandForeground1' }, foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 06030e8525b93..2a49ebc94dd10 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1822,6 +1822,10 @@ export { _ctrlMessageBarSpacingTop, _ctrlMessageBarTitleLineHeight, _ctrlPersonaTreeIconOnSubtlePressed, + _ctrlSliderBarSizeDefault, + _ctrlSliderPaddingDefault, + _ctrlSliderSmBarSizeDefault, + _ctrlSliderSmPaddingDefault, _ctrlSpinnerBackgroundEmpty, _ctrlSpinnerBackgroundFilled, _ctrlSpinnerItemBodyFontSize, diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 7f028a765948d..bf1a49fe616fb 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -30,6 +30,8 @@ import { gapBetweenCtrlDefaultRaw, paddingContentAlignOutdentIconOnSubtleRaw, textGlobalBody2LineHeightRaw, + sizeCtrlDefaultRaw, + paddingCtrlHorizontalDefaultRaw, textGlobalBody3FontSizeRaw, textGlobalBody3LineHeightRaw, textStyleDefaultRegularWeightRaw, @@ -37,9 +39,7 @@ import { foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, foregroundCtrlBrandRestRaw, - paddingCtrlHorizontalDefaultRaw, paddingCtrlTextSideRaw, - sizeCtrlDefaultRaw, } from '../control/variables'; import { colorTransparentBackground, @@ -395,6 +395,34 @@ export const _ctrlMessageBarTitleLineHeight = `var(${textRampItemHeaderLineHeigh * please use foregroundCtrlOnSubtlePressed instead. */ export const _ctrlPersonaTreeIconOnSubtlePressed = `var(${foregroundCtrlOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw}, ${colorNeutralForeground3Pressed}))`; +/** + * 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 ctrlProgressBackgroundEmpty to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. From 77d35bd3b6967b493a816b48eef1cfc024099640 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Fri, 11 Jul 2025 17:09:30 -0400 Subject: [PATCH 38/66] update menu to use semantic tokens (#34723) Co-authored-by: Mitch-At-Work --- .../etc/semantic-style-hooks-preview.api.md | 24 ++ .../library/package.json | 2 + .../src/component-styles/Menu/index.ts | 6 + .../useSemanticMenuDividerStyles.styles.ts | 27 ++ ...useSemanticMenuGroupHeaderStyles.styles.ts | 32 ++ .../Menu/useSemanticMenuItemStyles.styles.ts | 319 ++++++++++++++++++ .../useSemanticMenuItemSwitchStyles.styles.ts | 170 ++++++++++ .../useSemanticMenuPopoverStyles.styles.ts | 43 +++ .../useSemanticMenuSplitGroupStyles.styles.ts | 52 +++ .../component-styles/semanticStyleHooks.ts | 15 + .../library/src/index.ts | 8 + .../etc/semantic-tokens.api.md | 64 +++- .../src/components/list/tokens.ts | 2 +- .../semantic-tokens/src/control/tokens.ts | 2 +- .../src/fluentLegacyVariants.ts | 72 ++++ .../semantic-tokens/src/fluentOverrides.ts | 5 + packages/semantic-tokens/src/index.ts | 18 + packages/semantic-tokens/src/legacy/tokens.ts | 20 +- .../src/legacyVariant/tokens.ts | 145 +++++++- .../semantic-tokens/src/optional/tokens.ts | 7 +- 20 files changed, 1013 insertions(+), 20 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuDividerStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuGroupHeaderStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemSwitchStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuPopoverStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuSplitGroupStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index f58c00afb4ed9..ef781e92873cc 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -25,6 +25,12 @@ 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'; @@ -108,6 +114,24 @@ 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; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 81733081b0703..f943603ac28be 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -37,7 +37,9 @@ "@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-progress": "^9.2.6", "@fluentui/react-provider": "^9.20.6", "@fluentui/react-rating": "^9.1.6", 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 0000000000000..b78aa2b73d5a6 --- /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 0000000000000..9fe2f5a3f3fbe --- /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 0000000000000..e44cf37ec8f48 --- /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 0000000000000..cefbc32ae082c --- /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 0000000000000..c7fe9dd9b61e7 --- /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 0000000000000..344e50184a3ca --- /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 0000000000000..ee93e9f2dc203 --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index c33775554df9c..8ebbe28bbf448 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -50,6 +50,14 @@ import { 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'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -113,4 +121,11 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useTabListStyles_unstable: useSemanticTabListStyles, // 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, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index 1dec82103d0c4..ea51f5cbdc9c6 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -54,3 +54,11 @@ export { useSemanticTabIndicatorStyles_unstable, } from './component-styles/Tabs'; export { useSemanticSliderStyles } from './component-styles/Slider'; +export { + useSemanticMenuDividerStyles, + useSemanticMenuGroupHeaderStyles, + useSemanticMenuItemStyles, + useSemanticMenuItemSwitchStyles, + useSemanticMenuPopoverStyles, + useSemanticMenuSplitGroupStyles, +} from './component-styles/Menu'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 59e42548130de..da62d933dc1d5 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -1994,7 +1994,7 @@ export const ctrlListChoiceStrokeSelectedRest = "var(--smtc-ctrl-list-choice-str 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))"; +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"; @@ -2233,6 +2233,60 @@ export const ctrlLiteFilterStrokeWidthSelected = "var(--smtc-ctrl-lite-filter-st // @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))"; @@ -4054,7 +4108,7 @@ export const materialAcrylicDefaultLumBlend = "var(--smtc-material-acrylic-defau 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))"; +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"; @@ -4336,7 +4390,7 @@ export const paddingCtrlToNestedControl = "var(--smtc-padding-ctrl-to-nested-con 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))"; +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"; @@ -4426,7 +4480,7 @@ export const sizeCtrlIcon = "var(--smtc-size-ctrl-icon, 20px)"; export const sizeCtrlIconRaw = "--smtc-size-ctrl-icon"; // @public (undocumented) -export const sizeCtrlIconSecondary = "var(--smtc-size-ctrl-icon-secondary)"; +export const sizeCtrlIconSecondary = "var(--smtc-size-ctrl-icon-secondary, 20px)"; // @public (undocumented) export const sizeCtrlIconSecondaryRaw = "--smtc-size-ctrl-icon-secondary"; @@ -5452,7 +5506,7 @@ export const textRampLgSubsectionHeaderLineHeight = "var(--smtc-text-ramp-lg-sub 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))"; +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"; diff --git a/packages/semantic-tokens/src/components/list/tokens.ts b/packages/semantic-tokens/src/components/list/tokens.ts index 36cada0c95b6e..be0209b863217 100644 --- a/packages/semantic-tokens/src/components/list/tokens.ts +++ b/packages/semantic-tokens/src/components/list/tokens.ts @@ -84,7 +84,7 @@ export const ctrlListPillLengthHover = `var(${ctrlListPillLengthHoverRaw}, var($ 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}))`; +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})`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index 5c7dc4aefdb2d..af103f8aa0790 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -302,7 +302,7 @@ export const textStyleDefaultRegularLetterSpacing = `var(${textStyleDefaultRegul export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightRaw}, ${fontWeightSemibold})`; export const sizeCtrlDefault = `var(${sizeCtrlDefaultRaw}, 44px)`; export const sizeCtrlIcon = `var(${sizeCtrlIconRaw}, 20px)`; -export const sizeCtrlIconSecondary = `var(${sizeCtrlIconSecondaryRaw})`; +export const sizeCtrlIconSecondary = `var(${sizeCtrlIconSecondaryRaw}, 20px)`; export const textCtrlWeightSelected = `var(${textCtrlWeightSelectedRaw}, ${fontWeightSemibold})`; export const sizeCtrlSmDefault = `var(${sizeCtrlSmDefaultRaw}, 32px)`; export const sizeCtrlSmIcon = `var(${sizeCtrlSmIconRaw}, 20px)`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 6d672fe281c7b..61988a93c46db 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -137,6 +137,78 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { 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', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 5b1ae883fa4d2..3e9ab0d4c4387 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -100,6 +100,7 @@ export const fluentOverrides: FluentOverrides = { ctrlLinkForegroundNeutralHover: { f2Token: 'colorNeutralForeground2Hover' }, ctrlLinkForegroundNeutralPressed: { f2Token: 'colorNeutralForeground2Pressed' }, ctrlLinkForegroundNeutralRest: { f2Token: 'colorNeutralForeground2' }, + ctrlListCornerHover: { f2Token: 'borderRadiusMedium' }, ctrlListCornerRest: { f2Token: 'borderRadiusMedium' }, ctrlListIndentLevel1: { f2Token: 'spacingHorizontalXXL' }, ctrlListPillWidth: { f2Token: 'strokeWidthThicker' }, @@ -191,6 +192,7 @@ export const fluentOverrides: FluentOverrides = { 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' }, @@ -209,9 +211,11 @@ export const fluentOverrides: FluentOverrides = { 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' }, @@ -293,6 +297,7 @@ export const fluentOverrides: FluentOverrides = { textRampItemHeaderLineHeight: { f2Token: 'lineHeightBase400' }, textRampLgItemBodyFontSize: { f2Token: 'fontSizeBase400' }, textRampLgItemBodyLineHeight: { f2Token: 'lineHeightBase400' }, + textRampMetadataFontSize: { f2Token: 'fontSizeBase200' }, // should be fontSizeBase100 per Menu design textRampReadingBodyFontSize: { f2Token: 'fontSizeBase300' }, textRampReadingBodyLineHeight: { f2Token: 'lineHeightBase300' }, textRampSectionHeaderFontSize: { f2Token: 'fontSizeBase500' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 2a49ebc94dd10..80ac04cc6fb12 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1821,6 +1821,24 @@ export { _ctrlMessageBarReflowSpacerMarginBottom, _ctrlMessageBarSpacingTop, _ctrlMessageBarTitleLineHeight, + _ctrlMenuGroupHeaderColor, + _ctrlMenuGroupHeaderFontWeight, + _ctrlMenuGroupHeaderHeight, + _ctrlMenuGroupHeaderPaddingHorizontal, + _ctrlMenuItemContentPaddingX, + _ctrlMenuItemGapInsideDefault, + _ctrlMenuItemPaddingBottom, + _ctrlMenuItemPaddingTop, + _ctrlMenuItemPaddingX, + _ctrlMenuItemSecondaryContentFontSize, + _ctrlMenuItemSecondaryContentForegroundHover, + _ctrlMenuItemSecondaryContentForegroundRest, + _ctrlMenuItemSizeDefault, + _ctrlMenuItemSubTextForegroundHover, + _ctrlMenuItemSubTextForegroundPressed, + _ctrlMenuPopoverCornerFlyoutRest, + _ctrlMenuPopoverShadowFlyout, + _ctrlMenuPopoverStrokeFlyout, _ctrlPersonaTreeIconOnSubtlePressed, _ctrlSliderBarSizeDefault, _ctrlSliderPaddingDefault, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 6f71c9ebec6ad..37e202c70b22f 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -569,11 +569,26 @@ export const colorStatusDangerForeground1 = 'var(--colorStatusDangerForeground1) * @public */ export const spacingVerticalMNudge = 'var(--spacingVerticalMNudge)'; +/** + * 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#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#colorBrandStroke2Contrast | `colorBrandStroke2Contrast`} design token. * @public @@ -594,11 +609,6 @@ export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)'; * @public */ export const spacingHorizontalXXS = 'var(--spacingHorizontalXXS)'; -/** - * 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#colorTransparentBackgroundHover | `colorTransparentBackgroundHover`} design token. * @public diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index bf1a49fe616fb..a37d2fe2bc72f 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -6,6 +6,7 @@ import { } from '../components/avatar/variables'; import { ctrlFocusInnerStrokeWidthRaw, ctrlFocusOuterStrokeRaw } from '../components/focus/variables'; import { ctrlInputBackgroundRestRaw } from '../components/input/variables'; +import { ctrlListIndentLevel1Raw } from '../components/list/variables'; import { ctrlProgressBackgroundEmptyRaw, ctrlProgressBackgroundFilledRaw, @@ -30,16 +31,18 @@ import { gapBetweenCtrlDefaultRaw, paddingContentAlignOutdentIconOnSubtleRaw, textGlobalBody2LineHeightRaw, + textStyleDefaultRegularWeightRaw, sizeCtrlDefaultRaw, paddingCtrlHorizontalDefaultRaw, + paddingCtrlTextSideRaw, textGlobalBody3FontSizeRaw, + cornerFlyoutRestRaw, + shadowFlyoutRaw, textGlobalBody3LineHeightRaw, - textStyleDefaultRegularWeightRaw, backgroundCtrlBrandDisabledRaw, foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, foregroundCtrlBrandRestRaw, - paddingCtrlTextSideRaw, } from '../control/variables'; import { colorTransparentBackground, @@ -65,14 +68,18 @@ import { spacingVerticalS, spacingVerticalMNudge, lineHeightBase300, + fontWeightSemibold, + spacingVerticalSNudge, + fontSizeBase200, + colorNeutralForeground3Hover, colorNeutralForeground3Pressed, + shadow16, + colorTransparentStroke, colorBrandStroke2Contrast, colorBrandStroke1, fontSizeBase400, lineHeightBase400, - fontWeightSemibold, spacingVerticalXS, - colorTransparentStroke, colorNeutralForegroundDisabled, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, @@ -81,13 +88,13 @@ import { spacingHorizontalMNudge, spacingHorizontalXXS, spacingVerticalXXS, - colorNeutralForeground3Hover, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, } from '../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, foregroundCtrlHintDefaultRaw, + strokeFlyoutRaw, strokeCtrlOnBrandHoverRaw, strokeCtrlOnBrandRestRaw, } from '../nullable/variables'; @@ -104,6 +111,8 @@ import { strokeWidthCtrlOutlineRestRaw, textRampItemHeaderLineHeightRaw, textRampItemBodyFontSizeRaw, + foregroundCtrlNeutralSecondaryHoverRaw, + foregroundCtrlNeutralSecondaryPressedRaw, textRampItemBodyLineHeightRaw, strokeCtrlOnActiveBrandHoverRaw, strokeCtrlOnActiveBrandRestRaw, @@ -388,6 +397,132 @@ export const _ctrlMessageBarSpacingTop = `var(${paddingContentAlignDefaultRaw}, * please use textRampItemHeaderLineHeight instead. */ export const _ctrlMessageBarTitleLineHeight = `var(${textRampItemHeaderLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}, ${lineHeightBase300}))`; +/** + * 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 foregroundCtrlOnSubtlePressed to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index 7f7af5e744cec..bc03886629bf3 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -126,6 +126,7 @@ import { colorNeutralForegroundInverted, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedPressed, + colorNeutralBackground1, } from '../legacy/tokens'; import { strokeCardOnPrimaryRestRaw, @@ -436,7 +437,7 @@ export const textRampItemHeaderFontSize = `var(${textRampItemHeaderFontSizeRaw}, 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}))`; +export const textRampMetadataFontSize = `var(${textRampMetadataFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}, ${fontSizeBase200}))`; export const textRampMetadataLineHeight = `var(${textRampMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; export const textRampLegalFontSize = `var(${textRampLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}))`; export const textRampLegalLineHeight = `var(${textRampLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}))`; @@ -477,7 +478,7 @@ export const textCtrlButtonWeightDefault = `var(${textCtrlButtonWeightDefaultRaw 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}))`; +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}))`; @@ -597,7 +598,7 @@ export const foregroundCtrlOnTransparentRest = `var(${foregroundCtrlOnTransparen 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}))`; +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}))`; From 3b05a7aa9d8f50f83a7828584b023f232b1c8f00 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Fri, 11 Jul 2025 19:23:36 -0400 Subject: [PATCH 39/66] update radio to use semantic tokens (#34739) Co-authored-by: Mitch-At-Work --- .../etc/semantic-style-hooks-preview.api.md | 4 + .../library/package.json | 1 + .../src/component-styles/Radio/index.ts | 1 + .../Radio/useSemanticRadioStyles.styles.ts | 264 +++++++++++++++ .../component-styles/semanticStyleHooks.ts | 3 + .../library/src/index.ts | 1 + .../etc/semantic-tokens.api.md | 64 +++- .../src/components/choice/tokens.ts | 4 +- .../src/fluentLegacyVariants.ts | 80 +++++ .../semantic-tokens/src/fluentOverrides.ts | 2 + packages/semantic-tokens/src/index.ts | 36 +- packages/semantic-tokens/src/legacy/tokens.ts | 42 ++- .../src/legacyVariant/tokens.ts | 317 ++++++++++++++---- 13 files changed, 718 insertions(+), 101 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Radio/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Radio/useSemanticRadioStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index ef781e92873cc..4c6b4ad35b8c4 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -36,6 +36,7 @@ import { MessageBarBodyState } from '@fluentui/react-message-bar'; import { MessageBarState } from '@fluentui/react-message-bar'; import { MessageBarTitleState } from '@fluentui/react-message-bar'; 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 { SliderState } from '@fluentui/react-slider'; @@ -150,6 +151,9 @@ export const useSemanticOverlayDrawerSurfaceStyles: (_state: unknown) => DialogS // @public export const useSemanticProgressBarStyles: (_state: unknown) => ProgressBarState; +// @public +export const useSemanticRadioStyles: (_state: unknown) => RadioState; + // @public export const useSemanticRatingDisplayStyles: (_state: unknown) => RatingDisplayState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index f943603ac28be..d65b1d2035e64 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -42,6 +42,7 @@ "@fluentui/react-positioning": "^9.16.7", "@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-shared-contexts": "^9.23.1", "@fluentui/react-slider": "^9.3.7", 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 0000000000000..ffcda3d4df597 --- /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 0000000000000..6c0be220819d0 --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 8ebbe28bbf448..8f7d186c80a43 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -58,6 +58,7 @@ import { useSemanticMenuSplitGroupStyles, } from './Menu'; import { useSemanticMenuGroupHeaderStyles } from './Menu'; +import { useSemanticRadioStyles } from './Radio'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -128,4 +129,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useMenuItemSwitchStyles_unstable: useSemanticMenuItemSwitchStyles, useMenuPopoverStyles_unstable: useSemanticMenuPopoverStyles, useMenuSplitGroupStyles_unstable: useSemanticMenuSplitGroupStyles, + // Radio styles + useRadioStyles_unstable: useSemanticRadioStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index ea51f5cbdc9c6..f6fa212738816 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -62,3 +62,4 @@ export { useSemanticMenuPopoverStyles, useSemanticMenuSplitGroupStyles, } from './component-styles/Menu'; +export { useSemanticRadioStyles } from './component-styles/Radio'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index da62d933dc1d5..0f88a9eafb26a 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -1109,7 +1109,7 @@ export const ctrlChoicePaddingVertical = "var(--smtc-ctrl-choice-padding-vertica export const ctrlChoicePaddingVerticalRaw = "--smtc-ctrl-choice-padding-vertical"; // @public (undocumented) -export const ctrlChoiceRadioCorner = "var(--smtc-ctrl-choice-radio-corner, var(--smtc-corner-circular))"; +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"; @@ -1127,7 +1127,7 @@ export const ctrlChoiceRadioDotSizePressed = "var(--smtc-ctrl-choice-radio-dot-s export const ctrlChoiceRadioDotSizePressedRaw = "--smtc-ctrl-choice-radio-dot-size-pressed"; // @public (undocumented) -export const ctrlChoiceRadioDotSizeRest = "var(--smtc-ctrl-choice-radio-dot-size-rest)"; +export const ctrlChoiceRadioDotSizeRest = "var(--smtc-ctrl-choice-radio-dot-size-rest, 16px)"; // @public (undocumented) export const ctrlChoiceRadioDotSizeRestRaw = "--smtc-ctrl-choice-radio-dot-size-rest"; @@ -2368,6 +2368,66 @@ export const ctrlProgressSmHeightFilled = "var(--smtc-ctrl-progress-sm-height-fi // @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)))"; diff --git a/packages/semantic-tokens/src/components/choice/tokens.ts b/packages/semantic-tokens/src/components/choice/tokens.ts index 3a229eca1fc85..a27fb07948de3 100644 --- a/packages/semantic-tokens/src/components/choice/tokens.ts +++ b/packages/semantic-tokens/src/components/choice/tokens.ts @@ -95,7 +95,7 @@ export const ctrlChoiceCheckboxCorner = `var(${ctrlChoiceCheckboxCornerRaw})`; export const ctrlChoiceCheckboxIndeterminateCorner = `var(${ctrlChoiceCheckboxIndeterminateCornerRaw}, var(${cornerCircularRaw}))`; export const ctrlChoiceCheckboxIndeterminateWidth = `var(${ctrlChoiceCheckboxIndeterminateWidthRaw})`; export const ctrlChoiceCheckboxIndeterminateHeight = `var(${ctrlChoiceCheckboxIndeterminateHeightRaw})`; -export const ctrlChoiceRadioCorner = `var(${ctrlChoiceRadioCornerRaw}, var(${cornerCircularRaw}))`; +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)`; @@ -105,7 +105,7 @@ export const ctrlChoiceSwitchPaddingPressed = `var(${ctrlChoiceSwitchPaddingPres 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})`; +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}))`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 61988a93c46db..e3b4383d3c549 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -245,6 +245,86 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorNeutralForeground3Pressed', originalToken: 'foregroundCtrlOnSubtlePressed', }, + _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', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 3e9ab0d4c4387..ae6827049de0e 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -63,6 +63,8 @@ export const fluentOverrides: FluentOverrides = { ctrlChoiceBaseStrokeRest: { f2Token: 'colorNeutralStrokeAccessible' }, ctrlChoicePaddingHorizontal: { f2Token: 'spacingHorizontalS' }, ctrlChoicePaddingVertical: { f2Token: 'spacingVerticalS' }, + ctrlChoiceRadioCorner: { f2Token: 'borderRadiusCircular' }, + ctrlChoiceRadioDotSizeRest: { rawValue: '16px' }, ctrlChoiceSwitchCorner: { f2Token: 'borderRadiusCircular' }, ctrlChoiceSwitchHeight: { rawValue: '20px' }, ctrlChoiceSwitchPaddingHover: { rawValue: '1px' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 80ac04cc6fb12..31dc3062856d2 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1813,14 +1813,6 @@ export { _ctrlListForegroundColorPressed, _ctrlListForegroundColorRest, _ctrlListItemStroke, - _ctrlMessageBarActionsMultilinePaddingRight, - _ctrlMessageBarErrorIconColor, - _ctrlMessageBarGapBetweenCtrl, - _ctrlMessageBarPaddingContentAlignDefault, - _ctrlMessageBarPaddingVertical, - _ctrlMessageBarReflowSpacerMarginBottom, - _ctrlMessageBarSpacingTop, - _ctrlMessageBarTitleLineHeight, _ctrlMenuGroupHeaderColor, _ctrlMenuGroupHeaderFontWeight, _ctrlMenuGroupHeaderHeight, @@ -1839,7 +1831,35 @@ export { _ctrlMenuPopoverCornerFlyoutRest, _ctrlMenuPopoverShadowFlyout, _ctrlMenuPopoverStrokeFlyout, + _ctrlMessageBarActionsMultilinePaddingRight, + _ctrlMessageBarErrorIconColor, + _ctrlMessageBarGapBetweenCtrl, + _ctrlMessageBarPaddingContentAlignDefault, + _ctrlMessageBarPaddingVertical, + _ctrlMessageBarReflowSpacerMarginBottom, + _ctrlMessageBarSpacingTop, + _ctrlMessageBarTitleLineHeight, _ctrlPersonaTreeIconOnSubtlePressed, + _ctrlRadioBackgroundActiveBrandHover, + _ctrlRadioBackgroundActiveBrandPressed, + _ctrlRadioBackgroundActiveBrandRest, + _ctrlRadioBackgroundActiveDisabled, + _ctrlRadioBaseBackgroundDisabled, + _ctrlRadioBaseBackgroundHover, + _ctrlRadioBaseBackgroundPressed, + _ctrlRadioChoiceBaseSize, + _ctrlRadioForegroundContentDisabled, + _ctrlRadioForegroundContentNeutralHover, + _ctrlRadioForegroundContentNeutralRest, + _ctrlRadioForegroundOnActiveBrandHover, + _ctrlRadioForegroundOnActiveBrandPressed, + _ctrlRadioForegroundOnActiveBrandRest, + _ctrlRadioForegroundOnActiveDisabled, + _ctrlRadioPaddingTextTop, + _ctrlRadioPaddingVertical, + _ctrlRadioStrokeOnActiveBrandHover, + _ctrlRadioStrokeOnActiveBrandPressed, + _ctrlRadioStrokeOnActiveBrandRest, _ctrlSliderBarSizeDefault, _ctrlSliderPaddingDefault, _ctrlSliderSmBarSizeDefault, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 37e202c70b22f..49ce673ee95c1 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -554,6 +554,26 @@ export const borderRadiusSmall = 'var(--borderRadiusSmall)'; * @public */ export const colorNeutralForeground4 = 'var(--colorNeutralForeground4)'; +/** + * 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#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 @@ -570,35 +590,25 @@ export const colorStatusDangerForeground1 = 'var(--colorStatusDangerForeground1) */ export const spacingVerticalMNudge = 'var(--spacingVerticalMNudge)'; /** - * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalSNudge | `spacingVerticalSNudge`} design token. + * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXS | `spacingVerticalXS`} design token. * @public */ -export const spacingVerticalSNudge = 'var(--spacingVerticalSNudge)'; +export const spacingVerticalXS = 'var(--spacingVerticalXS)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Hover | `colorNeutralForeground3Hover`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStrokeHover | `colorCompoundBrandStrokeHover`} design token. * @public */ -export const colorNeutralForeground3Hover = 'var(--colorNeutralForeground3Hover)'; +export const colorCompoundBrandStrokeHover = 'var(--colorCompoundBrandStrokeHover)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Pressed | `colorNeutralForeground3Pressed`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStrokePressed | `colorCompoundBrandStrokePressed`} 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)'; +export const colorCompoundBrandStrokePressed = 'var(--colorCompoundBrandStrokePressed)'; /** * 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#spacingVerticalXS | `spacingVerticalXS`} design token. - * @public - */ -export const spacingVerticalXS = 'var(--spacingVerticalXS)'; /** * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalMNudge | `spacingHorizontalMNudge`} design token. * @public diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index a37d2fe2bc72f..28df0b0268e1c 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -4,6 +4,12 @@ import { ctrlAvatarCornerGroupRaw, ctrlAvatarPresenceBadgeStrokeWidthRaw, } from '../components/avatar/variables'; +import { + ctrlChoiceBaseBackgroundDisabledRaw, + ctrlChoiceBaseBackgroundHoverRaw, + ctrlChoiceBaseBackgroundPressedRaw, + ctrlChoiceBaseSizeRaw, +} from '../components/choice/variables'; import { ctrlFocusInnerStrokeWidthRaw, ctrlFocusOuterStrokeRaw } from '../components/focus/variables'; import { ctrlInputBackgroundRestRaw } from '../components/input/variables'; import { ctrlListIndentLevel1Raw } from '../components/list/variables'; @@ -26,11 +32,6 @@ import { foregroundCtrlNeutralSecondaryRestRaw, backgroundCtrlSubtleHoverRaw, backgroundCtrlSubtlePressedRaw, - paddingContentAlignDefaultRaw, - statusDangerTintForegroundRaw, - gapBetweenCtrlDefaultRaw, - paddingContentAlignOutdentIconOnSubtleRaw, - textGlobalBody2LineHeightRaw, textStyleDefaultRegularWeightRaw, sizeCtrlDefaultRaw, paddingCtrlHorizontalDefaultRaw, @@ -38,8 +39,18 @@ import { textGlobalBody3FontSizeRaw, cornerFlyoutRestRaw, shadowFlyoutRaw, - textGlobalBody3LineHeightRaw, + paddingContentAlignDefaultRaw, + statusDangerTintForegroundRaw, + gapBetweenCtrlDefaultRaw, + paddingContentAlignOutdentIconOnSubtleRaw, + textGlobalBody2LineHeightRaw, + backgroundCtrlBrandHoverRaw, + backgroundCtrlBrandPressedRaw, backgroundCtrlBrandDisabledRaw, + sizeCtrlIconRaw, + foregroundCtrlOnBrandRestRaw, + foregroundCtrlOnBrandDisabledRaw, + textGlobalBody3LineHeightRaw, foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, foregroundCtrlBrandRestRaw, @@ -62,12 +73,6 @@ import { colorNeutralBackground3, colorNeutralBackground1, colorNeutralForeground4, - spacingVerticalM, - colorStatusDangerForeground1, - spacingHorizontalM, - spacingVerticalS, - spacingVerticalMNudge, - lineHeightBase300, fontWeightSemibold, spacingVerticalSNudge, fontSizeBase200, @@ -75,12 +80,25 @@ import { colorNeutralForeground3Pressed, shadow16, colorTransparentStroke, + spacingVerticalM, + colorStatusDangerForeground1, + spacingHorizontalM, + spacingVerticalS, + spacingVerticalMNudge, + lineHeightBase300, + colorNeutralForegroundDisabled, + colorNeutralForeground2, + colorCompoundBrandForeground1Hover, + colorCompoundBrandForeground1Pressed, + colorCompoundBrandForeground1, + spacingVerticalXS, + colorCompoundBrandStrokeHover, + colorCompoundBrandStrokePressed, + colorCompoundBrandStroke, colorBrandStroke2Contrast, colorBrandStroke1, fontSizeBase400, lineHeightBase400, - spacingVerticalXS, - colorNeutralForegroundDisabled, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground2Hover, @@ -95,7 +113,11 @@ import { backgroundCtrlSubtleRestRaw, foregroundCtrlHintDefaultRaw, strokeFlyoutRaw, + backgroundCtrlOutlineDisabledRaw, + backgroundCtrlOutlineHoverRaw, + backgroundCtrlOutlinePressedRaw, strokeCtrlOnBrandHoverRaw, + strokeCtrlOnBrandPressedRaw, strokeCtrlOnBrandRestRaw, } from '../nullable/variables'; import { @@ -109,14 +131,23 @@ import { foregroundCtrlNeutralPrimaryPressedRaw, foregroundCtrlOnSubtleRestRaw, strokeWidthCtrlOutlineRestRaw, - textRampItemHeaderLineHeightRaw, textRampItemBodyFontSizeRaw, foregroundCtrlNeutralSecondaryHoverRaw, foregroundCtrlNeutralSecondaryPressedRaw, - textRampItemBodyLineHeightRaw, + textRampItemHeaderLineHeightRaw, + backgroundCtrlActiveBrandHoverRaw, + backgroundCtrlActiveBrandPressedRaw, + backgroundCtrlActiveBrandRestRaw, + backgroundCtrlActiveBrandDisabledRaw, + foregroundContentNeutralPrimaryRaw, + foregroundCtrlOnActiveBrandHoverRaw, + foregroundCtrlOnActiveBrandPressedRaw, + foregroundCtrlOnActiveBrandRestRaw, + foregroundCtrlOnActiveBrandDisabledRaw, strokeCtrlOnActiveBrandHoverRaw, + strokeCtrlOnActiveBrandPressedRaw, strokeCtrlOnActiveBrandRestRaw, - backgroundCtrlActiveBrandDisabledRaw, + textRampItemBodyLineHeightRaw, foregroundCtrlActiveBrandHoverRaw, foregroundCtrlActiveBrandPressedRaw, foregroundCtrlActiveBrandRestRaw, @@ -341,62 +372,6 @@ export const _ctrlListForegroundColorRest = `var(${foregroundCtrlOnSubtleRestRaw * please use strokeWidthCtrlOutlineRest instead. */ export const _ctrlListItemStroke = `var(${strokeWidthCtrlOutlineRestRaw}, var(${strokeWidthDefaultRaw}, ${colorStrokeFocus2}))`; -/** - * 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 foregroundCtrlNeutralSecondaryRest to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -523,6 +498,62 @@ export const _ctrlMenuPopoverShadowFlyout = `var(${shadowFlyoutRaw}, ${shadow16} * 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. @@ -530,6 +561,146 @@ export const _ctrlMenuPopoverStrokeFlyout = `var(${strokeFlyoutRaw}, var(${nullC * please use foregroundCtrlOnSubtlePressed instead. */ export const _ctrlPersonaTreeIconOnSubtlePressed = `var(${foregroundCtrlOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw}, ${colorNeutralForeground3Pressed}))`; +/** + * 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. From be1c3e70c97a68edacc71395eefb5b76ce713a08 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Mon, 14 Jul 2025 14:47:55 -0400 Subject: [PATCH 40/66] add persona to semantic style hooks (#34808) --- .../etc/semantic-style-hooks-preview.api.md | 4 + .../library/package.json | 1 + .../src/component-styles/Persona/index.ts | 1 + .../useSemanticPersonaStyles.styles.ts | 303 ++++++++++++++++++ .../component-styles/semanticStyleHooks.ts | 3 + .../library/src/index.ts | 1 + 6 files changed, 313 insertions(+) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Persona/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Persona/useSemanticPersonaStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 4c6b4ad35b8c4..2a0fbe231dc76 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -35,6 +35,7 @@ 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 { ProgressBarState } from '@fluentui/react-progress'; import { RadioState } from '@fluentui/react-radio'; import { RatingDisplayState } from '@fluentui/react-rating'; @@ -148,6 +149,9 @@ export const useSemanticMessageBarTitleStyles: (_state: unknown) => MessageBarTi // @public export const useSemanticOverlayDrawerSurfaceStyles: (_state: unknown) => DialogSurfaceState; +// @public +export const useSemanticPersonaStyles: (_state: unknown) => PersonaState; + // @public export const useSemanticProgressBarStyles: (_state: unknown) => ProgressBarState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index d65b1d2035e64..da7e6d7f5984c 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -40,6 +40,7 @@ "@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-progress": "^9.2.6", "@fluentui/react-provider": "^9.20.6", "@fluentui/react-radio": "^9.3.6", 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 0000000000000..197b3b0c1f28c --- /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 0000000000000..5b66062de4959 --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 8f7d186c80a43..f63076827caf4 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -59,6 +59,7 @@ import { } from './Menu'; import { useSemanticMenuGroupHeaderStyles } from './Menu'; import { useSemanticRadioStyles } from './Radio'; +import { useSemanticPersonaStyles } from './Persona'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -131,4 +132,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useMenuSplitGroupStyles_unstable: useSemanticMenuSplitGroupStyles, // Radio styles useRadioStyles_unstable: useSemanticRadioStyles, + // Persona styles + usePersonaStyles_unstable: useSemanticPersonaStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index f6fa212738816..95bc10c336077 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -63,3 +63,4 @@ export { useSemanticMenuSplitGroupStyles, } from './component-styles/Menu'; export { useSemanticRadioStyles } from './component-styles/Radio'; +export { useSemanticPersonaStyles } from './component-styles/Persona'; From 8ba2e9155f58523d43172af17942726fc6b2446e Mon Sep 17 00:00:00 2001 From: brandonthomas Date: Mon, 14 Jul 2025 13:58:25 -0700 Subject: [PATCH 41/66] Semantic tokens checkbox (#34811) Co-authored-by: Mitch-At-Work --- .../etc/semantic-style-hooks-preview.api.md | 4 + .../library/package.json | 1 + .../src/component-styles/Checkbox/index.ts | 1 + .../useSemanticCheckboxStyles.styles.ts | 240 ++++++++++++++++++ .../component-styles/semanticStyleHooks.ts | 3 + .../library/src/index.ts | 1 + .../etc/semantic-tokens.api.md | 35 ++- .../src/components/choice/tokens.ts | 3 +- .../src/fluentLegacyVariants.ts | 44 ++++ .../semantic-tokens/src/fluentOverrides.ts | 1 + packages/semantic-tokens/src/index.ts | 11 + packages/semantic-tokens/src/legacy/tokens.ts | 24 +- .../src/legacyVariant/tokens.ts | 114 +++++++-- 13 files changed, 451 insertions(+), 31 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Checkbox/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Checkbox/useSemanticCheckboxStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 2a0fbe231dc76..1a7e5816aa48a 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -7,6 +7,7 @@ import { AccordionHeaderState } from '@fluentui/react-accordion'; import { AvatarState } from '@fluentui/react-avatar'; import { ButtonState } from '@fluentui/react-button'; +import { CheckboxState } from '@fluentui/react-checkbox'; import { CompoundButtonState } from '@fluentui/react-button'; import { DialogActionsState } from '@fluentui/react-dialog'; import { DialogBodyState } from '@fluentui/react-dialog'; @@ -65,6 +66,9 @@ export const useSemanticAvatarStyles: (_state: unknown) => AvatarState; // @public (undocumented) export const useSemanticButtonStyles: (_state: unknown) => ButtonState; +// @public +export const useSemanticCheckboxStyles: (_state: unknown) => CheckboxState; + // @public (undocumented) export const useSemanticCompoundButtonStyles: (_state: unknown) => CompoundButtonState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index da7e6d7f5984c..6213549059a70 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -27,6 +27,7 @@ "@fluentui/react-accordion": "^9.6.8", "@fluentui/react-avatar": "^9.7.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", 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 0000000000000..29d123d31c110 --- /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 0000000000000..f41df4c42bacb --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index f63076827caf4..6c62598b0cb68 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -9,6 +9,7 @@ import { } from './Button'; import { useSemanticAccordionHeaderStyles } from './Accordion'; import { useSemanticAvatarStyles } from './Avatar'; +import { useSemanticCheckboxStyles } from './Checkbox'; import { useSemanticDividerStyles } from './Divider'; import { useSemanticInlineDrawerStyles, @@ -134,4 +135,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useRadioStyles_unstable: useSemanticRadioStyles, // Persona styles usePersonaStyles_unstable: useSemanticPersonaStyles, + // Checkbox styles + useCheckboxStyles_unstable: useSemanticCheckboxStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index 95bc10c336077..907d7f4e57dcc 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -64,3 +64,4 @@ export { } from './component-styles/Menu'; export { useSemanticRadioStyles } from './component-styles/Radio'; export { useSemanticPersonaStyles } from './component-styles/Persona'; +export { useSemanticCheckboxStyles } from './component-styles/Checkbox'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 0f88a9eafb26a..bc8332f3d1fc2 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -940,6 +940,39 @@ 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)))"; @@ -995,7 +1028,7 @@ export const ctrlChoiceBaseStrokeRest = "var(--smtc-ctrl-choice-base-stroke-rest export const ctrlChoiceBaseStrokeRestRaw = "--smtc-ctrl-choice-base-stroke-rest"; // @public (undocumented) -export const ctrlChoiceCheckboxCorner = "var(--smtc-ctrl-choice-checkbox-corner)"; +export const ctrlChoiceCheckboxCorner = "var(--smtc-ctrl-choice-checkbox-corner, var(--borderRadiusSmall))"; // @public (undocumented) export const ctrlChoiceCheckboxCornerRaw = "--smtc-ctrl-choice-checkbox-corner"; diff --git a/packages/semantic-tokens/src/components/choice/tokens.ts b/packages/semantic-tokens/src/components/choice/tokens.ts index a27fb07948de3..80caeea63d722 100644 --- a/packages/semantic-tokens/src/components/choice/tokens.ts +++ b/packages/semantic-tokens/src/components/choice/tokens.ts @@ -16,6 +16,7 @@ import { colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeDisabled, + borderRadiusSmall, borderRadiusCircular, } from '../../legacy/tokens'; import { @@ -91,7 +92,7 @@ export const ctrlChoiceBaseStrokeHover = `var(${ctrlChoiceBaseStrokeHoverRaw}, v 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})`; +export const ctrlChoiceCheckboxCorner = `var(${ctrlChoiceCheckboxCornerRaw}, ${borderRadiusSmall})`; export const ctrlChoiceCheckboxIndeterminateCorner = `var(${ctrlChoiceCheckboxIndeterminateCornerRaw}, var(${cornerCircularRaw}))`; export const ctrlChoiceCheckboxIndeterminateWidth = `var(${ctrlChoiceCheckboxIndeterminateWidthRaw})`; export const ctrlChoiceCheckboxIndeterminateHeight = `var(${ctrlChoiceCheckboxIndeterminateHeightRaw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index e3b4383d3c549..e665ba8695096 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -85,6 +85,50 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { 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', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index ae6827049de0e..4cfe3ccf36f64 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -61,6 +61,7 @@ export const fluentOverrides: FluentOverrides = { ctrlChoiceBaseStrokeHover: { f2Token: 'colorNeutralStrokeAccessibleHover' }, ctrlChoiceBaseStrokePressed: { f2Token: 'colorNeutralStrokeAccessiblePressed' }, ctrlChoiceBaseStrokeRest: { f2Token: 'colorNeutralStrokeAccessible' }, + ctrlChoiceCheckboxCorner: { f2Token: 'borderRadiusSmall' }, ctrlChoicePaddingHorizontal: { f2Token: 'spacingHorizontalS' }, ctrlChoicePaddingVertical: { f2Token: 'spacingVerticalS' }, ctrlChoiceRadioCorner: { f2Token: 'borderRadiusCircular' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 31dc3062856d2..7147951e1a7a1 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1800,6 +1800,17 @@ export { _ctrlAvatarPresenceBadgeStrokeWidthLg, _ctrlAvatarPresenceBadgeStrokeWidthSm, _ctrlButtonGapInsideDefault, + _ctrlCheckboxBorderColorChecked, + _ctrlCheckboxBorderColorCheckedHover, + _ctrlCheckboxForegroundUnchecked, + _ctrlCheckboxForegroundUncheckedHover, + _ctrlCheckboxIndicatorBorderColorCheckedPressed, + _ctrlCheckboxIndicatorBorderColorMixed, + _ctrlCheckboxIndicatorBorderColorMixedHover, + _ctrlCheckboxIndicatorBorderColorMixedPressed, + _ctrlCheckboxIndicatorColorMixed, + _ctrlCheckboxIndicatorColorMixedHover, + _ctrlCheckboxIndicatorColorMixedPressed, _ctrlDialogGapBetweenContentMedium, _ctrlDividerForegroundSubtle, _ctrlFocusOuterStrokeInteractive, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 49ce673ee95c1..b9bd9e6ecb18b 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -134,6 +134,11 @@ export const fontSizeBase300 = 'var(--fontSizeBase300)'; * @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 @@ -545,10 +550,15 @@ export const strokeWidthThickest = 'var(--strokeWidthThickest)'; */ export const borderRadiusLarge = 'var(--borderRadiusLarge)'; /** - * CSS custom property value for the {@link @fluentui/tokens#borderRadiusSmall | `borderRadiusSmall`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStrokeHover | `colorCompoundBrandStrokeHover`} design token. * @public */ -export const borderRadiusSmall = 'var(--borderRadiusSmall)'; +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#colorNeutralForeground4 | `colorNeutralForeground4`} design token. * @public @@ -594,16 +604,6 @@ export const spacingVerticalMNudge = 'var(--spacingVerticalMNudge)'; * @public */ export const spacingVerticalXS = 'var(--spacingVerticalXS)'; -/** - * 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#colorBrandStroke2Contrast | `colorBrandStroke2Contrast`} design token. * @public diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 28df0b0268e1c..d5974f2f1f79b 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -27,6 +27,8 @@ import { paddingCtrlTextTopRaw, cornerCtrlRestRaw, gapInsideCtrlDefaultRaw, + backgroundCtrlBrandHoverRaw, + backgroundCtrlBrandPressedRaw, gapBetweenContentMediumRaw, backgroundCtrlNeutralRestRaw, foregroundCtrlNeutralSecondaryRestRaw, @@ -44,8 +46,6 @@ import { gapBetweenCtrlDefaultRaw, paddingContentAlignOutdentIconOnSubtleRaw, textGlobalBody2LineHeightRaw, - backgroundCtrlBrandHoverRaw, - backgroundCtrlBrandPressedRaw, backgroundCtrlBrandDisabledRaw, sizeCtrlIconRaw, foregroundCtrlOnBrandRestRaw, @@ -68,7 +68,17 @@ import { borderRadiusXLarge, strokeWidthThin, spacingHorizontalSNudge, + colorCompoundBrandBackground, + colorCompoundBrandBackgroundHover, colorNeutralForeground3, + colorNeutralForeground2, + colorCompoundBrandBackgroundPressed, + colorCompoundBrandStroke, + colorCompoundBrandStrokeHover, + colorCompoundBrandStrokePressed, + colorCompoundBrandForeground1, + colorCompoundBrandForeground1Hover, + colorCompoundBrandForeground1Pressed, colorTransparentStrokeInteractive, colorNeutralBackground3, colorNeutralBackground1, @@ -87,14 +97,7 @@ import { spacingVerticalMNudge, lineHeightBase300, colorNeutralForegroundDisabled, - colorNeutralForeground2, - colorCompoundBrandForeground1Hover, - colorCompoundBrandForeground1Pressed, - colorCompoundBrandForeground1, spacingVerticalXS, - colorCompoundBrandStrokeHover, - colorCompoundBrandStrokePressed, - colorCompoundBrandStroke, colorBrandStroke2Contrast, colorBrandStroke1, fontSizeBase400, @@ -111,13 +114,13 @@ import { } from '../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, + strokeCtrlOnBrandHoverRaw, + strokeCtrlOnBrandPressedRaw, foregroundCtrlHintDefaultRaw, strokeFlyoutRaw, backgroundCtrlOutlineDisabledRaw, backgroundCtrlOutlineHoverRaw, backgroundCtrlOutlinePressedRaw, - strokeCtrlOnBrandHoverRaw, - strokeCtrlOnBrandPressedRaw, strokeCtrlOnBrandRestRaw, } from '../nullable/variables'; import { @@ -125,6 +128,12 @@ import { foregroundCtrlOnTransparentPressedRaw, foregroundCtrlOnTransparentRestRaw, paddingCtrlTextBottomRaw, + strokeCtrlOnActiveBrandHoverRaw, + foregroundContentNeutralPrimaryRaw, + strokeCtrlOnActiveBrandPressedRaw, + backgroundCtrlActiveBrandRestRaw, + backgroundCtrlActiveBrandHoverRaw, + backgroundCtrlActiveBrandPressedRaw, foregroundCtrlOnSubtleHoverRaw, foregroundCtrlNeutralPrimaryHoverRaw, foregroundCtrlOnSubtlePressedRaw, @@ -135,17 +144,11 @@ import { foregroundCtrlNeutralSecondaryHoverRaw, foregroundCtrlNeutralSecondaryPressedRaw, textRampItemHeaderLineHeightRaw, - backgroundCtrlActiveBrandHoverRaw, - backgroundCtrlActiveBrandPressedRaw, - backgroundCtrlActiveBrandRestRaw, backgroundCtrlActiveBrandDisabledRaw, - foregroundContentNeutralPrimaryRaw, foregroundCtrlOnActiveBrandHoverRaw, foregroundCtrlOnActiveBrandPressedRaw, foregroundCtrlOnActiveBrandRestRaw, foregroundCtrlOnActiveBrandDisabledRaw, - strokeCtrlOnActiveBrandHoverRaw, - strokeCtrlOnActiveBrandPressedRaw, strokeCtrlOnActiveBrandRestRaw, textRampItemBodyLineHeightRaw, foregroundCtrlActiveBrandHoverRaw, @@ -281,6 +284,83 @@ export const _ctrlAvatarPresenceBadgeStrokeWidthSm = `var(${ctrlAvatarPresenceBa * 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. From c42197dcafb34599ace45479d294414d6917e67c Mon Sep 17 00:00:00 2001 From: terynk <86626692+terynk@users.noreply.github.com> Date: Tue, 15 Jul 2025 09:10:55 -0700 Subject: [PATCH 42/66] Update Badge to use semantic tokens (#34765) Co-authored-by: Mitch-At-Work --- .../etc/semantic-style-hooks-preview.api.md | 8 + .../library/package.json | 1 + .../src/component-styles/Badge/index.ts | 2 + .../Badge/useSemanticBadgeStyles.styles.ts | 352 ++++++++++++++++++ .../useSemanticPresenceBadgeStyles.styles.ts | 142 +++++++ .../component-styles/semanticStyleHooks.ts | 4 + .../library/src/index.ts | 1 + .../etc/semantic-tokens.api.md | 145 ++++++-- .../src/components/badge/tokens.ts | 9 +- .../semantic-tokens/src/control/tokens.ts | 28 +- .../src/fluentLegacyVariants.ts | 110 ++++++ .../semantic-tokens/src/fluentOverrides.ts | 32 ++ packages/semantic-tokens/src/index.ts | 27 ++ packages/semantic-tokens/src/legacy/tokens.ts | 130 ++++++- .../src/legacyVariant/tokens.ts | 238 +++++++++++- .../semantic-tokens/src/optional/tokens.ts | 43 ++- 16 files changed, 1189 insertions(+), 83 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticBadgeStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 1a7e5816aa48a..9b7fbd66d132d 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -6,6 +6,7 @@ import { AccordionHeaderState } from '@fluentui/react-accordion'; import { AvatarState } from '@fluentui/react-avatar'; +import { BadgeState } from '@fluentui/react-badge'; import { ButtonState } from '@fluentui/react-button'; import { CheckboxState } from '@fluentui/react-checkbox'; import { CompoundButtonState } from '@fluentui/react-button'; @@ -37,6 +38,7 @@ 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'; @@ -63,6 +65,9 @@ export const useSemanticAccordionHeaderStyles: (_state: unknown) => AccordionHea // @public (undocumented) export const useSemanticAvatarStyles: (_state: unknown) => AvatarState; +// @public +export const useSemanticBadgeStyles: (_state: unknown) => BadgeState; + // @public (undocumented) export const useSemanticButtonStyles: (_state: unknown) => ButtonState; @@ -156,6 +161,9 @@ export const useSemanticOverlayDrawerSurfaceStyles: (_state: unknown) => DialogS // @public export const useSemanticPersonaStyles: (_state: unknown) => PersonaState; +// @public +export const useSemanticPresenceBadgeStyles: (_state: unknown) => PresenceBadgeState; + // @public export const useSemanticProgressBarStyles: (_state: unknown) => ProgressBarState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 6213549059a70..5ccec0400537a 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -26,6 +26,7 @@ "dependencies": { "@fluentui/react-accordion": "^9.6.8", "@fluentui/react-avatar": "^9.7.6", + "@fluentui/react-badge": "^9.2.54", "@fluentui/react-button": "^9.4.6", "@fluentui/react-checkbox": "^9.3.6", "@fluentui/react-dialog": "^9.12.8", 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 0000000000000..e9cc09f99f64a --- /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 0000000000000..85b0d5103f2d4 --- /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 0000000000000..b5363ebb356ab --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 6c62598b0cb68..cd600070458dc 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -61,12 +61,16 @@ import { import { useSemanticMenuGroupHeaderStyles } from './Menu'; import { useSemanticRadioStyles } from './Radio'; import { useSemanticPersonaStyles } from './Persona'; +import { useSemanticBadgeStyles, useSemanticPresenceBadgeStyles } from './Badge'; 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, diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index 907d7f4e57dcc..64350c99c8ac5 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -6,6 +6,7 @@ export { 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'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index bc8332f3d1fc2..281c382e537a2 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -788,7 +788,7 @@ export const ctrlBadgeBeaconSize = "var(--smtc-ctrl-badge-beacon-size)"; export const ctrlBadgeBeaconSizeRaw = "--smtc-ctrl-badge-beacon-size"; // @public (undocumented) -export const ctrlBadgeCorner = "var(--smtc-ctrl-badge-corner)"; +export const ctrlBadgeCorner = "var(--smtc-ctrl-badge-corner, var(--borderRadiusMedium))"; // @public (undocumented) export const ctrlBadgeCornerRaw = "--smtc-ctrl-badge-corner"; @@ -824,7 +824,7 @@ export const ctrlBadgeLgIconSize = "var(--smtc-ctrl-badge-lg-icon-size)"; export const ctrlBadgeLgIconSizeRaw = "--smtc-ctrl-badge-lg-icon-size"; // @public (undocumented) -export const ctrlBadgeLgPadding = "var(--smtc-ctrl-badge-lg-padding)"; +export const ctrlBadgeLgPadding = "var(--smtc-ctrl-badge-lg-padding, var(--spacingHorizontalXS))"; // @public (undocumented) export const ctrlBadgeLgPaddingRaw = "--smtc-ctrl-badge-lg-padding"; @@ -847,18 +847,39 @@ export const ctrlBadgeLgTextPaddingTop = "var(--smtc-ctrl-badge-lg-text-padding- // @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)"; +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)"; @@ -872,7 +893,7 @@ export const ctrlBadgeSmIconSize = "var(--smtc-ctrl-badge-sm-icon-size)"; export const ctrlBadgeSmIconSizeRaw = "--smtc-ctrl-badge-sm-icon-size"; // @public (undocumented) -export const ctrlBadgeSmPadding = "var(--smtc-ctrl-badge-sm-padding)"; +export const ctrlBadgeSmPadding = "var(--smtc-ctrl-badge-sm-padding, var(--spacingHorizontalXXS))"; // @public (undocumented) export const ctrlBadgeSmPaddingRaw = "--smtc-ctrl-badge-sm-padding"; @@ -895,6 +916,60 @@ export const ctrlBadgeSmTextPaddingTop = "var(--smtc-ctrl-badge-sm-text-padding- // @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))"; @@ -907,6 +982,12 @@ 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)"; @@ -4603,19 +4684,19 @@ export const sizeCtrlSmIcon = "var(--smtc-size-ctrl-sm-icon, 20px)"; export const sizeCtrlSmIconRaw = "--smtc-size-ctrl-sm-icon"; // @public (undocumented) -export const statusAwayForeground = "var(--smtc-status-away-foreground)"; +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))"; +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))"; +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"; @@ -4627,19 +4708,19 @@ export const statusBrandStroke = "var(--smtc-status-brand-stroke, var(--smtc-bac export const statusBrandStrokeRaw = "--smtc-status-brand-stroke"; // @public (undocumented) -export const statusBrandTintBackground = "var(--smtc-status-brand-tint-background)"; +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))"; +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)"; +export const statusBrandTintStroke = "var(--smtc-status-brand-tint-stroke, var(--colorBrandStroke2))"; // @public (undocumented) export const statusBrandTintStrokeRaw = "--smtc-status-brand-tint-stroke"; @@ -4651,13 +4732,13 @@ export const statusDangerBackground = "var(--smtc-status-danger-background, var( export const statusDangerBackgroundRaw = "--smtc-status-danger-background"; // @public (undocumented) -export const statusDangerForeground = "var(--smtc-status-danger-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; +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))"; +export const statusDangerStroke = "var(--smtc-status-danger-stroke, var(--smtc-status-danger-background, var(--colorPaletteRedBorder2)))"; // @public (undocumented) export const statusDangerStrokeRaw = "--smtc-status-danger-stroke"; @@ -4681,19 +4762,19 @@ export const statusDangerTintStroke = "var(--smtc-status-danger-tint-stroke, var export const statusDangerTintStrokeRaw = "--smtc-status-danger-tint-stroke"; // @public (undocumented) -export const statusImportantBackground = "var(--smtc-status-important-background)"; +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))"; +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))"; +export const statusImportantStroke = "var(--smtc-status-important-stroke, var(--smtc-status-important-background, var(--colorNeutralStrokeAccessible)))"; // @public (undocumented) export const statusImportantStrokeRaw = "--smtc-status-important-stroke"; @@ -4705,43 +4786,43 @@ export const statusImportantTintBackground = "var(--smtc-status-important-tint-b export const statusImportantTintBackgroundRaw = "--smtc-status-important-tint-background"; // @public (undocumented) -export const statusImportantTintForeground = "var(--smtc-status-important-tint-foreground)"; +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)"; +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)"; +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))"; +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))"; +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)"; +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)"; +export const statusInformativeTintForeground = "var(--smtc-status-informative-tint-foreground, var(--colorNeutralForeground3))"; // @public (undocumented) export const statusInformativeTintForegroundRaw = "--smtc-status-informative-tint-foreground"; @@ -4789,7 +4870,7 @@ export const statusNeutralTintStroke = "var(--smtc-status-neutral-tint-stroke)"; export const statusNeutralTintStrokeRaw = "--smtc-status-neutral-tint-stroke"; // @public (undocumented) -export const statusOofForeground = "var(--smtc-status-oof-foreground)"; +export const statusOofForeground = "var(--smtc-status-oof-foreground, var(--colorPaletteBerryForeground3))"; // @public (undocumented) export const statusOofForegroundRaw = "--smtc-status-oof-foreground"; @@ -4801,13 +4882,13 @@ export const statusSuccessBackground = "var(--smtc-status-success-background, va export const statusSuccessBackgroundRaw = "--smtc-status-success-background"; // @public (undocumented) -export const statusSuccessForeground = "var(--smtc-status-success-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; +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))"; +export const statusSuccessStroke = "var(--smtc-status-success-stroke, var(--smtc-status-success-background, var(--colorPaletteGreenBorder2)))"; // @public (undocumented) export const statusSuccessStrokeRaw = "--smtc-status-success-stroke"; @@ -4837,7 +4918,7 @@ export const statusWarningBackground = "var(--smtc-status-warning-background, va export const statusWarningBackgroundRaw = "--smtc-status-warning-background"; // @public (undocumented) -export const statusWarningForeground = "var(--smtc-status-warning-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; +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"; @@ -5491,13 +5572,13 @@ export const textRampItemHeaderLineHeight = "var(--smtc-text-ramp-item-header-li 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))"; +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))"; +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"; @@ -5527,13 +5608,13 @@ export const textRampLgItemHeaderLineHeight = "var(--smtc-text-ramp-lg-item-head 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))"; +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))"; +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"; @@ -5671,13 +5752,13 @@ export const textRampSmItemHeaderLineHeight = "var(--smtc-text-ramp-sm-item-head 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))"; +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))"; +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"; diff --git a/packages/semantic-tokens/src/components/badge/tokens.ts b/packages/semantic-tokens/src/components/badge/tokens.ts index ad02e02f05691..f41ed94e29ca1 100644 --- a/packages/semantic-tokens/src/components/badge/tokens.ts +++ b/packages/semantic-tokens/src/components/badge/tokens.ts @@ -1,5 +1,6 @@ // 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, @@ -33,15 +34,15 @@ export const ctrlBadgeLgTextPaddingBottom = `var(${ctrlBadgeLgTextPaddingBottomR export const ctrlBadgeIconTheme = `var(${ctrlBadgeIconThemeRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; export const ctrlBadgeBeaconSize = `var(${ctrlBadgeBeaconSizeRaw})`; export const ctrlBadgeSize = `var(${ctrlBadgeSizeRaw})`; -export const ctrlBadgeCorner = `var(${ctrlBadgeCornerRaw})`; +export const ctrlBadgeCorner = `var(${ctrlBadgeCornerRaw}, ${borderRadiusMedium})`; export const ctrlBadgeGap = `var(${ctrlBadgeGapRaw})`; export const ctrlBadgeIconSize = `var(${ctrlBadgeIconSizeRaw})`; -export const ctrlBadgePadding = `var(${ctrlBadgePaddingRaw})`; +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})`; +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})`; +export const ctrlBadgeLgPadding = `var(${ctrlBadgeLgPaddingRaw}, ${spacingHorizontalXS})`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index af103f8aa0790..cf14e5ef5a2f3 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -53,6 +53,8 @@ import { colorNeutralForegroundDisabled, colorNeutralForeground2, colorNeutralForegroundOnBrand, + colorBrandBackground2, + colorBrandStroke2, colorPaletteRedBackground3, colorStatusDangerBackground1, colorStatusDangerBorder1, @@ -66,6 +68,12 @@ import { colorStatusSuccessBorder1, colorStatusSuccessForeground1, colorNeutralBackground3, + colorTransparentStroke, + colorNeutralBackground5, + colorNeutralForeground3, + colorNeutralBackground4, + colorPaletteMarigoldBackground3, + colorPaletteBerryForeground3, colorTransparentBackground, shadow64, } from '../legacy/tokens'; @@ -422,8 +430,8 @@ 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})`; -export const statusBrandTintStroke = `var(${statusBrandTintStrokeRaw})`; +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})`; @@ -436,16 +444,16 @@ export const statusSuccessBackground = `var(${statusSuccessBackgroundRaw}, ${col export const statusSuccessTintBackground = `var(${statusSuccessTintBackgroundRaw}, ${colorStatusSuccessBackground1})`; export const statusSuccessTintStroke = `var(${statusSuccessTintStrokeRaw}, ${colorStatusSuccessBorder1})`; export const statusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorStatusSuccessForeground1})`; -export const statusImportantBackground = `var(${statusImportantBackgroundRaw})`; +export const statusImportantBackground = `var(${statusImportantBackgroundRaw}, ${colorNeutralForeground1})`; export const statusImportantTintBackground = `var(${statusImportantTintBackgroundRaw}, ${colorNeutralBackground3})`; -export const statusImportantTintStroke = `var(${statusImportantTintStrokeRaw})`; -export const statusImportantTintForeground = `var(${statusImportantTintForegroundRaw})`; -export const statusInformativeBackground = `var(${statusInformativeBackgroundRaw})`; -export const statusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw})`; +export const statusImportantTintStroke = `var(${statusImportantTintStrokeRaw}, ${colorTransparentStroke})`; +export const statusImportantTintForeground = `var(${statusImportantTintForegroundRaw}, ${colorNeutralForeground1})`; +export const statusInformativeBackground = `var(${statusInformativeBackgroundRaw}, ${colorNeutralBackground5})`; +export const statusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw}, ${colorNeutralForeground3})`; export const statusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw}, ${colorNeutralStroke1})`; -export const statusInformativeTintBackground = `var(${statusInformativeTintBackgroundRaw})`; -export const statusAwayForeground = `var(${statusAwayForegroundRaw})`; -export const statusOofForeground = `var(${statusOofForegroundRaw})`; +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})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index e665ba8695096..0424bef51c3e9 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -1,3 +1,5 @@ +import { _ctrlBadgeStatusSuccessTintForeground } from './legacyVariant/tokens'; + export type LegacyFluentVariantValue = | { originalToken: string; @@ -81,6 +83,114 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { 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', + }, _ctrlButtonGapInsideDefault: { f2Token: 'spacingHorizontalSNudge', originalToken: 'gapInsideCtrlDefault', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 4cfe3ccf36f64..69831da9f4b9b 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -52,6 +52,10 @@ export const fluentOverrides: FluentOverrides = { 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' }, @@ -223,17 +227,39 @@ export const fluentOverrides: FluentOverrides = { 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: 'colorNeutralForeground3' }, 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' }, @@ -298,8 +324,12 @@ export const fluentOverrides: FluentOverrides = { 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 textRampReadingBodyFontSize: { f2Token: 'fontSizeBase300' }, textRampReadingBodyLineHeight: { f2Token: 'lineHeightBase300' }, @@ -307,6 +337,8 @@ export const fluentOverrides: FluentOverrides = { textRampSectionHeaderLineHeight: { f2Token: 'lineHeightBase500' }, textRampSmItemBodyFontSize: { f2Token: 'fontSizeBase200' }, textRampSmItemBodyLineHeight: { f2Token: 'lineHeightBase200' }, + textRampSmLegalFontSize: { f2Token: 'fontSizeBase100' }, + textRampSmLegalLineHeight: { f2Token: 'lineHeightBase100' }, textStyleDefaultHeaderFontFamily: { f2Token: 'fontFamilyBase' }, textStyleDefaultHeaderWeight: { f2Token: 'fontWeightSemibold' }, textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 7147951e1a7a1..cca8f009ea94d 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1799,6 +1799,33 @@ export { _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, _ctrlButtonGapInsideDefault, _ctrlCheckboxBorderColorChecked, _ctrlCheckboxBorderColorCheckedHover, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index b9bd9e6ecb18b..1e6712199c719 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -129,6 +129,16 @@ export const colorNeutralForeground3 = 'var(--colorNeutralForeground3)'; * @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 @@ -319,11 +329,6 @@ export const spacingVerticalXXS = 'var(--spacingVerticalXXS)'; * @public */ export const spacingHorizontalSNudge = 'var(--spacingHorizontalSNudge)'; -/** - * 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#spacingHorizontalM | `spacingHorizontalM`} design token. * @public @@ -339,6 +344,21 @@ export const spacingHorizontalNone = 'var(--spacingHorizontalNone)'; * @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 @@ -364,11 +384,31 @@ export const colorStatusDangerBorder1 = 'var(--colorStatusDangerBorder1)'; * @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 @@ -389,6 +429,11 @@ export const colorStatusSuccessBorder1 = 'var(--colorStatusSuccessBorder1)'; * @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 @@ -549,6 +594,76 @@ export const strokeWidthThickest = 'var(--strokeWidthThickest)'; * @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 @@ -614,11 +729,6 @@ export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)'; * @public */ export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)'; -/** - * 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#colorTransparentBackgroundHover | `colorTransparentBackgroundHover`} design token. * @public diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index d5974f2f1f79b..7f839b1aebc55 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -4,6 +4,7 @@ import { ctrlAvatarCornerGroupRaw, ctrlAvatarPresenceBadgeStrokeWidthRaw, } from '../components/avatar/variables'; +import { ctrlBadgeCornerRaw, ctrlBadgeLgPaddingRaw } from '../components/badge/variables'; import { ctrlChoiceBaseBackgroundDisabledRaw, ctrlChoiceBaseBackgroundHoverRaw, @@ -26,6 +27,22 @@ import { foregroundCtrlNeutralPrimaryRestRaw, paddingCtrlTextTopRaw, cornerCtrlRestRaw, + paddingCtrlTextSideRaw, + statusSuccessTintForegroundRaw, + foregroundCtrlBrandRestRaw, + statusDangerTintForegroundRaw, + statusDangerTintBackgroundRaw, + statusDangerTintStrokeRaw, + statusImportantTintBackgroundRaw, + statusImportantTintForegroundRaw, + statusInformativeTintStrokeRaw, + statusSuccessTintBackgroundRaw, + statusSuccessTintStrokeRaw, + statusWarningBackgroundRaw, + statusWarningTintBackgroundRaw, + statusWarningTintForegroundRaw, + statusWarningTintStrokeRaw, + textStyleDefaultRegularWeightRaw, gapInsideCtrlDefaultRaw, backgroundCtrlBrandHoverRaw, backgroundCtrlBrandPressedRaw, @@ -34,15 +51,12 @@ import { foregroundCtrlNeutralSecondaryRestRaw, backgroundCtrlSubtleHoverRaw, backgroundCtrlSubtlePressedRaw, - textStyleDefaultRegularWeightRaw, sizeCtrlDefaultRaw, paddingCtrlHorizontalDefaultRaw, - paddingCtrlTextSideRaw, textGlobalBody3FontSizeRaw, cornerFlyoutRestRaw, shadowFlyoutRaw, paddingContentAlignDefaultRaw, - statusDangerTintForegroundRaw, gapBetweenCtrlDefaultRaw, paddingContentAlignOutdentIconOnSubtleRaw, textGlobalBody2LineHeightRaw, @@ -53,7 +67,6 @@ import { textGlobalBody3LineHeightRaw, foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, - foregroundCtrlBrandRestRaw, } from '../control/variables'; import { colorTransparentBackground, @@ -67,10 +80,31 @@ import { 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, - colorNeutralForeground3, colorNeutralForeground2, colorCompoundBrandBackgroundPressed, colorCompoundBrandStroke, @@ -81,15 +115,12 @@ import { colorCompoundBrandForeground1Pressed, colorTransparentStrokeInteractive, colorNeutralBackground3, - colorNeutralBackground1, colorNeutralForeground4, - fontWeightSemibold, spacingVerticalSNudge, fontSizeBase200, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, shadow16, - colorTransparentStroke, spacingVerticalM, colorStatusDangerForeground1, spacingHorizontalM, @@ -107,7 +138,6 @@ import { colorNeutralForeground2Hover, colorNeutralForeground2Pressed, spacingHorizontalMNudge, - spacingHorizontalXXS, spacingVerticalXXS, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, @@ -128,6 +158,7 @@ import { foregroundCtrlOnTransparentPressedRaw, foregroundCtrlOnTransparentRestRaw, paddingCtrlTextBottomRaw, + statusBrandTintForegroundRaw, strokeCtrlOnActiveBrandHoverRaw, foregroundContentNeutralPrimaryRaw, strokeCtrlOnActiveBrandPressedRaw, @@ -277,6 +308,195 @@ export const _ctrlAvatarPresenceBadgeStrokeWidthLg = `var(${ctrlAvatarPresenceBa * 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 gapInsideCtrlDefault to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index bc03886629bf3..c3127444097cc 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -89,6 +89,8 @@ import { lineHeightBase400, fontSizeBase200, lineHeightBase200, + fontSizeBase100, + lineHeightBase100, fontSizeBase400, fontWeightSemibold, spacingVerticalXXS, @@ -127,6 +129,11 @@ import { colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedPressed, colorNeutralBackground1, + colorBrandBackground, + colorPaletteRedBorder2, + colorNeutralForeground1Static, + colorPaletteGreenBorder2, + colorNeutralStroke2, } from '../legacy/tokens'; import { strokeCardOnPrimaryRestRaw, @@ -439,8 +446,8 @@ export const textRampItemBodyFontSize = `var(${textRampItemBodyFontSizeRaw}, var export const textRampItemBodyLineHeight = `var(${textRampItemBodyLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}, ${lineHeightBase300}))`; export const textRampMetadataFontSize = `var(${textRampMetadataFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}, ${fontSizeBase200}))`; export const textRampMetadataLineHeight = `var(${textRampMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; -export const textRampLegalFontSize = `var(${textRampLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}))`; -export const textRampLegalLineHeight = `var(${textRampLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}))`; +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}))`; @@ -455,8 +462,8 @@ export const textRampSmItemBodyFontSize = `var(${textRampSmItemBodyFontSizeRaw}, 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}))`; -export const textRampSmLegalLineHeight = `var(${textRampSmLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}))`; +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}))`; @@ -471,8 +478,8 @@ export const textRampLgItemBodyFontSize = `var(${textRampLgItemBodyFontSizeRaw}, 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}))`; -export const textRampLgLegalLineHeight = `var(${textRampLgLegalLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; +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}))`; @@ -618,20 +625,20 @@ export const iconThemeCtrlSubtlePressed = `var(${iconThemeCtrlSubtlePressedRaw}, 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}))`; +export const statusBrandBackground = `var(${statusBrandBackgroundRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorBrandBackground}))`; export const statusBrandStroke = `var(${statusBrandStrokeRaw}, var(${backgroundCtrlBrandRestRaw}))`; -export const statusBrandForeground = `var(${statusBrandForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const statusBrandTintForeground = `var(${statusBrandTintForegroundRaw}, var(${foregroundCtrlBrandRestRaw}))`; -export const statusDangerStroke = `var(${statusDangerStrokeRaw}, var(${statusDangerBackgroundRaw}))`; -export const statusDangerForeground = `var(${statusDangerForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +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}))`; -export const statusSuccessStroke = `var(${statusSuccessStrokeRaw}, var(${statusSuccessBackgroundRaw}))`; -export const statusSuccessForeground = `var(${statusSuccessForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const statusImportantStroke = `var(${statusImportantStrokeRaw}, var(${statusImportantBackgroundRaw}))`; -export const statusImportantForeground = `var(${statusImportantForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const statusInformativeStroke = `var(${statusInformativeStrokeRaw}, var(${statusInformativeBackgroundRaw}))`; -export const statusInformativeForeground = `var(${statusInformativeForegroundRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +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}))`; From 562796c529a12049e09e864807a58bb123e9a474 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Tue, 15 Jul 2025 18:01:15 -0400 Subject: [PATCH 43/66] add breadcrumb to semantic style hooks (#34837) --- .../etc/semantic-style-hooks-preview.api.md | 16 ++ .../library/package.json | 1 + .../src/component-styles/Breadcrumb/index.ts | 4 + ...seSemanticBreadcrumbButtonStyles.styles.ts | 156 ++++++++++++++++++ ...eSemanticBreadcrumbDividerStyles.styles.ts | 46 ++++++ .../useSemanticBreadcrumbItemStyles.styles.ts | 32 ++++ .../useSemanticBreadcrumbStyles.styles.ts | 36 ++++ .../component-styles/semanticStyleHooks.ts | 11 ++ .../library/src/index.ts | 6 + .../etc/semantic-tokens.api.md | 9 + .../src/fluentLegacyVariants.ts | 12 ++ packages/semantic-tokens/src/index.ts | 3 + .../src/legacyVariant/tokens.ts | 25 ++- 13 files changed, 356 insertions(+), 1 deletion(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbDividerStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbItemStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 9b7fbd66d132d..93b1584b5f320 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -7,6 +7,10 @@ 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'; @@ -68,6 +72,18 @@ 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; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 5ccec0400537a..5f7cd17b29ca7 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -27,6 +27,7 @@ "@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", 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 0000000000000..83d868c0f4a3d --- /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 0000000000000..3fa35c74804fb --- /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 0000000000000..5b1eadeb9204f --- /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 0000000000000..1972465bc8201 --- /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 0000000000000..729929dd619bf --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index cd600070458dc..4b30db2d3703c 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -62,6 +62,12 @@ import { useSemanticMenuGroupHeaderStyles } from './Menu'; import { useSemanticRadioStyles } from './Radio'; import { useSemanticPersonaStyles } from './Persona'; import { useSemanticBadgeStyles, useSemanticPresenceBadgeStyles } from './Badge'; +import { + useSemanticBreadcrumbStyles, + useSemanticBreadcrumbButtonStyles, + useSemanticBreadcrumbDividerStyles, + useSemanticBreadcrumbItemStyles, +} from './Breadcrumb'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -141,4 +147,9 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { usePersonaStyles_unstable: useSemanticPersonaStyles, // Checkbox styles useCheckboxStyles_unstable: useSemanticCheckboxStyles, + // Breadcrumb styles + useBreadcrumbStyles_unstable: useSemanticBreadcrumbStyles, + useBreadcrumbButtonStyles_unstable: useSemanticBreadcrumbButtonStyles, + useBreadcrumbDividerStyles_unstable: useSemanticBreadcrumbDividerStyles, + useBreadcrumbItemStyles_unstable: useSemanticBreadcrumbItemStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index 64350c99c8ac5..5ff086e7f30d1 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -66,3 +66,9 @@ export { 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'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 281c382e537a2..5dfa27c0a93fa 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -994,6 +994,15 @@ 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))"; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 0424bef51c3e9..d2a42c777fe2b 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -191,6 +191,18 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'spacingHorizontalSNudge', originalToken: 'ctrlBadgeLgPadding', }, + _ctrlBreadcrumbSizeDefault: { + originalToken: 'sizeCtrlDefault', + rawValue: '32px', + }, + _ctrlBreadcrumbSizeLgDefault: { + originalToken: 'sizeCtrlLgDefault', + rawValue: '40px', + }, + _ctrlBreadcrumbSizeSmIcon: { + originalToken: 'sizeCtrlSmIcon', + rawValue: '16px', + }, _ctrlButtonGapInsideDefault: { f2Token: 'spacingHorizontalSNudge', originalToken: 'gapInsideCtrlDefault', diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index cca8f009ea94d..f118e1534a81f 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1826,6 +1826,9 @@ export { _ctrlBadgeStatusWarningTintStroke, _ctrlBadgeTextStyleSemiBoldWeight, _ctrlBadgeXLPadding, + _ctrlBreadcrumbSizeDefault, + _ctrlBreadcrumbSizeLgDefault, + _ctrlBreadcrumbSizeSmIcon, _ctrlButtonGapInsideDefault, _ctrlCheckboxBorderColorChecked, _ctrlCheckboxBorderColorCheckedHover, diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 7f839b1aebc55..5d3ca589d7b82 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -43,6 +43,9 @@ import { statusWarningTintForegroundRaw, statusWarningTintStrokeRaw, textStyleDefaultRegularWeightRaw, + sizeCtrlDefaultRaw, + sizeCtrlLgDefaultRaw, + sizeCtrlSmIconRaw, gapInsideCtrlDefaultRaw, backgroundCtrlBrandHoverRaw, backgroundCtrlBrandPressedRaw, @@ -51,7 +54,6 @@ import { foregroundCtrlNeutralSecondaryRestRaw, backgroundCtrlSubtleHoverRaw, backgroundCtrlSubtlePressedRaw, - sizeCtrlDefaultRaw, paddingCtrlHorizontalDefaultRaw, textGlobalBody3FontSizeRaw, cornerFlyoutRestRaw, @@ -497,6 +499,27 @@ export const _ctrlBadgeTextStyleSemiBoldWeight = `var(${textStyleDefaultRegularW * 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. From 030ab229edd420f0a6536b2f9b2615de12eb473a Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Tue, 15 Jul 2025 15:42:11 -0700 Subject: [PATCH 44/66] Test: Ensure legacy fallback overrides originalToken exists (#34843) --- .../utils/fluentLegacyVariants.test.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 packages/semantic-tokens/utils/fluentLegacyVariants.test.ts diff --git a/packages/semantic-tokens/utils/fluentLegacyVariants.test.ts b/packages/semantic-tokens/utils/fluentLegacyVariants.test.ts new file mode 100644 index 0000000000000..333461f589973 --- /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(); + }); + }); +}); From ef32e8d112b69a22c4455c01e81d20c92b65d39f Mon Sep 17 00:00:00 2001 From: terynk <86626692+terynk@users.noreply.github.com> Date: Tue, 15 Jul 2025 18:22:47 -0700 Subject: [PATCH 45/66] Field: Update to use Semantic Tokens (#34804) Co-authored-by: terynkum Co-authored-by: Mitch-At-Work --- .../etc/semantic-style-hooks-preview.api.md | 4 + .../library/package.json | 1 + .../src/component-styles/Field/index.ts | 1 + .../Field/useSemanticFieldStyles.styles.ts | 179 ++++++++++++++++++ .../component-styles/semanticStyleHooks.ts | 3 + .../library/src/index.ts | 1 + .../etc/semantic-tokens.api.md | 54 +++++- .../semantic-tokens/src/control/tokens.ts | 3 +- .../src/fluentLegacyVariants.ts | 64 +++++++ .../semantic-tokens/src/fluentOverrides.ts | 3 + packages/semantic-tokens/src/index.ts | 16 ++ packages/semantic-tokens/src/legacy/tokens.ts | 19 +- .../src/legacyVariant/tokens.ts | 128 ++++++++++++- .../semantic-tokens/src/optional/tokens.ts | 5 +- 14 files changed, 463 insertions(+), 18 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/useSemanticFieldStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 93b1584b5f320..0e24b38bc112a 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -23,6 +23,7 @@ import { DividerState } from '@fluentui/react-divider'; import type { DrawerBodyState } from '@fluentui/react-drawer'; import { DrawerFooterState } from '@fluentui/react-drawer'; import { DrawerHeaderState } from '@fluentui/react-drawer'; +import { FieldState } from '@fluentui/react-field'; import { FlatTreeState } from '@fluentui/react-tree'; import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider'; import { ImageState } from '@fluentui/react-image'; @@ -120,6 +121,9 @@ export const useSemanticDrawerFooterStyles: (_state: unknown) => DrawerFooterSta // @public export const useSemanticDrawerHeaderStyles: (_state: unknown) => DrawerHeaderState; +// @public +export const useSemanticFieldStyles: (_state: unknown) => FieldState; + // @public (undocumented) export const useSemanticFlatTreeStyles: (_state: unknown) => FlatTreeState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 5f7cd17b29ca7..1249d332ab8ef 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -33,6 +33,7 @@ "@fluentui/react-dialog": "^9.12.8", "@fluentui/react-divider": "^9.2.86", "@fluentui/react-drawer": "^9.7.8", + "@fluentui/react-field": "^9.2.6", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-image": "^9.1.84", "@fluentui/react-jsx-runtime": "^9.0.54", diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/index.ts new file mode 100644 index 0000000000000..67b452f56ac58 --- /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 0000000000000..ec57da32ecfe3 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/useSemanticFieldStyles.styles.ts @@ -0,0 +1,179 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { type FieldState, fieldClassNames } from '@fluentui/react-field'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +// Size of the icon in the validation message +const iconSize = '12px'; + +/** + * Styles for the root slot + */ +const useRootStyles = makeStyles({ + base: { + display: 'grid', + }, + + // In horizontal layout, the field is a grid with the label taking up the entire first column. + // The last row is slack space in case the label is taller than the rest of the content. + horizontal: { + gridTemplateColumns: '33% 1fr', + gridTemplateRows: 'auto auto auto 1fr', + }, + + // In horizontal layout without a label, replace the label's column with padding. + // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned. + horizontalNoLabel: { + paddingLeft: '33%', + gridTemplateColumns: '1fr', + }, +}); + +const useLabelStyles = makeStyles({ + vertical: { + paddingTop: semanticTokens._ctrlFieldPaddingCtrlTextTop, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlTextBottom, + marginBottom: semanticTokens.gapBetweenContentXSmall, + }, + + verticalLarge: { + paddingTop: semanticTokens._ctrlFieldPaddingCtrlLgTextTop, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlLgTextBottom, + marginBottom: semanticTokens._ctrlFieldGapBetweenContentXSmall, + }, + + horizontal: { + paddingTop: semanticTokens._ctrlFieldPaddingCtrlTextTopHorizontal, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlTextBottomHorizontal, + marginRight: semanticTokens._ctrlFieldPaddingCtrlTextSide, + gridRowStart: '1', + gridRowEnd: '-1', + }, + + horizontalSmall: { + paddingTop: semanticTokens._ctrlFieldPaddingCtrlSmTextTop, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlSmTextBottom, + }, + + horizontalLarge: { + // To align the label text with the Input text, it should be centered within the 40px height of the Input. + // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token. + paddingTop: semanticTokens._ctrlFieldPaddingCtrlLgTextTopHorizontal, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlLgTextBottomHorizontal, + }, +}); + +const useSecondaryTextBaseClassName = makeResetStyles({ + marginTop: semanticTokens.gapBetweenContentXSmall, + color: semanticTokens._ctrlFieldForegroundCtrlNeutralSecondaryRest, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontSize: semanticTokens.textRampMetadataFontSize, + lineHeight: semanticTokens.textRampMetadataLineHeight, +}); + +const useSecondaryTextStyles = makeStyles({ + error: { + color: semanticTokens._ctrlFieldStatusDangerTintForeground, + }, + + withIcon: { + // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon. + paddingLeft: `calc(${iconSize} + ${semanticTokens.gapBetweenTextSmall})`, + }, +}); + +const useValidationMessageIconBaseClassName = makeResetStyles({ + display: 'inline-block', + fontSize: iconSize, + // Negative left margin puts the icon in the gutter of the validation message div's withIcon style. + marginLeft: `calc(-${iconSize} - ${semanticTokens.gapBetweenTextSmall})`, + marginRight: semanticTokens.gapBetweenTextSmall, + // Line height of 0 prevents the verticalAlign from affecting the line height of the text. + lineHeight: '0', + // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding). + verticalAlign: '-1px', +}); + +const useValidationMessageIconStyles = makeStyles({ + error: { + color: semanticTokens._ctrlFieldStatusDangerTintForeground, + }, + warning: { + color: semanticTokens._ctrlFieldStatusWarningTintForeground, + }, + success: { + color: semanticTokens._ctrlFieldStatusSuccessTintForeground, + }, +}); + +/** + * Apply styling to the Field slots based on the state + */ +export const useSemanticFieldStyles = (_state: unknown): FieldState => { + 'use no memo'; + + const state = _state as FieldState; + const { validationState, size } = state; + const horizontal = state.orientation === 'horizontal'; + + const rootStyles = useRootStyles(); + state.root.className = mergeClasses( + state.root.className, + fieldClassNames.root, + rootStyles.base, + horizontal && rootStyles.horizontal, + horizontal && !state.label && rootStyles.horizontalNoLabel, + getSlotClassNameProp_unstable(state.root), + ); + + const labelStyles = useLabelStyles(); + if (state.label) { + state.label.className = mergeClasses( + state.label.className, + fieldClassNames.label, + horizontal && labelStyles.horizontal, + horizontal && size === 'small' && labelStyles.horizontalSmall, + horizontal && size === 'large' && labelStyles.horizontalLarge, + !horizontal && labelStyles.vertical, + !horizontal && size === 'large' && labelStyles.verticalLarge, + getSlotClassNameProp_unstable(state.label), + ); + } + + const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName(); + const validationMessageIconStyles = useValidationMessageIconStyles(); + if (state.validationMessageIcon) { + state.validationMessageIcon.className = mergeClasses( + state.validationMessageIcon.className, + fieldClassNames.validationMessageIcon, + validationMessageIconBaseClassName, + validationState !== 'none' && validationMessageIconStyles[validationState], + getSlotClassNameProp_unstable(state.validationMessageIcon), + ); + } + + const secondaryTextBaseClassName = useSecondaryTextBaseClassName(); + const secondaryTextStyles = useSecondaryTextStyles(); + if (state.validationMessage) { + state.validationMessage.className = mergeClasses( + state.validationMessage.className, + fieldClassNames.validationMessage, + secondaryTextBaseClassName, + validationState === 'error' && secondaryTextStyles.error, + !!state.validationMessageIcon && secondaryTextStyles.withIcon, + getSlotClassNameProp_unstable(state.validationMessage), + ); + } + + if (state.hint) { + state.hint.className = mergeClasses( + state.hint.className, + fieldClassNames.hint, + secondaryTextBaseClassName, + getSlotClassNameProp_unstable(state.hint), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 4b30db2d3703c..0befde24f0bdb 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -18,6 +18,7 @@ import { useSemanticDrawerHeaderStyles, useSemanticOverlayDrawerSurfaceStyles, } from './Drawer'; +import { useSemanticFieldStyles } from './Field'; import { useSemanticLabelStyles } from './Label'; import { useSemanticLinkStyles } from './Link'; import { useSemanticProgressBarStyles } from './ProgressBar/useSemanticProgressBarStyles.styles'; @@ -91,6 +92,8 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useDrawerFooterStyles_unstable: useSemanticDrawerFooterStyles, useDrawerHeaderStyles_unstable: useSemanticDrawerHeaderStyles, useOverlayDrawerSurfaceStyles_unstable: useSemanticOverlayDrawerSurfaceStyles, + //Field styles + useFieldStyles_unstable: useSemanticFieldStyles, // Label styles useLabelStyles_unstable: useSemanticLabelStyles, // Link styles diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index 5ff086e7f30d1..db38c7f529814 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -17,6 +17,7 @@ export { useSemanticDrawerHeaderStyles, useSemanticOverlayDrawerSurfaceStyles, } from './component-styles/Drawer'; +export { useSemanticFieldStyles } from './component-styles/Field'; export { useSemanticLabelStyles } from './component-styles/Label'; export { useSemanticLinkStyles } from './component-styles/Link'; export { useSemanticProgressBarStyles } from './component-styles/ProgressBar/useSemanticProgressBarStyles.styles'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 5dfa27c0a93fa..7505e6ecf5b83 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -1711,6 +1711,54 @@ export const ctrlFabShadowRest = "var(--smtc-ctrl-fab-shadow-rest)"; // @public (undocumented) export const ctrlFabShadowRestRaw = "--smtc-ctrl-fab-shadow-rest"; +// @public +export const _ctrlFieldForegroundCtrlNeutralSecondaryRest = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3))"; + +// @public +export const _ctrlFieldGapBetweenContentXSmall = "var(--smtc-gap-between-content-x-small, var(--spacingVerticalXS))"; + +// @public +export const _ctrlFieldPaddingCtrlLgTextBottom = "var(--smtc-padding-ctrl-lg-text-bottom, var(--smtc-padding-ctrl-lg-text-top, 1px))"; + +// @public +export const _ctrlFieldPaddingCtrlLgTextBottomHorizontal = "var(--smtc-padding-ctrl-lg-text-bottom, var(--smtc-padding-ctrl-lg-text-top, 9px))"; + +// @public +export const _ctrlFieldPaddingCtrlLgTextTop = "var(--smtc-padding-ctrl-lg-text-top, 1px)"; + +// @public +export const _ctrlFieldPaddingCtrlLgTextTopHorizontal = "var(--smtc-padding-ctrl-lg-text-top, 9px)"; + +// @public +export const _ctrlFieldPaddingCtrlSmTextBottom = "var(--smtc-padding-ctrl-sm-text-bottom, var(--smtc-padding-ctrl-sm-text-top, var(--spacingVerticalXS)))"; + +// @public +export const _ctrlFieldPaddingCtrlSmTextTop = "var(--smtc-padding-ctrl-sm-text-top, var(--spacingVerticalXS))"; + +// @public +export const _ctrlFieldPaddingCtrlTextBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, var(--spacingVerticalXXS)))"; + +// @public +export const _ctrlFieldPaddingCtrlTextBottomHorizontal = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, var(--spacingVerticalSNudge)))"; + +// @public +export const _ctrlFieldPaddingCtrlTextSide = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalM))"; + +// @public +export const _ctrlFieldPaddingCtrlTextTop = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalXXS))"; + +// @public +export const _ctrlFieldPaddingCtrlTextTopHorizontal = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalSNudge))"; + +// @public +export const _ctrlFieldStatusDangerTintForeground = "var(--smtc-status-danger-tint-foreground, var(--colorPaletteRedForeground1))"; + +// @public +export const _ctrlFieldStatusSuccessTintForeground = "var(--smtc-status-success-tint-foreground, var(--colorPaletteGreenForeground1))"; + +// @public +export const _ctrlFieldStatusWarningTintForeground = "var(--smtc-status-warning-tint-foreground, var(--colorPaletteDarkOrangeForeground1))"; + // @public (undocumented) export const ctrlFocusInnerStroke = "var(--smtc-ctrl-focus-inner-stroke, var(--colorStrokeFocus2))"; @@ -3545,7 +3593,7 @@ export const gapBetweenContentXLarge = "var(--smtc-gap-between-content-x-large)" export const gapBetweenContentXLargeRaw = "--smtc-gap-between-content-x-large"; // @public (undocumented) -export const gapBetweenContentXSmall = "var(--smtc-gap-between-content-x-small)"; +export const gapBetweenContentXSmall = "var(--smtc-gap-between-content-x-small, var(--spacingVerticalXXS))"; // @public (undocumented) export const gapBetweenContentXSmallRaw = "--smtc-gap-between-content-x-small"; @@ -3611,7 +3659,7 @@ export const gapBetweenTextLarge = "var(--smtc-gap-between-text-large, var(--smt export const gapBetweenTextLargeRaw = "--smtc-gap-between-text-large"; // @public (undocumented) -export const gapBetweenTextSmall = "var(--smtc-gap-between-text-small, var(--smtc-gap-between-content-xx-small))"; +export const gapBetweenTextSmall = "var(--smtc-gap-between-text-small, var(--smtc-gap-between-content-xx-small, var(--spacingHorizontalXS)))"; // @public (undocumented) export const gapBetweenTextSmallRaw = "--smtc-gap-between-text-small"; @@ -5695,7 +5743,7 @@ export const textRampMetadataFontSize = "var(--smtc-text-ramp-metadata-font-size export const textRampMetadataFontSizeRaw = "--smtc-text-ramp-metadata-font-size"; // @public (undocumented) -export const textRampMetadataLineHeight = "var(--smtc-text-ramp-metadata-line-height, var(--smtc-text-global-caption1-line-height))"; +export const textRampMetadataLineHeight = "var(--smtc-text-ramp-metadata-line-height, var(--smtc-text-global-caption1-line-height, var(--lineHeightBase200)))"; // @public (undocumented) export const textRampMetadataLineHeightRaw = "--smtc-text-ramp-metadata-line-height"; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index cf14e5ef5a2f3..e8e04aec7513f 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -29,6 +29,7 @@ import { spacingHorizontalXXL, spacingHorizontalS, spacingHorizontalL, + spacingVerticalXXS, spacingHorizontalXS, spacingHorizontalSNudge, borderRadiusCircular, @@ -343,7 +344,7 @@ export const paddingCtrlLgTextTop = `var(${paddingCtrlLgTextTopRaw})`; export const paddingCtrlLgToNestedControl = `var(${paddingCtrlLgToNestedControlRaw})`; export const gapBetweenContentNone = `var(${gapBetweenContentNoneRaw})`; export const gapBetweenContentXxSmall = `var(${gapBetweenContentXxSmallRaw})`; -export const gapBetweenContentXSmall = `var(${gapBetweenContentXSmallRaw})`; +export const gapBetweenContentXSmall = `var(${gapBetweenContentXSmallRaw}, ${spacingVerticalXXS})`; export const gapBetweenContentSmall = `var(${gapBetweenContentSmallRaw}, 8px)`; export const gapBetweenCtrlDefault = `var(${gapBetweenCtrlDefaultRaw}, 8px)`; export const gapBetweenContentMedium = `var(${gapBetweenContentMediumRaw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index d2a42c777fe2b..fd0c2d2021d8d 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -259,6 +259,70 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorNeutralForeground3', originalToken: 'foregroundCtrlHintDefault', }, + _ctrlFieldForegroundCtrlNeutralSecondaryRest: { + f2Token: 'colorNeutralForeground3', + originalToken: 'foregroundCtrlNeutralSecondaryRest', + }, + _ctrlFieldGapBetweenContentXSmall: { + f2Token: 'spacingVerticalXS', + originalToken: 'gapBetweenContentXSmall', + }, + _ctrlFieldPaddingCtrlLgTextBottom: { + originalToken: 'paddingCtrlLgTextBottom', + rawValue: '1px', + }, + _ctrlFieldPaddingCtrlLgTextBottomHorizontal: { + originalToken: 'paddingCtrlLgTextBottom', + rawValue: '9px', + }, + _ctrlFieldPaddingCtrlLgTextTop: { + originalToken: 'paddingCtrlLgTextTop', + rawValue: '1px', + }, + _ctrlFieldPaddingCtrlLgTextTopHorizontal: { + originalToken: 'paddingCtrlLgTextTop', + rawValue: '9px', + }, + _ctrlFieldPaddingCtrlSmTextBottom: { + f2Token: 'spacingVerticalXS', + originalToken: 'paddingCtrlSmTextBottom', + }, + _ctrlFieldPaddingCtrlSmTextTop: { + f2Token: 'spacingVerticalXS', + originalToken: 'paddingCtrlSmTextTop', + }, + _ctrlFieldPaddingCtrlTextBottom: { + f2Token: 'spacingVerticalXXS', + originalToken: 'paddingCtrlTextBottom', + }, + _ctrlFieldPaddingCtrlTextBottomHorizontal: { + f2Token: 'spacingVerticalSNudge', + originalToken: 'paddingCtrlTextBottom', + }, + _ctrlFieldPaddingCtrlTextSide: { + f2Token: 'spacingHorizontalM', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlFieldPaddingCtrlTextTop: { + f2Token: 'spacingVerticalXXS', + originalToken: 'paddingCtrlTextTop', + }, + _ctrlFieldPaddingCtrlTextTopHorizontal: { + f2Token: 'spacingVerticalSNudge', + originalToken: 'paddingCtrlTextTop', + }, + _ctrlFieldStatusDangerTintForeground: { + f2Token: 'colorPaletteRedForeground1', + originalToken: 'statusDangerTintForeground', + }, + _ctrlFieldStatusSuccessTintForeground: { + f2Token: 'colorPaletteGreenForeground1', + originalToken: 'statusSuccessTintForeground', + }, + _ctrlFieldStatusWarningTintForeground: { + f2Token: 'colorPaletteDarkOrangeForeground1', + originalToken: 'statusWarningTintForeground', + }, _ctrlFocusOuterStrokeInteractive: { f2Token: 'colorTransparentStrokeInteractive', originalToken: 'ctrlFocusOuterStroke', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 69831da9f4b9b..bf490553975ce 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -191,8 +191,10 @@ export const fluentOverrides: FluentOverrides = { foregroundCtrlOnTransparentPressed: { f2Token: 'colorNeutralForeground2BrandPressed' }, foregroundCtrlOnTransparentRest: { f2Token: 'colorNeutralForeground2' }, gapBetweenContentSmall: { rawValue: '8px' }, + gapBetweenContentXSmall: { f2Token: 'spacingVerticalXXS' }, gapBetweenCtrlDefault: { rawValue: '8px' }, gapBetweenListItem: { f2Token: 'spacingVerticalXXS' }, + gapBetweenTextSmall: { f2Token: 'spacingHorizontalXS' }, gapInsideCtrlDefault: { f2Token: 'spacingHorizontalS' }, gapInsideCtrlLgDefault: { f2Token: 'spacingHorizontalSNudge' }, gapInsideCtrlLgToLabel: { f2Token: 'spacingHorizontalS' }, @@ -331,6 +333,7 @@ export const fluentOverrides: FluentOverrides = { textRampLgLegalFontSize: { f2Token: 'fontSizeBase200' }, // React-badge uses the same as medium font size for large textRampLgLegalLineHeight: { f2Token: 'lineHeightBase200' }, // React-badge uses the same as medium line height for large textRampMetadataFontSize: { f2Token: 'fontSizeBase200' }, // should be fontSizeBase100 per Menu design + textRampMetadataLineHeight: { f2Token: 'lineHeightBase200' }, textRampReadingBodyFontSize: { f2Token: 'fontSizeBase300' }, textRampReadingBodyLineHeight: { f2Token: 'lineHeightBase300' }, textRampSectionHeaderFontSize: { f2Token: 'fontSizeBase500' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index f118e1534a81f..ed715f95c9187 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1843,6 +1843,20 @@ export { _ctrlCheckboxIndicatorColorMixedPressed, _ctrlDialogGapBetweenContentMedium, _ctrlDividerForegroundSubtle, + _ctrlFieldForegroundCtrlNeutralSecondaryRest, + _ctrlFieldGapBetweenContentXSmall, + _ctrlFieldPaddingCtrlLgTextBottom, + _ctrlFieldPaddingCtrlLgTextBottomHorizontal, + _ctrlFieldPaddingCtrlLgTextTop, + _ctrlFieldPaddingCtrlLgTextTopHorizontal, + _ctrlFieldPaddingCtrlSmTextBottom, + _ctrlFieldPaddingCtrlSmTextTop, + _ctrlFieldPaddingCtrlTextBottom, + _ctrlFieldPaddingCtrlTextBottomHorizontal, + _ctrlFieldPaddingCtrlTextSide, + _ctrlFieldPaddingCtrlTextTop, + _ctrlFieldPaddingCtrlTextTopHorizontal, + _ctrlFieldStatusDangerTintForeground, _ctrlFocusOuterStrokeInteractive, _ctrlInputBackgroundRestDarker, _ctrlInputBackgroundRestLighter, @@ -1942,5 +1956,7 @@ export { _ctrlTreePaddingTextTop, _nullBackgroundColorHover, _nullBackgroundColorPressed, + _ctrlFieldStatusSuccessTintForeground, + _ctrlFieldStatusWarningTintForeground, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 1e6712199c719..9d17720544bf5 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -675,15 +675,20 @@ export const colorCompoundBrandStrokeHover = 'var(--colorCompoundBrandStrokeHove */ export const colorCompoundBrandStrokePressed = 'var(--colorCompoundBrandStrokePressed)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground4 | `colorNeutralForeground4`} design token. + * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXS | `spacingVerticalXS`} design token. * @public */ -export const colorNeutralForeground4 = 'var(--colorNeutralForeground4)'; +export const spacingVerticalXS = 'var(--spacingVerticalXS)'; /** * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalSNudge | `spacingVerticalSNudge`} design token. * @public */ export const spacingVerticalSNudge = 'var(--spacingVerticalSNudge)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground4 | `colorNeutralForeground4`} design token. + * @public + */ +export const colorNeutralForeground4 = 'var(--colorNeutralForeground4)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Hover | `colorNeutralForeground3Hover`} design token. * @public @@ -714,11 +719,6 @@ export const colorStatusDangerForeground1 = 'var(--colorStatusDangerForeground1) * @public */ export const spacingVerticalMNudge = 'var(--spacingVerticalMNudge)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXS | `spacingVerticalXS`} design token. - * @public - */ -export const spacingVerticalXS = 'var(--spacingVerticalXS)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2Contrast | `colorBrandStroke2Contrast`} design token. * @public @@ -739,3 +739,8 @@ export const colorTransparentBackgroundHover = 'var(--colorTransparentBackground * @public */ export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeForeground1 | `colorPaletteDarkOrangeForeground1`} design token. + * @public + */ +export const colorPaletteDarkOrangeForeground1 = 'var(--colorPaletteDarkOrangeForeground1)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 5d3ca589d7b82..d14f0dc8b24c5 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -50,8 +50,11 @@ import { backgroundCtrlBrandHoverRaw, backgroundCtrlBrandPressedRaw, gapBetweenContentMediumRaw, - backgroundCtrlNeutralRestRaw, foregroundCtrlNeutralSecondaryRestRaw, + gapBetweenContentXSmallRaw, + paddingCtrlLgTextTopRaw, + paddingCtrlSmTextTopRaw, + backgroundCtrlNeutralRestRaw, backgroundCtrlSubtleHoverRaw, backgroundCtrlSubtlePressedRaw, paddingCtrlHorizontalDefaultRaw, @@ -115,22 +118,23 @@ import { colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, + spacingVerticalXS, + spacingVerticalXXS, + spacingVerticalSNudge, + spacingHorizontalM, colorTransparentStrokeInteractive, colorNeutralBackground3, colorNeutralForeground4, - spacingVerticalSNudge, fontSizeBase200, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, shadow16, spacingVerticalM, colorStatusDangerForeground1, - spacingHorizontalM, spacingVerticalS, spacingVerticalMNudge, lineHeightBase300, colorNeutralForegroundDisabled, - spacingVerticalXS, colorBrandStroke2Contrast, colorBrandStroke1, fontSizeBase400, @@ -140,9 +144,9 @@ import { colorNeutralForeground2Hover, colorNeutralForeground2Pressed, spacingHorizontalMNudge, - spacingVerticalXXS, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, + colorPaletteDarkOrangeForeground1, } from '../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, @@ -167,6 +171,8 @@ import { backgroundCtrlActiveBrandRestRaw, backgroundCtrlActiveBrandHoverRaw, backgroundCtrlActiveBrandPressedRaw, + paddingCtrlLgTextBottomRaw, + paddingCtrlSmTextBottomRaw, foregroundCtrlOnSubtleHoverRaw, foregroundCtrlNeutralPrimaryHoverRaw, foregroundCtrlOnSubtlePressedRaw, @@ -618,6 +624,104 @@ export const _ctrlDialogGapBetweenContentMedium = `var(${gapBetweenContentMedium * please use foregroundCtrlHintDefault instead. */ export const _ctrlDividerForegroundSubtle = `var(${foregroundCtrlHintDefaultRaw}, var(${nullColorRaw}, ${colorNeutralForeground3}))`; +/** + * This is a legacy variant for foregroundCtrlNeutralSecondaryRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlNeutralSecondaryRest instead. + */ +export const _ctrlFieldForegroundCtrlNeutralSecondaryRest = `var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground3})`; +/** + * This is a legacy variant for gapBetweenContentXSmall to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapBetweenContentXSmall instead. + */ +export const _ctrlFieldGapBetweenContentXSmall = `var(${gapBetweenContentXSmallRaw}, ${spacingVerticalXS})`; +/** + * This is a legacy variant for paddingCtrlLgTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlLgTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlLgTextBottom = `var(${paddingCtrlLgTextBottomRaw}, var(${paddingCtrlLgTextTopRaw}, 1px))`; +/** + * This is a legacy variant for paddingCtrlLgTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlLgTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlLgTextBottomHorizontal = `var(${paddingCtrlLgTextBottomRaw}, var(${paddingCtrlLgTextTopRaw}, 9px))`; +/** + * This is a legacy variant for paddingCtrlLgTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlLgTextTop instead. + */ +export const _ctrlFieldPaddingCtrlLgTextTop = `var(${paddingCtrlLgTextTopRaw}, 1px)`; +/** + * This is a legacy variant for paddingCtrlLgTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlLgTextTop instead. + */ +export const _ctrlFieldPaddingCtrlLgTextTopHorizontal = `var(${paddingCtrlLgTextTopRaw}, 9px)`; +/** + * This is a legacy variant for paddingCtrlSmTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlSmTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlSmTextBottom = `var(${paddingCtrlSmTextBottomRaw}, var(${paddingCtrlSmTextTopRaw}, ${spacingVerticalXS}))`; +/** + * This is a legacy variant for paddingCtrlSmTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlSmTextTop instead. + */ +export const _ctrlFieldPaddingCtrlSmTextTop = `var(${paddingCtrlSmTextTopRaw}, ${spacingVerticalXS})`; +/** + * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlTextBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, ${spacingVerticalXXS}))`; +/** + * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlTextBottomHorizontal = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, ${spacingVerticalSNudge}))`; +/** + * This is a legacy variant for paddingCtrlTextSide to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextSide instead. + */ +export const _ctrlFieldPaddingCtrlTextSide = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalM})`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlFieldPaddingCtrlTextTop = `var(${paddingCtrlTextTopRaw}, ${spacingVerticalXXS})`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlFieldPaddingCtrlTextTopHorizontal = `var(${paddingCtrlTextTopRaw}, ${spacingVerticalSNudge})`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlFieldStatusDangerTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorPaletteRedForeground1})`; /** * This is a legacy variant for ctrlFocusOuterStroke to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -1311,3 +1415,17 @@ export const _nullBackgroundColorHover = `var(${nullColorRaw}, ${colorTransparen * please use nullColor instead. */ export const _nullBackgroundColorPressed = `var(${nullColorRaw}, ${colorTransparentBackgroundPressed})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlFieldStatusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteGreenForeground1})`; +/** + * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintForeground instead. + */ +export const _ctrlFieldStatusWarningTintForeground = `var(${statusWarningTintForegroundRaw}, ${colorPaletteDarkOrangeForeground1})`; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index c3127444097cc..33bf954821c14 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -93,6 +93,7 @@ import { lineHeightBase100, fontSizeBase400, fontWeightSemibold, + spacingHorizontalXS, spacingVerticalXXS, strokeWidthThin, strokeWidthThicker, @@ -445,7 +446,7 @@ export const textRampItemHeaderLineHeight = `var(${textRampItemHeaderLineHeightR export const textRampItemBodyFontSize = `var(${textRampItemBodyFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}, ${fontSizeBase300}))`; export const textRampItemBodyLineHeight = `var(${textRampItemBodyLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}, ${lineHeightBase300}))`; export const textRampMetadataFontSize = `var(${textRampMetadataFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}, ${fontSizeBase200}))`; -export const textRampMetadataLineHeight = `var(${textRampMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; +export const textRampMetadataLineHeight = `var(${textRampMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}, ${lineHeightBase200}))`; export const textRampLegalFontSize = `var(${textRampLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}, ${fontSizeBase200}))`; export const textRampLegalLineHeight = `var(${textRampLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}, ${lineHeightBase200}))`; export const textRampSmPageHeaderFontSize = `var(${textRampSmPageHeaderFontSizeRaw}, var(${textGlobalSubtitle1FontSizeRaw}))`; @@ -491,7 +492,7 @@ export const paddingCtrlTextBottom = `var(${paddingCtrlTextBottomRaw}, var(${pad export const paddingCtrlSmTextBottom = `var(${paddingCtrlSmTextBottomRaw}, var(${paddingCtrlSmTextTopRaw}))`; export const paddingCtrlLgTextBottom = `var(${paddingCtrlLgTextBottomRaw}, var(${paddingCtrlLgTextTopRaw}))`; export const gapBetweenCtrlNested = `var(${gapBetweenCtrlNestedRaw}, var(${paddingCtrlToNestedControlRaw}))`; -export const gapBetweenTextSmall = `var(${gapBetweenTextSmallRaw}, var(${gapBetweenContentXxSmallRaw}))`; +export const gapBetweenTextSmall = `var(${gapBetweenTextSmallRaw}, var(${gapBetweenContentXxSmallRaw}, ${spacingHorizontalXS}))`; export const gapBetweenCtrlLgNested = `var(${gapBetweenCtrlLgNestedRaw}, var(${paddingCtrlLgToNestedControlRaw}))`; export const gapBetweenTextLarge = `var(${gapBetweenTextLargeRaw}, var(${gapBetweenContentXSmallRaw}))`; export const gapBetweenCtrlSmNested = `var(${gapBetweenCtrlSmNestedRaw}, var(${paddingCtrlSmToNestedControlRaw}))`; From eab4e6cb17317dc665b27f706175f2cba74ebc12 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Wed, 16 Jul 2025 11:41:49 -0400 Subject: [PATCH 46/66] add spin button to semantic style hooks (#34829) --- .../etc/semantic-style-hooks-preview.api.md | 4 + .../library/package.json | 1 + .../src/component-styles/SpinButton/index.ts | 1 + .../useSemanticSpinButtonStyles.styles.ts | 453 ++++++++++++++++++ .../component-styles/semanticStyleHooks.ts | 3 + .../library/src/index.ts | 1 + .../etc/semantic-tokens.api.md | 36 +- .../src/components/input/tokens.ts | 8 +- .../src/fluentLegacyVariants.ts | 40 ++ .../semantic-tokens/src/fluentOverrides.ts | 3 + packages/semantic-tokens/src/index.ts | 14 +- packages/semantic-tokens/src/legacy/tokens.ts | 18 +- .../src/legacyVariant/tokens.ts | 108 ++++- 13 files changed, 656 insertions(+), 34 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/SpinButton/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/SpinButton/useSemanticSpinButtonStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 0e24b38bc112a..e0b160bda483c 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -49,6 +49,7 @@ import { RadioState } from '@fluentui/react-radio'; import { RatingDisplayState } from '@fluentui/react-rating'; import { RatingItemState } from '@fluentui/react-rating'; 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'; @@ -199,6 +200,9 @@ export const useSemanticRatingItemStyles: (_state: unknown) => RatingItemState; // @public export const useSemanticSliderStyles: (_state: unknown) => SliderState; +// @public +export const useSemanticSpinButtonStyles: (_state: unknown) => SpinButtonState; + // @public export const useSemanticSpinnerStyles: (_state: unknown) => SpinnerState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 1249d332ab8ef..559ae7b6068c2 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -51,6 +51,7 @@ "@fluentui/react-rating": "^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-tabster": "^9.24.6", 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 0000000000000..4c0c10f5b79ce --- /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 0000000000000..1d7535f823ea1 --- /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: tokens.colorCompoundBrandStrokePressed, + }, + ':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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 0befde24f0bdb..a418decfbb4fe 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -69,6 +69,7 @@ import { useSemanticBreadcrumbDividerStyles, useSemanticBreadcrumbItemStyles, } from './Breadcrumb'; +import { useSemanticSpinButtonStyles } from './SpinButton'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -155,4 +156,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useBreadcrumbButtonStyles_unstable: useSemanticBreadcrumbButtonStyles, useBreadcrumbDividerStyles_unstable: useSemanticBreadcrumbDividerStyles, useBreadcrumbItemStyles_unstable: useSemanticBreadcrumbItemStyles, + // SpinButton styles + useSpinButtonStyles_unstable: useSemanticSpinButtonStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index db38c7f529814..fcd924e22a90f 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -73,3 +73,4 @@ export { useSemanticBreadcrumbDividerStyles, useSemanticBreadcrumbItemStyles, } from './component-styles/Breadcrumb'; +export { useSemanticSpinButtonStyles } from './component-styles/SpinButton'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 7505e6ecf5b83..1608c686af3ba 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -1877,7 +1877,7 @@ export const ctrlInputBottomLineStrokeWidthPressed = "var(--smtc-ctrl-input-bott 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))"; +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"; @@ -1892,7 +1892,7 @@ export const ctrlInputBottomLineStrokeWidthSelectedRaw = "--smtc-ctrl-input-bott 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))"; +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"; @@ -1940,7 +1940,7 @@ export const ctrlInputStrokeWidthPressed = "var(--smtc-ctrl-input-stroke-width-p 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))"; +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"; @@ -3085,6 +3085,36 @@ export const ctrlSliderThumbSizeRest = "var(--smtc-ctrl-slider-thumb-size-rest, // @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))"; diff --git a/packages/semantic-tokens/src/components/input/tokens.ts b/packages/semantic-tokens/src/components/input/tokens.ts index 6fd0179f1398f..4f551e962dfee 100644 --- a/packages/semantic-tokens/src/components/input/tokens.ts +++ b/packages/semantic-tokens/src/components/input/tokens.ts @@ -18,6 +18,7 @@ import { colorNeutralBackgroundDisabled, colorPaletteRedBorder2, colorNeutralStroke1, + strokeWidthThin, strokeWidthThick, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, @@ -25,6 +26,7 @@ import { colorCompoundBrandStroke, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, + colorNeutralStrokeDisabled, } from '../../legacy/tokens'; import { statusDangerStrokeRaw } from '../../optional/variables'; import { @@ -65,11 +67,11 @@ export const ctrlInputBackgroundDisabled = `var(${ctrlInputBackgroundDisabledRaw 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}))`; +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}))`; +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}))`; @@ -83,6 +85,6 @@ export const ctrlInputBottomLineStrokeSelected = `var(${ctrlInputBottomLineStrok 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}))`; +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/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index fd0c2d2021d8d..6ff4dc3f79950 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -571,6 +571,46 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { 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', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index bf490553975ce..42d6c0bbde31d 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -96,11 +96,14 @@ export const fluentOverrides: FluentOverrides = { 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' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index ed715f95c9187..c305a90b235dd 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1857,6 +1857,8 @@ export { _ctrlFieldPaddingCtrlTextTop, _ctrlFieldPaddingCtrlTextTopHorizontal, _ctrlFieldStatusDangerTintForeground, + _ctrlFieldStatusSuccessTintForeground, + _ctrlFieldStatusWarningTintForeground, _ctrlFocusOuterStrokeInteractive, _ctrlInputBackgroundRestDarker, _ctrlInputBackgroundRestLighter, @@ -1919,6 +1921,16 @@ export { _ctrlSliderPaddingDefault, _ctrlSliderSmBarSizeDefault, _ctrlSliderSmPaddingDefault, + _ctrlSpinButtonBackgroundDisabled, + _ctrlSpinButtonForegroundOnSubtleHover, + _ctrlSpinButtonForegroundOnSubtlePressed, + _ctrlSpinButtonNeutralSecondaryRest, + _ctrlSpinButtonOnSubtleRest, + _ctrlSpinButtonPaddingHorizontal, + _ctrlSpinButtonPaddingSmHorizontal, + _ctrlSpinButtonSizeDefault, + _ctrlSpinButtonSizeIconSecondary, + _ctrlSpinButtonSizeSmDefault, _ctrlSpinnerBackgroundEmpty, _ctrlSpinnerBackgroundFilled, _ctrlSpinnerItemBodyFontSize, @@ -1956,7 +1968,5 @@ export { _ctrlTreePaddingTextTop, _nullBackgroundColorHover, _nullBackgroundColorPressed, - _ctrlFieldStatusSuccessTintForeground, - _ctrlFieldStatusWarningTintForeground, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 9d17720544bf5..dcfb009ffd845 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -684,6 +684,11 @@ export const spacingVerticalXS = 'var(--spacingVerticalXS)'; * @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#colorNeutralForeground4 | `colorNeutralForeground4`} design token. * @public @@ -720,15 +725,15 @@ export const colorStatusDangerForeground1 = 'var(--colorStatusDangerForeground1) */ export const spacingVerticalMNudge = 'var(--spacingVerticalMNudge)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2Contrast | `colorBrandStroke2Contrast`} design token. + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalMNudge | `spacingHorizontalMNudge`} design token. * @public */ -export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)'; +export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)'; /** - * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalMNudge | `spacingHorizontalMNudge`} design token. + * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2Contrast | `colorBrandStroke2Contrast`} design token. * @public */ -export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)'; +export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundHover | `colorTransparentBackgroundHover`} design token. * @public @@ -739,8 +744,3 @@ export const colorTransparentBackgroundHover = 'var(--colorTransparentBackground * @public */ export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeForeground1 | `colorPaletteDarkOrangeForeground1`} design token. - * @public - */ -export const colorPaletteDarkOrangeForeground1 = 'var(--colorPaletteDarkOrangeForeground1)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index d14f0dc8b24c5..ca248ed81cd95 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -12,7 +12,7 @@ import { ctrlChoiceBaseSizeRaw, } from '../components/choice/variables'; import { ctrlFocusInnerStrokeWidthRaw, ctrlFocusOuterStrokeRaw } from '../components/focus/variables'; -import { ctrlInputBackgroundRestRaw } from '../components/input/variables'; +import { ctrlInputBackgroundRestRaw, ctrlInputBackgroundDisabledRaw } from '../components/input/variables'; import { ctrlListIndentLevel1Raw } from '../components/list/variables'; import { ctrlProgressBackgroundEmptyRaw, @@ -69,6 +69,10 @@ import { sizeCtrlIconRaw, foregroundCtrlOnBrandRestRaw, foregroundCtrlOnBrandDisabledRaw, + backgroundCtrlNeutralDisabledRaw, + paddingCtrlSmHorizontalDefaultRaw, + sizeCtrlIconSecondaryRaw, + sizeCtrlSmDefaultRaw, textGlobalBody3LineHeightRaw, foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, @@ -122,6 +126,7 @@ import { spacingVerticalXXS, spacingVerticalSNudge, spacingHorizontalM, + colorPaletteDarkOrangeForeground1, colorTransparentStrokeInteractive, colorNeutralBackground3, colorNeutralForeground4, @@ -135,6 +140,7 @@ import { spacingVerticalMNudge, lineHeightBase300, colorNeutralForegroundDisabled, + spacingHorizontalMNudge, colorBrandStroke2Contrast, colorBrandStroke1, fontSizeBase400, @@ -143,10 +149,8 @@ import { colorNeutralForeground1Pressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, - spacingHorizontalMNudge, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, - colorPaletteDarkOrangeForeground1, } from '../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, @@ -722,6 +726,20 @@ export const _ctrlFieldPaddingCtrlTextTopHorizontal = `var(${paddingCtrlTextTopR * 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. @@ -1156,6 +1174,76 @@ export const _ctrlSliderSmBarSizeDefault = `var(${sizeCtrlDefaultRaw}, 24px)`; * 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. @@ -1415,17 +1503,3 @@ export const _nullBackgroundColorHover = `var(${nullColorRaw}, ${colorTransparen * please use nullColor instead. */ export const _nullBackgroundColorPressed = `var(${nullColorRaw}, ${colorTransparentBackgroundPressed})`; -/** - * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. - * It's purpose is to support Fluent UI legacy fallback variants only. - * This token is not intended for use in new semantic theme implementations - * please use statusSuccessTintForeground instead. - */ -export const _ctrlFieldStatusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteGreenForeground1})`; -/** - * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. - * It's purpose is to support Fluent UI legacy fallback variants only. - * This token is not intended for use in new semantic theme implementations - * please use statusWarningTintForeground instead. - */ -export const _ctrlFieldStatusWarningTintForeground = `var(${statusWarningTintForegroundRaw}, ${colorPaletteDarkOrangeForeground1})`; From 56c6d648d63cf2998b0d29474ad6c409b10e9899 Mon Sep 17 00:00:00 2001 From: Xue <39594459+etudie@users.noreply.github.com> Date: Wed, 16 Jul 2025 18:31:47 -0400 Subject: [PATCH 47/66] Extended Tokens: Input (#34796) Co-authored-by: Mitch-At-Work --- .../etc/semantic-style-hooks-preview.api.md | 4 + .../library/package.json | 1 + .../src/component-styles/Input/index.ts | 1 + .../Input/useSemanticInputStyles.styles.ts | 392 ++++++++++++++++++ .../useSemanticSpinButtonStyles.styles.ts | 2 +- .../useSemanticTextareaStyles.styles.ts | 2 +- .../component-styles/semanticStyleHooks.ts | 3 + .../library/src/index.ts | 1 + .../etc/semantic-tokens.api.md | 3 + .../src/fluentLegacyVariants.ts | 6 +- packages/semantic-tokens/src/index.ts | 1 + .../src/legacyVariant/tokens.ts | 13 +- 12 files changed, 424 insertions(+), 5 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Input/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Input/useSemanticInputStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index e0b160bda483c..8c75ebe09c6fd 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -28,6 +28,7 @@ import { FlatTreeState } from '@fluentui/react-tree'; import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider'; import { ImageState } from '@fluentui/react-image'; 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'; @@ -134,6 +135,9 @@ export const useSemanticImageStyles: (_state: unknown) => ImageState; // @public export const useSemanticInlineDrawerStyles: (_state: unknown) => InlineDrawerState; +// @public +export const useSemanticInputStyles: (_state: unknown) => InputState; + // @public export const useSemanticLabelStyles: (_state: unknown) => LabelState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 559ae7b6068c2..b91121b2d238e 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -34,6 +34,7 @@ "@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-jsx-runtime": "^9.0.54", 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 0000000000000..a7072a5cbf0f3 --- /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 0000000000000..2d43a285d2327 --- /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/SpinButton/useSemanticSpinButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/SpinButton/useSemanticSpinButtonStyles.styles.ts index 1d7535f823ea1..58db5fde9cd29 100644 --- 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 @@ -104,7 +104,7 @@ const useRootClassName = makeResetStyles({ }, ':focus-within:active::after': { // This is if the user clicks the field again while it's already focused - borderBottomColor: tokens.colorCompoundBrandStrokePressed, + borderBottomColor: semanticTokens._ctrlInputBottomLineStrokeBrandPressed, }, ':focus-within': { outline: '2px solid transparent', 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 index 70e916a5d3f91..b709668b683b9 100644 --- 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 @@ -84,7 +84,7 @@ const useRootStyles = makeStyles({ }, ':focus-within:active::after': { // This is if the user clicks the field again while it's already focused - borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected, + borderBottomColor: semanticTokens._ctrlInputBottomLineStrokeBrandPressed, }, ':focus-within': { outlineWidth: semanticTokens.ctrlFocusOuterStrokeWidth, diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index a418decfbb4fe..7c428d18229f8 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -70,6 +70,7 @@ import { useSemanticBreadcrumbItemStyles, } from './Breadcrumb'; import { useSemanticSpinButtonStyles } from './SpinButton'; +import { useSemanticInputStyles } from './Input/useSemanticInputStyles.styles'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -158,4 +159,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useBreadcrumbItemStyles_unstable: useSemanticBreadcrumbItemStyles, // SpinButton styles useSpinButtonStyles_unstable: useSemanticSpinButtonStyles, + // Input styles + useInputStyles_unstable: useSemanticInputStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index fcd924e22a90f..6a4fdb6fef99c 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -74,3 +74,4 @@ export { useSemanticBreadcrumbItemStyles, } from './component-styles/Breadcrumb'; export { useSemanticSpinButtonStyles } from './component-styles/SpinButton'; +export { useSemanticInputStyles } from './component-styles/Input'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 1608c686af3ba..d8be2aa2fdbd3 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -1828,6 +1828,9 @@ export const ctrlInputBackgroundSelected = "var(--smtc-ctrl-input-background-sel // @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)"; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 6ff4dc3f79950..79ef9f0cd9309 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -1,5 +1,3 @@ -import { _ctrlBadgeStatusSuccessTintForeground } from './legacyVariant/tokens'; - export type LegacyFluentVariantValue = | { originalToken: string; @@ -335,6 +333,10 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorNeutralBackground1', originalToken: 'ctrlInputBackgroundRest', }, + _ctrlInputBottomLineStrokeBrandPressed: { + f2Token: 'colorCompoundBrandStrokePressed', + originalToken: 'ctrlInputBottomLineStrokePressed', + }, _ctrlInputNeutralForegroundPlaceholder: { f2Token: 'colorNeutralForeground4', originalToken: 'foregroundCtrlNeutralSecondaryRest', diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index c305a90b235dd..5a8d4dc37dd0b 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1862,6 +1862,7 @@ export { _ctrlFocusOuterStrokeInteractive, _ctrlInputBackgroundRestDarker, _ctrlInputBackgroundRestLighter, + _ctrlInputBottomLineStrokeBrandPressed, _ctrlInputNeutralForegroundPlaceholder, _ctrlListBackgroundColorHover, _ctrlListBackgroundColorPressed, diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index ca248ed81cd95..1fa7cdc2ede18 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -12,7 +12,11 @@ import { ctrlChoiceBaseSizeRaw, } from '../components/choice/variables'; import { ctrlFocusInnerStrokeWidthRaw, ctrlFocusOuterStrokeRaw } from '../components/focus/variables'; -import { ctrlInputBackgroundRestRaw, ctrlInputBackgroundDisabledRaw } from '../components/input/variables'; +import { + ctrlInputBackgroundRestRaw, + ctrlInputBottomLineStrokePressedRaw, + ctrlInputBackgroundDisabledRaw, +} from '../components/input/variables'; import { ctrlListIndentLevel1Raw } from '../components/list/variables'; import { ctrlProgressBackgroundEmptyRaw, @@ -761,6 +765,13 @@ export const _ctrlInputBackgroundRestDarker = `var(${ctrlInputBackgroundRestRaw} * 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. From 29bcb305fff9831f034e41cc0ce440ebfbbabb35 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Thu, 17 Jul 2025 15:41:41 -0400 Subject: [PATCH 48/66] add toolbar to semantic style hooks (#34840) --- .../etc/semantic-style-hooks-preview.api.md | 23 ++++++++++ .../library/package.json | 1 + .../src/component-styles/Toolbar/index.ts | 6 +++ .../useSemanticToolbarButtonStyles.styles.ts | 40 ++++++++++++++++ .../useSemanticToolbarDividerStyles.styles.ts | 37 +++++++++++++++ .../useSemanticToolbarGroupStyles.styles.ts | 20 ++++++++ ...SemanticToolbarRadioButtonStyles.styles.ts | 45 ++++++++++++++++++ .../useSemanticToolbarStyles.styles.ts | 46 +++++++++++++++++++ ...emanticToolbarToggleButtonStyles.styles.ts | 45 ++++++++++++++++++ .../component-styles/semanticStyleHooks.ts | 15 ++++++ .../library/src/index.ts | 8 ++++ 11 files changed, 286 insertions(+) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarDividerStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarGroupStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 8c75ebe09c6fd..e94e18c92768b 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -59,6 +59,11 @@ import { TabState } from '@fluentui/react-tabs'; import { TextareaState } from '@fluentui/react-textarea'; import { TextState } from '@fluentui/react-text'; 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'; @@ -240,6 +245,24 @@ export const useSemanticTextStyles: (_state: unknown) => TextState; // @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; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index b91121b2d238e..cf9f329f97693 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -60,6 +60,7 @@ "@fluentui/react-text": "^9.4.36", "@fluentui/react-textarea": "^9.4.6", "@fluentui/react-theme": "^9.1.24", + "@fluentui/react-toolbar": "^9.4.5", "@fluentui/react-tree": "^9.10.9", "@fluentui/react-utilities": "^9.19.0", "@fluentui/semantic-tokens": "0.0.0-alpha.1", 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 0000000000000..6f7612a72d73e --- /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 0000000000000..38ab095f03ec3 --- /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 0000000000000..0185006f8fdb6 --- /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 0000000000000..ec50f3b0b5f6d --- /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 0000000000000..20969316ea9fb --- /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 0000000000000..0b2000ec404ae --- /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 0000000000000..ee4d2dc2e5117 --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 7c428d18229f8..9aead4e2d0f70 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -71,6 +71,14 @@ import { } from './Breadcrumb'; import { useSemanticSpinButtonStyles } from './SpinButton'; import { useSemanticInputStyles } from './Input/useSemanticInputStyles.styles'; +import { + useSemanticToolbarStyles, + useSemanticToolbarButtonStyles, + useSemanticToolbarDividerStyles, + useSemanticToolbarGroupStyles, + useSemanticToolbarRadioButtonStyles, + useSemanticToolbarToggleButtonStyles, +} from './Toolbar'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -161,4 +169,11 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { 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, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index 6a4fdb6fef99c..4540ee2597359 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -75,3 +75,11 @@ export { } 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'; From 4250e671028c6830f24f20fa37c1a4361130f4bd Mon Sep 17 00:00:00 2001 From: Mason Tejera <17346018+mltejera@users.noreply.github.com> Date: Thu, 17 Jul 2025 21:15:43 +0000 Subject: [PATCH 49/66] Semantic Tokens: Tooltip (#34845) --- .../library/package.json | 1 + .../src/component-styles/Tooltip/index.ts | 1 + .../useSemanticTooltipStyles.styles.ts | 67 +++++++++++++++++++ .../component-styles/semanticStyleHooks.ts | 9 ++- .../etc/semantic-tokens.api.md | 20 ++++-- .../src/components/tooltip/tokens.ts | 9 +-- .../src/fluentLegacyVariants.ts | 16 +++++ .../semantic-tokens/src/fluentOverrides.ts | 13 ++++ packages/semantic-tokens/src/index.ts | 4 ++ .../src/legacyVariant/tokens.ts | 28 ++++++++ 10 files changed, 157 insertions(+), 11 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index cf9f329f97693..01d55a6def018 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -61,6 +61,7 @@ "@fluentui/react-textarea": "^9.4.6", "@fluentui/react-theme": "^9.1.24", "@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.0-alpha.1", 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 0000000000000..6aeb457bbf1cf --- /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 0000000000000..b3304ad5a60fe --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 9aead4e2d0f70..cf5528ccdd453 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -79,6 +79,7 @@ import { useSemanticToolbarRadioButtonStyles, useSemanticToolbarToggleButtonStyles, } from './Toolbar'; +import { useSemanticTooltipStyles } from './Tooltip'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -142,9 +143,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useMessageBarBodyStyles_unstable: useSemanticMessageBarBodyStyles, useMessageBarActionsStyles_unstable: useSemanticMessageBarActionsStyles, useMessageBarTitleStyles_unstable: useSemanticMessageBarTitleStyles, - // Tabs styles - useTabStyles_unstable: useSemanticTabStyles, - useTabListStyles_unstable: useSemanticTabListStyles, // Slider styles useSliderStyles_unstable: useSemanticSliderStyles, // Menu styles @@ -176,4 +174,9 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useToolbarGroupStyles_unstable: useSemanticToolbarGroupStyles, useToolbarRadioButtonStyles_unstable: useSemanticToolbarRadioButtonStyles, useToolbarToggleButtonStyles_unstable: useSemanticToolbarToggleButtonStyles, + // Tabs styles + useTabStyles_unstable: useSemanticTabStyles, + useTabListStyles_unstable: useSemanticTabListStyles, + //Tooltip styles + useTooltipStyles_unstable: useSemanticTooltipStyles, }; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index d8be2aa2fdbd3..dc9974f6476ae 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -3224,25 +3224,37 @@ export const _ctrlTabSmGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, v export const _ctrlTabSmPaddingHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalSNudge))"; // @public (undocumented) -export const ctrlTooltipBackground = "var(--smtc-ctrl-tooltip-background)"; +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))"; +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)"; +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))"; +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"; diff --git a/packages/semantic-tokens/src/components/tooltip/tokens.ts b/packages/semantic-tokens/src/components/tooltip/tokens.ts index 447e1286986fd..c329641175f04 100644 --- a/packages/semantic-tokens/src/components/tooltip/tokens.ts +++ b/packages/semantic-tokens/src/components/tooltip/tokens.ts @@ -1,5 +1,6 @@ // 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, @@ -8,7 +9,7 @@ import { ctrlTooltipShadowRaw, } from './variables'; -export const ctrlTooltipCorner = `var(${ctrlTooltipCornerRaw}, var(${cornerCtrlRestRaw}))`; -export const ctrlTooltipBackground = `var(${ctrlTooltipBackgroundRaw})`; -export const ctrlTooltipForeground = `var(${ctrlTooltipForegroundRaw})`; -export const ctrlTooltipShadow = `var(${ctrlTooltipShadowRaw}, var(${ctrlFabShadowRestRaw}))`; +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/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 79ef9f0cd9309..aa4c7c894e796 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -713,6 +713,22 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'spacingHorizontalSNudge', originalToken: 'paddingCtrlHorizontalDefault', }, + _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', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 42d6c0bbde31d..5e947f8e058ae 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -154,6 +154,19 @@ export const fluentOverrides: FluentOverrides = { 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' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 5a8d4dc37dd0b..b5554c0afab90 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1957,6 +1957,10 @@ export { _ctrlTabSizeDefault, _ctrlTabSmGapInsideDefault, _ctrlTabSmPaddingHorizontalDefault, + _ctrlTooltipPaddingBottom, + _ctrlTooltipPaddingLeft, + _ctrlTooltipPaddingRight, + _ctrlTooltipPaddingTop, _ctrlTreeGapInsideDefault, _ctrlTreeIconOnSubtle, _ctrlTreeIconOnSubtleHover, diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 1fa7cdc2ede18..d44da7777df17 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -1430,6 +1430,34 @@ export const _ctrlTabSmGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spa * please use paddingCtrlHorizontalDefault instead. */ export const _ctrlTabSmPaddingHorizontalDefault = `var(${paddingCtrlHorizontalDefaultRaw}, ${spacingHorizontalSNudge})`; +/** + * 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. From 08da482fa10b586519921c24e025496f19f6ebc5 Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Thu, 17 Jul 2025 19:22:27 -0400 Subject: [PATCH 50/66] add infolabel to semantic style hooks (#34856) Co-authored-by: Mitch-At-Work --- .../etc/semantic-style-hooks-preview.api.md | 8 + .../library/package.json | 1 + .../src/component-styles/InfoLabel/index.ts | 2 + .../useSemanticInfoButtonStyles.styles.ts | 141 ++++++++++++++++++ .../useSemanticInfoLabelStyles.styles.ts | 64 ++++++++ .../component-styles/semanticStyleHooks.ts | 4 + .../library/src/index.ts | 1 + .../etc/semantic-tokens.api.md | 7 +- .../src/fluentLegacyVariants.ts | 4 + .../semantic-tokens/src/fluentOverrides.ts | 4 +- packages/semantic-tokens/src/index.ts | 1 + packages/semantic-tokens/src/legacy/tokens.ts | 25 ++-- .../src/legacyVariant/tokens.ts | 10 +- .../semantic-tokens/src/nullable/tokens.ts | 6 +- 14 files changed, 261 insertions(+), 17 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index e94e18c92768b..049f2bfb4c2a0 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -27,6 +27,8 @@ 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'; @@ -137,6 +139,12 @@ 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; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 01d55a6def018..41a68d981030c 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -37,6 +37,7 @@ "@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", 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 0000000000000..d9dba62f5300d --- /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 0000000000000..0a6c21390b64a --- /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 0000000000000..109279599bccd --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index cf5528ccdd453..7c80f5b99e2a6 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -80,6 +80,7 @@ import { useSemanticToolbarToggleButtonStyles, } from './Toolbar'; import { useSemanticTooltipStyles } from './Tooltip'; +import { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './InfoLabel'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -179,4 +180,7 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useTabListStyles_unstable: useSemanticTabListStyles, //Tooltip styles useTooltipStyles_unstable: useSemanticTooltipStyles, + // InfoLabel styles + useInfoButtonStyles_unstable: useSemanticInfoButtonStyles, + useInfoLabelStyles_unstable: useSemanticInfoLabelStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index 4540ee2597359..d370a65c37608 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -83,3 +83,4 @@ export { useSemanticToolbarRadioButtonStyles, useSemanticToolbarToggleButtonStyles, } from './component-styles/Toolbar'; +export { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './component-styles/InfoLabel'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index dc9974f6476ae..2a493e9830610 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -263,13 +263,13 @@ export const backgroundCtrlOutlineDisabled = "var(--smtc-background-ctrl-outline export const backgroundCtrlOutlineDisabledRaw = "--smtc-background-ctrl-outline-disabled"; // @public (undocumented) -export const backgroundCtrlOutlineHover = "var(--smtc-background-ctrl-outline-hover, var(--smtc-null-color, var(--colorTransparentBackground)))"; +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(--colorTransparentBackground)))"; +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"; @@ -1786,6 +1786,9 @@ export const ctrlFocusOuterStrokeWidth = "var(--smtc-ctrl-focus-outer-stroke-wid // @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)))"; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index aa4c7c894e796..3cca859a0dea0 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -325,6 +325,10 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorTransparentStrokeInteractive', originalToken: 'ctrlFocusOuterStroke', }, + _ctrlInfoLabelForegroundColorSelected: { + f2Token: 'colorNeutralForeground2BrandSelected', + originalToken: 'foregroundCtrlActiveBrandRest', + }, _ctrlInputBackgroundRestDarker: { f2Token: 'colorNeutralBackground3', originalToken: 'ctrlInputBackgroundRest', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 5e947f8e058ae..89dee73fffce8 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -22,8 +22,8 @@ export const fluentOverrides: FluentOverrides = { backgroundCtrlNeutralHover: { f2Token: 'colorNeutralBackground1Hover' }, backgroundCtrlNeutralPressed: { f2Token: 'colorNeutralBackground1Pressed' }, backgroundCtrlNeutralRest: { f2Token: 'colorNeutralBackground1' }, - backgroundCtrlOutlineHover: { f2Token: 'colorTransparentBackground' }, - backgroundCtrlOutlinePressed: { f2Token: 'colorTransparentBackground' }, + backgroundCtrlOutlineHover: { f2Token: 'colorTransparentBackgroundHover' }, + backgroundCtrlOutlinePressed: { f2Token: 'colorTransparentBackgroundPressed' }, backgroundCtrlOutlineRest: { f2Token: 'colorTransparentBackground' }, backgroundCtrlShapeSafeNeutralDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, backgroundCtrlShapeSafeNeutralHover: { f2Token: 'colorNeutralStrokeAccessibleHover' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index b5554c0afab90..cefba3dc63181 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1860,6 +1860,7 @@ export { _ctrlFieldStatusSuccessTintForeground, _ctrlFieldStatusWarningTintForeground, _ctrlFocusOuterStrokeInteractive, + _ctrlInfoLabelForegroundColorSelected, _ctrlInputBackgroundRestDarker, _ctrlInputBackgroundRestLighter, _ctrlInputBottomLineStrokeBrandPressed, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index dcfb009ffd845..4991cb8aa6479 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -49,6 +49,16 @@ export const colorNeutralBackground1Pressed = 'var(--colorNeutralBackground1Pres * @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 @@ -689,6 +699,11 @@ export const spacingVerticalSNudge = 'var(--spacingVerticalSNudge)'; * @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 @@ -734,13 +749,3 @@ export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)'; * @public */ export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)'; -/** - * 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)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index d44da7777df17..91a35d688a911 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -132,6 +132,7 @@ import { spacingHorizontalM, colorPaletteDarkOrangeForeground1, colorTransparentStrokeInteractive, + colorNeutralForeground2BrandSelected, colorNeutralBackground3, colorNeutralForeground4, fontSizeBase200, @@ -181,6 +182,7 @@ import { backgroundCtrlActiveBrandPressedRaw, paddingCtrlLgTextBottomRaw, paddingCtrlSmTextBottomRaw, + foregroundCtrlActiveBrandRestRaw, foregroundCtrlOnSubtleHoverRaw, foregroundCtrlNeutralPrimaryHoverRaw, foregroundCtrlOnSubtlePressedRaw, @@ -200,7 +202,6 @@ import { textRampItemBodyLineHeightRaw, foregroundCtrlActiveBrandHoverRaw, foregroundCtrlActiveBrandPressedRaw, - foregroundCtrlActiveBrandRestRaw, foregroundCtrlIconOnSubtleHoverRaw, foregroundCtrlIconOnSubtlePressedRaw, } from '../optional/variables'; @@ -751,6 +752,13 @@ export const _ctrlFieldStatusWarningTintForeground = `var(${statusWarningTintFor * 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. diff --git a/packages/semantic-tokens/src/nullable/tokens.ts b/packages/semantic-tokens/src/nullable/tokens.ts index 21acddcd0d1dc..ee4ba36776825 100644 --- a/packages/semantic-tokens/src/nullable/tokens.ts +++ b/packages/semantic-tokens/src/nullable/tokens.ts @@ -8,6 +8,8 @@ import { colorNeutralStroke1Pressed, colorNeutralStrokeDisabled, colorTransparentBackground, + colorTransparentBackgroundHover, + colorTransparentBackgroundPressed, colorSubtleBackground, } from '../legacy/tokens'; import { @@ -93,8 +95,8 @@ export const strokeCardOnSecondaryHover = `var(${strokeCardOnSecondaryHoverRaw}, 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}, ${colorTransparentBackground}))`; -export const backgroundCtrlOutlinePressed = `var(${backgroundCtrlOutlinePressedRaw}, 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}))`; From 23c7bcf5100dcb96cb559b67e9d392484c0148c4 Mon Sep 17 00:00:00 2001 From: terynk <86626692+terynk@users.noreply.github.com> Date: Fri, 18 Jul 2025 14:31:14 -0700 Subject: [PATCH 51/66] Toast: Update Toast to use semantic tokens (#34844) Co-authored-by: Mitch-At-Work --- .../etc/semantic-style-hooks-preview.api.md | 20 ++ .../library/package.json | 1 + .../useSemanticMenuItemSwitchStyles.styles.ts | 1 - .../src/component-styles/Toast/index.ts | 5 + .../useSemanticToastBodyStyles.styles.ts | 65 ++++++ .../useSemanticToastContainerStyles.styles.ts | 34 ++++ .../useSemanticToastFooterStyles.styles.ts | 35 ++++ .../Toast/useSemanticToastStyles.styles.ts | 46 +++++ .../useSemanticToastTitleStyles.styles.ts | 120 +++++++++++ .../component-styles/semanticStyleHooks.ts | 13 ++ .../library/src/index.ts | 7 + .../etc/semantic-tokens.api.md | 83 +++++++- .../semantic-tokens/src/control/tokens.ts | 9 +- .../src/fluentLegacyVariants.ts | 100 +++++++++ .../semantic-tokens/src/fluentOverrides.ts | 5 +- packages/semantic-tokens/src/index.ts | 25 +++ packages/semantic-tokens/src/legacy/tokens.ts | 40 ++++ .../src/legacyVariant/tokens.ts | 192 ++++++++++++++++++ 18 files changed, 790 insertions(+), 11 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastFooterStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastTitleStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 049f2bfb4c2a0..4bb76911bab3d 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -60,6 +60,11 @@ import { TabListState } from '@fluentui/react-tabs'; import { TabState } from '@fluentui/react-tabs'; 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'; @@ -250,6 +255,21 @@ 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; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 41a68d981030c..b009bb64951a3 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -61,6 +61,7 @@ "@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", 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 index c7fe9dd9b61e7..4f0df7b46d395 100644 --- 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 @@ -155,7 +155,6 @@ export const useSemanticMenuItemSwitchStyles = (_state: unknown): MenuItemSwitch useMenuItemStyles_unstable({ ...state, components: { - // eslint-disable-next-line @typescript-eslint/no-deprecated ...state.components, checkmark: 'span', submenuIndicator: 'span', 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 0000000000000..eaae3de502120 --- /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 0000000000000..aa44b17440571 --- /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 0000000000000..150a74e692c52 --- /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 0000000000000..e1b5179a10a0a --- /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 0000000000000..a85a7263ba0ca --- /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 0000000000000..8951007b10f7e --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 7c80f5b99e2a6..240a108c09ed0 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -81,6 +81,13 @@ import { } from './Toolbar'; import { useSemanticTooltipStyles } from './Tooltip'; import { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './InfoLabel'; +import { + useSemanticToastContainerStyles, + useSemanticToastBodyStyles, + useSemanticToastFooterStyles, + useSemanticToastStyles, + useSemanticToastTitleStyles, +} from './Toast'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -183,4 +190,10 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // InfoLabel styles useInfoButtonStyles_unstable: useSemanticInfoButtonStyles, useInfoLabelStyles_unstable: useSemanticInfoLabelStyles, + //Toast styles + useToastBodyStyles_unstable: useSemanticToastBodyStyles, + useToastContainerStyles_unstable: useSemanticToastContainerStyles, + useToastFooterStyles_unstable: useSemanticToastFooterStyles, + useToastStyles_unstable: useSemanticToastStyles, + useToastTitleStyles_unstable: useSemanticToastTitleStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index d370a65c37608..e52bf83283768 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -84,3 +84,10 @@ export { useSemanticToolbarToggleButtonStyles, } from './component-styles/Toolbar'; export { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './component-styles/InfoLabel'; +export { + useSemanticToastBodyStyles, + useSemanticToastContainerStyles, + useSemanticToastFooterStyles, + useSemanticToastStyles, + useSemanticToastTitleStyles, +} from './component-styles/Toast'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 2a493e9830610..26e5a5a9ff84c 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -353,7 +353,7 @@ export const backgroundFlyoutColorBlend = "var(--smtc-background-flyout-color-bl export const backgroundFlyoutColorBlendRaw = "--smtc-background-flyout-color-blend"; // @public (undocumented) -export const backgroundFlyoutLumBlend = "var(--smtc-background-flyout-lum-blend)"; +export const backgroundFlyoutLumBlend = "var(--smtc-background-flyout-lum-blend, var(--colorNeutralBackground1))"; // @public (undocumented) export const backgroundFlyoutLumBlendRaw = "--smtc-background-flyout-lum-blend"; @@ -3226,6 +3226,81 @@ export const _ctrlTabSmGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, v // @public export const _ctrlTabSmPaddingHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalSNudge))"; +// @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))"; @@ -3665,7 +3740,7 @@ export const gapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default, 8px)" export const gapBetweenCtrlDefaultRaw = "--smtc-gap-between-ctrl-default"; // @public (undocumented) -export const gapBetweenCtrlLgDefault = "var(--smtc-gap-between-ctrl-lg-default)"; +export const gapBetweenCtrlLgDefault = "var(--smtc-gap-between-ctrl-lg-default, 16px)"; // @public (undocumented) export const gapBetweenCtrlLgDefaultRaw = "--smtc-gap-between-ctrl-lg-default"; @@ -4537,7 +4612,7 @@ export const paddingContentNone = "var(--smtc-padding-content-none, var(--spacin export const paddingContentNoneRaw = "--smtc-padding-content-none"; // @public (undocumented) -export const paddingContentSmall = "var(--smtc-padding-content-small)"; +export const paddingContentSmall = "var(--smtc-padding-content-small, 12px)"; // @public (undocumented) export const paddingContentSmallRaw = "--smtc-padding-content-small"; @@ -4927,7 +5002,7 @@ export const statusInformativeTintBackground = "var(--smtc-status-informative-ti export const statusInformativeTintBackgroundRaw = "--smtc-status-informative-tint-background"; // @public (undocumented) -export const statusInformativeTintForeground = "var(--smtc-status-informative-tint-foreground, var(--colorNeutralForeground3))"; +export const statusInformativeTintForeground = "var(--smtc-status-informative-tint-foreground, var(--colorNeutralForeground2))"; // @public (undocumented) export const statusInformativeTintForegroundRaw = "--smtc-status-informative-tint-foreground"; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index e8e04aec7513f..84978cce9facb 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -71,7 +71,6 @@ import { colorNeutralBackground3, colorTransparentStroke, colorNeutralBackground5, - colorNeutralForeground3, colorNeutralBackground4, colorPaletteMarigoldBackground3, colorPaletteBerryForeground3, @@ -323,7 +322,7 @@ export const paddingContentNone = `var(${paddingContentNoneRaw}, ${spacingHorizo export const paddingContentAlignOutdentTextOnSubtle = `var(${paddingContentAlignOutdentTextOnSubtleRaw})`; export const paddingContentXxSmall = `var(${paddingContentXxSmallRaw})`; export const paddingContentXSmall = `var(${paddingContentXSmallRaw})`; -export const paddingContentSmall = `var(${paddingContentSmallRaw})`; +export const paddingContentSmall = `var(${paddingContentSmallRaw}, 12px)`; export const paddingContentMedium = `var(${paddingContentMediumRaw})`; export const paddingContentLarge = `var(${paddingContentLargeRaw}, ${spacingHorizontalXXL})`; export const paddingContentXLarge = `var(${paddingContentXLargeRaw})`; @@ -351,7 +350,7 @@ 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})`; +export const gapBetweenCtrlLgDefault = `var(${gapBetweenCtrlLgDefaultRaw}, 16px)`; export const gapBetweenCtrlSmDefault = `var(${gapBetweenCtrlSmDefaultRaw})`; export const gapInsideCtrlDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingHorizontalS})`; export const gapInsideCtrlSmDefault = `var(${gapInsideCtrlSmDefaultRaw}, ${spacingHorizontalXS})`; @@ -405,7 +404,7 @@ export const backgroundCtrlNeutralPressed = `var(${backgroundCtrlNeutralPressedR export const backgroundCtrlNeutralDisabled = `var(${backgroundCtrlNeutralDisabledRaw}, ${colorNeutralBackgroundDisabled})`; export const backgroundCtrlSubtleHover = `var(${backgroundCtrlSubtleHoverRaw}, ${colorSubtleBackgroundHover})`; export const backgroundCtrlSubtlePressed = `var(${backgroundCtrlSubtlePressedRaw}, ${colorSubtleBackgroundPressed})`; -export const backgroundFlyoutLumBlend = `var(${backgroundFlyoutLumBlendRaw})`; +export const backgroundFlyoutLumBlend = `var(${backgroundFlyoutLumBlendRaw}, ${colorNeutralBackground1})`; export const backgroundFlyoutColorBlend = `var(${backgroundFlyoutColorBlendRaw})`; export const cornerZero = `var(${cornerZeroRaw}, ${borderRadiusNone})`; export const cornerBezel = `var(${cornerBezelRaw})`; @@ -450,7 +449,7 @@ export const statusImportantTintBackground = `var(${statusImportantTintBackgroun export const statusImportantTintStroke = `var(${statusImportantTintStrokeRaw}, ${colorTransparentStroke})`; export const statusImportantTintForeground = `var(${statusImportantTintForegroundRaw}, ${colorNeutralForeground1})`; export const statusInformativeBackground = `var(${statusInformativeBackgroundRaw}, ${colorNeutralBackground5})`; -export const statusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw}, ${colorNeutralForeground3})`; +export const statusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw}, ${colorNeutralForeground2})`; export const statusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw}, ${colorNeutralStroke1})`; export const statusInformativeTintBackground = `var(${statusInformativeTintBackgroundRaw}, ${colorNeutralBackground4})`; export const statusAwayForeground = `var(${statusAwayForegroundRaw}, ${colorPaletteMarigoldBackground3})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 3cca859a0dea0..99e30e8cbc0d8 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -717,6 +717,106 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'spacingHorizontalSNudge', originalToken: 'paddingCtrlHorizontalDefault', }, + _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', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 89dee73fffce8..d5a33d0555ae6 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -33,6 +33,7 @@ export const fluentOverrides: FluentOverrides = { backgroundCtrlSubtleHover: { f2Token: 'colorSubtleBackgroundHover' }, backgroundCtrlSubtlePressed: { f2Token: 'colorSubtleBackgroundPressed' }, backgroundCtrlSubtleRest: { f2Token: 'colorSubtleBackground' }, + backgroundFlyoutLumBlend: { f2Token: 'colorNeutralBackground1' }, backgroundFlyoutSolid: { f2Token: 'colorNeutralBackground1' }, backgroundSmoke: { f2Token: 'colorBackgroundOverlay' }, cornerCircular: { f2Token: 'borderRadiusCircular' }, @@ -209,6 +210,7 @@ export const fluentOverrides: FluentOverrides = { gapBetweenContentSmall: { rawValue: '8px' }, gapBetweenContentXSmall: { f2Token: 'spacingVerticalXXS' }, gapBetweenCtrlDefault: { rawValue: '8px' }, + gapBetweenCtrlLgDefault: { rawValue: '16px' }, gapBetweenListItem: { f2Token: 'spacingVerticalXXS' }, gapBetweenTextSmall: { f2Token: 'spacingHorizontalXS' }, gapInsideCtrlDefault: { f2Token: 'spacingHorizontalS' }, @@ -223,6 +225,7 @@ export const fluentOverrides: FluentOverrides = { paddingContentAlignOutdentIconOnSubtle: { f2Token: 'spacingHorizontalM' }, paddingContentLarge: { f2Token: 'spacingHorizontalXXL' }, paddingContentNone: { f2Token: 'spacingHorizontalNone' }, + paddingContentSmall: { rawValue: '12px' }, paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' }, paddingCtrlHorizontalIconOnly: { rawValue: '5px' }, paddingCtrlLgHorizontalDefault: { f2Token: 'spacingHorizontalL' }, @@ -267,7 +270,7 @@ export const fluentOverrides: FluentOverrides = { statusInformativeForeground: { f2Token: 'colorNeutralForeground3' }, statusInformativeStroke: { f2Token: 'colorNeutralStroke2' }, statusInformativeTintBackground: { f2Token: 'colorNeutralBackground4' }, - statusInformativeTintForeground: { f2Token: 'colorNeutralForeground3' }, + statusInformativeTintForeground: { f2Token: 'colorNeutralForeground2' }, statusInformativeTintStroke: { f2Token: 'colorNeutralStroke1' }, statusOofForeground: { f2Token: 'colorPaletteBerryForeground3' }, statusSuccessBackground: { f2Token: 'colorPaletteGreenBackground3' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index cefba3dc63181..2f8d8773a3ca5 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1958,6 +1958,31 @@ export { _ctrlTabSizeDefault, _ctrlTabSmGapInsideDefault, _ctrlTabSmPaddingHorizontalDefault, + _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, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 4991cb8aa6479..3a45db196930c 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -749,3 +749,43 @@ export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)'; * @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 index 91a35d688a911..b529a6ba789ab 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -17,6 +17,7 @@ import { ctrlInputBottomLineStrokePressedRaw, ctrlInputBackgroundDisabledRaw, } from '../components/input/variables'; +import { ctrlLinkForegroundBrandRestRaw } from '../components/link/variables'; import { ctrlListIndentLevel1Raw } from '../components/list/variables'; import { ctrlProgressBackgroundEmptyRaw, @@ -80,6 +81,10 @@ import { textGlobalBody3LineHeightRaw, foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, + backgroundFlyoutLumBlendRaw, + paddingContentSmallRaw, + textGlobalBody2FontSizeRaw, + statusInformativeTintForegroundRaw, } from '../control/variables'; import { colorTransparentBackground, @@ -154,6 +159,16 @@ import { colorNeutralForeground1Pressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, + colorNeutralBackgroundInverted, + colorNeutralForegroundInverted2, + shadow8, + colorBrandForeground1, + colorBrandForegroundInverted, + colorNeutralForegroundInverted, + colorStatusDangerForegroundInverted, + colorStatusSuccessForegroundInverted, + colorStatusWarningForeground1, + colorStatusWarningForegroundInverted, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, } from '../legacy/tokens'; @@ -204,6 +219,8 @@ import { foregroundCtrlActiveBrandPressedRaw, foregroundCtrlIconOnSubtleHoverRaw, foregroundCtrlIconOnSubtlePressedRaw, + foregroundContentNeutralSecondaryRaw, + textRampItemHeaderFontSizeRaw, } from '../optional/variables'; /** @@ -1438,6 +1455,181 @@ export const _ctrlTabSmGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spa * please use paddingCtrlHorizontalDefault instead. */ export const _ctrlTabSmPaddingHorizontalDefault = `var(${paddingCtrlHorizontalDefaultRaw}, ${spacingHorizontalSNudge})`; +/** + * 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. From abf24b6fa966cbbf8a66c7ff0ad72abee6ed861b Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Mon, 21 Jul 2025 12:59:35 -0400 Subject: [PATCH 52/66] add table to semantic style hooks (#34863) --- .../etc/semantic-style-hooks-preview.api.md | 68 +++++++ .../library/package.json | 3 +- .../src/component-styles/Table/index.ts | 17 ++ .../useSemanticDataGridBodyStyles.styles.ts | 22 +++ .../useSemanticDataGridCellStyles.styles.ts | 22 +++ ...SemanticDataGridHeaderCellStyles.styles.ts | 46 +++++ .../useSemanticDataGridHeaderStyles.styles.ts | 22 +++ .../useSemanticDataGridRowStyles.styles.ts | 29 +++ ...anticDataGridSelectionCellStyles.styles.ts | 38 ++++ .../Table/useSemanticDataGridStyles.styles.ts | 22 +++ .../useSemanticTableBodyStyles.styles.ts | 37 ++++ ...seSemanticTableCellActionsStyles.styles.ts | 42 +++++ ...useSemanticTableCellLayoutStyles.styles.ts | 133 ++++++++++++++ .../useSemanticTableCellStyles.styles.ts | 87 +++++++++ ...useSemanticTableHeaderCellStyles.styles.ts | 140 +++++++++++++++ .../useSemanticTableHeaderStyles.styles.ts | 37 ++++ ...eSemanticTableResizeHandleStyles.styles.ts | 63 +++++++ .../Table/useSemanticTableRowStyles.styles.ts | 166 ++++++++++++++++++ ...SemanticTableSelectionCellStyles.styles.ts | 105 +++++++++++ .../Table/useSemanticTableStyles.styles.ts | 53 ++++++ .../component-styles/semanticStyleHooks.ts | 37 ++++ .../library/src/index.ts | 19 ++ 22 files changed, 1207 insertions(+), 1 deletion(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridBodyStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridCellStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderCellStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridRowStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridSelectionCellStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableBodyStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellActionsStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellLayoutStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderCellStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableResizeHandleStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableRowStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableSelectionCellStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 4bb76911bab3d..0d3f13e38ce10 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -14,6 +14,13 @@ 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'; @@ -56,6 +63,16 @@ 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 { TextareaState } from '@fluentui/react-textarea'; @@ -108,6 +125,27 @@ 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; @@ -243,6 +281,36 @@ 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; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index b009bb64951a3..3d90b9eab97b1 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -56,8 +56,9 @@ "@fluentui/react-spinbutton": "^9.3.6", "@fluentui/react-spinner": "^9.5.11", "@fluentui/react-switch": "^9.2.6", - "@fluentui/react-tabster": "^9.24.6", + "@fluentui/react-table": "^9.16.6", "@fluentui/react-tabs": "^9.7.6", + "@fluentui/react-tabster": "^9.24.6", "@fluentui/react-text": "^9.4.36", "@fluentui/react-textarea": "^9.4.6", "@fluentui/react-theme": "^9.1.24", 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 0000000000000..862253cb16bbf --- /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 0000000000000..85775d78adbbc --- /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 0000000000000..e558cc8949be2 --- /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 0000000000000..38841e5a39817 --- /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 0000000000000..40525c9093e36 --- /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 0000000000000..ecb521a9afa2c --- /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 0000000000000..39a22fcc9ada1 --- /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 0000000000000..92ae97b6ca5b7 --- /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 0000000000000..e89b16e6f664d --- /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 0000000000000..e3cdf7a3b5819 --- /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 0000000000000..6cd3f5f6be377 --- /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 0000000000000..780e9e9bd82d7 --- /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 0000000000000..0e67c0511ab83 --- /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 0000000000000..dfd3782ee7ce5 --- /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 0000000000000..3f19979554c3b --- /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 0000000000000..40e406258dc25 --- /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 0000000000000..52b6e7a3a1470 --- /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 0000000000000..6fe2b5004059f --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 240a108c09ed0..c5f0b4047065e 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -81,6 +81,25 @@ import { } 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, @@ -190,6 +209,24 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // 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, diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index e52bf83283768..539edd6b0b4f2 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -84,6 +84,25 @@ export { 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, From 09f65f477fefffe31a087f1011a26e63ba7a3360 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Mon, 21 Jul 2025 11:48:35 -0700 Subject: [PATCH 53/66] Semantic Tokens: Fix classNames order in Avatar and Accordion (#34885) --- .../Accordion/useSemanticAccordionHeaderStyles.styles.ts | 8 ++++---- .../Avatar/useSemanticAvatarStyles.styles.ts | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) 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 index 48a48e466093f..d8bf14efef903 100644 --- 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 @@ -137,15 +137,16 @@ export const useSemanticAccordionHeaderStyles = (_state: unknown): AccordionHead const styles = useStyles(); state.root.className = mergeClasses( + state.root.className, accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, - state.root.className, getSlotClassNameProp_unstable(state.root), ); state.button.className = mergeClasses( + state.button.className, accordionHeaderClassNames.button, styles.resetButton, styles.button, @@ -157,26 +158,25 @@ export const useSemanticAccordionHeaderStyles = (_state: unknown): AccordionHead state.size === 'large' && styles.buttonLarge, state.size === 'extra-large' && styles.buttonExtraLarge, state.disabled && styles.buttonDisabled, - state.button.className, 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, - state.expandIcon.className, getSlotClassNameProp_unstable(state.expandIcon), ); } if (state.icon) { state.icon.className = mergeClasses( + state.icon.className, accordionHeaderClassNames.icon, styles.icon, - state.icon.className, getSlotClassNameProp_unstable(state.icon), ); } 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 index 319a01212a226..21c4066653dcb 100644 --- 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 @@ -563,31 +563,31 @@ export const useSemanticAvatarStyles = (_state: unknown): AvatarState => { if (state.badge) { state.badge.className = mergeClasses( + state.badge.className, avatarClassNames.badge, styles.badge, - state.badge.className, getSlotClassNameProp_unstable(state.badge), ); } if (state.image) { state.image.className = mergeClasses( + state.image.className, avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, - state.image.className, getSlotClassNameProp_unstable(state.image), ); } if (state.initials) { state.initials.className = mergeClasses( + state.initials.className, avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, - state.initials.className, getSlotClassNameProp_unstable(state.initials), ); } @@ -611,12 +611,12 @@ export const useSemanticAvatarStyles = (_state: unknown): AvatarState => { } state.icon.className = mergeClasses( + state.icon.className, avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, - state.icon.className, getSlotClassNameProp_unstable(state.icon), ); } From e9cdc39e1222fd6947beee85508c48a9e77f3c20 Mon Sep 17 00:00:00 2001 From: Xue <39594459+etudie@users.noreply.github.com> Date: Wed, 23 Jul 2025 19:49:51 -0400 Subject: [PATCH 54/66] Extended Tokens: Search (#34842) Co-authored-by: Mitch-At-Work --- .../etc/semantic-style-hooks-preview.api.md | 4 + .../library/package.json | 1 + .../src/component-styles/Search/index.ts | 1 + .../Search/useSemanticSearchStyles.styles.ts | 173 ++++++++++++++++++ .../component-styles/semanticStyleHooks.ts | 3 + .../library/src/index.ts | 1 + 6 files changed, 183 insertions(+) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Search/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Search/useSemanticSearchStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 0d3f13e38ce10..6c569ea3aa9ba 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -58,6 +58,7 @@ 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'; @@ -257,6 +258,9 @@ export const useSemanticRatingDisplayStyles: (_state: unknown) => RatingDisplayS // @public export const useSemanticRatingItemStyles: (_state: unknown) => RatingItemState; +// @public +export const useSemanticSearchBoxStyles: (_state: unknown) => SearchBoxState; + // @public export const useSemanticSliderStyles: (_state: unknown) => SliderState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 3d90b9eab97b1..3832885c5b102 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -51,6 +51,7 @@ "@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", 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 0000000000000..1b7c2b5aa82ea --- /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 0000000000000..3c644fda549af --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index c5f0b4047065e..185d5fcf373ce 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -107,6 +107,7 @@ import { useSemanticToastStyles, useSemanticToastTitleStyles, } from './Toast'; +import { useSemanticSearchBoxStyles } from './Search'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -183,6 +184,8 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useRadioStyles_unstable: useSemanticRadioStyles, // Persona styles usePersonaStyles_unstable: useSemanticPersonaStyles, + // Search styles + useSearchBoxStyles_unstable: useSemanticSearchBoxStyles, // Checkbox styles useCheckboxStyles_unstable: useSemanticCheckboxStyles, // Breadcrumb styles diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index 539edd6b0b4f2..ea730ec73cfed 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -110,3 +110,4 @@ export { useSemanticToastStyles, useSemanticToastTitleStyles, } from './component-styles/Toast'; +export { useSemanticSearchBoxStyles } from './component-styles/Search'; From fab0b12b73a15ef661b2cd48959426dc0942e05b Mon Sep 17 00:00:00 2001 From: Rachel Yoo <57475719+rachethecreator@users.noreply.github.com> Date: Wed, 23 Jul 2025 21:25:50 -0400 Subject: [PATCH 55/66] add teaching popover to semantic style hooks (#34898) Co-authored-by: Mitch-At-Work --- .../etc/semantic-style-hooks-preview.api.md | 48 +++++++++ .../library/package.json | 2 + .../component-styles/TeachingPopover/index.ts | 12 +++ ...emanticTeachingPopoverBodyStyles.styles.ts | 73 +++++++++++++ ...eachingPopoverCarouselCardStyles.styles.ts | 28 +++++ ...opoverCarouselFooterButtonStyles.styles.ts | 74 +++++++++++++ ...chingPopoverCarouselFooterStyles.styles.ts | 58 ++++++++++ ...ngPopoverCarouselNavButtonStyles.styles.ts | 92 ++++++++++++++++ ...TeachingPopoverCarouselNavStyles.styles.ts | 41 +++++++ ...ngPopoverCarouselPageCountStyles.styles.ts | 38 +++++++ ...ticTeachingPopoverCarouselStyles.styles.ts | 26 +++++ ...anticTeachingPopoverFooterStyles.styles.ts | 78 ++++++++++++++ ...anticTeachingPopoverHeaderStyles.styles.ts | 100 ++++++++++++++++++ ...nticTeachingPopoverSurfaceStyles.styles.ts | 39 +++++++ ...manticTeachingPopoverTitleStyles.styles.ts | 78 ++++++++++++++ .../component-styles/semanticStyleHooks.ts | 27 +++++ .../library/src/index.ts | 14 +++ .../etc/semantic-tokens.api.md | 3 + .../src/fluentLegacyVariants.ts | 4 + packages/semantic-tokens/src/index.ts | 1 + .../src/legacyVariant/tokens.ts | 7 ++ 21 files changed, 843 insertions(+) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverBodyStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselCardStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselFooterButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselFooterStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselNavButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselNavStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselPageCountStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverCarouselStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverFooterStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverHeaderStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverSurfaceStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverTitleStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 6c569ea3aa9ba..cef2854629e34 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -76,6 +76,18 @@ 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'; @@ -321,6 +333,42 @@ 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; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 3832885c5b102..46da5050ba4d6 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -47,6 +47,7 @@ "@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", @@ -60,6 +61,7 @@ "@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", 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 0000000000000..333b4345df99d --- /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 0000000000000..a997611b36869 --- /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 0000000000000..cb1af6c68b059 --- /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 0000000000000..5bd275cfbbadf --- /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 0000000000000..ddbd51bf90bd8 --- /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 0000000000000..5dacc073f0e5d --- /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 0000000000000..eb9ed952d8412 --- /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 0000000000000..cd3b9d11f40c8 --- /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 0000000000000..edd184e0fdde3 --- /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 0000000000000..0b1179a2a097e --- /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 0000000000000..0ebcab914e8f1 --- /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 0000000000000..e48d75c7426a9 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverSurfaceStyles.styles.ts @@ -0,0 +1,39 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { teachingPopoverSurfaceClassNames, type TeachingPopoverSurfaceState } from '@fluentui/react-teaching-popover'; +import { usePopoverSurfaceStyles_unstable } from '@fluentui/react-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 = usePopoverSurfaceStyles_unstable(state); + // 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 0000000000000..fa953b7aed620 --- /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/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 185d5fcf373ce..1a966a1480927 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -108,6 +108,20 @@ import { 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 @@ -236,4 +250,17 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { 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 index ea730ec73cfed..d6f8d1d2786c1 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -111,3 +111,17 @@ export { 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/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 26e5a5a9ff84c..b552a0b965676 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -3226,6 +3226,9 @@ export const _ctrlTabSmGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, v // @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))"; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 99e30e8cbc0d8..8edd767babc5f 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -717,6 +717,10 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'spacingHorizontalSNudge', originalToken: 'paddingCtrlHorizontalDefault', }, + _ctrlTeachingPopoverSurfaceCorner: { + f2Token: 'borderRadiusXLarge', + originalToken: 'cornerFlyoutRest', + }, _ctrlToastBackgroundFlyoutLumBlend: { f2Token: 'colorNeutralBackgroundInverted', originalToken: 'backgroundFlyoutLumBlend', diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 2f8d8773a3ca5..a52e0b9fed6f7 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1958,6 +1958,7 @@ export { _ctrlTabSizeDefault, _ctrlTabSmGapInsideDefault, _ctrlTabSmPaddingHorizontalDefault, + _ctrlTeachingPopoverSurfaceCorner, _ctrlToastBackgroundFlyoutLumBlend, _ctrlToastBodyForegroundContentNeutralPrimary, _ctrlToastBodyForegroundContentNeutralSecondary, diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index b529a6ba789ab..772361b4758da 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -1455,6 +1455,13 @@ export const _ctrlTabSmGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spa * 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. From e268d65af009dd33d809e29617fe085e2ce70de3 Mon Sep 17 00:00:00 2001 From: Xue <39594459+etudie@users.noreply.github.com> Date: Thu, 24 Jul 2025 19:41:31 -0400 Subject: [PATCH 56/66] Semantic Tokens: Popover (#34907) Co-authored-by: Mitch-At-Work --- .../src/component-styles/Popover/index.ts | 1 + .../useSemanticPopoverStyles.styles.ts | 90 +++++++++++++++++++ ...nticTeachingPopoverSurfaceStyles.styles.ts | 6 +- .../component-styles/semanticStyleHooks.ts | 3 + .../etc/semantic-tokens.api.md | 8 +- .../semantic-tokens/src/control/tokens.ts | 2 +- .../src/fluentLegacyVariants.ts | 8 ++ .../semantic-tokens/src/fluentOverrides.ts | 13 +-- packages/semantic-tokens/src/index.ts | 2 + .../src/legacyVariant/tokens.ts | 15 ++++ 10 files changed, 133 insertions(+), 15 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Popover/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Popover/useSemanticPopoverStyles.styles.ts 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 0000000000000..b2e34657a7ccf --- /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 0000000000000..4616753b6e41e --- /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/TeachingPopover/useSemanticTeachingPopoverSurfaceStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/TeachingPopover/useSemanticTeachingPopoverSurfaceStyles.styles.ts index e48d75c7426a9..773501f0e07ec 100644 --- 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 @@ -1,8 +1,7 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; import { teachingPopoverSurfaceClassNames, type TeachingPopoverSurfaceState } from '@fluentui/react-teaching-popover'; -import { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover'; -// import { useSemanticPopoverSurfaceStyles } from '../Popover'; +import { useSemanticPopoverSurfaceStyles } from '../Popover'; import * as semanticTokens from '@fluentui/semantic-tokens'; const useStyles = makeStyles({ @@ -32,8 +31,7 @@ export const useSemanticTeachingPopoverSurfaceStyles = (_state: unknown): Teachi getSlotClassNameProp_unstable(state.root), ); - const updatedState = usePopoverSurfaceStyles_unstable(state); - // const updatedState = useSemanticPopoverSurfaceStyles(state); + const updatedState = useSemanticPopoverSurfaceStyles(state); return updatedState; }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 1a966a1480927..cf974901cdde4 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -70,6 +70,7 @@ import { useSemanticBreadcrumbItemStyles, } from './Breadcrumb'; import { useSemanticSpinButtonStyles } from './SpinButton'; +import { useSemanticPopoverSurfaceStyles } from './Popover'; import { useSemanticInputStyles } from './Input/useSemanticInputStyles.styles'; import { useSemanticToolbarStyles, @@ -198,6 +199,8 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useRadioStyles_unstable: useSemanticRadioStyles, // Persona styles usePersonaStyles_unstable: useSemanticPersonaStyles, + // Popover styles + usePopoverSurfaceStyles_unstable: useSemanticPopoverSurfaceStyles, // Search styles useSearchBoxStyles_unstable: useSemanticSearchBoxStyles, // Checkbox styles diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index b552a0b965676..64d2b80f91c3a 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -2491,6 +2491,12 @@ export const _ctrlMessageBarTitleLineHeight = "var(--smtc-text-ramp-item-header- // @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))"; @@ -4603,7 +4609,7 @@ export const paddingContentLarge = "var(--smtc-padding-content-large, var(--spac export const paddingContentLargeRaw = "--smtc-padding-content-large"; // @public (undocumented) -export const paddingContentMedium = "var(--smtc-padding-content-medium)"; +export const paddingContentMedium = "var(--smtc-padding-content-medium, 16px)"; // @public (undocumented) export const paddingContentMediumRaw = "--smtc-padding-content-medium"; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index 84978cce9facb..987510dbda5c2 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -323,7 +323,7 @@ export const paddingContentAlignOutdentTextOnSubtle = `var(${paddingContentAlign export const paddingContentXxSmall = `var(${paddingContentXxSmallRaw})`; export const paddingContentXSmall = `var(${paddingContentXSmallRaw})`; export const paddingContentSmall = `var(${paddingContentSmallRaw}, 12px)`; -export const paddingContentMedium = `var(${paddingContentMediumRaw})`; +export const paddingContentMedium = `var(${paddingContentMediumRaw}, 16px)`; export const paddingContentLarge = `var(${paddingContentLargeRaw}, ${spacingHorizontalXXL})`; export const paddingContentXLarge = `var(${paddingContentXLargeRaw})`; export const paddingContentXxLarge = `var(${paddingContentXxLargeRaw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 8edd767babc5f..7d08caf815dc4 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -481,6 +481,14 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { 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', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index d5a33d0555ae6..8c90338408470 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -155,15 +155,9 @@ export const fluentOverrides: FluentOverrides = { ctrlSliderThumbSizePressed: { rawValue: '20px' }, ctrlSliderThumbSizeRest: { rawValue: '20px' }, ctrlSpinnerStrokeWidth: { f2Token: 'strokeWidthThicker' }, - ctrlTooltipBackground: { - f2Token: 'colorNeutralBackground1', - }, - ctrlTooltipCorner: { - f2Token: 'borderRadiusMedium', - }, - ctrlTooltipForeground: { - f2Token: 'colorNeutralForeground1', - }, + 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))`, @@ -224,6 +218,7 @@ export const fluentOverrides: FluentOverrides = { paddingContentAlignDefault: { f2Token: 'spacingVerticalS' }, paddingContentAlignOutdentIconOnSubtle: { f2Token: 'spacingHorizontalM' }, paddingContentLarge: { f2Token: 'spacingHorizontalXXL' }, + paddingContentMedium: { rawValue: '16px' }, paddingContentNone: { f2Token: 'spacingHorizontalNone' }, paddingContentSmall: { rawValue: '12px' }, paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index a52e0b9fed6f7..3b6862e91652f 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1899,6 +1899,8 @@ export { _ctrlMessageBarSpacingTop, _ctrlMessageBarTitleLineHeight, _ctrlPersonaTreeIconOnSubtlePressed, + _ctrlPopoverPaddingContentLarge, + _ctrlPopoverShadowFilter, _ctrlRadioBackgroundActiveBrandHover, _ctrlRadioBackgroundActiveBrandPressed, _ctrlRadioBackgroundActiveBrandRest, diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 772361b4758da..3ccc18fd6acd5 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -70,6 +70,7 @@ import { gapBetweenCtrlDefaultRaw, paddingContentAlignOutdentIconOnSubtleRaw, textGlobalBody2LineHeightRaw, + paddingContentLargeRaw, backgroundCtrlBrandDisabledRaw, sizeCtrlIconRaw, foregroundCtrlOnBrandRestRaw, @@ -1042,6 +1043,20 @@ export const _ctrlMessageBarTitleLineHeight = `var(${textRampItemHeaderLineHeigh * 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. From 4a4a645abeb3c6fb45cde50ab5f91deff07acac4 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Tue, 5 Aug 2025 10:31:43 -0700 Subject: [PATCH 57/66] Rebase and fix rebase conflict --- .../TreeItemLayout/useTreeItemLayoutStyles.styles.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts b/packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts index 05d682d1510bb..4d1ab56638ed9 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts +++ b/packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts @@ -39,14 +39,6 @@ const useRootBaseStyles = makeResetStyles({ color: tokens.colorNeutralForeground3Pressed, }, }, - ':active': { - color: tokens.colorNeutralForeground2Pressed, - backgroundColor: tokens.colorSubtleBackgroundPressed, - // TODO: stop using treeItemLayoutClassNames.expandIcon for styling - [`& .${treeItemLayoutClassNames.expandIcon}`]: { - color: tokens.colorNeutralForeground3Pressed, - }, - }, }); /** From 58d622dbbf7947bba4f710666e25e3427160770d Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Tue, 5 Aug 2025 13:53:15 -0700 Subject: [PATCH 58/66] Remove storybook changes (for now) --- ...-c9a2a07b-3285-40b5-820a-ddcb8b185189.json | 7 - .../etc/react-storybook-addon.api.md | 3 - .../src/decorators/withFluentProvider.tsx | 3 +- .../etc/semantic-tokens.api.md | 542 ----------------- packages/semantic-tokens/scripts/tokenGen.ts | 7 - packages/semantic-tokens/src/index.ts | 1 - .../semantic-tokens/src/themes/kumoTheme.ts | 547 ------------------ 7 files changed, 1 insertion(+), 1109 deletions(-) delete mode 100644 change/@fluentui-react-storybook-addon-c9a2a07b-3285-40b5-820a-ddcb8b185189.json delete mode 100644 packages/semantic-tokens/src/themes/kumoTheme.ts diff --git a/change/@fluentui-react-storybook-addon-c9a2a07b-3285-40b5-820a-ddcb8b185189.json b/change/@fluentui-react-storybook-addon-c9a2a07b-3285-40b5-820a-ddcb8b185189.json deleted file mode 100644 index 3d1facbb55f4f..0000000000000 --- a/change/@fluentui-react-storybook-addon-c9a2a07b-3285-40b5-820a-ddcb8b185189.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "docs: Temporarily add kumo semantic theme (will be removed before merge)", - "packageName": "@fluentui/react-storybook-addon", - "email": "mifraser@microsoft.com", - "dependentChangeType": "none" -} diff --git a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md index d1c6f2a1aa3cd..2d6fd538018df 100644 --- a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md +++ b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md @@ -83,9 +83,6 @@ export const themes: readonly [{ }, { readonly id: "teams-high-contrast"; readonly label: "Teams High Contrast"; -}, { - readonly id: "semantic-kumo"; - readonly label: "Semantic Kumo (Experimental)"; }]; // (No @packageDocumentation comment for this package) diff --git a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx index 7b25c42215555..6719fc1dde37a 100644 --- a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx +++ b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx @@ -16,7 +16,6 @@ import { defaultTheme, ThemeIds } from '../theme'; import { DIR_ID, THEME_ID } from '../constants'; import { FluentStoryContext } from '../hooks'; import { isDecoratorDisabled } from '../utils/isDecoratorDisabled'; -import { SEMANTIC_STYLE_HOOKS } from '@fluentui/semantic-style-hooks-preview'; const themes: Record = { 'web-light': webLightTheme, @@ -47,7 +46,7 @@ export const withFluentProvider = (StoryFn: () => JSXElement, context: FluentSto const theme = paramTheme ?? globalTheme ?? themes[defaultTheme.id]; return ( - + {isVrTest ? StoryFn() : {StoryFn()}} ); diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 64d2b80f91c3a..8b3694488117a 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -3910,548 +3910,6 @@ export const iconThemeCtrlSubtleSelected = "var(--smtc-icon-theme-ctrl-subtle-se // @public (undocumented) export const iconThemeCtrlSubtleSelectedRaw = "--smtc-icon-theme-ctrl-subtle-selected"; -// @public -export const kumoSemanticTokens: { - 'smtc-ai-brand-stop1': string; - 'smtc-ai-brand-stop2': string; - 'smtc-ai-brand-stop3': string; - 'smtc-ai-brand-stop4': string; - 'smtc-ai-shimmer-stop1': string; - 'smtc-ai-shimmer-stop2': string; - 'smtc-ai-shimmer-stop3': string; - 'smtc-ai-shimmer-stop4': string; - 'smtc-background-card-on-flyout-default-disabled': string; - 'smtc-background-card-on-flyout-default-hover': string; - 'smtc-background-card-on-flyout-default-pressed': string; - 'smtc-background-card-on-flyout-default-rest': string; - 'smtc-background-card-on-primary-alt-disabled': string; - 'smtc-background-card-on-primary-alt-hover': string; - 'smtc-background-card-on-primary-alt-pressed': string; - 'smtc-background-card-on-primary-alt-rest': string; - 'smtc-background-card-on-primary-default-disabled': string; - 'smtc-background-card-on-primary-default-hover': string; - 'smtc-background-card-on-primary-default-pressed': string; - 'smtc-background-card-on-primary-default-rest': string; - 'smtc-background-card-on-primary-default-selected': string; - 'smtc-background-card-on-secondary-alt-disabled': string; - 'smtc-background-card-on-secondary-alt-hover': string; - 'smtc-background-card-on-secondary-alt-pressed': string; - 'smtc-background-card-on-secondary-alt-rest': string; - 'smtc-background-card-on-secondary-default-disabled': string; - 'smtc-background-card-on-secondary-default-hover': string; - 'smtc-background-card-on-secondary-default-pressed': string; - 'smtc-background-card-on-secondary-default-rest': string; - 'smtc-background-ctrl-brand-disabled': string; - 'smtc-background-ctrl-brand-hover': string; - 'smtc-background-ctrl-brand-pressed': string; - 'smtc-background-ctrl-brand-rest': string; - 'smtc-background-ctrl-neutral-disabled': string; - 'smtc-background-ctrl-neutral-hover': string; - 'smtc-background-ctrl-neutral-pressed': string; - 'smtc-background-ctrl-neutral-rest': string; - 'smtc-background-ctrl-shape-safe-active-brand-disabled': string; - 'smtc-background-ctrl-shape-safe-neutral-hover': string; - 'smtc-background-ctrl-shape-safe-neutral-pressed': string; - 'smtc-background-ctrl-shape-safe-neutral-rest': string; - 'smtc-background-ctrl-subtle-hover': string; - 'smtc-background-ctrl-subtle-pressed': string; - 'smtc-background-flyout-color-blend': string; - 'smtc-background-flyout-lum-blend': string; - 'smtc-background-flyout-solid': string; - 'smtc-background-layer-primary-solid': string; - 'smtc-background-layer-secondary': string; - 'smtc-background-layer-tertiary': string; - 'smtc-background-smoke': string; - 'smtc-background-web-page-primary': string; - 'smtc-background-web-page-secondary': string; - 'smtc-background-window-primary-color-blend': string; - 'smtc-background-window-primary-lum-blend': string; - 'smtc-background-window-primary-solid': string; - 'smtc-background-window-secondary-color-blend': string; - 'smtc-background-window-secondary-lum-blend': string; - 'smtc-background-window-secondary-solid': string; - 'smtc-background-window-tab-band-color-blend': string; - 'smtc-background-window-tab-band-lum-blend': string; - 'smtc-background-window-tab-band-solid': string; - 'smtc-corner-bezel': string; - 'smtc-corner-card-rest': string; - 'smtc-corner-circular': string; - 'smtc-corner-ctrl-lg-rest': string; - 'smtc-corner-ctrl-rest': string; - 'smtc-corner-ctrl-sm-rest': string; - 'smtc-corner-flyout-rest': string; - 'smtc-corner-flyout-shell-rest': string; - 'smtc-corner-image-in-card': string; - 'smtc-corner-image-on-page': string; - 'smtc-corner-layer-default': string; - 'smtc-corner-toolbar-default': string; - 'smtc-corner-window-default': string; - 'smtc-corner-zero': string; - 'smtc-ctrl-avatar-active-ring-size': string; - 'smtc-ctrl-avatar-active-ring-stroke': string; - 'smtc-ctrl-avatar-active-ring-stroke-width': string; - 'smtc-ctrl-avatar-background': string; - 'smtc-ctrl-avatar-corner-group': string; - 'smtc-ctrl-avatar-foreground': string; - 'smtc-ctrl-avatar-icon-size': string; - 'smtc-ctrl-avatar-presence-badge-padding-bottom-right-offset': string; - 'smtc-ctrl-avatar-presence-badge-size': string; - 'smtc-ctrl-avatar-show-cutout': string; - 'smtc-ctrl-avatar-text-font-size': string; - 'smtc-ctrl-avatar-text-line-height': string; - 'smtc-ctrl-avatar-text-padding-top-offset': string; - 'smtc-ctrl-badge-beacon-size': string; - 'smtc-ctrl-badge-corner': string; - 'smtc-ctrl-badge-gap': string; - 'smtc-ctrl-badge-icon-size': string; - 'smtc-ctrl-badge-icon-size-figmaonly': string; - 'smtc-ctrl-badge-lg-corner': string; - 'smtc-ctrl-badge-lg-icon-size': string; - 'smtc-ctrl-badge-lg-icon-size-figmaonly': string; - 'smtc-ctrl-badge-lg-padding': string; - 'smtc-ctrl-badge-lg-size': string; - 'smtc-ctrl-badge-lg-text-padding-top': string; - 'smtc-ctrl-badge-padding': string; - 'smtc-ctrl-badge-size': string; - 'smtc-ctrl-badge-sm-corner': string; - 'smtc-ctrl-badge-sm-icon-size': string; - 'smtc-ctrl-badge-sm-icon-size-figmaonly': string; - 'smtc-ctrl-badge-sm-padding': string; - 'smtc-ctrl-badge-sm-size': string; - 'smtc-ctrl-badge-sm-text-padding-top': string; - 'smtc-ctrl-badge-text-padding-top': string; - 'smtc-ctrl-boolean-selection-hint': string; - 'smtc-ctrl-card-state-disabled': string; - 'smtc-ctrl-card-state-hover': string; - 'smtc-ctrl-card-state-pressed': string; - 'smtc-ctrl-card-state-rest': string; - 'smtc-ctrl-choice-base-background-disabled': string; - 'smtc-ctrl-choice-base-background-hover': string; - 'smtc-ctrl-choice-base-background-pressed': string; - 'smtc-ctrl-choice-base-background-rest': string; - 'smtc-ctrl-choice-base-stroke-hover': string; - 'smtc-ctrl-choice-base-stroke-pressed': string; - 'smtc-ctrl-choice-checkbox-corner': string; - 'smtc-ctrl-choice-checkbox-icon-size': string; - 'smtc-ctrl-choice-checkbox-indeterminate-height': string; - 'smtc-ctrl-choice-checkbox-indeterminate-width': string; - 'smtc-ctrl-choice-icon-theme': string; - 'smtc-ctrl-choice-lg-base-size': string; - 'smtc-ctrl-choice-lg-checkbox-corner': string; - 'smtc-ctrl-choice-lg-checkbox-icon-size': string; - 'smtc-ctrl-choice-lg-checkbox-icon-size-figmaonly': string; - 'smtc-ctrl-choice-lg-radio-dot-size-hover': string; - 'smtc-ctrl-choice-lg-radio-dot-size-pressed': string; - 'smtc-ctrl-choice-lg-radio-dot-size-rest': string; - 'smtc-ctrl-choice-lg-switch-height': string; - 'smtc-ctrl-choice-lg-switch-thumb-width-hover': string; - 'smtc-ctrl-choice-lg-switch-thumb-width-pressed': string; - 'smtc-ctrl-choice-lg-switch-thumb-width-rest': string; - 'smtc-ctrl-choice-lg-switch-width': string; - 'smtc-ctrl-choice-padding-horizontal': string; - 'smtc-ctrl-choice-padding-vertical': string; - 'smtc-ctrl-choice-radio-dot-size-rest': string; - 'smtc-ctrl-choice-sm-checkbox-corner': string; - 'smtc-ctrl-choice-sm-checkbox-icon-size': string; - 'smtc-ctrl-choice-sm-checkbox-icon-size-figmaonly': string; - 'smtc-ctrl-choice-sm-radio-dot-size': string; - 'smtc-ctrl-choice-sm-switch-height': string; - 'smtc-ctrl-choice-sm-switch-thumb-width-hover': string; - 'smtc-ctrl-choice-sm-switch-thumb-width-pressed': string; - 'smtc-ctrl-choice-sm-switch-thumb-width-rest': string; - 'smtc-ctrl-choice-sm-switch-width': string; - 'smtc-ctrl-choice-switch-padding-rest': string; - 'smtc-ctrl-choice-switch-thumb-shadow-ambient': string; - 'smtc-ctrl-choice-switch-thumb-shadow-key': string; - 'smtc-ctrl-choice-switch-thumb-width-pressed': string; - 'smtc-ctrl-choice-switch-thumb-width-rest': string; - 'smtc-ctrl-choice-switch-width': string; - 'smtc-ctrl-composer-container-background-default': string; - 'smtc-ctrl-composer-container-corner': string; - 'smtc-ctrl-composer-container-shadow-ambient': string; - 'smtc-ctrl-composer-container-shadow-key': string; - 'smtc-ctrl-composer-input-background-disabled': string; - 'smtc-ctrl-composer-input-background-hover': string; - 'smtc-ctrl-composer-input-background-pressed': string; - 'smtc-ctrl-composer-input-background-rest': string; - 'smtc-ctrl-composer-input-background-selected-rest': string; - 'smtc-ctrl-composer-input-bottom-stroke-width-hover': string; - 'smtc-ctrl-composer-input-bottom-stroke-width-pressed': string; - 'smtc-ctrl-composer-input-bottom-stroke-width-rest': string; - 'smtc-ctrl-composer-input-bottom-stroke-width-selected-rest': string; - 'smtc-ctrl-composer-input-corner-hover': string; - 'smtc-ctrl-composer-input-corner-pressed': string; - 'smtc-ctrl-composer-input-corner-rest': string; - 'smtc-ctrl-composer-input-shadow': string; - 'smtc-ctrl-composer-input-shadow-x-offset': string; - 'smtc-ctrl-composer-input-stroke-disabled': string; - 'smtc-ctrl-composer-input-stroke-hover': string; - 'smtc-ctrl-composer-input-stroke-pressed': string; - 'smtc-ctrl-composer-input-stroke-selected-rest': string; - 'smtc-ctrl-composer-input-stroke-width-hover': string; - 'smtc-ctrl-composer-input-stroke-width-pressed': string; - 'smtc-ctrl-composer-input-stroke-width-rest': string; - 'smtc-ctrl-composer-input-stroke-width-selected-rest': string; - 'smtc-ctrl-dialog-background': string; - 'smtc-ctrl-dialog-base-corner': string; - 'smtc-ctrl-dialog-base-shadow-ambient': string; - 'smtc-ctrl-dialog-base-shadow-key': string; - 'smtc-ctrl-dialog-layer-padding-bottom': string; - 'smtc-ctrl-divider-fixed-line-length': string; - 'smtc-ctrl-drag-background-color-blend': string; - 'smtc-ctrl-drag-background-lum-blend': string; - 'smtc-ctrl-drag-background-solid': string; - 'smtc-ctrl-fab-background-disabled': string; - 'smtc-ctrl-fab-background-hover': string; - 'smtc-ctrl-fab-background-pressed': string; - 'smtc-ctrl-fab-background-rest': string; - 'smtc-ctrl-fab-corner-hover': string; - 'smtc-ctrl-fab-corner-pressed': string; - 'smtc-ctrl-fab-corner-rest': string; - 'smtc-ctrl-fab-shadow-disabled-key': string; - 'smtc-ctrl-fab-shadow-hover-key': string; - 'smtc-ctrl-fab-shadow-pressed-key': string; - 'smtc-ctrl-fab-shadow-rest-ambient': string; - 'smtc-ctrl-fab-shadow-rest-key': string; - 'smtc-ctrl-focus-inner-stroke': string; - 'smtc-ctrl-focus-outer-stroke-width': string; - 'smtc-ctrl-focus-position-figmaonly': string; - 'smtc-ctrl-input-bottom-line-stroke-hover': string; - 'smtc-ctrl-input-bottom-line-stroke-pressed': string; - 'smtc-ctrl-input-bottom-line-stroke-rest': string; - 'smtc-ctrl-input-bottom-line-stroke-width-selected': string; - 'smtc-ctrl-input-stroke-disabled': string; - 'smtc-ctrl-input-stroke-error': string; - 'smtc-ctrl-input-stroke-hover': string; - 'smtc-ctrl-input-stroke-pressed': string; - 'smtc-ctrl-input-stroke-rest': string; - 'smtc-ctrl-input-stroke-selected': string; - 'smtc-ctrl-input-stroke-width-selected': string; - 'smtc-ctrl-link-foreground-brand-hover': string; - 'smtc-ctrl-link-foreground-brand-pressed': string; - 'smtc-ctrl-link-foreground-brand-rest': string; - 'smtc-ctrl-link-inline-show-underline-at-rest': string; - 'smtc-ctrl-link-inline-underline-dashed': string; - 'smtc-ctrl-link-inline-underline-solid-figmaonly': string; - 'smtc-ctrl-link-on-page-show-underline-at-rest': string; - 'smtc-ctrl-link-on-page-underline-dashed': string; - 'smtc-ctrl-link-on-page-underline-solid-figmaonly': string; - 'smtc-ctrl-list-background-selected-disabled': string; - 'smtc-ctrl-list-background-selected-hover': string; - 'smtc-ctrl-list-background-selected-pressed': string; - 'smtc-ctrl-list-background-selected-rest': string; - 'smtc-ctrl-list-choice-checkbox-corner': string; - 'smtc-ctrl-list-choice-checkbox-icon-size': string; - 'smtc-ctrl-list-choice-checkbox-icon-size-figmaonly': string; - 'smtc-ctrl-list-choice-dot-size': string; - 'smtc-ctrl-list-choice-dot-size-figmaonly': string; - 'smtc-ctrl-list-choice-foreground-hover': string; - 'smtc-ctrl-list-indent-level2': string; - 'smtc-ctrl-list-indent-level3': string; - 'smtc-ctrl-list-lg-indent-level1': string; - 'smtc-ctrl-list-lg-indent-level2': string; - 'smtc-ctrl-list-lg-indent-level3': string; - 'smtc-ctrl-list-pill-full-width': string; - 'smtc-ctrl-list-pill-length-rest': string; - 'smtc-ctrl-list-pill-stretch-padding-default': string; - 'smtc-ctrl-list-pill-stretch-padding-hint': string; - 'smtc-ctrl-list-pill-width': string; - 'smtc-ctrl-list-shadow-selected-ambient': string; - 'smtc-ctrl-list-shadow-selected-key': string; - 'smtc-ctrl-list-sm-indent-level2': string; - 'smtc-ctrl-list-sm-indent-level3': string; - 'smtc-ctrl-list-split-divider-padding-inset': string; - 'smtc-ctrl-list-split-divider-show-divider': string; - 'smtc-ctrl-list-split-divider-stroke': string; - 'smtc-ctrl-lite-filter-background-selected': string; - 'smtc-ctrl-lite-filter-foreground-selected': string; - 'smtc-ctrl-lite-filter-stroke-selected': string; - 'smtc-ctrl-progress-background-empty': string; - 'smtc-ctrl-progress-height-filled': string; - 'smtc-ctrl-progress-lg-height-filled': string; - 'smtc-ctrl-progress-sm-height-filled': string; - 'smtc-ctrl-rating-icon-gap': string; - 'smtc-ctrl-rating-icon-size': string; - 'smtc-ctrl-rating-icon-theme': string; - 'smtc-ctrl-segmented-background-disabled': string; - 'smtc-ctrl-segmented-background-hover': string; - 'smtc-ctrl-segmented-background-pressed': string; - 'smtc-ctrl-segmented-background-rest': string; - 'smtc-ctrl-segmented-lg-corner-hover': string; - 'smtc-ctrl-segmented-lg-corner-pressed': string; - 'smtc-ctrl-segmented-lg-corner-rest': string; - 'smtc-ctrl-segmented-lg-item-corner-hover': string; - 'smtc-ctrl-segmented-lg-item-corner-pressed': string; - 'smtc-ctrl-segmented-lg-item-corner-rest': string; - 'smtc-ctrl-segmented-lg-padding-rest': string; - 'smtc-ctrl-segmented-padding-hover': string; - 'smtc-ctrl-segmented-padding-pressed': string; - 'smtc-ctrl-segmented-padding-rest': string; - 'smtc-ctrl-segmented-sm-corner-hover': string; - 'smtc-ctrl-segmented-sm-corner-pressed': string; - 'smtc-ctrl-segmented-sm-corner-rest': string; - 'smtc-ctrl-segmented-sm-item-corner-rest': string; - 'smtc-ctrl-segmented-sm-padding-rest': string; - 'smtc-ctrl-segmented-stroke-disabled': string; - 'smtc-ctrl-segmented-stroke-hover': string; - 'smtc-ctrl-segmented-stroke-pressed': string; - 'smtc-ctrl-segmented-stroke-rest': string; - 'smtc-ctrl-slider-bar-foreground-empty-disabled': string; - 'smtc-ctrl-slider-bar-foreground-empty-hover': string; - 'smtc-ctrl-slider-bar-foreground-empty-pressed': string; - 'smtc-ctrl-slider-bar-foreground-empty-rest': string; - 'smtc-ctrl-slider-bar-foreground-filled-disabled': string; - 'smtc-ctrl-slider-bar-foreground-filled-hover': string; - 'smtc-ctrl-slider-bar-foreground-filled-pressed': string; - 'smtc-ctrl-slider-lg-bar-height': string; - 'smtc-ctrl-slider-lg-thumb-size-hover': string; - 'smtc-ctrl-slider-lg-thumb-size-pressed': string; - 'smtc-ctrl-slider-lg-thumb-size-rest': string; - 'smtc-ctrl-slider-sm-bar-height': string; - 'smtc-ctrl-slider-sm-thumb-size-hover': string; - 'smtc-ctrl-slider-sm-thumb-size-pressed': string; - 'smtc-ctrl-slider-sm-thumb-size-rest': string; - 'smtc-ctrl-slider-thumb-background-hover': string; - 'smtc-ctrl-slider-thumb-background-pressed': string; - 'smtc-ctrl-slider-thumb-background-rest': string; - 'smtc-ctrl-slider-thumb-inner-stroke-disabled': string; - 'smtc-ctrl-slider-thumb-inner-stroke-hover': string; - 'smtc-ctrl-slider-thumb-inner-stroke-pressed': string; - 'smtc-ctrl-slider-thumb-inner-stroke-rest': string; - 'smtc-ctrl-slider-thumb-inner-stroke-width-rest': string; - 'smtc-ctrl-slider-thumb-outer-stroke-hover': string; - 'smtc-ctrl-slider-thumb-outer-stroke-pressed': string; - 'smtc-ctrl-slider-thumb-outer-stroke-rest': string; - 'smtc-ctrl-slider-thumb-size-hover': string; - 'smtc-ctrl-slider-thumb-size-pressed': string; - 'smtc-ctrl-spinner-show-empty-track': string; - 'smtc-ctrl-tooltip-background': string; - 'smtc-ctrl-tooltip-foreground': string; - 'smtc-ctrl-tooltip-shadow-ambient': string; - 'smtc-ctrl-tooltip-shadow-key': string; - 'smtc-foreground-ctrl-brand-disabled': string; - 'smtc-foreground-ctrl-brand-hover': string; - 'smtc-foreground-ctrl-brand-pressed': string; - 'smtc-foreground-ctrl-brand-rest': string; - 'smtc-foreground-ctrl-hint-default': string; - 'smtc-foreground-ctrl-neutral-primary-disabled': string; - 'smtc-foreground-ctrl-neutral-primary-rest': string; - 'smtc-foreground-ctrl-neutral-secondary-disabled': string; - 'smtc-foreground-ctrl-neutral-secondary-rest': string; - 'smtc-foreground-ctrl-on-brand-disabled': string; - 'smtc-foreground-ctrl-on-brand-rest': string; - 'smtc-foreground-ctrl-on-subtle-hover': string; - 'smtc-foreground-ctrl-on-subtle-pressed': string; - 'smtc-gap-between-card': string; - 'smtc-gap-between-content-large': string; - 'smtc-gap-between-content-medium': string; - 'smtc-gap-between-content-none': string; - 'smtc-gap-between-content-small': string; - 'smtc-gap-between-content-x-large': string; - 'smtc-gap-between-content-x-small': string; - 'smtc-gap-between-content-xx-large': string; - 'smtc-gap-between-content-xx-small': string; - 'smtc-gap-between-ctrl-default': string; - 'smtc-gap-between-ctrl-lg-default': string; - 'smtc-gap-between-ctrl-nested': string; - 'smtc-gap-between-ctrl-sm-default': string; - 'smtc-gap-between-list-item': string; - 'smtc-gap-between-text-large': string; - 'smtc-gap-between-text-small': string; - 'smtc-gap-inside-ctrl-default': string; - 'smtc-gap-inside-ctrl-lg-default': string; - 'smtc-gap-inside-ctrl-lg-to-label': string; - 'smtc-gap-inside-ctrl-lg-to-secondary-icon': string; - 'smtc-gap-inside-ctrl-sm-default': string; - 'smtc-gap-inside-ctrl-sm-to-label': string; - 'smtc-gap-inside-ctrl-sm-to-secondary-icon': string; - 'smtc-gap-inside-ctrl-to-label': string; - 'smtc-gap-inside-ctrl-to-secondary-icon': string; - 'smtc-icon-theme-ctrl-default-hover': string; - 'smtc-icon-theme-ctrl-default-pressed': string; - 'smtc-icon-theme-ctrl-default-rest': string; - 'smtc-icon-theme-ctrl-default-selected': string; - 'smtc-icon-theme-ctrl-subtle-hover': string; - 'smtc-icon-theme-ctrl-subtle-pressed': string; - 'smtc-material-acrylic-blur': string; - 'smtc-material-acrylic-default-color-blend': string; - 'smtc-material-acrylic-default-lum-blend': string; - 'smtc-material-mica-blur': string; - 'smtc-null-color': string; - 'smtc-null-number': string; - 'smtc-null-string': string; - 'smtc-padding-content-align-default': string; - 'smtc-padding-content-align-outdent-icon-on-subtle': string; - 'smtc-padding-content-align-outdent-text-on-subtle': string; - 'smtc-padding-content-large': string; - 'smtc-padding-content-medium': string; - 'smtc-padding-content-none': string; - 'smtc-padding-content-small': string; - 'smtc-padding-content-x-large': string; - 'smtc-padding-content-x-small': string; - 'smtc-padding-content-xx-large': string; - 'smtc-padding-content-xx-small': string; - 'smtc-padding-content-xxx-large': string; - 'smtc-padding-ctrl-horizontal-default': string; - 'smtc-padding-ctrl-horizontal-icon-only': string; - 'smtc-padding-ctrl-lg-horizontal-default': string; - 'smtc-padding-ctrl-lg-horizontal-icon-only': string; - 'smtc-padding-ctrl-lg-text-top': string; - 'smtc-padding-ctrl-lg-to-nested-control': string; - 'smtc-padding-ctrl-sm-horizontal-default': string; - 'smtc-padding-ctrl-sm-horizontal-icon-only': string; - 'smtc-padding-ctrl-sm-text-top': string; - 'smtc-padding-ctrl-sm-to-nested-control': string; - 'smtc-padding-ctrl-text-side': string; - 'smtc-padding-ctrl-text-top': string; - 'smtc-padding-ctrl-to-nested-control': string; - 'smtc-shadow-card-disabled-key': string; - 'smtc-shadow-card-hover-key': string; - 'smtc-shadow-card-pressed-key': string; - 'smtc-shadow-card-rest-ambient': string; - 'smtc-shadow-card-rest-key': string; - 'smtc-shadow-ctrl-on-drag-ambient': string; - 'smtc-shadow-ctrl-on-drag-key': string; - 'smtc-shadow-flyout-ambient': string; - 'smtc-shadow-flyout-key': string; - 'smtc-shadow-layer-ambient': string; - 'smtc-shadow-layer-key': string; - 'smtc-shadow-toolbar-ambient': string; - 'smtc-shadow-toolbar-key': string; - 'smtc-shadow-window-active-ambient': string; - 'smtc-shadow-window-active-key': string; - 'smtc-shadow-window-inactive-ambient': string; - 'smtc-shadow-window-inactive-key': string; - 'smtc-size-ctrl-default': string; - 'smtc-size-ctrl-icon': string; - 'smtc-size-ctrl-icon-figmaonly': string; - 'smtc-size-ctrl-icon-secondary': string; - 'smtc-size-ctrl-lg-default': string; - 'smtc-size-ctrl-lg-icon': string; - 'smtc-size-ctrl-lg-icon-figmaonly': string; - 'smtc-size-ctrl-sm-default': string; - 'smtc-size-ctrl-sm-icon': string; - 'smtc-size-ctrl-sm-icon-figmaonly': string; - 'smtc-status-away-foreground': string; - 'smtc-status-brand-background': string; - 'smtc-status-brand-stroke': string; - 'smtc-status-brand-tint-background': string; - 'smtc-status-brand-tint-foreground': string; - 'smtc-status-brand-tint-stroke': string; - 'smtc-status-danger-background': string; - 'smtc-status-danger-stroke': string; - 'smtc-status-danger-tint-background': string; - 'smtc-status-danger-tint-foreground': string; - 'smtc-status-danger-tint-stroke': string; - 'smtc-status-important-background': string; - 'smtc-status-important-foreground': string; - 'smtc-status-important-tint-background': string; - 'smtc-status-important-tint-foreground': string; - 'smtc-status-important-tint-stroke': string; - 'smtc-status-informative-background': string; - 'smtc-status-informative-foreground': string; - 'smtc-status-informative-stroke': string; - 'smtc-status-informative-tint-background': string; - 'smtc-status-informative-tint-foreground': string; - 'smtc-status-informative-tint-stroke': string; - 'smtc-status-neutral-background': string; - 'smtc-status-neutral-foreground': string; - 'smtc-status-neutral-tint-background': string; - 'smtc-status-neutral-tint-foreground': string; - 'smtc-status-neutral-tint-stroke': string; - 'smtc-status-oof-foreground': string; - 'smtc-status-success-background': string; - 'smtc-status-success-stroke': string; - 'smtc-status-success-tint-background': string; - 'smtc-status-success-tint-foreground': string; - 'smtc-status-success-tint-stroke': string; - 'smtc-status-warning-background': string; - 'smtc-status-warning-stroke': string; - 'smtc-status-warning-tint-background': string; - 'smtc-status-warning-tint-foreground': string; - 'smtc-status-warning-tint-stroke': string; - 'smtc-stroke-ctrl-divider-on-brand': string; - 'smtc-stroke-ctrl-divider-on-neutral': string; - 'smtc-stroke-ctrl-divider-on-outline': string; - 'smtc-stroke-ctrl-on-active-brand-disabled': string; - 'smtc-stroke-ctrl-on-active-brand-disabled-stop2': string; - 'smtc-stroke-ctrl-on-active-brand-hover': string; - 'smtc-stroke-ctrl-on-active-brand-hover-stop2': string; - 'smtc-stroke-ctrl-on-active-brand-pressed': string; - 'smtc-stroke-ctrl-on-active-brand-pressed-stop2': string; - 'smtc-stroke-ctrl-on-active-brand-rest': string; - 'smtc-stroke-ctrl-on-active-brand-rest-stop2': string; - 'smtc-stroke-ctrl-on-brand-disabled-stop2': string; - 'smtc-stroke-ctrl-on-brand-hover-stop2': string; - 'smtc-stroke-ctrl-on-brand-pressed-stop2': string; - 'smtc-stroke-ctrl-on-brand-rest-stop2': string; - 'smtc-stroke-ctrl-on-neutral-disabled-stop2': string; - 'smtc-stroke-ctrl-on-neutral-hover-stop2': string; - 'smtc-stroke-ctrl-on-neutral-pressed-stop2': string; - 'smtc-stroke-ctrl-on-neutral-rest-stop2': string; - 'smtc-stroke-ctrl-on-outline-disabled': string; - 'smtc-stroke-ctrl-on-outline-hover': string; - 'smtc-stroke-ctrl-on-outline-pressed': string; - 'smtc-stroke-ctrl-on-outline-rest': string; - 'smtc-stroke-divider-default': string; - 'smtc-stroke-divider-subtle': string; - 'smtc-stroke-toolbar': string; - 'smtc-stroke-width-ctrl-outline-hover': string; - 'smtc-stroke-width-ctrl-outline-pressed': string; - 'smtc-stroke-width-ctrl-outline-selected': string; - 'smtc-stroke-width-default': string; - 'smtc-stroke-width-window-default': string; - 'smtc-stroke-window-active': string; - 'smtc-text-ctrl-weight-selected': string; - 'smtc-text-global-body1-font-size': string; - 'smtc-text-global-body1-line-height': string; - 'smtc-text-global-body2-font-size': string; - 'smtc-text-global-body2-line-height': string; - 'smtc-text-global-body3-font-size': string; - 'smtc-text-global-body3-line-height': string; - 'smtc-text-global-caption1-font-size': string; - 'smtc-text-global-caption1-line-height': string; - 'smtc-text-global-caption2-font-size': string; - 'smtc-text-global-caption2-line-height': string; - 'smtc-text-global-display1-font-size': string; - 'smtc-text-global-display1-line-height': string; - 'smtc-text-global-display2-font-size': string; - 'smtc-text-global-display2-line-height': string; - 'smtc-text-global-subtitle1-font-size': string; - 'smtc-text-global-subtitle1-line-height': string; - 'smtc-text-global-subtitle2-font-size': string; - 'smtc-text-global-subtitle2-line-height': string; - 'smtc-text-global-title1-font-size': string; - 'smtc-text-global-title1-line-height': string; - 'smtc-text-global-title2-font-size': string; - 'smtc-text-global-title2-line-height': string; - 'smtc-text-ramp-item-header-font-size': string; - 'smtc-text-ramp-item-header-line-height': string; - 'smtc-text-ramp-legal-font-size': string; - 'smtc-text-ramp-legal-line-height': string; - 'smtc-text-ramp-lg-legal-font-size': string; - 'smtc-text-ramp-lg-legal-line-height': string; - 'smtc-text-ramp-lg-section-header-font-size': string; - 'smtc-text-ramp-lg-section-header-line-height': string; - 'smtc-text-ramp-sm-item-header-font-size': string; - 'smtc-text-ramp-sm-item-header-line-height': string; - 'smtc-text-ramp-sm-legal-font-size': string; - 'smtc-text-ramp-sm-legal-line-height': string; - 'smtc-text-ramp-sm-section-header-font-size': string; - 'smtc-text-ramp-sm-section-header-line-height': string; - 'smtc-text-style-ai-header-font-family': string; - 'smtc-text-style-ai-header-weight': string; - 'smtc-text-style-article-header-font-family': string; - 'smtc-text-style-article-header-weight': string; - 'smtc-text-style-article-regular-font-family': string; - 'smtc-text-style-default-display-weight': string; - 'smtc-text-style-default-header-weight': string; - 'smtc-text-style-default-regular-font-family': string; - 'smtc-text-style-default-regular-letter-spacing': string; - 'smtc-text-style-default-regular-weight': string; - 'smtc-text-style-quote-regular-letter-spacing': string; -}; - // @public (undocumented) export const materialAcrylicBlur = "var(--smtc-material-acrylic-blur)"; diff --git a/packages/semantic-tokens/scripts/tokenGen.ts b/packages/semantic-tokens/scripts/tokenGen.ts index 36e4ce4e0f70a..c40ee6f13685d 100644 --- a/packages/semantic-tokens/scripts/tokenGen.ts +++ b/packages/semantic-tokens/scripts/tokenGen.ts @@ -309,13 +309,6 @@ const generateTokenVariables = () => { }); } - // TODO: Remove this before merging to master - const kumoThemePath = './themes/kumoTheme'; - indexSourceFile.addExportDeclaration({ - namedExports: ['kumoSemanticTokens'], - moduleSpecifier: kumoThemePath, - }); - const rawText = indexSourceFile.getText(); const formattedText = format(rawText, { parser: 'typescript', diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 3b6862e91652f..370efb32ba183 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -2003,4 +2003,3 @@ export { _nullBackgroundColorHover, _nullBackgroundColorPressed, } from './legacyVariant/tokens'; -export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/themes/kumoTheme.ts b/packages/semantic-tokens/src/themes/kumoTheme.ts deleted file mode 100644 index df3431b5ce8d1..0000000000000 --- a/packages/semantic-tokens/src/themes/kumoTheme.ts +++ /dev/null @@ -1,547 +0,0 @@ -/** - * A temporary testing theme for Kumo - * This is not a production-ready theme and is subject to change. - * It is intended for internal testing purposes only. - * Fluent Semantic Themes package will eventually replace this. - */ -export const kumoSemanticTokens = { - 'smtc-ai-brand-stop1': '#ffffffff', - 'smtc-ai-brand-stop2': '#ffffffff', - 'smtc-ai-brand-stop3': '#ffffffff', - 'smtc-ai-brand-stop4': '#ffffffff', - 'smtc-ai-shimmer-stop1': '#ffffff00', - 'smtc-ai-shimmer-stop2': '#ffffff00', - 'smtc-ai-shimmer-stop3': '#ffffff00', - 'smtc-ai-shimmer-stop4': '#ffffff00', - 'smtc-background-card-on-flyout-default-disabled': '#ffffffff', - 'smtc-background-card-on-flyout-default-hover': '#ffffffff', - 'smtc-background-card-on-flyout-default-pressed': '#ffffffff', - 'smtc-background-card-on-flyout-default-rest': '#ffffffff', - 'smtc-background-card-on-primary-alt-disabled': '#eaeef4ff', - 'smtc-background-card-on-primary-alt-hover': '#daeaffff', - 'smtc-background-card-on-primary-alt-pressed': '#b4d5ffff', - 'smtc-background-card-on-primary-alt-rest': '#ecf4ffff', - 'smtc-background-card-on-primary-default-disabled': '#eaeef4ff', - 'smtc-background-card-on-primary-default-hover': '#f3f7fbff', - 'smtc-background-card-on-primary-default-pressed': '#e2e6eaff', - 'smtc-background-card-on-primary-default-rest': '#ffffffff', - 'smtc-background-card-on-primary-default-selected': '#eff4faff', - 'smtc-background-card-on-secondary-alt-disabled': '#ffffffff', - 'smtc-background-card-on-secondary-alt-hover': '#ffffffff', - 'smtc-background-card-on-secondary-alt-pressed': '#ffffffff', - 'smtc-background-card-on-secondary-alt-rest': '#ffffffff', - 'smtc-background-card-on-secondary-default-disabled': '#ffffffff', - 'smtc-background-card-on-secondary-default-hover': '#ffffffff', - 'smtc-background-card-on-secondary-default-pressed': '#ffffffff', - 'smtc-background-card-on-secondary-default-rest': '#ffffffff', - 'smtc-background-ctrl-brand-disabled': '#eaeef4ff', - 'smtc-background-ctrl-brand-hover': '#2b2e35ff', - 'smtc-background-ctrl-brand-pressed': '#383b43ff', - 'smtc-background-ctrl-brand-rest': '#24282fff', - 'smtc-background-ctrl-neutral-disabled': '#eaeef4ff', - 'smtc-background-ctrl-neutral-hover': '#e7ebf1ff', - 'smtc-background-ctrl-neutral-pressed': '#d6dae0ff', - 'smtc-background-ctrl-neutral-rest': '#eff4faff', - 'smtc-background-ctrl-shape-safe-active-brand-disabled': '#a4a9b0ff', - 'smtc-background-ctrl-shape-safe-neutral-hover': '#8d9198ff', - 'smtc-background-ctrl-shape-safe-neutral-pressed': '#8d9198ff', - 'smtc-background-ctrl-shape-safe-neutral-rest': '#8d9198ff', - 'smtc-background-ctrl-subtle-hover': '#f3f7fbff', - 'smtc-background-ctrl-subtle-pressed': '#e2e6eaff', - 'smtc-background-flyout-color-blend': '#ffffffff', - 'smtc-background-flyout-lum-blend': '#ffffffff', - 'smtc-background-flyout-solid': '#ffffffff', - 'smtc-background-layer-primary-solid': '#ffffffff', - 'smtc-background-layer-secondary': '#f6fafeff', - 'smtc-background-layer-tertiary': '#f6fafeff', - 'smtc-background-smoke': '#0000004d', - 'smtc-background-web-page-primary': '#ffffffff', - 'smtc-background-web-page-secondary': '#ffffffff', - 'smtc-background-window-primary-color-blend': '#ffffffff', - 'smtc-background-window-primary-lum-blend': '#ffffffff', - 'smtc-background-window-primary-solid': '#ffffffff', - 'smtc-background-window-secondary-color-blend': '#ffffffff', - 'smtc-background-window-secondary-lum-blend': '#ffffffff', - 'smtc-background-window-secondary-solid': '#ffffffff', - 'smtc-background-window-tab-band-color-blend': '#ffffffff', - 'smtc-background-window-tab-band-lum-blend': '#ffffffff', - 'smtc-background-window-tab-band-solid': '#d9dde3ff', - 'smtc-corner-bezel': '16px', - 'smtc-corner-card-rest': '24px', - 'smtc-corner-circular': '9999px', - 'smtc-corner-ctrl-lg-rest': '12px', - 'smtc-corner-ctrl-rest': '12px', - 'smtc-corner-ctrl-sm-rest': '10px', - 'smtc-corner-flyout-rest': '20px', - 'smtc-corner-flyout-shell-rest': '24px', - 'smtc-corner-image-in-card': '12px', - 'smtc-corner-image-on-page': '12px', - 'smtc-corner-layer-default': '24px', - 'smtc-corner-toolbar-default': '12px', - 'smtc-corner-window-default': '8px', - 'smtc-corner-zero': '0px', - 'smtc-ctrl-avatar-active-ring-size': '36px', - 'smtc-ctrl-avatar-active-ring-stroke': '#000000ff', - 'smtc-ctrl-avatar-active-ring-stroke-width': '2px', - 'smtc-ctrl-avatar-background': '#eff4faff', - 'smtc-ctrl-avatar-corner-group': '2px', - 'smtc-ctrl-avatar-foreground': '#1e2024ff', - 'smtc-ctrl-avatar-icon-size': '12px', - 'smtc-ctrl-avatar-presence-badge-padding-bottom-right-offset': '2px', - 'smtc-ctrl-avatar-presence-badge-size': '6px', - 'smtc-ctrl-avatar-show-cutout': 'visible', - 'smtc-ctrl-avatar-text-font-size': '10px', - 'smtc-ctrl-avatar-text-line-height': '12px', - 'smtc-ctrl-avatar-text-padding-top-offset': '11px', - 'smtc-ctrl-badge-beacon-size': '4px', - 'smtc-ctrl-badge-corner': '6px', - 'smtc-ctrl-badge-gap': '2px', - 'smtc-ctrl-badge-icon-size': '16px', - 'smtc-ctrl-badge-icon-size-figmaonly': '16', - 'smtc-ctrl-badge-lg-corner': '6px', - 'smtc-ctrl-badge-lg-icon-size': '20px', - 'smtc-ctrl-badge-lg-icon-size-figmaonly': '20', - 'smtc-ctrl-badge-lg-padding': '4px', - 'smtc-ctrl-badge-lg-size': '28px', - 'smtc-ctrl-badge-lg-text-padding-top': '0px', - 'smtc-ctrl-badge-padding': '4px', - 'smtc-ctrl-badge-size': '24px', - 'smtc-ctrl-badge-sm-corner': '6px', - 'smtc-ctrl-badge-sm-icon-size': '12px', - 'smtc-ctrl-badge-sm-icon-size-figmaonly': '12', - 'smtc-ctrl-badge-sm-padding': '4px', - 'smtc-ctrl-badge-sm-size': '20px', - 'smtc-ctrl-badge-sm-text-padding-top': '0px', - 'smtc-ctrl-badge-text-padding-top': '0px', - 'smtc-ctrl-boolean-selection-hint': 'true', - 'smtc-ctrl-card-state-disabled': 'Disabled', - 'smtc-ctrl-card-state-hover': 'Hover', - 'smtc-ctrl-card-state-pressed': 'Pressed', - 'smtc-ctrl-card-state-rest': 'Rest', - 'smtc-ctrl-choice-base-background-disabled': '#ffffff00', - 'smtc-ctrl-choice-base-background-hover': '#ffffff00', - 'smtc-ctrl-choice-base-background-pressed': '#ffffff00', - 'smtc-ctrl-choice-base-background-rest': '#ffffff00', - 'smtc-ctrl-choice-base-stroke-hover': '#676b72ff', - 'smtc-ctrl-choice-base-stroke-pressed': '#585c63ff', - 'smtc-ctrl-choice-checkbox-corner': '6px', - 'smtc-ctrl-choice-checkbox-icon-size': '10px', - 'smtc-ctrl-choice-checkbox-indeterminate-height': '1.5px', - 'smtc-ctrl-choice-checkbox-indeterminate-width': '8px', - 'smtc-ctrl-choice-icon-theme': 'Filled', - 'smtc-ctrl-choice-lg-base-size': '28px', - 'smtc-ctrl-choice-lg-checkbox-corner': '4px', - 'smtc-ctrl-choice-lg-checkbox-icon-size': '0px', - 'smtc-ctrl-choice-lg-checkbox-icon-size-figmaonly': '16', - 'smtc-ctrl-choice-lg-radio-dot-size-hover': '16px', - 'smtc-ctrl-choice-lg-radio-dot-size-pressed': '12px', - 'smtc-ctrl-choice-lg-radio-dot-size-rest': '14px', - 'smtc-ctrl-choice-lg-switch-height': '28px', - 'smtc-ctrl-choice-lg-switch-thumb-width-hover': '20px', - 'smtc-ctrl-choice-lg-switch-thumb-width-pressed': '24px', - 'smtc-ctrl-choice-lg-switch-thumb-width-rest': '18px', - 'smtc-ctrl-choice-lg-switch-width': '52px', - 'smtc-ctrl-choice-padding-horizontal': '0px', - 'smtc-ctrl-choice-padding-vertical': '4px', - 'smtc-ctrl-choice-radio-dot-size-rest': '10px', - 'smtc-ctrl-choice-sm-checkbox-corner': '8px', - 'smtc-ctrl-choice-sm-checkbox-icon-size': '0px', - 'smtc-ctrl-choice-sm-checkbox-icon-size-figmaonly': '12', - 'smtc-ctrl-choice-sm-radio-dot-size': '8px', - 'smtc-ctrl-choice-sm-switch-height': '20px', - 'smtc-ctrl-choice-sm-switch-thumb-width-hover': '12px', - 'smtc-ctrl-choice-sm-switch-thumb-width-pressed': '16px', - 'smtc-ctrl-choice-sm-switch-thumb-width-rest': '10px', - 'smtc-ctrl-choice-sm-switch-width': '36px', - 'smtc-ctrl-choice-switch-padding-rest': '4px', - 'smtc-ctrl-choice-switch-thumb-shadow-ambient': '0 0 0 #ffffff00', - 'smtc-ctrl-choice-switch-thumb-shadow-key': '0 0 0 #ffffff00', - 'smtc-ctrl-choice-switch-thumb-width-pressed': '20px', - 'smtc-ctrl-choice-switch-thumb-width-rest': '12px', - 'smtc-ctrl-choice-switch-width': '36px', - 'smtc-ctrl-composer-container-background-default': '#ffffff99', - 'smtc-ctrl-composer-container-corner': '24px', - 'smtc-ctrl-composer-container-shadow-ambient': '0 0 4px #001e441a', - 'smtc-ctrl-composer-container-shadow-key': '0 6px 12px #ffffff00', - 'smtc-ctrl-composer-input-background-disabled': '#ffffff00', - 'smtc-ctrl-composer-input-background-hover': '#ffffff00', - 'smtc-ctrl-composer-input-background-pressed': '#ffffff00', - 'smtc-ctrl-composer-input-background-rest': '#ffffff00', - 'smtc-ctrl-composer-input-background-selected-rest': '#ffffff00', - 'smtc-ctrl-composer-input-bottom-stroke-width-hover': '0px', - 'smtc-ctrl-composer-input-bottom-stroke-width-pressed': '0px', - 'smtc-ctrl-composer-input-bottom-stroke-width-rest': '0px', - 'smtc-ctrl-composer-input-bottom-stroke-width-selected-rest': '0px', - 'smtc-ctrl-composer-input-corner-hover': '26px', - 'smtc-ctrl-composer-input-corner-pressed': '28px', - 'smtc-ctrl-composer-input-corner-rest': '24px', - 'smtc-ctrl-composer-input-shadow': '0 1px 2px #001e441a', - 'smtc-ctrl-composer-input-shadow-x-offset': '0px', - 'smtc-ctrl-composer-input-stroke-disabled': '#ffffff00', - 'smtc-ctrl-composer-input-stroke-hover': '#ffffff00', - 'smtc-ctrl-composer-input-stroke-pressed': '#ffffff00', - 'smtc-ctrl-composer-input-stroke-selected-rest': '#ffffff00', - 'smtc-ctrl-composer-input-stroke-width-hover': '0px', - 'smtc-ctrl-composer-input-stroke-width-pressed': '0px', - 'smtc-ctrl-composer-input-stroke-width-rest': '0px', - 'smtc-ctrl-composer-input-stroke-width-selected-rest': '0px', - 'smtc-ctrl-dialog-background': '#ffffffff', - 'smtc-ctrl-dialog-base-corner': '20px', - 'smtc-ctrl-dialog-base-shadow-ambient': '0 0 8px #212d3d0f', - 'smtc-ctrl-dialog-base-shadow-key': '0 16px 24px #212d3d1f', - 'smtc-ctrl-dialog-layer-padding-bottom': '0px', - 'smtc-ctrl-divider-fixed-line-length': '8px', - 'smtc-ctrl-drag-background-color-blend': '#ffffffff', - 'smtc-ctrl-drag-background-lum-blend': '#ffffffff', - 'smtc-ctrl-drag-background-solid': '#ffffffff', - 'smtc-ctrl-fab-background-disabled': '#eaeef4ff', - 'smtc-ctrl-fab-background-hover': '#f3f7fbff', - 'smtc-ctrl-fab-background-pressed': '#e2e6eaff', - 'smtc-ctrl-fab-background-rest': '#ffffffff', - 'smtc-ctrl-fab-corner-hover': '12px', - 'smtc-ctrl-fab-corner-pressed': '12px', - 'smtc-ctrl-fab-corner-rest': '12px', - 'smtc-ctrl-fab-shadow-disabled-key': '0 0.5px 4px #1b355614', - 'smtc-ctrl-fab-shadow-hover-key': '0 6px 12px #1b355614', - 'smtc-ctrl-fab-shadow-pressed-key': '0 0.5px 4px #1b355614', - 'smtc-ctrl-fab-shadow-rest-ambient': '0 0 4px #1b35560a', - 'smtc-ctrl-fab-shadow-rest-key': '0 4px 6px #1b355614', - 'smtc-ctrl-focus-inner-stroke': '#ffffffff', - 'smtc-ctrl-focus-outer-stroke-width': '2px', - 'smtc-ctrl-focus-position-figmaonly': 'Both Outside', - 'smtc-ctrl-input-bottom-line-stroke-hover': '#8d9198ff', - 'smtc-ctrl-input-bottom-line-stroke-pressed': '#8d9198ff', - 'smtc-ctrl-input-bottom-line-stroke-rest': '#ffffff00', - 'smtc-ctrl-input-bottom-line-stroke-width-selected': '2px', - 'smtc-ctrl-input-stroke-disabled': '#ffffff00', - 'smtc-ctrl-input-stroke-error': '#df3c4aff', - 'smtc-ctrl-input-stroke-hover': '#ffffff00', - 'smtc-ctrl-input-stroke-pressed': '#ffffff00', - 'smtc-ctrl-input-stroke-rest': '#ffffff00', - 'smtc-ctrl-input-stroke-selected': '#ffffff00', - 'smtc-ctrl-input-stroke-width-selected': '1px', - 'smtc-ctrl-link-foreground-brand-hover': '#016dd4ff', - 'smtc-ctrl-link-foreground-brand-pressed': '#016dd4ff', - 'smtc-ctrl-link-foreground-brand-rest': '#016dd4ff', - 'smtc-ctrl-link-inline-show-underline-at-rest': 'hidden', - 'smtc-ctrl-link-inline-underline-dashed': 'dashed', - 'smtc-ctrl-link-inline-underline-solid-figmaonly': 'solid', - 'smtc-ctrl-link-on-page-show-underline-at-rest': 'hidden', - 'smtc-ctrl-link-on-page-underline-dashed': 'dashed', - 'smtc-ctrl-link-on-page-underline-solid-figmaonly': 'solid', - 'smtc-ctrl-list-background-selected-disabled': '#eaeef4ff', - 'smtc-ctrl-list-background-selected-hover': '#e7ebf1ff', - 'smtc-ctrl-list-background-selected-pressed': '#d6dae0ff', - 'smtc-ctrl-list-background-selected-rest': '#eff4faff', - 'smtc-ctrl-list-choice-checkbox-corner': '0px', - 'smtc-ctrl-list-choice-checkbox-icon-size': '16px', - 'smtc-ctrl-list-choice-checkbox-icon-size-figmaonly': '16', - 'smtc-ctrl-list-choice-dot-size': '4px', - 'smtc-ctrl-list-choice-dot-size-figmaonly': '4', - 'smtc-ctrl-list-choice-foreground-hover': '#c8ccd3ff', - 'smtc-ctrl-list-indent-level2': '32px', - 'smtc-ctrl-list-indent-level3': '56px', - 'smtc-ctrl-list-lg-indent-level1': '0px', - 'smtc-ctrl-list-lg-indent-level2': '42px', - 'smtc-ctrl-list-lg-indent-level3': '74px', - 'smtc-ctrl-list-pill-full-width': 'false', - 'smtc-ctrl-list-pill-length-rest': '20px', - 'smtc-ctrl-list-pill-stretch-padding-default': '12px', - 'smtc-ctrl-list-pill-stretch-padding-hint': '20px', - 'smtc-ctrl-list-pill-width': '3px', - 'smtc-ctrl-list-shadow-selected-ambient': '0 0 2px #ffffff00', - 'smtc-ctrl-list-shadow-selected-key': '0 1px 2px #ffffff00', - 'smtc-ctrl-list-sm-indent-level2': '34px', - 'smtc-ctrl-list-sm-indent-level3': '58px', - 'smtc-ctrl-list-split-divider-padding-inset': '4px', - 'smtc-ctrl-list-split-divider-show-divider': 'visible', - 'smtc-ctrl-list-split-divider-stroke': '#eaeef4ff', - 'smtc-ctrl-lite-filter-background-selected': '#eff4faff', - 'smtc-ctrl-lite-filter-foreground-selected': '#1e2024ff', - 'smtc-ctrl-lite-filter-stroke-selected': '#6e7279ff', - 'smtc-ctrl-progress-background-empty': '#d9dde3ff', - 'smtc-ctrl-progress-height-filled': '3px', - 'smtc-ctrl-progress-lg-height-filled': '4px', - 'smtc-ctrl-progress-sm-height-filled': '1px', - 'smtc-ctrl-rating-icon-gap': '2px', - 'smtc-ctrl-rating-icon-size': '12px', - 'smtc-ctrl-rating-icon-theme': 'Filled', - 'smtc-ctrl-segmented-background-disabled': '#ffffff00', - 'smtc-ctrl-segmented-background-hover': '#ffffff00', - 'smtc-ctrl-segmented-background-pressed': '#ffffff00', - 'smtc-ctrl-segmented-background-rest': '#ffffff00', - 'smtc-ctrl-segmented-lg-corner-hover': '0px', - 'smtc-ctrl-segmented-lg-corner-pressed': '0px', - 'smtc-ctrl-segmented-lg-corner-rest': '0px', - 'smtc-ctrl-segmented-lg-item-corner-hover': '0px', - 'smtc-ctrl-segmented-lg-item-corner-pressed': '0px', - 'smtc-ctrl-segmented-lg-item-corner-rest': '0px', - 'smtc-ctrl-segmented-lg-padding-rest': '0px', - 'smtc-ctrl-segmented-padding-hover': '5px', - 'smtc-ctrl-segmented-padding-pressed': '7px', - 'smtc-ctrl-segmented-padding-rest': '4px', - 'smtc-ctrl-segmented-sm-corner-hover': '0px', - 'smtc-ctrl-segmented-sm-corner-pressed': '0px', - 'smtc-ctrl-segmented-sm-corner-rest': '0px', - 'smtc-ctrl-segmented-sm-item-corner-rest': '0px', - 'smtc-ctrl-segmented-sm-padding-rest': '0px', - 'smtc-ctrl-segmented-stroke-disabled': '#ffffffff', - 'smtc-ctrl-segmented-stroke-hover': '#ffffffff', - 'smtc-ctrl-segmented-stroke-pressed': '#ffffffff', - 'smtc-ctrl-segmented-stroke-rest': '#ffffffff', - 'smtc-ctrl-slider-bar-foreground-empty-disabled': '#eaeef4ff', - 'smtc-ctrl-slider-bar-foreground-empty-hover': '#8d9198ff', - 'smtc-ctrl-slider-bar-foreground-empty-pressed': '#8d9198ff', - 'smtc-ctrl-slider-bar-foreground-empty-rest': '#8d9198ff', - 'smtc-ctrl-slider-bar-foreground-filled-disabled': '#a4a9b0ff', - 'smtc-ctrl-slider-bar-foreground-filled-hover': '#24282fff', - 'smtc-ctrl-slider-bar-foreground-filled-pressed': '#24282fff', - 'smtc-ctrl-slider-lg-bar-height': '0px', - 'smtc-ctrl-slider-lg-thumb-size-hover': '0px', - 'smtc-ctrl-slider-lg-thumb-size-pressed': '0px', - 'smtc-ctrl-slider-lg-thumb-size-rest': '20px', - 'smtc-ctrl-slider-sm-bar-height': '0px', - 'smtc-ctrl-slider-sm-thumb-size-hover': '0px', - 'smtc-ctrl-slider-sm-thumb-size-pressed': '0px', - 'smtc-ctrl-slider-sm-thumb-size-rest': '20px', - 'smtc-ctrl-slider-thumb-background-hover': '#2b2e35ff', - 'smtc-ctrl-slider-thumb-background-pressed': '#383b43ff', - 'smtc-ctrl-slider-thumb-background-rest': '#24282fff', - 'smtc-ctrl-slider-thumb-inner-stroke-disabled': '#ffffffff', - 'smtc-ctrl-slider-thumb-inner-stroke-hover': '#ffffffff', - 'smtc-ctrl-slider-thumb-inner-stroke-pressed': '#ffffffff', - 'smtc-ctrl-slider-thumb-inner-stroke-rest': '#ffffffff', - 'smtc-ctrl-slider-thumb-inner-stroke-width-rest': '4px', - 'smtc-ctrl-slider-thumb-outer-stroke-hover': '#eaeef4ff', - 'smtc-ctrl-slider-thumb-outer-stroke-pressed': '#eaeef4ff', - 'smtc-ctrl-slider-thumb-outer-stroke-rest': '#eaeef4ff', - 'smtc-ctrl-slider-thumb-size-hover': '22px', - 'smtc-ctrl-slider-thumb-size-pressed': '18px', - 'smtc-ctrl-spinner-show-empty-track': 'hidden', - 'smtc-ctrl-tooltip-background': '#ffffffff', - 'smtc-ctrl-tooltip-foreground': '#1e2024ff', - 'smtc-ctrl-tooltip-shadow-ambient': '0 0 4px #1b35560a', - 'smtc-ctrl-tooltip-shadow-key': '0 4px 6px #1b355614', - 'smtc-foreground-ctrl-brand-disabled': '#a4a9b0ff', - 'smtc-foreground-ctrl-brand-hover': '#24282fff', - 'smtc-foreground-ctrl-brand-pressed': '#24282fff', - 'smtc-foreground-ctrl-brand-rest': '#24282fff', - 'smtc-foreground-ctrl-hint-default': '#c8ccd3ff', - 'smtc-foreground-ctrl-neutral-primary-disabled': '#a4a9b0ff', - 'smtc-foreground-ctrl-neutral-primary-rest': '#1e2024ff', - 'smtc-foreground-ctrl-neutral-secondary-disabled': '#a4a9b0ff', - 'smtc-foreground-ctrl-neutral-secondary-rest': '#6e7279ff', - 'smtc-foreground-ctrl-on-brand-disabled': '#a4a9b0ff', - 'smtc-foreground-ctrl-on-brand-rest': '#ffffffff', - 'smtc-foreground-ctrl-on-subtle-hover': '#1e2024ff', - 'smtc-foreground-ctrl-on-subtle-pressed': '#1e2024ff', - 'smtc-gap-between-card': '24px', - 'smtc-gap-between-content-large': '20px', - 'smtc-gap-between-content-medium': '16px', - 'smtc-gap-between-content-none': '0px', - 'smtc-gap-between-content-small': '8px', - 'smtc-gap-between-content-x-large': '24px', - 'smtc-gap-between-content-x-small': '4px', - 'smtc-gap-between-content-xx-large': '36px', - 'smtc-gap-between-content-xx-small': '2px', - 'smtc-gap-between-ctrl-default': '8px', - 'smtc-gap-between-ctrl-lg-default': '12px', - 'smtc-gap-between-ctrl-nested': '2px', - 'smtc-gap-between-ctrl-sm-default': '6px', - 'smtc-gap-between-list-item': '4px', - 'smtc-gap-between-text-large': '6px', - 'smtc-gap-between-text-small': '4px', - 'smtc-gap-inside-ctrl-default': '4px', - 'smtc-gap-inside-ctrl-lg-default': '4px', - 'smtc-gap-inside-ctrl-lg-to-label': '8px', - 'smtc-gap-inside-ctrl-lg-to-secondary-icon': '2px', - 'smtc-gap-inside-ctrl-sm-default': '4px', - 'smtc-gap-inside-ctrl-sm-to-label': '8px', - 'smtc-gap-inside-ctrl-sm-to-secondary-icon': '0px', - 'smtc-gap-inside-ctrl-to-label': '8px', - 'smtc-gap-inside-ctrl-to-secondary-icon': '4px', - 'smtc-icon-theme-ctrl-default-hover': 'Filled', - 'smtc-icon-theme-ctrl-default-pressed': 'Filled', - 'smtc-icon-theme-ctrl-default-rest': 'Regular', - 'smtc-icon-theme-ctrl-default-selected': 'Filled', - 'smtc-icon-theme-ctrl-subtle-hover': 'Filled', - 'smtc-icon-theme-ctrl-subtle-pressed': 'Filled', - 'smtc-material-acrylic-blur': '60px', - 'smtc-material-acrylic-default-color-blend': '#ffffff00', - 'smtc-material-acrylic-default-lum-blend': '#ffffff00', - 'smtc-material-mica-blur': '240px', - 'smtc-null-color': '#ffffff00', - 'smtc-null-number': '0px', - 'smtc-null-string': 'String value', - 'smtc-padding-content-align-default': '20px', - 'smtc-padding-content-align-outdent-icon-on-subtle': '12px', - 'smtc-padding-content-align-outdent-text-on-subtle': '10px', - 'smtc-padding-content-large': '24px', - 'smtc-padding-content-medium': '20px', - 'smtc-padding-content-none': '0px', - 'smtc-padding-content-small': '12px', - 'smtc-padding-content-x-large': '40px', - 'smtc-padding-content-x-small': '8px', - 'smtc-padding-content-xx-large': '32px', - 'smtc-padding-content-xx-small': '4px', - 'smtc-padding-content-xxx-large': '40px', - 'smtc-padding-ctrl-horizontal-default': '8px', - 'smtc-padding-ctrl-horizontal-icon-only': '6px', - 'smtc-padding-ctrl-lg-horizontal-default': '8px', - 'smtc-padding-ctrl-lg-horizontal-icon-only': '6px', - 'smtc-padding-ctrl-lg-text-top': '6px', - 'smtc-padding-ctrl-lg-to-nested-control': '4px', - 'smtc-padding-ctrl-sm-horizontal-default': '8px', - 'smtc-padding-ctrl-sm-horizontal-icon-only': '6px', - 'smtc-padding-ctrl-sm-text-top': '4px', - 'smtc-padding-ctrl-sm-to-nested-control': '0px', - 'smtc-padding-ctrl-text-side': '2px', - 'smtc-padding-ctrl-text-top': '6px', - 'smtc-padding-ctrl-to-nested-control': '4px', - 'smtc-shadow-card-disabled-key': '0 1px 2px #ffffff00', - 'smtc-shadow-card-hover-key': '0 3px 10px #ffffff00', - 'smtc-shadow-card-pressed-key': '0 1px 8px #ffffff00', - 'smtc-shadow-card-rest-ambient': '0 0 2px #ffffff00', - 'smtc-shadow-card-rest-key': '0 1px 2px #ffffff00', - 'smtc-shadow-ctrl-on-drag-ambient': '0 0 12px #1b35560a', - 'smtc-shadow-ctrl-on-drag-key': '0 6px 12px #1b355614', - 'smtc-shadow-flyout-ambient': '0 0 4px #1b35560a', - 'smtc-shadow-flyout-key': '0 6px 12px #1b355614', - 'smtc-shadow-layer-ambient': '0 0 0 #212d3d0f', - 'smtc-shadow-layer-key': '0 0 0 #212d3d1f', - 'smtc-shadow-toolbar-ambient': '0 0 0 #ffffff00', - 'smtc-shadow-toolbar-key': '0 0 0 #ffffff00', - 'smtc-shadow-window-active-ambient': '0 0 4px #212d3d0f', - 'smtc-shadow-window-active-key': '0 6px 12px #212d3d1f', - 'smtc-shadow-window-inactive-ambient': '0 3px 12px #212d3d0f', - 'smtc-shadow-window-inactive-key': '0 3px 12px #212d3d1f', - 'smtc-size-ctrl-default': '32px', - 'smtc-size-ctrl-icon': '20px', - 'smtc-size-ctrl-icon-figmaonly': '20', - 'smtc-size-ctrl-icon-secondary': '12px', - 'smtc-size-ctrl-lg-default': '36px', - 'smtc-size-ctrl-lg-icon': '24px', - 'smtc-size-ctrl-lg-icon-figmaonly': '24', - 'smtc-size-ctrl-sm-default': '28px', - 'smtc-size-ctrl-sm-icon': '16px', - 'smtc-size-ctrl-sm-icon-figmaonly': '16', - 'smtc-status-away-foreground': '#c85d00ff', - 'smtc-status-brand-background': '#016dd4ff', - 'smtc-status-brand-stroke': '#007ef4ff', - 'smtc-status-brand-tint-background': '#ecf4ffff', - 'smtc-status-brand-tint-foreground': '#016dd4ff', - 'smtc-status-brand-tint-stroke': '#ffffff00', - 'smtc-status-danger-background': '#d1203aff', - 'smtc-status-danger-stroke': '#df3c4aff', - 'smtc-status-danger-tint-background': '#fff0efff', - 'smtc-status-danger-tint-foreground': '#d1203aff', - 'smtc-status-danger-tint-stroke': '#ffffff00', - 'smtc-status-important-background': '#ffffff00', - 'smtc-status-important-foreground': '#ffffff00', - 'smtc-status-important-tint-background': '#ffffff00', - 'smtc-status-important-tint-foreground': '#ffffff00', - 'smtc-status-important-tint-stroke': '#ffffff00', - 'smtc-status-informative-background': '#ecf4ffff', - 'smtc-status-informative-foreground': '#5b5f66ff', - 'smtc-status-informative-stroke': '#ffffff00', - 'smtc-status-informative-tint-background': '#eff4faff', - 'smtc-status-informative-tint-foreground': '#1e2024ff', - 'smtc-status-informative-tint-stroke': '#ffffff00', - 'smtc-status-neutral-background': '#ffffff00', - 'smtc-status-neutral-foreground': '#ffffff00', - 'smtc-status-neutral-tint-background': '#ffffff00', - 'smtc-status-neutral-tint-foreground': '#ffffff00', - 'smtc-status-neutral-tint-stroke': '#ffffff00', - 'smtc-status-oof-foreground': '#8a42abff', - 'smtc-status-success-background': '#018050ff', - 'smtc-status-success-stroke': '#009d63ff', - 'smtc-status-success-tint-background': '#eaf7f0ff', - 'smtc-status-success-tint-foreground': '#018050ff', - 'smtc-status-success-tint-stroke': '#ffffff00', - 'smtc-status-warning-background': '#c85d00ff', - 'smtc-status-warning-stroke': '#c96000ff', - 'smtc-status-warning-tint-background': '#fdf1e9ff', - 'smtc-status-warning-tint-foreground': '#c85d00ff', - 'smtc-status-warning-tint-stroke': '#ffffff00', - 'smtc-stroke-ctrl-divider-on-brand': '#ffffff00', - 'smtc-stroke-ctrl-divider-on-neutral': '#ffffff00', - 'smtc-stroke-ctrl-divider-on-outline': '#ffffff00', - 'smtc-stroke-ctrl-on-active-brand-disabled': '#ffffff00', - 'smtc-stroke-ctrl-on-active-brand-disabled-stop2': '#ffffff00', - 'smtc-stroke-ctrl-on-active-brand-hover': '#ffffff00', - 'smtc-stroke-ctrl-on-active-brand-hover-stop2': '#ffffff00', - 'smtc-stroke-ctrl-on-active-brand-pressed': '#ffffff00', - 'smtc-stroke-ctrl-on-active-brand-pressed-stop2': '#ffffff00', - 'smtc-stroke-ctrl-on-active-brand-rest': '#ffffff00', - 'smtc-stroke-ctrl-on-active-brand-rest-stop2': '#ffffff00', - 'smtc-stroke-ctrl-on-brand-disabled-stop2': '#ffffff00', - 'smtc-stroke-ctrl-on-brand-hover-stop2': '#ffffff00', - 'smtc-stroke-ctrl-on-brand-pressed-stop2': '#ffffff00', - 'smtc-stroke-ctrl-on-brand-rest-stop2': '#ffffff00', - 'smtc-stroke-ctrl-on-neutral-disabled-stop2': '#ffffff00', - 'smtc-stroke-ctrl-on-neutral-hover-stop2': '#ffffff00', - 'smtc-stroke-ctrl-on-neutral-pressed-stop2': '#ffffff00', - 'smtc-stroke-ctrl-on-neutral-rest-stop2': '#ffffff00', - 'smtc-stroke-ctrl-on-outline-disabled': '#eaeef4ff', - 'smtc-stroke-ctrl-on-outline-hover': '#bfc4caff', - 'smtc-stroke-ctrl-on-outline-pressed': '#afb4baff', - 'smtc-stroke-ctrl-on-outline-rest': '#c8ccd3ff', - 'smtc-stroke-divider-default': '#c8ccd3ff', - 'smtc-stroke-divider-subtle': '#eaeef4ff', - 'smtc-stroke-toolbar': '#ffffff00', - 'smtc-stroke-width-ctrl-outline-hover': '2px', - 'smtc-stroke-width-ctrl-outline-pressed': '2px', - 'smtc-stroke-width-ctrl-outline-selected': '2px', - 'smtc-stroke-width-default': '1px', - 'smtc-stroke-width-window-default': '0px', - 'smtc-stroke-window-active': '#ffffff00', - 'smtc-text-ctrl-weight-selected': '550', - 'smtc-text-global-body1-font-size': '18px', - 'smtc-text-global-body1-line-height': '28px', - 'smtc-text-global-body2-font-size': '16px', - 'smtc-text-global-body2-line-height': '24px', - 'smtc-text-global-body3-font-size': '14px', - 'smtc-text-global-body3-line-height': '20px', - 'smtc-text-global-caption1-font-size': '12px', - 'smtc-text-global-caption1-line-height': '16px', - 'smtc-text-global-caption2-font-size': '10px', - 'smtc-text-global-caption2-line-height': '14px', - 'smtc-text-global-display1-font-size': '74px', - 'smtc-text-global-display1-line-height': '112px', - 'smtc-text-global-display2-font-size': '56px', - 'smtc-text-global-display2-line-height': '84px', - 'smtc-text-global-subtitle1-font-size': '20px', - 'smtc-text-global-subtitle1-line-height': '28px', - 'smtc-text-global-subtitle2-font-size': '16px', - 'smtc-text-global-subtitle2-line-height': '24px', - 'smtc-text-global-title1-font-size': '32px', - 'smtc-text-global-title1-line-height': '48px', - 'smtc-text-global-title2-font-size': '24px', - 'smtc-text-global-title2-line-height': '32px', - 'smtc-text-ramp-item-header-font-size': '14px', - 'smtc-text-ramp-item-header-line-height': '20px', - 'smtc-text-ramp-legal-font-size': '14px', - 'smtc-text-ramp-legal-line-height': '20px', - 'smtc-text-ramp-lg-legal-font-size': '16px', - 'smtc-text-ramp-lg-legal-line-height': '24px', - 'smtc-text-ramp-lg-section-header-font-size': '20px', - 'smtc-text-ramp-lg-section-header-line-height': '28px', - 'smtc-text-ramp-sm-item-header-font-size': '12px', - 'smtc-text-ramp-sm-item-header-line-height': '16px', - 'smtc-text-ramp-sm-legal-font-size': '12px', - 'smtc-text-ramp-sm-legal-line-height': '16px', - 'smtc-text-ramp-sm-section-header-font-size': '18px', - 'smtc-text-ramp-sm-section-header-line-height': '28px', - 'smtc-text-style-ai-header-font-family': '"Lora", serif', - 'smtc-text-style-ai-header-weight': '500', - 'smtc-text-style-article-header-font-family': '"Lora", serif', - 'smtc-text-style-article-header-weight': '500', - 'smtc-text-style-article-regular-font-family': '"Lora", serif', - 'smtc-text-style-default-display-weight': '400', - 'smtc-text-style-default-header-weight': '550', - 'smtc-text-style-default-regular-font-family': - '"Segoe Sans", "Segoe UI", "Segoe UI Web (West European)",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif', - 'smtc-text-style-default-regular-letter-spacing': '0px', - 'smtc-text-style-default-regular-weight': '400', - 'smtc-text-style-quote-regular-letter-spacing': '400px', -}; From a64cebd2ac7af592a183e5afb0031645dedaf5fb Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 6 Aug 2025 09:04:13 -0700 Subject: [PATCH 59/66] Fix up package json and version of semantic tokens --- .../semantic-style-hooks-preview/library/package.json | 2 +- packages/semantic-tokens/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 46da5050ba4d6..65124edb5605b 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -70,7 +70,7 @@ "@fluentui/react-tooltip": "^9.6.6", "@fluentui/react-tree": "^9.10.9", "@fluentui/react-utilities": "^9.19.0", - "@fluentui/semantic-tokens": "0.0.0-alpha.1", + "@fluentui/semantic-tokens": "^0.0.1", "@griffel/react": "^1.5.22", "@swc/helpers": "^0.5.1" }, diff --git a/packages/semantic-tokens/package.json b/packages/semantic-tokens/package.json index 6a996906859db..8db37a09e0163 100644 --- a/packages/semantic-tokens/package.json +++ b/packages/semantic-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/semantic-tokens", - "version": "0.0.0-alpha.1", + "version": "0.0.1", "description": "Fluent UI Theme semantic-tokens", "main": "lib-commonjs/index.js", "module": "lib/index.js", From 51e7109441e64be56690cf5521f3519a200dce26 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com> Date: Wed, 6 Aug 2025 11:00:14 -0700 Subject: [PATCH 60/66] Extended-tokens: Fix merge conflict after rebase (#34987) Force merging as it is a simple rebase resolution in feature branch --- .github/CODEOWNERS | 2 +- .../Menu/useSemanticMenuItemSwitchStyles.styles.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 25e0a479e31b4..132ea2605a154 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -275,9 +275,9 @@ 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/semantic-tokens @microsoft/xc-uxe packages/react-components/react-migration-v0-v9/library @microsoft/teams-prg packages/react-components/react-migration-v0-v9/stories @microsoft/teams-prg packages/react-components/react-datepicker-compat/library @microsoft/cxe-prg @ValentinaKozlova 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 index 4f0df7b46d395..c7fe9dd9b61e7 100644 --- 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 @@ -155,6 +155,7 @@ export const useSemanticMenuItemSwitchStyles = (_state: unknown): MenuItemSwitch useMenuItemStyles_unstable({ ...state, components: { + // eslint-disable-next-line @typescript-eslint/no-deprecated ...state.components, checkmark: 'span', submenuIndicator: 'span', From 4635d68ab23d7816c39caa7f0e67c80eae6d51bd Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Tue, 19 Aug 2025 17:35:47 -0700 Subject: [PATCH 61/66] Resolve rebase changes --- .../react-dialog/library/etc/react-dialog.api.md | 9 --------- .../react-tabs/library/etc/react-tabs.api.md | 5 ----- 2 files changed, 14 deletions(-) diff --git a/packages/react-components/react-dialog/library/etc/react-dialog.api.md b/packages/react-components/react-dialog/library/etc/react-dialog.api.md index 15e784bdc206d..0e9c0514812d8 100644 --- a/packages/react-components/react-dialog/library/etc/react-dialog.api.md +++ b/packages/react-components/react-dialog/library/etc/react-dialog.api.md @@ -231,15 +231,6 @@ export type DialogTriggerState = { children: React_2.ReactElement | null; }; -// @public (undocumented) -export const FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = "4px"; - -// @public (undocumented) -export const MEDIA_QUERY_BREAKPOINT_SELECTOR = "@media screen and (max-width: 480px)"; - -// @public (undocumented) -export const MEDIA_QUERY_SHORT_SCREEN = "@media screen and (max-height: 359px)"; - // @public export const renderDialog_unstable: (state: DialogState, contextValues: DialogContextValues) => JSX.Element; diff --git a/packages/react-components/react-tabs/library/etc/react-tabs.api.md b/packages/react-components/react-tabs/library/etc/react-tabs.api.md index f828b1a7fadc8..ecf9daa0f9c1f 100644 --- a/packages/react-components/react-tabs/library/etc/react-tabs.api.md +++ b/packages/react-components/react-tabs/library/etc/react-tabs.api.md @@ -24,11 +24,6 @@ export const renderTab_unstable: (state: TabState) => JSX.Element; // @public export const renderTabList_unstable: (state: TabListState, contextValues: TabListContextValues) => JSX.Element; -// @public (undocumented) -export const reservedSpaceClassNames: { - content: string; -}; - // @public (undocumented) export type SelectTabData = { value: TabValue; From 0fd8b577fb611a2bd2c911c7b934298295f70147 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 20 Aug 2025 10:27:09 -0700 Subject: [PATCH 62/66] Resolve rebase and remove unneeded change files --- ...-react-drawer-d8471d3e-b5bd-4826-b835-b5b411cad36f.json | 7 ------- .../react-drawer/library/etc/react-drawer.api.md | 6 ------ .../react-components/react-drawer/library/src/index.ts | 2 -- .../react-drawer/library/src/shared/index.ts | 1 - .../stories/src/List/ListActiveElement.stories.tsx | 6 ------ .../component-styles/Tabs/useSemanticTabsStyles.styles.ts | 4 ++-- 6 files changed, 2 insertions(+), 24 deletions(-) delete mode 100644 change/@fluentui-react-drawer-d8471d3e-b5bd-4826-b835-b5b411cad36f.json delete mode 100644 packages/react-components/react-drawer/library/src/shared/index.ts diff --git a/change/@fluentui-react-drawer-d8471d3e-b5bd-4826-b835-b5b411cad36f.json b/change/@fluentui-react-drawer-d8471d3e-b5bd-4826-b835-b5b411cad36f.json deleted file mode 100644 index d15f7f13e37aa..0000000000000 --- a/change/@fluentui-react-drawer-d8471d3e-b5bd-4826-b835-b5b411cad36f.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: Export DrawerBaseState for external usage", - "packageName": "@fluentui/react-drawer", - "email": "mifraser@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/packages/react-components/react-drawer/library/etc/react-drawer.api.md b/packages/react-components/react-drawer/library/etc/react-drawer.api.md index 4974f8edbdcd3..ec1339a5bedcf 100644 --- a/packages/react-components/react-drawer/library/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/library/etc/react-drawer.api.md @@ -19,12 +19,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; // @public export const Drawer: ForwardRefComponent; -// @public (undocumented) -export type DrawerBaseState = Required> & { - motion: MotionState; - open?: boolean; -}; - // @public export const DrawerBody: ForwardRefComponent; diff --git a/packages/react-components/react-drawer/library/src/index.ts b/packages/react-components/react-drawer/library/src/index.ts index 1a07570c9d9c1..fc9aabb6bb003 100644 --- a/packages/react-components/react-drawer/library/src/index.ts +++ b/packages/react-components/react-drawer/library/src/index.ts @@ -70,5 +70,3 @@ export { useDrawerFooter_unstable, } from './DrawerFooter'; export type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './DrawerFooter'; - -export type { DrawerBaseState } from './shared'; diff --git a/packages/react-components/react-drawer/library/src/shared/index.ts b/packages/react-components/react-drawer/library/src/shared/index.ts deleted file mode 100644 index 41259e2a6f7d5..0000000000000 --- a/packages/react-components/react-drawer/library/src/shared/index.ts +++ /dev/null @@ -1 +0,0 @@ -export type { DrawerBaseState } from './DrawerBase.types'; diff --git a/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx b/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx index 904575afee7ee..32e1fcd08fc17 100644 --- a/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx +++ b/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx @@ -38,12 +38,6 @@ const useStyles = makeStyles({ }, itemSelected: { backgroundColor: tokens.colorSubtleBackgroundSelected, - ':hover': { - backgroundColor: tokens.colorSubtleBackgroundSelected, - }, - ':active': { - backgroundColor: tokens.colorSubtleBackgroundSelected, - }, '@media (forced-colors:active)': { background: 'Highlight', }, 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 index 15aa349143618..07ec81071f8bf 100644 --- 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 @@ -2,7 +2,7 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; import { tokens } from '@fluentui/react-theme'; import { - reservedSpaceClassNames, + tabReservedSpaceClassNames, tabClassNames, type TabState, useTabAnimatedIndicatorStyles_unstable, @@ -785,7 +785,7 @@ export const useSemanticTabContentStyles_unstable = (state: TabState): TabState if (state.contentReservedSpace) { state.contentReservedSpace.className = mergeClasses( state.content.className, - reservedSpaceClassNames.content, + tabReservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, From 16cad326c9fd66cbb3dccad7e36a84909fa5bbb9 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 20 Aug 2025 10:36:45 -0700 Subject: [PATCH 63/66] Add back in changefile (not consumed yet) --- ...ui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json diff --git a/change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json b/change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json new file mode 100644 index 0000000000000..308dda6b633b4 --- /dev/null +++ b/change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Export tabReservedSpaceClassNames and useTabAnimatedIndicatorStyles_unstable for style overrides", + "packageName": "@fluentui/react-tabs", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} From dadc752dd9060c413c0b9523af18fae6d9ffdde8 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 20 Aug 2025 11:16:47 -0700 Subject: [PATCH 64/66] Fix up changed variable names and rebuild --- .../etc/semantic-style-hooks-preview.api.md | 2 +- .../useSemanticDialogActionsStyles.styles.ts | 8 ++++---- .../useSemanticDialogBodyStyles.styles.ts | 8 ++++---- .../useSemanticDialogContentStyles.styles.ts | 8 ++++++-- .../useSemanticDialogSurfaceStyles.styles.ts | 18 +++++++++--------- .../useSemanticDrawerBaseStyles.styles.ts | 9 +++++++-- scripts/monorepo/src/getDependencies.spec.js | 5 ----- 7 files changed, 31 insertions(+), 27 deletions(-) diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index cef2854629e34..e2f33eaa62011 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -289,7 +289,7 @@ export const useSemanticSplitButtonStyles: (_state: unknown) => SplitButtonState export const useSemanticSwitchStyles: (_state: unknown) => SwitchState; // @public -export const useSemanticTabButtonStyles_unstable: (state: TabState, slot: TabState['root']) => TabState; +export const useSemanticTabButtonStyles_unstable: (state: TabState, slot: TabState["root"]) => TabState; // @public export const useSemanticTabContentStyles_unstable: (state: TabState) => TabState; 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 index 8a0794c7f122b..1ba75def7666c 100644 --- 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 @@ -3,7 +3,7 @@ import * as semanticTokens from '@fluentui/semantic-tokens'; import { type DialogActionsState, dialogActionsClassNames, - MEDIA_QUERY_BREAKPOINT_SELECTOR, + DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, } from '@fluentui/react-dialog'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; @@ -17,7 +17,7 @@ const useResetStyles = makeResetStyles({ display: 'flex', gridRowStart: 3, gridRowEnd: 3, - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { flexDirection: 'column', justifySelf: 'stretch', }, @@ -28,7 +28,7 @@ const useStyles = makeStyles({ justifySelf: 'end', gridColumnStart: 2, gridColumnEnd: 4, - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { gridColumnStart: 1, gridRowStart: 4, gridRowEnd: 'auto', @@ -38,7 +38,7 @@ const useStyles = makeStyles({ justifySelf: 'start', gridColumnStart: 1, gridColumnEnd: 2, - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { gridColumnEnd: 4, gridRowStart: 3, gridRowEnd: 'auto', 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 index aac7b5f8bc16a..c77092839d574 100644 --- 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 @@ -2,8 +2,8 @@ import { makeResetStyles, mergeClasses } from '@griffel/react'; import * as semanticTokens from '@fluentui/semantic-tokens'; import { dialogBodyClassNames, - MEDIA_QUERY_BREAKPOINT_SELECTOR, - MEDIA_QUERY_SHORT_SCREEN, + DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, + DIALOG_MEDIA_QUERY_SHORT_SCREEN, type DialogBodyState, } from '@fluentui/react-dialog'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; @@ -25,12 +25,12 @@ const useResetStyles = makeResetStyles({ maxHeight: `calc(100dvh - 2 * ${semanticTokens.paddingContentLarge})`, }, - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { maxWidth: '100vw', gridTemplateRows: 'auto 1fr auto', }, - [MEDIA_QUERY_SHORT_SCREEN]: { + [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: { maxHeight: 'unset', }, }); 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 index 4bbaa5aa283ad..bf71aa2780a18 100644 --- 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 @@ -1,6 +1,10 @@ import { makeResetStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; -import { dialogContentClassNames, type DialogContentState, MEDIA_QUERY_SHORT_SCREEN } from '@fluentui/react-dialog'; +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'; @@ -22,7 +26,7 @@ const useStyles = makeResetStyles({ gridColumnStart: 1, gridColumnEnd: 4, - [MEDIA_QUERY_SHORT_SCREEN]: { + [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: { overflowY: 'unset', }, }); 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 index 86c967219de42..0925c32914f17 100644 --- 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 @@ -3,9 +3,9 @@ import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import { dialogSurfaceClassNames, DialogSurfaceState, - FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, - MEDIA_QUERY_BREAKPOINT_SELECTOR, - MEDIA_QUERY_SHORT_SCREEN, + 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'; @@ -41,18 +41,18 @@ const useRootBaseStyle = makeResetStyles({ maxHeight: '100dvh', }, - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { maxWidth: '100vw', }, - [MEDIA_QUERY_SHORT_SCREEN]: { + [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} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`, - borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, - borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, - borderBottomWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + 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, }, }); 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 index ec4012207b30c..0dd03a82db155 100644 --- 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 @@ -1,5 +1,4 @@ import { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react'; -import type { DrawerBaseState } from '@fluentui/react-drawer'; import * as semanticTokens from '@fluentui/semantic-tokens'; /** @@ -87,7 +86,13 @@ export const useDrawerBottomBaseStyles = makeStyles({ }, }); -export const useSemanticDrawerBaseClassNames = ({ position, size }: DrawerBaseState) => { +export const useSemanticDrawerBaseClassNames = ({ + position, + size, +}: { + position: 'start' | 'end' | 'bottom'; + size: 'small' | 'medium' | 'large' | 'full'; +}) => { const baseStyles = useDrawerStyles(); const bottomBaseStyles = useDrawerBottomBaseStyles(); diff --git a/scripts/monorepo/src/getDependencies.spec.js b/scripts/monorepo/src/getDependencies.spec.js index ce702b4761ac9..d7c662973b524 100644 --- a/scripts/monorepo/src/getDependencies.spec.js +++ b/scripts/monorepo/src/getDependencies.spec.js @@ -32,11 +32,6 @@ describe(`#getDependencies`, () => { "isTopLevel": true, "name": "react-jsx-runtime", }, - Object { - "dependencyType": "dependencies", - "isTopLevel": true, - "name": "semantic-tokens", - }, Object { "dependencyType": "dependencies", "isTopLevel": false, From f3329cdbfbf1665b88db890c7ed7d562e0a47edf Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 20 Aug 2025 11:37:42 -0700 Subject: [PATCH 65/66] Update readmes to include warning about token name changes incoming --- .../semantic-style-hooks-preview/library/README.md | 2 ++ packages/semantic-tokens/README.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/react-components/semantic-style-hooks-preview/library/README.md b/packages/react-components/semantic-style-hooks-preview/library/README.md index 3d2737baa0071..22a3a83d39656 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/README.md +++ b/packages/react-components/semantic-style-hooks-preview/library/README.md @@ -1,5 +1,7 @@ # @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. diff --git a/packages/semantic-tokens/README.md b/packages/semantic-tokens/README.md index f93c32e7bd93c..13a22c5b812bc 100644 --- a/packages/semantic-tokens/README.md +++ b/packages/semantic-tokens/README.md @@ -1,5 +1,7 @@ # @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. From 14851a3e23e8027384a1a82b9c57938db4829236 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 20 Aug 2025 13:55:07 -0700 Subject: [PATCH 66/66] Ensure alphabetical order in tsconfig --- tsconfig.base.all.json | 2 +- tsconfig.base.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json index c63c0530194f4..46a050855049e 100644 --- a/tsconfig.base.all.json +++ b/tsconfig.base.all.json @@ -248,11 +248,11 @@ "packages/react-components/react-utilities-compat/stories/src/index.ts" ], "@fluentui/recipes": ["packages/react-components/recipes/src/index.ts"], - "@fluentui/storybook-llms-extractor": ["tools/storybook-llms-extractor/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"], diff --git a/tsconfig.base.json b/tsconfig.base.json index a08f4cfc96fd0..48172740f9c38 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -204,7 +204,6 @@ "packages/react-components/react-utilities-compat/stories/src/index.ts" ], "@fluentui/recipes": ["packages/react-components/recipes/src/index.ts"], - "@fluentui/storybook-llms-extractor": ["tools/storybook-llms-extractor/src/index.ts"], "@fluentui/semantic-style-hooks-preview": [ "packages/react-components/semantic-style-hooks-preview/library/src/index.ts" ], @@ -212,6 +211,7 @@ "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"], "@fluentui/visual-regression-assert": ["tools/visual-regression-assert/src/index.ts"],