@hitachivantara/uikit-styles

import { HvThemeStructure as HvThemeStructure_2 } from '..'; import { HvThemeStructure as HvThemeStructure_3 } from './types'; import { Property } from 'csstype'; import { StandardProperties } from 'csstype'; declare const accentLight: { secondary: string; primary: string; primary_80: string; primary_20: string; brand: string; secondary_80: string; secondary_60: string; }; 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"; }; declare const atmosphereLight: { atmo1: string; atmo2: string; atmo3: string; atmo4: string; }; declare const base: { base_light: string; base_dark: string; }; 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; }; }; declare const categorical: { cat1_180: string; cat1_160: string; cat1_140: string; cat1_120: string; cat1: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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; }; export declare const colors: { common: { cat1_180: string; cat1_160: string; cat1_140: string; cat1_120: string; cat1: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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; base_light: string; base_dark: string; }; light: { 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; /** @deprecated use `bgPage` */ backgroundColor: string; /** @deprecated use `bgHover` */ containerBackgroundHover: string; shad1: string; shadow: string; supp1: string; supp2: string; supp3: string; supp4: string; supp5: string; positive_80: string; positive_120: string; neutral: string; warning_120: string; warning_140: string; negative_80: string; negative_120: string; catastrophic: string; sema6: string; neutral_20: string; positive_20: string; negative_20: string; sema10: string; sema11: string; sema12: string; sema13: string; sema14: string; sema15: string; sema16: string; sema17: string; sema18: string; sema19: string; warning_20: string; atmo1: string; atmo2: string; atmo3: string; atmo4: string; secondary: string; primary_80: string; primary_20: string; brand: string; secondary_80: string; secondary_60: string; }; dark: { 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; backgroundColor: string; containerBackgroundHover: string; shad1: string; shadow: string; supp2: string; supp3: string; supp4: string; supp5: string; supp1: string; positive_80: string; positive_120: string; neutral: string; warning_120: string; warning_140: string; negative_80: string; negative_120: string; catastrophic: string; sema6: string; neutral_20: string; positive_20: string; negative_20: string; sema10: string; sema11: string; sema12: string; sema13: string; sema14: string; sema15: string; sema16: string; sema17: string; sema18: string; sema19: string; warning_20: string; atmo1: string; atmo2: string; atmo3: string; atmo4: string; secondary: string; primary_80: string; primary_20: string; brand: string; secondary_80: string; secondary_60: string; }; }; export declare interface ColorTokens extends Record<SemanticKeys<SemanticTypes>, string> { 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; } 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<string | number> { } 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"; }; export declare type DeepString<T> = { [P in keyof T]: T[P] extends object ? DeepString<T[P]> : string; }; export declare const ds3: HvThemeStructure_2<"dawn" | "wicked">; export declare const ds5: HvThemeStructure_2<"dawn" | "wicked">; 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"; }; declare const flattenTokens: { colors: { 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; backgroundColor: string; containerBackgroundHover: string; shad1: string; shadow: string; supp1: string; supp2: string; supp3: string; supp4: string; supp5: string; positive_80: string; positive_120: string; neutral: string; warning_120: string; warning_140: string; negative_80: string; negative_120: string; catastrophic: string; sema6: string; neutral_20: string; positive_20: string; negative_20: string; sema10: string; sema11: string; sema12: string; sema13: string; sema14: string; sema15: string; sema16: string; sema17: string; sema18: string; sema19: string; warning_20: string; atmo1: string; atmo2: string; atmo3: string; atmo4: string; secondary: string; primary_80: string; primary_20: string; brand: string; secondary_80: string; secondary_60: string; cat1_180: string; cat1_160: string; cat1_140: string; cat1_120: string; cat1: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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; base_light: string; base_dark: string; type: string; }; breakpoints: { unit: string; step: number; values: { xs: number; sm: number; md: number; lg: number; xl: number; }; }; radii: { none: string; base: string; round: string; large: string; circle: string; full: string; }; space: { base: number; xxs: string; xs: string; sm: string; md: string; lg: string; xl: string; }; sizes: { xs: string; sm: string; md: string; lg: string; xl: string; }; fontFamily: { body: string; }; fontSizes: { xs: string; sm: string; base: string; lg: string; xl: string; xl2: string; xl3: string; xl4: string; }; fontWeights: { hairline: string; thin: string; light: string; normal: string; medium: string; semibold: string; bold: string; extrabold: string; black: string; }; lineHeights: { none: string; xs: string; sm: string; base: string; lg: string; xl: string; xl2: string; xl3: string; xl4: string; }; 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 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 getThemesList: (themes: Record<string, any>) => Record<string, any>; export declare const getThemesVars: (themes: HvThemeStructure[]) => Record<string, any>; 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: <T>(args: T[] | [T[]]) => args is T[]; export declare type HvAccentColor = keyof typeof accentLight; export declare type HvAtmosphereColor = keyof typeof atmosphereLight; export declare type HvBaseColor = keyof typeof base; export declare type HvBaseTheme = "ds3" | "ds5" | "pentahoPlus"; export declare type HvBreakpoints = keyof typeof breakpoints.values; export declare type HvCategoricalColor = keyof typeof categorical; /** A type with all the accepted colors from the color palette */ export declare type HvColor = keyof typeof colors.common | keyof typeof colors.light; /** * A type representing an `HvColor` from the palette or any other color string * @example "secondary" "brand" "atmo2" "#FF0000" "purple" "inherit" * */ export declare type HvColorAny = HvColor | Property.Color; export declare interface HvCustomTheme<Mode extends string = string> extends HvThemeComponents, HvThemeComponentsProps, HvThemeTypography, Partial<Omit<HvThemeTokens, "colors">> { name: string; colors: { modes: Record<Mode, Partial<HvThemeColorModeStructure>>; }; } export declare type HvRadius = keyof typeof radii; export declare type HvSemanticColor = keyof typeof semanticLight; export declare type HvSize = keyof typeof sizes; export declare type HvSupportColor = keyof typeof supportLight; export declare type HvTheme = typeof theme; export declare type HvThemeBreakpoint = Exclude<keyof typeof tokens.space, "base">; export declare type HvThemeColorMode = "dawn" | "wicked"; export declare interface HvThemeColorModeStructure extends HvThemeColors, Record<string, string> { type: HvThemeColorModeType; } export declare type HvThemeColorModeType = "light" | "dark"; export declare type HvThemeColors = typeof colors.common & typeof colors.light; /** Theme components */ export declare type HvThemeComponents = { header: { height: string; secondLevelHeight: string; }; form: { errorColor: string; }; bulkActions: { actionButtonVariant: string; }; /** @deprecated unused */ table: { rowStripedBackgroundColorEven: string; rowStripedBackgroundColorOdd: string; rowExpandBackgroundColor: string; rowSortedColor: string; rowSortedColorAlpha: string; }; stepNavigation: { separatorMargin: string; defaultSeparatorHeight: number; simpleSeparatorHeight: number; }; filterGroup: { applyButtonVariant: string; cancelButtonVariant: string; }; scrollTo: { dotSelectedSize: number; backgroundColorOpacity: number; }; colorPicker: { hueDirection: "vertical" | "horizontal"; }; snackbar: { actionButtonVariant: string; }; }; /** Theme components props */ export declare type HvThemeComponentsProps<ComponentNames extends string = string> = { /** Component properties to override */ components?: Record<ComponentNames, Record<string, any>>; /** Record of icon names and their path, to override the default icons */ icons?: Record<string, string> & { viewBox: string; }; }; export declare interface HvThemeStructure<Mode extends string = string> extends HvThemeComponents, HvThemeComponentsProps, HvThemeTypography, Omit<HvThemeTokens, "colors"> { name: string; base: HvBaseTheme; colors: { modes: Record<Mode, HvThemeColorModeStructure>; }; } export declare type HvThemeTokens = typeof flattenTokens; export declare type HvThemeTypography = { typography: Record<TypographyVariants, HvThemeTypographyProps>; }; export declare type HvThemeTypographyProps = Pick<CSSProperties, "color" | "fontSize" | "letterSpacing" | "lineHeight" | "fontWeight" | "textDecoration">; export declare type HvThemeVars = DeepString<HvThemeTokens> & DeepString<HvThemeComponents> & DeepString<HvThemeTypography>; 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: <Mode extends string = string>(options: HvCustomTheme<Mode> | ((theme: HvTheme) => HvCustomTheme<Mode>)) => HvThemeStructure<Mode>; export declare const mapCSSVars: <T extends object>(obj: T, prefix?: string) => DeepString<T>; export declare const mergeTheme: (...objects: any[]) => any; 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 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 parseTheme: (themes: HvThemeStructure[], theme?: string, colorMode?: string) => { theme: HvThemeStructure; selectedTheme: string; selectedMode: string; colorModes: string[]; colorScheme: string; }; export declare const pentahoPlus: HvThemeStructure_2<"dawn" | "wicked">; 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: { none: string; base: string; round: string; large: string; /** @deprecated use `radii.full` instead */ circle: string; full: string; }; 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 extends string> = `${Prefix}` | `${Prefix}Strong` | `${Prefix}Dimmed` | `${Prefix}Subtle` | `${Prefix}Deep`; declare const semanticLight: { positive: string; positive_80: string; positive_120: string; neutral: string; warning: string; warning_120: string; warning_140: string; negative: string; negative_80: string; negative_120: string; catastrophic: string; sema6: string; neutral_20: string; positive_20: string; negative_20: string; sema10: string; sema11: string; sema12: string; sema13: string; sema14: string; sema15: string; sema16: string; sema17: string; sema18: string; sema19: string; warning_20: string; }; declare type SemanticTypes = "primary" | "accent" | "positive" | "warning" | "negative" | "info"; /** @deprecated no longer used. use `theme.space` or the direct value instead. */ export declare const sizes: { xs: string; sm: string; md: string; lg: string; xl: string; }; 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: { base: number; xxs: string; xs: string; sm: string; md: string; lg: string; xl: string; }; export declare const spacingUtil: (value: SpacingValue, vars: HvThemeVars) => string; export declare const spacingUtilOld: (value: SpacingValue, vars: HvThemeVars) => string; export declare type SpacingValue = number | HvThemeBreakpoint | (string & {}); declare const supportLight: { supp1: string; supp2: string; supp3: string; supp4: string; supp5: 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.brand // "var(--uikit-colors-brand)" * 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";