Tailwind utilities

Background Color

NOTE: See layout content containers for background color usage.

gl-bg-inherit

inherit

gl-bg-current

currentColor

gl-bg-transparent

transparent

gl-bg-white

var(--white)

gl-bg-black

var(--black)

gl-bg-alpha-dark-2

var(--gl-color-alpha-dark-2)

gl-bg-alpha-dark-4

var(--gl-color-alpha-dark-4)

gl-bg-alpha-dark-6

var(--gl-color-alpha-dark-6)

gl-bg-alpha-dark-8

var(--gl-color-alpha-dark-8)

gl-bg-alpha-dark-16

var(--gl-color-alpha-dark-16)

gl-bg-alpha-dark-24

var(--gl-color-alpha-dark-24)

gl-bg-alpha-dark-40

var(--gl-color-alpha-dark-40)

gl-bg-alpha-light-2

var(--gl-color-alpha-light-2)

gl-bg-alpha-light-4

var(--gl-color-alpha-light-4)

gl-bg-alpha-light-6

var(--gl-color-alpha-light-6)

gl-bg-alpha-light-8

var(--gl-color-alpha-light-8)

gl-bg-alpha-light-16

var(--gl-color-alpha-light-16)

gl-bg-alpha-light-24

var(--gl-color-alpha-light-24)

gl-bg-alpha-light-36

var(--gl-color-alpha-light-36)

gl-bg-blue-50

var(--blue-50)

gl-bg-blue-100

var(--blue-100)

gl-bg-blue-200

var(--blue-200)

gl-bg-blue-300

var(--blue-300)

gl-bg-blue-400

var(--blue-400)

gl-bg-blue-500

var(--blue-500)

gl-bg-blue-600

var(--blue-600)

gl-bg-blue-700

var(--blue-700)

gl-bg-blue-800

var(--blue-800)

gl-bg-blue-900

var(--blue-900)

gl-bg-blue-950

var(--blue-950)

gl-bg-gray-10

var(--gray-10)

gl-bg-gray-50

var(--gray-50)

gl-bg-gray-100

var(--gray-100)

gl-bg-gray-200

var(--gray-200)

gl-bg-gray-300

var(--gray-300)

gl-bg-gray-400

var(--gray-400)

gl-bg-gray-500

var(--gray-500)

gl-bg-gray-600

var(--gray-600)

gl-bg-gray-700

var(--gray-700)

gl-bg-gray-800

var(--gray-800)

gl-bg-gray-900

var(--gray-900)

gl-bg-gray-950

var(--gray-950)

gl-bg-green-50

var(--green-50)

gl-bg-green-100

var(--green-100)

gl-bg-green-200

var(--green-200)

gl-bg-green-300

var(--green-300)

gl-bg-green-400

var(--green-400)

gl-bg-green-500

var(--green-500)

gl-bg-green-600

var(--green-600)

gl-bg-green-700

var(--green-700)

gl-bg-green-800

var(--green-800)

gl-bg-green-900

var(--green-900)

gl-bg-green-950

var(--green-950)

gl-bg-orange-50

var(--orange-50)

gl-bg-orange-100

var(--orange-100)

gl-bg-orange-200

var(--orange-200)

gl-bg-orange-300

var(--orange-300)

gl-bg-orange-400

var(--orange-400)

gl-bg-orange-500

var(--orange-500)

gl-bg-orange-600

var(--orange-600)

gl-bg-orange-700

var(--orange-700)

gl-bg-orange-800

var(--orange-800)

gl-bg-orange-900

var(--orange-900)

gl-bg-orange-950

var(--orange-950)

gl-bg-purple-50

var(--purple-50)

gl-bg-purple-100

var(--purple-100)

gl-bg-purple-200

var(--purple-200)

gl-bg-purple-300

var(--purple-300)

gl-bg-purple-400

var(--purple-400)

gl-bg-purple-500

var(--purple-500)

gl-bg-purple-600

var(--purple-600)

gl-bg-purple-700

var(--purple-700)

gl-bg-purple-800

var(--purple-800)

gl-bg-purple-900

var(--purple-900)

gl-bg-purple-950

var(--purple-950)

gl-bg-red-50

var(--red-50)

gl-bg-red-100

var(--red-100)

gl-bg-red-200

var(--red-200)

gl-bg-red-300

var(--red-300)

gl-bg-red-400

var(--red-400)

gl-bg-red-500

var(--red-500)

gl-bg-red-600

var(--red-600)

gl-bg-red-700

var(--red-700)

gl-bg-red-800

var(--red-800)

gl-bg-red-900

var(--red-900)

gl-bg-red-950

var(--red-950)

gl-bg-data-viz-green-50

var(--data-viz-green-50)

gl-bg-data-viz-green-100

var(--data-viz-green-100)

gl-bg-data-viz-green-200

var(--data-viz-green-200)

gl-bg-data-viz-green-300

var(--data-viz-green-300)

gl-bg-data-viz-green-400

var(--data-viz-green-400)

gl-bg-data-viz-green-500

var(--data-viz-green-500)

gl-bg-data-viz-green-600

var(--data-viz-green-600)

gl-bg-data-viz-green-700

var(--data-viz-green-700)

gl-bg-data-viz-green-800

var(--data-viz-green-800)

gl-bg-data-viz-green-900

var(--data-viz-green-900)

gl-bg-data-viz-green-950

var(--data-viz-green-950)

gl-bg-data-viz-aqua-50

var(--data-viz-aqua-50)

gl-bg-data-viz-aqua-100

var(--data-viz-aqua-100)

gl-bg-data-viz-aqua-200

var(--data-viz-aqua-200)

gl-bg-data-viz-aqua-300

var(--data-viz-aqua-300)

gl-bg-data-viz-aqua-400

var(--data-viz-aqua-400)

gl-bg-data-viz-aqua-500

var(--data-viz-aqua-500)

gl-bg-data-viz-aqua-600

var(--data-viz-aqua-600)

gl-bg-data-viz-aqua-700

var(--data-viz-aqua-700)

gl-bg-data-viz-aqua-800

var(--data-viz-aqua-800)

gl-bg-data-viz-aqua-900

var(--data-viz-aqua-900)

gl-bg-data-viz-aqua-950

var(--data-viz-aqua-950)

gl-bg-data-viz-blue-50

var(--data-viz-blue-50)

gl-bg-data-viz-blue-100

