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

@porsche-design-system/components-angular 4.2.0-rc.0 → 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 (412) hide show

package/vanilla-extract/cjs/font/fontPorscheNextJa.cjs ADDED Viewed

@@ -0,0 +1,7 @@
+'use strict';
+var fontPorscheNextJa$1 = require('../tokens/dist/esm/font/family/fontPorscheNextJa.cjs');
+const fontPorscheNextJa = fontPorscheNextJa$1.fontPorscheNextJa;
+exports.fontPorscheNextJa = fontPorscheNextJa;

package/vanilla-extract/cjs/font/fontPorscheNextKo.cjs ADDED Viewed

@@ -0,0 +1,7 @@
+'use strict';
+var fontPorscheNextKo$1 = require('../tokens/dist/esm/font/family/fontPorscheNextKo.cjs');
+const fontPorscheNextKo = fontPorscheNextKo$1.fontPorscheNextKo;
+exports.fontPorscheNextKo = fontPorscheNextKo;

package/vanilla-extract/cjs/font/fontPorscheNextZhHans.cjs ADDED Viewed

@@ -0,0 +1,7 @@
+'use strict';
+var fontPorscheNextZhHans$1 = require('../tokens/dist/esm/font/family/fontPorscheNextZhHans.cjs');
+const fontPorscheNextZhHans = fontPorscheNextZhHans$1.fontPorscheNextZhHans;
+exports.fontPorscheNextZhHans = fontPorscheNextZhHans;

package/vanilla-extract/cjs/font/fontPorscheNextZhHant.cjs ADDED Viewed

@@ -0,0 +1,7 @@
+'use strict';
+var fontPorscheNextZhHant$1 = require('../tokens/dist/esm/font/family/fontPorscheNextZhHant.cjs');
+const fontPorscheNextZhHant = fontPorscheNextZhHant$1.fontPorscheNextZhHant;
+exports.fontPorscheNextZhHant = fontPorscheNextZhHant;

package/vanilla-extract/cjs/font/getCJKFontFamilyStyle.cjs ADDED Viewed

@@ -0,0 +1,31 @@
+'use strict';
+var fontPorscheNextJa = require('./fontPorscheNextJa.cjs');
+var fontPorscheNextKo = require('./fontPorscheNextKo.cjs');
+var fontPorscheNextZhHans = require('./fontPorscheNextZhHans.cjs');
+var fontPorscheNextZhHant = require('./fontPorscheNextZhHant.cjs');
+const getCJKFontFamilyStyle = () => {
+    return {
+        selectors: {
+            /* Simplified Chinese */
+            '&:lang(zh-Hans), &:lang(zh-CN), &:lang(zh-SG)': {
+                fontFamily: fontPorscheNextZhHans.fontPorscheNextZhHans,
+            },
+            /* Traditional Chinese */
+            '&:lang(zh-Hant), &:lang(zh-TW), &:lang(zh-HK), &:lang(zh-MO)': {
+                fontFamily: fontPorscheNextZhHant.fontPorscheNextZhHant,
+            },
+            /* Japanese */
+            '&:lang(ja)': {
+                fontFamily: fontPorscheNextJa.fontPorscheNextJa,
+            },
+            /* Korean */
+            '&:lang(ko)': {
+                fontFamily: fontPorscheNextKo.fontPorscheNextKo,
+            },
+        },
+    };
+};
+exports.getCJKFontFamilyStyle = getCJKFontFamilyStyle;

package/vanilla-extract/cjs/index.cjs CHANGED Viewed

@@ -124,9 +124,14 @@ var fontWeightRegular = require('./font/deprecated/fontWeightRegular.cjs');
 var fontWeightSemiBold = require('./font/deprecated/fontWeightSemiBold.cjs');
 var fontHyphenationStyle = require('./font/fontHyphenationStyle.cjs');
 var fontPorscheNext = require('./font/fontPorscheNext.cjs');
