gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-09-20 00:27:17 +03:00
Code Issues Packages Projects Releases Wiki Activity

tokens refactor (#3578)

Browse Source
This commit is contained in:
Pavel Laptev 2024-04-22 12:12:27 +02:00 committed by GitHub
parent 31ce4574bd
commit ca0a4cb92e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
72 changed files with 247 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/lib/assets/new-branch/bottom-sheet.svg
View File

@ -1,3 +1,3 @@
<svg width="40" height="37" viewBox="0 0 40 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28 5.00024V13.0002H36M1.54736 0.955566V36.1593H39.327V11.6884L28.671 0.955566H1.54736Z" fill="var(--clr-bg-alt)" stroke="var(--clr-scale-ntrl-60)" stroke-width="1.2"/>
<path d="M28 5.00024V13.0002H36M1.54736 0.955566V36.1593H39.327V11.6884L28.671 0.955566H1.54736Z" fill="var(--clr-bg-2)" stroke="var(--clr-scale-ntrl-60)" stroke-width="1.2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 281 B

After

Width:  |  Height:  |  Size: 279 B

2
app/src/lib/assets/new-branch/hand.svg
View File

@ -1,4 +1,4 @@
<svg width="34" height="36" viewBox="0 0 34 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.83842 14.1071C0.904406 7.55246 7.00791 2.99724 10.2239 5.92086C11.1011 1.53539 15.4867 0.950644 17.2409 3.58174C19.5799 0.0732219 23.6731 0.65808 25.135 3.28948C29.2841 -0.149694 32.1158 4.75945 32.4443 8.84436C32.7415 12.5411 32.9569 18.9244 30.2923 24.2381C31.7807 25.113 32.5249 26.4026 32.5249 27.8153C32.5249 31.0332 28.2344 33.393 23.5149 34.2511C18.7954 35.1091 12.6968 35.3236 11.7162 31.8913C11.4055 30.8041 11.5166 29.6052 12.151 28.4465C4.86586 25.8425 1.46632 20.3539 1.46631 17.7204C1.4663 14.9316 3.26415 13.6779 5.83842 14.1071Z" fill="var(--clr-bg-alt)"/>
<path d="M5.83842 14.1071C0.904406 7.55246 7.00791 2.99724 10.2239 5.92086C11.1011 1.53539 15.4867 0.950644 17.2409 3.58174C19.5799 0.0732219 23.6731 0.65808 25.135 3.28948C29.2841 -0.149694 32.1158 4.75945 32.4443 8.84436C32.7415 12.5411 32.9569 18.9244 30.2923 24.2381C31.7807 25.113 32.5249 26.4026 32.5249 27.8153C32.5249 31.0332 28.2344 33.393 23.5149 34.2511C18.7954 35.1091 12.6968 35.3236 11.7162 31.8913C11.4055 30.8041 11.5166 29.6052 12.151 28.4465C4.86586 25.8425 1.46632 20.3539 1.46631 17.7204C1.4663 14.9316 3.26415 13.6779 5.83842 14.1071Z" fill="var(--clr-bg-2)"/>
<path d="M8.17765 17.0307C4.08445 12.9375 2.91497 8.55181 5.25393 5.92058C7.12515 3.81554 10.3011 5.33572 11.3937 7.08995M10.3022 5.92058C10.5166 4.45861 11.2183 2.82138 12.8556 2.11969C14.4929 1.418 16.364 1.82727 18.4107 5.04335M17.5335 3.5815C18.1183 2.41201 19.1123 1.18401 20.7496 0.950086C23.0886 0.615904 24.8428 2.70437 25.7199 4.45869M25.0221 3.28921C25.4276 2.4121 27.5978 1.69707 28.936 2.11969C34.4911 3.87399 33.7161 17.8605 30.5 24.0002M5.54631 14.107C4.08439 13.8146 1.74563 14.6917 1.45316 17.0307C1.17665 19.242 4.03621 24.8507 12.2554 28.421M13.2649 11.4996C14.0736 12.7703 14.7171 14.701 14.9334 16.0046M19.7006 10.2125C20.2306 11.5208 20.5093 13.612 20.5093 14.9156M25.8724 9.55248C26.3014 10.8396 26.3014 13.1994 26.1363 14.503M27.1818 23.2229C30.7439 23.7393 32.5249 25.6302 32.5249 27.8157C32.5249 31.0336 28.2344 33.3933 23.5149 34.2514C18.7954 35.1095 12.6968 35.324 11.7162 31.8916C11.0919 29.7066 12.1709 27.0701 15.7793 25.2153C17.1306 24.5207 18.8365 23.9358 20.9406 23.5252M27 28.5C24.5 27.8157 20.4 28.1 18 30.5" stroke="var(--clr-scale-ntrl-60)" stroke-width="1.2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

2
app/src/lib/assets/new-branch/middle-sheet.svg
View File

@ -1,3 +1,3 @@
<svg width="40" height="35" viewBox="0 0 40 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.640625 1.5H27.4134L38.6406 12.2558V33.5H0.640625V1.5Z" fill="var(--clr-bg-alt)" stroke="var(--clr-scale-ntrl-60)" stroke-width="1.2"/>
<path d="M0.640625 1.5H27.4134L38.6406 12.2558V33.5H0.640625V1.5Z" fill="var(--clr-bg-2)" stroke="var(--clr-scale-ntrl-60)" stroke-width="1.2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 250 B

After

Width:  |  Height:  |  Size: 248 B

2
app/src/lib/assets/new-branch/top-sheet.svg
View File

@ -1,3 +1,3 @@
<svg width="40" height="47" viewBox="0 0 40 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.8714 4.45041V14.2228H35.8653M0.6875 0.654297V46.1616H38.4671V13.3319L25.2871 0.654297H0.6875Z" fill="var(--clr-bg-alt)" stroke="var(--clr-scale-ntrl-60)" stroke-width="1.2"/>
<path d="M24.8714 4.45041V14.2228H35.8653M0.6875 0.654297V46.1616H38.4671V13.3319L25.2871 0.654297H0.6875Z" fill="var(--clr-bg-2)" stroke="var(--clr-scale-ntrl-60)" stroke-width="1.2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 291 B

After

Width:  |  Height:  |  Size: 289 B

2
app/src/lib/components/AISettings.svelte
View File

@ -293,7 +293,7 @@
<style>
.ai-settings__text {
color: var(--clr-scale-ntrl-40);
color: var(--clr-text-2);
margin-bottom: var(--size-12);
}

4
app/src/lib/components/AccountLink.svelte
View File

@ -41,7 +41,7 @@
overflow-x: hidden;
gap: var(--size-8);
height: var(--size-control-cta);
height: var(--size-cta);
padding: var(--size-6) var(--size-8);
border-radius: var(--radius-m);
@ -64,7 +64,7 @@
}
&:hover {
background-color: var(--clr-bg-muted);
background-color: var(--clr-bg-2);
color: var(--clr-scale-ntrl-40);
}
}

