@ni/nimble-components 2.1.3 → 3.0.0

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 (46) hide show
  1. package/dist/esm/checkbox/styles.js +11 -13
  2. package/dist/esm/checkbox/styles.js.map +1 -1
  3. package/dist/esm/drawer/index.js +2 -2
  4. package/dist/esm/drawer/index.js.map +1 -1
  5. package/dist/esm/drawer/styles.js +4 -6
  6. package/dist/esm/drawer/styles.js.map +1 -1
  7. package/dist/esm/icon-base/styles.js +1 -2
  8. package/dist/esm/icon-base/styles.js.map +1 -1
  9. package/dist/esm/listbox-option/styles.js +7 -8
  10. package/dist/esm/listbox-option/styles.js.map +1 -1
  11. package/dist/esm/menu/styles.js +4 -7
  12. package/dist/esm/menu/styles.js.map +1 -1
  13. package/dist/esm/menu-item/styles.js +6 -7
  14. package/dist/esm/menu-item/styles.js.map +1 -1
  15. package/dist/esm/nimble-components/src/theme-provider/design-token-names.d.ts +4 -0
  16. package/dist/esm/nimble-components/src/theme-provider/design-tokens.d.ts +56 -25
  17. package/dist/esm/number-field/styles.js +13 -19
  18. package/dist/esm/number-field/styles.js.map +1 -1
  19. package/dist/esm/patterns/button/styles.js +20 -21
  20. package/dist/esm/patterns/button/styles.js.map +1 -1
  21. package/dist/esm/select/styles.js +10 -12
  22. package/dist/esm/select/styles.js.map +1 -1
  23. package/dist/esm/tab/styles.js +6 -7
  24. package/dist/esm/tab/styles.js.map +1 -1
  25. package/dist/esm/tab-panel/styles.js +3 -4
  26. package/dist/esm/tab-panel/styles.js.map +1 -1
  27. package/dist/esm/tabs/styles.js +2 -2
  28. package/dist/esm/tabs-toolbar/styles.js +4 -5
  29. package/dist/esm/tabs-toolbar/styles.js.map +1 -1
  30. package/dist/esm/text-area/styles.js +18 -23
  31. package/dist/esm/text-area/styles.js.map +1 -1
  32. package/dist/esm/text-field/styles.js +27 -32
  33. package/dist/esm/text-field/styles.js.map +1 -1
  34. package/dist/esm/theme-provider/design-token-comments.js +73 -42
  35. package/dist/esm/theme-provider/design-token-comments.js.map +1 -1
  36. package/dist/esm/theme-provider/design-token-names.d.ts +4 -0
  37. package/dist/esm/theme-provider/design-token-names.js +60 -25
  38. package/dist/esm/theme-provider/design-token-names.js.map +1 -1
  39. package/dist/esm/theme-provider/design-tokens.d.ts +56 -25
  40. package/dist/esm/theme-provider/design-tokens.js +60 -30
  41. package/dist/esm/theme-provider/design-tokens.js.map +1 -1
  42. package/dist/esm/tree-item/styles.js +8 -9
  43. package/dist/esm/tree-item/styles.js.map +1 -1
  44. package/dist/tokens-internal.scss +267 -81
  45. package/dist/tokens.scss +138 -45
  46. package/package.json +2 -2
@@ -1,7 +1,7 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
3
  import { focusVisible } from '../../utilities/style/focus';
4
- import { actionColorRgbPartial, borderColorHover, borderColorRgbPartial, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, iconColor, smallDelay, standardPadding } from '../../theme-provider/design-tokens';
4
+ import { actionRgbPartialColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, controlHeight, fillColorSelected, iconColor, smallDelay, standardPadding } from '../../theme-provider/design-tokens';
5
5
  import { appearanceBehavior } from '../../utilities/style/appearance';
6
6
  import { ButtonAppearance } from './types';
