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"> <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> </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"> <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"/> <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> </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"> <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> </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"> <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> </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> <style>
.ai-settings__text { .ai-settings__text {
color: var(--clr-scale-ntrl-40); color: var(--clr-text-2);
margin-bottom: var(--size-12); margin-bottom: var(--size-12);
} }

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

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

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

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

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

@ -165,8 +165,8 @@
bottom: var(--size-12); bottom: var(--size-12);
left: var(--size-12); left: var(--size-12);
padding: var(--size-24); padding: var(--size-24);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
border-radius: var(--radius-m); border-radius: var(--radius-m);
} }
@ -191,7 +191,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
height: var(--size-control-button); height: var(--size-button);
width: 100%; width: 100%;
border-radius: var(--radius-m); border-radius: var(--radius-m);

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

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

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

@ -147,7 +147,7 @@
align-items: center; align-items: center;
gap: var(--size-8); gap: var(--size-8);
padding: var(--size-14); padding: var(--size-14);
background-color: var(--clr-bg-alt); background-color: var(--clr-bg-2);
border-radius: var(--radius-m); border-radius: var(--radius-m);
margin-bottom: var(--size-6); 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):hover,
.base-branch-card:not(.selected):focus, .base-branch-card:not(.selected):focus,
.selected { .selected {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
} }
.icon { .icon {
@ -98,7 +98,7 @@
gap: var(--size-8); gap: var(--size-8);
} }
.trunk-label { .trunk-label {
color: var(--clr-scale-ntrl-0); color: var(--clr-text-1);
} }
.row_1 { .row_1 {
display: flex; display: flex;

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

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

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

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

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

@ -281,7 +281,7 @@
.header__actions { .header__actions {
display: flex; display: flex;
gap: var(--size-4); gap: var(--size-4);
background: var(--clr-bg-alt); background: var(--clr-bg-2);
padding: var(--size-14); padding: var(--size-14);
justify-content: space-between; justify-content: space-between;
border-radius: 0 0 var(--radius-m) var(--radius-m); 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); border-radius: var(--radius-s);
& path { & 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):hover,
.branch:not(.selected):focus, .branch:not(.selected):focus,
.selected { .selected {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
transition: none; transition: none;
} }
</style> </style>

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

@ -81,18 +81,18 @@
width: 100%; width: 100%;
border-radius: var(--radius-s); border-radius: var(--radius-s);
color: var(--clr-scale-ntrl-0); color: var(--clr-scale-ntrl-0);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
outline: none; outline: none;
/* not readonly */ /* not readonly */
&:not([disabled]):hover { &:not([disabled]):hover {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
} }
&:not([disabled]):focus { &:not([disabled]):focus {
outline: none; outline: none;
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
border-color: var(--clr-border-main); border-color: var(--clr-border-2);
} }
} }
</style> </style>

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

@ -117,7 +117,7 @@
viewport={rsViewport} viewport={rsViewport}
direction="right" direction="right"
minWidth={240} minWidth={240}
defaultLineColor="var(--clr-border-main)" defaultLineColor="var(--clr-border-2)"
on:width={(e) => { on:width={(e) => {
fileWidth = e.detail / (16 * $userSettings.zoom); fileWidth = e.detail / (16 * $userSettings.zoom);
lscache.set(fileWidthKey + branch.id, fileWidth, 7 * 1440); // 7 day ttl lscache.set(fileWidthKey + branch.id, fileWidth, 7 * 1440); // 7 day ttl
@ -136,12 +136,12 @@
flex-shrink: 0; flex-shrink: 0;
user-select: none; /* here because of user-select draggable interference in board */ user-select: none; /* here because of user-select draggable interference in board */
position: relative; position: relative;
--target-branch-background: var(--clr-bg-alt); --target-branch-background: var(--clr-bg-2);
background-color: var(--target-branch-background); background-color: var(--target-branch-background);
} }
.target-branch { .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 { .file-preview {

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

@ -147,7 +147,7 @@
.header__actions { .header__actions {
display: flex; display: flex;
gap: var(--size-4); gap: var(--size-4);
background: var(--clr-bg-alt); background: var(--clr-bg-2);
padding: var(--size-14); padding: var(--size-14);
justify-content: flex-end; justify-content: flex-end;
border-radius: 0 0 var(--radius-m) var(--radius-m); 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; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-top: 1px solid var(--clr-border-main); border-top: 1px solid var(--clr-border-2);
} }
.content { .content {
display: flex; display: flex;

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

@ -60,7 +60,7 @@
} }
.filter-popup-menu { .filter-popup-menu {
position: absolute; position: absolute;
top: calc(var(--size-control-button) + var(--size-4)); top: calc(var(--size-button) + var(--size-4));
right: 0; right: 0;
z-index: var(--z-floating); z-index: var(--z-floating);
min-width: 10rem; min-width: 10rem;

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

@ -102,7 +102,7 @@
&:disabled { &:disabled {
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
/* opacity: 0.5; */ opacity: 0.7;
&.neutral.solid, &.neutral.solid,
&.pop.solid, &.pop.solid,
@ -110,9 +110,8 @@
&.error.solid, &.error.solid,
&.warning.solid, &.warning.solid,
&.purple.solid { &.purple.solid {
/* color: var(--clr-bg-on-muted); */ --btn-clr: var(--clr-text-2);
--btn-clr: var(--clr-bg-on-muted); --btn-bg: var(--clr-bg-3);
--btn-bg: oklch(from var(--clr-scale-ntrl-60) l c h / 0.2);
& .badge { & .badge {
--btn-bg: var(--clr-scale-ntrl-100); --btn-bg: var(--clr-scale-ntrl-100);
@ -125,16 +124,16 @@
&.error.soft, &.error.soft,
&.warning.soft, &.warning.soft,
&.purple.soft { &.purple.soft {
--btn-clr: var(--clr-bg-on-muted); --btn-clr: var(--clr-text-2);
--btn-bg: oklch(from var(--clr-scale-ntrl-60) l c h / 0.2); --btn-bg: var(--clr-bg-3);
} }
&.ghost { &.ghost {
--btn-clr: var(--clr-bg-on-muted); --btn-clr: var(--clr-text-2);
} }
&.ghost.solid { &.ghost.solid {
border-color: oklch(from var(--clr-scale-ntrl-0) l c h / 0.1); border-color: var(--clr-bg-3);
} }
} }
&.wide { &.wide {
@ -162,8 +161,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: var(--size-control-icon); height: var(--size-icon);
min-width: var(--size-control-icon); min-width: var(--size-icon);
padding: 0 var(--size-4); padding: 0 var(--size-4);
border-radius: var(--radius-s); border-radius: var(--radius-s);
background: var(--btn-clr); background: var(--btn-clr);
@ -178,8 +177,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: var(--size-control-icon); width: var(--size-icon);
height: var(--size-control-icon); height: var(--size-icon);
margin-right: -0.125rem; margin-right: -0.125rem;
color: white; color: white;
} }
@ -220,7 +219,7 @@
&:not(.not-clickable, &:disabled):hover { &:not(.not-clickable, &:disabled):hover {
--btn-clr: var(--clr-scale-ntrl-20); --btn-clr: var(--clr-scale-ntrl-20);
--btn-bg: var(--clr-bg-muted); --btn-bg: var(--clr-bg-2);
} }
& .badge { & .badge {
@ -355,20 +354,20 @@
/* SIZE MODIFIERS */ /* SIZE MODIFIERS */
.btn.tag { .btn.tag {
height: var(--size-control-tag); height: var(--size-tag);
min-width: var(--size-control-tag); min-width: var(--size-tag);
padding: var(--size-2) var(--size-4); padding: var(--size-2) var(--size-4);
} }
.btn.button { .btn.button {
height: var(--size-control-button); height: var(--size-button);
min-width: var(--size-control-button); min-width: var(--size-button);
padding: var(--size-4) var(--size-8); padding: var(--size-4) var(--size-8);
} }
.btn.cta { .btn.cta {
height: var(--size-control-cta); height: var(--size-cta);
min-width: var(--size-control-cta); min-width: var(--size-cta);
padding: var(--size-6) var(--size-8); padding: var(--size-6) var(--size-8);
} }
@ -376,17 +375,17 @@
.btn.fixed-width { .btn.fixed-width {
&.tag { &.tag {
width: var(--size-control-tag); width: var(--size-tag);
padding: var(--size-2); padding: var(--size-2);
} }
&.button { &.button {
width: var(--size-control-button); width: var(--size-button);
padding: var(--size-4); padding: var(--size-4);
} }
&.cta { &.cta {
width: var(--size-control-cta); width: var(--size-cta);
padding: var(--size-6); 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); height: var(--size-16);
flex-shrink: 0; flex-shrink: 0;
border-radius: var(--radius-s); border-radius: var(--radius-s);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
box-shadow: inset 0 0 0 1px var(--clr-border-main); box-shadow: inset 0 0 0 1px var(--clr-border-2);
transition: transition:
background-color var(--transition-fast), background-color var(--transition-fast),
border-color var(--transition-fast), border-color var(--transition-fast),
@ -68,7 +68,7 @@
} }
&:indeterminate { &:indeterminate {
background-color: var(--clr-bg-alt); background-color: var(--clr-bg-2);
&::before { &::before {
content: ''; content: '';

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

@ -178,13 +178,13 @@
flex-direction: column; flex-direction: column;
border-radius: var(--size-6); border-radius: var(--size-6);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
overflow: hidden; overflow: hidden;
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
&:not(.is-commit-open):hover { &:not(.is-commit-open):hover {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
} }
} }
@ -197,11 +197,11 @@
} }
.is-commit-open { .is-commit-open {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
& .commit__header { & .commit__header {
padding-bottom: var(--size-16); padding-bottom: var(--size-16);
border-bottom: 1px solid var(--clr-border-main); border-bottom: 1px solid var(--clr-border-2);
} }
& .commit__message { & .commit__message {
@ -261,7 +261,7 @@
} }
.files-container { .files-container {
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
padding: 0 var(--size-14) var(--size-14); padding: 0 var(--size-14) var(--size-14);
} }
@ -270,7 +270,7 @@
justify-content: flex-end; justify-content: flex-end;
gap: var(--size-8); gap: var(--size-8);
padding: var(--size-14); padding: var(--size-14);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
border-top: 1px solid var(--clr-border-main); border-top: 1px solid var(--clr-border-2);
} }
</style> </style>

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

@ -280,8 +280,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--size-14); padding: var(--size-14);
background: var(--clr-bg-main); background: var(--clr-bg-1);
border-top: 1px solid var(--clr-border-main); border-top: 1px solid var(--clr-border-2);
transition: background-color var(--transition-medium); transition: background-color var(--transition-medium);
border-radius: 0 0 var(--radius-m) var(--radius-m); border-radius: 0 0 var(--radius-m) var(--radius-m);
} }
@ -324,7 +324,7 @@
left: var(--size-12); left: var(--size-12);
padding: var(--size-2); padding: var(--size-2);
border-radius: 100%; border-radius: 100%;
background: var(--clr-bg-alt); background: var(--clr-bg-2);
color: var(--clr-scale-ntrl-40); color: var(--clr-scale-ntrl-40);
} }
@ -350,6 +350,6 @@
} }
.commit-box__expanded { .commit-box__expanded {
background-color: var(--clr-bg-alt); background-color: var(--clr-bg-2);
} }
</style> </style>

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

@ -61,9 +61,9 @@
<style lang="postcss"> <style lang="postcss">
.commit-list { .commit-list {
&.upstream { &.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; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;

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

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

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

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

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

@ -70,7 +70,7 @@
user-select: none; user-select: none;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
} }
.right-side { .right-side {
@ -84,7 +84,7 @@
align-items: center; align-items: center;
padding: var(--size-40) calc(var(--size-40) * 2); padding: var(--size-40) calc(var(--size-40) * 2);
flex: 1.3; flex: 1.3;
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
overflow-y: auto; overflow-y: auto;
} }
@ -101,7 +101,7 @@
.right-side { .right-side {
flex: 1; flex: 1;
min-width: 28rem; 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; 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); gap: var(--size-10);
border-radius: var(--radius-m); border-radius: var(--radius-m);
padding: var(--size-10); padding: var(--size-10);
color: var(--clr-scale-ntrl-0); color: var(--clr-text-1);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
} }
@ -58,6 +58,6 @@
.domain-button:not(.selected):hover, .domain-button:not(.selected):hover,
.domain-button:not(.selected):focus, .domain-button:not(.selected):focus,
.selected { .selected {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
} }
</style> </style>

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

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

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

@ -74,7 +74,7 @@
display: flex; display: flex;
padding: var(--size-16); padding: var(--size-16);
gap: var(--size-12); gap: var(--size-12);
border-bottom: 1px solid var(--clr-border-main); border-bottom: 1px solid var(--clr-border-2);
} }
.header__inner { .header__inner {
display: flex; display: flex;

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

@ -162,11 +162,11 @@
text-align: left; text-align: left;
user-select: none; user-select: none;
outline: none; outline: none;
background: var(--clr-bg-main); background: var(--clr-bg-1);
border: 1px solid transparent; border: 1px solid transparent;
&:not(.selected-draggable):hover { &:not(.selected-draggable):hover {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
} }
} }
@ -210,7 +210,7 @@
.selected-draggable { .selected-draggable {
background-color: var(--clr-scale-pop-80); background-color: var(--clr-scale-pop-80);
border: 1px solid var(--clr-bg-main); border: 1px solid var(--clr-bg-1);
&:hover { &:hover {
background-color: var(--clr-scale-pop-80); background-color: var(--clr-scale-pop-80);

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

@ -33,8 +33,8 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: var(--size-12); padding: var(--size-12);
border-top: 1px solid var(--clr-border-main); border-top: 1px solid var(--clr-border-2);
border-color: var(--clr-border-main); border-color: var(--clr-border-2);
} }
.left-btns { .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); padding: var(--size-6) var(--size-6) var(--size-6) var(--size-8);
border-radius: var(--radius-m); border-radius: var(--radius-m);
background-color: var(--clr-bg); background-color: var(--clr-bg);
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
user-select: text; user-select: text;
} }
</style> </style>

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

@ -84,7 +84,7 @@
width: 100%; width: 100%;
min-width: max-content; min-width: max-content;
font-family: monospace; font-family: monospace;
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
white-space: pre; white-space: pre;
tab-size: var(--tab-size); tab-size: var(--tab-size);
} }

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

@ -126,9 +126,9 @@
overflow-x: auto; overflow-x: auto;
user-select: text; user-select: text;
background: var(--clr-bg-main); background: var(--clr-bg-1);
border-radius: var(--radius-s); 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); transition: border-color var(--transition-fast);
} }

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

@ -94,7 +94,7 @@
padding: var(--size-14); padding: var(--size-14);
border-radius: var(--radius-m); border-radius: var(--radius-m);
gap: var(--size-12); gap: var(--size-12);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
transition: transition:
background-color var(--transition-slow), background-color var(--transition-slow),
border-color var(--transition-slow); border-color var(--transition-slow);
@ -125,7 +125,7 @@
/* MODIFIERS */ /* MODIFIERS */
.neutral { .neutral {
border: 0 solid var(--clr-border-main); border: 0 solid var(--clr-border-2);
} }
.error { .error {
border: 0 solid var(--clr-scale-err-60); border: 0 solid var(--clr-scale-err-60);
@ -151,7 +151,7 @@
.has-background { .has-background {
&.neutral { &.neutral {
background-color: var(--clr-bg-alt); background-color: var(--clr-bg-2);
} }
&.error { &.error {

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

@ -23,11 +23,11 @@
padding: var(--size-12); padding: var(--size-12);
gap: var(--size-8); gap: var(--size-8);
flex-direction: column; flex-direction: column;
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
} }
.frame-box { .frame-box {
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
border-radius: var(--radius-m); border-radius: var(--radius-m);
} }
</style> </style>

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

@ -39,14 +39,14 @@
&:hover:enabled, &:hover:enabled,
&:focus:enabled { &:focus:enabled {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
& .icon { & .icon {
color: var(--clr-scale-ntrl-40); color: var(--clr-scale-ntrl-40);
} }
} }
&:disabled { &:disabled {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
color: var(--clr-bg-on-muted); color: var(--clr-text-2);
} }
& .icon { & .icon {
display: flex; display: flex;

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

@ -58,7 +58,7 @@
display: flex; display: flex;
padding: var(--size-16); padding: var(--size-16);
gap: var(--size-8); gap: var(--size-8);
border-bottom: 1px solid var(--clr-border-main); border-bottom: 1px solid var(--clr-border-2);
} }
.modal__header__content { .modal__header__content {
@ -83,8 +83,8 @@
justify-content: flex-end; justify-content: flex-end;
gap: var(--size-8); gap: var(--size-8);
padding: var(--size-16); padding: var(--size-16);
border-top: 1px solid var(--clr-border-main); border-top: 1px solid var(--clr-border-2);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
} }
.adjust-header { .adjust-header {

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

@ -56,7 +56,7 @@
{viewport} {viewport}
direction="right" direction="right"
minWidth={minResizerWidth} minWidth={minResizerWidth}
defaultLineColor="var(--clr-border-main)" defaultLineColor="var(--clr-border-2)"
zIndex="var(--z-floating)" zIndex="var(--z-floating)"
on:click={() => $isNavCollapsed && toggleNavCollapse()} on:click={() => $isNavCollapsed && toggleNavCollapse()}
on:dblclick={() => !$isNavCollapsed && toggleNavCollapse()} on:dblclick={() => !$isNavCollapsed && toggleNavCollapse()}
@ -154,7 +154,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
background: var(--clr-bg-main); background: var(--clr-bg-1);
max-height: 100%; max-height: 100%;
user-select: none; user-select: none;
} }
@ -196,9 +196,9 @@
top: 50%; top: 50%;
width: 0.875rem; width: 0.875rem;
height: var(--size-36); height: var(--size-36);
background: var(--clr-bg-main); background: var(--clr-bg-1);
border-radius: var(--radius-m); border-radius: var(--radius-m);
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: transition:

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

@ -91,7 +91,7 @@
justify-content: center; justify-content: center;
width: 22rem; width: 22rem;
border-radius: var(--radius-m); border-radius: var(--radius-m);
border: 1px dashed var(--clr-border-main); border: 1px dashed var(--clr-border-2);
background-color: transparent; background-color: transparent;
padding: var(--size-20); padding: var(--size-20);
gap: var(--size-8); gap: var(--size-8);

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

@ -44,8 +44,8 @@
width: 100%; width: 100%;
max-height: calc(100vh - 5rem); max-height: calc(100vh - 5rem);
border-radius: var(--radius-l); border-radius: var(--radius-l);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
box-shadow: var(--fx-shadow-l); box-shadow: var(--fx-shadow-l);
} }

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

@ -67,7 +67,7 @@
gap: var(--size-8); gap: var(--size-8);
padding: var(--size-14); padding: var(--size-14);
border-radius: var(--radius-m); border-radius: var(--radius-m);
background-color: var(--clr-bg-alt); background-color: var(--clr-bg-2);
} }
.passbox__helper-text { .passbox__helper-text {

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

@ -71,8 +71,8 @@
width: 100%; width: 100%;
margin-top: var(--size-6); margin-top: var(--size-6);
border-radius: var(--m, 6px); border-radius: var(--m, 6px);
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
background: var(--clr-bg-main); background: var(--clr-bg-1);
/* shadow/s */ /* shadow/s */
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.1); 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); width: var(--size-16);
height: var(--size-16); height: var(--size-16);
border-radius: var(--size-16); border-radius: var(--size-16);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
box-shadow: inset 0 0 0 1px var(--clr-border-main); box-shadow: inset 0 0 0 1px var(--clr-border-2);
transition: transition:
background-color var(--transition-fast), background-color var(--transition-fast),
border-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; flex-direction: column;
gap: var(--size-8); gap: var(--size-8);
margin: var(--size-12) var(--size-6) var(--size-12) var(--size-12); 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 { .card__content {

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

@ -82,7 +82,7 @@
min-width: 100%; min-width: 100%;
} }
.scrolled { .scrolled {
border-top: 1px solid var(--clr-border-main); border-top: 1px solid var(--clr-border-2);
} }
/* MODIFIERS */ /* MODIFIERS */

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

@ -79,8 +79,8 @@
padding: var(--size-16); padding: var(--size-16);
border-left-width: 1px; border-left-width: 1px;
border-right-width: 1px; border-right-width: 1px;
border-color: var(--clr-border-main); border-color: var(--clr-border-2);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
cursor: default; cursor: default;
transition: transition:
background-color var(--transition-fast), background-color var(--transition-fast),
@ -89,7 +89,7 @@
} }
.loading { .loading {
background: var(--clr-bg-alt); background: var(--clr-bg-2);
} }
.success { .success {
@ -116,7 +116,7 @@
} }
.section-card__text { .section-card__text {
color: var(--clr-scale-ntrl-30); color: var(--clr-text-2);
/* if empty hide the caption */ /* if empty hide the caption */
&:empty { &:empty {
@ -150,7 +150,7 @@
display: block; display: block;
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: var(--clr-border-main); background-color: var(--clr-border-2);
opacity: 0.5; opacity: 0.5;
} }
} }

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

