From 7a48bb00157ebbe05a86030fb9e1684b1cf8aee8 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Tue, 11 Feb 2025 09:13:45 -0800 Subject: [PATCH 01/39] Stash initial for now --- 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 | 3 + .../semantic-tokens/config/api-extractor.json | 6 ++ packages/semantic-tokens/config/tests.js | 1 + .../etc/semantic-tokens.api.md | 0 packages/semantic-tokens/jest.config.js | 33 +++++++++ packages/semantic-tokens/package.json | 44 ++++++++++++ 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 +++++++++++++++++++ .../src/components/avatar/tokens.ts | 0 .../src/components/button/tokens.ts | 5 ++ .../semantic-tokens/src/control/tokens.ts | 3 + packages/semantic-tokens/src/index.ts | 3 + packages/semantic-tokens/tsconfig.e2e.json | 7 ++ packages/semantic-tokens/tsconfig.json | 24 +++++++ packages/semantic-tokens/tsconfig.lib.json | 14 ++++ packages/semantic-tokens/tsconfig.spec.json | 9 +++ 24 files changed, 388 insertions(+) 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/components/avatar/tokens.ts create mode 100644 packages/semantic-tokens/src/components/button/tokens.ts create mode 100644 packages/semantic-tokens/src/control/tokens.ts create mode 100644 packages/semantic-tokens/src/index.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/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..0ffcbe9fdee7a --- /dev/null +++ b/packages/semantic-tokens/README.md @@ -0,0 +1,3 @@ +# @fluentui/semantic-tokens + +**Fluent UI Theme semantic-tokens** 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..e69de29bb2d1d 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..e7acf2133822a --- /dev/null +++ b/packages/semantic-tokens/package.json @@ -0,0 +1,44 @@ +{ + "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": "*" + }, + "dependencies": { + "@swc/helpers": "^0.5.1", + "@fluentui/tokens": "^1.0.0-alpha.21" + }, + "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" + ] +} 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..74aa8b2cc7e9b --- /dev/null +++ b/packages/semantic-tokens/scripts/test-esm.html @@ -0,0 +1,71 @@ + + + + + + native ESM for @fluentui/semantic-tokens + + + + + +

Native ESM / @fluentui/semantic-tokens