var(--data-viz-blue-100)

gl-bg-data-viz-blue-200

var(--data-viz-blue-200)

gl-bg-data-viz-blue-300

var(--data-viz-blue-300)

gl-bg-data-viz-blue-400

var(--data-viz-blue-400)

gl-bg-data-viz-blue-500

var(--data-viz-blue-500)

gl-bg-data-viz-blue-600

var(--data-viz-blue-600)

gl-bg-data-viz-blue-700

var(--data-viz-blue-700)

gl-bg-data-viz-blue-800

var(--data-viz-blue-800)

gl-bg-data-viz-blue-900

var(--data-viz-blue-900)

gl-bg-data-viz-blue-950

var(--data-viz-blue-950)

gl-bg-data-viz-magenta-50

var(--data-viz-magenta-50)

gl-bg-data-viz-magenta-100

var(--data-viz-magenta-100)

gl-bg-data-viz-magenta-200

var(--data-viz-magenta-200)

gl-bg-data-viz-magenta-300

var(--data-viz-magenta-300)

gl-bg-data-viz-magenta-400

var(--data-viz-magenta-400)

gl-bg-data-viz-magenta-500

var(--data-viz-magenta-500)

gl-bg-data-viz-magenta-600

var(--data-viz-magenta-600)

gl-bg-data-viz-magenta-700

var(--data-viz-magenta-700)

gl-bg-data-viz-magenta-800

var(--data-viz-magenta-800)

gl-bg-data-viz-magenta-900

var(--data-viz-magenta-900)

gl-bg-data-viz-magenta-950

var(--data-viz-magenta-950)

gl-bg-data-viz-orange-50

var(--data-viz-orange-50)

gl-bg-data-viz-orange-100

var(--data-viz-orange-100)

gl-bg-data-viz-orange-200

var(--data-viz-orange-200)

gl-bg-data-viz-orange-300

var(--data-viz-orange-300)

gl-bg-data-viz-orange-400

var(--data-viz-orange-400)

gl-bg-data-viz-orange-500

var(--data-viz-orange-500)

gl-bg-data-viz-orange-600

var(--data-viz-orange-600)

gl-bg-data-viz-orange-700

var(--data-viz-orange-700)

gl-bg-data-viz-orange-800

var(--data-viz-orange-800)

gl-bg-data-viz-orange-900

var(--data-viz-orange-900)

gl-bg-data-viz-orange-950

var(--data-viz-orange-950)

gl-bg-neutral-0

var(--gl-color-neutral-0)

gl-bg-neutral-10

var(--gl-color-neutral-10)

gl-bg-neutral-50

var(--gl-color-neutral-50)

gl-bg-neutral-100

var(--gl-color-neutral-100)

gl-bg-neutral-200

var(--gl-color-neutral-200)

gl-bg-neutral-300

var(--gl-color-neutral-300)

gl-bg-neutral-400

var(--gl-color-neutral-400)

gl-bg-neutral-500

var(--gl-color-neutral-500)

gl-bg-neutral-600

var(--gl-color-neutral-600)

gl-bg-neutral-700

var(--gl-color-neutral-700)

gl-bg-neutral-800

var(--gl-color-neutral-800)

gl-bg-neutral-900

var(--gl-color-neutral-900)

gl-bg-neutral-950

var(--gl-color-neutral-950)

gl-bg-neutral-1000

var(--gl-color-neutral-1000)

gl-bg-brand-white

var(--gl-color-brand-white)

gl-bg-brand-charcoal

var(--gl-color-brand-charcoal)

gl-bg-brand-orange-01g

var(--gl-color-brand-orange-01g)

gl-bg-brand-orange-01p

var(--gl-color-brand-orange-01p)

gl-bg-brand-orange-02p

var(--gl-color-brand-orange-02p)

gl-bg-brand-orange-03p

var(--gl-color-brand-orange-03p)

gl-bg-brand-purple-01g

var(--gl-color-brand-purple-01g)

gl-bg-brand-purple-01p

var(--gl-color-brand-purple-01p)

gl-bg-brand-purple-02p

var(--gl-color-brand-purple-02p)

gl-bg-brand-gray-01

var(--gl-color-brand-gray-01)

gl-bg-brand-gray-02

var(--gl-color-brand-gray-02)

gl-bg-brand-gray-03

var(--gl-color-brand-gray-03)

gl-bg-brand-gray-04

var(--gl-color-brand-gray-04)

gl-bg-brand-gray-05

var(--gl-color-brand-gray-05)

gl-bg-brand-pink-01g

var(--gl-color-brand-pink-01g)

gl-bg-default

var(--gl-background-color-default)

gl-bg-subtle

var(--gl-background-color-subtle)

gl-bg-strong

var(--gl-background-color-strong)

gl-bg-disabled

var(--gl-background-color-disabled)

gl-bg-overlap

var(--gl-background-color-overlap)

gl-bg-section

var(--gl-background-color-section)

gl-bg-overlay

var(--gl-background-color-overlay)

gl-bg-status-neutral

var(--gl-status-neutral-background-color)

gl-bg-status-info

var(--gl-status-info-background-color)

gl-bg-status-success

var(--gl-status-success-background-color)

gl-bg-status-warning

var(--gl-status-warning-background-color)

gl-bg-status-danger

var(--gl-status-danger-background-color)

gl-bg-status-brand

var(--gl-status-brand-background-color)

gl-bg-feedback-strong

var(--gl-feedback-strong-background-color)

gl-bg-feedback-neutral

var(--gl-feedback-neutral-background-color)

gl-bg-feedback-info

var(--gl-feedback-info-background-color)

gl-bg-feedback-success

var(--gl-feedback-success-background-color)

gl-bg-feedback-warning

var(--gl-feedback-warning-background-color)

gl-bg-feedback-danger

var(--gl-feedback-danger-background-color)

gl-bg-feedback-brand

var(--gl-feedback-brand-background-color)

gl-bg-dropdown

var(--gl-dropdown-background-color)

gl-bg-control-default

var(--gl-control-background-color-default)

gl-bg-control-disabled

var(--gl-control-background-color-disabled)

gl-bg-control-concatenation

var(--gl-control-background-color-concatenation)

gl-bg-control-readonly

var(--gl-control-background-color-readonly)

Text Color

NOTE: See typography fundamentals for text color usage.

Aa

gl-text-inherit

