codebay 0.10.0 → 0.11.0

package/src/components/AvatarEditor.svelte

@@ -265,8 +265,8 @@
 		justify-content: space-between;
 		gap: 12px;
 		padding: 14px 18px;
-		border-bottom: 1px solid var(--ink);
-		background: var(--ink);
+		border-bottom: 1px solid var(--fill);
+		background: var(--fill);
 	}
 	.head h2 {
 		margin: 0;
@@ -275,7 +275,7 @@
 		font-size: 17px;
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
-		color: var(--bg);
+		color: var(--fill-ink);
 	}
 	.head-cancel {
 		display: inline-flex;
@@ -283,9 +283,9 @@
 		gap: 6px;
 		flex: none;
 		padding: 5px 10px;
-		border: 1px solid var(--bg);
+		border: 1px solid var(--fill-ink);
 		background: transparent;
-		color: var(--bg);
+		color: var(--fill-ink);
 		font-family: var(--font-mono);
 		font-size: 11px;
 		text-transform: uppercase;
@@ -293,8 +293,8 @@
 		cursor: pointer;
 	}
 	.head-cancel:hover {
-		background: var(--bg);
-		color: var(--ink);
+		background: var(--fill-ink);
+		color: var(--fill);
 	}
 	.head-cancel:focus-visible {
 		outline: none;
@@ -321,7 +321,7 @@
 		padding: 0 1px 1px 0;
 		background-clip: content-box;
 		background-color: var(--rule-soft);
-		opacity: 0.4; /* more muted than the paintable off cells — not part of the art */
+		opacity: var(--dim); /* more muted than the paintable off cells — not part of the art */
 	}
 	/* A stroke paints by pointer position, so cells need no individual handlers. */
 	.grid {
@@ -415,8 +415,8 @@
 		border-right: none;
 	}
 	.mode.active {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 	}
 	.mode:focus-visible {
 		outline: none;

package/src/components/Button.svelte

@@ -69,21 +69,21 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		background: var(--bg-card);
 		color: var(--ink);
 		cursor: pointer;
 		text-decoration: none;
 	}
 	.btn:disabled {
-		opacity: 0.4;
+		opacity: var(--dim);
 		cursor: not-allowed;
 	}
 	/* `disabled` has no native effect on an <a> — the href branch above drops the
      href entirely when disabled, but it still needs the same visual treatment
      and to be excluded from the tab order / assistive-tech actions. */
 	.btn[aria-disabled='true'] {
-		opacity: 0.4;
+		opacity: var(--dim);
 		cursor: not-allowed;
 		pointer-events: none;
 	}
@@ -119,17 +119,20 @@
 	}
 
 	.btn.default:hover:not(:disabled) {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		border-color: var(--fill);
+		color: var(--fill-ink);
 	}
 
 	.btn.primary {
 		font-weight: 700;
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		border-color: var(--fill);
+		color: var(--fill-ink);
 	}
 	.btn.primary:hover:not(:disabled) {
 		background: var(--bg-card);
+		border-color: var(--edge);
 		color: var(--ink);
 	}
 
@@ -138,8 +141,9 @@
 		border-style: dashed;
 	}
 	.btn.ghost:hover:not(:disabled) {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		border-color: var(--fill);
+		color: var(--fill-ink);
 		border-style: solid;
 	}
 

package/src/components/CoinButton.svelte

@@ -69,14 +69,14 @@
 	}
 	.coin {
 		display: block;
-		box-shadow: 2px 2px 0 var(--ink);
+		box-shadow: 2px 2px 0 var(--shadow);
 		animation: coin-spin 2.6s ease-in-out infinite;
 	}
 	/* The spin has to stop, or it would override the press transform. */
 	.coin-btn:hover .coin {
 		animation: none;
 		transform: translate(1px, 1px);
-		box-shadow: 1px 1px 0 var(--ink);
+		box-shadow: 1px 1px 0 var(--shadow);
 	}
 	.coin-btn:focus-visible {
 		outline: 2px solid var(--ink);

package/src/components/CredMenu.svelte

@@ -88,13 +88,14 @@
 		height: 32px;
 		font-size: 14px;
 		line-height: 1;
-		border: 1px solid var(--ink);
-		background: var(--ink);
-		color: var(--bg);
+		border: 1px solid var(--fill);
+		background: var(--fill);
+		color: var(--fill-ink);
 		cursor: pointer;
 	}
 	.cred:hover {
 		background: var(--bg);
+		border-color: var(--edge);
 		color: var(--ink);
 	}
 	/* Auth states: ok = muted green, warn = tasteful yellow, error = outline-only. */
