@ni/nimble-components 2.1.2 → 3.1.0

package/dist/esm/button/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { Button as FoundationButton, buttonTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
-import { styles } from '../patterns/button/styles';
+import { styles } from './styles';
 import { ButtonAppearance } from './types';
 /**
  * A nimble-styled HTML button

package/dist/esm/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAArC;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;QAEZ,cAAS,GAAG,uBAAuB,CAAC;IAYzD,CAAC;IAVU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC;QACxD,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACjE,CAAC;CACJ;AA1BG;IADC,IAAI;0CACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAgBjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAArC;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;QAEZ,cAAS,GAAG,uBAAuB,CAAC;IAYzD,CAAC;IAVU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC;QACxD,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACjE,CAAC;CACJ;AA1BG;IADC,IAAI;0CACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAgBjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

package/dist/esm/button/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/button/styles.js

@@ -0,0 +1,82 @@
+import { css } from '@microsoft/fast-element';
+import { focusVisible } from '../utilities/style/focus';
+import { actionRgbPartialColor, borderHoverColor, borderWidth, fillColorSelected, standardPadding } from '../theme-provider/design-tokens';
+import { styles as buttonStyles } from '../patterns/button/styles';
+import { appearanceBehavior } from '../utilities/style/appearance';
+import { ButtonAppearance } from './types';
+// prettier-ignore
+export const styles = buttonStyles
+    .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
+                :host(.primary) .control {
+                    box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
+                }
+
+                :host(.primary) .control:hover {
+                    box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+                }
+
+                :host(.primary) .control${focusVisible} {
+                    box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+                }
+
+                :host(.primary) .control:active {
+                    box-shadow: none;
+                }
+
+                :host(.primary) .control[disabled] {
+                    box-shadow: none;
+                }
+            `), appearanceBehavior(ButtonAppearance.Block, css `
+                :host(.primary) .control {
+                    background-clip: padding-box;
+                    border-color: rgba(${actionRgbPartialColor}, 0.3);
+                    border-width: calc(2 * ${borderWidth});
+                    padding: 0 calc(${standardPadding} - ${borderWidth});
+                }
+
+                :host(.primary[content-hidden]) .control {
+                    padding: 0px;
+                }
+
+                :host(.primary) .control:hover {
+                    border-color: ${borderHoverColor};
+                    box-shadow: none;
+                }
+
+                :host(.primary) .control${focusVisible} {
+                    background-clip: border-box;
+                    border-color: ${borderHoverColor};
+                    border-width: ${borderWidth};
+                    box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+                    padding: 0 ${standardPadding};
+                }
+
+                :host(.primary[content-hidden]) .control${focusVisible} {
+                    padding: 0px;
+                }
+
+                :host(.primary) .control:active {
+                    background-clip: border-box;
+                    border-color: ${fillColorSelected};
+                    border-width: ${borderWidth};
+                    box-shadow: none;
+                    padding: 0 ${standardPadding};
+                }
+
+                :host(.primary[content-hidden]) .control:active {
+                    padding: 0px;
+                }
+
+                :host(.primary) .control[disabled] {
+                    background-clip: border-box;
+                    border-color: transparent;
+                    border-width: ${borderWidth};
+                    box-shadow: none;
+                    padding: 0 ${standardPadding};
+                }
+
+                :host(.primary[content-hidden]) .control[disabled] {
+                    padding: 0px;
+                }
+            `));
+//# sourceMappingURL=styles.js.map

package/dist/esm/button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY;KAC7B,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;8CAE+B,WAAW,SAAS,qBAAqB;;;;8CAIzC,WAAW,IAAI,gBAAgB;;;0CAGnC,YAAY;8CACR,WAAW,IAAI,gBAAgB;;;;;;;;;;aAUhE,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;yCAG0B,qBAAqB;6CACjB,WAAW;sCAClB,eAAe,MAAM,WAAW;;;;;;;;oCAQlC,gBAAgB;;;;0CAIV,YAAY;;oCAElB,gBAAgB;oCAChB,WAAW;8CACD,WAAW,IAAI,gBAAgB;iCAC5C,eAAe;;;0DAGU,YAAY;;;;;;oCAMlC,iBAAiB;oCACjB,WAAW;;iCAEd,eAAe;;;;;;;;;;oCAUZ,WAAW;;iCAEd,eAAe;;;;;;aAMnC,CACJ,CACJ,CAAC"}

package/dist/esm/checkbox/styles.js

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { focusVisible } from '../utilities/style/focus';
-import { borderColor, borderColorHover, borderColorRgbPartial, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, labelHeight, iconSize, fontFamily, borderWidth, smallDelay } from '../theme-provider/design-tokens';
+import { borderColor, borderHoverColor, borderRgbPartialColor, bodyFontColor, bodyDisabledFontColor, controlHeight, iconSize, borderWidth, smallDelay, buttonLabelFont } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-flex')}
 
@@ -42,32 +42,30 @@ export const styles = css `
     }
 
     :host([disabled]) .control {
-        background-color: rgba(${borderColorRgbPartial}, 0.1);
-        border-color: rgba(${borderColorRgbPartial}, 0.2);
+        background-color: rgba(${borderRgbPartialColor}, 0.1);
+        border-color: rgba(${borderRgbPartialColor}, 0.2);
     }
 
     :host(:not([disabled]):not(:active):hover) .control {
-        border-color: ${borderColorHover};
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
+        border-color: ${borderHoverColor};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
     }
 
     :host(${focusVisible}) .control {
-        border-color: ${borderColorHover};
-        outline: 2px solid ${borderColorHover};
+        border-color: ${borderHoverColor};
+        outline: 2px solid ${borderHoverColor};
         outline-offset: 2px;
     }
 
     .label {
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
-        color: ${contentFontColor};
-        line-height: ${labelHeight};
+        font: ${buttonLabelFont};
+        color: ${bodyFontColor};
         padding-left: 1ch;
         cursor: inherit;
     }
 
     :host([disabled]) .label {
-        color: ${contentFontColorDisabled};
+        color: ${bodyDisabledFontColor};
     }
 
     slot[name='checked-indicator'] svg {
@@ -86,7 +84,7 @@ export const styles = css `
     }
 
     :host([disabled]) slot[name='checked-indicator'] path {
-        fill: rgba(${borderColorRgbPartial}, 0.3);
+        fill: rgba(${borderRgbPartialColor}, 0.3);
     }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/checkbox/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,WAAW,EACX,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;sBAcN,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;iCAWyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;uBAKtB,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;uBACV,WAAW;;;;;;iBAMjB,wBAAwB;;;;kBAIvB,QAAQ;iBACT,QAAQ;;;;;gBAKT,WAAW;;;;;;;;;qBASN,qBAAqB;;CAEzC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;sBAcN,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;iCAWyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;gBAK7B,eAAe;iBACd,aAAa;;;;;;iBAMb,qBAAqB;;;;kBAIpB,QAAQ;iBACT,QAAQ;;;;;gBAKT,WAAW;;;;;;;;;qBASN,qBAAqB;;CAEzC,CAAC"}

package/dist/esm/drawer/index.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { AnimateGroup, AnimateTo } from '@microsoft/fast-animation';
 import { attr, Observable } from '@microsoft/fast-element';
 import { DesignSystem, Dialog as FoundationDialog, dialogTemplate as template } from '@microsoft/fast-foundation';
-import { drawerAnimationDurationMs } from '../theme-provider/design-tokens';
+import { largeDelay } from '../theme-provider/design-tokens';
 import { prefersReducedMotionMediaQuery } from '../utilities/style/prefers-reduced-motion';
 import { animationConfig } from './animations';
 import { styles } from './styles';
@@ -125,7 +125,7 @@ class Drawer extends FoundationDialog {
         const disableAnimations = prefersReducedMotionMediaQuery.matches;
         this.animationDurationMilliseconds = disableAnimations
             ? animationDurationWhenDisabledMilliseconds
-            : drawerAnimationDurationMs.getValueFor(this);
+            : largeDelay.getValueFor(this);
     }
     animateOpening() {
         this.animateOpenClose(true);

package/dist/esm/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/drawer/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { applicationBackgroundColor, borderWidth, contentFontColor, contentFontSize, drawerHeaderFontFamily, drawerHeaderFontSize, drawerWidth, fontFamily, popupBorderColor, popupBoxShadowColor, standardPadding } from '../theme-provider/design-tokens';
+import { applicationBackgroundColor, bodyFont, bodyFontColor, borderWidth, popupBorderColor, popupBoxShadowColor, standardPadding, titlePlus1Font, drawerWidth } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('block')}
 
@@ -11,9 +11,8 @@ export const styles = css `
         width: fit-content;
         height: 100%;
         outline: none;
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
-        color: ${contentFontColor};
+        font: ${bodyFont};
+        color: ${bodyFontColor};
     }
 
     :host([modal]) {
@@ -95,8 +94,7 @@ export const styles = css `
 
     ::slotted(header) {
         padding: ${standardPadding};
-        font-family: ${drawerHeaderFontFamily};
-        font-size: ${drawerHeaderFontSize};
+        font: ${titlePlus1Font};
     }
 
     ::slotted(section) {

package/dist/esm/drawer/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;uBASC,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgC3B,CAAA,8DAA+D,EAAE;;;;sBAIjD,gBAAgB;;;;;;;;;;;;;;iBAcrB,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;;wBAc9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;uBACX,sBAAsB;qBACxB,oBAAoB;;;;mBAItB,eAAe;;;;;;mBAMf,eAAe;;;;sBAIZ,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,WAAW,EACd,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;gBASN,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgCxB,CAAA,8DAA+D,EAAE;;;;sBAIjD,gBAAgB;;;;;;;;;;;;;;iBAcrB,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;;wBAc9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;gBAClB,cAAc;;;;mBAIX,eAAe;;;;;;mBAMf,eAAe;;;;sBAIZ,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}

package/dist/esm/icon-base/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { contentFontColor, iconSize, warningColor, failColor, passColor, iconColor } from '../theme-provider/design-tokens';
+import { iconSize, warningColor, failColor, passColor, iconColor } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-flex')}
 
@@ -9,7 +9,6 @@ export const styles = css `
         user-select: none;
         width: ${iconSize};
         height: ${iconSize};
-        ${iconColor.cssCustomProperty}: ${contentFontColor};
     }
 
     .icon {

package/dist/esm/icon-base/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;iBAKX,QAAQ;kBACP,QAAQ;UAChB,SAAS,CAAC,iBAAiB,KAAK,gBAAgB;;;;;;;;;UAShD,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;UAIzC,SAAS,CAAC,iBAAiB,KAAK,YAAY;;;;UAI5C,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;gBAInC,SAAS;;;;CAIxB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;iBAKX,QAAQ;kBACP,QAAQ;;;;;;;;;UAShB,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;UAIzC,SAAS,CAAC,iBAAiB,KAAK,YAAY;;;;UAI5C,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;gBAInC,SAAS;;;;CAIxB,CAAC"}

package/dist/esm/listbox-option/styles.js

@@ -1,13 +1,12 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { focusVisible } from '../utilities/style/focus';
-import { borderColorHover, contentFontSize, fontFamily, contentFontColorDisabled, fillColorSelected, fillColorSelectedHover, fillColorHover } from '../theme-provider/design-tokens';
+import { borderHoverColor, fillColorSelected, fillHoverSelectedColor, fillHoverColor, bodyFont, bodyDisabledFontColor } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}
 
     :host {
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
+        font: ${bodyFont};
         cursor: pointer;
         justify-content: left;
     }
@@ -23,11 +22,11 @@ export const styles = css `
     }
 
     :host(:hover.selected) {
-        background-color: ${fillColorSelectedHover};
+        background-color: ${fillHoverSelectedColor};
     }
 
     :host(:hover) {
-        background-color: ${fillColorHover};
+        background-color: ${fillHoverColor};
     }
 
     :host(:hover):host([disabled]) {
@@ -36,8 +35,8 @@ export const styles = css `
     }
 
     :host(:${focusVisible}) {
-        box-shadow: 0px 0px 0px 1px ${borderColorHover} inset;
-        outline: 1px solid ${borderColorHover};
+        box-shadow: 0px 0px 0px 1px ${borderHoverColor} inset;
+        outline: 1px solid ${borderHoverColor};
         outline-offset: -4px;
     }
 
@@ -48,7 +47,7 @@ export const styles = css `
     }
 
     :host([disabled]) {
-        color: ${contentFontColorDisabled};
+        color: ${bodyDisabledFontColor};
         cursor: default;
     }
 

package/dist/esm/listbox-option/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/listbox-option/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,wBAAwB,EACxB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACjB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;uBAGE,UAAU;qBACZ,eAAe;;;;;;;;;;;;4BAYR,iBAAiB;;;;4BAIjB,sBAAsB;;;;4BAItB,cAAc;;;;;;;;aAQ7B,YAAY;sCACa,gBAAgB;6BACzB,gBAAgB;;;;;;;4BAOjB,iBAAiB;;;;iBAI5B,wBAAwB;;;;;;;;CAQxC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/listbox-option/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACd,QAAQ,EACR,qBAAqB,EACxB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;;;;;;;;;4BAYI,iBAAiB;;;;4BAIjB,sBAAsB;;;;4BAItB,cAAc;;;;;;;;aAQ7B,YAAY;sCACa,gBAAgB;6BACzB,gBAAgB;;;;;;;4BAOjB,iBAAiB;;;;iBAI5B,qBAAqB;;;;;;;;CAQrC,CAAC"}

package/dist/esm/menu/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { applicationBackgroundColor, borderWidth, borderColor, groupLabelTextTransform, groupLabelFontColor, groupLabelFontFamily, groupLabelFontSize, groupLabelFontWeight, popupBorderColor, popupBoxShadowColor, labelHeight } from '../theme-provider/design-tokens';
+import { applicationBackgroundColor, borderWidth, borderColor, popupBorderColor, popupBoxShadowColor, groupHeaderFont, groupHeaderTextTransform, groupHeaderFontColor } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('grid')}
 
@@ -27,12 +27,9 @@ export const styles = css `
     }
     ::slotted(header) {
         display: flex;
-        font-family: ${groupLabelFontFamily};
-        font-size: ${groupLabelFontSize};
-        font-weight: ${groupLabelFontWeight};
-        line-height: ${labelHeight};
-        color: ${groupLabelFontColor};
-        text-transform: ${groupLabelTextTransform};
+        font: ${groupHeaderFont};
+        color: ${groupHeaderFontColor};
+        text-transform: ${groupHeaderTextTransform};
         padding-top: 4px;
         padding-bottom: 4px;
     }

package/dist/esm/menu/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACd,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;sBAGC,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;;;;kCAKrB,mBAAmB;;;;;;;;;;;sBAW/B,WAAW;;;;;uBAKV,oBAAoB;qBACtB,kBAAkB;uBAChB,oBAAoB;uBACpB,WAAW;iBACjB,mBAAmB;0BACV,uBAAuB;;;;CAIhD,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,wBAAwB,EACxB,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;sBAGC,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;;;;kCAKrB,mBAAmB;;;;;;;;;;;sBAW/B,WAAW;;;;;gBAKjB,eAAe;iBACd,oBAAoB;0BACX,wBAAwB;;;;CAIjD,CAAC"}

package/dist/esm/menu-item/styles.js

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { focusVisible } from '../utilities/style/focus';
-import { controlHeight, fontFamily, contentFontSize, fillColorSelected, fillColorHover, contentFontColor, borderColorHover, contentFontColorDisabled, iconSize } from '../theme-provider/design-tokens';
+import { controlHeight, fillColorSelected, fillHoverColor, bodyFontColor, borderHoverColor, iconSize, bodyFont, bodyDisabledFontColor } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('grid')}
 
@@ -18,24 +18,23 @@ export const styles = css `
         padding-right: 8px;
         margin: 0 0;
         white-space: nowrap;
-        color: ${contentFontColor};
+        color: ${bodyFontColor};
         fill: currentcolor;
         cursor: pointer;
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
+        font: ${bodyFont};
     }
     :host(${focusVisible}) {
-        outline: 2px solid ${borderColorHover};
+        outline: 2px solid ${borderHoverColor};
         outline-offset: -2px;
     }
     :host(:hover) {
-        background: ${fillColorHover};
+        background: ${fillHoverColor};
     }
     :host(:active) {
         background: ${fillColorSelected};
     }
     :host([disabled]) {
-        color: ${contentFontColorDisabled};
+        color: ${bodyDisabledFontColor};
         fill: currentcolor;
         cursor: default;
     }

package/dist/esm/menu-item/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,aAAa,EACb,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,wBAAwB,EACxB,QAAQ,EACX,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;kBAMH,aAAa;;;;;;;;;iBASd,gBAAgB;;;uBAGV,UAAU;qBACZ,eAAe;;YAExB,YAAY;6BACK,gBAAgB;;;;sBAIvB,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,wBAAwB;;;;;;;;iCAQR,QAAQ;;;;;;;;iBAQxB,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACxB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;kBAMH,aAAa;;;;;;;;;iBASd,aAAa;;;gBAGd,QAAQ;;YAEZ,YAAY;6BACK,gBAAgB;;;;sBAIvB,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,qBAAqB;;;;;;;;iCAQL,QAAQ;;;;;;;;iBAQxB,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC"}

package/dist/esm/nimble-components/src/button/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/theme-provider/design-token-names.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Design token names should follow the token naming convention:
+ * See: https://github.com/ni/nimble/blob/main/packages/nimble-components/CONTRIBUTING.md#token-naming
+ */
 import type * as TokensNamespace from './design-tokens';
 declare type TokenName = keyof typeof TokensNamespace;
 export declare const tokenNames: {

package/dist/esm/nimble-components/src/theme-provider/design-tokens.d.ts

@@ -1,42 +1,73 @@
-export declare const actionColorRgbPartial: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const actionRgbPartialColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const applicationBackgroundColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const headerBackgroundColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const sectionBackgroundColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const fillColorSelected: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const fillColorSelectedRgbPartial: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const fillColorSelectedHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const fillColorHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillSelectedRgbPartialColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillHoverSelectedColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillHoverColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const borderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const borderColorRgbPartial: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderRgbPartialColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const failColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const warningColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const passColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const borderColorHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderHoverColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const iconColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const popupBoxShadowColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const popupBorderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const controlHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const smallPadding: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const standardPadding: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const labelHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const borderWidth: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const iconSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const drawerWidth: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const fontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const groupLabelFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const drawerHeaderFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const contentFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const groupLabelFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const drawerHeaderFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const groupLabelFontWeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelFontWeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const groupLabelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const contentFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const buttonContentFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelFontColorDisabled: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelTextTransform: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const groupLabelTextTransform: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const contentFontColorDisabled: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const headlinePlus1Font: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const headlineFont: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const titlePlus2Font: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const titlePlus1Font: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const titleFont: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const subtitlePlus1Font: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const subtitleFont: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const linkStandardFont: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const placeholderFont: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const bodyEmphasizedFont: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const bodyFont: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupHeaderFont: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const controlLabelFont: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const buttonLabelFont: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const tooltipCaptionFont: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const headlinePlus1FontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const headlineFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const titlePlus2FontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const titlePlus1FontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const titleFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const subtitlePlus1FontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const subtitleFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const linkStandardFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const placeholderFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const bodyEmphasizedFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const bodyFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupHeaderFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const controlLabelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const buttonLabelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const tooltipCaptionFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const headlinePlus1DisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const headlineDisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const titlePlus2DisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const titlePlus1DisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const titleDisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const subtitlePlus1DisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const subtitleDisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const linkStandardDisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const placeholderDisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const bodyEmphasizedDisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const bodyDisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupHeaderDisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const controlLabelDisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const buttonLabelDisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const tooltipCaptionDisabledFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupHeaderTextTransform: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const smallDelay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const mediumDelay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const drawerAnimationDurationMs: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const largeDelay: import("@microsoft/fast-foundation").CSSDesignToken<number>;

package/dist/esm/number-field/styles.js

@@ -1,20 +1,19 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderColor, borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelectedRgbPartial, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay } from '../theme-provider/design-tokens';
+import { borderColor, borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillSelectedRgbPartialColor, iconSize, controlLabelFont, controlLabelFontColor, labelHeight, smallDelay, bodyFont } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-block')}
 
     :host {
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
+        font: ${bodyFont};
         outline: none;
         user-select: none;
-        color: ${contentFontColor};
+        color: ${bodyFontColor};
         height: calc(${labelHeight} + ${controlHeight});
     }
 
     :host([disabled]) {
-        color: ${contentFontColorDisabled};
+        color: ${bodyDisabledFontColor};
         cursor: default;
     }
 
@@ -24,8 +23,7 @@ export const styles = css `
         display: flex;
         flex-direction: row;
         border-radius: 0px;
-        font-family: ${fontFamily};
-        border-bottom: ${borderWidth} solid rgba(${borderColorRgbPartial}, 0.3);
+        border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
         padding-bottom: 1px;
         transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
     }
@@ -37,13 +35,13 @@ export const styles = css `
     }
 
     .root:hover {
-        border-bottom: 2px solid ${borderColorHover};
+        border-bottom: 2px solid ${borderHoverColor};
         padding-bottom: 0px;
     }
 
     :host([disabled]) .root,
     :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
+        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
         padding-bottom: 1px;
     }
 
@@ -67,12 +65,12 @@ export const styles = css `
     }
 
     .control::selection {
-        color: ${labelFontColor};
-        background: rgba(${fillColorSelectedRgbPartial}, 0.3);
+        color: ${controlLabelFontColor};
+        background: rgba(${fillSelectedRgbPartialColor}, 0.3);
     }
 
     .control::placeholder {
-        color: ${labelFontColor};
+        color: ${controlLabelFontColor};
     }
 
     .control:focus-within::placeholder {
@@ -80,17 +78,13 @@ export const styles = css `
     }
 
     .control[disabled]::placeholder {
-        color: ${contentFontColorDisabled};
+        color: ${bodyDisabledFontColor};
     }
 
     .label {
         display: flex;
-        color: ${labelFontColor};
-        font-family: ${labelFontFamily};
-        font-size: ${labelFontSize};
-        font-weight: ${labelFontWeight};
-        line-height: ${labelHeight};
-        text-transform: ${labelTextTransform};
+        color: ${controlLabelFontColor};
+        font: ${controlLabelFont};
     }
 
     .controls {