diff --git a/app/src/lib/assets/new-branch/bottom-sheet.svg b/app/src/lib/assets/new-branch/bottom-sheet.svg
index 0cc9e6eff..7ff4ea2e3 100644
--- a/app/src/lib/assets/new-branch/bottom-sheet.svg
+++ b/app/src/lib/assets/new-branch/bottom-sheet.svg
@@ -1,3 +1,3 @@
diff --git a/app/src/lib/assets/new-branch/hand.svg b/app/src/lib/assets/new-branch/hand.svg
index 2c16ef2b3..043ff961f 100644
--- a/app/src/lib/assets/new-branch/hand.svg
+++ b/app/src/lib/assets/new-branch/hand.svg
@@ -1,4 +1,4 @@
diff --git a/app/src/lib/assets/new-branch/middle-sheet.svg b/app/src/lib/assets/new-branch/middle-sheet.svg
index 878704df1..2ec3799f9 100644
--- a/app/src/lib/assets/new-branch/middle-sheet.svg
+++ b/app/src/lib/assets/new-branch/middle-sheet.svg
@@ -1,3 +1,3 @@
diff --git a/app/src/lib/assets/new-branch/top-sheet.svg b/app/src/lib/assets/new-branch/top-sheet.svg
index 9dc42c985..56c9311fb 100644
--- a/app/src/lib/assets/new-branch/top-sheet.svg
+++ b/app/src/lib/assets/new-branch/top-sheet.svg
@@ -1,3 +1,3 @@
diff --git a/app/src/lib/components/AISettings.svelte b/app/src/lib/components/AISettings.svelte
index 7c71058c9..d0f4f7427 100644
--- a/app/src/lib/components/AISettings.svelte
+++ b/app/src/lib/components/AISettings.svelte
@@ -293,7 +293,7 @@
diff --git a/app/src/lib/components/BranchHeader.svelte b/app/src/lib/components/BranchHeader.svelte
index 91f3638a1..ba0659ac8 100644
--- a/app/src/lib/components/BranchHeader.svelte
+++ b/app/src/lib/components/BranchHeader.svelte
@@ -281,7 +281,7 @@
.header__actions {
display: flex;
gap: var(--size-4);
- background: var(--clr-bg-alt);
+ background: var(--clr-bg-2);
padding: var(--size-14);
justify-content: space-between;
border-radius: 0 0 var(--radius-m) var(--radius-m);
diff --git a/app/src/lib/components/BranchIcon.svelte b/app/src/lib/components/BranchIcon.svelte
index c5a9a8597..2798565dc 100644
--- a/app/src/lib/components/BranchIcon.svelte
+++ b/app/src/lib/components/BranchIcon.svelte
@@ -68,7 +68,7 @@
border-radius: var(--radius-s);
& path {
- fill: var(--clr-bg-main);
+ fill: var(--clr-bg-1);
}
}
diff --git a/app/src/lib/components/BranchItem.svelte b/app/src/lib/components/BranchItem.svelte
index 1a9116b82..59073b40a 100644
--- a/app/src/lib/components/BranchItem.svelte
+++ b/app/src/lib/components/BranchItem.svelte
@@ -91,7 +91,7 @@
.branch:not(.selected):hover,
.branch:not(.selected):focus,
.selected {
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
transition: none;
}
diff --git a/app/src/lib/components/BranchLabel.svelte b/app/src/lib/components/BranchLabel.svelte
index dab5f92c9..511d37e4a 100644
--- a/app/src/lib/components/BranchLabel.svelte
+++ b/app/src/lib/components/BranchLabel.svelte
@@ -81,18 +81,18 @@
width: 100%;
border-radius: var(--radius-s);
color: var(--clr-scale-ntrl-0);
- background-color: var(--clr-bg-main);
+ background-color: var(--clr-bg-1);
outline: none;
/* not readonly */
&:not([disabled]):hover {
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
}
&:not([disabled]):focus {
outline: none;
- background-color: var(--clr-bg-muted);
- border-color: var(--clr-border-main);
+ background-color: var(--clr-bg-2);
+ border-color: var(--clr-border-2);
}
}
diff --git a/app/src/lib/components/BranchLane.svelte b/app/src/lib/components/BranchLane.svelte
index 2d9d99986..f962b0d9e 100644
--- a/app/src/lib/components/BranchLane.svelte
+++ b/app/src/lib/components/BranchLane.svelte
@@ -117,7 +117,7 @@
viewport={rsViewport}
direction="right"
minWidth={240}
- defaultLineColor="var(--clr-border-main)"
+ defaultLineColor="var(--clr-border-2)"
on:width={(e) => {
fileWidth = e.detail / (16 * $userSettings.zoom);
lscache.set(fileWidthKey + branch.id, fileWidth, 7 * 1440); // 7 day ttl
@@ -136,12 +136,12 @@
flex-shrink: 0;
user-select: none; /* here because of user-select draggable interference in board */
position: relative;
- --target-branch-background: var(--clr-bg-alt);
+ --target-branch-background: var(--clr-bg-2);
background-color: var(--target-branch-background);
}
.target-branch {
- --target-branch-background: color-mix(in srgb, var(--clr-scale-pop-60) 20%, var(--clr-bg-alt));
+ --target-branch-background: color-mix(in srgb, var(--clr-scale-pop-60) 20%, var(--clr-bg-2));
}
.file-preview {
diff --git a/app/src/lib/components/BranchPreviewHeader.svelte b/app/src/lib/components/BranchPreviewHeader.svelte
index e32e399f4..dd19ff8c4 100644
--- a/app/src/lib/components/BranchPreviewHeader.svelte
+++ b/app/src/lib/components/BranchPreviewHeader.svelte
@@ -147,7 +147,7 @@
.header__actions {
display: flex;
gap: var(--size-4);
- background: var(--clr-bg-alt);
+ background: var(--clr-bg-2);
padding: var(--size-14);
justify-content: flex-end;
border-radius: 0 0 var(--radius-m) var(--radius-m);
diff --git a/app/src/lib/components/Branches.svelte b/app/src/lib/components/Branches.svelte
index d842cc68d..2dc9f0237 100644
--- a/app/src/lib/components/Branches.svelte
+++ b/app/src/lib/components/Branches.svelte
@@ -180,7 +180,7 @@
overflow: hidden;
display: flex;
flex-direction: column;
- border-top: 1px solid var(--clr-border-main);
+ border-top: 1px solid var(--clr-border-2);
}
.content {
display: flex;
diff --git a/app/src/lib/components/BranchesHeader.svelte b/app/src/lib/components/BranchesHeader.svelte
index b48980835..1779636f2 100644
--- a/app/src/lib/components/BranchesHeader.svelte
+++ b/app/src/lib/components/BranchesHeader.svelte
@@ -60,7 +60,7 @@
}
.filter-popup-menu {
position: absolute;
- top: calc(var(--size-control-button) + var(--size-4));
+ top: calc(var(--size-button) + var(--size-4));
right: 0;
z-index: var(--z-floating);
min-width: 10rem;
diff --git a/app/src/lib/components/Button.svelte b/app/src/lib/components/Button.svelte
index 59b5e43fc..a36ace27f 100644
--- a/app/src/lib/components/Button.svelte
+++ b/app/src/lib/components/Button.svelte
@@ -102,7 +102,7 @@
&:disabled {
cursor: default;
pointer-events: none;
- /* opacity: 0.5; */
+ opacity: 0.7;
&.neutral.solid,
&.pop.solid,
@@ -110,9 +110,8 @@
&.error.solid,
&.warning.solid,
&.purple.solid {
- /* color: var(--clr-bg-on-muted); */
- --btn-clr: var(--clr-bg-on-muted);
- --btn-bg: oklch(from var(--clr-scale-ntrl-60) l c h / 0.2);
+ --btn-clr: var(--clr-text-2);
+ --btn-bg: var(--clr-bg-3);
& .badge {
--btn-bg: var(--clr-scale-ntrl-100);
@@ -125,16 +124,16 @@
&.error.soft,
&.warning.soft,
&.purple.soft {
- --btn-clr: var(--clr-bg-on-muted);
- --btn-bg: oklch(from var(--clr-scale-ntrl-60) l c h / 0.2);
+ --btn-clr: var(--clr-text-2);
+ --btn-bg: var(--clr-bg-3);
}
&.ghost {
- --btn-clr: var(--clr-bg-on-muted);
+ --btn-clr: var(--clr-text-2);
}
&.ghost.solid {
- border-color: oklch(from var(--clr-scale-ntrl-0) l c h / 0.1);
+ border-color: var(--clr-bg-3);
}
}
&.wide {
@@ -162,8 +161,8 @@
display: flex;
align-items: center;
justify-content: center;
- height: var(--size-control-icon);
- min-width: var(--size-control-icon);
+ height: var(--size-icon);
+ min-width: var(--size-icon);
padding: 0 var(--size-4);
border-radius: var(--radius-s);
background: var(--btn-clr);
@@ -178,8 +177,8 @@
display: flex;
align-items: center;
justify-content: center;
- width: var(--size-control-icon);
- height: var(--size-control-icon);
+ width: var(--size-icon);
+ height: var(--size-icon);
margin-right: -0.125rem;
color: white;
}
@@ -220,7 +219,7 @@
&:not(.not-clickable, &:disabled):hover {
--btn-clr: var(--clr-scale-ntrl-20);
- --btn-bg: var(--clr-bg-muted);
+ --btn-bg: var(--clr-bg-2);
}
& .badge {
@@ -355,20 +354,20 @@
/* SIZE MODIFIERS */
.btn.tag {
- height: var(--size-control-tag);
- min-width: var(--size-control-tag);
+ height: var(--size-tag);
+ min-width: var(--size-tag);
padding: var(--size-2) var(--size-4);
}
.btn.button {
- height: var(--size-control-button);
- min-width: var(--size-control-button);
+ height: var(--size-button);
+ min-width: var(--size-button);
padding: var(--size-4) var(--size-8);
}
.btn.cta {
- height: var(--size-control-cta);
- min-width: var(--size-control-cta);
+ height: var(--size-cta);
+ min-width: var(--size-cta);
padding: var(--size-6) var(--size-8);
}
@@ -376,17 +375,17 @@
.btn.fixed-width {
&.tag {
- width: var(--size-control-tag);
+ width: var(--size-tag);
padding: var(--size-2);
}
&.button {
- width: var(--size-control-button);
+ width: var(--size-button);
padding: var(--size-4);
}
&.cta {
- width: var(--size-control-cta);
+ width: var(--size-cta);
padding: var(--size-6);
}
}
diff --git a/app/src/lib/components/CardSection.svelte b/app/src/lib/components/CardSection.svelte
deleted file mode 100644
index 9c9bd66f7..000000000
--- a/app/src/lib/components/CardSection.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
-
-
diff --git a/app/src/lib/components/Checkbox.svelte b/app/src/lib/components/Checkbox.svelte
index 2729a0aa4..648a988e4 100644
--- a/app/src/lib/components/Checkbox.svelte
+++ b/app/src/lib/components/Checkbox.svelte
@@ -39,8 +39,8 @@
height: var(--size-16);
flex-shrink: 0;
border-radius: var(--radius-s);
- background-color: var(--clr-bg-main);
- box-shadow: inset 0 0 0 1px var(--clr-border-main);
+ background-color: var(--clr-bg-1);
+ box-shadow: inset 0 0 0 1px var(--clr-border-2);
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
@@ -68,7 +68,7 @@
}
&:indeterminate {
- background-color: var(--clr-bg-alt);
+ background-color: var(--clr-bg-2);
&::before {
content: '';
diff --git a/app/src/lib/components/CommitCard.svelte b/app/src/lib/components/CommitCard.svelte
index 1c4032551..78e28fe2d 100644
--- a/app/src/lib/components/CommitCard.svelte
+++ b/app/src/lib/components/CommitCard.svelte
@@ -178,13 +178,13 @@
flex-direction: column;
border-radius: var(--size-6);
- background-color: var(--clr-bg-main);
- border: 1px solid var(--clr-border-main);
+ background-color: var(--clr-bg-1);
+ border: 1px solid var(--clr-border-2);
overflow: hidden;
transition: background-color var(--transition-fast);
&:not(.is-commit-open):hover {
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
}
}
@@ -197,11 +197,11 @@
}
.is-commit-open {
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
& .commit__header {
padding-bottom: var(--size-16);
- border-bottom: 1px solid var(--clr-border-main);
+ border-bottom: 1px solid var(--clr-border-2);
}
& .commit__message {
@@ -261,7 +261,7 @@
}
.files-container {
- background-color: var(--clr-bg-main);
+ background-color: var(--clr-bg-1);
padding: 0 var(--size-14) var(--size-14);
}
@@ -270,7 +270,7 @@
justify-content: flex-end;
gap: var(--size-8);
padding: var(--size-14);
- background-color: var(--clr-bg-main);
- border-top: 1px solid var(--clr-border-main);
+ background-color: var(--clr-bg-1);
+ border-top: 1px solid var(--clr-border-2);
}
diff --git a/app/src/lib/components/CommitDialog.svelte b/app/src/lib/components/CommitDialog.svelte
index fb691fae3..52c0e45d0 100644
--- a/app/src/lib/components/CommitDialog.svelte
+++ b/app/src/lib/components/CommitDialog.svelte
@@ -280,8 +280,8 @@
display: flex;
flex-direction: column;
padding: var(--size-14);
- background: var(--clr-bg-main);
- border-top: 1px solid var(--clr-border-main);
+ background: var(--clr-bg-1);
+ border-top: 1px solid var(--clr-border-2);
transition: background-color var(--transition-medium);
border-radius: 0 0 var(--radius-m) var(--radius-m);
}
@@ -324,7 +324,7 @@
left: var(--size-12);
padding: var(--size-2);
border-radius: 100%;
- background: var(--clr-bg-alt);
+ background: var(--clr-bg-2);
color: var(--clr-scale-ntrl-40);
}
@@ -350,6 +350,6 @@
}
.commit-box__expanded {
- background-color: var(--clr-bg-alt);
+ background-color: var(--clr-bg-2);
}
diff --git a/app/src/lib/components/CommitList.svelte b/app/src/lib/components/CommitList.svelte
index afb2f8926..2fd6f1685 100644
--- a/app/src/lib/components/CommitList.svelte
+++ b/app/src/lib/components/CommitList.svelte
@@ -61,9 +61,9 @@
diff --git a/app/src/lib/components/DecorativeSplitView.svelte b/app/src/lib/components/DecorativeSplitView.svelte
index c1ff1050d..786d86d4a 100644
--- a/app/src/lib/components/DecorativeSplitView.svelte
+++ b/app/src/lib/components/DecorativeSplitView.svelte
@@ -70,7 +70,7 @@
user-select: none;
display: flex;
flex-grow: 1;
- background-color: var(--clr-bg-main);
+ background-color: var(--clr-bg-1);
}
.right-side {
@@ -84,7 +84,7 @@
align-items: center;
padding: var(--size-40) calc(var(--size-40) * 2);
flex: 1.3;
- background-color: var(--clr-bg-main);
+ background-color: var(--clr-bg-1);
overflow-y: auto;
}
@@ -101,7 +101,7 @@
.right-side {
flex: 1;
min-width: 28rem;
- background-color: var(--clr-bg-main);
+ background-color: var(--clr-bg-1);
padding: var(--size-20) var(--size-20) var(--size-20) 0;
}
diff --git a/app/src/lib/components/DomainButton.svelte b/app/src/lib/components/DomainButton.svelte
index 1cd7bef76..bf89874e6 100644
--- a/app/src/lib/components/DomainButton.svelte
+++ b/app/src/lib/components/DomainButton.svelte
@@ -44,7 +44,7 @@
gap: var(--size-10);
border-radius: var(--radius-m);
padding: var(--size-10);
- color: var(--clr-scale-ntrl-0);
+ color: var(--clr-text-1);
transition: background-color var(--transition-fast);
}
@@ -58,6 +58,6 @@
.domain-button:not(.selected):hover,
.domain-button:not(.selected):focus,
.selected {
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
}
diff --git a/app/src/lib/components/FileCard.svelte b/app/src/lib/components/FileCard.svelte
index 4b47362e0..510ec047b 100644
--- a/app/src/lib/components/FileCard.svelte
+++ b/app/src/lib/components/FileCard.svelte
@@ -80,7 +80,7 @@
}
.file-card {
- background: var(--clr-bg-main);
+ background: var(--clr-bg-1);
overflow: hidden;
display: flex;
flex-direction: column;
diff --git a/app/src/lib/components/FileCardHeader.svelte b/app/src/lib/components/FileCardHeader.svelte
index 30887d99e..607381e07 100644
--- a/app/src/lib/components/FileCardHeader.svelte
+++ b/app/src/lib/components/FileCardHeader.svelte
@@ -74,7 +74,7 @@
display: flex;
padding: var(--size-16);
gap: var(--size-12);
- border-bottom: 1px solid var(--clr-border-main);
+ border-bottom: 1px solid var(--clr-border-2);
}
.header__inner {
display: flex;
diff --git a/app/src/lib/components/FileListItem.svelte b/app/src/lib/components/FileListItem.svelte
index d1980152c..90419bae0 100644
--- a/app/src/lib/components/FileListItem.svelte
+++ b/app/src/lib/components/FileListItem.svelte
@@ -162,11 +162,11 @@
text-align: left;
user-select: none;
outline: none;
- background: var(--clr-bg-main);
+ background: var(--clr-bg-1);
border: 1px solid transparent;
&:not(.selected-draggable):hover {
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
}
}
@@ -210,7 +210,7 @@
.selected-draggable {
background-color: var(--clr-scale-pop-80);
- border: 1px solid var(--clr-bg-main);
+ border: 1px solid var(--clr-bg-1);
&:hover {
background-color: var(--clr-scale-pop-80);
diff --git a/app/src/lib/components/Footer.svelte b/app/src/lib/components/Footer.svelte
index 036f8a9ee..583e55157 100644
--- a/app/src/lib/components/Footer.svelte
+++ b/app/src/lib/components/Footer.svelte
@@ -33,8 +33,8 @@
display: flex;
justify-content: space-between;
padding: var(--size-12);
- border-top: 1px solid var(--clr-border-main);
- border-color: var(--clr-border-main);
+ border-top: 1px solid var(--clr-border-2);
+ border-color: var(--clr-border-2);
}
.left-btns {
diff --git a/app/src/lib/components/GithubIntegration.svelte b/app/src/lib/components/GithubIntegration.svelte
index 71e9c6cab..46ae4fc91 100644
--- a/app/src/lib/components/GithubIntegration.svelte
+++ b/app/src/lib/components/GithubIntegration.svelte
@@ -305,7 +305,7 @@
padding: var(--size-6) var(--size-6) var(--size-6) var(--size-8);
border-radius: var(--radius-m);
background-color: var(--clr-bg);
- border: 1px solid var(--clr-border-main);
+ border: 1px solid var(--clr-border-2);
user-select: text;
}
diff --git a/app/src/lib/components/HunkLine.svelte b/app/src/lib/components/HunkLine.svelte
index 15d7986e6..ac945eeff 100644
--- a/app/src/lib/components/HunkLine.svelte
+++ b/app/src/lib/components/HunkLine.svelte
@@ -84,7 +84,7 @@
width: 100%;
min-width: max-content;
font-family: monospace;
- background-color: var(--clr-bg-main);
+ background-color: var(--clr-bg-1);
white-space: pre;
tab-size: var(--tab-size);
}
diff --git a/app/src/lib/components/HunkViewer.svelte b/app/src/lib/components/HunkViewer.svelte
index f8bf75297..e1bae7d41 100644
--- a/app/src/lib/components/HunkViewer.svelte
+++ b/app/src/lib/components/HunkViewer.svelte
@@ -126,9 +126,9 @@
overflow-x: auto;
user-select: text;
- background: var(--clr-bg-main);
+ background: var(--clr-bg-1);
border-radius: var(--radius-s);
- border: 1px solid var(--clr-border-main);
+ border: 1px solid var(--clr-border-2);
transition: border-color var(--transition-fast);
}
diff --git a/app/src/lib/components/InfoMessage.svelte b/app/src/lib/components/InfoMessage.svelte
index b3a916c4e..e5b8f4b52 100644
--- a/app/src/lib/components/InfoMessage.svelte
+++ b/app/src/lib/components/InfoMessage.svelte
@@ -94,7 +94,7 @@
padding: var(--size-14);
border-radius: var(--radius-m);
gap: var(--size-12);
- background-color: var(--clr-bg-main);
+ background-color: var(--clr-bg-1);
transition:
background-color var(--transition-slow),
border-color var(--transition-slow);
@@ -125,7 +125,7 @@
/* MODIFIERS */
.neutral {
- border: 0 solid var(--clr-border-main);
+ border: 0 solid var(--clr-border-2);
}
.error {
border: 0 solid var(--clr-scale-err-60);
@@ -151,7 +151,7 @@
.has-background {
&.neutral {
- background-color: var(--clr-bg-alt);
+ background-color: var(--clr-bg-2);
}
&.error {
diff --git a/app/src/lib/components/LargeDiffMessage.svelte b/app/src/lib/components/LargeDiffMessage.svelte
index 1037eae07..fc55c7f4d 100644
--- a/app/src/lib/components/LargeDiffMessage.svelte
+++ b/app/src/lib/components/LargeDiffMessage.svelte
@@ -23,11 +23,11 @@
padding: var(--size-12);
gap: var(--size-8);
flex-direction: column;
- background-color: var(--clr-bg-main);
+ background-color: var(--clr-bg-1);
}
.frame-box {
- border: 1px solid var(--clr-border-main);
+ border: 1px solid var(--clr-border-2);
border-radius: var(--radius-m);
}
diff --git a/app/src/lib/components/ListItem.svelte b/app/src/lib/components/ListItem.svelte
index 8b296883a..21b6ec73a 100644
--- a/app/src/lib/components/ListItem.svelte
+++ b/app/src/lib/components/ListItem.svelte
@@ -39,14 +39,14 @@
&:hover:enabled,
&:focus:enabled {
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
& .icon {
color: var(--clr-scale-ntrl-40);
}
}
&:disabled {
- background-color: var(--clr-bg-muted);
- color: var(--clr-bg-on-muted);
+ background-color: var(--clr-bg-2);
+ color: var(--clr-text-2);
}
& .icon {
display: flex;
diff --git a/app/src/lib/components/Modal.svelte b/app/src/lib/components/Modal.svelte
index 37d19c801..5371d6002 100644
--- a/app/src/lib/components/Modal.svelte
+++ b/app/src/lib/components/Modal.svelte
@@ -58,7 +58,7 @@
display: flex;
padding: var(--size-16);
gap: var(--size-8);
- border-bottom: 1px solid var(--clr-border-main);
+ border-bottom: 1px solid var(--clr-border-2);
}
.modal__header__content {
@@ -83,8 +83,8 @@
justify-content: flex-end;
gap: var(--size-8);
padding: var(--size-16);
- border-top: 1px solid var(--clr-border-main);
- background-color: var(--clr-bg-main);
+ border-top: 1px solid var(--clr-border-2);
+ background-color: var(--clr-bg-1);
}
.adjust-header {
diff --git a/app/src/lib/components/Navigation.svelte b/app/src/lib/components/Navigation.svelte
index 1d2a0ebf3..ce8514a91 100644
--- a/app/src/lib/components/Navigation.svelte
+++ b/app/src/lib/components/Navigation.svelte
@@ -56,7 +56,7 @@
{viewport}
direction="right"
minWidth={minResizerWidth}
- defaultLineColor="var(--clr-border-main)"
+ defaultLineColor="var(--clr-border-2)"
zIndex="var(--z-floating)"
on:click={() => $isNavCollapsed && toggleNavCollapse()}
on:dblclick={() => !$isNavCollapsed && toggleNavCollapse()}
@@ -154,7 +154,7 @@
display: flex;
flex-direction: column;
position: relative;
- background: var(--clr-bg-main);
+ background: var(--clr-bg-1);
max-height: 100%;
user-select: none;
}
@@ -196,9 +196,9 @@
top: 50%;
width: 0.875rem;
height: var(--size-36);
- background: var(--clr-bg-main);
+ background: var(--clr-bg-1);
border-radius: var(--radius-m);
- border: 1px solid var(--clr-border-main);
+ border: 1px solid var(--clr-border-2);
pointer-events: none;
opacity: 0;
transition:
diff --git a/app/src/lib/components/NewBranchDropZone.svelte b/app/src/lib/components/NewBranchDropZone.svelte
index 039673d2c..2cc530603 100644
--- a/app/src/lib/components/NewBranchDropZone.svelte
+++ b/app/src/lib/components/NewBranchDropZone.svelte
@@ -91,7 +91,7 @@
justify-content: center;
width: 22rem;
border-radius: var(--radius-m);
- border: 1px dashed var(--clr-border-main);
+ border: 1px dashed var(--clr-border-2);
background-color: transparent;
padding: var(--size-20);
gap: var(--size-8);
diff --git a/app/src/lib/components/Overlay.svelte b/app/src/lib/components/Overlay.svelte
index 5d516e5ea..f1fe295fa 100644
--- a/app/src/lib/components/Overlay.svelte
+++ b/app/src/lib/components/Overlay.svelte
@@ -44,8 +44,8 @@
width: 100%;
max-height: calc(100vh - 5rem);
border-radius: var(--radius-l);
- background-color: var(--clr-bg-main);
- border: 1px solid var(--clr-border-main);
+ background-color: var(--clr-bg-1);
+ border: 1px solid var(--clr-border-2);
box-shadow: var(--fx-shadow-l);
}
diff --git a/app/src/lib/components/PassphraseBox.svelte b/app/src/lib/components/PassphraseBox.svelte
index 558a7fb21..1e185755e 100644
--- a/app/src/lib/components/PassphraseBox.svelte
+++ b/app/src/lib/components/PassphraseBox.svelte
@@ -67,7 +67,7 @@
gap: var(--size-8);
padding: var(--size-14);
border-radius: var(--radius-m);
- background-color: var(--clr-bg-alt);
+ background-color: var(--clr-bg-2);
}
.passbox__helper-text {
diff --git a/app/src/lib/components/ProjectsPopup.svelte b/app/src/lib/components/ProjectsPopup.svelte
index b2e0abf33..92ee5a2cc 100644
--- a/app/src/lib/components/ProjectsPopup.svelte
+++ b/app/src/lib/components/ProjectsPopup.svelte
@@ -71,8 +71,8 @@
width: 100%;
margin-top: var(--size-6);
border-radius: var(--m, 6px);
- border: 1px solid var(--clr-border-main);
- background: var(--clr-bg-main);
+ border: 1px solid var(--clr-border-2);
+ background: var(--clr-bg-1);
/* shadow/s */
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.1);
}
diff --git a/app/src/lib/components/RadioButton.svelte b/app/src/lib/components/RadioButton.svelte
index f5f6d4598..d2832c853 100644
--- a/app/src/lib/components/RadioButton.svelte
+++ b/app/src/lib/components/RadioButton.svelte
@@ -27,8 +27,8 @@
width: var(--size-16);
height: var(--size-16);
border-radius: var(--size-16);
- background-color: var(--clr-bg-main);
- box-shadow: inset 0 0 0 1px var(--clr-border-main);
+ background-color: var(--clr-bg-1);
+ box-shadow: inset 0 0 0 1px var(--clr-border-2);
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
diff --git a/app/src/lib/components/RemoteBranchPreview.svelte b/app/src/lib/components/RemoteBranchPreview.svelte
index e2d6ca807..6cb929adc 100644
--- a/app/src/lib/components/RemoteBranchPreview.svelte
+++ b/app/src/lib/components/RemoteBranchPreview.svelte
@@ -125,7 +125,7 @@
flex-direction: column;
gap: var(--size-8);
margin: var(--size-12) var(--size-6) var(--size-12) var(--size-12);
- --target-branch-background: var(--clr-bg-alt);
+ --target-branch-background: var(--clr-bg-2);
}
.card__content {
diff --git a/app/src/lib/components/ScrollableContainer.svelte b/app/src/lib/components/ScrollableContainer.svelte
index 8efc5e6a4..0fe457ea0 100644
--- a/app/src/lib/components/ScrollableContainer.svelte
+++ b/app/src/lib/components/ScrollableContainer.svelte
@@ -82,7 +82,7 @@
min-width: 100%;
}
.scrolled {
- border-top: 1px solid var(--clr-border-main);
+ border-top: 1px solid var(--clr-border-2);
}
/* MODIFIERS */
diff --git a/app/src/lib/components/SectionCard.svelte b/app/src/lib/components/SectionCard.svelte
index d9b5a6c60..3d52e91ba 100644
--- a/app/src/lib/components/SectionCard.svelte
+++ b/app/src/lib/components/SectionCard.svelte
@@ -79,8 +79,8 @@
padding: var(--size-16);
border-left-width: 1px;
border-right-width: 1px;
- border-color: var(--clr-border-main);
- background-color: var(--clr-bg-main);
+ border-color: var(--clr-border-2);
+ background-color: var(--clr-bg-1);
cursor: default;
transition:
background-color var(--transition-fast),
@@ -89,7 +89,7 @@
}
.loading {
- background: var(--clr-bg-alt);
+ background: var(--clr-bg-2);
}
.success {
@@ -116,7 +116,7 @@
}
.section-card__text {
- color: var(--clr-scale-ntrl-30);
+ color: var(--clr-text-2);
/* if empty hide the caption */
&:empty {
@@ -150,7 +150,7 @@
display: block;
width: 100%;
height: 1px;
- background-color: var(--clr-border-main);
+ background-color: var(--clr-border-2);
opacity: 0.5;
}
}
diff --git a/app/src/lib/components/SegmentControl/Segment.svelte b/app/src/lib/components/SegmentControl/Segment.svelte
index d63105989..211e45387 100644
--- a/app/src/lib/components/SegmentControl/Segment.svelte
+++ b/app/src/lib/components/SegmentControl/Segment.svelte
@@ -77,18 +77,18 @@
justify-content: center;
gap: var(--size-4);
- height: var(--size-control-button);
+ height: var(--size-button);
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
- border-color: var(--clr-border-main);
+ border-color: var(--clr-border-2);
transition: background var(--transition-fast);
&[aria-selected='true'] {
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
cursor: default;
@@ -127,12 +127,12 @@
/* MODIFIERS */
.segment-small {
- height: var(--size-control-tag);
+ height: var(--size-tag);
padding: var(--size-2) var(--size-4);
}
.segment-medium {
- height: var(--size-control-button);
+ height: var(--size-button);
padding: var(--size-4) var(--size-8);
}
diff --git a/app/src/lib/components/Select.svelte b/app/src/lib/components/Select.svelte
index 59662a31f..2ca62509e 100644
--- a/app/src/lib/components/Select.svelte
+++ b/app/src/lib/components/Select.svelte
@@ -135,8 +135,8 @@
z-index: var(--z-floating);
margin-top: var(--size-4);
border-radius: var(--radius-m);
- border: 1px solid var(--clr-border-main);
- background: var(--clr-bg-main);
+ border: 1px solid var(--clr-border-2);
+ background: var(--clr-bg-1);
box-shadow: var(--fx-shadow-s);
overflow: hidden;
}
@@ -148,7 +148,7 @@
gap: var(--size-2);
&:not(&:first-child):last-child {
- border-top: 1px solid var(--clr-border-main);
+ border-top: 1px solid var(--clr-border-2);
}
}
diff --git a/app/src/lib/components/SelectItem.svelte b/app/src/lib/components/SelectItem.svelte
index fade2dd6b..3b80095f7 100644
--- a/app/src/lib/components/SelectItem.svelte
+++ b/app/src/lib/components/SelectItem.svelte
@@ -40,13 +40,13 @@
white-space: nowrap;
&:hover:enabled,
&:focus:enabled {
- background-color: var(--clr-bg-alt);
+ background-color: var(--clr-bg-2);
& .icon {
color: var(--clr-scale-ntrl-40);
}
}
&:disabled {
- background-color: var(--clr-bg-alt);
+ background-color: var(--clr-bg-2);
color: var(--clr-scale-ntrl-50);
}
& .icon {
diff --git a/app/src/lib/components/SetupFeature.svelte b/app/src/lib/components/SetupFeature.svelte
index fea30df22..3c44f705b 100644
--- a/app/src/lib/components/SetupFeature.svelte
+++ b/app/src/lib/components/SetupFeature.svelte
@@ -40,7 +40,7 @@
padding: var(--size-20);
}
.disabled.setup-feature {
- background: var(--clr-bg-alt);
+ background: var(--clr-bg-2);
opacity: 0.5;
}
.success.setup-feature {
@@ -87,6 +87,6 @@
}
.top-border {
- border-top: 1px solid var(--clr-border-main);
+ border-top: 1px solid var(--clr-border-2);
}
diff --git a/app/src/lib/components/Tag.svelte b/app/src/lib/components/Tag.svelte
index 8a8b77379..ab4dded40 100644
--- a/app/src/lib/components/Tag.svelte
+++ b/app/src/lib/components/Tag.svelte
@@ -51,7 +51,7 @@
display: flex;
align-items: center;
justify-content: center;
- height: var(--size-control-tag);
+ height: var(--size-tag);
padding: var(--size-2) var(--size-4);
border-radius: var(--radius-m);
transition: background-color var(--transition-fast);
@@ -230,7 +230,7 @@
&.error.solid,
&.warning.solid,
&.purple.solid {
- color: var(--clr-bg-on-muted);
+ color: var(--clr-text-2);
background: oklch(from var(--clr-scale-ntrl-60) l c h / 0.15);
}
@@ -240,12 +240,12 @@
&.error.soft,
&.warning.soft,
&.purple.soft {
- color: var(--clr-bg-on-muted);
+ color: var(--clr-text-2);
background: oklch(from var(--clr-scale-ntrl-60) l c h / 0.15);
}
&.ghost {
- color: var(--clr-bg-on-muted);
+ color: var(--clr-text-2);
}
&.ghost.solid {
@@ -269,7 +269,7 @@
.verticalOrientation {
writing-mode: vertical-rl;
height: max-content;
- width: var(--size-control-tag);
+ width: var(--size-tag);
padding: var(--size-4) var(--size-2);
transform: rotate(180deg);
}
diff --git a/app/src/lib/components/TextBox.svelte b/app/src/lib/components/TextBox.svelte
index 645951d81..999c8c41b 100644
--- a/app/src/lib/components/TextBox.svelte
+++ b/app/src/lib/components/TextBox.svelte
@@ -160,7 +160,7 @@
.textbox__input {
position: relative;
flex-grow: 1;
- height: var(--size-control-cta);
+ height: var(--size-cta);
width: 100%;
}
@@ -193,7 +193,7 @@
&:focus {
color: var(--clr-scale-ntrl-40);
outline: none;
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
}
}
@@ -235,7 +235,7 @@
transform: translateY(-50%);
width: 1px;
height: 100%;
- background-color: var(--clr-border-main);
+ background-color: var(--clr-border-2);
}
.textbox__count-btn {
@@ -250,7 +250,7 @@
&:hover,
&:focus {
outline: none;
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
color: var(--clr-scale-ntrl-40);
}
}
@@ -276,8 +276,8 @@
}
.textbox__readonly {
- background-color: var(--clr-bg-alt);
- border-color: var(--clr-border-main);
+ background-color: var(--clr-bg-2);
+ border-color: var(--clr-border-2);
}
.wide {
diff --git a/app/src/lib/components/ThemeSelector.svelte b/app/src/lib/components/ThemeSelector.svelte
index 81e6263f2..6fe42c368 100644
--- a/app/src/lib/components/ThemeSelector.svelte
+++ b/app/src/lib/components/ThemeSelector.svelte
@@ -67,7 +67,7 @@
.theme-card:hover {
& .theme-card__label {
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
}
}
@@ -76,7 +76,7 @@
width: 100%;
height: auto;
border-radius: var(--radius-m);
- border: 1px solid var(--clr-border-main);
+ border: 1px solid var(--clr-border-2);
overflow: hidden;
& img {
diff --git a/app/src/lib/components/Toggle.svelte b/app/src/lib/components/Toggle.svelte
index da1329ded..0607e04f7 100644
--- a/app/src/lib/components/Toggle.svelte
+++ b/app/src/lib/components/Toggle.svelte
@@ -39,7 +39,7 @@
width: calc(var(--size-24) + var(--size-2));
height: var(--size-16);
border-radius: var(--size-16);
- background-color: var(--clr-border-main);
+ background-color: var(--clr-border-2);
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
@@ -50,7 +50,7 @@
/* not checked */
&:hover,
&:focus {
- background-color: oklch(from var(--clr-border-main) var(--hover-state-ratio) c h);
+ background-color: oklch(from var(--clr-border-2) var(--hover-state-ratio) c h);
}
&:disabled {
diff --git a/app/src/lib/components/Welcome.svelte b/app/src/lib/components/Welcome.svelte
index 568de6047..42c957ff6 100644
--- a/app/src/lib/components/Welcome.svelte
+++ b/app/src/lib/components/Welcome.svelte
@@ -82,7 +82,7 @@
display: flex;
gap: var(--size-56);
padding: var(--size-28);
- background: var(--clr-bg-alt);
+ background: var(--clr-bg-2);
border-radius: var(--radius-m);
margin-top: var(--size-20);
}
diff --git a/app/src/lib/components/WelcomeAction.svelte b/app/src/lib/components/WelcomeAction.svelte
index 19eccf288..065d65feb 100644
--- a/app/src/lib/components/WelcomeAction.svelte
+++ b/app/src/lib/components/WelcomeAction.svelte
@@ -27,7 +27,7 @@
position: relative;
overflow: hidden;
border-radius: var(--radius-m);
- border: 1px solid var(--clr-border-main);
+ border: 1px solid var(--clr-border-2);
display: flex;
position: relative;
padding: var(--size-16);
@@ -38,18 +38,18 @@
transition:
background-color var(--transition-fast),
border-color var(--transition-fast);
- background-color: var(--clr-bg-main);
+ background-color: var(--clr-bg-1);
&:hover,
&:focus {
outline: none;
- background-color: oklch(from var(--clr-bg-muted) l c h / 0.5);
+ background-color: oklch(from var(--clr-bg-2) l c h / 0.5);
}
}
.loading {
pointer-events: none;
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
border: 1px solid transparent;
opacity: 0.5;
}
diff --git a/app/src/lib/components/contextmenu/ContextMenu.svelte b/app/src/lib/components/contextmenu/ContextMenu.svelte
index ffbd45789..8f8cb97b1 100644
--- a/app/src/lib/components/contextmenu/ContextMenu.svelte
+++ b/app/src/lib/components/contextmenu/ContextMenu.svelte
@@ -25,8 +25,8 @@
.context-menu {
display: flex;
flex-direction: column;
- background: var(--clr-bg-alt);
- border: 1px solid var(--clr-border-main);
+ background: var(--clr-bg-2);
+ border: 1px solid var(--clr-border-2);
border-radius: var(--radius-m);
box-shadow: var(--fx-shadow-s);
}
diff --git a/app/src/lib/components/contextmenu/ContextMenuItem.svelte b/app/src/lib/components/contextmenu/ContextMenuItem.svelte
index 6985df4d9..26f31c9c3 100644
--- a/app/src/lib/components/contextmenu/ContextMenuItem.svelte
+++ b/app/src/lib/components/contextmenu/ContextMenuItem.svelte
@@ -52,7 +52,7 @@
transition: background-color var(--transition-fast);
&:not(.disabled):hover {
transition: none;
- background-color: var(--clr-bg-muted-alt);
+ background-color: var(--clr-bg-3);
}
}
.label {
diff --git a/app/src/lib/components/contextmenu/ContextMenuSection.svelte b/app/src/lib/components/contextmenu/ContextMenuSection.svelte
index ca059406c..ef1625c63 100644
--- a/app/src/lib/components/contextmenu/ContextMenuSection.svelte
+++ b/app/src/lib/components/contextmenu/ContextMenuSection.svelte
@@ -12,7 +12,7 @@
padding: var(--size-8);
gap: var(--size-2);
&:not(:first-child) {
- border-top: 1px solid var(--clr-border-main);
+ border-top: 1px solid var(--clr-border-2);
}
}
diff --git a/app/src/lib/components/settings/ContentWrapper.svelte b/app/src/lib/components/settings/ContentWrapper.svelte
index 3ad2e00b9..77cd12f00 100644
--- a/app/src/lib/components/settings/ContentWrapper.svelte
+++ b/app/src/lib/components/settings/ContentWrapper.svelte
@@ -25,7 +25,7 @@
width: 100%;
height: 100%;
flex: 1;
- background-color: var(--clr-bg-alt);
+ background-color: var(--clr-bg-2);
}
.drag-region {
diff --git a/app/src/lib/components/settings/Section.svelte b/app/src/lib/components/settings/Section.svelte
index e174ad6cb..c9a596943 100644
--- a/app/src/lib/components/settings/Section.svelte
+++ b/app/src/lib/components/settings/Section.svelte
@@ -36,7 +36,7 @@
.settings-section {
display: flex;
flex-direction: column;
- gap: var(--size-16);
+ gap: var(--size-20);
}
.description {
@@ -45,7 +45,11 @@
gap: var(--size-10);
}
+ .description h2 {
+ color: var(--clr-text-1);
+ }
+
.description p {
- color: var(--clr-scale-ntrl-30);
+ color: var(--clr-text-2);
}
diff --git a/app/src/lib/components/settings/Sidebar.svelte b/app/src/lib/components/settings/Sidebar.svelte
index 739c42670..da3778d0a 100644
--- a/app/src/lib/components/settings/Sidebar.svelte
+++ b/app/src/lib/components/settings/Sidebar.svelte
@@ -137,8 +137,8 @@
flex-direction: column;
justify-content: space-between;
padding: calc(var(--size-36) + var(--size-4)) var(--size-14) var(--size-14) var(--size-14);
- border-right: 1px solid var(--clr-border-main);
- background-color: var(--clr-bg-main);
+ border-right: 1px solid var(--clr-border-2);
+ background-color: var(--clr-bg-1);
height: 100%;
width: 16rem;
}
@@ -189,7 +189,7 @@
&:not(.item_selected):hover {
transition: none;
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
}
& span {
@@ -198,7 +198,7 @@
}
.item_selected {
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
color: var(--clr-scale-ntrl-0);
}
@@ -223,13 +223,13 @@
justify-content: space-between;
padding: var(--size-16);
border-radius: var(--radius-m);
- border: 1px solid var(--clr-border-main);
- background-color: var(--clr-bg-main);
+ border: 1px solid var(--clr-border-2);
+ background-color: var(--clr-bg-1);
color: var(--clr-scale-ntrl-30);
transition: background-color var(--transition-fast);
&:hover {
- background-color: var(--clr-bg-muted);
+ background-color: var(--clr-bg-2);
}
}
diff --git a/app/src/routes/settings/ai/+page.svelte b/app/src/routes/settings/ai/+page.svelte
index a87da3eb2..6a53f0e80 100644
--- a/app/src/routes/settings/ai/+page.svelte
+++ b/app/src/routes/settings/ai/+page.svelte
@@ -296,7 +296,7 @@