+var fontPorscheNextJa = require('./font/fontPorscheNextJa.cjs');
+var fontPorscheNextKo = require('./font/fontPorscheNextKo.cjs');
+var fontPorscheNextZhHans = require('./font/fontPorscheNextZhHans.cjs');
+var fontPorscheNextZhHant = require('./font/fontPorscheNextZhHant.cjs');
 var fontWeightBold = require('./font/fontWeightBold.cjs');
 var fontWeightNormal = require('./font/fontWeightNormal.cjs');
 var fontWeightSemibold = require('./font/fontWeightSemibold.cjs');
+var getCJKFontFamilyStyle = require('./font/getCJKFontFamilyStyle.cjs');
 var leadingNormal = require('./font/leadingNormal.cjs');
 var typescale2Xl = require('./font/typescale2Xl.cjs');
 var typescale2Xs = require('./font/typescale2Xs.cjs');
@@ -404,9 +409,14 @@ exports.fontWeightRegular = fontWeightRegular.fontWeightRegular;
 exports.fontWeightSemiBold = fontWeightSemiBold.fontWeightSemiBold;
 exports.fontHyphenationStyle = fontHyphenationStyle.fontHyphenationStyle;
 exports.fontPorscheNext = fontPorscheNext.fontPorscheNext;
+exports.fontPorscheNextJa = fontPorscheNextJa.fontPorscheNextJa;
+exports.fontPorscheNextKo = fontPorscheNextKo.fontPorscheNextKo;
+exports.fontPorscheNextZhHans = fontPorscheNextZhHans.fontPorscheNextZhHans;
+exports.fontPorscheNextZhHant = fontPorscheNextZhHant.fontPorscheNextZhHant;
 exports.fontWeightBold = fontWeightBold.fontWeightBold;
 exports.fontWeightNormal = fontWeightNormal.fontWeightNormal;
 exports.fontWeightSemibold = fontWeightSemibold.fontWeightSemibold;
+exports.getCJKFontFamilyStyle = getCJKFontFamilyStyle.getCJKFontFamilyStyle;
 exports.leadingNormal = leadingNormal.leadingNormal;
 exports.typescale2Xl = typescale2Xl.typescale2Xl;
 exports.typescale2Xs = typescale2Xs.typescale2Xs;

package/vanilla-extract/cjs/tokens/dist/esm/blur/blurFrosted.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds a **frosted** blur effect value. */
 const blurFrosted = 'blur(32px)';
 exports.blurFrosted = blurFrosted;

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

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds a **2xl** `border-radius`. Used for notification components (e.g. `p-banner`, `p-inline-notification`, `p-toast`,…). */
 const radius2Xl = '16px';
 exports.radius2Xl = radius2Xl;

package/vanilla-extract/cjs/tokens/dist/esm/border/radius/radius3Xl.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** 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';
 exports.radius3Xl = radius3Xl;

package/vanilla-extract/cjs/tokens/dist/esm/border/radius/radius4Xl.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds a **4xl** `border-radius`. */
 const radius4Xl = '32px';
 exports.radius4Xl = radius4Xl;

package/vanilla-extract/cjs/tokens/dist/esm/border/radius/radiusFull.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** 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)';
 exports.radiusFull = radiusFull;

package/vanilla-extract/cjs/tokens/dist/esm/border/radius/radiusLg.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** 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';
 exports.radiusLg = radiusLg;

package/vanilla-extract/cjs/tokens/dist/esm/border/radius/radiusMd.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds a **md** `border-radius`. Used for `p-checkbox` in **compact mode**. */
 const radiusMd = '6px';
 exports.radiusMd = radiusMd;

package/vanilla-extract/cjs/tokens/dist/esm/border/radius/radiusSm.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds a **sm** `border-radius`. */
 const radiusSm = '4px';
 exports.radiusSm = radiusSm;

package/vanilla-extract/cjs/tokens/dist/esm/border/radius/radiusXl.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** 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';
 exports.radiusXl = radiusXl;

package/vanilla-extract/cjs/tokens/dist/esm/border/radius/radiusXs.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds a **xs** `border-radius`. */
 const radiusXs = '2px';
 exports.radiusXs = radiusXs;

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

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the `2xl` breakpoint value, usable with `px`. */
 const breakpoint2Xl = 1920;
 exports.breakpoint2Xl = breakpoint2Xl;