@ -77,18 +77,18 @@
justify-content: center; justify-content: center;
gap: var(--size-4); gap: var(--size-4);
height: var(--size-control-button); height: var(--size-button);
border-top-width: 1px; border-top-width: 1px;
border-bottom-width: 1px; border-bottom-width: 1px;
border-left-width: 1px; border-left-width: 1px;
border-color: var(--clr-border-main); border-color: var(--clr-border-2);
transition: background var(--transition-fast); transition: background var(--transition-fast);
&[aria-selected='true'] { &[aria-selected='true'] {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
cursor: default; cursor: default;
@ -127,12 +127,12 @@
/* MODIFIERS */ /* MODIFIERS */
.segment-small { .segment-small {
height: var(--size-control-tag); height: var(--size-tag);
padding: var(--size-2) var(--size-4); padding: var(--size-2) var(--size-4);
} }
.segment-medium { .segment-medium {
height: var(--size-control-button); height: var(--size-button);
padding: var(--size-4) var(--size-8); padding: var(--size-4) var(--size-8);
} }
</style> </style>

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

@ -135,8 +135,8 @@
z-index: var(--z-floating); z-index: var(--z-floating);
margin-top: var(--size-4); margin-top: var(--size-4);
border-radius: var(--radius-m); border-radius: var(--radius-m);
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
background: var(--clr-bg-main); background: var(--clr-bg-1);
box-shadow: var(--fx-shadow-s); box-shadow: var(--fx-shadow-s);
overflow: hidden; overflow: hidden;
} }
@ -148,7 +148,7 @@
gap: var(--size-2); gap: var(--size-2);
&:not(&:first-child):last-child { &: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; white-space: nowrap;
&:hover:enabled, &:hover:enabled,
&:focus:enabled { &:focus:enabled {
background-color: var(--clr-bg-alt); background-color: var(--clr-bg-2);
& .icon { & .icon {
color: var(--clr-scale-ntrl-40); color: var(--clr-scale-ntrl-40);
} }
} }
&:disabled { &:disabled {
background-color: var(--clr-bg-alt); background-color: var(--clr-bg-2);
color: var(--clr-scale-ntrl-50); color: var(--clr-scale-ntrl-50);
} }
& .icon { & .icon {

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

@ -40,7 +40,7 @@
padding: var(--size-20); padding: var(--size-20);
} }
.disabled.setup-feature { .disabled.setup-feature {
background: var(--clr-bg-alt); background: var(--clr-bg-2);
opacity: 0.5; opacity: 0.5;
} }
.success.setup-feature { .success.setup-feature {
@ -87,6 +87,6 @@
} }
.top-border { .top-border {
border-top: 1px solid var(--clr-border-main); border-top: 1px solid var(--clr-border-2);
} }
</style> </style>

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

@ -51,7 +51,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: var(--size-control-tag); height: var(--size-tag);
padding: var(--size-2) var(--size-4); padding: var(--size-2) var(--size-4);
border-radius: var(--radius-m); border-radius: var(--radius-m);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
@ -230,7 +230,7 @@
&.error.solid, &.error.solid,
&.warning.solid, &.warning.solid,
&.purple.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); background: oklch(from var(--clr-scale-ntrl-60) l c h / 0.15);
} }
@ -240,12 +240,12 @@
&.error.soft, &.error.soft,
&.warning.soft, &.warning.soft,
&.purple.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); background: oklch(from var(--clr-scale-ntrl-60) l c h / 0.15);
} }
&.ghost { &.ghost {
color: var(--clr-bg-on-muted); color: var(--clr-text-2);
} }
&.ghost.solid { &.ghost.solid {
@ -269,7 +269,7 @@
.verticalOrientation { .verticalOrientation {
writing-mode: vertical-rl; writing-mode: vertical-rl;
height: max-content; height: max-content;
width: var(--size-control-tag); width: var(--size-tag);
padding: var(--size-4) var(--size-2); padding: var(--size-4) var(--size-2);
transform: rotate(180deg); transform: rotate(180deg);
} }

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

@ -160,7 +160,7 @@
.textbox__input { .textbox__input {
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
height: var(--size-control-cta); height: var(--size-cta);
width: 100%; width: 100%;
} }
@ -193,7 +193,7 @@
&:focus { &:focus {
color: var(--clr-scale-ntrl-40); color: var(--clr-scale-ntrl-40);
outline: none; outline: none;
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
} }
} }
@ -235,7 +235,7 @@
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 100%; height: 100%;
background-color: var(--clr-border-main); background-color: var(--clr-border-2);
} }
.textbox__count-btn { .textbox__count-btn {
@ -250,7 +250,7 @@
&:hover, &:hover,
&:focus { &:focus {
outline: none; outline: none;
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
color: var(--clr-scale-ntrl-40); color: var(--clr-scale-ntrl-40);
} }
} }
@ -276,8 +276,8 @@
} }
.textbox__readonly { .textbox__readonly {
background-color: var(--clr-bg-alt); background-color: var(--clr-bg-2);
border-color: var(--clr-border-main); border-color: var(--clr-border-2);
} }
.wide { .wide {

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

@ -67,7 +67,7 @@
.theme-card:hover { .theme-card:hover {
& .theme-card__label { & .theme-card__label {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
} }
} }
@ -76,7 +76,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
border-radius: var(--radius-m); border-radius: var(--radius-m);
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
overflow: hidden; overflow: hidden;
& img { & img {

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

@ -39,7 +39,7 @@
width: calc(var(--size-24) + var(--size-2)); width: calc(var(--size-24) + var(--size-2));
height: var(--size-16); height: var(--size-16);
border-radius: var(--size-16); border-radius: var(--size-16);
background-color: var(--clr-border-main); background-color: var(--clr-border-2);
transition: transition:
background-color var(--transition-fast), background-color var(--transition-fast),
border-color var(--transition-fast), border-color var(--transition-fast),
@ -50,7 +50,7 @@
/* not checked */ /* not checked */
&:hover, &:hover,
&:focus { &: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 { &:disabled {

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

@ -82,7 +82,7 @@
display: flex; display: flex;
gap: var(--size-56); gap: var(--size-56);
padding: var(--size-28); padding: var(--size-28);
background: var(--clr-bg-alt); background: var(--clr-bg-2);
border-radius: var(--radius-m); border-radius: var(--radius-m);
margin-top: var(--size-20); margin-top: var(--size-20);
} }

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

@ -27,7 +27,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: var(--radius-m); border-radius: var(--radius-m);
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
display: flex; display: flex;
position: relative; position: relative;
padding: var(--size-16); padding: var(--size-16);
@ -38,18 +38,18 @@
transition: transition:
background-color var(--transition-fast), background-color var(--transition-fast),
border-color var(--transition-fast); border-color var(--transition-fast);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
&:hover, &:hover,
&:focus { &:focus {
outline: none; 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 { .loading {
pointer-events: none; pointer-events: none;
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
border: 1px solid transparent; border: 1px solid transparent;
opacity: 0.5; opacity: 0.5;
} }

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

@ -25,8 +25,8 @@
.context-menu { .context-menu {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--clr-bg-alt); background: var(--clr-bg-2);
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
border-radius: var(--radius-m); border-radius: var(--radius-m);
box-shadow: var(--fx-shadow-s); 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); transition: background-color var(--transition-fast);
&:not(.disabled):hover { &:not(.disabled):hover {
transition: none; transition: none;
background-color: var(--clr-bg-muted-alt); background-color: var(--clr-bg-3);
} }
} }
.label { .label {

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

@ -12,7 +12,7 @@
padding: var(--size-8); padding: var(--size-8);
gap: var(--size-2); gap: var(--size-2);
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid var(--clr-border-main); border-top: 1px solid var(--clr-border-2);
} }
} }
</style> </style>

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

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

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

@ -36,7 +36,7 @@
.settings-section { .settings-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--size-16); gap: var(--size-20);
} }
.description { .description {
@ -45,7 +45,11 @@
gap: var(--size-10); gap: var(--size-10);
} }
.description h2 {
color: var(--clr-text-1);
}
.description p { .description p {
color: var(--clr-scale-ntrl-30); color: var(--clr-text-2);
} }
</style> </style>

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

@ -137,8 +137,8 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding: calc(var(--size-36) + var(--size-4)) var(--size-14) var(--size-14) var(--size-14); 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); border-right: 1px solid var(--clr-border-2);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
height: 100%; height: 100%;
width: 16rem; width: 16rem;
} }
@ -189,7 +189,7 @@
&:not(.item_selected):hover { &:not(.item_selected):hover {
transition: none; transition: none;
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
} }
& span { & span {
@ -198,7 +198,7 @@
} }
.item_selected { .item_selected {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
color: var(--clr-scale-ntrl-0); color: var(--clr-scale-ntrl-0);
} }
@ -223,13 +223,13 @@
justify-content: space-between; justify-content: space-between;
padding: var(--size-16); padding: var(--size-16);
border-radius: var(--radius-m); border-radius: var(--radius-m);
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
color: var(--clr-scale-ntrl-30); color: var(--clr-scale-ntrl-30);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
&:hover { &:hover {
background-color: var(--clr-bg-muted); background-color: var(--clr-bg-2);
} }
} }
</style> </style>

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

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

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

