@kiwicom/orbit-design-tokens

/** ##################################################### # # # DO NOT EDIT DIRECTLY, THIS FILE IS AUTO-GENERATED # # # ##################################################### If you want to update some tokens: - please do so in /definitions folder - run @kiwicom/orbit-design-tokens "build" script */ type Blue = { dark: string; darkActive: string; darkHover: string; darker: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; type Bundle = { basic: string; medium: string; }; type Cloud = { dark: string; darkActive: string; darkHover: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; type Green = { dark: string; darkActive: string; darkHover: string; darker: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; type Ink = { dark: string; darkActive: string; darkHover: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; type Orange = { dark: string; darkActive: string; darkHover: string; darker: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; type Product = { dark: string; darkActive: string; darkHover: string; darker: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; type Red = { dark: string; darkActive: string; darkHover: string; darker: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; type Social = { facebook: string; facebookHover: string; facebookActive: string; }; type White = { normal: string; normalActive: string; normalHover: string; }; type BorderRadius = { 50: string; 100: string; 150: string; 200: string; 300: string; 400: string; none: string; full: string; }; type Breakpoint = { smallMobile: number; mediumMobile: number; largeMobile: number; tablet: number; desktop: number; largeDesktop: number; }; type Elevations = { base: string; navbar: string; }; type Size = { small: string; medium: string; large: string; extraLarge: string; extraExtraLarge: string; }; type Space = { 50: string; 100: string; 150: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 1000: string; 1200: string; 1300: string; 1600: string; }; type FontFamily = { base: string; }; type FontSize = { small: string; normal: string; large: string; extraLarge: string; }; type LineHeight = { small: string; normal: string; large: string; extraLarge: string; }; type FontWeight = { normal: string; medium: string; bold: string; }; type CustomFoundation = { palette?: Partial<{ blue?: Partial<Blue>; bundle?: Partial<Bundle>; cloud?: Partial<Cloud>; green?: Partial<Green>; ink?: Partial<Ink>; orange?: Partial<Orange>; product?: Partial<Product>; red?: Partial<Red>; social?: Partial<Social>; white?: Partial<White>; }>; borderRadius?: Partial<BorderRadius>; breakpoint?: Partial<Breakpoint>; elevations?: Partial<Elevations>; size?: Partial<Size>; space?: Partial<Space>; fontFamily?: Partial<FontFamily>; fontSize?: Partial<FontSize>; lineHeight?: Partial<LineHeight>; fontWeight?: Partial<FontWeight>; }; declare const foundation: { palette: { blue: { dark: string; darkActive: string; darkHover: string; darker: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; bundle: { basic: string; medium: string; }; cloud: { dark: string; darkActive: string; darkHover: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; green: { dark: string; darkActive: string; darkHover: string; darker: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; ink: { dark: string; darkActive: string; darkHover: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; orange: { dark: string; darkActive: string; darkHover: string; darker: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; product: { dark: string; darkActive: string; darkHover: string; darker: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; red: { dark: string; darkActive: string; darkHover: string; darker: string; light: string; lightActive: string; lightHover: string; normal: string; normalActive: string; normalHover: string; }; social: { facebook: string; facebookHover: string; facebookActive: string; }; white: { normal: string; normalActive: string; normalHover: string; }; }; borderRadius: { 50: string; 100: string; 150: string; 200: string; 300: string; 400: string; none: string; full: string; }; breakpoint: { smallMobile: number; mediumMobile: number; largeMobile: number; tablet: number; desktop: number; largeDesktop: number; }; elevations: { base: string; navbar: string; }; size: { small: string; medium: string; large: string; extraLarge: string; extraExtraLarge: string; }; space: { 50: string; 100: string; 150: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 1000: string; 1200: string; 1300: string; 1600: string; }; fontFamily: { base: string; }; fontSize: { small: string; normal: string; large: string; extraLarge: string; }; lineHeight: { small: string; normal: string; large: string; extraLarge: string; }; fontWeight: { normal: string; medium: string; bold: string; }; }; type Tokens$1 = { alertBackgroundCritical: string; alertBackgroundInfo: string; alertBackgroundSuccess: string; alertBackgroundWarning: string; alertIconCritical: string; alertIconInfo: string; alertIconSuccess: string; alertIconWarning: string; alertColorTextCritical: string; alertColorTextInfo: string; alertColorTextSuccess: string; alertColorTextWarning: string; alertColorTextLink: string; badgeBorderRadius: string; badgeBundleBasicBackground: string; badgeBundleBasicForeground: string; badgeBundleMediumBackground: string; badgeBundleMediumForeground: string; badgeBundleTopBackground: string; badgeBundleTopForeground: string; badgeCriticalBackground: string; badgeCriticalForeground: string; badgeCriticalSubtleBackground: string; badgeCriticalSubtleForeground: string; badgeDarkBackground: string; badgeDarkForeground: string; badgeInfoBackground: string; badgeInfoForeground: string; badgeInfoSubtleBackground: string; badgeInfoSubtleForeground: string; badgeNeutralBackground: string; badgeNeutralForeground: string; badgeSuccessBackground: string; badgeSuccessForeground: string; badgeSuccessSubtleBackground: string; badgeSuccessSubtleForeground: string; badgeWarningBackground: string; badgeWarningForeground: string; badgeWarningSubtleBackground: string; badgeWarningSubtleForeground: string; badgeWhiteBackground: string; badgeWhiteForeground: string; buttonLinkCriticalBackground: string; buttonLinkCriticalBackgroundHover: string; buttonLinkCriticalBackgroundActive: string; buttonLinkCriticalForeground: string; buttonLinkCriticalForegroundHover: string; buttonLinkCriticalForegroundActive: string; buttonLinkPrimaryBackground: string; buttonLinkPrimaryBackgroundHover: string; buttonLinkPrimaryBackgroundActive: string; buttonLinkPrimaryForeground: string; buttonLinkPrimaryForegroundHover: string; buttonLinkPrimaryForegroundActive: string; buttonLinkSecondaryBackground: string; buttonLinkSecondaryBackgroundHover: string; buttonLinkSecondaryBackgroundActive: string; buttonLinkSecondaryForeground: string; buttonLinkSecondaryForegroundHover: string; buttonLinkSecondaryForegroundActive: string; buttonBundleBasicBackground: string; buttonBundleBasicBackgroundHover: string; buttonBundleBasicBackgroundActive: string; buttonBundleMediumBackground: string; buttonBundleMediumBackgroundHover: string; buttonBundleMediumBackgroundActive: string; buttonBundleTopBackground: string; buttonBundleTopBackgroundHover: string; buttonBundleTopBackgroundActive: string; buttonCriticalSubtleBackground: string; buttonCriticalSubtleBackgroundHover: string; buttonCriticalSubtleBackgroundActive: string; buttonCriticalSubtleForeground: string; buttonCriticalSubtleForegroundHover: string; buttonCriticalSubtleForegroundActive: string; buttonCriticalBackground: string; buttonCriticalBackgroundHover: string; buttonCriticalBackgroundActive: string; buttonCriticalForeground: string; buttonCriticalForegroundHover: string; buttonCriticalForegroundActive: string; buttonSmallFontSize: string; buttonNormalFontSize: string; buttonLargeFontSize: string; buttonInfoBackground: string; buttonInfoBackgroundHover: string; buttonInfoBackgroundActive: string; buttonInfoForeground: string; buttonInfoForegroundHover: string; buttonInfoForegroundActive: string; buttonWithoutTextPadding: string; buttonPaddingXSmall: string; buttonPaddingSmall: string; buttonPaddingNormal: string; buttonPaddingLarge: string; buttonPrimarySubtleBackground: string; buttonPrimarySubtleBackgroundHover: string; buttonPrimarySubtleBackgroundActive: string; buttonPrimarySubtleForeground: string; buttonPrimarySubtleForegroundHover: string; buttonPrimarySubtleForegroundActive: string; buttonPrimaryBackground: string; buttonPrimaryBackgroundHover: string; buttonPrimaryBackgroundActive: string; buttonPrimaryForeground: string; buttonPrimaryForegroundHover: string; buttonPrimaryForegroundActive: string; buttonPrimaryBorderColorFocus: string; buttonSecondaryBackground: string; buttonSecondaryBackgroundHover: string; buttonSecondaryBackgroundActive: string; buttonSecondaryForeground: string; buttonSecondaryForegroundHover: string; buttonSecondaryForegroundActive: string; buttonSuccessBackground: string; buttonSuccessBackgroundHover: string; buttonSuccessBackgroundActive: string; buttonSuccessForeground: string; buttonSuccessForegroundHover: string; buttonSuccessForegroundActive: string; buttonWarningBackground: string; buttonWarningBackgroundHover: string; buttonWarningBackgroundActive: string; buttonWarningForeground: string; buttonWarningForegroundHover: string; buttonWarningForegroundActive: string; buttonWhiteBackground: string; buttonWhiteBackgroundHover: string; buttonWhiteBackgroundActive: string; buttonWhiteForeground: string; buttonWhiteForegroundHover: string; buttonWhiteForegroundActive: string; buttonWhiteBorderColorFocus: string; countryFlagShadow: string; countryFlagBackground: string; countryFlagSmallHeight: string; countryFlagSmallWidth: string; countryFlagMediumHeight: string; countryFlagMediumWidth: string; dialogBorderRadiusDesktop: string; dialogBorderRadiusMobile: string; dialogWidth: string; drawerOverlayBackground: string; formBoxSmallHeight: string; formBoxNormalHeight: string; formBoxLargeHeight: string; formElementBackground: string; formElementDisabledBackground: string; formElementDisabledForeground: string; formElementDisabledOpacity: string; formElementBorderColorDisabled: string; formElementBorderColor: string; formElementBorderColorHover: string; formElementBorderColorActive: string; formElementBorderColorFocus: string; formElementBorderColorError: string; formElementBorderColorErrorHover: string; formElementBoxShadow: string; formElementBoxShadowError: string; formElementBoxShadowErrorHover: string; formElementBoxShadowHover: string; formElementFocusBoxShadow: string; formElementErrorFocusBoxShadow: string; formElementNormalFontSize: string; formElementNormalPadding: string; formElementForeground: string; formElementFilledForeground: string; formElementLabelForeground: string; formElementLabelFilledForeground: string; formElementPrefixForeground: string; formElementSmallPadding: string; headingDisplayFontSize: string; headingDisplayFontWeight: string; headingDisplayLineHeight: string; headingDisplaySubtitleFontSize: string; headingDisplaySubtitleFontWeight: string; headingDisplaySubtitleLineHeight: string; headingTitle0FontSize: string; headingTitle0FontWeight: string; headingTitle0LineHeight: string; headingTitle1FontSize: string; headingTitle1FontWeight: string; headingTitle1LineHeight: string; headingTitle2FontSize: string; headingTitle2FontWeight: string; headingTitle2LineHeight: string; headingTitle3FontSize: string; headingTitle3FontWeight: string; headingTitle3LineHeight: string; headingTitle4FontSize: string; headingTitle4FontWeight: string; headingTitle4LineHeight: string; headingTitle5FontSize: string; headingTitle5FontWeight: string; headingTitle5LineHeight: string; headingTitle6FontSize: string; headingTitle6FontWeight: string; headingTitle6LineHeight: string; headingForeground: string; headingForegroundInverted: string; iconPrimaryForeground: string; iconSecondaryForeground: string; iconTertiaryForeground: string; iconInfoForeground: string; iconSuccessForeground: string; iconWarningForeground: string; iconCriticalForeground: string; iconSmallSize: string; iconMediumSize: string; iconLargeSize: string; iconExtraLargeSize: string; illustrationExtraSmallHeight: string; illustrationSmallHeight: string; illustrationMediumHeight: string; illustrationLargeHeight: string; illustrationDisplayHeight: string; modalBorderRadius: string; modalExtraSmallWidth: string; modalSmallWidth: string; modalNormalWidth: string; modalLargeWidth: string; modalExtraLargeWidth: string; tabBundleBasicForeground: string; tabBundleBasicBackground: string; tabBundleBasicBackgroundHover: string; tabBundleBasicBackgroundActive: string; tabBundleMediumForeground: string; tabBundleMediumBackground: string; tabBundleMediumBackgroundHover: string; tabBundleMediumBackgroundActive: string; tabBundleTopBackground: string; tabBundleTopBackgroundHover: string; tabBundleTopForeground: string; backgroundTableShadowLeft: string; backgroundTableShadowRight: string; tagColoredBackground: string; tagColoredBackgroundHover: string; tagColoredBackgroundActive: string; tagColoredForeground: string; tagNeutralBackground: string; tagNeutralBackgroundHover: string; tagNeutralBackgroundActive: string; tagNeutralForeground: string; textLinkPrimaryForeground: string; textLinkPrimaryForegroundHover: string; textLinkPrimaryForegroundActive: string; textLinkSecondaryForeground: string; textLinkSecondaryForegroundHover: string; textLinkSecondaryForegroundActive: string; textLinkSuccessForeground: string; textLinkSuccessForegroundHover: string; textLinkSuccessForegroundActive: string; textLinkInfoForeground: string; textLinkInfoForegroundHover: string; textLinkInfoForegroundActive: string; textLinkWarningForeground: string; textLinkWarningForegroundHover: string; textLinkWarningForegroundActive: string; textLinkCriticalForeground: string; textLinkCriticalForegroundHover: string; textLinkCriticalForegroundActive: string; textLinkWhiteForeground: string; textLinkWhiteForegroundHover: string; textLinkWhiteForegroundActive: string; textPrimaryBackground: string; textPrimaryForeground: string; textSecondaryBackground: string; textSecondaryForeground: string; textInfoBackground: string; textInfoForeground: string; textSuccessBackground: string; textSuccessForeground: string; textWarningBackground: string; textWarningForeground: string; textCriticalBackground: string; textCriticalForeground: string; textWhiteBackground: string; textWhiteForeground: string; borderRadius50: string; borderRadius100: string; borderRadius150: string; borderRadius200: string; borderRadius300: string; borderRadius400: string; borderRadiusNone: string; borderRadiusFull: string; breakpointMediumMobile: number; breakpointLargeMobile: number; breakpointTablet: number; breakpointDesktop: number; breakpointLargeDesktop: number; durationFast: string; durationNormal: string; durationSlow: string; elevationSuppressedBackground: string; elevationFlatBackground: string; elevationFlatBorderColor: string; elevationFlatBorderSize: string; elevationNavBarBoxShadow: string; elevationLevel1BoxShadow: string; elevationLevel2BoxShadow: string; elevationFixedBackground: string; elevationFixedBoxShadow: string; elevationFixedReverseBackground: string; elevationFixedReverseBoxShadow: string; elevationLevel3BoxShadow: string; elevationLevel3ReverseBoxShadow: string; elevationLevel4BoxShadow: string; paletteBlueLight: string; paletteBlueLightHover: string; paletteBlueLightActive: string; paletteBlueNormal: string; paletteBlueNormalHover: string; paletteBlueNormalActive: string; paletteBlueDark: string; paletteBlueDarkHover: string; paletteBlueDarkActive: string; paletteBlueDarker: string; paletteBundleBasic: string; paletteBundleMedium: string; paletteCloudLight: string; paletteCloudLightHover: string; paletteCloudLightActive: string; paletteCloudNormal: string; paletteCloudNormalHover: string; paletteCloudNormalActive: string; paletteCloudDark: string; paletteCloudDarkHover: string; paletteCloudDarkActive: string; paletteGreenLight: string; paletteGreenLightHover: string; paletteGreenLightActive: string; paletteGreenNormal: string; paletteGreenNormalHover: string; paletteGreenNormalActive: string; paletteGreenDark: string; paletteGreenDarkHover: string; paletteGreenDarkActive: string; paletteGreenDarker: string; paletteInkDark: string; paletteInkDarkHover: string; paletteInkDarkActive: string; paletteInkLight: string; paletteInkLightHover: string; paletteInkLightActive: string; paletteInkNormal: string; paletteInkNormalHover: string; paletteInkNormalActive: string; paletteOrangeLight: string; paletteOrangeLightHover: string; paletteOrangeLightActive: string; paletteOrangeNormal: string; paletteOrangeNormalHover: string; paletteOrangeNormalActive: string; paletteOrangeDark: string; paletteOrangeDarkHover: string; paletteOrangeDarkActive: string; paletteOrangeDarker: string; paletteProductLight: string; paletteProductLightHover: string; paletteProductLightActive: string; paletteProductNormal: string; paletteProductNormalHover: string; paletteProductNormalActive: string; paletteProductDark: string; paletteProductDarkHover: string; paletteProductDarkActive: string; paletteProductDarker: string; paletteRedLight: string; paletteRedLightHover: string; paletteRedLightActive: string; paletteRedNormal: string; paletteRedNormalHover: string; paletteRedNormalActive: string; paletteRedDark: string; paletteRedDarkHover: string; paletteRedDarkActive: string; paletteRedDarker: string; paletteSocialFacebook: string; paletteSocialFacebookHover: string; paletteSocialFacebookActive: string; paletteWhite: string; paletteWhiteNormal: string; paletteWhiteHover: string; paletteWhiteActive: string; space50: string; space100: string; space150: string; space200: string; space300: string; space400: string; space500: string; space600: string; space700: string; space800: string; space1000: string; space1200: string; space1300: string; space1600: string; fontFamily: string; fontSizeTextSmall: string; fontSizeTextNormal: string; fontSizeTextLarge: string; fontSizeTextExtraLarge: string; lineHeightText: string; lineHeightSmall: string; lineHeightNormal: string; lineHeightLarge: string; lineHeightExtraLarge: string; fontWeightNormal: string; fontWeightMedium: string; fontWeightBold: string; zIndexDefault: number; zIndexSticky: number; zIndexNavigationBar: number; zIndexModalOverlay: number; zIndexDrawer: number; zIndexModal: number; zIndexOnTheTop: number; }; type Overrides = Partial<Tokens$1>; interface CreateTheme { (foundation?: CustomFoundation, overrides?: Overrides): Tokens$1; } declare const createTheme: CreateTheme; /** ##################################################### # # # DO NOT EDIT DIRECTLY, THIS FILE IS AUTO-GENERATED # # # ##################################################### If you want to update some tokens: - please do so in /definitions folder - run @kiwicom/orbit-design-tokens "build" script */ type Tokens = { blueLight: string; blueLightHover: string; blueLightActive: string; blueNormal: string; blueNormalHover: string; blueNormalActive: string; blueDark: string; blueDarkHover: string; blueDarkActive: string; blueDarker: string; bundleBasic: string; bundleMedium: string; cloudLight: string; cloudLightHover: string; cloudLightActive: string; cloudNormal: string; cloudNormalHover: string; cloudNormalActive: string; cloudDark: string; cloudDarkHover: string; cloudDarkActive: string; greenLight: string; greenLightHover: string; greenLightActive: string; greenNormal: string; greenNormalHover: string; greenNormalActive: string; greenDark: string; greenDarkHover: string; greenDarkActive: string; greenDarker: string; inkDark: string; inkDarkHover: string; inkDarkActive: string; inkLight: string; inkLightHover: string; inkLightActive: string; inkNormal: string; inkNormalHover: string; inkNormalActive: string; orangeLight: string; orangeLightHover: string; orangeLightActive: string; orangeNormal: string; orangeNormalHover: string; orangeNormalActive: string; orangeDark: string; orangeDarkHover: string; orangeDarkActive: string; orangeDarker: string; productLight: string; productLightHover: string; productLightActive: string; productNormal: string; productNormalHover: string; productNormalActive: string; productDark: string; productDarkHover: string; productDarkActive: string; productDarker: string; redLight: string; redLightHover: string; redLightActive: string; redNormal: string; redNormalHover: string; redNormalActive: string; redDark: string; redDarkHover: string; redDarkActive: string; redDarker: string; socialFacebook: string; socialFacebookHover: string; socialFacebookActive: string; white: string; whiteNormal: string; whiteHover: string; whiteActive: string; }; interface ThemePaletteColors { productLight: string; productLightHover: string; productLightActive: string; productNormal: string; productNormalHover: string; productNormalActive: string; productDark: string; productDarkHover?: string; productDarkActive?: string; productDarker?: string; } interface FromPlainObject { (themePaletteColors: ThemePaletteColors): Tokens$1; } declare const fromPlainObject: FromPlainObject; declare const transparentColor: (color: string, opacity: number) => string; type GetTokens = (foundation?: CustomFoundation) => Tokens$1; declare const getTokens: GetTokens; type TokensObject = Record<string, string | Record<string, string>>; declare const tokensToCssVars: <T = TokensObject>({ tokens, cssClass, }: { tokens: T; cssClass?: string; }) => any; declare const convertHexToRgba: (color: string, opacity: number) => string; type RgbaToHex = (rgba: string) => string; declare const convertRgbaToHex: RgbaToHex; declare const defaultTokens: Tokens$1; declare const defaultTheme: Tokens$1; export { Tokens as PaletteColors, convertHexToRgba, convertRgbaToHex, createTheme, foundation as defaultFoundation, defaultTheme, defaultTokens, fromPlainObject, getTokens, tokensToCssVars, transparentColor };