@porsche-design-system/components-angular 4.2.0-rc.0 → 4.2.0-rc.2

package/vanilla-extract/esm/font/index.d.ts

@@ -1,9 +1,14 @@
 export * from './deprecated';
 export { fontHyphenationStyle } from './fontHyphenationStyle';
 export { fontPorscheNext } from './fontPorscheNext';
+export { fontPorscheNextJa } from './fontPorscheNextJa';
+export { fontPorscheNextKo } from './fontPorscheNextKo';
+export { fontPorscheNextZhHans } from './fontPorscheNextZhHans';
+export { fontPorscheNextZhHant } from './fontPorscheNextZhHant';
 export { fontWeightBold } from './fontWeightBold';
 export { fontWeightNormal } from './fontWeightNormal';
 export { fontWeightSemibold } from './fontWeightSemibold';
+export { getCJKFontFamilyStyle } from './getCJKFontFamilyStyle';
 export { leadingNormal } from './leadingNormal';
 export { typescale2Xl } from './typescale2Xl';
 export { typescale2Xs } from './typescale2Xs';

package/vanilla-extract/esm/index.mjs

@@ -122,9 +122,14 @@ export { fontWeightRegular } from './font/deprecated/fontWeightRegular.mjs';
 export { fontWeightSemiBold } from './font/deprecated/fontWeightSemiBold.mjs';
 export { fontHyphenationStyle } from './font/fontHyphenationStyle.mjs';
 export { fontPorscheNext } from './font/fontPorscheNext.mjs';
+export { fontPorscheNextJa } from './font/fontPorscheNextJa.mjs';
+export { fontPorscheNextKo } from './font/fontPorscheNextKo.mjs';
+export { fontPorscheNextZhHans } from './font/fontPorscheNextZhHans.mjs';
+export { fontPorscheNextZhHant } from './font/fontPorscheNextZhHant.mjs';
 export { fontWeightBold } from './font/fontWeightBold.mjs';
 export { fontWeightNormal } from './font/fontWeightNormal.mjs';
 export { fontWeightSemibold } from './font/fontWeightSemibold.mjs';
+export { getCJKFontFamilyStyle } from './font/getCJKFontFamilyStyle.mjs';
 export { leadingNormal } from './font/leadingNormal.mjs';
 export { typescale2Xl } from './font/typescale2Xl.mjs';
 export { typescale2Xs } from './font/typescale2Xs.mjs';

package/vanilla-extract/esm/tokens/dist/esm/blur/blurFrosted.mjs

@@ -1,3 +1,4 @@
+/** Holds a **frosted** blur effect value. */
 const blurFrosted = 'blur(32px)';
 
 export { blurFrosted };

package/vanilla-extract/esm/tokens/dist/esm/border/radius/radius2Xl.mjs

@@ -1,3 +1,4 @@
+/** Holds a **2xl** `border-radius`. Used for notification components (e.g. `p-banner`, `p-inline-notification`, `p-toast`,…). */
 const radius2Xl = '16px';
 
 export { radius2Xl };

package/vanilla-extract/esm/tokens/dist/esm/border/radius/radius3Xl.mjs

@@ -1,3 +1,4 @@
+/** Holds a **3xl** `border-radius`. Used for card-like containers or dialogs (e.g. `p-link-tile`, `p-modal`, `p-flyout`, `p-sheet`,…). Defines the primary visual appearance alongside **radiusXl**. */
 const radius3Xl = '24px';
 
 export { radius3Xl };

package/vanilla-extract/esm/tokens/dist/esm/border/radius/radius4Xl.mjs

@@ -1,3 +1,4 @@
+/** Holds a **4xl** `border-radius`. */
 const radius4Xl = '32px';
 
 export { radius4Xl };

package/vanilla-extract/esm/tokens/dist/esm/border/radius/radiusFull.mjs

@@ -1,3 +1,4 @@
+/** Holds a **full** `border-radius`. Used for pill shapes (e.g. `p-tag`, `p-switch`,…). Recommended only for standalone indicators. */
 const radiusFull = 'calc(infinity * 1px)';
 
 export { radiusFull };

package/vanilla-extract/esm/tokens/dist/esm/border/radius/radiusLg.mjs