2
app/src/lib/components/AnalyticsSettings.svelte
View File

@ -81,7 +81,7 @@
}
.analytics-settings__text {
color: var(--clr-scale-ntrl-40);
color: var(--clr-text-2);
}
.analytics-settings__actions {

6
app/src/lib/components/AppUpdater.svelte
View File

@ -165,8 +165,8 @@
bottom: var(--size-12);
left: var(--size-12);
padding: var(--size-24);
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);
border-radius: var(--radius-m);
}
@ -191,7 +191,7 @@
flex-direction: column;
align-items: center;
height: var(--size-control-button);
height: var(--size-button);
width: 100%;
border-radius: var(--radius-m);

4
app/src/lib/components/AuthorIcons.svelte
View File

@ -33,10 +33,10 @@
justify-content: center;
height: var(--size-16);
padding: 0 var(--size-4);
background-color: var(--clr-bg-main);
background-color: var(--clr-bg-1);
border-radius: var(--size-16);
margin-left: calc(var(--size-4) * -1);
border: 1px solid var(--clr-border-main);
border: 1px solid var(--clr-border-2);
& span {
color: var(--clr-scale-ntrl-0);

2
app/src/lib/components/BaseBranch.svelte
View File

@ -147,7 +147,7 @@
align-items: center;
gap: var(--size-8);
padding: var(--size-14);
background-color: var(--clr-bg-alt);
background-color: var(--clr-bg-2);
border-radius: var(--radius-m);
margin-bottom: var(--size-6);
}