@ -1,9 +1,9 @@
.card { .card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
border-radius: var(--radius-m); border-radius: var(--radius-m);
background: var(--clr-bg-main); background: var(--clr-bg-1);
} }
.card__header { .card__header {
@ -11,7 +11,7 @@
justify-content: space-between; justify-content: space-between;
padding: var(--size-16); padding: var(--size-16);
gap: var(--size-8); gap: var(--size-8);
border-bottom: 1px solid var(--clr-border-main); border-bottom: 1px solid var(--clr-border-2);
} }
.card__title { .card__title {
@ -29,5 +29,5 @@
gap: var(--size-6); gap: var(--size-6);
padding: var(--size-16); padding: var(--size-16);
justify-content: space-between; 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; overflow-y: hidden;
padding: 0; padding: 0;
color: var(--clr-scale-ntrl-0); color: var(--clr-scale-ntrl-0);
background-color: var(--clr-bg-alt); background-color: var(--clr-bg-2);
/* optimise font rendering */ /* optimise font rendering */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -167,14 +167,14 @@ dialog::backdrop {
.locked-file-animation { .locked-file-animation {
--locked-color: oklch(from var(--clr-scale-warn-50) l c h / 0.2); --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; animation: locked-file-animation 1.4s ease-out forwards;
} }
@keyframes locked-file-animation { @keyframes locked-file-animation {
0% { 0% {
transform: translateX(-3px); transform: translateX(-3px);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
} }
10% { 10% {
transform: translateX(3px); transform: translateX(3px);
@ -192,6 +192,6 @@ dialog::backdrop {
transform: translateX(0); transform: translateX(0);
} }
100% { 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 { .text-input {
padding: var(--size-4) var(--size-10); padding: var(--size-4) var(--size-10);
color: var(--clr-scale-ntrl-0); color: var(--clr-scale-ntrl-0);
background-color: var(--clr-bg-main); background-color: var(--clr-bg-1);
border: 1px solid var(--clr-border-main); border: 1px solid var(--clr-border-2);
border-radius: var(--radius-s); border-radius: var(--radius-s);
transition: border-color var(--transition-fast); transition: border-color var(--transition-fast);
@ -11,12 +11,12 @@
} }
&:hover { &: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,
&:focus-within { &: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; outline: none;
} }
@ -27,6 +27,6 @@
&:disabled { &:disabled {
color: var(--clr-scale-ntrl-60); color: var(--clr-scale-ntrl-60);
border-color: var(--clr-scale-ntrl-70); 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 { :root {
--clr-bg-alt: var(--clr-core-ntrl-95); --clr-bg-1: var(--clr-core-ntrl-100);
--clr-bg-main: var(--clr-core-ntrl-100); --clr-bg-2: var(--clr-core-ntrl-95);
--clr-bg-muted: var(--clr-core-ntrl-95); --clr-bg-3: var(--clr-core-ntrl-90);
--clr-bg-muted-alt: var(--clr-core-ntrl-90); --clr-border-2: var(--clr-core-ntrl-60);
--clr-bg-on-muted: var(--clr-core-ntrl-60); --clr-border-2: var(--clr-core-ntrl-70);
--clr-border-main: var(--clr-core-ntrl-70); --clr-border-3: var(--clr-core-ntrl-80);
--clr-border-muted: var(--clr-core-ntrl-80);
--clr-commit-local: var(--clr-core-pop-50); --clr-commit-local: var(--clr-core-pop-50);
--clr-commit-remote: var(--clr-core-ntrl-50); --clr-commit-remote: var(--clr-core-ntrl-50);
--clr-commit-shadow: var(--clr-core-ntrl-60); --clr-commit-shadow: var(--clr-core-ntrl-60);
@ -27,16 +26,16 @@
--clr-core-err-80: #fbe5e7; --clr-core-err-80: #fbe5e7;
--clr-core-err-90: #fdf1f4; --clr-core-err-90: #fdf1f4;
--clr-core-err-95: #fffafc; --clr-core-err-95: #fffafc;
--clr-core-ntrl-0: #000000; --clr-core-ntrl-0: #0a0a0a;
--clr-core-ntrl-5: #171717; --clr-core-ntrl-5: #1f1f1e;
--clr-core-ntrl-10: #292929; --clr-core-ntrl-10: #292929;
--clr-core-ntrl-20: #333333; --clr-core-ntrl-20: #363635;
--clr-core-ntrl-30: #4d4c4c; --clr-core-ntrl-30: #4d4d4c;
--clr-core-ntrl-40: #595958; --clr-core-ntrl-40: #616160;
--clr-core-ntrl-50: #838381; --clr-core-ntrl-50: #838381;
--clr-core-ntrl-60: #bcbbb9; --clr-core-ntrl-60: #bcbbb9;
--clr-core-ntrl-70: #d0d0cd; --clr-core-ntrl-70: #d2d2d0;
--clr-core-ntrl-80: #e4e4e2; --clr-core-ntrl-80: #e2e1df;
--clr-core-ntrl-90: #ebebea; --clr-core-ntrl-90: #ebebea;
--clr-core-ntrl-95: #f5f5f4; --clr-core-ntrl-95: #f5f5f4;
--clr-core-ntrl-100: #ffffff; --clr-core-ntrl-100: #ffffff;
@ -87,8 +86,6 @@
--clr-illustration-bg: #d6f0ee; --clr-illustration-bg: #d6f0ee;
--clr-illustration-fill: #fcfcf1; --clr-illustration-fill: #fcfcf1;
--clr-illustration-outline: #475050; --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-overlay-bg: #d6d6d666;
--clr-scale-err-5: var(--clr-core-err-5); --clr-scale-err-5: var(--clr-core-err-5);
--clr-scale-err-10: var(--clr-core-err-10); --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-80: var(--clr-core-warn-80);
--clr-scale-warn-90: var(--clr-core-warn-90); --clr-scale-warn-90: var(--clr-core-warn-90);
--clr-scale-warn-95: var(--clr-core-warn-95); --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-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-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-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-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-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-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-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-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-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-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-l: 0 10px 40px 0 #0000001a;
--fx-shadow-m: 0 6px 30px 0 #00000014; --fx-shadow-m: 0 6px 30px 0 #00000014;
--fx-shadow-s: 0 4px 14px 0 #0000000f; --fx-shadow-s: 0 4px 14px 0 #0000000f;
@ -204,21 +209,20 @@
--size-64: 4rem; --size-64: 4rem;
--size-80: 5rem; --size-80: 5rem;
--size-96: 6rem; --size-96: 6rem;
--size-button: 1.75rem;
--size-card-padding: 0.875rem; --size-card-padding: 0.875rem;
--size-control-button: 1.75rem; --size-cta: 2rem;
--size-control-cta: 2rem; --size-icon: 1rem;
--size-control-icon: 1rem; --size-tag: 1.375rem;
--size-control-tag: 1.375rem;
} }
:root.dark { :root.dark {
--clr-bg-alt: var(--clr-core-ntrl-5); --clr-bg-1: var(--clr-core-ntrl-10);
--clr-bg-main: var(--clr-core-ntrl-10); --clr-bg-2: var(--clr-core-ntrl-5);
--clr-bg-muted: var(--clr-core-ntrl-20); --clr-bg-3: var(--clr-core-ntrl-0);
--clr-bg-muted-alt: var(--clr-core-ntrl-10); --clr-border-2: var(--clr-core-ntrl-40);
--clr-bg-on-muted: var(--clr-core-ntrl-50); --clr-border-2: var(--clr-core-ntrl-30);
--clr-border-main: var(--clr-core-ntrl-40); --clr-border-3: var(--clr-core-ntrl-20);
--clr-border-muted: var(--clr-core-ntrl-30);
--clr-commit-local: var(--clr-core-pop-50); --clr-commit-local: var(--clr-core-pop-50);
--clr-commit-remote: var(--clr-core-ntrl-50); --clr-commit-remote: var(--clr-core-ntrl-50);
--clr-commit-shadow: var(--clr-core-ntrl-40); --clr-commit-shadow: var(--clr-core-ntrl-40);
@ -226,8 +230,6 @@
--clr-illustration-bg: #174543; --clr-illustration-bg: #174543;
--clr-illustration-fill: #95b5aa; --clr-illustration-fill: #95b5aa;
--clr-illustration-outline: #142222; --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-overlay-bg: #00000059;
--clr-scale-err-5: var(--clr-core-err-95); --clr-scale-err-5: var(--clr-core-err-95);
--clr-scale-err-10: var(--clr-core-err-90); --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-80: var(--clr-core-warn-20);
--clr-scale-warn-90: var(--clr-core-warn-10); --clr-scale-warn-90: var(--clr-core-warn-10);
--clr-scale-warn-95: var(--clr-core-warn-5); --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-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-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-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-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-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-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-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-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-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-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);
} }