@porsche-design-system/components-react/stylesheets/color-scheme.css

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.

.scheme-normal {
  color-scheme: normal;
}

.scheme-dark {
  color-scheme: dark;
}

.scheme-light {
  color-scheme: light;
}

.scheme-light-dark {
  color-scheme: light dark;
}

.scheme-only-dark {
  color-scheme: only dark;
}

.scheme-only-light {
  color-scheme: only light;
}

@supports not (color: light-dark(white, black)) {
  :root,
  .scheme-light,
  .scheme-only-light,
  .scheme-normal,
  .scheme-light-dark {
    --p-color-canvas: #fff;
    --p-color-surface: hsl(240 10% 95%);
    --p-color-frosted: hsl(240 5% 70% / 0.148);
    --p-color-frosted-soft: hsl(234 9.8% 60% / 0.06);
    --p-color-frosted-strong: hsl(236 6.5% 42% / 0.236);
    --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
    --p-color-primary: hsl(225 66.7% 1.2%);
    --p-color-contrast-higher: hsl(240 8.7% 9% / 0.8);
    --p-color-contrast-high: hsl(240 7.1% 11% / 0.7);
    --p-color-contrast-medium: hsl(240 6.1% 7% / 0.6);
    --p-color-contrast-low: hsl(240 5.3% 14.9% / 0.5);
    --p-color-contrast-lower: hsl(234 6% 32.9% / 0.324);
    --p-color-info: hsl(228 83.2% 51%);
    --p-color-info-medium: hsl(228 83.2% 51% / 0.6);
    --p-color-info-low: hsl(228 83.2% 51% / 0.18);
    --p-color-info-frosted: hsl(211 100% 90% / 0.55);
    --p-color-info-frosted-soft: hsl(211 80% 95% / 0.55);
    --p-color-success: hsl(115 77.5% 27.8%);
    --p-color-success-medium: hsl(115 77.5% 27.8% / 0.6);
    --p-color-success-low: hsl(115 77.5% 27.8% / 0.18);
    --p-color-success-frosted: hsl(109 100% 90% / 0.55);
    --p-color-success-frosted-soft: hsl(109 80% 95% / 0.55);
    --p-color-warning: hsl(28 97.7% 34.1%);
    --p-color-warning-medium: hsl(28 97.7% 34.1% / 0.6);
    --p-color-warning-low: hsl(28 97.7% 34.1% / 0.18);
    --p-color-warning-frosted: hsl(40 100% 90% / 0.55);
    --p-color-warning-frosted-soft: hsl(40 80% 95% / 0.55);
    --p-color-error: hsl(357 78% 41%);
    --p-color-error-medium: hsl(357 78% 41% / 0.6);
    --p-color-error-low: hsl(357 78% 41% / 0.18);
    --p-color-error-frosted: hsl(0 100% 90% / 0.55);
    --p-color-error-frosted-soft: hsl(0 80% 95% / 0.55);
    --p-color-focus: #1a44ea;
  }
  .scheme-dark,
  .scheme-only-dark {
    --p-color-canvas: hsl(225 66.7% 1.2%);
    --p-color-surface: hsl(240 2% 10%);
    --p-color-frosted: hsl(240 2% 43% / 0.228);
    --p-color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
    --p-color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
    --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
    --p-color-primary: hsl(225 100% 99%);
    --p-color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
    --p-color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
    --p-color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
    --p-color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
    --p-color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
    --p-color-info: hsl(210 100% 54.5%);
    --p-color-info-medium: hsl(210 100% 54.5% / 0.6);
    --p-color-info-low: hsl(210 100% 54.5% / 0.18);
    --p-color-info-frosted: hsl(210 79% 20% / 0.66);
    --p-color-info-frosted-soft: hsl(210 59% 15% / 0.66);
    --p-color-success: hsl(157 84.9% 41.6%);
    --p-color-success-medium: hsl(157 84.9% 41.6% / 0.6);
    --p-color-success-low: hsl(157 84.9% 41.6% / 0.18);
    --p-color-success-frosted: hsl(157 79% 20% / 0.66);
    --p-color-success-frosted-soft: hsl(157 59% 15% / 0.66);
    --p-color-warning: hsl(28 90.2% 56.1%);
    --p-color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
    --p-color-warning-low: hsl(28 90.2% 56.1% / 0.18);
    --p-color-warning-frosted: hsl(52 79% 20% / 0.66);
    --p-color-warning-frosted-soft: hsl(52 59% 15% / 0.66);
    --p-color-error: hsl(0 96.9% 62%);
    --p-color-error-medium: hsl(0 96.9% 62% / 0.6);
    --p-color-error-low: hsl(0 96.9% 62% / 0.18);
    --p-color-error-frosted: hsl(0 79% 20% / 0.66);
    --p-color-error-frosted-soft: hsl(0 59% 15% / 0.66);
    --p-color-focus: #1a44ea;
  }
  @media (prefers-color-scheme: dark) {
    .scheme-light-dark {
      --p-color-canvas: hsl(225 66.7% 1.2%);
      --p-color-surface: hsl(240 2% 10%);
      --p-color-frosted: hsl(240 2% 43% / 0.228);
      --p-color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
      --p-color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
      --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
      --p-color-primary: hsl(225 100% 99%);
      --p-color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
      --p-color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
      --p-color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
      --p-color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
      --p-color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
      --p-color-info: hsl(210 100% 54.5%);
      --p-color-info-medium: hsl(210 100% 54.5% / 0.6);
      --p-color-info-low: hsl(210 100% 54.5% / 0.18);
      --p-color-info-frosted: hsl(210 79% 20% / 0.66);
      --p-color-info-frosted-soft: hsl(210 59% 15% / 0.66);
      --p-color-success: hsl(157 84.9% 41.6%);
      --p-color-success-medium: hsl(157 84.9% 41.6% / 0.6);
      --p-color-success-low: hsl(157 84.9% 41.6% / 0.18);
      --p-color-success-frosted: hsl(157 79% 20% / 0.66);
      --p-color-success-frosted-soft: hsl(157 59% 15% / 0.66);
      --p-color-warning: hsl(28 90.2% 56.1%);
      --p-color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
      --p-color-warning-low: hsl(28 90.2% 56.1% / 0.18);
      --p-color-warning-frosted: hsl(52 79% 20% / 0.66);
      --p-color-warning-frosted-soft: hsl(52 59% 15% / 0.66);
      --p-color-error: hsl(0 96.9% 62%);
      --p-color-error-medium: hsl(0 96.9% 62% / 0.6);
      --p-color-error-low: hsl(0 96.9% 62% / 0.18);
      --p-color-error-frosted: hsl(0 79% 20% / 0.66);
      --p-color-error-frosted-soft: hsl(0 59% 15% / 0.66);
      --p-color-focus: #1a44ea;
    }
  }
}