@airtable/blocks/ui#colors JavaScript Examples

The following examples show how to use @airtable/blocks/ui#colors. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: HighlightWrapper.js    From apps-base-schema with MIT License 6 votes vote down vote up 
/**
 * Displays a small tooltip in the bottom-left corner that shows the type of the currently
 * hovered link or field.
 *
 * Uses `ReactDOM#createPortal` to lift the HTMLElements out of SVG world.
 *
 * @param {string} props.text
 */
function Tooltip({text}) {
    const tooltipRoot = document.getElementById('index');
    return ReactDOM.createPortal(
        <Box
            position="absolute"
            bottom={0}
            left={0}
            margin={2}
            backgroundColor={colors.GRAY_DARK_1}
            borderRadius="default"
        >
            <Text padding={2} textColor="white">
                {text}
            </Text>
        </Box>,
        tooltipRoot,
    );
}
Example #2
Source File: SvgTable.js    From apps-base-schema with MIT License 6 votes vote down vote up 
ALLOWED_COLORS = [
    colors.BLUE_BRIGHT,
    colors.CYAN_BRIGHT,
    colors.GREEN_BRIGHT,
    colors.YELLOW_BRIGHT,
    colors.ORANGE_BRIGHT,
    colors.RED_BRIGHT,
    colors.PINK_BRIGHT,
    colors.PURPLE_BRIGHT,
    colors.GRAY_BRIGHT,
    colors.GRAY_DARK_1,
]
Example #3
Source File: loadCss.js    From apps-base-schema with MIT License 4 votes vote down vote up 
css = `
    .SchemaVisualizer {
        background-color: #F3F2F1;
    }

    .TableRow {
        font-family: ${FONT_FAMILY};
        font-size: ${FONT_SIZE};
        cursor: default;
    }

    .TableBorder {
        stroke-width: 0;
        fill: rgba(0, 0, 0, 0.1);
    }

    .TableRow:not(.TableHeader) {
        fill: #fff;
        stroke-width: 0;
    }

    .TableRow:not(.TableHeader):hover {
        fill: hsl(0, 0%, 91%);
    }

    .TableRow text {
        fill: #000000;
        stroke-width: 0;
        dominant-baseline: central;
    }

    .TableRow.highlighted rect {
        fill: hsl(0, 0%, 91%);
    }

    .TableRow.TableHeader {
        stroke-width: 0;
        font-weight: 600;
    }

    .TableRow.TableHeader text {
        fill: #ffffff;
    }
    
    .TableRow.draggable {
        cursor: grab;
    }

    .Link {
        fill: none;
        stroke: ${colorUtils.getHexForColor(colors.GRAY)};
        stroke-width: 2px;
        stroke-opacity: 0.6;
    }

    .Link.highlighted {
        stroke-width: 4px;
        stroke-opacity: 1;
        stroke-dasharray: 6px;
        stroke-dashoffset: 12px;
        animation: stroke 0.5s linear infinite;
        shape-rendering: geometricPrecision;
    }

    .Link.highlighted.multipleRecordLinks {
        stroke: ${colorUtils.getHexForColor(colors.GRAY_BRIGHT)};
        stroke-dasharray: initial;
    }
    
    .Link.highlighted.formula {
        stroke: ${colorUtils.getHexForColor(colors.BLUE_BRIGHT)};
    }
    
    .Link.highlighted.count {
        stroke: ${colorUtils.getHexForColor(colors.RED_BRIGHT)};        
    }

    .Link.highlighted.multipleLookupValues {
        stroke: ${colorUtils.getHexForColor(colors.ORANGE_BRIGHT)};
    }
    
    .Link.highlighted.rollup {
        stroke: ${colorUtils.getHexForColor(colors.PURPLE_BRIGHT)};
    }

    @keyframes stroke {
        to {
            stroke-dashoffset: 0;
        }
    }
`