/* * SPDX-FileCopyrightText: Copyright 2026 LG Electronics Inc. * SPDX-License-Identifier: Apache-2.0 */ @import "@enovaui/core-tokens/css/color-primitive.css"; /* ---------------------------------------- Semantic Color Tokens ------------------------------------------- */ :root { /* Background */ --semantic-color-background-full-default: var(--primitive-color-black); --semantic-color-background-overlay-default: var(--primitive-color-cool-gray-15); --semantic-color-background-popup-default: var(--primitive-color-neutral-gray-90); /* On Background */ --semantic-color-on-background-default-error: var(--primitive-color-deep-orange-50); --semantic-color-on-background-main: var(--primitive-color-white); --semantic-color-on-background-sub: var(--primitive-color-neutral-gray-70); --semantic-color-on-background-accent: var(--primitive-color-active-red-55); --semantic-color-on-background-highlight-green: var(--primitive-color-mint-green-50); --semantic-color-on-background-highlight-yellow: var(--primitive-color-yellow-80); --semantic-color-on-background-actionguide: var(--primitive-color-neutral-gray-50); --semantic-color-on-background-heading: var(--primitive-color-neutral-gray-60); --semantic-color-on-background-white: var(--primitive-color-white); --semantic-color-on-background-black: var(--primitive-color-black); --semantic-color-on-background-popup-main: var(--primitive-color-neutral-gray-10); --semantic-color-on-background-popup-sub: var(--primitive-color-neutral-gray-35); /* Surface */ --semantic-color-surface-default: var(--primitive-color-cool-gray-30); --semantic-color-surface-default-focused: var(--primitive-color-white); --semantic-color-surface-default-selected: var(--primitive-color-cool-gray-10); --semantic-color-surface-default-disabled-focused: var(--primitive-color-neutral-gray-70); --semantic-color-surface-default-group: var(--primitive-color-white); --semantic-color-surface-default-handle: var(--primitive-color-active-red-70); --semantic-color-surface-default-indicator: var(--primitive-color-white); --semantic-color-surface-default-notification: var(--primitive-color-deep-orange-50); --semantic-color-surface-default-placeholder: var(--primitive-color-cool-gray-10); --semantic-color-surface-default-track: var(--primitive-color-neutral-gray-40); --semantic-color-surface-default-translucent: var(--primitive-color-white); --semantic-color-surface-sub-notification: var(--primitive-color-mint-green-50); --semantic-color-surface-accent: var(--primitive-color-active-red-55); --semantic-color-surface-highlight: var(--primitive-color-mint-green-50); --semantic-color-surface-context-group: var(--primitive-color-cool-gray-25); --semantic-color-surface-input-field: var(--primitive-color-neutral-gray-30); --semantic-color-surface-input-field-success: var(--primitive-color-neutral-gray-40); --semantic-color-surface-scroll-handle: var(--primitive-color-neutral-gray-50); --semantic-color-surface-toggle: var(--primitive-color-neutral-gray-45); --semantic-color-surface-toggle-active: var(--primitive-color-mint-green-50); --semantic-color-surface-toggle-handle: var(--primitive-color-neutral-gray-70); --semantic-color-surface-white: var(--primitive-color-white); --semantic-color-surface-black: var(--primitive-color-black); --semantic-color-surface-spinner: var(--primitive-color-cool-gray-20); --semantic-color-surface-overlay-default: var(--primitive-color-cool-gray-15); --semantic-color-surface-popup-default: var(--primitive-color-cool-gray-55); --semantic-color-surface-popup-default-selected: var(--primitive-color-cool-gray-40); --semantic-color-surface-popup-default-disabled-focused: var(--primitive-color-cool-gray-80); --semantic-color-surface-popup-default-group: var(--primitive-color-neutral-gray-50); --semantic-color-surface-popup-default-track: var(--primitive-color-cool-gray-50); --semantic-color-surface-popup-input-field: var(--primitive-color-neutral-gray-80); --semantic-color-surface-popup-input-field-success: var(--primitive-color-neutral-gray-90); --semantic-color-surface-popup-scroll-handle: var(--primitive-color-cool-gray-60); --semantic-color-surface-popup-toast: var(--primitive-color-neutral-gray-90); /* On Surface */ --semantic-color-on-surface-default-rec: var(--primitive-color-active-red-55); --semantic-color-on-surface-main: var(--primitive-color-white); --semantic-color-on-surface-main-focused: var(--primitive-color-neutral-gray-10); --semantic-color-on-surface-main-selected: var(--primitive-color-white); --semantic-color-on-surface-sub: var(--primitive-color-neutral-gray-70); --semantic-color-on-surface-sub-focused: var(--primitive-color-neutral-gray-40); --semantic-color-on-surface-sub-selected: var(--primitive-color-neutral-gray-50); --semantic-color-on-surface-accent: var(--primitive-color-active-red-55); --semantic-color-on-surface-highlight-green: var(--primitive-color-mint-green-50); --semantic-color-on-surface-highlight-yellow: var(--primitive-color-yellow-80); --semantic-color-on-surface-input-field: var(--primitive-color-white); --semantic-color-on-surface-white: var(--primitive-color-white); --semantic-color-on-surface-black: var(--primitive-color-black); --semantic-color-on-surface-overlay-main: var(--primitive-color-white); --semantic-color-on-surface-overlay-sub: var(--primitive-color-neutral-gray-70); --semantic-color-on-surface-popup-default: var(--primitive-color-neutral-gray-10); --semantic-color-on-surface-popup-input-field: var(--primitive-color-neutral-gray-10); /* Stroke */ --semantic-color-stroke-main: var(--primitive-color-neutral-gray-35); --semantic-color-stroke-main-focused: var(--primitive-color-white); --semantic-color-stroke-main-selected: var(--primitive-color-cool-gray-40); --semantic-color-stroke-main-disabled-focused: var(--primitive-color-neutral-gray-70); --semantic-color-stroke-sub: var(--primitive-color-neutral-gray-70); --semantic-color-stroke-accent: var(--primitive-color-active-red-55); --semantic-color-stroke-highlight: var(--primitive-color-white); --semantic-color-stroke-button-outline: var(--primitive-color-white); --semantic-color-stroke-selection-inactive: var(--primitive-color-white); --semantic-color-stroke-selection-inactive-focused: var(--primitive-color-neutral-gray-10); --semantic-color-stroke-white: var(--primitive-color-white); --semantic-color-stroke-black: var(--primitive-color-black); --semantic-color-stroke-overlay-default: var(--primitive-color-cool-gray-30); --semantic-color-stroke-popup-selection-inactive: var(--primitive-color-neutral-gray-10); /* Scrim */ --semantic-color-scrim-default: var(--primitive-color-black); }