4
app/src/lib/components/BaseBranchCard.svelte
View File

@ -83,7 +83,7 @@
.base-branch-card:not(.selected):hover,
.base-branch-card:not(.selected):focus,
.selected {
background-color: var(--clr-bg-muted);
background-color: var(--clr-bg-2);
}
.icon {
@ -98,7 +98,7 @@
gap: var(--size-8);
}
.trunk-label {
color: var(--clr-scale-ntrl-0);
color: var(--clr-text-1);
}
.row_1 {
display: flex;

6
app/src/lib/components/Board.svelte
View File

@ -237,8 +237,8 @@
.empty-board {
display: flex;
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);
border-radius: var(--radius-l);
width: 100%;
gap: var(--size-48);
@ -367,7 +367,7 @@
overflow: hidden;
&:hover {
background-color: var(--clr-bg-alt);
background-color: var(--clr-bg-2);
}
& span {

6
app/src/lib/components/BranchCard.svelte
View File

@ -291,7 +291,7 @@
direction="right"
minWidth={320}
sticky
defaultLineColor={$fileIdSelection.length == 1 ? 'transparent' : 'var(--clr-border-main)'}
defaultLineColor={$fileIdSelection.length == 1 ? 'transparent' : 'var(--clr-border-2)'}
on:width={(e) => {
laneWidth = e.detail / (16 * $userSettings.zoom);
lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl
@ -368,7 +368,7 @@
flex-direction: column;
align-items: center;
color: var(--clr-scale-ntrl-60);
background: var(--clr-bg-main);
background: var(--clr-bg-1);
justify-content: center;
padding: var(--size-48) 0;
border-radius: var(--radius-m);
@ -424,6 +424,6 @@
flex-direction: column;
padding: var(--size-12);
height: 100%;
border-right: 1px solid var(--clr-border-main);
border-right: 1px solid var(--clr-border-2);
}
</style>

2
app/src/lib/components/BranchHeader.svelte
View File

@ -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);

2
app/src/lib/components/BranchIcon.svelte
View File

@ -68,7 +68,7 @@
border-radius: var(--radius-s);
& path {
fill: var(--clr-bg-main);
fill: var(--clr-bg-1);
}
}

2
app/src/lib/components/BranchItem.svelte
View File

@ -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;
}
</style>

8
app/src/lib/components/BranchLabel.svelte
View File

@ -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);
}
}
</style>

6
app/src/lib/components/BranchLane.svelte
View File

@ -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 {

2
app/src/lib/components/BranchPreviewHeader.svelte
View File

@ -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);

2
app/src/lib/components/Branches.svelte
View File

@ -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;

2
app/src/lib/components/BranchesHeader.svelte
View File

@ -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;

43
app/src/lib/components/Button.svelte
View File

@ -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);
}
}

45
app/src/lib/components/CardSection.svelte
View File

