@rhds/elements/lib/context/color/context-color.css

Red Hat Design System Elements

/**
 * It's important for `color-palette` to take precedence over `on`
 * when setting `--context`, because a `dark` card that's on a `light`
 * background must create a new `dark` context for its descendants
 */

:host(:is([color-palette^="dark"])) {
  --context: dark;
  --_context-text: var(--rh-color-text-primary-on-dark, #ffffff);
}

:host(:is([color-palette^="light"],[color-palette="base"])) {
  --context: light;
  --_context-text: var(--rh-color-text-primary-on-light, #151515);
}

:host(:is([color-palette="lightest"])) {
  --_context-background-color: var(--rh-color-surface-lightest, #ffffff);
}

:host(:is([color-palette="lighter"])) {
  --_context-background-color: var(--rh-color-surface-lighter, #f2f2f2);
}

:host(:is([color-palette="light"])) {
  --_context-background-color: var(--rh-color-surface-light, #e0e0e0);
}

:host(:is([color-palette="base"])) {
  --_context-background-color: var(--rh-color-surface-lightest, #ffffff);
}

:host(:is([color-palette="dark"])) {
  --_context-background-color: var(--rh-color-surface-dark, #383838);
}

:host(:is([color-palette="darker"])) {
  --_context-background-color: var(--rh-color-surface-darker, #1f1f1f);
}

:host(:is([color-palette="darkest"])) {
  --_context-background-color: var(--rh-color-surface-darkest, #151515);
}