✨ Add new colors #2008

sanityv3/schemas/components/ColorSelector/defaultColors.ts

@@ -1,8 +1,12 @@
 export const defaultColors = [
   { title: 'White', value: 'hsl(0, 0%, 100%)' },
-  { title: 'Moss Green', value: 'hsl(184, 31%, 74%)' },
+  //{ title: 'Moss Green', value: 'hsl(184, 31%, 74%)' },
   { title: 'Moss Green Light', value: 'hsl(184, 30%, 96%)' },
   { title: 'Spruce Wood', value: 'hsl(25, 100%, 94%)' },
   { title: 'Mist Blue', value: 'hsl(199, 58%, 90%)' },
-  { title: 'Slate Blue', value: 'hsl(206, 34%, 14%)' },
+  // { title: 'Slate Blue', value: 'hsl(206, 34%, 14%)' },
+  { title: 'Mid Yellow', value: '#FFF5B8' },
+  { title: 'Mid Orange', value: '#F8D1AF' },
+  { title: 'Mid Blue', value: '#49709C' },
+  { title: 'Mid Green', value: '#C3E4CE' },
 ]

sanityv3/schemas/objects/factbox.tsx

@@ -1,6 +1,5 @@
 import { info_circle } from '@equinor/eds-icons'
 import { PortableTextBlock } from 'sanity'
-import { defaultColors } from '../components/ColorSelector'
 import { EdsIcon, LeftAlignedImage, RightAlignedImage } from '../../icons'
 import { RadioIconSelector } from '../components'
 import { configureBlockContent } from '../editors/blockContentType'
@@ -12,8 +11,6 @@ const imageAlignmentOptions = [
   { value: 'right', icon: RightAlignedImage },
 ]
 
-const chosenColors = ['White', 'Moss Green', 'Spruce Wood']
-const backgroundColors = defaultColors.filter((color) => chosenColors.includes(color.title))
 const blockContentType = configureBlockContent({
   h1: false,
   h2: false,
@@ -69,9 +66,6 @@ export default {
       name: 'background',
       type: 'colorlist',
       fieldset: 'design',
-      options: {
-        colors: backgroundColors,
-      },
     },
     {
       name: 'imagePosition',

sanityv3/schemas/objects/promotion/promotion.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import blocksToText from '../../../helpers/blocksToText'
-import { defaultColors } from '../../components/ColorSelector'
 import CompactBlockEditor from '../../components/CompactBlockEditor'
 import { configureBlockContent, configureTitleBlockContent } from '../../editors'
 import type { MagazinePromotion } from './promoteMagazine'
@@ -54,8 +53,7 @@ const ingressContentType = configureBlockContent({
   h4: false,
   attachment: false,
 })
-const chosenColors = ['White', 'Moss Green', 'Moss Green Light', 'Spruce Wood', 'Mist Blue']
-const backgroundColors = defaultColors.filter((color) => chosenColors.includes(color.title))
+
 export default {
   title: 'Promotion',
   name: 'promotion',
@@ -126,9 +124,6 @@ export default {
       description: 'Pick a colour for the background. Default is white.',
       name: 'background',
       type: 'colorlist',
-      options: {
-        colors: backgroundColors,
-      },
       fieldset: 'design',
     },
   ].filter((e) => e),

sanityv3/schemas/objects/table.tsx

@@ -45,7 +45,7 @@ const headerCellContentType = configureBlockContent({
   attachment: true,
 })
  */
-const chosenColors = ['White', 'Moss Green', 'Moss Green Light', 'Spruce Wood', 'Mist Blue']
+const chosenColors = ['White', 'Mid Green', 'Moss Green Light', 'Spruce Wood', 'Mist Blue']
 const backgroundColors = defaultColors.filter((color) => chosenColors.includes(color.title))
 export default {
   title: 'Table',

web/components/src/Accordion/Header.tsx

@@ -37,7 +37,7 @@ const StyledIcon = styled.span`
   flex: 0 0 var(--space-xLarge);
   line-height: 16px;
   & ${FilledIcon}, & ${OutlineIcon} {
-    fill: var(--energy-red-100);
+    fill: var(--accordion-icon-color);
   }
 `
 const StyledHeader = styled(Typography)`
@@ -62,9 +62,8 @@ const StyledTypography = styled(Typography)<{ isExpanded?: boolean }>`
   @media (prefers-reduced-motion: no-preference) {
     transition: font-weight 0.1s ease-in-out;
   }
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
+
+  color: var(--color-on-background);
 
   ${({ isExpanded }) =>
     isExpanded && {

web/components/src/Accordion/Panel.tsx

@@ -13,7 +13,7 @@ const StyledPanel = styled.div`
   }
 `
 const ContentWithBorder = styled.div`
-  border-left: 1px dashed var(--energy-red-100);
+  border-left: 1px dashed var(--accordion-icon-color);
   padding-left: calc(var(--space-xLarge) / 2);
 `
 

web/components/src/Backgrounds/BackgroundContainer.test.tsx

@@ -7,34 +7,30 @@ afterEach(cleanup)
 describe(`The background container supports different colours from Sanity's colour selector`, () => {
   it('it can be the default color', () => {
     const { container } = render(<BackgroundContainer />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--ui-background-default)`)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-default)`)
   })
   it('it can be white (default)', () => {
     const { container } = render(<BackgroundContainer background="White" />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--ui-background-default)`)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-default)`)
   })
   it('it can be Moss green ', () => {
     const { container } = render(<BackgroundContainer background="Moss Green" />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--moss-green-70)`)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-moss-green)`)
   })
   it('it can be light mint blue (default)', () => {
     const { container } = render(<BackgroundContainer background="Moss Green Light" />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--moss-green-50)`)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-moss-green-light)`)
   })
   it('it can be spruce wood (default)', () => {
     const { container } = render(<BackgroundContainer background="Spruce Wood" />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--spruce-wood-90)`)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-spruce-wood)`)
   })
   it('it can be mist blue (default)', () => {
     const { container } = render(<BackgroundContainer background="Mist Blue" />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--mist-blue-100)`)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-mist-blue)`)
   })
   it('it can be slate blue (default)', () => {
-    const { container } = render(<BackgroundContainer background="Slate Blue" />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--slate-blue-100)`)
-  })
-  it('Add a class for inverted if the background is so dark that the text must be light for contrast', () => {
-    const { container } = render(<BackgroundContainer background="Slate Blue" />)
-    expect(container.firstChild).toHaveClass('inverted-background')
+    const { container } = render(<BackgroundContainer background="Mid Blue" />)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-mid-blue)`)
   })
 })

