v3/packages/design-system/atoms/dot-overlay/DotOverlay.tsx

import * as React from 'react';
import styled from 'styled-components';

const dotOverlayBase = styled.div`
    opacity: 0.6;
    pointer-events: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -10;
    background-size: 27px 27px;
`;

const DotOverlayDark = styled(dotOverlayBase)`
    background-image: radial-gradient(
        circle,
        #332d2d,
        #332d2d 1px,
        transparent 1px,
        transparent
    );
`;

const DotOverlayLight = styled(dotOverlayBase)`
    background-image: radial-gradient(
        circle,
        #dbd9d9,
        #dbd9d9 1px,
        transparent 1px,
        transparent
    );
`;

export const DotOverlay = ({ light }: { light?: boolean }) => {
    return light ? <DotOverlayLight /> : <DotOverlayDark />;
};