From ca0a4cb92e8ad1dd5b197b59a17c6fbe7c6e5bfd Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Mon, 22 Apr 2024 12:12:27 +0200 Subject: [PATCH] tokens refactor (#3578) --- .../lib/assets/new-branch/bottom-sheet.svg | 2 +- app/src/lib/assets/new-branch/hand.svg | 2 +- .../lib/assets/new-branch/middle-sheet.svg | 2 +- app/src/lib/assets/new-branch/top-sheet.svg | 2 +- app/src/lib/components/AISettings.svelte | 2 +- app/src/lib/components/AccountLink.svelte | 4 +- .../lib/components/AnalyticsSettings.svelte | 2 +- app/src/lib/components/AppUpdater.svelte | 6 +- app/src/lib/components/AuthorIcons.svelte | 4 +- app/src/lib/components/BaseBranch.svelte | 2 +- app/src/lib/components/BaseBranchCard.svelte | 4 +- app/src/lib/components/Board.svelte | 6 +- app/src/lib/components/BranchCard.svelte | 6 +- app/src/lib/components/BranchHeader.svelte | 2 +- app/src/lib/components/BranchIcon.svelte | 2 +- app/src/lib/components/BranchItem.svelte | 2 +- app/src/lib/components/BranchLabel.svelte | 8 +- app/src/lib/components/BranchLane.svelte | 6 +- .../lib/components/BranchPreviewHeader.svelte | 2 +- app/src/lib/components/Branches.svelte | 2 +- app/src/lib/components/BranchesHeader.svelte | 2 +- app/src/lib/components/Button.svelte | 43 ++++--- app/src/lib/components/CardSection.svelte | 45 -------- app/src/lib/components/Checkbox.svelte | 6 +- app/src/lib/components/CommitCard.svelte | 16 +-- app/src/lib/components/CommitDialog.svelte | 8 +- app/src/lib/components/CommitList.svelte | 4 +- app/src/lib/components/CommitListItem.svelte | 6 +- app/src/lib/components/CredentialCheck.svelte | 4 +- .../lib/components/DecorativeSplitView.svelte | 6 +- app/src/lib/components/DomainButton.svelte | 4 +- app/src/lib/components/FileCard.svelte | 2 +- app/src/lib/components/FileCardHeader.svelte | 2 +- app/src/lib/components/FileListItem.svelte | 6 +- app/src/lib/components/Footer.svelte | 4 +- .../lib/components/GithubIntegration.svelte | 2 +- app/src/lib/components/HunkLine.svelte | 2 +- app/src/lib/components/HunkViewer.svelte | 4 +- app/src/lib/components/InfoMessage.svelte | 6 +- .../lib/components/LargeDiffMessage.svelte | 4 +- app/src/lib/components/ListItem.svelte | 6 +- app/src/lib/components/Modal.svelte | 6 +- app/src/lib/components/Navigation.svelte | 8 +- .../lib/components/NewBranchDropZone.svelte | 2 +- app/src/lib/components/Overlay.svelte | 4 +- app/src/lib/components/PassphraseBox.svelte | 2 +- app/src/lib/components/ProjectsPopup.svelte | 4 +- app/src/lib/components/RadioButton.svelte | 4 +- .../lib/components/RemoteBranchPreview.svelte | 2 +- .../lib/components/ScrollableContainer.svelte | 2 +- app/src/lib/components/SectionCard.svelte | 10 +- .../components/SegmentControl/Segment.svelte | 10 +- app/src/lib/components/Select.svelte | 6 +- app/src/lib/components/SelectItem.svelte | 4 +- app/src/lib/components/SetupFeature.svelte | 4 +- app/src/lib/components/Tag.svelte | 10 +- app/src/lib/components/TextBox.svelte | 12 +- app/src/lib/components/ThemeSelector.svelte | 4 +- app/src/lib/components/Toggle.svelte | 4 +- app/src/lib/components/Welcome.svelte | 2 +- app/src/lib/components/WelcomeAction.svelte | 8 +- .../components/contextmenu/ContextMenu.svelte | 4 +- .../contextmenu/ContextMenuItem.svelte | 2 +- .../contextmenu/ContextMenuSection.svelte | 2 +- .../components/settings/ContentWrapper.svelte | 2 +- .../lib/components/settings/Section.svelte | 8 +- .../lib/components/settings/Sidebar.svelte | 14 +-- app/src/routes/settings/ai/+page.svelte | 2 +- app/src/styles/card.css | 8 +- app/src/styles/main.postcss | 8 +- app/src/styles/text-input.css | 10 +- app/src/styles/tokens.css | 108 ++++++++++-------- 72 files changed, 247 insertions(+), 279 deletions(-) delete mode 100644 app/src/lib/components/CardSection.svelte 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 @@