( theme: 'light' | 'dark', css: (typeof goober)['css'], )
| 2717 | } |
| 2718 | |
| 2719 | const stylesFactory = ( |
| 2720 | theme: 'light' | 'dark', |
| 2721 | css: (typeof goober)['css'], |
| 2722 | ) => { |
| 2723 | const { colors, font, size, alpha, shadow, border } = tokens |
| 2724 | |
| 2725 | const t = (light: string, dark: string) => (theme === 'light' ? light : dark) |
| 2726 | |
| 2727 | return { |
| 2728 | devtoolsBtn: css` |
| 2729 | z-index: 100000; |
| 2730 | position: fixed; |
| 2731 | padding: 4px; |
| 2732 | text-align: left; |
| 2733 | |
| 2734 | display: flex; |
| 2735 | align-items: center; |
| 2736 | justify-content: center; |
| 2737 | border-radius: 9999px; |
| 2738 | box-shadow: ${shadow.md()}; |
| 2739 | overflow: hidden; |
| 2740 | |
| 2741 | & div { |
| 2742 | position: absolute; |
| 2743 | top: -8px; |
| 2744 | left: -8px; |
| 2745 | right: -8px; |
| 2746 | bottom: -8px; |
| 2747 | border-radius: 9999px; |
| 2748 | -webkit-transform: translateZ(0); |
| 2749 | transform: translateZ(0); |
| 2750 | |
| 2751 | & svg { |
| 2752 | position: absolute; |
| 2753 | width: 100%; |
| 2754 | height: 100%; |
| 2755 | } |
| 2756 | filter: blur(6px) saturate(1.2) contrast(1.1); |
| 2757 | } |
| 2758 | |
| 2759 | &:focus-within { |
| 2760 | outline-offset: 2px; |
| 2761 | outline: 3px solid ${colors.green[600]}; |
| 2762 | } |
| 2763 | |
| 2764 | & button { |
| 2765 | position: relative; |
| 2766 | z-index: 1; |
| 2767 | padding: 0; |
| 2768 | border-radius: 9999px; |
| 2769 | background-color: transparent; |
| 2770 | border: none; |
| 2771 | height: 40px; |
| 2772 | display: flex; |
| 2773 | width: 40px; |
| 2774 | overflow: hidden; |
| 2775 | cursor: pointer; |
| 2776 | outline: none; |
no test coverage detected