Skip to main content
Version: 1.x.x

UI Colors

The map below should help make it easy to build card components in your app. In the Record, you should store the KEY value for colors and then look up the values in this map at render time - that way, if the colors change, your UI will remain consistent with the rest of Quip. A typical card UI component is meant to have VALUE_STROKE for the border, VALUE_LIGHT for the background and VALUE for text and interior UI controls (chevrons, etc.). When selected, the background becomes the VALUE and the text/UI controls become WHITE.VALUE.

quip.apps.ui.ColorMap​

/**
 * @enum {{
 *   KEY: string,
 *   VALUE: string,
 *   VALUE_LIGHT: string,
 *   VALUE_STROKE: string
 * }}
 */
quip.apps.ui.ColorMap = {
    RED: {
        KEY: "RED",
        LABEL: "Red",
        VALUE: string,
        VALUE_LIGHT: string,
        VALUE_STROKE: string,
    },
    ORANGE: {
        KEY: "ORANGE",
        LABEL: "Orange",
        VALUE: string,
        VALUE_LIGHT: string,
        VALUE_STROKE: string,
    },
    YELLOW: {
        KEY: "YELLOW",
        LABEL: "Yellow",
        VALUE: string,
        VALUE_LIGHT: string,
        VALUE_STROKE: string,
    },
    GREEN: {
        KEY: "GREEN",
        LABEL: "Green",
        VALUE: string,
        VALUE_LIGHT: string,
        VALUE_STROKE: string,
    },
    BLUE: {
        KEY: "BLUE",
        LABEL: "Blue",
        VALUE: string,
        VALUE_LIGHT: string,
        VALUE_STROKE: string,
    },
    VIOLET: {
        KEY: "VIOLET",
        LABEL: "Violet",
        VALUE: string,
        VALUE_LIGHT: string,
        VALUE_STROKE: string,
    },
    WHITE: {
        KEY: "WHITE",
        LABEL: "White",
        VALUE: string,
        VALUE_LIGHT: string,
        VALUE_STROKE: string,
    }
};