@@ -120,6 +121,7 @@
 	}
 	.cred.error {
 		background: var(--bg);
+		border-color: var(--edge);
 		color: var(--ink);
 	}
 	.cred-dropdown {
@@ -146,11 +148,11 @@
 		cursor: pointer;
 	}
 	.cred-row:hover {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 	}
 	.cred-row:hover .cred-state {
-		color: var(--bg);
+		color: var(--fill-ink);
 	}
 	.dot {
 		flex: none;

package/src/components/DashboardView.svelte

@@ -233,8 +233,8 @@
 	.banner.error {
 		background: var(--bg-card);
 		color: var(--ink);
-		border: 2px solid var(--ink);
-		box-shadow: 4px 4px 0 var(--ink);
+		border: 2px solid var(--edge);
+		box-shadow: 4px 4px 0 var(--shadow);
 	}
 	.empty {
 		text-align: center;

package/src/components/FolderBrowser.svelte

@@ -295,7 +295,7 @@
 	.overlay {
 		position: fixed;
 		inset: 0;
-		background: color-mix(in srgb, var(--ink) 50%, transparent);
+		background: var(--scrim);
 		display: grid;
 		place-items: center;
 		padding: 24px;
@@ -308,15 +308,15 @@
 		flex-direction: column;
 		background: var(--bg-card);
 		overflow: hidden;
-		box-shadow: 8px 8px 0 var(--ink);
+		box-shadow: 8px 8px 0 var(--shadow);
 	}
 	.head {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 14px 18px;
-		border-bottom: 1px solid var(--ink);
-		background: var(--ink);
+		border-bottom: 1px solid var(--fill);
+		background: var(--fill);
 	}
 	.head h2 {
 		margin: 0;
@@ -325,7 +325,7 @@
 		font-size: 17px;
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
-		color: var(--bg);
+		color: var(--fill-ink);
 	}
 	.x {
 		display: inline-flex;
@@ -333,7 +333,7 @@
 		border: none;
 		background: none;
 		cursor: pointer;
-		color: var(--bg);
+		color: var(--fill-ink);
 	}
 	.x:hover {
 		opacity: 0.7;
@@ -353,7 +353,7 @@
 	}
 	.mode-toggle {
 		display: flex;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 	}
 	.mode-btn {
 		display: inline-flex;
@@ -371,11 +371,11 @@
 		cursor: pointer;
 	}
 	.mode-btn + .mode-btn {
-		border-left: 1px solid var(--ink);
+		border-left: 1px solid var(--edge);
 	}
 	.mode-btn.active {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 	}
 	.clone {
 		padding: 12px 18px;
@@ -425,18 +425,19 @@
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		padding: 8px 14px;
-		border: 1px solid var(--ink);
-		background: var(--ink);
-		color: var(--bg);
+		border: 1px solid var(--fill);
+		background: var(--fill);
+		color: var(--fill-ink);
 		cursor: pointer;
 		white-space: nowrap;
 	}
 	.clone-btn:hover:not(:disabled) {
 		background: var(--bg-card);
+		border-color: var(--edge);
 		color: var(--ink);
 	}
 	.clone-btn:disabled {
-		opacity: 0.4;
+		opacity: var(--dim);
 		cursor: not-allowed;
 	}
 	.crumbs {
@@ -490,11 +491,12 @@
 		color: var(--ink);
 	}
 	.recent-pick:hover {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 	}
-	.recent-pick:hover .recent-path {
-		color: var(--bg);
+	.recent-pick:hover .recent-path,
+	.recent-pick:hover .icon {
+		color: var(--fill-ink);
 	}
 	.recent-text {
 		display: flex;
@@ -534,8 +536,8 @@
 		opacity: 1;
 	}
 	.recent-x:hover {
-		color: var(--bg);
-		background: var(--ink);
+		color: var(--fill-ink);
+		background: var(--fill);
 	}
 	.recent-toggle {
 		margin: 4px 6px 2px;
@@ -603,11 +605,11 @@
 		color: var(--ink);
 	}
 	.row .nav:hover {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 	}
 	.row .nav:hover .icon {
-		color: var(--bg);
+		color: var(--fill-ink);
 	}
 	.ename {
 		overflow: hidden;
@@ -622,12 +624,12 @@
 		letter-spacing: 0.08em;
 		color: var(--ink);
 		background: transparent;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		padding: 2px 5px;
 	}
 	.row .nav:hover .badge {
-		color: var(--bg);
-		border-color: var(--bg);
+		color: var(--fill-ink);
+		border-color: var(--fill-ink);
 	}
 	.pick-inline {
 		font-family: var(--font-mono);
@@ -636,14 +638,15 @@
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		padding: 6px 10px;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		background: var(--bg-card);
 		cursor: pointer;
 		color: var(--ink);
 	}
 	.pick-inline:hover {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		border-color: var(--fill);
+		color: var(--fill-ink);
 	}
 	.muted {
 		padding: 18px;
@@ -672,8 +675,7 @@
 	.warn code {
 		font-family: var(--font-mono);
 		font-size: 0.9em;
-		/* Intentional white glint to lift the code chip off the amber warn bg — not a palette token. */
-		background: rgba(255, 255, 255, 0.35);
+		background: var(--warn-chip);
 		border: 1px solid var(--warn-line);
 		padding: 0 5px;
 	}
@@ -683,7 +685,7 @@
 		justify-content: space-between;
 		gap: 12px;
 		padding: 14px 18px;
-		border-top: 1px solid var(--ink);
+		border-top: 1px solid var(--edge);
 	}
 	.hint {
 		font-family: var(--font-mono);
@@ -697,18 +699,19 @@
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
 		padding: 9px 16px;
-		border: 1px solid var(--ink);
-		background: var(--ink);
-		color: var(--bg);
+		border: 1px solid var(--fill);
+		background: var(--fill);
+		color: var(--fill-ink);
 		cursor: pointer;
 		white-space: nowrap;
 	}
 	.primary:hover:not(:disabled) {
 		background: var(--bg-card);
+		border-color: var(--edge);
 		color: var(--ink);
 	}
 	.primary:disabled {
-		opacity: 0.4;
+		opacity: var(--dim);
 		cursor: not-allowed;
 	}
 	.icon {

package/src/components/HealthBox.svelte

@@ -103,7 +103,7 @@
 	}
 	/* Container isn't running yet: gray the panel out instead of loading it. */
 	.healthwrap.dim {
-		opacity: 0.5;
+		opacity: var(--dim-panel);
 	}
 	.health {
 		background: var(--bg-card);
@@ -127,15 +127,16 @@
 	.box {
 		width: 16px;
 		height: 16px;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		color: var(--ink);
 	}
 	.box.ok {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		border-color: var(--fill);
+		color: var(--fill-ink);
 	}
 	.box.bad {
 		background: transparent;