@porsche-design-system/components-react/stylesheets/variables.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.

:root {
  color-scheme: light;
  --p-color-canvas: light-dark(#fff, hsl(225 66.7% 1.2%));
  --p-color-surface: light-dark(hsl(240 10% 95%), hsl(240 2% 10%));
  --p-color-frosted: light-dark(
    hsl(240 5% 70% / 0.148),
    hsl(240 2% 43% / 0.228)
  );
  --p-color-frosted-soft: light-dark(
    hsl(234 9.8% 60% / 0.06),
    hsl(240 3.7% 26.5% / 0.154)
  );
  --p-color-frosted-strong: light-dark(
    hsl(236 6.5% 42% / 0.236),
    hsl(240 1.5% 61.8% / 0.302)
  );
  --p-color-backdrop: light-dark(
    hsl(240 5.3% 14.9% / 0.5),
    hsl(240 5.3% 14.9% / 0.5)
  );
  --p-color-primary: light-dark(hsl(225 66.7% 1.2%), hsl(225 100% 99%));
  --p-color-contrast-higher: light-dark(
    hsl(240 8.7% 9% / 0.8),
    hsl(240 12.5% 96.9% / 0.78)
  );
  --p-color-contrast-high: light-dark(
    hsl(240 7.1% 11% / 0.7),
    hsl(240 12.5% 96.9% / 0.67)
  );
  --p-color-contrast-medium: light-dark(
    hsl(240 6.1% 7% / 0.6),
    hsl(240 12.5% 96.9% / 0.56)
  );
  --p-color-contrast-low: light-dark(
    hsl(240 5.3% 14.9% / 0.5),
    hsl(240 12.5% 96.9% / 0.45)
  );
  --p-color-contrast-lower: light-dark(
    hsl(234 6% 32.9% / 0.324),
    hsl(240 1.5% 61.8% / 0.302)
  );
  --p-color-info: light-dark(hsl(228 83.2% 51%), hsl(210 100% 54.5%));
  --p-color-info-medium: light-dark(
    hsl(228 83.2% 51% / 0.6),
    hsl(210 100% 54.5% / 0.6)
  );
  --p-color-info-low: light-dark(
    hsl(228 83.2% 51% / 0.18),
    hsl(210 100% 54.5% / 0.18)
  );
  --p-color-info-frosted: light-dark(
    hsl(211 100% 90% / 0.55),
    hsl(210 79% 20% / 0.66)
  );
  --p-color-info-frosted-soft: light-dark(
    hsl(211 80% 95% / 0.55),
    hsl(210 59% 15% / 0.66)
  );
  --p-color-success: light-dark(hsl(115 77.5% 27.8%), hsl(157 84.9% 41.6%));
  --p-color-success-medium: light-dark(
    hsl(115 77.5% 27.8% / 0.6),
    hsl(157 84.9% 41.6% / 0.6)
  );
  --p-color-success-low: light-dark(
    hsl(115 77.5% 27.8% / 0.18),
    hsl(157 84.9% 41.6% / 0.18)
  );
  --p-color-success-frosted: light-dark(
    hsl(109 100% 90% / 0.55),
    hsl(157 79% 20% / 0.66)
  );
  --p-color-success-frosted-soft: light-dark(
    hsl(109 80% 95% / 0.55),
    hsl(157 59% 15% / 0.66)
  );
  --p-color-warning: light-dark(hsl(28 97.7% 34.1%), hsl(28 90.2% 56.1%));
  --p-color-warning-medium: light-dark(
    hsl(28 97.7% 34.1% / 0.6),
    hsl(28 90.2% 56.1% / 0.6)
  );
  --p-color-warning-low: light-dark(
    hsl(28 97.7% 34.1% / 0.18),
    hsl(28 90.2% 56.1% / 0.18)
  );
  --p-color-warning-frosted: light-dark(
    hsl(40 100% 90% / 0.55),
    hsl(52 79% 20% / 0.66)
  );
  --p-color-warning-frosted-soft: light-dark(
    hsl(40 80% 95% / 0.55),
    hsl(52 59% 15% / 0.66)
  );
  --p-color-error: light-dark(hsl(357 78% 41%), hsl(0 96.9% 62%));
  --p-color-error-medium: light-dark(
    hsl(357 78% 41% / 0.6),
    hsl(0 96.9% 62% / 0.6)
  );
  --p-color-error-low: light-dark(
    hsl(357 78% 41% / 0.18),
    hsl(0 96.9% 62% / 0.18)
  );
  --p-color-error-frosted: light-dark(
    hsl(0 100% 90% / 0.55),
    hsl(0 79% 20% / 0.66)
  );
  --p-color-error-frosted-soft: light-dark(
    hsl(0 80% 95% / 0.55),
    hsl(0 59% 15% / 0.66)
  );
  --p-color-focus: light-dark(#1a44ea, #1a44ea);
  --p-font-porsche-next:
    "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;
  --p-font-sans: var(--p-font-porsche-next);
  --p-font-weight-normal: 400;
  --p-font-weight-semibold: 600;
  --p-font-weight-bold: 700;
  --p-leading-normal: calc(6px + 2.125ex);
  --p-typescale-2xs: 0.75rem;
  --p-typescale-xs: 0.875rem;
  --p-typescale-sm: 1rem;
  --p-typescale-md: clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem);
  --p-typescale-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
  --p-typescale-xl: clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
  --p-typescale-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
  --p-typescale-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
  --p-typescale-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
  --p-typescale-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);
  --p-spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
  --p-spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
  --p-spacing-fluid-md: clamp(16px, 1.25vw + 12px, 36px);
  --p-spacing-fluid-lg: clamp(32px, 2.75vw + 23px, 76px);
  --p-spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
  --p-spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);
  --p-spacing-static-2xs: 1px;
  --p-spacing-static-xs: 4px;
  --p-spacing-static-sm: 8px;
  --p-spacing-static-md: 16px;
  --p-spacing-static-lg: 32px;
  --p-spacing-static-xl: 48px;
  --p-spacing-static-2xl: 80px;
  --p-radius-xs: 2px;
  --p-radius-sm: 4px;
  --p-radius-md: 6px;
  --p-radius-lg: 8px;
  --p-radius-xl: 12px;
  --p-radius-2xl: 16px;
  --p-radius-3xl: 24px;
  --p-radius-4xl: 32px;
  --p-radius-full: calc(infinity * 1px);
  --p-blur-frosted: blur(32px);
  --p-shadow-sm: 0px 3px 8px rgba(0, 0, 0, 0.16);
  --p-shadow-md: 0px 4px 16px rgba(0, 0, 0, 0.16);
  --p-shadow-lg: 0px 8px 40px rgba(0, 0, 0, 0.16);
  --p-duration-sm: 0.25s;
  --p-duration-md: 0.4s;
  --p-duration-lg: 0.6s;
  --p-duration-xl: 1.2s;
  --p-ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --p-ease-in: cubic-bezier(0, 0, 0.2, 1);
  --p-ease-out: cubic-bezier(0.4, 0, 0.5, 1);
}

/* Simplified Chinese */
:lang(zh-Hans),
:lang(zh-CN),
:lang(zh-SG) {
  --p-font-porsche-next:
    "Porsche Next", "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    "Arial Narrow", Arial, sans-serif;
}

/* Traditional Chinese */
:lang(zh-Hant),
:lang(zh-TW),
:lang(zh-HK),
:lang(zh-MO) {
  --p-font-porsche-next:
    "Porsche Next", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
    "Arial Narrow", Arial, sans-serif;
}

/* Japanese */
:lang(ja) {
  --p-font-porsche-next:
    "Porsche Next", "Hiragino Sans", "Yu Gothic", "Noto Sans JP",
    "Arial Narrow", Arial, sans-serif;
}

/* Korean */
:lang(ko) {
  --p-font-porsche-next:
    "Porsche Next", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
    "Arial Narrow", Arial, sans-serif;
}