inherit

Aa

gl-text-current

currentColor

Aa

gl-text-transparent

transparent

Aa

gl-text-white

var(--white)

Aa

gl-text-black

var(--black)

Aa

gl-text-alpha-dark-2

var(--gl-color-alpha-dark-2)

Aa

gl-text-alpha-dark-4

var(--gl-color-alpha-dark-4)

Aa

gl-text-alpha-dark-6

var(--gl-color-alpha-dark-6)

Aa

gl-text-alpha-dark-8

var(--gl-color-alpha-dark-8)

Aa

gl-text-alpha-dark-16

var(--gl-color-alpha-dark-16)

Aa

gl-text-alpha-dark-24

var(--gl-color-alpha-dark-24)

Aa

gl-text-alpha-dark-40

var(--gl-color-alpha-dark-40)

Aa

gl-text-alpha-light-2

var(--gl-color-alpha-light-2)

Aa

gl-text-alpha-light-4

var(--gl-color-alpha-light-4)

Aa

gl-text-alpha-light-6

var(--gl-color-alpha-light-6)

Aa

gl-text-alpha-light-8

var(--gl-color-alpha-light-8)

Aa

gl-text-alpha-light-16

var(--gl-color-alpha-light-16)

Aa

gl-text-alpha-light-24

var(--gl-color-alpha-light-24)

Aa

gl-text-alpha-light-36

var(--gl-color-alpha-light-36)

Aa

gl-text-blue-50

var(--blue-50)

Aa

gl-text-blue-100

var(--blue-100)

Aa

gl-text-blue-200

var(--blue-200)

Aa

gl-text-blue-300

var(--blue-300)

Aa

gl-text-blue-400

var(--blue-400)

Aa

gl-text-blue-500

var(--blue-500)

Aa

gl-text-blue-600

var(--blue-600)

Aa

gl-text-blue-700

var(--blue-700)

Aa

gl-text-blue-800

var(--blue-800)

Aa

gl-text-blue-900

var(--blue-900)

Aa

gl-text-blue-950

var(--blue-950)

Aa

gl-text-gray-10

var(--gray-10)

Aa

gl-text-gray-50

var(--gray-50)

Aa

gl-text-gray-100

var(--gray-100)

Aa

gl-text-gray-200

var(--gray-200)

Aa

gl-text-gray-300

var(--gray-300)

Aa

gl-text-gray-400

var(--gray-400)

Aa

gl-text-gray-500

var(--gray-500)

Aa

gl-text-gray-600

var(--gray-600)

Aa

gl-text-gray-700

var(--gray-700)

Aa

gl-text-gray-800

var(--gray-800)

Aa

gl-text-gray-900

var(--gray-900)

Aa

gl-text-gray-950

var(--gray-950)

Aa

gl-text-green-50

var(--green-50)

Aa

gl-text-green-100

var(--green-100)

Aa

gl-text-green-200

var(--green-200)

Aa

gl-text-green-300

var(--green-300)

Aa

gl-text-green-400

var(--green-400)

Aa

gl-text-green-500

var(--green-500)

Aa

gl-text-green-600

var(--green-600)

Aa

gl-text-green-700

var(--green-700)

Aa

gl-text-green-800

var(--green-800)

Aa

gl-text-green-900

var(--green-900)

Aa

gl-text-green-950

var(--green-950)

Aa

gl-text-orange-50

var(--orange-50)

Aa

gl-text-orange-100

var(--orange-100)

Aa

gl-text-orange-200

var(--orange-200)

Aa

gl-text-orange-300

var(--orange-300)

Aa

gl-text-orange-400

var(--orange-400)

Aa

gl-text-orange-500

var(--orange-500)

Aa

gl-text-orange-600

var(--orange-600)

Aa

gl-text-orange-700

var(--orange-700)

Aa

gl-text-orange-800

var(--orange-800)

Aa

gl-text-orange-900

var(--orange-900)

Aa

gl-text-orange-950

var(--orange-950)

Aa

gl-text-purple-50

var(--purple-50)

Aa

gl-text-purple-100

var(--purple-100)

Aa

gl-text-purple-200

var(--purple-200)

Aa

gl-text-purple-300

var(--purple-300)

Aa

gl-text-purple-400

var(--purple-400)

Aa

gl-text-purple-500

var(--purple-500)

Aa

gl-text-purple-600

var(--purple-600)

Aa

gl-text-purple-700

var(--purple-700)

Aa

gl-text-purple-800

var(--purple-800)

Aa

gl-text-purple-900

var(--purple-900)

Aa

gl-text-purple-950

var(--purple-950)

Aa

gl-text-red-50

var(--red-50)

Aa

gl-text-red-100

var(--red-100)

Aa

gl-text-red-200

var(--red-200)

Aa

gl-text-red-300

var(--red-300)

Aa

gl-text-red-400

var(--red-400)

Aa

gl-text-red-500

var(--red-500)

Aa

gl-text-red-600

var(--red-600)

Aa

gl-text-red-700

var(--red-700)

Aa

gl-text-red-800

var(--red-800)

Aa

gl-text-red-900

var(--red-900)

Aa

gl-text-red-950

var(--red-950)

Aa

gl-text-data-viz-green-50

var(--data-viz-green-50)

Aa

gl-text-data-viz-green-100

var(--data-viz-green-100)

Aa

gl-text-data-viz-green-200

var(--data-viz-green-200)

Aa

gl-text-data-viz-green-300

var(--data-viz-green-300)

Aa

gl-text-data-viz-green-400

var(--data-viz-green-400)

Aa

gl-text-data-viz-green-500

var(--data-viz-green-500)

Aa

gl-text-data-viz-green-600

var(--data-viz-green-600)

Aa

gl-text-data-viz-green-700

var(--data-viz-green-700)

Aa

gl-text-data-viz-green-800

var(--data-viz-green-800)

Aa

gl-text-data-viz-green-900

var(--data-viz-green-900)

Aa

gl-text-data-viz-green-950

var(--data-viz-green-950)

Aa

gl-text-data-viz-aqua-50

var(--data-viz-aqua-50)

Aa

gl-text-data-viz-aqua-100

var(--data-viz-aqua-100)

Aa

gl-text-data-viz-aqua-200

var(--data-viz-aqua-200)

Aa

gl-text-data-viz-aqua-300

var(--data-viz-aqua-300)

Aa

