@lobehub/ui 6.0.6 → 6.1.0

package/es/stylex/cssVar.stylex.ts

@@ -0,0 +1,790 @@
+import * as stylex from '@stylexjs/stylex';
+
+export const cssVar = stylex.defineConsts({
+  borderRadiusOuter: 'var(--lobe-border-radius-outer)',
+  colorTextLightSolid: 'var(--lobe-color-text-light-solid)',
+  colorWhite: 'var(--lobe-color-white)',
+  controlHeightLG: 'var(--lobe-control-height-lg)',
+  controlHeightSM: 'var(--lobe-control-height-sm)',
+  controlHeightXS: 'var(--lobe-control-height-xs)',
+  controlInteractiveSize: 'var(--lobe-control-interactive-size)',
+  controlOutlineWidth: 'var(--lobe-control-outline-width)',
+  controlPaddingHorizontal: 'var(--lobe-control-padding-horizontal)',
+  controlPaddingHorizontalSM: 'var(--lobe-control-padding-horizontal-sm)',
+  fontHeight: 'var(--lobe-font-height)',
+  fontHeightLG: 'var(--lobe-font-height-lg)',
+  fontHeightSM: 'var(--lobe-font-height-sm)',
+  fontSize: 'var(--lobe-font-size)',
+  fontSizeHeading1: 'var(--lobe-font-size-heading-1)',
+  fontSizeHeading2: 'var(--lobe-font-size-heading-2)',
+  fontSizeHeading3: 'var(--lobe-font-size-heading-3)',
+  fontSizeHeading4: 'var(--lobe-font-size-heading-4)',
+  fontSizeHeading5: 'var(--lobe-font-size-heading-5)',
+  fontSizeIcon: 'var(--lobe-font-size-icon)',
+  fontSizeLG: 'var(--lobe-font-size-lg)',
+  fontSizeSM: 'var(--lobe-font-size-sm)',
+  fontSizeXL: 'var(--lobe-font-size-xl)',
+  fontWeightStrong: 'var(--lobe-font-weight-strong)',
+  lineHeight: 'var(--lobe-line-height)',
+  lineHeightHeading1: 'var(--lobe-line-height-heading-1)',
+  lineHeightHeading2: 'var(--lobe-line-height-heading-2)',
+  lineHeightHeading3: 'var(--lobe-line-height-heading-3)',
+  lineHeightHeading4: 'var(--lobe-line-height-heading-4)',
+  lineHeightHeading5: 'var(--lobe-line-height-heading-5)',
+  lineHeightLG: 'var(--lobe-line-height-lg)',
+  lineHeightSM: 'var(--lobe-line-height-sm)',
+  lineType: 'var(--lobe-line-type)',
+  lineWidth: 'var(--lobe-line-width)',
+  lineWidthBold: 'var(--lobe-line-width-bold)',
+  lineWidthFocus: 'var(--lobe-line-width-focus)',
+  linkDecoration: 'var(--lobe-link-decoration)',
+  linkFocusDecoration: 'var(--lobe-link-focus-decoration)',
+  linkHoverDecoration: 'var(--lobe-link-hover-decoration)',
+  margin: 'var(--lobe-margin)',
+  marginLG: 'var(--lobe-margin-lg)',
+  marginMD: 'var(--lobe-margin-md)',
+  marginSM: 'var(--lobe-margin-sm)',
+  marginXL: 'var(--lobe-margin-xl)',
+  marginXS: 'var(--lobe-margin-xs)',
+  marginXXL: 'var(--lobe-margin-xxl)',
+  marginXXS: 'var(--lobe-margin-xxs)',
+  motionDurationFast: 'var(--lobe-motion-duration-fast)',
+  motionDurationMid: 'var(--lobe-motion-duration-mid)',
+  motionDurationSlow: 'var(--lobe-motion-duration-slow)',
+  motionEaseInBack: 'var(--lobe-motion-ease-in-back)',
+  motionEaseInOut: 'var(--lobe-motion-ease-in-out)',
+  motionEaseInOutCirc: 'var(--lobe-motion-ease-in-out-circ)',
+  motionEaseInQuint: 'var(--lobe-motion-ease-in-quint)',
+  motionEaseOut: 'var(--lobe-motion-ease-out)',
+  motionEaseOutBack: 'var(--lobe-motion-ease-out-back)',
+  motionEaseOutCirc: 'var(--lobe-motion-ease-out-circ)',
+  motionEaseOutQuint: 'var(--lobe-motion-ease-out-quint)',
+  motionSpringBouncy: 'var(--lobe-motion-spring-bouncy)',
+  motionSpringSmooth: 'var(--lobe-motion-spring-smooth)',
+  motionSpringSnappy: 'var(--lobe-motion-spring-snappy)',
+  opacityImage: 'var(--lobe-opacity-image)',
+  opacityLoading: 'var(--lobe-opacity-loading)',
+  padding: 'var(--lobe-padding)',
+  paddingContentHorizontal: 'var(--lobe-padding-content-horizontal)',
+  paddingContentHorizontalLG: 'var(--lobe-padding-content-horizontal-lg)',
+  paddingContentHorizontalSM: 'var(--lobe-padding-content-horizontal-sm)',
+  paddingContentVertical: 'var(--lobe-padding-content-vertical)',
+  paddingContentVerticalLG: 'var(--lobe-padding-content-vertical-lg)',
+  paddingContentVerticalSM: 'var(--lobe-padding-content-vertical-sm)',
+  paddingLG: 'var(--lobe-padding-lg)',
+  paddingMD: 'var(--lobe-padding-md)',
+  paddingSM: 'var(--lobe-padding-sm)',
+  paddingXL: 'var(--lobe-padding-xl)',
+  paddingXS: 'var(--lobe-padding-xs)',
+  paddingXXS: 'var(--lobe-padding-xxs)',
+  pink: 'var(--lobe-pink)',
+  screenLG: 'var(--lobe-screen-lg)',
+  screenLGMax: 'var(--lobe-screen-lg-max)',
+  screenLGMin: 'var(--lobe-screen-lg-min)',
+  screenMD: 'var(--lobe-screen-md)',
+  screenMDMax: 'var(--lobe-screen-md-max)',
+  screenMDMin: 'var(--lobe-screen-md-min)',
+  screenSM: 'var(--lobe-screen-sm)',
+  screenSMMax: 'var(--lobe-screen-sm-max)',
+  screenSMMin: 'var(--lobe-screen-sm-min)',
+  screenXL: 'var(--lobe-screen-xl)',
+  screenXLMax: 'var(--lobe-screen-xl-max)',
+  screenXLMin: 'var(--lobe-screen-xl-min)',
+  screenXS: 'var(--lobe-screen-xs)',
+  screenXSMax: 'var(--lobe-screen-xs-max)',
+  screenXSMin: 'var(--lobe-screen-xs-min)',
+  screenXXL: 'var(--lobe-screen-xxl)',
+  screenXXLMax: 'var(--lobe-screen-xxl-max)',
+  screenXXLMin: 'var(--lobe-screen-xxl-min)',
+  screenXXXL: 'var(--lobe-screen-xxxl)',
+  screenXXXLMin: 'var(--lobe-screen-xxxl-min)',
+  size: 'var(--lobe-size)',
+  sizeLG: 'var(--lobe-size-lg)',
+  sizeMD: 'var(--lobe-size-md)',
+  sizeMS: 'var(--lobe-size-ms)',
+  sizePopupArrow: 'var(--lobe-size-popup-arrow)',
+  sizeSM: 'var(--lobe-size-sm)',
+  sizeStep: 'var(--lobe-size-step)',
+  sizeUnit: 'var(--lobe-size-unit)',
+  sizeXL: 'var(--lobe-size-xl)',
+  sizeXS: 'var(--lobe-size-xs)',
+  sizeXXL: 'var(--lobe-size-xxl)',
+  sizeXXS: 'var(--lobe-size-xxs)',
+  zIndexBase: 'var(--lobe-z-index-base)',
+  zIndexPopupBase: 'var(--lobe-z-index-popup-base)',
+  borderRadius: 'var(--lobe-border-radius)',
+  borderRadiusLG: 'var(--lobe-border-radius-lg)',
+  borderRadiusSM: 'var(--lobe-border-radius-sm)',
+  borderRadiusXS: 'var(--lobe-border-radius-xs)',
+  controlHeight: 'var(--lobe-control-height)',
+  fontFamily: 'var(--lobe-font-family)',
+  fontFamilyCode: 'var(--lobe-font-family-code)',
+  boxShadowCard: 'var(--lobe-box-shadow-card)',
+  boxShadowDrawerDown: 'var(--lobe-box-shadow-drawer-down)',
+  boxShadowDrawerLeft: 'var(--lobe-box-shadow-drawer-left)',
+  boxShadowDrawerRight: 'var(--lobe-box-shadow-drawer-right)',
+  boxShadowDrawerUp: 'var(--lobe-box-shadow-drawer-up)',
+  boxShadowPopoverArrow: 'var(--lobe-box-shadow-popover-arrow)',
+  boxShadowTabsOverflowBottom: 'var(--lobe-box-shadow-tabs-overflow-bottom)',
+  boxShadowTabsOverflowLeft: 'var(--lobe-box-shadow-tabs-overflow-left)',
+  boxShadowTabsOverflowRight: 'var(--lobe-box-shadow-tabs-overflow-right)',
+  boxShadowTabsOverflowTop: 'var(--lobe-box-shadow-tabs-overflow-top)',
+  colorBgBase: 'var(--lobe-color-bg-base)',
+  colorBgBlur: 'var(--lobe-color-bg-blur)',
+  colorBgSolid: 'var(--lobe-color-bg-solid)',
+  colorBgSolidActive: 'var(--lobe-color-bg-solid-active)',
+  colorBgSolidHover: 'var(--lobe-color-bg-solid-hover)',
+  colorBorderDisabled: 'var(--lobe-color-border-disabled)',
+  colorErrorBgActive: 'var(--lobe-color-error-bg-active)',
+  colorErrorBgFilledHover: 'var(--lobe-color-error-bg-filled-hover)',
+  colorShadow: 'var(--lobe-color-shadow)',
+  colorTextBase: 'var(--lobe-color-text-base)',
+  dropShadowPopover: 'var(--lobe-drop-shadow-popover)',
+  pink1: 'var(--lobe-pink-1)',
+  pink10: 'var(--lobe-pink-10)',
+  pink2: 'var(--lobe-pink-2)',
+  pink3: 'var(--lobe-pink-3)',
+  pink4: 'var(--lobe-pink-4)',
+  pink5: 'var(--lobe-pink-5)',
+  pink6: 'var(--lobe-pink-6)',
+  pink7: 'var(--lobe-pink-7)',
+  pink8: 'var(--lobe-pink-8)',
+  pink9: 'var(--lobe-pink-9)',
+  pinkActive: 'var(--lobe-pink-active)',
+  pinkHover: 'var(--lobe-pink-hover)',
+  colorErrorFill: 'var(--lobe-color-error-fill)',
+  colorErrorFillSecondary: 'var(--lobe-color-error-fill-secondary)',
+  colorErrorFillTertiary: 'var(--lobe-color-error-fill-tertiary)',
+  colorErrorFillQuaternary: 'var(--lobe-color-error-fill-quaternary)',
+  colorErrorBg: 'var(--lobe-color-error-bg)',
+  colorErrorBgHover: 'var(--lobe-color-error-bg-hover)',
+  colorErrorBorder: 'var(--lobe-color-error-border)',
+  colorErrorBorderHover: 'var(--lobe-color-error-border-hover)',
+  colorErrorHover: 'var(--lobe-color-error-hover)',
+  colorError: 'var(--lobe-color-error)',
+  colorErrorActive: 'var(--lobe-color-error-active)',
+  colorErrorTextHover: 'var(--lobe-color-error-text-hover)',
+  colorErrorText: 'var(--lobe-color-error-text)',
+  colorErrorTextActive: 'var(--lobe-color-error-text-active)',
+  colorInfoFill: 'var(--lobe-color-info-fill)',
+  colorInfoFillSecondary: 'var(--lobe-color-info-fill-secondary)',
+  colorInfoFillTertiary: 'var(--lobe-color-info-fill-tertiary)',
+  colorInfoFillQuaternary: 'var(--lobe-color-info-fill-quaternary)',
+  colorInfoBg: 'var(--lobe-color-info-bg)',
+  colorInfoBgHover: 'var(--lobe-color-info-bg-hover)',
+  colorInfoBorder: 'var(--lobe-color-info-border)',
+  colorInfoBorderHover: 'var(--lobe-color-info-border-hover)',
+  colorInfoHover: 'var(--lobe-color-info-hover)',
+  colorInfo: 'var(--lobe-color-info)',
+  colorInfoActive: 'var(--lobe-color-info-active)',
+  colorInfoTextHover: 'var(--lobe-color-info-text-hover)',
+  colorInfoText: 'var(--lobe-color-info-text)',
+  colorInfoTextActive: 'var(--lobe-color-info-text-active)',
+  colorSuccessFill: 'var(--lobe-color-success-fill)',
+  colorSuccessFillSecondary: 'var(--lobe-color-success-fill-secondary)',
+  colorSuccessFillTertiary: 'var(--lobe-color-success-fill-tertiary)',
+  colorSuccessFillQuaternary: 'var(--lobe-color-success-fill-quaternary)',
+  colorSuccessBg: 'var(--lobe-color-success-bg)',
+  colorSuccessBgHover: 'var(--lobe-color-success-bg-hover)',
+  colorSuccessBorder: 'var(--lobe-color-success-border)',
+  colorSuccessBorderHover: 'var(--lobe-color-success-border-hover)',
+  colorSuccessHover: 'var(--lobe-color-success-hover)',
+  colorSuccess: 'var(--lobe-color-success)',
+  colorSuccessActive: 'var(--lobe-color-success-active)',
+  colorSuccessTextHover: 'var(--lobe-color-success-text-hover)',
+  colorSuccessText: 'var(--lobe-color-success-text)',
+  colorSuccessTextActive: 'var(--lobe-color-success-text-active)',
+  colorWarningFill: 'var(--lobe-color-warning-fill)',
+  colorWarningFillSecondary: 'var(--lobe-color-warning-fill-secondary)',
+  colorWarningFillTertiary: 'var(--lobe-color-warning-fill-tertiary)',
+  colorWarningFillQuaternary: 'var(--lobe-color-warning-fill-quaternary)',
+  colorWarningBg: 'var(--lobe-color-warning-bg)',
+  colorWarningBgHover: 'var(--lobe-color-warning-bg-hover)',
+  colorWarningBorder: 'var(--lobe-color-warning-border)',
+  colorWarningBorderHover: 'var(--lobe-color-warning-border-hover)',
+  colorWarningHover: 'var(--lobe-color-warning-hover)',
+  colorWarning: 'var(--lobe-color-warning)',
+  colorWarningActive: 'var(--lobe-color-warning-active)',
+  colorWarningTextHover: 'var(--lobe-color-warning-text-hover)',
+  colorWarningText: 'var(--lobe-color-warning-text)',
+  colorWarningTextActive: 'var(--lobe-color-warning-text-active)',
+  blue1: 'var(--lobe-blue-1)',
+  blue2: 'var(--lobe-blue-2)',
+  blue3: 'var(--lobe-blue-3)',
+  blue4: 'var(--lobe-blue-4)',
+  blue5: 'var(--lobe-blue-5)',
+  blue6: 'var(--lobe-blue-6)',
+  blue7: 'var(--lobe-blue-7)',
+  blue8: 'var(--lobe-blue-8)',
+  blue9: 'var(--lobe-blue-9)',
+  blue10: 'var(--lobe-blue-10)',
+  blue11: 'var(--lobe-blue-11)',
+  blue1A: 'var(--lobe-blue-1-a)',
+  blue2A: 'var(--lobe-blue-2-a)',
+  blue3A: 'var(--lobe-blue-3-a)',
+  blue4A: 'var(--lobe-blue-4-a)',
+  blue5A: 'var(--lobe-blue-5-a)',
+  blue6A: 'var(--lobe-blue-6-a)',
+  blue7A: 'var(--lobe-blue-7-a)',
+  blue8A: 'var(--lobe-blue-8-a)',
+  blue9A: 'var(--lobe-blue-9-a)',
+  blue10A: 'var(--lobe-blue-10-a)',
+  blue11A: 'var(--lobe-blue-11-a)',
+  blueFill: 'var(--lobe-blue-fill)',
+  blueFillSecondary: 'var(--lobe-blue-fill-secondary)',
+  blueFillTertiary: 'var(--lobe-blue-fill-tertiary)',
+  blueFillQuaternary: 'var(--lobe-blue-fill-quaternary)',
+  blueBg: 'var(--lobe-blue-bg)',
+  blueBgHover: 'var(--lobe-blue-bg-hover)',
+  blueBorder: 'var(--lobe-blue-border)',
+  blueBorderSecondary: 'var(--lobe-blue-border-secondary)',
+  blueBorderHover: 'var(--lobe-blue-border-hover)',
+  blueHover: 'var(--lobe-blue-hover)',
+  blue: 'var(--lobe-blue)',
+  blueActive: 'var(--lobe-blue-active)',
+  blueTextHover: 'var(--lobe-blue-text-hover)',
+  blueText: 'var(--lobe-blue-text)',
+  blueTextActive: 'var(--lobe-blue-text-active)',
+  cyan1: 'var(--lobe-cyan-1)',
+  cyan2: 'var(--lobe-cyan-2)',
+  cyan3: 'var(--lobe-cyan-3)',
+  cyan4: 'var(--lobe-cyan-4)',
+  cyan5: 'var(--lobe-cyan-5)',
+  cyan6: 'var(--lobe-cyan-6)',
+  cyan7: 'var(--lobe-cyan-7)',
+  cyan8: 'var(--lobe-cyan-8)',
+  cyan9: 'var(--lobe-cyan-9)',
+  cyan10: 'var(--lobe-cyan-10)',
+  cyan11: 'var(--lobe-cyan-11)',
+  cyan1A: 'var(--lobe-cyan-1-a)',
+  cyan2A: 'var(--lobe-cyan-2-a)',
+  cyan3A: 'var(--lobe-cyan-3-a)',
+  cyan4A: 'var(--lobe-cyan-4-a)',
+  cyan5A: 'var(--lobe-cyan-5-a)',
+  cyan6A: 'var(--lobe-cyan-6-a)',
+  cyan7A: 'var(--lobe-cyan-7-a)',
+  cyan8A: 'var(--lobe-cyan-8-a)',
+  cyan9A: 'var(--lobe-cyan-9-a)',
+  cyan10A: 'var(--lobe-cyan-10-a)',
+  cyan11A: 'var(--lobe-cyan-11-a)',
+  cyanFill: 'var(--lobe-cyan-fill)',
+  cyanFillSecondary: 'var(--lobe-cyan-fill-secondary)',
+  cyanFillTertiary: 'var(--lobe-cyan-fill-tertiary)',
+  cyanFillQuaternary: 'var(--lobe-cyan-fill-quaternary)',
+  cyanBg: 'var(--lobe-cyan-bg)',
+  cyanBgHover: 'var(--lobe-cyan-bg-hover)',
+  cyanBorder: 'var(--lobe-cyan-border)',
+  cyanBorderSecondary: 'var(--lobe-cyan-border-secondary)',
+  cyanBorderHover: 'var(--lobe-cyan-border-hover)',
+  cyanHover: 'var(--lobe-cyan-hover)',
+  cyan: 'var(--lobe-cyan)',
+  cyanActive: 'var(--lobe-cyan-active)',
+  cyanTextHover: 'var(--lobe-cyan-text-hover)',
+  cyanText: 'var(--lobe-cyan-text)',
+  cyanTextActive: 'var(--lobe-cyan-text-active)',
+  geekblue1: 'var(--lobe-geekblue-1)',
+  geekblue2: 'var(--lobe-geekblue-2)',
+  geekblue3: 'var(--lobe-geekblue-3)',
+  geekblue4: 'var(--lobe-geekblue-4)',
+  geekblue5: 'var(--lobe-geekblue-5)',
+  geekblue6: 'var(--lobe-geekblue-6)',
+  geekblue7: 'var(--lobe-geekblue-7)',
+  geekblue8: 'var(--lobe-geekblue-8)',
+  geekblue9: 'var(--lobe-geekblue-9)',
+  geekblue10: 'var(--lobe-geekblue-10)',
+  geekblue11: 'var(--lobe-geekblue-11)',
+  geekblue1A: 'var(--lobe-geekblue-1-a)',
+  geekblue2A: 'var(--lobe-geekblue-2-a)',
+  geekblue3A: 'var(--lobe-geekblue-3-a)',
+  geekblue4A: 'var(--lobe-geekblue-4-a)',
+  geekblue5A: 'var(--lobe-geekblue-5-a)',
+  geekblue6A: 'var(--lobe-geekblue-6-a)',
+  geekblue7A: 'var(--lobe-geekblue-7-a)',
+  geekblue8A: 'var(--lobe-geekblue-8-a)',
+  geekblue9A: 'var(--lobe-geekblue-9-a)',
+  geekblue10A: 'var(--lobe-geekblue-10-a)',
+  geekblue11A: 'var(--lobe-geekblue-11-a)',
+  geekblueFill: 'var(--lobe-geekblue-fill)',
+  geekblueFillSecondary: 'var(--lobe-geekblue-fill-secondary)',
+  geekblueFillTertiary: 'var(--lobe-geekblue-fill-tertiary)',
+  geekblueFillQuaternary: 'var(--lobe-geekblue-fill-quaternary)',
+  geekblueBg: 'var(--lobe-geekblue-bg)',
+  geekblueBgHover: 'var(--lobe-geekblue-bg-hover)',
+  geekblueBorder: 'var(--lobe-geekblue-border)',
+  geekblueBorderSecondary: 'var(--lobe-geekblue-border-secondary)',
+  geekblueBorderHover: 'var(--lobe-geekblue-border-hover)',
+  geekblueHover: 'var(--lobe-geekblue-hover)',
+  geekblue: 'var(--lobe-geekblue)',
+  geekblueActive: 'var(--lobe-geekblue-active)',
+  geekblueTextHover: 'var(--lobe-geekblue-text-hover)',
+  geekblueText: 'var(--lobe-geekblue-text)',
+  geekblueTextActive: 'var(--lobe-geekblue-text-active)',
+  gold1: 'var(--lobe-gold-1)',
+  gold2: 'var(--lobe-gold-2)',
+  gold3: 'var(--lobe-gold-3)',
+  gold4: 'var(--lobe-gold-4)',
+  gold5: 'var(--lobe-gold-5)',
+  gold6: 'var(--lobe-gold-6)',
+  gold7: 'var(--lobe-gold-7)',
+  gold8: 'var(--lobe-gold-8)',
+  gold9: 'var(--lobe-gold-9)',
+  gold10: 'var(--lobe-gold-10)',
+  gold11: 'var(--lobe-gold-11)',
+  gold1A: 'var(--lobe-gold-1-a)',
+  gold2A: 'var(--lobe-gold-2-a)',
+  gold3A: 'var(--lobe-gold-3-a)',
+  gold4A: 'var(--lobe-gold-4-a)',
+  gold5A: 'var(--lobe-gold-5-a)',
+  gold6A: 'var(--lobe-gold-6-a)',
+  gold7A: 'var(--lobe-gold-7-a)',
+  gold8A: 'var(--lobe-gold-8-a)',
+  gold9A: 'var(--lobe-gold-9-a)',
+  gold10A: 'var(--lobe-gold-10-a)',
+  gold11A: 'var(--lobe-gold-11-a)',
+  goldFill: 'var(--lobe-gold-fill)',
+  goldFillSecondary: 'var(--lobe-gold-fill-secondary)',
+  goldFillTertiary: 'var(--lobe-gold-fill-tertiary)',
+  goldFillQuaternary: 'var(--lobe-gold-fill-quaternary)',
+  goldBg: 'var(--lobe-gold-bg)',
+  goldBgHover: 'var(--lobe-gold-bg-hover)',
+  goldBorder: 'var(--lobe-gold-border)',
+  goldBorderSecondary: 'var(--lobe-gold-border-secondary)',
+  goldBorderHover: 'var(--lobe-gold-border-hover)',
+  goldHover: 'var(--lobe-gold-hover)',
+  gold: 'var(--lobe-gold)',
+  goldActive: 'var(--lobe-gold-active)',
+  goldTextHover: 'var(--lobe-gold-text-hover)',
+  goldText: 'var(--lobe-gold-text)',
+  goldTextActive: 'var(--lobe-gold-text-active)',
+  gray1: 'var(--lobe-gray-1)',
+  gray2: 'var(--lobe-gray-2)',
+  gray3: 'var(--lobe-gray-3)',
+  gray4: 'var(--lobe-gray-4)',
+  gray5: 'var(--lobe-gray-5)',
+  gray6: 'var(--lobe-gray-6)',
+  gray7: 'var(--lobe-gray-7)',
+  gray8: 'var(--lobe-gray-8)',
+  gray9: 'var(--lobe-gray-9)',
+  gray10: 'var(--lobe-gray-10)',
+  gray11: 'var(--lobe-gray-11)',
+  gray1A: 'var(--lobe-gray-1-a)',
+  gray2A: 'var(--lobe-gray-2-a)',
+  gray3A: 'var(--lobe-gray-3-a)',
+  gray4A: 'var(--lobe-gray-4-a)',
+  gray5A: 'var(--lobe-gray-5-a)',
+  gray6A: 'var(--lobe-gray-6-a)',
+  gray7A: 'var(--lobe-gray-7-a)',
+  gray8A: 'var(--lobe-gray-8-a)',
+  gray9A: 'var(--lobe-gray-9-a)',
+  gray10A: 'var(--lobe-gray-10-a)',
+  gray11A: 'var(--lobe-gray-11-a)',
+  grayFill: 'var(--lobe-gray-fill)',
+  grayFillSecondary: 'var(--lobe-gray-fill-secondary)',
+  grayFillTertiary: 'var(--lobe-gray-fill-tertiary)',
+  grayFillQuaternary: 'var(--lobe-gray-fill-quaternary)',
+  grayBg: 'var(--lobe-gray-bg)',
+  grayBgHover: 'var(--lobe-gray-bg-hover)',
+  grayBorder: 'var(--lobe-gray-border)',
+  grayBorderSecondary: 'var(--lobe-gray-border-secondary)',
+  grayBorderHover: 'var(--lobe-gray-border-hover)',
+  grayHover: 'var(--lobe-gray-hover)',
+  gray: 'var(--lobe-gray)',
+  grayActive: 'var(--lobe-gray-active)',
+  grayTextHover: 'var(--lobe-gray-text-hover)',
+  grayText: 'var(--lobe-gray-text)',
+  grayTextActive: 'var(--lobe-gray-text-active)',
+  green1: 'var(--lobe-green-1)',
+  green2: 'var(--lobe-green-2)',
+  green3: 'var(--lobe-green-3)',
+  green4: 'var(--lobe-green-4)',
+  green5: 'var(--lobe-green-5)',
+  green6: 'var(--lobe-green-6)',
+  green7: 'var(--lobe-green-7)',
+  green8: 'var(--lobe-green-8)',
+  green9: 'var(--lobe-green-9)',
+  green10: 'var(--lobe-green-10)',
+  green11: 'var(--lobe-green-11)',
+  green1A: 'var(--lobe-green-1-a)',
+  green2A: 'var(--lobe-green-2-a)',
+  green3A: 'var(--lobe-green-3-a)',
+  green4A: 'var(--lobe-green-4-a)',
+  green5A: 'var(--lobe-green-5-a)',
+  green6A: 'var(--lobe-green-6-a)',
+  green7A: 'var(--lobe-green-7-a)',
+  green8A: 'var(--lobe-green-8-a)',
+  green9A: 'var(--lobe-green-9-a)',
+  green10A: 'var(--lobe-green-10-a)',
+  green11A: 'var(--lobe-green-11-a)',
+  greenFill: 'var(--lobe-green-fill)',
+  greenFillSecondary: 'var(--lobe-green-fill-secondary)',
+  greenFillTertiary: 'var(--lobe-green-fill-tertiary)',
+  greenFillQuaternary: 'var(--lobe-green-fill-quaternary)',
+  greenBg: 'var(--lobe-green-bg)',
+  greenBgHover: 'var(--lobe-green-bg-hover)',
+  greenBorder: 'var(--lobe-green-border)',
+  greenBorderSecondary: 'var(--lobe-green-border-secondary)',
+  greenBorderHover: 'var(--lobe-green-border-hover)',
+  greenHover: 'var(--lobe-green-hover)',
+  green: 'var(--lobe-green)',
+  greenActive: 'var(--lobe-green-active)',
+  greenTextHover: 'var(--lobe-green-text-hover)',
+  greenText: 'var(--lobe-green-text)',
+  greenTextActive: 'var(--lobe-green-text-active)',
+  lime1: 'var(--lobe-lime-1)',
+  lime2: 'var(--lobe-lime-2)',
+  lime3: 'var(--lobe-lime-3)',
+  lime4: 'var(--lobe-lime-4)',
+  lime5: 'var(--lobe-lime-5)',
+  lime6: 'var(--lobe-lime-6)',
+  lime7: 'var(--lobe-lime-7)',
+  lime8: 'var(--lobe-lime-8)',
+  lime9: 'var(--lobe-lime-9)',
+  lime10: 'var(--lobe-lime-10)',
+  lime11: 'var(--lobe-lime-11)',
+  lime1A: 'var(--lobe-lime-1-a)',
+  lime2A: 'var(--lobe-lime-2-a)',
+  lime3A: 'var(--lobe-lime-3-a)',
+  lime4A: 'var(--lobe-lime-4-a)',
+  lime5A: 'var(--lobe-lime-5-a)',
+  lime6A: 'var(--lobe-lime-6-a)',
+  lime7A: 'var(--lobe-lime-7-a)',
+  lime8A: 'var(--lobe-lime-8-a)',
+  lime9A: 'var(--lobe-lime-9-a)',
+  lime10A: 'var(--lobe-lime-10-a)',
+  lime11A: 'var(--lobe-lime-11-a)',
+  limeFill: 'var(--lobe-lime-fill)',
+  limeFillSecondary: 'var(--lobe-lime-fill-secondary)',
+  limeFillTertiary: 'var(--lobe-lime-fill-tertiary)',
+  limeFillQuaternary: 'var(--lobe-lime-fill-quaternary)',
+  limeBg: 'var(--lobe-lime-bg)',
+  limeBgHover: 'var(--lobe-lime-bg-hover)',
+  limeBorder: 'var(--lobe-lime-border)',
+  limeBorderSecondary: 'var(--lobe-lime-border-secondary)',
+  limeBorderHover: 'var(--lobe-lime-border-hover)',
+  limeHover: 'var(--lobe-lime-hover)',
+  lime: 'var(--lobe-lime)',
+  limeActive: 'var(--lobe-lime-active)',
+  limeTextHover: 'var(--lobe-lime-text-hover)',
+  limeText: 'var(--lobe-lime-text)',
+  limeTextActive: 'var(--lobe-lime-text-active)',
+  magenta1: 'var(--lobe-magenta-1)',
+  magenta2: 'var(--lobe-magenta-2)',
+  magenta3: 'var(--lobe-magenta-3)',
+  magenta4: 'var(--lobe-magenta-4)',
+  magenta5: 'var(--lobe-magenta-5)',
+  magenta6: 'var(--lobe-magenta-6)',
+  magenta7: 'var(--lobe-magenta-7)',
+  magenta8: 'var(--lobe-magenta-8)',
+  magenta9: 'var(--lobe-magenta-9)',
+  magenta10: 'var(--lobe-magenta-10)',
+  magenta11: 'var(--lobe-magenta-11)',
+  magenta1A: 'var(--lobe-magenta-1-a)',
+  magenta2A: 'var(--lobe-magenta-2-a)',
+  magenta3A: 'var(--lobe-magenta-3-a)',
+  magenta4A: 'var(--lobe-magenta-4-a)',
+  magenta5A: 'var(--lobe-magenta-5-a)',
+  magenta6A: 'var(--lobe-magenta-6-a)',
+  magenta7A: 'var(--lobe-magenta-7-a)',
+  magenta8A: 'var(--lobe-magenta-8-a)',
+  magenta9A: 'var(--lobe-magenta-9-a)',
+  magenta10A: 'var(--lobe-magenta-10-a)',
+  magenta11A: 'var(--lobe-magenta-11-a)',
+  magentaFill: 'var(--lobe-magenta-fill)',
+  magentaFillSecondary: 'var(--lobe-magenta-fill-secondary)',
+  magentaFillTertiary: 'var(--lobe-magenta-fill-tertiary)',
+  magentaFillQuaternary: 'var(--lobe-magenta-fill-quaternary)',
+  magentaBg: 'var(--lobe-magenta-bg)',
+  magentaBgHover: 'var(--lobe-magenta-bg-hover)',
+  magentaBorder: 'var(--lobe-magenta-border)',
+  magentaBorderSecondary: 'var(--lobe-magenta-border-secondary)',
+  magentaBorderHover: 'var(--lobe-magenta-border-hover)',
+  magentaHover: 'var(--lobe-magenta-hover)',
+  magenta: 'var(--lobe-magenta)',
+  magentaActive: 'var(--lobe-magenta-active)',
+  magentaTextHover: 'var(--lobe-magenta-text-hover)',
+  magentaText: 'var(--lobe-magenta-text)',
+  magentaTextActive: 'var(--lobe-magenta-text-active)',
+  orange1: 'var(--lobe-orange-1)',
+  orange2: 'var(--lobe-orange-2)',
+  orange3: 'var(--lobe-orange-3)',
+  orange4: 'var(--lobe-orange-4)',
+  orange5: 'var(--lobe-orange-5)',
+  orange6: 'var(--lobe-orange-6)',
+  orange7: 'var(--lobe-orange-7)',
+  orange8: 'var(--lobe-orange-8)',
+  orange9: 'var(--lobe-orange-9)',
+  orange10: 'var(--lobe-orange-10)',
+  orange11: 'var(--lobe-orange-11)',
+  orange1A: 'var(--lobe-orange-1-a)',
+  orange2A: 'var(--lobe-orange-2-a)',
+  orange3A: 'var(--lobe-orange-3-a)',
+  orange4A: 'var(--lobe-orange-4-a)',
+  orange5A: 'var(--lobe-orange-5-a)',
+  orange6A: 'var(--lobe-orange-6-a)',
+  orange7A: 'var(--lobe-orange-7-a)',
+  orange8A: 'var(--lobe-orange-8-a)',
+  orange9A: 'var(--lobe-orange-9-a)',
+  orange10A: 'var(--lobe-orange-10-a)',
+  orange11A: 'var(--lobe-orange-11-a)',
+  orangeFill: 'var(--lobe-orange-fill)',
+  orangeFillSecondary: 'var(--lobe-orange-fill-secondary)',
+  orangeFillTertiary: 'var(--lobe-orange-fill-tertiary)',
+  orangeFillQuaternary: 'var(--lobe-orange-fill-quaternary)',
+  orangeBg: 'var(--lobe-orange-bg)',
+  orangeBgHover: 'var(--lobe-orange-bg-hover)',
+  orangeBorder: 'var(--lobe-orange-border)',
+  orangeBorderSecondary: 'var(--lobe-orange-border-secondary)',
+  orangeBorderHover: 'var(--lobe-orange-border-hover)',
+  orangeHover: 'var(--lobe-orange-hover)',
+  orange: 'var(--lobe-orange)',
+  orangeActive: 'var(--lobe-orange-active)',
+  orangeTextHover: 'var(--lobe-orange-text-hover)',
+  orangeText: 'var(--lobe-orange-text)',
+  orangeTextActive: 'var(--lobe-orange-text-active)',
+  primary1: 'var(--lobe-primary-1)',
+  primary2: 'var(--lobe-primary-2)',
+  primary3: 'var(--lobe-primary-3)',
+  primary4: 'var(--lobe-primary-4)',
+  primary5: 'var(--lobe-primary-5)',
+  primary6: 'var(--lobe-primary-6)',
+  primary7: 'var(--lobe-primary-7)',
+  primary8: 'var(--lobe-primary-8)',
+  primary9: 'var(--lobe-primary-9)',
+  primary10: 'var(--lobe-primary-10)',
+  primary11: 'var(--lobe-primary-11)',
+  primary1A: 'var(--lobe-primary-1-a)',
+  primary2A: 'var(--lobe-primary-2-a)',
+  primary3A: 'var(--lobe-primary-3-a)',
+  primary4A: 'var(--lobe-primary-4-a)',
+  primary5A: 'var(--lobe-primary-5-a)',
+  primary6A: 'var(--lobe-primary-6-a)',
+  primary7A: 'var(--lobe-primary-7-a)',
+  primary8A: 'var(--lobe-primary-8-a)',
+  primary9A: 'var(--lobe-primary-9-a)',
+  primary10A: 'var(--lobe-primary-10-a)',
+  primary11A: 'var(--lobe-primary-11-a)',
+  primaryFill: 'var(--lobe-primary-fill)',
+  primaryFillSecondary: 'var(--lobe-primary-fill-secondary)',
+  primaryFillTertiary: 'var(--lobe-primary-fill-tertiary)',
+  primaryFillQuaternary: 'var(--lobe-primary-fill-quaternary)',
+  primaryBg: 'var(--lobe-primary-bg)',
+  primaryBgHover: 'var(--lobe-primary-bg-hover)',
+  primaryBorder: 'var(--lobe-primary-border)',
+  primaryBorderSecondary: 'var(--lobe-primary-border-secondary)',
+  primaryBorderHover: 'var(--lobe-primary-border-hover)',
+  primaryHover: 'var(--lobe-primary-hover)',
+  primary: 'var(--lobe-primary)',
+  primaryActive: 'var(--lobe-primary-active)',
+  primaryTextHover: 'var(--lobe-primary-text-hover)',
+  primaryText: 'var(--lobe-primary-text)',
+  primaryTextActive: 'var(--lobe-primary-text-active)',
+  purple1: 'var(--lobe-purple-1)',
+  purple2: 'var(--lobe-purple-2)',
+  purple3: 'var(--lobe-purple-3)',
+  purple4: 'var(--lobe-purple-4)',
+  purple5: 'var(--lobe-purple-5)',
+  purple6: 'var(--lobe-purple-6)',
+  purple7: 'var(--lobe-purple-7)',
+  purple8: 'var(--lobe-purple-8)',
+  purple9: 'var(--lobe-purple-9)',
+  purple10: 'var(--lobe-purple-10)',
+  purple11: 'var(--lobe-purple-11)',
+  purple1A: 'var(--lobe-purple-1-a)',
+  purple2A: 'var(--lobe-purple-2-a)',
+  purple3A: 'var(--lobe-purple-3-a)',
+  purple4A: 'var(--lobe-purple-4-a)',
+  purple5A: 'var(--lobe-purple-5-a)',
+  purple6A: 'var(--lobe-purple-6-a)',
+  purple7A: 'var(--lobe-purple-7-a)',
+  purple8A: 'var(--lobe-purple-8-a)',
+  purple9A: 'var(--lobe-purple-9-a)',
+  purple10A: 'var(--lobe-purple-10-a)',
+  purple11A: 'var(--lobe-purple-11-a)',
+  purpleFill: 'var(--lobe-purple-fill)',
+  purpleFillSecondary: 'var(--lobe-purple-fill-secondary)',
+  purpleFillTertiary: 'var(--lobe-purple-fill-tertiary)',
+  purpleFillQuaternary: 'var(--lobe-purple-fill-quaternary)',
+  purpleBg: 'var(--lobe-purple-bg)',
+  purpleBgHover: 'var(--lobe-purple-bg-hover)',
+  purpleBorder: 'var(--lobe-purple-border)',
+  purpleBorderSecondary: 'var(--lobe-purple-border-secondary)',
+  purpleBorderHover: 'var(--lobe-purple-border-hover)',
+  purpleHover: 'var(--lobe-purple-hover)',
+  purple: 'var(--lobe-purple)',
+  purpleActive: 'var(--lobe-purple-active)',
+  purpleTextHover: 'var(--lobe-purple-text-hover)',
+  purpleText: 'var(--lobe-purple-text)',
+  purpleTextActive: 'var(--lobe-purple-text-active)',
+  red1: 'var(--lobe-red-1)',
+  red2: 'var(--lobe-red-2)',
+  red3: 'var(--lobe-red-3)',
+  red4: 'var(--lobe-red-4)',
+  red5: 'var(--lobe-red-5)',
+  red6: 'var(--lobe-red-6)',
+  red7: 'var(--lobe-red-7)',
+  red8: 'var(--lobe-red-8)',
+  red9: 'var(--lobe-red-9)',
+  red10: 'var(--lobe-red-10)',
+  red11: 'var(--lobe-red-11)',
+  red1A: 'var(--lobe-red-1-a)',
+  red2A: 'var(--lobe-red-2-a)',
+  red3A: 'var(--lobe-red-3-a)',
+  red4A: 'var(--lobe-red-4-a)',
+  red5A: 'var(--lobe-red-5-a)',
+  red6A: 'var(--lobe-red-6-a)',
+  red7A: 'var(--lobe-red-7-a)',
+  red8A: 'var(--lobe-red-8-a)',
+  red9A: 'var(--lobe-red-9-a)',
+  red10A: 'var(--lobe-red-10-a)',
+  red11A: 'var(--lobe-red-11-a)',
+  redFill: 'var(--lobe-red-fill)',
+  redFillSecondary: 'var(--lobe-red-fill-secondary)',
+  redFillTertiary: 'var(--lobe-red-fill-tertiary)',
+  redFillQuaternary: 'var(--lobe-red-fill-quaternary)',
+  redBg: 'var(--lobe-red-bg)',
+  redBgHover: 'var(--lobe-red-bg-hover)',
+  redBorder: 'var(--lobe-red-border)',
+  redBorderSecondary: 'var(--lobe-red-border-secondary)',
+  redBorderHover: 'var(--lobe-red-border-hover)',
+  redHover: 'var(--lobe-red-hover)',
+  red: 'var(--lobe-red)',
+  redActive: 'var(--lobe-red-active)',
+  redTextHover: 'var(--lobe-red-text-hover)',
+  redText: 'var(--lobe-red-text)',
+  redTextActive: 'var(--lobe-red-text-active)',
+  volcano1: 'var(--lobe-volcano-1)',
+  volcano2: 'var(--lobe-volcano-2)',
+  volcano3: 'var(--lobe-volcano-3)',
+  volcano4: 'var(--lobe-volcano-4)',
+  volcano5: 'var(--lobe-volcano-5)',
+  volcano6: 'var(--lobe-volcano-6)',
+  volcano7: 'var(--lobe-volcano-7)',
+  volcano8: 'var(--lobe-volcano-8)',
+  volcano9: 'var(--lobe-volcano-9)',
+  volcano10: 'var(--lobe-volcano-10)',
+  volcano11: 'var(--lobe-volcano-11)',
+  volcano1A: 'var(--lobe-volcano-1-a)',
+  volcano2A: 'var(--lobe-volcano-2-a)',
+  volcano3A: 'var(--lobe-volcano-3-a)',
+  volcano4A: 'var(--lobe-volcano-4-a)',
+  volcano5A: 'var(--lobe-volcano-5-a)',
+  volcano6A: 'var(--lobe-volcano-6-a)',
+  volcano7A: 'var(--lobe-volcano-7-a)',
+  volcano8A: 'var(--lobe-volcano-8-a)',
+  volcano9A: 'var(--lobe-volcano-9-a)',
+  volcano10A: 'var(--lobe-volcano-10-a)',
+  volcano11A: 'var(--lobe-volcano-11-a)',
+  volcanoFill: 'var(--lobe-volcano-fill)',
+  volcanoFillSecondary: 'var(--lobe-volcano-fill-secondary)',
+  volcanoFillTertiary: 'var(--lobe-volcano-fill-tertiary)',
+  volcanoFillQuaternary: 'var(--lobe-volcano-fill-quaternary)',
+  volcanoBg: 'var(--lobe-volcano-bg)',
+  volcanoBgHover: 'var(--lobe-volcano-bg-hover)',
+  volcanoBorder: 'var(--lobe-volcano-border)',
+  volcanoBorderSecondary: 'var(--lobe-volcano-border-secondary)',
+  volcanoBorderHover: 'var(--lobe-volcano-border-hover)',
+  volcanoHover: 'var(--lobe-volcano-hover)',
+  volcano: 'var(--lobe-volcano)',
+  volcanoActive: 'var(--lobe-volcano-active)',
+  volcanoTextHover: 'var(--lobe-volcano-text-hover)',
+  volcanoText: 'var(--lobe-volcano-text)',
+  volcanoTextActive: 'var(--lobe-volcano-text-active)',
+  yellow1: 'var(--lobe-yellow-1)',
+  yellow2: 'var(--lobe-yellow-2)',
+  yellow3: 'var(--lobe-yellow-3)',
+  yellow4: 'var(--lobe-yellow-4)',
+  yellow5: 'var(--lobe-yellow-5)',
+  yellow6: 'var(--lobe-yellow-6)',
+  yellow7: 'var(--lobe-yellow-7)',
+  yellow8: 'var(--lobe-yellow-8)',
+  yellow9: 'var(--lobe-yellow-9)',
+  yellow10: 'var(--lobe-yellow-10)',
+  yellow11: 'var(--lobe-yellow-11)',
+  yellow1A: 'var(--lobe-yellow-1-a)',
+  yellow2A: 'var(--lobe-yellow-2-a)',
+  yellow3A: 'var(--lobe-yellow-3-a)',
+  yellow4A: 'var(--lobe-yellow-4-a)',
+  yellow5A: 'var(--lobe-yellow-5-a)',
+  yellow6A: 'var(--lobe-yellow-6-a)',
+  yellow7A: 'var(--lobe-yellow-7-a)',
+  yellow8A: 'var(--lobe-yellow-8-a)',
+  yellow9A: 'var(--lobe-yellow-9-a)',
+  yellow10A: 'var(--lobe-yellow-10-a)',
+  yellow11A: 'var(--lobe-yellow-11-a)',
+  yellowFill: 'var(--lobe-yellow-fill)',
+  yellowFillSecondary: 'var(--lobe-yellow-fill-secondary)',
+  yellowFillTertiary: 'var(--lobe-yellow-fill-tertiary)',
+  yellowFillQuaternary: 'var(--lobe-yellow-fill-quaternary)',
+  yellowBg: 'var(--lobe-yellow-bg)',
+  yellowBgHover: 'var(--lobe-yellow-bg-hover)',
+  yellowBorder: 'var(--lobe-yellow-border)',
+  yellowBorderSecondary: 'var(--lobe-yellow-border-secondary)',
+  yellowBorderHover: 'var(--lobe-yellow-border-hover)',
+  yellowHover: 'var(--lobe-yellow-hover)',
+  yellow: 'var(--lobe-yellow)',
+  yellowActive: 'var(--lobe-yellow-active)',
+  yellowTextHover: 'var(--lobe-yellow-text-hover)',
+  yellowText: 'var(--lobe-yellow-text)',
+  yellowTextActive: 'var(--lobe-yellow-text-active)',
+  boxShadow: 'var(--lobe-box-shadow)',
+  boxShadowSecondary: 'var(--lobe-box-shadow-secondary)',
+  boxShadowTertiary: 'var(--lobe-box-shadow-tertiary)',
+  colorErrorAffix: 'var(--lobe-color-error-affix)',
+  colorHighlight: 'var(--lobe-color-highlight)',
+  colorLink: 'var(--lobe-color-link)',
+  colorLinkActive: 'var(--lobe-color-link-active)',
+  colorLinkHover: 'var(--lobe-color-link-hover)',
+  colorWarningAffix: 'var(--lobe-color-warning-affix)',
+  colorPrimaryFill: 'var(--lobe-color-primary-fill)',
+  colorPrimaryFillSecondary: 'var(--lobe-color-primary-fill-secondary)',
+  colorPrimaryFillTertiary: 'var(--lobe-color-primary-fill-tertiary)',
+  colorPrimaryFillQuaternary: 'var(--lobe-color-primary-fill-quaternary)',
+  colorPrimaryBg: 'var(--lobe-color-primary-bg)',
+  colorPrimaryBgHover: 'var(--lobe-color-primary-bg-hover)',
+  colorPrimaryBorder: 'var(--lobe-color-primary-border)',
+  colorPrimaryBorderHover: 'var(--lobe-color-primary-border-hover)',
+  colorPrimaryHover: 'var(--lobe-color-primary-hover)',
+  colorPrimary: 'var(--lobe-color-primary)',
+  colorPrimaryActive: 'var(--lobe-color-primary-active)',
+  colorPrimaryTextHover: 'var(--lobe-color-primary-text-hover)',
+  colorPrimaryText: 'var(--lobe-color-primary-text)',
+  colorPrimaryTextActive: 'var(--lobe-color-primary-text-active)',
+  controlItemBgActive: 'var(--lobe-control-item-bg-active)',
+  controlItemBgActiveHover: 'var(--lobe-control-item-bg-active-hover)',
+  colorBgContainer: 'var(--lobe-color-bg-container)',
+  colorBgElevated: 'var(--lobe-color-bg-elevated)',
+  colorBgLayout: 'var(--lobe-color-bg-layout)',
+  colorBgMask: 'var(--lobe-color-bg-mask)',
+  colorBgSpotlight: 'var(--lobe-color-bg-spotlight)',
+  colorBorder: 'var(--lobe-color-border)',
+  colorBorderSecondary: 'var(--lobe-color-border-secondary)',
+  colorFill: 'var(--lobe-color-fill)',
+  colorFillQuaternary: 'var(--lobe-color-fill-quaternary)',
+  colorFillSecondary: 'var(--lobe-color-fill-secondary)',
+  colorFillTertiary: 'var(--lobe-color-fill-tertiary)',
+  colorText: 'var(--lobe-color-text)',
+  colorTextQuaternary: 'var(--lobe-color-text-quaternary)',
+  colorTextSecondary: 'var(--lobe-color-text-secondary)',
+  colorTextTertiary: 'var(--lobe-color-text-tertiary)',
+  colorBgContainerDisabled: 'var(--lobe-color-bg-container-disabled)',
+  colorBgContainerSecondary: 'var(--lobe-color-bg-container-secondary)',
+  colorBgTextActive: 'var(--lobe-color-bg-text-active)',
+  colorBgTextHover: 'var(--lobe-color-bg-text-hover)',
+  colorBorderBg: 'var(--lobe-color-border-bg)',
+  colorErrorOutline: 'var(--lobe-color-error-outline)',
+  colorFillAlter: 'var(--lobe-color-fill-alter)',
+  colorFillContent: 'var(--lobe-color-fill-content)',
+  colorFillContentHover: 'var(--lobe-color-fill-content-hover)',
+  colorIcon: 'var(--lobe-color-icon)',
+  colorIconHover: 'var(--lobe-color-icon-hover)',
+  colorSplit: 'var(--lobe-color-split)',
+  colorTextDescription: 'var(--lobe-color-text-description)',
+  colorTextDisabled: 'var(--lobe-color-text-disabled)',
+  colorTextHeading: 'var(--lobe-color-text-heading)',
+  colorTextLabel: 'var(--lobe-color-text-label)',
+  colorTextPlaceholder: 'var(--lobe-color-text-placeholder)',
+  colorWarningOutline: 'var(--lobe-color-warning-outline)',
+  controlItemBgActiveDisabled: 'var(--lobe-control-item-bg-active-disabled)',
+  controlItemBgHover: 'var(--lobe-control-item-bg-hover)',
+  controlTmpOutline: 'var(--lobe-control-tmp-outline)',
+});