Socket
Socket
Sign inDemoInstall

@microsoft/adaptive-ui

Package Overview
Dependencies
2
Maintainers
5
Versions
27
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@microsoft/adaptive-ui


Version published
Maintainers
5
Created

Readme

Source

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 and is incorporated into the Fluent UI Web Components and other design systems.

Installation

npm install --save @microsoft/adaptive-ui
yarn add @microsoft/adaptive-ui

Getting started

The most common way to use this library is through the DesignTokens.

For example, in a FAST style sheet:

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:

neutralBaseColor.withDefault("#73818C");

To switch to dark mode:

fillColor.withDefault("#232323");

See more about the adaptive color system.

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.

FAQs

Last updated on 01 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc