@ni/nimble-components 11.8.1 → 11.8.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/all-components-bundle.js +98 -164
  2. package/dist/all-components-bundle.js.map +1 -1
  3. package/dist/all-components-bundle.min.js +977 -1002
  4. package/dist/all-components-bundle.min.js.map +1 -1
  5. package/dist/esm/breadcrumb/styles.js +4 -6
  6. package/dist/esm/breadcrumb/styles.js.map +1 -1
  7. package/dist/esm/card-button/styles.js +4 -10
  8. package/dist/esm/card-button/styles.js.map +1 -1
  9. package/dist/esm/combobox/index.js +1 -0
  10. package/dist/esm/combobox/index.js.map +1 -1
  11. package/dist/esm/number-field/styles.js +1 -6
  12. package/dist/esm/number-field/styles.js.map +1 -1
  13. package/dist/esm/switch/styles.js +4 -6
  14. package/dist/esm/switch/styles.js.map +1 -1
  15. package/dist/esm/text-area/styles.js +1 -6
  16. package/dist/esm/text-area/styles.js.map +1 -1
  17. package/dist/esm/text-field/styles.js +5 -13
  18. package/dist/esm/text-field/styles.js.map +1 -1
  19. package/dist/esm/tooltip/styles.js +4 -11
  20. package/dist/esm/tooltip/styles.js.map +1 -1
  21. package/dist/esm/utilities/style/appearance.d.ts +2 -2
  22. package/dist/esm/utilities/style/appearance.js +3 -3
  23. package/dist/esm/utilities/style/appearance.js.map +1 -1
  24. package/dist/esm/utilities/style/multivalue-property-stylesheet-behavior.d.ts +37 -0
  25. package/dist/esm/utilities/style/multivalue-property-stylesheet-behavior.js +56 -0
  26. package/dist/esm/utilities/style/multivalue-property-stylesheet-behavior.js.map +1 -0
  27. package/dist/esm/utilities/style/theme.d.ts +10 -15
  28. package/dist/esm/utilities/style/theme.js +23 -55
  29. package/dist/esm/utilities/style/theme.js.map +1 -1
  30. package/package.json +1 -1
@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
3
  import { DigitalGreenDark, PowerGreen, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
4
4
  import { bodyEmphasizedFont, bodyFont, bodyFontColor } from '../theme-provider/design-tokens';
5
+ import { Theme } from '../theme-provider/types';
5
6
  import { hexToRgbaCssColor } from '../utilities/style/colors';
6
7
  import { themeBehavior } from '../utilities/style/theme';
7
8
  export const styles = css `
@@ -29,8 +30,7 @@ export const styles = css `
29
30
  ::slotted(*:not([href]):last-child) {
30
31
  font: ${bodyEmphasizedFont};
31
32
  }
32
- `.withBehaviors(themeBehavior(css `
33
- ${'' /* Light theme */}
33
+ `.withBehaviors(themeBehavior(Theme.light, css `
34
34
  :host {
35
35
  --ni-private-breadcrumb-link-active-font-color: ${DigitalGreenDark};
36
36
  }
@@ -38,8 +38,7 @@ export const styles = css `
38
38
  :host(.prominent-links) {
39
39
  --ni-private-breadcrumb-link-font-color: ${DigitalGreenDark};
40
40
  }
41
- `, css `
42
- ${'' /* Dark theme */}
41
+ `), themeBehavior(Theme.dark, css `
43
42
  :host {
44
43
  --ni-private-breadcrumb-link-active-font-color: ${PowerGreen};
45
44
  }
@@ -47,8 +46,7 @@ export const styles = css `
47
46
  :host(.prominent-links) {
48
47
  --ni-private-breadcrumb-link-font-color: ${PowerGreen};
49
48
  }
50
- `, css `
51
- ${'' /* Color theme */}
49
+ `), themeBehavior(Theme.color, css `
52
50
  :host {
53
51
  --ni-private-breadcrumb-link-active-font-color: ${hexToRgbaCssColor(White, 0.6)};
54
52
  }
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb/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,UAAU,EACV,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,kBAAkB,EAClB,QAAQ,EACR,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,QAAQ;mDAC2B,aAAa;;;;;;;;;0DASN,aAAa;;;;;;;;gBAQvD,kBAAkB;;CAEjC,CAAC,aAAa,CACP,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;kEAEgC,gBAAgB;;;;2DAIvB,gBAAgB;;SAElE,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;kEAEiC,UAAU;;;;2DAIjB,UAAU;;SAE5D,EACG,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;kEAEgC,iBAAiB,CACnE,KAAK,EACL,GAAG,CACN;;;;2DAI8C,UAAU;;SAE5D,CACA,CACJ,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb/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,UAAU,EACV,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,kBAAkB,EAClB,QAAQ,EACR,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,QAAQ;mDAC2B,aAAa;;;;;;;;;0DASN,aAAa;;;;;;;;gBAQvD,kBAAkB;;CAEjC,CAAC,aAAa,CACP,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;kEAEmD,gBAAgB;;;;2DAIvB,gBAAgB;;SAElE,CACA,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;kEAEmD,UAAU;;;;2DAIjB,UAAU;;SAE5D,CACA,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;kEAEmD,iBAAiB,CACnE,KAAK,EACL,GAAG,CACN;;;;2DAI8C,UAAU;;SAE5D,CACA,CACJ,CAAC"}
@@ -5,6 +5,7 @@ import { focusVisible } from '../utilities/style/focus';
5
5
  import { borderWidth, smallDelay, buttonLabelFont, buttonLabelFontColor, borderHoverColor } from '../theme-provider/design-tokens';
6
6
  import { themeBehavior } from '../utilities/style/theme';
7
7
  import { hexToRgbaCssColor } from '../utilities/style/colors';
8
+ import { Theme } from '../theme-provider/types';
8
9
  // prettier-ignore
9
10
  export const styles = css `
10
11
  ${display('inline-flex')}
@@ -114,10 +115,7 @@ export const styles = css `
114
115
  transition-duration: 0s;
115
116
  }
116
117
  }
117
- `
118
- .withBehaviors(themeBehavior(
119
- // Light theme
120
- css `
118
+ `.withBehaviors(themeBehavior(Theme.light, css `
121
119
  :host {
122
120
  --ni-private-card-button-box-shadow-hover-color: ${hexToRgbaCssColor(Black, 0.3)};
123
121
  --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(White, 0.3)};
@@ -125,9 +123,7 @@ css `
125
123
  --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(Black91, 0.2)};
126
124
  --ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(Black91, 0.6)};
127
125
  }
128
- `,
129
- // Dark theme
130
- css `
126
+ `), themeBehavior(Theme.dark, css `
131
127
  :host {
132
128
  --ni-private-card-button-box-shadow-hover-color: ${hexToRgbaCssColor(Black, 0.77)};
133
129
  --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(Black15, 0.07)};
@@ -135,9 +131,7 @@ css `
135
131
  --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(Black15, 0.2)};
136
132
  --ni-private-card-button-border-selected-color: ${Black15};
137
133
  }
138
- `,
139
- // Color theme
140
- css `
134
+ `), themeBehavior(Theme.color, css `
141
135
  :host {
142
136
  --ni-private-card-button-box-shadow-hover-color: ${hexToRgbaCssColor(White, 0.77)};
143
137
  --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(White, 0.2)};
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/card-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,KAAK,EACL,OAAO,EACP,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,oBAAoB;gBACrB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;kBAyBb,WAAW;;;;;;;iCAOI,UAAU;;;;;;;;cAQ7B,YAAY;kCACQ,WAAW,IAAI,gBAAgB;wBACzC,gBAAgB;mBACrB,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;gCAgBxB,YAAY;wBACpB,gBAAgB;;;;;;;gCAOR,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC3C;KACI,aAAa,CACV,aAAa;AACT,cAAc;AACd,GAAG,CAAA;;uEAEwD,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;uEAC7B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;wEAC5B,KAAK;oEACT,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;sEAC7B,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;;aAExF;AACD,aAAa;AACb,GAAG,CAAA;;uEAEwD,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;uEAC9B,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC;wEAC/B,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC;oEACpC,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;sEAC7B,OAAO;;aAEhE;AACD,cAAc;AACd,GAAG,CAAA;;uEAEwD,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;uEAC9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;wEAC5B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;oEACjC,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;sEAC3B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;aAEtF,CACJ,CACJ,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/card-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,KAAK,EACL,OAAO,EACP,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,oBAAoB;gBACrB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;kBAyBb,WAAW;;;;;;;iCAOI,UAAU;;;;;;;;cAQ7B,YAAY;kCACQ,WAAW,IAAI,gBAAgB;wBACzC,gBAAgB;mBACrB,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;gCAgBxB,YAAY;wBACpB,gBAAgB;;;;;;;gCAOR,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC3C,CAAC,aAAa,CACP,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;uEAEwD,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;uEAC7B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;wEAC5B,KAAK;oEACT,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;sEAC7B,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;;aAExF,CACJ,EAAE,aAAa,CACZ,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;uEAEwD,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;uEAC9B,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC;wEAC/B,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC;oEACpC,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;sEAC7B,OAAO;;aAEhE,CACJ,EAAE,aAAa,CACZ,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;uEAEwD,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;uEAC9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;wEAC5B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;oEACjC,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;sEAC3B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;aAEtF,CACJ,CACJ,CAAC"}
@@ -121,6 +121,7 @@ const nimbleCombobox = Combobox.compose({
121
121
  part="button"
122
122
  aria-haspopup="true"
123
123
  aria-expanded="${x => x.open}"
124
+ tabindex="-1"
124
125
  >
125
126
  <nimble-icon-arrow-expander-down
126
127
  slot="start"
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillSelectedRgbPartialColor, controlLabelFont, controlLabelFontColor, labelHeight, smallDelay, bodyFont, failColor, standardPadding, controlLabelDisabledFontColor } from '../theme-provider/design-tokens';
3
+ import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, controlLabelFont, controlLabelFontColor, labelHeight, smallDelay, bodyFont, failColor, standardPadding, controlLabelDisabledFontColor } from '../theme-provider/design-tokens';
4
4
  import { appearanceBehavior } from '../utilities/style/appearance';
5
5
  import { NumberFieldAppearance } from './types';
6
6
  import { styles as errorStyles } from '../patterns/error/styles';
@@ -119,11 +119,6 @@ export const styles = css `
119
119
  outline: none;
120
120
  }
121
121
 
122
- .control::selection {
123
- color: ${controlLabelFontColor};
124
- background: rgba(${fillSelectedRgbPartialColor}, 0.3);
125
- }
126
-
127
122
  .control::placeholder {
128
123
  color: ${controlLabelFontColor};
129
124
  }
@@ -1 +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,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,2BAA2B,EAC3B,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EACf,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;iCAWb,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;6BAIlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;;;;;;;4BAU1B,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;6BAwBX,eAAe;;;;;;;;;;;iBAW3B,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE,uKAAuK,CAAC,EAC5K;;;8BAG0B,eAAe;;;;;;;;UAQnC,aAAa,CAAC,iBAAiB;;;;;;;;;8BASX,eAAe;;CAE5C,CAAC,aAAa,CACH,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAEoB,WAAW;;;SAGzC,CACI,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAEsB,qBAAqB;;;;;uCAKvB,WAAW;;;;;;;;;yCAST,qBAAqB;;SAErD,CACI,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEa,WAAW;;;SAGlC,CACI,CACJ,CAAC"}
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,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EACf,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;iCAWb,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;6BAIlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;;;;;;;4BAU1B,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;6BAwBX,eAAe;;;;;;;;;;;iBAW3B,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE,uKAAuK,CAAC,EAC5K;;;8BAG0B,eAAe;;;;;;;;UAQnC,aAAa,CAAC,iBAAiB;;;;;;;;;8BASX,eAAe;;CAE5C,CAAC,aAAa,CACH,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAEoB,WAAW;;;SAGzC,CACI,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAEsB,qBAAqB;;;;;uCAKvB,WAAW;;;;;;;;;yCAST,qBAAqB;;SAErD,CACI,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEa,WAAW;;;SAGlC,CACI,CACJ,CAAC"}
@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
3
  import { Black15, Black7, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
4
4
  import { borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFont, buttonLabelFontColor, controlHeight, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, fillHoverColor, smallDelay } from '../theme-provider/design-tokens';
5
+ import { Theme } from '../theme-provider/types';
5
6
  import { hexToRgbaCssColor } from '../utilities/style/colors';
6
7
  import { focusVisible } from '../utilities/style/focus';
7
8
  import { themeBehavior } from '../utilities/style/theme';
@@ -143,8 +144,7 @@ export const styles = css `
143
144
  transition-duration: 0s;
144
145
  }
145
146
  }
146
- `.withBehaviors(themeBehavior(css `
147
- ${'' /* Light theme */}
147
+ `.withBehaviors(themeBehavior(Theme.light, css `
148
148
  :host {
149
149
  --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.07)};
150
150
  --ni-private-switch-indicator-background-color: ${White};
@@ -152,8 +152,7 @@ export const styles = css `
152
152
  --ni-private-switch-indicator-border-color: ${Black91};
153
153
  --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black91, 0.3)};
154
154
  }
155
- `, css `
156
- ${'' /* Dark theme */}
155
+ `), themeBehavior(Theme.dark, css `
157
156
  :host {
158
157
  --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black15, 0.07)};
159
158
  --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(Black91, 0.3)};
@@ -161,8 +160,7 @@ export const styles = css `
161
160
  --ni-private-switch-indicator-border-color: ${Black7};
162
161
  --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black7, 0.3)};
163
162
  }
164
- `, css `
165
- ${'' /* Color theme */}
163
+ `), themeBehavior(Theme.color, css `
166
164
  :host {
167
165
  --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(White, 0.07)};
168
166
  --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(White, 0.1)};
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,eAAe,EACf,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,eAAe;iBACd,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;gCAKV,UAAU;;;;;;;;;;;;;;;;;;kBAkBxB,WAAW;;;;;uBAKN,WAAW,eAAe,gBAAgB;;;;;;;kBAO/C,WAAW;;;;YAIjB,YAAY;kBACN,WAAW,UAAU,gBAAgB;;;;;;;;;8BASzB,UAAU;;;;;;;;;;;8BAWV,UAAU;;;;;;;;;;;;;CAavC,CAAC,aAAa,CACP,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;iEAE+B,iBAAiB,CAClE,OAAO,EACP,IAAI,CACP;kEACqD,KAAK;2EACI,iBAAiB,CAC5E,KAAK,EACL,GAAG,CACN;8DACiD,OAAO;uEACE,iBAAiB,CACxE,OAAO,EACP,GAAG,CACN;;SAEJ,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;iEAEgC,iBAAiB,CAClE,OAAO,EACP,IAAI,CACP;kEACqD,iBAAiB,CACnE,OAAO,EACP,GAAG,CACN;2EAC8D,iBAAiB,CAC5E,OAAO,EACP,GAAG,CACN;8DACiD,MAAM;uEACG,iBAAiB,CACxE,MAAM,EACN,GAAG,CACN;;SAEJ,EACG,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;iEAE+B,iBAAiB,CAClE,KAAK,EACL,IAAI,CACP;kEACqD,iBAAiB,CACnE,KAAK,EACL,GAAG,CACN;2EAC8D,iBAAiB,CAC5E,KAAK,EACL,GAAG,CACN;8DACiD,KAAK;uEACI,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;;SAEJ,CACA,CACJ,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,eAAe,EACf,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,eAAe;iBACd,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;gCAKV,UAAU;;;;;;;;;;;;;;;;;;kBAkBxB,WAAW;;;;;uBAKN,WAAW,eAAe,gBAAgB;;;;;;;kBAO/C,WAAW;;;;YAIjB,YAAY;kBACN,WAAW,UAAU,gBAAgB;;;;;;;;;8BASzB,UAAU;;;;;;;;;;;8BAWV,UAAU;;;;;;;;;;;;;CAavC,CAAC,aAAa,CACP,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEkD,iBAAiB,CAClE,OAAO,EACP,IAAI,CACP;kEACqD,KAAK;2EACI,iBAAiB,CAC5E,KAAK,EACL,GAAG,CACN;8DACiD,OAAO;uEACE,iBAAiB,CACxE,OAAO,EACP,GAAG,CACN;;SAEJ,CACA,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;iEAEkD,iBAAiB,CAClE,OAAO,EACP,IAAI,CACP;kEACqD,iBAAiB,CACnE,OAAO,EACP,GAAG,CACN;2EAC8D,iBAAiB,CAC5E,OAAO,EACP,GAAG,CACN;8DACiD,MAAM;uEACG,iBAAiB,CACxE,MAAM,EACN,GAAG,CACN;;SAEJ,CACA,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEkD,iBAAiB,CAClE,KAAK,EACL,IAAI,CACP;kEACqD,iBAAiB,CACnE,KAAK,EACL,GAAG,CACN;2EAC8D,iBAAiB,CAC5E,KAAK,EACL,GAAG,CACN;8DACiD,KAAK;uEACI,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;;SAEJ,CACA,CACJ,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { borderRgbPartialColor, borderHoverColor, borderWidth, fillSelectedRgbPartialColor, smallDelay, bodyFontColor, bodyDisabledFontColor, controlLabelFont, controlLabelFontColor, bodyFont, controlLabelDisabledFontColor } from '../theme-provider/design-tokens';
3
+ import { borderRgbPartialColor, borderHoverColor, borderWidth, smallDelay, bodyFontColor, bodyDisabledFontColor, controlLabelFont, controlLabelFontColor, bodyFont, controlLabelDisabledFontColor } from '../theme-provider/design-tokens';
4
4
  import { appearanceBehavior } from '../utilities/style/appearance';
5
5
  import { TextAreaAppearance } from './types';
6
6
  export const styles = css `
@@ -70,11 +70,6 @@ export const styles = css `
70
70
  box-shadow: none;
71
71
  }
72
72
 
73
- .control::selection {
74
- color: ${controlLabelFontColor};
75
- background: rgba(${fillSelectedRgbPartialColor}, 0.3);
76
- }
77
-
78
73
  .control::placeholder {
79
74
  color: ${controlLabelFontColor};
80
75
  }
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/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,gBAAgB,EAChB,WAAW,EACX,2BAA2B,EAC3B,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,QAAQ;;;iBAGP,aAAa;;;;;;iBAMb,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;kBAc5B,WAAW;;iCAEI,UAAU,YAAY,UAAU;;;;;;;;;;;wBAWzC,gBAAgB;sCACF,gBAAgB;;;;wBAI9B,gBAAgB;;;;;;;;6BAQX,qBAAqB;;;;;iBAKjC,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;CAoB7C;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;yCAE0B,qBAAqB;;;aAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;;;;;6CASrB,qBAAqB;;aAErD,CACJ,CACJ,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/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,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,QAAQ;;;iBAGP,aAAa;;;;;;iBAMb,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;kBAc5B,WAAW;;iCAEI,UAAU,YAAY,UAAU;;;;;;;;;;;wBAWzC,gBAAgB;sCACF,gBAAgB;;;;wBAI9B,gBAAgB;;;;;;;;6BAQX,qBAAqB;;;;;iBAKjC,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;CAoB7C;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;yCAE0B,qBAAqB;;;aAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;;;;;6CASrB,qBAAqB;;aAErD,CACJ,CACJ,CAAC"}
@@ -1,6 +1,7 @@
1
+ /* eslint-disable @typescript-eslint/indent */
1
2
  import { css } from '@microsoft/fast-element';
2
3
  import { display } from '@microsoft/fast-foundation';
3
- import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, fillSelectedRgbPartialColor, labelHeight, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor, standardPadding } from '../theme-provider/design-tokens';
4
+ import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, labelHeight, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor, standardPadding } from '../theme-provider/design-tokens';
4
5
  import { appearanceBehavior } from '../utilities/style/appearance';
5
6
  import { TextFieldAppearance } from './types';
6
7
  import { Theme } from '../theme-provider/types';
@@ -133,11 +134,6 @@ export const styles = css `
133
134
  text-overflow: clip;
134
135
  }
135
136
 
136
- .control::selection {
137
- color: ${controlLabelFontColor};
138
- background: rgba(${fillSelectedRgbPartialColor}, 0.3);
139
- }
140
-
141
137
  .control::placeholder {
142
138
  color: ${controlLabelFontColor};
143
139
  }
@@ -234,17 +230,13 @@ export const styles = css `
234
230
  :host([readonly]) .root {
235
231
  border-color: transparent;
236
232
  }
237
- `), themeBehavior(css `
238
- ${'' /* Light theme */}
233
+ `), themeBehavior(Theme.light, css `
239
234
  .control::-ms-reveal {
240
235
  filter: invert(0%);
241
236
  }
242
- `, css `
243
- ${'' /* Dark theme */}
237
+ `), themeBehavior([Theme.dark, Theme.color], css `
244
238
  .control::-ms-reveal {
245
239
  filter: invert(100%);
246
240
  }
247
- `,
248
- // Color theme
249
- Theme.dark));
241
+ `));
250
242
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"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,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;oBAClC,eAAe;mBAChB,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;;;;;;;;;UAY5C,CAAA,yCAA0C,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyC5C;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACC,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAEgB,WAAW;;;SAGzC,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAEkB,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAES,WAAW;;;SAGlC,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAES,WAAW;iCACV,WAAW;;;;;;SAMnC,CACQ,EACD,aAAa,CACT,GAAG,CAAA;cACT,EAAE,CAAC,iBAAiB;;;;SAIzB,EACW,GAAG,CAAA;cACT,EAAE,CAAC,gBAAgB;;;;SAIxB;AACW,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;oBAClC,eAAe;mBAChB,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;;;;;;;;;UAY5C,CAAA,yCAA0C,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyC5C;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC"}
@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
3
  import { BannerFail100DarkUi, Black15, Black85, Black91, ForestGreen, Information100DarkUi, Information100LightUi, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
4
4
  import { tooltipCaptionFont, tooltipCaptionFontColor, popupBoxShadowColor, borderWidth, standardPadding, smallPadding } from '../theme-provider/design-tokens';
5
+ import { Theme } from '../theme-provider/types';
5
6
  import { hexToRgbaCssColor } from '../utilities/style/colors';
6
7
  import { themeBehavior } from '../utilities/style/theme';
7
8
  export const styles = css `
@@ -45,11 +46,7 @@ export const styles = css `
45
46
  display: flex;
46
47
  flex: 0 0 auto;
47
48
  }
