@nocturnium/svelte-ide 1.0.3 → 1.0.5

package/dist/components/editor/GhostBracketLayer.svelte

@@ -107,23 +107,23 @@
 	/**
 	 * Get color for confidence level
 	 */
-	function getConfidenceColor(confidence: number): string {
-		if (confidence >= 0.85) return '#22c55e'; // green
-		if (confidence >= 0.7) return '#eab308'; // yellow
-		return '#f59e0b'; // amber
+	function getConfidenceToken(confidence: number): string {
+		if (confidence >= 0.85) return '--ide-status-created';
+		if (confidence >= 0.7) return '--ide-status-modified';
+		return '--ide-accent-strong';
 	}
 
 	/**
 	 * Get severity color
 	 */
-	function getSeverityColor(severity: BracketMismatch['severity']): string {
+	function getSeverityToken(severity: BracketMismatch['severity']): string {
 		switch (severity) {
 			case 'error':
-				return '#ef4444';
+				return '--ide-status-deleted';
 			case 'warning':
-				return '#f59e0b';
+				return '--ide-status-modified';
 			default:
-				return '#6b7280';
+				return '--ide-text-muted';
 		}
 	}
 </script>
@@ -132,12 +132,12 @@
 	<div class="ghost-bracket-layer" aria-hidden="true">
 		<!-- Ghost bracket suggestions -->
 		{#each ghosts as ghost (ghost.id)}
-			{@const color = getConfidenceColor(ghost.confidence)}
+			{@const color = getConfidenceToken(ghost.confidence)}
 			{@const connectorStyle = getConnectorStyle(ghost)}
 
 			<!-- Connector line to matching bracket -->
 			{#if connectorStyle && hoveredGhost?.id === ghost.id}
-				<div class="ghost-connector" style="{connectorStyle} --ghost-color: {color};">
+				<div class="ghost-connector" style="{connectorStyle} --ghost-color: var({color});">
 					<div class="ghost-connector__line"></div>
 				</div>
 			{/if}
@@ -146,7 +146,7 @@
 			<div
 				class="ghost-bracket"
 				role="tooltip"
-				style="{getGhostStyle(ghost)} --ghost-color: {color};"
+				style="{getGhostStyle(ghost)} --ghost-color: var({color});"
 				onmouseenter={() => (hoveredGhost = ghost)}
 				onmouseleave={() => (hoveredGhost = null)}
 			>
@@ -187,10 +187,10 @@
 
 		<!-- Bracket mismatch markers -->
 		{#each mismatches as mismatch (`${mismatch.position.line}:${mismatch.position.column}:${mismatch.issue}`)}
-			{@const color = getSeverityColor(mismatch.severity)}
+			{@const color = getSeverityToken(mismatch.severity)}
 			<div
 				class="bracket-mismatch bracket-mismatch--{mismatch.issue}"
-				style="{getMismatchStyle(mismatch)} --mismatch-color: {color};"
+				style="{getMismatchStyle(mismatch)} --mismatch-color: var({color});"
 				title={mismatch.issue === 'unclosed'
 					? `Unclosed '${mismatch.character}'`
 					: mismatch.issue === 'unexpected'
@@ -253,7 +253,7 @@
 		top: -16px;
 		left: 0;
 		padding: 1px 4px;
-		background: rgba(0, 0, 0, 0.7);
+		background: var(--ide-bg-overlay);
 		color: var(--ghost-color);
 		font-size: 9px;
 		font-family: monospace;
@@ -272,17 +272,17 @@
 		left: 0;
 		margin-top: 4px;
 		padding: 8px;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-elevated);
+		border: 1px solid var(--ide-border);
 		border-radius: 6px;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+		box-shadow: var(--ide-shadow-lg);
 		min-width: 140px;
 		z-index: 100;
 	}
 
 	.ghost-bracket__reason {
 		font-size: 11px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary);
 		margin-bottom: 8px;
 		line-height: 1.3;
 	}
@@ -304,21 +304,21 @@
 	}
 
 	.ghost-bracket__btn--accept {
-		background: rgba(34, 197, 94, 0.2);
-		color: #22c55e;
+		background: color-mix(in srgb, var(--ide-status-created) 20%, transparent);
+		color: var(--ide-status-created);
 	}
 
 	.ghost-bracket__btn--accept:hover {
-		background: rgba(34, 197, 94, 0.3);
+		background: color-mix(in srgb, var(--ide-status-created) 30%, transparent);
 	}
 
 	.ghost-bracket__btn--dismiss {
-		background: rgba(239, 68, 68, 0.2);
-		color: #ef4444;
+		background: color-mix(in srgb, var(--ide-status-deleted) 20%, transparent);
+		color: var(--ide-status-deleted);
 	}
 
 	.ghost-bracket__btn--dismiss:hover {
-		background: rgba(239, 68, 68, 0.3);
+		background: color-mix(in srgb, var(--ide-status-deleted) 30%, transparent);
 	}
 
 	/* Connector line */
@@ -376,7 +376,7 @@
 		left: 0;
 		padding: 1px 3px;
 		background: var(--mismatch-color);
-		color: #fff;
+		color: var(--ide-text-inverse);
 		font-size: 9px;
 		font-family: monospace;
 		border-radius: 2px;
@@ -387,4 +387,17 @@
 	.bracket-mismatch:hover .bracket-mismatch__expected {
 		opacity: 1;
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ghost-bracket__char,
+		.bracket-mismatch--unclosed .bracket-mismatch__underline {
+			animation: none;
+		}
+
+		.ghost-bracket__confidence,
+		.ghost-bracket__btn,
+		.bracket-mismatch__expected {
+			transition: none;
+		}
+	}
 </style>

package/dist/components/editor/GitBlameLayer.svelte

@@ -347,8 +347,8 @@
 		min-width: 280px;
 		max-width: 400px;
 		padding: 12px;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 8px;
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
 		font-size: 12px;
@@ -382,12 +382,12 @@
 
 	.tooltip-author {
 		font-weight: 600;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.tooltip-email {
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.tooltip-commit {
@@ -407,12 +407,12 @@
 	}
 
 	.tooltip-date {
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		font-size: 11px;
 	}
 
 	.tooltip-message {
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 		line-height: 1.4;
 		margin-bottom: 8px;
 	}
@@ -429,8 +429,8 @@
 
 	.tooltip-hint {
 		font-size: 10px;
-		color: var(--color-text-muted, #888);
-		border-top: 1px solid var(--color-border, #333);
+		color: var(--ide-text-muted, #a8c5d9);
+		border-top: 1px solid var(--ide-border, #a8c5d9);
 		padding-top: 8px;
 		margin-top: 4px;
 	}

package/dist/components/editor/InlineDiffLayer.svelte

@@ -48,13 +48,13 @@
 	function getColor(type: DiffLine['type']): string {
 		switch (type) {
 			case 'added':
-				return '#22c55e'; // green
+				return 'var(--ide-status-created)';
 			case 'modified':
-				return '#3b82f6'; // blue
+				return 'var(--ide-status-modified)';
 			case 'removed':
-				return '#ef4444'; // red
+				return 'var(--ide-status-deleted)';
 			default:
-				return '#6b7280';
+				return 'var(--ide-text-muted)';
 		}
 	}
 
@@ -283,7 +283,7 @@
 		left: 0;
 		width: 0;
 		height: 0;
-		border-left: 8px solid #ef4444;
+		border-left: 8px solid var(--ide-status-deleted, #ef4444);
 		border-top: 4px solid transparent;
 		border-bottom: 4px solid transparent;
 		pointer-events: auto;
@@ -291,7 +291,7 @@
 	}
 
 	.diff-removed-marker:hover {
-		border-left-color: #f87171;
+		border-left-color: var(--ide-error, #ef4444);
 	}
 
 	/* Tooltip */
@@ -301,8 +301,8 @@
 		min-width: 200px;
 		max-width: 400px;
 		padding: 10px;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 6px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 		font-size: 12px;
@@ -324,7 +324,7 @@
 	.tooltip-label {
 		display: block;
 		font-size: 10px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		margin-bottom: 4px;
 	}
 
@@ -332,15 +332,15 @@
 		margin: 0;
 		font-family: 'JetBrains Mono', monospace;
 		font-size: 11px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		white-space: pre-wrap;
 		word-break: break-all;
 	}
 
 	.tooltip-hint {
 		font-size: 10px;
-		color: var(--color-text-muted, #888);
-		border-top: 1px solid var(--color-border, #333);
+		color: var(--ide-text-muted, #a8c5d9);
+		border-top: 1px solid var(--ide-border, #a8c5d9);
 		padding-top: 8px;
 	}
 </style>

package/dist/components/editor/PluginPreviewSandbox.svelte

@@ -405,8 +405,8 @@
 		width: 90vw;
 		max-width: 1200px;
 		height: 80vh;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 12px;
 		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
 		display: flex;
@@ -419,14 +419,14 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 12px 16px;
-		border-bottom: 1px solid var(--color-border, #333);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
 	}
 
 	.plugin-sandbox__title {
 		margin: 0;
 		font-size: 16px;
 		font-weight: 600;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.plugin-sandbox__actions {
@@ -447,14 +447,14 @@
 		background: transparent;
 		border: none;
 		border-radius: 4px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		font-size: 12px;
 		cursor: pointer;
 		transition: all 0.15s ease;
 	}
 
 	.mode-btn:hover {
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.mode-btn.active {
@@ -486,7 +486,7 @@
 	/* Plugin sidebar */
 	.plugin-sidebar {
 		width: 240px;
-		border-right: 1px solid var(--color-border, #333);
+		border-right: 1px solid var(--ide-border, #a8c5d9);
 		padding: 12px;
 		overflow-y: auto;
 	}
@@ -495,7 +495,7 @@
 		margin: 0 0 12px;
 		font-size: 12px;
 		font-weight: 600;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		text-transform: uppercase;
 	}
 
@@ -520,7 +520,7 @@
 
 	.plugin-item:hover {
 		background: rgba(255, 255, 255, 0.05);
-		border-color: var(--color-border, #333);
+		border-color: var(--ide-border, #a8c5d9);
 	}
 
 	.plugin-item--selected {
@@ -555,12 +555,12 @@
 	.plugin-item__name {
 		font-size: 13px;
 		font-weight: 500;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.plugin-item__desc {
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	/* Preview area */
@@ -577,7 +577,7 @@
 		justify-content: center;
 		gap: 8px;
 		height: 100%;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 	}
 
 	.loading-spinner {
@@ -601,7 +601,7 @@
 		gap: 12px;
 		padding: 8px 12px;
 		background: rgba(255, 255, 255, 0.03);
-		border-bottom: 1px solid var(--color-border, #333);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
 		font-size: 12px;
 	}
 
@@ -633,7 +633,7 @@
 	}
 
 	.transform-time {
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.transform-error {
@@ -663,7 +663,7 @@
 		background: rgba(255, 255, 255, 0.1);
 		border: none;
 		border-radius: 4px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		font-size: 12px;
 		cursor: pointer;
 		transition: all 0.15s ease;
@@ -685,13 +685,13 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		text-align: center;
 	}
 
 	.preview-hint {
 		font-size: 12px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		margin-top: 8px;
 	}
 
@@ -703,7 +703,7 @@
 		font-family: 'JetBrains Mono', 'Fira Code', monospace;
 		font-size: 13px;
 		line-height: 1.5;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 		overflow: auto;
 		white-space: pre;
 	}
@@ -728,7 +728,7 @@
 		border-radius: 6px 6px 0 0;
 		font-size: 11px;
 		font-weight: 600;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		text-transform: uppercase;
 	}
 
@@ -759,7 +759,7 @@
 
 	.diff-line__num {
 		width: 40px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		text-align: right;
 		padding-right: 8px;
 		user-select: none;
@@ -767,7 +767,7 @@
 
 	.diff-line__sign {
 		width: 16px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.diff-line--add .diff-line__sign {

package/dist/components/editor/SnippetPalette.svelte

@@ -283,8 +283,8 @@
 		max-width: 800px;
 		height: 70vh;
 		max-height: 600px;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 12px;
 		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
 		display: flex;
@@ -298,16 +298,16 @@
 		align-items: center;
 		gap: 12px;
 		padding: 12px 16px;
-		border-bottom: 1px solid var(--color-border, #333);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
 	}
 
 	.snippet-search {
 		flex: 1;
 		padding: 8px 12px;
 		background: rgba(0, 0, 0, 0.2);
-		border: 1px solid var(--color-border, #333);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 6px;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 		font-size: 14px;
 		outline: none;
 	}
@@ -318,7 +318,7 @@
 
 	.snippet-hint {
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		white-space: nowrap;
 	}
 
@@ -326,7 +326,7 @@
 		display: flex;
 		gap: 4px;
 		padding: 8px 16px;
-		border-bottom: 1px solid var(--color-border, #333);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
 		overflow-x: auto;
 	}
 
@@ -335,7 +335,7 @@
 		background: transparent;
 		border: none;
 		border-radius: 4px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		font-size: 12px;
 		cursor: pointer;
 		white-space: nowrap;
@@ -344,7 +344,7 @@
 
 	.category-tab:hover {
 		background: rgba(255, 255, 255, 0.05);
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.category-tab.active {
@@ -361,13 +361,13 @@
 
 	.snippet-list {
 		overflow-y: auto;
-		border-right: 1px solid var(--color-border, #333);
+		border-right: 1px solid var(--ide-border, #a8c5d9);
 	}
 
 	.snippet-empty {
 		padding: 24px;
 		text-align: center;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		font-size: 13px;
 	}
 
@@ -377,7 +377,7 @@
 		padding: 10px 16px;
 		background: transparent;
 		border: none;
-		border-bottom: 1px solid var(--color-border, #333);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
 		text-align: left;
 		cursor: pointer;
 		transition: background 0.1s ease;
@@ -407,7 +407,7 @@
 	.snippet-name {
 		font-size: 13px;
 		font-weight: 500;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.snippet-badge {
@@ -421,7 +421,7 @@
 
 	.snippet-item-desc {
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	/* Preview pane */
@@ -442,7 +442,7 @@
 	.preview-name {
 		font-size: 14px;
 		font-weight: 600;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.preview-category {
@@ -450,7 +450,7 @@
 		padding: 2px 8px;
 		background: rgba(255, 255, 255, 0.1);
 		border-radius: 4px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 	}
 
 	.preview-body {
@@ -466,7 +466,7 @@
 		font-family: 'JetBrains Mono', 'Fira Code', monospace;
 		font-size: 12px;
 		line-height: 1.5;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 		white-space: pre-wrap;
 		word-break: break-all;
 	}
@@ -486,7 +486,7 @@
 		justify-content: space-between;
 		margin-top: 12px;
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.preview-footer code {
@@ -515,7 +515,7 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		font-size: 13px;
 	}
 
@@ -523,8 +523,8 @@
 		display: flex;
 		justify-content: space-between;
 		padding: 8px 16px;
-		border-top: 1px solid var(--color-border, #333);
+		border-top: 1px solid var(--ide-border, #a8c5d9);
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 </style>