@ -1,45 +0,0 @@
<script lang="ts">
export let disabled = false;
</script>
<div class="section" class:disabled>
<div class="header">
<p class="text-base-14 text-semibold title"><slot name="label" /></p>
<p class="text-base-13 description"><slot name="description" /></p>
</div>
<div class="text-base-13 content">
<slot />
</div>
</div>
<style lang="postcss">
.section {
display: flex;
flex-direction: column;
gap: var(--size-16);
}
.header {
display: flex;
flex-direction: column;
gap: var(--size-4);
}
.title {
color: var(--clr-scale-ntrl-40);
}
.description {
color: var(--clr-scale-ntrl-50);
padding: var(--size-4) 0;
}
.content {
display: flex;
align-items: center;
color: var(--clr-scale-ntrl-40);
border-radius: var(--radius-m);
padding: 0 var(--size-16);
gap: var(--size-8);
}
.disabled {
pointer-events: none;
opacity: 0.6;
}
</style>

6
app/src/lib/components/Checkbox.svelte
View File

@ -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: '';

16
app/src/lib/components/CommitCard.svelte
View File

@ -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);
}
</style>

8
app/src/lib/components/CommitDialog.svelte
View File

@ -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);
}
</style>

4
app/src/lib/components/CommitList.svelte
View File

@ -61,9 +61,9 @@
<style lang="postcss">
.commit-list {
&.upstream {
background-color: var(--clr-bg-alt);
background-color: var(--clr-bg-2);
}
background-color: var(--clr-bg-main);
background-color: var(--clr-bg-1);
display: flex;
flex-direction: column;
position: relative;

6
app/src/lib/components/CommitListItem.svelte
View File

@ -143,7 +143,7 @@
left: 0;
height: 100%;
width: 1px;
background-color: var(--clr-border-main);
background-color: var(--clr-border-2);
}
.connector {
width: 1rem;
@ -151,8 +151,8 @@
position: absolute;
top: 0;
left: 0;
border-bottom: 1px solid var(--clr-border-main);
border-left: 1px solid var(--clr-border-main);
border-bottom: 1px solid var(--clr-border-2);
border-left: 1px solid var(--clr-border-2);
border-radius: 0 0 0 0.5rem;
}

4
app/src/lib/components/CredentialCheck.svelte
View File

@ -142,9 +142,9 @@
.disclaimer {
color: var(--clr-scale-ntrl-50);
background: var(--clr-bg-alt);
background: var(--clr-bg-2);
border-radius: var(--radius-m);
background: var(--clr-bg-alt);
background: var(--clr-bg-2);
padding: var(--size-10) var(--size-12);
}
</style>

6
app/src/lib/components/DecorativeSplitView.svelte
View File

@ -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;
}

4
app/src/lib/components/DomainButton.svelte
View File

@ -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);
}
</style>

2
app/src/lib/components/FileCard.svelte
View File

@ -80,7 +80,7 @@
}
.file-card {
background: var(--clr-bg-main);
background: var(--clr-bg-1);
overflow: hidden;
display: flex;
flex-direction: column;

2
app/src/lib/components/FileCardHeader.svelte
View File

@ -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;

6
app/src/lib/components/FileListItem.svelte
View File

@ -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);

4
app/src/lib/components/Footer.svelte
View File

@ -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 {

2
app/src/lib/components/GithubIntegration.svelte
View File

@ -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;
}
</style>

2
app/src/lib/components/HunkLine.svelte
View File

@ -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);
}

4
app/src/lib/components/HunkViewer.svelte
View File

@ -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);
}

6
app/src/lib/components/InfoMessage.svelte
View File

@ -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 {

4
app/src/lib/components/LargeDiffMessage.svelte
View File

@ -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);
}
</style>

6
app/src/lib/components/ListItem.svelte
View File

@ -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;

6
app/src/lib/components/Modal.svelte
View File

@ -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 {

8
app/src/lib/components/Navigation.svelte
View File

@ -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:

2
app/src/lib/components/NewBranchDropZone.svelte
View File

@ -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);

4
app/src/lib/components/Overlay.svelte
View File

@ -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);
}

2
app/src/lib/components/PassphraseBox.svelte
View File

