Add ambiance to SecondaryButton

docs/buttons/Buttons.stories.mdx

@@ -1,4 +1,4 @@
-import { Button, ButtonProps, IconButton, IconButtonProps } from '../../src'
+import { Button, ButtonProps, IconButton, IconButtonProps, Ambiance } from '../../src'
 import { Canvas, Meta, ArgsTable, Story } from '@storybook/addon-docs'
 
 <Meta title="Docs/Buttons" component={Button} />
@@ -48,6 +48,16 @@ Buttons allow users to take actions and make choices. They are used for actions
   <Button variant="secondary" size="small" label="Button" />
 </Canvas>
 
+### Ambiance
+
+<Canvas>
+  <Ambiance>
+    <Button variant="secondary" size="large" label="Button" />
+    <Button variant="secondary" size="medium" label="Button" />
+    <Button variant="secondary" size="small" label="Button" />
+  </Ambiance>
+</Canvas>
+
 ### Icons
 
 <Canvas>

src/lib/components/buttons/Button/Button.tsx

@@ -1,9 +1,10 @@
 import { Theme } from '../../../theme'
 import React, { ReactNode } from 'react'
 import { ButtonContent, ButtonContentProps, StyledButton, StyledButtonProps } from './Button.styles'
-import { useTheme } from '../../../hooks'
+import { useAmbiance, useTheme } from '../../../hooks'
 import { ButtonVariant } from '..'
 import { Icon, IconName } from '../../icons'
+import chroma from 'chroma-js'
 
 export type IconPosition = 'left' | 'right'
 
@@ -43,6 +44,7 @@ export const getButtonMargins = (size: ButtonSize, theme: Theme): ButtonMargins
 }
 
 export const getButtonStyles = (props: ButtonProps, theme: Theme): ButtonProps => {
+  const { color } = useAmbiance()
   const { horizontalMargin, verticalMargin } = getButtonMargins(props.size, theme)
   const common = {
     ...props,
@@ -62,13 +64,13 @@ export const getButtonStyles = (props: ButtonProps, theme: Theme): ButtonProps =
   switch (props.variant) {
     case 'primary':
       return {
-        backgroundColor: props.backgroundColor ? props.backgroundColor : theme.colors.primary,
-        foregroundColor: props.foregroundColor ? props.foregroundColor : theme.colors.onPrimary,
+        backgroundColor: theme.colors.primary,
+        foregroundColor: theme.colors.onPrimary,
         ...common
       }
     case 'secondary':
       return {
-        backgroundColor: theme.colors.secondaryButton,
+        backgroundColor: color ? chroma(color).saturate(0.4).hex() : theme.colors.secondaryButton,
         foregroundColor: theme.colors.onSecondaryButton,
         ...common
       }