Refactor svgFill utility to accept theme functions and CSS colors

CHANGELOG.md

@@ -16,8 +16,9 @@ Prefix the change with one of these keywords:
 
 ## Unreleased
 
-- Changed: **BREAKING** removed the `compact` prop/variant in `Alert`
 - Changed: updated the styling of `Alert` conform to design system
+- Changed: **BREAKING** removed the `compact` prop/variant in `Alert`
+- Changed: **BREAKING** `svgFill` now only accepts CSS color literal or a `ThemeFn` which returns a CSS color (see: https://github.com/Amsterdam/amsterdam-styled-components/pull/594).
 
 ## [0.20.0]
 

examples/create-react-app/src/App.jsx

@@ -50,7 +50,7 @@ const StyledLinkListItem = styled(ListItem)`
   }
 
   ${styles.IconStyle} {
-    ${svgFill('primary')};
+    ${svgFill(themeColor('primary', 'main'))};
   }
 `
 

packages/asc-ui/README.md

@@ -67,14 +67,14 @@ const StyledListItem - styled(ListItem)`
   color: ${themeColor('primary')};
 
   ${styles.IconStyle} {
-    ${svgFill('tint', 'level1')};
+    ${svgFill(themeColor('tint', 'level1'))};
   }
 
   ${styles.LinkStyle} {
 
     &:hover {
       ${IconStyle} {
-        ${svgFill('primary')};
+        ${svgFill(themeColor('primary', 'main'))};
       }
     }
   }

packages/asc-ui/src/components/Alert/AlertStyle.ts

@@ -77,7 +77,7 @@ export default styled.div<Props>`
       })};
       ${(level === 'attention' || level === 'error') &&
       css`
-        ${svgFill('tint', 'level1')({ theme })}
+        ${svgFill(themeColor('tint', 'level1'))}
         &, & * {
           color: ${themeColor('tint', 'level1')};
         }

packages/asc-ui/src/components/Button/ButtonStyle.ts

@@ -69,7 +69,7 @@ const getVariant = () => ({
       return css`
         background-color: ${themeColor('primary')};
         color: ${readableColor(themeColor('primary')({ theme }))};
-        ${svgFill('tint', 'level1')};
+        ${svgFill(themeColor('tint', 'level1'))};
 
         &:hover {
           background-color: ${darken(0.1, themeColor('primary')({ theme }))};
@@ -80,7 +80,7 @@ const getVariant = () => ({
       return css`
         background-color: ${themeColor('secondary')};
         color: ${themeColor('tint', 'level1')};
-        ${svgFill('tint', 'level1')};
+        ${svgFill(themeColor('tint', 'level1'))};
 
         &:hover {
           background-color: ${darken(0.1, themeColor('secondary')({ theme }))};
@@ -101,7 +101,7 @@ const getVariant = () => ({
     case 'tertiary':
       return css`
         background-color: ${themeColor('tint', 'level4')};
-        ${svgFill('tint', 'level7')};
+        ${svgFill(themeColor('tint', 'level7'))};
 
         &:hover {
           background-color: ${darken(
@@ -115,7 +115,7 @@ const getVariant = () => ({
       return css`
         color: ${themeColor('primary')};
         border: 1px solid ${themeColor('primary')};
-        ${svgFill('primary')};
+        ${svgFill(themeColor('primary', 'main'))};
 
         &:hover {
           outline: 1px solid ${themeColor('primary')};
@@ -131,14 +131,14 @@ const getVariant = () => ({
         text-align: left;
         color: ${themeColor('primary')};
         background-color: rgba(0, 0, 0, 0);
-        ${svgFill('primary')};
+        ${svgFill(themeColor('primary', 'main'))};
 
         /* remove transition because it's async with Icon */
         ${transitions('color', '0s')}
 
         &:hover {
           color: ${themeColor('secondary')};
-          ${svgFill('secondary')};
+          ${svgFill(themeColor('secondary', 'main'))};
         }
 
         ${IconLeft} {
@@ -152,7 +152,7 @@ const getVariant = () => ({
     case 'blank':
       return css`
         background-color: ${themeColor('tint', 'level1')};
-        ${svgFill('tint', 'level7')}
+        ${svgFill(themeColor('tint', 'level7'))};
         &:hover {
           background-color: ${themeColor('tint', 'level3')};
         }
@@ -163,7 +163,7 @@ const getVariant = () => ({
         background-color: ${themeColor('tint', 'level1')};
         height: 32px;
         padding: ${themeSpacing(1, 2)};
-        ${svgFill('tint', 'level7')}
+        ${svgFill(themeColor('tint', 'level7'))};
         &:hover {
           background-color: ${themeColor('tint', 'level4')};
         }
@@ -264,7 +264,7 @@ const ButtonStyle = styled.button<Props>`
     border: none;
     color: ${themeColor('tint', 'level4')};
     background-color: ${themeColor('tint', 'level3')};
-    ${svgFill('tint', 'level4')};
+    ${svgFill(themeColor('tint', 'level4'))};
     text-decoration: none;
     ${({ taskflow }) =>
       taskflow &&

packages/asc-ui/src/components/Button/ShareButton/ShareButtonStyle.ts

@@ -19,7 +19,7 @@ const ShareButtonStyle = styled(ButtonStyle)<Props>`
   }
 
   ${IconStyle} {
-    ${svgFill('tint', 'level1')};
+    ${svgFill(themeColor('tint', 'level1'))};
   }
 `
 

packages/asc-ui/src/components/Checkbox/Checkbox.test.tsx

@@ -12,7 +12,7 @@ describe('Checkbox', () => {
     cleanup()
     ;({ container, rerender } = render(
       <ThemeProvider>
-        <Checkbox onChange={onChangeMock} />
+        <Checkbox variant="primary" onChange={onChangeMock} />
       </ThemeProvider>,
     ))
   })
@@ -43,7 +43,7 @@ describe('Checkbox', () => {
     // Toggle on by changing props
     rerender(
       <ThemeProvider>
-        <Checkbox checked />
+        <Checkbox checked variant="secondary" />
       </ThemeProvider>,
     )
 

packages/asc-ui/src/components/Checkbox/CheckboxStyle.ts

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
-import { themeColor, focusStyleOutline, svgFill } from '../../utils'
-import { IconStyle } from '../Icon'
+import { focusStyleOutline, svgFill, themeColor } from '../../utils'
 import { outlineStyle } from '../../utils/themeUtils'
+import { IconStyle } from '../Icon'
 
 type CheckboxVariant = 'primary' | 'secondary' | 'tertiary'
 
@@ -19,28 +19,28 @@ const getVariant = () => ({ variant }: Props) => {
       return css`
         color: ${themeColor('primary', 'main')};
         background-color: ${themeColor('primary', 'main')};
-        ${svgFill('tint', 'level1')};
+        ${svgFill(themeColor('tint', 'level1'))};
       `
 
     case 'secondary':
       return css`
         color: ${themeColor('secondary', 'main')};
         background-color: ${themeColor('secondary', 'main')};
-        ${svgFill('tint', 'level1')};
+        ${svgFill(themeColor('tint', 'level1'))};
       `
 
     case 'tertiary':
       return css`
         color: ${themeColor('tint', 'level7')};
         background-color: ${themeColor('tint', 'level1')};
-        ${svgFill('tint', 'level7')};
+        ${svgFill(themeColor('tint', 'level7'))};
       `
 
     default:
       return css`
         color: ${themeColor('tint', 'level7')};
         background-color: ${themeColor('tint', 'level7')};
-        ${svgFill('tint', 'level1')};
+        ${svgFill(themeColor('tint', 'level1'))};
       `
   }
 }

packages/asc-ui/src/components/Footer/FooterLinkList/FooterLinkListItem.tsx

@@ -12,7 +12,7 @@ const StyledListItem = styled(ListItem)`
   }
 
   ${IconStyle} {
-    ${svgFill('tint', 'level1')};
+    ${svgFill(themeColor('tint', 'level1'))};
   }
 
   ${LinkStyle} {
@@ -24,7 +24,7 @@ const StyledListItem = styled(ListItem)`
       text-decoration: underline;
 
       ${IconStyle} {
-        ${svgFill('tint', 'level1')};
+        ${svgFill(themeColor('tint', 'level1'))};
       }
     }
   }

packages/asc-ui/src/components/Footer/FooterToggle/ToggleFooterHeader.tsx

@@ -5,7 +5,7 @@ import Icon from '../../Icon'
 import { ToggleHandlerProps } from '../../Toggle'
 import IconStyle from '../../Icon/IconStyle'
 import FooterHeading from '../FooterHeading'
-import { svgFill } from '../../../utils'
+import { svgFill, themeColor } from '../../../utils'
 
 export type Props = ToggleHandlerProps
 
@@ -19,7 +19,7 @@ const ToggleFooterHeader: React.FC<Props> = ({ open, onClick, title }) => {
 
     & > ${IconStyle} {
       margin-right: 8px;
-      ${svgFill('tint', 'level1')};
+      ${svgFill(themeColor('tint', 'level1'))};
     }
   `
 

packages/asc-ui/src/components/Icon/Icon.tsx

@@ -1,12 +1,7 @@
-import React from 'react'
 import IconStyle, { defaultProps, Props as IconStyleProps } from './IconStyle'
 
 export { defaultProps }
 
 export type Props = IconStyleProps
 
-const Icon: React.FC<Props> = ({ children, ...otherProps }) => (
-  <IconStyle {...otherProps}>{children}</IconStyle>
-)
-
-export default Icon
+export default IconStyle

packages/asc-ui/src/components/Icon/IconStyle.ts

@@ -1,8 +1,10 @@
 import styled, { css } from 'styled-components'
+import { svgFill } from '../../utils'
+import { ThemeFn } from '../../utils/themeUtils'
 
 export type Props = {
   inline?: boolean
-  color?: string
+  color?: string | ThemeFn<string>
   iconUrl?: string
   size?: number
   padding?: number
@@ -41,16 +43,7 @@ const IconStyle = styled.span<Props>`
     `}
   }
 
-  ${({ color }) => css`
-    & svg {
-      circle,
-      rect,
-      polygon,
-      path {
-        fill: ${color};
-      }
-    }
-  `};
+  ${({ color }) => color && svgFill(color)};
 `
 
 export default IconStyle

packages/asc-ui/src/components/Link/LinkStyle.ts

@@ -1,13 +1,13 @@
 import styled, { css } from 'styled-components'
 import { themeColor } from '../../utils'
 import {
-  svgFill,
   FocusStyle,
   getFocusStyle,
+  svgFill,
   themeSpacing,
 } from '../../utils/themeUtils'
-import Typography, { TypographyProps } from '../Typography'
 import IconStyle from '../Icon/IconStyle'
+import Typography, { TypographyProps } from '../Typography'
 
 export type LinkVariant = 'inline' | 'blank' | 'with-chevron'
 
@@ -42,28 +42,28 @@ export const DefaultLinkStyleCSS = css<Props>`
   display: inline-flex;
   text-decoration: none;
   font-weight: 700;
-  color: ${({ color: colorOverride, theme }) =>
-    themeColor('tint', 'level7', colorOverride)({ theme })};
+  color: ${({ color: colorOverride }) =>
+    themeColor('tint', 'level7', colorOverride)};
 
   ${IconStyle} {
     margin: ${themeSpacing(1, 1, 0, 0)};
-    ${({ color: colorOverride, theme, onDarkBackground }) =>
+    ${({ color: colorOverride, onDarkBackground }) =>
       onDarkBackground
-        ? svgFill('tint', 'level1')({ theme })
-        : svgFill('tint', 'level7', colorOverride)({ theme })};
+        ? svgFill(themeColor('tint', 'level1'))
+        : svgFill(themeColor('tint', 'level7', colorOverride))}
   }
 
   &:hover {
     text-decoration: underline;
-    ${({ color: colorOverride, theme, onDarkBackground }) =>
+    ${({ color: colorOverride, onDarkBackground }) =>
       css`
         color: ${onDarkBackground
-          ? themeColor('tint', 'level1')({ theme })
-          : themeColor('secondary', 'main', colorOverride)({ theme })};
+          ? themeColor('tint', 'level1')
+          : themeColor('supplement', 'main', colorOverride)};
         ${IconStyle} {
           ${onDarkBackground
-            ? svgFill('tint', 'level1')({ theme })
-            : svgFill('secondary', 'main', colorOverride)({ theme })}
+            ? svgFill(themeColor('tint', 'level1'))
+            : svgFill(themeColor('secondary', 'main', colorOverride))}
         }
       `}
   }

packages/asc-ui/src/components/Menu/MenuButton/MenuButtonStyle.ts

@@ -47,7 +47,7 @@ export const MenuButtonBaseStyle = styled(Button)<Props>`
 
 const activeStyle = css`
   color: ${themeColor('secondary')};
-  ${svgFill('secondary')}
+  ${svgFill(themeColor('secondary', 'main'))}
 
   ${MenuButtonTextStyle} {
     color: ${themeColor('secondary')};

packages/asc-ui/src/components/TopTaskLink/TopTaskLinkStyle.ts

@@ -45,6 +45,6 @@ export default styled.a<{
 
   ${IconStyle} {
     margin-bottom: ${themeSpacing(2)};
-    ${svgFill('tint', 'level7')};
+    ${svgFill(themeColor('tint', 'level7'))};
   }
 `

packages/asc-ui/src/utils/README.md

@@ -86,7 +86,3 @@ const HeaderSearchStyle = styled.div`
 `
 return <HeaderSearchStyle theme={theme} />
 ```
-
-## svgFill
-
-...