@ni/nimble-components 1.0.0-beta.12 → 1.0.0-beta.123

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

@@ -1,66 +1,142 @@
 import { css } from '@microsoft/fast-element';
-import { borderColor, borderColorHover, fillColorSelectedRgb, fontFamily, fontColor, labelFontFamily, labelFontSize } from '../theme-provider/design-tokens';
+import { display } from '@microsoft/fast-foundation';
+import { borderColorRgb, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, failColor, fillColorSelectedRgb, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, passwordRevealFilter, smallDelay } from '../theme-provider/design-tokens';
 export const styles = css `
-:host {
-    display: inline-block;
-    font-family: ${fontFamily};
-    outline: none;
-    user-select: none;
-    color: ${fontColor};
-}
-
-.root {
-    box-sizing: border-box;
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    border-radius: 0px;
-    font-family: ${fontFamily};
-    border-bottom: 2px solid ${borderColor};
-}
-
-.root:hover{
-    border-bottom: 2px solid ${borderColorHover};
-}
-
-.control {
-    -webkit-appearance: none;
-    font: inherit;
-    background: transparent;
-    border: 0;
-    color: inherit;
-    height: 28px;
-    width: 100%;
-    margin-top: auto;
-    margin-bottom: auto;
-    border: none;
-}
-
-.control:hover,
-.control:focus,
-.control:disabled,
-.control:active {
-    outline: none;
-}
-
-.control::selection{
-    color: ${fontColor};
-    background: rgba(${fillColorSelectedRgb}, 0.3);;
-}
-
-.control::placeholder {
-    color: ${fontColor};
-    opacity: 0.5;
-}
-
-.control:focus-within::placeholder{
-    opacity: 1;
-}
-
-.label {
-    font-family: ${labelFontFamily};
-    font-size: ${labelFontSize};
-    line-height: 16px;
-    text-transform: uppercase;
-}`;
+    ${display('inline-block')}
+
+    :host {
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        outline: none;
+        user-select: none;
+        color: ${contentFontColor};
+        height: calc(${labelHeight} + ${controlHeight});
+    }
+
+    :host([disabled]) {
+        color: ${contentFontColorDisabled};
+    }
+
+    .root {
+        box-sizing: border-box;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        border-radius: 0px;
+        font-family: ${fontFamily};
+        border-bottom: ${borderWidth} solid rgba(${borderColorRgb}, 0.3);
+        padding-bottom: 1px;
+        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
+        align-items: flex-end;
+    }
+
+    @media (prefers-reduced-motion) {
+        .root {
+            transition-duration: 0s;
+        }
+    }
+
+    .root:hover {
+        border-bottom: 2px solid ${borderColorHover};
+        padding-bottom: 0px;
+    }
+
+    :host(.invalid) .root {
+        border-bottom: ${borderWidth} solid ${failColor};
+    }
+
+    :host(.invalid) .root:hover {
+        border-bottom: 2px solid ${failColor};
+        padding-bottom: 0px;
+    }
+
+    :host([disabled]) .root,
+    :host([disabled]) .root:hover {
+        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
+        padding-bottom: 1px;
+    }
+
+    :host([readonly]) .root,
+    :host([readonly]) .root:hover {
+        border: none;
+    }
+
+    .control {
+        -webkit-appearance: none;
+        font: inherit;
+        background: transparent;
+        color: inherit;
+        height: 28px;
+        width: 100%;
+        margin-top: auto;
+        margin-bottom: auto;
+        border: none;
+    }
+
+    .control::-ms-reveal {
+        filter: ${passwordRevealFilter};
+    }
+
+    .control:hover,
+    .control:focus,
+    .control:disabled,
+    .control:active {
+        outline: none;
+    }
+
+    .control::selection {
+        color: ${labelFontColor};
+        background: rgba(${fillColorSelectedRgb}, 0.3);
+    }
+
+    .control::placeholder {
+        color: ${labelFontColor};
+    }
+
+    .control:not([readonly]):focus-within::placeholder {
+        opacity: 1;
+    }
+
+    .control[readonly] {
+        cursor: default;
+    }
+
+    .control[disabled]::placeholder {
+        color: ${contentFontColorDisabled};
+    }
+
+    .label {
+        display: flex;
+        color: ${labelFontColor};
+        font-family: ${labelFontFamily};
+        font-size: ${labelFontSize};
+        font-weight: ${labelFontWeight};
+        line-height: ${labelHeight};
+        text-transform: ${labelTextTransform};
+    }
+
+    :host [part='end'] {
+        display: none;
+    }
+
+    :host(.invalid) [part='end'] {
+        align-self: center;
+        display: inline-flex;
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+
+    :host(.invalid) [part='end'] svg {
+        height: ${iconSize};
+        width: ${iconSize};
+    }
+
+    :host(.invalid) [part='end'] path {
+        fill: ${failColor};
+    }
+
+    :host([disabled]) [part='end'] path {
+        fill: ${contentFontColorDisabled};
+    }
+`;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAE7J,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;mBAGN,UAAU;;;aAGhB,SAAS;;;;;;;;;mBASH,UAAU;+BACE,WAAW;;;;+BAIX,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;aAwBlC,SAAS;uBACC,oBAAoB;;;;aAI9B,SAAS;;;;;;;;;mBASH,eAAe;iBACjB,aAAa;;;EAG5B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,UAAU,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,oBAAoB,EACpB,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;;;;;;;;;uBASlB,UAAU;yBACR,WAAW,eAAe,cAAc;;oCAE7B,UAAU,oBAAoB,UAAU;;;;;;;;;;;mCAWzC,gBAAgB;;;;;yBAK1B,WAAW,UAAU,SAAS;;;;mCAIpB,SAAS;;;;;;yBAMnB,WAAW,UAAU,wBAAwB;;;;;;;;;;;;;;;;;;;;;;kBAsBpD,oBAAoB;;;;;;;;;;;iBAWrB,cAAc;2BACJ,oBAAoB;;;;iBAI9B,cAAc;;;;;;;;;;;;iBAYd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;;;;;;;;;;;;kBAe1B,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,wBAAwB;;CAEvC,CAAC"}

package/dist/esm/text-field/types.d.ts

@@ -0,0 +1,3 @@
+import { TextFieldType } from '@microsoft/fast-foundation';
+export declare type TextFieldTypeAttribute = 'email' | 'password' | 'tel' | 'text' | 'url';
+export { TextFieldType };

package/dist/esm/text-field/types.js

@@ -0,0 +1,3 @@
+import { TextFieldType } from '@microsoft/fast-foundation';
+export { TextFieldType };
+//# sourceMappingURL=types.js.map

package/dist/esm/text-field/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -1,17 +1,48 @@
 import { DesignToken } from '@microsoft/fast-foundation';
-import { NimbleTheme } from './themes';
+import { NimbleTheme } from './types';
 export declare const theme: DesignToken<NimbleTheme>;
+export declare const actionColorRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const applicationBackgroundColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const fillColorSelected: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const fillColorSelectedRgb: 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 borderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const borderColorRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const failColorTheme: (element: HTMLElement) => string;
+export declare const failColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const warningColorTheme: (element: HTMLElement) => string;
+export declare const warningColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const passColorTheme: (element: HTMLElement) => string;
+export declare const passColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const borderColorHover: 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 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 fontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const fontColorDisabled: 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 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 passwordRevealFilter: import("@microsoft/fast-foundation").CSSDesignToken<string>;

package/dist/esm/theme-provider/design-tokens.js

@@ -1,7 +1,7 @@
 import { DesignToken } from '@microsoft/fast-foundation';
 import hexRgb from 'hex-rgb';
-import { Black91, Black85, Black15, White, Enterprise, Selection100, BodyFamily, OverlineCapitalizedFamily } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
-import { NimbleTheme } from './themes';
+import { Black91, Black88, Black85, Black15, Black75, White, Enterprise, Selection100, SlLegacyBlue, Fail100LightUi, SmallDelay, MediumDelay, Fail100DarkUi, BodyFamily, BodySize, ControlLabel1Family, ControlLabel1Size, ControlLabel1Weight, Warning100LightUi, Warning100DarkUi, Pass100LightUi, Pass100DarkUi, Title2Size, Title2Family, GroupLabel1Family, GroupLabel1Size, GroupLabel1Weight, LegacyContentFamily } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { NimbleTheme } from './types';
 function rgbString(hexValue) {
     const { red, green, blue } = hexRgb(hexValue);
     return `${red}, ${green}, ${blue}`;
@@ -11,8 +11,11 @@ function hexToRgba(hexValue, alpha) {
     return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 }
 const { create } = DesignToken;
-export const theme = create({ name: 'theme', cssCustomPropertyName: null }).withDefault(NimbleTheme.Light);
-function getColorForTheme(element, lightThemeColor, darkThemeColor, colorThemeColor) {
+export const theme = create({
+    name: 'theme',
+    cssCustomPropertyName: null
+}).withDefault(NimbleTheme.Light);
+function getColorForTheme(element, lightThemeColor, darkThemeColor, colorThemeColor, legacyBlueThemeColor) {
     switch (theme.getValueFor(element)) {
         case NimbleTheme.Light:
             return lightThemeColor;
@@ -20,6 +23,8 @@ function getColorForTheme(element, lightThemeColor, darkThemeColor, colorThemeCo
             return darkThemeColor;
         case NimbleTheme.Color:
             return colorThemeColor;
+        case NimbleTheme.LegacyBlue:
+            return legacyBlueThemeColor;
         default:
             return lightThemeColor;
     }
@@ -32,28 +37,136 @@ function getDefaultLineColorForTheme(element) {
             return Black15;
         case NimbleTheme.Color:
             return White;
+        case NimbleTheme.LegacyBlue:
+            return Black91;
         default:
             return Black91;
     }
 }
+function getDefaultFontColorForTheme(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.Light:
+            return Black91;
+        case NimbleTheme.Dark:
+            return Black15;
+        case NimbleTheme.Color:
+            return White;
+        case NimbleTheme.LegacyBlue:
+            return Black75;
+        default:
+            return Black91;
+    }
+}
+function getFontForTheme(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.LegacyBlue:
+            return `${LegacyContentFamily}`;
+        default:
+            return `${BodyFamily}`;
+    }
+}
+function getLabelFontForTheme(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.LegacyBlue:
+            return `${LegacyContentFamily}`;
+        default:
+            return `${ControlLabel1Family}, ${BodyFamily}`;
+    }
+}
+function getGroupLabelFontForTheme(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.LegacyBlue:
+            return `${LegacyContentFamily}`;
+        default:
+            return `${GroupLabel1Family}, ${BodyFamily}`;
+    }
+}
+function getGroupLabelTextTransform(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.LegacyBlue:
+            return 'none';
+        default:
+            return 'uppercase';
+    }
+}
+function getLabelTextTransform(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.LegacyBlue:
+            return 'none';
+        default:
+            return 'none';
+    }
+}
+function getLabelTextSize(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.LegacyBlue:
+            return '13px';
+        default:
+            return ControlLabel1Size;
+    }
+}
+function getPasswordRevealFilter(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.Color:
+        case NimbleTheme.Dark:
+            return 'invert(100%)';
+        default:
+            return 'invert(0%)';
+    }
+}
+const fillColorSelectedTheme = (element) => getColorForTheme(element, Selection100, Selection100, White, SlLegacyBlue);
+const fillColorHoverTheme = (element) => getColorForTheme(element, Black91, Black15, White, SlLegacyBlue);
 // Color Tokens
-export const applicationBackgroundColor = create('application-background-color').withDefault((element) => getColorForTheme(element, White, Black85, Enterprise));
-const fillColorSelectedTheme = (element) => getColorForTheme(element, Selection100, Selection100, White);
+export const actionColorRgb = create('action-color-rgb').withDefault((element) => rgbString(getColorForTheme(element, Black91, Black15, White, SlLegacyBlue)));
+export const applicationBackgroundColor = create('application-background-color').withDefault((element) => getColorForTheme(element, White, Black85, Enterprise, White));
 export const fillColorSelected = create('fill-color-selected').withDefault((element) => hexToRgba(fillColorSelectedTheme(element), 0.3));
 export const fillColorSelectedRgb = create('fill-color-selected-rgb').withDefault((element) => rgbString(fillColorSelectedTheme(element)));
-export const borderColor = create('border-color').withDefault((element) => (getDefaultLineColorForTheme(element)));
-export const borderColorRgb = create('border-color-rgb').withDefault((element) => (rgbString(getDefaultLineColorForTheme(element))));
-export const borderColorHover = create('border-color-hover').withDefault((element) => getColorForTheme(element, Selection100, Selection100, White));
+export const fillColorSelectedHover = create('fill-color-selected-hover').withDefault((element) => hexToRgba(fillColorSelectedTheme(element), 0.15));
+export const fillColorHover = create('fill-color-hover').withDefault((element) => hexToRgba(fillColorHoverTheme(element), 0.1));
+export const borderColor = create('border-color').withDefault((element) => getDefaultLineColorForTheme(element));
+export const borderColorRgb = create('border-color-rgb').withDefault((element) => rgbString(getDefaultLineColorForTheme(element)));
+export const failColorTheme = (element) => getColorForTheme(element, Fail100LightUi, Fail100DarkUi, Fail100DarkUi, Fail100LightUi);
+export const failColor = create('fail-color').withDefault((element) => failColorTheme(element));
+export const warningColorTheme = (element) => getColorForTheme(element, Warning100LightUi, Warning100DarkUi, Warning100DarkUi, Warning100LightUi);
+export const warningColor = create('warning-color').withDefault((element) => warningColorTheme(element));
+export const passColorTheme = (element) => getColorForTheme(element, Pass100LightUi, Pass100DarkUi, Pass100DarkUi, Pass100LightUi);
+export const passColor = create('pass-color').withDefault((element) => passColorTheme(element));
+export const borderColorHover = create('border-color-hover').withDefault((element) => getColorForTheme(element, Selection100, Selection100, White, hexToRgba(SlLegacyBlue, 0.9)));
+export const popupBoxShadowColor = create('popup-box-shadow-color').withDefault((element) => hexToRgba(getColorForTheme(element, Black75, Black85, Black85, Black75), 0.3));
+export const popupBorderColor = create('popup-border-color').withDefault((element) => hexToRgba(getColorForTheme(element, Black91, Black15, White, Black91), 0.3));
 // Component Sizing Tokens
 export const controlHeight = create('control-height').withDefault('32px');
 export const standardPadding = create('standard-padding').withDefault('16px');
+export const labelHeight = create('label-height').withDefault('16px');
+export const borderWidth = create('border-width').withDefault('1px');
+export const iconSize = create('icon-size').withDefault('16px');
+export const drawerWidth = create('drawer-width').withDefault('784px');
 // Font Family Tokens
-export const fontFamily = create('font-family').withDefault(BodyFamily);
-export const labelFontFamily = create('label-font-family').withDefault(`${OverlineCapitalizedFamily}, ${BodyFamily}`);
+export const fontFamily = create('font-family').withDefault((element) => getFontForTheme(element));
+export const labelFontFamily = create('label-font-family').withDefault((element) => getLabelFontForTheme(element));
+export const groupLabelFontFamily = create('group-label-font-family').withDefault((element) => getGroupLabelFontForTheme(element));
+export const drawerHeaderFontFamily = create('drawer-header-font-family').withDefault(Title2Family);
 // Font Sizing Tokens
-export const labelFontSize = create('label-font-size').withDefault('11px');
-export const contentFontSize = create('content-font-size').withDefault('14px');
+export const labelFontSize = create('label-font-size').withDefault((element) => getLabelTextSize(element));
+export const contentFontSize = create('content-font-size').withDefault(BodySize);
+export const groupLabelFontSize = create('group-label-font-size').withDefault(GroupLabel1Size);
+export const drawerHeaderFontSize = create('drawer-header-font-size').withDefault(Title2Size);
+// Font Weight Tokens
+export const groupLabelFontWeight = create('group-label-font-weight').withDefault(GroupLabel1Weight);
+export const labelFontWeight = create('label-font-weight').withDefault(ControlLabel1Weight);
 // Font Color Tokens
-export const fontColor = create('label-font-color').withDefault((element) => (getDefaultLineColorForTheme(element)));
-export const fontColorDisabled = create('font-color-disabled').withDefault((element) => (hexToRgba(getDefaultLineColorForTheme(element), 0.3)));
+export const labelFontColor = create('label-font-color').withDefault((element) => hexToRgba(getDefaultFontColorForTheme(element), 0.6));
+export const groupLabelFontColor = create('group-label-font-color').withDefault((element) => getDefaultFontColorForTheme(element));
+export const contentFontColor = create('content-font-color').withDefault((element) => getColorForTheme(element, Black91, Black15, White, Black88));
+export const buttonContentFontColor = create('button-content-font-color').withDefault((element) => getColorForTheme(element, Black91, Black15, White, SlLegacyBlue));
+export const labelFontColorDisabled = create('label-font-color-disabled').withDefault((element) => hexToRgba(getDefaultLineColorForTheme(element), 0.3));
+export const labelTextTransform = create('label-text-transform').withDefault((element) => getLabelTextTransform(element));
+export const groupLabelTextTransform = create('group-label-text-transform').withDefault((element) => getGroupLabelTextTransform(element));
+export const contentFontColorDisabled = create('content-font-color-disabled').withDefault((element) => hexToRgba(getColorForTheme(element, Black91, Black15, White, Black88), 0.3));
+// Animation Tokens
+export const smallDelay = create('small-delay').withDefault(SmallDelay);
+export const mediumDelay = create('medium-delay').withDefault(MediumDelay);
+export const drawerAnimationDurationMs = create('drawer-animation-duration-ms').withDefault(250);
+// Filter Tokens
+export const passwordRevealFilter = create('password-reveal-filter').withDefault((element) => getPasswordRevealFilter(element));
 //# sourceMappingURL=design-tokens.js.map

package/dist/esm/theme-provider/design-tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-tokens.js","sourceRoot":"","sources":["../../../src/theme-provider/design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,MAAM,MAAM,SAAS,CAAC;AAC7B,OAAO,EACH,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,EACL,UAAU,EACV,YAAY,EACZ,UAAU,EACV,yBAAyB,EAC5B,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,SAAS,SAAS,CAAC,QAAgB;IAC/B,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC9C,OAAO,GAAG,GAAG,KAAK,KAAK,KAAK,IAAI,EAAE,CAAC;AACvC,CAAC;AAED,SAAS,SAAS,CAAC,QAAgB,EAAE,KAAa;IAC9C,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC9C,OAAO,QAAQ,GAAG,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,GAAG,CAAC;AACvD,CAAC;AAED,MAAM,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC;AAE/B,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAc,EAAE,IAAI,EAAE,OAAO,EAAE,qBAAqB,EAAE,IAAI,EAAE,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAExH,SAAS,gBAAgB,CAAC,OAAoB,EAAE,eAAuB,EAAE,cAAsB,EAAE,eAAuB;IACpH,QAAQ,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE;QAChC,KAAK,WAAW,CAAC,KAAK;YAClB,OAAO,eAAe,CAAC;QAC3B,KAAK,WAAW,CAAC,IAAI;YACjB,OAAO,cAAc,CAAC;QAC1B,KAAK,WAAW,CAAC,KAAK;YAClB,OAAO,eAAe,CAAC;QAC3B;YACI,OAAO,eAAe,CAAC;KAC9B;AACL,CAAC;AAED,SAAS,2BAA2B,CAAC,OAAoB;IACrD,QAAQ,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE;QAChC,KAAK,WAAW,CAAC,KAAK;YAClB,OAAO,OAAO,CAAC;QACnB,KAAK,WAAW,CAAC,IAAI;YACjB,OAAO,OAAO,CAAC;QACnB,KAAK,WAAW,CAAC,KAAK;YAClB,OAAO,KAAK,CAAC;QACjB;YACI,OAAO,OAAO,CAAC;KACtB;AACL,CAAC;AAED,eAAe;AACf,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAS,8BAA8B,CAAC,CAAC,WAAW,CAAC,CAAC,OAAoB,EAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;AACtL,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAU,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;AAC9H,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAS,qBAAqB,CAAC,CAAC,WAAW,CAAC,CAAC,OAAoB,EAAE,EAAE,CAAC,SAAS,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;AAC9J,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAS,yBAAyB,CAAC,CAAC,WAAW,CAAC,CAAC,OAAoB,EAAE,EAAE,CAAC,SAAS,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAChK,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAS,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC,OAAoB,EAAE,EAAE,CAAC,CAAC,2BAA2B,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AACxI,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAS,kBAAkB,CAAC,CAAC,WAAW,CAAC,CAAC,OAAoB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,2BAA2B,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1J,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAS,oBAAoB,CAAC,CAAC,WAAW,CAAC,CAAC,OAAoB,EAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;AAEzK,0BAA0B;AAC1B,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAS,gBAAgB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AAClF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAS,kBAAkB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AAEtF,qBAAqB;AACrB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAS,aAAa,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAS,mBAAmB,CAAC,CAAC,WAAW,CAAC,GAAG,yBAAyB,KAAK,UAAU,EAAE,CAAC,CAAC;AAE9H,qBAAqB;AACrB,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAS,iBAAiB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AACnF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAS,mBAAmB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AAEvF,oBAAoB;AACpB,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAS,kBAAkB,CAAC,CAAC,WAAW,CAAC,CAAC,OAAoB,EAAE,EAAE,CAAC,CAAC,2BAA2B,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAC1I,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAS,qBAAqB,CAAC,CAAC,WAAW,CAAC,CAAC,OAAoB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,2BAA2B,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"design-tokens.js","sourceRoot":"","sources":["../../../src/theme-provider/design-tokens.ts"],"names":[],"mappings":"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"}

package/dist/esm/theme-provider/index.d.ts

@@ -1 +1,17 @@
-export {};
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { NimbleTheme } from './types';
+export type { NimbleThemeProvider };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-theme-provider': NimbleThemeProvider;
+    }
+}
+/**
+ * The NimbleThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
+ * the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
+ * @internal
+ */
+declare class NimbleThemeProvider extends FoundationElement {
+    theme: NimbleTheme;
+    themeChanged(_prev: NimbleTheme | undefined, next: NimbleTheme | undefined): void;
+}

package/dist/esm/theme-provider/index.js

@@ -1,49 +1,35 @@
 import { __decorate } from "tslib";
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
-import { attr, css, html, } from '@microsoft/fast-element';
+import { attr } from '@microsoft/fast-element';
+import { template } from './template';
+import { styles } from './styles';
 import { theme } from './design-tokens';
-function designToken(token) {
-    return (source, key) => {
-        source[`${key}Changed`] = function keyChanged(_prev, next) {
-            if (next !== undefined && next !== null) {
-                token.setValueFor(this, next);
-            }
-            else {
-                token.deleteValueFor(this);
-            }
-        };
-    };
-}
 /**
- * The NimbleThemeProvider implementation
+ * The NimbleThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
+ * the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
  * @internal
  */
 class NimbleThemeProvider extends FoundationElement {
-    theme;
+    themeChanged(_prev, next) {
+        if (next !== undefined && next !== null) {
+            theme.setValueFor(this, next);
+        }
+        else {
+            theme.deleteValueFor(this);
+        }
+    }
 }
 __decorate([
     attr({
-        attribute: 'theme',
-    }),
-    designToken(theme)
+        attribute: 'theme'
+    })
 ], NimbleThemeProvider.prototype, "theme", void 0);
-const styles = css `
-    :host {
-        display: inline-block;
-    }`;
-const template = html `
-    <slot></slot>
-    `;
-/**
-A function that returns a registration for configuring the component with a DesignSystem. *
- * @public
- * @remarks
- * Generates HTML Element: \<nimble-theme-provider\>
- */
 const nimbleDesignSystemProvider = NimbleThemeProvider.compose({
     baseName: 'theme-provider',
     styles,
     template
 });
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDesignSystemProvider());
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleDesignSystemProvider());
 //# sourceMappingURL=index.js.map

package/dist/esm/theme-provider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme-provider/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAiC,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC5G,OAAO,EACH,IAAI,EACJ,GAAG,EACH,IAAI,GACP,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAGxC,SAAS,WAAW,CAAI,KAAqB;IACzC,OAAO,CAAC,MAA2B,EAAE,GAAW,EAAQ,EAAE;QACtD,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG,SAAS,UAAU,CAEzC,KAAoB,EACpB,IAAmB;YAEnB,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,EAAE;gBACrC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,IAA2B,CAAC,CAAC;aACxD;iBAAM;gBACH,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;aAC9B;QACL,CAAC,CAAC;IACN,CAAC,CAAC;AACN,CAAC;AAED;;;GAGG;AACH,MAAM,mBAAoB,SAAQ,iBAAiB;IAKxC,KAAK,CAAc;CAC7B;AADG;IAJC,IAAI,CAAC;QACF,SAAS,EAAE,OAAO;KACrB,CAAC;IACD,WAAW,CAAC,KAAK,CAAC;kDACO;AAG9B,MAAM,MAAM,GAAG,GAAG,CAAA;;;MAGZ,CAAC;AAEP,MAAM,QAAQ,GAAG,IAAI,CAAA;;KAEhB,CAAC;AAEN;;;;;GAKG;AACH,MAAM,0BAA0B,GAAG,mBAAmB,CAAC,OAAO,CAAC;IAC3D,QAAQ,EAAE,gBAAgB;IAC1B,MAAM;IACN,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,0BAA0B,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme-provider/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EAEZ,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAWxC;;;;GAIG;AACH,MAAM,mBAAoB,SAAQ,iBAAiB;IAMxC,YAAY,CACf,KAA8B,EAC9B,IAA6B;QAE7B,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,EAAE;YACrC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,IAAqC,CAAC,CAAC;SAClE;aAAM;YACH,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;SAC9B;IACL,CAAC;CACJ;AAZG;IAHC,IAAI,CAAC;QACF,SAAS,EAAE,OAAO;KACrB,CAAC;kDACyB;AAc/B,MAAM,0BAA0B,GAAG,mBAAmB,CAAC,OAAO,CAAC;IAC3D,QAAQ,EAAE,gBAAgB;IAC1B,MAAM;IACN,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,0BAA0B,EAAE,CAAC,CAAC"}

package/dist/esm/theme-provider/styles.d.ts

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

package/dist/esm/theme-provider/styles.js

@@ -0,0 +1,7 @@
+import { css } from '@microsoft/fast-element';
+export const styles = css `
+    :host {
+        display: contents;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/theme-provider/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/theme-provider/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC"}

package/dist/esm/theme-provider/template.d.ts

@@ -0,0 +1,2 @@
+import type { NimbleThemeProvider } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<NimbleThemeProvider, any>;

package/dist/esm/theme-provider/template.js

@@ -0,0 +1,3 @@
+import { html } from '@microsoft/fast-element';
+export const template = html `<slot></slot>`;
+//# sourceMappingURL=template.js.map

package/dist/esm/theme-provider/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/theme-provider/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAqB,eAAe,CAAC"}

package/dist/esm/theme-provider/types.d.ts

@@ -0,0 +1,7 @@
+export declare type NimbleThemeAttribute = 'light' | 'dark' | 'color' | 'legacy-blue';
+export declare enum NimbleTheme {
+    Light = "light",
+    Dark = "dark",
+    Color = "color",
+    LegacyBlue = "legacy-blue"
+}