Create surface design tokens for background colors in light & dark mode

Some color usage requires slight variation in value between modes (e.g. light and dark mode). The context is still the same but presentationally the color should shift to align with wider interface.

In some instances CSS custom properties have been used to allow extend a default color with a fallback e.g. var(--gray-10, $white). This isn't extendable to further/future modes and isn't obvious which color is applied and when.

Semantic design tokens such as --gl-bg-base/--gl-bg-alt (or --gl-surface-base/--gl-surface-alt) could allow for usage of color to be generic, while the underlying values change between modes.

Edited Nov 01, 2023 by Scott de Jonge