package/vanilla-extract/cjs/tokens/dist/esm/breakpoint/breakpointLg.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the `lg` breakpoint value, usable with `px`. */
 const breakpointLg = 1300;
 exports.breakpointLg = breakpointLg;

package/vanilla-extract/cjs/tokens/dist/esm/breakpoint/breakpointMd.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the `md` breakpoint value, usable with `px`. */
 const breakpointMd = 1000;
 exports.breakpointMd = breakpointMd;

package/vanilla-extract/cjs/tokens/dist/esm/breakpoint/breakpointSm.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the `sm` breakpoint value, usable with `px`. */
 const breakpointSm = 760;
 exports.breakpointSm = breakpointSm;

package/vanilla-extract/cjs/tokens/dist/esm/breakpoint/breakpointXl.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the `xl` breakpoint value, usable with `px`. */
 const breakpointXl = 1760;
 exports.breakpointXl = breakpointXl;

package/vanilla-extract/cjs/tokens/dist/esm/breakpoint/breakpointXs.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the `xs` breakpoint value, usable with `px`. */
 const breakpointXs = 480;
 exports.breakpointXs = breakpointXs;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/a11y/colorFocusDark.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the **focus** color (dark), typically used as the outline for `:focus-visible` states. */
 const colorFocusDark = '#1A44EA';
 exports.colorFocusDark = colorFocusDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/background/colorBackdropDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **backdrop** color, typically used for backdrops. */
 const colorBackdropDark = palette.palette.light.grey['500a'];
 exports.colorBackdropDark = colorBackdropDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/background/colorCanvasDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **canvas** color (dark), typically used for surfaces. */
 const colorCanvasDark = palette.palette.dark.grey['50'];
 exports.colorCanvasDark = colorCanvasDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/background/colorFrostedDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **frosted** color (dark), typically used as a background in combination with a blur effect. */
 const colorFrostedDark = palette.palette.dark.grey['200a'];
 exports.colorFrostedDark = colorFrostedDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/background/colorFrostedSoftDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **frosted-soft** color (dark), typically used as a background `:hover`. */
 const colorFrostedSoftDark = palette.palette.dark.grey['100a'];
 exports.colorFrostedSoftDark = colorFrostedSoftDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/background/colorFrostedStrongDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **frosted-strong** color (dark), typically used as a stronger frosted background. */
 const colorFrostedStrongDark = palette.palette.dark.grey['300a'];
 exports.colorFrostedStrongDark = colorFrostedStrongDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/background/colorSurfaceDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **surface** color (dark), typically used for surfaces. */
 const colorSurfaceDark = palette.palette.dark.grey['100'];
 exports.colorSurfaceDark = colorSurfaceDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/foreground/colorContrastHighDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **contrast-high** color (dark), typically used for text. */
 const colorContrastHighDark = palette.palette.dark.grey['700a'];
 exports.colorContrastHighDark = colorContrastHighDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/foreground/colorContrastHigherDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **contrast-higher** color (dark), typically used for text. */
 const colorContrastHigherDark = palette.palette.dark.grey['800a'];
 exports.colorContrastHigherDark = colorContrastHigherDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/foreground/colorContrastLowDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **contrast-low** color (dark), intended only for decorative elements, as it is not accessibility-compliant. */
 const colorContrastLowDark = palette.palette.dark.grey['500a'];
 exports.colorContrastLowDark = colorContrastLowDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/foreground/colorContrastLowerDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **contrast-lower** color (dark), intended only for decorative elements, as it is not accessibility-compliant. */
 const colorContrastLowerDark = palette.palette.dark.grey['300a'];
 exports.colorContrastLowerDark = colorContrastLowerDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/foreground/colorContrastMediumDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **contrast-medium** color (dark), typically used for text. */
 const colorContrastMediumDark = palette.palette.dark.grey['600a'];
 exports.colorContrastMediumDark = colorContrastMediumDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/foreground/colorPrimaryDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **primary** color (dark), typically used for text. */
 const colorPrimaryDark = palette.palette.dark.grey["950"];
 exports.colorPrimaryDark = colorPrimaryDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorErrorDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **error** color (dark), typically used for text. */
 const colorErrorDark = palette.palette.dark.red['950'];
 exports.colorErrorDark = colorErrorDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorErrorFrostedDark.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the **error-frosted** color (dark), typically used as background in combination with a blur effect. */
 const colorErrorFrostedDark = 'hsl(0 79% 20% / 0.66)';
 exports.colorErrorFrostedDark = colorErrorFrostedDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorErrorFrostedSoftDark.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the **error-frosted-soft** color (dark), typically used as background `:hover`. */
 const colorErrorFrostedSoftDark = 'hsl(0 59% 15% / 0.66)';
 exports.colorErrorFrostedSoftDark = colorErrorFrostedSoftDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorErrorLowDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **error-low** color (dark), typically used for text or border. */
 const colorErrorLowDark = palette.palette.dark.red['100a'];
 exports.colorErrorLowDark = colorErrorLowDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorErrorMediumDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **error-medium** color (dark), typically used for text or border. */
 const colorErrorMediumDark = palette.palette.dark.red['600a'];
 exports.colorErrorMediumDark = colorErrorMediumDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorInfoDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **info** color (dark), typically used for text. */
 const colorInfoDark = palette.palette.dark.blue['950'];
 exports.colorInfoDark = colorInfoDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorInfoFrostedDark.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the **info-frosted** color (dark), typically used as background in combination with a blur effect. */
 const colorInfoFrostedDark = 'hsl(210 79% 20% / 0.66)';
 exports.colorInfoFrostedDark = colorInfoFrostedDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorInfoFrostedSoftDark.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the **info-frosted-soft** color (dark), typically used as background `:hover`. */
 const colorInfoFrostedSoftDark = 'hsl(210 59% 15% / 0.66)';
 exports.colorInfoFrostedSoftDark = colorInfoFrostedSoftDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorInfoLowDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **info-low** color (dark), typically used for text or border. */
 const colorInfoLowDark = palette.palette.dark.blue['100a'];
 exports.colorInfoLowDark = colorInfoLowDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorInfoMediumDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **info-medium** color (dark), typically used for text or border. */
 const colorInfoMediumDark = palette.palette.dark.blue['600a'];
 exports.colorInfoMediumDark = colorInfoMediumDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorSuccessDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **success** color (dark), typically used for text. */
 const colorSuccessDark = palette.palette.dark.green['950'];
 exports.colorSuccessDark = colorSuccessDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorSuccessFrostedDark.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the **success-frosted** color (dark), typically used as background in combination with a blur effect. */
 const colorSuccessFrostedDark = 'hsl(157 79% 20% / 0.66)';
 exports.colorSuccessFrostedDark = colorSuccessFrostedDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorSuccessFrostedSoftDark.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the **success-frosted-soft** color (dark), typically used as background `:hover`. */
 const colorSuccessFrostedSoftDark = 'hsl(157 59% 15% / 0.66)';
 exports.colorSuccessFrostedSoftDark = colorSuccessFrostedSoftDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorSuccessLowDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **success-low** color (dark), typically used for text or border. */
 const colorSuccessLowDark = palette.palette.dark.green['100a'];
 exports.colorSuccessLowDark = colorSuccessLowDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorSuccessMediumDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **success-medium** color (dark), typically used for text or border. */
 const colorSuccessMediumDark = palette.palette.dark.green['600a'];
 exports.colorSuccessMediumDark = colorSuccessMediumDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorWarningDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **warning** color (dark), typically used for text. */
 const colorWarningDark = palette.palette.dark.yellow['950'];
 exports.colorWarningDark = colorWarningDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorWarningFrostedDark.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the **warning-frosted** color (dark), typically used as background in combination with a blur effect. */
 const colorWarningFrostedDark = 'hsl(52 79% 20% / 0.66)';
 exports.colorWarningFrostedDark = colorWarningFrostedDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorWarningFrostedSoftDark.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the **warning-frosted-soft** color (dark), typically used as background `:hover`. */
 const colorWarningFrostedSoftDark = 'hsl(52 59% 15% / 0.66)';
 exports.colorWarningFrostedSoftDark = colorWarningFrostedSoftDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorWarningLowDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **warning-low** color (dark), typically used for text or border. */
 const colorWarningLowDark = palette.palette.dark.yellow['100a'];
 exports.colorWarningLowDark = colorWarningLowDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/dark/semantic/colorWarningMediumDark.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **warning-medium** color (dark), typically used for text or border. */
 const colorWarningMediumDark = palette.palette.dark.yellow['600a'];
 exports.colorWarningMediumDark = colorWarningMediumDark;

