| 4 | import { tokens } from './tokens' |
| 5 | |
| 6 | const stylesFactory = (theme: 'light' | 'dark') => { |
| 7 | const { colors, font, size, alpha, border } = tokens |
| 8 | const { fontFamily, size: fontSize } = font |
| 9 | const css = goober.css |
| 10 | const t = (light: string, dark: string) => (theme === 'light' ? light : dark) |
| 11 | |
| 12 | return { |
| 13 | shellRoot: css` |
| 14 | box-sizing: border-box; |
| 15 | display: flex; |
| 16 | flex-direction: column; |
| 17 | height: calc(var(--tsd-main-panel-height, 100%) - 1px); |
| 18 | max-height: calc(var(--tsd-main-panel-height, 100%) - 1px); |
| 19 | min-height: 0; |
| 20 | overflow: hidden; |
| 21 | `, |
| 22 | mainContainer: css` |
| 23 | display: flex; |
| 24 | flex: 1; |
| 25 | height: auto; |
| 26 | min-height: 0; |
| 27 | overflow: hidden; |
| 28 | padding: ${size[2]}; |
| 29 | `, |
| 30 | dragHandle: css` |
| 31 | width: 8px; |
| 32 | background: ${t(colors.gray[300], colors.darkGray[600])}; |
| 33 | cursor: col-resize; |
| 34 | position: relative; |
| 35 | transition: all 0.2s ease; |
| 36 | user-select: none; |
| 37 | pointer-events: all; |
| 38 | margin: 0 ${size[1]}; |
| 39 | border-radius: 2px; |
| 40 | |
| 41 | &:hover { |
| 42 | background: ${t(colors.blue[600], colors.blue[500])}; |
| 43 | margin: 0 ${size[1]}; |
| 44 | } |
| 45 | |
| 46 | &.dragging { |
| 47 | background: ${t(colors.blue[700], colors.blue[600])}; |
| 48 | margin: 0 ${size[1]}; |
| 49 | } |
| 50 | |
| 51 | &::after { |
| 52 | content: ''; |
| 53 | position: absolute; |
| 54 | top: 50%; |
| 55 | left: 50%; |
| 56 | transform: translate(-50%, -50%); |
| 57 | width: 2px; |
| 58 | height: 20px; |
| 59 | background: ${t(colors.gray[400], colors.darkGray[400])}; |
| 60 | border-radius: 1px; |
| 61 | pointer-events: none; |
| 62 | } |
| 63 | |