web/components/src/Backgrounds/BackgroundContainer.tsx

@@ -1,93 +1,43 @@
 import { forwardRef, HTMLAttributes, CSSProperties } from 'react'
 import styled from 'styled-components'
-import type { StyleVariants } from './backgroundColours'
-import { getStyleVariant } from './backgroundColours'
+import { getColorOnContainer, getContainerColor, isInvertedStyle } from '../../utils/backgroundColours'
 import type { BackgroundColours } from '../../../types/types'
+import { normal, inverted } from '../../../styles/themes'
 
 export type BackgroundContainerProps = {
   background?: BackgroundColours
-  disableContainerWrapper?: boolean
 } & HTMLAttributes<HTMLDivElement>
 
 type ColourContainerProps = {
-  styleVariant?: StyleVariants
   isInverted: boolean
-  colourWrapper: string
-}
+} & HTMLAttributes<HTMLDivElement>
 
-const ColourContainer = styled.div.attrs<ColourContainerProps>(({ isInverted, colourWrapper }) =>
-  isInverted
-    ? {
-        className: `inverted-background ${colourWrapper}`,
-      }
-    : {
-        className: colourWrapper,
-      },
-)<ColourContainerProps>`
+const ColourContainer = styled.div<ColourContainerProps>`
   background-color: var(--background-color);
