diff --git a/change/@fluentui-web-components-7d0424dc-fe77-4d05-b911-295ca60d04fd.json b/change/@fluentui-web-components-7d0424dc-fe77-4d05-b911-295ca60d04fd.json new file mode 100644 index 00000000000000..a203b8bda0502b --- /dev/null +++ b/change/@fluentui-web-components-7d0424dc-fe77-4d05-b911-295ca60d04fd.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Add initial theme", + "packageName": "@fluentui/web-components", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/.storybook/preview-body.html b/packages/web-components/.storybook/preview-body.html new file mode 100644 index 00000000000000..93e32a40560db2 --- /dev/null +++ b/packages/web-components/.storybook/preview-body.html @@ -0,0 +1,9 @@ +
+ + +
diff --git a/packages/web-components/.storybook/preview.js b/packages/web-components/.storybook/preview.js index f240e287648af7..c1340a5c49bdef 100644 --- a/packages/web-components/.storybook/preview.js +++ b/packages/web-components/.storybook/preview.js @@ -1,10 +1,16 @@ -import { addons } from '@storybook/addons'; -import { DOCS_RENDERED } from '@storybook/core-events'; import * as Fluent from '../src/index-rollup'; import webcomponentsTheme from './theme'; +import { switchTheme } from '../public/theme-switch'; Fluent; +function changeTheme(e) { + switchTheme(e.target.value); +} + +document.getElementById('theme-switch').addEventListener('change', changeTheme, false); +switchTheme('web-light'); + export const parameters = { layout: 'fullscreen', controls: { expanded: true }, @@ -14,18 +20,7 @@ export const parameters = { }, options: { storySort: { - order: [ - 'Getting Started', - ['Overview', 'Installation', 'Styling'], - 'Components', - 'Integrations', - ['Introduction'], - 'Design System', - ['Design Tokens', 'Color Explorer', 'High Contrast'], - 'Resources', - ['Browser Support', 'FAQ', 'License', 'Security'], - '*', - ], + order: [], method: 'alphabetical', }, }, @@ -33,17 +28,3 @@ export const parameters = { theme: webcomponentsTheme, // override the default Storybook theme with a custom fluent theme }, }; - -addons.getChannel().addListener(DOCS_RENDERED, name => { - if (name.toLowerCase().includes('accordion') || name.toLowerCase().includes('card')) { - fillColor.setValueFor(document.body, neutralLayer2); - } else { - fillColor.setValueFor(document.body, neutralLayer1); - } - - if (name.toLowerCase().includes('color-explorer')) { - document.body.classList.add('custom-fullscreen'); - } else { - document.body.classList.remove('custom-fullscreen'); - } -}); diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 253146efed5740..341fcfb0cbef5b 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -72,10 +72,10 @@ "mocha": "7.2.0" }, "dependencies": { - "@microsoft/fast-colors": "^5.3.0", - "@microsoft/fast-element": "^1.11.0", - "@microsoft/fast-foundation": "^2.47.0", - "@microsoft/fast-web-utilities": "^5.4.0", + "@microsoft/fast-element": "^2.0.0-beta.17", + "@microsoft/fast-foundation": "^3.0.0-alpha.21", + "@microsoft/fast-web-utilities": "^6.0.0", + "@fluentui/tokens": "1.0.0-alpha.2", "tslib": "^1.13.0" }, "beachball": { diff --git a/packages/web-components/public/theme-switch.ts b/packages/web-components/public/theme-switch.ts new file mode 100644 index 00000000000000..86f4cbb264a43d --- /dev/null +++ b/packages/web-components/public/theme-switch.ts @@ -0,0 +1,13 @@ +import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens'; +import { setTheme } from '../src/theme'; + +const themes = { + 'web-light': webLightTheme, + 'web-dark': webDarkTheme, + 'teams-light': teamsLightTheme, + 'teams-dark': teamsDarkTheme, +}; + +export function switchTheme(themeName: keyof typeof themes) { + setTheme(themes[themeName]); +} diff --git a/packages/web-components/src/theme/design-tokens.ts b/packages/web-components/src/theme/design-tokens.ts new file mode 100644 index 00000000000000..aaed69106d57f3 --- /dev/null +++ b/packages/web-components/src/theme/design-tokens.ts @@ -0,0 +1,383 @@ +import { DesignToken } from '@microsoft/fast-foundation'; + +const { create } = DesignToken; + +export const borderRadiusNone = create('borderRadiusNone'); +export const borderRadiusSmall = create('borderRadiusSmall'); +export const borderRadiusMedium = create('borderRadiusMedium'); +export const borderRadiusLarge = create('borderRadiusLarge'); +export const borderRadiusXLarge = create('borderRadiusXLarge'); +export const borderRadiusCircular = create('borderRadiusCircular'); +export const fontSizeBase100 = create('fontSizeBase100'); +export const fontSizeBase200 = create('fontSizeBase200'); +export const fontSizeBase300 = create('fontSizeBase300'); +export const fontSizeBase400 = create('fontSizeBase400'); +export const fontSizeBase500 = create('fontSizeBase500'); +export const fontSizeBase600 = create('fontSizeBase600'); +export const fontSizeHero700 = create('fontSizeHero700'); +export const fontSizeHero800 = create('fontSizeHero800'); +export const fontSizeHero900 = create('fontSizeHero900'); +export const fontSizeHero1000 = create('fontSizeHero1000'); +export const lineHeightBase100 = create('lineHeightBase100'); +export const lineHeightBase200 = create('lineHeightBase200'); +export const lineHeightBase300 = create('lineHeightBase300'); +export const lineHeightBase400 = create('lineHeightBase400'); +export const lineHeightBase500 = create('lineHeightBase500'); +export const lineHeightBase600 = create('lineHeightBase600'); +export const lineHeightHero700 = create('lineHeightHero700'); +export const lineHeightHero800 = create('lineHeightHero800'); +export const lineHeightHero900 = create('lineHeightHero900'); +export const lineHeightHero1000 = create('lineHeightHero1000'); +export const fontFamilyBase = create('fontFamilyBase'); +export const fontFamilyMonospace = create('fontFamilyMonospace'); +export const fontFamilyNumeric = create('fontFamilyNumeric'); +export const fontWeightRegular = create('fontWeightRegular'); +export const fontWeightMedium = create('fontWeightMedium'); +export const fontWeightSemibold = create('fontWeightSemibold'); +export const fontWeightBold = create('fontWeightBold'); +export const strokeWidthThin = create('strokeWidthThin'); +export const strokeWidthThick = create('strokeWidthThick'); +export const strokeWidthThicker = create('strokeWidthThicker'); +export const strokeWidthThickest = create('strokeWidthThickest'); +export const spacingHorizontalNone = create('spacingHorizontalNone'); +export const spacingHorizontalXXS = create('spacingHorizontalXXS'); +export const spacingHorizontalXS = create('spacingHorizontalXS'); +export const spacingHorizontalSNudge = create('spacingHorizontalSNudge'); +export const spacingHorizontalS = create('spacingHorizontalS'); +export const spacingHorizontalMNudge = create('spacingHorizontalMNudge'); +export const spacingHorizontalM = create('spacingHorizontalM'); +export const spacingHorizontalL = create('spacingHorizontalL'); +export const spacingHorizontalXL = create('spacingHorizontalXL'); +export const spacingHorizontalXXL = create('spacingHorizontalXXL'); +export const spacingHorizontalXXXL = create('spacingHorizontalXXXL'); +export const spacingVerticalNone = create('spacingVerticalNone'); +export const spacingVerticalXXS = create('spacingVerticalXXS'); +export const spacingVerticalXS = create('spacingVerticalXS'); +export const spacingVerticalSNudge = create('spacingVerticalSNudge'); +export const spacingVerticalS = create('spacingVerticalS'); +export const spacingVerticalMNudge = create('spacingVerticalMNudge'); +export const spacingVerticalM = create('spacingVerticalM'); +export const spacingVerticalL = create('spacingVerticalL'); +export const spacingVerticalXL = create('spacingVerticalXL'); +export const spacingVerticalXXL = create('spacingVerticalXXL'); +export const spacingVerticalXXXL = create('spacingVerticalXXXL'); +export const durationUltraFast = create('durationUltraFast'); +export const durationFaster = create('durationFaster'); +export const durationFast = create('durationFast'); +export const durationNormal = create('durationNormal'); +export const durationSlow = create('durationSlow'); +export const durationSlower = create('durationSlower'); +export const durationUltraSlow = create('durationUltraSlow'); +export const curveAccelerateMax = create('curveAccelerateMax'); +export const curveAccelerateMid = create('curveAccelerateMid'); +export const curveAccelerateMin = create('curveAccelerateMin'); +export const curveDecelerateMax = create('curveDecelerateMax'); +export const curveDecelerateMid = create('curveDecelerateMid'); +export const curveDecelerateMin = create('curveDecelerateMin'); +export const curveEasyEaseMax = create('curveEasyEaseMax'); +export const curveEasyEase = create('curveEasyEase'); +export const curveLinear = create('curveLinear'); +export const colorNeutralForeground1 = create('colorNeutralForeground1'); +export const colorNeutralForeground1Hover = create('colorNeutralForeground1Hover'); +export const colorNeutralForeground1Pressed = create('colorNeutralForeground1Pressed'); +export const colorNeutralForeground1Selected = create('colorNeutralForeground1Selected'); +export const colorNeutralForeground2 = create('colorNeutralForeground2'); +export const colorNeutralForeground2Hover = create('colorNeutralForeground2Hover'); +export const colorNeutralForeground2Pressed = create('colorNeutralForeground2Pressed'); +export const colorNeutralForeground2Selected = create('colorNeutralForeground2Selected'); +export const colorNeutralForeground2BrandHover = create('colorNeutralForeground2BrandHover'); +export const colorNeutralForeground2BrandPressed = create('colorNeutralForeground2BrandPressed'); +export const colorNeutralForeground2BrandSelected = create('colorNeutralForeground2BrandSelected'); +export const colorNeutralForeground3 = create('colorNeutralForeground3'); +export const colorNeutralForeground3Hover = create('colorNeutralForeground3Hover'); +export const colorNeutralForeground3Pressed = create('colorNeutralForeground3Pressed'); +export const colorNeutralForeground3Selected = create('colorNeutralForeground3Selected'); +export const colorNeutralForeground3BrandHover = create('colorNeutralForeground3BrandHover'); +export const colorNeutralForeground3BrandPressed = create('colorNeutralForeground3BrandPressed'); +export const colorNeutralForeground3BrandSelected = create('colorNeutralForeground3BrandSelected'); +export const colorNeutralForeground4 = create('colorNeutralForeground4'); +export const colorNeutralForegroundDisabled = create('colorNeutralForegroundDisabled'); +export const colorNeutralForegroundInvertedDisabled = create('colorNeutralForegroundInvertedDisabled'); +export const colorBrandForegroundLink = create('colorBrandForegroundLink'); +export const colorBrandForegroundLinkHover = create('colorBrandForegroundLinkHover'); +export const colorBrandForegroundLinkPressed = create('colorBrandForegroundLinkPressed'); +export const colorBrandForegroundLinkSelected = create('colorBrandForegroundLinkSelected'); +export const colorNeutralForeground2Link = create('colorNeutralForeground2Link'); +export const colorNeutralForeground2LinkHover = create('colorNeutralForeground2LinkHover'); +export const colorNeutralForeground2LinkPressed = create('colorNeutralForeground2LinkPressed'); +export const colorNeutralForeground2LinkSelected = create('colorNeutralForeground2LinkSelected'); +export const colorCompoundBrandForeground1 = create('colorCompoundBrandForeground1'); +export const colorCompoundBrandForeground1Hover = create('colorCompoundBrandForeground1Hover'); +export const colorCompoundBrandForeground1Pressed = create('colorCompoundBrandForeground1Pressed'); +export const colorBrandForeground1 = create('colorBrandForeground1'); +export const colorBrandForeground2 = create('colorBrandForeground2'); +export const colorNeutralForeground1Static = create('colorNeutralForeground1Static'); +export const colorNeutralForegroundStaticInverted = create('colorNeutralForegroundStaticInverted'); +export const colorNeutralForegroundInverted = create('colorNeutralForegroundInverted'); +export const colorNeutralForegroundInvertedHover = create('colorNeutralForegroundInvertedHover'); +export const colorNeutralForegroundInvertedPressed = create('colorNeutralForegroundInvertedPressed'); +export const colorNeutralForegroundInvertedSelected = create('colorNeutralForegroundInvertedSelected'); +export const colorNeutralForegroundInverted2 = create('colorNeutralForegroundInverted2'); +export const colorNeutralForegroundOnBrand = create('colorNeutralForegroundOnBrand'); +export const colorNeutralForegroundInvertedLink = create('colorNeutralForegroundInvertedLink'); +export const colorNeutralForegroundInvertedLinkHover = create('colorNeutralForegroundInvertedLinkHover'); +export const colorNeutralForegroundInvertedLinkPressed = create('colorNeutralForegroundInvertedLinkPressed'); +export const colorNeutralForegroundInvertedLinkSelected = create('colorNeutralForegroundInvertedLinkSelected'); +export const colorBrandForegroundInverted = create('colorBrandForegroundInverted'); +export const colorBrandForegroundInvertedHover = create('colorBrandForegroundInvertedHover'); +export const colorBrandForegroundInvertedPressed = create('colorBrandForegroundInvertedPressed'); +export const colorBrandForegroundOnLight = create('colorBrandForegroundOnLight'); +export const colorBrandForegroundOnLightHover = create('colorBrandForegroundOnLightHover'); +export const colorBrandForegroundOnLightPressed = create('colorBrandForegroundOnLightPressed'); +export const colorBrandForegroundOnLightSelected = create('colorBrandForegroundOnLightSelected'); +export const colorNeutralBackground1 = create('colorNeutralBackground1'); +export const colorNeutralBackground1Hover = create('colorNeutralBackground1Hover'); +export const colorNeutralBackground1Pressed = create('colorNeutralBackground1Pressed'); +export const colorNeutralBackground1Selected = create('colorNeutralBackground1Selected'); +export const colorNeutralBackground2 = create('colorNeutralBackground2'); +export const colorNeutralBackground2Hover = create('colorNeutralBackground2Hover'); +export const colorNeutralBackground2Pressed = create('colorNeutralBackground2Pressed'); +export const colorNeutralBackground2Selected = create('colorNeutralBackground2Selected'); +export const colorNeutralBackground3 = create('colorNeutralBackground3'); +export const colorNeutralBackground3Hover = create('colorNeutralBackground3Hover'); +export const colorNeutralBackground3Pressed = create('colorNeutralBackground3Pressed'); +export const colorNeutralBackground3Selected = create('colorNeutralBackground3Selected'); +export const colorNeutralBackground4 = create('colorNeutralBackground4'); +export const colorNeutralBackground4Hover = create('colorNeutralBackground4Hover'); +export const colorNeutralBackground4Pressed = create('colorNeutralBackground4Pressed'); +export const colorNeutralBackground4Selected = create('colorNeutralBackground4Selected'); +export const colorNeutralBackground5 = create('colorNeutralBackground5'); +export const colorNeutralBackground5Hover = create('colorNeutralBackground5Hover'); +export const colorNeutralBackground5Pressed = create('colorNeutralBackground5Pressed'); +export const colorNeutralBackground5Selected = create('colorNeutralBackground5Selected'); +export const colorNeutralBackground6 = create('colorNeutralBackground6'); +export const colorNeutralBackgroundInverted = create('colorNeutralBackgroundInverted'); +export const colorNeutralBackgroundStatic = create('colorNeutralBackgroundStatic'); +export const colorSubtleBackground = create('colorSubtleBackground'); +export const colorSubtleBackgroundHover = create('colorSubtleBackgroundHover'); +export const colorSubtleBackgroundPressed = create('colorSubtleBackgroundPressed'); +export const colorSubtleBackgroundSelected = create('colorSubtleBackgroundSelected'); +export const colorSubtleBackgroundLightAlphaHover = create('colorSubtleBackgroundLightAlphaHover'); +export const colorSubtleBackgroundLightAlphaPressed = create('colorSubtleBackgroundLightAlphaPressed'); +export const colorSubtleBackgroundLightAlphaSelected = create('colorSubtleBackgroundLightAlphaSelected'); +export const colorSubtleBackgroundInverted = create('colorSubtleBackgroundInverted'); +export const colorSubtleBackgroundInvertedHover = create('colorSubtleBackgroundInvertedHover'); +export const colorSubtleBackgroundInvertedPressed = create('colorSubtleBackgroundInvertedPressed'); +export const colorSubtleBackgroundInvertedSelected = create('colorSubtleBackgroundInvertedSelected'); +export const colorTransparentBackground = create('colorTransparentBackground'); +export const colorTransparentBackgroundHover = create('colorTransparentBackgroundHover'); +export const colorTransparentBackgroundPressed = create('colorTransparentBackgroundPressed'); +export const colorTransparentBackgroundSelected = create('colorTransparentBackgroundSelected'); +export const colorNeutralBackgroundDisabled = create('colorNeutralBackgroundDisabled'); +export const colorNeutralBackgroundInvertedDisabled = create('colorNeutralBackgroundInvertedDisabled'); +export const colorNeutralStencil1 = create('colorNeutralStencil1'); +export const colorNeutralStencil2 = create('colorNeutralStencil2'); +export const colorBackgroundOverlay = create('colorBackgroundOverlay'); +export const colorScrollbarOverlay = create('colorScrollbarOverlay'); +export const colorBrandBackground = create('colorBrandBackground'); +export const colorBrandBackgroundHover = create('colorBrandBackgroundHover'); +export const colorBrandBackgroundPressed = create('colorBrandBackgroundPressed'); +export const colorBrandBackgroundSelected = create('colorBrandBackgroundSelected'); +export const colorCompoundBrandBackground = create('colorCompoundBrandBackground'); +export const colorCompoundBrandBackgroundHover = create('colorCompoundBrandBackgroundHover'); +export const colorCompoundBrandBackgroundPressed = create('colorCompoundBrandBackgroundPressed'); +export const colorBrandBackgroundStatic = create('colorBrandBackgroundStatic'); +export const colorBrandBackground2 = create('colorBrandBackground2'); +export const colorBrandBackgroundInverted = create('colorBrandBackgroundInverted'); +export const colorBrandBackgroundInvertedHover = create('colorBrandBackgroundInvertedHover'); +export const colorBrandBackgroundInvertedPressed = create('colorBrandBackgroundInvertedPressed'); +export const colorBrandBackgroundInvertedSelected = create('colorBrandBackgroundInvertedSelected'); +export const colorNeutralStrokeAccessible = create('colorNeutralStrokeAccessible'); +export const colorNeutralStrokeAccessibleHover = create('colorNeutralStrokeAccessibleHover'); +export const colorNeutralStrokeAccessiblePressed = create('colorNeutralStrokeAccessiblePressed'); +export const colorNeutralStrokeAccessibleSelected = create('colorNeutralStrokeAccessibleSelected'); +export const colorNeutralStroke1 = create('colorNeutralStroke1'); +export const colorNeutralStroke1Hover = create('colorNeutralStroke1Hover'); +export const colorNeutralStroke1Pressed = create('colorNeutralStroke1Pressed'); +export const colorNeutralStroke1Selected = create('colorNeutralStroke1Selected'); +export const colorNeutralStroke2 = create('colorNeutralStroke2'); +export const colorNeutralStroke3 = create('colorNeutralStroke3'); +export const colorNeutralStrokeOnBrand = create('colorNeutralStrokeOnBrand'); +export const colorNeutralStrokeOnBrand2 = create('colorNeutralStrokeOnBrand2'); +export const colorNeutralStrokeOnBrand2Hover = create('colorNeutralStrokeOnBrand2Hover'); +export const colorNeutralStrokeOnBrand2Pressed = create('colorNeutralStrokeOnBrand2Pressed'); +export const colorNeutralStrokeOnBrand2Selected = create('colorNeutralStrokeOnBrand2Selected'); +export const colorBrandStroke1 = create('colorBrandStroke1'); +export const colorBrandStroke2 = create('colorBrandStroke2'); +export const colorCompoundBrandStroke = create('colorCompoundBrandStroke'); +export const colorCompoundBrandStrokeHover = create('colorCompoundBrandStrokeHover'); +export const colorCompoundBrandStrokePressed = create('colorCompoundBrandStrokePressed'); +export const colorNeutralStrokeDisabled = create('colorNeutralStrokeDisabled'); +export const colorNeutralStrokeInvertedDisabled = create('colorNeutralStrokeInvertedDisabled'); +export const colorTransparentStroke = create('colorTransparentStroke'); +export const colorTransparentStrokeInteractive = create('colorTransparentStrokeInteractive'); +export const colorTransparentStrokeDisabled = create('colorTransparentStrokeDisabled'); +export const colorStrokeFocus1 = create('colorStrokeFocus1'); +export const colorStrokeFocus2 = create('colorStrokeFocus2'); +export const colorNeutralShadowAmbient = create('colorNeutralShadowAmbient'); +export const colorNeutralShadowKey = create('colorNeutralShadowKey'); +export const colorNeutralShadowAmbientLighter = create('colorNeutralShadowAmbientLighter'); +export const colorNeutralShadowKeyLighter = create('colorNeutralShadowKeyLighter'); +export const colorNeutralShadowAmbientDarker = create('colorNeutralShadowAmbientDarker'); +export const colorNeutralShadowKeyDarker = create('colorNeutralShadowKeyDarker'); +export const colorBrandShadowAmbient = create('colorBrandShadowAmbient'); +export const colorBrandShadowKey = create('colorBrandShadowKey'); +export const colorPaletteRedBackground1 = create('colorPaletteRedBackground1'); +export const colorPaletteRedBackground2 = create('colorPaletteRedBackground2'); +export const colorPaletteRedBackground3 = create('colorPaletteRedBackground3'); +export const colorPaletteRedForeground1 = create('colorPaletteRedForeground1'); +export const colorPaletteRedForeground2 = create('colorPaletteRedForeground2'); +export const colorPaletteRedForeground3 = create('colorPaletteRedForeground3'); +export const colorPaletteRedBorderActive = create('colorPaletteRedBorderActive'); +export const colorPaletteRedBorder1 = create('colorPaletteRedBorder1'); +export const colorPaletteRedBorder2 = create('colorPaletteRedBorder2'); +export const colorPaletteGreenBackground1 = create('colorPaletteGreenBackground1'); +export const colorPaletteGreenBackground2 = create('colorPaletteGreenBackground2'); +export const colorPaletteGreenBackground3 = create('colorPaletteGreenBackground3'); +export const colorPaletteGreenForeground1 = create('colorPaletteGreenForeground1'); +export const colorPaletteGreenForeground2 = create('colorPaletteGreenForeground2'); +export const colorPaletteGreenForeground3 = create('colorPaletteGreenForeground3'); +export const colorPaletteGreenBorderActive = create('colorPaletteGreenBorderActive'); +export const colorPaletteGreenBorder1 = create('colorPaletteGreenBorder1'); +export const colorPaletteGreenBorder2 = create('colorPaletteGreenBorder2'); +export const colorPaletteDarkOrangeBackground1 = create('colorPaletteDarkOrangeBackground1'); +export const colorPaletteDarkOrangeBackground2 = create('colorPaletteDarkOrangeBackground2'); +export const colorPaletteDarkOrangeBackground3 = create('colorPaletteDarkOrangeBackground3'); +export const colorPaletteDarkOrangeForeground1 = create('colorPaletteDarkOrangeForeground1'); +export const colorPaletteDarkOrangeForeground2 = create('colorPaletteDarkOrangeForeground2'); +export const colorPaletteDarkOrangeForeground3 = create('colorPaletteDarkOrangeForeground3'); +export const colorPaletteDarkOrangeBorderActive = create('colorPaletteDarkOrangeBorderActive'); +export const colorPaletteDarkOrangeBorder1 = create('colorPaletteDarkOrangeBorder1'); +export const colorPaletteDarkOrangeBorder2 = create('colorPaletteDarkOrangeBorder2'); +export const colorPaletteYellowBackground1 = create('colorPaletteYellowBackground1'); +export const colorPaletteYellowBackground2 = create('colorPaletteYellowBackground2'); +export const colorPaletteYellowBackground3 = create('colorPaletteYellowBackground3'); +export const colorPaletteYellowForeground1 = create('colorPaletteYellowForeground1'); +export const colorPaletteYellowForeground2 = create('colorPaletteYellowForeground2'); +export const colorPaletteYellowForeground3 = create('colorPaletteYellowForeground3'); +export const colorPaletteYellowBorderActive = create('colorPaletteYellowBorderActive'); +export const colorPaletteYellowBorder1 = create('colorPaletteYellowBorder1'); +export const colorPaletteYellowBorder2 = create('colorPaletteYellowBorder2'); +export const colorPaletteBerryBackground1 = create('colorPaletteBerryBackground1'); +export const colorPaletteBerryBackground2 = create('colorPaletteBerryBackground2'); +export const colorPaletteBerryBackground3 = create('colorPaletteBerryBackground3'); +export const colorPaletteBerryForeground1 = create('colorPaletteBerryForeground1'); +export const colorPaletteBerryForeground2 = create('colorPaletteBerryForeground2'); +export const colorPaletteBerryForeground3 = create('colorPaletteBerryForeground3'); +export const colorPaletteBerryBorderActive = create('colorPaletteBerryBorderActive'); +export const colorPaletteBerryBorder1 = create('colorPaletteBerryBorder1'); +export const colorPaletteBerryBorder2 = create('colorPaletteBerryBorder2'); +export const colorPaletteLightGreenBackground1 = create('colorPaletteLightGreenBackground1'); +export const colorPaletteLightGreenBackground2 = create('colorPaletteLightGreenBackground2'); +export const colorPaletteLightGreenBackground3 = create('colorPaletteLightGreenBackground3'); +export const colorPaletteLightGreenForeground1 = create('colorPaletteLightGreenForeground1'); +export const colorPaletteLightGreenForeground2 = create('colorPaletteLightGreenForeground2'); +export const colorPaletteLightGreenForeground3 = create('colorPaletteLightGreenForeground3'); +export const colorPaletteLightGreenBorderActive = create('colorPaletteLightGreenBorderActive'); +export const colorPaletteLightGreenBorder1 = create('colorPaletteLightGreenBorder1'); +export const colorPaletteLightGreenBorder2 = create('colorPaletteLightGreenBorder2'); +export const colorPaletteMarigoldBackground1 = create('colorPaletteMarigoldBackground1'); +export const colorPaletteMarigoldBackground2 = create('colorPaletteMarigoldBackground2'); +export const colorPaletteMarigoldBackground3 = create('colorPaletteMarigoldBackground3'); +export const colorPaletteMarigoldForeground1 = create('colorPaletteMarigoldForeground1'); +export const colorPaletteMarigoldForeground2 = create('colorPaletteMarigoldForeground2'); +export const colorPaletteMarigoldForeground3 = create('colorPaletteMarigoldForeground3'); +export const colorPaletteMarigoldBorderActive = create('colorPaletteMarigoldBorderActive'); +export const colorPaletteMarigoldBorder1 = create('colorPaletteMarigoldBorder1'); +export const colorPaletteMarigoldBorder2 = create('colorPaletteMarigoldBorder2'); +export const colorPaletteDarkRedBackground2 = create('colorPaletteDarkRedBackground2'); +export const colorPaletteDarkRedForeground2 = create('colorPaletteDarkRedForeground2'); +export const colorPaletteDarkRedBorderActive = create('colorPaletteDarkRedBorderActive'); +export const colorPaletteCranberryBackground2 = create('colorPaletteCranberryBackground2'); +export const colorPaletteCranberryForeground2 = create('colorPaletteCranberryForeground2'); +export const colorPaletteCranberryBorderActive = create('colorPaletteCranberryBorderActive'); +export const colorPalettePumpkinBackground2 = create('colorPalettePumpkinBackground2'); +export const colorPalettePumpkinForeground2 = create('colorPalettePumpkinForeground2'); +export const colorPalettePumpkinBorderActive = create('colorPalettePumpkinBorderActive'); +export const colorPalettePeachBackground2 = create('colorPalettePeachBackground2'); +export const colorPalettePeachForeground2 = create('colorPalettePeachForeground2'); +export const colorPalettePeachBorderActive = create('colorPalettePeachBorderActive'); +export const colorPaletteGoldBackground2 = create('colorPaletteGoldBackground2'); +export const colorPaletteGoldForeground2 = create('colorPaletteGoldForeground2'); +export const colorPaletteGoldBorderActive = create('colorPaletteGoldBorderActive'); +export const colorPaletteBrassBackground2 = create('colorPaletteBrassBackground2'); +export const colorPaletteBrassForeground2 = create('colorPaletteBrassForeground2'); +export const colorPaletteBrassBorderActive = create('colorPaletteBrassBorderActive'); +export const colorPaletteBrownBackground2 = create('colorPaletteBrownBackground2'); +export const colorPaletteBrownForeground2 = create('colorPaletteBrownForeground2'); +export const colorPaletteBrownBorderActive = create('colorPaletteBrownBorderActive'); +export const colorPaletteForestBackground2 = create('colorPaletteForestBackground2'); +export const colorPaletteForestForeground2 = create('colorPaletteForestForeground2'); +export const colorPaletteForestBorderActive = create('colorPaletteForestBorderActive'); +export const colorPaletteSeafoamBackground2 = create('colorPaletteSeafoamBackground2'); +export const colorPaletteSeafoamForeground2 = create('colorPaletteSeafoamForeground2'); +export const colorPaletteSeafoamBorderActive = create('colorPaletteSeafoamBorderActive'); +export const colorPaletteDarkGreenBackground2 = create('colorPaletteDarkGreenBackground2'); +export const colorPaletteDarkGreenForeground2 = create('colorPaletteDarkGreenForeground2'); +export const colorPaletteDarkGreenBorderActive = create('colorPaletteDarkGreenBorderActive'); +export const colorPaletteLightTealBackground2 = create('colorPaletteLightTealBackground2'); +export const colorPaletteLightTealForeground2 = create('colorPaletteLightTealForeground2'); +export const colorPaletteLightTealBorderActive = create('colorPaletteLightTealBorderActive'); +export const colorPaletteTealBackground2 = create('colorPaletteTealBackground2'); +export const colorPaletteTealForeground2 = create('colorPaletteTealForeground2'); +export const colorPaletteTealBorderActive = create('colorPaletteTealBorderActive'); +export const colorPaletteSteelBackground2 = create('colorPaletteSteelBackground2'); +export const colorPaletteSteelForeground2 = create('colorPaletteSteelForeground2'); +export const colorPaletteSteelBorderActive = create('colorPaletteSteelBorderActive'); +export const colorPaletteBlueBackground2 = create('colorPaletteBlueBackground2'); +export const colorPaletteBlueForeground2 = create('colorPaletteBlueForeground2'); +export const colorPaletteBlueBorderActive = create('colorPaletteBlueBorderActive'); +export const colorPaletteRoyalBlueBackground2 = create('colorPaletteRoyalBlueBackground2'); +export const colorPaletteRoyalBlueForeground2 = create('colorPaletteRoyalBlueForeground2'); +export const colorPaletteRoyalBlueBorderActive = create('colorPaletteRoyalBlueBorderActive'); +export const colorPaletteCornflowerBackground2 = create('colorPaletteCornflowerBackground2'); +export const colorPaletteCornflowerForeground2 = create('colorPaletteCornflowerForeground2'); +export const colorPaletteCornflowerBorderActive = create('colorPaletteCornflowerBorderActive'); +export const colorPaletteNavyBackground2 = create('colorPaletteNavyBackground2'); +export const colorPaletteNavyForeground2 = create('colorPaletteNavyForeground2'); +export const colorPaletteNavyBorderActive = create('colorPaletteNavyBorderActive'); +export const colorPaletteLavenderBackground2 = create('colorPaletteLavenderBackground2'); +export const colorPaletteLavenderForeground2 = create('colorPaletteLavenderForeground2'); +export const colorPaletteLavenderBorderActive = create('colorPaletteLavenderBorderActive'); +export const colorPalettePurpleBackground2 = create('colorPalettePurpleBackground2'); +export const colorPalettePurpleForeground2 = create('colorPalettePurpleForeground2'); +export const colorPalettePurpleBorderActive = create('colorPalettePurpleBorderActive'); +export const colorPaletteGrapeBackground2 = create('colorPaletteGrapeBackground2'); +export const colorPaletteGrapeForeground2 = create('colorPaletteGrapeForeground2'); +export const colorPaletteGrapeBorderActive = create('colorPaletteGrapeBorderActive'); +export const colorPaletteLilacBackground2 = create('colorPaletteLilacBackground2'); +export const colorPaletteLilacForeground2 = create('colorPaletteLilacForeground2'); +export const colorPaletteLilacBorderActive = create('colorPaletteLilacBorderActive'); +export const colorPalettePinkBackground2 = create('colorPalettePinkBackground2'); +export const colorPalettePinkForeground2 = create('colorPalettePinkForeground2'); +export const colorPalettePinkBorderActive = create('colorPalettePinkBorderActive'); +export const colorPaletteMagentaBackground2 = create('colorPaletteMagentaBackground2'); +export const colorPaletteMagentaForeground2 = create('colorPaletteMagentaForeground2'); +export const colorPaletteMagentaBorderActive = create('colorPaletteMagentaBorderActive'); +export const colorPalettePlumBackground2 = create('colorPalettePlumBackground2'); +export const colorPalettePlumForeground2 = create('colorPalettePlumForeground2'); +export const colorPalettePlumBorderActive = create('colorPalettePlumBorderActive'); +export const colorPaletteBeigeBackground2 = create('colorPaletteBeigeBackground2'); +export const colorPaletteBeigeForeground2 = create('colorPaletteBeigeForeground2'); +export const colorPaletteBeigeBorderActive = create('colorPaletteBeigeBorderActive'); +export const colorPaletteMinkBackground2 = create('colorPaletteMinkBackground2'); +export const colorPaletteMinkForeground2 = create('colorPaletteMinkForeground2'); +export const colorPaletteMinkBorderActive = create('colorPaletteMinkBorderActive'); +export const colorPalettePlatinumBackground2 = create('colorPalettePlatinumBackground2'); +export const colorPalettePlatinumForeground2 = create('colorPalettePlatinumForeground2'); +export const colorPalettePlatinumBorderActive = create('colorPalettePlatinumBorderActive'); +export const colorPaletteAnchorBackground2 = create('colorPaletteAnchorBackground2'); +export const colorPaletteAnchorForeground2 = create('colorPaletteAnchorForeground2'); +export const colorPaletteAnchorBorderActive = create('colorPaletteAnchorBorderActive'); +export const shadow2 = create('shadow2'); +export const shadow4 = create('shadow4'); +export const shadow8 = create('shadow8'); +export const shadow16 = create('shadow16'); +export const shadow28 = create('shadow28'); +export const shadow64 = create('shadow64'); +export const shadow2Brand = create('shadow2Brand'); +export const shadow4Brand = create('shadow4Brand'); +export const shadow8Brand = create('shadow8Brand'); +export const shadow16Brand = create('shadow16Brand'); +export const shadow28Brand = create('shadow28Brand'); +export const shadow64Brand = create('shadow64Brand'); diff --git a/packages/web-components/src/theme/index.ts b/packages/web-components/src/theme/index.ts new file mode 100644 index 00000000000000..805ad62b80b668 --- /dev/null +++ b/packages/web-components/src/theme/index.ts @@ -0,0 +1,2 @@ +export * from './design-tokens'; +export { setTheme } from './set-theme'; diff --git a/packages/web-components/src/theme/set-theme.ts b/packages/web-components/src/theme/set-theme.ts new file mode 100644 index 00000000000000..7c86f95ab2ac58 --- /dev/null +++ b/packages/web-components/src/theme/set-theme.ts @@ -0,0 +1,14 @@ +import type { Theme } from '@fluentui/tokens'; +import * as tokens from './design-tokens'; + +const tokenNames = Object.keys(tokens); + +/** + * Sets the theme tokens on defaultNode. + * @param theme Flat object of theme token values. + */ +export const setTheme = (theme: Theme) => { + for (const t of tokenNames) { + tokens[t].withDefault(theme[t]); + } +}; diff --git a/packages/web-components/src/theme/theme.stories.ts b/packages/web-components/src/theme/theme.stories.ts new file mode 100644 index 00000000000000..183987d06c4610 --- /dev/null +++ b/packages/web-components/src/theme/theme.stories.ts @@ -0,0 +1,24 @@ +import { DesignToken } from '@microsoft/fast-foundation'; +import * as tokens from '../theme/design-tokens'; + +DesignToken.registerDefaultStyleTarget(); + +export default { + title: 'Theme/Tokens', +}; + +export const Tokens = () => ` +
+

Theme Tokens

+

Debug story which uses theme tokens to style the element below.

+
colorNeutralForegroundOnBrand on colorBrandBackground with shadow28
+
+`; diff --git a/yarn.lock b/yarn.lock index 45c58c2641ba29..942ec9879f8aaf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1604,17 +1604,17 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" -"@floating-ui/core@^1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.0.tgz#ec1d31f54c72dd0460276e2149e59bd13c0f01f6" - integrity sha512-sm3nW0hHAxTv3gRDdCH8rNVQxijF+qPFo5gAeXCErRjKC7Qc28lIQ3R9Vd7Gw+KgwfA7RhRydDFuGeI0peGq7A== +"@floating-ui/core@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.1.tgz#00e64d74e911602c8533957af0cce5af6b2e93c8" + integrity sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA== -"@floating-ui/dom@^1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.0.tgz#66923a56755b6cb7a5958ecf25fe293912672d65" - integrity sha512-PMqJvY5Fae8HVQgUqM+lidprS6p9LSvB0AUhCdYKqr3YCaV+WaWCeVNBtXPRY2YIdrgcsL2+vd5F07FxgihHUw== +"@floating-ui/dom@^1.0.0", "@floating-ui/dom@^1.0.3": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.4.tgz#cc0f2a03db7193b1b932b90d09c5c81235682a60" + integrity sha512-maYJRv+sAXTy4K9mzdv0JPyNW5YPVHrqtY90tEdI6XNpuLOP26Ci2pfwPsKBA/Wh4Z3FX5sUrtUFTdMYj9v+ug== dependencies: - "@floating-ui/core" "^1.0.0" + "@floating-ui/core" "^1.0.1" "@fluent-blocks/colors@9.2.0": version "9.2.0" @@ -1637,6 +1637,13 @@ "@griffel/react" "^1.0.0" tslib "^2.1.0" +"@fluentui/tokens@1.0.0-alpha.2": + version "1.0.0-alpha.2" + resolved "https://registry.yarnpkg.com/@fluentui/tokens/-/tokens-1.0.0-alpha.2.tgz#890d8617ff40caa327f2c6810d7354f87c392555" + integrity sha512-Rd3xFE+ynAjpTgXwOWQnbw1jLqRrRvCgFTPtlqFlXK31lkNOz28f4HAHkNSXsFF95r/pM6EvJ+GtEoBhzfkdSw== + dependencies: + tslib "^2.1.0" + "@gar/promisify@^1.1.3": version "1.1.3" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" @@ -3011,30 +3018,31 @@ eslint-plugin-react "7.24.0" eslint-plugin-security "1.4.0" -"@microsoft/fast-colors@^5.3.0": - version "5.3.1" - resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.3.1.tgz#defc59874176e42316be7e6d24c31885ead8ca56" - integrity sha512-72RZXVfCbwQzvo5sXXkuLXLT7rMeYaSf5r/6ewQiv/trBtqpWRm4DEH2EilHw/iWTBKOXs1qZNQndgUMa5n4LA== - -"@microsoft/fast-element@^1.10.4", "@microsoft/fast-element@^1.11.0": +"@microsoft/fast-element@^1.10.4": version "1.11.0" resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.11.0.tgz#494f6c87057bcbb42406982d68a92887d6b5acb1" integrity sha512-VKJYMkS5zgzHHb66sY7AFpYv6IfFhXrjQcAyNgi2ivD65My1XOhtjfKez5ELcLFRJfgZNAxvI8kE69apXERTkw== -"@microsoft/fast-foundation@^2.47.0": - version "2.47.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.47.0.tgz#a4cc8c5277e21d080215f5adcaed4266a8dd8a8e" - integrity sha512-EyFuioaZQ9ngjUNRQi8R3dIPPsaNQdUOS+tP0G7b1MJRhXmQWIitBM6IeveQA6ZvXG6H21dqgrfEWlsYrUZ2sw== +"@microsoft/fast-element@^2.0.0-beta.17": + version "2.0.0-beta.17" + resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-2.0.0-beta.17.tgz#46f9b1feaf57e0cb841d31a80574537257b2239f" + integrity sha512-R9NLnH0rh/btfBIdDicHGblw4uk4U7TNTnfpZ25W5IC52cWg7DLr0ky5GujH7wXge8F4ze/Z8anABzhC9eHYrA== + +"@microsoft/fast-foundation@^3.0.0-alpha.21": + version "3.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-3.0.0-alpha.21.tgz#b867b3483d9e2ed496b301e6a6c4017adfa333f4" + integrity sha512-hKY2aI7OI54SN+h2ayJVh4CLD8dcbCuaOWihdiUTBnwNVgl/xANazO3q+Cs2P/5gHHOy2lIgJOZvsK9ilBsCQQ== dependencies: - "@microsoft/fast-element" "^1.11.0" - "@microsoft/fast-web-utilities" "^5.4.1" + "@floating-ui/dom" "^1.0.3" + "@microsoft/fast-element" "^2.0.0-beta.17" + "@microsoft/fast-web-utilities" "^6.0.0" tabbable "^5.2.0" - tslib "^1.13.0" + tslib "^2.4.0" -"@microsoft/fast-web-utilities@^5.4.0", "@microsoft/fast-web-utilities@^5.4.1": - version "5.4.1" - resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz#8e3082ee2ff2b5467f17e7cb1fb01b0e4906b71f" - integrity sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg== +"@microsoft/fast-web-utilities@^6.0.0": + version "6.0.0" + resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-6.0.0.tgz#7678c2b2cd12aeef785f4e2288da93a4db9e38a6" + integrity sha512-ckCA4Xn91ja1Qz+jhGGL1Q3ZeuRpA5VvYcRA7GzA1NP545sl14bwz3tbHCq8jIk+PL7mkSaIveGMYuJB2L4Izg== dependencies: exenv-es6 "^1.1.1"