package/vanilla-extract/cjs/tokens/dist/esm/color/light/a11y/colorFocusLight.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the **focus** color (light), typically used as the outline for `:focus-visible` states. */
 const colorFocusLight = '#1A44EA';
 exports.colorFocusLight = colorFocusLight;

package/vanilla-extract/cjs/tokens/dist/esm/color/light/background/colorBackdropLight.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **backdrop** color, typically used for backdrops. */
 const colorBackdropLight = palette.palette.light.grey['500a'];
 exports.colorBackdropLight = colorBackdropLight;

package/vanilla-extract/cjs/tokens/dist/esm/color/light/background/colorCanvasLight.cjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use strict';
+/** Holds the **canvas** color (light), typically used for surfaces. */
 const colorCanvasLight = '#fff';
 exports.colorCanvasLight = colorCanvasLight;

package/vanilla-extract/cjs/tokens/dist/esm/color/light/background/colorFrostedLight.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **frosted** color (light), typically used as a background in combination with a blur effect. */
 const colorFrostedLight = palette.palette.light.grey['100a'];
 exports.colorFrostedLight = colorFrostedLight;

package/vanilla-extract/cjs/tokens/dist/esm/color/light/background/colorFrostedSoftLight.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **frosted-soft** color (light), typically used as a background `:hover`. */
 const colorFrostedSoftLight = palette.palette.light.grey['50a'];
 exports.colorFrostedSoftLight = colorFrostedSoftLight;

