( theme: 'light' | 'dark', css: (typeof goober)['css'], )
| 2613 | } |
| 2614 | |
| 2615 | const stylesFactory = ( |
| 2616 | theme: 'light' | 'dark', |
| 2617 | css: (typeof goober)['css'], |
| 2618 | ) => { |
| 2619 | const { colors, font, size, alpha, shadow, border } = tokens |
| 2620 | |
| 2621 | const t = (light: string, dark: string) => (theme === 'light' ? light : dark) |
| 2622 | |
| 2623 | return { |
| 2624 | devtoolsBtn: css` |
| 2625 | z-index: 100000; |
| 2626 | position: fixed; |
| 2627 | padding: 4px; |
| 2628 | text-align: left; |
| 2629 | |
| 2630 | display: flex; |
| 2631 | align-items: center; |
| 2632 | justify-content: center; |
| 2633 | border-radius: 9999px; |
| 2634 | box-shadow: ${shadow.md()}; |
| 2635 | overflow: hidden; |
| 2636 | |
| 2637 | & div { |
| 2638 | position: absolute; |
| 2639 | top: -8px; |
| 2640 | left: -8px; |
| 2641 | right: -8px; |
| 2642 | bottom: -8px; |
| 2643 | border-radius: 9999px; |
| 2644 | |
| 2645 | & svg { |
| 2646 | position: absolute; |
| 2647 | width: 100%; |
| 2648 | height: 100%; |
| 2649 | } |
| 2650 | filter: blur(6px) saturate(1.2) contrast(1.1); |
| 2651 | } |
| 2652 | |
| 2653 | &:focus-within { |
| 2654 | outline-offset: 2px; |
| 2655 | outline: 3px solid ${colors.green[600]}; |
| 2656 | } |
| 2657 | |
| 2658 | & button { |
| 2659 | position: relative; |
| 2660 | z-index: 1; |
| 2661 | padding: 0; |
| 2662 | border-radius: 9999px; |
| 2663 | background-color: transparent; |
| 2664 | border: none; |
| 2665 | height: 40px; |
| 2666 | display: flex; |
| 2667 | width: 40px; |
| 2668 | overflow: hidden; |
| 2669 | cursor: pointer; |
| 2670 | outline: none; |
| 2671 | & svg { |
| 2672 | position: absolute; |
no test coverage detected
searching dependent graphs…