diff --git a/src/app.css b/src/app.css index 4ef92c9..c470f9a 100644 --- a/src/app.css +++ b/src/app.css @@ -1,57 +1,57 @@ @import "tailwindcss"; @theme { - --color-ink: #edf3ff; - --color-ink-muted: #b1bad0; - --color-ink-faint: #6f7c96; - --color-ink-dim: #8895ad; - --color-ink-quiet: #98a4bb; + --color-ink: #f0f1f2; + --color-ink-muted: #c1c3c6; + --color-ink-faint: #7f8389; + --color-ink-dim: #9da1a6; + --color-ink-quiet: #aeb1b5; - --color-surface: rgba(18, 23, 34, 0.88); - --color-surface-alt: #090d14; - --color-surface-dim: rgba(15, 20, 30, 0.94); - --color-surface-hover: rgba(36, 45, 64, 0.78); - --color-surface-raised: rgba(23, 29, 43, 0.92); - --color-surface-solid: #171d2b; + --color-surface: #2b2e34; + --color-surface-alt: #1b1c1e; + --color-surface-dim: #2e3137; + --color-surface-hover: #363a41; + --color-surface-raised: #32363d; + --color-surface-solid: #222328; - --color-border: rgba(90, 111, 154, 0.3); - --color-border-subtle: rgba(226, 232, 240, 0.08); - --color-border-input: rgba(77, 182, 214, 0.26); + --color-border: #3a3e45; + --color-border-subtle: #34383e; + --color-border-input: #465159; - --color-primary: #6f8cff; - --color-primary-dark: #5d74e8; - --color-accent: #4db6d6; + --color-primary: #25a7c7; + --color-primary-dark: #188ca9; + --color-accent: #2eb5d1; - --color-bar: rgba(7, 10, 16, 0.94); - --color-bar-text: #f1f5ff; - --color-bar-muted: #7f8ba3; + --color-bar: #292c30; + --color-bar-text: #f0f1f2; + --color-bar-muted: #8b8f94; --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace; } :root { --app-color-scheme: dark; - --app-bg: linear-gradient(135deg, #070a10 0%, #0c111a 48%, #090e16 100%); - --app-button-bg: linear-gradient(180deg, rgba(36, 45, 64, 0.92), rgba(22, 28, 42, 0.94)); - --app-input-bg: rgba(10, 14, 22, 0.82); - --app-select-option-bg: #171d2b; + --app-bg: #222328; + --app-button-bg: #32363d; + --app-input-bg: #22252a; + --app-select-option-bg: #32363d; --app-panel-highlight: linear-gradient(180deg, rgba(255,255,255,0.038), transparent 70%); --app-panel-shadow: 0 18px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045); - --app-dialog-backdrop: rgba(4, 7, 12, 0.58); - --app-dialog-bg: #101622; - --app-dialog-chrome: #141b29; + --app-dialog-backdrop: rgba(12, 13, 15, 0.7); + --app-dialog-bg: #22252a; + --app-dialog-chrome: #2b2e34; --app-dialog-shadow: 0 24px 68px rgba(0, 0, 0, 0.54), 0 2px 12px rgba(0,0,0,0.32); - --app-settings-row-bg: #141b29; - --app-scrollbar-thumb: #303a4f; - --app-scrollbar-thumb-hover: #44506a; + --app-settings-row-bg: #2b2e34; + --app-scrollbar-thumb: #4a4e55; + --app-scrollbar-thumb-hover: #60656d; - --code-surface: #111321; - --code-surface-raised: #171a2b; - --code-surface-subtle: #0d101a; - --code-surface-muted: #10131e; - --code-surface-meta: #0c0e18; - --code-input-bg: #0b0e18; - --code-hover-bg: #151a2b; + --code-surface: #222328; + --code-surface-raised: #2b2e34; + --code-surface-subtle: #1f2024; + --code-surface-muted: #26282d; + --code-surface-meta: #1d1e22; + --code-input-bg: #22252a; + --code-hover-bg: #30343a; --code-add-text: #5dd88a; --code-add-strong: #4eca76; --code-add-bg: rgba(78, 202, 118, 0.09); @@ -190,7 +190,7 @@ } input:focus, textarea:focus, select:focus { border-color: var(--color-primary); - box-shadow: 0 0 0 3px rgba(100, 108, 255, 0.22), 0 0 32px rgba(65, 209, 255, 0.08); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent), 0 0 30px color-mix(in srgb, var(--color-accent) 7%, transparent); } input { height: 34px; padding: 0 11px; } textarea { resize: vertical; min-height: 132px; padding: 10px 11px; line-height: 1.45; } @@ -334,15 +334,15 @@ } .btn-primary { - border-color: rgba(111, 140, 255, 0.72); + border-color: color-mix(in srgb, var(--color-primary) 82%, white); color: #ffffff; - background: linear-gradient(135deg, #5f7df2 0%, #238eb4 100%); - box-shadow: 0 10px 24px rgba(77, 182, 214, 0.16); + background: var(--color-primary); + box-shadow: none; font-weight: 600; } .btn-primary:hover:not(:disabled) { - border-color: rgba(77, 182, 214, 0.78); - background: linear-gradient(135deg, #6f8cff 0%, #2da0c7 100%); + border-color: color-mix(in srgb, var(--color-accent) 78%, white); + background: var(--color-accent); color: #ffffff; } @@ -6227,22 +6227,23 @@ --ui-radius-sm: 5px; --ui-control-height: 32px; --ui-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); - --app-bg: #0d1118; - --app-button-bg: #171d27; - --app-input-bg: #101620; + --app-bg: #222328; + --app-button-bg: #32363d; + --app-input-bg: #22252a; --app-panel-highlight: none; --app-panel-shadow: none; - --color-surface: #111720; - --color-surface-alt: #0d121a; - --color-surface-dim: #141b25; - --color-surface-hover: #1b2431; - --color-surface-raised: #151c27; - --color-surface-solid: #111720; - --color-border: #2a3546; - --color-border-subtle: #222c3a; - --color-primary: #4d8dff; - --color-primary-dark: #3477ed; - --color-accent: #65a2ff; + --color-surface: #2b2e34; + --color-surface-alt: #1b1c1e; + --color-surface-dim: #2e3137; + --color-surface-hover: #363a41; + --color-surface-raised: #32363d; + --color-surface-solid: #222328; + --color-border: #3a3e45; + --color-border-subtle: #34383e; + --color-border-input: #465159; + --color-primary: #25a7c7; + --color-primary-dark: #188ca9; + --color-accent: #2eb5d1; } :root[data-theme="light"] { @@ -6279,8 +6280,8 @@ button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { - outline: 2px solid color-mix(in srgb, var(--color-primary) 65%, transparent); - outline-offset: 1px; + outline: 2px solid color-mix(in srgb, var(--color-accent) 88%, transparent); + outline-offset: 2px; } input, textarea, select { border-radius: var(--ui-radius-sm); } input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); } @@ -6289,7 +6290,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s .shell-body { gap: 0; padding: 0; } .titlebar { border-bottom: 1px solid var(--color-border-subtle); - background: var(--color-surface-solid); + background: var(--color-bar); } .titlebar-brand { min-width: 140px; padding-left: 14px; border-right: 0; font-size: 14px; } .titlebar-brand-icon, @@ -6332,7 +6333,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; - background: var(--color-surface-solid); + background: var(--color-surface-raised); } .repo-toolbar-sync { grid-template-rows: 10px 36px; } .repo-toolbar-group-label { padding-left: 1px; font-size: 8.5px; letter-spacing: .13em; } @@ -6348,7 +6349,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s background: var(--color-border-subtle); row-gap: 0; } -.left-sidebar { background: var(--color-surface-solid); } +.left-sidebar { background: var(--color-surface); } .main-panel { border: 0; border-radius: 0; background: var(--color-surface-solid); } .history-aside { background: var(--color-border-subtle); row-gap: 0; } @@ -6360,6 +6361,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s backdrop-filter: none; } .left-sidebar .panel + .panel { border-top: 1px solid var(--color-border); } +.left-sidebar .panel { background: var(--color-surface); } .section-head { min-height: 50px; padding: 8px 12px; @@ -6720,6 +6722,115 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s .repo-section > header { background: var(--color-surface-dim); } .repo-row-main:hover:not(:disabled) { background: var(--color-surface-hover); } +/* Dark control contrast -------------------------------------------------- + Keep GitKraken's restrained graphite palette while making interactive + boundaries and text states unambiguous on every dark surface. */ +:root:not([data-theme="light"]) .btn-primary { + border-color: #2eb5d1; + color: #ffffff; + background: #126f84; +} +:root:not([data-theme="light"]) .btn-primary:hover:not(:disabled) { + border-color: #55c5dc; + color: #ffffff; + background: #147c94; +} +:root:not([data-theme="light"]) .btn-secondary { + border-color: #596169; + color: #d7dadc; + background: #32363d; +} +:root:not([data-theme="light"]) .btn-secondary:hover:not(:disabled) { + border-color: #707982; + color: #ffffff; + background: #41464d; +} +:root:not([data-theme="light"]) input, +:root:not([data-theme="light"]) textarea, +:root:not([data-theme="light"]) select, +:root:not([data-theme="light"]) .select-menu-trigger { + border-color: #596169; +} +:root:not([data-theme="light"]) input:hover:not(:disabled), +:root:not([data-theme="light"]) textarea:hover:not(:disabled), +:root:not([data-theme="light"]) select:hover:not(:disabled), +:root:not([data-theme="light"]) .select-menu-trigger:hover:not(:disabled) { + border-color: #707982; +} +:root:not([data-theme="light"]) input:focus, +:root:not([data-theme="light"]) textarea:focus, +:root:not([data-theme="light"]) select:focus, +:root:not([data-theme="light"]) .select-menu.open .select-menu-trigger { + border-color: var(--color-accent); +} +:root:not([data-theme="light"]) .repo-action-group, +:root:not([data-theme="light"]) .dialog-icon-button { + border-color: #535a62; +} +:root:not([data-theme="light"]) .repo-action:hover:not(:disabled), +:root:not([data-theme="light"]) .repo-action.active, +:root:not([data-theme="light"]) .dialog-icon-button:hover:not(:disabled) { + border-color: #707982; + background: #3b4047; +} + +/* Dark app chrome separation ------------------------------------------- + Tabs, command toolbar and workspace should read as three adjacent + layers instead of one uninterrupted gray strip. */ +:root:not([data-theme="light"]) .repo-tabbar { + border-bottom-color: #505760; + background: #26292f; + box-shadow: + inset 0 -1px 0 #191b1f, + 0 1px 0 rgba(255, 255, 255, 0.035); +} +:root:not([data-theme="light"]) .repo-tabs-scroll { + border-left-color: #454b53; +} +:root:not([data-theme="light"]) .repo-tab-wrap { + border-right-color: #454b53; + background: #292c32; +} +:root:not([data-theme="light"]) .repo-tab-wrap:hover { + background: #30343a; +} +:root:not([data-theme="light"]) .repo-tab-wrap.active, +:root:not([data-theme="light"]) .repo-tab.management.active { + background: #343941; + box-shadow: + inset 0 -3px 0 var(--color-accent), + inset 1px 0 0 #4c535b, + inset -1px 0 0 #4c535b, + inset 0 1px 0 rgba(255, 255, 255, 0.045); +} +:root:not([data-theme="light"]) .repo-tab-add { + border-left-color: #454b53; + background: #292c32; +} +:root:not([data-theme="light"]) .repo-toolbar { + border-top: 1px solid #424850; + border-bottom-color: #505760; + background: #30343a; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.035), + 0 2px 0 #191b1f; +} +:root:not([data-theme="light"]) .repo-action-group { + border-color: #596169; + background: #292d32; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); +} +:root:not([data-theme="light"]) .repo-action-group > .repo-action, +:root:not([data-theme="light"]) .repo-action-group > .repo-history-wrap > .repo-action { + border-right-color: #484e55; +} +:root:not([data-theme="light"]) .repo-toolbar-divider { + background: #555c64; +} +:root:not([data-theme="light"]) .workspace { + box-shadow: inset 0 1px 0 #17191c; +} + @media (max-width: 1180px) { .repo-action { padding-inline: 10px; } .repo-toolbar-divider { margin-inline: 2px; }