@fluentui/web-components 2.5.11 → 3.0.0-alpha.2

package/dist/esm/theme/set-theme.js

@@ -0,0 +1,11 @@
+import * as tokens from './design-tokens.js';
+const tokenNames = Object.keys(tokens);
+/**
+ * Sets the theme tokens on defaultNode.
+ * @param theme Flat object of theme token values.
+ */
+export const setTheme = (theme) => {
+    for (const t of tokenNames) {
+        tokens[t].withDefault(theme[t]);
+    }
+};

package/dist/esm/theme/theme.stories.js

@@ -0,0 +1,21 @@
+import { DesignToken } from '@microsoft/fast-foundation';
+import * as tokens from '../theme/design-tokens.js';
+DesignToken.registerDefaultStyleTarget();
+export default {
+    title: 'Theme/Tokens',
+};
+export const Tokens = () => `
+<div>
+  <h3>Theme Tokens</h3>
+  <p>Debug story which uses theme tokens to style the element below.</p>
+  <div style="
+    font-family: ${tokens.fontFamilyBase.createCSS()};
+    font-size: ${tokens.fontSizeBase300.createCSS()};
+    background: var(${tokens.colorBrandBackground.cssCustomProperty});
+    color: ${tokens.colorNeutralForegroundOnBrand.createCSS()};
+    border: ${tokens.strokeWidthThicker.createCSS()} solid ${tokens.colorNeutralStroke1.createCSS()};
+    padding: ${tokens.spacingVerticalS.createCSS()} ${tokens.spacingHorizontalM.createCSS()};
+    box-shadow: ${tokens.shadow28.createCSS()};
+  ">colorNeutralForegroundOnBrand on colorBrandBackground with shadow28</div>
+</div>
+`;