Copied!

Last updated on
5th May 2024

List of all possible Class Names and CSS variables

Class Names

  • fg-chroma-text-5
  • fg-chroma-text-10
  • fg-chroma-text-15
  • fg-chroma-text-20
  • fg-chroma-text-25
  • fg-chroma-text-30
  • fg-chroma-text-35
  • fg-chroma-text-40
  • fg-chroma-text-45
  • fg-chroma-text-50
  • fg-chroma-text-55
  • fg-chroma-text-60
  • fg-chroma-text-65
  • fg-chroma-text-70
  • fg-chroma-text-75
  • fg-chroma-text-80
  • fg-chroma-text-85
  • fg-chroma-text-90
  • fg-chroma-text-95
  • bg-chroma-text-5
  • bg-chroma-text-10
  • bg-chroma-text-15
  • bg-chroma-text-20
  • bg-chroma-text-25
  • bg-chroma-text-30
  • bg-chroma-text-35
  • bg-chroma-text-40
  • bg-chroma-text-45
  • bg-chroma-text-50
  • bg-chroma-text-55
  • bg-chroma-text-60
  • bg-chroma-text-65
  • bg-chroma-text-70
  • bg-chroma-text-75
  • bg-chroma-text-80
  • bg-chroma-text-85
  • bg-chroma-text-90
  • bg-chroma-text-95
  • fg-chroma-background-5
  • fg-chroma-background-10
  • fg-chroma-background-15
  • fg-chroma-background-20
  • fg-chroma-background-25
  • fg-chroma-background-30
  • fg-chroma-background-35
  • fg-chroma-background-40
  • fg-chroma-background-45
  • fg-chroma-background-50
  • fg-chroma-background-55
  • fg-chroma-background-60
  • fg-chroma-background-65
  • fg-chroma-background-70
  • fg-chroma-background-75
  • fg-chroma-background-80
  • fg-chroma-background-85
  • fg-chroma-background-90
  • fg-chroma-background-95
  • bg-chroma-background-5
  • bg-chroma-background-10
  • bg-chroma-background-15
  • bg-chroma-background-20
  • bg-chroma-background-25
  • bg-chroma-background-30
  • bg-chroma-background-35
  • bg-chroma-background-40
  • bg-chroma-background-45
  • bg-chroma-background-50
  • bg-chroma-background-55
  • bg-chroma-background-60
  • bg-chroma-background-65
  • bg-chroma-background-70
  • bg-chroma-background-75
  • bg-chroma-background-80
  • bg-chroma-background-85
  • bg-chroma-background-90
  • bg-chroma-background-95
  • fg-chroma-primary-5
  • fg-chroma-primary-10
  • fg-chroma-primary-15
  • fg-chroma-primary-20
  • fg-chroma-primary-25
  • fg-chroma-primary-30
  • fg-chroma-primary-35
  • fg-chroma-primary-40
  • fg-chroma-primary-45
  • fg-chroma-primary-50
  • fg-chroma-primary-55
  • fg-chroma-primary-60
  • fg-chroma-primary-65
  • fg-chroma-primary-70
  • fg-chroma-primary-75
  • fg-chroma-primary-80
  • fg-chroma-primary-85
  • fg-chroma-primary-90
  • fg-chroma-primary-95
  • bg-chroma-primary-5
  • bg-chroma-primary-10
  • bg-chroma-primary-15
  • bg-chroma-primary-20
  • bg-chroma-primary-25
  • bg-chroma-primary-30
  • bg-chroma-primary-35
  • bg-chroma-primary-40
  • bg-chroma-primary-45
  • bg-chroma-primary-50
  • bg-chroma-primary-55
  • bg-chroma-primary-60
  • bg-chroma-primary-65
  • bg-chroma-primary-70
  • bg-chroma-primary-75
  • bg-chroma-primary-80
  • bg-chroma-primary-85
  • bg-chroma-primary-90
  • bg-chroma-primary-95
  • fg-chroma-secondary-5
  • fg-chroma-secondary-10
  • fg-chroma-secondary-15
  • fg-chroma-secondary-20
  • fg-chroma-secondary-25
  • fg-chroma-secondary-30
  • fg-chroma-secondary-35
  • fg-chroma-secondary-40
  • fg-chroma-secondary-45
  • fg-chroma-secondary-50
  • fg-chroma-secondary-55
  • fg-chroma-secondary-60
  • fg-chroma-secondary-65
  • fg-chroma-secondary-70
  • fg-chroma-secondary-75
  • fg-chroma-secondary-80
  • fg-chroma-secondary-85
  • fg-chroma-secondary-90
  • fg-chroma-secondary-95
  • bg-chroma-secondary-5
  • bg-chroma-secondary-10
  • bg-chroma-secondary-15
  • bg-chroma-secondary-20
  • bg-chroma-secondary-25
  • bg-chroma-secondary-30
  • bg-chroma-secondary-35
  • bg-chroma-secondary-40
  • bg-chroma-secondary-45
  • bg-chroma-secondary-50
  • bg-chroma-secondary-55
  • bg-chroma-secondary-60
  • bg-chroma-secondary-65
  • bg-chroma-secondary-70
  • bg-chroma-secondary-75
  • bg-chroma-secondary-80
  • bg-chroma-secondary-85
  • bg-chroma-secondary-90
  • bg-chroma-secondary-95
  • fg-chroma-accent-5
  • fg-chroma-accent-10
  • fg-chroma-accent-15
  • fg-chroma-accent-20
  • fg-chroma-accent-25
  • fg-chroma-accent-30
  • fg-chroma-accent-35
  • fg-chroma-accent-40
  • fg-chroma-accent-45
  • fg-chroma-accent-50
  • fg-chroma-accent-55
  • fg-chroma-accent-60
  • fg-chroma-accent-65
  • fg-chroma-accent-70
  • fg-chroma-accent-75
  • fg-chroma-accent-80
  • fg-chroma-accent-85
  • fg-chroma-accent-90
  • fg-chroma-accent-95
  • bg-chroma-accent-5
  • bg-chroma-accent-10
  • bg-chroma-accent-15
  • bg-chroma-accent-20
  • bg-chroma-accent-25
  • bg-chroma-accent-30
  • bg-chroma-accent-35
  • bg-chroma-accent-40
  • bg-chroma-accent-45
  • bg-chroma-accent-50
  • bg-chroma-accent-55
  • bg-chroma-accent-60
  • bg-chroma-accent-65
  • bg-chroma-accent-70
  • bg-chroma-accent-75
  • bg-chroma-accent-80
  • bg-chroma-accent-85
  • bg-chroma-accent-90
  • bg-chroma-accent-95