7
7
  export const styles = css `
@@ -10,9 +10,8 @@ export const styles = css `
10
10
  :host {
11
11
  background-color: transparent;
12
12
  height: ${controlHeight};
13
- color: ${buttonContentFontColor};
14
- font-family: ${fontFamily};
15
- font-size: ${contentFontSize};
13
+ color: ${buttonLabelFontColor};
14
+ font: ${buttonLabelFont};
16
15
  cursor: pointer;
17
16
  outline: none;
18
17
  border: none;
@@ -27,7 +26,7 @@ export const styles = css `
27
26
  }
28
27
 
29
28
  :host([disabled]) {
30
- color: ${contentFontColorDisabled};
29
+ color: ${buttonLabelDisabledFontColor};
31
30
  cursor: default;
32
31
  }
33
32
 
@@ -65,13 +64,13 @@ export const styles = css `
65
64
  }
66
65
 
67
66
  .control:hover {
68
- box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
67
+ box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
69
68
  outline: none;
70
69
  }
71
70
 
72
71
  .control${focusVisible} {
73
- box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
74
- outline: ${borderWidth} solid ${borderColorHover};
72
+ box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
73
+ outline: ${borderWidth} solid ${borderHoverColor};
75
74
  outline-offset: -4px;
76
75
  }
77
76
 
@@ -98,7 +97,7 @@ export const styles = css `
98
97
  }
99
98
 
100
99
  slot[name='start']::slotted(*) {
101
- ${iconColor.cssCustomProperty}: ${buttonContentFontColor};
100
+ ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
102
101
  }
103
102
 
104
103
  :host([disabled]) slot[name='start']::slotted(*) {
@@ -113,17 +112,17 @@ export const styles = css `
113
112
  .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
114
113
  .control {
115
114
  background-color: transparent;
116
- border-color: rgba(${actionColorRgbPartial}, 0.3);
115
+ border-color: rgba(${actionRgbPartialColor}, 0.3);
117
116
  }
118
117
 
119
118
  .control:hover {
120
119
  background-color: transparent;
121
- border-color: ${borderColorHover};
120
+ border-color: ${borderHoverColor};
122
121
  }
123
122
 
124
123
  .control${focusVisible} {
125
124
  background-color: transparent;
126
- border-color: ${borderColorHover};
125
+ border-color: ${borderHoverColor};
127
126
  }
128
127
 
