@porsche-design-system/components-angular/vanilla-extract/esm/color/color-scheme.mjs

Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.

import { colorFocusDark } from '../tokens/dist/esm/color/dark/a11y/colorFocusDark.mjs';
import { colorBackdropDark } from '../tokens/dist/esm/color/dark/background/colorBackdropDark.mjs';
import { colorCanvasDark } from '../tokens/dist/esm/color/dark/background/colorCanvasDark.mjs';
import { colorFrostedDark } from '../tokens/dist/esm/color/dark/background/colorFrostedDark.mjs';
import { colorFrostedSoftDark } from '../tokens/dist/esm/color/dark/background/colorFrostedSoftDark.mjs';
import { colorFrostedStrongDark } from '../tokens/dist/esm/color/dark/background/colorFrostedStrongDark.mjs';
import { colorSurfaceDark } from '../tokens/dist/esm/color/dark/background/colorSurfaceDark.mjs';
import { colorContrastLowerDark } from '../tokens/dist/esm/color/dark/foreground/colorContrastLowerDark.mjs';
import { colorContrastLowDark } from '../tokens/dist/esm/color/dark/foreground/colorContrastLowDark.mjs';
import { colorContrastMediumDark } from '../tokens/dist/esm/color/dark/foreground/colorContrastMediumDark.mjs';
import { colorContrastHighDark } from '../tokens/dist/esm/color/dark/foreground/colorContrastHighDark.mjs';
import { colorContrastHigherDark } from '../tokens/dist/esm/color/dark/foreground/colorContrastHigherDark.mjs';
import { colorPrimaryDark } from '../tokens/dist/esm/color/dark/foreground/colorPrimaryDark.mjs';
import { colorErrorDark } from '../tokens/dist/esm/color/dark/semantic/colorErrorDark.mjs';
import { colorErrorFrostedDark } from '../tokens/dist/esm/color/dark/semantic/colorErrorFrostedDark.mjs';
import { colorErrorFrostedSoftDark } from '../tokens/dist/esm/color/dark/semantic/colorErrorFrostedSoftDark.mjs';
import { colorErrorLowDark } from '../tokens/dist/esm/color/dark/semantic/colorErrorLowDark.mjs';
import { colorErrorMediumDark } from '../tokens/dist/esm/color/dark/semantic/colorErrorMediumDark.mjs';
import { colorInfoDark } from '../tokens/dist/esm/color/dark/semantic/colorInfoDark.mjs';
import { colorInfoFrostedDark } from '../tokens/dist/esm/color/dark/semantic/colorInfoFrostedDark.mjs';
import { colorInfoFrostedSoftDark } from '../tokens/dist/esm/color/dark/semantic/colorInfoFrostedSoftDark.mjs';
import { colorInfoLowDark } from '../tokens/dist/esm/color/dark/semantic/colorInfoLowDark.mjs';
import { colorInfoMediumDark } from '../tokens/dist/esm/color/dark/semantic/colorInfoMediumDark.mjs';
import { colorSuccessDark } from '../tokens/dist/esm/color/dark/semantic/colorSuccessDark.mjs';
import { colorSuccessFrostedDark } from '../tokens/dist/esm/color/dark/semantic/colorSuccessFrostedDark.mjs';
import { colorSuccessFrostedSoftDark } from '../tokens/dist/esm/color/dark/semantic/colorSuccessFrostedSoftDark.mjs';
import { colorSuccessLowDark } from '../tokens/dist/esm/color/dark/semantic/colorSuccessLowDark.mjs';
import { colorSuccessMediumDark } from '../tokens/dist/esm/color/dark/semantic/colorSuccessMediumDark.mjs';
import { colorWarningDark } from '../tokens/dist/esm/color/dark/semantic/colorWarningDark.mjs';
import { colorWarningFrostedDark } from '../tokens/dist/esm/color/dark/semantic/colorWarningFrostedDark.mjs';
import { colorWarningFrostedSoftDark } from '../tokens/dist/esm/color/dark/semantic/colorWarningFrostedSoftDark.mjs';
import { colorWarningLowDark } from '../tokens/dist/esm/color/dark/semantic/colorWarningLowDark.mjs';
import { colorWarningMediumDark } from '../tokens/dist/esm/color/dark/semantic/colorWarningMediumDark.mjs';
import { colorFocusLight } from '../tokens/dist/esm/color/light/a11y/colorFocusLight.mjs';
import { colorBackdropLight } from '../tokens/dist/esm/color/light/background/colorBackdropLight.mjs';
import { colorCanvasLight } from '../tokens/dist/esm/color/light/background/colorCanvasLight.mjs';
import { colorFrostedLight } from '../tokens/dist/esm/color/light/background/colorFrostedLight.mjs';
import { colorFrostedSoftLight } from '../tokens/dist/esm/color/light/background/colorFrostedSoftLight.mjs';
import { colorFrostedStrongLight } from '../tokens/dist/esm/color/light/background/colorFrostedStrongLight.mjs';
import { colorSurfaceLight } from '../tokens/dist/esm/color/light/background/colorSurfaceLight.mjs';
import { colorContrastLowerLight } from '../tokens/dist/esm/color/light/foreground/colorContrastLowerLight.mjs';
import { colorContrastLowLight } from '../tokens/dist/esm/color/light/foreground/colorContrastLowLight.mjs';
import { colorContrastMediumLight } from '../tokens/dist/esm/color/light/foreground/colorContrastMediumLight.mjs';
import { colorContrastHighLight } from '../tokens/dist/esm/color/light/foreground/colorContrastHighLight.mjs';
import { colorContrastHigherLight } from '../tokens/dist/esm/color/light/foreground/colorContrastHigherLight.mjs';
import { colorPrimaryLight } from '../tokens/dist/esm/color/light/foreground/colorPrimaryLight.mjs';
import { colorErrorFrostedLight } from '../tokens/dist/esm/color/light/semantic/colorErrorFrostedLight.mjs';
import { colorErrorFrostedSoftLight } from '../tokens/dist/esm/color/light/semantic/colorErrorFrostedSoftLight.mjs';
import { colorErrorLight } from '../tokens/dist/esm/color/light/semantic/colorErrorLight.mjs';
import { colorErrorLowLight } from '../tokens/dist/esm/color/light/semantic/colorErrorLowLight.mjs';
import { colorErrorMediumLight } from '../tokens/dist/esm/color/light/semantic/colorErrorMediumLight.mjs';
import { colorInfoFrostedLight } from '../tokens/dist/esm/color/light/semantic/colorInfoFrostedLight.mjs';
import { colorInfoFrostedSoftLight } from '../tokens/dist/esm/color/light/semantic/colorInfoFrostedSoftLight.mjs';
import { colorInfoLight } from '../tokens/dist/esm/color/light/semantic/colorInfoLight.mjs';
import { colorInfoLowLight } from '../tokens/dist/esm/color/light/semantic/colorInfoLowLight.mjs';
import { colorInfoMediumLight } from '../tokens/dist/esm/color/light/semantic/colorInfoMediumLight.mjs';
import { colorSuccessFrostedLight } from '../tokens/dist/esm/color/light/semantic/colorSuccessFrostedLight.mjs';
import { colorSuccessFrostedSoftLight } from '../tokens/dist/esm/color/light/semantic/colorSuccessFrostedSoftLight.mjs';
import { colorSuccessLight } from '../tokens/dist/esm/color/light/semantic/colorSuccessLight.mjs';
import { colorSuccessLowLight } from '../tokens/dist/esm/color/light/semantic/colorSuccessLowLight.mjs';
import { colorSuccessMediumLight } from '../tokens/dist/esm/color/light/semantic/colorSuccessMediumLight.mjs';
import { colorWarningFrostedLight } from '../tokens/dist/esm/color/light/semantic/colorWarningFrostedLight.mjs';
import { colorWarningFrostedSoftLight } from '../tokens/dist/esm/color/light/semantic/colorWarningFrostedSoftLight.mjs';
import { colorWarningLight } from '../tokens/dist/esm/color/light/semantic/colorWarningLight.mjs';
import { colorWarningLowLight } from '../tokens/dist/esm/color/light/semantic/colorWarningLowLight.mjs';
import { colorWarningMediumLight } from '../tokens/dist/esm/color/light/semantic/colorWarningMediumLight.mjs';

