@ni/nimble-components 1.0.0-beta.123 → 1.0.0-beta.127
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.
- package/README.md +34 -16
- package/dist/esm/button/index.d.ts +11 -2
- package/dist/esm/button/index.js +20 -12
- package/dist/esm/button/index.js.map +1 -1
- package/dist/esm/button/styles.js +15 -10
- package/dist/esm/button/styles.js.map +1 -1
- package/dist/esm/checkbox/styles.js +4 -4
- package/dist/esm/checkbox/styles.js.map +1 -1
- package/dist/esm/drawer/styles.js +4 -4
- package/dist/esm/drawer/styles.js.map +1 -1
- package/dist/esm/icon-base/styles.js +6 -6
- package/dist/esm/icon-base/styles.js.map +1 -1
- package/dist/esm/icon-base/template.js +1 -1
- package/dist/esm/nimble-components/src/button/index.d.ts +11 -2
- package/dist/esm/nimble-components/src/theme-provider/design-token-comments.d.ts +6 -0
- package/dist/esm/nimble-components/src/theme-provider/design-token-names.d.ts +11 -0
- package/dist/esm/nimble-components/src/theme-provider/design-tokens.d.ts +4 -9
- package/dist/esm/nimble-components/src/theme-provider/index.d.ts +8 -2
- package/dist/esm/nimble-components/src/utilities/style/direction.d.ts +34 -0
- package/dist/esm/number-field/styles.js +3 -3
- package/dist/esm/number-field/styles.js.map +1 -1
- package/dist/esm/tabs-toolbar/styles.js +3 -2
- package/dist/esm/tabs-toolbar/styles.js.map +1 -1
- package/dist/esm/text-field/styles.js +3 -3
- package/dist/esm/text-field/styles.js.map +1 -1
- package/dist/esm/theme-provider/design-token-comments.d.ts +6 -0
- package/dist/esm/theme-provider/design-token-comments.js +46 -0
- package/dist/esm/theme-provider/design-token-comments.js.map +1 -0
- package/dist/esm/theme-provider/design-token-names.d.ts +11 -0
- package/dist/esm/theme-provider/design-token-names.js +52 -0
- package/dist/esm/theme-provider/design-token-names.js.map +1 -0
- package/dist/esm/theme-provider/design-tokens.d.ts +4 -9
- package/dist/esm/theme-provider/design-tokens.js +78 -90
- package/dist/esm/theme-provider/design-tokens.js.map +1 -1
- package/dist/esm/theme-provider/index.d.ts +8 -2
- package/dist/esm/theme-provider/index.js +35 -2
- package/dist/esm/theme-provider/index.js.map +1 -1
- package/dist/esm/tree-item/styles.js +9 -7
- package/dist/esm/tree-item/styles.js.map +1 -1
- package/dist/esm/utilities/style/direction.d.ts +34 -0
- package/dist/esm/utilities/style/direction.js +78 -0
- package/dist/esm/utilities/style/direction.js.map +1 -0
- package/dist/fonts.scss +3 -0
- package/dist/tokens-internal.scss +261 -0
- package/dist/tokens.scss +135 -0
- package/package.json +10 -6
package/README.md
CHANGED
|
@@ -28,30 +28,48 @@ If you have an existing application that incorporates a module bundler like [Web
|
|
|
28
28
|
|
|
29
29
|
## Theming
|
|
30
30
|
|
|
31
|
-
This package contains a theming system which enables changing the appearance of controls based on user preferences or application designs.
|
|
31
|
+
This package contains a theming system which enables changing the appearance of controls based on user preferences or application designs.
|
|
32
|
+
|
|
33
|
+
The theming system is built on a set of design tokens that define different properties such as fonts, colors, etc. The Nimble components are configured to use these theme-aware design tokens. An application should use the same theme-aware design tokens for parts outside of the components.
|
|
32
34
|
|
|
33
35
|
The theming system is composed of:
|
|
34
36
|
|
|
35
|
-
1.
|
|
36
|
-
2.
|
|
37
|
+
1. Theme-aware design tokens that are used in your stylesheets.
|
|
38
|
+
2. A `<nimble-theme-provider>` component that is added around your page contents and is configured for a theme.
|
|
37
39
|
|
|
38
40
|
### Using the Theming System
|
|
39
41
|
|
|
40
42
|
1. Include the `<nimble-theme-provider>` element on your page and set its `theme` attribute. The theme provider has no appearance of its own but defines tokens that are used by descendant components. It will typically be at the root of the application:
|
|
41
43
|
|
|
42
|
-
```html
|
|
43
|
-
<body>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
</body>
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
2.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
44
|
+
```html
|
|
45
|
+
<body>
|
|
46
|
+
<nimble-theme-provider theme="light">
|
|
47
|
+
<!-- everything else -->
|
|
48
|
+
</nimble-theme-provider>
|
|
49
|
+
</body>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
2. Include one import in your styles for the Nimble fonts. Nimble recommends using SCSS for capabilities such as build time property checking.
|
|
53
|
+
|
|
54
|
+
```scss
|
|
55
|
+
@import '~@ni/nimble-components/dist/fonts';
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
3. As needed, add Nimble components as descendants of the theme provider and they will inherit the theme.
|
|
59
|
+
|
|
60
|
+
4. As needed, import the theme-aware design tokens in each SCSS file that will leverage the tokens for other parts of your application (for colors, fonts, etc).
|
|
61
|
+
|
|
62
|
+
```scss
|
|
63
|
+
@import '~@ni/nimble-components/dist/tokens';
|
|
64
|
+
|
|
65
|
+
.my-element {
|
|
66
|
+
font-family: $ni-nimble-font-family;
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Customizing
|
|
71
|
+
|
|
72
|
+
The goal of the Nimble design system is to provide a consistent style for applications. If you find that Nimble does not expose colors, fonts, sizes, etc. that you need in an application get in touch with the Nimble squad.
|
|
55
73
|
|
|
56
74
|
## Contributing
|
|
57
75
|
|
|
@@ -18,7 +18,16 @@ declare class Button extends FoundationButton {
|
|
|
18
18
|
* HTML Attribute: appearance
|
|
19
19
|
*/
|
|
20
20
|
appearance: ButtonAppearance;
|
|
21
|
+
/**
|
|
22
|
+
* Specify as 'true' to hide the text content of the button. The button will
|
|
23
|
+
* become square, and the text content will be used as the label of the button
|
|
24
|
+
* for accessibility purposes.
|
|
25
|
+
*
|
|
26
|
+
* @public
|
|
27
|
+
* @remarks
|
|
28
|
+
* HTML Attribute: content-hidden
|
|
29
|
+
*/
|
|
30
|
+
contentHidden: boolean;
|
|
31
|
+
private readonly contentId;
|
|
21
32
|
connectedCallback(): void;
|
|
22
|
-
defaultSlottedContentChanged(): void;
|
|
23
|
-
private checkForEmptyText;
|
|
24
33
|
}
|
package/dist/esm/button/index.js
CHANGED
|
@@ -7,28 +7,36 @@ import { ButtonAppearance } from './types';
|
|
|
7
7
|
* A nimble-styled HTML button
|
|
8
8
|
*/
|
|
9
9
|
class Button extends FoundationButton {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
/**
|
|
13
|
+
* Specify as 'true' to hide the text content of the button. The button will
|
|
14
|
+
* become square, and the text content will be used as the label of the button
|
|
15
|
+
* for accessibility purposes.
|
|
16
|
+
*
|
|
17
|
+
* @public
|
|
18
|
+
* @remarks
|
|
19
|
+
* HTML Attribute: content-hidden
|
|
20
|
+
*/
|
|
21
|
+
this.contentHidden = false;
|
|
22
|
+
this.contentId = 'nimble-button-content';
|
|
23
|
+
}
|
|
10
24
|
connectedCallback() {
|
|
11
25
|
super.connectedCallback();
|
|
12
26
|
if (!this.appearance) {
|
|
13
27
|
this.appearance = ButtonAppearance.Outline;
|
|
14
28
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
this.
|
|
18
|
-
}
|
|
19
|
-
checkForEmptyText() {
|
|
20
|
-
const hasTextContent = this.defaultSlottedContent.some(x => (x.textContent ?? '').trim().length !== 0);
|
|
21
|
-
if (hasTextContent) {
|
|
22
|
-
this.control.classList.remove('empty-text');
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
this.control.classList.add('empty-text');
|
|
26
|
-
}
|
|
29
|
+
const content = this.control.querySelector('.content');
|
|
30
|
+
content.id = this.contentId;
|
|
31
|
+
this.control.setAttribute('aria-labelledby', this.contentId);
|
|
27
32
|
}
|
|
28
33
|
}
|
|
29
34
|
__decorate([
|
|
30
35
|
attr
|
|
31
36
|
], Button.prototype, "appearance", void 0);
|
|
37
|
+
__decorate([
|
|
38
|
+
attr({ attribute: 'content-hidden', mode: 'boolean' })
|
|
39
|
+
], Button.prototype, "contentHidden", void 0);
|
|
32
40
|
/**
|
|
33
41
|
* A function that returns a nimble-button registration for configuring the component with a DesignSystem.
|
|
34
42
|
* Implements {@link @microsoft/fast-foundation#buttonTemplate}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAArC;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;QAEZ,cAAS,GAAG,uBAAuB,CAAC;IAYzD,CAAC;IAVU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC;QACxD,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACjE,CAAC;CACJ;AA1BG;IADC,IAAI;0CACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAgBjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
|
|
@@ -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 {
|
|
4
|
+
import { actionColorRgbPartial, borderColorHover, borderColorRgbPartial, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, iconColor, smallDelay, standardPadding } from '../theme-provider/design-tokens';
|
|
5
5
|
import { appearanceBehavior } from './behaviors';
|
|
6
6
|
import { ButtonAppearance } from './types';
|
|
7
7
|
export const styles = css `
|
|
@@ -21,6 +21,7 @@ export const styles = css `
|
|
|
21
21
|
/*
|
|
22
22
|
Not sure why but this is needed to get buttons with icons and buttons
|
|
23
23
|
without icons to align on the same line when the button is inline-flex
|
|
24
|
+
See: https://github.com/microsoft/fast/issues/5414
|
|
24
25
|
*/ ''}
|
|
25
26
|
vertical-align: middle;
|
|
26
27
|
}
|
|
@@ -52,7 +53,7 @@ export const styles = css `
|
|
|
52
53
|
transition: box-shadow ${smallDelay};
|
|
53
54
|
}
|
|
54
55
|
|
|
55
|
-
.control
|
|
56
|
+
:host([content-hidden]) .control {
|
|
56
57
|
width: ${controlHeight};
|
|
57
58
|
padding: 0px;
|
|
58
59
|
}
|
|
@@ -88,12 +89,16 @@ export const styles = css `
|
|
|
88
89
|
display: contents;
|
|
89
90
|
}
|
|
90
91
|
|
|
92
|
+
:host([content-hidden]) .content {
|
|
93
|
+
display: none;
|
|
94
|
+
}
|
|
95
|
+
|
|
91
96
|
[part='start'] {
|
|
92
97
|
display: contents;
|
|
93
98
|
}
|
|
94
99
|
|
|
95
100
|
slot[name='start']::slotted(*) {
|
|
96
|
-
|
|
101
|
+
${iconColor.cssCustomProperty}: ${buttonContentFontColor};
|
|
97
102
|
}
|
|
98
103
|
|
|
99
104
|
:host([disabled]) slot[name='start']::slotted(*) {
|
|
@@ -108,7 +113,7 @@ export const styles = css `
|
|
|
108
113
|
.withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
|
|
109
114
|
.control {
|
|
110
115
|
background-color: transparent;
|
|
111
|
-
border-color: rgba(${
|
|
116
|
+
border-color: rgba(${actionColorRgbPartial}, 0.5);
|
|
112
117
|
}
|
|
113
118
|
|
|
114
119
|
.control:hover {
|
|
@@ -128,7 +133,7 @@ export const styles = css `
|
|
|
128
133
|
|
|
129
134
|
.control[disabled] {
|
|
130
135
|
background-color: transparent;
|
|
131
|
-
border-color: rgba(${
|
|
136
|
+
border-color: rgba(${borderColorRgbPartial}, 0.2);
|
|
132
137
|
}
|
|
133
138
|
`), appearanceBehavior(ButtonAppearance.Ghost, css `
|
|
134
139
|
.control {
|
|
@@ -157,17 +162,17 @@ export const styles = css `
|
|
|
157
162
|
}
|
|
158
163
|
`), appearanceBehavior(ButtonAppearance.Block, css `
|
|
159
164
|
.control {
|
|
160
|
-
background-color: rgba(${
|
|
165
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
161
166
|
border-color: transparent;
|
|
162
167
|
}
|
|
163
168
|
|
|
164
169
|
.control:hover {
|
|
165
|
-
background-color: rgba(${
|
|
170
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
166
171
|
border-color: ${borderColorHover};
|
|
167
172
|
}
|
|
168
173
|
|
|
169
174
|
.control${focusVisible} {
|
|
170
|
-
background-color: rgba(${
|
|
175
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
171
176
|
border-color: ${borderColorHover};
|
|
172
177
|
}
|
|
173
178
|
|
|
@@ -177,8 +182,8 @@ export const styles = css `
|
|
|
177
182
|
}
|
|
178
183
|
|
|
179
184
|
.control[disabled] {
|
|
180
|
-
background-color: rgba(${
|
|
181
|
-
border-color: rgba(${
|
|
185
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
186
|
+
border-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
182
187
|
}
|
|
183
188
|
`));
|
|
184
189
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,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,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,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;;;;;;yCAMhB,qBAAqB;;aAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;;;aAQ5C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;6CAKrB,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;;wCAIZ,iBAAiB;;;;;6CAKZ,qBAAqB;yCACzB,qBAAqB;;aAEjD,CACJ,CACJ,CAAC"}
|
|
@@ -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 { borderColor, borderColorHover,
|
|
4
|
+
import { borderColor, borderColorHover, borderColorRgbPartial, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, labelHeight, iconSize, fontFamily, borderWidth, smallDelay } from '../theme-provider/design-tokens';
|
|
5
5
|
export const styles = css `
|
|
6
6
|
${display('inline-flex')}
|
|
7
7
|
|
|
@@ -42,8 +42,8 @@ export const styles = css `
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
:host([disabled]) .control {
|
|
45
|
-
background-color: rgba(${
|
|
46
|
-
border-color: rgba(${
|
|
45
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
46
|
+
border-color: rgba(${borderColorRgbPartial}, 0.2);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
:host(:not([disabled]):not(:active):hover) .control {
|
|
@@ -86,7 +86,7 @@ export const styles = css `
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
:host([disabled]) slot[name='checked-indicator'] path {
|
|
89
|
-
fill: rgba(${
|
|
89
|
+
fill: rgba(${borderColorRgbPartial}, 0.3);
|
|
90
90
|
}
|
|
91
91
|
`;
|
|
92
92
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,WAAW,EACX,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;sBAcN,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;iCAWyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;uBAKtB,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;uBACV,WAAW;;;;;;iBAMjB,wBAAwB;;;;kBAIvB,QAAQ;iBACT,QAAQ;;;;;gBAKT,WAAW;;;;;;;;;qBASN,qBAAqB;;CAEzC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import { applicationBackgroundColor, borderWidth, contentFontColor, contentFontSize, drawerHeaderFontFamily, drawerHeaderFontSize, drawerWidth, fontFamily, popupBorderColor, popupBoxShadowColor } from '../theme-provider/design-tokens';
|
|
3
|
+
import { applicationBackgroundColor, borderWidth, contentFontColor, contentFontSize, drawerHeaderFontFamily, drawerHeaderFontSize, drawerWidth, fontFamily, popupBorderColor, popupBoxShadowColor, standardPadding } from '../theme-provider/design-tokens';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('block')}
|
|
6
6
|
|
|
@@ -94,19 +94,19 @@ export const styles = css `
|
|
|
94
94
|
*/ ''}
|
|
95
95
|
|
|
96
96
|
::slotted(header) {
|
|
97
|
-
padding:
|
|
97
|
+
padding: ${standardPadding};
|
|
98
98
|
font-family: ${drawerHeaderFontFamily};
|
|
99
99
|
font-size: ${drawerHeaderFontSize};
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
::slotted(section) {
|
|
103
|
-
padding:
|
|
103
|
+
padding: ${standardPadding};
|
|
104
104
|
grid-row: 2;
|
|
105
105
|
overflow-y: auto;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
::slotted(footer) {
|
|
109
|
-
padding:
|
|
109
|
+
padding: ${standardPadding};
|
|
110
110
|
display: flex;
|
|
111
111
|
justify-content: flex-end;
|
|
112
112
|
grid-row: 3;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,mBAAmB,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;uBASC,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgC3B,CAAA,8DAA+D,EAAE;;;;sBAIjD,gBAAgB;;;;;;;;;;;;;;iBAcrB,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;;wBAc9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;uBACX,sBAAsB;qBACxB,oBAAoB;;;;mBAItB,eAAe;;;;;;mBAMf,eAAe;;;;sBAIZ,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import { contentFontColor, iconSize, warningColor, failColor, passColor } from '../theme-provider/design-tokens';
|
|
3
|
+
import { contentFontColor, iconSize, warningColor, failColor, passColor, iconColor } from '../theme-provider/design-tokens';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('inline-flex')}
|
|
6
6
|
|
|
@@ -9,7 +9,7 @@ export const styles = css `
|
|
|
9
9
|
user-select: none;
|
|
10
10
|
width: ${iconSize};
|
|
11
11
|
height: ${iconSize};
|
|
12
|
-
|
|
12
|
+
${iconColor.cssCustomProperty}: ${contentFontColor};
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.icon {
|
|
@@ -18,19 +18,19 @@ export const styles = css `
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
:host(.fail) {
|
|
21
|
-
|
|
21
|
+
${iconColor.cssCustomProperty}: ${failColor};
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
:host(.warning) {
|
|
25
|
-
|
|
25
|
+
${iconColor.cssCustomProperty}: ${warningColor};
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
:host(.pass) {
|
|
29
|
-
|
|
29
|
+
${iconColor.cssCustomProperty}: ${passColor};
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.icon svg {
|
|
33
|
-
fill:
|
|
33
|
+
fill: ${iconColor};
|
|
34
34
|
width: 100%;
|
|
35
35
|
height: 100%;
|
|
36
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;iBAKX,QAAQ;kBACP,QAAQ;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;iBAKX,QAAQ;kBACP,QAAQ;UAChB,SAAS,CAAC,iBAAiB,KAAK,gBAAgB;;;;;;;;;UAShD,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;UAIzC,SAAS,CAAC,iBAAiB,KAAK,YAAY;;;;UAI5C,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;gBAInC,SAAS;;;;CAIxB,CAAC"}
|
|
@@ -18,7 +18,16 @@ declare class Button extends FoundationButton {
|
|
|
18
18
|
* HTML Attribute: appearance
|
|
19
19
|
*/
|
|
20
20
|
appearance: ButtonAppearance;
|
|
21
|
+
/**
|
|
22
|
+
* Specify as 'true' to hide the text content of the button. The button will
|
|
23
|
+
* become square, and the text content will be used as the label of the button
|
|
24
|
+
* for accessibility purposes.
|
|
25
|
+
*
|
|
26
|
+
* @public
|
|
27
|
+
* @remarks
|
|
28
|
+
* HTML Attribute: content-hidden
|
|
29
|
+
*/
|
|
30
|
+
contentHidden: boolean;
|
|
31
|
+
private readonly contentId;
|
|
21
32
|
connectedCallback(): void;
|
|
22
|
-
defaultSlottedContentChanged(): void;
|
|
23
|
-
private checkForEmptyText;
|
|
24
33
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type * as TokensNamespace from './design-tokens';
|
|
2
|
+
declare type TokenName = keyof typeof TokensNamespace;
|
|
3
|
+
export declare const tokenNames: {
|
|
4
|
+
[key in TokenName]: string;
|
|
5
|
+
};
|
|
6
|
+
export declare const styleNameFromTokenName: (tokenName: string) => string;
|
|
7
|
+
export declare const cssPropertyFromTokenName: (tokenName: string) => string;
|
|
8
|
+
export declare const scssPropertyFromTokenName: (tokenName: string) => string;
|
|
9
|
+
export declare const scssInternalPropertyFromTokenName: (tokenName: string) => string;
|
|
10
|
+
export declare const scssInternalPropertySetterMarkdown: (tokenName: string, property: string) => string;
|
|
11
|
+
export {};
|
|
@@ -1,21 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
import { NimbleTheme } from './types';
|
|
3
|
-
export declare const theme: DesignToken<NimbleTheme>;
|
|
4
|
-
export declare const actionColorRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
1
|
+
export declare const actionColorRgbPartial: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
5
2
|
export declare const applicationBackgroundColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
6
3
|
export declare const fillColorSelected: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
7
|
-
export declare const
|
|
4
|
+
export declare const fillColorSelectedRgbPartial: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
8
5
|
export declare const fillColorSelectedHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
9
6
|
export declare const fillColorHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
10
7
|
export declare const borderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
11
|
-
export declare const
|
|
12
|
-
export declare const failColorTheme: (element: HTMLElement) => string;
|
|
8
|
+
export declare const borderColorRgbPartial: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
13
9
|
export declare const failColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
14
|
-
export declare const warningColorTheme: (element: HTMLElement) => string;
|
|
15
10
|
export declare const warningColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
16
|
-
export declare const passColorTheme: (element: HTMLElement) => string;
|
|
17
11
|
export declare const passColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
18
12
|
export declare const borderColorHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
13
|
+
export declare const iconColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
19
14
|
export declare const popupBoxShadowColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
20
15
|
export declare const popupBorderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
21
16
|
export declare const controlHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
|
|
@@ -1,17 +1,23 @@
|
|
|
1
|
-
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
-
import
|
|
1
|
+
import { DesignToken, FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
+
import { Direction } from '@microsoft/fast-web-utilities';
|
|
3
|
+
import { NimbleTheme } from './types';
|
|
3
4
|
export type { NimbleThemeProvider };
|
|
4
5
|
declare global {
|
|
5
6
|
interface HTMLElementTagNameMap {
|
|
6
7
|
'nimble-theme-provider': NimbleThemeProvider;
|
|
7
8
|
}
|
|
8
9
|
}
|
|
10
|
+
export declare const direction: DesignToken<Direction>;
|
|
11
|
+
export declare const theme: DesignToken<NimbleTheme>;
|
|
9
12
|
/**
|
|
10
13
|
* The NimbleThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
|
|
11
14
|
* the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
|
|
12
15
|
* @internal
|
|
13
16
|
*/
|
|
14
17
|
declare class NimbleThemeProvider extends FoundationElement {
|
|
18
|
+
direction: Direction;
|
|
15
19
|
theme: NimbleTheme;
|
|
20
|
+
directionChanged(_prev: Direction | undefined, next: Direction | undefined): void;
|
|
16
21
|
themeChanged(_prev: NimbleTheme | undefined, next: NimbleTheme | undefined): void;
|
|
22
|
+
connectedCallback(): void;
|
|
17
23
|
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { Behavior, ElementStyles, FASTElement } from '@microsoft/fast-element';
|
|
2
|
+
/**
|
|
3
|
+
* Behavior to conditionally apply LTR and RTL stylesheets. To determine which to apply,
|
|
4
|
+
* the behavior will use the nearest DesignSystemProvider's 'direction' design system value.
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
* @example
|
|
8
|
+
* ```ts
|
|
9
|
+
* import { css } from "@microsoft/fast-element";
|
|
10
|
+
* import { DirectionalStyleSheetBehavior } from "@microsoft/fast-foundation";
|
|
11
|
+
*
|
|
12
|
+
* css`
|
|
13
|
+
* // ...
|
|
14
|
+
* `.withBehaviors(new DirectionalStyleSheetBehavior(
|
|
15
|
+
* css`:host { content: "ltr"}`),
|
|
16
|
+
* css`:host { content: "rtl"}`),
|
|
17
|
+
* )
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
export declare class DirectionalStyleSheetBehavior implements Behavior {
|
|
21
|
+
private ltr;
|
|
22
|
+
private rtl;
|
|
23
|
+
private cache;
|
|
24
|
+
constructor(ltr: ElementStyles | null, rtl: ElementStyles | null);
|
|
25
|
+
/**
|
|
26
|
+
* @internal
|
|
27
|
+
*/
|
|
28
|
+
bind(source: FASTElement & HTMLElement): void;
|
|
29
|
+
/**
|
|
30
|
+
* @internal
|
|
31
|
+
*/
|
|
32
|
+
unbind(source: FASTElement & HTMLElement): void;
|
|
33
|
+
private attach;
|
|
34
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import { borderColor,
|
|
3
|
+
import { borderColor, borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelectedRgbPartial, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay } from '../theme-provider/design-tokens';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('inline-block')}
|
|
6
6
|
|
|
@@ -25,7 +25,7 @@ export const styles = css `
|
|
|
25
25
|
flex-direction: row;
|
|
26
26
|
border-radius: 0px;
|
|
27
27
|
font-family: ${fontFamily};
|
|
28
|
-
border-bottom: ${borderWidth} solid rgba(${
|
|
28
|
+
border-bottom: ${borderWidth} solid rgba(${borderColorRgbPartial}, 0.3);
|
|
29
29
|
padding-bottom: 1px;
|
|
30
30
|
transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
|
|
31
31
|
}
|
|
@@ -68,7 +68,7 @@ export const styles = css `
|
|
|
68
68
|
|
|
69
69
|
.control::selection {
|
|
70
70
|
color: ${labelFontColor};
|
|
71
|
-
background: rgba(${
|
|
71
|
+
background: rgba(${fillColorSelectedRgbPartial}, 0.3);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
.control::placeholder {
|
|
@@ -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,WAAW,EACX,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;;;;;;uBAUlB,UAAU;yBACR,WAAW,eAAe,qBAAqB;;oCAEpC,UAAU,oBAAoB,UAAU;;;;;;;;;;mCAUzC,gBAAgB;;;;;;yBAM1B,WAAW,UAAU,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;iBAwBrD,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;;;;;iBAQd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;;;;;;;;;;;;;;;;;kBAoB1B,QAAQ;iBACT,QAAQ;gBACT,WAAW;;CAE1B,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import {
|
|
3
|
+
import { borderColorRgbPartial, borderWidth, contentFontColor, contentFontSize, controlHeight, fontFamily, standardPadding } from '../theme-provider/design-tokens';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('flex')}
|
|
6
6
|
|
|
@@ -16,7 +16,8 @@ export const styles = css `
|
|
|
16
16
|
.separator {
|
|
17
17
|
display: inline-block;
|
|
18
18
|
height: 24px;
|
|
19
|
-
border-left: calc(${borderWidth} * 2) solid
|
|
19
|
+
border-left: calc(${borderWidth} * 2) solid
|
|
20
|
+
rgba(${borderColorRgbPartial}, 0.3);
|
|
20
21
|
margin: calc(${standardPadding} / 4) calc(${standardPadding} / 2);
|
|
21
22
|
}
|
|
22
23
|
`;
|
|
@@ -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,
|
|
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,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import {
|
|
3
|
+
import { borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, failColor, fillColorSelectedRgbPartial, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, passwordRevealFilter, smallDelay } from '../theme-provider/design-tokens';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('inline-block')}
|
|
6
6
|
|
|
@@ -24,7 +24,7 @@ export const styles = css `
|
|
|
24
24
|
flex-direction: row;
|
|
25
25
|
border-radius: 0px;
|
|
26
26
|
font-family: ${fontFamily};
|
|
27
|
-
border-bottom: ${borderWidth} solid rgba(${
|
|
27
|
+
border-bottom: ${borderWidth} solid rgba(${borderColorRgbPartial}, 0.3);
|
|
28
28
|
padding-bottom: 1px;
|
|
29
29
|
transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
|
|
30
30
|
align-items: flex-end;
|
|
@@ -86,7 +86,7 @@ export const styles = css `
|
|
|
86
86
|
|
|
87
87
|
.control::selection {
|
|
88
88
|
color: ${labelFontColor};
|
|
89
|
-
background: rgba(${
|
|
89
|
+
background: rgba(${fillColorSelectedRgbPartial}, 0.3);
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
.control::placeholder {
|
|
@@ -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,
|
|
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,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,qBAAqB;;oCAEpC,UAAU,oBAAoB,UAAU;;;;;;;;;;;mCAWzC,gBAAgB;;;;;yBAK1B,WAAW,UAAU,SAAS;;;;mCAIpB,SAAS;;;;;;yBAMnB,WAAW,UAAU,wBAAwB;;;;;;;;;;;;;;;;;;;;;;kBAsBpD,oBAAoB;;;;;;;;;;;iBAWrB,cAAc;2BACJ,2BAA2B;;;;iBAIrC,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"}
|