From ccaa380b368a85db14744c0325ba8f40aa0f236e Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Sun, 18 Feb 2024 01:00:41 +0100 Subject: [PATCH 1/2] light color for intaractive states updated --- gitbutler-ui/src/styles/main.postcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gitbutler-ui/src/styles/main.postcss b/gitbutler-ui/src/styles/main.postcss index 75f8c7aa0..3582da4c6 100644 --- a/gitbutler-ui/src/styles/main.postcss +++ b/gitbutler-ui/src/styles/main.postcss @@ -23,7 +23,7 @@ /* For very light neutral states — ghost buttons, light background */ --darken-tint-extralight: var(--clr-theme-scale-ntrl-50) 5%; - --darken-tint-light: var(--clr-theme-scale-ntrl-50) 9%; + --darken-tint-light: var(--clr-theme-scale-ntrl-50) 10%; --darken-tint-mid: var(--clr-theme-scale-ntrl-50) 15%; --darken-tint-dark: var(--clr-theme-scale-ntrl-50) 20%; --darken-tint-extradark: var(--clr-theme-scale-ntrl-50) 35%; From bd01a2d88dbb97bcaf5e44852a7af3addb409ed3 Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Sun, 18 Feb 2024 15:27:56 +0100 Subject: [PATCH 2/2] small css fixes, color theme tweaking --- .../src/lib/components/BaseBranchCard.svelte | 4 +-- .../src/lib/components/BranchItem.svelte | 4 +-- gitbutler-ui/src/lib/components/Button.svelte | 2 +- .../src/lib/components/CommitCard.svelte | 8 +++--- .../src/lib/components/DomainButton.svelte | 4 +-- .../src/lib/components/Resizer.svelte | 2 ++ gitbutler-ui/src/styles/main.postcss | 27 ++++++++++++------- 7 files changed, 31 insertions(+), 20 deletions(-) diff --git a/gitbutler-ui/src/lib/components/BaseBranchCard.svelte b/gitbutler-ui/src/lib/components/BaseBranchCard.svelte index a3ac46ac1..f01242f41 100644 --- a/gitbutler-ui/src/lib/components/BaseBranchCard.svelte +++ b/gitbutler-ui/src/lib/components/BaseBranchCard.svelte @@ -71,8 +71,8 @@ transition: background-color var(--transition-fast); } - .base-branch-card:hover, - .base-branch-card:focus, + .base-branch-card:not(.selected):hover, + .base-branch-card:not(.selected):focus, .selected { background-color: color-mix(in srgb, transparent, var(--darken-tint-light)); } diff --git a/gitbutler-ui/src/lib/components/BranchItem.svelte b/gitbutler-ui/src/lib/components/BranchItem.svelte index b4c1e1554..d988cae61 100644 --- a/gitbutler-ui/src/lib/components/BranchItem.svelte +++ b/gitbutler-ui/src/lib/components/BranchItem.svelte @@ -82,8 +82,8 @@ color: var(--clr-theme-scale-ntrl-50); } - .branch:hover, - .branch:focus, + .branch:not(.selected):hover, + .branch:not(.selected):focus, .selected { background-color: color-mix(in srgb, transparent, var(--darken-tint-light)); transition: none; diff --git a/gitbutler-ui/src/lib/components/Button.svelte b/gitbutler-ui/src/lib/components/Button.svelte index afa149bc5..88a6022dc 100644 --- a/gitbutler-ui/src/lib/components/Button.svelte +++ b/gitbutler-ui/src/lib/components/Button.svelte @@ -119,7 +119,7 @@ &:focus { background: color-mix(in srgb, transparent, var(--darken-tint-extralight)); border: 1px solid - color-mix(in srgb, var(--clr-theme-container-outline-light), var(--darken-mid)); + color-mix(in srgb, var(--clr-theme-container-outline-light), var(--darken-tint-mid)); } } diff --git a/gitbutler-ui/src/lib/components/CommitCard.svelte b/gitbutler-ui/src/lib/components/CommitCard.svelte index 080378507..f4b69f5e7 100644 --- a/gitbutler-ui/src/lib/components/CommitCard.svelte +++ b/gitbutler-ui/src/lib/components/CommitCard.svelte @@ -131,9 +131,9 @@ overflow: hidden; transition: background-color var(--transition-fast); - &:hover { + &:not(.is-commit-open):hover { border: 1px solid - color-mix(in srgb, var(--clr-theme-container-outline-light), var(--darken-mid)); + color-mix(in srgb, var(--clr-theme-container-outline-light), var(--darken-tint-mid)); background-color: color-mix( in srgb, var(--clr-theme-container-light), @@ -153,7 +153,7 @@ background-color: color-mix( in srgb, var(--clr-theme-container-light), - var(--darken-tint-extralight) + var(--darken-tint-light) ); & .commit__header { @@ -163,7 +163,7 @@ background-color: color-mix( in srgb, var(--clr-theme-container-light), - var(--darken-tint-light) + var(--darken-tint-mid) ); } } diff --git a/gitbutler-ui/src/lib/components/DomainButton.svelte b/gitbutler-ui/src/lib/components/DomainButton.svelte index 0eb065350..9a1fe844b 100644 --- a/gitbutler-ui/src/lib/components/DomainButton.svelte +++ b/gitbutler-ui/src/lib/components/DomainButton.svelte @@ -21,8 +21,8 @@ transition: background-color var(--transition-fast); } - .domain-button:hover, - .domain-button:focus, + .domain-button:not(.selected):hover, + .domain-button:not(.selected):focus, .selected { background-color: color-mix(in srgb, transparent, var(--darken-tint-light)); } diff --git a/gitbutler-ui/src/lib/components/Resizer.svelte b/gitbutler-ui/src/lib/components/Resizer.svelte index bfb2e9fb5..403dd2c3b 100644 --- a/gitbutler-ui/src/lib/components/Resizer.svelte +++ b/gitbutler-ui/src/lib/components/Resizer.svelte @@ -96,8 +96,10 @@ } z-index: 40; &:hover, + &:focus, &.dragging { background-color: var(--clr-theme-container-outline-light); + outline: none; } } .horizontal { diff --git a/gitbutler-ui/src/styles/main.postcss b/gitbutler-ui/src/styles/main.postcss index 3582da4c6..32f979278 100644 --- a/gitbutler-ui/src/styles/main.postcss +++ b/gitbutler-ui/src/styles/main.postcss @@ -18,26 +18,35 @@ --transition-fast: 0.06s ease-in-out; --transition-medium: 0.1s ease-in-out; --transition-slow: 0.2s ease-in-out; - --helpers-invert-0: 0; - --helpers-invert-1: 1; - /* For very light neutral states — ghost buttons, light background */ + /* For all light neutral elements — ghost buttons, light background + use tint palatte it will tint the pallate properly if it's nut gray */ --darken-tint-extralight: var(--clr-theme-scale-ntrl-50) 5%; - --darken-tint-light: var(--clr-theme-scale-ntrl-50) 10%; - --darken-tint-mid: var(--clr-theme-scale-ntrl-50) 15%; + --darken-tint-light: var(--clr-theme-scale-ntrl-50) 9%; + --darken-tint-mid: var(--clr-theme-scale-ntrl-50) 14%; --darken-tint-dark: var(--clr-theme-scale-ntrl-50) 20%; --darken-tint-extradark: var(--clr-theme-scale-ntrl-50) 35%; - /* For all other elements */ + /* For all color and dark eleemnts */ --darken-extralight: var(--clr-theme-scale-ntrl-0) 3%; - --darken-light: var(--clr-theme-scale-ntrl-0) 5%; + --darken-light: var(--clr-theme-scale-ntrl-0) 6%; --darken-mid: var(--clr-theme-scale-ntrl-0) 9%; - --darken-dark: var(--clr-theme-scale-ntrl-0) 15%; - --darken-extradark: var(--clr-theme-scale-ntrl-0) 25%; + --darken-dark: var(--clr-theme-scale-ntrl-0) 12%; + --darken-extradark: var(--clr-theme-scale-ntrl-0) 15%; /* TODO: add focus color */ } +:root.dark { + /* Additional correction here for dark mode, due tue + tint colors look less contrast */ + --darken-tint-extralight: var(--clr-theme-scale-ntrl-50) 7%; + --darken-tint-light: var(--clr-theme-scale-ntrl-50) 14%; + --darken-tint-mid: var(--clr-theme-scale-ntrl-50) 21%; + --darken-tint-dark: var(--clr-theme-scale-ntrl-50) 28%; + --darken-tint-extradark: var(--clr-theme-scale-ntrl-50) 35%; +} + /* BOILERPLATE CSS */ body {