import { HvThemeColorMode as HvThemeColorMode_2 } from '@hitachivantara/uikit-react-core'; import { Property } from 'csstype'; import { StandardProperties } from 'csstype'; /** @deprecated replace with standard UI Kit ColorTokens in v6 */ declare type AllColors = typeof colors.common & typeof colors.light; export declare const amber: { readonly 50: "#FFFBEB"; readonly 100: "#FEF3C7"; readonly 200: "#FDE68A"; readonly 300: "#FCD34D"; readonly 400: "#FBBF24"; readonly 500: "#F59E0B"; readonly 600: "#D97706"; readonly 700: "#B45309"; readonly 800: "#92400E"; readonly 900: "#78350F"; readonly 950: "#451A03"; }; export declare const blue: { readonly 50: "#EFF6FF"; readonly 100: "#DBEAFE"; readonly 200: "#BFDBFE"; readonly 300: "#93C5FD"; readonly 400: "#60A5FA"; readonly 500: "#3B82F6"; readonly 600: "#2563EB"; readonly 700: "#1D4ED8"; readonly 800: "#1E40AF"; readonly 900: "#1E3A8A"; readonly 950: "#172554"; }; export declare const breakpoints: { unit: string; step: number; values: { xs: number; sm: number; md: number; lg: number; xl: number; }; }; export declare const colors: { common: { cat1_180: string; cat1_160: string; cat1_140: string; cat1_120: string; cat1_80: string; cat1_60: string; cat1_40: string; cat1_20: string; cat2_180: string; cat2_160: string; cat2_140: string; cat2_120: string; cat2_80: string; cat2_60: string; cat2_40: string; cat2_20: string; cat3_180: string; cat3_160: string; cat3_140: string; cat3_120: string; cat3_80: string; cat3_60: string; cat3_40: string; cat3_20: string; cat4_180: string; cat4_160: string; cat4_140: string; cat4_120: string; cat4_80: string; cat4_60: string; cat4_40: string; cat4_20: string; cat5_180: string; cat5_160: string; cat5_140: string; cat5_120: string; cat5_80: string; cat5_60: string; cat5_40: string; cat5_20: string; cat6_180: string; cat6_160: string; cat6_140: string; cat6_120: string; cat6_80: string; cat6_60: string; cat6_40: string; cat6_20: string; cat7_180: string; cat7_160: string; cat7_140: string; cat7_120: string; cat7_80: string; cat7_60: string; cat7_40: string; cat7_20: string; cat8_180: string; cat8_160: string; cat8_140: string; cat8_120: string; cat8_80: string; cat8_60: string; cat8_40: string; cat8_20: string; cat9_180: string; cat9_160: string; cat9_140: string; cat9_120: string; cat9_80: string; cat9_60: string; cat9_40: string; cat9_20: string; cat10_180: string; cat10_160: string; cat10_140: string; cat10_120: string; cat10_80: string; cat10_60: string; cat10_40: string; cat10_20: string; cat11_180: string; cat11_160: string; cat11_140: string; cat11_120: string; cat11_80: string; cat11_60: string; cat11_40: string; cat11_20: string; cat12_180: string; cat12_160: string; cat12_140: string; cat12_120: string; cat12_80: string; cat12_60: string; cat12_40: string; cat12_20: string; cat13: string; cat14: string; cat15: string; cat16: string; cat17: string; cat18: string; cat19: string; cat20: string; cat21: string; cat22: string; cat23: string; cat24: string; cat25: string; cat26: string; cat27: string; cat28: string; cat1: string; cat2: string; cat3: string; cat4: string; cat5: string; cat6: string; cat7: string; cat8: string; cat9: string; cat10: string; cat11: string; cat12: string; /** @deprecated use `textLight` instead */ base_light: string; /** @deprecated use `textDark` instead */ base_dark: string; }; light: { cat1: string; cat2: string; cat3: string; cat4: string; cat5: string; cat6: string; cat7: string; cat8: string; cat9: string; cat10: string; cat11: string; cat12: string; primary: string; primaryDeep: string; primaryStrong: string; primarySubtle: string; primaryDimmed: string; positive: string; positiveDeep: string; positiveStrong: string; positiveDimmed: string; positiveSubtle: string; positiveBorder: string; warning: string; warningDeep: string; warningStrong: string; warningDimmed: string; warningSubtle: string; warningBorder: string; negative: string; negativeDeep: string; negativeStrong: string; negativeDimmed: string; negativeSubtle: string; negativeBorder: string; info: string; infoDeep: string; infoStrong: string; infoDimmed: string; infoSubtle: string; infoBorder: string; accent: string; accentDeep: string; accentStrong: string; accentSubtle: string; accentDimmed: string; accentBorder: string; text: string; textSubtle: string; textDisabled: string; textDimmed: string; textLight: string; textDark: string; border: string; borderSubtle: string; borderStrong: string; borderDisabled: string; bgPage: string; bgContainer: string; bgPageSecondary: string; bgContainerSecondary: string; bgHover: string; bgDisabled: string; bgOverlay: string; dimmer: string; shad1: string; shadow: string; base_light: string; base_dark: string; brand: string; primary_80: string; primary_20: string; secondary: string; secondary_80: string; secondary_60: string; atmo1: string; atmo2: string; atmo3: string; atmo4: string; positive_80: string; positive_120: string; neutral: string; warning_120: string; warning_140: string; negative_80: string; negative_120: string; catastrophic: string; neutral_20: string; positive_20: string; negative_20: string; warning_20: string; }; dark: { cat1: string; cat2: string; cat3: string; cat4: string; cat5: string; cat6: string; cat7: string; cat8: string; cat9: string; cat10: string; cat11: string; cat12: string; primary: string; primaryDeep: string; primaryStrong: string; primarySubtle: string; primaryDimmed: string; positive: string; positiveDeep: string; positiveStrong: string; positiveDimmed: string; positiveSubtle: string; positiveBorder: string; warning: string; warningDeep: string; warningStrong: string; warningDimmed: string; warningSubtle: string; warningBorder: string; negative: string; negativeDeep: string; negativeStrong: string; negativeDimmed: string; negativeSubtle: string; negativeBorder: string; info: string; infoDeep: string; infoStrong: string; infoDimmed: string; infoSubtle: string; infoBorder: string; accent: string; accentDeep: string; accentStrong: string; accentSubtle: string; accentDimmed: string; accentBorder: string; text: string; textSubtle: string; textDisabled: string; textDimmed: string; textLight: string; textDark: string; border: string; borderSubtle: string; borderStrong: string; borderDisabled: string; bgPage: string; bgContainer: string; bgPageSecondary: string; bgContainerSecondary: string; bgHover: string; bgDisabled: string; bgOverlay: string; dimmer: string; shad1: string; shadow: string; base_light: string; base_dark: string; brand: string; primary_80: string; primary_20: string; secondary: string; secondary_80: string; secondary_60: string; atmo1: string; atmo2: string; atmo3: string; atmo4: string; positive_80: string; positive_120: string; neutral: string; warning_120: string; warning_140: string; negative_80: string; negative_120: string; catastrophic: string; neutral_20: string; positive_20: string; negative_20: string; warning_20: string; }; }; export declare const CssBaseline: { readonly 'input[type="search"]::-webkit-search-decoration': { readonly display: "none"; }; readonly 'input[type="search"]::-webkit-search-cancel-button': { readonly display: "none"; }; readonly 'input[type="search"]::-webkit-search-results-button': { readonly display: "none"; }; readonly 'input[type="search"]::-webkit-search-results-decoration': { readonly display: "none"; }; readonly "*, ::before, ::after": { readonly boxSizing: "border-box"; readonly borderWidth: "0"; readonly borderStyle: "solid"; }; readonly "*": { readonly margin: 0; }; readonly ":where(h1, h2, h3, h4, h5, h6)": { readonly fontSize: "inherit"; readonly fontWeight: "inherit"; }; readonly "p, h1, h2, h3, h4, h5, h6": { readonly overflowWrap: "break-word"; }; readonly "img, picture, video, canvas, svg": { readonly display: "block"; readonly maxWidth: "100%"; }; readonly "button, input, textarea, select, optgroup": { readonly fontFamily: "inherit"; readonly fontSize: "100%"; }; readonly select: { readonly width: "100%"; readonly height: "100%"; readonly cursor: "pointer"; readonly background: "transparent"; }; readonly "button:focus-visible": { readonly outline: "#52A8EC solid 0px"; readonly outlineOffset: "-1px"; }; readonly fieldset: { readonly margin: 0; readonly padding: 0; }; readonly ":where(ol, ul)": { readonly margin: 0; readonly padding: 0; }; readonly a: { readonly backgroundColor: "transparent"; readonly color: "inherit"; readonly textDecoration: "inherit"; }; readonly ".uikit-root-element": { readonly backgroundColor: string; readonly accentColor: string; readonly color: string; readonly fontSize: string | undefined; readonly fontWeight: string | undefined; readonly lineHeight: string | undefined; readonly letterSpacing: string | undefined; readonly fontFamily: string; }; readonly "html, body": { readonly height: "100%"; }; readonly html: { readonly fontFamily: "'Open Sans','Inter', Arial, Helvetica, sans-serif"; }; readonly body: { readonly fontFamily: "inherit"; readonly lineHeight: "inherit"; readonly WebkitFontSmoothing: "antialiased"; readonly MozOsxFontSmoothing: "grayscale"; }; }; declare interface CSSProperties extends StandardProperties { } export declare const CssScopedBaseline: { readonly 'input[type="search"]::-webkit-search-decoration': { readonly display: "none"; }; readonly 'input[type="search"]::-webkit-search-cancel-button': { readonly display: "none"; }; readonly 'input[type="search"]::-webkit-search-results-button': { readonly display: "none"; }; readonly 'input[type="search"]::-webkit-search-results-decoration': { readonly display: "none"; }; readonly "*, ::before, ::after": { readonly boxSizing: "border-box"; readonly borderWidth: "0"; readonly borderStyle: "solid"; }; readonly "*": { readonly margin: 0; }; readonly ":where(h1, h2, h3, h4, h5, h6)": { readonly fontSize: "inherit"; readonly fontWeight: "inherit"; }; readonly "p, h1, h2, h3, h4, h5, h6": { readonly overflowWrap: "break-word"; }; readonly "img, picture, video, canvas, svg": { readonly display: "block"; readonly maxWidth: "100%"; }; readonly "button, input, textarea, select, optgroup": { readonly fontFamily: "inherit"; readonly fontSize: "100%"; }; readonly select: { readonly width: "100%"; readonly height: "100%"; readonly cursor: "pointer"; readonly background: "transparent"; }; readonly "button:focus-visible": { readonly outline: "#52A8EC solid 0px"; readonly outlineOffset: "-1px"; }; readonly fieldset: { readonly margin: 0; readonly padding: 0; }; readonly ":where(ol, ul)": { readonly margin: 0; readonly padding: 0; }; readonly a: { readonly backgroundColor: "transparent"; readonly color: "inherit"; readonly textDecoration: "inherit"; }; readonly ".uikit-root-element": { readonly backgroundColor: string; readonly accentColor: string; readonly color: string; readonly fontSize: string | undefined; readonly fontWeight: string | undefined; readonly lineHeight: string | undefined; readonly letterSpacing: string | undefined; readonly fontFamily: string; }; readonly height: "100%"; readonly fontFamily: "inherit"; readonly lineHeight: "inherit"; readonly WebkitFontSmoothing: "antialiased"; readonly MozOsxFontSmoothing: "grayscale"; }; export declare const cyan: { readonly 50: "#ECFEFF"; readonly 100: "#CFFAFE"; readonly 200: "#A5F3FC"; readonly 300: "#67E8F9"; readonly 400: "#22D3EE"; readonly 500: "#06B6D4"; readonly 600: "#0891B2"; readonly 700: "#0E7490"; readonly 800: "#155E75"; readonly 900: "#164E63"; readonly 950: "#083344"; }; declare type DeepPartial = T extends {} ? Partial<{ [P in keyof T]: DeepPartial; }> : T; export declare type DeepString = { [P in keyof T]: T[P] extends object ? DeepString : string; }; export declare const emerald: { readonly 50: "#ECFDF5"; readonly 100: "#D1FAE5"; readonly 200: "#A7F3D0"; readonly 300: "#6EE7B7"; readonly 400: "#34D399"; readonly 500: "#10B981"; readonly 600: "#059669"; readonly 700: "#047857"; readonly 800: "#065F46"; readonly 900: "#064E3B"; readonly 950: "#022C22"; }; export declare const fontFamily: { body: string; }; export declare const fontSizes: { xs: string; sm: string; base: string; lg: string; xl: string; xl2: string; xl3: string; xl4: string; }; export declare const fontWeights: { hairline: string; thin: string; light: string; normal: string; medium: string; semibold: string; bold: string; extrabold: string; black: string; }; export declare const fuchsia: { readonly 50: "#FDF4FF"; readonly 100: "#FAE8FF"; readonly 200: "#F5D0FE"; readonly 300: "#F0ABFC"; readonly 400: "#E879F9"; readonly 500: "#D946EF"; readonly 600: "#C026D3"; readonly 700: "#A21CAF"; readonly 800: "#86198F"; readonly 900: "#701A75"; readonly 950: "#4A044E"; }; /** Get a `color` from the theme palette, or `fallbackColor` if not found */ export declare function getColor(color?: HvColorAny, fallbackColor?: HvColorAny): string | undefined; export declare const getThemeVars: (theme: HvThemeStructure) => Record; export declare const green: { readonly 50: "#F0FDF4"; readonly 100: "#DCFCE7"; readonly 200: "#BBF7D0"; readonly 300: "#86EFAC"; readonly 400: "#4ADE80"; readonly 500: "#22C55E"; readonly 600: "#16A34A"; readonly 700: "#15803D"; readonly 800: "#166534"; readonly 900: "#14532D"; readonly 950: "#052E16"; }; export declare const hasMultipleArgs: (args: T[] | [T[]]) => args is T[]; export declare type HvBaseTheme = "next" | "pentaho"; export declare type HvBreakpoints = "xs" | "sm" | "md" | "lg" | "xl"; /** A type with all the accepted colors from the color palette */ export declare type HvColor = keyof HvThemeColors; /** * A type representing an `HvColor` from the palette or any other color string * @example "primary" "bgPage" "#FF0000" "purple" "inherit" * */ export declare type HvColorAny = HvColor | Property.Color; export declare interface HvColorTokens extends Record, string>, Record { accentBorder: string; positiveBorder: string; warningBorder: string; negativeBorder: string; infoBorder: string; /** primary text color */ text: string; /** secondary text color */ textSubtle: string; /** disabled text color */ textDisabled: string; /** dimmed text, close to the bgColor, used for contrasting with semantic backgrounds */ textDimmed: string; /** light-only text */ textLight: string; /** dark-only text */ textDark: string; border: string; borderSubtle: string; borderStrong: string; borderDisabled: string; /** default page background */ bgPage: string; /** secondary page background (also for :active action). */ bgPageSecondary: string; /** default surface background for containers */ bgContainer: string; /** secondary surface background for containers */ bgContainerSecondary: string; /** background for :hover actions */ bgHover: string; /** background for disabled elements */ bgDisabled: string; /** overlay background (for Dialog, dropdowns, etc.) */ bgOverlay: string; /** color to use for opacity */ dimmer: string; /** shadow color */ shad1: string; /** box shadow */ shadow: string; } export declare interface HvCustomTheme extends DeepPartial> { } export declare type HvRadius = "none" | "base" | "round" | "large" | "full"; export declare type HvSize = "xs" | "sm" | "md" | "lg" | "xl"; export declare type HvSpace = "xxs" | "xs" | "sm" | "md" | "lg" | "xl"; export declare type HvTheme = typeof theme; export declare type HvThemeBreakpoint = Exclude; /** @experimental extendable theme breakpoints */ export declare interface HvThemeBreakpoints { unit: string; step: number; values: Record; } /** Theme color mode */ export declare type HvThemeColorMode = "light" | "dark"; /** @experimental extendable theme colors */ export declare interface HvThemeColors extends HvColorTokens, AllColors { } /** extendable `HvThemeColors` type */ export declare interface HvThemeColorsAny extends HvThemeColors, Record { } /** Theme components */ export declare interface HvThemeComponents { header: { height: string; secondLevelHeight: string; }; form: { errorColor: string; }; snackbar: { actionButtonVariant: string; }; /* Excluded from this release type: bulkActions */ /* Excluded from this release type: stepNavigation */ /* Excluded from this release type: filterGroup */ /* Excluded from this release type: colorPicker */ } /** Theme components props */ export declare interface HvThemeComponentsProps { /** Component properties to override */ components?: Record>; /** Record of icon names and their path, to override the default icons */ icons?: Record & { viewBox: string; }; } /** @experimental */ export declare interface HvThemeRadii extends Record { } /** @experimental extendable theme spacing units */ export declare interface HvThemeSpace extends Record { base: number; } /** Complete theme structure and values */ export declare interface HvThemeStructure extends HvThemeComponents, HvThemeComponentsProps, HvThemeTypography, Omit { name: string; base: HvBaseTheme; defaultColorMode: HvThemeColorMode; colors: { light: HvThemeColorsAny; dark: HvThemeColorsAny; }; /** Utility to access and theme property as CSS variables */ vars: HvThemeVars; } /** UI Kit static theme tokens */ export declare interface HvThemeTokens { breakpoints: HvThemeBreakpoints; colors: { type: HvThemeColorMode; } & HvThemeColors; radii: HvThemeRadii; space: HvThemeSpace; fontFamily: typeof fontFamily; fontSizes: typeof fontSizes; fontWeights: typeof fontWeights; lineHeights: typeof lineHeights; zIndices: HvThemeZIndices; } export declare interface HvThemeTypography { typography: Record; } export declare interface HvThemeTypographyProps extends Pick { } export declare interface HvThemeVars extends DeepString, DeepString, DeepString { } /** @experimental extendable theme spacing units */ export declare interface HvThemeZIndices extends Record { } export declare const indigo: { readonly 50: "#EEF2FF"; readonly 100: "#E0E7FF"; readonly 200: "#C7D2FE"; readonly 300: "#A5B4FC"; readonly 400: "#818CF8"; readonly 500: "#6366F1"; readonly 600: "#4F46E5"; readonly 700: "#4338CA"; readonly 800: "#3730A3"; readonly 900: "#312E81"; readonly 950: "#1E1B4B"; }; export declare const lime: { readonly 50: "#F7FEE7"; readonly 100: "#ECFCCB"; readonly 200: "#D9F99D"; readonly 300: "#BEF264"; readonly 400: "#A3E635"; readonly 500: "#84CC16"; readonly 600: "#65A30D"; readonly 700: "#4D7C0F"; readonly 800: "#3F6212"; readonly 900: "#365314"; readonly 950: "#1A2E05"; }; export declare const lineHeights: { none: string; xs: string; sm: string; base: string; lg: string; xl: string; xl2: string; xl3: string; xl4: string; }; /* Excluded from this release type: makeColors */ /** * Generate a theme base on the options received. * Takes an incomplete theme object and adds the missing parts. * * @param options The options to generate the theme * @returns The generated theme */ export declare const makeTheme: (options: HvCustomTheme | ((theme: HvTheme) => HvCustomTheme)) => HvThemeStructure; export declare const mapCSSVars: (obj: T, prefix?: string) => DeepString; export declare const mergeTheme: (...objects: any[]) => HvThemeStructure; export declare const neutral: { readonly 50: "#FAFAFA"; readonly 100: "#F5F5F5"; readonly 200: "#E5E5E5"; readonly 300: "#D4D4D4"; readonly 400: "#A3A3A3"; readonly 500: "#737373"; readonly 600: "#525252"; readonly 700: "#404040"; readonly 800: "#262626"; readonly 900: "#171717"; readonly 950: "#0A0A0A"; }; export declare const next: HvThemeStructure; export declare const orange: { readonly 50: "#FFF7ED"; readonly 100: "#FFEDD5"; readonly 200: "#FED7AA"; readonly 300: "#FDBA74"; readonly 400: "#FB923C"; readonly 500: "#F97316"; readonly 600: "#EA580C"; readonly 700: "#C2410C"; readonly 800: "#9A3412"; readonly 900: "#7C2D12"; readonly 950: "#431407"; }; /** * Base color palette tokens. Should rarely be used directly (eg. charts) * @private WIP. Currently in used for Pentaho theme */ export declare const palette: { slate: { readonly 50: "#F8FAFC"; readonly 100: "#F1F5F9"; readonly 200: "#E2E8F0"; readonly 300: "#CBD5E1"; readonly 400: "#94A3B8"; readonly 500: "#64748B"; readonly 600: "#475569"; readonly 700: "#334155"; readonly 800: "#1E293B"; readonly 900: "#0F172A"; readonly 950: "#020617"; }; neutral: { readonly 50: "#FAFAFA"; readonly 100: "#F5F5F5"; readonly 200: "#E5E5E5"; readonly 300: "#D4D4D4"; readonly 400: "#A3A3A3"; readonly 500: "#737373"; readonly 600: "#525252"; readonly 700: "#404040"; readonly 800: "#262626"; readonly 900: "#171717"; readonly 950: "#0A0A0A"; }; red: { readonly 50: "#FEF2F2"; readonly 100: "#FEE2E2"; readonly 200: "#FECACA"; readonly 300: "#FCA5A5"; readonly 400: "#F87171"; readonly 500: "#EF4444"; readonly 600: "#DC2626"; readonly 700: "#B91C1C"; readonly 800: "#991B1B"; readonly 900: "#7F1D1D"; readonly 950: "#450A0A"; }; orange: { readonly 50: "#FFF7ED"; readonly 100: "#FFEDD5"; readonly 200: "#FED7AA"; readonly 300: "#FDBA74"; readonly 400: "#FB923C"; readonly 500: "#F97316"; readonly 600: "#EA580C"; readonly 700: "#C2410C"; readonly 800: "#9A3412"; readonly 900: "#7C2D12"; readonly 950: "#431407"; }; amber: { readonly 50: "#FFFBEB"; readonly 100: "#FEF3C7"; readonly 200: "#FDE68A"; readonly 300: "#FCD34D"; readonly 400: "#FBBF24"; readonly 500: "#F59E0B"; readonly 600: "#D97706"; readonly 700: "#B45309"; readonly 800: "#92400E"; readonly 900: "#78350F"; readonly 950: "#451A03"; }; yellow: { readonly 50: "#FEFCE8"; readonly 100: "#FEF9C3"; readonly 200: "#FEF08A"; readonly 300: "#FDE047"; readonly 400: "#FACC15"; readonly 500: "#EAB308"; readonly 600: "#CA8A04"; readonly 700: "#A16207"; readonly 800: "#854D0E"; readonly 900: "#713F12"; readonly 950: "#422006"; }; lime: { readonly 50: "#F7FEE7"; readonly 100: "#ECFCCB"; readonly 200: "#D9F99D"; readonly 300: "#BEF264"; readonly 400: "#A3E635"; readonly 500: "#84CC16"; readonly 600: "#65A30D"; readonly 700: "#4D7C0F"; readonly 800: "#3F6212"; readonly 900: "#365314"; readonly 950: "#1A2E05"; }; green: { readonly 50: "#F0FDF4"; readonly 100: "#DCFCE7"; readonly 200: "#BBF7D0"; readonly 300: "#86EFAC"; readonly 400: "#4ADE80"; readonly 500: "#22C55E"; readonly 600: "#16A34A"; readonly 700: "#15803D"; readonly 800: "#166534"; readonly 900: "#14532D"; readonly 950: "#052E16"; }; emerald: { readonly 50: "#ECFDF5"; readonly 100: "#D1FAE5"; readonly 200: "#A7F3D0"; readonly 300: "#6EE7B7"; readonly 400: "#34D399"; readonly 500: "#10B981"; readonly 600: "#059669"; readonly 700: "#047857"; readonly 800: "#065F46"; readonly 900: "#064E3B"; readonly 950: "#022C22"; }; teal: { readonly 50: "#F0FDFA"; readonly 100: "#CCFBF1"; readonly 200: "#99F6E4"; readonly 300: "#5EEAD4"; readonly 400: "#2DD4BF"; readonly 500: "#14B8A6"; readonly 600: "#0D9488"; readonly 700: "#0F766E"; readonly 800: "#115E59"; readonly 900: "#134E4A"; readonly 950: "#042F2E"; }; cyan: { readonly 50: "#ECFEFF"; readonly 100: "#CFFAFE"; readonly 200: "#A5F3FC"; readonly 300: "#67E8F9"; readonly 400: "#22D3EE"; readonly 500: "#06B6D4"; readonly 600: "#0891B2"; readonly 700: "#0E7490"; readonly 800: "#155E75"; readonly 900: "#164E63"; readonly 950: "#083344"; }; sky: { readonly 50: "#F0F9FF"; readonly 100: "#E0F2FE"; readonly 200: "#BAE6FD"; readonly 300: "#7DD3FC"; readonly 400: "#38BDF8"; readonly 500: "#0EA5E9"; readonly 600: "#0284C7"; readonly 700: "#0369A1"; readonly 800: "#075985"; readonly 900: "#0C4A6E"; readonly 950: "#082F49"; }; blue: { readonly 50: "#EFF6FF"; readonly 100: "#DBEAFE"; readonly 200: "#BFDBFE"; readonly 300: "#93C5FD"; readonly 400: "#60A5FA"; readonly 500: "#3B82F6"; readonly 600: "#2563EB"; readonly 700: "#1D4ED8"; readonly 800: "#1E40AF"; readonly 900: "#1E3A8A"; readonly 950: "#172554"; }; indigo: { readonly 50: "#EEF2FF"; readonly 100: "#E0E7FF"; readonly 200: "#C7D2FE"; readonly 300: "#A5B4FC"; readonly 400: "#818CF8"; readonly 500: "#6366F1"; readonly 600: "#4F46E5"; readonly 700: "#4338CA"; readonly 800: "#3730A3"; readonly 900: "#312E81"; readonly 950: "#1E1B4B"; }; violet: { readonly 50: "#F5F3FF"; readonly 100: "#EDE9FE"; readonly 200: "#DDD6FE"; readonly 300: "#C4B5FD"; readonly 400: "#A78BFA"; readonly 500: "#8B5CF6"; readonly 600: "#7C3AED"; readonly 700: "#6D28D9"; readonly 800: "#5B21B6"; readonly 900: "#4C1D95"; readonly 950: "#2E1065"; }; purple: { readonly 50: "#FAF5FF"; readonly 100: "#F3E8FF"; readonly 200: "#E9D5FF"; readonly 300: "#D8B4FE"; readonly 400: "#C084FC"; readonly 500: "#A855F7"; readonly 600: "#9333EA"; readonly 700: "#7E22CE"; readonly 800: "#6B21A8"; readonly 900: "#581C87"; readonly 950: "#3B0764"; }; fuchsia: { readonly 50: "#FDF4FF"; readonly 100: "#FAE8FF"; readonly 200: "#F5D0FE"; readonly 300: "#F0ABFC"; readonly 400: "#E879F9"; readonly 500: "#D946EF"; readonly 600: "#C026D3"; readonly 700: "#A21CAF"; readonly 800: "#86198F"; readonly 900: "#701A75"; readonly 950: "#4A044E"; }; pink: { readonly 50: "#FDF2F8"; readonly 100: "#FCE7F3"; readonly 200: "#FBCFE8"; readonly 300: "#F9A8D4"; readonly 400: "#F472B6"; readonly 500: "#EC4899"; readonly 600: "#DB2777"; readonly 700: "#BE185D"; readonly 800: "#9D174D"; readonly 900: "#831843"; readonly 950: "#500724"; }; rose: { readonly 50: "#FFF1F2"; readonly 100: "#FFE4E6"; readonly 200: "#FECDD3"; readonly 300: "#FDA4AF"; readonly 400: "#FB7185"; readonly 500: "#F43F5E"; readonly 600: "#E11D48"; readonly 700: "#BE123C"; readonly 800: "#9F1239"; readonly 900: "#881337"; readonly 950: "#4C0519"; }; }; export declare const pentaho: HvThemeStructure; export declare const pink: { readonly 50: "#FDF2F8"; readonly 100: "#FCE7F3"; readonly 200: "#FBCFE8"; readonly 300: "#F9A8D4"; readonly 400: "#F472B6"; readonly 500: "#EC4899"; readonly 600: "#DB2777"; readonly 700: "#BE185D"; readonly 800: "#9D174D"; readonly 900: "#831843"; readonly 950: "#500724"; }; export declare const purple: { readonly 50: "#FAF5FF"; readonly 100: "#F3E8FF"; readonly 200: "#E9D5FF"; readonly 300: "#D8B4FE"; readonly 400: "#C084FC"; readonly 500: "#A855F7"; readonly 600: "#9333EA"; readonly 700: "#7E22CE"; readonly 800: "#6B21A8"; readonly 900: "#581C87"; readonly 950: "#3B0764"; }; export declare const radii: HvThemeRadii; export declare const red: { readonly 50: "#FEF2F2"; readonly 100: "#FEE2E2"; readonly 200: "#FECACA"; readonly 300: "#FCA5A5"; readonly 400: "#F87171"; readonly 500: "#EF4444"; readonly 600: "#DC2626"; readonly 700: "#B91C1C"; readonly 800: "#991B1B"; readonly 900: "#7F1D1D"; readonly 950: "#450A0A"; }; export declare const rose: { readonly 50: "#FFF1F2"; readonly 100: "#FFE4E6"; readonly 200: "#FECDD3"; readonly 300: "#FDA4AF"; readonly 400: "#FB7185"; readonly 500: "#F43F5E"; readonly 600: "#E11D48"; readonly 700: "#BE123C"; readonly 800: "#9F1239"; readonly 900: "#881337"; readonly 950: "#4C0519"; }; declare type SemanticKeys = `${Prefix}` | `${Prefix}Strong` | `${Prefix}Dimmed` | `${Prefix}Subtle` | `${Prefix}Deep`; declare type SemanticTypes = "primary" | "accent" | "positive" | "warning" | "negative" | "info"; export declare const sky: { readonly 50: "#F0F9FF"; readonly 100: "#E0F2FE"; readonly 200: "#BAE6FD"; readonly 300: "#7DD3FC"; readonly 400: "#38BDF8"; readonly 500: "#0EA5E9"; readonly 600: "#0284C7"; readonly 700: "#0369A1"; readonly 800: "#075985"; readonly 900: "#0C4A6E"; readonly 950: "#082F49"; }; export declare const slate: { readonly 50: "#F8FAFC"; readonly 100: "#F1F5F9"; readonly 200: "#E2E8F0"; readonly 300: "#CBD5E1"; readonly 400: "#94A3B8"; readonly 500: "#64748B"; readonly 600: "#475569"; readonly 700: "#334155"; readonly 800: "#1E293B"; readonly 900: "#0F172A"; readonly 950: "#020617"; }; export declare const space: HvThemeSpace; export declare const spacingUtil: (value: SpacingValue, vars: HvThemeVars) => string; export declare type SpacingValue = number | HvThemeBreakpoint | (string & {}); export declare const teal: { readonly 50: "#F0FDFA"; readonly 100: "#CCFBF1"; readonly 200: "#99F6E4"; readonly 300: "#5EEAD4"; readonly 400: "#2DD4BF"; readonly 500: "#14B8A6"; readonly 600: "#0D9488"; readonly 700: "#0F766E"; readonly 800: "#115E59"; readonly 900: "#134E4A"; readonly 950: "#042F2E"; }; /** * UI Kit static theme object, containing values and utility functions that leverage the injected CSS variables. * @returns string values that can be used as CSS values. * @example * theme.colors.primary // "var(--uikit-colors-primary)" * theme.spacing("xs", "sm") // "var(--uikit-space-xs) var(--uikit-space-sm)" */ export declare const theme: { palette: { slate: { readonly 50: "#F8FAFC"; readonly 100: "#F1F5F9"; readonly 200: "#E2E8F0"; readonly 300: "#CBD5E1"; readonly 400: "#94A3B8"; readonly 500: "#64748B"; readonly 600: "#475569"; readonly 700: "#334155"; readonly 800: "#1E293B"; readonly 900: "#0F172A"; readonly 950: "#020617"; }; neutral: { readonly 50: "#FAFAFA"; readonly 100: "#F5F5F5"; readonly 200: "#E5E5E5"; readonly 300: "#D4D4D4"; readonly 400: "#A3A3A3"; readonly 500: "#737373"; readonly 600: "#525252"; readonly 700: "#404040"; readonly 800: "#262626"; readonly 900: "#171717"; readonly 950: "#0A0A0A"; }; red: { readonly 50: "#FEF2F2"; readonly 100: "#FEE2E2"; readonly 200: "#FECACA"; readonly 300: "#FCA5A5"; readonly 400: "#F87171"; readonly 500: "#EF4444"; readonly 600: "#DC2626"; readonly 700: "#B91C1C"; readonly 800: "#991B1B"; readonly 900: "#7F1D1D"; readonly 950: "#450A0A"; }; orange: { readonly 50: "#FFF7ED"; readonly 100: "#FFEDD5"; readonly 200: "#FED7AA"; readonly 300: "#FDBA74"; readonly 400: "#FB923C"; readonly 500: "#F97316"; readonly 600: "#EA580C"; readonly 700: "#C2410C"; readonly 800: "#9A3412"; readonly 900: "#7C2D12"; readonly 950: "#431407"; }; amber: { readonly 50: "#FFFBEB"; readonly 100: "#FEF3C7"; readonly 200: "#FDE68A"; readonly 300: "#FCD34D"; readonly 400: "#FBBF24"; readonly 500: "#F59E0B"; readonly 600: "#D97706"; readonly 700: "#B45309"; readonly 800: "#92400E"; readonly 900: "#78350F"; readonly 950: "#451A03"; }; yellow: { readonly 50: "#FEFCE8"; readonly 100: "#FEF9C3"; readonly 200: "#FEF08A"; readonly 300: "#FDE047"; readonly 400: "#FACC15"; readonly 500: "#EAB308"; readonly 600: "#CA8A04"; readonly 700: "#A16207"; readonly 800: "#854D0E"; readonly 900: "#713F12"; readonly 950: "#422006"; }; lime: { readonly 50: "#F7FEE7"; readonly 100: "#ECFCCB"; readonly 200: "#D9F99D"; readonly 300: "#BEF264"; readonly 400: "#A3E635"; readonly 500: "#84CC16"; readonly 600: "#65A30D"; readonly 700: "#4D7C0F"; readonly 800: "#3F6212"; readonly 900: "#365314"; readonly 950: "#1A2E05"; }; green: { readonly 50: "#F0FDF4"; readonly 100: "#DCFCE7"; readonly 200: "#BBF7D0"; readonly 300: "#86EFAC"; readonly 400: "#4ADE80"; readonly 500: "#22C55E"; readonly 600: "#16A34A"; readonly 700: "#15803D"; readonly 800: "#166534"; readonly 900: "#14532D"; readonly 950: "#052E16"; }; emerald: { readonly 50: "#ECFDF5"; readonly 100: "#D1FAE5"; readonly 200: "#A7F3D0"; readonly 300: "#6EE7B7"; readonly 400: "#34D399"; readonly 500: "#10B981"; readonly 600: "#059669"; readonly 700: "#047857"; readonly 800: "#065F46"; readonly 900: "#064E3B"; readonly 950: "#022C22"; }; teal: { readonly 50: "#F0FDFA"; readonly 100: "#CCFBF1"; readonly 200: "#99F6E4"; readonly 300: "#5EEAD4"; readonly 400: "#2DD4BF"; readonly 500: "#14B8A6"; readonly 600: "#0D9488"; readonly 700: "#0F766E"; readonly 800: "#115E59"; readonly 900: "#134E4A"; readonly 950: "#042F2E"; }; cyan: { readonly 50: "#ECFEFF"; readonly 100: "#CFFAFE"; readonly 200: "#A5F3FC"; readonly 300: "#67E8F9"; readonly 400: "#22D3EE"; readonly 500: "#06B6D4"; readonly 600: "#0891B2"; readonly 700: "#0E7490"; readonly 800: "#155E75"; readonly 900: "#164E63"; readonly 950: "#083344"; }; sky: { readonly 50: "#F0F9FF"; readonly 100: "#E0F2FE"; readonly 200: "#BAE6FD"; readonly 300: "#7DD3FC"; readonly 400: "#38BDF8"; readonly 500: "#0EA5E9"; readonly 600: "#0284C7"; readonly 700: "#0369A1"; readonly 800: "#075985"; readonly 900: "#0C4A6E"; readonly 950: "#082F49"; }; blue: { readonly 50: "#EFF6FF"; readonly 100: "#DBEAFE"; readonly 200: "#BFDBFE"; readonly 300: "#93C5FD"; readonly 400: "#60A5FA"; readonly 500: "#3B82F6"; readonly 600: "#2563EB"; readonly 700: "#1D4ED8"; readonly 800: "#1E40AF"; readonly 900: "#1E3A8A"; readonly 950: "#172554"; }; indigo: { readonly 50: "#EEF2FF"; readonly 100: "#E0E7FF"; readonly 200: "#C7D2FE"; readonly 300: "#A5B4FC"; readonly 400: "#818CF8"; readonly 500: "#6366F1"; readonly 600: "#4F46E5"; readonly 700: "#4338CA"; readonly 800: "#3730A3"; readonly 900: "#312E81"; readonly 950: "#1E1B4B"; }; violet: { readonly 50: "#F5F3FF"; readonly 100: "#EDE9FE"; readonly 200: "#DDD6FE"; readonly 300: "#C4B5FD"; readonly 400: "#A78BFA"; readonly 500: "#8B5CF6"; readonly 600: "#7C3AED"; readonly 700: "#6D28D9"; readonly 800: "#5B21B6"; readonly 900: "#4C1D95"; readonly 950: "#2E1065"; }; purple: { readonly 50: "#FAF5FF"; readonly 100: "#F3E8FF"; readonly 200: "#E9D5FF"; readonly 300: "#D8B4FE"; readonly 400: "#C084FC"; readonly 500: "#A855F7"; readonly 600: "#9333EA"; readonly 700: "#7E22CE"; readonly 800: "#6B21A8"; readonly 900: "#581C87"; readonly 950: "#3B0764"; }; fuchsia: { readonly 50: "#FDF4FF"; readonly 100: "#FAE8FF"; readonly 200: "#F5D0FE"; readonly 300: "#F0ABFC"; readonly 400: "#E879F9"; readonly 500: "#D946EF"; readonly 600: "#C026D3"; readonly 700: "#A21CAF"; readonly 800: "#86198F"; readonly 900: "#701A75"; readonly 950: "#4A044E"; }; pink: { readonly 50: "#FDF2F8"; readonly 100: "#FCE7F3"; readonly 200: "#FBCFE8"; readonly 300: "#F9A8D4"; readonly 400: "#F472B6"; readonly 500: "#EC4899"; readonly 600: "#DB2777"; readonly 700: "#BE185D"; readonly 800: "#9D174D"; readonly 900: "#831843"; readonly 950: "#500724"; }; rose: { readonly 50: "#FFF1F2"; readonly 100: "#FFE4E6"; readonly 200: "#FECDD3"; readonly 300: "#FDA4AF"; readonly 400: "#FB7185"; readonly 500: "#F43F5E"; readonly 600: "#E11D48"; readonly 700: "#BE123C"; readonly 800: "#9F1239"; readonly 900: "#881337"; readonly 950: "#4C0519"; }; }; spacing: (...args: [SpacingValue[]] | SpacingValue[]) => string; alpha: (color: HvColorAny, factor: number | string) => string; mix: (color1: HvColorAny, factor: string | number, color2?: HvColorAny) => string; breakpoints: DeepString; colors: DeepString<{ type: HvThemeColorMode_2; } & HvThemeColors>; radii: DeepString; space: DeepString; fontFamily: DeepString<{ body: string; }>; fontSizes: DeepString<{ xs: string; sm: string; base: string; lg: string; xl: string; xl2: string; xl3: string; xl4: string; }>; fontWeights: DeepString<{ hairline: string; thin: string; light: string; normal: string; medium: string; semibold: string; bold: string; extrabold: string; black: string; }>; lineHeights: DeepString<{ none: string; xs: string; sm: string; base: string; lg: string; xl: string; xl2: string; xl3: string; xl4: string; }>; zIndices: DeepString; header: DeepString<{ height: string; secondLevelHeight: string; }>; form: DeepString<{ errorColor: string; }>; snackbar: DeepString<{ actionButtonVariant: string; }>; bulkActions: DeepString<{ actionButtonVariant: string; }>; stepNavigation: DeepString<{ separatorMargin: string; defaultSeparatorHeight: number; simpleSeparatorHeight: number; }>; filterGroup: DeepString<{ applyButtonVariant: string; cancelButtonVariant: string; }>; colorPicker: DeepString<{ hueDirection: "vertical" | "horizontal"; }>; typography: DeepString>; }; export declare const themes: { next: HvThemeStructure; pentaho: HvThemeStructure; }; declare type TypographyVariants = "display" | "title1" | "title2" | "title3" | "title4" | "label" | "body" | "captionLabel" | "caption1" | "caption2" | (string & {}); export declare const violet: { readonly 50: "#F5F3FF"; readonly 100: "#EDE9FE"; readonly 200: "#DDD6FE"; readonly 300: "#C4B5FD"; readonly 400: "#A78BFA"; readonly 500: "#8B5CF6"; readonly 600: "#7C3AED"; readonly 700: "#6D28D9"; readonly 800: "#5B21B6"; readonly 900: "#4C1D95"; readonly 950: "#2E1065"; }; declare type VizKeys = `cat${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`; export declare const yellow: { readonly 50: "#FEFCE8"; readonly 100: "#FEF9C3"; readonly 200: "#FEF08A"; readonly 300: "#FDE047"; readonly 400: "#FACC15"; readonly 500: "#EAB308"; readonly 600: "#CA8A04"; readonly 700: "#A16207"; readonly 800: "#854D0E"; readonly 900: "#713F12"; readonly 950: "#422006"; }; export declare const zIndices: { hide: number; base: number; docked: number; sticky: number; fab: number; banner: number; overlay: number; modal: number; dropdown: number; popover: number; tooltip: number; skipLink: number; toast: number; }; export { }