gl-text-data-viz-aqua-400

var(--data-viz-aqua-400)

Aa

gl-text-data-viz-aqua-500

var(--data-viz-aqua-500)

Aa

gl-text-data-viz-aqua-600

var(--data-viz-aqua-600)

Aa

gl-text-data-viz-aqua-700

var(--data-viz-aqua-700)

Aa

gl-text-data-viz-aqua-800

var(--data-viz-aqua-800)

Aa

gl-text-data-viz-aqua-900

var(--data-viz-aqua-900)

Aa

gl-text-data-viz-aqua-950

var(--data-viz-aqua-950)

Aa

gl-text-data-viz-blue-50

var(--data-viz-blue-50)

Aa

gl-text-data-viz-blue-100

var(--data-viz-blue-100)

Aa

gl-text-data-viz-blue-200

var(--data-viz-blue-200)

Aa

gl-text-data-viz-blue-300

var(--data-viz-blue-300)

Aa

gl-text-data-viz-blue-400

var(--data-viz-blue-400)

Aa

gl-text-data-viz-blue-500

var(--data-viz-blue-500)

Aa

gl-text-data-viz-blue-600

var(--data-viz-blue-600)

Aa

gl-text-data-viz-blue-700

var(--data-viz-blue-700)

Aa

gl-text-data-viz-blue-800

var(--data-viz-blue-800)

Aa

gl-text-data-viz-blue-900

var(--data-viz-blue-900)

Aa

gl-text-data-viz-blue-950

var(--data-viz-blue-950)

Aa

gl-text-data-viz-magenta-50

var(--data-viz-magenta-50)

Aa

gl-text-data-viz-magenta-100

var(--data-viz-magenta-100)

Aa

gl-text-data-viz-magenta-200

var(--data-viz-magenta-200)

Aa

gl-text-data-viz-magenta-300

var(--data-viz-magenta-300)

Aa

gl-text-data-viz-magenta-400

var(--data-viz-magenta-400)

Aa

gl-text-data-viz-magenta-500

var(--data-viz-magenta-500)

Aa

gl-text-data-viz-magenta-600

var(--data-viz-magenta-600)

Aa

gl-text-data-viz-magenta-700

var(--data-viz-magenta-700)

Aa

gl-text-data-viz-magenta-800

var(--data-viz-magenta-800)

Aa

gl-text-data-viz-magenta-900

var(--data-viz-magenta-900)

Aa

gl-text-data-viz-magenta-950

var(--data-viz-magenta-950)

Aa

gl-text-data-viz-orange-50

var(--data-viz-orange-50)

Aa

gl-text-data-viz-orange-100

var(--data-viz-orange-100)

Aa

gl-text-data-viz-orange-200

var(--data-viz-orange-200)

Aa

gl-text-data-viz-orange-300

var(--data-viz-orange-300)

Aa

gl-text-data-viz-orange-400

var(--data-viz-orange-400)

Aa

gl-text-data-viz-orange-500

var(--data-viz-orange-500)

Aa

gl-text-data-viz-orange-600

var(--data-viz-orange-600)

Aa

gl-text-data-viz-orange-700

var(--data-viz-orange-700)

Aa

gl-text-data-viz-orange-800

var(--data-viz-orange-800)

Aa

gl-text-data-viz-orange-900

var(--data-viz-orange-900)

Aa

gl-text-data-viz-orange-950

var(--data-viz-orange-950)

Aa

gl-text-neutral-0

var(--gl-color-neutral-0)

Aa

gl-text-neutral-10

var(--gl-color-neutral-10)

Aa

gl-text-neutral-50

var(--gl-color-neutral-50)

Aa

gl-text-neutral-100

var(--gl-color-neutral-100)

Aa

gl-text-neutral-200

var(--gl-color-neutral-200)

Aa

gl-text-neutral-300

var(--gl-color-neutral-300)

Aa

gl-text-neutral-400

var(--gl-color-neutral-400)

Aa

gl-text-neutral-500

var(--gl-color-neutral-500)

Aa

gl-text-neutral-600

var(--gl-color-neutral-600)

Aa

gl-text-neutral-700

var(--gl-color-neutral-700)

Aa

gl-text-neutral-800

var(--gl-color-neutral-800)

Aa

gl-text-neutral-900

var(--gl-color-neutral-900)

Aa

gl-text-neutral-950

var(--gl-color-neutral-950)

Aa

gl-text-neutral-1000

var(--gl-color-neutral-1000)

Aa

gl-text-brand-white

var(--gl-color-brand-white)

Aa

gl-text-brand-charcoal

var(--gl-color-brand-charcoal)

Aa

gl-text-brand-orange-01g

var(--gl-color-brand-orange-01g)

Aa

gl-text-brand-orange-01p

var(--gl-color-brand-orange-01p)

Aa

gl-text-brand-orange-02p

var(--gl-color-brand-orange-02p)

Aa

gl-text-brand-orange-03p

var(--gl-color-brand-orange-03p)

Aa

gl-text-brand-purple-01g

var(--gl-color-brand-purple-01g)

Aa

gl-text-brand-purple-01p

var(--gl-color-brand-purple-01p)

Aa

gl-text-brand-purple-02p

var(--gl-color-brand-purple-02p)

Aa

gl-text-brand-gray-01

var(--gl-color-brand-gray-01)

Aa

gl-text-brand-gray-02

var(--gl-color-brand-gray-02)

Aa

gl-text-brand-gray-03

var(--gl-color-brand-gray-03)

Aa

gl-text-brand-gray-04

var(--gl-color-brand-gray-04)

Aa

gl-text-brand-gray-05

var(--gl-color-brand-gray-05)

Aa

gl-text-brand-pink-01g

var(--gl-color-brand-pink-01g)

Aa

gl-text-default

var(--gl-text-color-default)

Aa

gl-text-subtle

var(--gl-text-color-subtle)

Aa

gl-text-strong

var(--gl-text-color-strong)

Aa

gl-text-heading

var(--gl-text-color-heading)

Aa

gl-text-link

var(--gl-text-color-link)

Aa

gl-text-warning

var(--gl-text-color-warning)

Aa

gl-text-danger

var(--gl-text-color-danger)

Aa

gl-text-success

var(--gl-text-color-success)

Aa

gl-text-disabled

var(--gl-text-color-disabled)

Aa

gl-text-status-neutral

