also looking at this
fix(ui): align component theme and login step visibility
#39
4 files
+163
-77
| @@ -33,6 +33,11 @@ import type { CrosswindConfig, Theme } from '@cwcss/crosswind' | ||
| 33 | 33 | export default { |
| 34 | 34 | theme: { |
| 35 | 35 | extend: { |
| 36 | borderRadius: { | |
| 37 | control: '8px', | |
| 38 | panel: '0.75rem', | |
| 39 | pill: '999px', | |
| 40 | }, | |
| 36 | 41 | colors: { |
| 37 | 42 | canvas: 'var(--bg)', |
| 38 | 43 | panel: 'var(--panel)', |
| @@ -68,28 +73,67 @@ export default { | ||
| 68 | 73 | grid: 'var(--grid)', |
| 69 | 74 | axis: 'var(--axis)', |
| 70 | 75 | |
| 71 | // --- @stacksjs/components' token vocabulary ------------------------ | |
| 72 | // The shipped components are written against their own semantic names | |
| 73 | // (text-fg, bg-surface, border-line-strong, ...) used 300+ times across | |
| 74 | // the 102 components. This palette already satisfied `line` and | |
| 75 | // `accent`; the rest resolved to nothing, so a component that imposes | |
| 76 | // no colour of its own still rendered half-styled - text fell back to | |
| 77 | // inherit and panels had no background. | |
| 78 | // | |
| 79 | // Purely additive: none of these names appear in this app's markup, so | |
| 80 | // no existing element changes. Does NOT fix <Button variant="primary">, | |
| 81 | // which hard-codes bg-blue-500 - that is stacksjs/stx#1993. | |
| 82 | // See statushqorg/status#20. | |
| 83 | surface: 'var(--panel)', | |
| 76 | // Complete component roles follow the same palette as the reports. | |
| 77 | // Keep content as a surface and ink paired with its solid/soft fill. | |
| 78 | // Theme entries override library defaults without cascade-layer tricks. | |
| 79 | 'surface': 'var(--panel)', | |
| 84 | 80 | 'surface-sunken': 'var(--bg)', |
| 85 | 81 | 'surface-raised': 'color-mix(in srgb, var(--accent) 8%, var(--panel))', |
| 86 | fg: 'var(--text)', | |
| 82 | 'surface-hover': 'color-mix(in srgb, var(--text) 6%, var(--panel))', | |
| 83 | 'surface-raised-hover': 'color-mix(in srgb, var(--accent) 14%, var(--panel))', | |
| 84 | 'surface-sunken-hover': 'color-mix(in srgb, var(--text) 6%, var(--bg))', | |
| 85 | 'page': 'var(--bg)', | |
| 86 | 'content': 'var(--panel)', | |
| 87 | 'field': 'var(--panel)', | |
| 88 | 'field-hover': 'color-mix(in srgb, var(--text) 6%, var(--panel))', | |
| 89 | 'fg': 'var(--text)', | |
| 87 | 90 | 'fg-strong': 'var(--text)', |
| 88 | 91 | 'fg-muted': 'var(--text-2)', |
| 89 | 92 | 'fg-soft': 'var(--text-2)', |
| 90 | 93 | 'fg-subtle': 'var(--text-3)', |
| 91 | 94 | 'line-strong': 'color-mix(in srgb, var(--text-3) 55%, var(--border))', |
| 95 | 'line-hover': 'color-mix(in srgb, var(--text-2) 70%, var(--border))', | |
| 96 | 'link': 'var(--accent)', | |
| 97 | 'link-hover': 'color-mix(in srgb, var(--accent) 85%, var(--text))', | |
| 92 | 98 | 'accent-solid': 'var(--accent)', |
| 99 | 'accent-solid-hover': 'color-mix(in srgb, var(--accent) 92%, var(--text))', | |
| 100 | 'accent-soft-ink': 'color-mix(in srgb, var(--accent) 85%, var(--text))', | |
| 101 | 'success': 'var(--pos)', | |
| 102 | 'success-solid': 'var(--pos)', | |
| 103 | 'success-solid-hover': 'color-mix(in srgb, var(--pos) 92%, var(--text))', | |
| 104 | 'success-ink': 'var(--accent-ink)', | |
| 105 | 'success-soft': 'color-mix(in srgb, var(--pos) 8%, var(--panel))', | |
| 106 | 'success-soft-ink': 'color-mix(in srgb, var(--pos) 85%, var(--text))', | |
| 107 | 'danger': 'var(--neg)', | |
| 108 | 'danger-solid': 'var(--neg)', | |
| 109 | 'danger-solid-hover': 'color-mix(in srgb, var(--neg) 92%, var(--text))', | |
| 110 | 'danger-ink': 'var(--accent-ink)', | |
| 111 | 'danger-soft': 'color-mix(in srgb, var(--neg) 8%, var(--panel))', | |
| 112 | 'danger-soft-ink': 'color-mix(in srgb, var(--neg) 85%, var(--text))', | |
| 113 | 'warning': 'var(--warn)', | |
| 114 | 'warning-solid': 'var(--warn)', | |
| 115 | 'warning-solid-hover': 'color-mix(in srgb, var(--warn) 92%, var(--text))', | |
| 116 | 'warning-ink': 'var(--accent-ink)', | |
| 117 | 'warning-soft': 'color-mix(in srgb, var(--warn) 8%, var(--panel))', | |
| 118 | 'warning-soft-ink': 'color-mix(in srgb, var(--warn) 85%, var(--text))', | |
| 119 | 'info': 'var(--text-2)', | |
| 120 | 'info-solid': 'var(--text-2)', | |
| 121 | 'info-solid-hover': 'color-mix(in srgb, var(--text-2) 92%, var(--text))', | |
| 122 | 'info-ink': 'var(--accent-ink)', | |
| 123 | 'info-soft': 'color-mix(in srgb, var(--text-2) 8%, var(--panel))', | |
| 124 | 'info-soft-ink': 'color-mix(in srgb, var(--text-2) 85%, var(--text))', | |
| 125 | 'secondary': 'var(--text-2)', | |
| 126 | 'secondary-solid': 'var(--text-2)', | |
| 127 | 'secondary-solid-hover': 'color-mix(in srgb, var(--text-2) 92%, var(--text))', | |
| 128 | 'secondary-ink': 'var(--accent-ink)', | |
| 129 | 'secondary-soft': 'color-mix(in srgb, var(--text-2) 8%, var(--panel))', | |
| 130 | 'secondary-soft-ink': 'color-mix(in srgb, var(--text-2) 85%, var(--text))', | |
| 131 | 'danger-fg': 'var(--neg)', | |
| 132 | 'danger-fg-subtle': 'var(--neg)', | |
| 133 | 'danger-line': 'var(--neg)', | |
| 134 | 'danger-focus': 'var(--neg)', | |
| 135 | 'inverse': 'var(--text)', | |
| 136 | 'inverse-ink': 'var(--bg)', | |
| 93 | 137 | }, |
| 94 | 138 | // Arrays, not strings: Crosswind joins the entries into the font stack. |
| 95 | 139 | // The whole stack already lives in the custom property, so each is a |