( theme: 'light' | 'dark', css: (typeof goober)['css'], )
| 537 | } |
| 538 | |
| 539 | const stylesFactory = ( |
| 540 | theme: 'light' | 'dark', |
| 541 | css: (typeof goober)['css'], |
| 542 | ) => { |
| 543 | const { colors, font, size, border } = tokens |
| 544 | const t = (light: string, dark: string) => (theme === 'light' ? light : dark) |
| 545 | return { |
| 546 | entry: css` |
| 547 | & * { |
| 548 | font-size: ${font.size.xs}; |
| 549 | font-family: |
| 550 | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, |
| 551 | 'Liberation Mono', 'Courier New', monospace; |
| 552 | } |
| 553 | position: relative; |
| 554 | outline: none; |
| 555 | word-break: break-word; |
| 556 | `, |
| 557 | subEntry: css` |
| 558 | margin: 0 0 0 0.5em; |
| 559 | padding-left: 0.75em; |
| 560 | border-left: 2px solid ${t(colors.gray[300], colors.darkGray[400])}; |
| 561 | /* outline: 1px solid ${colors.teal[400]}; */ |
| 562 | `, |
| 563 | expander: css` |
| 564 | & path { |
| 565 | stroke: ${colors.gray[400]}; |
| 566 | } |
| 567 | & svg { |
| 568 | width: ${size[3]}; |
| 569 | height: ${size[3]}; |
| 570 | } |
| 571 | display: inline-flex; |
| 572 | align-items: center; |
| 573 | transition: all 0.1s ease; |
| 574 | /* outline: 1px solid ${colors.blue[400]}; */ |
| 575 | `, |
| 576 | expanderButtonContainer: css` |
| 577 | display: flex; |
| 578 | align-items: center; |
| 579 | line-height: ${size[4]}; |
| 580 | min-height: ${size[4]}; |
| 581 | gap: ${size[2]}; |
| 582 | `, |
| 583 | expanderButton: css` |
| 584 | cursor: pointer; |
| 585 | color: inherit; |
| 586 | font: inherit; |
| 587 | outline: inherit; |
| 588 | height: ${size[5]}; |
| 589 | background: transparent; |
| 590 | border: none; |
| 591 | padding: 0; |
| 592 | display: inline-flex; |
| 593 | align-items: center; |
| 594 | gap: ${size[1]}; |
| 595 | position: relative; |
| 596 | /* outline: 1px solid ${colors.green[400]}; */ |
no test coverage detected