microsoft
/
fluentui
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Hoist theme tokens from @fluentui/react-theme to @fluentui/tokens (#25966) 

* add package

* fix build, remove anything react

* move code from @fluentui/react-theme to @fluentui/tokens

* move token pipeline scripts from @fluentui/react-theme to @fluentui/tokens

* react-provider change file

* change files

* Apply suggestions from code review

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>

* Make @fluentui/tokens package public

* Changefile

* Address PR comments

* fix dependencies after master merge

* revert charting changes

* revert more lint changes

* update changefile

* disallow imports from react and @fluentui

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
This commit is contained in:
Miroslav Stastny 2022-12-20 19:20:26 +01:00 коммит произвёл GitHub
Родитель 3ec3c7736e
Коммит 97c1c1ab21
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
50 изменённых файлов: 790 добавлений и 490 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

7
change/@fluentui-react-provider-f3ad344b-8905-4536-b4d3-fe35d1840a51.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "chore: re-export theme from tokens package",
"packageName": "@fluentui/react-provider",
"email": "miroslav.stastny@microsoft.com",
"dependentChangeType": "patch"
}

7
change/@fluentui-react-theme-357d6c70-e758-4cf8-8037-a7bc097fd418.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "chore: re-export theme from tokens package",
"packageName": "@fluentui/react-theme",
"email": "miroslav.stastny@microsoft.com",
"dependentChangeType": "patch"
}

7
change/@fluentui-tokens-d62c088c-a980-4ad6-8128-5231b367df5b.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Hoist theme tokens from react-theme to tokens package",
"packageName": "@fluentui/tokens",
"email": "miroslav.stastny@microsoft.com",
"dependentChangeType": "patch"
}

2
packages/react-components/react-provider/etc/react-provider.api.md
Просмотреть файл

@ -11,7 +11,7 @@ import type { ProviderContextValue_unstable } from '@fluentui/react-shared-conte
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import { SlotClassNames } from '@fluentui/react-utilities';
import { Theme } from '@fluentui/react-theme';
import { Theme } from '@fluentui/tokens';
import type { ThemeClassNameContextValue_unstable } from '@fluentui/react-shared-contexts';
import type { ThemeContextValue_unstable } from '@fluentui/react-shared-contexts';
import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-shared-contexts';

655
packages/react-components/react-theme/etc/react-theme.api.md
Просмотреть файл

