(theme: TanStackDevtoolsTheme)
| 120 | } |
| 121 | export const css = goober.css |
| 122 | const stylesFactory = (theme: TanStackDevtoolsTheme) => { |
| 123 | const { colors, font, size, border } = tokens |
| 124 | const { fontFamily } = font |
| 125 | |
| 126 | const t = (light: string, dark: string) => (theme === 'light' ? light : dark) |
| 127 | const buildButtonVariant = (variant: ButtonVariant) => { |
| 128 | const v = buttonVariantColors[variant] |
| 129 | const outlineColor = t(v.outline.light, v.outline.dark) |
| 130 | const outlineHoverColor = t(v.outlineHover.light, v.outlineHover.dark) |
| 131 | const solidBg = t(v.bg.light, v.bg.dark) |
| 132 | const solidHover = t(v.hover.light, v.hover.dark) |
| 133 | const solidActive = t(v.active.light, v.active.dark) |
| 134 | const solidText = t(v.text.light, v.text.dark) |
| 135 | const solidBorder = t(v.border.light, v.border.dark) |
| 136 | |
| 137 | return { |
| 138 | ghost: css` |
| 139 | background: transparent; |
| 140 | color: ${outlineColor}; |
| 141 | border-color: transparent; |
| 142 | &:hover { |
| 143 | background: ${t(colors.gray[100], colors.darkGray[800])}; |
| 144 | color: ${outlineHoverColor}; |
| 145 | } |
| 146 | &:active { |
| 147 | background: ${t(colors.gray[200], colors.darkGray[700])}; |
| 148 | color: ${outlineHoverColor}; |
| 149 | } |
| 150 | `, |
| 151 | outline: css` |
| 152 | background: transparent; |
| 153 | color: ${outlineColor}; |
| 154 | border-color: ${outlineColor}; |
| 155 | &:hover { |
| 156 | background: ${t(colors.gray[50], colors.darkGray[800])}; |
| 157 | color: ${outlineHoverColor}; |
| 158 | border-color: ${outlineHoverColor}; |
| 159 | } |
| 160 | &:active { |
| 161 | background: ${t(colors.gray[100], colors.darkGray[700])}; |
| 162 | color: ${outlineHoverColor}; |
| 163 | border-color: ${outlineHoverColor}; |
| 164 | } |
| 165 | `, |
| 166 | solid: css` |
| 167 | background: ${solidBg}; |
| 168 | color: ${solidText}; |
| 169 | border-color: ${solidBorder}; |
| 170 | &:hover { |
| 171 | background: ${solidHover}; |
| 172 | border-color: ${solidHover}; |
| 173 | box-shadow: ${t( |
| 174 | tokens.shadow.xs('rgb(0 0 0 / 0.12)'), |
| 175 | tokens.shadow.xs('rgb(0 0 0 / 0.5)'), |
| 176 | )}; |
| 177 | } |
| 178 | &:active { |
| 179 | background: ${solidActive}; |
no test coverage detected