npm - @porsche-design-system/components-angular - Versions diffs - 4.2.0-rc.1 → 4.2.0-rc.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (409) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorWarningLight.mjs CHANGED Viewed

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

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorWarningLowLight.mjs CHANGED Viewed

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

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorWarningMediumLight.mjs CHANGED Viewed

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

package/vanilla-extract/esm/tokens/dist/esm/color/light-dark/a11y/colorFocus.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 import { colorFocusDark } from '../../dark/a11y/colorFocusDark.mjs';
 import { colorFocusLight } from '../../light/a11y/colorFocusLight.mjs';
+/** Holds the **focus** color, typically used as the outline for `:focus-visible` states. */
 const colorFocus = `light-dark(${colorFocusLight},${colorFocusDark})`;
 export { colorFocus };