jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.3 Phase 4h: counterlines test on LumotiaNotice

Browse Source 
Test commit for Jake's round-6 spec. Subtle 1-px inset shadow in a
softened complementary hue, applied to LumotiaNotice only. Other
test surfaces (Button.destructive, status pills, record ring, active
nav) reserved for after evaluation.

Tokens (quietware scope only, v0.2 surface unchanged):

  --counterline-width: 1px

  Raw complementary hues per Jake's table:
    --role-info-counterline    var(--color-accent)  /* copper for blue */
    --role-danger-counterline  #6EA8FF              /* soft blue for red */
    --role-success-counterline #B891FF              /* soft violet for green */
    --role-caution-counterline #3A6BFF              /* soft blue for yellow */

  Tinted per-mode via color-mix:
    Dark mode:   32% opacity (slightly stronger against dark surface)
    Light mode:  22% opacity (whisper-quiet against cream)
    HC mode:     all transparent, --counterline-width: 0

  Per-usage notice tokens emitted:
    --notice-{role}-counterline

LumotiaNotice applies via Tailwind arbitrary value:

  shadow-[inset_0_0_0_var(--counterline-width,0)_var(--notice-{tone}-counterline,transparent)]

HC contract zeroes both the width and the colour token so the 2-px
HC border carries the tactile detail instead.

Honest evaluation of the visible result.

  At 1px and 22%/32% opacity the counterline is implemented
  correctly but reads as whisper-quiet to the point of being almost
  invisible at standard viewing zoom. Doesn't look noisy (the risk
  Jake flagged), but also doesn't add perceptible tactility.

  Pending Jake's call:
    (a) raise opacity to ~45% dark / ~35% light for visibility,
    (b) keep at current opacity for the quietness,
    (c) revert and proceed Phase 5c.

  Phase 5c proceeds either way; this commit does NOT block the
  layout migration.

Verified.

  - npm run check: 0 errors, 0 warnings across 5707 files.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jake
2026-05-15 14:50:55 +01:00
parent 2f11f493c5
commit 74bcc293bb
3 changed files with 82 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/lib/ui/LumotiaNotice.svelte
View File

@@ -56,15 +56,23 @@
// --notice-{tone}-border outer border colour
// --notice-{tone}-bg hand-tuned pale tint surface
//
// v0.3 Phase 4h — counterlines. A subtle 1-px inset shadow in a
// softened complementary hue. Tactile-only detail; not a second
// semantic signal. HC contract zeroes --counterline-width.
//
// --notice-{tone}-counterline softened-complement tint
// --counterline-width 1px in quietware, 0 in HC
//
// v0.2 fallback values are defined at :root in the same tokens file
// via color-mix from the v0.2 --color-{role} tokens, so the Notice
// renders sensibly with or without quietware active.
const palette: Record<Tone, { bar: string; bg: string; border: string; iconColor: string; icon: typeof Info }> = {
const palette: Record<Tone, { bar: string; bg: string; border: string; iconColor: string; shadow: string; icon: typeof Info }> = {
info: {
bar: "border-l-[var(--notice-info-bar)]",
bg: "bg-[var(--notice-info-bg)]",
border: "border-[var(--notice-info-border)]",
iconColor: "text-[var(--notice-info-icon)]",
shadow: "shadow-[inset_0_0_0_var(--counterline-width,0)_var(--notice-info-counterline,transparent)]",
icon: Info,
},
caution: {
@@ -72,6 +80,7 @@
bg: "bg-[var(--notice-caution-bg)]",
border: "border-[var(--notice-caution-border)]",
iconColor: "text-[var(--notice-caution-icon)]",
shadow: "shadow-[inset_0_0_0_var(--counterline-width,0)_var(--notice-caution-counterline,transparent)]",
icon: AlertTriangle,
},
danger: {
@@ -79,6 +88,7 @@
bg: "bg-[var(--notice-danger-bg)]",
border: "border-[var(--notice-danger-border)]",
iconColor: "text-[var(--notice-danger-icon)]",
shadow: "shadow-[inset_0_0_0_var(--counterline-width,0)_var(--notice-danger-counterline,transparent)]",
icon: AlertOctagon,
},
success: {
@@ -86,6 +96,7 @@
bg: "bg-[var(--notice-success-bg)]",
border: "border-[var(--notice-success-border)]",
iconColor: "text-[var(--notice-success-icon)]",
shadow: "shadow-[inset_0_0_0_var(--counterline-width,0)_var(--notice-success-counterline,transparent)]",
icon: CheckCircle,
},
};
@@ -101,7 +112,7 @@
role={ariaRole}
class="rounded-r-lg rounded-l-sm border border-l-4 text-[13px] flex gap-2.5
{slim ? 'px-3 py-2 items-center' : 'px-4 py-3 items-start'}
{tonePal.bar} {tonePal.border} {tonePal.bg} {classes}"
{tonePal.bar} {tonePal.border} {tonePal.bg} {tonePal.shadow} {classes}"
>
<ToneIcon size={slim ? 14 : 16} class="shrink-0 {slim ? '' : 'mt-0.5'} {tonePal.iconColor}" aria-hidden="true" />
<div class="flex-1 min-w-0 leading-relaxed text-text">