baseui

import type { Properties } from 'csstype'; import type { Responsive, CSSLengthUnit } from '../layout-grid'; export type Globals = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset'; export type LineStyle = 'dashed' | 'dotted' | 'double' | 'groove' | 'hidden' | 'inset' | 'none' | 'outset' | 'ridge' | 'solid'; export type FoundationColors = { primaryA: string; primaryB: string; /** @deprecated Use semantic tokens instead. */ primary: string; /** @deprecated Use semantic tokens instead. */ primary50: string; /** @deprecated Use semantic tokens instead. */ primary100: string; /** @deprecated Use semantic tokens instead. */ primary200: string; /** @deprecated Use semantic tokens instead. */ primary300: string; /** @deprecated Use semantic tokens instead. */ primary400: string; /** @deprecated Use semantic tokens instead. */ primary500: string; /** @deprecated Use semantic tokens instead. */ primary600: string; /** @deprecated Use semantic tokens instead. */ primary700: string; accent: string; /** @deprecated Use semantic tokens instead. */ accent50: string; /** @deprecated Use semantic tokens instead. */ accent100: string; /** @deprecated Use semantic tokens instead. */ accent200: string; /** @deprecated Use semantic tokens instead. */ accent300: string; /** @deprecated Use semantic tokens instead. */ accent400: string; /** @deprecated Use semantic tokens instead. */ accent500: string; /** @deprecated Use semantic tokens instead. */ accent600: string; /** @deprecated Use semantic tokens instead. */ accent700: string; negative: string; negative50: string; /** @deprecated Use semantic tokens instead. */ negative100: string; /** @deprecated Use semantic tokens instead. */ negative200: string; /** @deprecated Use semantic tokens instead. */ negative300: string; /** @deprecated Use semantic tokens instead. */ negative400: string; /** @deprecated Use semantic tokens instead. */ negative500: string; /** @deprecated Use semantic tokens instead. */ negative600: string; /** @deprecated Use semantic tokens instead. */ negative700: string; warning: string; /** @deprecated Use semantic tokens instead. */ warning50: string; /** @deprecated Use semantic tokens instead. */ warning100: string; /** @deprecated Use semantic tokens instead. */ warning200: string; /** @deprecated Use semantic tokens instead. */ warning300: string; /** @deprecated Use semantic tokens instead. */ warning400: string; /** @deprecated Use semantic tokens instead. */ warning500: string; /** @deprecated Use semantic tokens instead. */ warning600: string; /** @deprecated Use semantic tokens instead. */ warning700: string; positive: string; /** @deprecated Use semantic tokens instead. */ positive50: string; /** @deprecated Use semantic tokens instead. */ positive100: string; /** @deprecated Use semantic tokens instead. */ positive200: string; /** @deprecated Use semantic tokens instead. */ positive300: string; /** @deprecated Use semantic tokens instead. */ positive400: string; /** @deprecated Use semantic tokens instead. */ positive500: string; /** @deprecated Use semantic tokens instead. */ positive600: string; /** @deprecated Use semantic tokens instead. */ positive700: string; /** @deprecated Use semantic tokens instead. */ white: string; /** @deprecated Use semantic tokens instead. */ black: string; /** @deprecated Use semantic tokens instead. */ mono100: string; /** @deprecated Use semantic tokens instead. */ mono200: string; /** @deprecated Use semantic tokens instead. */ mono300: string; /** @deprecated Use semantic tokens instead. */ mono400: string; /** @deprecated Use semantic tokens instead. */ mono500: string; /** @deprecated Use semantic tokens instead. */ mono600: string; /** @deprecated Use semantic tokens instead. */ mono700: string; /** @deprecated Use semantic tokens instead. */ mono800: string; /** @deprecated Use semantic tokens instead. */ mono900: string; /** @deprecated Use semantic tokens instead. */ mono1000: string; }; export type CoreSemanticColors = { backgroundPrimary: string; backgroundSecondary: string; backgroundTertiary: string; backgroundInversePrimary: string; backgroundInverseSecondary: string; contentPrimary: string; contentSecondary: string; contentTertiary: string; contentInversePrimary: string; contentInverseSecondary: string; contentInverseTertiary: string; borderOpaque: string; borderTransparent: string; borderSelected: string; borderInverseOpaque: string; borderInverseTransparent: string; borderInverseSelected: string; brandBackgroundPrimary: string; brandBackgroundSecondary: string; brandBackgroundTertiary: string; brandBackgroundDisabled: string; brandContentPrimary: string; brandContentOnPrimary: string; brandContentOnSecondary: string; brandContentOnTertiary: string; brandContentOnGradient: string; brandContentDisabled: string; brandBorderAccessible: string; brandBorderSubtle: string; }; export type CoreExtensionSemanticColors = { backgroundStateDisabled: string; backgroundOverlay: string; backgroundOverlayArt: string; backgroundAccent: string; backgroundNegative: string; backgroundWarning: string; backgroundPositive: string; backgroundAccentLight: string; backgroundPositiveLight: string; backgroundNegativeLight: string; backgroundWarningLight: string; backgroundAlwaysDark: string; backgroundAlwaysLight: string; contentStateDisabled: string; contentAccent: string; contentOnColor: string; contentOnColorInverse: string; contentNegative: string; contentWarning: string; contentPositive: string; tagRedContentSecondary: string; borderStateDisabled: string; borderAccent: string; borderAccentLight: string; borderNegative: string; borderWarning: string; borderPositive: string; borderNegativeLight: string; borderWarningLight: string; borderPositiveLight: string; tagRedBorderSecondarySelected: string; safety: string; eatsGreen400: string; freightBlue400: string; rewardsTier1: string; rewardsTier2: string; rewardsTier3: string; rewardsTier4: string; membership: string; }; export type DeprecatedSemanticColors = { /** @deprecated this color token is deprecated */ jumpRed400: string; /** @deprecated this color token is deprecated */ backgroundOverlayLight: string; /** @deprecated this color token is deprecated */ backgroundOverlayDark: string; /** @deprecated this color token is deprecated */ backgroundLightAccent: string; /** @deprecated this color token is deprecated */ backgroundLightPositive: string; /** @deprecated this color token is deprecated */ backgroundLightWarning: string; /** @deprecated this color token is deprecated */ backgroundLightNegative: string; }; export type HoveredAndPressedSemanticColors = { hoverOverlayInverseAlpha: string; pressedOverlayInverseAlpha: string; hoverOverlayAlpha: string; pressedOverlayAlpha: string; hoverNegativeAlpha: string; pressedNegativeAlpha: string; }; export type SemanticColors = {} & CoreSemanticColors & CoreExtensionSemanticColors & DeprecatedSemanticColors & HoveredAndPressedSemanticColors; export type ComponentColors = { bannerActionLowInfo: string; bannerActionLowNegative: string; bannerActionLowPositive: string; bannerActionLowWarning: string; bannerActionHighInfo: string; bannerActionHighNegative: string; bannerActionHighPositive: string; bannerActionHighWarning: string; bottomNavigationText: string; bottomNavigationSelectedText: string; buttonPrimaryFill: string; buttonPrimaryText: string; buttonPrimaryHover: string; buttonPrimaryActive: string; buttonPrimaryHoverOverlay: string; buttonPrimaryActiveOverlay: string; buttonPrimarySelectedText: string; buttonPrimarySelectedFill: string; buttonPrimaryLoadingFill: string; buttonPrimarySpinnerForeground: string; buttonPrimarySpinnerBackground: string; buttonSecondaryFill: string; buttonSecondaryText: string; buttonSecondaryHover: string; buttonSecondaryActive: string; buttonSecondaryHoverOverlay: string; buttonSecondaryActiveOverlay: string; buttonSecondarySelectedText: string; buttonSecondarySelectedFill: string; buttonSecondaryLoadingFill: string; buttonSecondarySpinnerForeground: string; buttonSecondarySpinnerBackground: string; buttonTertiaryFill: string; buttonTertiaryText: string; buttonTertiaryHover: string; buttonTertiaryActive: string; buttonTertiaryHoverOverlay: string; buttonTertiaryActiveOverlay: string; buttonTertiarySelectedText: string; buttonTertiarySelectedFill: string; buttonTertiaryLoadingFill: string; buttonTertiaryFocusFill: string; buttonTertiaryDisabledActiveFill: string; buttonTertiaryDisabledActiveText: string; buttonTertiarySpinnerForeground: string; buttonTertiarySpinnerBackground: string; buttonDangerPrimaryFill: string; buttonDangerPrimaryText: string; buttonDangerPrimaryHoverOverlay: string; buttonDangerPrimaryActiveOverlay: string; buttonDangerPrimarySelectedText: string; buttonDangerPrimarySelectedFill: string; buttonDangerPrimaryLoadingFill: string; buttonDangerPrimarySpinnerForeground: string; buttonDangerPrimarySpinnerBackground: string; buttonDangerSecondaryFill: string; buttonDangerSecondaryText: string; buttonDangerSecondaryHoverOverlay: string; buttonDangerSecondaryActiveOverlay: string; buttonDangerSecondarySelectedText: string; buttonDangerSecondarySelectedFill: string; buttonDangerSecondaryLoadingFill: string; buttonDangerSecondarySpinnerForeground: string; buttonDangerSecondarySpinnerBackground: string; buttonDangerTertiaryFill: string; buttonDangerTertiaryText: string; buttonDangerTertiaryHoverOverlay: string; buttonDangerTertiaryActiveOverlay: string; buttonDangerTertiarySelectedText: string; buttonDangerTertiarySelectedFill: string; buttonDangerTertiaryLoadingFill: string; buttonDangerTertiarySpinnerForeground: string; buttonDangerTertiarySpinnerBackground: string; buttonOutlineFill: string; buttonOutlineText: string; buttonOutlineHoverOverlay: string; buttonOutlineActiveOverlay: string; buttonOutlineSelectedFill: string; buttonOutlineSelectedText: string; buttonOutlineFocusFill: string; buttonOutlineLoadingFill: string; buttonOutlineSpinnerForeground: string; buttonOutlineSpinnerBackground: string; buttonDisabledFill: string; buttonDisabledText: string; buttonDisabledActiveFill: string; buttonDisabledActiveText: string; buttonDisabledSpinnerForeground: string; buttonDisabledSpinnerBackground: string; buttonOuterBorder: string; buttonOutlineOuterBorder: string; buttonDangerTertiaryOuterBorder: string; buttonTransparentBorder: string; buttonInnerBorder: string; buttonFocusOuterBorder: string; breadcrumbsText: string; breadcrumbsSeparatorFill: string; calendarBackground: string; calendarForeground: string; calendarForegroundDisabled: string; calendarHeaderBackground: string; calendarHeaderForeground: string; calendarHeaderBackgroundActive: string; calendarHeaderForegroundDisabled: string; calendarDayForegroundPseudoSelected: string; calendarDayBackgroundPseudoSelectedHighlighted: string; calendarDayForegroundPseudoSelectedHighlighted: string; calendarDayBackgroundSelected: string; calendarDayForegroundSelected: string; calendarDayBackgroundSelectedHighlighted: string; calendarDayForegroundSelectedHighlighted: string; comboboxListItemFocus: string; comboboxListItemHover: string; fileUploaderBackgroundColor: string; fileUploaderBackgroundColorActive: string; fileUploaderBorderColorActive: string; fileUploaderBorderColorDefault: string; fileUploaderMessageColor: string; linkText: string; linkVisited: string; linkHover: string; linkActive: string; listHeaderFill: string; listBodyFill: string; progressStepsCompletedText: string; progressStepsCompletedFill: string; progressStepsActiveText: string; progressStepsActiveFill: string; toggleFill: string; toggleFillChecked: string; toggleFillDisabled: string; toggleTrackFill: string; toggleTrackFillDisabled: string; tickFill: string; tickFillHover: string; tickFillActive: string; tickFillSelected: string; tickFillSelectedHover: string; tickFillSelectedHoverActive: string; tickFillError: string; tickFillErrorHover: string; tickFillErrorHoverActive: string; tickFillErrorSelected: string; tickFillErrorSelectedHover: string; tickFillErrorSelectedHoverActive: string; tickFillDisabled: string; tickBorder: string; tickBorderError: string; tickMarkFill: string; tickMarkFillDisabled: string; tickMarkFillError: string; sliderTrackFill: string; sliderTrackFillHover: string; sliderTrackFillActive: string; sliderTrackFillDisabled: string; sliderHandleFill: string; sliderHandleFillDisabled: string; sliderHandleInnerFill: string; sliderHandleInnerFillDisabled: string; sliderHandleInnerFillSelectedHover: string; sliderHandleInnerFillSelectedActive: string; inputBorder: string; inputFill: string; inputFillError: string; inputFillDisabled: string; inputFillActive: string; inputFillPositive: string; inputTextDisabled: string; inputBorderError: string; inputBorderPositive: string; inputEnhancerFill: string; inputEnhancerFillDisabled: string; inputEnhancerTextDisabled: string; inputPlaceholder: string; inputPlaceholderDisabled: string; notificationInfoBackground: string; notificationInfoText: string; notificationPositiveBackground: string; notificationPositiveText: string; notificationWarningBackground: string; notificationWarningText: string; notificationNegativeBackground: string; notificationNegativeText: string; menuFill: string; menuFillHover: string; menuFontDefault: string; menuFontDisabled: string; menuFontHighlighted: string; menuFontSelected: string; modalCloseColor: string; modalCloseColorHover: string; modalCloseColorFocus: string; tabBarFill: string; tabColor: string; tagSolidRampUnit: string; tagSolidHoverRampUnit: string; tagSolidActiveRampUnit: string; tagSolidDisabledRampUnit: string; tagSolidFontRampUnit: string; tagSolidFontHoverRampUnit: string; tagLightRampUnit: string; tagLightHoverRampUnit: string; tagLightActiveRampUnit: string; tagLightFontRampUnit: string; tagLightFontHoverRampUnit: string; tagOutlinedRampUnit: string; tagOutlinedHoverRampUnit: string; tagOutlinedActiveRampUnit: string; tagOutlinedFontRampUnit: string; tagOutlinedFontHoverRampUnit: string; tagFontDisabledRampUnit: string; tagNeutralSolidBackground: string; tagNeutralSolidHover: string; tagNeutralSolidActive: string; tagNeutralSolidDisabled: string; tagNeutralSolidFont: string; tagNeutralSolidFontHover: string; tagNeutralLightBackground: string; tagNeutralLightHover: string; tagNeutralLightActive: string; tagNeutralLightDisabled: string; tagNeutralLightFont: string; tagNeutralLightFontHover: string; tagNeutralOutlinedBackground: string; tagNeutralOutlinedHover: string; tagNeutralOutlinedActive: string; tagNeutralOutlinedDisabled: string; tagNeutralOutlinedFont: string; tagNeutralOutlinedFontHover: string; tagNeutralFontDisabled: string; tagPrimarySolidBackground: string; tagPrimarySolidHover: string; tagPrimarySolidActive: string; tagPrimarySolidDisabled: string; tagPrimarySolidFont: string; tagPrimarySolidFontHover: string; tagPrimaryLightBackground: string; tagPrimaryLightHover: string; tagPrimaryLightActive: string; tagPrimaryLightDisabled: string; tagPrimaryLightFont: string; tagPrimaryLightFontHover: string; tagPrimaryOutlinedBackground: string; tagPrimaryOutlinedHover: string; tagPrimaryOutlinedActive: string; tagPrimaryOutlinedDisabled: string; tagPrimaryOutlinedFont: string; tagPrimaryOutlinedFontHover: string; tagPrimaryFontDisabled: string; tagAccentSolidBackground: string; tagAccentSolidHover: string; tagAccentSolidActive: string; tagAccentSolidDisabled: string; tagAccentSolidFont: string; tagAccentSolidFontHover: string; tagAccentLightBackground: string; tagAccentLightHover: string; tagAccentLightActive: string; tagAccentLightDisabled: string; tagAccentLightFont: string; tagAccentLightFontHover: string; tagAccentOutlinedBackground: string; tagAccentOutlinedHover: string; tagAccentOutlinedActive: string; tagAccentOutlinedDisabled: string; tagAccentOutlinedFont: string; tagAccentOutlinedFontHover: string; tagAccentFontDisabled: string; tagPositiveSolidBackground: string; tagPositiveSolidHover: string; tagPositiveSolidActive: string; tagPositiveSolidDisabled: string; tagPositiveSolidFont: string; tagPositiveSolidFontHover: string; tagPositiveLightBackground: string; tagPositiveLightHover: string; tagPositiveLightActive: string; tagPositiveLightDisabled: string; tagPositiveLightFont: string; tagPositiveLightFontHover: string; tagPositiveOutlinedBackground: string; tagPositiveOutlinedHover: string; tagPositiveOutlinedActive: string; tagPositiveOutlinedDisabled: string; tagPositiveOutlinedFont: string; tagPositiveOutlinedFontHover: string; tagPositiveFontDisabled: string; tagWarningSolidBackground: string; tagWarningSolidHover: string; tagWarningSolidActive: string; tagWarningSolidDisabled: string; tagWarningSolidFont: string; tagWarningSolidFontHover: string; tagWarningLightBackground: string; tagWarningLightHover: string; tagWarningLightActive: string; tagWarningLightDisabled: string; tagWarningLightFont: string; tagWarningLightFontHover: string; tagWarningOutlinedBackground: string; tagWarningOutlinedHover: string; tagWarningOutlinedActive: string; tagWarningOutlinedDisabled: string; tagWarningOutlinedFont: string; tagWarningOutlinedFontHover: string; tagWarningFontDisabled: string; tagNegativeSolidBackground: string; tagNegativeSolidHover: string; tagNegativeSolidActive: string; tagNegativeSolidDisabled: string; tagNegativeSolidFont: string; tagNegativeSolidFontHover: string; tagNegativeLightBackground: string; tagNegativeLightHover: string; tagNegativeLightActive: string; tagNegativeLightDisabled: string; tagNegativeLightFont: string; tagNegativeLightFontHover: string; tagNegativeOutlinedBackground: string; tagNegativeOutlinedHover: string; tagNegativeOutlinedActive: string; tagNegativeOutlinedDisabled: string; tagNegativeOutlinedFont: string; tagNegativeOutlinedFontHover: string; tagNegativeFontDisabled: string; tableHeadBackgroundColor: string; tableBackground: string; tableStripedBackground: string; tableFilter: string; tableFilterHeading: string; tableFilterBackground: string; tableFilterFooterBackground: string; toastText: string; toastPrimaryText: string; toastInfoBackground: string; toastInfoText: string; toastPositiveBackground: string; toastPositiveText: string; toastWarningBackground: string; toastWarningText: string; toastNegativeBackground: string; toastNegativeText: string; spinnerTrackFill: string; progressbarTrackFill: string; tooltipBackground: string; tooltipText: string; ratingInactiveFill: string; ratingStroke: string; }; export type FontTokens = { primaryFontFamily: string; secondaryFontFamily: string; monoFontFamily: string; }; export type Primitives = {} & FoundationColors & FontTokens; export type Font = { fontFamily: string; fontWeight: Globals | 'bold' | 'normal' | 'bolder' | 'lighter' | number; fontSize: string; lineHeight: string | number; }; export type Typography = { font100: Font; font150: Font; font200: Font; font250: Font; font300: Font; font350: Font; font400: Font; font450: Font; font550: Font; font650: Font; font750: Font; font850: Font; font950: Font; font1050: Font; font1150: Font; font1250: Font; font1350: Font; font1450: Font; ParagraphXSmall: Font; ParagraphSmall: Font; ParagraphMedium: Font; ParagraphLarge: Font; LabelXSmall: Font; LabelSmall: Font; LabelMedium: Font; LabelLarge: Font; HeadingXSmall: Font; HeadingSmall: Font; HeadingMedium: Font; HeadingLarge: Font; HeadingXLarge: Font; HeadingXXLarge: Font; DisplayXSmall: Font; DisplaySmall: Font; DisplayMedium: Font; DisplayLarge: Font; MonoParagraphXSmall: Font; MonoParagraphSmall: Font; MonoParagraphMedium: Font; MonoParagraphLarge: Font; MonoLabelXSmall: Font; MonoLabelSmall: Font; MonoLabelMedium: Font; MonoLabelLarge: Font; MonoHeadingXSmall: Font; MonoHeadingSmall: Font; MonoHeadingMedium: Font; MonoHeadingLarge: Font; MonoHeadingXLarge: Font; MonoHeadingXXLarge: Font; MonoDisplayXSmall: Font; MonoDisplaySmall: Font; MonoDisplayMedium: Font; MonoDisplayLarge: Font; }; export type Sizing = { /** 2px */ scale0: string; /** 4px */ scale100: string; /** 6px */ scale200: string; /** 8px */ scale300: string; /** 10px */ scale400: string; /** 12px */ scale500: string; /** 14px */ scale550: string; /** 16px */ scale600: string; /** 18px */ scale650: string; /** 20px */ scale700: string; /** 22px */ scale750: string; /** 24px */ scale800: string; /** 28px */ scale850: string; /** 32px */ scale900: string; /** 36px */ scale950: string; /** 40px */ scale1000: string; /** 48px */ scale1200: string; /** 56px */ scale1400: string; /** 64px */ scale1600: string; /** 96px */ scale2400: string; /** 128px */ scale3200: string; /** 192px */ scale4800: string; }; export type Breakpoints = { small: number; medium: number; large: number; }; export type MediaQuery = { small: string; medium: string; large: string; }; export type Lighting = { shadow400: string; shadow500: string; shadow600: string; shadow700: string; overlay0: string; overlay100: string; overlay200: string; overlay300: string; overlay400: string; overlay500: string; overlay600: string; shallowAbove: string; shallowBelow: string; deepAbove: string; deepBelow: string; }; export type Animation = { timing0: string; timing100: string; timing150: string; timing200: string; timing250: string; timing300: string; timing400: string; timing500: string; timing600: string; timing700: string; timing800: string; timing900: string; timing1000: string; timing1500: string; timing3000: string; timing5000: string; timing7000: string; easeOutCurve: string; easeInCurve: string; easeInOutCurve: string; easeInQuinticCurve: string; easeOutQuinticCurve: string; easeInOutQuinticCurve: string; linearCurve: string; easeLinear: string; easeDecelerate: string; easeAccelerate: string; easeAccelerateDecelerate: string; easeResponsiveAccelerate: string; }; export type Border = { borderColor: Properties['borderColor']; borderStyle: Properties['borderLeftStyle']; borderWidth: Properties['borderWidth']; }; export type Borders = { border100: Border; border200: Border; border300: Border; border400: Border; border500: Border; border600: Border; radius100: string; radius200: string; radius300: string; radius400: string; radius500: string; useRoundedCorners: boolean; buttonBorderRadius: string; buttonBorderRadiusMini: string; checkboxBorderRadius: string; surfaceBorderRadius: string; inputBorderRadius: string; inputBorderRadiusMini: string; popoverBorderRadius: string; tagBorderRadius: string; }; export type Grid = { columns: Responsive<number>; gutters: Responsive<number>; margins: Responsive<number>; gaps: Responsive<number>; maxWidth: number; unit: CSSLengthUnit; }; export type ZIndex = { modal: number; };