diff options
Diffstat (limited to 'packages/components/src/global')
| -rw-r--r-- | packages/components/src/global/globalEnums.tsx | 67 | ||||
| -rw-r--r-- | packages/components/src/global/globalUtils.tsx | 163 |
2 files changed, 113 insertions, 117 deletions
diff --git a/packages/components/src/global/globalEnums.tsx b/packages/components/src/global/globalEnums.tsx index bdeacccdb..bd82e3c57 100644 --- a/packages/components/src/global/globalEnums.tsx +++ b/packages/components/src/global/globalEnums.tsx @@ -1,52 +1,53 @@ export enum Colors { - BLACK = "#000000", - DARK_GRAY = "#323232", - MEDIUM_GRAY = "#9F9F9F", - LIGHT_GRAY = "#DFDFDF", - WHITE = "#FFFFFF", - MEDIUM_BLUE = "#4476F7", - MEDIUM_BLUE_ALT = "#4476f73d", // REDUCED OPACITY - LIGHT_BLUE = "#BDDDF5", - PINK = "#E0217D", - YELLOW = "#F5D747", - DROP_SHADOW = "#32323215", - ERROR_RED = "#FF9494", - SUCCESS_GREEN = "#4BB543", - TRANSPARENT = "transparent" + BLACK = '#000000', + DARK_GRAY = '#323232', + MEDIUM_GRAY = '#9F9F9F', + LIGHT_GRAY = '#DFDFDF', + WHITE = '#FFFFFF', + MEDIUM_BLUE = '#4476F7', + MEDIUM_BLUE_ALT = '#4476f73d', // REDUCED OPACITY + LIGHT_BLUE = '#BDDDF5', + PINK = '#E0217D', + YELLOW = '#F5D747', + DROP_SHADOW = '#32323215', + ERROR_RED = '#FF9494', + SUCCESS_GREEN = '#4BB543', + TRANSPARENT = 'transparent', } export enum FontSize { - JUMBO_ICON = "5rem", - ICON = "3rem", - HEADER = "1.6rem", - DEFAULT = "1rem", - SECONDARY = "1.3rem", - LABEL = "0.6rem" + JUMBO_ICON = '5rem', + ICON = '3rem', + HEADER = '1.6rem', + DEFAULT = '1rem', + SECONDARY = '1.3rem', + LABEL = '0.6rem', } export enum Padding { - MINIMUM_PADDING = "4px", - SMALL_PADDING = "8px", - MEDIUM_PADDING = "16px", - LARGE_PADDING = "32px", + MINIMUM_PADDING = '4px', + SMALL_PADDING = '8px', + MEDIUM_PADDING = '16px', + LARGE_PADDING = '32px', } export enum IconSizes { - ICON_SIZE = "28px", + ICON_SIZE = '28px', } export enum Borders { - STANDARD = "solid 1px #9F9F9F", - STANDARD_BORDER_RADIUS = '5px' + STANDARD = 'solid 1px #9F9F9F', + STANDARD_BORDER_RADIUS = '5px', } export enum Shadows { - STANDARD_SHADOW = "0px 3px 4px rgba(0, 0, 0, 0.3)" + STANDARD_SHADOW = '0px 3px 4px rgba(0, 0, 0, 0.3)', } export enum Size { - XSMALL = "xsmall", - SMALL = "small", - MEDIUM = "medium", - LARGE = "large" -}
\ No newline at end of file + XXSMALL = 'xxsmall', + XSMALL = 'xsmall', + SMALL = 'small', + MEDIUM = 'medium', + LARGE = 'large', +} diff --git a/packages/components/src/global/globalUtils.tsx b/packages/components/src/global/globalUtils.tsx index 0f1e0adbc..4a1c2cb66 100644 --- a/packages/components/src/global/globalUtils.tsx +++ b/packages/components/src/global/globalUtils.tsx @@ -1,93 +1,88 @@ -import { Size } from './globalEnums' +import { Size } from './globalEnums'; import Color from 'color'; export interface ILocation { - top: number - left: number - width: number - height: number - override?: 'left' | 'bottom' | 'top' | 'right' + top: number; + left: number; + width: number; + height: number; + override?: 'left' | 'bottom' | 'top' | 'right'; } -export const getFormLabelSize = ( - size: Size | undefined, -) => { - switch (size) { - case Size.XSMALL: - return '7px' - case Size.SMALL: - return '10px' - case Size.MEDIUM: - return '13px' - case Size.LARGE: - return '14px' - default: - return '10px' - } -} +export const getFormLabelSize = (size: Size | undefined) => { + switch (size) { + case Size.XXSMALL: + return '6px'; + case Size.XSMALL: + return '7px'; + case Size.SMALL: + return '10px'; + case Size.MEDIUM: + return '13px'; + case Size.LARGE: + return '14px'; + default: + return '10px'; + } +}; -export const getFontSize = ( - size: Size | undefined, - icon?: boolean -) => { - switch (size) { - case Size.XSMALL: - if (icon) return '11px' - return '9px' - case Size.SMALL: - if (icon) return '15px' - return '11px' - case Size.MEDIUM: - if (icon) return '17px' - return '14px' - case Size.LARGE: - if (icon) return '22px' - return '17px' - default: - if (icon) return '15px' - return '12px' - } -} +export const getFontSize = (size: Size | undefined, icon?: boolean) => { + switch (size) { + case Size.XXSMALL: + if (icon) return '10px'; + return '7px'; + case Size.XSMALL: + if (icon) return '11px'; + return '9px'; + case Size.SMALL: + if (icon) return '15px'; + return '11px'; + case Size.MEDIUM: + if (icon) return '17px'; + return '14px'; + case Size.LARGE: + if (icon) return '22px'; + return '17px'; + default: + if (icon) return '15px'; + return '12px'; + } +}; -export const getHeight = ( - height: number | undefined, - size: Size | undefined -) => { - if (height) return height - switch (size) { - case Size.XSMALL: - return 20 - case Size.SMALL: - return 30 - case Size.MEDIUM: - return 40 - case Size.LARGE: - return 50 - default: - return 30 - } -} +export const getHeight = (height: number | string | undefined, size: Size | undefined) => { + if (height) return height; + switch (size) { + case Size.XXSMALL: + return 15; + case Size.XSMALL: + return 20; + case Size.SMALL: + return 30; + case Size.MEDIUM: + return 40; + case Size.LARGE: + return 50; + default: + return 30; + } +}; -export const colorConvert = (color: any) => { - try { - return color ? Color(color.toLowerCase()) : Color('transparent') - } catch (e) { - console.log('COLOR error:', e) - return Color('red') - } -} +export const colorConvert = (color: string) => { + try { + return color ? Color(color.toLowerCase()) : Color('transparent'); + } catch (e) { + console.log('COLOR error:', e); + return Color('red'); + } +}; -export const isDark = (color: any): boolean => { - if (color === undefined) return false - if (color === 'transparent') return false - if (color.startsWith?.('linear')) return false - const nonAlphaColor = color.startsWith('#') - ? (color as string).substring(0, 7) - : color.startsWith('rgba') - ? color.replace(/,.[^,]*\)/, ')').replace('rgba', 'rgb') - : color - const col = colorConvert(nonAlphaColor).rgb() - const colsum = col.red() + col.green() + col.blue() - if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return false - else return true -} +export const isDark = (color: string): boolean => { + if (color === undefined) return false; + if (color === 'transparent') return false; + if (color.startsWith?.('linear')) return false; + const nonAlphaColor = color.startsWith('#') ? (color as string).substring(0, 7) : color.startsWith('rgba') ? color.replace(/,.[^,]*\)/, ')').replace('rgba', 'rgb') : color; + const col = colorConvert(nonAlphaColor).rgb(); + const colsum = col.red() + col.green() + col.blue(); + if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return false; + else return true; +}; |