@justai/cuts 0.66.0 → 0.67.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/ActionRow.astro +12 -2
- package/src/LangPicker.astro +2 -1
- package/src/Posts.astro +2 -2
- package/src/Toolbar.astro +3 -1
package/package.json
CHANGED
package/src/ActionRow.astro
CHANGED
|
@@ -114,8 +114,18 @@ const { id, label, tone = "plain", detail, hidden, i18n, ...rest } = Astro.props
|
|
|
114
114
|
.jal-label { flex: 1; min-width: 0; }
|
|
115
115
|
.jal-detail { color: var(--text-dim); font-size: var(--fs-xs); flex: none; }
|
|
116
116
|
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
/* queries: the accent row is unreadable in light mode · is-accent contrast · accent as text ·
|
|
118
|
+
my persona's accent is too bright to read in a sheet
|
|
119
|
+
THE ACCENT AS INK IS NOT THE ACCENT AS PAINT. A fill only has to be SEEN; a word has to be READ,
|
|
120
|
+
and a persona whose accent is light fails contrast here while looking perfect as a button — tts's
|
|
121
|
+
amber measures 1.67:1 on the light surface against the 4.5 a word needs.
|
|
122
|
+
This is the same problem ConfirmSheet already solved with `--confirm-accent`, one component over,
|
|
123
|
+
for the same stated reason ("the action reads as TEXT"). The hook is additive: a consumer that
|
|
124
|
+
sets nothing gets exactly what it got before, and one that sets `--accent-text` gets a readable
|
|
125
|
+
row. Prefer fixing it here over a persona globalising this class — that is what tts had to do
|
|
126
|
+
while this shipped, and a persona reaching into a cut's internals is a fix that rots. */
|
|
127
|
+
.jal-row.is-accent { color: var(--accent-text, var(--accent)); font-weight: 600; }
|
|
128
|
+
.jal-row.is-accent .jal-ico { color: var(--accent-text, var(--accent)); }
|
|
119
129
|
.jal-row.is-danger { color: var(--danger); }
|
|
120
130
|
.jal-row.is-danger .jal-ico { color: var(--danger); }
|
|
121
131
|
.jal-row.is-danger:active { background: color-mix(in srgb, var(--danger) 12%, transparent); }
|
package/src/LangPicker.astro
CHANGED
|
@@ -119,7 +119,8 @@ const ordered = orderLocales(locales);
|
|
|
119
119
|
.item:active { background: color-mix(in srgb, var(--text) 12%, transparent); }
|
|
120
120
|
@media (hover: hover) { .item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } }
|
|
121
121
|
.item:focus-visible { outline: none; background: color-mix(in srgb, var(--accent) 16%, transparent); }
|
|
122
|
-
|
|
122
|
+
/* The chosen locale reads as TEXT — see ActionRow for why this takes the ink hook. */
|
|
123
|
+
.item.active { color: var(--accent-text, var(--accent)); font-weight: 600; }
|
|
123
124
|
.item svg { width: 17px; height: 17px; flex: none; }
|
|
124
125
|
</style>
|
|
125
126
|
|
package/src/Posts.astro
CHANGED
|
@@ -248,14 +248,14 @@ const vars = [
|
|
|
248
248
|
.phandle, .dot, .pt { color: var(--text-dim); font-weight: 400; }
|
|
249
249
|
/* a persona's name in the feed links to its profile (X-style); humans have no link */
|
|
250
250
|
.pn { color: inherit; text-decoration: none; }
|
|
251
|
-
.pn:hover b { color: var(--accent); }
|
|
251
|
+
.pn:hover b { color: var(--accent-text, var(--accent)); }
|
|
252
252
|
a.pt { text-decoration: none; }
|
|
253
253
|
a.pt:hover { text-decoration: underline; }
|
|
254
254
|
.pbd { font-size: var(--fs-sm); line-height: 1.5; margin-block-start: 4px; }
|
|
255
255
|
.pact { display: flex; gap: 22px; margin-block-start: 12px; color: var(--text-dim); }
|
|
256
256
|
.pact svg { width: 17px; height: 17px; }
|
|
257
257
|
.pact span { cursor: pointer; transition: color 0.2s; }
|
|
258
|
-
.pact span:hover { color: var(--accent); }
|
|
258
|
+
.pact span:hover { color: var(--accent-text, var(--accent)); }
|
|
259
259
|
.ch { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); }
|
|
260
260
|
.ch b { font-weight: 600; }
|
|
261
261
|
.ch .muted { color: var(--text-dim); font-weight: 400; }
|
package/src/Toolbar.astro
CHANGED
|
@@ -170,7 +170,9 @@ import AuthMount from "./AuthMount.astro";
|
|
|
170
170
|
}
|
|
171
171
|
.tb-nav:hover { color: var(--text); }
|
|
172
172
|
.tb-nav:active { transform: scale(0.9); }
|
|
173
|
-
|
|
173
|
+
/* The active glyph is a graphic, so it wants 3:1 rather than 4.5 — which a light accent still
|
|
174
|
+
misses. Same ink hook as everywhere the accent stops being paint. */
|
|
175
|
+
.tb-nav.active { color: var(--accent-text, var(--accent)); }
|
|
174
176
|
|
|
175
177
|
/* A MARK IS NOT DIMMED, AND THE PROFILE CUT DOES NOT NEED IT TO BE.
|
|
176
178
|
It shipped dimmed at rest for one version, on the reasoning that a mark cannot take `currentColor`
|