Updating the carousel paddle colors (#17323)

* updating paddle background color
microsoft · Mar 11, 2021 · 3b3e2a7 · 3b3e2a7
1 parent 74be7e3
commit 3b3e2a7
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 55 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -49,6 +49,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Adding `tinted` prop from `Button` @notandrew ([#17324](https://github.com/microsoft/fluentui/pull/17324))
 - Update the `OpenOutsideIcon` icon @notandrew ([#17361](https://github.com/microsoft/fluentui/pull/17361))
 - Fix `Popup` to make sure `updatePosition` is always defined in `renderContent` @yuanboxue-amber ([#17377](https://github.com/microsoft/fluentui/pull/17377))
+- Updating the colors for the Carousel's paddles @notandrew ([#17323](https://github.com/microsoft/fluentui/pull/17323))
 
 ## Features
 - For `Tree`, add keyboard navigation based on the first letter of the text content of tree items @yuanboxue-amber ([#16994](https://github.com/microsoft/fluentui/pull/16994))

diff --git a/packages/fluentui/react-northstar/src/themes/teams-dark/colors.ts b/packages/fluentui/react-northstar/src/themes/teams-dark/colors.ts
@@ -295,6 +295,9 @@ export const colorScheme: ColorSchemeMapping = {
     background: colors.onyx[500],
     background1: colors.onyx[100],
     background2: colors.onyx[500],
+    background3: colors.onyx[700],
+    backgroundHover: colors.onyx[900],
+    backgroundPressed: colors.onyx[900],
     border: colors.onyx[800],
     border1: 'transparent',
     border2: colors.silver[400],

diff --git a/packages/fluentui/react-northstar/src/themes/teams-high-contrast/colors.ts b/packages/fluentui/react-northstar/src/themes/teams-high-contrast/colors.ts
@@ -292,6 +292,9 @@ export const colorScheme: ColorSchemeMapping = {
     background: colors.black,
     background1: colors.black,
     background2: colors.white,
+    background3: colors.white,
+    backgroundHover: accessibleCyan,
+    backgroundPressed: accessibleCyan,
     border: colors.white,
     border1: colors.white,
     border2: colors.white,

diff --git a/packages/fluentui/react-northstar/src/themes/teams/colors.ts b/packages/fluentui/react-northstar/src/themes/teams/colors.ts
@@ -497,6 +497,9 @@ export const colorScheme: ColorSchemeMapping<ColorScheme, TeamsColorNames> = {
     background: colors.onyx[500],
     background1: colors.onyx[100],
     background2: colors.onyx[500],
+    background3: colors.onyx[400],
+    backgroundHover: colors.onyx[500],
+    backgroundPressed: colors.onyx[800],
     border: colors.onyx[800],
     border1: 'transparent',
     border2: colors.onyx[300],

diff --git a/...ges/fluentui/react-northstar/src/themes/teams/components/Carousel/carouselPaddleStyles.ts b/...ges/fluentui/react-northstar/src/themes/teams/components/Carousel/carouselPaddleStyles.ts
@@ -42,6 +42,7 @@ export const carouselPaddleStyles: ComponentSlotStylesPrepared<CarouselPaddleSty
       color: v.paddleColor,
       backgroundColor: v.paddleBackgroundColor,
       borderRadius: v.paddleBorderRadius,
+      border: 0,
       display: 'inline-flex',
       justifyContent: 'center',
       alignItems: 'center',
@@ -51,10 +52,6 @@ export const carouselPaddleStyles: ComponentSlotStylesPrepared<CarouselPaddleSty
       marginBottom: pxToRem(40),
       outline: 0,
       padding: 0,
-      borderWidth,
-      borderStyle: 'solid',
-      borderColor: v.paddleBorderColor,
-      boxShadow: v.paddleBoxShadow,
       transition: faster,
       ...(p.hidden && {
         visibility: 'hidden',
@@ -63,44 +60,31 @@ export const carouselPaddleStyles: ComponentSlotStylesPrepared<CarouselPaddleSty
       ':hover': {
         ...getIconFillOrOutlineStyles({ outline: false }),
         [`& .${carouselPaddleSlotClassNames.content}`]: {
-          ...getIndicatorStyles(v.paddleColorHover, p.next, v.paddleIndicatorSize),
+          ...getIndicatorStyles(v.paddleColor, p.next, v.paddleIndicatorSize),
         },
-        color: v.paddleColorHover,
         background: v.paddleBackgroundColorHover,
       },
 
       ':active': {
         transition: ultraFast,
-        color: v.paddleColorActive,
         backgroundColor: v.paddleBackgroundColorActive,
-        borderColor: v.paddleBorderColorActive,
-        boxShadow: 'none',
       },
 
       ':focus': borderFocusStyles[':focus'],
       ':focus-visible': {
         ...borderFocusStyles[':focus-visible'],
-        backgroundColor: v.paddleBackgroundColorFocus,
-        borderColor: v.paddleBorderColorFocus,
-        color: v.paddleColorFocus,
-        borderWidth,
-        ':hover': {
-          borderColor: v.paddleBorderColorHover,
-        },
       },
 
       // Overrides for "disabled" buttons
       ...(p.disabled && {
         cursor: 'default',
         color: v.paddleColorDisabled,
-        boxShadow: 'none',
         pointerEvents: 'none',
         ':hover': {
           color: v.paddleColorDisabled,
         },
 
         backgroundColor: v.paddleBackgroundColorDisabled,
-        borderColor: v.paddleBorderColorDisabled,
       }),
     };
   },

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Carousel/carouselStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Carousel/carouselStyles.ts
@@ -12,7 +12,6 @@ export const carouselStyles: ComponentSlotStylesPrepared<CarouselStylesProps, Ca
     display: 'flex',
     width: pxToRem(v.width),
     overflowX: 'hidden',
-    border: '1px solid transparent',
     ...(p.shouldFocusContainer &&
       p.isFromKeyboard && {
         border: `1px solid ${v.focusOuterBorderColor}`,

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Carousel/carouselVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Carousel/carouselVariables.ts
@@ -7,29 +7,19 @@ export interface CarouselVariables {
   focusOuterBorderColor: string;
   focusOuterBorderRadius: string;
 
-  paddleHeight: string;
-
   paddleColor: string;
-  paddleBackgroundColor: string;
-  paddleBorderRadius: string;
-  paddleBorderColor: string;
-  paddleBoxShadow: string;
+  paddleColorDisabled: string;
 
-  paddleColorHover: string;
+  paddleBackgroundColor: string;
+  paddleBackgroundColorActive: string;
   paddleBackgroundColorHover: string;
-  paddleBorderColorHover: string;
+  paddleBackgroundColorDisabled: string;
 
-  paddleColorActive: string;
-  paddleBackgroundColorActive: string;
-  paddleBorderColorActive: string;
+  paddleBorderColor: string;
 
-  paddleBackgroundColorFocus: string;
-  paddleBorderColorFocus: string;
-  paddleColorFocus: string;
+  paddleBorderRadius: string;
 
-  paddleColorDisabled: string;
-  paddleBackgroundColorDisabled: string;
-  paddleBorderColorDisabled: string;
+  paddleHeight: string;
 
   paddleIndicatorSize: string;
 
@@ -46,29 +36,19 @@ export const carouselVariables = (siteVars): CarouselVariables => ({
   focusOuterBorderColor: siteVars.focusOuterBorderColor,
   focusOuterBorderRadius: siteVars.borderRadius,
 
-  paddleHeight: pxToRem(32),
-
-  paddleColor: siteVars.colorScheme.default.foreground,
-  paddleBackgroundColor: siteVars.colorScheme.default.background,
-  paddleBorderRadius: siteVars.borderRadius,
-  paddleBorderColor: siteVars.colorScheme.default.border,
-  paddleBoxShadow: siteVars.shadowLevel1,
+  paddleColor: siteVars.colorScheme.default.foreground4,
+  paddleColorDisabled: siteVars.colorScheme.brand.foregroundDisabled,
 
-  paddleColorHover: siteVars.colorScheme.brand.foregroundHover,
-  paddleBackgroundColorHover: siteVars.colorScheme.default.backgroundHover2,
-  paddleBorderColorHover: siteVars.colorScheme.default.borderHover,
+  paddleBackgroundColor: siteVars.colorScheme.onyx.background3,
+  paddleBackgroundColorActive: siteVars.colorScheme.onyx.backgroundPressed,
+  paddleBackgroundColorHover: siteVars.colorScheme.onyx.backgroundHover,
+  paddleBackgroundColorDisabled: siteVars.colorScheme.default.backgroundDisabled,
 
-  paddleColorActive: siteVars.colorScheme.default.foregroundPressed,
-  paddleBackgroundColorActive: siteVars.colorScheme.default.backgroundPressed,
-  paddleBorderColorActive: siteVars.colorScheme.default.borderPressed,
+  paddleBorderColor: 'transparent',
 
-  paddleBackgroundColorFocus: undefined,
-  paddleBorderColorFocus: undefined,
-  paddleColorFocus: undefined,
+  paddleBorderRadius: siteVars.borderRadius,
 
-  paddleColorDisabled: siteVars.colorScheme.brand.foregroundDisabled,
-  paddleBackgroundColorDisabled: siteVars.colorScheme.default.backgroundDisabled,
-  paddleBorderColorDisabled: 'transparent',
+  paddleHeight: pxToRem(32),
 
   paddleIndicatorSize: pxToRem(16),