@logo-rn/logo-tag-edit/src/TagEditCss.ts

<LogoTagEdit/> allows user to enter and edit tags.

import { DANGER_COLOR, GHOST_COLOR, TEXT_COLOR_10, TEXT_COLOR_5, TEXT_COLOR_50, TEXT_COLOR_60 } from "@logo-rn/shared-utils/utils/constants/CSS_CONSTANTS";
import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
    tagEditContainerStyle: {
        display: "flex",
        flexDirection: "row"
    },
    container: {
        display: "flex",
        flexDirection: "row",
        marginBottom: 6,
        flexWrap: "wrap",
        alignItems: "center",
        paddingHorizontal: 8,
        paddingVertical: 12,
        borderRadius: 4,
        alignContent: "center"
    },
    helperText: {
        fontFamily: "Inter",
        fontWeight: "400",
        fontSize: 12,
        color: DANGER_COLOR,
        marginBottom: 6,
        marginLeft: 16
    },
    maxLength: {
        color: TEXT_COLOR_50,
        fontSize: 14,
        fontWeight: "500"
    },
    buttonContainer: {
        width: 44,
        height: 50,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: TEXT_COLOR_10
    },
    readOnly: {
        backgroundColor: GHOST_COLOR,
        borderStyle: 'dashed',
        height: 44,
        justifyContent: "center",
        borderWidth: 1,
        borderColor: TEXT_COLOR_60,
    },
    placeholder: {
        backgroundColor: GHOST_COLOR,
        position: "absolute",
        top: -8,
        color: TEXT_COLOR_60,
        fontSize: 13,
        fontFamily: "Inter",
        fontWeight: "500",
        left: 6,
        width: "auto",
        paddingHorizontal: 4
    },
    value: {
        fontSize: 14,
        margin: 8,
    },
    closeTagIcon: {

    },
    tagContainer: {
        display: "flex",
        flexDirection: "row",
        height: 32,
        alignItems: "center",
        backgroundColor: TEXT_COLOR_5,
        borderRadius: 4,
        marginHorizontal: 2,
        marginVertical: 4,
        paddingVertical: 4,
        paddingHorizontal: 8,
        width: "auto",
    },
    tagText: {
        marginRight: 8
    },
    tagListContainer: {
        alignItems: 'baseline',
        display: "flex",
        flexDirection: "row",
        flexWrap: "wrap",
    },
    labelStyle: {
        position: "absolute",
        top: -8,
        left: 14,
        backgroundColor: GHOST_COLOR,
        zIndex: 3,
        paddingHorizontal: 4
    },
    closeIcon: {
        position: "absolute",
        right: 20
    },
    textInput: {
        fontSize: 14,
        height: 32,
        lineHeight: 22,
        width: "auto",
        backgroundColor: 'transparent'
    },


});

export default styles;