+
+ + 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..e69de29bb2d1d diff --git a/packages/semantic-tokens/src/components/button/tokens.ts b/packages/semantic-tokens/src/components/button/tokens.ts new file mode 100644 index 0000000000000..4d318d267d166 --- /dev/null +++ b/packages/semantic-tokens/src/components/button/tokens.ts @@ -0,0 +1,5 @@ +import { backgroundCtrlBrandRest } from '../../control/tokens'; + +export const buttonTokens = { + ctrlButtonNeutralBackgroundRest: `var(--ctrlButtonNeutralBackgroundRest,${backgroundCtrlBrandRest}))`, +}; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts new file mode 100644 index 0000000000000..d36f04d75ca9a --- /dev/null +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -0,0 +1,3 @@ +import { tokens } from '@fluentui/react-theme'; + +export const backgroundCtrlBrandRest = `var(--background-ctrl-brand-rest,${tokens.colorBrandBackground}))`; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts new file mode 100644 index 0000000000000..cee57568c64c6 --- /dev/null +++ b/packages/semantic-tokens/src/index.ts @@ -0,0 +1,3 @@ +export * from './control/tokens'; +export * from './fallback/tokens'; +export * from './components/button/tokens'; 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..e7a1ea3969e09 --- /dev/null +++ b/packages/semantic-tokens/tsconfig.json @@ -0,0 +1,24 @@ +{ + "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" + } + ] +} diff --git a/packages/semantic-tokens/tsconfig.lib.json b/packages/semantic-tokens/tsconfig.lib.json new file mode 100644 index 0000000000000..010b57b08e1a8 --- /dev/null +++ b/packages/semantic-tokens/tsconfig.lib.json @@ -0,0 +1,14 @@ +{ + "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": ["**/*.spec.ts", "**/*.test.ts", "**/*.spec-e2e.ts"], + "include": ["./src/**/*.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"] +} From 13424bcbd59af7cb52560e8edbf44fea249f0ebb Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 12 Feb 2025 13:33:56 -0800 Subject: [PATCH 02/39] Add initial Link tokens as example --- .../react-link/library/package.json | 1 + .../components/Link/useLinkStyles.styles.ts | 43 +++++++++++++------ .../src/components/avatar/tokens.ts | 0 .../src/components/button/tokens.ts | 5 --- .../src/components/link/tokens.ts | 12 ++++++ .../semantic-tokens/src/control/tokens.ts | 21 ++++++++- packages/semantic-tokens/src/index.ts | 3 +- 7 files changed, 62 insertions(+), 23 deletions(-) delete mode 100644 packages/semantic-tokens/src/components/avatar/tokens.ts delete mode 100644 packages/semantic-tokens/src/components/button/tokens.ts create mode 100644 packages/semantic-tokens/src/components/link/tokens.ts diff --git a/packages/react-components/react-link/library/package.json b/packages/react-components/react-link/library/package.json index 9b3a437eef841..3fb73df32bad4 100644 --- a/packages/react-components/react-link/library/package.json +++ b/packages/react-components/react-link/library/package.json @@ -24,6 +24,7 @@ "@fluentui/react-shared-contexts": "^9.21.2", "@fluentui/react-tabster": "^9.24.0", "@fluentui/react-theme": "^9.1.24", + "@fluentui/semantic-tokens": "^0.0.0-alpha.1", "@fluentui/react-utilities": "^9.18.20", "@griffel/react": "^1.5.22", "@swc/helpers": "^0.5.1" 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 a6af94a46a50f..8c43e689ef3c5 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 @@ -4,13 +4,27 @@ import { tokens } from '@fluentui/react-theme'; import type { LinkSlots, LinkState } from './Link.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; +import { + ctrlFocusOuterStroke, + ctrlLinkForegroundBrandHover, + ctrlLinkForegroundBrandPressed, + ctrlLinkForegroundNeutralRest, + ctrlLinkForegroundNeutralHover, + ctrlLinkForegroundNeutralPressed, + foregroundCtrlNeutralPrimaryDisabled, + textGlobalBody3Fontsize, + textStyleDefaultRegularFontfamily, + textStyleDefaultRegularWeight, + strokewidthDefault, +} from '@fluentui/semantic-tokens'; + export const linkClassNames: SlotClassNames = { root: 'fui-Link', }; const useStyles = makeStyles({ focusIndicator: createCustomFocusIndicatorStyle({ - textDecorationColor: tokens.colorStrokeFocus2, + textDecorationColor: ctrlFocusOuterStroke, textDecorationLine: 'underline', textDecorationStyle: 'double', outlineStyle: 'none', @@ -22,29 +36,29 @@ const useStyles = makeStyles({ }, backgroundColor: 'transparent', boxSizing: 'border-box', - color: tokens.colorBrandForegroundLink, + color: ctrlLinkForegroundNeutralRest, cursor: 'pointer', display: 'inline', - fontFamily: tokens.fontFamilyBase, - fontSize: tokens.fontSizeBase300, - fontWeight: tokens.fontWeightRegular, + fontFamily: textStyleDefaultRegularFontfamily, + fontSize: textGlobalBody3Fontsize, + fontWeight: textStyleDefaultRegularWeight, margin: '0', padding: '0', overflow: 'inherit', textAlign: 'left', textDecorationLine: 'none', - textDecorationThickness: tokens.strokeWidthThin, + textDecorationThickness: strokewidthDefault, textOverflow: 'inherit', userSelect: 'text', ':hover': { textDecorationLine: 'underline', - color: tokens.colorBrandForegroundLinkHover, + color: ctrlLinkForegroundBrandHover, }, ':active': { textDecorationLine: 'underline', - color: tokens.colorBrandForegroundLinkPressed, + color: ctrlLinkForegroundBrandPressed, }, }, // Overrides when the Link renders as a button. @@ -57,16 +71,16 @@ const useStyles = makeStyles({ }, // Overrides when the Link appears subtle. subtle: { - color: tokens.colorNeutralForeground2, + color: ctrlLinkForegroundNeutralRest, ':hover': { textDecorationLine: 'underline', - color: tokens.colorNeutralForeground2Hover, + color: ctrlLinkForegroundNeutralHover, }, ':active': { textDecorationLine: 'underline', - color: tokens.colorNeutralForeground2Pressed, + color: ctrlLinkForegroundNeutralPressed, }, }, // Overrides when the Link is rendered inline within text. @@ -76,20 +90,21 @@ const useStyles = makeStyles({ // Overrides when the Link is disabled. disabled: { textDecorationLine: 'none', - color: tokens.colorNeutralForegroundDisabled, + color: foregroundCtrlNeutralPrimaryDisabled, cursor: 'not-allowed', ':hover': { textDecorationLine: 'none', - color: tokens.colorNeutralForegroundDisabled, + color: foregroundCtrlNeutralPrimaryDisabled, }, ':active': { textDecorationLine: 'none', - color: tokens.colorNeutralForegroundDisabled, + color: foregroundCtrlNeutralPrimaryDisabled, }, }, + // TODO: Add semantic tokens for inverted colors (not yet defined). inverted: { color: tokens.colorBrandForegroundInverted, ':hover': { diff --git a/packages/semantic-tokens/src/components/avatar/tokens.ts b/packages/semantic-tokens/src/components/avatar/tokens.ts deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/packages/semantic-tokens/src/components/button/tokens.ts b/packages/semantic-tokens/src/components/button/tokens.ts deleted file mode 100644 index 4d318d267d166..0000000000000 --- a/packages/semantic-tokens/src/components/button/tokens.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { backgroundCtrlBrandRest } from '../../control/tokens'; - -export const buttonTokens = { - ctrlButtonNeutralBackgroundRest: `var(--ctrlButtonNeutralBackgroundRest,${backgroundCtrlBrandRest}))`, -}; 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..243f517e32128 --- /dev/null +++ b/packages/semantic-tokens/src/components/link/tokens.ts @@ -0,0 +1,12 @@ +import { tokens } from '@fluentui/react-theme'; + +// Brand colors (Used as default Link control colors in Fluent 2) +export const ctrlLinkForegroundBrandRest = `var(--ctrl-link-foreground-brand-rest, var(--foreground-ctrl-brand-rest,${tokens.colorBrandForegroundLink}))))`; +export const ctrlLinkForegroundBrandHover = `var(--ctrl-link-foreground-brand-hover, var(--foreground-ctrl-brand-hover,${tokens.colorBrandForegroundLinkHover}))))`; +export const ctrlLinkForegroundBrandPressed = `var(--ctrl-link-foreground-brand-pressed, var(--foreground-ctrl-brand-pressed,${tokens.colorBrandForegroundLinkPressed}))))`; + +// Neutral colors (for non-branded use aka fluent2 'subtle') +// In the design specs, this falls back to colorNeutralForeground1, but in fluent2 it falls back to colorNeutralForeground2 +export const ctrlLinkForegroundNeutralRest = `var(--ctrl-link-foreground-neutral-rest, var(--foreground-ctrl-neutral-primary-rest,${tokens.colorNeutralForeground2}))))`; +export const ctrlLinkForegroundNeutralHover = `var(--ctrl-link-foreground-neutral-hover, var(--foreground-ctrl-neutral-primary-hover,${tokens.colorNeutralForeground2Hover}))))`; +export const ctrlLinkForegroundNeutralPressed = `var(--ctrl-link-foreground-neutral-pressed, var(--foreground-ctrl-neutral-primary-pressed,${tokens.colorNeutralForeground2Pressed}))))`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index d36f04d75ca9a..a20a73a4925c8 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -1,3 +1,20 @@ -import { tokens } from '@fluentui/react-theme'; +/* + * Control level tokens are generic tokens that can be used across multiple components. + * + * Components with a different fluent 2 fallback than the control should define a component specific token instead. + */ -export const backgroundCtrlBrandRest = `var(--background-ctrl-brand-rest,${tokens.colorBrandBackground}))`; +import { tokens } from '@fluentui/tokens'; + +// Text +export const textStyleDefaultRegularFontfamily = `var(--text-style-default-regular-fontfamily, ${tokens.fontFamilyBase})`; +export const textGlobalBody3Fontsize = `var(--text-global-body3-fontsize, ${tokens.fontSizeBase300})`; +export const textStyleDefaultRegularWeight = `var(--text-style-default-regular-weight, ${tokens.fontWeightRegular})`; + +// Stroke +export const strokewidthDefault = `var(--strokewidth-default, ${tokens.strokeWidthThin})`; +export const ctrlFocusOuterStroke = `var(--ctrl-focus-outer-stroke, ${tokens.colorStrokeFocus2})`; + +// Disabled +export const foregroundCtrlOntransparentDisabled = `var(--foreground-ctrl-ontransparent-disabled, ${tokens.colorNeutralForegroundDisabled})`; +export const foregroundCtrlNeutralPrimaryDisabled = `var(--foreground-ctrl-neutral-primary-disabled, ${tokens.colorNeutralForegroundDisabled})`; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index cee57568c64c6..d633f6417f0e2 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1,3 +1,2 @@ export * from './control/tokens'; -export * from './fallback/tokens'; -export * from './components/button/tokens'; +export * from './components/link/tokens'; From 5badbf8c7f2ff238535ebd02dd9f30f725310458 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 12 Feb 2025 14:43:06 -0800 Subject: [PATCH 03/39] Add tsconfig for semantic-tokens --- tsconfig.base.all.json | 1 + tsconfig.base.json | 1 + tsconfig.base.wc.json | 3 ++- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json index 259394b5d3b16..189fdbb71a058 100644 --- a/tsconfig.base.all.json +++ b/tsconfig.base.all.json @@ -263,6 +263,7 @@ "@fluentui/recipes": ["packages/react-components/recipes/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/workspace-plugin": ["tools/workspace-plugin/src/index.ts"], "@fluentui/react-list-stories": ["packages/react-components/react-list/stories/src/index.ts"], "@fluentui/react-list": ["packages/react-components/react-list/library/src/index.ts"] diff --git a/tsconfig.base.json b/tsconfig.base.json index 8646fc887ddcb..6217b5f8d42ec 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -200,6 +200,7 @@ "@fluentui/recipes": ["packages/react-components/recipes/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/workspace-plugin": ["tools/workspace-plugin/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 36cc9855e0d30539d5b987ea38d9178fae90ac70 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Fri, 14 Feb 2025 11:47:07 -0800 Subject: [PATCH 04/39] Update indexing and add token vars as exports --- .../semantic-tokens/src/components/index.ts | 1 + .../src/components/link/tokens.ts | 26 ++++++++++++++----- packages/semantic-tokens/src/control/index.ts | 2 ++ .../semantic-tokens/src/control/variables.ts | 9 +++++++ packages/semantic-tokens/src/index.ts | 5 ++-- 5 files changed, 35 insertions(+), 8 deletions(-) create mode 100644 packages/semantic-tokens/src/components/index.ts create mode 100644 packages/semantic-tokens/src/control/index.ts create mode 100644 packages/semantic-tokens/src/control/variables.ts diff --git a/packages/semantic-tokens/src/components/index.ts b/packages/semantic-tokens/src/components/index.ts new file mode 100644 index 0000000000000..23fb60ffb8321 --- /dev/null +++ b/packages/semantic-tokens/src/components/index.ts @@ -0,0 +1 @@ +export * from './link/tokens'; diff --git a/packages/semantic-tokens/src/components/link/tokens.ts b/packages/semantic-tokens/src/components/link/tokens.ts index 243f517e32128..ec5c7ea314b75 100644 --- a/packages/semantic-tokens/src/components/link/tokens.ts +++ b/packages/semantic-tokens/src/components/link/tokens.ts @@ -1,12 +1,26 @@ import { tokens } from '@fluentui/react-theme'; +import { + foregroundCtrlBrandRest, + foregroundCtrlBrandHover, + foregroundCtrlBrandPressed, + foregroundCtrlNeutralPrimaryHover, + foregroundCtrlNeutralPrimaryPressed, + foregroundCtrlNeutralPrimaryRest, +} from '../../control/variables'; // Brand colors (Used as default Link control colors in Fluent 2) -export const ctrlLinkForegroundBrandRest = `var(--ctrl-link-foreground-brand-rest, var(--foreground-ctrl-brand-rest,${tokens.colorBrandForegroundLink}))))`; -export const ctrlLinkForegroundBrandHover = `var(--ctrl-link-foreground-brand-hover, var(--foreground-ctrl-brand-hover,${tokens.colorBrandForegroundLinkHover}))))`; -export const ctrlLinkForegroundBrandPressed = `var(--ctrl-link-foreground-brand-pressed, var(--foreground-ctrl-brand-pressed,${tokens.colorBrandForegroundLinkPressed}))))`; +export const ctrlLinkForegroundBrandRestRaw = '--ctrl-link-foreground-brand-rest'; +export const ctrlLinkForegroundBrandHoverRaw = '--ctrl-link-foreground-brand-hover'; +export const ctrlLinkForegroundBrandPressedRaw = '--ctrl-link-foreground-brand-pressed'; +export const ctrlLinkForegroundBrandRest = `var(${ctrlLinkForegroundBrandRestRaw}, var(${foregroundCtrlBrandRest},${tokens.colorBrandForegroundLink}))))`; +export const ctrlLinkForegroundBrandHover = `var(${ctrlLinkForegroundBrandHoverRaw}, var(${foregroundCtrlBrandHover},${tokens.colorBrandForegroundLinkHover}))))`; +export const ctrlLinkForegroundBrandPressed = `var(${ctrlLinkForegroundBrandPressedRaw}, var(${foregroundCtrlBrandPressed},${tokens.colorBrandForegroundLinkPressed}))))`; // Neutral colors (for non-branded use aka fluent2 'subtle') +export const ctrlLinkForegroundNeutralRestRaw = '--ctrl-link-foreground-neutral-rest'; +export const ctrlLinkForegroundNeutralHoverRaw = '--ctrl-link-foreground-neutral-hover'; +export const ctrlLinkForegroundNeutralPressedRaw = '--ctrl-link-foreground-neutral-pressed'; // In the design specs, this falls back to colorNeutralForeground1, but in fluent2 it falls back to colorNeutralForeground2 -export const ctrlLinkForegroundNeutralRest = `var(--ctrl-link-foreground-neutral-rest, var(--foreground-ctrl-neutral-primary-rest,${tokens.colorNeutralForeground2}))))`; -export const ctrlLinkForegroundNeutralHover = `var(--ctrl-link-foreground-neutral-hover, var(--foreground-ctrl-neutral-primary-hover,${tokens.colorNeutralForeground2Hover}))))`; -export const ctrlLinkForegroundNeutralPressed = `var(--ctrl-link-foreground-neutral-pressed, var(--foreground-ctrl-neutral-primary-pressed,${tokens.colorNeutralForeground2Pressed}))))`; +export const ctrlLinkForegroundNeutralRest = `var(${ctrlLinkForegroundNeutralRestRaw}, var(${foregroundCtrlNeutralPrimaryRest},${tokens.colorNeutralForeground2}))))`; +export const ctrlLinkForegroundNeutralHover = `var(${ctrlLinkForegroundNeutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryHover},${tokens.colorNeutralForeground2Hover}))))`; +export const ctrlLinkForegroundNeutralPressed = `var(${ctrlLinkForegroundNeutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryPressed},${tokens.colorNeutralForeground2Pressed}))))`; diff --git a/packages/semantic-tokens/src/control/index.ts b/packages/semantic-tokens/src/control/index.ts new file mode 100644 index 0000000000000..aca74a1d15040 --- /dev/null +++ b/packages/semantic-tokens/src/control/index.ts @@ -0,0 +1,2 @@ +export * from './tokens'; +export * from './variables'; diff --git a/packages/semantic-tokens/src/control/variables.ts b/packages/semantic-tokens/src/control/variables.ts new file mode 100644 index 0000000000000..a535b496b155f --- /dev/null +++ b/packages/semantic-tokens/src/control/variables.ts @@ -0,0 +1,9 @@ +// Brand control foreground CSS vars +export const foregroundCtrlBrandRest = '--foreground-ctrl-brand-rest'; +export const foregroundCtrlBrandHover = '--foreground-ctrl-brand-hover'; +export const foregroundCtrlBrandPressed = '--foreground-ctrl-brand-pressed'; + +// Control foreground CSS vars +export const foregroundCtrlNeutralPrimaryRest = '--foreground-ctrl-neutral-primary-rest'; +export const foregroundCtrlNeutralPrimaryHover = '--foreground-ctrl-neutral-primary-hover'; +export const foregroundCtrlNeutralPrimaryPressed = '--foreground-ctrl-neutral-primary-pressed'; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index d633f6417f0e2..ae62c589afd45 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1,2 +1,3 @@ -export * from './control/tokens'; -export * from './components/link/tokens'; +// TODO: Convert export all to named exports +export * from './control'; +export * from './components'; From 88cc6f4c01a7404afefddd44fb6f38fe7ae0d474 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Tue, 18 Feb 2025 13:33:56 -0800 Subject: [PATCH 05/39] Change files --- ...ui-react-link-6efd96c1-bad9-4287-bed3-9cb7b90d0107.json | 7 +++++++ ...mantic-tokens-ab69ccc6-b777-4bb6-909a-c406cc6406d2.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-link-6efd96c1-bad9-4287-bed3-9cb7b90d0107.json create mode 100644 change/@fluentui-semantic-tokens-ab69ccc6-b777-4bb6-909a-c406cc6406d2.json diff --git a/change/@fluentui-react-link-6efd96c1-bad9-4287-bed3-9cb7b90d0107.json b/change/@fluentui-react-link-6efd96c1-bad9-4287-bed3-9cb7b90d0107.json new file mode 100644 index 0000000000000..2a1ccc4e98721 --- /dev/null +++ b/change/@fluentui-react-link-6efd96c1-bad9-4287-bed3-9cb7b90d0107.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Semantic token implementation", + "packageName": "@fluentui/react-link", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-semantic-tokens-ab69ccc6-b777-4bb6-909a-c406cc6406d2.json b/change/@fluentui-semantic-tokens-ab69ccc6-b777-4bb6-909a-c406cc6406d2.json new file mode 100644 index 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" +} From 6b008bd3e554b73ec6bf99621c54992df3cea369 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Tue, 18 Feb 2025 14:12:24 -0800 Subject: [PATCH 06/39] Fix version of react-tokens --- packages/semantic-tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/semantic-tokens/package.json b/packages/semantic-tokens/package.json index e7acf2133822a..eb4b728d994f2 100644 --- a/packages/semantic-tokens/package.json +++ b/packages/semantic-tokens/package.json @@ -17,7 +17,7 @@ }, "dependencies": { "@swc/helpers": "^0.5.1", - "@fluentui/tokens": "^1.0.0-alpha.21" + "@fluentui/tokens": "1.0.0-alpha.21" }, "beachball": { "disallowedChangeTypes": [ From 8dba6248937b3683d40ab4cf739d13a23851477a Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Tue, 18 Feb 2025 14:56:32 -0800 Subject: [PATCH 07/39] Update and connect local build artifacts --- .github/CODEOWNERS | 1 + nx.json | 1 + .../react-link/library/package.json | 2 +- .../etc/semantic-tokens.api.md | 84 +++++++++++++++++++ 4 files changed, 87 insertions(+), 1 deletion(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index f439834d903e6..61f7bd4c5fad0 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -272,6 +272,7 @@ packages/react-components/react-virtualizer/stories @microsoft/xc-uxe @Mitch-At- packages/react-components/react-skeleton/library @microsoft/cxe-prg packages/react-components/react-skeleton/stories @microsoft/cxe-prg packages/tokens @microsoft/teams-prg +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 packages/react-components/react-migration-v0-v9/library @microsoft/teams-prg diff --git a/nx.json b/nx.json index 77cb282ed1252..522d5b9654fdb 100644 --- a/nx.json +++ b/nx.json @@ -151,6 +151,7 @@ "scripts/**/*", "packages/eslint-plugin/**", "packages/tokens/**", + "packages/semantic-tokens/**", "packages/react-conformance/**", "packages/react-components/**/*" ] diff --git a/packages/react-components/react-link/library/package.json b/packages/react-components/react-link/library/package.json index 3fb73df32bad4..73f3136cece3b 100644 --- a/packages/react-components/react-link/library/package.json +++ b/packages/react-components/react-link/library/package.json @@ -24,7 +24,7 @@ "@fluentui/react-shared-contexts": "^9.21.2", "@fluentui/react-tabster": "^9.24.0", "@fluentui/react-theme": "^9.1.24", - "@fluentui/semantic-tokens": "^0.0.0-alpha.1", + "@fluentui/semantic-tokens": "0.0.0-alpha.1", "@fluentui/react-utilities": "^9.18.20", "@griffel/react": "^1.5.22", "@swc/helpers": "^0.5.1" diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index e69de29bb2d1d..a301322d0c44c 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -0,0 +1,84 @@ +## API Report File for "@fluentui/semantic-tokens" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +// @public (undocumented) +export const ctrlFocusOuterStroke: string; + +// @public (undocumented) +export const ctrlLinkForegroundBrandHover: string; + +// @public (undocumented) +export const ctrlLinkForegroundBrandHoverRaw = "--ctrl-link-foreground-brand-hover"; + +// @public (undocumented) +export const ctrlLinkForegroundBrandPressed: string; + +// @public (undocumented) +export const ctrlLinkForegroundBrandPressedRaw = "--ctrl-link-foreground-brand-pressed"; + +// @public (undocumented) +export const ctrlLinkForegroundBrandRest: string; + +// @public (undocumented) +export const ctrlLinkForegroundBrandRestRaw = "--ctrl-link-foreground-brand-rest"; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralHover: string; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralHoverRaw = "--ctrl-link-foreground-neutral-hover"; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralPressed: string; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralPressedRaw = "--ctrl-link-foreground-neutral-pressed"; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralRest: string; + +// @public (undocumented) +export const ctrlLinkForegroundNeutralRestRaw = "--ctrl-link-foreground-neutral-rest"; + +// @public (undocumented) +export const foregroundCtrlBrandHover = "--foreground-ctrl-brand-hover"; + +// @public (undocumented) +export const foregroundCtrlBrandPressed = "--foreground-ctrl-brand-pressed"; + +// @public (undocumented) +export const foregroundCtrlBrandRest = "--foreground-ctrl-brand-rest"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryDisabled: string; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryHover = "--foreground-ctrl-neutral-primary-hover"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryPressed = "--foreground-ctrl-neutral-primary-pressed"; + +// @public (undocumented) +export const foregroundCtrlNeutralPrimaryRest = "--foreground-ctrl-neutral-primary-rest"; + +// @public (undocumented) +export const foregroundCtrlOntransparentDisabled: string; + +// @public (undocumented) +export const strokewidthDefault: string; + +// @public (undocumented) +export const textGlobalBody3Fontsize: string; + +// @public (undocumented) +export const textStyleDefaultRegularFontfamily: string; + +// @public (undocumented) +export const textStyleDefaultRegularWeight: string; + +// (No @packageDocumentation comment for this package) + +``` From 4a8db317e29de608b70d3a776058a0906d019e73 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 19 Feb 2025 10:57:27 -0800 Subject: [PATCH 08/39] Lint and fix exports --- .../etc/semantic-tokens.api.md | 12 +++---- .../semantic-tokens/src/components/index.ts | 15 ++++++++- .../src/components/link/tokens.ts | 27 +++++++-------- packages/semantic-tokens/src/control/index.ts | 20 +++++++++-- .../semantic-tokens/src/control/tokens.ts | 2 +- .../semantic-tokens/src/control/variables.ts | 12 +++---- packages/semantic-tokens/src/index.ts | 33 +++++++++++++++++-- 7 files changed, 89 insertions(+), 32 deletions(-) diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index a301322d0c44c..801169f5381c0 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -44,25 +44,25 @@ export const ctrlLinkForegroundNeutralRest: string; export const ctrlLinkForegroundNeutralRestRaw = "--ctrl-link-foreground-neutral-rest"; // @public (undocumented) -export const foregroundCtrlBrandHover = "--foreground-ctrl-brand-hover"; +export const foregroundCtrlBrandHoverRaw = "--foreground-ctrl-brand-hover"; // @public (undocumented) -export const foregroundCtrlBrandPressed = "--foreground-ctrl-brand-pressed"; +export const foregroundCtrlBrandPressedRaw = "--foreground-ctrl-brand-pressed"; // @public (undocumented) -export const foregroundCtrlBrandRest = "--foreground-ctrl-brand-rest"; +export const foregroundCtrlBrandRestRaw = "--foreground-ctrl-brand-rest"; // @public (undocumented) export const foregroundCtrlNeutralPrimaryDisabled: string; // @public (undocumented) -export const foregroundCtrlNeutralPrimaryHover = "--foreground-ctrl-neutral-primary-hover"; +export const foregroundCtrlNeutralPrimaryHoverRaw = "--foreground-ctrl-neutral-primary-hover"; // @public (undocumented) -export const foregroundCtrlNeutralPrimaryPressed = "--foreground-ctrl-neutral-primary-pressed"; +export const foregroundCtrlNeutralPrimaryPressedRaw = "--foreground-ctrl-neutral-primary-pressed"; // @public (undocumented) -export const foregroundCtrlNeutralPrimaryRest = "--foreground-ctrl-neutral-primary-rest"; +export const foregroundCtrlNeutralPrimaryRestRaw = "--foreground-ctrl-neutral-primary-rest"; // @public (undocumented) export const foregroundCtrlOntransparentDisabled: string; diff --git a/packages/semantic-tokens/src/components/index.ts b/packages/semantic-tokens/src/components/index.ts index 23fb60ffb8321..ebec14ca38b0c 100644 --- a/packages/semantic-tokens/src/components/index.ts +++ b/packages/semantic-tokens/src/components/index.ts @@ -1 +1,14 @@ -export * from './link/tokens'; +export { + ctrlLinkForegroundBrandRestRaw, + ctrlLinkForegroundBrandHoverRaw, + ctrlLinkForegroundBrandPressedRaw, + ctrlLinkForegroundBrandRest, + ctrlLinkForegroundBrandHover, + ctrlLinkForegroundBrandPressed, + ctrlLinkForegroundNeutralRestRaw, + ctrlLinkForegroundNeutralHoverRaw, + ctrlLinkForegroundNeutralPressedRaw, + ctrlLinkForegroundNeutralRest, + ctrlLinkForegroundNeutralHover, + ctrlLinkForegroundNeutralPressed, +} from './link/tokens'; diff --git a/packages/semantic-tokens/src/components/link/tokens.ts b/packages/semantic-tokens/src/components/link/tokens.ts index ec5c7ea314b75..dcc0db17b0f20 100644 --- a/packages/semantic-tokens/src/components/link/tokens.ts +++ b/packages/semantic-tokens/src/components/link/tokens.ts @@ -1,26 +1,27 @@ -import { tokens } from '@fluentui/react-theme'; +// eslint-disable-next-line no-restricted-imports +import { tokens } from '@fluentui/tokens'; import { - foregroundCtrlBrandRest, - foregroundCtrlBrandHover, - foregroundCtrlBrandPressed, - foregroundCtrlNeutralPrimaryHover, - foregroundCtrlNeutralPrimaryPressed, - foregroundCtrlNeutralPrimaryRest, + foregroundCtrlBrandRestRaw, + foregroundCtrlBrandHoverRaw, + foregroundCtrlBrandPressedRaw, + foregroundCtrlNeutralPrimaryHoverRaw, + foregroundCtrlNeutralPrimaryPressedRaw, + foregroundCtrlNeutralPrimaryRestRaw, } from '../../control/variables'; // Brand colors (Used as default Link control colors in Fluent 2) export const ctrlLinkForegroundBrandRestRaw = '--ctrl-link-foreground-brand-rest'; export const ctrlLinkForegroundBrandHoverRaw = '--ctrl-link-foreground-brand-hover'; export const ctrlLinkForegroundBrandPressedRaw = '--ctrl-link-foreground-brand-pressed'; -export const ctrlLinkForegroundBrandRest = `var(${ctrlLinkForegroundBrandRestRaw}, var(${foregroundCtrlBrandRest},${tokens.colorBrandForegroundLink}))))`; -export const ctrlLinkForegroundBrandHover = `var(${ctrlLinkForegroundBrandHoverRaw}, var(${foregroundCtrlBrandHover},${tokens.colorBrandForegroundLinkHover}))))`; -export const ctrlLinkForegroundBrandPressed = `var(${ctrlLinkForegroundBrandPressedRaw}, var(${foregroundCtrlBrandPressed},${tokens.colorBrandForegroundLinkPressed}))))`; +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}))))`; // Neutral colors (for non-branded use aka fluent2 'subtle') export const ctrlLinkForegroundNeutralRestRaw = '--ctrl-link-foreground-neutral-rest'; export const ctrlLinkForegroundNeutralHoverRaw = '--ctrl-link-foreground-neutral-hover'; export const ctrlLinkForegroundNeutralPressedRaw = '--ctrl-link-foreground-neutral-pressed'; // In the design specs, this falls back to colorNeutralForeground1, but in fluent2 it falls back to colorNeutralForeground2 -export const ctrlLinkForegroundNeutralRest = `var(${ctrlLinkForegroundNeutralRestRaw}, var(${foregroundCtrlNeutralPrimaryRest},${tokens.colorNeutralForeground2}))))`; -export const ctrlLinkForegroundNeutralHover = `var(${ctrlLinkForegroundNeutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryHover},${tokens.colorNeutralForeground2Hover}))))`; -export const ctrlLinkForegroundNeutralPressed = `var(${ctrlLinkForegroundNeutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryPressed},${tokens.colorNeutralForeground2Pressed}))))`; +export const ctrlLinkForegroundNeutralRest = `var(${ctrlLinkForegroundNeutralRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw},${tokens.colorNeutralForeground2}))))`; +export const ctrlLinkForegroundNeutralHover = `var(${ctrlLinkForegroundNeutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryHoverRaw},${tokens.colorNeutralForeground2Hover}))))`; +export const ctrlLinkForegroundNeutralPressed = `var(${ctrlLinkForegroundNeutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw},${tokens.colorNeutralForeground2Pressed}))))`; diff --git a/packages/semantic-tokens/src/control/index.ts b/packages/semantic-tokens/src/control/index.ts index aca74a1d15040..c210e117212d6 100644 --- a/packages/semantic-tokens/src/control/index.ts +++ b/packages/semantic-tokens/src/control/index.ts @@ -1,2 +1,18 @@ -export * from './tokens'; -export * from './variables'; +export { + foregroundCtrlBrandRestRaw, + foregroundCtrlBrandHoverRaw, + foregroundCtrlBrandPressedRaw, + foregroundCtrlNeutralPrimaryRestRaw, + foregroundCtrlNeutralPrimaryHoverRaw, + foregroundCtrlNeutralPrimaryPressedRaw, +} from './variables'; + +export { + textStyleDefaultRegularFontfamily, + textGlobalBody3Fontsize, + textStyleDefaultRegularWeight, + strokewidthDefault, + ctrlFocusOuterStroke, + foregroundCtrlOntransparentDisabled, + foregroundCtrlNeutralPrimaryDisabled, +} from './tokens'; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index a20a73a4925c8..82db88d27b5b2 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -3,7 +3,7 @@ * * Components with a different fluent 2 fallback than the control should define a component specific token instead. */ - +// eslint-disable-next-line no-restricted-imports import { tokens } from '@fluentui/tokens'; // Text diff --git a/packages/semantic-tokens/src/control/variables.ts b/packages/semantic-tokens/src/control/variables.ts index a535b496b155f..8ba6ecb1057ed 100644 --- a/packages/semantic-tokens/src/control/variables.ts +++ b/packages/semantic-tokens/src/control/variables.ts @@ -1,9 +1,9 @@ // Brand control foreground CSS vars -export const foregroundCtrlBrandRest = '--foreground-ctrl-brand-rest'; -export const foregroundCtrlBrandHover = '--foreground-ctrl-brand-hover'; -export const foregroundCtrlBrandPressed = '--foreground-ctrl-brand-pressed'; +export const foregroundCtrlBrandRestRaw = '--foreground-ctrl-brand-rest'; +export const foregroundCtrlBrandHoverRaw = '--foreground-ctrl-brand-hover'; +export const foregroundCtrlBrandPressedRaw = '--foreground-ctrl-brand-pressed'; // Control foreground CSS vars -export const foregroundCtrlNeutralPrimaryRest = '--foreground-ctrl-neutral-primary-rest'; -export const foregroundCtrlNeutralPrimaryHover = '--foreground-ctrl-neutral-primary-hover'; -export const foregroundCtrlNeutralPrimaryPressed = '--foreground-ctrl-neutral-primary-pressed'; +export const foregroundCtrlNeutralPrimaryRestRaw = '--foreground-ctrl-neutral-primary-rest'; +export const foregroundCtrlNeutralPrimaryHoverRaw = '--foreground-ctrl-neutral-primary-hover'; +export const foregroundCtrlNeutralPrimaryPressedRaw = '--foreground-ctrl-neutral-primary-pressed'; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index ae62c589afd45..4538191b787ca 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1,3 +1,30 @@ -// TODO: Convert export all to named exports -export * from './control'; -export * from './components'; +export { + foregroundCtrlBrandRestRaw, + foregroundCtrlBrandHoverRaw, + foregroundCtrlBrandPressedRaw, + foregroundCtrlNeutralPrimaryRestRaw, + foregroundCtrlNeutralPrimaryHoverRaw, + foregroundCtrlNeutralPrimaryPressedRaw, + textStyleDefaultRegularFontfamily, + textGlobalBody3Fontsize, + textStyleDefaultRegularWeight, + strokewidthDefault, + ctrlFocusOuterStroke, + foregroundCtrlOntransparentDisabled, + foregroundCtrlNeutralPrimaryDisabled, +} from './control'; + +export { + ctrlLinkForegroundBrandRestRaw, + ctrlLinkForegroundBrandHoverRaw, + ctrlLinkForegroundBrandPressedRaw, + ctrlLinkForegroundBrandRest, + ctrlLinkForegroundBrandHover, + ctrlLinkForegroundBrandPressed, + ctrlLinkForegroundNeutralRestRaw, + ctrlLinkForegroundNeutralHoverRaw, + ctrlLinkForegroundNeutralPressedRaw, + ctrlLinkForegroundNeutralRest, + ctrlLinkForegroundNeutralHover, + ctrlLinkForegroundNeutralPressed, +} from './components'; From e2aa7f22731ff3a756b15bf49931b05019fe3c05 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Thu, 20 Feb 2025 10:38:27 -0800 Subject: [PATCH 09/39] Update E2E for semantic tokens to a dummy test (for now) --- packages/semantic-tokens/scripts/test-esm.html | 10 +++++----- packages/semantic-tokens/src/native-esm.spec-e2e.ts | 8 ++++++++ 2 files changed, 13 insertions(+), 5 deletions(-) create mode 100644 packages/semantic-tokens/src/native-esm.spec-e2e.ts diff --git a/packages/semantic-tokens/scripts/test-esm.html b/packages/semantic-tokens/scripts/test-esm.html index 74aa8b2cc7e9b..4bb12e0d739e5 100644 --- a/packages/semantic-tokens/scripts/test-esm.html +++ b/packages/semantic-tokens/scripts/test-esm.html @@ -3,7 +3,7 @@ - native ESM for @fluentui/semantic-tokens + native ESM for @fluentui/tokens