Porsche Design System

Theme

Table of Contents

Example
Usage
Styles

Example#

Theme Light

Theme Dark

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'porsche-design-system-app',
  styles: [
    `
      @use '@porsche-design-system/components-angular/styles' as *;

      // Wrapper
      .wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        gap: $pds-grid-gap;
        padding: $pds-spacing-fluid-medium;

        &--light {
          background: $pds-theme-light-background-base;
        }

        &--dark {
          background: $pds-theme-dark-background-base;
        }
      }

      // Typography
      .heading {
        @include pds-heading-medium;
        text-align: center;
        width: 100%;
        margin: 0;

        &--light {
          color: $pds-theme-light-primary;
        }

        &--dark {
          color: $pds-theme-dark-primary;
        }
      }

      // Tile
      .tile {
        border-radius: $pds-border-radius-small;
        padding: $pds-spacing-fluid-medium;
        border: 1px solid grey;
      }

      // Theme Light
      .theme-light-primary {
        background: $pds-theme-light-primary;
      }
      .theme-light-background-base {
        background: $pds-theme-light-background-base;
      }
      .theme-light-background-surface {
        background: $pds-theme-light-background-surface;
      }
      .theme-light-background-shading {
        background: $pds-theme-light-background-shading;
      }
      .theme-light-background-frosted {
        background: $pds-theme-light-background-frosted;
      }
      .theme-light-contrast-low {
        background: $pds-theme-light-contrast-low;
      }
      .theme-light-contrast-medium {
        background: $pds-theme-light-contrast-medium;
      }
      .theme-light-contrast-high {
        background: $pds-theme-light-contrast-high;
      }
      .theme-light-notification-success {
        background: $pds-theme-light-notification-success;
      }
      .theme-light-notification-success-soft {
        background: $pds-theme-light-notification-success-soft;
      }
      .theme-light-notification-warning {
        background: $pds-theme-light-notification-warning;
      }
      .theme-light-notification-warning-soft {
        background: $pds-theme-light-notification-warning-soft;
      }
      .theme-light-notification-error {
        background: $pds-theme-light-notification-error;
      }
      .theme-light-notification-error-soft {
        background: $pds-theme-light-notification-error-soft;
      }
      .theme-light-notification-info {
        background: $pds-theme-light-notification-info;
      }
      .theme-light-notification-info-soft {
        background: $pds-theme-light-notification-info-soft;
      }
      .theme-light-state-hover {
        background: $pds-theme-light-state-hover;
      }
      .theme-light-state-active {
        background: $pds-theme-light-state-active;
      }
      .theme-light-state-focus {
        background: $pds-theme-light-state-focus;
      }
      .theme-light-state-disabled {
        background: $pds-theme-light-state-disabled;
      }

      // Theme Dark
      .theme-dark-primary {
        background: $pds-theme-dark-primary;
      }
      .theme-dark-background-base {
        background: $pds-theme-dark-background-base;
      }
      .theme-dark-background-surface {
        background: $pds-theme-dark-background-surface;
      }
      .theme-dark-background-shading {
        background: $pds-theme-dark-background-shading;
      }
      .theme-dark-background-frosted {
        background: $pds-theme-dark-background-frosted;
      }
      .theme-dark-contrast-low {
        background: $pds-theme-dark-contrast-low;
      }
      .theme-dark-contrast-medium {
        background: $pds-theme-dark-contrast-medium;
      }
      .theme-dark-contrast-high {
        background: $pds-theme-dark-contrast-high;
      }
      .theme-dark-notification-success {
        background: $pds-theme-dark-notification-success;
      }
      .theme-dark-notification-success-soft {
        background: $pds-theme-dark-notification-success-soft;
      }
      .theme-dark-notification-warning {
        background: $pds-theme-dark-notification-warning;
      }
      .theme-dark-notification-warning-soft {
        background: $pds-theme-dark-notification-warning-soft;
      }
      .theme-dark-notification-error {
        background: $pds-theme-dark-notification-error;
      }
      .theme-dark-notification-error-soft {
        background: $pds-theme-dark-notification-error-soft;
      }
      .theme-dark-notification-info {
        background: $pds-theme-dark-notification-info;
      }
      .theme-dark-notification-info-soft {
        background: $pds-theme-dark-notification-info-soft;
      }
      .theme-dark-state-hover {
        background: $pds-theme-dark-state-hover;
      }
      .theme-dark-state-active {
        background: $pds-theme-dark-state-active;
      }
      .theme-dark-state-focus {
        background: $pds-theme-dark-state-focus;
      }
      .theme-dark-state-disabled {
        background: $pds-theme-dark-state-disabled;
      }
    `,
  ],
  template: `
    <div class="wrapper wrapper--light">
      <h3 class="heading heading--light">Theme Light</h3>
      <div class="theme-light-primary tile"></div>
      <div class="theme-light-background-base tile"></div>
      <div class="theme-light-background-surface tile"></div>
      <div class="theme-light-background-shading tile"></div>
      <div class="theme-light-background-frosted tile"></div>
      <div class="theme-light-contrast-low tile"></div>
      <div class="theme-light-contrast-medium tile"></div>
      <div class="theme-light-contrast-high tile"></div>
      <div class="theme-light-notification-success tile"></div>
      <div class="theme-light-notification-success-soft tile"></div>
      <div class="theme-light-notification-warning tile"></div>
      <div class="theme-light-notification-warning-soft tile"></div>
      <div class="theme-light-notification-error tile"></div>
      <div class="theme-light-notification-error-soft tile"></div>
      <div class="theme-light-notification-info tile"></div>
      <div class="theme-light-notification-info-soft tile"></div>
      <div class="theme-light-state-hover tile"></div>
      <div class="theme-light-state-active tile"></div>
      <div class="theme-light-state-focus tile"></div>
      <div class="theme-light-state-disabled tile"></div>
    </div>
    <div class="wrapper wrapper--dark">
      <h3 class="heading heading--dark">Theme Dark</h3>
      <div class="theme-dark-primary tile"></div>
      <div class="theme-dark-background-base tile"></div>
      <div class="theme-dark-background-surface tile"></div>
      <div class="theme-dark-background-shading tile"></div>
      <div class="theme-dark-background-frosted tile"></div>
      <div class="theme-dark-contrast-low tile"></div>
      <div class="theme-dark-contrast-medium tile"></div>
      <div class="theme-dark-contrast-high tile"></div>
      <div class="theme-dark-notification-success tile"></div>
      <div class="theme-dark-notification-success-soft tile"></div>
      <div class="theme-dark-notification-warning tile"></div>
      <div class="theme-dark-notification-warning-soft tile"></div>
      <div class="theme-dark-notification-error tile"></div>
      <div class="theme-dark-notification-error-soft tile"></div>
      <div class="theme-dark-notification-info tile"></div>
      <div class="theme-dark-notification-info-soft tile"></div>
      <div class="theme-dark-state-hover tile"></div>
      <div class="theme-dark-state-active tile"></div>
      <div class="theme-dark-state-focus tile"></div>
      <div class="theme-dark-state-disabled tile"></div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: false,
})
export class ExampleComponent {}

Usage#

Do:

Always choose the Light Theme as the first choice for designing Porsche applications. Stick to the limited color set provided.

Use accessibility-safe colors, i.e., neutral contrast high and neutral contrast medium, to guarantee optimal contrast.

Play with darker/lighter grey shades to make an element stand out from the background or to set emphasis on it.

Mix color themes within the application on rarely. Ensure a sufficient contrast ratio.

Don't:

Don't use neutral contrast low for displaying crucial information.

Don't mix colors of different themes (e.g. primary-light with base-dark).

Avoid adding new colors to the color palette.

Styles#

The styles are available as JavaScript and SCSS version. Look at the example above to see how the styles work.

When using JSS, styled-components etc. JavaScript styles can be imported by: import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles';.

When using vanilla-extract JavaScript styles can be imported by: import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles/vanilla-extract';.

theme

themeDark

themeDarkPrimary

themeDarkBackgroundBase

themeDarkBackgroundSurface

themeDarkBackgroundShading

themeDarkBackgroundFrosted

themeDarkContrastLow

themeDarkContrastMedium

themeDarkContrastHigh

themeDarkNotificationSuccess

themeDarkNotificationSuccessSoft

themeDarkNotificationWarning

themeDarkNotificationWarningSoft

themeDarkNotificationError

themeDarkNotificationErrorSoft

themeDarkNotificationInfo

themeDarkNotificationInfoSoft

themeDarkStateHover

themeDarkStateActive

themeDarkStateFocus

themeDarkStateDisabled

themeLight

themeLightPrimary

themeLightBackgroundBase

themeLightBackgroundSurface

themeLightBackgroundShading

themeLightBackgroundFrosted

themeLightContrastLow

themeLightContrastMedium

themeLightContrastHigh

themeLightNotificationSuccess

themeLightNotificationSuccessSoft

themeLightNotificationWarning

themeLightNotificationWarningSoft

themeLightNotificationError

themeLightNotificationErrorSoft

themeLightNotificationInfo

themeLightNotificationInfoSoft

themeLightStateHover

themeLightStateActive

themeLightStateFocus

themeLightStateDisabled

SCSS

SCSS styles can be imported by @use '@porsche-design-system/components-{js|angular|react|vue}/styles' as *;

$pds-theme-light-primary

$pds-theme-light-background-base

$pds-theme-light-background-surface

$pds-theme-light-background-shading

$pds-theme-light-background-frosted

$pds-theme-light-contrast-low

$pds-theme-light-contrast-medium

$pds-theme-light-contrast-high

$pds-theme-light-notification-success

$pds-theme-light-notification-success-soft

$pds-theme-light-notification-warning

$pds-theme-light-notification-warning-soft

$pds-theme-light-notification-error

$pds-theme-light-notification-error-soft

$pds-theme-light-notification-info

$pds-theme-light-notification-info-soft

$pds-theme-light-state-hover

$pds-theme-light-state-active

$pds-theme-light-state-focus

$pds-theme-light-state-disabled

$pds-theme-dark-primary

$pds-theme-dark-background-base

$pds-theme-dark-background-surface

$pds-theme-dark-background-shading

$pds-theme-dark-background-frosted

$pds-theme-dark-contrast-low

$pds-theme-dark-contrast-medium

$pds-theme-dark-contrast-high

$pds-theme-dark-notification-success

$pds-theme-dark-notification-success-soft

$pds-theme-dark-notification-warning

$pds-theme-dark-notification-warning-soft

$pds-theme-dark-notification-error

$pds-theme-dark-notification-error-soft

$pds-theme-dark-notification-info

$pds-theme-dark-notification-info-soft

$pds-theme-dark-state-hover

$pds-theme-dark-state-active

$pds-theme-dark-state-focus

$pds-theme-dark-state-disabled