var(--gl-status-neutral-text-color)

Aa

gl-text-status-info

var(--gl-status-info-text-color)

Aa

gl-text-status-success

var(--gl-status-success-text-color)

Aa

gl-text-status-warning

var(--gl-status-warning-text-color)

Aa

gl-text-status-danger

var(--gl-status-danger-text-color)

Aa

gl-text-status-brand

var(--gl-status-brand-text-color)

Aa

gl-text-feedback-strong

var(--gl-feedback-strong-text-color)

Aa

gl-text-feedback-neutral

var(--gl-feedback-neutral-text-color)

Aa

gl-text-feedback-info

var(--gl-feedback-info-text-color)

Aa

gl-text-feedback-success

var(--gl-feedback-success-text-color)

Aa

gl-text-feedback-warning

var(--gl-feedback-warning-text-color)

Aa

gl-text-feedback-danger

var(--gl-feedback-danger-text-color)

Aa

gl-text-feedback-brand

var(--gl-feedback-brand-text-color)

Aa

gl-text-primary

var(--gl-text-primary)

Aa

gl-text-secondary

var(--gl-text-secondary)

Aa

gl-text-tertiary

var(--gl-text-tertiary)

Aa

gl-text-control-placeholder

var(--gl-control-placeholder-color)

Aa

gl-text-control-error

var(--gl-control-text-color-error)

Aa

gl-text-control-valid

var(--gl-control-text-color-valid)

Border Color

NOTE: See layout borders and dividers for border color usage.

gl-border-inherit

inherit

gl-border-current

currentColor

gl-border-transparent

var(--gl-border-color-transparent)

gl-border-white

var(--white)

gl-border-black

var(--black)

gl-border-alpha-dark-2

var(--gl-color-alpha-dark-2)

gl-border-alpha-dark-4

var(--gl-color-alpha-dark-4)

gl-border-alpha-dark-6

var(--gl-color-alpha-dark-6)

gl-border-alpha-dark-8

var(--gl-color-alpha-dark-8)

gl-border-alpha-dark-16

var(--gl-color-alpha-dark-16)

gl-border-alpha-dark-24

var(--gl-color-alpha-dark-24)

gl-border-alpha-dark-40

var(--gl-color-alpha-dark-40)

gl-border-alpha-light-2

var(--gl-color-alpha-light-2)

gl-border-alpha-light-4

var(--gl-color-alpha-light-4)

gl-border-alpha-light-6

var(--gl-color-alpha-light-6)

gl-border-alpha-light-8

var(--gl-color-alpha-light-8)

gl-border-alpha-light-16

var(--gl-color-alpha-light-16)

gl-border-alpha-light-24

var(--gl-color-alpha-light-24)

gl-border-alpha-light-36

var(--gl-color-alpha-light-36)

gl-border-blue-50

var(--blue-50)

gl-border-blue-100

var(--blue-100)

gl-border-blue-200

var(--blue-200)

gl-border-blue-300

var(--blue-300)

gl-border-blue-400

var(--blue-400)

gl-border-blue-500

var(--blue-500)

gl-border-blue-600

var(--blue-600)

gl-border-blue-700

var(--blue-700)

gl-border-blue-800

var(--blue-800)

gl-border-blue-900

var(--blue-900)

gl-border-blue-950

var(--blue-950)

gl-border-gray-10

var(--gray-10)

gl-border-gray-50

var(--gray-50)

gl-border-gray-100

var(--gray-100)

gl-border-gray-200

var(--gray-200)

gl-border-gray-300

var(--gray-300)

gl-border-gray-400

var(--gray-400)

gl-border-gray-500

var(--gray-500)

gl-border-gray-600

var(--gray-600)

gl-border-gray-700

var(--gray-700)

gl-border-gray-800

var(--gray-800)

gl-border-gray-900

var(--gray-900)

gl-border-gray-950

var(--gray-950)

gl-border-green-50

var(--green-50)

gl-border-green-100

var(--green-100)

gl-border-green-200

var(--green-200)

gl-border-green-300

var(--green-300)

gl-border-green-400

var(--green-400)

gl-border-green-500

var(--green-500)

gl-border-green-600

var(--green-600)

gl-border-green-700

var(--green-700)

gl-border-green-800

var(--green-800)

gl-border-green-900

var(--green-900)

gl-border-green-950

var(--green-950)

gl-border-orange-50

var(--orange-50)

gl-border-orange-100

var(--orange-100)

gl-border-orange-200

var(--orange-200)

gl-border-orange-300

var(--orange-300)

gl-border-orange-400

var(--orange-400)

gl-border-orange-500

var(--orange-500)

gl-border-orange-600

var(--orange-600)

gl-border-orange-700

var(--orange-700)

gl-border-orange-800

var(--orange-800)

gl-border-orange-900

var(--orange-900)

gl-border-orange-950

var(--orange-950)

gl-border-purple-50

var(--purple-50)

gl-border-purple-100

var(--purple-100)

gl-border-purple-200

var(--purple-200)

gl-border-purple-300

var(--purple-300)

gl-border-purple-400

var(--purple-400)

gl-border-purple-500

var(--purple-500)

gl-border-purple-600

var(--purple-600)

gl-border-purple-700

var(--purple-700)

gl-border-purple-800

var(--purple-800)

gl-border-purple-900

var(--purple-900)

gl-border-purple-950

var(--purple-950)

gl-border-red-50

var(--red-50)

gl-border-red-100

var(--red-100)

gl-border-red-200

var(--red-200)

gl-border-red-300

var(--red-300)

gl-border-red-400

var(--red-400)

gl-border-red-500

var(--red-500)

gl-border-red-600

var(--red-600)

gl-border-red-700

var(--red-700)

gl-border-red-800

var(--red-800)

gl-border-red-900

var(--red-900)

gl-border-red-950

var(--red-950)

gl-border-data-viz-green-50

var(--data-viz-green-50)

gl-border-data-viz-green-100

var(--data-viz-green-100)

gl-border-data-viz-green-200

var(--data-viz-green-200)

gl-border-data-viz-green-300

var(--data-viz-green-300)

gl-border-data-viz-green-400

var(--data-viz-green-400)

gl-border-data-viz-green-500

var(--data-viz-green-500)

gl-border-data-viz-green-600

var(--data-viz-green-600)

gl-border-data-viz-green-700

var(--data-viz-green-700)

