# @microsoft/adaptive-ui

> A collection of design utilities supporting basic styling and Adaptive UI

Latest version **1.0.0-alpha.2** (published 2022-06-01) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @microsoft/adaptive-ui
pnpm add @microsoft/adaptive-ui
yarn add @microsoft/adaptive-ui
bun add @microsoft/adaptive-ui
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.2 |
| Published | 2022-06-01 |
| First published | 2022-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 507.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9673 |
| Author | Microsoft |
| Maintainers | nirice, microsoft1es, janechu, chrisdholt, awentzel |

## Links

- npm: https://www.npmjs.com/package/@microsoft/adaptive-ui
- Repository: https://github.com/microsoft/fast
- Homepage: https://fast.design
- Issues: https://github.com/microsoft/fast/issues/new/choose
- npm.io page: https://npm.io/package/@microsoft/adaptive-ui

## Dependencies (2)

- [@microsoft/fast-colors](https://npm.io/package/@microsoft/fast-colors.md) ^5.3.1
- [@microsoft/fast-foundation](https://npm.io/package/@microsoft/fast-foundation.md) 3.0.0-alpha.2

## Recent versions

- 1.0.0-alpha.2 (latest) — 2022-06-01
- 1.0.0-alpha.28 (alpha) — 2023-06-16
- 1.0.0-alpha.27 — 2023-03-28
- 1.0.0-alpha.26 — 2023-03-11
- 1.0.0-alpha.25 — 2023-02-14
- 1.0.0-alpha.24 — 2023-01-11
- 1.0.0-alpha.23 — 2022-12-02
- 1.0.0-alpha.22 — 2022-11-15
- 1.0.0-alpha.21 — 2022-11-04
- 1.0.0-alpha.20 — 2022-11-01
- 1.0.0-alpha.19 — 2022-10-28
- 1.0.0-alpha.18 — 2022-10-25
- 1.0.0-alpha.17 — 2022-10-14
- 1.0.0-alpha.16 — 2022-10-10
- 1.0.0-alpha.15 — 2022-10-06
- … 12 more at https://npm.io/package/@microsoft/adaptive-ui/versions

## README

# Adaptive UI

Adaptive UI is a library for building highly-consistent design systems based around your visual decisions. This represents an evolution of many token implementations that provide end-result values without the means to track how they were derived or easily adjust them.

This is a core feature of [FAST](https://fast.design) and is incorporated into the [Fluent UI Web Components](https://aka.ms/fluentwebcomponents) and other design systems.

## Installation

```shell
npm install --save @microsoft/adaptive-ui
```

```shell
yarn add @microsoft/adaptive-ui
```

## Getting started

The most common way to use this library is through the `DesignToken`s.

For example, in a FAST style sheet:

```ts
css`
    :host {
        background: ${neutralFillRest};
    }
`
```

This will evaluate the `neutralFillRest` recipe when the component loads and apply the correct color appropriate for the current context within design.

Most of the color recipes are contextually aware of where they're used so they produce accessible colors based on the configuration of the design, for instance between light mode and dark mode, or when personalization is applied, like a blue tint to the neutral colors or orange accent color.

To tint the neutral palette, and thus all color recipes derived from it:

```ts
neutralBaseColor.withDefault("#73818C");
```

To switch to dark mode:

```ts
fillColor.withDefault("#232323");
```

See more about the [adaptive color system](./src/color/README.md).

## Road map

The layer system for setting content area background colors and improved handling of light and dark mode is evolving and will be added soon.

The latest version of adaptive density, currently in RFC and PR, will come here soon as well.

The color system is being updated to support opacity in colors, which will enable at least the neutral palette to overlay images or background blur effects like in Windows 11.

### Further afield

The fixed design tokens will evolve into a more configurable definition aligning with industry standards in design tokens.

---
_Source: https://npm.io/package/@microsoft/adaptive-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._