Add adaptive-ui package

change/@microsoft-adaptive-ui-63900c6a-7460-40f4-bb44-42cedac1ac3c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add adaptive-ui package",
+  "packageName": "@microsoft/adaptive-ui",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/utilities/adaptive-ui/.eslintignore

@@ -0,0 +1,10 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint coverage output
+coverage
+# don't lint www
+www
+# don't lint test files
+__test__

packages/utilities/adaptive-ui/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+    "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
+    "rules": {
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "import/extensions": [
+            "error",
+            "always"
+        ]
+    }
+}

packages/utilities/adaptive-ui/.gitignore

@@ -0,0 +1,3 @@
+tsdoc-metadata.json
+temp
+test

packages/utilities/adaptive-ui/.mocharc.json

@@ -0,0 +1,6 @@
+{
+  "colors": true,
+  "recursive": true,
+  "timeout": 5000,
+  "spec": "test/**/*.spec.js"
+}

packages/utilities/adaptive-ui/.npmignore

@@ -0,0 +1,10 @@
+# Tests
+__test__/
+*.spec.*
+*.test.*
+
+# Source files
+src/
+
+# babel config
+babel.config.js

packages/utilities/adaptive-ui/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/utilities/adaptive-ui/.prettierignore

@@ -0,0 +1,3 @@
+dist/*
+test/*
+src/__test__/*

packages/utilities/adaptive-ui/README.md

@@ -0,0 +1,59 @@
+# 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.

packages/utilities/adaptive-ui/api-extractor.json

@@ -0,0 +1,4 @@
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+    "extends": "../../../api-extractor.json"
+}