129
128
  .control:active {
@@ -133,7 +132,7 @@ export const styles = css `
133
132
 
134
133
  .control[disabled] {
135
134
  background-color: transparent;
136
- border-color: rgba(${borderColorRgbPartial}, 0.2);
135
+ border-color: rgba(${borderRgbPartialColor}, 0.2);
137
136
  }
138
137
  `), appearanceBehavior(ButtonAppearance.Ghost, css `
139
138
  .control {
@@ -143,12 +142,12 @@ export const styles = css `
143
142
 
144
143
  .control:hover {
145
144
  background-color: transparent;
146
- border-color: ${borderColorHover};
145
+ border-color: ${borderHoverColor};
147
146
  }
148
147
 
149
148
  .control${focusVisible} {
150
149
  background-color: transparent;
151
- border-color: ${borderColorHover};
150
+ border-color: ${borderHoverColor};
152
151
  }
153
152
 
154
153
  .control:active {
@@ -162,18 +161,18 @@ export const styles = css `
162
161
  }
163
162
  `), appearanceBehavior(ButtonAppearance.Block, css `
164
163
  .control {
165
- background-color: rgba(${borderColorRgbPartial}, 0.1);
164
+ background-color: rgba(${borderRgbPartialColor}, 0.1);
166
165
  border-color: transparent;
167
166
  }
168
167
 
169
168
  .control:hover {
170
- background-color: rgba(${borderColorRgbPartial}, 0.1);
171
- border-color: ${borderColorHover};
169
+ background-color: rgba(${borderRgbPartialColor}, 0.1);
170
+ border-color: ${borderHoverColor};
172
171
  }
173
172
 
174
173
  .control${focusVisible} {
175
- background-color: rgba(${borderColorRgbPartial}, 0.1);
176
- border-color: ${borderColorHover};
174
+ background-color: rgba(${borderRgbPartialColor}, 0.1);
175
+ border-color: ${borderHoverColor};
177
176
  }
178
177
 
179
178
  .control:active {
@@ -182,7 +181,7 @@ export const styles = css `
182
181
  }
183
182
 
184
183
  .control[disabled] {
185
- background-color: rgba(${borderColorRgbPartial}, 0.1);
184
+ background-color: rgba(${borderRgbPartialColor}, 0.1);
186
185
  border-color: transparent;
187
186
  }
188
187
  `));
@@ -1 +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"}
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,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"}
@@ -1,13 +1,13 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { applicationBackgroundColor, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fontFamily, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay } from '../theme-provider/design-tokens';
3
+ import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay } from '../theme-provider/design-tokens';
4
4
  export const styles = css `
5
5
  ${display('inline-flex')}
6
6
 
7
7
  :host {
8
8
  box-sizing: border-box;
9
- color: ${contentFontColor};
10
- font-family: ${fontFamily};
9
+ color: ${bodyFontColor};
10
+ font: ${bodyFont};
11
11
  height: ${controlHeight};
12
12
  position: relative;
13
13
  user-select: none;
@@ -47,11 +47,9 @@ export const styles = css `
47
47
  box-sizing: border-box;
48
48
  cursor: pointer;
49
49
  display: flex;
50
- font-size: ${contentFontSize};
51
- font-family: inherit;
52
50
  min-height: 100%;
53
51
  width: 100%;
54
- border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
52
+ border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
55
53
  background-color: transparent;
56
54
  padding-left: 8px;
57
55
  padding-bottom: 1px;
@@ -62,21 +60,21 @@ export const styles = css `
62
60
  }
63
61
 
64
62
  :host(.open:not(:hover)) .control {
65
- border-bottom: ${borderWidth} solid ${borderColorHover};
63
+ border-bottom: ${borderWidth} solid ${borderHoverColor};
66
64
  transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
67
65
  }
68
66
 
69
67
  :host(:hover) .control {
70
- border-bottom: 2px solid ${borderColorHover};
68
+ border-bottom: 2px solid ${borderHoverColor};
71
69
  padding-bottom: 0px;
72
70
  transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
73
71
  }
74
72
 
75
73
  :host([disabled]) .control,
76
74
  :host([disabled]) .control:hover {
77
- border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
75
+ border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
78
76
  padding-bottom: 1px;
79
- color: ${contentFontColorDisabled};
77
+ color: ${bodyDisabledFontColor};
80
78
  }
81
79
 
82
80
  :host([open][position='above']) .listbox {
@@ -118,11 +116,11 @@ export const styles = css `
118
116
  .indicator slot[name='indicator'] svg {
119
117
  width: ${iconSize};
120
118
  height: ${iconSize};
121
- fill: ${contentFontColor};
119
+ fill: ${bodyFontColor};
122
120
  }
123
121
 
124
122
  :host([disabled]) .indicator slot[name='indicator'] svg {
125
- fill: ${contentFontColorDisabled};
123
+ fill: ${bodyDisabledFontColor};
126
124
  }
127
125
 
128
126
  slot[name='listbox'] {
@@ -1 +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"}
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,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"}
@@ -1,18 +1,17 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorHover, fontFamily, mediumDelay, standardPadding } from '../theme-provider/design-tokens';
3
+ import { bodyFont, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillHoverColor, mediumDelay, standardPadding } from '../theme-provider/design-tokens';
4
4
  import { focusVisible } from '../utilities/style/focus';
5
5
  export const styles = css `
6
6
  ${display('inline-flex')}
7
7
 
8
8
  :host {
9
9
  box-sizing: border-box;
10
- font-family: ${fontFamily};
11
- font-size: ${contentFontSize};
10
+ font: ${bodyFont};
12
11
  height: ${controlHeight};
13
12
  padding: calc(${standardPadding} / 2) ${standardPadding}
14
13
  calc(${standardPadding} / 2 - ${borderWidth});
15
- color: ${contentFontColor};
14
+ color: ${bodyFontColor};
16
15
  align-items: center;
17
16
  justify-content: center;
18
17
  cursor: pointer;
@@ -21,7 +20,7 @@ export const styles = css `
21
20
  }
22
21
 
23
22
  :host(:hover) {
24
- background-color: ${fillColorHover};
23
+ background-color: ${fillHoverColor};
25
24
  }
26
25
 
27
26
  :host(:focus) {
@@ -30,7 +29,7 @@ export const styles = css `
30
29
 
31
30
  :host(${focusVisible}) {
32
31
  outline: none;
33
- box-shadow: 0 calc(${borderWidth} * -1) ${borderColorHover} inset;
32
+ box-shadow: 0 calc(${borderWidth} * -1) ${borderHoverColor} inset;
34
33
  transition: box-shadow ${mediumDelay} ease-in-out;
35
34
  }
36
35
 
@@ -46,7 +45,7 @@ export const styles = css `
46
45
 
47
46
  :host([disabled]) {
48
47
  cursor: default;
49
- color: ${contentFontColorDisabled};
48
+ color: ${bodyDisabledFontColor};
50
49
  background: none;
51
50
  }
52
51
  `;
@@ -1 +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"}
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,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"}
@@ -1,14 +1,13 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { contentFontColor, contentFontSize, fontFamily, standardPadding } from '../theme-provider/design-tokens';
3
+ import { bodyFont, bodyFontColor, standardPadding } from '../theme-provider/design-tokens';
4
4
  export const styles = css `
5
5
  ${display('block')}
6
6
 
7
7
  :host {
8
8
  box-sizing: border-box;
9
- font-family: ${fontFamily};
10
- font-size: ${contentFontSize};
11
- color: ${contentFontColor};
9
+ font: ${bodyFont};
10
+ color: ${bodyFontColor};
12
11
  padding-top: ${standardPadding};
13
12
  }
14
13
  `;
@@ -1 +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"}
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,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"}
@@ -1,6 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { borderColorHover, borderWidth, smallDelay } from '../theme-provider/design-tokens';
3
+ import { borderHoverColor, borderWidth, smallDelay } from '../theme-provider/design-tokens';
4
4
  export const styles = css `
5
5
  ${display('grid')}
6
6
 
@@ -21,7 +21,7 @@ export const styles = css `
21
21
  .activeIndicator {
22
22
  grid-row: 2;
23
23
  height: calc(${borderWidth} * 2);
24
- background-color: ${borderColorHover};
24
+ background-color: ${borderHoverColor};
25
25
  }
26
26
 
27
27
  .activeIndicatorTransition {
@@ -1,6 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { borderColorRgbPartial, borderWidth, contentFontColor, contentFontSize, controlHeight, fontFamily, standardPadding } from '../theme-provider/design-tokens';
3
+ import { bodyFont, bodyFontColor, borderRgbPartialColor, borderWidth, controlHeight, standardPadding } from '../theme-provider/design-tokens';
4
4
  export const styles = css `
5
5
  ${display('flex')}
6
6
 
@@ -8,16 +8,15 @@ export const styles = css `
8
8
  align-items: center;
9
9
  height: ${controlHeight};
10
10
  box-sizing: border-box;
11
- font-family: ${fontFamily};
12
- font-size: ${contentFontSize};
13
- color: ${contentFontColor};
11
+ font: ${bodyFont};
12
+ color: ${bodyFontColor};
14
13
  }
15
14
 
16
15
  .separator {
17
16
  display: inline-block;
18
17
  height: 24px;
19
18
  border-left: calc(${borderWidth} * 2) solid
20
- rgba(${borderColorRgbPartial}, 0.3);
19
+ rgba(${borderRgbPartialColor}, 0.3);
21
20
  margin: calc(${standardPadding} / 4) calc(${standardPadding} / 2);
22
21
  }
23
22
  `;
@@ -1 +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"}
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,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"}
@@ -1,35 +1,30 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, fillColorSelectedRgbPartial, fontFamily, labelFontColor, labelFontColorDisabled, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay } from '../theme-provider/design-tokens';
3
+ import { borderRgbPartialColor, borderHoverColor, borderWidth, fillSelectedRgbPartialColor, 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 `
7
7
  ${display('inline-block')}
8
8
 
9
9
  :host {
10
- font-family: ${fontFamily};
11
- font-size: ${contentFontSize};
10
+ font: ${bodyFont};
12
11
  outline: none;
13
12
  user-select: none;
14
- color: ${contentFontColor};
13
+ color: ${bodyFontColor};
15
14
  }
16
15
 
17
16
  :host([disabled]) {
18
- color: ${contentFontColorDisabled};
17
+ color: ${bodyDisabledFontColor};
19
18
  }
20
19
 
21
20
  .label {
22
21
  display: flex;
23
- color: ${labelFontColor};
24
- font-family: ${labelFontFamily};
25
- font-size: ${labelFontSize};
26
- font-weight: ${labelFontWeight};
27
- line-height: ${labelHeight};
28
- text-transform: ${labelTextTransform};
22
+ color: ${controlLabelFontColor};
23
+ font: ${controlLabelFont};
29
24
  }
30
25
 
31
26
  :host([disabled]) .label {
32
- color: ${labelFontColorDisabled};
27
+ color: ${controlLabelDisabledFontColor};
33
28
  }
34
29
 
35
30
  .control {
@@ -54,12 +49,12 @@ export const styles = css `
54
49
  }
55
50
 
56
51
  .control:hover {
57
- border-color: ${borderColorHover};
58
- box-shadow: 0px 0px 0px 1px ${borderColorHover};
52
+ border-color: ${borderHoverColor};
53
+ box-shadow: 0px 0px 0px 1px ${borderHoverColor};
59
54
  }
60
55
 
61
56
  .control:focus-within {
62
- border-color: ${borderColorHover};
57
+ border-color: ${borderHoverColor};
63
58
  }
64
59
 
65
60
  .control[readonly],
@@ -67,21 +62,21 @@ export const styles = css `
67
62
  .control[readonly]:hover:focus-within,
68
63
  .control[disabled],
69
64
  .control[disabled]:hover {
70
- border-color: rgba(${borderColorRgbPartial}, 0.1);
65
+ border-color: rgba(${borderRgbPartialColor}, 0.1);
71
66
  box-shadow: none;
72
67
  }
73
68
 
74
69
  .control::selection {
75
- color: ${labelFontColor};
76
- background: rgba(${fillColorSelectedRgbPartial}, 0.3);
70
+ color: ${controlLabelFontColor};
71
+ background: rgba(${fillSelectedRgbPartialColor}, 0.3);
77
72
  }
78
73
 
79
74
  .control::placeholder {
80
- color: ${labelFontColor};
75
+ color: ${controlLabelFontColor};
81
76
  }
82
77
 
83
78
  .control[disabled]::placeholder {
84
- color: ${contentFontColorDisabled};
79
+ color: ${controlLabelDisabledFontColor};
85
80
  }
86
81
 
87
82
  :host([resize='both']) .control {
@@ -97,12 +92,12 @@ export const styles = css `
97
92
  // prettier-ignore
98
93
  .withBehaviors(appearanceBehavior(TextAreaAppearance.Outline, css `
99
94
  .control {
100
- border-color: rgba(${borderColorRgbPartial}, 0.3);
95
+ border-color: rgba(${borderRgbPartialColor}, 0.3);
101
96
  background-color: transparent;
102
97
  }
103
98
  `), appearanceBehavior(TextAreaAppearance.Block, css `
104
99
  .control {
105
- background-color: rgba(${borderColorRgbPartial}, 0.1);
100
+ background-color: rgba(${borderRgbPartialColor}, 0.1);
106
101
  }
107
102
 
108
103
  :host([readonly]) .control {
@@ -111,7 +106,7 @@ export const styles = css `
111
106
 
112
107
  :host([disabled]) .control {
113
108
  border-color: transparent;
114
- background-color: rgba(${borderColorRgbPartial}, 0.1);
109
+ background-color: rgba(${borderRgbPartialColor}, 0.1);
115
110
  }
116
111
  `));
117
112
  //# sourceMappingURL=styles.js.map
@@ -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,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,2BAA2B,EAC3B,UAAU,EACV,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACb,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,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;;;;iBAIhB,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;iBAI3B,sBAAsB;;;;;;;;;;;;kBAYrB,WAAW;;iCAEI,UAAU,YAAY,UAAU;;;;;;;;;;;wBAWzC,gBAAgB;sCACF,gBAAgB;;;;wBAI9B,gBAAgB;;;;;;;;6BAQX,qBAAqB;;;;;iBAKjC,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;iBAId,wBAAwB;;;;;;;;;;;;CAYxC;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,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,cAAc,CAAC;;;gBAGb,QAAQ;;;iBAGP,aAAa;;;;iBAIb,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;kBAY5B,WAAW;;iCAEI,UAAU,YAAY,UAAU;;;;;;;;;;;wBAWzC,gBAAgB;sCACF,gBAAgB;;;;wBAI9B,gBAAgB;;;;;;;;6BAQX,qBAAqB;;;;;iBAKjC,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;CAY7C;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,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, failColor, fillColorSelectedRgbPartial, fontFamily, iconSize, labelFontColor, labelFontColorDisabled, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay, standardPadding } from '../theme-provider/design-tokens';
3
+ import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, fillSelectedRgbPartialColor, iconSize, labelHeight, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, standardPadding, controlLabelDisabledFontColor } from '../theme-provider/design-tokens';
4
4
  import { appearanceBehavior } from '../utilities/style/appearance';
5
5
  import { TextFieldAppearance } from './types';
6
6
  import { Theme } from '../theme-provider/types';
@@ -9,30 +9,15 @@ export const styles = css `
9
9
  ${display('inline-block')}
10
10
 
11
11
  :host {
12
- font-family: ${fontFamily};
13
- font-size: ${contentFontSize};
12
+ font: ${bodyFont};
14
13
  outline: none;
15
14
  user-select: none;
16
- color: ${contentFontColor};
15
+ color: ${bodyFontColor};
17
16
  height: calc(${labelHeight} + ${controlHeight});
18
17
  }
19
18
 
20
19
  :host([disabled]) {
21
- color: ${contentFontColorDisabled};
22
- }
23
-
24
- .label {
25
- display: flex;
26
- color: ${labelFontColor};
27
- font-family: ${labelFontFamily};
28
- font-size: ${labelFontSize};
29
- font-weight: ${labelFontWeight};
30
- line-height: ${labelHeight};
31
- text-transform: ${labelTextTransform};
32
- }
33
-
34
- :host([disabled]) .label {
35
- color: ${labelFontColorDisabled};
20
+ color: ${bodyDisabledFontColor};
36
21
  }
37
22
 
38
23
  .root {
@@ -41,11 +26,11 @@ export const styles = css `
41
26
  display: flex;
42
27
  flex-direction: row;
43
28
  border-radius: 0px;
44
- font-family: ${fontFamily};
29
+ font: ${bodyFont};
45
30
  transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
46
31
  align-items: flex-end;
47
32
  --ni-private-hover-bottom-border-width: 2px;
48
- border: 0px solid rgba(${borderColorRgbPartial}, 0.3);
33
+ border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
49
34
  border-bottom-width: var(--ni-private-bottom-border-width);
50
35
  padding-bottom: calc(
51
36
  var(--ni-private-hover-bottom-border-width) -
@@ -64,21 +49,21 @@ export const styles = css `
64
49
  }
65
50
 
66
51
  :host([readonly]:not([disabled])) .root {
67
- border: ${borderWidth} solid rgba(${borderColorRgbPartial}, 0.1);
52
+ border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.1);
68
53
  padding: 0px;
69
54
  padding-bottom: 1px;
70
55
  background-color: transparent;
71
56
  }
72
57
 
73
58
  :host([disabled]) .root {
74
- border-color: rgba(${borderColorRgbPartial}, 0.1);
59
+ border-color: rgba(${borderRgbPartialColor}, 0.1);
75
60
  }
76
61
 
77
62
  .root:hover {
78
63
  --ni-private-bottom-border-width: var(
79
64
  --ni-private-hover-bottom-border-width
80
65
  );
81
- border-bottom-color: ${borderColorHover};
66
+ border-bottom-color: ${borderHoverColor};
82
67
  }
83
68
 
84
69
  :host([disabled]) .root:hover {
@@ -86,7 +71,7 @@ export const styles = css `
86
71
  }
87
72
 
88
73
  .root:focus-within {
89
- border-bottom-color: ${borderColorHover};
74
+ border-bottom-color: ${borderHoverColor};
90
75
  }
91
76
 
92
77
  .control {
@@ -116,12 +101,12 @@ export const styles = css `
116
101
  }
117
102
 
118
103
  .control::selection {
119
- color: ${labelFontColor};
120
- background: rgba(${fillColorSelectedRgbPartial}, 0.3);
104
+ color: ${controlLabelFontColor};
105
+ background: rgba(${fillSelectedRgbPartialColor}, 0.3);
121
106
  }
122
107
 
123
108
  .control::placeholder {
124
- color: ${labelFontColor};
109
+ color: ${controlLabelFontColor};
125
110
  }
126
111
 
127
112
  .control:not([readonly]):focus-within::placeholder {
@@ -129,7 +114,17 @@ export const styles = css `
129
114
  }
130
115
 
131
116
  .control[disabled]::placeholder {
132
- color: ${contentFontColorDisabled};
117
+ color: ${bodyDisabledFontColor};
118
+ }
119
+
120
+ .label {
121
+ display: flex;
122
+ color: ${controlLabelFontColor};
123
+ font: ${controlLabelFont};
124
+ }
125
+
126
+ :host([disabled]) .label {
127
+ color: ${controlLabelDisabledFontColor};
133
128
  }
134
129
 
135
130
  :host [part='end'] {
@@ -153,7 +148,7 @@ export const styles = css `
153
148
  }
154
149
 
155
150
  :host([disabled]) [part='end'] path {
156
- fill: ${contentFontColorDisabled};
151
+ fill: ${bodyDisabledFontColor};
157
152
  }
158
153
  `.withBehaviors(appearanceBehavior(TextFieldAppearance.Underline, css `
159
154
  .root {
@@ -164,7 +159,7 @@ export const styles = css `
164
159
  }
165
160
  `), appearanceBehavior(TextFieldAppearance.Block, css `
166
161
  .root {
167
- background-color: rgba(${borderColorRgbPartial}, 0.1);
162
+ background-color: rgba(${borderRgbPartialColor}, 0.1);
168
163
  --ni-private-bottom-border-width: 0px;
169
164
  padding-top: ${borderWidth};
170
165
  padding-left: ${borderWidth};
@@ -192,7 +187,7 @@ export const styles = css `
192
187
  }
193
188
 
194
189
  :host([disabled]) .root {
195
- background-color: rgba(${borderColorRgbPartial}, 0.07);
190
+ background-color: rgba(${borderRgbPartialColor}, 0.07);
196
191
  }
197
192
 
198
193
  :host([disabled]) .root:hover {
@@ -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,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,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;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;iBAI3B,sBAAsB;;;;;;;;;uBAShB,UAAU;oCACG,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;;;;;;;;;;;;;;+BAevB,SAAS;;;;kBAItB,WAAW,eAAe,qBAAqB;;;;;;;6BAOpC,qBAAqB;;;;;;;+BAOnB,gBAAgB;;;;;;;;+BAQhB,gBAAgB;;;;;;;;;;;cAWjC,aAAa,MAAM,WAAW;;;;;;6BAMf,eAAe;8BACd,eAAe;;;;;;;;;;;;iBAY5B,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;;;;;iBAQd,wBAAwB;;;;;;;;;;;;;;;kBAevB,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,wBAAwB;;CAEvC,CAAC,aAAa,CACP,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;SAEnC,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE0B,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;;;;;;;;;;;;yCAwBH,qBAAqB;;;;;;;;;;SAUrD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGiB,WAAW;;;SAGlC,CACA,EACD,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
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,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,eAAe,EACf,6BAA6B,EAChC,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;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;;;;iBAIpC,qBAAqB;;;;;;;;;gBAStB,QAAQ;oCACY,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;;;;;;;;;;;;;;+BAevB,SAAS;;;;kBAItB,WAAW,eAAe,qBAAqB;;;;;;;6BAOpC,qBAAqB;;;;;;;+BAOnB,gBAAgB;;;;;;;;+BAQhB,gBAAgB;;;;;;;;;;;cAWjC,aAAa,MAAM,WAAW;;;;;;6BAMf,eAAe;8BACd,eAAe;;;;;;;;;;;;iBAY5B,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;kBAe5B,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,qBAAqB;;CAEpC,CAAC,aAAa,CACP,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;SAEnC,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE0B,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;;;;;;;;;;;;yCAwBH,qBAAqB;;;;;;;;;;SAUrD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGiB,WAAW;;;SAGlC,CACA,EACD,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}