@mekari/pixel3-styled-system 0.2.0-dev.0 → 0.2.0-dev.1
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.
- package/CHANGELOG.md +7 -0
- package/css/conditions.mjs +1 -1
- package/jsx/is-valid-prop.mjs +1 -1
- package/package.json +1 -1
- package/themes/theme-next.json +1 -1
- package/tokens/index.mjs +24 -4
- package/tokens/tokens.d.ts +2 -2
- package/types/conditions.d.ts +2 -0
package/CHANGELOG.md
CHANGED
package/css/conditions.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { withoutSpace } from '../helpers.mjs';
|
|
2
2
|
|
|
3
|
-
const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_collapsed,_hasIcon,_hasLabel,_highlight,_hasBorder,_hasBackground,_isFullWidth,_placementLeft,_placementRight,_nextTheme,_enterprise,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,_themeNext,base"
|
|
3
|
+
const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_collapsed,_hasIcon,_hasLabel,_highlight,_hasBorder,_hasBackground,_isFullWidth,_isRounded,_placementLeft,_placementRight,_nextTheme,_enterprise,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,_themeNext,base"
|
|
4
4
|
const conditions = new Set(conditionsStr.split(','))
|
|
5
5
|
|
|
6
6
|
const conditionRegex = /^@|&|&$/
|
package/jsx/is-valid-prop.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { splitProps } from '../helpers.mjs';
|
|
2
2
|
import { memo } from '../helpers.mjs';
|
|
3
3
|
// src/index.ts
|
|
4
|
-
var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_collapsed,_hasIcon,_hasLabel,_highlight,_hasBorder,_hasBackground,_isFullWidth,_placementLeft,_placementRight,_nextTheme,_enterprise,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,_themeNext,textStyle"
|
|
4
|
+
var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_collapsed,_hasIcon,_hasLabel,_highlight,_hasBorder,_hasBackground,_isFullWidth,_isRounded,_placementLeft,_placementRight,_nextTheme,_enterprise,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,_themeNext,textStyle"
|
|
5
5
|
var userGenerated = userGeneratedStr.split(",");
|
|
6
6
|
var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical";
|
|
7
7
|
var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);
|
package/package.json
CHANGED
package/themes/theme-next.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "next",
|
|
3
3
|
"id": "panda-theme-next",
|
|
4
|
-
"css": "[data-panda-theme=next] {\n --mp-border-widths-none: none;\n --mp-border-widths-sm: 1px;\n --mp-border-widths-md: 1.5px;\n --mp-border-widths-lg: 2px;\n --mp-border-widths-xl: 3px;\n --mp-border-widths-2xl: 4px;\n --mp-colors-debug: red;\n --mp-colors-currentcolor: currentcolor;\n --mp-colors-transparent: #FFFFFF00;\n --mp-colors-white: #FFFFFF;\n --mp-colors-vibrant-purple: linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%);\n --mp-colors-light-purple: radial-gradient(108.28% 139.29% at 0% 0%, var(--mp-colors-background-brand) 0%, var(--mp-colors-background-highlight) 100%);\n --mp-colors-dark-100: #1D2125;\n --mp-colors-dark-200: #22272B;\n --mp-colors-dark-250: #282E33;\n --mp-colors-dark-300: #2C333A;\n --mp-colors-dark-350: #38414A;\n --mp-colors-dark-400: #454F59;\n --mp-colors-dark-500: #596773;\n --mp-colors-dark-600: #738496;\n --mp-colors-dark-700: #8C9BAB;\n --mp-colors-dark-800: #9FADBC;\n --mp-colors-dark-900: #B6C2CF;\n --mp-colors-dark-1000: #C7D1DB;\n --mp-colors-dark--100: #101214;\n --mp-colors-dark: #161A1D;\n --mp-colors-dark-100a: #bcd6f00a;\n --mp-colors-dark-200a: #a1bdd914;\n --mp-colors-dark-250a: #c8e1f91f;\n --mp-colors-dark-300a: #a6c5e229;\n --mp-colors-dark-350a: #c3defe33;\n --mp-colors-dark-400a: #bfdbf847;\n --mp-colors-dark-500a: #9bb4ca85;\n --mp-colors-neutral-100: #F7F8F9;\n --mp-colors-neutral-200: #F0F1F3;\n --mp-colors-neutral-300: #DCDFE4;\n --mp-colors-neutral-400: #B2B9C4;\n --mp-colors-neutral-500: #8690A2;\n --mp-colors-neutral-600: #758195;\n --mp-colors-neutral-700: #656F80;\n --mp-colors-neutral-800: #4C5460;\n --mp-colors-neutral-900: #383E48;\n --mp-colors-neutral-1000: #272B32;\n --mp-colors-neutral-100a: #1d1f240a;\n --mp-colors-neutral-200a: #1d1f2414;\n --mp-colors-neutral-300a: #1d1f2429;\n --mp-colors-neutral-400a: #1d1f2452;\n --mp-colors-neutral-500a: #1d1f247a;\n --mp-colors-slate-100: #F8F9F9;\n --mp-colors-slate-200: #EBF0F1;\n --mp-colors-slate-300: #E3E7E9;\n --mp-colors-slate-400: #8C9596;\n --mp-colors-slate-500: #6E7A7C;\n --mp-colors-slate-600: #536062;\n --mp-colors-slate-700: #3A4749;\n --mp-colors-slate-800: #243032;\n --mp-colors-slate-900: #121C1E;\n --mp-colors-slate-1000: #080D0E;\n --mp-colors-slate-100a: #1d1f240a;\n --mp-colors-slate-200a: #1d1f2414;\n --mp-colors-slate-300a: #1d1f2429;\n --mp-colors-slate-400a: #1d1f2452;\n --mp-colors-slate-500a: #1d1f247a;\n --mp-colors-blue-100: #ECF3FE;\n --mp-colors-blue-200: #CEE0FD;\n --mp-colors-blue-300: #8EB7FA;\n --mp-colors-blue-400: #649CF8;\n --mp-colors-blue-500: #488BF7;\n --mp-colors-blue-600: #387CEB;\n --mp-colors-blue-700: #306AC8;\n --mp-colors-blue-800: #295AAA;\n --mp-colors-blue-900: #173361;\n --mp-colors-blue-1000: #132A4F;\n --mp-colors-indigo-100: #EEF0FC;\n --mp-colors-indigo-200: #D6DBF7;\n --mp-colors-indigo-300: #A8B2EF;\n --mp-colors-indigo-400: #8997E9;\n --mp-colors-indigo-500: #7586E5;\n --mp-colors-indigo-600: #6577E2;\n --mp-colors-indigo-700: #4B61DC;\n --mp-colors-indigo-800: #4053BC;\n --mp-colors-indigo-900: #242F6A;\n --mp-colors-indigo-1000: #1D2656;\n --mp-colors-violet-100: #F3F1FC;\n --mp-colors-violet-200: #DEDAF6;\n --mp-colors-violet-300: #B8AEEB;\n --mp-colors-violet-400: #9F91E3;\n --mp-colors-violet-500: #8F7FDF;\n --mp-colors-violet-600: #8270DB;\n --mp-colors-violet-700: #6F5FBA;\n --mp-colors-violet-800: #5F519F;\n --mp-colors-violet-900: #352E5A;\n --mp-colors-violet-1000: #2B2549;\n --mp-colors-fuchsia-100: #FBEEFE;\n --mp-colors-fuchsia-200: #F6D1FB;\n --mp-colors-fuchsia-300: #EA98F6;\n --mp-colors-fuchsia-400: #E16CF2;\n --mp-colors-fuchsia-500: #DA4DF0;\n --mp-colors-fuchsia-600: #C841DC;\n --mp-colors-fuchsia-700: #AC37BD;\n --mp-colors-fuchsia-800: #932FA2;\n --mp-colors-fuchsia-900: #531B5C;\n --mp-colors-fuchsia-1000: #45164C;\n --mp-colors-red-100: #FCEEED;\n --mp-colors-red-200: #F9D7D5;\n --mp-colors-red-300: #F09E99;\n --mp-colors-red-400: #EA7A72;\n --mp-colors-red-500: #E6645B;\n --mp-colors-red-600: #E2483D;\n --mp-colors-red-700: #C33E35;\n --mp-colors-red-800: #A8352D;\n --mp-colors-red-900: #5E1E19;\n --mp-colors-red-1000: #4E1915;\n --mp-colors-orange-100: #FDF3EC;\n --mp-colors-orange-200: #F9DECB;\n --mp-colors-orange-300: #F5C39F;\n --mp-colors-orange-400: #F0A875;\n --mp-colors-orange-500: #EB8E4B;\n --mp-colors-orange-600: #E46910;\n --mp-colors-orange-700: #BC560D;\n --mp-colors-orange-800: #A14A0B;\n --mp-colors-orange-900: #6B3108;\n --mp-colors-orange-1000: #492105;\n --mp-colors-yellow-100: #FDF6DD;\n --mp-colors-yellow-200: #F9E399;\n --mp-colors-yellow-300: #F5CD47;\n --mp-colors-yellow-400: #D8B53F;\n --mp-colors-yellow-500: #C2A338;\n --mp-colors-yellow-600: #A68A30;\n --mp-colors-yellow-700: #897228;\n --mp-colors-yellow-800: #766222;\n --mp-colors-yellow-900: #4D4016;\n --mp-colors-yellow-1000: #362D10;\n --mp-colors-lime-100: #F4FAEA;\n --mp-colors-lime-200: #D8EFB5;\n --mp-colors-lime-300: #B1DF6B;\n --mp-colors-lime-400: #83CA16;\n --mp-colors-lime-500: #77B814;\n --mp-colors-lime-600: #649B11;\n --mp-colors-lime-700: #53800E;\n --mp-colors-lime-800: #466C0C;\n --mp-colors-lime-900: #304A08;\n --mp-colors-lime-1000: #213306;\n --mp-colors-green-100: #F2F9F6;\n --mp-colors-green-200: #D2EBE1;\n --mp-colors-green-300: #A7D9C4;\n --mp-colors-green-400: #7DC7A8;\n --mp-colors-green-500: #56B78E;\n --mp-colors-green-600: #23A06B;\n --mp-colors-green-700: #1C8459;\n --mp-colors-green-800: #186F4A;\n --mp-colors-green-900: #104B32;\n --mp-colors-green-1000: #0B3524;\n --mp-colors-teal-100: #EAF9F7;\n --mp-colors-teal-200: #C4EDE9;\n --mp-colors-teal-300: #92DED6;\n --mp-colors-teal-400: #4FCABC;\n --mp-colors-teal-500: #19B9A8;\n --mp-colors-teal-600: #119E8F;\n --mp-colors-teal-700: #0E8275;\n --mp-colors-teal-800: #0C6E63;\n --mp-colors-teal-900: #084841;\n --mp-colors-teal-1000: #06342F;\n --mp-colors-emerald-100: #F0FBF7;\n --mp-colors-emerald-200: #D6F4E9;\n --mp-colors-emerald-300: #B7E9D8;\n --mp-colors-emerald-400: #7EDAC0;\n --mp-colors-emerald-500: #41C6A0;\n --mp-colors-emerald-600: #1FB088;\n --mp-colors-emerald-700: #029861;\n --mp-colors-emerald-800: #0F6D4D;\n --mp-colors-emerald-900: #0E4F3A;\n --mp-colors-emerald-1000: #142D26;\n --mp-colors-brand-capital: #2F5573;\n --mp-colors-brand-esign: #00C853;\n --mp-colors-brand-expense: #183883;\n --mp-colors-brand-flex: #7C4DFF;\n --mp-colors-brand-jurnal: #40C3FF;\n --mp-colors-brand-klikpajak: #FF9100;\n --mp-colors-brand-mekari: #651FFF;\n --mp-colors-brand-qontak: #2979FF;\n --mp-colors-brand-talenta: #F22929;\n --mp-colors-brand-university: #448AFF;\n --mp-durations-slow: 100ms;\n --mp-durations-normal: 250ms;\n --mp-durations-fast: 300ms;\n --mp-fonts-body: \"Inter\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n --mp-fonts-mono: SFMono-Regular, Menlo, Monaco,Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --mp-font-sizes-xs: 0.625rem;\n --mp-font-sizes-sm: 0.75rem;\n --mp-font-sizes-md: 0.875rem;\n --mp-font-sizes-lg: 1rem;\n --mp-font-sizes-xl: 1.25rem;\n --mp-font-sizes-2xl: 1.5rem;\n --mp-font-weights-regular: 400;\n --mp-font-weights-semi-bold: 600;\n --mp-font-weights-bold: 800;\n --mp-line-heights-xs: 1.2;\n --mp-line-heights-sm: 1.34;\n --mp-line-heights-md: 1.43;\n --mp-line-heights-lg: 1.429;\n --mp-line-heights-xl: 1.5;\n --mp-line-heights-2xl: 1.67;\n --mp-line-heights-3xl: 1.71;\n --mp-letter-spacings-tighter: -0.05em;\n --mp-letter-spacings-tight: -0.025em;\n --mp-letter-spacings-normal: 0;\n --mp-letter-spacings-wide: 0.025em;\n --mp-letter-spacings-wider: 0.05em;\n --mp-letter-spacings-widest: 0.1em;\n --mp-opacity-0: 0;\n --mp-opacity-40: 0.4;\n --mp-opacity-60: 0.6;\n --mp-opacity-100: 1;\n --mp-radii-none: 0;\n --mp-radii-sm: 0.25rem;\n --mp-radii-md: 0.375rem;\n --mp-radii-lg: 0.5rem;\n --mp-radii-xl: 0.75rem;\n --mp-radii-full: 999px;\n --mp-shadows-xs: 0px 2px 4px 0px var(--mp-colors-background-shadow), 0px 0px 2px 0px var(--mp-colors-background-shadow);\n --mp-shadows-sm: 0px 10px 15px -3px var(--mp-colors-background-shadow), 0px 4px 6px -2px var(--mp-colors-background-shadow);\n --mp-shadows-md: 0px 20px 25px -5px var(--mp-colors-background-shadow), 0px 10px 10px -5px var(--mp-colors-background-shadow);\n --mp-shadows-lg: 0px 25px 30px -10px var(--mp-colors-background-shadow), 0px 15px 15px -10px var(--mp-colors-background-shadow);\n --mp-shadows-focus: 0 0 0 1px var(--mp-colors-border-focused);\n --mp-shadows-outline: 0 0 0 3px #E0EEFF;\n --mp-shadows-outer: 0 0 0 3px rgba(224, 238, 255, 1);\n --mp-shadows-none: none;\n --mp-sizes-0: 0;\n --mp-sizes-1: 0.25rem;\n --mp-sizes-2: 0.5rem;\n --mp-sizes-3: 0.75rem;\n --mp-sizes-4: 1rem;\n --mp-sizes-5: 1.25rem;\n --mp-sizes-6: 1.5rem;\n --mp-sizes-7: 1.75rem;\n --mp-sizes-8: 2rem;\n --mp-sizes-9: 2.25rem;\n --mp-sizes-10: 2.5rem;\n --mp-sizes-11: 2.75rem;\n --mp-sizes-12: 3rem;\n --mp-sizes-16: 4rem;\n --mp-sizes-20: 5rem;\n --mp-sizes-22: 5.5rem;\n --mp-sizes-56: 14rem;\n --mp-sizes-65: 17.5rem;\n --mp-sizes-0\\.25: 0.0625rem;\n --mp-sizes-0\\.5: 0.125rem;\n --mp-sizes-2\\.5: 0.625rem;\n --mp-sizes-7\\.5: 1.875rem;\n --mp-sizes-9\\.5: 2.375rem;\n --mp-sizes-full: 100%;\n --mp-sizes-sm: 24rem;\n --mp-spacing-0: 0;\n --mp-spacing-1: 0.25rem;\n --mp-spacing-2: 0.5rem;\n --mp-spacing-3: 0.75rem;\n --mp-spacing-4: 1rem;\n --mp-spacing-5: 1.3rem;\n --mp-spacing-6: 1.5rem;\n --mp-spacing-8: 2rem;\n --mp-spacing-10: 2.5rem;\n --mp-spacing-20: 5rem;\n --mp-spacing-0\\.5: 0.125rem;\n --mp-spacing-1\\.5: 0.375rem;\n --mp-z-index-hide: -1;\n --mp-z-index-base: 0;\n --mp-z-index-docked: 10;\n --mp-z-index-sticky: 1100;\n --mp-z-index-overlay: 1300;\n --mp-z-index-modal: 1400;\n --mp-z-index-popover: 1500;\n --mp-z-index-tooltip: 1800;\n --mp-colors-background-surface: #F1F5F9;\n --mp-colors-background-surface-bold: var(--mp-colors-neutral-1000);\n --mp-colors-background-information: var(--mp-colors-indigo-100);\n --mp-colors-background-information-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-stage: var(--mp-colors-white);\n --mp-colors-background-overlay: #232933CC;\n --mp-colors-background-disabled: var(--mp-colors-neutral-100a);\n --mp-colors-background-inverse: var(--mp-colors-dark-100);\n --mp-colors-background-shadow: #1D1F2429;\n --mp-colors-background-neutral: var(--mp-colors-white);\n --mp-colors-background-neutral-hovered: var(--mp-colors-neutral-100);\n --mp-colors-background-neutral-pressed: var(--mp-colors-neutral-200);\n --mp-colors-background-neutral-selected: var(--mp-colors-neutral-100);\n --mp-colors-background-neutral-subtle: var(--mp-colors-neutral-200);\n --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-neutral-300);\n --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-neutral-400);\n --mp-colors-background-neutral-subtle-selected: var(--mp-colors-neutral-300);\n --mp-colors-background-neutral-bold: var(--mp-colors-neutral-800);\n --mp-colors-background-neutral-bold-hovered: var(--mp-colors-neutral-900);\n --mp-colors-background-neutral-bold-pressed: var(--mp-colors-neutral-1000);\n --mp-colors-background-neutral-bold-selected: var(--mp-colors-neutral-900);\n --mp-colors-background-brand: var(--mp-colors-indigo-100);\n --mp-colors-background-brand-hovered: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-pressed: var(--mp-colors-indigo-300);\n --mp-colors-background-brand-selected: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-900);\n --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-bold-selected-disabled: var(--mp-colors-indigo-200);\n --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-danger: var(--mp-colors-red-100);\n --mp-colors-background-danger-hovered: var(--mp-colors-red-200);\n --mp-colors-background-danger-pressed: var(--mp-colors-red-300);\n --mp-colors-background-danger-selected: var(--mp-colors-red-200);\n --mp-colors-background-danger-bold: var(--mp-colors-red-700);\n --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-800);\n --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-900);\n --mp-colors-background-danger-bold-selected: var(--mp-colors-red-800);\n --mp-colors-background-warning: var(--mp-colors-yellow-100);\n --mp-colors-background-warning-hovered: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-pressed: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-selected: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n --mp-colors-background-warning-bold-selected: var(--mp-colors-yellow-400);\n --mp-colors-background-success: var(--mp-colors-green-100);\n --mp-colors-background-success-hovered: var(--mp-colors-green-200);\n --mp-colors-background-success-pressed: var(--mp-colors-green-300);\n --mp-colors-background-success-selected: var(--mp-colors-green-200);\n --mp-colors-background-success-bold: var(--mp-colors-green-700);\n --mp-colors-background-success-bold-hovered: var(--mp-colors-green-800);\n --mp-colors-background-success-bold-pressed: var(--mp-colors-green-900);\n --mp-colors-background-success-bold-selected: var(--mp-colors-green-800);\n --mp-colors-background-highlight: var(--mp-colors-violet-100);\n --mp-colors-background-highlight-hovered: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-pressed: var(--mp-colors-violet-300);\n --mp-colors-background-highlight-selected: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-bold: var(--mp-colors-violet-700);\n --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-800);\n --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-900);\n --mp-colors-background-highlight-bold-selected: var(--mp-colors-violet-800);\n --mp-colors-background-header: var(--mp-colors-white);\n --mp-colors-background-header-menu-hovered: var(--mp-colors-transparent);\n --mp-colors-background-header-menu-selected: var(--mp-colors-transparent);\n --mp-colors-background-airene: radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%);\n --mp-colors-nav-parent: #E7EDF5;\n --mp-colors-nav-stack: var(--mp-colors-neutral-100);\n --mp-colors-nav-stack-hovered: #E7EDF5;\n --mp-colors-text-default: var(--mp-colors-neutral-1000);\n --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n --mp-colors-text-secondary: var(--mp-colors-neutral-700);\n --mp-colors-text-secondary-pressed: var(--mp-colors-neutral-800);\n --mp-colors-text-placeholder: var(--mp-colors-neutral-600);\n --mp-colors-text-disabled: var(--mp-colors-neutral-400a);\n --mp-colors-text-inverse: var(--mp-colors-white);\n --mp-colors-text-inverse-static: var(--mp-colors-white);\n --mp-colors-text-selected: var(--mp-colors-indigo-700);\n --mp-colors-text-danger: var(--mp-colors-red-800);\n --mp-colors-text-danger-pressed: var(--mp-colors-red-900);\n --mp-colors-text-warning: var(--mp-colors-orange-800);\n --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-text-success: var(--mp-colors-green-800);\n --mp-colors-text-highlight: var(--mp-colors-violet-800);\n --mp-colors-text-information: var(--mp-colors-indigo-800);\n --mp-colors-text-link: var(--mp-colors-indigo-700);\n --mp-colors-text-link-pressed: var(--mp-colors-indigo-800);\n --mp-colors-icon-default: var(--mp-colors-neutral-600);\n --mp-colors-icon-disabled: var(--mp-colors-neutral-400);\n --mp-colors-icon-inverse: var(--mp-colors-white);\n --mp-colors-icon-inverse-static: var(--mp-colors-white);\n --mp-colors-icon-selected: var(--mp-colors-indigo-700);\n --mp-colors-icon-brand: var(--mp-colors-indigo-700);\n --mp-colors-icon-danger: var(--mp-colors-red-700);\n --mp-colors-icon-warning: var(--mp-colors-orange-700);\n --mp-colors-icon-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-icon-success: var(--mp-colors-green-700);\n --mp-colors-icon-highlight: var(--mp-colors-violet-700);\n --mp-colors-icon-information: var(--mp-colors-indigo-700);\n --mp-colors-icon-subtle: var(--mp-colors-neutral-300);\n --mp-colors-icon-logo: var(--mp-colors-neutral-1000);\n --mp-colors-border-default: var(--mp-colors-neutral-300);\n --mp-colors-border-subtle: var(--mp-colors-neutral-200);\n --mp-colors-border-bold: var(--mp-colors-neutral-600);\n --mp-colors-border-disabled: var(--mp-colors-neutral-200a);\n --mp-colors-border-form: var(--mp-colors-neutral-300a);\n --mp-colors-border-focused: var(--mp-colors-indigo-500);\n --mp-colors-border-inverse: var(--mp-colors-white);\n --mp-colors-border-selected: var(--mp-colors-indigo-700);\n --mp-colors-border-selected-hovered: var(--mp-colors-indigo-800);\n --mp-colors-border-selected-disabled: var(--mp-colors-indigo-200);\n --mp-colors-border-brand: var(--mp-colors-indigo-700);\n --mp-colors-border-danger: var(--mp-colors-red-700);\n --mp-colors-border-warning: var(--mp-colors-yellow-300);\n --mp-colors-border-success: var(--mp-colors-green-700);\n --mp-colors-border-highlight: var(--mp-colors-violet-700);\n --mp-colors-border-information: var(--mp-colors-indigo-700);\n --mp-colors-chart-cat01: var(--mp-colors-blue-400);\n --mp-colors-chart-cat01-bold: var(--mp-colors-blue-600);\n --mp-colors-chart-cat02: var(--mp-colors-teal-400);\n --mp-colors-chart-cat02-bold: var(--mp-colors-teal-600);\n --mp-colors-chart-cat03: var(--mp-colors-violet-400);\n --mp-colors-chart-cat03-bold: var(--mp-colors-violet-600);\n --mp-colors-chart-cat04: var(--mp-colors-orange-400);\n --mp-colors-chart-cat04-bold: var(--mp-colors-orange-600);\n --mp-colors-chart-cat05: var(--mp-colors-neutral-400);\n --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-600);\n --mp-colors-chart-cat06: var(--mp-colors-red-400);\n --mp-colors-chart-cat06-bold: var(--mp-colors-red-600);\n --mp-colors-chart-cat07: var(--mp-colors-lime-400);\n --mp-colors-chart-cat07-bold: var(--mp-colors-lime-600);\n --mp-colors-chart-cat08: var(--mp-colors-fuchsia-400);\n --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-600);\n --mp-spacing-4xs: 0.125rem;\n --mp-spacing-3xs: var(--mp-spacing-1);\n --mp-spacing-2xs: 0.375rem;\n --mp-spacing-xs: var(--mp-spacing-2);\n --mp-spacing-sm: var(--mp-spacing-3);\n --mp-spacing-md: var(--mp-spacing-4);\n --mp-spacing-lg: var(--mp-spacing-5);\n --mp-spacing-xl: var(--mp-spacing-6);\n --mp-spacing-2xl: var(--mp-spacing-8);\n --mp-spacing-3xl: var(--mp-spacing-10);\n --mp-spacing-4xl: var(--mp-spacing-20)\n}\n\n[data-panda-theme=next].light {\n --mp-colors-background-surface: #F1F5F9;\n --mp-colors-background-surface-bold: var(--mp-colors-neutral-1000);\n --mp-colors-background-information: var(--mp-colors-indigo-100);\n --mp-colors-background-information-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-stage: var(--mp-colors-white);\n --mp-colors-background-overlay: #232933CC;\n --mp-colors-background-disabled: var(--mp-colors-neutral-100a);\n --mp-colors-background-inverse: var(--mp-colors-dark-100);\n --mp-colors-background-shadow: #1D1F2429;\n --mp-colors-background-neutral: var(--mp-colors-white);\n --mp-colors-background-neutral-hovered: var(--mp-colors-neutral-100);\n --mp-colors-background-neutral-pressed: var(--mp-colors-neutral-200);\n --mp-colors-background-neutral-selected: var(--mp-colors-neutral-100);\n --mp-colors-background-neutral-subtle: var(--mp-colors-neutral-200);\n --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-neutral-300);\n --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-neutral-400);\n --mp-colors-background-neutral-subtle-selected: var(--mp-colors-neutral-300);\n --mp-colors-background-neutral-bold: var(--mp-colors-neutral-800);\n --mp-colors-background-neutral-bold-hovered: var(--mp-colors-neutral-900);\n --mp-colors-background-neutral-bold-pressed: var(--mp-colors-neutral-1000);\n --mp-colors-background-neutral-bold-selected: var(--mp-colors-neutral-900);\n --mp-colors-background-brand: var(--mp-colors-indigo-100);\n --mp-colors-background-brand-hovered: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-pressed: var(--mp-colors-indigo-300);\n --mp-colors-background-brand-selected: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-900);\n --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-bold-selected-disabled: var(--mp-colors-indigo-200);\n --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-danger: var(--mp-colors-red-100);\n --mp-colors-background-danger-hovered: var(--mp-colors-red-200);\n --mp-colors-background-danger-pressed: var(--mp-colors-red-300);\n --mp-colors-background-danger-selected: var(--mp-colors-red-200);\n --mp-colors-background-danger-bold: var(--mp-colors-red-700);\n --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-800);\n --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-900);\n --mp-colors-background-danger-bold-selected: var(--mp-colors-red-800);\n --mp-colors-background-warning: var(--mp-colors-yellow-100);\n --mp-colors-background-warning-hovered: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-pressed: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-selected: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n --mp-colors-background-warning-bold-selected: var(--mp-colors-yellow-400);\n --mp-colors-background-success: var(--mp-colors-green-100);\n --mp-colors-background-success-hovered: var(--mp-colors-green-200);\n --mp-colors-background-success-pressed: var(--mp-colors-green-300);\n --mp-colors-background-success-selected: var(--mp-colors-green-200);\n --mp-colors-background-success-bold: var(--mp-colors-green-700);\n --mp-colors-background-success-bold-hovered: var(--mp-colors-green-800);\n --mp-colors-background-success-bold-pressed: var(--mp-colors-green-900);\n --mp-colors-background-success-bold-selected: var(--mp-colors-green-800);\n --mp-colors-background-highlight: var(--mp-colors-violet-100);\n --mp-colors-background-highlight-hovered: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-pressed: var(--mp-colors-violet-300);\n --mp-colors-background-highlight-selected: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-bold: var(--mp-colors-violet-700);\n --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-800);\n --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-900);\n --mp-colors-background-highlight-bold-selected: var(--mp-colors-violet-800);\n --mp-colors-background-header: var(--mp-colors-white);\n --mp-colors-background-header-menu-hovered: var(--mp-colors-transparent);\n --mp-colors-background-header-menu-selected: var(--mp-colors-transparent);\n --mp-colors-background-airene: radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%);\n --mp-colors-nav-parent: #E7EDF5;\n --mp-colors-nav-stack: var(--mp-colors-neutral-100);\n --mp-colors-nav-stack-hovered: #E7EDF5;\n --mp-colors-text-default: var(--mp-colors-neutral-1000);\n --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n --mp-colors-text-secondary: var(--mp-colors-neutral-700);\n --mp-colors-text-secondary-pressed: var(--mp-colors-neutral-800);\n --mp-colors-text-placeholder: var(--mp-colors-neutral-600);\n --mp-colors-text-disabled: var(--mp-colors-neutral-400a);\n --mp-colors-text-inverse: var(--mp-colors-white);\n --mp-colors-text-inverse-static: var(--mp-colors-white);\n --mp-colors-text-selected: var(--mp-colors-indigo-700);\n --mp-colors-text-danger: var(--mp-colors-red-800);\n --mp-colors-text-danger-pressed: var(--mp-colors-red-900);\n --mp-colors-text-warning: var(--mp-colors-orange-800);\n --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-text-success: var(--mp-colors-green-800);\n --mp-colors-text-highlight: var(--mp-colors-violet-800);\n --mp-colors-text-information: var(--mp-colors-indigo-800);\n --mp-colors-text-link: var(--mp-colors-indigo-700);\n --mp-colors-text-link-pressed: var(--mp-colors-indigo-800);\n --mp-colors-icon-default: var(--mp-colors-neutral-600);\n --mp-colors-icon-disabled: var(--mp-colors-neutral-400);\n --mp-colors-icon-inverse: var(--mp-colors-white);\n --mp-colors-icon-inverse-static: var(--mp-colors-white);\n --mp-colors-icon-selected: var(--mp-colors-indigo-700);\n --mp-colors-icon-brand: var(--mp-colors-indigo-700);\n --mp-colors-icon-danger: var(--mp-colors-red-700);\n --mp-colors-icon-warning: var(--mp-colors-orange-700);\n --mp-colors-icon-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-icon-success: var(--mp-colors-green-700);\n --mp-colors-icon-highlight: var(--mp-colors-violet-700);\n --mp-colors-icon-information: var(--mp-colors-indigo-700);\n --mp-colors-icon-subtle: var(--mp-colors-neutral-300);\n --mp-colors-icon-logo: var(--mp-colors-neutral-1000);\n --mp-colors-border-default: var(--mp-colors-neutral-300);\n --mp-colors-border-subtle: var(--mp-colors-neutral-200);\n --mp-colors-border-bold: var(--mp-colors-neutral-600);\n --mp-colors-border-disabled: var(--mp-colors-neutral-200a);\n --mp-colors-border-form: var(--mp-colors-neutral-300a);\n --mp-colors-border-focused: var(--mp-colors-indigo-500);\n --mp-colors-border-inverse: var(--mp-colors-white);\n --mp-colors-border-selected: var(--mp-colors-indigo-700);\n --mp-colors-border-selected-hovered: var(--mp-colors-indigo-800);\n --mp-colors-border-selected-disabled: var(--mp-colors-indigo-200);\n --mp-colors-border-brand: var(--mp-colors-indigo-700);\n --mp-colors-border-danger: var(--mp-colors-red-700);\n --mp-colors-border-warning: var(--mp-colors-yellow-300);\n --mp-colors-border-success: var(--mp-colors-green-700);\n --mp-colors-border-highlight: var(--mp-colors-violet-700);\n --mp-colors-border-information: var(--mp-colors-indigo-700);\n --mp-colors-chart-cat01: var(--mp-colors-blue-400);\n --mp-colors-chart-cat01-bold: var(--mp-colors-blue-600);\n --mp-colors-chart-cat02: var(--mp-colors-teal-400);\n --mp-colors-chart-cat02-bold: var(--mp-colors-teal-600);\n --mp-colors-chart-cat03: var(--mp-colors-violet-400);\n --mp-colors-chart-cat03-bold: var(--mp-colors-violet-600);\n --mp-colors-chart-cat04: var(--mp-colors-orange-400);\n --mp-colors-chart-cat04-bold: var(--mp-colors-orange-600);\n --mp-colors-chart-cat05: var(--mp-colors-neutral-400);\n --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-600);\n --mp-colors-chart-cat06: var(--mp-colors-red-400);\n --mp-colors-chart-cat06-bold: var(--mp-colors-red-600);\n --mp-colors-chart-cat07: var(--mp-colors-lime-400);\n --mp-colors-chart-cat07-bold: var(--mp-colors-lime-600);\n --mp-colors-chart-cat08: var(--mp-colors-fuchsia-400);\n --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-600)\n }\n\n[data-panda-theme=next].dark {\n --mp-colors-background-surface: var(--mp-colors-dark);\n --mp-colors-background-surface-bold: var(--mp-colors-neutral-100);\n --mp-colors-background-information: var(--mp-colors-indigo-1000);\n --mp-colors-background-information-bold: var(--mp-colors-indigo-400);\n --mp-colors-background-stage: var(--mp-colors-dark-100);\n --mp-colors-background-overlay: #657F9980;\n --mp-colors-background-disabled: var(--mp-colors-dark-100a);\n --mp-colors-background-inverse: var(--mp-colors-white);\n --mp-colors-background-shadow: var(--mp-colors-dark);\n --mp-colors-background-neutral: var(--mp-colors-dark-200);\n --mp-colors-background-neutral-hovered: var(--mp-colors-dark-250);\n --mp-colors-background-neutral-pressed: var(--mp-colors-dark-300);\n --mp-colors-background-neutral-selected: var(--mp-colors-dark-250);\n --mp-colors-background-neutral-subtle: var(--mp-colors-dark-300);\n --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-dark-350);\n --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-neutral-subtle-selected: var(--mp-colors-dark-350);\n --mp-colors-background-neutral-bold: var(--mp-colors-dark-800);\n --mp-colors-background-neutral-bold-hovered: var(--mp-colors-dark-900);\n --mp-colors-background-neutral-bold-pressed: var(--mp-colors-dark-1000);\n --mp-colors-background-neutral-bold-selected: var(--mp-colors-dark-900);\n --mp-colors-background-brand: var(--mp-colors-indigo-1000);\n --mp-colors-background-brand-hovered: var(--mp-colors-indigo-900);\n --mp-colors-background-brand-pressed: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-selected: var(--mp-colors-indigo-900);\n --mp-colors-background-brand-bold: var(--mp-colors-indigo-400);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-300);\n --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-300);\n --mp-colors-background-brand-bold-selected-disabled: var(--mp-colors-indigo-900);\n --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-danger: var(--mp-colors-red-1000);\n --mp-colors-background-danger-hovered: var(--mp-colors-red-900);\n --mp-colors-background-danger-pressed: var(--mp-colors-red-800);\n --mp-colors-background-danger-selected: var(--mp-colors-red-900);\n --mp-colors-background-danger-bold: var(--mp-colors-red-400);\n --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-300);\n --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-200);\n --mp-colors-background-danger-bold-selected: var(--mp-colors-red-300);\n --mp-colors-background-warning: var(--mp-colors-yellow-1000);\n --mp-colors-background-warning-hovered: var(--mp-colors-yellow-900);\n --mp-colors-background-warning-pressed: var(--mp-colors-yellow-800);\n --mp-colors-background-warning-selected: var(--mp-colors-yellow-900);\n --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n --mp-colors-background-warning-bold-selected: var(--mp-colors-yellow-400);\n --mp-colors-background-success: var(--mp-colors-green-1000);\n --mp-colors-background-success-hovered: var(--mp-colors-green-900);\n --mp-colors-background-success-pressed: var(--mp-colors-green-800);\n --mp-colors-background-success-selected: var(--mp-colors-green-900);\n --mp-colors-background-success-bold: var(--mp-colors-green-400);\n --mp-colors-background-success-bold-hovered: var(--mp-colors-green-300);\n --mp-colors-background-success-bold-pressed: var(--mp-colors-green-200);\n --mp-colors-background-success-bold-selected: var(--mp-colors-green-400);\n --mp-colors-background-highlight: var(--mp-colors-violet-1000);\n --mp-colors-background-highlight-hovered: var(--mp-colors-violet-900);\n --mp-colors-background-highlight-pressed: var(--mp-colors-violet-800);\n --mp-colors-background-highlight-selected: var(--mp-colors-violet-900);\n --mp-colors-background-highlight-bold: var(--mp-colors-violet-400);\n --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-300);\n --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-bold-selected: var(--mp-colors-violet-300);\n --mp-colors-background-header: var(--mp-colors-dark-100);\n --mp-colors-background-header-menu-hovered: var(--mp-colors-transparent);\n --mp-colors-background-header-menu-selected: var(--mp-colors-transparent);\n --mp-colors-background-airene: radial-gradient(108.28% 139.29% at 0% 0%, #1D2656 0%, #2B2549 100%);\n --mp-colors-nav-parent: var(--mp-colors-dark-100);\n --mp-colors-nav-stack: var(--mp-colors-dark);\n --mp-colors-nav-stack-hovered: var(--mp-colors-dark-100);\n --mp-colors-text-default: var(--mp-colors-dark-900);\n --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n --mp-colors-text-secondary: var(--mp-colors-dark-700);\n --mp-colors-text-secondary-pressed: var(--mp-colors-dark-800);\n --mp-colors-text-placeholder: var(--mp-colors-dark-600);\n --mp-colors-text-disabled: var(--mp-colors-dark-400a);\n --mp-colors-text-inverse: var(--mp-colors-dark-100);\n --mp-colors-text-inverse-static: var(--mp-colors-white);\n --mp-colors-text-selected: var(--mp-colors-indigo-400);\n --mp-colors-text-danger: var(--mp-colors-red-300);\n --mp-colors-text-danger-pressed: var(--mp-colors-red-200);\n --mp-colors-text-warning: var(--mp-colors-yellow-300);\n --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-text-success: var(--mp-colors-green-300);\n --mp-colors-text-highlight: var(--mp-colors-violet-300);\n --mp-colors-text-information: var(--mp-colors-indigo-300);\n --mp-colors-text-link: var(--mp-colors-indigo-400);\n --mp-colors-text-link-pressed: var(--mp-colors-indigo-300);\n --mp-colors-icon-default: var(--mp-colors-dark-600);\n --mp-colors-icon-disabled: var(--mp-colors-dark-400);\n --mp-colors-icon-inverse: var(--mp-colors-dark-100);\n --mp-colors-icon-inverse-static: var(--mp-colors-white);\n --mp-colors-icon-selected: var(--mp-colors-indigo-400);\n --mp-colors-icon-brand: var(--mp-colors-indigo-400);\n --mp-colors-icon-danger: var(--mp-colors-red-400);\n --mp-colors-icon-warning: var(--mp-colors-yellow-300);\n --mp-colors-icon-warning-inverse: var(--mp-colors-dark-100);\n --mp-colors-icon-success: var(--mp-colors-green-400);\n --mp-colors-icon-highlight: var(--mp-colors-violet-400);\n --mp-colors-icon-information: var(--mp-colors-indigo-400);\n --mp-colors-icon-subtle: var(--mp-colors-dark-300);\n --mp-colors-icon-logo: var(--mp-colors-neutral-100);\n --mp-colors-border-default: var(--mp-colors-dark-300);\n --mp-colors-border-subtle: var(--mp-colors-dark-200);\n --mp-colors-border-bold: var(--mp-colors-dark-600);\n --mp-colors-border-disabled: var(--mp-colors-dark-200a);\n --mp-colors-border-form: var(--mp-colors-dark-300a);\n --mp-colors-border-focused: var(--mp-colors-indigo-300);\n --mp-colors-border-inverse: var(--mp-colors-dark-100);\n --mp-colors-border-selected: var(--mp-colors-indigo-400);\n --mp-colors-border-selected-hovered: var(--mp-colors-indigo-300);\n --mp-colors-border-selected-disabled: var(--mp-colors-indigo-900);\n --mp-colors-border-brand: var(--mp-colors-indigo-400);\n --mp-colors-border-danger: var(--mp-colors-red-400);\n --mp-colors-border-warning: var(--mp-colors-yellow-300);\n --mp-colors-border-success: var(--mp-colors-green-400);\n --mp-colors-border-highlight: var(--mp-colors-violet-400);\n --mp-colors-border-information: var(--mp-colors-indigo-400);\n --mp-colors-chart-cat01: var(--mp-colors-blue-300);\n --mp-colors-chart-cat01-bold: var(--mp-colors-blue-500);\n --mp-colors-chart-cat02: var(--mp-colors-teal-300);\n --mp-colors-chart-cat02-bold: var(--mp-colors-teal-500);\n --mp-colors-chart-cat03: var(--mp-colors-violet-300);\n --mp-colors-chart-cat03-bold: var(--mp-colors-violet-500);\n --mp-colors-chart-cat04: var(--mp-colors-orange-300);\n --mp-colors-chart-cat04-bold: var(--mp-colors-orange-500);\n --mp-colors-chart-cat05: var(--mp-colors-neutral-300);\n --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-500);\n --mp-colors-chart-cat06: var(--mp-colors-red-300);\n --mp-colors-chart-cat06-bold: var(--mp-colors-red-500);\n --mp-colors-chart-cat07: var(--mp-colors-lime-300);\n --mp-colors-chart-cat07-bold: var(--mp-colors-lime-500);\n --mp-colors-chart-cat08: var(--mp-colors-fuchsia-300);\n --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-500)\n }\n\n[data-panda-theme=next][data-product-theme=enterprise] {\n --mp-colors-background-surface: var(--mp-colors-slate-100);\n --mp-colors-background-surface-bold: var(--mp-colors-emerald-1000);\n --mp-colors-background-information: var(--mp-colors-indigo-100);\n --mp-colors-background-information-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-stage: var(--mp-colors-white);\n --mp-colors-background-overlay: #222222CC;\n --mp-colors-background-disabled: var(--mp-colors-slate-100);\n --mp-colors-background-inverse: var(--mp-colors-dark-100);\n --mp-colors-background-shadow: #1D1F2429;\n --mp-colors-background-neutral: var(--mp-colors-white);\n --mp-colors-background-neutral-hovered: var(--mp-colors-slate-100);\n --mp-colors-background-neutral-pressed: var(--mp-colors-slate-200);\n --mp-colors-background-neutral-selected: var(--mp-colors-neutral-100);\n --mp-colors-background-neutral-subtle: var(--mp-colors-slate-200);\n --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-slate-300);\n --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-slate-400);\n --mp-colors-background-neutral-subtle-selected: var(--mp-colors-slate-300);\n --mp-colors-background-neutral-bold: var(--mp-colors-slate-800);\n --mp-colors-background-neutral-bold-hovered: var(--mp-colors-slate-900);\n --mp-colors-background-neutral-bold-pressed: var(--mp-colors-slate-1000);\n --mp-colors-background-neutral-bold-selected: var(--mp-colors-neutral-900);\n --mp-colors-background-brand: var(--mp-colors-emerald-100);\n --mp-colors-background-brand-hovered: var(--mp-colors-emerald-200);\n --mp-colors-background-brand-pressed: var(--mp-colors-emerald-300);\n --mp-colors-background-brand-selected: var(--mp-colors-emerald-200);\n --mp-colors-background-brand-bold: var(--mp-colors-emerald-700);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-emerald-800);\n --mp-colors-background-brand-bold-pressed: var(--mp-colors-emerald-900);\n --mp-colors-background-brand-bold-selected: var(--mp-colors-emerald-800);\n --mp-colors-background-brand-bold-selected-disabled: var(--mp-colors-emerald-200);\n --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-danger: var(--mp-colors-red-100);\n --mp-colors-background-danger-hovered: var(--mp-colors-red-200);\n --mp-colors-background-danger-pressed: var(--mp-colors-red-300);\n --mp-colors-background-danger-selected: var(--mp-colors-red-200);\n --mp-colors-background-danger-bold: var(--mp-colors-red-700);\n --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-800);\n --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-900);\n --mp-colors-background-danger-bold-selected: var(--mp-colors-red-800);\n --mp-colors-background-warning: var(--mp-colors-yellow-100);\n --mp-colors-background-warning-hovered: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-pressed: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-selected: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n --mp-colors-background-warning-bold-selected: var(--mp-colors-yellow-400);\n --mp-colors-background-success: var(--mp-colors-green-100);\n --mp-colors-background-success-hovered: var(--mp-colors-green-200);\n --mp-colors-background-success-pressed: var(--mp-colors-green-300);\n --mp-colors-background-success-selected: var(--mp-colors-green-200);\n --mp-colors-background-success-bold: var(--mp-colors-green-700);\n --mp-colors-background-success-bold-hovered: var(--mp-colors-green-800);\n --mp-colors-background-success-bold-pressed: var(--mp-colors-green-900);\n --mp-colors-background-success-bold-selected: var(--mp-colors-green-800);\n --mp-colors-background-highlight: var(--mp-colors-violet-100);\n --mp-colors-background-highlight-hovered: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-pressed: var(--mp-colors-violet-300);\n --mp-colors-background-highlight-selected: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-bold: var(--mp-colors-violet-700);\n --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-800);\n --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-900);\n --mp-colors-background-highlight-bold-selected: var(--mp-colors-violet-800);\n --mp-colors-background-header: var(--mp-colors-white);\n --mp-colors-background-header-menu-hovered: #265C5880;\n --mp-colors-background-header-menu-selected: var(--mp-colors-lime-300);\n --mp-colors-background-airene: radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%);\n --mp-colors-nav-parent: var(--mp-colors-emerald-1000);\n --mp-colors-nav-stack: var(--mp-colors-neutral-100);\n --mp-colors-nav-stack-hovered: var(--mp-colors-emerald-200);\n --mp-colors-text-default: var(--mp-colors-slate-1000);\n --mp-colors-text-default-static: var(--mp-colors-slate-1000);\n --mp-colors-text-secondary: var(--mp-colors-slate-700);\n --mp-colors-text-secondary-pressed: var(--mp-colors-neutral-800);\n --mp-colors-text-placeholder: var(--mp-colors-slate-600);\n --mp-colors-text-disabled: var(--mp-colors-slate-400);\n --mp-colors-text-inverse: var(--mp-colors-white);\n --mp-colors-text-inverse-static: var(--mp-colors-white);\n --mp-colors-text-selected: var(--mp-colors-emerald-700);\n --mp-colors-text-danger: var(--mp-colors-red-800);\n --mp-colors-text-danger-pressed: var(--mp-colors-red-900);\n --mp-colors-text-warning: var(--mp-colors-orange-800);\n --mp-colors-text-warning-inverse: var(--mp-colors-slate-1000);\n --mp-colors-text-success: var(--mp-colors-green-800);\n --mp-colors-text-highlight: var(--mp-colors-violet-800);\n --mp-colors-text-information: var(--mp-colors-emerald-800);\n --mp-colors-text-link: var(--mp-colors-emerald-700);\n --mp-colors-text-link-pressed: var(--mp-colors-emerald-800);\n --mp-colors-icon-default: var(--mp-colors-slate-600);\n --mp-colors-icon-disabled: var(--mp-colors-neutral-400);\n --mp-colors-icon-inverse: var(--mp-colors-white);\n --mp-colors-icon-inverse-static: var(--mp-colors-white);\n --mp-colors-icon-selected: var(--mp-colors-emerald-700);\n --mp-colors-icon-brand: var(--mp-colors-emerald-700);\n --mp-colors-icon-danger: var(--mp-colors-red-700);\n --mp-colors-icon-warning: var(--mp-colors-orange-700);\n --mp-colors-icon-warning-inverse: var(--mp-colors-slate-1000);\n --mp-colors-icon-success: var(--mp-colors-green-700);\n --mp-colors-icon-highlight: var(--mp-colors-violet-700);\n --mp-colors-icon-information: var(--mp-colors-emerald-700);\n --mp-colors-icon-subtle: var(--mp-colors-slate-300);\n --mp-colors-icon-logo: var(--mp-colors-slate-1000);\n --mp-colors-border-default: var(--mp-colors-slate-300);\n --mp-colors-border-subtle: var(--mp-colors-slate-200);\n --mp-colors-border-bold: var(--mp-colors-slate-600);\n --mp-colors-border-disabled: var(--mp-colors-slate-200);\n --mp-colors-border-form: var(--mp-colors-slate-300a);\n --mp-colors-border-focused: var(--mp-colors-emerald-500);\n --mp-colors-border-inverse: var(--mp-colors-white);\n --mp-colors-border-selected: var(--mp-colors-emerald-700);\n --mp-colors-border-selected-hovered: var(--mp-colors-emerald-800);\n --mp-colors-border-selected-disabled: var(--mp-colors-emerald-200);\n --mp-colors-border-brand: var(--mp-colors-emerald-700);\n --mp-colors-border-danger: var(--mp-colors-red-700);\n --mp-colors-border-warning: var(--mp-colors-yellow-300);\n --mp-colors-border-success: var(--mp-colors-green-700);\n --mp-colors-border-highlight: var(--mp-colors-violet-700);\n --mp-colors-border-information: var(--mp-colors-emerald-700);\n --mp-colors-chart-cat01: var(--mp-colors-blue-400);\n --mp-colors-chart-cat01-bold: var(--mp-colors-blue-600);\n --mp-colors-chart-cat02: var(--mp-colors-teal-400);\n --mp-colors-chart-cat02-bold: var(--mp-colors-teal-600);\n --mp-colors-chart-cat03: var(--mp-colors-violet-400);\n --mp-colors-chart-cat03-bold: var(--mp-colors-violet-600);\n --mp-colors-chart-cat04: var(--mp-colors-orange-400);\n --mp-colors-chart-cat04-bold: var(--mp-colors-orange-600);\n --mp-colors-chart-cat05: var(--mp-colors-neutral-400);\n --mp-colors-chart-cat05-bold: var(--mp-colors-slate-600);\n --mp-colors-chart-cat06: var(--mp-colors-red-400);\n --mp-colors-chart-cat06-bold: var(--mp-colors-red-600);\n --mp-colors-chart-cat07: var(--mp-colors-lime-400);\n --mp-colors-chart-cat07-bold: var(--mp-colors-lime-600);\n --mp-colors-chart-cat08: var(--mp-colors-fuchsia-400);\n --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-600)\n }"
|
|
4
|
+
"css": "[data-panda-theme=next] {\n --mp-border-widths-none: none;\n --mp-border-widths-sm: 1px;\n --mp-border-widths-md: 1.5px;\n --mp-border-widths-lg: 2px;\n --mp-border-widths-xl: 3px;\n --mp-border-widths-2xl: 4px;\n --mp-colors-debug: red;\n --mp-colors-currentcolor: currentcolor;\n --mp-colors-transparent: #FFFFFF00;\n --mp-colors-white: #FFFFFF;\n --mp-colors-vibrant-purple: linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%);\n --mp-colors-light-purple: radial-gradient(108.28% 139.29% at 0% 0%, var(--mp-colors-background-brand) 0%, var(--mp-colors-background-highlight) 100%);\n --mp-colors-dark-100: #1D2125;\n --mp-colors-dark-200: #22272B;\n --mp-colors-dark-250: #282E33;\n --mp-colors-dark-300: #2C333A;\n --mp-colors-dark-350: #38414A;\n --mp-colors-dark-400: #454F59;\n --mp-colors-dark-500: #596773;\n --mp-colors-dark-600: #738496;\n --mp-colors-dark-700: #8C9BAB;\n --mp-colors-dark-800: #9FADBC;\n --mp-colors-dark-900: #B6C2CF;\n --mp-colors-dark-1000: #C7D1DB;\n --mp-colors-dark--100: #101214;\n --mp-colors-dark: #161A1D;\n --mp-colors-dark-100a: #bcd6f00a;\n --mp-colors-dark-200a: #a1bdd914;\n --mp-colors-dark-250a: #c8e1f91f;\n --mp-colors-dark-300a: #a6c5e229;\n --mp-colors-dark-350a: #c3defe33;\n --mp-colors-dark-400a: #bfdbf847;\n --mp-colors-dark-500a: #9bb4ca85;\n --mp-colors-neutral-100: #F7F8F9;\n --mp-colors-neutral-200: #F0F1F3;\n --mp-colors-neutral-300: #DCDFE4;\n --mp-colors-neutral-400: #B2B9C4;\n --mp-colors-neutral-500: #8690A2;\n --mp-colors-neutral-600: #758195;\n --mp-colors-neutral-700: #656F80;\n --mp-colors-neutral-800: #4C5460;\n --mp-colors-neutral-900: #383E48;\n --mp-colors-neutral-1000: #272B32;\n --mp-colors-neutral-100a: #1d1f240a;\n --mp-colors-neutral-200a: #1d1f2414;\n --mp-colors-neutral-300a: #1d1f2429;\n --mp-colors-neutral-400a: #1d1f2452;\n --mp-colors-neutral-500a: #1d1f247a;\n --mp-colors-slate-100: #F8F9F9;\n --mp-colors-slate-200: #EBF0F1;\n --mp-colors-slate-300: #E3E7E9;\n --mp-colors-slate-400: #8C9596;\n --mp-colors-slate-500: #6E7A7C;\n --mp-colors-slate-600: #536062;\n --mp-colors-slate-700: #3A4749;\n --mp-colors-slate-800: #243032;\n --mp-colors-slate-900: #121C1E;\n --mp-colors-slate-1000: #080D0E;\n --mp-colors-slate-100a: #1d1f240a;\n --mp-colors-slate-200a: #1d1f2414;\n --mp-colors-slate-300a: #1d1f2429;\n --mp-colors-slate-400a: #1d1f2452;\n --mp-colors-slate-500a: #1d1f247a;\n --mp-colors-blue-100: #ECF3FE;\n --mp-colors-blue-200: #CEE0FD;\n --mp-colors-blue-300: #8EB7FA;\n --mp-colors-blue-400: #649CF8;\n --mp-colors-blue-500: #488BF7;\n --mp-colors-blue-600: #387CEB;\n --mp-colors-blue-700: #306AC8;\n --mp-colors-blue-800: #295AAA;\n --mp-colors-blue-900: #173361;\n --mp-colors-blue-1000: #132A4F;\n --mp-colors-indigo-100: #EEF0FC;\n --mp-colors-indigo-200: #D6DBF7;\n --mp-colors-indigo-300: #A8B2EF;\n --mp-colors-indigo-400: #8997E9;\n --mp-colors-indigo-500: #7586E5;\n --mp-colors-indigo-600: #6577E2;\n --mp-colors-indigo-700: #4B61DC;\n --mp-colors-indigo-800: #4053BC;\n --mp-colors-indigo-900: #242F6A;\n --mp-colors-indigo-1000: #1D2656;\n --mp-colors-violet-100: #F3F1FC;\n --mp-colors-violet-200: #DEDAF6;\n --mp-colors-violet-300: #B8AEEB;\n --mp-colors-violet-400: #9F91E3;\n --mp-colors-violet-500: #8F7FDF;\n --mp-colors-violet-600: #8270DB;\n --mp-colors-violet-700: #6F5FBA;\n --mp-colors-violet-800: #5F519F;\n --mp-colors-violet-900: #352E5A;\n --mp-colors-violet-1000: #2B2549;\n --mp-colors-fuchsia-100: #FBEEFE;\n --mp-colors-fuchsia-200: #F6D1FB;\n --mp-colors-fuchsia-300: #EA98F6;\n --mp-colors-fuchsia-400: #E16CF2;\n --mp-colors-fuchsia-500: #DA4DF0;\n --mp-colors-fuchsia-600: #C841DC;\n --mp-colors-fuchsia-700: #AC37BD;\n --mp-colors-fuchsia-800: #932FA2;\n --mp-colors-fuchsia-900: #531B5C;\n --mp-colors-fuchsia-1000: #45164C;\n --mp-colors-red-100: #FCEEED;\n --mp-colors-red-200: #F9D7D5;\n --mp-colors-red-300: #F09E99;\n --mp-colors-red-400: #EA7A72;\n --mp-colors-red-500: #E6645B;\n --mp-colors-red-600: #E2483D;\n --mp-colors-red-700: #C33E35;\n --mp-colors-red-800: #A8352D;\n --mp-colors-red-900: #5E1E19;\n --mp-colors-red-1000: #4E1915;\n --mp-colors-orange-100: #FDF3EC;\n --mp-colors-orange-200: #F9DECB;\n --mp-colors-orange-300: #F5C39F;\n --mp-colors-orange-400: #F0A875;\n --mp-colors-orange-500: #EB8E4B;\n --mp-colors-orange-600: #E46910;\n --mp-colors-orange-700: #BC560D;\n --mp-colors-orange-800: #A14A0B;\n --mp-colors-orange-900: #6B3108;\n --mp-colors-orange-1000: #492105;\n --mp-colors-yellow-100: #FDF6DD;\n --mp-colors-yellow-200: #F9E399;\n --mp-colors-yellow-300: #F5CD47;\n --mp-colors-yellow-400: #D8B53F;\n --mp-colors-yellow-500: #C2A338;\n --mp-colors-yellow-600: #A68A30;\n --mp-colors-yellow-700: #897228;\n --mp-colors-yellow-800: #766222;\n --mp-colors-yellow-900: #4D4016;\n --mp-colors-yellow-1000: #362D10;\n --mp-colors-lime-100: #F4FAEA;\n --mp-colors-lime-200: #D8EFB5;\n --mp-colors-lime-300: #B1DF6B;\n --mp-colors-lime-400: #83CA16;\n --mp-colors-lime-500: #77B814;\n --mp-colors-lime-600: #649B11;\n --mp-colors-lime-700: #53800E;\n --mp-colors-lime-800: #466C0C;\n --mp-colors-lime-900: #304A08;\n --mp-colors-lime-1000: #213306;\n --mp-colors-green-100: #F2F9F6;\n --mp-colors-green-200: #D2EBE1;\n --mp-colors-green-300: #A7D9C4;\n --mp-colors-green-400: #7DC7A8;\n --mp-colors-green-500: #56B78E;\n --mp-colors-green-600: #23A06B;\n --mp-colors-green-700: #1C8459;\n --mp-colors-green-800: #186F4A;\n --mp-colors-green-900: #104B32;\n --mp-colors-green-1000: #0B3524;\n --mp-colors-teal-100: #EAF9F7;\n --mp-colors-teal-200: #C4EDE9;\n --mp-colors-teal-300: #92DED6;\n --mp-colors-teal-400: #4FCABC;\n --mp-colors-teal-500: #19B9A8;\n --mp-colors-teal-600: #119E8F;\n --mp-colors-teal-700: #0E8275;\n --mp-colors-teal-800: #0C6E63;\n --mp-colors-teal-900: #084841;\n --mp-colors-teal-1000: #06342F;\n --mp-colors-emerald-100: #F0FBF7;\n --mp-colors-emerald-200: #D6F4E9;\n --mp-colors-emerald-300: #B7E9D8;\n --mp-colors-emerald-400: #7EDAC0;\n --mp-colors-emerald-500: #41C6A0;\n --mp-colors-emerald-600: #1FB088;\n --mp-colors-emerald-700: #029861;\n --mp-colors-emerald-800: #0F6D4D;\n --mp-colors-emerald-900: #0E4F3A;\n --mp-colors-emerald-1000: #142D26;\n --mp-colors-brand-capital: #2F5573;\n --mp-colors-brand-esign: #00C853;\n --mp-colors-brand-expense: #183883;\n --mp-colors-brand-flex: #7C4DFF;\n --mp-colors-brand-jurnal: #40C3FF;\n --mp-colors-brand-klikpajak: #FF9100;\n --mp-colors-brand-mekari: #651FFF;\n --mp-colors-brand-qontak: #2979FF;\n --mp-colors-brand-talenta: #F22929;\n --mp-colors-brand-university: #448AFF;\n --mp-durations-slow: 100ms;\n --mp-durations-normal: 250ms;\n --mp-durations-fast: 300ms;\n --mp-fonts-body: \"Inter\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n --mp-fonts-mono: SFMono-Regular, Menlo, Monaco,Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --mp-font-sizes-xs: 0.625rem;\n --mp-font-sizes-sm: 0.75rem;\n --mp-font-sizes-md: 0.875rem;\n --mp-font-sizes-lg: 1rem;\n --mp-font-sizes-xl: 1.25rem;\n --mp-font-sizes-2xl: 1.5rem;\n --mp-font-weights-regular: 400;\n --mp-font-weights-semi-bold: 600;\n --mp-font-weights-bold: 800;\n --mp-line-heights-xs: 1.2;\n --mp-line-heights-sm: 1.34;\n --mp-line-heights-md: 1.43;\n --mp-line-heights-lg: 1.429;\n --mp-line-heights-xl: 1.5;\n --mp-line-heights-2xl: 1.67;\n --mp-line-heights-3xl: 1.71;\n --mp-letter-spacings-tighter: -0.05em;\n --mp-letter-spacings-tight: -0.025em;\n --mp-letter-spacings-normal: 0;\n --mp-letter-spacings-wide: 0.025em;\n --mp-letter-spacings-wider: 0.05em;\n --mp-letter-spacings-widest: 0.1em;\n --mp-opacity-0: 0;\n --mp-opacity-40: 0.4;\n --mp-opacity-60: 0.6;\n --mp-opacity-100: 1;\n --mp-radii-none: 0;\n --mp-radii-sm: 0.25rem;\n --mp-radii-md: 0.375rem;\n --mp-radii-lg: 0.5rem;\n --mp-radii-xl: 0.75rem;\n --mp-radii-full: 999px;\n --mp-shadows-xs: 0px 2px 4px 0px var(--mp-colors-background-shadow), 0px 0px 2px 0px var(--mp-colors-background-shadow);\n --mp-shadows-sm: 0px 10px 15px -3px var(--mp-colors-background-shadow), 0px 4px 6px -2px var(--mp-colors-background-shadow);\n --mp-shadows-md: 0px 20px 25px -5px var(--mp-colors-background-shadow), 0px 10px 10px -5px var(--mp-colors-background-shadow);\n --mp-shadows-lg: 0px 25px 30px -10px var(--mp-colors-background-shadow), 0px 15px 15px -10px var(--mp-colors-background-shadow);\n --mp-shadows-focus: 0 0 0 1px var(--mp-colors-border-focused);\n --mp-shadows-outline: 0 0 0 3px #E0EEFF;\n --mp-shadows-outer: 0 0 0 3px rgba(224, 238, 255, 1);\n --mp-shadows-none: none;\n --mp-sizes-0: 0;\n --mp-sizes-1: 0.25rem;\n --mp-sizes-2: 0.5rem;\n --mp-sizes-3: 0.75rem;\n --mp-sizes-4: 1rem;\n --mp-sizes-5: 1.25rem;\n --mp-sizes-6: 1.5rem;\n --mp-sizes-7: 1.75rem;\n --mp-sizes-8: 2rem;\n --mp-sizes-9: 2.25rem;\n --mp-sizes-10: 2.5rem;\n --mp-sizes-11: 2.75rem;\n --mp-sizes-12: 3rem;\n --mp-sizes-16: 4rem;\n --mp-sizes-20: 5rem;\n --mp-sizes-22: 5.5rem;\n --mp-sizes-56: 14rem;\n --mp-sizes-65: 17.5rem;\n --mp-sizes-0\\.25: 0.0625rem;\n --mp-sizes-0\\.5: 0.125rem;\n --mp-sizes-2\\.5: 0.625rem;\n --mp-sizes-7\\.5: 1.875rem;\n --mp-sizes-9\\.5: 2.375rem;\n --mp-sizes-full: 100%;\n --mp-sizes-sm: 24rem;\n --mp-spacing-0: 0;\n --mp-spacing-1: 0.25rem;\n --mp-spacing-2: 0.5rem;\n --mp-spacing-3: 0.75rem;\n --mp-spacing-4: 1rem;\n --mp-spacing-5: 1.3rem;\n --mp-spacing-6: 1.5rem;\n --mp-spacing-8: 2rem;\n --mp-spacing-10: 2.5rem;\n --mp-spacing-20: 5rem;\n --mp-spacing-0\\.5: 0.125rem;\n --mp-spacing-1\\.5: 0.375rem;\n --mp-z-index-hide: -1;\n --mp-z-index-base: 0;\n --mp-z-index-docked: 10;\n --mp-z-index-sticky: 1100;\n --mp-z-index-overlay: 1300;\n --mp-z-index-modal: 1400;\n --mp-z-index-popover: 1500;\n --mp-z-index-tooltip: 1800;\n --mp-colors-background-surface: #F1F5F9;\n --mp-colors-background-surface-bold: var(--mp-colors-neutral-1000);\n --mp-colors-background-information: var(--mp-colors-indigo-100);\n --mp-colors-background-information-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-stage: var(--mp-colors-white);\n --mp-colors-background-overlay: #232933CC;\n --mp-colors-background-disabled: var(--mp-colors-neutral-100a);\n --mp-colors-background-inverse: var(--mp-colors-dark-100);\n --mp-colors-background-shadow: #1D1F2429;\n --mp-colors-background-neutral: var(--mp-colors-white);\n --mp-colors-background-neutral-hovered: var(--mp-colors-neutral-100);\n --mp-colors-background-neutral-pressed: var(--mp-colors-neutral-200);\n --mp-colors-background-neutral-selected: var(--mp-colors-neutral-100);\n --mp-colors-background-neutral-subtle: var(--mp-colors-neutral-200);\n --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-neutral-300);\n --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-neutral-400);\n --mp-colors-background-neutral-subtle-selected: var(--mp-colors-neutral-300);\n --mp-colors-background-neutral-bold: var(--mp-colors-neutral-800);\n --mp-colors-background-neutral-bold-hovered: var(--mp-colors-neutral-900);\n --mp-colors-background-neutral-bold-pressed: var(--mp-colors-neutral-1000);\n --mp-colors-background-neutral-bold-selected: var(--mp-colors-neutral-900);\n --mp-colors-background-brand: var(--mp-colors-indigo-100);\n --mp-colors-background-brand-hovered: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-pressed: var(--mp-colors-indigo-300);\n --mp-colors-background-brand-selected: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-900);\n --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-bold-selected-disabled: var(--mp-colors-indigo-200);\n --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-danger: var(--mp-colors-red-100);\n --mp-colors-background-danger-hovered: var(--mp-colors-red-200);\n --mp-colors-background-danger-pressed: var(--mp-colors-red-300);\n --mp-colors-background-danger-selected: var(--mp-colors-red-200);\n --mp-colors-background-danger-bold: var(--mp-colors-red-700);\n --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-800);\n --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-900);\n --mp-colors-background-danger-bold-selected: var(--mp-colors-red-800);\n --mp-colors-background-warning: var(--mp-colors-yellow-100);\n --mp-colors-background-warning-hovered: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-pressed: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-selected: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n --mp-colors-background-warning-bold-selected: var(--mp-colors-yellow-400);\n --mp-colors-background-success: var(--mp-colors-green-100);\n --mp-colors-background-success-hovered: var(--mp-colors-green-200);\n --mp-colors-background-success-pressed: var(--mp-colors-green-300);\n --mp-colors-background-success-selected: var(--mp-colors-green-200);\n --mp-colors-background-success-bold: var(--mp-colors-green-700);\n --mp-colors-background-success-bold-hovered: var(--mp-colors-green-800);\n --mp-colors-background-success-bold-pressed: var(--mp-colors-green-900);\n --mp-colors-background-success-bold-selected: var(--mp-colors-green-800);\n --mp-colors-background-highlight: var(--mp-colors-violet-100);\n --mp-colors-background-highlight-hovered: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-pressed: var(--mp-colors-violet-300);\n --mp-colors-background-highlight-selected: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-bold: var(--mp-colors-violet-700);\n --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-800);\n --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-900);\n --mp-colors-background-highlight-bold-selected: var(--mp-colors-violet-800);\n --mp-colors-background-nav-parent: #E7EDF5;\n --mp-colors-background-nav-stack: var(--mp-colors-neutral-100);\n --mp-colors-background-nav-stack-hovered: #E7EDF5;\n --mp-colors-background-header: var(--mp-colors-white);\n --mp-colors-background-header-menu-hovered: var(--mp-colors-transparent);\n --mp-colors-background-header-menu-selected: var(--mp-colors-transparent);\n --mp-colors-background-airene: radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%);\n --mp-colors-nav-parent: #E7EDF5;\n --mp-colors-nav-stack: var(--mp-colors-neutral-100);\n --mp-colors-nav-stack-hovered: #E7EDF5;\n --mp-colors-text-default: var(--mp-colors-neutral-1000);\n --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n --mp-colors-text-secondary: var(--mp-colors-neutral-700);\n --mp-colors-text-secondary-pressed: var(--mp-colors-neutral-800);\n --mp-colors-text-placeholder: var(--mp-colors-neutral-600);\n --mp-colors-text-disabled: var(--mp-colors-neutral-400a);\n --mp-colors-text-inverse: var(--mp-colors-white);\n --mp-colors-text-inverse-static: var(--mp-colors-white);\n --mp-colors-text-selected: var(--mp-colors-indigo-700);\n --mp-colors-text-danger: var(--mp-colors-red-800);\n --mp-colors-text-danger-pressed: var(--mp-colors-red-900);\n --mp-colors-text-warning: var(--mp-colors-orange-800);\n --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-text-success: var(--mp-colors-green-800);\n --mp-colors-text-highlight: var(--mp-colors-violet-800);\n --mp-colors-text-information: var(--mp-colors-indigo-800);\n --mp-colors-text-link: var(--mp-colors-indigo-700);\n --mp-colors-text-link-pressed: var(--mp-colors-indigo-800);\n --mp-colors-icon-default: var(--mp-colors-neutral-600);\n --mp-colors-icon-disabled: var(--mp-colors-neutral-400);\n --mp-colors-icon-inverse: var(--mp-colors-white);\n --mp-colors-icon-inverse-static: var(--mp-colors-white);\n --mp-colors-icon-selected: var(--mp-colors-indigo-700);\n --mp-colors-icon-brand: var(--mp-colors-indigo-700);\n --mp-colors-icon-danger: var(--mp-colors-red-700);\n --mp-colors-icon-warning: var(--mp-colors-orange-700);\n --mp-colors-icon-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-icon-success: var(--mp-colors-green-700);\n --mp-colors-icon-highlight: var(--mp-colors-violet-700);\n --mp-colors-icon-information: var(--mp-colors-indigo-700);\n --mp-colors-icon-subtle: var(--mp-colors-neutral-300);\n --mp-colors-icon-logo: #000000;\n --mp-colors-border-default: var(--mp-colors-neutral-300);\n --mp-colors-border-default-subtle: var(--mp-colors-neutral-200);\n --mp-colors-border-bold: var(--mp-colors-neutral-600);\n --mp-colors-border-disabled: var(--mp-colors-neutral-200a);\n --mp-colors-border-form: var(--mp-colors-neutral-300a);\n --mp-colors-border-focused: var(--mp-colors-indigo-500);\n --mp-colors-border-inverse: var(--mp-colors-white);\n --mp-colors-border-selected: var(--mp-colors-indigo-700);\n --mp-colors-border-selected-hovered: var(--mp-colors-indigo-800);\n --mp-colors-border-selected-disabled: var(--mp-colors-indigo-200);\n --mp-colors-border-brand: var(--mp-colors-indigo-700);\n --mp-colors-border-danger: var(--mp-colors-red-700);\n --mp-colors-border-warning: var(--mp-colors-yellow-300);\n --mp-colors-border-success: var(--mp-colors-green-700);\n --mp-colors-border-highlight: var(--mp-colors-violet-700);\n --mp-colors-border-information: var(--mp-colors-indigo-700);\n --mp-colors-chart-cat01: var(--mp-colors-blue-400);\n --mp-colors-chart-cat01-bold: var(--mp-colors-blue-600);\n --mp-colors-chart-cat02: var(--mp-colors-teal-400);\n --mp-colors-chart-cat02-bold: var(--mp-colors-teal-600);\n --mp-colors-chart-cat03: var(--mp-colors-violet-400);\n --mp-colors-chart-cat03-bold: var(--mp-colors-violet-600);\n --mp-colors-chart-cat04: var(--mp-colors-orange-400);\n --mp-colors-chart-cat04-bold: var(--mp-colors-orange-600);\n --mp-colors-chart-cat05: var(--mp-colors-neutral-400);\n --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-600);\n --mp-colors-chart-cat06: var(--mp-colors-red-400);\n --mp-colors-chart-cat06-bold: var(--mp-colors-red-600);\n --mp-colors-chart-cat07: var(--mp-colors-lime-400);\n --mp-colors-chart-cat07-bold: var(--mp-colors-lime-600);\n --mp-colors-chart-cat08: var(--mp-colors-fuchsia-400);\n --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-600);\n --mp-spacing-4xs: 0.125rem;\n --mp-spacing-3xs: var(--mp-spacing-1);\n --mp-spacing-2xs: 0.375rem;\n --mp-spacing-xs: var(--mp-spacing-2);\n --mp-spacing-sm: var(--mp-spacing-3);\n --mp-spacing-md: var(--mp-spacing-4);\n --mp-spacing-lg: var(--mp-spacing-5);\n --mp-spacing-xl: var(--mp-spacing-6);\n --mp-spacing-2xl: var(--mp-spacing-8);\n --mp-spacing-3xl: var(--mp-spacing-10);\n --mp-spacing-4xl: var(--mp-spacing-20)\n}\n\n[data-panda-theme=next].light {\n --mp-colors-background-surface: #F1F5F9;\n --mp-colors-background-surface-bold: var(--mp-colors-neutral-1000);\n --mp-colors-background-information: var(--mp-colors-indigo-100);\n --mp-colors-background-information-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-stage: var(--mp-colors-white);\n --mp-colors-background-overlay: #232933CC;\n --mp-colors-background-disabled: var(--mp-colors-neutral-100a);\n --mp-colors-background-inverse: var(--mp-colors-dark-100);\n --mp-colors-background-shadow: #1D1F2429;\n --mp-colors-background-neutral: var(--mp-colors-white);\n --mp-colors-background-neutral-hovered: var(--mp-colors-neutral-100);\n --mp-colors-background-neutral-pressed: var(--mp-colors-neutral-200);\n --mp-colors-background-neutral-selected: var(--mp-colors-neutral-100);\n --mp-colors-background-neutral-subtle: var(--mp-colors-neutral-200);\n --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-neutral-300);\n --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-neutral-400);\n --mp-colors-background-neutral-subtle-selected: var(--mp-colors-neutral-300);\n --mp-colors-background-neutral-bold: var(--mp-colors-neutral-800);\n --mp-colors-background-neutral-bold-hovered: var(--mp-colors-neutral-900);\n --mp-colors-background-neutral-bold-pressed: var(--mp-colors-neutral-1000);\n --mp-colors-background-neutral-bold-selected: var(--mp-colors-neutral-900);\n --mp-colors-background-brand: var(--mp-colors-indigo-100);\n --mp-colors-background-brand-hovered: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-pressed: var(--mp-colors-indigo-300);\n --mp-colors-background-brand-selected: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-900);\n --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-bold-selected-disabled: var(--mp-colors-indigo-200);\n --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-danger: var(--mp-colors-red-100);\n --mp-colors-background-danger-hovered: var(--mp-colors-red-200);\n --mp-colors-background-danger-pressed: var(--mp-colors-red-300);\n --mp-colors-background-danger-selected: var(--mp-colors-red-200);\n --mp-colors-background-danger-bold: var(--mp-colors-red-700);\n --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-800);\n --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-900);\n --mp-colors-background-danger-bold-selected: var(--mp-colors-red-800);\n --mp-colors-background-warning: var(--mp-colors-yellow-100);\n --mp-colors-background-warning-hovered: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-pressed: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-selected: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n --mp-colors-background-warning-bold-selected: var(--mp-colors-yellow-400);\n --mp-colors-background-success: var(--mp-colors-green-100);\n --mp-colors-background-success-hovered: var(--mp-colors-green-200);\n --mp-colors-background-success-pressed: var(--mp-colors-green-300);\n --mp-colors-background-success-selected: var(--mp-colors-green-200);\n --mp-colors-background-success-bold: var(--mp-colors-green-700);\n --mp-colors-background-success-bold-hovered: var(--mp-colors-green-800);\n --mp-colors-background-success-bold-pressed: var(--mp-colors-green-900);\n --mp-colors-background-success-bold-selected: var(--mp-colors-green-800);\n --mp-colors-background-highlight: var(--mp-colors-violet-100);\n --mp-colors-background-highlight-hovered: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-pressed: var(--mp-colors-violet-300);\n --mp-colors-background-highlight-selected: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-bold: var(--mp-colors-violet-700);\n --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-800);\n --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-900);\n --mp-colors-background-highlight-bold-selected: var(--mp-colors-violet-800);\n --mp-colors-background-nav-parent: #E7EDF5;\n --mp-colors-background-nav-stack: var(--mp-colors-neutral-100);\n --mp-colors-background-nav-stack-hovered: #E7EDF5;\n --mp-colors-background-header: var(--mp-colors-white);\n --mp-colors-background-header-menu-hovered: var(--mp-colors-transparent);\n --mp-colors-background-header-menu-selected: var(--mp-colors-transparent);\n --mp-colors-background-airene: radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%);\n --mp-colors-nav-parent: #E7EDF5;\n --mp-colors-nav-stack: var(--mp-colors-neutral-100);\n --mp-colors-nav-stack-hovered: #E7EDF5;\n --mp-colors-text-default: var(--mp-colors-neutral-1000);\n --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n --mp-colors-text-secondary: var(--mp-colors-neutral-700);\n --mp-colors-text-secondary-pressed: var(--mp-colors-neutral-800);\n --mp-colors-text-placeholder: var(--mp-colors-neutral-600);\n --mp-colors-text-disabled: var(--mp-colors-neutral-400a);\n --mp-colors-text-inverse: var(--mp-colors-white);\n --mp-colors-text-inverse-static: var(--mp-colors-white);\n --mp-colors-text-selected: var(--mp-colors-indigo-700);\n --mp-colors-text-danger: var(--mp-colors-red-800);\n --mp-colors-text-danger-pressed: var(--mp-colors-red-900);\n --mp-colors-text-warning: var(--mp-colors-orange-800);\n --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-text-success: var(--mp-colors-green-800);\n --mp-colors-text-highlight: var(--mp-colors-violet-800);\n --mp-colors-text-information: var(--mp-colors-indigo-800);\n --mp-colors-text-link: var(--mp-colors-indigo-700);\n --mp-colors-text-link-pressed: var(--mp-colors-indigo-800);\n --mp-colors-icon-default: var(--mp-colors-neutral-600);\n --mp-colors-icon-disabled: var(--mp-colors-neutral-400);\n --mp-colors-icon-inverse: var(--mp-colors-white);\n --mp-colors-icon-inverse-static: var(--mp-colors-white);\n --mp-colors-icon-selected: var(--mp-colors-indigo-700);\n --mp-colors-icon-brand: var(--mp-colors-indigo-700);\n --mp-colors-icon-danger: var(--mp-colors-red-700);\n --mp-colors-icon-warning: var(--mp-colors-orange-700);\n --mp-colors-icon-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-icon-success: var(--mp-colors-green-700);\n --mp-colors-icon-highlight: var(--mp-colors-violet-700);\n --mp-colors-icon-information: var(--mp-colors-indigo-700);\n --mp-colors-icon-subtle: var(--mp-colors-neutral-300);\n --mp-colors-icon-logo: #000000;\n --mp-colors-border-default: var(--mp-colors-neutral-300);\n --mp-colors-border-default-subtle: var(--mp-colors-neutral-200);\n --mp-colors-border-bold: var(--mp-colors-neutral-600);\n --mp-colors-border-disabled: var(--mp-colors-neutral-200a);\n --mp-colors-border-form: var(--mp-colors-neutral-300a);\n --mp-colors-border-focused: var(--mp-colors-indigo-500);\n --mp-colors-border-inverse: var(--mp-colors-white);\n --mp-colors-border-selected: var(--mp-colors-indigo-700);\n --mp-colors-border-selected-hovered: var(--mp-colors-indigo-800);\n --mp-colors-border-selected-disabled: var(--mp-colors-indigo-200);\n --mp-colors-border-brand: var(--mp-colors-indigo-700);\n --mp-colors-border-danger: var(--mp-colors-red-700);\n --mp-colors-border-warning: var(--mp-colors-yellow-300);\n --mp-colors-border-success: var(--mp-colors-green-700);\n --mp-colors-border-highlight: var(--mp-colors-violet-700);\n --mp-colors-border-information: var(--mp-colors-indigo-700);\n --mp-colors-chart-cat01: var(--mp-colors-blue-400);\n --mp-colors-chart-cat01-bold: var(--mp-colors-blue-600);\n --mp-colors-chart-cat02: var(--mp-colors-teal-400);\n --mp-colors-chart-cat02-bold: var(--mp-colors-teal-600);\n --mp-colors-chart-cat03: var(--mp-colors-violet-400);\n --mp-colors-chart-cat03-bold: var(--mp-colors-violet-600);\n --mp-colors-chart-cat04: var(--mp-colors-orange-400);\n --mp-colors-chart-cat04-bold: var(--mp-colors-orange-600);\n --mp-colors-chart-cat05: var(--mp-colors-neutral-400);\n --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-600);\n --mp-colors-chart-cat06: var(--mp-colors-red-400);\n --mp-colors-chart-cat06-bold: var(--mp-colors-red-600);\n --mp-colors-chart-cat07: var(--mp-colors-lime-400);\n --mp-colors-chart-cat07-bold: var(--mp-colors-lime-600);\n --mp-colors-chart-cat08: var(--mp-colors-fuchsia-400);\n --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-600)\n }\n\n[data-panda-theme=next].dark {\n --mp-colors-background-surface: var(--mp-colors-dark);\n --mp-colors-background-surface-bold: var(--mp-colors-neutral-100);\n --mp-colors-background-information: var(--mp-colors-indigo-1000);\n --mp-colors-background-information-bold: var(--mp-colors-indigo-400);\n --mp-colors-background-stage: var(--mp-colors-dark-100);\n --mp-colors-background-overlay: #657F9980;\n --mp-colors-background-disabled: var(--mp-colors-dark-100a);\n --mp-colors-background-inverse: var(--mp-colors-white);\n --mp-colors-background-shadow: var(--mp-colors-dark);\n --mp-colors-background-neutral: var(--mp-colors-dark-200);\n --mp-colors-background-neutral-hovered: var(--mp-colors-dark-250);\n --mp-colors-background-neutral-pressed: var(--mp-colors-dark-300);\n --mp-colors-background-neutral-selected: var(--mp-colors-dark-250);\n --mp-colors-background-neutral-subtle: var(--mp-colors-dark-300);\n --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-dark-350);\n --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-neutral-subtle-selected: var(--mp-colors-dark-350);\n --mp-colors-background-neutral-bold: var(--mp-colors-dark-800);\n --mp-colors-background-neutral-bold-hovered: var(--mp-colors-dark-900);\n --mp-colors-background-neutral-bold-pressed: var(--mp-colors-dark-1000);\n --mp-colors-background-neutral-bold-selected: var(--mp-colors-dark-900);\n --mp-colors-background-brand: var(--mp-colors-indigo-1000);\n --mp-colors-background-brand-hovered: var(--mp-colors-indigo-900);\n --mp-colors-background-brand-pressed: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-selected: var(--mp-colors-indigo-900);\n --mp-colors-background-brand-bold: var(--mp-colors-indigo-400);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-300);\n --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-300);\n --mp-colors-background-brand-bold-selected-disabled: var(--mp-colors-indigo-900);\n --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-danger: var(--mp-colors-red-1000);\n --mp-colors-background-danger-hovered: var(--mp-colors-red-900);\n --mp-colors-background-danger-pressed: var(--mp-colors-red-800);\n --mp-colors-background-danger-selected: var(--mp-colors-red-900);\n --mp-colors-background-danger-bold: var(--mp-colors-red-400);\n --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-300);\n --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-200);\n --mp-colors-background-danger-bold-selected: var(--mp-colors-red-300);\n --mp-colors-background-warning: var(--mp-colors-yellow-1000);\n --mp-colors-background-warning-hovered: var(--mp-colors-yellow-900);\n --mp-colors-background-warning-pressed: var(--mp-colors-yellow-800);\n --mp-colors-background-warning-selected: var(--mp-colors-yellow-900);\n --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n --mp-colors-background-warning-bold-selected: var(--mp-colors-yellow-400);\n --mp-colors-background-success: var(--mp-colors-green-1000);\n --mp-colors-background-success-hovered: var(--mp-colors-green-900);\n --mp-colors-background-success-pressed: var(--mp-colors-green-800);\n --mp-colors-background-success-selected: var(--mp-colors-green-900);\n --mp-colors-background-success-bold: var(--mp-colors-green-400);\n --mp-colors-background-success-bold-hovered: var(--mp-colors-green-300);\n --mp-colors-background-success-bold-pressed: var(--mp-colors-green-200);\n --mp-colors-background-success-bold-selected: var(--mp-colors-green-400);\n --mp-colors-background-highlight: var(--mp-colors-violet-1000);\n --mp-colors-background-highlight-hovered: var(--mp-colors-violet-900);\n --mp-colors-background-highlight-pressed: var(--mp-colors-violet-800);\n --mp-colors-background-highlight-selected: var(--mp-colors-violet-900);\n --mp-colors-background-highlight-bold: var(--mp-colors-violet-400);\n --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-300);\n --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-bold-selected: var(--mp-colors-violet-300);\n --mp-colors-background-nav-parent: var(--mp-colors-dark-100);\n --mp-colors-background-nav-stack: var(--mp-colors-dark);\n --mp-colors-background-nav-stack-hovered: var(--mp-colors-dark-100);\n --mp-colors-background-header: var(--mp-colors-dark-100);\n --mp-colors-background-header-menu-hovered: var(--mp-colors-transparent);\n --mp-colors-background-header-menu-selected: var(--mp-colors-transparent);\n --mp-colors-background-airene: radial-gradient(108.28% 139.29% at 0% 0%, #1D2656 0%, #2B2549 100%);\n --mp-colors-nav-parent: var(--mp-colors-dark-100);\n --mp-colors-nav-stack: var(--mp-colors-dark);\n --mp-colors-nav-stack-hovered: var(--mp-colors-dark-100);\n --mp-colors-text-default: var(--mp-colors-dark-900);\n --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n --mp-colors-text-secondary: var(--mp-colors-dark-700);\n --mp-colors-text-secondary-pressed: var(--mp-colors-dark-800);\n --mp-colors-text-placeholder: var(--mp-colors-dark-600);\n --mp-colors-text-disabled: var(--mp-colors-dark-400a);\n --mp-colors-text-inverse: var(--mp-colors-dark-100);\n --mp-colors-text-inverse-static: var(--mp-colors-white);\n --mp-colors-text-selected: var(--mp-colors-indigo-400);\n --mp-colors-text-danger: var(--mp-colors-red-300);\n --mp-colors-text-danger-pressed: var(--mp-colors-red-200);\n --mp-colors-text-warning: var(--mp-colors-yellow-300);\n --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-text-success: var(--mp-colors-green-300);\n --mp-colors-text-highlight: var(--mp-colors-violet-300);\n --mp-colors-text-information: var(--mp-colors-indigo-300);\n --mp-colors-text-link: var(--mp-colors-indigo-400);\n --mp-colors-text-link-pressed: var(--mp-colors-indigo-300);\n --mp-colors-icon-default: var(--mp-colors-dark-600);\n --mp-colors-icon-disabled: var(--mp-colors-dark-400);\n --mp-colors-icon-inverse: var(--mp-colors-dark-100);\n --mp-colors-icon-inverse-static: var(--mp-colors-white);\n --mp-colors-icon-selected: var(--mp-colors-indigo-400);\n --mp-colors-icon-brand: var(--mp-colors-indigo-400);\n --mp-colors-icon-danger: var(--mp-colors-red-400);\n --mp-colors-icon-warning: var(--mp-colors-yellow-300);\n --mp-colors-icon-warning-inverse: var(--mp-colors-dark-100);\n --mp-colors-icon-success: var(--mp-colors-green-400);\n --mp-colors-icon-highlight: var(--mp-colors-violet-400);\n --mp-colors-icon-information: var(--mp-colors-indigo-400);\n --mp-colors-icon-subtle: var(--mp-colors-dark-300);\n --mp-colors-icon-logo: var(--mp-colors-white);\n --mp-colors-border-default: var(--mp-colors-dark-300);\n --mp-colors-border-default-subtle: var(--mp-colors-dark-200);\n --mp-colors-border-bold: var(--mp-colors-dark-600);\n --mp-colors-border-disabled: var(--mp-colors-dark-200a);\n --mp-colors-border-form: var(--mp-colors-dark-300a);\n --mp-colors-border-focused: var(--mp-colors-indigo-300);\n --mp-colors-border-inverse: var(--mp-colors-dark-100);\n --mp-colors-border-selected: var(--mp-colors-indigo-400);\n --mp-colors-border-selected-hovered: var(--mp-colors-indigo-300);\n --mp-colors-border-selected-disabled: var(--mp-colors-indigo-900);\n --mp-colors-border-brand: var(--mp-colors-indigo-400);\n --mp-colors-border-danger: var(--mp-colors-red-400);\n --mp-colors-border-warning: var(--mp-colors-yellow-300);\n --mp-colors-border-success: var(--mp-colors-green-400);\n --mp-colors-border-highlight: var(--mp-colors-violet-400);\n --mp-colors-border-information: var(--mp-colors-indigo-400);\n --mp-colors-chart-cat01: var(--mp-colors-blue-300);\n --mp-colors-chart-cat01-bold: var(--mp-colors-blue-500);\n --mp-colors-chart-cat02: var(--mp-colors-teal-300);\n --mp-colors-chart-cat02-bold: var(--mp-colors-teal-500);\n --mp-colors-chart-cat03: var(--mp-colors-violet-300);\n --mp-colors-chart-cat03-bold: var(--mp-colors-violet-500);\n --mp-colors-chart-cat04: var(--mp-colors-orange-300);\n --mp-colors-chart-cat04-bold: var(--mp-colors-orange-500);\n --mp-colors-chart-cat05: var(--mp-colors-neutral-300);\n --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-500);\n --mp-colors-chart-cat06: var(--mp-colors-red-300);\n --mp-colors-chart-cat06-bold: var(--mp-colors-red-500);\n --mp-colors-chart-cat07: var(--mp-colors-lime-300);\n --mp-colors-chart-cat07-bold: var(--mp-colors-lime-500);\n --mp-colors-chart-cat08: var(--mp-colors-fuchsia-300);\n --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-500)\n }\n\n[data-panda-theme=next][data-product-theme=enterprise] {\n --mp-colors-background-surface: var(--mp-colors-slate-100);\n --mp-colors-background-surface-bold: var(--mp-colors-emerald-1000);\n --mp-colors-background-information: var(--mp-colors-indigo-100);\n --mp-colors-background-information-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-stage: var(--mp-colors-white);\n --mp-colors-background-overlay: #222222CC;\n --mp-colors-background-disabled: var(--mp-colors-slate-100);\n --mp-colors-background-inverse: var(--mp-colors-dark-100);\n --mp-colors-background-shadow: #1D1F2429;\n --mp-colors-background-neutral: var(--mp-colors-white);\n --mp-colors-background-neutral-hovered: var(--mp-colors-slate-100);\n --mp-colors-background-neutral-pressed: var(--mp-colors-slate-200);\n --mp-colors-background-neutral-selected: var(--mp-colors-slate-100);\n --mp-colors-background-neutral-subtle: var(--mp-colors-slate-100);\n --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-slate-200);\n --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-slate-300);\n --mp-colors-background-neutral-subtle-selected: var(--mp-colors-slate-200);\n --mp-colors-background-neutral-bold: var(--mp-colors-slate-800);\n --mp-colors-background-neutral-bold-hovered: var(--mp-colors-slate-900);\n --mp-colors-background-neutral-bold-pressed: var(--mp-colors-slate-1000);\n --mp-colors-background-neutral-bold-selected: var(--mp-colors-slate-900);\n --mp-colors-background-brand: var(--mp-colors-emerald-100);\n --mp-colors-background-brand-hovered: var(--mp-colors-emerald-200);\n --mp-colors-background-brand-pressed: var(--mp-colors-emerald-300);\n --mp-colors-background-brand-selected: var(--mp-colors-emerald-200);\n --mp-colors-background-brand-bold: var(--mp-colors-emerald-700);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-emerald-800);\n --mp-colors-background-brand-bold-pressed: var(--mp-colors-emerald-900);\n --mp-colors-background-brand-bold-selected: var(--mp-colors-emerald-800);\n --mp-colors-background-brand-bold-selected-disabled: var(--mp-colors-emerald-200);\n --mp-colors-background-tertiary: var(--mp-colors-dark-250);\n --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-danger: var(--mp-colors-red-100);\n --mp-colors-background-danger-hovered: var(--mp-colors-red-200);\n --mp-colors-background-danger-pressed: var(--mp-colors-red-300);\n --mp-colors-background-danger-selected: var(--mp-colors-red-200);\n --mp-colors-background-danger-bold: var(--mp-colors-red-700);\n --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-800);\n --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-900);\n --mp-colors-background-danger-bold-selected: var(--mp-colors-red-800);\n --mp-colors-background-warning: var(--mp-colors-yellow-100);\n --mp-colors-background-warning-hovered: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-pressed: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-selected: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n --mp-colors-background-warning-bold-selected: var(--mp-colors-yellow-400);\n --mp-colors-background-success: var(--mp-colors-green-100);\n --mp-colors-background-success-hovered: var(--mp-colors-green-200);\n --mp-colors-background-success-pressed: var(--mp-colors-green-300);\n --mp-colors-background-success-selected: var(--mp-colors-green-200);\n --mp-colors-background-success-bold: var(--mp-colors-green-700);\n --mp-colors-background-success-bold-hovered: var(--mp-colors-green-800);\n --mp-colors-background-success-bold-pressed: var(--mp-colors-green-900);\n --mp-colors-background-success-bold-selected: var(--mp-colors-green-800);\n --mp-colors-background-highlight: var(--mp-colors-violet-100);\n --mp-colors-background-highlight-hovered: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-pressed: var(--mp-colors-violet-300);\n --mp-colors-background-highlight-selected: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-bold: var(--mp-colors-violet-700);\n --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-800);\n --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-900);\n --mp-colors-background-highlight-bold-selected: var(--mp-colors-violet-800);\n --mp-colors-background-nav-parent: var(--mp-colors-emerald-1000);\n --mp-colors-background-nav-stack: var(--mp-colors-neutral-100);\n --mp-colors-background-nav-stack-hovered: var(--mp-colors-emerald-200);\n --mp-colors-background-header: var(--mp-colors-emerald-1000);\n --mp-colors-background-header-menu-hovered: #265C5880;\n --mp-colors-background-header-menu-selected: var(--mp-colors-lime-300);\n --mp-colors-background-airene: radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%);\n --mp-colors-nav-parent: var(--mp-colors-emerald-1000);\n --mp-colors-nav-stack: var(--mp-colors-neutral-100);\n --mp-colors-nav-stack-hovered: var(--mp-colors-emerald-200);\n --mp-colors-text-default: var(--mp-colors-slate-1000);\n --mp-colors-text-default-static: var(--mp-colors-dark-100);\n --mp-colors-text-secondary: var(--mp-colors-slate-700);\n --mp-colors-text-secondary-pressed: var(--mp-colors-slate-800);\n --mp-colors-text-placeholder: var(--mp-colors-slate-500);\n --mp-colors-text-disabled: var(--mp-colors-slate-400);\n --mp-colors-text-inverse: var(--mp-colors-white);\n --mp-colors-text-inverse-static: var(--mp-colors-white);\n --mp-colors-text-selected: var(--mp-colors-emerald-800);\n --mp-colors-text-danger: var(--mp-colors-red-800);\n --mp-colors-text-danger-pressed: var(--mp-colors-red-900);\n --mp-colors-text-warning: var(--mp-colors-orange-800);\n --mp-colors-text-warning-inverse: var(--mp-colors-slate-1000);\n --mp-colors-text-success: var(--mp-colors-emerald-800);\n --mp-colors-text-highlight: var(--mp-colors-violet-800);\n --mp-colors-text-information: var(--mp-colors-indigo-700);\n --mp-colors-text-link: #165082;\n --mp-colors-text-link-pressed: #0D4372;\n --mp-colors-icon-default: var(--mp-colors-slate-600);\n --mp-colors-icon-disabled: var(--mp-colors-neutral-400);\n --mp-colors-icon-inverse: var(--mp-colors-emerald-100);\n --mp-colors-icon-inverse-static: var(--mp-colors-white);\n --mp-colors-icon-selected: var(--mp-colors-emerald-700);\n --mp-colors-icon-brand: var(--mp-colors-emerald-700);\n --mp-colors-icon-danger: var(--mp-colors-red-700);\n --mp-colors-icon-warning: var(--mp-colors-orange-700);\n --mp-colors-icon-warning-inverse: var(--mp-colors-slate-1000);\n --mp-colors-icon-success: var(--mp-colors-emerald-600);\n --mp-colors-icon-highlight: var(--mp-colors-orange-700);\n --mp-colors-icon-information: var(--mp-colors-indigo-600);\n --mp-colors-icon-subtle: var(--mp-colors-slate-300);\n --mp-colors-icon-logo: #000000;\n --mp-colors-border-default: var(--mp-colors-slate-300);\n --mp-colors-border-default-subtle: var(--mp-colors-slate-200);\n --mp-colors-border-bold: var(--mp-colors-slate-400);\n --mp-colors-border-disabled: var(--mp-colors-slate-200);\n --mp-colors-border-form: var(--mp-colors-slate-300a);\n --mp-colors-border-focused: var(--mp-colors-emerald-500);\n --mp-colors-border-inverse: var(--mp-colors-white);\n --mp-colors-border-selected: var(--mp-colors-emerald-700);\n --mp-colors-border-selected-hovered: var(--mp-colors-emerald-800);\n --mp-colors-border-selected-disabled: var(--mp-colors-emerald-200);\n --mp-colors-border-brand: var(--mp-colors-emerald-800);\n --mp-colors-border-danger: var(--mp-colors-red-600);\n --mp-colors-border-warning: var(--mp-colors-yellow-300);\n --mp-colors-border-success: var(--mp-colors-emerald-700);\n --mp-colors-border-highlight: var(--mp-colors-orange-700);\n --mp-colors-border-information: var(--mp-colors-indigo-600);\n --mp-colors-chart-cat01: var(--mp-colors-blue-400);\n --mp-colors-chart-cat01-bold: var(--mp-colors-blue-600);\n --mp-colors-chart-cat02: var(--mp-colors-teal-400);\n --mp-colors-chart-cat02-bold: var(--mp-colors-teal-600);\n --mp-colors-chart-cat03: var(--mp-colors-violet-400);\n --mp-colors-chart-cat03-bold: var(--mp-colors-violet-600);\n --mp-colors-chart-cat04: var(--mp-colors-orange-400);\n --mp-colors-chart-cat04-bold: var(--mp-colors-orange-600);\n --mp-colors-chart-cat05: var(--mp-colors-neutral-400);\n --mp-colors-chart-cat05-bold: var(--mp-colors-slate-600);\n --mp-colors-chart-cat06: var(--mp-colors-red-400);\n --mp-colors-chart-cat06-bold: var(--mp-colors-red-600);\n --mp-colors-chart-cat07: var(--mp-colors-lime-400);\n --mp-colors-chart-cat07-bold: var(--mp-colors-lime-600);\n --mp-colors-chart-cat08: var(--mp-colors-fuchsia-400);\n --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-600)\n }"
|
|
5
5
|
}
|
package/tokens/index.mjs
CHANGED
|
@@ -751,6 +751,10 @@ const tokens = {
|
|
|
751
751
|
"value": "var(--mp-spacing-1\\.5)",
|
|
752
752
|
"variable": "var(--mp-spacing-1\\.5)"
|
|
753
753
|
},
|
|
754
|
+
"spacing.2.5": {
|
|
755
|
+
"value": "0.625rem",
|
|
756
|
+
"variable": "var(--mp-spacing-2\\.5)"
|
|
757
|
+
},
|
|
754
758
|
"zIndex.hide": {
|
|
755
759
|
"value": "var(--mp-z-index-hide)",
|
|
756
760
|
"variable": "var(--mp-z-index-hide)"
|
|
@@ -867,6 +871,10 @@ const tokens = {
|
|
|
867
871
|
"value": "var(--mp-spacing-1\\.5)",
|
|
868
872
|
"variable": "var(--mp-spacing-1\\.5)"
|
|
869
873
|
},
|
|
874
|
+
"spacing.-2.5": {
|
|
875
|
+
"value": "calc(var(--mp-spacing-2\\.5) * -1)",
|
|
876
|
+
"variable": "var(--mp-spacing-2\\.5)"
|
|
877
|
+
},
|
|
870
878
|
"spacing.-10": {
|
|
871
879
|
"value": "var(--mp-spacing-10)",
|
|
872
880
|
"variable": "var(--mp-spacing-10)"
|
|
@@ -1599,7 +1607,7 @@ const tokens = {
|
|
|
1599
1607
|
"value": "var(--mp-colors-background-brand-bold-selected)",
|
|
1600
1608
|
"variable": "var(--mp-colors-background-brand-bold-selected)"
|
|
1601
1609
|
},
|
|
1602
|
-
"colors.background.brand.bold.
|
|
1610
|
+
"colors.background.brand.bold.selected.disabled": {
|
|
1603
1611
|
"value": "var(--mp-colors-background-brand-bold-selected-disabled)",
|
|
1604
1612
|
"variable": "var(--mp-colors-background-brand-bold-selected-disabled)"
|
|
1605
1613
|
},
|
|
@@ -1743,6 +1751,18 @@ const tokens = {
|
|
|
1743
1751
|
"value": "var(--mp-colors-background-highlight-bold-selected)",
|
|
1744
1752
|
"variable": "var(--mp-colors-background-highlight-bold-selected)"
|
|
1745
1753
|
},
|
|
1754
|
+
"colors.background.nav.parent": {
|
|
1755
|
+
"value": "var(--mp-colors-background-nav-parent)",
|
|
1756
|
+
"variable": "var(--mp-colors-background-nav-parent)"
|
|
1757
|
+
},
|
|
1758
|
+
"colors.background.nav.stack": {
|
|
1759
|
+
"value": "var(--mp-colors-background-nav-stack)",
|
|
1760
|
+
"variable": "var(--mp-colors-background-nav-stack)"
|
|
1761
|
+
},
|
|
1762
|
+
"colors.background.nav.stack.hovered": {
|
|
1763
|
+
"value": "var(--mp-colors-background-nav-stack-hovered)",
|
|
1764
|
+
"variable": "var(--mp-colors-background-nav-stack-hovered)"
|
|
1765
|
+
},
|
|
1746
1766
|
"colors.background.header": {
|
|
1747
1767
|
"value": "var(--mp-colors-background-header)",
|
|
1748
1768
|
"variable": "var(--mp-colors-background-header)"
|
|
@@ -1903,9 +1923,9 @@ const tokens = {
|
|
|
1903
1923
|
"value": "var(--mp-colors-border-default)",
|
|
1904
1924
|
"variable": "var(--mp-colors-border-default)"
|
|
1905
1925
|
},
|
|
1906
|
-
"colors.border.subtle": {
|
|
1907
|
-
"value": "var(--mp-colors-border-subtle)",
|
|
1908
|
-
"variable": "var(--mp-colors-border-subtle)"
|
|
1926
|
+
"colors.border.default.subtle": {
|
|
1927
|
+
"value": "var(--mp-colors-border-default-subtle)",
|
|
1928
|
+
"variable": "var(--mp-colors-border-default-subtle)"
|
|
1909
1929
|
},
|
|
1910
1930
|
"colors.border.bold": {
|
|
1911
1931
|
"value": "var(--mp-colors-border-bold)",
|
package/tokens/tokens.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ export type ColorPalette = "debug" | "currentcolor" | "transparent" | "dark" | "
|
|
|
5
5
|
|
|
6
6
|
export type BorderWidthToken = "none" | "sm" | "md" | "lg" | "xl" | "2xl"
|
|
7
7
|
|
|
8
|
-
export type ColorToken = "debug" | "currentcolor" | "transparent" | "dark" | "background" | "overlay" | "white" | "vibrantPurple" | "lightPurple" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.25" | "gray.50" | "gray.100" | "gray.400" | "gray.600" | "blue.50" | "blue.100" | "blue.400" | "blue.500" | "blue.700" | "red.50" | "red.400" | "red.500" | "red.700" | "green.50" | "green.400" | "green.500" | "green.700" | "orange.50" | "orange.400" | "orange.500" | "orange.700" | "sky.100" | "sky.400" | "teal.100" | "teal.400" | "violet.100" | "violet.400" | "amber.100" | "amber.400" | "rose.100" | "rose.400" | "stone.100" | "stone.400" | "lime.100" | "lime.400" | "pink.100" | "pink.400" | "apricot.100" | "apricot.400" | "aqua.100" | "aqua.400" | "leaf.100" | "leaf.400" | "fuchsia.100" | "fuchsia.400" | "ice.50" | "ice.100" | "ash.100" | "brand.capital" | "brand.esign" | "brand.expense" | "brand.flex" | "brand.jurnal" | "brand.klikpajak" | "brand.mekari" | "brand.qontak" | "brand.talenta" | "brand.university" | "dark.100" | "dark.200" | "dark.250" | "dark.300" | "dark.350" | "dark.400" | "dark.500" | "dark.600" | "dark.700" | "dark.800" | "dark.900" | "dark.1000" | "dark.-100" | "dark.100a" | "dark.200a" | "dark.250a" | "dark.300a" | "dark.350a" | "dark.400a" | "dark.500a" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.1000" | "neutral.100a" | "neutral.200a" | "neutral.300a" | "neutral.400a" | "neutral.500a" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.1000" | "slate.100a" | "slate.200a" | "slate.300a" | "slate.400a" | "slate.500a" | "blue.200" | "blue.300" | "blue.600" | "blue.800" | "blue.900" | "blue.1000" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.1000" | "violet.200" | "violet.300" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.1000" | "fuchsia.200" | "fuchsia.300" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.1000" | "red.100" | "red.200" | "red.300" | "red.600" | "red.800" | "red.900" | "red.1000" | "orange.100" | "orange.200" | "orange.300" | "orange.600" | "orange.800" | "orange.900" | "orange.1000" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.1000" | "lime.200" | "lime.300" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.1000" | "green.100" | "green.200" | "green.300" | "green.600" | "green.800" | "green.900" | "green.1000" | "teal.200" | "teal.300" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.1000" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.1000" | "background.surface" | "background.surface.bold" | "background.information" | "background.information.bold" | "background.stage" | "background.overlay" | "background.disabled" | "background.inverse" | "background.shadow" | "background.neutral" | "background.neutral.hovered" | "background.neutral.pressed" | "background.neutral.selected" | "background.neutral.subtle" | "background.neutral.subtle.hovered" | "background.neutral.subtle.pressed" | "background.neutral.subtle.selected" | "background.neutral.bold" | "background.neutral.bold.hovered" | "background.neutral.bold.pressed" | "background.neutral.bold.selected" | "background.brand" | "background.brand.hovered" | "background.brand.pressed" | "background.brand.selected" | "background.brand.bold" | "background.brand.bold.hovered" | "background.brand.bold.pressed" | "background.brand.bold.selected" | "background.brand.bold.
|
|
8
|
+
export type ColorToken = "debug" | "currentcolor" | "transparent" | "dark" | "background" | "overlay" | "white" | "vibrantPurple" | "lightPurple" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.25" | "gray.50" | "gray.100" | "gray.400" | "gray.600" | "blue.50" | "blue.100" | "blue.400" | "blue.500" | "blue.700" | "red.50" | "red.400" | "red.500" | "red.700" | "green.50" | "green.400" | "green.500" | "green.700" | "orange.50" | "orange.400" | "orange.500" | "orange.700" | "sky.100" | "sky.400" | "teal.100" | "teal.400" | "violet.100" | "violet.400" | "amber.100" | "amber.400" | "rose.100" | "rose.400" | "stone.100" | "stone.400" | "lime.100" | "lime.400" | "pink.100" | "pink.400" | "apricot.100" | "apricot.400" | "aqua.100" | "aqua.400" | "leaf.100" | "leaf.400" | "fuchsia.100" | "fuchsia.400" | "ice.50" | "ice.100" | "ash.100" | "brand.capital" | "brand.esign" | "brand.expense" | "brand.flex" | "brand.jurnal" | "brand.klikpajak" | "brand.mekari" | "brand.qontak" | "brand.talenta" | "brand.university" | "dark.100" | "dark.200" | "dark.250" | "dark.300" | "dark.350" | "dark.400" | "dark.500" | "dark.600" | "dark.700" | "dark.800" | "dark.900" | "dark.1000" | "dark.-100" | "dark.100a" | "dark.200a" | "dark.250a" | "dark.300a" | "dark.350a" | "dark.400a" | "dark.500a" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.1000" | "neutral.100a" | "neutral.200a" | "neutral.300a" | "neutral.400a" | "neutral.500a" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.1000" | "slate.100a" | "slate.200a" | "slate.300a" | "slate.400a" | "slate.500a" | "blue.200" | "blue.300" | "blue.600" | "blue.800" | "blue.900" | "blue.1000" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.1000" | "violet.200" | "violet.300" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.1000" | "fuchsia.200" | "fuchsia.300" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.1000" | "red.100" | "red.200" | "red.300" | "red.600" | "red.800" | "red.900" | "red.1000" | "orange.100" | "orange.200" | "orange.300" | "orange.600" | "orange.800" | "orange.900" | "orange.1000" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.1000" | "lime.200" | "lime.300" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.1000" | "green.100" | "green.200" | "green.300" | "green.600" | "green.800" | "green.900" | "green.1000" | "teal.200" | "teal.300" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.1000" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.1000" | "background.surface" | "background.surface.bold" | "background.information" | "background.information.bold" | "background.stage" | "background.overlay" | "background.disabled" | "background.inverse" | "background.shadow" | "background.neutral" | "background.neutral.hovered" | "background.neutral.pressed" | "background.neutral.selected" | "background.neutral.subtle" | "background.neutral.subtle.hovered" | "background.neutral.subtle.pressed" | "background.neutral.subtle.selected" | "background.neutral.bold" | "background.neutral.bold.hovered" | "background.neutral.bold.pressed" | "background.neutral.bold.selected" | "background.brand" | "background.brand.hovered" | "background.brand.pressed" | "background.brand.selected" | "background.brand.bold" | "background.brand.bold.hovered" | "background.brand.bold.pressed" | "background.brand.bold.selected" | "background.brand.bold.selected.disabled" | "background.tertiary" | "background.tertiary.hovered" | "background.tertiary.pressed" | "background.danger" | "background.danger.hovered" | "background.danger.pressed" | "background.danger.selected" | "background.danger.bold" | "background.danger.bold.hovered" | "background.danger.bold.pressed" | "background.danger.bold.selected" | "background.warning" | "background.warning.hovered" | "background.warning.pressed" | "background.warning.selected" | "background.warning.bold" | "background.warning.bold.hovered" | "background.warning.bold.pressed" | "background.warning.bold.selected" | "background.success" | "background.success.hovered" | "background.success.pressed" | "background.success.selected" | "background.success.bold" | "background.success.bold.hovered" | "background.success.bold.pressed" | "background.success.bold.selected" | "background.highlight" | "background.highlight.hovered" | "background.highlight.pressed" | "background.highlight.selected" | "background.highlight.bold" | "background.highlight.bold.hovered" | "background.highlight.bold.pressed" | "background.highlight.bold.selected" | "background.nav.parent" | "background.nav.stack" | "background.nav.stack.hovered" | "background.header" | "background.header.menu.hovered" | "background.header.menu.selected" | "background.airene" | "nav.parent" | "nav.stack" | "nav.stack.hovered" | "text.default" | "text.default.static" | "text.secondary" | "text.secondary.pressed" | "text.placeholder" | "text.disabled" | "text.inverse" | "text.inverse.static" | "text.selected" | "text.danger" | "text.danger.pressed" | "text.warning" | "text.warning.inverse" | "text.success" | "text.highlight" | "text.information" | "text.link" | "text.link.pressed" | "icon.default" | "icon.disabled" | "icon.inverse" | "icon.inverse.static" | "icon.selected" | "icon.brand" | "icon.danger" | "icon.warning" | "icon.warning.inverse" | "icon.success" | "icon.highlight" | "icon.information" | "icon.subtle" | "icon.logo" | "border.default" | "border.default.subtle" | "border.bold" | "border.disabled" | "border.form" | "border.focused" | "border.inverse" | "border.selected" | "border.selected.hovered" | "border.selected.disabled" | "border.brand" | "border.danger" | "border.warning" | "border.success" | "border.highlight" | "border.information" | "chart.cat01" | "chart.cat01.bold" | "chart.cat02" | "chart.cat02.bold" | "chart.cat03" | "chart.cat03.bold" | "chart.cat04" | "chart.cat04.bold" | "chart.cat05" | "chart.cat05.bold" | "chart.cat06" | "chart.cat06.bold" | "chart.cat07" | "chart.cat07.bold" | "chart.cat08" | "chart.cat08.bold" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.25" | "colorPalette.capital" | "colorPalette.esign" | "colorPalette.expense" | "colorPalette.flex" | "colorPalette.jurnal" | "colorPalette.klikpajak" | "colorPalette.mekari" | "colorPalette.qontak" | "colorPalette.talenta" | "colorPalette.university"
|
|
9
9
|
|
|
10
10
|
export type DurationToken = "slow" | "normal" | "fast"
|
|
11
11
|
|
|
@@ -27,7 +27,7 @@ export type ShadowToken = "xs" | "sm" | "md" | "lg" | "focus" | "xl" | "2xl" | "
|
|
|
27
27
|
|
|
28
28
|
export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16" | "20" | "22" | "56" | "65" | "0.25" | "0.5" | "2.5" | "7.5" | "9.5" | "full" | "sm" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl"
|
|
29
29
|
|
|
30
|
-
export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "16" | "20" | "24" | "32" | "40" | "64" | "0.5" | "1.5" | "-0" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-12" | "-16" | "-20" | "-24" | "-32" | "-40" | "-64" | "-0.5" | "-1.5" | "-10" | "-4xs" | "-3xs" | "-2xs" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | "10" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"
|
|
30
|
+
export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "16" | "20" | "24" | "32" | "40" | "64" | "0.5" | "1.5" | "2.5" | "-0" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-12" | "-16" | "-20" | "-24" | "-32" | "-40" | "-64" | "-0.5" | "-1.5" | "-2.5" | "-10" | "-4xs" | "-3xs" | "-2xs" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | "10" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"
|
|
31
31
|
|
|
32
32
|
export type ZIndexToken = "hide" | "base" | "docked" | "sticky" | "overlay" | "modal" | "popover" | "tooltip"
|
|
33
33
|
|
package/types/conditions.d.ts
CHANGED
|
@@ -230,6 +230,8 @@ export interface Conditions {
|
|
|
230
230
|
"_hasBackground": string
|
|
231
231
|
/** `&[data-is-full-width=true]` */
|
|
232
232
|
"_isFullWidth": string
|
|
233
|
+
/** `&[data-is-rounded=true]` */
|
|
234
|
+
"_isRounded": string
|
|
233
235
|
/** `&[data-placement=left]` */
|
|
234
236
|
"_placementLeft": string
|
|
235
237
|
/** `&[data-placement=right]` */
|