@ni/nimble-components 2.1.3 → 3.2.0

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 {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;;;;;;uBAUlB,UAAU;yBACR,WAAW,eAAe,qBAAqB;;oCAEpC,UAAU,oBAAoB,UAAU;;;;;;;;;;mCAUzC,gBAAgB;;;;;;yBAM1B,WAAW,UAAU,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;iBAwBrD,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;;;;;iBAQd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;;;;;;;;;;;;;;;;;kBAoB1B,QAAQ;iBACT,QAAQ;gBACT,WAAW;;CAE1B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,2BAA2B,EAC3B,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,QAAQ,EACX,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;;;;iBAIpC,qBAAqB;;;;;;;;;;yBAUb,WAAW,eAAe,qBAAqB;;oCAEpC,UAAU,oBAAoB,UAAU;;;;;;;;;;mCAUzC,gBAAgB;;;;;;yBAM1B,WAAW,UAAU,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;iBAwBlD,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;;;;;;;;;;;;;;;;;kBAoBd,QAAQ;iBACT,QAAQ;gBACT,WAAW;;CAE1B,CAAC"}

package/dist/esm/patterns/button/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 { actionColorRgbPartial, borderColorHover, borderColorRgbPartial, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, iconColor, smallDelay, standardPadding } from '../../theme-provider/design-tokens';
+import { actionRgbPartialColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, controlHeight, fillColorSelected, iconColor, smallDelay, standardPadding } from '../../theme-provider/design-tokens';
 import { appearanceBehavior } from '../../utilities/style/appearance';
 import { ButtonAppearance } from './types';
 export const styles = css `
@@ -10,9 +10,8 @@ export const styles = css `
     :host {
         background-color: transparent;
         height: ${controlHeight};
-        color: ${buttonContentFontColor};
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
+        color: ${buttonLabelFontColor};
+        font: ${buttonLabelFont};
         cursor: pointer;
         outline: none;
         border: none;
@@ -27,7 +26,7 @@ export const styles = css `
     }
 
     :host([disabled]) {
-        color: ${contentFontColorDisabled};
+        color: ${buttonLabelDisabledFontColor};
         cursor: default;
     }
 
@@ -65,13 +64,13 @@ export const styles = css `
     }
 
     .control:hover {
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
         outline: none;
     }
 
     .control${focusVisible} {
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
-        outline: ${borderWidth} solid ${borderColorHover};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        outline: ${borderWidth} solid ${borderHoverColor};
         outline-offset: -4px;
     }
 
@@ -98,7 +97,7 @@ export const styles = css `
     }
 
     slot[name='start']::slotted(*) {
-        ${iconColor.cssCustomProperty}: ${buttonContentFontColor};
+        ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
     }
 
     :host([disabled]) slot[name='start']::slotted(*) {
@@ -113,17 +112,17 @@ export const styles = css `
     .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
                 .control {
                     background-color: transparent;
-                    border-color: rgba(${actionColorRgbPartial}, 0.3);
+                    border-color: rgba(${actionRgbPartialColor}, 0.3);
                 }
 
                 .control:hover {
                     background-color: transparent;
-                    border-color: ${borderColorHover};
+                    border-color: ${borderHoverColor};
                 }
 
                 .control${focusVisible} {
                     background-color: transparent;
-                    border-color: ${borderColorHover};
+                    border-color: ${borderHoverColor};
                 }
 
                 .control:active {
@@ -133,7 +132,7 @@ export const styles = css `
 
                 .control[disabled] {
                     background-color: transparent;
-                    border-color: rgba(${borderColorRgbPartial}, 0.2);
+                    border-color: rgba(${borderRgbPartialColor}, 0.2);
                 }
             `), appearanceBehavior(ButtonAppearance.Ghost, css `
                 .control {
@@ -143,12 +142,12 @@ export const styles = css `
 
                 .control:hover {
                     background-color: transparent;
-                    border-color: ${borderColorHover};
+                    border-color: ${borderHoverColor};
                 }
 
                 .control${focusVisible} {
                     background-color: transparent;
-                    border-color: ${borderColorHover};
+                    border-color: ${borderHoverColor};
                 }
 
                 .control:active {
@@ -162,18 +161,18 @@ export const styles = css `
                 }
             `), appearanceBehavior(ButtonAppearance.Block, css `
                 .control {
-                    background-color: rgba(${borderColorRgbPartial}, 0.1);
+                    background-color: rgba(${borderRgbPartialColor}, 0.1);
                     border-color: transparent;
                 }
 
                 .control:hover {
-                    background-color: rgba(${borderColorRgbPartial}, 0.1);
-                    border-color: ${borderColorHover};
+                    background-color: rgba(${borderRgbPartialColor}, 0.1);
+                    border-color: ${borderHoverColor};
                 }
 
                 .control${focusVisible} {
-                    background-color: rgba(${borderColorRgbPartial}, 0.1);
-                    border-color: ${borderColorHover};
+                    background-color: rgba(${borderRgbPartialColor}, 0.1);
+                    border-color: ${borderHoverColor};
                 }
 
                 .control:active {
@@ -182,7 +181,7 @@ export const styles = css `
                 }
 
                 .control[disabled] {
-                    background-color: rgba(${borderColorRgbPartial}, 0.1);
+                    background-color: rgba(${borderRgbPartialColor}, 0.1);
                     border-color: transparent;
                 }
             `));

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/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,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,sBAAsB;uBAChB,UAAU;qBACZ,eAAe;;;;;UAK1B;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2B9C,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;;;;;;;;CAU/D;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,qBAAqB;;;;;oCAK1B,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;yCAKZ,qBAAqB;;aAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;;;aAOxC,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;6CAKrB,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;6CAIR,qBAAqB;;;aAGrD,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/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,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,oBAAoB;gBACrB,eAAe;;;;;UAKrB;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,4BAA4B;;;;;;;;kBAQ3B,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2B9C,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;CAU7D;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,qBAAqB;;;;;oCAK1B,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;yCAKZ,qBAAqB;;aAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;;;aAOxC,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;6CAKrB,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;6CAIR,qBAAqB;;;aAGrD,CACJ,CACJ,CAAC"}

package/dist/esm/select/styles.js

@@ -1,13 +1,13 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { applicationBackgroundColor, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fontFamily, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay } from '../theme-provider/design-tokens';
+import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-flex')}
 
     :host {
         box-sizing: border-box;
-        color: ${contentFontColor};
-        font-family: ${fontFamily};
+        color: ${bodyFontColor};
+        font: ${bodyFont};
         height: ${controlHeight};
         position: relative;
         user-select: none;
@@ -47,11 +47,9 @@ export const styles = css `
         box-sizing: border-box;
         cursor: pointer;
         display: flex;
-        font-size: ${contentFontSize};
-        font-family: inherit;
         min-height: 100%;
         width: 100%;
-        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
+        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
         background-color: transparent;
         padding-left: 8px;
         padding-bottom: 1px;
@@ -62,21 +60,21 @@ export const styles = css `
     }
 
     :host(.open:not(:hover)) .control {
-        border-bottom: ${borderWidth} solid ${borderColorHover};
+        border-bottom: ${borderWidth} solid ${borderHoverColor};
         transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
     }
 
     :host(:hover) .control {
-        border-bottom: 2px solid ${borderColorHover};
+        border-bottom: 2px solid ${borderHoverColor};
         padding-bottom: 0px;
         transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
     }
 
     :host([disabled]) .control,
     :host([disabled]) .control:hover {
-        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
+        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
         padding-bottom: 1px;
-        color: ${contentFontColorDisabled};
+        color: ${bodyDisabledFontColor};
     }
 
     :host([open][position='above']) .listbox {
@@ -118,11 +116,11 @@ export const styles = css `
     .indicator slot[name='indicator'] svg {
         width: ${iconSize};
         height: ${iconSize};
-        fill: ${contentFontColor};
+        fill: ${bodyFontColor};
     }
 
     :host([disabled]) .indicator slot[name='indicator'] svg {
-        fill: ${contentFontColorDisabled};
+        fill: ${bodyDisabledFontColor};
     }
 
     slot[name='listbox'] {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/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,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,gBAAgB;uBACV,UAAU;kBACf,aAAa;;;;;;;;;;;;;;;;UAgBrB;AACE;;;GAGG,CAAC,EACR;+CACuC,aAAa;;;kCAG1B,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;qBAajC,eAAe;;;;yBAIX,WAAW,UAAU,wBAAwB;;;;;;;;;;;yBAW7C,WAAW,UAAU,gBAAgB;oCAC1B,UAAU,oBAAoB,UAAU;;;;mCAIzC,gBAAgB;;oCAEf,UAAU,oBAAoB,UAAU;;;;;yBAKnD,WAAW,UAAU,wBAAwB;;iBAErD,wBAAwB;;;;;;;;;;;;;;kBAcvB,aAAa;;;;oBAIX,aAAa;;;;;;;;;;;;;;;;;;;;;;iBAsBhB,QAAQ;kBACP,QAAQ;gBACV,gBAAgB;;;;gBAIhB,wBAAwB;;;;;;;;;;;;;;;;;;;;;CAqBvC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/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,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;;;;;;;;;;UAgBrB;AACE;;;GAGG,CAAC,EACR;+CACuC,aAAa;;;kCAG1B,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;yBAe7B,WAAW,UAAU,qBAAqB;;;;;;;;;;;yBAW1C,WAAW,UAAU,gBAAgB;oCAC1B,UAAU,oBAAoB,UAAU;;;;mCAIzC,gBAAgB;;oCAEf,UAAU,oBAAoB,UAAU;;;;;yBAKnD,WAAW,UAAU,qBAAqB;;iBAElD,qBAAqB;;;;;;;;;;;;;;kBAcpB,aAAa;;;;oBAIX,aAAa;;;;;;;;;;;;;;;;;;;;;;iBAsBhB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC"}

package/dist/esm/tab/styles.js

@@ -1,18 +1,17 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorHover, fontFamily, mediumDelay, standardPadding } from '../theme-provider/design-tokens';
+import { bodyFont, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillHoverColor, mediumDelay, standardPadding } from '../theme-provider/design-tokens';
 import { focusVisible } from '../utilities/style/focus';
 export const styles = css `
     ${display('inline-flex')}
 
     :host {
         box-sizing: border-box;
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
+        font: ${bodyFont};
         height: ${controlHeight};
         padding: calc(${standardPadding} / 2) ${standardPadding}
             calc(${standardPadding} / 2 - ${borderWidth});
-        color: ${contentFontColor};
+        color: ${bodyFontColor};
         align-items: center;
         justify-content: center;
         cursor: pointer;
@@ -21,7 +20,7 @@ export const styles = css `
     }
 
     :host(:hover) {
-        background-color: ${fillColorHover};
+        background-color: ${fillHoverColor};
     }
 
     :host(:focus) {
@@ -30,7 +29,7 @@ export const styles = css `
 
     :host(${focusVisible}) {
         outline: none;
-        box-shadow: 0 calc(${borderWidth} * -1) ${borderColorHover} inset;
+        box-shadow: 0 calc(${borderWidth} * -1) ${borderHoverColor} inset;
         transition: box-shadow ${mediumDelay} ease-in-out;
     }
 
@@ -46,7 +45,7 @@ export const styles = css `
 
     :host([disabled]) {
         cursor: default;
-        color: ${contentFontColorDisabled};
+        color: ${bodyDisabledFontColor};
         background: none;
     }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab/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,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EACX,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;uBAIL,UAAU;qBACZ,eAAe;kBAClB,aAAa;wBACP,eAAe,SAAS,eAAe;mBAC5C,eAAe,UAAU,WAAW;iBACtC,gBAAgB;;;;UAIvB,CAAA,oDAAqD,EAAE;qCAC5B,WAAW;;;;4BAIpB,cAAc;;;;;;;YAO9B,YAAY;;6BAEK,WAAW,UAAU,gBAAgB;iCACjC,WAAW;;;;gBAI5B,YAAY;;;;;;;;;;;iBAWX,wBAAwB;;;CAGxC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab/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,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,WAAW,EACX,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,QAAQ;kBACN,aAAa;wBACP,eAAe,SAAS,eAAe;mBAC5C,eAAe,UAAU,WAAW;iBACtC,aAAa;;;;UAIpB,CAAA,oDAAqD,EAAE;qCAC5B,WAAW;;;;4BAIpB,cAAc;;;;;;;YAO9B,YAAY;;6BAEK,WAAW,UAAU,gBAAgB;iCACjC,WAAW;;;;gBAI5B,YAAY;;;;;;;;;;;iBAWX,qBAAqB;;;CAGrC,CAAC"}

package/dist/esm/tab-panel/styles.js

@@ -1,14 +1,13 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { contentFontColor, contentFontSize, fontFamily, standardPadding } from '../theme-provider/design-tokens';
+import { bodyFont, bodyFontColor, standardPadding } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('block')}
 
     :host {
         box-sizing: border-box;
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
-        color: ${contentFontColor};
+        font: ${bodyFont};
+        color: ${bodyFontColor};
         padding-top: ${standardPadding};
     }
 `;

package/dist/esm/tab-panel/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab-panel/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,eAAe,EACf,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;uBAIC,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;uBACV,eAAe;;CAErC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab-panel/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,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;gBAIN,QAAQ;iBACP,aAAa;uBACP,eAAe;;CAErC,CAAC"}

package/dist/esm/tabs/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderColorHover, borderWidth, smallDelay } from '../theme-provider/design-tokens';
+import { borderHoverColor, borderWidth, smallDelay } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('grid')}
 
@@ -21,7 +21,7 @@ export const styles = css `
     .activeIndicator {
         grid-row: 2;
         height: calc(${borderWidth} * 2);
-        background-color: ${borderColorHover};
+        background-color: ${borderHoverColor};
     }
 
     .activeIndicatorTransition {

package/dist/esm/tabs-toolbar/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderColorRgbPartial, borderWidth, contentFontColor, contentFontSize, controlHeight, fontFamily, standardPadding } from '../theme-provider/design-tokens';
+import { bodyFont, bodyFontColor, borderRgbPartialColor, borderWidth, controlHeight, standardPadding } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}
 
@@ -8,16 +8,15 @@ export const styles = css `
         align-items: center;
         height: ${controlHeight};
         box-sizing: border-box;
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
-        color: ${contentFontColor};
+        font: ${bodyFont};
+        color: ${bodyFontColor};
     }
 
     .separator {
         display: inline-block;
         height: 24px;
         border-left: calc(${borderWidth} * 2) solid
-            rgba(${borderColorRgbPartial}, 0.3);
+            rgba(${borderRgbPartialColor}, 0.3);
         margin: calc(${standardPadding} / 4) calc(${standardPadding} / 2);
     }
 `;

package/dist/esm/tabs-toolbar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;;uBAER,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;;;;;;4BAML,WAAW;mBACpB,qBAAqB;uBACjB,eAAe,cAAc,eAAe;;CAElE,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/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,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;;gBAEf,QAAQ;iBACP,aAAa;;;;;;4BAMF,WAAW;mBACpB,qBAAqB;uBACjB,eAAe,cAAc,eAAe;;CAElE,CAAC"}