diff --git a/change/@fluentui-react-731171c2-4a2b-4484-956b-667804fe01e2.json b/change/@fluentui-react-731171c2-4a2b-4484-956b-667804fe01e2.json new file mode 100644 index 00000000000000..3f63c66b9510e1 --- /dev/null +++ b/change/@fluentui-react-731171c2-4a2b-4484-956b-667804fe01e2.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: update cell HCM bg color to not clip focus indicator", + "packageName": "@fluentui/react", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-spinbutton-2e315b0b-23fc-4c22-a235-d2a5cc90cc22.json b/change/@fluentui-react-spinbutton-2e315b0b-23fc-4c22-a235-d2a5cc90cc22.json new file mode 100644 index 00000000000000..4a70a446705dde --- /dev/null +++ b/change/@fluentui-react-spinbutton-2e315b0b-23fc-4c22-a235-d2a5cc90cc22.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: update SpinButton to use makeResetStyles", + "packageName": "@fluentui/react-spinbutton", + "email": "seanmonahan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-spinbutton/package.json b/packages/react-components/react-spinbutton/package.json index 478727d6e52b3a..2e4b455d8ed672 100644 --- a/packages/react-components/react-spinbutton/package.json +++ b/packages/react-components/react-spinbutton/package.json @@ -37,7 +37,6 @@ "@fluentui/keyboard-keys": "^9.0.1", "@fluentui/react-field": "9.0.0-alpha.20", "@fluentui/react-icons": "^2.0.175", - "@fluentui/react-input": "^9.3.3", "@fluentui/react-shared-contexts": "^9.2.0", "@fluentui/react-theme": "^9.1.5", "@fluentui/react-utilities": "^9.5.3", diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts index 4fa4ac75003ed5..8ffe145b2a0aa5 100644 --- a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts +++ b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts @@ -1,8 +1,8 @@ import { SlotClassNames } from '@fluentui/react-utilities'; -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import type { GriffelResetStyle } from '@griffel/react'; import type { SpinButtonSlots, SpinButtonState } from './SpinButton.types'; -import { tokens } from '@fluentui/react-theme'; -import { useInputStyles_unstable } from '@fluentui/react-input'; +import { tokens, typographyStyles } from '@fluentui/react-theme'; export const spinButtonClassNames: SlotClassNames = { root: 'fui-SpinButton', @@ -15,83 +15,150 @@ const spinButtonExtraClassNames = { buttonActive: 'fui-SpinButton__button_active', }; -const useRootStyles = makeStyles({ - base: { - display: 'inline-grid', - gridTemplateColumns: `1fr 24px`, - gridTemplateRows: '1fr 1fr', - columnGap: tokens.spacingHorizontalXS, - rowGap: 0, - paddingRight: 0, - position: 'relative', - // Remove the border styles from react-input - ...shorthands.border('0'), - isolation: 'isolate', - - // Apply border styles on the ::before pseudo element. - // We cannot use ::after since react-input uses that - // for the selector styles. - // Using the pseudo element allows us to place the border - // above content in the component which ensures the buttons - // line up visually with the border as expected. Without this - // there is a bit of a gap which can become very noticeable - // at high zoom or when OS zoom levels are not divisible by 2 - // (e.g., 150% on Windows in Firefox) - // This is most noticeable on the "outline" appearance which is - // also the default so it feels worth the extra ceremony to get right. - '::before': { - content: '""', - boxSizing: 'border-box', - position: 'absolute', - top: 0, - right: 0, - bottom: 0, - left: 0, - ...shorthands.borderRadius(tokens.borderRadiusMedium), - pointerEvents: 'none', - zIndex: 10, +// TODO(sharing) should these be shared somewhere? +const fieldHeights = { + small: '24px', + medium: '32px', +}; + +const rootBaseStyles: GriffelResetStyle = { + display: 'inline-grid', + gridTemplateColumns: `1fr 24px`, + gridTemplateRows: '1fr 1fr', + columnGap: tokens.spacingHorizontalXS, + rowGap: 0, + position: 'relative', + isolation: 'isolate', + + backgroundColor: tokens.colorNeutralBackground1, + minHeight: fieldHeights.medium, + padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`, + borderRadius: tokens.borderRadiusMedium, + + // Apply border styles on the ::before pseudo element. + // We cannot use ::after since react-input uses that + // for the selector styles. + // Using the pseudo element allows us to place the border + // above content in the component which ensures the buttons + // line up visually with the border as expected. Without this + // there is a bit of a gap which can become very noticeable + // at high zoom or when OS zoom levels are not divisible by 2 + // (e.g., 150% on Windows in Firefox) + // This is most noticeable on the "outline" appearance which is + // also the default so it feels worth the extra ceremony to get right. + '::before': { + content: '""', + boxSizing: 'border-box', + position: 'absolute', + top: 0, + right: 0, + bottom: 0, + left: 0, + pointerEvents: 'none', + zIndex: 10, + border: `1px solid ${tokens.colorNeutralStroke1}`, + borderBottomColor: tokens.colorNeutralStrokeAccessible, + borderRadius: tokens.borderRadiusMedium, + }, + + '::after': { + boxSizing: 'border-box', + content: '""', + position: 'absolute', + right: 0, + bottom: 0, + left: 0, + zIndex: 20, + + // Maintaining the correct corner radius: + // Use the whole border-radius as the height and only put radii on the bottom corners. + // (Otherwise the radius would be automatically reduced to fit available space.) + // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0. + height: `max(2px, ${tokens.borderRadiusMedium})`, + borderBottomLeftRadius: tokens.borderRadiusMedium, + borderBottomRightRadius: tokens.borderRadiusMedium, + + // Flat 2px border: + // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off. + // (This could be done without trimming using `background: linear-gradient(...)`, but using + // borderBottom makes it easier for people to override the color if needed.) + borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`, + clipPath: 'inset(calc(100% - 2px) 0 0 0)', + + // Animation for focus OUT + transform: 'scaleX(0)', + transitionProperty: 'transform', + transitionDuration: tokens.durationUltraFast, + transitionDelay: tokens.curveAccelerateMid, + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + transitionDelay: '0.01ms', + }, + }, + + ':focus-within::after': { + // Animation for focus IN + transform: 'scaleX(1)', + transitionProperty: 'transform', + transitionDuration: tokens.durationNormal, + transitionDelay: tokens.curveDecelerateMid, + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + transitionDelay: '0.01ms', }, + }, + ':focus-within:active::after': { + // This is if the user clicks the field again while it's already focused + borderBottomColor: tokens.colorCompoundBrandStrokePressed, + }, + ':focus-within': { + outlineWidth: '2px', + outlineStyle: 'solid', + outlineColor: 'transparent', + }, +}; - '::after': { - right: 0, - bottom: 0, - left: 0, - zIndex: 20, +const rootInteractiveStyles: GriffelResetStyle = { + ':hover::before': { + borderColor: tokens.colorNeutralStroke1Hover, + borderBottomColor: tokens.colorNeutralStrokeAccessibleHover, + }, + // DO NOT add a space between the selectors! It changes the behavior of make-styles. + ':active,:focus-within': { + '::before': { + borderColor: tokens.colorNeutralStroke1Pressed, + borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed, }, }, +}; +const useRootNonInteractiveClassName = makeResetStyles(rootBaseStyles); +const useRootInteractiveClassName = makeResetStyles({ ...rootBaseStyles, ...rootInteractiveStyles }); + +const useRootStyles = makeStyles({ small: { + minHeight: fieldHeights.small, + ...typographyStyles.caption1, paddingLeft: tokens.spacingHorizontalS, }, - // intentionally empty - medium: {}, + medium: { + // set by useRootNonInteractiveClassName + }, outline: { - '::before': { - ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1), - borderBottomColor: tokens.colorNeutralStrokeAccessible, - }, + // set by useRootNonInteractiveClassName }, outlineInteractive: { - ':hover': { - '::before': { - ...shorthands.borderColor(tokens.colorNeutralStroke1Hover), - borderBottomColor: tokens.colorNeutralStrokeAccessibleHover, - }, - }, - // DO NOT add a space between the selectors! It changes the behavior of make-styles. - ':active,:focus-within': { - '::before': { - ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed), - borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed, - }, - }, + // set by useRootInteractiveClassName }, underline: { '::before': { + ...shorthands.borderWidth(0, 0, '1px', 0), ...shorthands.borderRadius(0), // corners look strange if rounded ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible), }, @@ -109,6 +176,7 @@ const useRootStyles = makeStyles({ borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed, }, }, + '::after': shorthands.borderRadius(0), // remove rounded corners from focus underline }, filled: { @@ -117,6 +185,13 @@ const useRootStyles = makeStyles({ }, }, + 'filled-darker': { + backgroundColor: tokens.colorNeutralBackground3, + }, + 'filled-lighter': { + backgroundColor: tokens.colorNeutralBackground1, + }, + filledInteractive: { // DO NOT add a space between the selectors! It changes the behavior of make-styles. ':hover,:focus-within': { @@ -136,6 +211,8 @@ const useRootStyles = makeStyles({ }, disabled: { + cursor: 'not-allowed', + backgroundColor: tokens.colorTransparentBackground, '::before': { ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), @@ -146,50 +223,106 @@ const useRootStyles = makeStyles({ }, }); +const useInputClassName = makeResetStyles({ + gridColumnStart: '1', + gridColumnEnd: '2', + gridRowStart: '1', + gridRowEnd: '3', + outlineStyle: 'none', + border: '0', + padding: '0', + color: tokens.colorNeutralForeground1, + backgroundColor: 'transparent', + ...typographyStyles.body1, + + '::placeholder': { + color: tokens.colorNeutralForeground4, + opacity: 1, // browser style override + }, +}); + const useInputStyles = makeStyles({ - base: { - gridColumnStart: '1', - gridColumnEnd: '2', - gridRowStart: '1', - gridRowEnd: '3', - outlineStyle: 'none', - ...shorthands.padding(0), + small: { + ...typographyStyles.caption1, + }, + disabled: { + color: tokens.colorNeutralForegroundDisabled, + cursor: 'not-allowed', + backgroundColor: tokens.colorTransparentBackground, + '::placeholder': { + color: tokens.colorNeutralForegroundDisabled, + }, }, }); -const useButtonStyles = makeStyles({ - base: { - display: 'inline-flex', - width: '24px', - alignItems: 'center', - justifyContent: 'center', - ...shorthands.border(0), - position: 'absolute', +const buttonBaseStyles: GriffelResetStyle = { + display: 'inline-flex', + width: '24px', + alignItems: 'center', + justifyContent: 'center', + border: '0', + position: 'absolute', + + outlineStyle: 'none', + height: '100%', + backgroundColor: 'transparent', + color: tokens.colorNeutralForeground3, + ':active': { outlineStyle: 'none', - height: '100%', + }, - ':enabled:hover': { + ':enabled': { + ':hover': { cursor: 'pointer', + color: tokens.colorNeutralForeground3Hover, + backgroundColor: tokens.colorSubtleBackgroundHover, }, - ':active': { - outlineStyle: 'none', + color: tokens.colorNeutralForeground3Pressed, + backgroundColor: tokens.colorSubtleBackgroundPressed, }, - - ':disabled': { - cursor: 'not-allowed', + [`&.${spinButtonExtraClassNames.buttonActive}`]: { + color: tokens.colorNeutralForeground3Pressed, + backgroundColor: tokens.colorSubtleBackgroundPressed, }, }, - incrementButton: { - gridColumnStart: '2', - gridColumnEnd: '3', - gridRowStart: '1', - gridRowEnd: '2', - ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0), + ':disabled': { + cursor: 'not-allowed', + color: tokens.colorNeutralForegroundDisabled, }, +}; + +const incrementButtonBaseStyles: GriffelResetStyle = { + gridColumnStart: '2', + gridColumnEnd: '3', + gridRowStart: '1', + gridRowEnd: '2', + borderRadius: `0 ${tokens.borderRadiusMedium} 0 0`, + padding: '4px 5px 1px 5px', +}; +const decrementButtonBaseStyles: GriffelResetStyle = { + gridColumnStart: '2', + gridColumnEnd: '3', + gridRowStart: '2', + gridRowEnd: '3', + borderRadius: `0 0 ${tokens.borderRadiusMedium} 0`, + padding: '1px 5px 4px 5px', +}; + +const useIncrementButtonClassName = makeResetStyles({ + ...buttonBaseStyles, + ...incrementButtonBaseStyles, +}); + +const useDecrementButtonClassName = makeResetStyles({ + ...buttonBaseStyles, + ...decrementButtonBaseStyles, +}); + +const useButtonStyles = makeStyles({ // Padding values numbers don't align with design specs // but visually the padding aligns. // The icons are set in a 16x16px square but the artwork is inset from that @@ -200,46 +333,12 @@ const useButtonStyles = makeStyles({ ...shorthands.padding('3px', '6px', '0px', '4px'), }, - incrementButtonMedium: { - ...shorthands.padding('4px', '5px', '1px', '5px'), - }, - - decrementButton: { - gridColumnStart: '2', - gridColumnEnd: '3', - gridRowStart: '2', - gridRowEnd: '3', - ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0), - }, - decrementButtonSmall: { ...shorthands.padding('0px', '6px', '3px', '4px'), }, - decrementButtonMedium: { - ...shorthands.padding('1px', '5px', '4px', '5px'), - }, - outline: { - backgroundColor: 'transparent', - color: tokens.colorNeutralForeground3, - ':enabled': { - ':hover': { - color: tokens.colorNeutralForeground3Hover, - backgroundColor: tokens.colorSubtleBackgroundHover, - }, - ':active': { - color: tokens.colorNeutralForeground3Pressed, - backgroundColor: tokens.colorSubtleBackgroundPressed, - }, - [`&.${spinButtonExtraClassNames.buttonActive}`]: { - color: tokens.colorNeutralForeground3Pressed, - backgroundColor: tokens.colorSubtleBackgroundPressed, - }, - }, - ':disabled': { - color: tokens.colorNeutralForegroundDisabled, - }, + // set by useButtonClassName }, underline: { @@ -398,51 +497,33 @@ export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButton const invalid = `${state.input['aria-invalid']}` === 'true'; const filled = appearance.startsWith('filled'); + const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName; const rootStyles = useRootStyles(); const buttonStyles = useButtonStyles(); const buttonDisabledStyles = useButtonDisabledStyles(); + const inputClassName = useInputClassName(); const inputStyles = useInputStyles(); - // Grab the root className here so we can be sure to merge is last - const rootClassName = state.root.className; - state.root.className = undefined; - // Reuse react-input's styles without re-using the Input component. - useInputStyles_unstable({ - size, - appearance, - input: state.input, - root: state.root, - components: { - root: 'span', - input: 'input', - contentBefore: 'span', - contentAfter: 'span', - }, - }); - state.root.className = mergeClasses( - state.root.className, // Get the classes from useInputStyles_unstable spinButtonClassNames.root, - rootStyles.base, + useRootClassName(), rootStyles[size], - appearance === 'outline' && rootStyles.outline, - appearance === 'underline' && rootStyles.underline, + rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, - rootClassName, // Make sure any original class name is applied last + state.root.className, ); state.incrementButton.className = mergeClasses( spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, - buttonStyles.base, - buttonStyles.incrementButton, + useIncrementButtonClassName(), buttonStyles[appearance], - size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium, + size === 'small' && buttonStyles.incrementButtonSmall, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className, @@ -450,16 +531,21 @@ export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButton state.decrementButton.className = mergeClasses( spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, - buttonStyles.base, - buttonStyles.decrementButton, + useDecrementButtonClassName(), buttonStyles[appearance], - size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium, + size === 'small' && buttonStyles.decrementButtonSmall, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className, ); - state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base); + state.input.className = mergeClasses( + spinButtonClassNames.input, + inputClassName, + size === 'small' && inputStyles.small, + disabled && inputStyles.disabled, + state.input.className, + ); return state; }; diff --git a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.styles.ts b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.styles.ts index 36353a31e6ea5b..aecc4de0c36bea 100644 --- a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.styles.ts +++ b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.styles.ts @@ -114,7 +114,7 @@ export const styles = (props: ICalendarDayGridStyleProps): ICalendarDayGridStyle selectors: { [HighContrastSelector]: { color: 'WindowText', - backgroundColor: 'Window', + backgroundColor: 'transparent', zIndex: 0, ...getHighContrastNoAdjustStyle(), }, diff --git a/packages/react/src/components/WeeklyDayPicker/__snapshots__/WeeklyDayPicker.test.tsx.snap b/packages/react/src/components/WeeklyDayPicker/__snapshots__/WeeklyDayPicker.test.tsx.snap index 58cb0549ad0409..847f9fced3a193 100644 --- a/packages/react/src/components/WeeklyDayPicker/__snapshots__/WeeklyDayPicker.test.tsx.snap +++ b/packages/react/src/components/WeeklyDayPicker/__snapshots__/WeeklyDayPicker.test.tsx.snap @@ -189,7 +189,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -265,7 +265,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -341,7 +341,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -417,7 +417,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -493,7 +493,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -569,7 +569,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -645,7 +645,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -737,7 +737,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -849,7 +849,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -961,7 +961,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -1073,7 +1073,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -1185,7 +1185,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -1297,7 +1297,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -1409,7 +1409,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -1526,7 +1526,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -1666,7 +1666,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -1806,7 +1806,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -1946,7 +1946,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -2087,7 +2087,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -2277,7 +2277,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -2413,7 +2413,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -2565,7 +2565,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -2673,7 +2673,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -2781,7 +2781,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -2889,7 +2889,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -2997,7 +2997,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -3105,7 +3105,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -3213,7 +3213,7 @@ exports[`WeeklyDayPicker renders WeeklyDayPicker with FirstDayOfWeek=Wednesday c } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -3566,7 +3566,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -3642,7 +3642,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -3718,7 +3718,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -3794,7 +3794,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -3870,7 +3870,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -3946,7 +3946,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -4022,7 +4022,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -4114,7 +4114,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -4226,7 +4226,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -4338,7 +4338,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -4450,7 +4450,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -4562,7 +4562,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -4674,7 +4674,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -4786,7 +4786,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -4903,7 +4903,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -5043,7 +5043,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -5184,7 +5184,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -5374,7 +5374,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -5510,7 +5510,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -5646,7 +5646,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -5782,7 +5782,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -5934,7 +5934,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -6042,7 +6042,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -6150,7 +6150,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -6258,7 +6258,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -6366,7 +6366,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -6474,7 +6474,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0; @@ -6582,7 +6582,7 @@ exports[`WeeklyDayPicker renders default WeeklyDayPicker correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background-color: Window; + background-color: transparent; color: WindowText; forced-color-adjust: none; z-index: 0;