package/vanilla-extract/cjs/tokens/dist/esm/color/light/background/colorFrostedStrongLight.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **frosted-strong** color (light), typically used as a stronger frosted background. */
 const colorFrostedStrongLight = palette.palette.light.grey['200a'];
 exports.colorFrostedStrongLight = colorFrostedStrongLight;

package/vanilla-extract/cjs/tokens/dist/esm/color/light/background/colorSurfaceLight.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **surface** color (light), typically used for surfaces. */
 const colorSurfaceLight = palette.palette.light.grey['50'];
 exports.colorSurfaceLight = colorSurfaceLight;

package/vanilla-extract/cjs/tokens/dist/esm/color/light/foreground/colorContrastHighLight.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **contrast-high** color (light), typically used for text. */
 const colorContrastHighLight = palette.palette.light.grey['700a'];
 exports.colorContrastHighLight = colorContrastHighLight;

package/vanilla-extract/cjs/tokens/dist/esm/color/light/foreground/colorContrastHigherLight.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **contrast-higher** color (light), typically used for text. */
 const colorContrastHigherLight = palette.palette.light.grey['800a'];
 exports.colorContrastHigherLight = colorContrastHigherLight;

package/vanilla-extract/cjs/tokens/dist/esm/color/light/foreground/colorContrastLowLight.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **contrast-low** color (light), intended only for decorative elements, as it is not accessibility-compliant. */
 const colorContrastLowLight = palette.palette.light.grey['500a'];
 exports.colorContrastLowLight = colorContrastLowLight;

package/vanilla-extract/cjs/tokens/dist/esm/color/light/foreground/colorContrastLowerLight.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var palette = require('../../palette.cjs');
+/** Holds the **contrast-lower** color (light), intended only for decorative elements, as it is not accessibility-compliant. */
 const colorContrastLowerLight = palette.palette.light.grey['300a'];
 exports.colorContrastLowerLight = colorContrastLowerLight;