@ -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 {

4
app/src/lib/components/ProjectsPopup.svelte
View File

@ -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);
}

4
app/src/lib/components/RadioButton.svelte
View File

@ -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),

2
app/src/lib/components/RemoteBranchPreview.svelte
View File

@ -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 {

2
app/src/lib/components/ScrollableContainer.svelte
View File

@ -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 */

10
app/src/lib/components/SectionCard.svelte
View File

@ -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;
}
}

10
app/src/lib/components/SegmentControl/Segment.svelte
View File

@ -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);
}
</style>

6
app/src/lib/components/Select.svelte
View File

@ -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);
}
}

4
app/src/lib/components/SelectItem.svelte
View File

@ -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 {

4
app/src/lib/components/SetupFeature.svelte
View File

@ -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);
}
</style>

10
app/src/lib/components/Tag.svelte
View File

@ -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);
}

12
app/src/lib/components/TextBox.svelte
View File

@ -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 {

4
app/src/lib/components/ThemeSelector.svelte
View File

@ -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 {

4
app/src/lib/components/Toggle.svelte
View File

@ -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 {

2
app/src/lib/components/Welcome.svelte
View File

@ -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);
}

8
app/src/lib/components/WelcomeAction.svelte
View File

@ -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;
}

4
app/src/lib/components/contextmenu/ContextMenu.svelte
View File

@ -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);
}

2
app/src/lib/components/contextmenu/ContextMenuItem.svelte
View File

@ -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 {

2
app/src/lib/components/contextmenu/ContextMenuSection.svelte
View File

@ -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);
}
}
</style>

2
app/src/lib/components/settings/ContentWrapper.svelte
View File

@ -25,7 +25,7 @@
width: 100%;
height: 100%;
flex: 1;
background-color: var(--clr-bg-alt);
background-color: var(--clr-bg-2);
}
.drag-region {

8
app/src/lib/components/settings/Section.svelte
View File

@ -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);
}
</style>

14
app/src/lib/components/settings/Sidebar.svelte
View File

@ -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);
}
}
</style>

2
app/src/routes/settings/ai/+page.svelte
View File

@ -296,7 +296,7 @@
<style>
.ai-settings__text {
color: var(--clr-scale-ntrl-40);
color: var(--clr-text-2);
margin-bottom: var(--size-12);
}

8
app/src/styles/card.css
View File

@ -1,9 +1,9 @@
.card {
display: flex;
flex-direction: column;
border: 1px solid var(--clr-border-main);
border: 1px solid var(--clr-border-2);
border-radius: var(--radius-m);
background: var(--clr-bg-main);
background: var(--clr-bg-1);
}
.card__header {
@ -11,7 +11,7 @@
justify-content: space-between;
padding: var(--size-16);
gap: var(--size-8);
border-bottom: 1px solid var(--clr-border-main);
border-bottom: 1px solid var(--clr-border-2);
}
.card__title {
@ -29,5 +29,5 @@
gap: var(--size-6);
padding: var(--size-16);
justify-content: space-between;
border-top: 1px solid var(--clr-border-main);
border-top: 1px solid var(--clr-border-2);
}

8
app/src/styles/main.postcss
View File