48
- `.withBehaviors(
49
- /* Local Theme Behaviors for tooltip borders and backgrounds */
50
- themeBehavior(
51
- // Light Theme
52
- css `
49
+ `.withBehaviors(themeBehavior(Theme.light, css `
53
50
  :host(.fail) {
54
51
  --ni-private-tooltip-border-color: ${BannerFail100DarkUi};
55
52
  --ni-private-tooltip-background-color: ${White};
@@ -59,9 +56,7 @@ css `
59
56
  --ni-private-tooltip-border-color: ${Information100LightUi};
60
57
  --ni-private-tooltip-background-color: ${White};
61
58
  }
62
- `,
63
- // Dark Theme
64
- css `
59
+ `), themeBehavior(Theme.dark, css `
65
60
  :host {
66
61
  --ni-private-tooltip-border-color: ${hexToRgbaCssColor(Black15, 0.3)};
67
62
  --ni-private-tooltip-background-color: ${Black85};
@@ -74,9 +69,7 @@ css `
74
69
  :host(.fail) {
75
70
  --ni-private-tooltip-border-color: ${BannerFail100DarkUi};
76
71
  }
77
- `,
78
- // Color Theme
79
- css `
72
+ `), themeBehavior(Theme.color, css `
80
73
  .anchored-region {
81
74
  background-color: ${ForestGreen};
82
75
  }
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,WAAW,EACX,eAAe,EACf,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,kBAAkB;iBACjB,uBAAuB;;6CAEK,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;iDAC3B,OAAO;;;;;;;kCAOtB,mBAAmB;;kBAEnC,WAAW;;;6BAGA,eAAe;8BACd,eAAe;uBACtB,YAAY;;;;;;;;;;;;;;;;;;;CAmBlC,CAAC,aAAa;AACX,+DAA+D;AAC3D,aAAa;AACb,cAAc;AACV,GAAG,CAAA;;qDAEsC,mBAAmB;yDACf,KAAK;;;;qDAIT,qBAAqB;yDACjB,KAAK;;SAErD;AACG,aAAa;AACb,GAAG,CAAA;;qDAEsC,iBAAiB,CACtD,OAAO,EACP,GAAG,CACN;yDAC4C,OAAO;;;;qDAIX,oBAAoB;;;;qDAIpB,mBAAmB;;SAE/D;AACG,cAAc;AACd,GAAG,CAAA;;oCAEqB,WAAW;;;;qDAIM,iBAAiB,CACtD,KAAK,EACL,GAAG,CACN;yDAC4C,iBAAiB,CAC1D,KAAK,EACL,IAAI,CACP;;;;qDAIwC,KAAK;;;;qDAIL,KAAK;;;;;;SAMjD,CACA,CACJ,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,WAAW,EACX,eAAe,EACf,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,kBAAkB;iBACjB,uBAAuB;;6CAEK,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;iDAC3B,OAAO;;;;;;;kCAOtB,mBAAmB;;kBAEnC,WAAW;;;6BAGA,eAAe;8BACd,eAAe;uBACtB,YAAY;;;;;;;;;;;;;;;;;;;CAmBlC,CAAC,aAAa,CACP,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;qDAEsC,mBAAmB;yDACf,KAAK;;;;qDAIT,qBAAqB;yDACjB,KAAK;;SAErD,CACA,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;qDAEsC,iBAAiB,CACtD,OAAO,EACP,GAAG,CACN;yDAC4C,OAAO;;;;qDAIX,oBAAoB;;;;qDAIpB,mBAAmB;;SAE/D,CACA,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEqB,WAAW;;;;qDAIM,iBAAiB,CACtD,KAAK,EACL,GAAG,CACN;yDAC4C,iBAAiB,CAC1D,KAAK,EACL,IAAI,CACP;;;;qDAIwC,KAAK;;;;qDAIL,KAAK;;;;;;SAMjD,CACA,CACJ,CAAC"}
@@ -3,9 +3,9 @@ import type { Behavior, ElementStyles } from '@microsoft/fast-element';
3
3
  * Behavior that will conditionally apply a stylesheet based on the element's
4
4
  * appearance property
5
5
  *
6
- * @param value - The value of the appearance property
6
+ * @param value - The value or values of the appearance property
7
7
  * @param styles - The styles to be applied when condition matches
8
8
  *
9
9
  * @public
10
10
  */
11
- export declare function appearanceBehavior<AppearanceType>(value: AppearanceType, styles: ElementStyles): Behavior;
11
+ export declare function appearanceBehavior<AppearanceType>(value: AppearanceType | AppearanceType[], styles: ElementStyles): Behavior;
@@ -1,14 +1,14 @@
1
- import { PropertyStyleSheetBehavior } from '@microsoft/fast-foundation';
1
+ import { MultivaluePropertyStyleSheetBehavior } from './multivalue-property-stylesheet-behavior';
2
2
  /**
3
3
  * Behavior that will conditionally apply a stylesheet based on the element's
4
4
  * appearance property
5
5
  *
6
- * @param value - The value of the appearance property
6
+ * @param value - The value or values of the appearance property
7
7
  * @param styles - The styles to be applied when condition matches
8
8
  *
9
9
  * @public
10
10
  */
11
11
  export function appearanceBehavior(value, styles) {
12
- return new PropertyStyleSheetBehavior('appearance', value, styles);
12
+ return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
13
13
  }
14
14
  //# sourceMappingURL=appearance.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../../../src/utilities/style/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAGxE;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAC9B,KAAqB,EACrB,MAAqB;IAErB,OAAO,IAAI,0BAA0B,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC"}
1
+ {"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../../../src/utilities/style/appearance.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oCAAoC,EAAE,MAAM,2CAA2C,CAAC;AAEjG;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAC9B,KAAwC,EACxC,MAAqB;IAErB,OAAO,IAAI,oCAAoC,CAC3C,YAAY,EACZ,KAAK,EACL,MAAM,CACT,CAAC;AACN,CAAC"}
@@ -0,0 +1,37 @@
1
+ import { Behavior, ElementStyles, FASTElement } from '@microsoft/fast-element';
2
+ /**
3
+ * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
4
+ * styles are applied while the property matches and that styles are not applied if the property does
5
+ * not match.
6
+ *
7
+ * @public
8
+ */
9
+ export declare class MultivaluePropertyStyleSheetBehavior<PropertyType> implements Behavior {
10
+ private readonly propertyName;
11
+ private readonly value;
12
+ private readonly styles;
13
+ /**
14
+ * Constructs a {@link MultivaluePropertyStyleSheetBehavior} instance.
15
+ * @param propertyName - The property name to operate from.
16
+ * @param value - The property value or values to operate from.
17
+ * @param styles - The styles to coordinate with the property.
18
+ */
19
+ constructor(propertyName: string, value: PropertyType | PropertyType[], styles: ElementStyles);
20
+ /**
21
+ * Binds the behavior to the element.
22
+ * @param elementInstance - The element for which the property is applied.
23
+ */
24
+ bind(elementInstance: FASTElement): void;
25
+ /**
26
+ * Unbinds the behavior from the element.
27
+ * @param source - The element for which the behavior is unbinding.
28
+ */
29
+ unbind(source: FASTElement & HTMLElement): void;
30
+ /**
31
+ * Change event for the provided element.
32
+ * @param source - the element for which to attach or detach styles.
33
+ * @param key - the key to lookup to know if the element already has the styles
34
+ * @internal
35
+ */
36
+ handleChange(source: FASTElement, key: string): void;
37
+ }
@@ -0,0 +1,56 @@
1
+ import { Observable } from '@microsoft/fast-element';
2
+ /**
3
+ * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
4
+ * styles are applied while the property matches and that styles are not applied if the property does
5
+ * not match.
6
+ *
7
+ * @public
8
+ */
9
+ export class MultivaluePropertyStyleSheetBehavior {
10
+ /**
11
+ * Constructs a {@link MultivaluePropertyStyleSheetBehavior} instance.
12
+ * @param propertyName - The property name to operate from.
13
+ * @param value - The property value or values to operate from.
14
+ * @param styles - The styles to coordinate with the property.
15
+ */
16
+ constructor(propertyName, value, styles) {
17
+ this.propertyName = propertyName;
18
+ this.value = value;
19
+ this.styles = styles;
20
+ }
21
+ /**
22
+ * Binds the behavior to the element.
23
+ * @param elementInstance - The element for which the property is applied.
24
+ */
25
+ bind(elementInstance) {
26
+ Observable.getNotifier(elementInstance).subscribe(this, this.propertyName);
27
+ this.handleChange(elementInstance, this.propertyName);
28
+ }
29
+ /**
30
+ * Unbinds the behavior from the element.
31
+ * @param source - The element for which the behavior is unbinding.
32
+ */
33
+ unbind(source) {
34
+ Observable.getNotifier(source).unsubscribe(this, this.propertyName);
35
+ source.$fastController.removeStyles(this.styles);
36
+ }
37
+ /**
38
+ * Change event for the provided element.
39
+ * @param source - the element for which to attach or detach styles.
40
+ * @param key - the key to lookup to know if the element already has the styles
41
+ * @internal
42
+ */
43
+ handleChange(source, key) {
44
+ // @ts-expect-error Accessing arbitrary property of an element
45
+ const currentValue = source[key];
46
+ if (Array.isArray(this.value)
47
+ ? this.value.includes(currentValue)
48
+ : this.value === currentValue) {
49
+ source.$fastController.addStyles(this.styles);
50
+ }
51
+ else {
52
+ source.$fastController.removeStyles(this.styles);
53
+ }
54
+ }
55
+ }
56
+ //# sourceMappingURL=multivalue-property-stylesheet-behavior.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"multivalue-property-stylesheet-behavior.js","sourceRoot":"","sources":["../../../../src/utilities/style/multivalue-property-stylesheet-behavior.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,UAAU,EACb,MAAM,yBAAyB,CAAC;AAEjC;;;;;;GAMG;AACH,MAAM,OAAO,oCAAoC;IAE7C;;;;;OAKG;IACH,YACqB,YAAoB,EACpB,KAAoC,EACpC,MAAqB;QAFrB,iBAAY,GAAZ,YAAY,CAAQ;QACpB,UAAK,GAAL,KAAK,CAA+B;QACpC,WAAM,GAAN,MAAM,CAAe;IACvC,CAAC;IAEJ;;;OAGG;IACI,IAAI,CAAC,eAA4B;QACpC,UAAU,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,SAAS,CAC7C,IAAI,EACJ,IAAI,CAAC,YAAY,CACpB,CAAC;QACF,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1D,CAAC;IAED;;;OAGG;IACI,MAAM,CAAC,MAAiC;QAC3C,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACpE,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrD,CAAC;IAED;;;;;OAKG;IACI,YAAY,CAAC,MAAmB,EAAE,GAAW;QAChD,8DAA8D;QAC9D,MAAM,YAAY,GAAiB,MAAM,CAAC,GAAG,CAAiB,CAAC;QAC/D,IACI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;YACrB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC;YACnC,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,YAAY,EACnC;YACE,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACjD;aAAM;YACH,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACpD;IACL,CAAC;CACJ"}
@@ -1,16 +1,13 @@
1
- import { Behavior, ElementStyles, FASTElement } from '@microsoft/fast-element';
1
+ import type { Behavior, ElementStyles, FASTElement } from '@microsoft/fast-element';
2
2
  import type { Theme } from '../../theme-provider/types';
3
- export declare type LightStyle = ElementStyles | null;
4
- export declare type DarkStyleOrAlias = ElementStyles | null | Extract<Theme, 'light'>;
5
- export declare type ColorStyleOrAlias = ElementStyles | null | Extract<Theme, 'light' | 'dark'>;
6
3
  /**
7
4
  * Behavior to conditionally apply theme-based stylesheets.
8
5
  */
9
6
  declare class ThemeStyleSheetBehavior implements Behavior {
10
- private readonly themeStyles;
7
+ private readonly theme;
8
+ private readonly styles;
11
9
  private readonly cache;
12
- constructor(lightStyle: LightStyle, darkStyleOrAlias: DarkStyleOrAlias, colorStyleOrAlias: ColorStyleOrAlias);
13
- private static resolveTheme;
10
+ constructor(theme: Theme | Theme[], styles: ElementStyles);
14
11
  /**
15
12
  * @internal
16
13
  */
@@ -23,20 +20,18 @@ declare class ThemeStyleSheetBehavior implements Behavior {
23
20
  /**
24
21
  * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
25
22
  * the behavior will use the nearest ThemeProvider's 'theme' design system value.
26
- * To re-use the same style for multiple themes you can specify the name of an already
27
- * defined theme to alias them together.
28
23
  *
29
24
  * @public
30
25
  * @example
31
26
  * ```ts
32
27
  * css`
33
- * // ...
34
- * `.withBehaviors(new ThemeStyleSheetBehavior(
35
- * css`:host { ... Theme.light style... }`),
36
- * null, // No style needed for Theme.dark style
37
- * Theme.light // For the Theme.color style, re-use the previously set Theme.light style
28
+ * // ...
29
+ * `.withBehaviors(
30
+ * themeBehavior(Theme.light, css` ... `),
31
+ * // Apply style for both dark and color theme
32
+ * themeBehavior([Theme.dark, Theme.color], css` ... `)
38
33
  * )
39
34
  * ```
40
35
  */
41
- export declare const themeBehavior: (lightStyle: LightStyle, darkStyleOrAlias: DarkStyleOrAlias, colorStyleOrAlias: ColorStyleOrAlias) => ThemeStyleSheetBehavior;
36
+ export declare const themeBehavior: (theme: Theme | Theme[], styles: ElementStyles) => ThemeStyleSheetBehavior;
42
37
  export {};