refactor: compress theme color contracts

BitFun-Installer/src/theme/installerThemesData.ts

@@ -47,6 +47,9 @@ const DEFAULT_RAMP_ALPHAS: RampAlphas = ['0.04', '0.08', '0.15', '0.25', '0.4'];
 const DEFAULT_BLUE_RGB = '96, 165, 250';
 const DEFAULT_BLUE_500 = '#60a5fa';
 const DEFAULT_BLUE_600 = '#3b82f6';
+const DARK_CARD_BACKGROUND = '#121214';
+const DARK_CARD_SURFACE = '#1a1c1e';
+const MIDNIGHT_CARD_BACKGROUND = '#2b2d30';
 
 function alpha(rgb: string, opacity: string): string {
   return `rgba(${rgb}, ${opacity})`;
@@ -167,8 +170,8 @@ export const THEMES: InstallerTheme[] = [
     name: 'Dark',
     type: 'dark',
     background: {
-      primary: '#121214',
-      secondary: '#1a1c1e',
+      primary: DARK_CARD_BACKGROUND,
+      secondary: DARK_CARD_SURFACE,
     },
     accentRgb: DEFAULT_BLUE_RGB,
     accent500: DEFAULT_BLUE_500,
@@ -187,7 +190,7 @@ export const THEMES: InstallerTheme[] = [
     id: 'bitfun-midnight',
     name: 'Midnight',
     type: 'dark',
-    background: { primary: '#2b2d30', secondary: '#1e1f22' },
+    background: { primary: MIDNIGHT_CARD_BACKGROUND, secondary: DARK_CARD_SURFACE },
     accentRgb: DEFAULT_BLUE_RGB,
     accent500: DEFAULT_BLUE_500,
     accent600: DEFAULT_BLUE_600,
@@ -215,7 +218,7 @@ export const THEMES: InstallerTheme[] = [
     id: 'bitfun-china-night',
     name: 'Ink Night',
     type: 'dark',
-    background: { primary: '#1a1814', secondary: '#212019' },
+    background: { primary: '#1a1814', secondary: DARK_CARD_SURFACE },
     accentRgb: '115, 165, 204',
     accent500: '#73a5cc',
     accent600: '#5a8bb3',
@@ -229,7 +232,7 @@ export const THEMES: InstallerTheme[] = [
     id: 'bitfun-cyber',
     name: 'Cyber',
     type: 'dark',
-    background: { primary: '#0e0e10', secondary: '#151515' },
+    background: { primary: '#0e0e10', secondary: DARK_CARD_SURFACE },
     accentRgb: '0, 230, 255',
     accent500: '#00e6ff',
     accent600: '#00ccff',
@@ -243,7 +246,7 @@ export const THEMES: InstallerTheme[] = [
     id: 'bitfun-tokyo-night',
     name: 'Tokyo Night',
     type: 'dark',
-    background: { primary: '#1a1b26', secondary: '#16161e' },
+    background: { primary: '#1a1b26', secondary: DARK_CARD_SURFACE },
     accentRgb: '122, 162, 247',
     accent500: '#7aa2f7',
     accent600: '#6183bb',
@@ -257,7 +260,7 @@ export const THEMES: InstallerTheme[] = [
     id: 'bitfun-slate',
     name: 'Slate',
     type: 'dark',
-    background: { primary: '#1a1c1e' },
+    background: { primary: DARK_CARD_SURFACE },
     accentRgb: '122, 176, 238',
     accent500: '#7ab0ee',
     accent600: '#689ad8',

scripts/theme-color-governance-baseline.cli.json

@@ -6,19 +6,19 @@
       "max": 306
     },
     "presetUniqueColors": {
-      "max": 122
+      "max": 118
     },
     "runtimePresetColorOccurrences": {
       "max": 114
     },
     "runtimePresetUniqueColors": {
-      "max": 79
+      "max": 77
     },
     "compatibilityPresetColorOccurrences": {
       "max": 192
     },
     "compatibilityPresetUniqueColors": {
-      "max": 89
+      "max": 87
     },
     "rustFallbackColorOccurrences": {
       "max": 44
@@ -27,16 +27,16 @@
       "max": 32
     },
     "totalUniqueColors": {
-      "max": 152
+      "max": 148
     },
     "runtimeTotalUniqueColors": {
-      "max": 109
+      "max": 107
     },
     "presetNearPairs.nearTotal": {
-      "max": 4
+      "max": 0
     },
     "runtimePresetNearPairs.nearTotal": {
-      "max": 2
+      "max": 0
     },
     "compatibilityPresetNearPairs.nearTotal": {
       "max": 0

scripts/theme-color-governance-baseline.installer.json

@@ -81,7 +81,7 @@
       "max": 0
     },
     "colorDomainNearPairs.themePreset.nearTotal": {
-      "max": 11
+      "max": 3
     },
     "colorDomainNearPairs.tokenContract.indistinguishableTotal": {
       "max": 0
@@ -96,10 +96,10 @@
       "max": 0
     },
     "colorDomainScopes.themePreset.occurrences": {
-      "max": 59
+      "max": 54
     },
     "colorDomainScopes.themePreset.uniqueColors": {
-      "max": 57
+      "max": 53
     },
     "colorDomainScopes.tokenContract.occurrences": {
       "max": 22

scripts/theme-color-governance-baseline.json

@@ -54,10 +54,10 @@
       "max": 0
     },
     "generatedWidgetPayload.varUnique": {
-      "max": 94
+      "max": 80
     },
     "generatedWidgetPayload.occurrences": {
-      "max": 94
+      "max": 80
     },
     "generatedWidgetPayload.undefinedUnique": {
       "max": 0
@@ -105,10 +105,10 @@
       "max": 0
     },
     "colorScopes.token.uniqueColors": {
-      "max": 205
+      "max": 201
     },
     "colorScopes.exception.uniqueColors": {
-      "max": 190
+      "max": 182
     },
     "cssVarDefinitions.unresolvedRequiredUnique": {
       "max": 0
@@ -153,25 +153,25 @@
       "max": 0
     },
     "colorDomainNearPairs.nearTotal": {
-      "max": 26
+      "max": 13
     },
     "colorDomainNearPairs.themePreset.indistinguishableTotal": {
       "max": 0
     },
     "colorDomainNearPairs.themePreset.nearTotal": {
-      "max": 10
+      "max": 9
     },
     "colorDomainNearPairs.themeRuntime.indistinguishableTotal": {
       "max": 0
     },
     "colorDomainNearPairs.themeRuntime.nearTotal": {
-      "max": 8
+      "max": 2
     },
     "colorDomainNearPairs.tokenContract.indistinguishableTotal": {
       "max": 0
     },
     "colorDomainNearPairs.tokenContract.nearTotal": {
-      "max": 8
+      "max": 2
     },
     "colorDomainNearPairs.generatedWidget.indistinguishableTotal": {
       "max": 0
@@ -243,13 +243,13 @@
       "max": 171
     },
     "colorDomainScopes.themePreset.uniqueColors": {
-      "max": 120
+      "max": 119
     },
     "colorDomainScopes.themeRuntime.occurrences": {
-      "max": 30
+      "max": 27
     },
     "colorDomainScopes.tokenContract.occurrences": {
-      "max": 113
+      "max": 110
     },
     "colorDomainScopes.generatedWidget.occurrences": {
       "max": 0
@@ -297,10 +297,10 @@
       "max": 0
     },
     "colorDomainScopes.mermaid.occurrences": {
-      "max": 91
+      "max": 82
     },
     "colorDomainScopes.mermaid.uniqueColors": {
-      "max": 73
+      "max": 65
     }
   }
 }

src/apps/cli/themes/presets/bitfun-cyber.json

@@ -16,7 +16,7 @@
     "inputBackground": "#003f46",
     "border": "#16404a",
     "borderActive": "#00e6ff",
-    "borderSubtle": "#102b32",
+    "borderSubtle": "#16404a",
     "diffAdded": "#00ff9f",
     "diffRemoved": "#ff0055",
     "diffContext": "#7fadcc",

src/apps/cli/themes/presets/bitfun-dark.json

@@ -8,7 +8,7 @@
     "warning": "#f59e0b",
     "success": "#34d399",
     "info": "#a1a1aa",
-    "text": "#e8e8e8",
+    "text": "#e7ecf3",
     "textMuted": "#858585",
     "background": "#0e0e10",
     "backgroundPanel": "#1c1c1f",
@@ -27,22 +27,22 @@
     "diffRemovedBg": "#3e221c",
     "diffContextBg": "#1c1c1f",
     "diffLineNumber": "#66666d",
-    "diffAddedLineNumberBg": "#163c32",
+    "diffAddedLineNumberBg": "#1b3328",
     "diffRemovedLineNumberBg": "#432329",
-    "markdownText": "#e8e8e8",
+    "markdownText": "#e7ecf3",
     "markdownHeading": "#60a5fa",
     "markdownLink": "#60a5fa",
     "markdownLinkText": "#8b5cf6",
     "markdownCode": "#34d399",
     "markdownBlockQuote": "#858585",
     "markdownEmph": "#f59e0b",
-    "markdownStrong": "#e8e8e8",
+    "markdownStrong": "#e7ecf3",
     "markdownHorizontalRule": "#3b3b40",
     "markdownListItem": "#60a5fa",
     "markdownListEnumeration": "#8b5cf6",
     "markdownImage": "#60a5fa",
     "markdownImageText": "#8b5cf6",
-    "markdownCodeBlock": "#e8e8e8",
+    "markdownCodeBlock": "#e7ecf3",
     "syntaxComment": "#6a737d",
     "syntaxKeyword": "#c792ea",
     "syntaxFunction": "#7dcfff",
@@ -51,6 +51,6 @@
     "syntaxNumber": "#f78c6c",
     "syntaxType": "#ffc777",
     "syntaxOperator": "#c792ea",
-    "syntaxPunctuation": "#e8e8e8"
+    "syntaxPunctuation": "#e7ecf3"
   }
 }

src/apps/cli/themes/presets/bitfun-ink-night.json

@@ -12,7 +12,7 @@
     "textMuted": "#a79b83",
     "background": "#17110c",
     "backgroundPanel": "#241b12",
-    "backgroundElement": "#3a2817",
+    "backgroundElement": "#4a2d15",
     "inputBackground": "#4a2d15",
     "border": "#5a472b",
     "borderActive": "#d7b56d",

src/apps/cli/themes/presets/bitfun-midnight.json

@@ -13,7 +13,7 @@
     "background": "#0e0e10",
     "backgroundPanel": "#151515",
     "backgroundElement": "#1b3328",
-    "inputBackground": "#163c32",
+    "inputBackground": "#1b3328",
     "border": "#32403b",
     "borderActive": "#8fbc9f",
     "borderSubtle": "#2b2b30",

src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss

@@ -159,7 +159,7 @@ $content-max: 1480px;
 
   &--skeleton {
     --skeleton-shimmer-0: rgba(var(--color-static-white-rgb), 0);
-    --skeleton-shimmer-peak: var(--color-overlay-white-10);
+    --skeleton-shimmer-peak: var(--color-overlay-white-12);
     pointer-events: none;
   }
 }

src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss

@@ -172,7 +172,7 @@
   transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease;
 
   &:hover {
-    box-shadow: 0 2px 8px var(--color-overlay-black-10);
+    box-shadow: 0 2px 8px var(--color-overlay-black-12);
   }
 
   &:active {

src/web-ui/src/app/components/panels/DiffFullscreenViewer.css

@@ -56,7 +56,7 @@
   justify-content: space-between;
   padding: 12px 20px;
   background: var(--diff-fullscreen-overlay-bg);
-  border-bottom: 1px solid var(--color-overlay-white-10);
+  border-bottom: 1px solid var(--color-overlay-white-12);
   backdrop-filter: blur(8px);
   flex-shrink: 0;
   z-index: 2;
@@ -116,9 +116,9 @@
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
-  background: var(--color-overlay-white-06);
+  background: var(--color-overlay-white-08);
   color: var(--color-overlay-white-80);
-  border: 1px solid var(--color-overlay-white-10);
+  border: 1px solid var(--color-overlay-white-12);
 }
 
 .header-btn:hover:not(:disabled) {
@@ -165,7 +165,7 @@
 .header-divider {
   width: 1px;
   height: 20px;
-  background: var(--color-overlay-white-10);
+  background: var(--color-overlay-white-12);
   margin: 0 4px;
 }
 

src/web-ui/src/app/layout/FloatingMiniChat.scss

@@ -103,7 +103,7 @@ $panel-height: 620px;
   border-radius: 8px;
   box-shadow:
     0 4px 12px var(--color-overlay-black-30),
-    0 0 1px var(--color-overlay-white-06);
+    0 0 1px var(--color-overlay-white-08);
   overflow: hidden;
   display: flex;
   flex-direction: column;

src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss

@@ -189,7 +189,7 @@
     border-radius: $size-radius-full;
     font-size: 10px;
     color: var(--color-text-secondary);
-    background: var(--color-overlay-white-06);
+    background: var(--color-overlay-white-08);
     border: 1px solid var(--color-overlay-white-08);
     white-space: nowrap;
   }

src/web-ui/src/app/scenes/skills/SkillsScene.scss

@@ -960,7 +960,7 @@
   }
 
   &.search--focused:not(.search--disabled) .search__wrapper {
-    box-shadow: 0 4px 20px var(--color-overlay-black-10), 0 0 0 3px color-mix(in srgb, var(--color-accent-500) 15%, transparent);
+    box-shadow: 0 4px 20px var(--color-overlay-black-12), 0 0 0 3px color-mix(in srgb, var(--color-accent-500) 15%, transparent);
     border-color: var(--color-accent-500);
   }
 }