gl-border-data-viz-green-800

var(--data-viz-green-800)

gl-border-data-viz-green-900

var(--data-viz-green-900)

gl-border-data-viz-green-950

var(--data-viz-green-950)

gl-border-data-viz-aqua-50

var(--data-viz-aqua-50)

gl-border-data-viz-aqua-100

var(--data-viz-aqua-100)

gl-border-data-viz-aqua-200

var(--data-viz-aqua-200)

gl-border-data-viz-aqua-300

var(--data-viz-aqua-300)

gl-border-data-viz-aqua-400

var(--data-viz-aqua-400)

gl-border-data-viz-aqua-500

var(--data-viz-aqua-500)

gl-border-data-viz-aqua-600

var(--data-viz-aqua-600)

gl-border-data-viz-aqua-700

var(--data-viz-aqua-700)

gl-border-data-viz-aqua-800

var(--data-viz-aqua-800)

gl-border-data-viz-aqua-900

var(--data-viz-aqua-900)

gl-border-data-viz-aqua-950

var(--data-viz-aqua-950)

gl-border-data-viz-blue-50

var(--data-viz-blue-50)

gl-border-data-viz-blue-100

var(--data-viz-blue-100)

gl-border-data-viz-blue-200

var(--data-viz-blue-200)

gl-border-data-viz-blue-300

var(--data-viz-blue-300)

gl-border-data-viz-blue-400

var(--data-viz-blue-400)

gl-border-data-viz-blue-500

var(--data-viz-blue-500)

gl-border-data-viz-blue-600

var(--data-viz-blue-600)

gl-border-data-viz-blue-700

var(--data-viz-blue-700)

gl-border-data-viz-blue-800

var(--data-viz-blue-800)

gl-border-data-viz-blue-900

var(--data-viz-blue-900)

gl-border-data-viz-blue-950

var(--data-viz-blue-950)

gl-border-data-viz-magenta-50

var(--data-viz-magenta-50)

gl-border-data-viz-magenta-100

var(--data-viz-magenta-100)

gl-border-data-viz-magenta-200

var(--data-viz-magenta-200)

gl-border-data-viz-magenta-300

var(--data-viz-magenta-300)

gl-border-data-viz-magenta-400

var(--data-viz-magenta-400)

gl-border-data-viz-magenta-500

var(--data-viz-magenta-500)

gl-border-data-viz-magenta-600

var(--data-viz-magenta-600)

gl-border-data-viz-magenta-700

var(--data-viz-magenta-700)

gl-border-data-viz-magenta-800

var(--data-viz-magenta-800)

gl-border-data-viz-magenta-900

var(--data-viz-magenta-900)

gl-border-data-viz-magenta-950

var(--data-viz-magenta-950)

gl-border-data-viz-orange-50

var(--data-viz-orange-50)

gl-border-data-viz-orange-100

var(--data-viz-orange-100)

gl-border-data-viz-orange-200

var(--data-viz-orange-200)

gl-border-data-viz-orange-300

var(--data-viz-orange-300)

gl-border-data-viz-orange-400

var(--data-viz-orange-400)

gl-border-data-viz-orange-500

var(--data-viz-orange-500)

gl-border-data-viz-orange-600

var(--data-viz-orange-600)

gl-border-data-viz-orange-700

var(--data-viz-orange-700)

gl-border-data-viz-orange-800

var(--data-viz-orange-800)

gl-border-data-viz-orange-900

var(--data-viz-orange-900)

gl-border-data-viz-orange-950

var(--data-viz-orange-950)

gl-border-neutral-0

var(--gl-color-neutral-0)

gl-border-neutral-10

var(--gl-color-neutral-10)

gl-border-neutral-50

var(--gl-color-neutral-50)

gl-border-neutral-100

var(--gl-color-neutral-100)

gl-border-neutral-200

var(--gl-color-neutral-200)

gl-border-neutral-300

var(--gl-color-neutral-300)

gl-border-neutral-400

var(--gl-color-neutral-400)

gl-border-neutral-500

var(--gl-color-neutral-500)

gl-border-neutral-600

var(--gl-color-neutral-600)

gl-border-neutral-700

var(--gl-color-neutral-700)

gl-border-neutral-800

var(--gl-color-neutral-800)

gl-border-neutral-900

var(--gl-color-neutral-900)

gl-border-neutral-950

var(--gl-color-neutral-950)

gl-border-neutral-1000

var(--gl-color-neutral-1000)

gl-border-brand-white

var(--gl-color-brand-white)

gl-border-brand-charcoal

var(--gl-color-brand-charcoal)

gl-border-brand-orange-01g

var(--gl-color-brand-orange-01g)

gl-border-brand-orange-01p

var(--gl-color-brand-orange-01p)

gl-border-brand-orange-02p

var(--gl-color-brand-orange-02p)

gl-border-brand-orange-03p

var(--gl-color-brand-orange-03p)

gl-border-brand-purple-01g

var(--gl-color-brand-purple-01g)

gl-border-brand-purple-01p

var(--gl-color-brand-purple-01p)

gl-border-brand-purple-02p

var(--gl-color-brand-purple-02p)

gl-border-brand-gray-01

var(--gl-color-brand-gray-01)

gl-border-brand-gray-02

var(--gl-color-brand-gray-02)

gl-border-brand-gray-03

var(--gl-color-brand-gray-03)

gl-border-brand-gray-04

var(--gl-color-brand-gray-04)

gl-border-brand-gray-05

var(--gl-color-brand-gray-05)

gl-border-brand-pink-01g

var(--gl-color-brand-pink-01g)

gl-border-default

var(--gl-border-color-default)

gl-border-subtle

var(--gl-border-color-subtle)

gl-border-strong

var(--gl-border-color-strong)

gl-border-section

var(--gl-border-color-section)

gl-border-feedback-strong

var(--gl-feedback-strong-border-color)

gl-border-feedback-neutral

var(--gl-feedback-neutral-border-color)

gl-border-feedback-info

var(--gl-feedback-info-border-color)

gl-border-feedback-success

var(--gl-feedback-success-border-color)

gl-border-feedback-warning

var(--gl-feedback-warning-border-color)

gl-border-feedback-danger

var(--gl-feedback-danger-border-color)

gl-border-feedback-brand

var(--gl-feedback-brand-border-color)

gl-border-dropdown

var(--gl-dropdown-border-color)