@ -4,491 +4,210 @@
```ts
// @public (undocumented)
export type BorderRadiusTokens = {
borderRadiusNone: string;
borderRadiusSmall: string;
borderRadiusMedium: string;
borderRadiusLarge: string;
borderRadiusXLarge: string;
borderRadiusCircular: string;
};
import { BorderRadiusTokens } from '@fluentui/tokens';
import { Brands } from '@fluentui/tokens';
import { BrandVariants } from '@fluentui/tokens';
import { ColorPaletteAnchor } from '@fluentui/tokens';
import { ColorPaletteBeige } from '@fluentui/tokens';
import { ColorPaletteBerry } from '@fluentui/tokens';
import { ColorPaletteBlue } from '@fluentui/tokens';
import { ColorPaletteBrass } from '@fluentui/tokens';
import { ColorPaletteBrown } from '@fluentui/tokens';
import { ColorPaletteCornflower } from '@fluentui/tokens';
import { ColorPaletteCranberry } from '@fluentui/tokens';
import { ColorPaletteDarkGreen } from '@fluentui/tokens';
import { ColorPaletteDarkOrange } from '@fluentui/tokens';
import { ColorPaletteDarkRed } from '@fluentui/tokens';
import { ColorPaletteForest } from '@fluentui/tokens';
import { ColorPaletteGold } from '@fluentui/tokens';
import { ColorPaletteGrape } from '@fluentui/tokens';
import { ColorPaletteGreen } from '@fluentui/tokens';
import { ColorPaletteLavender } from '@fluentui/tokens';
import { ColorPaletteLightGreen } from '@fluentui/tokens';
import { ColorPaletteLightTeal } from '@fluentui/tokens';
import { ColorPaletteLilac } from '@fluentui/tokens';
import { ColorPaletteMagenta } from '@fluentui/tokens';
import { ColorPaletteMarigold } from '@fluentui/tokens';
import { ColorPaletteMink } from '@fluentui/tokens';
import { ColorPaletteNavy } from '@fluentui/tokens';
import { ColorPalettePeach } from '@fluentui/tokens';
import { ColorPalettePink } from '@fluentui/tokens';
import { ColorPalettePlatinum } from '@fluentui/tokens';
import { ColorPalettePlum } from '@fluentui/tokens';
import { ColorPalettePumpkin } from '@fluentui/tokens';
import { ColorPalettePurple } from '@fluentui/tokens';
import { ColorPaletteRed } from '@fluentui/tokens';
import { ColorPaletteRoyalBlue } from '@fluentui/tokens';
import { ColorPaletteSeafoam } from '@fluentui/tokens';
import { ColorPaletteSteel } from '@fluentui/tokens';
import { ColorPaletteTeal } from '@fluentui/tokens';
import { ColorPaletteTokens } from '@fluentui/tokens';
import { ColorPaletteYellow } from '@fluentui/tokens';
import { ColorTokens } from '@fluentui/tokens';
import { createDarkTheme } from '@fluentui/tokens';
import { createHighContrastTheme } from '@fluentui/tokens';
import { createLightTheme } from '@fluentui/tokens';
import { createTeamsDarkTheme } from '@fluentui/tokens';
import { CurveTokens } from '@fluentui/tokens';
import { DurationTokens } from '@fluentui/tokens';
import { FontFamilyTokens } from '@fluentui/tokens';
import { FontSizeTokens } from '@fluentui/tokens';
import { FontWeightTokens } from '@fluentui/tokens';
import { HorizontalSpacingTokens } from '@fluentui/tokens';
import { LineHeightTokens } from '@fluentui/tokens';
import { PartialTheme } from '@fluentui/tokens';
import { ShadowBrandTokens } from '@fluentui/tokens';
import { ShadowTokens } from '@fluentui/tokens';
import { SpacingTokens } from '@fluentui/tokens';
import { StrokeWidthTokens } from '@fluentui/tokens';
import { teamsDarkTheme } from '@fluentui/tokens';
import { teamsHighContrastTheme } from '@fluentui/tokens';
import { teamsLightTheme } from '@fluentui/tokens';
import { Theme } from '@fluentui/tokens';
import { themeToTokensObject } from '@fluentui/tokens';
import { tokens } from '@fluentui/tokens';
import { TypographyStyle } from '@fluentui/tokens';
import { TypographyStyles } from '@fluentui/tokens';
import { typographyStyles } from '@fluentui/tokens';
import { VerticalSpacingTokens } from '@fluentui/tokens';
import { webDarkTheme } from '@fluentui/tokens';
import { webLightTheme } from '@fluentui/tokens';
// @public (undocumented)
export type Brands = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150 | 160;
export { BorderRadiusTokens }
// @public (undocumented)
export type BrandVariants = Record<Brands, string>;
export { Brands }
// @public (undocumented)
export type ColorPaletteAnchor = 'colorPaletteAnchorBackground2' | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorBorderActive';
export { BrandVariants }
// @public (undocumented)
export type ColorPaletteBeige = 'colorPaletteBeigeBackground2' | 'colorPaletteBeigeForeground2' | 'colorPaletteBeigeBorderActive';
export { ColorPaletteAnchor }
// @public (undocumented)
export type ColorPaletteBerry = 'colorPaletteBerryBackground1' | 'colorPaletteBerryBackground2' | 'colorPaletteBerryBackground3' | 'colorPaletteBerryForeground1' | 'colorPaletteBerryForeground2' | 'colorPaletteBerryForeground3' | 'colorPaletteBerryBorderActive' | 'colorPaletteBerryBorder1' | 'colorPaletteBerryBorder2';
export { ColorPaletteBeige }
// @public (undocumented)
export type ColorPaletteBlue = 'colorPaletteBlueBackground2' | 'colorPaletteBlueForeground2' | 'colorPaletteBlueBorderActive';
export { ColorPaletteBerry }
// @public (undocumented)
export type ColorPaletteBrass = 'colorPaletteBrassBackground2' | 'colorPaletteBrassForeground2' | 'colorPaletteBrassBorderActive';
export { ColorPaletteBlue }
// @public (undocumented)
export type ColorPaletteBrown = 'colorPaletteBrownBackground2' | 'colorPaletteBrownForeground2' | 'colorPaletteBrownBorderActive';
export { ColorPaletteBrass }
// @public (undocumented)
export type ColorPaletteCornflower = 'colorPaletteCornflowerBackground2' | 'colorPaletteCornflowerForeground2' | 'colorPaletteCornflowerBorderActive';
export { ColorPaletteBrown }
// @public (undocumented)
export type ColorPaletteCranberry = 'colorPaletteCranberryBackground2' | 'colorPaletteCranberryForeground2' | 'colorPaletteCranberryBorderActive';
export { ColorPaletteCornflower }
// @public (undocumented)
export type ColorPaletteDarkGreen = 'colorPaletteDarkGreenBackground2' | 'colorPaletteDarkGreenForeground2' | 'colorPaletteDarkGreenBorderActive';
export { ColorPaletteCranberry }
// @public (undocumented)
export type ColorPaletteDarkOrange = 'colorPaletteDarkOrangeBackground1' | 'colorPaletteDarkOrangeBackground2' | 'colorPaletteDarkOrangeBackground3' | 'colorPaletteDarkOrangeForeground1' | 'colorPaletteDarkOrangeForeground2' | 'colorPaletteDarkOrangeForeground3' | 'colorPaletteDarkOrangeBorderActive' | 'colorPaletteDarkOrangeBorder1' | 'colorPaletteDarkOrangeBorder2';
export { ColorPaletteDarkGreen }
// @public (undocumented)
export type ColorPaletteDarkRed = 'colorPaletteDarkRedBackground2' | 'colorPaletteDarkRedForeground2' | 'colorPaletteDarkRedBorderActive';
export { ColorPaletteDarkOrange }
// @public (undocumented)
export type ColorPaletteForest = 'colorPaletteForestBackground2' | 'colorPaletteForestForeground2' | 'colorPaletteForestBorderActive';
export { ColorPaletteDarkRed }
// @public (undocumented)
export type ColorPaletteGold = 'colorPaletteGoldBackground2' | 'colorPaletteGoldForeground2' | 'colorPaletteGoldBorderActive';
export { ColorPaletteForest }
// @public (undocumented)
export type ColorPaletteGrape = 'colorPaletteGrapeBackground2' | 'colorPaletteGrapeForeground2' | 'colorPaletteGrapeBorderActive';
export { ColorPaletteGold }
// @public (undocumented)
export type ColorPaletteGreen = 'colorPaletteGreenBackground1' | 'colorPaletteGreenBackground2' | 'colorPaletteGreenBackground3' | 'colorPaletteGreenForeground1' | 'colorPaletteGreenForeground2' | 'colorPaletteGreenForeground3' | 'colorPaletteGreenForegroundInverted' | 'colorPaletteGreenBorderActive' | 'colorPaletteGreenBorder1' | 'colorPaletteGreenBorder2';
// @public (undocumented)
export type ColorPaletteLavender = 'colorPaletteLavenderBackground2' | 'colorPaletteLavenderForeground2' | 'colorPaletteLavenderBorderActive';
// @public (undocumented)
export type ColorPaletteLightGreen = 'colorPaletteLightGreenBackground1' | 'colorPaletteLightGreenBackground2' | 'colorPaletteLightGreenBackground3' | 'colorPaletteLightGreenForeground1' | 'colorPaletteLightGreenForeground2' | 'colorPaletteLightGreenForeground3' | 'colorPaletteLightGreenBorderActive' | 'colorPaletteLightGreenBorder1' | 'colorPaletteLightGreenBorder2';
// @public (undocumented)
export type ColorPaletteLightTeal = 'colorPaletteLightTealBackground2' | 'colorPaletteLightTealForeground2' | 'colorPaletteLightTealBorderActive';
// @public (undocumented)
export type ColorPaletteLilac = 'colorPaletteLilacBackground2' | 'colorPaletteLilacForeground2' | 'colorPaletteLilacBorderActive';
// @public (undocumented)
export type ColorPaletteMagenta = 'colorPaletteMagentaBackground2' | 'colorPaletteMagentaForeground2' | 'colorPaletteMagentaBorderActive';
// @public (undocumented)
export type ColorPaletteMarigold = 'colorPaletteMarigoldBackground1' | 'colorPaletteMarigoldBackground2' | 'colorPaletteMarigoldBackground3' | 'colorPaletteMarigoldForeground1' | 'colorPaletteMarigoldForeground2' | 'colorPaletteMarigoldForeground3' | 'colorPaletteMarigoldBorderActive' | 'colorPaletteMarigoldBorder1' | 'colorPaletteMarigoldBorder2';
// @public (undocumented)
export type ColorPaletteMink = 'colorPaletteMinkBackground2' | 'colorPaletteMinkForeground2' | 'colorPaletteMinkBorderActive';
// @public (undocumented)
export type ColorPaletteNavy = 'colorPaletteNavyBackground2' | 'colorPaletteNavyForeground2' | 'colorPaletteNavyBorderActive';
// @public (undocumented)
export type ColorPalettePeach = 'colorPalettePeachBackground2' | 'colorPalettePeachForeground2' | 'colorPalettePeachBorderActive';
// @public (undocumented)
export type ColorPalettePink = 'colorPalettePinkBackground2' | 'colorPalettePinkForeground2' | 'colorPalettePinkBorderActive';
// @public (undocumented)
export type ColorPalettePlatinum = 'colorPalettePlatinumBackground2' | 'colorPalettePlatinumForeground2' | 'colorPalettePlatinumBorderActive';
// @public (undocumented)
export type ColorPalettePlum = 'colorPalettePlumBackground2' | 'colorPalettePlumForeground2' | 'colorPalettePlumBorderActive';
// @public (undocumented)
export type ColorPalettePumpkin = 'colorPalettePumpkinBackground2' | 'colorPalettePumpkinForeground2' | 'colorPalettePumpkinBorderActive';
// @public (undocumented)
export type ColorPalettePurple = 'colorPalettePurpleBackground2' | 'colorPalettePurpleForeground2' | 'colorPalettePurpleBorderActive';
// @public (undocumented)
export type ColorPaletteRed = 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' | 'colorPaletteRedBackground3' | 'colorPaletteRedForeground1' | 'colorPaletteRedForeground2' | 'colorPaletteRedForeground3' | 'colorPaletteRedForegroundInverted' | 'colorPaletteRedBorderActive' | 'colorPaletteRedBorder1' | 'colorPaletteRedBorder2';
// @public (undocumented)
export type ColorPaletteRoyalBlue = 'colorPaletteRoyalBlueBackground2' | 'colorPaletteRoyalBlueForeground2' | 'colorPaletteRoyalBlueBorderActive';
// @public (undocumented)
export type ColorPaletteSeafoam = 'colorPaletteSeafoamBackground2' | 'colorPaletteSeafoamForeground2' | 'colorPaletteSeafoamBorderActive';
// @public (undocumented)
export type ColorPaletteSteel = 'colorPaletteSteelBackground2' | 'colorPaletteSteelForeground2' | 'colorPaletteSteelBorderActive';
// @public (undocumented)
export type ColorPaletteTeal = 'colorPaletteTealBackground2' | 'colorPaletteTealForeground2' | 'colorPaletteTealBorderActive';
// @public (undocumented)
export type ColorPaletteTokens = StatusColorPaletteTokens & PersonaColorPaletteTokens;
// @public (undocumented)
export type ColorPaletteYellow = 'colorPaletteYellowBackground1' | 'colorPaletteYellowBackground2' | 'colorPaletteYellowBackground3' | 'colorPaletteYellowForeground1' | 'colorPaletteYellowForeground2' | 'colorPaletteYellowForeground3' | 'colorPaletteYellowForegroundInverted' | 'colorPaletteYellowBorderActive' | 'colorPaletteYellowBorder1' | 'colorPaletteYellowBorder2';
// @public
export type ColorTokens = {
colorNeutralForeground1: string;
colorNeutralForeground1Hover: string;
colorNeutralForeground1Pressed: string;
colorNeutralForeground1Selected: string;
colorNeutralForeground2: string;
colorNeutralForeground2Hover: string;
colorNeutralForeground2Pressed: string;
colorNeutralForeground2Selected: string;
colorNeutralForeground2BrandHover: string;
colorNeutralForeground2BrandPressed: string;
colorNeutralForeground2BrandSelected: string;
colorNeutralForeground3: string;
colorNeutralForeground3Hover: string;
colorNeutralForeground3Pressed: string;
colorNeutralForeground3Selected: string;
colorNeutralForeground3BrandHover: string;
colorNeutralForeground3BrandPressed: string;
colorNeutralForeground3BrandSelected: string;
colorNeutralForeground4: string;
colorNeutralForegroundDisabled: string;
colorNeutralForegroundInvertedDisabled: string;
colorBrandForegroundLink: string;
colorBrandForegroundLinkHover: string;
colorBrandForegroundLinkPressed: string;
colorBrandForegroundLinkSelected: string;
colorNeutralForeground2Link: string;
colorNeutralForeground2LinkHover: string;
colorNeutralForeground2LinkPressed: string;
colorNeutralForeground2LinkSelected: string;
colorCompoundBrandForeground1: string;
colorCompoundBrandForeground1Hover: string;
colorCompoundBrandForeground1Pressed: string;
colorBrandForeground1: string;
colorBrandForeground2: string;
colorNeutralForeground1Static: string;
colorNeutralForegroundInverted: string;
colorNeutralForegroundInvertedHover: string;
colorNeutralForegroundInvertedPressed: string;
colorNeutralForegroundInvertedSelected: string;
colorNeutralForegroundInverted2: string;
colorNeutralForegroundOnBrand: string;
colorNeutralForegroundStaticInverted: string;
colorNeutralForegroundInvertedLink: string;
colorNeutralForegroundInvertedLinkHover: string;
colorNeutralForegroundInvertedLinkPressed: string;
colorNeutralForegroundInvertedLinkSelected: string;
colorBrandForegroundInverted: string;
colorBrandForegroundInvertedHover: string;
colorBrandForegroundInvertedPressed: string;
colorBrandForegroundOnLight: string;
colorBrandForegroundOnLightHover: string;
colorBrandForegroundOnLightPressed: string;
colorBrandForegroundOnLightSelected: string;
colorNeutralBackground1: string;
colorNeutralBackground1Hover: string;
colorNeutralBackground1Pressed: string;
colorNeutralBackground1Selected: string;
colorNeutralBackground2: string;
colorNeutralBackground2Hover: string;
colorNeutralBackground2Pressed: string;
colorNeutralBackground2Selected: string;
colorNeutralBackground3: string;
colorNeutralBackground3Hover: string;
colorNeutralBackground3Pressed: string;
colorNeutralBackground3Selected: string;
colorNeutralBackground4: string;
colorNeutralBackground4Hover: string;
colorNeutralBackground4Pressed: string;
colorNeutralBackground4Selected: string;
colorNeutralBackground5: string;
colorNeutralBackground5Hover: string;
colorNeutralBackground5Pressed: string;
colorNeutralBackground5Selected: string;
colorNeutralBackground6: string;
colorNeutralBackgroundStatic: string;
colorNeutralBackgroundInverted: string;
colorSubtleBackground: string;
colorSubtleBackgroundHover: string;
colorSubtleBackgroundPressed: string;
colorSubtleBackgroundSelected: string;
colorSubtleBackgroundLightAlphaHover: string;
colorSubtleBackgroundLightAlphaPressed: string;
colorSubtleBackgroundLightAlphaSelected: string;
colorSubtleBackgroundInverted: string;
colorSubtleBackgroundInvertedHover: string;
colorSubtleBackgroundInvertedPressed: string;
colorSubtleBackgroundInvertedSelected: string;
colorTransparentBackground: string;
colorTransparentBackgroundHover: string;
colorTransparentBackgroundPressed: string;
colorTransparentBackgroundSelected: string;
colorNeutralBackgroundDisabled: string;
colorNeutralBackgroundInvertedDisabled: string;
colorNeutralStencil1: string;
colorNeutralStencil2: string;
colorNeutralStencil1Alpha: string;
colorNeutralStencil2Alpha: string;
colorBackgroundOverlay: string;
colorScrollbarOverlay: string;
colorBrandBackground: string;
colorBrandBackgroundHover: string;
colorBrandBackgroundPressed: string;
colorBrandBackgroundSelected: string;
colorCompoundBrandBackground: string;
colorCompoundBrandBackgroundHover: string;
colorCompoundBrandBackgroundPressed: string;
colorBrandBackgroundStatic: string;
colorBrandBackground2: string;
colorBrandBackgroundInverted: string;
colorBrandBackgroundInvertedHover: string;
colorBrandBackgroundInvertedPressed: string;
colorBrandBackgroundInvertedSelected: string;
colorNeutralStrokeAccessible: string;
colorNeutralStrokeAccessibleHover: string;
colorNeutralStrokeAccessiblePressed: string;
colorNeutralStrokeAccessibleSelected: string;
colorNeutralStroke1: string;
colorNeutralStroke1Hover: string;
colorNeutralStroke1Pressed: string;
colorNeutralStroke1Selected: string;
colorNeutralStroke2: string;
colorNeutralStroke3: string;
colorNeutralStrokeOnBrand: string;
colorNeutralStrokeOnBrand2: string;
colorNeutralStrokeOnBrand2Hover: string;
colorNeutralStrokeOnBrand2Pressed: string;
colorNeutralStrokeOnBrand2Selected: string;
colorBrandStroke1: string;
colorBrandStroke2: string;
colorCompoundBrandStroke: string;
colorCompoundBrandStrokeHover: string;
colorCompoundBrandStrokePressed: string;
colorNeutralStrokeDisabled: string;
colorNeutralStrokeInvertedDisabled: string;
colorTransparentStroke: string;
colorTransparentStrokeInteractive: string;
colorTransparentStrokeDisabled: string;
colorStrokeFocus1: string;
colorStrokeFocus2: string;
colorNeutralShadowAmbient: string;
colorNeutralShadowKey: string;
colorNeutralShadowAmbientLighter: string;
colorNeutralShadowKeyLighter: string;
colorNeutralShadowAmbientDarker: string;
colorNeutralShadowKeyDarker: string;
colorBrandShadowAmbient: string;
colorBrandShadowKey: string;
};
// @public (undocumented)
export const createDarkTheme: (brand: BrandVariants) => Theme;
// @public (undocumented)
export const createHighContrastTheme: () => Theme;
// @public (undocumented)
export const createLightTheme: (brand: BrandVariants) => Theme;
// @public (undocumented)
export const createTeamsDarkTheme: (brand: BrandVariants) => Theme;
// @public (undocumented)
export type CurveTokens = {
curveAccelerateMax: string;
curveAccelerateMid: string;
curveAccelerateMin: string;
curveDecelerateMax: string;
curveDecelerateMid: string;
curveDecelerateMin: string;
curveEasyEaseMax: string;
curveEasyEase: string;
curveLinear: string;
};
// @public (undocumented)
export type DurationTokens = {
durationUltraFast: string;
durationFaster: string;
durationFast: string;
durationNormal: string;
durationSlow: string;
durationSlower: string;
durationUltraSlow: string;
};
// @public (undocumented)
export type FontFamilyTokens = {
fontFamilyBase: string;
fontFamilyMonospace: string;
fontFamilyNumeric: string;
};
// @public (undocumented)
export type FontSizeTokens = {
fontSizeBase100: string;
fontSizeBase200: string;
fontSizeBase300: string;
fontSizeBase400: string;
fontSizeBase500: string;
fontSizeBase600: string;
fontSizeHero700: string;
fontSizeHero800: string;
fontSizeHero900: string;
fontSizeHero1000: string;
};
// @public (undocumented)
export type FontWeightTokens = {
fontWeightRegular: number;
fontWeightMedium: number;
fontWeightSemibold: number;
fontWeightBold: number;
};
// @public (undocumented)
export type HorizontalSpacingTokens = {
spacingHorizontalNone: string;
spacingHorizontalXXS: string;
spacingHorizontalXS: string;
spacingHorizontalSNudge: string;
spacingHorizontalS: string;
spacingHorizontalMNudge: string;
spacingHorizontalM: string;
spacingHorizontalL: string;
spacingHorizontalXL: string;
spacingHorizontalXXL: string;
spacingHorizontalXXXL: string;
};
// @public (undocumented)
export type LineHeightTokens = {
lineHeightBase100: string;
lineHeightBase200: string;
lineHeightBase300: string;
lineHeightBase400: string;
lineHeightBase500: string;
lineHeightBase600: string;
lineHeightHero700: string;
lineHeightHero800: string;
lineHeightHero900: string;
lineHeightHero1000: string;
};
// @public (undocumented)
export type PartialTheme = Partial<Theme>;
// @public (undocumented)
export type ShadowBrandTokens = {
shadow2Brand: string;
shadow4Brand: string;
shadow8Brand: string;
shadow16Brand: string;
shadow28Brand: string;
shadow64Brand: string;
};
// @public
export type ShadowTokens = {
shadow2: string;
shadow4: string;
shadow8: string;
shadow16: string;
shadow28: string;
shadow64: string;
};
// @public (undocumented)
export type SpacingTokens = {
none: string;
xxs: string;
xs: string;
sNudge: string;
s: string;
mNudge: string;
m: string;
l: string;
xl: string;
xxl: string;
xxxl: string;
};
// @public (undocumented)
export type StrokeWidthTokens = {
strokeWidthThin: string;
strokeWidthThick: string;
strokeWidthThicker: string;
strokeWidthThickest: string;
};
// @public (undocumented)
export const teamsDarkTheme: Theme;
// @public (undocumented)
export const teamsHighContrastTheme: Theme;
// @public (undocumented)
export const teamsLightTheme: Theme;
// @public (undocumented)
export type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
// @public
export function themeToTokensObject<TTheme extends Theme>(theme: TTheme): Record<keyof TTheme, string>;
// @public (undocumented)
export const tokens: Record<keyof Theme, string>;
// @public (undocumented)
export type TypographyStyle = {
fontFamily: string;
fontSize: string;
fontWeight: string;
lineHeight: string;
};
// @public (undocumented)
export type TypographyStyles = {
body1: TypographyStyle;
body1Strong: TypographyStyle;
body1Stronger: TypographyStyle;
body2: TypographyStyle;
caption1: TypographyStyle;
caption1Strong: TypographyStyle;
caption1Stronger: TypographyStyle;
caption2: TypographyStyle;
caption2Strong: TypographyStyle;
subtitle1: TypographyStyle;
subtitle2: TypographyStyle;
subtitle2Stronger: TypographyStyle;
title1: TypographyStyle;
title2: TypographyStyle;
title3: TypographyStyle;
largeTitle: TypographyStyle;
display: TypographyStyle;
};
// @public
export const typographyStyles: TypographyStyles;
// @public (undocumented)
export type VerticalSpacingTokens = {
spacingVerticalNone: string;
spacingVerticalXXS: string;
spacingVerticalXS: string;
spacingVerticalSNudge: string;
spacingVerticalS: string;
spacingVerticalMNudge: string;
spacingVerticalM: string;
spacingVerticalL: string;
spacingVerticalXL: string;
spacingVerticalXXL: string;
spacingVerticalXXXL: string;
};
// @public (undocumented)
export const webDarkTheme: Theme;
// @public (undocumented)
export const webLightTheme: Theme;
export { ColorPaletteGrape }
export { ColorPaletteGreen }
export { ColorPaletteLavender }
export { ColorPaletteLightGreen }
export { ColorPaletteLightTeal }
export { ColorPaletteLilac }
export { ColorPaletteMagenta }
export { ColorPaletteMarigold }
export { ColorPaletteMink }
export { ColorPaletteNavy }
export { ColorPalettePeach }
export { ColorPalettePink }
export { ColorPalettePlatinum }
export { ColorPalettePlum }
export { ColorPalettePumpkin }
export { ColorPalettePurple }
export { ColorPaletteRed }
export { ColorPaletteRoyalBlue }
export { ColorPaletteSeafoam }
export { ColorPaletteSteel }
export { ColorPaletteTeal }
export { ColorPaletteTokens }
export { ColorPaletteYellow }
export { ColorTokens }
export { createDarkTheme }
export { createHighContrastTheme }
export { createLightTheme }
export { createTeamsDarkTheme }
export { CurveTokens }
export { DurationTokens }
export { FontFamilyTokens }
export { FontSizeTokens }
export { FontWeightTokens }
export { HorizontalSpacingTokens }
export { LineHeightTokens }
export { PartialTheme }
export { ShadowBrandTokens }
export { ShadowTokens }
export { SpacingTokens }
export { StrokeWidthTokens }
export { teamsDarkTheme }
export { teamsHighContrastTheme }
export { teamsLightTheme }
export { Theme }
export { themeToTokensObject }
export { tokens }
export { TypographyStyle }
export { TypographyStyles }
export { typographyStyles }
export { VerticalSpacingTokens }
export { webDarkTheme }
export { webLightTheme }
// (No @packageDocumentation comment for this package)

10
packages/react-components/react-theme/package.json
Просмотреть файл

@ -21,7 +21,6 @@
"start": "yarn storybook",
"storybook": "start-storybook",
"test": "jest --passWithNoTests",
"token-pipeline": "node -r ../../../scripts/ts-node-register ../../../scripts/generators/token-pipeline.ts",
"type-check": "tsc -b tsconfig.json",
"generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
},
@ -30,13 +29,8 @@
"@fluentui/scripts": "^1.0.0"
},
"dependencies": {
"tslib": "^2.1.0"
},
"peerDependencies": {
"@types/react": ">=16.8.0 <19.0.0",
"@types/react-dom": ">=16.8.0 <19.0.0",
"react": ">=16.8.0 <19.0.0",
"react-dom": ">=16.8.0 <19.0.0"
"tslib": "^2.1.0",
"@fluentui/tokens": "1.0.0-alpha.1"
},
"beachball": {
"disallowedChangeTypes": [

22
packages/react-components/react-theme/src/index.ts
Просмотреть файл

@ -1,9 +1,17 @@
export { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, webDarkTheme, webLightTheme } from './themes/index';
export { createDarkTheme, createHighContrastTheme, createLightTheme, createTeamsDarkTheme } from './utils/index';
export { themeToTokensObject } from './themeToTokensObject';
export { tokens } from './tokens';
export { typographyStyles } from './global/index';
export {
teamsDarkTheme,
teamsHighContrastTheme,
teamsLightTheme,
webDarkTheme,
webLightTheme,
createDarkTheme,
createHighContrastTheme,
createLightTheme,
createTeamsDarkTheme,
themeToTokensObject,
tokens,
typographyStyles,
} from '@fluentui/tokens';
export type {
Brands,
@ -62,4 +70,4 @@ export type {
Theme,
TypographyStyle,
TypographyStyles,
} from './types';
} from '@fluentui/tokens';

10
packages/tokens/.eslintrc.json
Просмотреть файл

@ -1,4 +1,12 @@
{
"extends": ["plugin:@fluentui/eslint-plugin/react"],
"root": true
"root": true,
"rules": {
"no-restricted-imports": [
"error",
{
"patterns": ["@fluentui/*", "react", "react-dom"]
}
]
}
}

486
packages/tokens/etc/tokens.api.md
Просмотреть файл

@ -4,6 +4,492 @@
```ts
// @public (undocumented)
export type BorderRadiusTokens = {
borderRadiusNone: string;
borderRadiusSmall: string;
borderRadiusMedium: string;
borderRadiusLarge: string;
borderRadiusXLarge: string;
borderRadiusCircular: string;
};
// @public (undocumented)
export type Brands = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150 | 160;
// @public (undocumented)
export type BrandVariants = Record<Brands, string>;
// @public (undocumented)
export type ColorPaletteAnchor = 'colorPaletteAnchorBackground2' | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorBorderActive';
// @public (undocumented)
export type ColorPaletteBeige = 'colorPaletteBeigeBackground2' | 'colorPaletteBeigeForeground2' | 'colorPaletteBeigeBorderActive';
// @public (undocumented)
export type ColorPaletteBerry = 'colorPaletteBerryBackground1' | 'colorPaletteBerryBackground2' | 'colorPaletteBerryBackground3' | 'colorPaletteBerryForeground1' | 'colorPaletteBerryForeground2' | 'colorPaletteBerryForeground3' | 'colorPaletteBerryBorderActive' | 'colorPaletteBerryBorder1' | 'colorPaletteBerryBorder2';
// @public (undocumented)
export type ColorPaletteBlue = 'colorPaletteBlueBackground2' | 'colorPaletteBlueForeground2' | 'colorPaletteBlueBorderActive';
// @public (undocumented)
export type ColorPaletteBrass = 'colorPaletteBrassBackground2' | 'colorPaletteBrassForeground2' | 'colorPaletteBrassBorderActive';
// @public (undocumented)
export type ColorPaletteBrown = 'colorPaletteBrownBackground2' | 'colorPaletteBrownForeground2' | 'colorPaletteBrownBorderActive';
// @public (undocumented)
export type ColorPaletteCornflower = 'colorPaletteCornflowerBackground2' | 'colorPaletteCornflowerForeground2' | 'colorPaletteCornflowerBorderActive';
// @public (undocumented)
export type ColorPaletteCranberry = 'colorPaletteCranberryBackground2' | 'colorPaletteCranberryForeground2' | 'colorPaletteCranberryBorderActive';
// @public (undocumented)
export type ColorPaletteDarkGreen = 'colorPaletteDarkGreenBackground2' | 'colorPaletteDarkGreenForeground2' | 'colorPaletteDarkGreenBorderActive';
// @public (undocumented)
export type ColorPaletteDarkOrange = 'colorPaletteDarkOrangeBackground1' | 'colorPaletteDarkOrangeBackground2' | 'colorPaletteDarkOrangeBackground3' | 'colorPaletteDarkOrangeForeground1' | 'colorPaletteDarkOrangeForeground2' | 'colorPaletteDarkOrangeForeground3' | 'colorPaletteDarkOrangeBorderActive' | 'colorPaletteDarkOrangeBorder1' | 'colorPaletteDarkOrangeBorder2';
// @public (undocumented)
export type ColorPaletteDarkRed = 'colorPaletteDarkRedBackground2' | 'colorPaletteDarkRedForeground2' | 'colorPaletteDarkRedBorderActive';
// @public (undocumented)
export type ColorPaletteForest = 'colorPaletteForestBackground2' | 'colorPaletteForestForeground2' | 'colorPaletteForestBorderActive';
// @public (undocumented)
export type ColorPaletteGold = 'colorPaletteGoldBackground2' | 'colorPaletteGoldForeground2' | 'colorPaletteGoldBorderActive';
// @public (undocumented)
export type ColorPaletteGrape = 'colorPaletteGrapeBackground2' | 'colorPaletteGrapeForeground2' | 'colorPaletteGrapeBorderActive';
// @public (undocumented)
export type ColorPaletteGreen = 'colorPaletteGreenBackground1' | 'colorPaletteGreenBackground2' | 'colorPaletteGreenBackground3' | 'colorPaletteGreenForeground1' | 'colorPaletteGreenForeground2' | 'colorPaletteGreenForeground3' | 'colorPaletteGreenForegroundInverted' | 'colorPaletteGreenBorderActive' | 'colorPaletteGreenBorder1' | 'colorPaletteGreenBorder2';
// @public (undocumented)
export type ColorPaletteLavender = 'colorPaletteLavenderBackground2' | 'colorPaletteLavenderForeground2' | 'colorPaletteLavenderBorderActive';
// @public (undocumented)
export type ColorPaletteLightGreen = 'colorPaletteLightGreenBackground1' | 'colorPaletteLightGreenBackground2' | 'colorPaletteLightGreenBackground3' | 'colorPaletteLightGreenForeground1' | 'colorPaletteLightGreenForeground2' | 'colorPaletteLightGreenForeground3' | 'colorPaletteLightGreenBorderActive' | 'colorPaletteLightGreenBorder1' | 'colorPaletteLightGreenBorder2';
// @public (undocumented)
export type ColorPaletteLightTeal = 'colorPaletteLightTealBackground2' | 'colorPaletteLightTealForeground2' | 'colorPaletteLightTealBorderActive';
// @public (undocumented)
export type ColorPaletteLilac = 'colorPaletteLilacBackground2' | 'colorPaletteLilacForeground2' | 'colorPaletteLilacBorderActive';
// @public (undocumented)
export type ColorPaletteMagenta = 'colorPaletteMagentaBackground2' | 'colorPaletteMagentaForeground2' | 'colorPaletteMagentaBorderActive';
// @public (undocumented)
export type ColorPaletteMarigold = 'colorPaletteMarigoldBackground1' | 'colorPaletteMarigoldBackground2' | 'colorPaletteMarigoldBackground3' | 'colorPaletteMarigoldForeground1' | 'colorPaletteMarigoldForeground2' | 'colorPaletteMarigoldForeground3' | 'colorPaletteMarigoldBorderActive' | 'colorPaletteMarigoldBorder1' | 'colorPaletteMarigoldBorder2';
// @public (undocumented)
export type ColorPaletteMink = 'colorPaletteMinkBackground2' | 'colorPaletteMinkForeground2' | 'colorPaletteMinkBorderActive';
// @public (undocumented)
export type ColorPaletteNavy = 'colorPaletteNavyBackground2' | 'colorPaletteNavyForeground2' | 'colorPaletteNavyBorderActive';
// @public (undocumented)
export type ColorPalettePeach = 'colorPalettePeachBackground2' | 'colorPalettePeachForeground2' | 'colorPalettePeachBorderActive';
// @public (undocumented)
export type ColorPalettePink = 'colorPalettePinkBackground2' | 'colorPalettePinkForeground2' | 'colorPalettePinkBorderActive';
// @public (undocumented)
export type ColorPalettePlatinum = 'colorPalettePlatinumBackground2' | 'colorPalettePlatinumForeground2' | 'colorPalettePlatinumBorderActive';
// @public (undocumented)
export type ColorPalettePlum = 'colorPalettePlumBackground2' | 'colorPalettePlumForeground2' | 'colorPalettePlumBorderActive';
// @public (undocumented)
export type ColorPalettePumpkin = 'colorPalettePumpkinBackground2' | 'colorPalettePumpkinForeground2' | 'colorPalettePumpkinBorderActive';
// @public (undocumented)
export type ColorPalettePurple = 'colorPalettePurpleBackground2' | 'colorPalettePurpleForeground2' | 'colorPalettePurpleBorderActive';
// @public (undocumented)
export type ColorPaletteRed = 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' | 'colorPaletteRedBackground3' | 'colorPaletteRedForeground1' | 'colorPaletteRedForeground2' | 'colorPaletteRedForeground3' | 'colorPaletteRedForegroundInverted' | 'colorPaletteRedBorderActive' | 'colorPaletteRedBorder1' | 'colorPaletteRedBorder2';
// @public (undocumented)
export type ColorPaletteRoyalBlue = 'colorPaletteRoyalBlueBackground2' | 'colorPaletteRoyalBlueForeground2' | 'colorPaletteRoyalBlueBorderActive';
// @public (undocumented)
export type ColorPaletteSeafoam = 'colorPaletteSeafoamBackground2' | 'colorPaletteSeafoamForeground2' | 'colorPaletteSeafoamBorderActive';
// @public (undocumented)
export type ColorPaletteSteel = 'colorPaletteSteelBackground2' | 'colorPaletteSteelForeground2' | 'colorPaletteSteelBorderActive';
// @public (undocumented)
export type ColorPaletteTeal = 'colorPaletteTealBackground2' | 'colorPaletteTealForeground2' | 'colorPaletteTealBorderActive';
// @public (undocumented)
export type ColorPaletteTokens = StatusColorPaletteTokens & PersonaColorPaletteTokens;
// @public (undocumented)
export type ColorPaletteYellow = 'colorPaletteYellowBackground1' | 'colorPaletteYellowBackground2' | 'colorPaletteYellowBackground3' | 'colorPaletteYellowForeground1' | 'colorPaletteYellowForeground2' | 'colorPaletteYellowForeground3' | 'colorPaletteYellowForegroundInverted' | 'colorPaletteYellowBorderActive' | 'colorPaletteYellowBorder1' | 'colorPaletteYellowBorder2';
// @public
export type ColorTokens = {
colorNeutralForeground1: string;
colorNeutralForeground1Hover: string;
colorNeutralForeground1Pressed: string;
colorNeutralForeground1Selected: string;
colorNeutralForeground2: string;
colorNeutralForeground2Hover: string;
colorNeutralForeground2Pressed: string;
colorNeutralForeground2Selected: string;
colorNeutralForeground2BrandHover: string;
colorNeutralForeground2BrandPressed: string;
colorNeutralForeground2BrandSelected: string;
colorNeutralForeground3: string;
colorNeutralForeground3Hover: string;
colorNeutralForeground3Pressed: string;
colorNeutralForeground3Selected: string;
colorNeutralForeground3BrandHover: string;
colorNeutralForeground3BrandPressed: string;
colorNeutralForeground3BrandSelected: string;
colorNeutralForeground4: string;
colorNeutralForegroundDisabled: string;
colorNeutralForegroundInvertedDisabled: string;
colorBrandForegroundLink: string;
colorBrandForegroundLinkHover: string;
colorBrandForegroundLinkPressed: string;
colorBrandForegroundLinkSelected: string;
colorNeutralForeground2Link: string;
colorNeutralForeground2LinkHover: string;
colorNeutralForeground2LinkPressed: string;
colorNeutralForeground2LinkSelected: string;
colorCompoundBrandForeground1: string;
colorCompoundBrandForeground1Hover: string;
colorCompoundBrandForeground1Pressed: string;
colorBrandForeground1: string;
colorBrandForeground2: string;
colorNeutralForeground1Static: string;
colorNeutralForegroundInverted: string;
colorNeutralForegroundInvertedHover: string;
colorNeutralForegroundInvertedPressed: string;
colorNeutralForegroundInvertedSelected: string;
colorNeutralForegroundInverted2: string;
colorNeutralForegroundOnBrand: string;
colorNeutralForegroundStaticInverted: string;
colorNeutralForegroundInvertedLink: string;
colorNeutralForegroundInvertedLinkHover: string;
colorNeutralForegroundInvertedLinkPressed: string;
colorNeutralForegroundInvertedLinkSelected: string;
colorBrandForegroundInverted: string;
colorBrandForegroundInvertedHover: string;
colorBrandForegroundInvertedPressed: string;
colorBrandForegroundOnLight: string;
colorBrandForegroundOnLightHover: string;
colorBrandForegroundOnLightPressed: string;
colorBrandForegroundOnLightSelected: string;
colorNeutralBackground1: string;
colorNeutralBackground1Hover: string;
colorNeutralBackground1Pressed: string;
colorNeutralBackground1Selected: string;
colorNeutralBackground2: string;
colorNeutralBackground2Hover: string;
colorNeutralBackground2Pressed: string;
colorNeutralBackground2Selected: string;
colorNeutralBackground3: string;
colorNeutralBackground3Hover: string;
colorNeutralBackground3Pressed: string;
colorNeutralBackground3Selected: string;
colorNeutralBackground4: string;
colorNeutralBackground4Hover: string;
colorNeutralBackground4Pressed: string;
colorNeutralBackground4Selected: string;
colorNeutralBackground5: string;
colorNeutralBackground5Hover: string;
colorNeutralBackground5Pressed: string;
colorNeutralBackground5Selected: string;
colorNeutralBackground6: string;
colorNeutralBackgroundStatic: string;
colorNeutralBackgroundInverted: string;
colorSubtleBackground: string;
colorSubtleBackgroundHover: string;
colorSubtleBackgroundPressed: string;
colorSubtleBackgroundSelected: string;
colorSubtleBackgroundLightAlphaHover: string;
colorSubtleBackgroundLightAlphaPressed: string;
colorSubtleBackgroundLightAlphaSelected: string;
colorSubtleBackgroundInverted: string;
colorSubtleBackgroundInvertedHover: string;
colorSubtleBackgroundInvertedPressed: string;
colorSubtleBackgroundInvertedSelected: string;
colorTransparentBackground: string;
colorTransparentBackgroundHover: string;
colorTransparentBackgroundPressed: string;
colorTransparentBackgroundSelected: string;
colorNeutralBackgroundDisabled: string;
colorNeutralBackgroundInvertedDisabled: string;
colorNeutralStencil1: string;
colorNeutralStencil2: string;
colorNeutralStencil1Alpha: string;
colorNeutralStencil2Alpha: string;
colorBackgroundOverlay: string;
colorScrollbarOverlay: string;
colorBrandBackground: string;
colorBrandBackgroundHover: string;
colorBrandBackgroundPressed: string;
colorBrandBackgroundSelected: string;
colorCompoundBrandBackground: string;
colorCompoundBrandBackgroundHover: string;
colorCompoundBrandBackgroundPressed: string;
colorBrandBackgroundStatic: string;
colorBrandBackground2: string;
colorBrandBackgroundInverted: string;
colorBrandBackgroundInvertedHover: string;
colorBrandBackgroundInvertedPressed: string;
colorBrandBackgroundInvertedSelected: string;
colorNeutralStrokeAccessible: string;
colorNeutralStrokeAccessibleHover: string;
colorNeutralStrokeAccessiblePressed: string;
colorNeutralStrokeAccessibleSelected: string;
colorNeutralStroke1: string;
colorNeutralStroke1Hover: string;
colorNeutralStroke1Pressed: string;
colorNeutralStroke1Selected: string;
colorNeutralStroke2: string;
colorNeutralStroke3: string;
colorNeutralStrokeOnBrand: string;
colorNeutralStrokeOnBrand2: string;
colorNeutralStrokeOnBrand2Hover: string;
colorNeutralStrokeOnBrand2Pressed: string;
colorNeutralStrokeOnBrand2Selected: string;
colorBrandStroke1: string;
colorBrandStroke2: string;
colorCompoundBrandStroke: string;
colorCompoundBrandStrokeHover: string;
colorCompoundBrandStrokePressed: string;
colorNeutralStrokeDisabled: string;
colorNeutralStrokeInvertedDisabled: string;
colorTransparentStroke: string;
colorTransparentStrokeInteractive: string;
colorTransparentStrokeDisabled: string;
colorStrokeFocus1: string;
colorStrokeFocus2: string;
colorNeutralShadowAmbient: string;
colorNeutralShadowKey: string;
colorNeutralShadowAmbientLighter: string;
colorNeutralShadowKeyLighter: string;
colorNeutralShadowAmbientDarker: string;
colorNeutralShadowKeyDarker: string;
colorBrandShadowAmbient: string;
colorBrandShadowKey: string;
};
// @public (undocumented)
export const createDarkTheme: (brand: BrandVariants) => Theme;
// @public (undocumented)
export const createHighContrastTheme: () => Theme;
// @public (undocumented)
export const createLightTheme: (brand: BrandVariants) => Theme;
// @public (undocumented)
export const createTeamsDarkTheme: (brand: BrandVariants) => Theme;
// @public (undocumented)
export type CurveTokens = {
curveAccelerateMax: string;
curveAccelerateMid: string;
curveAccelerateMin: string;
curveDecelerateMax: string;
curveDecelerateMid: string;
curveDecelerateMin: string;
curveEasyEaseMax: string;
curveEasyEase: string;
curveLinear: string;
};
// @public (undocumented)
export type DurationTokens = {
durationUltraFast: string;
durationFaster: string;
durationFast: string;
durationNormal: string;
durationSlow: string;
durationSlower: string;
durationUltraSlow: string;
};
// @public (undocumented)
export type FontFamilyTokens = {
fontFamilyBase: string;
fontFamilyMonospace: string;
fontFamilyNumeric: string;
};
// @public (undocumented)
export type FontSizeTokens = {
fontSizeBase100: string;
fontSizeBase200: string;
fontSizeBase300: string;
fontSizeBase400: string;
fontSizeBase500: string;
fontSizeBase600: string;
fontSizeHero700: string;
fontSizeHero800: string;
fontSizeHero900: string;
fontSizeHero1000: string;
};
// @public (undocumented)
export type FontWeightTokens = {
fontWeightRegular: number;
fontWeightMedium: number;
fontWeightSemibold: number;
fontWeightBold: number;
};
// @public (undocumented)
export type HorizontalSpacingTokens = {
spacingHorizontalNone: string;
spacingHorizontalXXS: string;
spacingHorizontalXS: string;
spacingHorizontalSNudge: string;
spacingHorizontalS: string;
spacingHorizontalMNudge: string;
spacingHorizontalM: string;
spacingHorizontalL: string;
spacingHorizontalXL: string;
spacingHorizontalXXL: string;
spacingHorizontalXXXL: string;
};
// @public (undocumented)
export type LineHeightTokens = {
lineHeightBase100: string;
lineHeightBase200: string;
lineHeightBase300: string;
lineHeightBase400: string;
lineHeightBase500: string;
lineHeightBase600: string;
lineHeightHero700: string;
lineHeightHero800: string;
lineHeightHero900: string;
lineHeightHero1000: string;
};
// @public (undocumented)
export type PartialTheme = Partial<Theme>;
// @public (undocumented)
export type ShadowBrandTokens = {
shadow2Brand: string;
shadow4Brand: string;
shadow8Brand: string;
shadow16Brand: string;
shadow28Brand: string;
shadow64Brand: string;
};
// @public
export type ShadowTokens = {
shadow2: string;
shadow4: string;
shadow8: string;
shadow16: string;
shadow28: string;
shadow64: string;
};
// @public (undocumented)
export type SpacingTokens = {
none: string;
xxs: string;
xs: string;
sNudge: string;
s: string;
mNudge: string;
m: string;
l: string;
xl: string;
xxl: string;
xxxl: string;
};
// @public (undocumented)
export type StrokeWidthTokens = {
strokeWidthThin: string;
strokeWidthThick: string;
strokeWidthThicker: string;
strokeWidthThickest: string;
};
// @public (undocumented)
export const teamsDarkTheme: Theme;
// @public (undocumented)
export const teamsHighContrastTheme: Theme;
// @public (undocumented)
export const teamsLightTheme: Theme;
// @public (undocumented)
export type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
// @public
export function themeToTokensObject<TTheme extends Theme>(theme: TTheme): Record<keyof TTheme, string>;
// @public (undocumented)
export const tokens: Record<keyof Theme, string>;
// @public (undocumented)
export type TypographyStyle = {
fontFamily: string;
fontSize: string;
fontWeight: string;
lineHeight: string;
};
// @public (undocumented)
export type TypographyStyles = {
body1: TypographyStyle;
body1Strong: TypographyStyle;
body1Stronger: TypographyStyle;
body2: TypographyStyle;
caption1: TypographyStyle;
caption1Strong: TypographyStyle;
caption1Stronger: TypographyStyle;
caption2: TypographyStyle;
caption2Strong: TypographyStyle;
subtitle1: TypographyStyle;
subtitle2: TypographyStyle;
subtitle2Stronger: TypographyStyle;
title1: TypographyStyle;
title2: TypographyStyle;
title3: TypographyStyle;
largeTitle: TypographyStyle;
display: TypographyStyle;
};
// @public
export const typographyStyles: TypographyStyles;
// @public (undocumented)
export type VerticalSpacingTokens = {
spacingVerticalNone: string;
spacingVerticalXXS: string;
spacingVerticalXS: string;
spacingVerticalSNudge: string;
spacingVerticalS: string;
spacingVerticalMNudge: string;
spacingVerticalM: string;
spacingVerticalL: string;
spacingVerticalXL: string;
spacingVerticalXXL: string;
spacingVerticalXXXL: string;
};
// @public (undocumented)
export const webDarkTheme: Theme;
// @public (undocumented)
export const webLightTheme: Theme;
// (No @packageDocumentation comment for this package)
```

1
packages/tokens/package.json
Просмотреть файл

@ -18,6 +18,7 @@
"just": "just-scripts",
"lint": "just-scripts lint",
"test": "jest --passWithNoTests",
"token-pipeline": "node -r ../../scripts/ts-node-register ../../scripts/generators/token-pipeline.ts",
"type-check": "tsc -b tsconfig.json",
"generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
},

0
packages/react-components/react-theme/src/alias/darkColor.ts → packages/tokens/src/alias/darkColor.ts
Просмотреть файл

0
packages/react-components/react-theme/src/alias/darkColorPalette.ts → packages/tokens/src/alias/darkColorPalette.ts
Просмотреть файл

0
packages/react-components/react-theme/src/alias/highContrastColor.ts → packages/tokens/src/alias/highContrastColor.ts
Просмотреть файл

0
packages/react-components/react-theme/src/alias/highContrastColorPalette.ts → packages/tokens/src/alias/highContrastColorPalette.ts
Просмотреть файл

0
packages/react-components/react-theme/src/alias/lightColor.ts → packages/tokens/src/alias/lightColor.ts
Просмотреть файл

0
packages/react-components/react-theme/src/alias/lightColorPalette.ts → packages/tokens/src/alias/lightColorPalette.ts
Просмотреть файл

0
packages/react-components/react-theme/src/alias/teamsDarkColor.ts → packages/tokens/src/alias/teamsDarkColor.ts
Просмотреть файл

0
packages/react-components/react-theme/src/global/borderRadius.ts → packages/tokens/src/global/borderRadius.ts
Просмотреть файл

0
packages/react-components/react-theme/src/global/brandColors.ts → packages/tokens/src/global/brandColors.ts
Просмотреть файл

0
packages/react-components/react-theme/src/global/colorPalette.ts → packages/tokens/src/global/colorPalette.ts
Просмотреть файл

0
packages/react-components/react-theme/src/global/colors.ts → packages/tokens/src/global/colors.ts
Просмотреть файл

0
packages/react-components/react-theme/src/global/curves.ts → packages/tokens/src/global/curves.ts
Просмотреть файл

0
packages/react-components/react-theme/src/global/durations.ts → packages/tokens/src/global/durations.ts
Просмотреть файл

0
packages/react-components/react-theme/src/global/fonts.ts → packages/tokens/src/global/fonts.ts
Просмотреть файл

0
packages/react-components/react-theme/src/global/index.ts → packages/tokens/src/global/index.ts
Просмотреть файл

0
packages/react-components/react-theme/src/global/spacings.ts → packages/tokens/src/global/spacings.ts
Просмотреть файл

0
packages/react-components/react-theme/src/global/strokeWidths.ts → packages/tokens/src/global/strokeWidths.ts
Просмотреть файл

0
packages/react-components/react-theme/src/global/typographyStyles.ts → packages/tokens/src/global/typographyStyles.ts
Просмотреть файл

67
packages/tokens/src/index.ts
Просмотреть файл

@ -1,2 +1,65 @@
// TODO: replace with real exports
export {};
export { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, webDarkTheme, webLightTheme } from './themes/index';
export { createDarkTheme, createHighContrastTheme, createLightTheme, createTeamsDarkTheme } from './utils/index';
export { themeToTokensObject } from './themeToTokensObject';
export { tokens } from './tokens';
export { typographyStyles } from './global/index';
export type {
Brands,
BrandVariants,
FontSizeTokens,
FontWeightTokens,
LineHeightTokens,
BorderRadiusTokens,
StrokeWidthTokens,
SpacingTokens,
HorizontalSpacingTokens,
VerticalSpacingTokens,
DurationTokens,
CurveTokens,
ShadowTokens,
ShadowBrandTokens,
FontFamilyTokens,
ColorPaletteTokens,
ColorPaletteDarkRed,
ColorPaletteCranberry,
ColorPaletteRed,
ColorPaletteDarkOrange,
ColorPalettePumpkin,
ColorPalettePeach,
ColorPaletteMarigold,
ColorPaletteYellow,
ColorPaletteGold,
ColorPaletteBrass,
ColorPaletteBrown,
ColorPaletteForest,
ColorPaletteSeafoam,
ColorPaletteGreen,
ColorPaletteLightGreen,
ColorPaletteDarkGreen,
ColorPaletteLightTeal,
ColorPaletteTeal,
ColorPaletteSteel,
ColorPaletteBlue,
ColorPaletteRoyalBlue,
ColorPaletteCornflower,
ColorPaletteNavy,
ColorPaletteLavender,
ColorPalettePurple,
ColorPaletteGrape,
ColorPaletteBerry,
ColorPaletteLilac,
ColorPalettePink,
ColorPaletteMagenta,
ColorPalettePlum,
ColorPaletteBeige,
ColorPaletteMink,
ColorPalettePlatinum,
ColorPaletteAnchor,
ColorTokens,
PartialTheme,
Theme,
TypographyStyle,
TypographyStyles,
} from './types';

0
packages/react-components/react-theme/src/sharedColorNames.ts → packages/tokens/src/sharedColorNames.ts
Просмотреть файл

0
packages/react-components/react-theme/src/themeToTokensObject.test.ts → packages/tokens/src/themeToTokensObject.test.ts
Просмотреть файл

0
packages/react-components/react-theme/src/themeToTokensObject.ts → packages/tokens/src/themeToTokensObject.ts
Просмотреть файл

0
packages/react-components/react-theme/src/themes/index.ts → packages/tokens/src/themes/index.ts
Просмотреть файл

0
packages/react-components/react-theme/src/themes/teams/darkTheme.ts → packages/tokens/src/themes/teams/darkTheme.ts
Просмотреть файл

0
packages/react-components/react-theme/src/themes/teams/highContrastTheme.ts → packages/tokens/src/themes/teams/highContrastTheme.ts
Просмотреть файл

0
packages/react-components/react-theme/src/themes/teams/index.ts → packages/tokens/src/themes/teams/index.ts
Просмотреть файл

0
packages/react-components/react-theme/src/themes/teams/lightTheme.ts → packages/tokens/src/themes/teams/lightTheme.ts
Просмотреть файл

0
packages/react-components/react-theme/src/themes/web/darkTheme.ts → packages/tokens/src/themes/web/darkTheme.ts
Просмотреть файл

0
packages/react-components/react-theme/src/themes/web/index.ts → packages/tokens/src/themes/web/index.ts
Просмотреть файл

0
packages/react-components/react-theme/src/themes/web/lightTheme.ts → packages/tokens/src/themes/web/lightTheme.ts
Просмотреть файл

0
packages/react-components/react-theme/src/tokens.test.ts → packages/tokens/src/tokens.test.ts
Просмотреть файл

0
packages/react-components/react-theme/src/tokens.ts → packages/tokens/src/tokens.ts
Просмотреть файл

0
packages/react-components/react-theme/src/types.ts → packages/tokens/src/types.ts
Просмотреть файл

0
packages/react-components/react-theme/src/utils/createDarkTheme.ts → packages/tokens/src/utils/createDarkTheme.ts
Просмотреть файл

0
packages/react-components/react-theme/src/utils/createHighContrastTheme.ts → packages/tokens/src/utils/createHighContrastTheme.ts
Просмотреть файл

0
packages/react-components/react-theme/src/utils/createLightTheme.ts → packages/tokens/src/utils/createLightTheme.ts
Просмотреть файл

0
packages/react-components/react-theme/src/utils/createTeamsDarkTheme.ts → packages/tokens/src/utils/createTeamsDarkTheme.ts
Просмотреть файл

0
packages/react-components/react-theme/src/utils/index.ts → packages/tokens/src/utils/index.ts
Просмотреть файл

0
packages/react-components/react-theme/src/utils/shadows.ts → packages/tokens/src/utils/shadows.ts
Просмотреть файл

6
scripts/generators/token-pipeline.ts
Просмотреть файл

@ -22,11 +22,11 @@ function getGeneratedFiles(tmpDir: string) {
return [
{
src: path.join(tmpDir, 'light/global-colors.ts'), // the same global colors are generated for all theme, just use light
dest: path.join(repoRoot, 'packages/react-components/react-theme/src/global/colors.ts'),
dest: path.join(repoRoot, 'packages/tokens/src/global/colors.ts'),
},
...themes.map(theme => ({
src: path.join(tmpDir, `${theme}/alias-colors.ts`),
dest: path.join(repoRoot, `packages/react-components/react-theme/src/alias/${theme}Color.ts`),
dest: path.join(repoRoot, `packages/tokens/src/alias/${theme}Color.ts`),
})),
];
}
@ -86,7 +86,7 @@ const tokenPipeline = () => {
});
console.log('Format');
execSync(`npx prettier --write ${path.join(repoRoot, 'packages/react-components/react-theme/src')}`);
execSync(`npx prettier --write ${path.join(repoRoot, 'packages/tokens/src')}`);
};
tokenPipeline();