src/web-ui/src/app/scenes/skills/components/SkillCard.scss

@@ -210,7 +210,7 @@
       color 0.25s ease;
 
     &:not(:last-child) {
-      border-right: 1px solid var(--color-overlay-white-06);
+      border-right: 1px solid var(--color-overlay-white-08);
     }
 
     &:disabled {

src/web-ui/src/app/styles/components/forms.css

@@ -111,7 +111,7 @@
     0 4px 16px var(--color-accent-200),
     0 2px 8px var(--color-overlay-black-08),
     0 0 0 2px var(--color-accent-300),
-    inset 0 1px 0 var(--color-overlay-white-10);
+    inset 0 1px 0 var(--color-overlay-white-12);
   transform: translateY(-1px);
 }
 

src/web-ui/src/app/styles/utilities/floating-input.css

@@ -16,7 +16,7 @@
   box-shadow: 
     var(--shadow-xl),
     0 4px 15px color-mix(in srgb, var(--color-accent-600) 10%, transparent),
-    inset 0 1px 0 var(--color-overlay-white-06);
+    inset 0 1px 0 var(--color-overlay-white-08);
   padding: var(--size-gap-3) var(--size-gap-4);
   z-index: var(--z-overlay);
   transition: all var(--motion-base) var(--easing-standard);
@@ -33,7 +33,7 @@
   box-shadow: 
     0 12px 40px var(--color-overlay-black-40),
     0 6px 20px var(--border-accent-subtle),
-    inset 0 1px 0 var(--color-overlay-white-10);
+    inset 0 1px 0 var(--color-overlay-white-12);
   transform: translateX(-50%) translateY(-1px);
 }