@ -54,7 +54,7 @@ body {
overflow-y: hidden;
padding: 0;
color: var(--clr-scale-ntrl-0);
background-color: var(--clr-bg-alt);
background-color: var(--clr-bg-2);
/* optimise font rendering */
-webkit-font-smoothing: antialiased;
@ -167,14 +167,14 @@ dialog::backdrop {
.locked-file-animation {
--locked-color: oklch(from var(--clr-scale-warn-50) l c h / 0.2);
border: 1px solid var(--clr-bg-main);
border: 1px solid var(--clr-bg-1);
animation: locked-file-animation 1.4s ease-out forwards;
}
@keyframes locked-file-animation {
0% {
transform: translateX(-3px);
background-color: var(--clr-bg-main);
background-color: var(--clr-bg-1);
}
10% {
transform: translateX(3px);
@ -192,6 +192,6 @@ dialog::backdrop {
transform: translateX(0);
}
100% {
background-color: var(--clr-bg-main);
background-color: var(--clr-bg-1);
}
}

10
app/src/styles/text-input.css
View File

@ -1,8 +1,8 @@
.text-input {
padding: var(--size-4) var(--size-10);
color: var(--clr-scale-ntrl-0);
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);
border-radius: var(--radius-s);
transition: border-color var(--transition-fast);
@ -11,12 +11,12 @@
}
&:hover {
border-color: oklch(from var(--clr-border-main) var(--hover-state-ratio) c h);
border-color: oklch(from var(--clr-border-2) var(--hover-state-ratio) c h);
}
&:focus,
&:focus-within {
border-color: oklch(from var(--clr-border-main) var(--active-state-ratio) c h);
border-color: oklch(from var(--clr-border-2) var(--active-state-ratio) c h);
outline: none;
}
@ -27,6 +27,6 @@
&:disabled {
color: var(--clr-scale-ntrl-60);
border-color: var(--clr-scale-ntrl-70);
background-color: var(--clr-bg-alt);
background-color: var(--clr-bg-2);
}
}

108
app/src/styles/tokens.css
View File

@ -5,13 +5,12 @@
*/
:root {
--clr-bg-alt: var(--clr-core-ntrl-95);
--clr-bg-main: var(--clr-core-ntrl-100);
--clr-bg-muted: var(--clr-core-ntrl-95);
--clr-bg-muted-alt: var(--clr-core-ntrl-90);
--clr-bg-on-muted: var(--clr-core-ntrl-60);
--clr-border-main: var(--clr-core-ntrl-70);
--clr-border-muted: var(--clr-core-ntrl-80);
--clr-bg-1: var(--clr-core-ntrl-100);
--clr-bg-2: var(--clr-core-ntrl-95);
--clr-bg-3: var(--clr-core-ntrl-90);
--clr-border-2: var(--clr-core-ntrl-60);
--clr-border-2: var(--clr-core-ntrl-70);
--clr-border-3: var(--clr-core-ntrl-80);
--clr-commit-local: var(--clr-core-pop-50);
--clr-commit-remote: var(--clr-core-ntrl-50);
--clr-commit-shadow: var(--clr-core-ntrl-60);
@ -27,16 +26,16 @@
--clr-core-err-80: #fbe5e7;
--clr-core-err-90: #fdf1f4;
--clr-core-err-95: #fffafc;
--clr-core-ntrl-0: #000000;
--clr-core-ntrl-5: #171717;
--clr-core-ntrl-0: #0a0a0a;
--clr-core-ntrl-5: #1f1f1e;
--clr-core-ntrl-10: #292929;
--clr-core-ntrl-20: #333333;
--clr-core-ntrl-30: #4d4c4c;
--clr-core-ntrl-40: #595958;
--clr-core-ntrl-20: #363635;
--clr-core-ntrl-30: #4d4d4c;
--clr-core-ntrl-40: #616160;
--clr-core-ntrl-50: #838381;
--clr-core-ntrl-60: #bcbbb9;
--clr-core-ntrl-70: #d0d0cd;
--clr-core-ntrl-80: #e4e4e2;
--clr-core-ntrl-70: #d2d2d0;
--clr-core-ntrl-80: #e2e1df;
--clr-core-ntrl-90: #ebebea;
--clr-core-ntrl-95: #f5f5f4;
--clr-core-ntrl-100: #ffffff;
@ -87,8 +86,6 @@
--clr-illustration-bg: #d6f0ee;
--clr-illustration-fill: #fcfcf1;
--clr-illustration-outline: #475050;
--clr-on-bg: var(--clr-core-ntrl-5);
--clr-on-bg-alt: var(--clr-core-ntrl-50);
--clr-overlay-bg: #d6d6d666;
--clr-scale-err-5: var(--clr-core-err-5);
--clr-scale-err-10: var(--clr-core-err-10);
@ -158,26 +155,34 @@
--clr-scale-warn-80: var(--clr-core-warn-80);
--clr-scale-warn-90: var(--clr-core-warn-90);
--clr-scale-warn-95: var(--clr-core-warn-95);
--clr-theme-err-container: var(--clr-core-err-90);
--clr-text-1: var(--clr-core-ntrl-5);
--clr-text-2: var(--clr-core-ntrl-50);
--clr-text-3: var(--clr-core-ntrl-60);
--clr-theme-err-bg: var(--clr-core-err-90);
--clr-theme-err-element: var(--clr-core-err-50);
--clr-theme-err-on-container: var(--clr-core-err-30);
--clr-theme-err-on-element: var(--clr-core-err-95);
--clr-theme-pop-container: var(--clr-core-pop-90);
--clr-theme-err-on-soft: var(--clr-core-err-30);
--clr-theme-err-soft: var(--clr-core-err-80);
--clr-theme-pop-bg: var(--clr-core-pop-90);
--clr-theme-pop-element: var(--clr-core-pop-50);
--clr-theme-pop-on-container: var(--clr-core-pop-30);
--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
--clr-theme-purp-container: var(--clr-core-purp-90);
--clr-theme-pop-on-soft: var(--clr-core-pop-30);
--clr-theme-pop-soft: var(--clr-core-pop-80);
--clr-theme-purp-bg: var(--clr-core-purp-90);
--clr-theme-purp-element: var(--clr-core-purp-50);
--clr-theme-purp-on-container: var(--clr-core-purp-30);
--clr-theme-purp-on-element: var(--clr-core-purp-95);
--clr-theme-succ-container: var(--clr-core-succ-90);
--clr-theme-purp-on-soft: var(--clr-core-purp-30);
--clr-theme-purp-soft: var(--clr-core-purp-80);
--clr-theme-succ-bg: var(--clr-core-succ-90);
--clr-theme-succ-element: var(--clr-core-succ-50);
--clr-theme-succ-on-container: var(--clr-core-succ-30);
--clr-theme-succ-on-element: var(--clr-core-succ-95);
--clr-theme-warn-container: var(--clr-core-warn-90);
--clr-theme-succ-on-soft: var(--clr-core-succ-30);
--clr-theme-succ-soft: var(--clr-core-succ-80);
--clr-theme-warn-bg: var(--clr-core-warn-90);
--clr-theme-warn-element: var(--clr-core-warn-50);
--clr-theme-warn-on-container: var(--clr-core-warn-30);
--clr-theme-warn-on-element: var(--clr-core-warn-95);
--clr-theme-warn-on-soft: var(--clr-core-warn-30);
--clr-theme-warn-soft: var(--clr-core-warn-80);
--fx-shadow-l: 0 10px 40px 0 #0000001a;
--fx-shadow-m: 0 6px 30px 0 #00000014;
--fx-shadow-s: 0 4px 14px 0 #0000000f;
@ -204,21 +209,20 @@
--size-64: 4rem;
--size-80: 5rem;
--size-96: 6rem;
--size-button: 1.75rem;
--size-card-padding: 0.875rem;
--size-control-button: 1.75rem;
--size-control-cta: 2rem;
--size-control-icon: 1rem;
--size-control-tag: 1.375rem;
--size-cta: 2rem;
--size-icon: 1rem;
--size-tag: 1.375rem;
}
:root.dark {
--clr-bg-alt: var(--clr-core-ntrl-5);
--clr-bg-main: var(--clr-core-ntrl-10);
--clr-bg-muted: var(--clr-core-ntrl-20);
--clr-bg-muted-alt: var(--clr-core-ntrl-10);
--clr-bg-on-muted: var(--clr-core-ntrl-50);
--clr-border-main: var(--clr-core-ntrl-40);
--clr-border-muted: var(--clr-core-ntrl-30);
--clr-bg-1: var(--clr-core-ntrl-10);
--clr-bg-2: var(--clr-core-ntrl-5);
--clr-bg-3: var(--clr-core-ntrl-0);
--clr-border-2: var(--clr-core-ntrl-40);
--clr-border-2: var(--clr-core-ntrl-30);
--clr-border-3: var(--clr-core-ntrl-20);
--clr-commit-local: var(--clr-core-pop-50);
--clr-commit-remote: var(--clr-core-ntrl-50);
--clr-commit-shadow: var(--clr-core-ntrl-40);
@ -226,8 +230,6 @@
--clr-illustration-bg: #174543;
--clr-illustration-fill: #95b5aa;
--clr-illustration-outline: #142222;
--clr-on-bg: var(--clr-core-ntrl-100);
--clr-on-bg-alt: var(--clr-core-ntrl-50);
--clr-overlay-bg: #00000059;
--clr-scale-err-5: var(--clr-core-err-95);
--clr-scale-err-10: var(--clr-core-err-90);
@ -297,24 +299,32 @@
--clr-scale-warn-80: var(--clr-core-warn-20);
--clr-scale-warn-90: var(--clr-core-warn-10);
--clr-scale-warn-95: var(--clr-core-warn-5);
--clr-theme-err-container: var(--clr-core-err-20);
--clr-text-1: var(--clr-core-ntrl-95);
--clr-text-2: var(--clr-core-ntrl-50);
--clr-text-3: var(--clr-core-ntrl-40);
--clr-theme-err-bg: var(--clr-core-err-20);
--clr-theme-err-element: var(--clr-core-err-40);
--clr-theme-err-on-container: var(--clr-core-err-80);
--clr-theme-err-on-element: var(--clr-core-err-90);
--clr-theme-pop-container: var(--clr-core-pop-20);
--clr-theme-err-on-soft: var(--clr-core-err-80);
--clr-theme-err-soft: var(--clr-core-err-20);
--clr-theme-pop-bg: var(--clr-core-pop-20);
--clr-theme-pop-element: var(--clr-core-pop-40);
--clr-theme-pop-on-container: var(--clr-core-pop-80);
--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
--clr-theme-purp-container: var(--clr-core-purp-20);
--clr-theme-pop-on-soft: var(--clr-core-pop-80);
--clr-theme-pop-soft: var(--clr-core-pop-20);
--clr-theme-purp-bg: var(--clr-core-purp-20);
--clr-theme-purp-element: var(--clr-core-purp-40);
--clr-theme-purp-on-container: var(--clr-core-purp-80);
--clr-theme-purp-on-element: var(--clr-core-purp-90);
--clr-theme-succ-container: var(--clr-core-succ-20);
--clr-theme-purp-on-soft: var(--clr-core-purp-80);
--clr-theme-purp-soft: var(--clr-core-purp-20);
--clr-theme-succ-bg: var(--clr-core-succ-20);
--clr-theme-succ-element: var(--clr-core-succ-40);
--clr-theme-succ-on-container: var(--clr-core-succ-80);
--clr-theme-succ-on-element: var(--clr-core-succ-90);
--clr-theme-warn-container: var(--clr-core-warn-20);
--clr-theme-succ-on-soft: var(--clr-core-succ-80);
--clr-theme-succ-soft: var(--clr-core-succ-20);
--clr-theme-warn-bg: var(--clr-core-warn-20);
--clr-theme-warn-element: var(--clr-core-warn-40);
--clr-theme-warn-on-container: var(--clr-core-warn-80);
--clr-theme-warn-on-element: var(--clr-core-warn-90);
--clr-theme-warn-on-soft: var(--clr-core-warn-80);
--clr-theme-warn-soft: var(--clr-core-warn-20);
}