Bring design tokens and styles closer to design token community group guidelines (#74)

* Bring design tokens and styles closer to design token community group guidelines
- Add token bridge and helpers between CG standard types and Adaptive UI
- Updated border radius and thickness tokens and migrated to style modules
- Updated font tokens

Author: bheston

.eslintrc.json

@@ -1,4 +1,7 @@
 {
     "extends": ["@microsoft/eslint-config-fast-dna"],
-    "ignorePatterns": ["dist", "*.spec.ts"]
+    "ignorePatterns": ["dist", "*.spec.ts"],
+    "rules": {
+        "max-len": "warn"
+    }
 }

change/@adaptive-web-adaptive-ui-f0fd0cb6-8f91-4965-ab74-e15faa0b4a19.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Bridge token structure between Adaptive UI and DT community group",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-web-components-e5498ff0-2dad-4771-8726-a873b912dd26.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Migrate border styling to modules",
+  "packageName": "@adaptive-web/adaptive-web-components",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

examples/customize-component/src/index.ts

@@ -1,9 +1,9 @@
 import {
     accentFillReadableControlStyles,
-    accentStrokeReadableInteractiveSet,
+    accentStrokeReadable,
     accentStrokeReadableRecipe,
     createForegroundSet,
-    neutralFillSubtleInteractiveSet,
+    neutralFillSubtle,
     Styles,
 } from '@adaptive-web/adaptive-ui';
 import {
@@ -35,9 +35,9 @@ AdaptiveDesignSystem.defineComponents({
 
 // Define a custom style module.
 const accentOutlineReadableControlStyles: Styles = Styles.fromProperties({
-    backgroundFill: neutralFillSubtleInteractiveSet,
-    borderFill: accentStrokeReadableInteractiveSet,
-    foregroundFill: createForegroundSet(accentStrokeReadableRecipe, "rest", neutralFillSubtleInteractiveSet),
+    backgroundFill: neutralFillSubtle,
+    borderFill: accentStrokeReadable,
+    foregroundFill: createForegroundSet(accentStrokeReadableRecipe, "rest", neutralFillSubtle),
 });
 
 const myDS = new DesignSystem("my");

packages/adaptive-ui-explorer/src/components/style-example.ts

@@ -1,6 +1,5 @@
-import { fillColor, InteractiveTokenSet, StyleProperty, Styles, Swatch } from "@adaptive-web/adaptive-ui";
+import { fillColor, InteractiveTokenGroup, StyleProperty, Styles, Swatch, TypedCSSDesignToken } from "@adaptive-web/adaptive-ui";
 import { css, customElement, FASTElement, html, observable, repeat, volatile } from "@microsoft/fast-element";
-import { CSSDesignToken } from "@microsoft/fast-foundation";
 import { SwatchType } from "./swatch.js";
 import "./adaptive-component.js";
 import "./swatch.js";
@@ -43,9 +42,9 @@ const styles = css`
 interface StyleValue {
     type: SwatchType;
     tokenName: string;
-    foregroundRecipe?: CSSDesignToken<Swatch>;
-    fillRecipe?: CSSDesignToken<Swatch>;
-    outlineRecipe?: CSSDesignToken<Swatch>;
+    foregroundRecipe?: TypedCSSDesignToken<Swatch>;
+    fillRecipe?: TypedCSSDesignToken<Swatch>;
+    outlineRecipe?: TypedCSSDesignToken<Swatch>;
 }
 
 @customElement({
@@ -70,15 +69,15 @@ export class StyleExample extends FASTElement {
         if (backgroundValue) {
             if (typeof backgroundValue === "string") {
                 // ignore for now
-            } else if (backgroundValue instanceof CSSDesignToken) {
+            } else if (backgroundValue instanceof TypedCSSDesignToken) {
                 backgroundRest = backgroundValue;
                 values.push({
                     type: SwatchType.fill,
-                    tokenName: (backgroundValue as CSSDesignToken<any>).name,
+                    tokenName: (backgroundValue as TypedCSSDesignToken<any>).name,
                     fillRecipe: backgroundValue,
                 });
             } else {
-                const set = backgroundValue as InteractiveTokenSet<any>;
+                const set = backgroundValue as InteractiveTokenGroup<any>;
                 backgroundRest = set.rest;
                 backgroundHover = set.hover;
                 backgroundActive = set.active;
@@ -110,15 +109,15 @@ export class StyleExample extends FASTElement {
         if (colorValue) {
             if (typeof colorValue === "string") {
                 // ignore for now
-            } else if (colorValue instanceof CSSDesignToken) {
+            } else if (colorValue instanceof TypedCSSDesignToken) {
                 values.push({
                     type: SwatchType.foreground,
-                    tokenName: (colorValue as CSSDesignToken<any>).name,
+                    tokenName: (colorValue as TypedCSSDesignToken<any>).name,
                     foregroundRecipe: colorValue,
                     fillRecipe: backgroundRest,
                 });
             } else {
-                const set = colorValue as InteractiveTokenSet<any>;
+                const set = colorValue as InteractiveTokenGroup<any>;
                 values.push({
                     type: SwatchType.foreground,
                     tokenName: set.rest.name,
@@ -150,15 +149,15 @@ export class StyleExample extends FASTElement {
         if (borderValue) {
             if (typeof borderValue === "string") {
                 // ignore for now
-            } else if (borderValue instanceof CSSDesignToken) {
+            } else if (borderValue instanceof TypedCSSDesignToken) {
                 values.push({
                     type: SwatchType.outline,
-                    tokenName: (borderValue as CSSDesignToken<any>).name,
+                    tokenName: (borderValue as TypedCSSDesignToken<any>).name,
                     outlineRecipe: borderValue,
                     fillRecipe: backgroundRest,
                 });
             } else {
-                const set = borderValue as InteractiveTokenSet<any>;
+                const set = borderValue as InteractiveTokenGroup<any>;
                 values.push({
                     type: SwatchType.outline,
                     tokenName: set.rest.name,