import { Globals, Property } from 'csstype'; import { AnonymousObject } from 'onekijs-framework'; import { DefaultTheme, createGlobalStyle, css } from 'styled-components'; export type TshirtSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'; export type CssProperty = (value: T, variants?: AnonymousObject) => ReturnType | ReturnType[]; export type Formatter = (value: T, theme: DefaultTheme) => string; export type Media = 'all' | 'sm' | 'md' | 'lg' | 'xl'; export declare enum ColorKeys { white = "white", lightest = "lightest", lighter = "lighter", light = "light", dark = "dark", darker = "darker", darkest = "darkest", black = "black", success = "success", info = "info", warning = "warning", danger = "danger", primary = "primary", secondary = "secondary", blue = "blue", red = "red", purple = "purple", pink = "pink", indigo = "indigo", teal = "teal", orange = "orange", yellow = "yellow", green = "green", lightblue = "lightblue", lightred = "lightred", lightpurple = "lightpurple", lightpink = "lightpink", lightindigo = "lightindigo", lightteal = "lightteal", lightorange = "lightorange", lightyellow = "lightyellow", lightgreen = "lightgreen", background = "background" } export declare enum DashboardKeys { left = "left", right = "right", header = "header", footer = "footer", body = "body" } export declare enum BreakpointKeys { xs = "xs", sm = "sm", md = "md", lg = "lg", xl = "xl" } export declare enum SpacingKeys { none = "none", '2xs' = "2xs", xs = "xs", sm = "sm", md = "md", lg = "lg", xl = "xl", '2xl' = "2xl", '3xl' = "3xl", '4xl' = "4xl", '5xl' = "5xl", '6xl' = "6xl", '7xl' = "7xl", '8xl' = "8xl", '9xl' = "9xl", '10xl' = "10xl", '11xl' = "11xl", '12xl' = "12xl", '13xl' = "13xl", px = "px" } export declare enum TshirtKeys { xsmall = "xsmall", small = "small", medium = "medium", large = "large", xlarge = "xlarge" } export declare enum FontWeightKeys { hairline = "hairline", thin = "thin", light = "light", normal = "normal", medium = "medium", semibold = "semibold", bold = "bold", extrabold = "extrabold", black = "black" } export declare enum FontFamiliesKeys { sans = "sans", serif = "serif", mono = "mono" } export declare enum FontLineHeightKeys { none = "none", xs = "xs", sm = "sm", md = "md", lg = "lg", xl = "xl", '2xl' = "2xl", '3xl' = "3xl", '4xl' = "4xl" } export declare enum FontSizeKeys { '2xs' = "2xs", xs = "xs", sm = "sm", md = "md", lg = "lg", xl = "xl", '2xl' = "2xl", '3xl' = "3xl", '4xl' = "4xl", '5xl' = "5xl", '6xl' = "6xl", default = "default" } export declare enum FontSpacingKeys { xs = "xs", sm = "sm", md = "md", lg = "lg", xl = "xl", '2xl' = "2xl" } export declare enum RadiusKeys { none = "none", '2xs' = "2xs", xs = "xs", sm = "sm", md = "md", lg = "lg", xl = "xl", full = "full" } export declare enum ShadowKeys { default = "default", xs = "xs", sm = "sm", md = "md", lg = "lg", xl = "xl", '2xl' = "2xl", 'inner' = "inner", 'outline' = "outline", 'none' = "none" } export declare enum SizeKeys { 'zero' = 0, 'one' = 1, 'two' = 2, 'three' = 3, 'four' = 4, 'five' = 5, 'six' = 6, 'eight' = 8, 'ten' = 10, 'twelve' = 12, 'sixteen' = 16, 'twenty' = 20, 'twenty_four' = 24, 'thirty_two' = 32, 'fourty' = 40, 'fourty_eight' = 48, 'fifty_six' = 56, 'sixty_four' = 64, 'px' = "px", xs = "xs", sm = "sm", md = "md", lg = "lg", xl = "xl", '2xl' = "2xl", '3xl' = "3xl", '4xl' = "4xl", '5xl' = "5xl", '6xl' = "6xl", 'screen-sm' = "screen-sm", 'screen-md' = "screen-md", 'screen-lg' = "screen-lg", 'screen-xl' = "screen-xl" } export type Theme = { GlobalStyles: ReturnType; breakpoints: { [k in BreakpointKeys]: string; }; colors: { [k in ColorKeys]: string; }; spacings: { [k in SpacingKeys]: string; }; palette: Palette; font: { families: { [k in FontFamiliesKeys]: string; }; lineHeights: { [k in FontLineHeightKeys]: number; }; sizes: { [k in FontSizeKeys]: string | 0; }; spacings: { [k in FontSpacingKeys]: string | 0; }; weights: { [k in FontWeightKeys]: number; }; }; radius: { [k in RadiusKeys]: string | 0; }; shadow: { [k in ShadowKeys]: string; }; sizes: { [k in SizeKeys]: string | 0; }; buttons: { [k in ColorKeys]: { bgColor: ColorPropertyTheme | Property.BackgroundColor; bgColorFlat: ColorPropertyTheme | Property.BackgroundColor; bgColorOutline: ColorPropertyTheme | Property.BackgroundColor; borderColor: ColorPropertyTheme | Property.BorderColor; borderColorFlat: ColorPropertyTheme | Property.BackgroundColor; borderColorOutline: ColorPropertyTheme | Property.BackgroundColor; borderRadiusMedium: RadiusPropertyTheme | string; borderRadiusSmall: RadiusPropertyTheme | string; borderRadiusLarge: RadiusPropertyTheme | string; borderStyle: Property.BorderStyle; borderWidthSmall: Property.BorderWidth; borderWidthMedium: Property.BorderWidth; borderWidthLarge: Property.BorderWidth; color: ColorPropertyTheme | Property.Color; colorFlat: ColorPropertyTheme | Property.BackgroundColor; colorOutline: ColorPropertyTheme | Property.BackgroundColor; cursor: Property.Cursor; cursorDisabled: Property.Cursor; fontSizeMedium: FontSizePropertyTheme | Property.FontSize; fontSmallSize: FontSizePropertyTheme | Property.FontSize; fontLargeSize: FontSizePropertyTheme | Property.FontSize; fontWeight: FontWeightPropertyTheme | Property.FontWeight; hoverBgColor: ColorPropertyTheme | Property.BackgroundColor; hoverBgColorFlat: ColorPropertyTheme | Property.BackgroundColor; hoverBgColorOutline: ColorPropertyTheme | Property.BackgroundColor; hoverBorderColor: ColorPropertyTheme | Property.BackgroundColor; hoverBorderColorFlat: ColorPropertyTheme | Property.BackgroundColor; hoverBorderColorOutline: ColorPropertyTheme | Property.BackgroundColor; hoverColor: ColorPropertyTheme | Property.Color; hoverColorFlat: ColorPropertyTheme | Property.BackgroundColor; hoverColorOutline: ColorPropertyTheme | Property.BackgroundColor; letterSpacingSmall: LetterSpacingPropertyTheme | Property.LetterSpacing; letterSpacingMedium: LetterSpacingPropertyTheme | Property.LetterSpacing; letterSpacingLarge: LetterSpacingPropertyTheme | Property.LetterSpacing; lineHeightSmall: LineHeightPropertyTheme | Property.LineHeight; lineHeightMedium: LineHeightPropertyTheme | Property.LineHeight; lineHeightLarge: LineHeightPropertyTheme | Property.LineHeight; opacity: Property.Opacity; opacityDisabled: Property.Opacity; paddingYMedium: SpacingPropertyTheme | Property.Padding; paddingXMedium: SpacingPropertyTheme | Property.Padding; paddingYSmall: SpacingPropertyTheme | Property.Padding; paddingXSmall: SpacingPropertyTheme | Property.Padding; paddingYLarge: SpacingPropertyTheme | Property.Padding; paddingXLarge: SpacingPropertyTheme | Property.Padding; textOverflow: Property.TextOverflow; textTransform: Property.TextTransform; whiteSpace: Property.WhiteSpace; }; }; fieldLayout: { marginY: Property.Margin | SpacingPropertyTheme; helperMarginLeft: Property.Margin | SpacingPropertyTheme; helperMarginRight: Property.Margin | SpacingPropertyTheme; helperColor: Property.Color | ColorPropertyTheme; descriptionFontSize: FontSizePropertyTheme | Property.FontSize; descriptionColor: Property.Color | ColorPropertyTheme; }; table: { bgColor: ColorPropertyTheme | Property.BackgroundColor; shadow: ShadowPropertyTheme | Property.BoxShadow; thPaddingX: SpacingPropertyTheme | Property.Padding; thPaddingY: SpacingPropertyTheme | Property.Padding; thBorderBottomWidth: number | Property.BorderWidth; thBorderBottomColor: ColorPropertyTheme | Property.BorderColor; thBgColor: ColorPropertyTheme | Property.BackgroundColor; thFontWeigth: FontWeightPropertyTheme | Property.FontWeight; thFontColor: ColorPropertyTheme | Property.Color; thFontCase: Property.TextTransform; thFontSize: FontSizePropertyTheme | Property.FontSize; thLetterSpacing: LetterSpacingPropertyTheme | Property.LetterSpacing; thFilterInputBgColor: ColorPropertyTheme | Property.BackgroundColor; thFilterInputFontSize: FontSizePropertyTheme | Property.FontSize; thFilterInputPaddingX: SpacingPropertyTheme | Property.Padding; thFilterInputPaddingY: SpacingPropertyTheme | Property.Padding; tdFontSize: FontSizePropertyTheme | Property.FontSize; tdFontColor: ColorPropertyTheme | Property.Color; tdPaddingX: SpacingPropertyTheme | Property.Padding; tdPaddingY: SpacingPropertyTheme | Property.Padding; tdBorderBottomColor: ColorPropertyTheme | Property.BorderColor; tdBorderBottomWidth: number | Property.BorderWidth; tdBorderBottomStyle: Property.BorderBottomStyle; tdStripBgColor: ColorPropertyTheme | Property.BackgroundColor; tdHoverBgColor: ColorPropertyTheme | Property.BackgroundColor; tdHoverFontColor: ColorPropertyTheme | Property.Color; tdExpandedBgColor: ColorPropertyTheme | Property.BackgroundColor; loadingRowBgColor: ColorPropertyTheme | Property.BackgroundColor; loadingRowMinHeight: SizePropertyTheme | Property.Height; }; input: { bgColor: ColorPropertyTheme | Property.BackgroundColor; width: SizePropertyTheme | Property.Width; borderWidth: number | Property.BorderWidth; borderColor: ColorPropertyTheme | Property.BorderColor; borderRadius: RadiusPropertyTheme | string; borderStyle: Property.BorderBottomStyle; borderFocusColor: ColorPropertyTheme | Property.BorderColor; borderFocusWidth: number | Property.BorderWidth; paddingX: SpacingPropertyTheme | Property.Padding; paddingY: SpacingPropertyTheme | Property.Padding; xsPaddingX: SpacingPropertyTheme | Property.Padding; xsPaddingY: SpacingPropertyTheme | Property.Padding; xsFontSize: FontSizePropertyTheme | Property.FontSize; smPaddingX: SpacingPropertyTheme | Property.Padding; smPaddingY: SpacingPropertyTheme | Property.Padding; smFontSize: FontSizePropertyTheme | Property.FontSize; mdPaddingX: SpacingPropertyTheme | Property.Padding; mdPaddingY: SpacingPropertyTheme | Property.Padding; mdFontSize: FontSizePropertyTheme | Property.FontSize; lgPaddingX: SpacingPropertyTheme | Property.Padding; lgPaddingY: SpacingPropertyTheme | Property.Padding; lgFontSize: FontSizePropertyTheme | Property.FontSize; xlPaddingX: SpacingPropertyTheme | Property.Padding; xlPaddingY: SpacingPropertyTheme | Property.Padding; xlFontSize: FontSizePropertyTheme | Property.FontSize; appearance: Property.Appearance; outline: Property.Outline; fontColor: ColorPropertyTheme | Property.Color; placeholderColor: ColorPropertyTheme | Property.Color; }; textarea: { bgColor: ColorPropertyTheme | Property.BackgroundColor; width: SizePropertyTheme | Property.Width; borderWidth: number | Property.BorderWidth; borderColor: ColorPropertyTheme | Property.BorderColor; borderRadius: RadiusPropertyTheme | string; borderStyle: Property.BorderBottomStyle; borderFocusColor: ColorPropertyTheme | Property.BorderColor; borderFocusWidth: number | Property.BorderWidth; paddingX: SpacingPropertyTheme | Property.Padding; paddingY: SpacingPropertyTheme | Property.Padding; xsPaddingX: SpacingPropertyTheme | Property.Padding; xsPaddingY: SpacingPropertyTheme | Property.Padding; xsFontSize: FontSizePropertyTheme | Property.FontSize; smPaddingX: SpacingPropertyTheme | Property.Padding; smPaddingY: SpacingPropertyTheme | Property.Padding; smFontSize: FontSizePropertyTheme | Property.FontSize; mdPaddingX: SpacingPropertyTheme | Property.Padding; mdPaddingY: SpacingPropertyTheme | Property.Padding; mdFontSize: FontSizePropertyTheme | Property.FontSize; lgPaddingX: SpacingPropertyTheme | Property.Padding; lgPaddingY: SpacingPropertyTheme | Property.Padding; lgFontSize: FontSizePropertyTheme | Property.FontSize; xlPaddingX: SpacingPropertyTheme | Property.Padding; xlPaddingY: SpacingPropertyTheme | Property.Padding; xlFontSize: FontSizePropertyTheme | Property.FontSize; appearance: Property.Appearance; outline: Property.Outline; fontColor: ColorPropertyTheme | Property.Color; placeholderColor: ColorPropertyTheme | Property.Color; }; checkbox: { bgColor: ColorPropertyTheme | Property.BackgroundColor; color: ColorPropertyTheme | Property.BackgroundColor; }; label: { fontWeight: FontWeightPropertyTheme | Property.FontWeight; fontCase: Property.TextTransform; fontColor: ColorPropertyTheme | Property.Color; fontSize: FontSizePropertyTheme | Property.FontSize; letterSpacing: LetterSpacingPropertyTheme | Property.LetterSpacing; requiredColor: ColorPropertyTheme | Property.Color; requiredWeight: FontWeightPropertyTheme | Property.FontWeight; requiredMarginLeft: SpacingPropertyTheme | Property.Margin; helperIconColor: ColorPropertyTheme | Property.Color; helperMarginLeft: SpacingPropertyTheme | Property.Margin; }; link: { fontWeight: FontWeightPropertyTheme | Property.FontWeight; fontColor: ColorPropertyTheme | Property.Color; textDecoration: Property.TextDecoration; fontWeightHover: FontWeightPropertyTheme | Property.FontWeight; fontColorHover: ColorPropertyTheme | Property.Color; textDecorationHover: Property.TextDecoration; }; tooltip: { [k in ColorKeys]: { bgColor: ColorPropertyTheme | Property.BackgroundColor; color: ColorPropertyTheme | Property.Color; linkColor: ColorPropertyTheme | Property.Color; borderColor: ColorPropertyTheme | Property.BackgroundColor; borderRadius: Property.BorderRadius | RadiusPropertyTheme; borderStyle: Property.BorderStyle; borderWidth: Property.BorderWidth; boxShadow: ShadowPropertyTheme | Property.BoxShadow; padding: SpacingPropertyTheme | Property.Padding; fontSize: FontSizePropertyTheme | Property.FontSize; }; }; accordion: { fontWeight: FontWeightPropertyTheme | Property.FontWeight; fontColor: ColorPropertyTheme | Property.Color; activeFontColor: ColorPropertyTheme | Property.Color; hoverFontColor: ColorPropertyTheme | Property.Color; fontSize: FontSizePropertyTheme | Property.FontSize; togglerIconWidth: Property.Width | IconSizePropertyTheme; togglerIconHeight: Property.Width | IconSizePropertyTheme; bgColor: ColorPropertyTheme | Property.BackgroundColor; activeBgColor: ColorPropertyTheme | Property.BackgroundColor; hoverBgColor: ColorPropertyTheme | Property.BackgroundColor; borderColor: ColorPropertyTheme | Property.BorderColor; borderRadius: Property.BorderRadius | RadiusPropertyTheme; borderStyle: Property.BorderStyle; borderWidth: Property.BorderWidth; paddingX: SpacingPropertyTheme | Property.Padding; paddingY: SpacingPropertyTheme | Property.Padding; }; tab: { activeBgColor: ColorPropertyTheme | Property.BackgroundColor; activeBorderColor: ColorPropertyTheme | Property.BorderColor; activeBorderStyle: Property.BorderStyle; activeBorderWidth: Property.BorderWidth; activeFontSize: FontSizePropertyTheme | Property.FontSize; activeFontColor: ColorPropertyTheme | Property.Color; activeFontWeight: FontWeightPropertyTheme | Property.FontWeight; bgColor: ColorPropertyTheme | Property.BackgroundColor; borderColor: ColorPropertyTheme | Property.BorderColor; borderRadius: Property.BorderRadius | RadiusPropertyTheme; borderStyle: Property.BorderStyle; borderWidth: Property.BorderWidth; cursor: Property.Cursor; fontColor: ColorPropertyTheme | Property.Color; fontSize: FontSizePropertyTheme | Property.FontSize; fontWeight: FontWeightPropertyTheme | Property.FontWeight; hoverBgColor: ColorPropertyTheme | Property.BackgroundColor; hoverBorderColor: ColorPropertyTheme | Property.BorderColor; hoverBorderStyle: Property.BorderStyle; hoverBorderWidth: Property.BorderWidth; hoverFontColor: ColorPropertyTheme | Property.Color; marginBefore: SpacingPropertyTheme | Property.Margin; marginAfter: SpacingPropertyTheme | Property.Margin; paddingX: SpacingPropertyTheme | Property.Padding; paddingY: SpacingPropertyTheme | Property.Padding; }; wizard: { activeBgColor: ColorPropertyTheme | Property.BackgroundColor; activeBorderColor: ColorPropertyTheme | Property.BorderColor; activeFontSize: FontSizePropertyTheme | Property.FontSize; activeFontColor: ColorPropertyTheme | Property.Color; activeFontWeight: FontWeightPropertyTheme | Property.FontWeight; bgColor: ColorPropertyTheme | Property.BackgroundColor; borderColor: ColorPropertyTheme | Property.BorderColor; borderRadius: Property.BorderRadius | RadiusPropertyTheme; borderStyle: Property.BorderStyle; borderWidth: Property.BorderWidth; cursor: Property.Cursor; disabledBgColor: ColorPropertyTheme | Property.BackgroundColor; disabledBorderColor: ColorPropertyTheme | Property.BorderColor; disabledFontSize: FontSizePropertyTheme | Property.FontSize; disabledFontColor: ColorPropertyTheme | Property.Color; disabledFontWeight: FontWeightPropertyTheme | Property.FontWeight; errorBgColor: ColorPropertyTheme | Property.BackgroundColor; errorBorderColor: ColorPropertyTheme | Property.BorderColor; errorFontColor: ColorPropertyTheme | Property.Color; fontColor: ColorPropertyTheme | Property.Color; fontSize: FontSizePropertyTheme | Property.FontSize; fontWeight: FontWeightPropertyTheme | Property.FontWeight; hoverBgColor: ColorPropertyTheme | Property.BackgroundColor; hoverBorderColor: ColorPropertyTheme | Property.BorderColor; hoverBorderStyle: Property.BorderStyle; hoverBorderWidth: Property.BorderWidth; hoverFontColor: ColorPropertyTheme | Property.Color; marginBefore: SpacingPropertyTheme | Property.Margin; marginAfter: SpacingPropertyTheme | Property.Margin; modalStepsBgColor: ColorPropertyTheme | Property.BackgroundColor; modalStepsBorderColor: ColorPropertyTheme | Property.BorderColor; modalStepsBorderStyle: Property.BorderStyle; modalStepsBorderWidth: Property.BorderWidth; paddingRight: SpacingPropertyTheme | Property.Padding; paddingLeft: SpacingPropertyTheme | Property.Padding; paddingTop: SpacingPropertyTheme | Property.Padding; paddingBottom: SpacingPropertyTheme | Property.Padding; stepsBgColor: ColorPropertyTheme | Property.BackgroundColor; stepsBorderColor: ColorPropertyTheme | Property.BorderColor; stepsBorderStyle: Property.BorderStyle; stepsBorderWidth: Property.BorderWidth; stepsPaddingTop: SpacingPropertyTheme | Property.Padding; stepsPaddingBottom: SpacingPropertyTheme | Property.Padding; stepsPaddingLeft: SpacingPropertyTheme | Property.Padding; stepsPaddingRight: SpacingPropertyTheme | Property.Padding; successBgColor: ColorPropertyTheme | Property.BackgroundColor; successBorderColor: ColorPropertyTheme | Property.BorderColor; successFontColor: ColorPropertyTheme | Property.Color; warningBgColor: ColorPropertyTheme | Property.BackgroundColor; warningBorderColor: ColorPropertyTheme | Property.BorderColor; warningFontColor: ColorPropertyTheme | Property.Color; }; card: { borderColor: ColorPropertyTheme | Property.BorderColor; borderRadius: Property.BorderRadius | RadiusPropertyTheme; borderStyle: Property.BorderStyle; borderWidth: Property.BorderWidth; shadow: ShadowPropertyTheme | Property.BoxShadow; bgColor: ColorPropertyTheme | Property.BackgroundColor; fontColor: ColorPropertyTheme | Property.Color; fontSize: FontSizePropertyTheme | Property.FontSize; fontWeight: FontWeightPropertyTheme | Property.FontWeight; fontCase: 'uppercase'; paddingX: SpacingPropertyTheme | Property.Padding; paddingY: SpacingPropertyTheme | Property.Padding; letterSpacing: LetterSpacingPropertyTheme | Property.LetterSpacing; iconColor: ColorPropertyTheme | Property.Color; iconWidth: SizePropertyTheme | Property.Width; iconHeight: SizePropertyTheme | Property.Height; marginTop: SpacingPropertyTheme | Property.Margin; titleBorderBottomWidth: Property.BorderWidth; }; properties: { fontWeight: FontWeightPropertyTheme | Property.FontWeight; paddingY: SpacingPropertyTheme | Property.Padding; }; dashboard: { [k in DashboardKeys]: { bgColor: ColorPropertyTheme | Property.BackgroundColor; }; }; modal: { bgColor: ColorPropertyTheme | Property.BackgroundColor; maskColor: ColorPropertyTheme | Property.BackgroundColor; maskOpacity: Property.Opacity; zIndex: Property.ZIndex; xsmallSize: SizePropertyTheme | Property.Height; smallSize: SizePropertyTheme | Property.Height; mediumSize: SizePropertyTheme | Property.Height; largeSize: SizePropertyTheme | Property.Height; xlargeSize: SizePropertyTheme | Property.Height; boxShadow: ShadowPropertyTheme | Property.BoxShadow; borderRadius: RadiusPropertyTheme | string; }; }; export type Palette = AnonymousObject; export type TLength = string | 0; export type SizePropertyTheme = Globals | TLength | '-moz-max-content' | '-moz-min-content' | '-webkit-max-content' | 'auto' | 'intrinsic' | 'max-content' | 'min-content' | 'min-intrinsic' | 'none' | 'full' | 'screen' | string | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 'px' | 'xs' | 'sm' | 'md' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'screen-sm' | 'screen-md' | 'screen-lg' | 'screen-xl'; export type ThemeProps = { theme?: Partial; }; export type ColorPropertyTheme = keyof typeof ColorKeys; export type SpacingPropertyTheme = keyof typeof SpacingKeys; export type FontFamilyPropertyTheme = keyof typeof FontFamiliesKeys; export type FontSizePropertyTheme = keyof typeof FontSizeKeys; export type IconSizePropertyTheme = keyof typeof FontSizeKeys; export type FontWeightPropertyTheme = keyof typeof FontWeightKeys | number; export type LineHeightPropertyTheme = keyof typeof FontLineHeightKeys | 4 | 5 | 6 | 7 | 8 | 9 | 10; export type LetterSpacingPropertyTheme = keyof typeof FontSpacingKeys; export type RadiusPropertyTheme = keyof typeof RadiusKeys; export type ShadowPropertyTheme = keyof typeof ShadowKeys; export type PropsWithTheme = P & { theme: T; }; export type ComponentStyle

= (propsWithTheme: PropsWithTheme) => ReturnType; export type StylableProps = { className?: string; };