| 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 | mainContainer: css` |
| 14 | display: flex; |
| 15 | flex: 1; |
| 16 | min-height: 80%; |
| 17 | overflow: hidden; |
| 18 | padding: ${size[2]}; |
| 19 | `, |
| 20 | dragHandle: css` |
| 21 | width: 8px; |
| 22 | background: ${t(colors.gray[300], colors.darkGray[600])}; |
| 23 | cursor: col-resize; |
| 24 | position: relative; |
| 25 | transition: all 0.2s ease; |
| 26 | user-select: none; |
| 27 | pointer-events: all; |
| 28 | margin: 0 ${size[1]}; |
| 29 | border-radius: 2px; |
| 30 | |
| 31 | &:hover { |
| 32 | background: ${t(colors.blue[600], colors.blue[500])}; |
| 33 | margin: 0 ${size[1]}; |
| 34 | } |
| 35 | |
| 36 | &.dragging { |
| 37 | background: ${t(colors.blue[700], colors.blue[600])}; |
| 38 | margin: 0 ${size[1]}; |
| 39 | } |
| 40 | |
| 41 | &::after { |
| 42 | content: ''; |
| 43 | position: absolute; |
| 44 | top: 50%; |
| 45 | left: 50%; |
| 46 | transform: translate(-50%, -50%); |
| 47 | width: 2px; |
| 48 | height: 20px; |
| 49 | background: ${t(colors.gray[400], colors.darkGray[400])}; |
| 50 | border-radius: 1px; |
| 51 | pointer-events: none; |
| 52 | } |
| 53 | |
| 54 | &:hover::after, |
| 55 | &.dragging::after { |
| 56 | background: ${t(colors.blue[500], colors.blue[300])}; |
| 57 | } |
| 58 | `, |
| 59 | leftPanel: css` |
| 60 | background: ${t(colors.gray[100], colors.darkGray[800])}; |
| 61 | border-radius: ${border.radius.lg}; |
| 62 | border: 1px solid ${t(colors.gray[200], colors.darkGray[700])}; |
| 63 | display: flex; |