Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions packages/semantic-tokens/etc/semantic-tokens.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand All @@ -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";
Expand Down
9 changes: 5 additions & 4 deletions packages/semantic-tokens/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@
"license": "MIT",
"devDependencies": {
"@fluentui/eslint-plugin": "*",
"@fluentui/scripts-api-extractor": "*"
"@fluentui/scripts-api-extractor": "*",
"@fluentui/tokens": ">=1.0.0-alpha"
Comment thread
Mitch-At-Work marked this conversation as resolved.
},
"dependencies": {
"@swc/helpers": "^0.5.1",
"@fluentui/tokens": "1.0.0-alpha.21"
"@swc/helpers": "^0.5.1"
},
"beachball": {
"disallowedChangeTypes": [
Expand All @@ -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"
}
}
56 changes: 56 additions & 0 deletions packages/semantic-tokens/scripts/legacyTokens.ts
Original file line number Diff line number Diff line change
@@ -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();
22 changes: 10 additions & 12 deletions packages/semantic-tokens/scripts/tokenGen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;
Expand All @@ -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 = '';
Expand Down Expand Up @@ -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();

Expand Down
5 changes: 3 additions & 2 deletions packages/semantic-tokens/src/components/focus/tokens.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
// 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,
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}))`;
export const ctrlFocusOuterStroke = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorStrokeFocus2}))`;
22 changes: 15 additions & 7 deletions packages/semantic-tokens/src/components/link/tokens.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
// 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 {
colorNeutralForeground2,
colorNeutralForeground2Hover,
colorNeutralForeground2Pressed,
colorBrandForegroundLink,
colorBrandForegroundLinkHover,
colorBrandForegroundLinkPressed,
} from '../../legacy/tokens';
import {
ctrlLinkForegroundNeutralRestRaw,
ctrlLinkInlineStrokewidthRestRaw,
Expand All @@ -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})`;
Expand Down
19 changes: 13 additions & 6 deletions packages/semantic-tokens/src/control/tokens.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -210,6 +216,7 @@ import {
shadowWindowActiveAmbientRaw,
shadowWindowInactiveAmbientRaw,
} from './variables';

export const textGlobalDisplay1Fontsize = `var(${textGlobalDisplay1FontsizeRaw})`;
export const textGlobalDisplay1Lineheight = `var(${textGlobalDisplay1LineheightRaw})`;
export const textGlobalDisplay2Fontsize = `var(${textGlobalDisplay2FontsizeRaw})`;
Expand All @@ -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})`;
Expand Down Expand Up @@ -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})`;
Expand Down Expand Up @@ -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})`;
Expand Down
Loading