gl-border-dropdown-divider

var(--gl-dropdown-divider-color)

gl-border-control-default

var(--gl-control-border-color-default)

gl-border-control-disabled

var(--gl-control-border-color-disabled)

gl-border-control-error

var(--gl-control-border-color-error)

Border Radius

gl-rounded-6

1.5rem

gl-rounded-none

var(--gl-border-radius-none)

gl-rounded-xs

var(--gl-border-radius-xs)

gl-rounded-sm

var(--gl-border-radius-sm)

gl-rounded-md

var(--gl-border-radius-md)

gl-rounded-lg

var(--gl-border-radius-lg)

gl-rounded-xl

var(--gl-border-radius-xl)

gl-rounded-2xl

var(--gl-border-radius-2xl)

gl-rounded-3xl

var(--gl-border-radius-3xl)

gl-rounded-full

var(--gl-border-radius-full)

gl-rounded-default

var(--gl-border-radius-default)

gl-rounded-action

var(--gl-action-border-radius)

gl-rounded-control

var(--gl-control-border-radius)

gl-rounded-feedback

var(--gl-feedback-border-radius)

gl-rounded-base

.25rem

gl-rounded-small

.125rem

gl-rounded-pill

.75rem

Padding

NOTE: See spacing for padding usage.

gl-p-0

var(--gl-spacing-scale-0)

gl-p-1

var(--gl-spacing-scale-1)

gl-p-2

var(--gl-spacing-scale-2)

gl-p-3

var(--gl-spacing-scale-3)

gl-p-4

var(--gl-spacing-scale-4)

gl-p-5

var(--gl-spacing-scale-5)

gl-p-6

var(--gl-spacing-scale-6)

gl-p-7

var(--gl-spacing-scale-7)

gl-p-8

var(--gl-spacing-scale-8)

gl-p-9

var(--gl-spacing-scale-9)

gl-p-10

var(--gl-spacing-scale-10)

gl-p-11

var(--gl-spacing-scale-11)

gl-p-12

var(--gl-spacing-scale-12)

gl-p-13

var(--gl-spacing-scale-13)

gl-p-15

var(--gl-spacing-scale-15)

gl-p-18

var(--gl-spacing-scale-18)

gl-p-20

var(--gl-spacing-scale-20)

gl-p-26

var(--gl-spacing-scale-26)

gl-p-28

var(--gl-spacing-scale-28)

gl-p-30

var(--gl-spacing-scale-30)

gl-p-31

var(--gl-spacing-scale-31)

gl-p-33

var(--gl-spacing-scale-33)

gl-p-34

var(--gl-spacing-scale-34)

gl-p-37

var(--gl-spacing-scale-37)

gl-p-48

var(--gl-spacing-scale-48)

gl-p-62

var(--gl-spacing-scale-62)

gl-p-75

var(--gl-spacing-scale-75)

gl-p-80

var(--gl-spacing-scale-80)

gl-p-88

var(--gl-spacing-scale-88)

gl-p-px

var(--gl-spacing-scale-px)

gl-p-2-5

var(--gl-spacing-scale-2-5)

gl-p-11-5

var(--gl-spacing-scale-11-5)

Margin

NOTE: See spacing for margin usage.

gl-m-0

var(--gl-spacing-scale-0)

gl-m-1

var(--gl-spacing-scale-1)

gl-m-2

var(--gl-spacing-scale-2)

gl-m-3

var(--gl-spacing-scale-3)

gl-m-4

var(--gl-spacing-scale-4)

gl-m-5

var(--gl-spacing-scale-5)

gl-m-6

var(--gl-spacing-scale-6)

gl-m-7

var(--gl-spacing-scale-7)

gl-m-8

var(--gl-spacing-scale-8)

gl-m-9

var(--gl-spacing-scale-9)

gl-m-10

var(--gl-spacing-scale-10)

gl-m-11

var(--gl-spacing-scale-11)

gl-m-12

var(--gl-spacing-scale-12)

gl-m-13

var(--gl-spacing-scale-13)

gl-m-15

var(--gl-spacing-scale-15)

gl-m-18

var(--gl-spacing-scale-18)

gl-m-20

var(--gl-spacing-scale-20)

gl-m-26

var(--gl-spacing-scale-26)

gl-m-28

var(--gl-spacing-scale-28)

gl-m-30

var(--gl-spacing-scale-30)

gl-m-31

var(--gl-spacing-scale-31)

gl-m-33

var(--gl-spacing-scale-33)

gl-m-34

var(--gl-spacing-scale-34)

gl-m-37

var(--gl-spacing-scale-37)

gl-m-48

var(--gl-spacing-scale-48)

gl-m-62

var(--gl-spacing-scale-62)

gl-m-75

var(--gl-spacing-scale-75)

gl-m-80

var(--gl-spacing-scale-80)

gl-m-88

var(--gl-spacing-scale-88)

gl-m-px

var(--gl-spacing-scale-px)

gl-m-2-5

var(--gl-spacing-scale-2-5)

gl-m-11-5

var(--gl-spacing-scale-11-5)

Headings

NOTE: See typography headings for heading usage.

The quick brown fox jumps over the lazy dog

gl-heading-display

The quick brown fox jumps over the lazy dog

gl-heading-1

The quick brown fox jumps over the lazy dog

gl-heading-1-fixed

The quick brown fox jumps over the lazy dog

gl-heading-2

The quick brown fox jumps over the lazy dog

gl-heading-2-fixed

The quick brown fox jumps over the lazy dog

gl-heading-3

The quick brown fox jumps over the lazy dog

gl-heading-3-fixed

The quick brown fox jumps over the lazy dog

gl-heading-4

The quick brown fox jumps over the lazy dog

gl-heading-4-fixed

The quick brown fox jumps over the lazy dog

gl-heading-5

The quick brown fox jumps over the lazy dog

gl-heading-5-fixed

The quick brown fox jumps over the lazy dog

gl-heading-6

The quick brown fox jumps over the lazy dog

gl-heading-6-fixed

The quick brown fox jumps over the lazy dog

gl-heading-scale-100

The quick brown fox jumps over the lazy dog

gl-heading-scale-100-fixed

The quick brown fox jumps over the lazy dog

gl-heading-scale-200

The quick brown fox jumps over the lazy dog

gl-heading-scale-200-fixed

The quick brown fox jumps over the lazy dog

