open-index/open-npm huggingface dataset:
npm package: @fluentui-vue/components
Description: Requires a [CSS Vars Polyfill](https://github.com/nuxodin/ie11CustomProperties).
Latest version: 2.0.0-rc.34

## IE11 Support

Requires a [CSS Vars Polyfill](https://github.com/nuxodin/ie11CustomProperties).

## Styling & Theming

All components use CSS vars, which allows for very flexible theming.

### CSS in JS
This library uses CSS in JS for multiple reasons:

* Fluent UI React uses CSS in JS, so we can just use their style definitions.
* You can import individual components with full tree-shaking, without the need of babel plugins.
* Components are JS only, and don't require any fancy tool chains.

#### Cons

* The dependencies for CSS in JS make the bundle a bit bigger, which becomes neglectable when importing multiple
  components.
* Performance is slower than pure CSS

### Color Palette

https://aka.ms/themedesigner.

```css
:root {
  --themePrimary: #0078d4;
  --themeLighterAlt: #eff6fc;
  --themeLighter: #deecf9;
  --themeLight: #c7e0f4;
  --themeTertiary: #71afe5;
  --themeSecondary: #2b88d8;
  --themeDarkAlt: #106ebe;
  --themeDark: #005a9e;
  --themeDarker: #004578;
  --neutralLighterAlt: #faf9f8;
  --neutralLighter: #f3f2f1;
  --neutralLight: #edebe9;
  --neutralQuaternaryAlt: #e1dfdd;
  --neutralQuaternary: #d0d0d0;
  --neutralTertiaryAlt: #c8c6c4;
  --neutralTertiary: #a19f9d;
  --neutralSecondaryAlt: #8a8886;
  --neutralSecondary: #605e5c;
  --neutralPrimaryAlt: #3b3a39;
  --neutralPrimary: #323130;
  --neutralDark: #201f1e;
  --black: #000000;
  --white: #ffffff;
}
```

`neutralSecondaryAlt` is not exported by ThemeDesigner.

### `loadStyles`

### Override Styles 

#### Using `style`

See [Vue - Class and Style Bindings](https://v2.vuejs.org/v2/guide/class-and-style.html).

#### Using `styles`

`styles` is an object that allows you to target specific elements.

```js
{
  root: {
    fontWeight: 'bold'
  },
  label: {
    color: 'red'
  }
}
```

```html
<div class="root" style="font-weight: bold">
  <div class="label" style="color: red;"></div>
</div>
```

#### Using `theme`

`theme` is an object that allows you to override specific CSS Variables within the element. This requires a CSS Vars Polyfill or a modern browser.

```js
{
  palette: {
    themePrimary: '#0f0'
  }
}
```

```html
<div style="--themePrimary: #0f0;">/div>
```
npm package: @fluentui-vue/file-type-icons
Description: Fluent UI Vue file type icon set.
Latest version: 2.1.0

# @fluentui-vue/file-type-icons
This is a port of the React `@fluentui/react-file-type-icons` package to Vue.

See the original README for usage. You have to update `@fluentui/react-file-type-icons` to `@fluentui-vue/file-type-icons`

## Getting Started
```tsx
import { initializeFileTypeIcons } from '@fluentui-vue/file-type-icons'

// Register icons and pull the fonts from the default SharePoint cdn.
initializeFileTypeIcons()

// ...or, register icons and pull the fonts from your own cdn:
initializeFileTypeIcons('https://my.cdn.com/path/to/icons/')
```

## Usage in code

```vue
<script lang="ts">
import Vue from 'vue'
import { Icon } from '@fluentui-vue/components'
import { getFileTypeIconProps } from '@fluentui-vue/file-type-icons'

export default Vue.extend({
  components: {
    FluentIcon: Icon,
  },

  computed: {
    iconProps() {
      return getFileTypeIconProps({ extension: 'docx', size: 16 })
    }
  }
})
</script>

<template>
  <FluentIcon v-bind="iconProps" />
</template>
```

> # @fluentui/react-file-type-icons
> 
> **File type icons for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
> ([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))
> 
> This package includes a collection of icons to represent file types.
> 
> ## Getting started
> 
> If you are using Fluent UI React components, you can make all file type icons available by calling the `initializeFileTypeIcons` function from the `@fluentui/react-file-type-icons` package:
> 
> ```tsx
> import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons'
> 
> // Register icons and pull the fonts from the default SharePoint cdn.
> initializeFileTypeIcons()
> 
> // ...or, register icons and pull the fonts from your own cdn:
> initializeFileTypeIcons('https://my.cdn.com/path/to/icons/')
> ```
> 
> **NOTE:** Do not use the `item-types-fluent` icon set that was previously uploaded to the Fabric CDN; it is deprecated.
> 
> ## Usage in code
> 
> If you are using Fluent UI React, you can use the `Icon` component and pass in the corresponding icon properties to render a given icon.
> 
> ```tsx
> import { Icon } from '@fluentui/react/lib/Icon'
> import { getFileTypeIconProps } from '@fluentui/react-file-type-icons'
> 
> <Icon {...getFileTypeIconProps({ extension: 'docx', size: 16 })} />
> ```
> 
> ## Notes
> 
> See [GitHub](https://github.com/microsoft/fluentui) for more details on the Fluent UI React project and packages within.
npm package: @fluentui/bundle-size
Description: A CLI tool to measure bundle size locally and on CI.
Latest version: 1.2.0
Deprecated: This package have been deprecated, please use monosize instead.

## `@fluentui/bundle-size`

A CLI tool to measure bundle size locally and on CI.

> NOTE: `bundle-size` requires to build packages first before doing any kind of measurements. Make sure to accommodate this in your pipeline

### Usage

#### Fixtures

Fixtures declare exports that should be measured by the `bundle-size` tool. Fixtures are created inside each package.

For example:

```js
import { Component } from '@fluentui/react-component';

console.log(Component);
// 👆 "console.log()" is the easiest way to prevent tree-shaking

export default {
  name: 'Component',
  // 👆 defines a name for story that will be used in output
};
```

### Configuration

For custom advanced behavior of `bundle-size`, you can create a `bundle-size.config.js` in the root of your project directory (next to `package.json`).

```
my-proj/
├─ src/
├─ bundle-size.config.js
├─ node_modules/
├─ bundle-size/
│  ├─ Fixture.fixture.js
├─ package.json
```

A global configuration can also be used for monorepo scenarios

```
my-proj-a/
├─ src/
├─ node_modules/
├─ bundle-size/
│  ├─ Fixture.fixture.js
├─ package.json
my-proj-b/
├─ src/
├─ node_modules/
├─ bundle-size/
│  ├─ Fixture.fixture.js
├─ package.json
bundle-size.config.js

```

#### Config API

```js
module.exports = {
  webpack: config => {
    // customize config here
    return config;
  },
};
```

### Commands

#### `compare-reports`

Compares local (requires call of `bundle-size measure` first) and remote results, provides output to CLI or to a Markdown file.

```sh
yarn bundle-size compare-reports --branch=main --output=["cli"|"markdown"] [--quiet]
```

#### `measure`

```sh
yarn bundle-size measure [--quiet]
```

Builds fixtures and produces artifacts. For each fixture:

- `[fixture].fixture.js` - a modified fixture without a default export, used by a bundler
- `[fixture].output.js` - a partially minified file, useful for debugging
- `[fixture].min.js` - a fully minified file, used for measurements

A report file `bundle-size.json` that is used by other steps.

#### `upload-report`

```sh
yarn bundle-size upload-report --branch=main --commit-sha=HASH [--quiet]
```

Aggregates local results to a single report and uploads data to Azure Table Storage.

> NOTE: should be called only during CI builds.
npm package: @fluentui/cli
Description: Command-line tool for Fluent UI — migration analysis, usage reporting, and API metadata extraction.
Latest version: 0.0.1-experimental.fluent-cli.20260409-f92690ecf6.0

# @fluentui/cli

Command-line tool for Fluent UI — migration analysis, usage reporting, and API metadata extraction.

> **⚠️ Experimental** — This package is published under the `experimental` npm tag. APIs and commands may change without notice.

## Usage

```sh
npx @fluentui/cli@experimental <command> [options]
```

> Run any command with `--help` for detailed options.

## Commands

### `migrate`

Run migration analysis and annotation.

```sh
# List available migrations
npx @fluentui/cli migrate --list

# Analyze v8 → v9 migration (dry run)
npx @fluentui/cli migrate v8-to-v9 --path src/ --dryRun

# Annotate source files with migration hints
npx @fluentui/cli migrate v8-to-v9 --path src/
```

### `report`

Generate reports for issue filing or codebase analysis.

```sh
# Quick environment/package summary for issue reporting
npx @fluentui/cli report info

# Deep codebase usage analysis of Fluent UI APIs
npx @fluentui/cli report usage --path ./src --reporter markdown --output report.md
```

### `metadata`

Extract API metadata from package `.d.ts` build output.

```sh
npx @fluentui/cli metadata --entry dist/index.d.ts --reporter json
```

## Development

```sh
# Build
yarn nx run cli:build

# Test
yarn nx run cli:test
```