Utility classes for changing an element's background colour property.

Background colour classes are assigned using USS colour variables from the master colour palette. To see all colours with a visual representation with HEX values, check out All Doddle USS Colours.

Classes for background colour are named using the format: [bg]-[colour]-[luminance].

Where colour includes:

  • transparent - for background-color: var(--transparent)
  • white - for background-color: var(--white)
  • black - for background-color: var(--black)
  • gray - for background-color: var(--gray-##)
  • red - for background-color: var(--red-##)
  • orange - for background-color: var(--orange-##)
  • amber - for background-color: var(--amber-##)
  • yellow - for background-color: var(--yellow-##)
  • lime - for background-color: var(--lime-##)
  • green - for background-color: var(--green-##)
  • spring - for background-color: var(--spring-##)
  • cyan - for background-color: var(--cyan-##)
  • teal - for background-color: var(--teal-##)
  • steel - for background-color: var(--steel-##)
  • azure - for background-color: var(--azure-##)
  • blue - for background-color: var(--blue-##)
  • indigo - for background-color: var(--indigo-##)
  • purple - for background-color: var(--purple-##)
  • magenta - for background-color: var(--magenta-##)
  • pink - for background-color: var(--pink-##)
  • rose - for background-color: var(--rose-##)

Where luminance includes:

  • # - luminance value for the colour. By default, background color classes start at 5% luminance, and increment by 5% for the first/last step, and 10% for following steps until stopping at 95%.
ClassContents

All colour variables pull from Doddle's default colour palette defined in doddle-palette.tss. All colour variables can be customized to fit your needs. Learn more about Customizing the Colour Palette.

b-spring-40
b-azure-60
b-purple-60
b-rose-60

UXML