@logo-rn/shared-utils/utils/constants/CSS_CONSTANTS.ts

@logo-rn packages utils

import { Dimensions } from "react-native";

//header css
export const BACK_COLOR_ICON = "#0090FF"

//button css
export const BUTTON_HEIGHT = 44;
export const BUTTON_WIDTH = 92;
export const BUTTON_FULL_WIDTH = "100%";
export const LEFT_ICON_BUTTON_WIDTH = 108;
export const RIGHT_ICON_BUTTON_WIDTH = 120;
export const BOTH_ICON_BUTTON_WIDTH = 132;
export const ICON_BUTTON_WIDTH = 44;
export const BUTTON_BORDER_RADIUS = 4
export const BUTTON_PADDING = 8

//color css
export const PRIMARY_COLOR = "rgba(18, 96, 240, 1)"
export const PRIMARY_LIGHT_COLOR = "rgba(18, 96, 240, 1)"
export const PRIMARY_BACKGROUND_COLOR = "rgba(0, 144, 255, 0.2)"
export const DANGER_COLOR = "rgba(236, 78, 80, 1)"
export const DANGER_BACKGROUND_COLOR = "rgba(236, 78, 80, 0.1)"
export const SUCCESS_COLOR = "rgba(21, 193, 93, 1)"
export const WARNING_COLOR = "#F8AA1C"
export const GRAY_BACKGROUND = "rgba(25, 59, 103, 0.05)"

export const GHOST_COLOR = "#FFF"
export const BLACK = "#000"
export const TEXT_COLOR = "rgba(25, 36, 52, 1)"
export const TEXT_COLOR_90 = "rgba(24, 39, 58, 0.94)"
export const TEXT_COLOR_80 = "rgba(26, 41, 61, 0.83)"
export const TEXT_COLOR_70 = "rgba(27, 43, 65, 0.72)"
export const TEXT_COLOR_60 = "rgba(28, 46, 69, 0.6)"
export const TEXT_COLOR_50 = "rgba(28, 48, 74, 0.5)"
export const TEXT_COLOR_40 = "rgba(28, 50, 79, 0.38)"
export const TEXT_COLOR_30 = "rgba(28, 52, 84, 0.26)"
export const TEXT_COLOR_20 = "rgba(28, 55, 90, 0.16)"
export const TEXT_COLOR_10 = "rgba(26, 56, 96, 0.1)"
export const TEXT_COLOR_5 = "rgba(25, 59, 103, 0.05)"

export const COLORS = {
    GHOST_COLOR: "#FFF",
    BLACK: "#000",
    TEXT_COLOR: "rgba(25, 36, 52, 1)",
    TEXT_COLOR_90: "rgba(24, 39, 58, 0.94)",
    TEXT_COLOR_80: "rgba(26, 41, 61, 0.83)",
    TEXT_COLOR_70: "rgba(27, 43, 65, 0.72)",
    TEXT_COLOR_60: "rgba(28, 46, 69, 0.6)",
    TEXT_COLOR_50: "rgba(28, 48, 74, 0.5)",
    TEXT_COLOR_40: "rgba(28, 50, 79, 0.38)",
    TEXT_COLOR_30: "rgba(28, 52, 84, 0.26)",
    TEXT_COLOR_20: "rgba(28, 55, 90, 0.16)",
    TEXT_COLOR_10: "rgba(26, 56, 96, 0.1)",
    TEXT_COLOR_5: "rgba(25, 59, 103, 0.05)"
}

export const SHADOW1 = {
    shadowColor: 'rgba(28, 48, 74, 0.25)',
    shadowOffset: { width: 0, height: -1 },
    shadowOpacity: 0.6,
    shadowRadius: 8,
}

export const SHADOW2 = {
    shadowColor: BLACK,
    shadowOffset: { width: -2, height: 0 },
    shadowOpacity: 0.5,
    shadowRadius: 4,
}

export const BUTTON_APPEARANCE = {
    filled: "filled",
    outline: "outline",
    ghost: "ghost"
}

export const BUTTON_STATUS = {
    primary: "Primary",
    success: "Success",
    info: "Info",
    warning: "Warning",
    danger: "Danger",
    basic: "Basic",
}

export const AVATAR_SIZE = {
    tiny: 24,
    small: 32,
    medium: 40,
    big: 48,
    large: 56
}

export const ALERT_STATUS = {
    primary: "primary",
    success: "success",
    white: "white",
    black: "black",
    danger: "danger",
}


export const FULL_WIDTH = Dimensions.get('window').width
export const FULL_HEIGHT = Dimensions.get('window').height


export const ALIGN_SELF = {
    center: "center",
    flexStart: "flex-start",
    flexEnd: "flex-end"
}