gl-heading-scale-300

The quick brown fox jumps over the lazy dog

gl-heading-scale-300-fixed

The quick brown fox jumps over the lazy dog

gl-heading-scale-400

The quick brown fox jumps over the lazy dog

gl-heading-scale-400-fixed

The quick brown fox jumps over the lazy dog

gl-heading-scale-500

The quick brown fox jumps over the lazy dog

gl-heading-scale-500-fixed

The quick brown fox jumps over the lazy dog

gl-heading-scale-600

The quick brown fox jumps over the lazy dog

gl-heading-scale-600-fixed

The quick brown fox jumps over the lazy dog

gl-heading-scale-700

The quick brown fox jumps over the lazy dog

gl-heading-scale-700-fixed

The quick brown fox jumps over the lazy dog

gl-heading-scale-800

The quick brown fox jumps over the lazy dog

gl-heading-scale-800-fixed

Font Family

NOTE: See typography fundamentals for font-family usage.

The quick brown fox jumps over the lazy dog

gl-font-regular

var(--gl-font-family-regular)

          The quick brown fox jumps over the lazy dog
        

gl-font-monospace

var(--gl-font-family-monospace)

Font Weight

NOTE: See typography fundamentals for font-weight usage.

The quick brown fox jumps over the lazy dog

gl-font-100

var(--gl-font-weight-100)

The quick brown fox jumps over the lazy dog

gl-font-300

var(--gl-font-weight-300)

The quick brown fox jumps over the lazy dog

gl-font-normal

var(--gl-font-weight-normal)

The quick brown fox jumps over the lazy dog

gl-font-semibold

var(--gl-font-weight-semibold)

The quick brown fox jumps over the lazy dog

gl-font-bold

var(--gl-font-weight-bold)

The quick brown fox jumps over the lazy dog

gl-font-heading

var(--gl-font-weight-heading)

Line Height

NOTE: See typography fundamentals for line-height usage.

The quick brown fox jumps over the lazy dog

gl-leading-0

0

The quick brown fox jumps over the lazy dog

gl-leading-1

1

The quick brown fox jumps over the lazy dog

gl-leading-12

var(--gl-line-height-12)

The quick brown fox jumps over the lazy dog

gl-leading-16

var(--gl-line-height-16)

The quick brown fox jumps over the lazy dog

gl-leading-20

var(--gl-line-height-20)

The quick brown fox jumps over the lazy dog

gl-leading-24

var(--gl-line-height-24)

The quick brown fox jumps over the lazy dog

gl-leading-28

var(--gl-line-height-28)

The quick brown fox jumps over the lazy dog

gl-leading-32

var(--gl-line-height-32)

The quick brown fox jumps over the lazy dog

gl-leading-36

var(--gl-line-height-36)

The quick brown fox jumps over the lazy dog

gl-leading-42

var(--gl-line-height-42)

The quick brown fox jumps over the lazy dog

gl-leading-44

var(--gl-line-height-44)

The quick brown fox jumps over the lazy dog

gl-leading-52

var(--gl-line-height-52)

The quick brown fox jumps over the lazy dog

gl-leading-reset

inherit

The quick brown fox jumps over the lazy dog

gl-leading-normal

1rem

The quick brown fox jumps over the lazy dog

gl-leading-heading

var(--gl-line-height-heading)

Box Shadow

NOTE: See elevation for box shadow usage.

gl-shadow

var(--gl-shadow-md)

gl-shadow-none

none

gl-shadow-sm

var(--gl-shadow-sm)

gl-shadow-md

var(--gl-shadow-md)

gl-shadow-lg

var(--gl-shadow-lg)

gl-shadow-inner-1-blue-500

inset 0 0 0 1px var(--blue-500, #1f75cb)

gl-shadow-inner-1-gray-100

inset 0 0 0 1px var(--gray-100, #dcdcde)

gl-shadow-inner-1-border-default

inset 0 0 0 1px var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))

gl-shadow-inner-1-border-subtle

inset 0 0 0 1px var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))

gl-shadow-inner-1-border-strong

inset 0 0 0 1px var(--gl-border-color-strong, var(--gl-color-neutral-200, #bfbfc3))

gl-shadow-inner-1-gray-200

inset 0 0 0 1px var(--gray-200, #bfbfc3)

gl-shadow-inner-1-gray-400

inset 0 0 0 1px var(--gray-400, #89888d)

gl-shadow-inner-1-red-300

inset 0 0 0 1px var(--red-300, #f57f6c)

gl-shadow-inner-1-red-400

inset 0 0 0 1px var(--red-400, #ec5941)

gl-shadow-inner-1-red-500

inset 0 0 0 1px var(--red-500, #dd2b0e)

gl-shadow-inner-2-blue-400

inset 0 0 0 2px var(--blue-400, #428fdc)

gl-shadow-inner-b-1-gray-100

inset 0 -1px 0 0 var(--gray-100, #dcdcde)

gl-shadow-inner-b-1-border-default

inset 0 -1px 0 0 var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))

gl-shadow-inner-b-2-blue-500

inset 0 -2px 0 0 var(--blue-500, #1f75cb)

gl-shadow-inner-l-3-red-600

inset 3px 0 0 0 var(--red-600, #c91c00)

gl-shadow-inner-l-4-gray-100

inset 4px 0 0 0 var(--gray-100, #dcdcde)

gl-shadow-x0-y0-b3-s1-blue-500

inset 0 0 3px 1px var(--blue-500, #1f75cb)

gl-shadow-x0-y2-b4-s0

0 2px 4px 0 #0000001a

Opacity

gl-opacity-0

var(--gl-opacity-0)

gl-opacity-1

var(--gl-opacity-1)

gl-opacity-2

var(--gl-opacity-2)

gl-opacity-3

var(--gl-opacity-3)

gl-opacity-4

var(--gl-opacity-4)

gl-opacity-5

var(--gl-opacity-5)

gl-opacity-6

var(--gl-opacity-6)

gl-opacity-7

var(--gl-opacity-7)

gl-opacity-8

var(--gl-opacity-8)

gl-opacity-9

var(--gl-opacity-9)

gl-opacity-10

var(--gl-opacity-10)

Colors

Background Color

Text Color

Border

Border Color

Border Radius

Spacing

Padding

Margin

Typography

Headings

Font Family

Font Size

Font Weight

Line Height

Box Shadow

Opacity