const lightColorVariables = {
    '--_color-focus': colorFocusLight,
    '--_color-canvas': colorCanvasLight,
    '--_color-surface': colorSurfaceLight,
    '--_color-frosted': colorFrostedLight,
    '--_color-frosted-soft': colorFrostedSoftLight,
    '--_color-frosted-strong': colorFrostedStrongLight,
    '--_color-backdrop': colorBackdropLight,
    '--_color-contrast-lower': colorContrastLowerLight,
    '--_color-contrast-low': colorContrastLowLight,
    '--_color-contrast-medium': colorContrastMediumLight,
    '--_color-contrast-high': colorContrastHighLight,
    '--_color-contrast-higher': colorContrastHigherLight,
    '--_color-primary': colorPrimaryLight,
    '--_color-success': colorSuccessLight,
    '--_color-success-low': colorSuccessLowLight,
    '--_color-success-medium': colorSuccessMediumLight,
    '--_color-success-frosted': colorSuccessFrostedLight,
    '--_color-success-frosted-soft': colorSuccessFrostedSoftLight,
    '--_color-warning': colorWarningLight,
    '--_color-warning-low': colorWarningLowLight,
    '--_color-warning-medium': colorWarningMediumLight,
    '--_color-warning-frosted': colorWarningFrostedLight,
    '--_color-warning-frosted-soft': colorWarningFrostedSoftLight,
    '--_color-error': colorErrorLight,
    '--_color-error-low': colorErrorLowLight,
    '--_color-error-medium': colorErrorMediumLight,
    '--_color-error-frosted': colorErrorFrostedLight,
    '--_color-error-frosted-soft': colorErrorFrostedSoftLight,
    '--_color-info': colorInfoLight,
    '--_color-info-low': colorInfoLowLight,
    '--_color-info-medium': colorInfoMediumLight,
    '--_color-info-frosted': colorInfoFrostedLight,
    '--_color-info-frosted-soft': colorInfoFrostedSoftLight,
};
const darkColorVariables = {
    '--_color-focus': colorFocusDark,
    '--_color-canvas': colorCanvasDark,
    '--_color-surface': colorSurfaceDark,
    '--_color-frosted': colorFrostedDark,
    '--_color-frosted-soft': colorFrostedSoftDark,
    '--_color-frosted-strong': colorFrostedStrongDark,
    '--_color-backdrop': colorBackdropDark,
    '--_color-contrast-lower': colorContrastLowerDark,
    '--_color-contrast-low': colorContrastLowDark,
    '--_color-contrast-medium': colorContrastMediumDark,
    '--_color-contrast-high': colorContrastHighDark,
    '--_color-contrast-higher': colorContrastHigherDark,
    '--_color-primary': colorPrimaryDark,
    '--_color-success': colorSuccessDark,
    '--_color-success-low': colorSuccessLowDark,
    '--_color-success-medium': colorSuccessMediumDark,
    '--_color-success-frosted': colorSuccessFrostedDark,
    '--_color-success-frosted-soft': colorSuccessFrostedSoftDark,
    '--_color-warning': colorWarningDark,
    '--_color-warning-low': colorWarningLowDark,
    '--_color-warning-medium': colorWarningMediumDark,
    '--_color-warning-frosted': colorWarningFrostedDark,
    '--_color-warning-frosted-soft': colorWarningFrostedSoftDark,
    '--_color-error': colorErrorDark,
    '--_color-error-low': colorErrorLowDark,
    '--_color-error-medium': colorErrorMediumDark,
    '--_color-error-frosted': colorErrorFrostedDark,
    '--_color-error-frosted-soft': colorErrorFrostedSoftDark,
    '--_color-info': colorInfoDark,
    '--_color-info-low': colorInfoLowDark,
    '--_color-info-medium': colorInfoMediumDark,
    '--_color-info-frosted': colorInfoFrostedDark,
    '--_color-info-frosted-soft': colorInfoFrostedSoftDark,
};
const colorSchemeStyles = [
    {
        selector: '.scheme-normal',
        rule: { colorScheme: 'normal' },
    },
    {
        selector: '.scheme-dark',
        rule: { colorScheme: 'dark' },
    },
    {
        selector: '.scheme-light',
        rule: { colorScheme: 'light' },
    },
    {
        selector: '.scheme-light-dark',
        rule: { colorScheme: 'light dark' },
    },
    {
        selector: '.scheme-only-dark',
        rule: { colorScheme: 'only dark' },
    },
    {
        selector: '.scheme-only-light',
        rule: { colorScheme: 'only light' },
    },
    {
        selector: ':root, .scheme-light, .scheme-only-light, .scheme-normal, .scheme-light-dark',
        rule: { '@supports': { 'not (color: light-dark(white, black))': lightColorVariables } },
    },
    {
        selector: '.scheme-dark, .scheme-only-dark',
        rule: { '@supports': { 'not (color: light-dark(white, black))': darkColorVariables } },
    },
    {
        selector: '.scheme-light-dark',
        rule: {
            '@supports': {
                'not (color: light-dark(white, black))': {
                    '@media': { '(prefers-color-scheme: dark)': darkColorVariables },
                },
            },
        },
    },
];

export { colorSchemeStyles };