Update accent colors

[xak]

Update accent color palette to combine the two groups. The 3:1 colors should be 1-10, the 4.5:1 colors should be 11-16.

The value is to logically group the colors by use. Only the 4.5:1 colors can be used with text, e.g., for identifiers, since they pass accessibility, therefore it should be easy for a dev to access those colors.

Use case

• New user signs up with no photo so the system must assign a color to the identifier.

• The system randomly picks a number between 11-16 to assign an accessible color.

This can also be more easily documented so designers learn the differences in the accent color palette and when to use which color.

References

Design sheets available here:
https://app.zeplin.io/project/5b169f030f5e5e5d1255fe46/screen/5bbe4ba53368160a32fc1329

F3_Colors_Preview_v1_Oct4.pdf
F3_Colors_v1_Oct4.pdf

Updates

• Add/update accent colors in the settings color map
  • Accent 1: Update #e38b16
  • Accent 2: Update #ee6868
  • Accent 3: Update #ed4a7b
  • Accent 4: Update #c0399f
  • Accent 5: Update #686cdf
  • Accent 6: Update #5899da
  • Accent 7: Update #13a4b4
  • Accent 8: Update #7ca10c
  • Accent 9: Update #955ecf
  • Accent 10: Update #6C8893
  • Accent 11: Add new color #2b78c5
  • Accent 12: Add new color #6367de
  • Accent 13: Add new color #984bd2
  • Accent 14: Add new color #c0399f
  • Accent 15: Add new color #db1f77
  • Accent 16: Add new color #66768a

HSL values are included in the design specs

• Add new accents to core/_root

• Update test styles page — http://localhost:3030/pages/styles

• Update the docs page — https://sap.github.io/fundamental/foundation/colors.html

• Update the helpers page — https://sap.github.io/fundamental/guides/design-system-utilities.html

[xak]

@LeoT7508 Can you explain what we need to do with the 4,5:1 accent colors? We have 10 3:1 accents and 4 4,5:1 colors in the palette.

[LeoT7508]

@xak

We have 6 4.5.1 to accommodate type on top of those colors, and 10 3.1 colors that do not.