CSS Variables Table of Contents

• Color
• Typography
• Spacing
• Border Radius
• Blur
• Shadow
• Motion

Color# Background ColorCSS variableDescriptionValue

--p-color-canvasApplies the canvas color, typically used for surfaces.light-dark(#fff,hsl(225 66.7% 1.2%))

--p-color-surfaceApplies the surface color, typically used for surfaces.light-dark(hsl(240 10% 95%),hsl(240 2% 10%))

--p-color-frostedApplies the frosted color, typically used as a background in combination with a blur effect.light-dark(hsl(240 5% 70% / 0.148),hsl(240 2% 43% / 0.228))

--p-color-frosted-softApplies the frosted color, typically used as a background :hover.light-dark(hsl(234 9.8% 60% / 0.06),hsl(240 3.7% 26.5% / 0.154))

--p-color-backdropApplies the backdrop color, typically used for backdrops.light-dark(hsl(240 5.3% 14.9% / 0.5),hsl(240 5.3% 14.9% / 0.5)) Foreground ColorCSS variableDescriptionValue

--p-color-primaryApplies the primary color, typically used for text.light-dark(hsl(225 66.7% 1.2%),hsl(225 100% 99%))

--p-color-contrast-higherApplies the contrast-higher color, typically used for text.light-dark(hsl(240 8.7% 9% / 0.8),hsl(240 12.5% 96.9% / 0.78))

--p-color-contrast-highApplies the contrast-high color, typically used for text.light-dark(hsl(240 7.1% 11% / 0.7),hsl(240 12.5% 96.9% / 0.67))

--p-color-contrast-mediumApplies the contrast-medium color, typically used for text.light-dark(hsl(240 6.1% 7% / 0.6),hsl(240 12.5% 96.9% / 0.56))

--p-color-contrast-lowApplies the contrast-low color, intended only for decorative elements, as it is not accessibility-compliant.light-dark(hsl(240 5.3% 14.9% / 0.5),hsl(240 12.5% 96.9% / 0.45))

--p-color-contrast-lowerApplies the contrast-lower color, intended only for decorative elements, as it is not accessibility-compliant.light-dark(hsl(234 6% 32.9% / 0.324),hsl(240 1.5% 61.8% / 0.302)) Semantic ColorCSS variableDescriptionValue

--p-color-infoApplies the info color, typically used for text.light-dark(hsl(228 83.2% 51%),hsl(210 100% 54.5%))

--p-color-info-mediumApplies the info color, typically used for text or border.light-dark(hsl(228 83.2% 51% / 0.6),hsl(210 100% 54.5% / 0.6))

--p-color-info-lowApplies the info color, typically used for text or border.light-dark(hsl(228 83.2% 51% / 0.18),hsl(210 100% 54.5% / 0.18))

--p-color-info-frostedApplies the info-frosted color, typically used as background in combination with a blur effect.light-dark(hsl(228 83.2% 51% / 0.18),hsl(210 100% 54.5% / 0.26))

--p-color-info-frosted-softApplies the info-frosted-soft color, typically used as background :hover.light-dark(hsl(228 83.2% 51% / 0.1),hsl(210 100% 54.5% / 0.1))

--p-color-successApplies the success color, typically used for text.light-dark(hsl(115 77.5% 27.8%),hsl(157 84.9% 41.6%))

--p-color-success-mediumApplies the success color, typically used for text or border.light-dark(hsl(115 77.5% 27.8% / 0.6),hsl(157 84.9% 41.6% / 0.6))

--p-color-success-lowApplies the success color, typically used for text or border.light-dark(hsl(115 77.5% 27.8% / 0.18),hsl(157 84.9% 41.6% / 0.18))

--p-color-success-frostedApplies the success-frosted color, typically used as background in combination with a blur effect.light-dark(hsl(115 77.5% 27.8% / 0.18),hsl(157 84.9% 41.6% / 0.26))

--p-color-success-frosted-softApplies the success-frosted-soft color, typically used as background :hover.light-dark(hsl(115 77.5% 27.8% / 0.1),hsl(157 84.9% 41.6% / 0.1))

--p-color-warningApplies the warning color, typically used for text.light-dark(hsl(28 97.7% 34.1%),hsl(28 90.2% 56.1%))

--p-color-warning-mediumApplies the warning color, typically used for text or border.light-dark(hsl(28 97.7% 34.1% / 0.6),hsl(28 90.2% 56.1% / 0.6))

--p-color-warning-lowApplies the warning color, typically used for text or border.light-dark(hsl(28 97.7% 34.1% / 0.18),hsl(28 90.2% 56.1% / 0.18))

--p-color-warning-frostedApplies the warning-frosted color, typically used as background in combination with a blur effect.light-dark(hsl(28 97.7% 34.1% / 0.18),hsl(28 90.2% 56.1% / 0.26))

--p-color-warning-frosted-softApplies the warning-frosted-soft color, typically used as background :hover.light-dark(hsl(28 97.7% 34.1% / 0.1),hsl(28 90.2% 56.1% / 0.1))

--p-color-errorApplies the error color, typically used for text.light-dark(hsl(357 78% 41%),hsl(0 96.9% 62%))

--p-color-error-mediumApplies the error color, typically used for text or border.light-dark(hsl(357 78% 41% / 0.6),hsl(0 96.9% 62% / 0.6))

--p-color-error-lowApplies the error color, typically used for text or border.light-dark(hsl(357 78% 41% / 0.18),hsl(0 96.9% 62% / 0.18))

--p-color-error-frostedApplies the error-frosted color, typically used as background in combination with a blur effect .light-dark(hsl(357 78% 41% / 0.18),hsl(0 96.9% 62% / 0.26))

--p-color-error-frosted-softApplies the error-frosted-soft color, typically used as background :hover.light-dark(hsl(357 78% 41% / 0.1),hsl(0 96.9% 62% / 0.1)) A11y ColorCSS variableDescriptionValue

--p-color-focusApplies the focus color, typically used as the outline for :focus-visible states.light-dark(#1A44EA,#1A44EA) Typography# Font Family CSS variableDescriptionValue--p-font-porsche-nextApplies the Porsche Next font family along with fallback fonts.'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif Font Weight CSS variableDescriptionValue--p-font-weight-normalApplies the regular font weight optimized for the Porsche Next typeface.400--p-font-weight-semiboldApplies the semi-bold font weight optimized for the Porsche Next typeface.600--p-font-weight-boldApplies the bold font weight optimized for the Porsche Next typeface.700 Line Height CSS variableDescriptionValue--p-leading-normalApplies a dynamic default line height specifically optimized for the Porsche Next typeface.calc(6px + 2.125ex) Typescale CSS variableDescriptionValue--p-typescale-2xsApplies the 2x-small font size for the Porsche Next typeface..75rem--p-typescale-xsApplies the x-small font size for the Porsche Next typeface..875rem--p-typescale-smApplies the small font size for the Porsche Next typeface.1rem--p-typescale-mdApplies the medium font size for the Porsche Next typeface.clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)--p-typescale-lgApplies the large font size for the Porsche Next typeface.clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem)--p-typescale-xlApplies the x-large font size for the Porsche Next typeface.clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)--p-typescale-2xlApplies the 2x-large font size for the Porsche Next typeface.clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)--p-typescale-3xlApplies the 3x-large font size for the Porsche Next typeface.clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem)--p-typescale-4xlApplies the 4x-large font size for the Porsche Next typeface.clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem)--p-typescale-5xlApplies the 5x-large font size for the Porsche Next typeface.clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem) Spacing# Fluid CSS variableDescriptionValue--p-spacing-fluid-xsApplies the x-small fluid spacing.clamp(4px, 0.25vw + 3px, 8px)--p-spacing-fluid-smApplies the small fluid spacing.clamp(8px, 0.5vw + 6px, 16px)--p-spacing-fluid-mdApplies the medium fluid spacing.clamp(16px, 1.25vw + 12px, 36px)--p-spacing-fluid-lgApplies the large fluid spacing.clamp(32px, 2.75vw + 23px, 76px)--p-spacing-fluid-xlApplies the x-large fluid spacing.clamp(48px, 3vw + 38px, 96px)--p-spacing-fluid-2xlApplies the 2x-large fluid spacing.clamp(80px, 7.5vw + 56px, 200px) Static CSS variableDescriptionValue--p-spacing-static-2xsApplies the 2x-small static spacing.1px--p-spacing-static-xsApplies the x-small static spacing.4px--p-spacing-static-smApplies the small static spacing.8px--p-spacing-static-mdApplies the medium static spacing.16px--p-spacing-static-lgApplies the large static spacing.32px--p-spacing-static-xlApplies the x-large static spacing.48px--p-spacing-static-2xlApplies the 2x-large static spacing.80px Border Radius# CSS variableDescriptionValue--p-radius-xsApplies a x-small border-radius.2px--p-radius-smApplies a small border-radius.4px--p-radius-mdApplies a medium border-radius.6px--p-radius-lgApplies a large border-radius.8px--p-radius-xlApplies a x-large border-radius.12px--p-radius-2xlApplies a 2x-large border-radius.16px--p-radius-3xlApplies a 3x-large border-radius.24px--p-radius-4xlApplies a 4x-large border-radius.32px--p-radius-fullApplies a fully rounded border-radius.calc(infinity * 1px) Blur# CSS variableDescriptionValue--p-blur-frostedApplies a frosted effect when used with backdrop-filter or filter: blur() when combined with a semi-transparent color.blur(32px) Shadow# CSS variableDescriptionValue--p-shadow-smApplies a small box-shadow.0px 3px 8px rgba(0,0,0,.16)--p-shadow-mdApplies a medium box-shadow.0px 4px 16px rgba(0,0,0,.16)--p-shadow-lgApplies a large box-shadow.0px 8px 40px rgba(0,0,0,.16) Motion# Duration CSS variableDescriptionValue--p-duration-smApplies a short transition-duration..25s--p-duration-mdApplies a moderate transition-duration..4s--p-duration-lgApplies a long transition-duration..6s--p-duration-xlApplies a very long transition-duration.1.2s Easing CSS variableDescriptionValue--p-ease-in-outApplies an in-out transition-timing-function.cubic-bezier(.25,.1,.25,1)--p-ease-inApplies an in transition-timing-function.cubic-bezier(0,0,.2,1)--p-ease-outApplies an out transition-timing-function.cubic-bezier(.4,0,.5,1)