+  color: var(--color-on-background);
+  ${({ isInverted }) => (isInverted ? inverted : normal)}
 `
 
-// @TODO: Can we map colours in a better way? Duplicate code atm
-const backgrounds: { [name: string]: string } = {
-  none: 'var(--ui-background-default)',
-  one: 'var(--moss-green-70)',
-  two: 'var(--moss-green-50)',
-  three: 'var(--spruce-wood-90)',
-  four: 'var(--mist-blue-100)',
-  five: 'var(--slate-blue-100)',
-}
-
-export const getBackgroundByColorName = (name: BackgroundColours) => {
-  const styleVariant = getStyleVariant(name)
-  return backgrounds[styleVariant]
-}
-
-export const getHexFromColorName = (color?: BackgroundColours) => {
-  switch (color) {
-    case 'Moss Green':
-      return '#a8cfd1'
-    case 'Moss Green Light':
-      return '#f2f7f8'
-    case 'Spruce Wood':
-      return '#ffede0'
-    case 'Mist Blue':
-      return '#d7ebf4'
-    case 'Slate Blue':
-      return '#182530'
-    case 'White':
-    default:
-      return '#ffffff'
-  }
-}
-
-export function getFontColorForBg(bgColor?: BackgroundColours): string {
-  const hex = getHexFromColorName(bgColor)
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const [r, g, b] = hex
-    .replace(/^#/, '')
-    .match(/.{2}/g)!
-    .map((h) => parseInt(h, 16) / 255)
-  const luminance = [0.2126, 0.7152, 0.0722].reduce(
-    (acc, v, i) =>
-      acc + v * ([r, g, b][i] <= 0.03928 ? [r, g, b][i] / 12.92 : Math.pow(([r, g, b][i] + 0.055) / 1.055, 2.4)),
-    0,
-  )
-  return luminance > 0.5 ? 'var(--default-text)' : 'var(--inverted-text)'
-}
-
 export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContainerProps>(function BackgroundContainer(
-  { background = 'White', disableContainerWrapper = false, style, children, ...rest },
+  { background = 'White', style, children, className, ...rest },
   ref,
 ) {
   // @TODO: Find a better way with task #334
-  const styleVariant = getStyleVariant(background)
-  const isInverted = styleVariant === 'five'
+  const styleVariant = getContainerColor(background)
+  const textColor = getColorOnContainer(background)
+  const isInverted = isInvertedStyle(styleVariant)
 
   return (
     <ColourContainer
+      className={className + ` background${styleVariant}`}
       isInverted={isInverted}
-      colourWrapper={disableContainerWrapper ? '' : `background-${styleVariant}`}
-      style={{ ...style, '--background-color': backgrounds[styleVariant] } as CSSProperties}
+      style={
+        {
+          ...style,
+          '--background-color': `var(${styleVariant})`,
+          '--color-on-background': `var(${textColor})`,
+        } as CSSProperties
+      }
       ref={ref}
       {...rest}
     >

web/components/src/Backgrounds/index.ts

@@ -1 +1,2 @@
 export * from './BackgroundContainer'
+export * from '../../utils/backgroundColours'

web/components/src/Breadcrumbs/BreadcrumbListItem.tsx

@@ -10,14 +10,14 @@ const StyledListItem = styled(EdsItem)`
   display: inline-block;
   padding-right: var(--space-small);
   font-weight: var(--fontWeight-bold);
+  color: var(--color-on-background);
 
   &:after {
     content: '>';
     padding-left: var(--space-small);
   }
 
   &:last-child {
-    color: var(--slate-blue-90);
     font-weight: var(--fontWeight-medium);
 
     &:after {

web/components/src/Card/LandscapeCard.tsx

@@ -27,7 +27,7 @@ export const LandscapeCard = forwardRef<HTMLDivElement, CardProps>(function Card
       style={
         {
           '--card-shadow': 'var(--card-box-shadow)',
-          '--card-background': 'var(--ui-background-default)',
+          '--card-background': 'var(--bg-default)',
           '--card-padding': '0 0 var(--space-small) 0',
           ...style,
         } as CSSProperties

web/components/src/Card/PortraitCard.tsx

@@ -33,7 +33,7 @@ export const PortraitCard = forwardRef<HTMLDivElement, CardProps>(function Card(
           style={
             {
               '--card-shadow': 'var(--card-box-shadow)',
-              '--card-background': 'var(--ui-background-default)',
+              '--card-background': 'var(--bg-default)',
               '--card-padding': '0 0 var(--space-small) 0',
               ...style,
             } as CSSProperties

web/components/src/Eyebrow/Eyebrow.tsx

@@ -6,11 +6,7 @@ const StyledTypography = styled(Typography)`
   font-size: var(--typeScale-2);
   line-height: var(--lineHeight-3);
   margin-bottom: calc(var(--space-medium) * -1);
-
-  /* If the text is used inside a inverted component, the text colour must also be inverted */
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
+  color: var(--color-on-background);
 `
 export type TeaserEyebrowProps = HTMLAttributes<HTMLDivElement>
 

web/components/src/Fact/Content.tsx

@@ -8,7 +8,6 @@ type ContainerProps = {
 
 export const Container = styled.div<ContainerProps>`
   background-color: var(--background);
-  padding: var(--space-large) var(--space-large);
   h2,
   h3 {
     margin: var(--space-small) 0;
@@ -20,10 +19,6 @@ export const Container = styled.div<ContainerProps>`
 
   li {
     margin-bottom: var(--space-small);
-
-    &::marker {
-      color: var(--moss-green-100);
-    }
   }
 
   margin: 0 calc(var(--spacer-vertical-xxxLarge) * -1);
@@ -33,6 +28,7 @@ export const Container = styled.div<ContainerProps>`
     hasImage && {
       overflowY: 'auto',
       maxHeight: '800px',
+      padding: 'var(--space-large) var(--space-large)',
     }}
 
   @media (min-width: 800px) {