import {loadCSSFromString, colorUtils, colors} from '@airtable/blocks/ui'; import {FONT_FAMILY, FONT_SIZE} from './constants'; const 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; } } `; loadCSSFromString(css);