@fabric-msft/theme

v4.0.0

Published

10 days ago

Fabric theme provides a set of CSS variables that can be used to style your application. It provides a theme object and a setTheme function to apply the theme to the page.

0High
0Medium
0Low

@fabric-msft/theme

Fabric theme provides a set of CSS variables that can be used to style your application. It provides a theme object and a setTheme function to apply the theme to the page.

import { fabricLightTheme, setTheme } from "@fabric-msft/theme";

setTheme(fabricLightTheme);

// or use the base fluent theme
// setTheme(webLightTheme);

Fabric Semantic Tokens

Fabric provides semantic tokens for icon coloring that can be used in your components:

// Import directly if needed
import {
  fabricSemanticTokensLight,
  fabricSemanticTokensDark
} from "@fabric-msft/theme";

Available Tokens

Standard Icon Colors

iconErrorColor: For error states
iconValidationColor: For success states
iconSystemColor: For system icons
iconContentManagementColor: For content management
iconMonitoringColor: For monitoring indicators
iconMiscColor: For miscellaneous icons

Ribbon Icon Colors

colorRibbonIconError: For ribbon error icons
colorRibbonIconValidation: For ribbon validation icons
colorRibbonIconSysconfig: For ribbon system configuration icons
colorRibbonIconContentMgt: For ribbon content management icons
colorRibbonIconMonitoring: For ribbon monitoring icons
colorRibbonIconMisc: For ribbon miscellaneous icons

Ribbon Icon Disabled States

colorRibbonIconErrorDisabled: Disabled error icons in ribbons
colorRibbonIconValidationDisabled: Disabled validation icons
colorRibbonIconSysconfigDisabled: Disabled system config icons
colorRibbonIconContentMgtDisabled: Disabled content management icons
colorRibbonIconMonitoringDisabled: Disabled monitoring icons
colorRibbonIconMiscDisabled: Disabled miscellaneous icons

Using in CSS

/* Standard icon colors */
.error-icon {
  fill: var(--iconErrorColor);
}

/* Ribbon icon colors */
.ribbon-system-icon {
  fill: var(--colorRibbonIconSysconfig);
}

/* Disabled ribbon icons */
.disabled-monitoring-icon {
  fill: var(--colorRibbonIconMonitoringDisabled);
}

Using in Web Components

import { css } from "@microsoft/fast-element";

export const styles = css`
  .content-management-icon {
    fill: var(--iconContentManagementColor);
  }

  .ribbon-validation-icon {
    fill: var(--colorRibbonIconValidation);
  }

  .ribbon-validation-icon[disabled] {
    fill: var(--colorRibbonIconValidationDisabled);
  }
`;

Testing Locally

You can quickly test semantic tokens in a browser with these steps:

1. Build and Pack the Library

# Build the theme library
cd libs/theme
yarn build

# Create a local package
yarn pack-dist

2. Create a Simple Test Page

Create a simple HTML file to test the tokens:

<!DOCTYPE html>
<html>
  <head>
    <title>Semantic Token Test</title>
    <style>
      .test-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }
      .color-sample {
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        border-radius: 8px;
      }
      .switch-theme {
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <h1>Fabric Semantic Tokens Test</h1>

    <button id="themeToggle" class="switch-theme">Switch Theme</button>

    <div class="test-container" id="tokenContainer"></div>

    <script type="module">
      import {
        fabricLightTheme,
        fabricDarkTheme,
        setTheme
      } from "./node_modules/@fabric-msft/theme/dist/index.js";

      // Initialize with light theme
      let isDarkTheme = false;
      setTheme(fabricLightTheme);

      // Token display helper
      function displayTokens() {
        const container = document.getElementById("tokenContainer");
        container.innerHTML = "";

        const currentTheme = isDarkTheme ? fabricDarkTheme : fabricLightTheme;

        // Get all semantic tokens and display them
        Object.keys(currentTheme)
          .filter(
            (key) => key.startsWith("icon") || key.startsWith("colorRibbon")
          )
          .forEach((token) => {
            const div = document.createElement("div");
            div.className = "color-sample";
            div.style.backgroundColor = `var(--${token})`;
            div.textContent = token;
            container.appendChild(div);
          });
      }

      // Theme toggle
      document.getElementById("themeToggle").addEventListener("click", () => {
        isDarkTheme = !isDarkTheme;
        setTheme(isDarkTheme ? fabricDarkTheme : fabricLightTheme);
        displayTokens();
      });

      // Initial display
      displayTokens();
    </script>
  </body>
</html>

3. Test with a Local Server

Serve your test page using any local server, for example:

# Using npx and a simple http server
npx http-server -o

# Or with Python
python -m http.server

Navigate to the test page in your browser to visualize all semantic tokens and verify they work as expected in both light and dark themes.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@fabric-msft/theme

Fabric Semantic Tokens

Available Tokens

Standard Icon Colors

Ribbon Icon Colors

Ribbon Icon Disabled States

Using in CSS

Using in Web Components

Testing Locally

1. Build and Pack the Library

2. Create a Simple Test Page

3. Test with a Local Server