@@ -1,3 +1,4 @@
+/** Holds a **lg** `border-radius`. Used for interactive controls in **compact mode** (e.g. `p-tabs-bar`, `p-input-*`, `p-textarea`, `p-select`, `p-button`, `p-link`,…). */
 const radiusLg = '8px';
 
 export { radiusLg };

package/vanilla-extract/esm/tokens/dist/esm/border/radius/radiusMd.mjs

@@ -1,3 +1,4 @@
+/** Holds a **md** `border-radius`. Used for `p-checkbox` in **compact mode**. */
 const radiusMd = '6px';
 
 export { radiusMd };

package/vanilla-extract/esm/tokens/dist/esm/border/radius/radiusSm.mjs

@@ -1,3 +1,4 @@
+/** Holds a **sm** `border-radius`. */
 const radiusSm = '4px';
 
 export { radiusSm };

package/vanilla-extract/esm/tokens/dist/esm/border/radius/radiusXl.mjs

@@ -1,3 +1,4 @@
+/** Holds a **xl** `border-radius`. Used for interactive controls (e.g. `p-tabs-bar`, `p-input-*`, `p-textarea`, `p-select`, `p-button`, `p-link`,…). Defines the primary visual appearance alongside **radius3Xl**. */
 const radiusXl = '12px';
 
 export { radiusXl };

package/vanilla-extract/esm/tokens/dist/esm/border/radius/radiusXs.mjs

@@ -1,3 +1,4 @@
+/** Holds a **xs** `border-radius`. */
 const radiusXs = '2px';
 
 export { radiusXs };

package/vanilla-extract/esm/tokens/dist/esm/breakpoint/breakpoint2Xl.mjs

@@ -1,3 +1,4 @@
+/** Holds the `2xl` breakpoint value, usable with `px`. */
 const breakpoint2Xl = 1920;
 
 export { breakpoint2Xl };

package/vanilla-extract/esm/tokens/dist/esm/breakpoint/breakpointLg.mjs

@@ -1,3 +1,4 @@
+/** Holds the `lg` breakpoint value, usable with `px`. */
 const breakpointLg = 1300;
 
 export { breakpointLg };

package/vanilla-extract/esm/tokens/dist/esm/breakpoint/breakpointMd.mjs

@@ -1,3 +1,4 @@
+/** Holds the `md` breakpoint value, usable with `px`. */
 const breakpointMd = 1000;
 
 export { breakpointMd };

package/vanilla-extract/esm/tokens/dist/esm/breakpoint/breakpointSm.mjs

@@ -1,3 +1,4 @@
+/** Holds the `sm` breakpoint value, usable with `px`. */
 const breakpointSm = 760;
 
 export { breakpointSm };

package/vanilla-extract/esm/tokens/dist/esm/breakpoint/breakpointXl.mjs

@@ -1,3 +1,4 @@
+/** Holds the `xl` breakpoint value, usable with `px`. */
 const breakpointXl = 1760;
 
 export { breakpointXl };

package/vanilla-extract/esm/tokens/dist/esm/breakpoint/breakpointXs.mjs

@@ -1,3 +1,4 @@
+/** Holds the `xs` breakpoint value, usable with `px`. */
 const breakpointXs = 480;
 
 export { breakpointXs };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/a11y/colorFocusDark.mjs

