npmpackage.info

@fluentui/react-theme

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

9.1.24

18,807

NOASSERTION

TypeScript

11.24 kB

8,944,143 6.4

Installations

npm install @fluentui/react-theme

Developer Guide

BETA

Typescript

No

Module System

CommonJS, ESM

Node Version

20.18.1

NPM Version

10.8.2 Score

99.7

Supply Chain

84.7

Quality

99.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

156

Total

19,460

Closed

2,778

Merged

16,526

Issues

Open

478

Total

13,098

Closed

12,620

Releases

18,180

@fluentui/react-monaco-editor v1.7.289

@fluentui/react-monaco-editor_v1.7.289

Published on 05 Feb 2025

@fluentui/react-docsite-components v8.13.171

@fluentui/react-docsite-components_v8.13.171

Published on 05 Feb 2025

@fluentui/react-charting v5.23.51

@fluentui/react-charting_v5.23.51

Published on 05 Feb 2025

@fluentui/web-components v3.0.0-beta.78

@fluentui/web-components_v3.0.0-beta.78

Published on 04 Feb 2025

@fluentui/chart-web-components v0.0.1

@fluentui/chart-web-components_v0.0.1

Published on 04 Feb 2025

@fluentui/react-monaco-editor v1.7.288

@fluentui/react-monaco-editor_v1.7.288

Published on 31 Jan 2025

View all 18,180 releases

Contributors

897

View all 897 contributors

Languages

TypeScript

JavaScript

MDX

SCSS

HTML

CSS

Shell

EJS

Handlebars

Dockerfile

TypeScript (95.73%)

JavaScript (1.8%)

MDX (1.6%)

SCSS (0.51%)

HTML (0.2%)

CSS (0.15%)

Shell (0.01%)

EJS (0.01%)

Developer

microsoft

Download Statistics

Total Downloads

8,944,143

Last Day

23,556

Last Week

118,493

Last Month

557,996

Last Year

6,013,857

GitHub Statistics

18,807 Stars

19,004 Commits

2,763 Forks

289 Watching

98 Branches

897 Contributors

Bundle Size

71.78 kB

Minified

11.24 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

9.1.24

Package Id

@fluentui/react-theme@9.1.24

Unpacked Size

50.83 kB

Size

8.96 kB

File Count

NPM Version

10.8.2

Node Version

20.18.1

Publised On

16 Dec 2024

Total Downloads

Cumulative downloads

Total Downloads

8,944,143

Last day

-13.4%

23,556

Compared to previous day

Last week

-22%

118,493

Compared to previous week

Last month

5.5%

557,996

Compared to previous month

Last year

155.1%

6,013,857

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@fluentui/tokens @swc/helpers

Dev Dependencies

@fluentui/eslint-plugin @fluentui/scripts-api-extractor

Versions

@fluentui/react-theme

React Theme for Fluent UI React

Usage

Import a theme and tokens:

1import { webLightTheme, tokens } from '@fluentui/react-components';

Pass the theme to the FluentProvider:

1<FluentProvider theme={webLightTheme}>
2  <App />
3</FluentProvider>

Use the tokens in your styles:

1const useStyles = makeStyles({
2  root: {
3    color: tokens.colorNeutralForeground1,
4  },
5});

Using a custom brand ramp

To use a theme based on a custom brand ramp, use the createXXXTheme function:

1import { createWebLightTheme } from '@fluentui/react-components';
2
3const customBrandRamp: BrandVariants = {
4  10: `#2b2b40`,
5  // ...
6  160: `#e8ebfa`,
7};
8
9const customTheme = createWebLightTheme(customBrandRamp);

Contributing

Updating colors in the theme

The color tokens are generated by token pipeline. Do not edit colors directly. Instead, update the token pipeline first and once the changes are merged there, run:

1yarn token-pipeline

Adding new color tokens

To add a new color token, besides updating the token pipeline, you also need to update corresponding typings and the tokens object in src/tokens.ts.

Updating other tokens

To update any tokens not related to colors, update the values directly in this package.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

Dependency-Update-Tool

Determines if the project uses a dependency update tool.

10

Security-Policy

Determines if the project has published a security policy.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

Code-Review

Determines if the project requires code review before pull requests (aka merge requests) are merged.

8

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

5

Pinned-Dependencies

Determines if the project has declared and pinned its dependencies.

Reason

dependency not pinned by hash detected -- score normalized to 5

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/actions-mention-to-teams.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/actions-mention-to-teams.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-housekeeping.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/pr-housekeeping.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr-housekeeping.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/pr-housekeeping.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:82: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:92: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:105: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:116: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:126: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:137: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:148: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:158: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:169: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:98: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:122: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:139: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:144: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:150: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:157: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:182: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: containerImage not pinned by hash: .devcontainer/Dockerfile:5: pin your Docker image by updating mcr.microsoft.com/vscode/devcontainers/javascript-node to mcr.microsoft.com/vscode/devcontainers/javascript-node@sha256:28d382643a2f24b421c5ae65661cb8dec3f4735fdb7427be1634d20aa12466f4
Info: no insecure (not pinned by hash) dependency downloads found in Dockerfiles
Info: no insecure (not pinned by hash) dependency downloads found in shell scripts

0

CII-Best-Practices

Determines if the project has a CII Best Practices Badge.

0

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

Score

6.4

/10

Last Scanned on 2022-08-15

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @fluentui/react-theme

@fluentui/react-theme-provider

0.18.5

Fluent UI React theme provider component, hook, and theme related utilities.

@fluentui-react-native/theme

0.11.0

Experimental version of fluentui-react-native theme framework

@fluentui/theme

2.6.64

Basic building blocks for Fluent UI React Component themes

@fluentui-react-native/default-theme

0.26.0

Typing only package for fluentui-react-native theme types