@fluentui/web-components 3.0.0-alpha.25 → 3.0.0-alpha.27
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/CHANGELOG.md +21 -2
- package/dist/dts/theme/index.d.ts +1 -1
- package/dist/dts/theme/set-theme.d.ts +2 -0
- package/dist/esm/accordion-item/accordion-item.template.js +2 -2
- package/dist/esm/button/button.styles.js +6 -2
- package/dist/esm/button/button.styles.js.map +1 -1
- package/dist/esm/divider/divider.styles.js +14 -2
- package/dist/esm/divider/divider.styles.js.map +1 -1
- package/dist/esm/progress-bar/progress-bar.styles.js +18 -2
- package/dist/esm/progress-bar/progress-bar.styles.js.map +1 -1
- package/dist/esm/radio/radio.styles.js +12 -2
- package/dist/esm/radio/radio.styles.js.map +1 -1
- package/dist/esm/slider/slider.styles.js +19 -2
- package/dist/esm/slider/slider.styles.js.map +1 -1
- package/dist/esm/styles/partials/badge.partials.js +3 -3
- package/dist/esm/styles/partials/badge.partials.js.map +1 -1
- package/dist/esm/switch/switch.styles.js +29 -3
- package/dist/esm/switch/switch.styles.js.map +1 -1
- package/dist/esm/tab/tab.styles.js +6 -2
- package/dist/esm/tab/tab.styles.js.map +1 -1
- package/dist/esm/theme/index.js +1 -1
- package/dist/esm/theme/index.js.map +1 -1
- package/dist/esm/theme/set-theme.js +5 -0
- package/dist/esm/theme/set-theme.js.map +1 -1
- package/dist/esm/toggle-button/toggle-button.styles.js +12 -1
- package/dist/esm/toggle-button/toggle-button.styles.js.map +1 -1
- package/dist/fluent-web-components.api.json +40 -0
- package/dist/web-components.d.ts +2 -0
- package/dist/web-components.js +171 -13
- package/dist/web-components.min.js +174 -166
- package/docs/api-report.md +3 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 08 Aug 2023 04:17:57 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-alpha.27](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.27)
|
|
8
|
+
|
|
9
|
+
Tue, 08 Aug 2023 04:17:57 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.26..@fluentui/web-components_v3.0.0-alpha.27)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- (accessibility): high contrast fixes ([PR #28717](https://github.com/microsoft/fluentui/pull/28717) by brian.christopher.brady@gmail.com)
|
|
15
|
+
- Fixes low contrast in dark mode for web component badge ([PR #28766](https://github.com/microsoft/fluentui/pull/28766) by ryan@ryanmerrill.net)
|
|
16
|
+
|
|
17
|
+
## [3.0.0-alpha.26](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.26)
|
|
18
|
+
|
|
19
|
+
Mon, 07 Aug 2023 04:17:07 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.25..@fluentui/web-components_v3.0.0-alpha.26)
|
|
21
|
+
|
|
22
|
+
### Changes
|
|
23
|
+
|
|
24
|
+
- feat: Add support for scoped theming ([PR #28441](https://github.com/microsoft/fluentui/pull/28441) by miroslav.stastny@microsoft.com)
|
|
25
|
+
|
|
7
26
|
## [3.0.0-alpha.25](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.25)
|
|
8
27
|
|
|
9
|
-
Wed, 19 Jul 2023 04:18:
|
|
28
|
+
Wed, 19 Jul 2023 04:18:54 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.24..@fluentui/web-components_v3.0.0-alpha.25)
|
|
11
30
|
|
|
12
31
|
### Changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from './design-tokens.js';
|
|
2
|
-
export { setTheme } from './set-theme.js';
|
|
2
|
+
export { setTheme, setThemeFor } from './set-theme.js';
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import type { Theme } from '@fluentui/tokens';
|
|
2
|
+
import { FASTElement } from '@microsoft/fast-element';
|
|
2
3
|
/**
|
|
3
4
|
* Sets the theme tokens on defaultNode.
|
|
4
5
|
* @param theme Flat object of theme token values.
|
|
5
6
|
*/
|
|
6
7
|
export declare const setTheme: (theme: Theme) => void;
|
|
8
|
+
export declare const setThemeFor: (element: FASTElement, theme: Theme) => void;
|
|
@@ -10,7 +10,7 @@ const chevronRight20Filled = html.partial(`<svg
|
|
|
10
10
|
>
|
|
11
11
|
<path
|
|
12
12
|
d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z"
|
|
13
|
-
fill="
|
|
13
|
+
fill="currentColor"
|
|
14
14
|
/>
|
|
15
15
|
</svg>`);
|
|
16
16
|
const chevronDown20Filled = html.partial(`<svg
|
|
@@ -23,7 +23,7 @@ const chevronDown20Filled = html.partial(`<svg
|
|
|
23
23
|
>
|
|
24
24
|
<path
|
|
25
25
|
d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z"
|
|
26
|
-
fill="
|
|
26
|
+
fill="currentColor"
|
|
27
27
|
/>
|
|
28
28
|
</svg>`);
|
|
29
29
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
-
import { display } from '@microsoft/fast-foundation';
|
|
2
|
+
import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
|
|
3
3
|
import { borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, colorBrandBackground, colorBrandBackgroundHover, colorBrandBackgroundPressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackgroundDisabled, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentStroke, curveEasyEase, durationFaster, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, shadow4, spacingHorizontalL, spacingHorizontalM, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
|
|
4
4
|
// Need to support icon hover styles
|
|
5
5
|
export const styles = css `
|
|
@@ -252,5 +252,9 @@ export const styles = css `
|
|
|
252
252
|
color: ${colorNeutralForegroundDisabled};
|
|
253
253
|
cursor: not-allowed;
|
|
254
254
|
}
|
|
255
|
-
|
|
255
|
+
`.withBehaviors(forcedColorsStylesheetBehavior(css `
|
|
256
|
+
:host([appearance='transparent']:hover) .control {
|
|
257
|
+
border-color: Highlight;
|
|
258
|
+
}
|
|
259
|
+
`));
|
|
256
260
|
//# sourceMappingURL=button.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,2BAA2B,EAC3B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,qBAAqB,EACrB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,+BAA+B,EAC/B,iCAAiC,EACjC,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;sBAGJ,uBAAuB;;;;;;;;;;;;;;wBAcrB,uBAAuB;aAClC,uBAAuB;cACtB,eAAe,UAAU,mBAAmB;iBACzC,kBAAkB;;qBAEd,kBAAkB;iBACtB,eAAe;mBACb,cAAc;mBACd,kBAAkB;mBAClB,iBAAiB;2BACT,cAAc;;kCAEP,aAAa;;;;;;;;;wBASvB,4BAA4B;aACvC,4BAA4B;oBACrB,wBAAwB;;;;wBAIpB,8BAA8B;oBAClC,0BAA0B;aACjC,8BAA8B;;;;;oBAKvB,sBAAsB;eAC3B,gBAAgB,UAAU,sBAAsB;kBAC7C,OAAO,eAAe,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA8BnC,mBAAmB;;;;;;iBAMxB,kBAAkB;qBACd,iBAAiB;iBACrB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;qBAUf,iBAAiB;iBACrB,kBAAkB;iBAClB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;qBAgBf,oBAAoB;;;;;qBAKpB,gBAAgB;;;;wBAIb,oBAAoB;aAC/B,6BAA6B;;;;;wBAKlB,yBAAyB;;;;;;aAMpC,6BAA6B;;;;wBAIlB,2BAA2B;;;;oBAI/B,6BAA6B;kBAC/B,OAAO,eAAe,iBAAiB;;;;;;;;;;wBAUjC,0BAA0B;;;;wBAI1B,+BAA+B;;;;wBAI/B,iCAAiC;;;;;;wBAMjC,0BAA0B;;;;wBAI1B,qBAAqB;aAChC,uBAAuB;;;;;wBAKZ,0BAA0B;aACrC,4BAA4B;;;;;wBAKjB,4BAA4B;aACvC,8BAA8B;;;;;;;wBAOnB,0BAA0B;;;;;YAKtC,iCAAiC;;;;YAIjC,mCAAmC;;;;wBAIvB,0BAA0B;aACrC,uBAAuB;;;;wBAIZ,+BAA+B;aAC1C,iCAAiC;;;;wBAItB,iCAAiC;aAC5C,mCAAmC;;;;;;;;;;;;;wBAaxB,0BAA0B;;;;;;;wBAO1B,8BAA8B;oBAClC,0BAA0B;aACjC,8BAA8B;;;CAG1C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
-
import { display } from '@microsoft/fast-foundation';
|
|
2
|
+
import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
|
|
3
3
|
import { colorBrandForeground1, colorBrandStroke1, colorNeutralForeground1, colorNeutralForeground2, colorNeutralForeground3, colorNeutralStroke1, colorNeutralStroke2, colorNeutralStroke3, fontFamilyBase, fontSizeBase200, fontWeightRegular, strokeWidthThin, } from '../theme/design-tokens.js';
|
|
4
4
|
/** Divider styles
|
|
5
5
|
* @public
|
|
@@ -111,5 +111,17 @@ export const styles = css `
|
|
|
111
111
|
:host([appearance='subtle']) ::slotted(*) {
|
|
112
112
|
color: ${colorNeutralForeground3};
|
|
113
113
|
}
|
|
114
|
-
|
|
114
|
+
`.withBehaviors(forcedColorsStylesheetBehavior(css `
|
|
115
|
+
:host([appearance='strong'])::before,
|
|
116
|
+
:host([appearance='strong'])::after,
|
|
117
|
+
:host([appearance='brand'])::before,
|
|
118
|
+
:host([appearance='brand'])::after,
|
|
119
|
+
:host([appearance='subtle'])::before,
|
|
120
|
+
:host([appearance='subtle'])::after,
|
|
121
|
+
:host::after,
|
|
122
|
+
:host::before {
|
|
123
|
+
background: WindowText;
|
|
124
|
+
color: WindowText;
|
|
125
|
+
}
|
|
126
|
+
`));
|
|
115
127
|
//# sourceMappingURL=divider.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../src/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../src/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;kBASD,mBAAmB;;;;;cAKvB,eAAe;;;;;;;;aAQhB,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAyCvB,eAAe;;;;;;;;;;;;;;;;;;;;;kBAqBV,mBAAmB;;;aAGxB,uBAAuB;;;;kBAIlB,iBAAiB;;;aAGtB,qBAAqB;;;;kBAIhB,mBAAmB;;;aAGxB,uBAAuB;;CAEnC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;GAYjC,CAAC,CACH,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
-
import { display } from '@microsoft/fast-foundation';
|
|
2
|
+
import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
|
|
3
3
|
import { borderRadiusMedium, colorBrandBackground2, colorCompoundBrandBackground, colorNeutralBackground6, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteRedBackground2, colorPaletteRedBackground3, } from '../theme/design-tokens.js';
|
|
4
4
|
/** ProgressBar styles
|
|
5
5
|
* @public
|
|
@@ -153,5 +153,21 @@ export const styles = css `
|
|
|
153
153
|
opacity: 1;
|
|
154
154
|
}
|
|
155
155
|
}
|
|
156
|
-
|
|
156
|
+
`.withBehaviors(forcedColorsStylesheetBehavior(css `
|
|
157
|
+
.progress {
|
|
158
|
+
background-color: HighlightText;
|
|
159
|
+
}
|
|
160
|
+
.determinate,
|
|
161
|
+
:host([validation-state='success']) .determinate,
|
|
162
|
+
:host([validation-state='warning']) .determinate,
|
|
163
|
+
:host([validation-state='error']) .determinate,
|
|
164
|
+
:host([validation-state='success']) ..indeterminate-indicator-1,
|
|
165
|
+
:host([validation-state='success']) ..indeterminate-indicator-2,
|
|
166
|
+
:host([validation-state='warning']) .indeterminate-indicator-1,
|
|
167
|
+
:host([validation-state='warning']) .indeterminate-indicator-2,
|
|
168
|
+
:host([validation-state='error']) .indeterminate-indicator-1,
|
|
169
|
+
:host([validation-state='error']) .indeterminate-indicator-2 {
|
|
170
|
+
background-color: Highlight;
|
|
171
|
+
}
|
|
172
|
+
`));
|
|
157
173
|
//# sourceMappingURL=progress-bar.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,4BAA4B,EAC5B,uBAAuB,EACvB,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,EAC5B,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;qBAME,kBAAkB;;;;;;;;;;;;;;;;;wBAiBf,0BAA0B;;;;;;;QAO1C,0BAA0B;QAC1B,0BAA0B;QAC1B,0BAA0B;;;;;wBAKV,iCAAiC;;;;;;;QAOjD,iCAAiC;QACjC,iCAAiC;QACjC,iCAAiC;;;;;wBAKjB,4BAA4B;;;;;;;QAO5C,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;;;;;;;;;wBASf,4BAA4B;qBAC/B,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBjC,CAAC,CACH,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
-
import { display } from '@microsoft/fast-foundation';
|
|
2
|
+
import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
|
|
3
3
|
import { borderRadiusCircular, borderRadiusSmall, colorCompoundBrandForeground1, colorCompoundBrandForeground1Pressed, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralForeground2, colorNeutralForeground3, colorNeutralForegroundDisabled, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorStrokeFocus1, colorStrokeFocus2, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, spacingHorizontalS, spacingHorizontalXS, spacingVerticalS, } from '../theme/design-tokens.js';
|
|
4
4
|
/** Radio styles
|
|
5
5
|
* @public
|
|
@@ -104,5 +104,15 @@ export const styles = css `
|
|
|
104
104
|
:host([disabled]) .checked-indicator {
|
|
105
105
|
background: ${colorNeutralForegroundDisabled};
|
|
106
106
|
}
|
|
107
|
-
|
|
107
|
+
`.withBehaviors(forcedColorsStylesheetBehavior(css `
|
|
108
|
+
:host .control {
|
|
109
|
+
border-color: InactiveBorder;
|
|
110
|
+
}
|
|
111
|
+
:host([aria-checked='true']) .checked-indicator,
|
|
112
|
+
:host([aria-checked='true']:active) .checked-indicator,
|
|
113
|
+
:host([aria-checked='true']:hover) .checked-indicator {
|
|
114
|
+
background-color: Highlight;
|
|
115
|
+
border-color: ActiveBorder;
|
|
116
|
+
}
|
|
117
|
+
`));
|
|
108
118
|
//# sourceMappingURL=radio.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,6BAA6B,EAC7B,oCAAoC,EACpC,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;WAKf,mBAAmB;;;;;;;;gCAQE,uBAAuB;0BAC7B,kBAAkB;8BACd,4BAA4B;4CACd,6BAA6B;qBACpD,uBAAuB;;;8BAGd,8BAA8B;4CAChB,8BAA8B;qBACrD,8BAA8B;;;;mBAIhC,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;oDAQgB,4BAA4B;qBAC3D,oBAAoB;;;;cAI3B,gBAAgB,IAAI,kBAAkB;;;;;;qBAM/B,oBAAoB;;;;;;aAM5B,uBAAuB;;;qBAGf,iBAAiB;4BACV,iBAAiB;yBACpB,iBAAiB;;;oBAGtB,iCAAiC;;;oBAGjC,mCAAmC;;;;;;gDAMP,4BAA4B;;;kEAGV,6BAA6B;;;oBAG3E,6BAA6B;;;wBAGzB,6BAA6B;;;oBAGjC,+BAA+B;;;kBAGjC,oCAAoC;;;aAGzC,8BAA8B;;;;;oBAKvB,8BAA8B;;;kBAGhC,8BAA8B;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;GAUjC,CAAC,CACH,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
-
import { display } from '@microsoft/fast-foundation';
|
|
2
|
+
import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
|
|
3
3
|
import { borderRadiusCircular, borderRadiusMedium, borderRadiusSmall, colorBrandBackground, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorNeutralBackground1, colorNeutralBackgroundDisabled, colorNeutralForegroundDisabled, colorNeutralStroke1, colorNeutralStrokeAccessible, colorNeutralStrokeDisabled, colorStrokeFocus1, colorStrokeFocus2, } from '../theme/design-tokens.js';
|
|
4
4
|
/** Text styles
|
|
5
5
|
* @public
|
|
@@ -182,5 +182,22 @@ export const styles = css `
|
|
|
182
182
|
width: 100%;
|
|
183
183
|
bottom: 0;
|
|
184
184
|
}
|
|
185
|
-
|
|
185
|
+
`.withBehaviors(forcedColorsStylesheetBehavior(css `
|
|
186
|
+
.track:hover,
|
|
187
|
+
.track:active,
|
|
188
|
+
.track {
|
|
189
|
+
background: WindowText;
|
|
190
|
+
}
|
|
191
|
+
.thumb-cursor:hover,
|
|
192
|
+
.thumb-cursor:active,
|
|
193
|
+
.thumb-cursor {
|
|
194
|
+
background: ButtonText;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
:host(:hover) .track-start,
|
|
198
|
+
.track-start:active,
|
|
199
|
+
.track-start {
|
|
200
|
+
background: Highlight;
|
|
201
|
+
}
|
|
202
|
+
`));
|
|
186
203
|
//# sourceMappingURL=slider.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.styles.js","sourceRoot":"","sources":["../../../src/slider/slider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"slider.styles.js","sourceRoot":"","sources":["../../../src/slider/slider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,4BAA4B,EAC5B,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;qBAaL,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;4BA2BV,iBAAiB;yBACpB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAkClB,oBAAoB;qBACvB,oBAAoB;mDACU,uBAAuB,eAAe,mBAAmB;;;wBAGpF,iCAAiC;;;wBAGjC,mCAAmC;;;wBAGnC,8BAA8B;mDACH,uBAAuB,eAAe,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;wBAuB3F,4BAA4B;qBAC/B,kBAAkB;;;;;;;qBAOlB,kBAAkB;;;;;;;QAO/B,uBAAuB;QACvB,uBAAuB;;;;;;;;;wBASP,8BAA8B;;;;;;;;;;;;;;;;;;;wBAmB9B,4BAA4B;;;;qBAI/B,kBAAkB;;;wBAGf,8BAA8B;;;wBAG9B,iCAAiC;;;wBAGjC,8BAA8B;;;wBAG9B,mCAAmC;;;;;;;CAO1D,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;GAiBjC,CAAC,CACH,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import { borderRadiusCircular, colorBrandBackground, colorBrandBackground2, colorBrandForeground1, colorBrandForeground2, colorBrandStroke2, colorNeutralBackground1, colorNeutralBackground4, colorNeutralBackground5, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForegroundInverted, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralStroke2, colorNeutralStrokeAccessible, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground3, colorPaletteGreenBackground1, colorPaletteGreenBackground3, colorPaletteGreenBorder2, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteRedBackground1, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedForeground1, colorPaletteRedForeground3, colorPaletteYellowBackground1, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowForeground2, colorTransparentStroke, fontFamilyBase, fontSizeBase100, fontSizeBase200, fontWeightSemibold, lineHeightBase100, lineHeightBase200, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, strokeWidthThin, } from '../../theme/design-tokens.js';
|
|
3
|
+
import { borderRadiusCircular, colorBrandBackground, colorBrandBackground2, colorBrandForeground1, colorBrandForeground2, colorBrandStroke2, colorNeutralBackground1, colorNeutralBackground4, colorNeutralBackground5, colorNeutralForeground1, colorNeutralForeground1Static, colorNeutralForeground3, colorNeutralForegroundInverted, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralStroke2, colorNeutralStrokeAccessible, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground3, colorPaletteGreenBackground1, colorPaletteGreenBackground3, colorPaletteGreenBorder2, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteRedBackground1, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedForeground1, colorPaletteRedForeground3, colorPaletteYellowBackground1, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowForeground2, colorTransparentStroke, fontFamilyBase, fontSizeBase100, fontSizeBase200, fontWeightSemibold, lineHeightBase100, lineHeightBase200, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, strokeWidthThin, } from '../../theme/design-tokens.js';
|
|
4
4
|
const textPadding = spacingHorizontalXXS;
|
|
5
5
|
export const badgeBaseStyles = css.partial `
|
|
6
6
|
${display('inline-flex')} :host {
|
|
@@ -136,7 +136,7 @@ export const badgeFilledStyles = css.partial `
|
|
|
136
136
|
|
|
137
137
|
:host([color='warning']) {
|
|
138
138
|
background-color: ${colorPaletteYellowBackground3};
|
|
139
|
-
color: ${
|
|
139
|
+
color: ${colorNeutralForeground1Static};
|
|
140
140
|
}
|
|
141
141
|
`;
|
|
142
142
|
/**
|
|
@@ -145,7 +145,7 @@ export const badgeFilledStyles = css.partial `
|
|
|
145
145
|
*/
|
|
146
146
|
export const badgeGhostStyles = css.partial `
|
|
147
147
|
:host([appearance='ghost']) {
|
|
148
|
-
color: ${
|
|
148
|
+
color: ${colorBrandForeground1};
|
|
149
149
|
background-color: initial;
|
|
150
150
|
}
|
|
151
151
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.partials.js","sourceRoot":"","sources":["../../../../src/styles/partials/badge.partials.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,6BAA6B,EAC7B,oCAAoC,EACpC,mBAAmB,EACnB,4BAA4B,EAC5B,iCAAiC,EACjC,iCAAiC,EACjC,6BAA6B,EAC7B,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,EAC5B,4BAA4B,EAC5B,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,EAC5B,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,EAC1B,0BAA0B,EAC1B,6BAA6B,EAC7B,6BAA6B,EAC7B,yBAAyB,EACzB,6BAA6B,EAC7B,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,GAChB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,WAAW,GAAG,oBAAoB,CAAC;AAEzC,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA;IACtC,OAAO,CAAC,aAAa,CAAC;;;;;mBAKP,cAAc;mBACd,kBAAkB;iBACpB,eAAe;mBACb,iBAAiB;;;2BAGT,mBAAmB,MAAM,WAAW;qBAC1C,oBAAoB;oBACrB,sBAAsB;wBAClB,oBAAoB;aAC/B,6BAA6B;;;;;;;;;;;;;;;;oBAgBtB,eAAe;;;;CAIlC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0BzB,eAAe;mBACb,iBAAiB;2BACT,oBAAoB,MAAM,WAAW;;;;;;;;iBAQ/C,eAAe;mBACb,iBAAiB;2BACT,mBAAmB,MAAM,WAAW;;;;;;;;iBAQ9C,eAAe;mBACb,iBAAiB;2BACT,uBAAuB,MAAM,WAAW;;;;;CAKlE,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAAA;;wBAEpB,0BAA0B;aACrC,6BAA6B;;;;wBAIlB,uBAAuB;aAClC,uBAAuB;;;;wBAIZ,uBAAuB;aAClC,uBAAuB;;;;wBAIZ,iCAAiC;aAC5C,6BAA6B;;;;wBAIlB,uBAAuB;aAClC,uBAAuB;;;;wBAIZ,4BAA4B;aACvC,6BAA6B;;;;wBAIlB,6BAA6B;aACxC,
|
|
1
|
+
{"version":3,"file":"badge.partials.js","sourceRoot":"","sources":["../../../../src/styles/partials/badge.partials.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
-
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import { borderRadiusCircular, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorNeutralBackgroundDisabled, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedPressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorTransparentBackground, curveEasyEase, durationNormal, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, spacingHorizontalS, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalS, spacingVerticalXS, } from '../theme/design-tokens.js';
|
|
2
|
+
import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
|
|
3
|
+
import { borderRadiusCircular, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorNeutralBackgroundDisabled, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedPressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorTransparentBackground, colorTransparentStroke, curveEasyEase, durationNormal, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, shadow4, spacingHorizontalS, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalS, spacingVerticalXS, strokeWidthThick, } from '../theme/design-tokens.js';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('inline-flex')}
|
|
6
6
|
|
|
@@ -111,5 +111,31 @@ export const styles = css `
|
|
|
111
111
|
:host([aria-checked='true'][disabled]) .checked-indicator {
|
|
112
112
|
background: ${colorNeutralForegroundDisabled};
|
|
113
113
|
}
|
|
114
|
-
|
|
114
|
+
|
|
115
|
+
:host(:focus-visible) {
|
|
116
|
+
border-color: ${colorTransparentStroke};
|
|
117
|
+
outline: ${strokeWidthThick} solid ${colorTransparentStroke};
|
|
118
|
+
box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
|
|
119
|
+
}
|
|
120
|
+
`.withBehaviors(forcedColorsStylesheetBehavior(css `
|
|
121
|
+
.switch {
|
|
122
|
+
border-color: InactiveBorder;
|
|
123
|
+
}
|
|
124
|
+
:host([aria-checked='true']) .switch,
|
|
125
|
+
:host([aria-checked='true']:active) .switch,
|
|
126
|
+
:host([aria-checked='true']:hover) .switch {
|
|
127
|
+
background: Highlight;
|
|
128
|
+
border-color: Highlight;
|
|
129
|
+
}
|
|
130
|
+
.checked-indicator,
|
|
131
|
+
:host(:hover) .checked-indicator,
|
|
132
|
+
:host(:active) .checked-indicator {
|
|
133
|
+
background-color: ActiveCaption;
|
|
134
|
+
}
|
|
135
|
+
:host([aria-checked='true']) .checked-indicator,
|
|
136
|
+
:host([aria-checked='true']:hover) .checked-indicator,
|
|
137
|
+
:host([aria-checked='true']:active) .checked-indicator {
|
|
138
|
+
background-color: ButtonFace;
|
|
139
|
+
}
|
|
140
|
+
`));
|
|
115
141
|
//# sourceMappingURL=switch.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EACL,oBAAoB,EACpB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,mCAAmC,EACnC,qCAAqC,EACrC,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,0BAA0B,EAC1B,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;aAwBb,uBAAuB;mBACjB,iBAAiB;iBACnB,eAAe;mBACb,iBAAiB;mBACjB,cAAc;eAClB,iBAAiB,IAAI,mBAAmB;;;;;;;;;iBAStC,oBAAoB;;;;wBAIb,0BAA0B;wBAC1B,4BAA4B;qBAC/B,oBAAoB;;;cAG3B,gBAAgB,IAAI,kBAAkB;;;;oBAIhC,iCAAiC;;;oBAGjC,mCAAmC;;;;wBAI/B,0BAA0B;;;;;kBAKhC,4BAA4B;;;kBAG5B,iCAAiC;oBAC/B,iCAAiC;;;kBAGnC,mCAAmC;oBACjC,mCAAmC;;;kBAGrC,8BAA8B;oBAC5B,0BAA0B;;;;;;wBAMtB,uBAAuB;2BACpB,cAAc;kCACP,aAAa;;;;wBAIvB,8BAA8B;;;;kBAIpC,mCAAmC;;;kBAGnC,qCAAqC;;;wBAG/B,4BAA4B;;;wBAG5B,8BAA8B;;;;kBAIpC,8BAA8B;;;kBAG9B,8BAA8B;;;;oBAI5B,sBAAsB;eAC3B,gBAAgB,UAAU,sBAAsB;kBAC7C,OAAO,eAAe,iBAAiB;;CAExD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;GAoBjC,CAAC,CACH,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
-
import { display } from '@microsoft/fast-foundation';
|
|
2
|
+
import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
|
|
3
3
|
import { borderRadiusCircular, borderRadiusMedium, borderRadiusSmall, colorCompoundBrandStroke, colorNeutralForeground1, colorNeutralForeground2, colorNeutralForegroundDisabled, colorNeutralStroke1Hover, colorStrokeFocus1, colorStrokeFocus2, fontFamilyBase, fontSizeBase300, fontWeightSemibold, lineHeightBase300, spacingHorizontalM, spacingHorizontalMNudge, } from '../theme/design-tokens.js';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('inline-flex')}
|
|
@@ -90,5 +90,9 @@ export const styles = css `
|
|
|
90
90
|
box-shadow: 0 0 0 3px ${colorStrokeFocus2};
|
|
91
91
|
outline: 1px solid ${colorStrokeFocus1};
|
|
92
92
|
}
|
|
93
|
-
|
|
93
|
+
`.withBehaviors(forcedColorsStylesheetBehavior(css `
|
|
94
|
+
:host([aria-selected='true'])::after {
|
|
95
|
+
background-color: Highlight;
|
|
96
|
+
}
|
|
97
|
+
`));
|
|
94
98
|
//# sourceMappingURL=tab.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../../src/tab/tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../../src/tab/tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,wBAAwB,EACxB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;mBAQP,iBAAiB;mBACjB,cAAc;iBAChB,eAAe;aACnB,uBAAuB;;;eAGrB,kBAAkB,IAAI,uBAAuB;qBACvC,kBAAkB;;;;;;;;;aAS1B,uBAAuB;mBACjB,kBAAkB;;;;;;;;mBAQlB,iBAAiB;mBACjB,kBAAkB;;;;wBAIb,wBAAwB;qBAC3B,oBAAoB;;;;;;;;wBAQjB,wBAAwB;qBAC3B,oBAAoB;;;;;;;;wBAQjB,8BAA8B;;;;;;;;;;;;;;;YAe1C,8BAA8B;aAC7B,8BAA8B;;;;;;;;;;;;qBAYtB,iBAAiB;4BACV,iBAAiB;yBACpB,iBAAiB;;CAEzC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}
|
package/dist/esm/theme/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -9,4 +9,9 @@ export const setTheme = (theme) => {
|
|
|
9
9
|
tokens[t].withDefault(theme[t]);
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
+
export const setThemeFor = (element, theme) => {
|
|
13
|
+
for (const t of tokenNames) {
|
|
14
|
+
tokens[t].setValueFor(element, theme[t]);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
12
17
|
//# sourceMappingURL=set-theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAE7C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAoB,CAAC;AAE1D;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;KAC3C;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;KACpD;AACH,CAAC,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
+
import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
|
|
2
3
|
import { styles as ButtonStyles } from '../button/button.styles.js';
|
|
3
4
|
import { colorBrandBackgroundHover, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralForeground1, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, strokeWidthThin, } from '../theme/design-tokens.js';
|
|
4
5
|
// Need to support icon hover styles
|
|
@@ -79,5 +80,15 @@ export const styles = css `
|
|
|
79
80
|
:host([aria-pressed='true'][appearance='transparent']:active) .control {
|
|
80
81
|
color: ${colorNeutralForeground2BrandPressed};
|
|
81
82
|
}
|
|
82
|
-
|
|
83
|
+
`.withBehaviors(forcedColorsStylesheetBehavior(css `
|
|
84
|
+
:host([aria-pressed='true']) .control,
|
|
85
|
+
:host([aria-pressed='true'][appearance='primary']) .control,
|
|
86
|
+
:host([aria-pressed='true'][appearance='subtle']) .control,
|
|
87
|
+
:host([aria-pressed='true'][appearance='outline']) .control,
|
|
88
|
+
:host([aria-pressed='true'][appearance='transparent']) .control,
|
|
89
|
+
:host([aria-pressed='true'][appearance='transparent']) .control {
|
|
90
|
+
background: SelectedItem;
|
|
91
|
+
color: SelectedItemText;
|
|
92
|
+
}
|
|
93
|
+
`));
|
|
83
94
|
//# sourceMappingURL=toggle-button.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,yBAAyB,EACzB,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,oCAAoC,EACpC,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,EAC7B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;oBAGI,mBAAmB;wBACf,+BAA+B;aAC1C,uBAAuB;oBAChB,eAAe;;;;oBAIf,wBAAwB;wBACpB,4BAA4B;;;;oBAIhC,0BAA0B;wBACtB,8BAA8B;;;;;wBAK9B,4BAA4B;aACvC,6BAA6B;;;;wBAIlB,yBAAyB;;;;wBAIzB,2BAA2B;;;;;wBAK3B,6BAA6B;aACxC,+BAA+B;;;;wBAIpB,0BAA0B;aACrC,4BAA4B;;;;wBAIjB,4BAA4B;aACvC,8BAA8B;;;;;wBAKnB,kCAAkC;;;;;wBAKlC,+BAA+B;;;;;wBAK/B,iCAAiC;;;;;aAK5C,oCAAoC;;;;aAIpC,iCAAiC;;;;aAIjC,mCAAmC;;CAE/C,CAAC"}
|
|
1
|
+
{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,yBAAyB,EACzB,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,oCAAoC,EACpC,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,EAC7B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;oBAGI,mBAAmB;wBACf,+BAA+B;aAC1C,uBAAuB;oBAChB,eAAe;;;;oBAIf,wBAAwB;wBACpB,4BAA4B;;;;oBAIhC,0BAA0B;wBACtB,8BAA8B;;;;;wBAK9B,4BAA4B;aACvC,6BAA6B;;;;wBAIlB,yBAAyB;;;;wBAIzB,2BAA2B;;;;;wBAK3B,6BAA6B;aACxC,+BAA+B;;;;wBAIpB,0BAA0B;aACrC,4BAA4B;;;;wBAIjB,4BAA4B;aACvC,8BAA8B;;;;;wBAKnB,kCAAkC;;;;;wBAKlC,+BAA+B;;;;;wBAK/B,iCAAiC;;;;;aAK5C,oCAAoC;;;;aAIpC,iCAAiC;;;;aAIjC,mCAAmC;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;GAUjC,CAAC,CACH,CAAC"}
|
|
@@ -17562,6 +17562,46 @@
|
|
|
17562
17562
|
"endIndex": 4
|
|
17563
17563
|
}
|
|
17564
17564
|
},
|
|
17565
|
+
{
|
|
17566
|
+
"kind": "Variable",
|
|
17567
|
+
"canonicalReference": "@fluentui/web-components!setThemeFor:var",
|
|
17568
|
+
"docComment": "",
|
|
17569
|
+
"excerptTokens": [
|
|
17570
|
+
{
|
|
17571
|
+
"kind": "Content",
|
|
17572
|
+
"text": "setThemeFor: "
|
|
17573
|
+
},
|
|
17574
|
+
{
|
|
17575
|
+
"kind": "Content",
|
|
17576
|
+
"text": "(element: "
|
|
17577
|
+
},
|
|
17578
|
+
{
|
|
17579
|
+
"kind": "Reference",
|
|
17580
|
+
"text": "FASTElement",
|
|
17581
|
+
"canonicalReference": "@microsoft/fast-element!FASTElement:interface"
|
|
17582
|
+
},
|
|
17583
|
+
{
|
|
17584
|
+
"kind": "Content",
|
|
17585
|
+
"text": ", theme: "
|
|
17586
|
+
},
|
|
17587
|
+
{
|
|
17588
|
+
"kind": "Reference",
|
|
17589
|
+
"text": "Theme",
|
|
17590
|
+
"canonicalReference": "@fluentui/tokens!Theme:type"
|
|
17591
|
+
},
|
|
17592
|
+
{
|
|
17593
|
+
"kind": "Content",
|
|
17594
|
+
"text": ") => void"
|
|
17595
|
+
}
|
|
17596
|
+
],
|
|
17597
|
+
"isReadonly": true,
|
|
17598
|
+
"releaseTag": "Public",
|
|
17599
|
+
"name": "setThemeFor",
|
|
17600
|
+
"variableTypeTokenRange": {
|
|
17601
|
+
"startIndex": 1,
|
|
17602
|
+
"endIndex": 6
|
|
17603
|
+
}
|
|
17604
|
+
},
|
|
17565
17605
|
{
|
|
17566
17606
|
"kind": "Variable",
|
|
17567
17607
|
"canonicalReference": "@fluentui/web-components!shadow16:var",
|
package/dist/web-components.d.ts
CHANGED
|
@@ -2417,6 +2417,8 @@ export declare const RadioTemplate: ElementViewTemplate<Radio>;
|
|
|
2417
2417
|
*/
|
|
2418
2418
|
export declare const setTheme: (theme: Theme) => void;
|
|
2419
2419
|
|
|
2420
|
+
export declare const setThemeFor: (element: FASTElement, theme: Theme) => void;
|
|
2421
|
+
|
|
2420
2422
|
export declare const shadow16: CSSDesignToken<string>;
|
|
2421
2423
|
|
|
2422
2424
|
export declare const shadow16Brand: CSSDesignToken<string>;
|