@@ -1,3 +1,4 @@
+/** Holds the **focus** color (dark), typically used as the outline for `:focus-visible` states. */
 const colorFocusDark = '#1A44EA';
 
 export { colorFocusDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/background/colorBackdropDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **backdrop** color, typically used for backdrops. */
 const colorBackdropDark = palette.light.grey['500a'];
 
 export { colorBackdropDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/background/colorCanvasDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **canvas** color (dark), typically used for surfaces. */
 const colorCanvasDark = palette.dark.grey['50'];
 
 export { colorCanvasDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/background/colorFrostedDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **frosted** color (dark), typically used as a background in combination with a blur effect. */
 const colorFrostedDark = palette.dark.grey['200a'];
 
 export { colorFrostedDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/background/colorFrostedSoftDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **frosted-soft** color (dark), typically used as a background `:hover`. */
 const colorFrostedSoftDark = palette.dark.grey['100a'];
 
 export { colorFrostedSoftDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/background/colorFrostedStrongDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **frosted-strong** color (dark), typically used as a stronger frosted background. */
 const colorFrostedStrongDark = palette.dark.grey['300a'];
 
 export { colorFrostedStrongDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/background/colorSurfaceDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **surface** color (dark), typically used for surfaces. */
 const colorSurfaceDark = palette.dark.grey['100'];
 
 export { colorSurfaceDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/foreground/colorContrastHighDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **contrast-high** color (dark), typically used for text. */
 const colorContrastHighDark = palette.dark.grey['700a'];
 
 export { colorContrastHighDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/foreground/colorContrastHigherDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **contrast-higher** color (dark), typically used for text. */
 const colorContrastHigherDark = palette.dark.grey['800a'];
 
 export { colorContrastHigherDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/foreground/colorContrastLowDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **contrast-low** color (dark), intended only for decorative elements, as it is not accessibility-compliant. */
 const colorContrastLowDark = palette.dark.grey['500a'];
 
 export { colorContrastLowDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/foreground/colorContrastLowerDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **contrast-lower** color (dark), intended only for decorative elements, as it is not accessibility-compliant. */
 const colorContrastLowerDark = palette.dark.grey['300a'];
 
 export { colorContrastLowerDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/foreground/colorContrastMediumDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **contrast-medium** color (dark), typically used for text. */
 const colorContrastMediumDark = palette.dark.grey['600a'];
 
 export { colorContrastMediumDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/foreground/colorPrimaryDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **primary** color (dark), typically used for text. */
 const colorPrimaryDark = palette.dark.grey["950"];
 
 export { colorPrimaryDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorErrorDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **error** color (dark), typically used for text. */
 const colorErrorDark = palette.dark.red['950'];
 
 export { colorErrorDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorErrorFrostedDark.mjs

@@ -1,3 +1,4 @@
+/** Holds the **error-frosted** color (dark), typically used as background in combination with a blur effect. */
 const colorErrorFrostedDark = 'hsl(0 79% 20% / 0.66)';
 
 export { colorErrorFrostedDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorErrorFrostedSoftDark.mjs

@@ -1,3 +1,4 @@
+/** Holds the **error-frosted-soft** color (dark), typically used as background `:hover`. */
 const colorErrorFrostedSoftDark = 'hsl(0 59% 15% / 0.66)';
 
 export { colorErrorFrostedSoftDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorErrorLowDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **error-low** color (dark), typically used for text or border. */
 const colorErrorLowDark = palette.dark.red['100a'];
 
 export { colorErrorLowDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorErrorMediumDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **error-medium** color (dark), typically used for text or border. */
 const colorErrorMediumDark = palette.dark.red['600a'];
 
 export { colorErrorMediumDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorInfoDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **info** color (dark), typically used for text. */
 const colorInfoDark = palette.dark.blue['950'];
 
 export { colorInfoDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorInfoFrostedDark.mjs

@@ -1,3 +1,4 @@
+/** Holds the **info-frosted** color (dark), typically used as background in combination with a blur effect. */
 const colorInfoFrostedDark = 'hsl(210 79% 20% / 0.66)';
 
 export { colorInfoFrostedDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorInfoFrostedSoftDark.mjs

@@ -1,3 +1,4 @@
+/** Holds the **info-frosted-soft** color (dark), typically used as background `:hover`. */
 const colorInfoFrostedSoftDark = 'hsl(210 59% 15% / 0.66)';
 
 export { colorInfoFrostedSoftDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorInfoLowDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **info-low** color (dark), typically used for text or border. */
 const colorInfoLowDark = palette.dark.blue['100a'];
 
 export { colorInfoLowDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorInfoMediumDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **info-medium** color (dark), typically used for text or border. */
 const colorInfoMediumDark = palette.dark.blue['600a'];
 
 export { colorInfoMediumDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorSuccessDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **success** color (dark), typically used for text. */
 const colorSuccessDark = palette.dark.green['950'];
 
 export { colorSuccessDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorSuccessFrostedDark.mjs

@@ -1,3 +1,4 @@
+/** Holds the **success-frosted** color (dark), typically used as background in combination with a blur effect. */
 const colorSuccessFrostedDark = 'hsl(157 79% 20% / 0.66)';
 
 export { colorSuccessFrostedDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorSuccessFrostedSoftDark.mjs

@@ -1,3 +1,4 @@
+/** Holds the **success-frosted-soft** color (dark), typically used as background `:hover`. */
 const colorSuccessFrostedSoftDark = 'hsl(157 59% 15% / 0.66)';
 
 export { colorSuccessFrostedSoftDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorSuccessLowDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **success-low** color (dark), typically used for text or border. */
 const colorSuccessLowDark = palette.dark.green['100a'];
 
 export { colorSuccessLowDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorSuccessMediumDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **success-medium** color (dark), typically used for text or border. */
 const colorSuccessMediumDark = palette.dark.green['600a'];
 
 export { colorSuccessMediumDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorWarningDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **warning** color (dark), typically used for text. */
 const colorWarningDark = palette.dark.yellow['950'];
 
 export { colorWarningDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorWarningFrostedDark.mjs

@@ -1,3 +1,4 @@
+/** Holds the **warning-frosted** color (dark), typically used as background in combination with a blur effect. */
 const colorWarningFrostedDark = 'hsl(52 79% 20% / 0.66)';
 
 export { colorWarningFrostedDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorWarningFrostedSoftDark.mjs

@@ -1,3 +1,4 @@
+/** Holds the **warning-frosted-soft** color (dark), typically used as background `:hover`. */
 const colorWarningFrostedSoftDark = 'hsl(52 59% 15% / 0.66)';
 
 export { colorWarningFrostedSoftDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorWarningLowDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **warning-low** color (dark), typically used for text or border. */
 const colorWarningLowDark = palette.dark.yellow['100a'];
 
 export { colorWarningLowDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorWarningMediumDark.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **warning-medium** color (dark), typically used for text or border. */
 const colorWarningMediumDark = palette.dark.yellow['600a'];
 
 export { colorWarningMediumDark };

package/vanilla-extract/esm/tokens/dist/esm/color/light/a11y/colorFocusLight.mjs

@@ -1,3 +1,4 @@
+/** Holds the **focus** color (light), typically used as the outline for `:focus-visible` states. */
 const colorFocusLight = '#1A44EA';
 
 export { colorFocusLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/background/colorBackdropLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **backdrop** color, typically used for backdrops. */
 const colorBackdropLight = palette.light.grey['500a'];
 
 export { colorBackdropLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/background/colorCanvasLight.mjs

@@ -1,3 +1,4 @@
+/** Holds the **canvas** color (light), typically used for surfaces. */
 const colorCanvasLight = '#fff';
 
 export { colorCanvasLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/background/colorFrostedLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **frosted** color (light), typically used as a background in combination with a blur effect. */
 const colorFrostedLight = palette.light.grey['100a'];
 
 export { colorFrostedLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/background/colorFrostedSoftLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **frosted-soft** color (light), typically used as a background `:hover`. */
 const colorFrostedSoftLight = palette.light.grey['50a'];
 
 export { colorFrostedSoftLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/background/colorFrostedStrongLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **frosted-strong** color (light), typically used as a stronger frosted background. */
 const colorFrostedStrongLight = palette.light.grey['200a'];
 
 export { colorFrostedStrongLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/background/colorSurfaceLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **surface** color (light), typically used for surfaces. */
 const colorSurfaceLight = palette.light.grey['50'];
 
 export { colorSurfaceLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/foreground/colorContrastHighLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **contrast-high** color (light), typically used for text. */
 const colorContrastHighLight = palette.light.grey['700a'];
 
 export { colorContrastHighLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/foreground/colorContrastHigherLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **contrast-higher** color (light), typically used for text. */
 const colorContrastHigherLight = palette.light.grey['800a'];
 
 export { colorContrastHigherLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/foreground/colorContrastLowLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **contrast-low** color (light), intended only for decorative elements, as it is not accessibility-compliant. */
 const colorContrastLowLight = palette.light.grey['500a'];
 
 export { colorContrastLowLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/foreground/colorContrastLowerLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **contrast-lower** color (light), intended only for decorative elements, as it is not accessibility-compliant. */
 const colorContrastLowerLight = palette.light.grey['300a'];
 
 export { colorContrastLowerLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/foreground/colorContrastMediumLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **contrast-medium** color (light), typically used for text. */
 const colorContrastMediumLight = palette.light.grey['600a'];
 
 export { colorContrastMediumLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/foreground/colorPrimaryLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **primary** color (light), typically used for text. */
 const colorPrimaryLight = palette.light.grey['950'];
 
 export { colorPrimaryLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorErrorFrostedLight.mjs

@@ -1,3 +1,4 @@
+/** Holds the **error-frosted** color (light), typically used as background in combination with a blur effect. */
 const colorErrorFrostedLight = 'hsl(0 100% 90% / 0.55)';
 
 export { colorErrorFrostedLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorErrorFrostedSoftLight.mjs

@@ -1,3 +1,4 @@
+/** Holds the **error-frosted-soft** color (light), typically used as background `:hover`. */
 const colorErrorFrostedSoftLight = 'hsl(0 80% 95% / 0.55)';
 
 export { colorErrorFrostedSoftLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorErrorLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **error** color (light), typically used for text. */
 const colorErrorLight = palette.light.red['950'];
 
 export { colorErrorLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorErrorLowLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **error-low** color (light), typically used for text or border. */
 const colorErrorLowLight = palette.light.red['100a'];
 
 export { colorErrorLowLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorErrorMediumLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **error-medium** color (light), typically used for text or border. */
 const colorErrorMediumLight = palette.light.red['600a'];
 
 export { colorErrorMediumLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorInfoFrostedLight.mjs

@@ -1,3 +1,4 @@
+/** Holds the **info-frosted** color (light), typically used as background in combination with a blur effect. */
 const colorInfoFrostedLight = 'hsl(211 100% 90% / 0.55)';
 
 export { colorInfoFrostedLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorInfoFrostedSoftLight.mjs

@@ -1,3 +1,4 @@
+/** Holds the **info-frosted-soft** color (light), typically used as background `:hover`. */
 const colorInfoFrostedSoftLight = 'hsl(211 80% 95% / 0.55)';
 
 export { colorInfoFrostedSoftLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorInfoLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **info** color (light), typically used for text. */
 const colorInfoLight = palette.light.blue['950'];
 
 export { colorInfoLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorInfoLowLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **info-low** color (light), typically used for text or border. */
 const colorInfoLowLight = palette.light.blue['100a'];
 
 export { colorInfoLowLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorInfoMediumLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **info-medium** color (light), typically used for text or border. */
 const colorInfoMediumLight = palette.light.blue['600a'];
 
 export { colorInfoMediumLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorSuccessFrostedLight.mjs

@@ -1,3 +1,4 @@
+/** Holds the **success-frosted** color (light), typically used as background in combination with a blur effect. */
 const colorSuccessFrostedLight = 'hsl(109 100% 90% / 0.55)';
 
 export { colorSuccessFrostedLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorSuccessFrostedSoftLight.mjs

@@ -1,3 +1,4 @@
+/** Holds the **success-frosted-soft** color (light), typically used as background `:hover`. */
 const colorSuccessFrostedSoftLight = 'hsl(109 80% 95% / 0.55)';
 
 export { colorSuccessFrostedSoftLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorSuccessLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **success** color (light), typically used for text. */
 const colorSuccessLight = palette.light.green['950'];
 
 export { colorSuccessLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorSuccessLowLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **success-low** color (light), typically used for text or border. */
 const colorSuccessLowLight = palette.light.green['100a'];
 
 export { colorSuccessLowLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorSuccessMediumLight.mjs

@@ -1,5 +1,6 @@
 import { palette } from '../../palette.mjs';
 
+/** Holds the **success-medium** color (light), typically used for text or border. */
 const colorSuccessMediumLight = palette.light.green['600a'];
 
 export { colorSuccessMediumLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorWarningFrostedLight.mjs

@@ -1,3 +1,4 @@
+/** Holds the **warning-frosted** color (light), typically used as background in combination with a blur effect. */
 const colorWarningFrostedLight = 'hsl(40 100% 90% / 0.55)';
 
 export { colorWarningFrostedLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorWarningFrostedSoftLight.mjs

@@ -1,3 +1,4 @@
+/** Holds the **warning-frosted-soft** color (light), typically used as background `:hover`. */
 const colorWarningFrostedSoftLight = 'hsl(40 80% 95% / 0.55)';
 
 export { colorWarningFrostedSoftLight };