CSS Variables

  • --chroma-text-5
  • --chroma-text-10
  • --chroma-text-15
  • --chroma-text-20
  • --chroma-text-25
  • --chroma-text-30
  • --chroma-text-35
  • --chroma-text-40
  • --chroma-text-45
  • --chroma-text-50
  • --chroma-text-55
  • --chroma-text-60
  • --chroma-text-65
  • --chroma-text-70
  • --chroma-text-75
  • --chroma-text-80
  • --chroma-text-85
  • --chroma-text-90
  • --chroma-text-95
  • --chroma-background-5
  • --chroma-background-10
  • --chroma-background-15
  • --chroma-background-20
  • --chroma-background-25
  • --chroma-background-30
  • --chroma-background-35
  • --chroma-background-40
  • --chroma-background-45
  • --chroma-background-50
  • --chroma-background-55
  • --chroma-background-60
  • --chroma-background-65
  • --chroma-background-70
  • --chroma-background-75
  • --chroma-background-80
  • --chroma-background-85
  • --chroma-background-90
  • --chroma-background-95
  • --chroma-primary-5
  • --chroma-primary-10
  • --chroma-primary-15
  • --chroma-primary-20
  • --chroma-primary-25
  • --chroma-primary-30
  • --chroma-primary-35
  • --chroma-primary-40
  • --chroma-primary-45
  • --chroma-primary-50
  • --chroma-primary-55
  • --chroma-primary-60
  • --chroma-primary-65
  • --chroma-primary-70
  • --chroma-primary-75
  • --chroma-primary-80
  • --chroma-primary-85
  • --chroma-primary-90
  • --chroma-primary-95
  • --chroma-secondary-5
  • --chroma-secondary-10
  • --chroma-secondary-15
  • --chroma-secondary-20
  • --chroma-secondary-25
  • --chroma-secondary-30
  • --chroma-secondary-35
  • --chroma-secondary-40
  • --chroma-secondary-45
  • --chroma-secondary-50
  • --chroma-secondary-55
  • --chroma-secondary-60
  • --chroma-secondary-65
  • --chroma-secondary-70
  • --chroma-secondary-75
  • --chroma-secondary-80
  • --chroma-secondary-85
  • --chroma-secondary-90
  • --chroma-secondary-95
  • --chroma-accent-5
  • --chroma-accent-10
  • --chroma-accent-15
  • --chroma-accent-20
  • --chroma-accent-25
  • --chroma-accent-30
  • --chroma-accent-35
  • --chroma-accent-40
  • --chroma-accent-45
  • --chroma-accent-50
  • --chroma-accent-55
  • --chroma-accent-60
  • --chroma-accent-65
  • --chroma-accent-70
  • --chroma-accent-75
  • --chroma-accent-80
  • --chroma-accent-85
  • --chroma-accent-90
  • --chroma-accent-95