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

Merge pull request #3177 from gitbutlerapp/Design-tokens-updated

Browse Source 
Design tokens updates
This commit is contained in:
Pavel Laptev 2024-03-17 03:15:44 +01:00 committed by GitHub
commit 69a5eaf8a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
104 changed files with 597 additions and 563 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
gitbutler-ui/src/lib/components/AccountLink.svelte
View File

@ -43,10 +43,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
overflow-x: hidden; overflow-x: hidden;
gap: var(--space-8); gap: var(--size-8);
height: var(--size-btn-l); height: var(--size-control-l);
padding: var(--space-6) var(--space-8); padding: var(--size-6) var(--size-8);
border-radius: var(--radius-m); border-radius: var(--radius-m);
color: var(--clr-theme-scale-ntrl-50); color: var(--clr-theme-scale-ntrl-50);
@ -88,14 +88,14 @@
.anon-icon, .anon-icon,
.profile-picture { .profile-picture {
border-radius: var(--radius-m); border-radius: var(--radius-m);
width: var(--space-20); width: var(--size-20);
height: var(--space-20); height: var(--size-20);
} }
.anon-icon { .anon-icon {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: var(--space-2); padding: var(--size-2);
background: var(--clr-theme-pop-element); background: var(--clr-theme-pop-element);
color: var(--clr-theme-pop-on-element); color: var(--clr-theme-pop-on-element);
} }
@ -103,13 +103,13 @@
/* MODIFIERS */ /* MODIFIERS */
.btn.collapsed { .btn.collapsed {
overflow-x: initial; overflow-x: initial;
padding: var(--space-8); padding: var(--size-8);
height: auto; height: auto;
& .anon-icon, & .anon-icon,
.profile-picture { .profile-picture {
width: var(--space-24); width: var(--size-24);
height: var(--space-24); height: var(--size-24);
} }
} }
</style> </style>

4
gitbutler-ui/src/lib/components/AheadBehind.svelte
View File

@ -35,8 +35,8 @@
} }
.ahead, .ahead,
.behind { .behind {
padding: var(--space-2); padding: var(--size-2);
min-width: var(--space-12); min-width: var(--size-12);
} }
.behind { .behind {
border-right: 1px solid var(--clr-theme-container-outline-light); border-right: 1px solid var(--clr-theme-container-outline-light);

2
gitbutler-ui/src/lib/components/AnalyticsConfirmation.svelte
View File

@ -27,7 +27,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-12); gap: var(--size-12);
} }
.title { .title {

6
gitbutler-ui/src/lib/components/AnalyticsSettings.svelte
View File

@ -71,13 +71,13 @@
.analytics-settings { .analytics-settings {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-28); gap: var(--size-28);
} }
.analytics-settings__content { .analytics-settings__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-16); gap: var(--size-16);
} }
.analytics-settings__text { .analytics-settings__text {
@ -87,6 +87,6 @@
.analytics-settings__actions { .analytics-settings__actions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-8); gap: var(--size-8);
} }
</style> </style>

18
gitbutler-ui/src/lib/components/AppUpdater.svelte
View File

@ -152,15 +152,15 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--space-16); gap: var(--size-16);
width: 100%; width: 100%;
max-width: 220px; max-width: 220px;
position: fixed; position: fixed;
bottom: var(--space-12); bottom: var(--size-12);
left: var(--space-12); left: var(--size-12);
padding: var(--space-24); padding: var(--size-24);
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
border: 1px solid var(--clr-theme-container-outline-light); border: 1px solid var(--clr-theme-container-outline-light);
border-radius: var(--radius-m); border-radius: var(--radius-m);
@ -174,7 +174,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-8); gap: var(--size-8);
} }
/* STATUS SECTION */ /* STATUS SECTION */
@ -187,7 +187,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
height: var(--size-btn-m); height: var(--size-control-m);
width: 100%; width: 100%;
background-color: var(--clr-theme-pop-element); background-color: var(--clr-theme-pop-element);
border-radius: var(--radius-m); border-radius: var(--radius-m);
@ -235,7 +235,7 @@
.busy { .busy {
& .status-section { & .status-section {
height: var(--space-4); height: var(--size-4);
} }
& .sliding-gradient { & .sliding-gradient {
@ -301,8 +301,8 @@
.floating-button { .floating-button {
position: absolute; position: absolute;
right: var(--space-10); right: var(--size-10);
top: var(--space-10); top: var(--size-10);
} }
@keyframes moving-arrow { @keyframes moving-arrow {

6
gitbutler-ui/src/lib/components/AuthorIcon.svelte
View File

@ -16,10 +16,10 @@
<style lang="postcss"> <style lang="postcss">
.gravatar-image { .gravatar-image {
width: var(--space-16); width: var(--size-16);
height: var(--space-16); height: var(--size-16);
border-radius: 50%; border-radius: 50%;
margin-left: calc(var(--space-4) * -1); margin-left: calc(var(--size-4) * -1);
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;

8
gitbutler-ui/src/lib/components/AuthorIcons.svelte
View File

@ -31,11 +31,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: var(--space-16); height: var(--size-16);
padding: 0 var(--space-4); padding: 0 var(--size-4);
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
border-radius: var(--space-16); border-radius: var(--size-16);
margin-left: calc(var(--space-4) * -1); margin-left: calc(var(--size-4) * -1);
border: 1px solid var(--clr-theme-container-outline-light); border: 1px solid var(--clr-theme-container-outline-light);
& span { & span {

8
gitbutler-ui/src/lib/components/Badge.svelte
View File

@ -15,10 +15,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
height: var(--space-16); height: var(--size-16);
min-width: var(--space-16); min-width: var(--size-16);
border-radius: var(--space-16); border-radius: var(--size-16);
padding: 0 var(--space-4); padding: 0 var(--size-4);
color: var(--clr-theme-scale-ntrl-30); color: var(--clr-theme-scale-ntrl-30);
background-color: color-mix(in srgb, var(--clr-theme-scale-ntrl-40) 16%, transparent); background-color: color-mix(in srgb, var(--clr-theme-scale-ntrl-40) 16%, transparent);
line-height: 90%; line-height: 90%;

18
gitbutler-ui/src/lib/components/BaseBranchCard.svelte
View File

@ -74,8 +74,8 @@
.base-branch-card { .base-branch-card {
position: relative; position: relative;
display: flex; display: flex;
gap: var(--space-10); gap: var(--size-10);
padding: var(--space-10); padding: var(--size-10);
border-radius: var(--radius-m); border-radius: var(--radius-m);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
} }
@ -88,28 +88,28 @@
.icon { .icon {
border-radius: var(--radius-s); border-radius: var(--radius-s);
height: var(--space-20); height: var(--size-20);
width: var(--space-20); width: var(--size-20);
flex-shrink: 0; flex-shrink: 0;
} }
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-8); gap: var(--size-8);
} }
.trunk-label { .trunk-label {
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
} }
.row_1 { .row_1 {
display: flex; display: flex;
gap: var(--space-6); gap: var(--size-6);
align-items: center; align-items: center;
color: var(--clr-theme-scale-ntrl-10); color: var(--clr-theme-scale-ntrl-10);
} }
.row_2 { .row_2 {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-4); gap: var(--size-4);
color: var(--clr-theme-scale-ntrl-40); color: var(--clr-theme-scale-ntrl-40);
} }
.small-count-badge { .small-count-badge {
@ -120,8 +120,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: var(--space-2); padding: var(--size-2);
min-width: var(--space-14); min-width: var(--size-14);
background-color: var(--clr-theme-err-element); background-color: var(--clr-theme-err-element);
color: var(--clr-theme-scale-ntrl-100); color: var(--clr-theme-scale-ntrl-100);
border-radius: var(--radius-m); border-radius: var(--radius-m);

22
gitbutler-ui/src/lib/components/Board.svelte
View File

@ -232,20 +232,20 @@
border-radius: var(--radius-l); border-radius: var(--radius-l);
width: 86%; width: 86%;
max-width: 45rem; max-width: 45rem;
padding: var(--space-32); padding: var(--size-32);
} }
.empty-board__image { .empty-board__image {
width: 14.125rem; width: 14.125rem;
margin-top: var(--space-10); margin-top: var(--size-10);
margin-bottom: var(--space-20); margin-bottom: var(--size-20);
transform: translateX(-3rem); transform: translateX(-3rem);
} }
.empty-board__about { .empty-board__about {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: var(--space-32); margin-bottom: var(--size-32);
} }
.empty-board__about h3 { .empty-board__about h3 {
@ -259,13 +259,13 @@
.empty-board__suggestions { .empty-board__suggestions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: var(--space-80); gap: var(--size-80);
} }
.empty-board__suggestions__block { .empty-board__suggestions__block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-16); gap: var(--size-16);
min-width: 8rem; min-width: 8rem;
} }
@ -276,8 +276,8 @@
.empty-board__suggestions__links { .empty-board__suggestions__links {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-6); gap: var(--size-6);
margin-left: calc(var(--space-4) * -1); margin-left: calc(var(--size-4) * -1);
} }
.empty-board__suggestions__link { .empty-board__suggestions__link {
@ -285,9 +285,9 @@
display: flex; display: flex;
width: fit-content; width: fit-content;
max-width: 100%; max-width: 100%;
padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4); padding: var(--size-2) var(--size-6) var(--size-2) var(--size-4);
border-radius: var(--radius-s); border-radius: var(--radius-s);
gap: var(--space-10); gap: var(--size-10);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
overflow: hidden; overflow: hidden;
@ -297,7 +297,7 @@
& span { & span {
color: var(--clr-theme-scale-ntrl-40); color: var(--clr-theme-scale-ntrl-40);
margin-top: calc(var(--space-6) / 2); margin-top: calc(var(--size-6) / 2);
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;

16
gitbutler-ui/src/lib/components/BranchCard.svelte
View File

@ -181,8 +181,8 @@
<ScrollableContainer <ScrollableContainer
wide wide
padding={{ padding={{
top: `var(--space-12)`, top: `var(--size-12)`,
bottom: `var(--space-12)` bottom: `var(--size-12)`
}} }}
> >
<div <div
@ -399,8 +399,8 @@
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
min-height: 100%; min-height: 100%;
gap: var(--space-8); gap: var(--size-8);
padding: var(--space-12); padding: var(--size-12);
} }
.card { .card {
@ -411,7 +411,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--space-8); gap: var(--size-8);
max-width: 14rem; max-width: 14rem;
} }
@ -425,7 +425,7 @@
color: var(--clr-theme-scale-ntrl-60); color: var(--clr-theme-scale-ntrl-60);
background: var(--clr-theme-container-light); background: var(--clr-theme-container-light);
justify-content: center; justify-content: center;
padding: var(--space-48) 0; padding: var(--size-48) 0;
border-radius: var(--radius-m); border-radius: var(--radius-m);
cursor: default; /* was defaulting to text cursor */ cursor: default; /* was defaulting to text cursor */
} }
@ -451,7 +451,7 @@
.new-branch__image { .new-branch__image {
width: 7.5rem; width: 7.5rem;
margin-bottom: var(--space-10); margin-bottom: var(--size-10);
} }
/* hunks drop zone */ /* hunks drop zone */
@ -484,7 +484,7 @@
.collapsed-lane-wrapper { .collapsed-lane-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--space-12); padding: var(--size-12);
height: 100%; height: 100%;
border-right: 1px solid var(--clr-theme-container-outline-light); border-right: 1px solid var(--clr-theme-container-outline-light);
} }

14
gitbutler-ui/src/lib/components/BranchFiles.svelte
View File

@ -70,15 +70,15 @@
} }
} }
.branch-files__header { .branch-files__header {
padding-top: var(--space-14); padding-top: var(--size-14);
padding-bottom: var(--space-12); padding-bottom: var(--size-12);
padding-left: var(--space-14); padding-left: var(--size-14);
padding-right: var(--space-14); padding-right: var(--size-14);
} }
.files-padding { .files-padding {
padding-top: 0; padding-top: 0;
padding-bottom: var(--space-12); padding-bottom: var(--size-12);
padding-left: var(--space-14); padding-left: var(--size-14);
padding-right: var(--space-14); padding-right: var(--size-14);
} }
</style> </style>

4
gitbutler-ui/src/lib/components/BranchFilesHeader.svelte
View File

@ -78,11 +78,11 @@
.header__title { .header__title {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-4); gap: var(--size-4);
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
} }
.header__left { .header__left {
display: flex; display: flex;
gap: var(--space-10); gap: var(--size-10);
} }
</style> </style>

44
gitbutler-ui/src/lib/components/BranchHeader.svelte
View File

@ -227,13 +227,13 @@
.header__wrapper { .header__wrapper {
z-index: 10; z-index: 10;
position: sticky; position: sticky;
top: var(--space-12); top: var(--size-12);
} }
.header { .header {
z-index: 2; z-index: 2;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
gap: var(--space-2); gap: var(--size-2);
&:hover { &:hover {
& .draggable { & .draggable {
@ -247,10 +247,10 @@
.header__top-overlay { .header__top-overlay {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
top: calc(var(--space-16) * -1); top: calc(var(--size-16) * -1);
left: 0; left: 0;
width: 100%; width: 100%;
height: var(--space-20); height: var(--size-20);
background: var(--target-branch-background); background: var(--target-branch-background);
/* background-color: red; */ /* background-color: red; */
} }
@ -258,14 +258,14 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: margin var(--transition-slow); transition: margin var(--transition-slow);
padding: var(--space-12); padding: var(--size-12);
gap: var(--space-10); gap: var(--size-10);
} }
.header__actions { .header__actions {
display: flex; display: flex;
gap: var(--space-4); gap: var(--size-4);
background: var(--clr-theme-container-pale); background: var(--clr-theme-container-pale);
padding: var(--space-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);
user-select: none; user-select: none;
@ -276,20 +276,20 @@
.header__buttons { .header__buttons {
display: flex; display: flex;
position: relative; position: relative;
gap: var(--space-4); gap: var(--size-4);
} }
.header__label { .header__label {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
align-items: center; align-items: center;
gap: var(--space-4); gap: var(--size-4);
} }
.draggable { .draggable {
display: flex; display: flex;
cursor: grab; cursor: grab;
position: absolute; position: absolute;
right: var(--space-4); right: var(--size-4);
top: var(--space-6); top: var(--size-6);
opacity: 0; opacity: 0;
color: var(--clr-theme-scale-ntrl-50); color: var(--clr-theme-scale-ntrl-50);
transition: transition:
@ -303,17 +303,17 @@
.branch-popup-menu { .branch-popup-menu {
position: absolute; position: absolute;
top: calc(100% + var(--space-4)); top: calc(100% + var(--size-4));
right: 0; right: 0;
z-index: 10; z-index: 10;
} }
.header__remote-branch { .header__remote-branch {
color: var(--clr-theme-scale-ntrl-50); color: var(--clr-theme-scale-ntrl-50);
padding-left: var(--space-2); padding-left: var(--size-2);
padding-right: var(--space-2); padding-right: var(--size-2);
display: flex; display: flex;
gap: var(--space-4); gap: var(--size-4);
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
white-space: nowrap; white-space: nowrap;
@ -327,8 +327,8 @@
user-select: none; user-select: none;
align-items: center; align-items: center;
height: 100%; height: 100%;
gap: var(--space-8); gap: var(--size-8);
padding: var(--space-8) var(--space-8) var(--space-20); padding: var(--size-8) var(--size-8) var(--size-20);
&:focus-within { &:focus-within {
outline: none; outline: none;
@ -339,13 +339,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--space-2); gap: var(--size-2);
} }
.collapsed-lane__draggable { .collapsed-lane__draggable {
cursor: grab; cursor: grab;
transform: rotate(90deg); transform: rotate(90deg);
margin-bottom: var(--space-4); margin-bottom: var(--size-4);
opacity: 0.4; opacity: 0.4;
transition: opacity var(--transition-fast); transition: opacity var(--transition-fast);
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
@ -364,14 +364,14 @@
height: 100%; height: 100%;
writing-mode: vertical-rl; writing-mode: vertical-rl;
gap: var(--space-8); gap: var(--size-8);
} }
.collapsed-lane__info__details { .collapsed-lane__info__details {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
align-items: center; align-items: center;
gap: var(--space-4); gap: var(--size-4);
} }
.collapsed-lane__label { .collapsed-lane__label {

2
gitbutler-ui/src/lib/components/BranchHeaderSecondaryActions.svelte
View File

@ -47,7 +47,7 @@
<style lang="post-css"> <style lang="post-css">
.branch-popup-menu { .branch-popup-menu {
position: absolute; position: absolute;
top: calc(100% + var(--space-4)); top: calc(100% + var(--size-4));
right: 0; right: 0;
z-index: 10; z-index: 10;
} }

8
gitbutler-ui/src/lib/components/BranchItem.svelte
View File

@ -55,10 +55,10 @@
<style lang="postcss"> <style lang="postcss">
.branch { .branch {
display: flex; display: flex;
gap: var(--space-10); gap: var(--size-10);
width: 100%; width: 100%;
padding: var(--space-10) var(--space-8); padding: var(--size-10) var(--size-8);
border-radius: var(--radius-m); border-radius: var(--radius-m);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
} }
@ -67,14 +67,14 @@
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
gap: var(--space-6); gap: var(--size-6);
overflow: hidden; overflow: hidden;
} }
.branch__details { .branch__details {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-6); gap: var(--size-6);
justify-content: space-between; justify-content: space-between;
} }

6
gitbutler-ui/src/lib/components/BranchLabel.svelte
View File

@ -58,7 +58,7 @@
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
spellcheck="false" spellcheck="false"
style={`width: calc(${inputWidth}px + var(--space-12))`} style={`width: calc(${inputWidth}px + var(--size-12))`}
/> />
{:else} {:else}
<div <div
@ -76,10 +76,10 @@
<style lang="postcss"> <style lang="postcss">
.branch-name, .branch-name,
.branch-name-input { .branch-name-input {
height: var(--space-20); height: var(--size-20);
pointer-events: auto; pointer-events: auto;
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
padding: var(--space-2) var(--space-4); padding: var(--size-2) var(--size-4);
border-radius: var(--radius-s); border-radius: var(--radius-s);
border: 1px solid transparent; border: 1px solid transparent;
} }

2
gitbutler-ui/src/lib/components/BranchLane.svelte
View File

@ -139,6 +139,6 @@
overflow: hidden; overflow: hidden;
align-items: self-start; align-items: self-start;
padding: var(--space-12) var(--space-12) var(--space-12) 0; padding: var(--size-12) var(--size-12) var(--size-12) 0;
} }
</style> </style>

30
gitbutler-ui/src/lib/components/BranchPreviewHeader.svelte
View File

@ -123,35 +123,35 @@
.header__wrapper { .header__wrapper {
z-index: 10; z-index: 10;
position: sticky; position: sticky;
top: var(--space-12); top: var(--size-12);
} }
.header { .header {
z-index: 2; z-index: 2;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
gap: var(--space-2); gap: var(--size-2);
} }
.header__top-overlay { .header__top-overlay {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
top: calc(var(--space-16) * -1); top: calc(var(--size-16) * -1);
left: 0; left: 0;
width: 100%; width: 100%;
height: var(--space-20); height: var(--size-20);
background: var(--target-branch-background); background: var(--target-branch-background);
} }
.header__info { .header__info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: margin var(--transition-slow); transition: margin var(--transition-slow);
padding: var(--space-12); padding: var(--size-12);
gap: var(--space-10); gap: var(--size-10);
} }
.header__actions { .header__actions {
display: flex; display: flex;
gap: var(--space-4); gap: var(--size-4);
background: var(--clr-theme-container-pale); background: var(--clr-theme-container-pale);
padding: var(--space-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);
user-select: none; user-select: none;
@ -159,21 +159,21 @@
.header__buttons { .header__buttons {
display: flex; display: flex;
position: relative; position: relative;
gap: var(--space-4); gap: var(--size-4);
} }
.header__label { .header__label {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
align-items: center; align-items: center;
gap: var(--space-4); gap: var(--size-4);
} }
.header__remote-branch { .header__remote-branch {
color: var(--clr-theme-scale-ntrl-50); color: var(--clr-theme-scale-ntrl-50);
padding-left: var(--space-2); padding-left: var(--size-2);
padding-right: var(--space-2); padding-right: var(--size-2);
display: flex; display: flex;
gap: var(--space-4); gap: var(--size-4);
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
white-space: nowrap; white-space: nowrap;
@ -184,8 +184,8 @@
cursor: default; cursor: default;
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-2); gap: var(--size-2);
padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4); padding: var(--size-2) var(--size-6) var(--size-2) var(--size-4);
border-radius: var(--radius-m); border-radius: var(--radius-m);
} }

12
gitbutler-ui/src/lib/components/Branches.svelte
View File

@ -216,11 +216,11 @@
.scroll-container { .scroll-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-12); gap: var(--size-12);
width: 100%; width: 100%;
padding-bottom: var(--space-16); padding-bottom: var(--size-16);
padding-left: var(--space-14); padding-left: var(--size-14);
padding-right: var(--space-14); padding-right: var(--size-14);
} }
.branch-list { .branch-list {
flex: 1; flex: 1;
@ -235,7 +235,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: var(--space-2); gap: var(--size-2);
} }
/* EMPTY STATE */ /* EMPTY STATE */
@ -245,7 +245,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: var(--space-10); gap: var(--size-10);
} }
.branch-list__empty-state__image { .branch-list__empty-state__image {

8
gitbutler-ui/src/lib/components/BranchesHeader.svelte
View File

@ -49,8 +49,8 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding: var(--space-14) var(--space-14) var(--space-12) var(--space-14); padding: var(--size-14) var(--size-14) var(--size-12) var(--size-14);
gap: var(--space-8); gap: var(--size-8);
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
transition: border-bottom var(--transition-fast); transition: border-bottom var(--transition-fast);
position: relative; position: relative;
@ -60,7 +60,7 @@
} }
.filter-popup-menu { .filter-popup-menu {
position: absolute; position: absolute;
top: calc(var(--size-btn-m) + var(--space-4)); top: calc(var(--size-control-m) + var(--size-4));
right: 0; right: 0;
z-index: 10; z-index: 10;
min-width: 10rem; min-width: 10rem;
@ -68,6 +68,6 @@
.branches-title { .branches-title {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-4); gap: var(--size-4);
} }
</style> </style>

18
gitbutler-ui/src/lib/components/Button.svelte
View File

@ -83,12 +83,12 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: var(--space-4) var(--space-6); padding: var(--size-4) var(--size-6);
border-radius: var(--radius-m); border-radius: var(--radius-m);
flex-shrink: 0; flex-shrink: 0;
gap: var(--space-2); gap: var(--size-2);
height: var(--size-btn-m); height: var(--size-control-m);
min-width: var(--size-btn-m); min-width: var(--size-control-m);
background: transparent; background: transparent;
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
cursor: pointer; cursor: pointer;
@ -114,7 +114,7 @@
} }
.label { .label {
display: inline-flex; display: inline-flex;
padding: 0 var(--space-2); padding: 0 var(--size-2);
} }
.neutral-filled { .neutral-filled {
@ -191,13 +191,13 @@
/* SIZE MODIFIERS */ /* SIZE MODIFIERS */
.btn.medium { .btn.medium {
height: var(--size-btn-m); height: var(--size-control-m);
padding: var(--space-4) var(--space-6); padding: var(--size-4) var(--size-6);
} }
.btn.large { .btn.large {
height: var(--size-btn-l); height: var(--size-control-l);
padding: var(--space-6) var(--space-8); padding: var(--size-6) var(--size-8);
} }
/* DROPDOWN */ /* DROPDOWN */

10
gitbutler-ui/src/lib/components/CardSection.svelte
View File

@ -16,27 +16,27 @@
.section { .section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-16); gap: var(--size-16);
} }
.header { .header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-4); gap: var(--size-4);
} }
.title { .title {
color: var(--clr-theme-scale-ntrl-40); color: var(--clr-theme-scale-ntrl-40);
} }
.description { .description {
color: var(--clr-theme-scale-ntrl-50); color: var(--clr-theme-scale-ntrl-50);
padding: var(--space-4) 0; padding: var(--size-4) 0;
} }
.content { .content {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--clr-theme-scale-ntrl-40); color: var(--clr-theme-scale-ntrl-40);
border-radius: var(--radius-m); border-radius: var(--radius-m);
padding: 0 var(--space-16); padding: 0 var(--size-16);
gap: var(--space-8); gap: var(--size-8);
} }
.disabled { .disabled {
pointer-events: none; pointer-events: none;

8
gitbutler-ui/src/lib/components/Checkbox.svelte
View File

@ -35,8 +35,8 @@
.checkbox { .checkbox {
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
width: var(--space-16); width: var(--size-16);
height: var(--space-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-theme-container-light); background-color: var(--clr-theme-container-light);
@ -129,8 +129,8 @@
/* modifiers */ /* modifiers */
&.small { &.small {
width: var(--space-14); width: var(--size-14);
height: var(--space-14); height: var(--size-14);
} }
} }
</style> </style>

2
gitbutler-ui/src/lib/components/CloudForm.svelte
View File

@ -132,7 +132,7 @@
.aigen-wrap { .aigen-wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-4); gap: var(--size-4);
} }
.api-link { .api-link {

26
gitbutler-ui/src/lib/components/CommitCard.svelte
View File

@ -179,7 +179,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: var(--space-6); border-radius: var(--size-6);
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
border: 1px solid var(--clr-theme-container-outline-light); border: 1px solid var(--clr-theme-container-outline-light);
overflow: hidden; overflow: hidden;
@ -200,8 +200,8 @@
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-10); gap: var(--size-10);
padding: var(--space-14); padding: var(--size-14);
} }
.is-commit-open { .is-commit-open {
@ -212,7 +212,7 @@
); );
& .commit__header { & .commit__header {
padding-bottom: var(--space-16); padding-bottom: var(--size-16);
border-bottom: 1px solid var(--clr-theme-container-outline-light); border-bottom: 1px solid var(--clr-theme-container-outline-light);
&:hover { &:hover {
@ -225,14 +225,14 @@
} }
& .commit__message { & .commit__message {
margin-bottom: var(--space-4); margin-bottom: var(--size-4);
} }
} }
.commit__message { .commit__message {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-6); gap: var(--size-6);
} }
.commit__title { .commit__title {
@ -254,7 +254,7 @@
.commit__row { .commit__row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-8); gap: var(--size-8);
} }
.commit__author { .commit__author {
@ -262,17 +262,17 @@
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-6); gap: var(--size-6);
} }
.commit__avatar { .commit__avatar {
width: var(--space-16); width: var(--size-16);
height: var(--space-16); height: var(--size-16);
border-radius: 100%; border-radius: 100%;
} }
.commit__author-name { .commit__author-name {
max-width: calc(100% - var(--space-16)); max-width: calc(100% - var(--size-16));
} }
.commit__time, .commit__time,
@ -287,8 +287,8 @@
.files__footer { .files__footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: var(--space-8); gap: var(--size-8);
padding: var(--space-14); padding: var(--size-14);
border-top: 1px solid var(--clr-theme-container-outline-light); border-top: 1px solid var(--clr-theme-container-outline-light);
} }
</style> </style>

26
gitbutler-ui/src/lib/components/CommitDialog.svelte
View File

@ -283,7 +283,7 @@
.commit-box { .commit-box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--space-14); padding: var(--size-14);
background: var(--clr-theme-container-light); background: var(--clr-theme-container-light);
border-top: 1px solid var(--clr-theme-container-outline-light); border-top: 1px solid var(--clr-theme-container-outline-light);
transition: background-color var(--transition-medium); transition: background-color var(--transition-medium);
@ -293,14 +293,14 @@
.commit-box__expander { .commit-box__expander {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: var(--space-12); margin-bottom: var(--size-12);
} }
.commit-box__textarea-wrapper { .commit-box__textarea-wrapper {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-4); gap: var(--size-4);
padding: 0; padding: 0;
} }
@ -309,7 +309,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
gap: var(--space-16); gap: var(--size-16);
background: none; background: none;
resize: none; resize: none;
&:focus { &:focus {
@ -320,37 +320,37 @@
.commit-box__textarea-tooltip { .commit-box__textarea-tooltip {
position: absolute; position: absolute;
display: flex; display: flex;
bottom: var(--space-12); bottom: var(--size-12);
left: var(--space-12); left: var(--size-12);
padding: var(--space-2); padding: var(--size-2);
border-radius: 100%; border-radius: 100%;
background: var(--clr-theme-container-pale); background: var(--clr-theme-container-pale);
color: var(--clr-theme-scale-ntrl-40); color: var(--clr-theme-scale-ntrl-40);
} }
.commit-box__textarea__title { .commit-box__textarea__title {
padding: var(--space-12) var(--space-12) 0 var(--space-12); padding: var(--size-12) var(--size-12) 0 var(--size-12);
} }
.commit-box__textarea__description { .commit-box__textarea__description {
padding: 0 var(--space-12) var(--space-12) var(--space-12); padding: 0 var(--size-12) var(--size-12) var(--size-12);
} }
.commit-box__textarea_bottom-padding { .commit-box__textarea_bottom-padding {
padding-bottom: var(--space-48); padding-bottom: var(--size-48);
} }
.commit-box__texarea-actions { .commit-box__texarea-actions {
position: absolute; position: absolute;
display: flex; display: flex;
right: var(--space-12); right: var(--size-12);
bottom: var(--space-12); bottom: var(--size-12);
} }
.actions { .actions {
display: flex; display: flex;
justify-content: right; justify-content: right;
gap: var(--space-6); gap: var(--size-6);
} }
.commit-box__expanded { .commit-box__expanded {

8
gitbutler-ui/src/lib/components/CommitList.svelte
View File

@ -75,15 +75,15 @@
.commit-list__content { .commit-list__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 var(--space-14) var(--space-14) var(--space-14); padding: 0 var(--size-14) var(--size-14) var(--size-14);
gap: var(--space-8); gap: var(--size-8);
} }
.upstream-message { .upstream-message {
color: var(--clr-theme-scale-warn-30); color: var(--clr-theme-scale-warn-30);
border-radius: var(--radius-m); border-radius: var(--radius-m);
background: var(--clr-theme-scale-warn-80); background: var(--clr-theme-scale-warn-80);
padding: var(--space-12); padding: var(--size-12);
margin-left: var(--space-16); margin-left: var(--size-16);
} }
.commits { .commits {

2
gitbutler-ui/src/lib/components/CommitListFooter.svelte
View File

@ -130,7 +130,7 @@
<style lang="postcss"> <style lang="postcss">
.hasCommits { .hasCommits {
padding-left: var(--space-16); padding-left: var(--size-16);
} }
.actions { .actions {
&:empty { &:empty {

6
gitbutler-ui/src/lib/components/CommitListHeader.svelte
View File

@ -38,9 +38,9 @@
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: var(--space-16) var(--space-14) var(--space-16) var(--space-14); padding: var(--size-16) var(--size-14) var(--size-16) var(--size-14);
justify-content: space-between; justify-content: space-between;
gap: var(--space-8); gap: var(--size-8);
&:hover { &:hover {
& .expander { & .expander {
@ -52,7 +52,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
gap: var(--space-8); gap: var(--size-8);
overflow-x: hidden; overflow-x: hidden;
} }

2
gitbutler-ui/src/lib/components/CommitListItem.svelte
View File

@ -148,7 +148,7 @@
<style lang="postcss"> <style lang="postcss">
.commit-list-item { .commit-list-item {
padding: 0 0 var(--space-6) var(--space-16); padding: 0 0 var(--size-6) var(--size-16);
position: relative; position: relative;
&:last-child { &:last-child {

12
gitbutler-ui/src/lib/components/CredentialCheck.svelte
View File

@ -120,14 +120,14 @@
.credential-check { .credential-check {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-16); gap: var(--size-16);
} }
.checks-list { .checks-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-4); gap: var(--size-4);
margin-top: var(--space-4); margin-top: var(--size-4);
} }
.check-icon { .check-icon {
@ -137,11 +137,11 @@
.check-result { .check-result {
display: flex; display: flex;
gap: var(--space-6); gap: var(--size-6);
} }
.help-text { .help-text {
margin-top: var(--space-6); margin-top: var(--size-6);
} }
.disclaimer { .disclaimer {
@ -149,6 +149,6 @@
background: var(--clr-theme-container-pale); background: var(--clr-theme-container-pale);
border-radius: var(--radius-m); border-radius: var(--radius-m);
background: var(--clr-theme-container-pale); background: var(--clr-theme-container-pale);
padding: var(--space-10) var(--space-12); padding: var(--size-10) var(--size-12);
} }
</style> </style>

24
gitbutler-ui/src/lib/components/DecorativeSplitView.svelte
View File

@ -92,7 +92,7 @@
display: grid; display: grid;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: var(--space-40) calc(var(--space-40) * 2); padding: var(--size-40) calc(var(--size-40) * 2);
flex: 1; flex: 1;
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
overflow-y: auto; overflow-y: auto;
@ -111,7 +111,7 @@
flex: 1; flex: 1;
min-width: 20rem; min-width: 20rem;
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
padding: var(--space-20) var(--space-20) var(--space-20) 0; padding: var(--size-20) var(--size-20) var(--size-20) 0;
} }
.right-side-wrapper { .right-side-wrapper {
@ -121,7 +121,7 @@
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
background-color: var(--clr-theme-scale-pop-80); background-color: var(--clr-theme-scale-pop-80);
border-radius: var(--space-8); border-radius: var(--size-8);
} }
.right-side__header { .right-side__header {
@ -132,7 +132,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding: var(--space-20); padding: var(--size-20);
} }
.right-side__footer { .right-side__footer {
@ -143,19 +143,19 @@
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
padding: var(--space-32); padding: var(--size-32);
} }
.wordmark { .wordmark {
position: absolute; position: absolute;
color: var(--clr-theme-scale-pop-30); color: var(--clr-theme-scale-pop-30);
right: var(--space-32); right: var(--size-32);
bottom: var(--space-32); bottom: var(--size-32);
} }
.account-button { .account-button {
right: var(--space-32); right: var(--size-32);
top: var(--space-32); top: var(--size-32);
} }
/* links */ /* links */
@ -165,14 +165,14 @@
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
gap: var(--space-4); gap: var(--size-4);
} }
.right-side__link { .right-side__link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-10); gap: var(--size-10);
padding: var(--space-6); padding: var(--size-6);
border-radius: var(--radius-m); border-radius: var(--radius-m);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);

4
gitbutler-ui/src/lib/components/DetailsForm.svelte
View File

@ -52,12 +52,12 @@
.fields-wrapper { .fields-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-16); gap: var(--size-16);
} }
.description-wrapper { .description-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-8); gap: var(--size-8);
} }
</style> </style>

8
gitbutler-ui/src/lib/components/DomainButton.svelte
View File

@ -41,17 +41,17 @@
.domain-button { .domain-button {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-10); gap: var(--size-10);
border-radius: var(--radius-m); border-radius: var(--radius-m);
padding: var(--space-10); padding: var(--size-10);
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
} }
.icon { .icon {
border-radius: var(--radius-s); border-radius: var(--radius-s);
height: var(--space-20); height: var(--size-20);
width: var(--space-20); width: var(--size-20);
flex-shrink: 0; flex-shrink: 0;
} }

2
gitbutler-ui/src/lib/components/DropDownButton.svelte
View File

@ -100,7 +100,7 @@
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 100%; bottom: 100%;
padding-bottom: var(--space-4); padding-bottom: var(--size-4);
z-index: 50; z-index: 50;
} }

2
gitbutler-ui/src/lib/components/DropzoneOverlay.svelte
View File

@ -55,7 +55,7 @@
.dropzone-content { .dropzone-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-6); gap: var(--size-6);
color: var(--clr-theme-scale-pop-40); color: var(--clr-theme-scale-pop-40);
} }

18
gitbutler-ui/src/lib/components/FileCardHeader.svelte
View File

@ -72,29 +72,29 @@
<style lang="postcss"> <style lang="postcss">
.header { .header {
display: flex; display: flex;
padding: var(--space-16); padding: var(--size-16);
gap: var(--space-12); gap: var(--size-12);
border-bottom: 1px solid var(--clr-theme-container-outline-light); border-bottom: 1px solid var(--clr-theme-container-outline-light);
} }
.header__inner { .header__inner {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
gap: var(--space-6); gap: var(--size-6);
overflow: hidden; overflow: hidden;
} }
.header__info { .header__info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-8); gap: var(--size-8);
width: 100%; width: 100%;
} }
.header__tags { .header__tags {
display: flex; display: flex;
gap: var(--space-6); gap: var(--size-6);
} }
.header__tag-group { .header__tag-group {
display: flex; display: flex;
gap: var(--space-2); gap: var(--size-2);
} }
.header__filetitle { .header__filetitle {
width: 100%; width: 100%;
@ -109,8 +109,8 @@
} }
.icon { .icon {
flex-shrink: 0; flex-shrink: 0;
width: var(--space-14); width: var(--size-14);
height: var(--space-14); height: var(--size-14);
margin-top: calc(var(--space-2) / 2); margin-top: calc(var(--size-2) / 2);
} }
</style> </style>

6
gitbutler-ui/src/lib/components/FileContextMenu.svelte
View File

@ -126,10 +126,10 @@
<style lang="postcss"> <style lang="postcss">
.file-list { .file-list {
list-style: disc; list-style: disc;
padding-left: var(--space-20); padding-left: var(--size-20);
padding-top: var(--space-6); padding-top: var(--size-6);
} }
.file-list li { .file-list li {
padding: var(--space-2); padding: var(--size-2);
} }
</style> </style>

15
gitbutler-ui/src/lib/components/FileDiff.svelte
View File

@ -67,7 +67,12 @@
<span class="added">+{added}</span> <span class="added">+{added}</span>
<span class="removed">-{removed}</span> <span class="removed">-{removed}</span>
{#if section.hunk.locked} {#if section.hunk.locked}
<div use:tooltip={{ text: getLockedTooltip(section.hunk.lockedTo), delay: 500 }}> <div
use:tooltip={{
text: getLockedTooltip(section.hunk.lockedTo),
delay: 500
}}
>
<Icon name="locked-small" color="warn" /> <Icon name="locked-small" color="warn" />
</div> </div>
{/if} {/if}
@ -98,18 +103,18 @@
position: relative; position: relative;
max-height: 100%; max-height: 100%;
flex-shrink: 0; flex-shrink: 0;
padding: var(--space-16); padding: var(--size-16);
gap: var(--space-16); gap: var(--size-16);
} }
.hunk-wrapper { .hunk-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-10); gap: var(--size-10);
} }
.indicators { .indicators {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-2); gap: var(--size-2);
} }
.added { .added {
color: #45b156; color: #45b156;

16
gitbutler-ui/src/lib/components/FileListItem.svelte
View File

@ -113,23 +113,23 @@
.list-item-wrapper { .list-item-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-8); gap: var(--size-8);
} }
.file-list-item { .file-list-item {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
height: var(--space-28); height: var(--size-28);
padding: var(--space-4) var(--space-8); padding: var(--size-4) var(--size-8);
gap: var(--space-16); gap: var(--size-16);
border-radius: var(--radius-s); border-radius: var(--radius-s);
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
user-select: none; user-select: none;
outline: none; outline: none;
margin-bottom: var(--space-2); margin-bottom: var(--size-2);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
background: var(--clr-theme-container-light); background: var(--clr-theme-container-light);
&:not(.selected-draggable):hover { &:not(.selected-draggable):hover {
@ -147,7 +147,7 @@
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
gap: var(--space-10); gap: var(--size-10);
overflow: hidden; overflow: hidden;
} }
.info { .info {
@ -155,12 +155,12 @@
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
gap: var(--space-6); gap: var(--size-6);
overflow: hidden; overflow: hidden;
} }
.file-icon { .file-icon {
width: var(--space-12); width: var(--size-12);
} }
.name { .name {
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);

4
gitbutler-ui/src/lib/components/FileStatusCircle.svelte
View File

@ -14,8 +14,8 @@
<style lang="postcss"> <style lang="postcss">
.status { .status {
border-radius: 100%; border-radius: 100%;
width: var(--space-8); width: var(--size-8);
height: var(--space-8); height: var(--size-8);
border-radius: 100%; border-radius: 100%;
flex-shrink: 0; flex-shrink: 0;
} }

2
gitbutler-ui/src/lib/components/FileStatusIcons.svelte
View File

@ -30,7 +30,7 @@
.file-status { .file-status {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-4); gap: var(--size-4);
} }
.file-status__icons { .file-status__icons {
display: flex; display: flex;

6
gitbutler-ui/src/lib/components/FileTree.svelte
View File

@ -167,11 +167,11 @@
} }
.line-wrapper { .line-wrapper {
position: relative; position: relative;
padding-left: var(--space-12); padding-left: var(--size-12);
padding-right: var(--space-6); padding-right: var(--size-6);
} }
.line { .line {
width: var(--space-2); width: var(--size-2);
height: 100%; height: 100%;
border-left: 1px dashed var(--clr-theme-scale-ntrl-60); border-left: 1px dashed var(--clr-theme-scale-ntrl-60);
} }

8
gitbutler-ui/src/lib/components/Footer.svelte
View File

@ -34,21 +34,21 @@
.footer { .footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: var(--space-12); padding: var(--size-12);
border-top: 1px solid var(--clr-theme-container-outline-light); border-top: 1px solid var(--clr-theme-container-outline-light);
border-color: var(--clr-theme-container-outline-light); border-color: var(--clr-theme-container-outline-light);
} }
.left-btns { .left-btns {
display: flex; display: flex;
gap: var(--space-2); gap: var(--size-2);
} }
.footer.collapsed { .footer.collapsed {
flex-direction: column; flex-direction: column;
padding: 0 var(--space-14); padding: 0 var(--size-14);
align-items: flex-start; align-items: flex-start;
gap: var(--space-4); gap: var(--size-4);
border: none; border: none;
& .left-btns { & .left-btns {

34
gitbutler-ui/src/lib/components/GithubIntegration.svelte
View File

@ -165,14 +165,14 @@
.step-section { .step-section {
display: flex; display: flex;
gap: var(--space-16); gap: var(--size-16);
margin-left: var(--space-8); margin-left: var(--size-8);
&:last-child { &:last-child {
& .step-section__content { & .step-section__content {
border-bottom: none; border-bottom: none;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: var(--space-12); padding-bottom: var(--size-12);
} }
} }
} }
@ -181,10 +181,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
gap: var(--space-12); gap: var(--size-12);
margin-left: var(--space-8); margin-left: var(--size-8);
padding-bottom: var(--space-20); padding-bottom: var(--size-20);
margin-bottom: var(--space-20); margin-bottom: var(--size-20);
border-bottom: 1px solid var(--clr-theme-container-outline-light); border-bottom: 1px solid var(--clr-theme-container-outline-light);
} }
@ -192,15 +192,15 @@
position: relative; position: relative;
width: 1px; width: 1px;
border-right: 1px dashed var(--clr-theme-scale-ntrl-60); border-right: 1px dashed var(--clr-theme-scale-ntrl-60);
margin-top: var(--space-4); margin-top: var(--size-4);
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: var(--space-10); width: var(--size-10);
height: var(--space-10); height: var(--size-10);
background-color: var(--clr-theme-scale-ntrl-60); background-color: var(--clr-theme-scale-ntrl-60);
border-radius: 100%; border-radius: 100%;
} }
@ -209,15 +209,15 @@
.step-last { .step-last {
position: relative; position: relative;
width: 1px; width: 1px;
margin-top: var(--space-4); margin-top: var(--size-4);
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: var(--space-10); width: var(--size-10);
height: var(--space-10); height: var(--size-10);
background-color: var(--clr-theme-scale-ntrl-60); background-color: var(--clr-theme-scale-ntrl-60);
border-radius: 100%; border-radius: 100%;
} }
@ -232,18 +232,18 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
bottom: calc(var(--space-4) * -1); bottom: calc(var(--size-4) * -1);
right: calc(var(--space-4) * -1); right: calc(var(--size-4) * -1);
background-color: var(--clr-theme-scale-ntrl-100); background-color: var(--clr-theme-scale-ntrl-100);
border-radius: 50px; border-radius: 50px;
} }
.code-wrapper { .code-wrapper {
display: flex; display: flex;
gap: var(--space-10); gap: var(--size-10);
align-items: center; align-items: center;
align-self: flex-start; align-self: flex-start;
padding: var(--space-6) var(--space-6) var(--space-6) var(--space-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-theme-container-pale); background-color: var(--clr-theme-container-pale);
user-select: text; user-select: text;

4
gitbutler-ui/src/lib/components/HunkLine.svelte
View File

@ -95,7 +95,7 @@
.selectable-wrapper { .selectable-wrapper {
cursor: text; cursor: text;
display: inline-block; display: inline-block;
text-indent: var(--space-4); text-indent: var(--size-4);
margin-right: var(--space-4); margin-right: var(--size-4);
} }
</style> </style>

2
gitbutler-ui/src/lib/components/Icon.svelte
View File

@ -46,7 +46,7 @@
<style lang="postcss"> <style lang="postcss">
.icon-wrapper { .icon-wrapper {
--spinner-stroke-width: calc(var(--space-2) / 1.4); --spinner-stroke-width: calc(var(--size-2) / 1.4);
flex-shrink: 0; flex-shrink: 0;
pointer-events: none; pointer-events: none;
display: inline-block; display: inline-block;

24
gitbutler-ui/src/lib/components/IconButton.svelte
View File

@ -52,23 +52,23 @@
cursor: default; cursor: default;
} }
.x-large { .x-large {
height: var(--size-btn-xl); height: var(--size-control-xl);
width: var(--size-btn-xl); width: var(--size-control-xl);
padding: var(--space-12); padding: var(--size-12);
} }
.large { .large {
height: var(--size-btn-l); height: var(--size-control-l);
width: var(--size-btn-l); width: var(--size-control-l);
padding: var(--space-8); padding: var(--size-8);
} }
.medium { .medium {
height: var(--size-btn-m); height: var(--size-control-m);
width: var(--size-btn-m); width: var(--size-control-m);
padding: var(--space-4); padding: var(--size-4);
} }
.small { .small {
height: var(--size-btn-s); height: var(--size-control-s);
width: var(--size-btn-s); width: var(--size-control-s);
padding: var(--space-2); padding: var(--size-2);
} }
</style> </style>

4
gitbutler-ui/src/lib/components/IconLink.svelte
View File

@ -16,8 +16,8 @@
.link { .link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-10); gap: var(--size-10);
padding: var(--space-4) var(--space-6); padding: var(--size-4) var(--size-6);
border-radius: var(--radius-m); border-radius: var(--radius-m);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);

14
gitbutler-ui/src/lib/components/InfoMessage.svelte
View File

@ -94,9 +94,9 @@
.info-message { .info-message {
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
display: flex; display: flex;
padding: var(--space-16); padding: var(--size-16);
border-radius: var(--radius-m); border-radius: var(--radius-m);
gap: var(--space-12); gap: var(--size-12);
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
transition: transition:
background-color var(--transition-slow), background-color var(--transition-slow),
@ -106,18 +106,18 @@
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
gap: var(--space-12); gap: var(--size-12);
overflow-x: hidden; overflow-x: hidden;
} }
.info-message__content { .info-message__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-8); gap: var(--size-8);
user-select: text; user-select: text;
} }
.info-message__actions { .info-message__actions {
display: flex; display: flex;
gap: var(--space-6); gap: var(--size-6);
justify-content: flex-end; justify-content: flex-end;
} }
.info-message__text { .info-message__text {
@ -181,10 +181,10 @@
word-break: break-all; /* allow long links to wrap */ word-break: break-all; /* allow long links to wrap */
} }
:global(.info-message__text p:not(:last-child)) { :global(.info-message__text p:not(:last-child)) {
margin-bottom: var(--space-10); margin-bottom: var(--size-10);
} }
:global(.info-message__text ul) { :global(.info-message__text ul) {
list-style-type: circle; list-style-type: circle;
padding: 0 0 0 var(--space-16); padding: 0 0 0 var(--size-16);
} }
</style> </style>

8
gitbutler-ui/src/lib/components/KeysForm.svelte
View File

@ -228,7 +228,7 @@
.git-auth-wrap { .git-auth-wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-16); gap: var(--size-16);
& p { & p {
color: var(--clr-theme-scale-ntrl-30); color: var(--clr-theme-scale-ntrl-30);
@ -238,20 +238,20 @@
.inputs-group { .inputs-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-16); gap: var(--size-16);
width: 100%; width: 100%;
} }
.input-with-button { .input-with-button {
display: flex; display: flex;
gap: var(--space-8); gap: var(--size-8);
align-items: flex-end; align-items: flex-end;
} }
.row-buttons { .row-buttons {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: var(--space-8); gap: var(--size-8);
} }
.git-radio { .git-radio {

2
gitbutler-ui/src/lib/components/Link.svelte
View File

@ -52,7 +52,7 @@
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--space-2); gap: var(--size-2);
border-radius: var(--radius-m); border-radius: var(--radius-m);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
text-decoration: underline; text-decoration: underline;

4
gitbutler-ui/src/lib/components/ListItem.svelte
View File

@ -31,7 +31,7 @@
align-items: center; align-items: center;
color: var(--clr-theme-scale-ntrl-10); color: var(--clr-theme-scale-ntrl-10);
font-weight: 700; font-weight: 700;
padding: var(--space-10) var(--space-10); padding: var(--size-10) var(--size-10);
justify-content: space-between; justify-content: space-between;
border-radius: var(--radius-m); border-radius: var(--radius-m);
width: 100%; width: 100%;
@ -53,7 +53,7 @@
color: var(--clr-theme-scale-ntrl-50); color: var(--clr-theme-scale-ntrl-50);
} }
& .label { & .label {
height: var(--space-16); height: var(--size-16);
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }

16
gitbutler-ui/src/lib/components/Modal.svelte
View File

@ -54,38 +54,38 @@
<style lang="postcss"> <style lang="postcss">
.modal__header { .modal__header {
display: flex; display: flex;
padding: var(--space-16); padding: var(--size-16);
gap: var(--space-8); gap: var(--size-8);
border-bottom: 1px solid var(--clr-theme-container-outline-light); border-bottom: 1px solid var(--clr-theme-container-outline-light);
} }
.modal__header__content { .modal__header__content {
display: flex; display: flex;
gap: var(--space-8); gap: var(--size-8);
flex: 1; flex: 1;
} }
.modal__header__actions { .modal__header__actions {
display: flex; display: flex;
gap: var(--space-8); gap: var(--size-8);
} }
.modal__body { .modal__body {
overflow: auto; overflow: auto;
padding: var(--space-16); padding: var(--size-16);
} }
.modal__footer { .modal__footer {
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: flex-end; justify-content: flex-end;
gap: var(--space-8); gap: var(--size-8);
padding: var(--space-16); padding: var(--size-16);
border-top: 1px solid var(--clr-theme-container-outline-light); border-top: 1px solid var(--clr-theme-container-outline-light);
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
} }
.adjust-header { .adjust-header {
margin-top: var(--space-6); margin-top: var(--size-6);
} }
</style> </style>

20
gitbutler-ui/src/lib/components/Navigation.svelte
View File

@ -144,7 +144,7 @@
& .folding-button { & .folding-button {
pointer-events: auto; pointer-events: auto;
opacity: 1; opacity: 1;
right: calc(var(--space-6) * -1); right: calc(var(--size-6) * -1);
} }
} }
} }
@ -160,19 +160,19 @@
} }
.drag-region { .drag-region {
flex-shrink: 0; flex-shrink: 0;
height: var(--space-20); height: var(--size-20);
} }
.navigation-top { .navigation-top {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: var(--space-24); padding-bottom: var(--size-24);
padding-left: var(--space-14); padding-left: var(--size-14);
padding-right: var(--space-14); padding-right: var(--size-14);
} }
.domains { .domains {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-4); gap: var(--size-4);
} }
.resizer-wrapper { .resizer-wrapper {
@ -180,7 +180,7 @@
top: 0; top: 0;
right: 0; right: 0;
height: 100%; height: 100%;
width: var(--space-4); width: var(--size-4);
} }
.folding-button { .folding-button {
@ -189,10 +189,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
right: calc(var(--space-4) * -1); right: calc(var(--size-4) * -1);
top: 50%; top: 50%;
width: 0.875rem; width: 0.875rem;
height: var(--space-36); height: var(--size-36);
background: var(--clr-theme-container-light); background: var(--clr-theme-container-light);
border-radius: var(--radius-m); border-radius: var(--radius-m);
border: 1px solid var(--clr-theme-container-outline-light); border: 1px solid var(--clr-theme-container-outline-light);
@ -234,7 +234,7 @@
.navigation.collapsed { .navigation.collapsed {
width: auto; width: auto;
justify-content: space-between; justify-content: space-between;
padding-bottom: var(--space-16); padding-bottom: var(--size-16);
} }
.resizer-hovered { .resizer-hovered {

10
gitbutler-ui/src/lib/components/NewBranchDropZone.svelte
View File

@ -88,7 +88,7 @@
height: 100%; height: 100%;
user-select: none; user-select: none;
display: flex; display: flex;
padding: var(--space-12); padding: var(--size-12);
} }
.new-virtual-branch { .new-virtual-branch {
@ -100,8 +100,8 @@
border-radius: var(--radius-m); border-radius: var(--radius-m);
border: 1px dashed color-mix(in srgb, var(--clr-theme-container-outline-pale) 50%, transparent); border: 1px dashed color-mix(in srgb, var(--clr-theme-container-outline-pale) 50%, transparent);
background-color: transparent; background-color: transparent;
padding: var(--space-20); padding: var(--size-20);
gap: var(--space-8); gap: var(--size-8);
outline-color: color-mix(in srgb, var(--clr-theme-scale-pop-40) 0%, transparent); outline-color: color-mix(in srgb, var(--clr-theme-scale-pop-40) 0%, transparent);
outline-style: dashed; outline-style: dashed;
@ -120,9 +120,9 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--space-12); gap: var(--size-12);
transition: transform var(--transition-medium); transition: transform var(--transition-medium);
padding: var(--space-20) var(--space-24) var(--space-16) var(--space-24); padding: var(--size-20) var(--size-24) var(--size-16) var(--size-24);
} }
/* ILLUSTRATION */ /* ILLUSTRATION */

16
gitbutler-ui/src/lib/components/NotOnGitButlerBranch.svelte
View File

@ -95,31 +95,31 @@
<style lang="postcss"> <style lang="postcss">
.project-name { .project-name {
display: flex; display: flex;
gap: var(--space-8); gap: var(--size-8);
align-items: center; align-items: center;
line-height: 120%; line-height: 120%;
color: var(--clr-theme-scale-ntrl-30); color: var(--clr-theme-scale-ntrl-30);
margin-bottom: var(--space-20); margin-bottom: var(--size-20);
} }
.switchrepo__title { .switchrepo__title {
color: var(--clr-theme-scale-ntrl-30); color: var(--clr-theme-scale-ntrl-30);
margin-bottom: var(--space-12); margin-bottom: var(--size-12);
} }
.switchrepo__message { .switchrepo__message {
color: var(--clr-theme-scale-ntrl-50); color: var(--clr-theme-scale-ntrl-50);
margin-bottom: var(--space-20); margin-bottom: var(--size-20);
} }
.switchrepo__actions { .switchrepo__actions {
display: flex; display: flex;
gap: var(--space-8); gap: var(--size-8);
padding-bottom: var(--space-24); padding-bottom: var(--size-24);
flex-wrap: wrap; flex-wrap: wrap;
} }
.switchrepo__project { .switchrepo__project {
padding-top: var(--space-24); padding-top: var(--size-24);
border-top: 1px dashed var(--clr-theme-scale-ntrl-60); border-top: 1px dashed var(--clr-theme-scale-ntrl-60);
} }
@ -127,6 +127,6 @@
font-family: 'Spline Sans Mono', monospace; font-family: 'Spline Sans Mono', monospace;
border-radius: var(--radius-s); border-radius: var(--radius-s);
background: var(--clr-theme-container-sub); background: var(--clr-theme-container-sub);
padding: var(--space-2) var(--space-4); padding: var(--size-2) var(--size-4);
} }
</style> </style>

6
gitbutler-ui/src/lib/components/Overlay.svelte
View File

@ -55,15 +55,15 @@
/* modifiers */ /* modifiers */
.s-large { .s-large {
max-width: calc(var(--space-64) * 13); max-width: calc(var(--size-64) * 13);
} }
.s-default { .s-default {
max-width: calc(var(--space-64) * 9); max-width: calc(var(--size-64) * 9);
} }
.s-small { .s-small {
max-width: calc(var(--space-64) * 6); max-width: calc(var(--size-64) * 6);
} }
.open-modal { .open-modal {

2
gitbutler-ui/src/lib/components/PreferencesForm.svelte
View File

@ -68,6 +68,6 @@
.wrapper { .wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-8); gap: var(--size-8);
} }
</style> </style>

16
gitbutler-ui/src/lib/components/ProblemLoadingRepo.svelte
View File

@ -72,37 +72,37 @@
<style lang="postcss"> <style lang="postcss">
.problem__project { .problem__project {
display: flex; display: flex;
gap: var(--space-8); gap: var(--size-8);
align-items: center; align-items: center;
line-height: 120%; line-height: 120%;
color: var(--clr-theme-scale-ntrl-30); color: var(--clr-theme-scale-ntrl-30);
margin-bottom: var(--space-20); margin-bottom: var(--size-20);
} }
.problem__title { .problem__title {
color: var(--clr-theme-scale-ntrl-30); color: var(--clr-theme-scale-ntrl-30);
margin-bottom: var(--space-12); margin-bottom: var(--size-12);
} }
.problem__switcher { .problem__switcher {
text-align: right; text-align: right;
margin-top: var(--space-24); margin-top: var(--size-24);
} }
.problem__error { .problem__error {
display: flex; display: flex;
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
gap: var(--space-12); gap: var(--size-12);
padding: var(--space-20); padding: var(--size-20);
background-color: var(--clr-theme-err-container); background-color: var(--clr-theme-err-container);
border-radius: var(--radius-m); border-radius: var(--radius-m);
margin-bottom: var(--space-12); margin-bottom: var(--size-12);
} }
.remove-project-btn { .remove-project-btn {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding-bottom: var(--space-24); padding-bottom: var(--size-24);
border-bottom: 1px dashed var(--clr-theme-scale-ntrl-60); border-bottom: 1px dashed var(--clr-theme-scale-ntrl-60);
} }
</style> </style>

4
gitbutler-ui/src/lib/components/ProjectAvatar.svelte
View File

@ -42,8 +42,8 @@
<style> <style>
.project-avatar { .project-avatar {
flex-shrink: 0; flex-shrink: 0;
width: var(--space-20); width: var(--size-20);
height: var(--space-20); height: var(--size-20);
border-radius: var(--radius-m); border-radius: var(--radius-m);
} }

8
gitbutler-ui/src/lib/components/ProjectSelector.svelte
View File

@ -45,16 +45,16 @@
<style lang="postcss"> <style lang="postcss">
.wrapper { .wrapper {
position: relative; position: relative;
margin-top: var(--space-14); margin-top: var(--size-14);
margin-bottom: var(--space-16); margin-bottom: var(--size-16);
height: fit-content; height: fit-content;
} }
.button { .button {
display: flex; display: flex;
gap: var(--space-10); gap: var(--size-10);
width: 100%; width: 100%;
padding: var(--space-10); padding: var(--size-10);
border-radius: var(--radius-m); border-radius: var(--radius-m);
background-color: var(--clr-theme-container-pale); background-color: var(--clr-theme-container-pale);

2
gitbutler-ui/src/lib/components/ProjectSetup.svelte
View File

@ -62,7 +62,7 @@
<style lang="postcss"> <style lang="postcss">
.actions { .actions {
margin-top: var(--space-20); margin-top: var(--size-20);
text-align: right; text-align: right;
} }
</style> </style>

8
gitbutler-ui/src/lib/components/ProjectSetupTarget.svelte
View File

@ -183,7 +183,7 @@
.project-setup { .project-setup {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-20); gap: var(--size-20);
} }
.features-wrapper { .features-wrapper {
@ -193,14 +193,14 @@
.project-setup__info { .project-setup__info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-12); gap: var(--size-12);
} }
.floating-buttons { .floating-buttons {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
width: 100%; width: 100%;
gap: var(--space-8); gap: var(--size-8);
} }
.project-setup__toggle-label { .project-setup__toggle-label {
@ -209,6 +209,6 @@
.success-icon { .success-icon {
display: inline; display: inline;
margin-top: calc(var(--space-2) * -1); margin-top: calc(var(--size-2) * -1);
} }
</style> </style>

2
gitbutler-ui/src/lib/components/ProjectSwitcher.svelte
View File

@ -63,7 +63,7 @@
.project-switcher { .project-switcher {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-10); gap: var(--size-10);
align-items: flex-end; align-items: flex-end;
} }
</style> </style>

8
gitbutler-ui/src/lib/components/ProjectsPopup.svelte
View File

@ -66,7 +66,7 @@
top: 100%; top: 100%;
z-index: 50; z-index: 50;
width: 100%; width: 100%;
margin-top: var(--space-6); margin-top: var(--size-6);
border-radius: var(--m, 6px); border-radius: var(--m, 6px);
border: 1px solid var(--clr-theme-container-outline-light); border: 1px solid var(--clr-theme-container-outline-light);
background: var(--clr-theme-container-light); background: var(--clr-theme-container-light);
@ -74,14 +74,14 @@
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.1);
} }
.popup__actions { .popup__actions {
padding: var(--space-8); padding: var(--size-8);
border-top: 1px solid var(--clr-theme-scale-ntrl-70); border-top: 1px solid var(--clr-theme-scale-ntrl-70);
} }
.popup__projects { .popup__projects {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-2); gap: var(--size-2);
padding: var(--space-8); padding: var(--size-8);
} }
/* MODIFIERS */ /* MODIFIERS */

14
gitbutler-ui/src/lib/components/PullRequestCard.svelte
View File

@ -293,30 +293,30 @@
<style lang="postcss"> <style lang="postcss">
.pr-card { .pr-card {
position: relative; position: relative;
padding: var(--space-14); padding: var(--size-14);
} }
.pr-title { .pr-title {
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
margin-bottom: var(--space-12); margin-bottom: var(--size-12);
margin-right: var(--space-28); margin-right: var(--size-28);
user-select: text; user-select: text;
cursor: text; cursor: text;
} }
.pr-tags { .pr-tags {
display: flex; display: flex;
gap: var(--space-4); gap: var(--size-4);
} }
.pr-actions { .pr-actions {
margin-top: var(--space-14); margin-top: var(--size-14);
display: flex; display: flex;
} }
.floating-button { .floating-button {
position: absolute; position: absolute;
right: var(--space-6); right: var(--size-6);
top: var(--space-6); top: var(--size-6);
} }
</style> </style>

4
gitbutler-ui/src/lib/components/PullRequestPreview.svelte
View File

@ -69,10 +69,10 @@
.wrapper { .wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-16); gap: var(--size-16);
} }
.card__content { .card__content {
gap: var(--space-12); gap: var(--size-12);
} }
.body { .body {
white-space: wrap; white-space: wrap;

20
gitbutler-ui/src/lib/components/RadioButton.svelte
View File

@ -24,9 +24,9 @@
.radio { .radio {
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
width: var(--space-16); width: var(--size-16);
height: var(--space-16); height: var(--size-16);
border-radius: var(--space-16); border-radius: var(--size-16);
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-light); box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-light);
transition: transition:
@ -83,11 +83,11 @@
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: var(--space-4); top: var(--size-4);
left: var(--space-4); left: var(--size-4);
width: calc(100% - var(--space-8)); width: calc(100% - var(--size-8));
height: calc(100% - var(--space-8)); height: calc(100% - var(--size-8));
border-radius: var(--space-16); border-radius: var(--size-16);
background-color: var(--clr-theme-scale-ntrl-0); background-color: var(--clr-theme-scale-ntrl-0);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
transform: scale(0.5); transform: scale(0.5);
@ -97,8 +97,8 @@
/* modifiers */ /* modifiers */
&.small { &.small {
width: var(--space-14); width: var(--size-14);
height: var(--space-14); height: var(--size-14);
} }
} }
</style> </style>

6
gitbutler-ui/src/lib/components/RemoteBranchPreview.svelte
View File

@ -131,14 +131,14 @@
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
align-items: flex-start; align-items: flex-start;
padding: var(--space-12) var(--space-12) var(--space-12) var(--space-6); padding: var(--size-12) var(--size-12) var(--size-12) var(--size-6);
} }
.branch-preview { .branch-preview {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-8); gap: var(--size-8);
margin: var(--space-12) var(--space-6) var(--space-12) var(--space-12); margin: var(--size-12) var(--size-6) var(--size-12) var(--size-12);
} }
.card__content { .card__content {

2
gitbutler-ui/src/lib/components/RemoveProjectButton.svelte
View File

@ -58,7 +58,7 @@
.remove-project-description { .remove-project-description {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-8); gap: var(--size-8);
} }
.details-text { .details-text {

10
gitbutler-ui/src/lib/components/Resizer.svelte
View File

@ -127,9 +127,9 @@
<style lang="postcss"> <style lang="postcss">
.resizer { .resizer {
--resizer-frame-thickness: var(--space-4); --resizer-frame-thickness: var(--size-4);
--resizer-default-line-thickness: var(--space-2); --resizer-default-line-thickness: var(--size-2);
--resizer-hover-line-thickness: var(--space-8); --resizer-hover-line-thickness: var(--size-8);
--resizer-default-line-color: none; --resizer-default-line-color: none;
position: absolute; position: absolute;
@ -171,7 +171,7 @@
} }
.horizontal { .horizontal {
width: var(--space-4); width: var(--size-4);
height: 100%; height: 100%;
cursor: col-resize; cursor: col-resize;
top: 0; top: 0;
@ -181,7 +181,7 @@
} }
} }
.vertical { .vertical {
height: var(--space-4); height: var(--size-4);
width: 100%; width: 100%;
cursor: row-resize; cursor: row-resize;
left: 0; left: 0;

8
gitbutler-ui/src/lib/components/SectionCard.svelte
View File

@ -70,8 +70,8 @@
<style lang="post-css"> <style lang="post-css">
.section-card { .section-card {
display: flex; display: flex;
gap: var(--space-16); gap: var(--size-16);
padding: var(--space-16); padding: var(--size-16);
border-left: 1px solid var(--clr-theme-container-outline-light); border-left: 1px solid var(--clr-theme-container-outline-light);
border-right: 1px solid var(--clr-theme-container-outline-light); border-right: 1px solid var(--clr-theme-container-outline-light);
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
@ -94,14 +94,14 @@
background: var(--clr-theme-warn-container); background: var(--clr-theme-warn-container);
} }
.extra-padding { .extra-padding {
padding: var(--space-20); padding: var(--size-20);
} }
.section-card__content { .section-card__content {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-8); gap: var(--size-8);
user-select: text; user-select: text;
} }

8
gitbutler-ui/src/lib/components/SegmentControl/Segment.svelte
View File

@ -72,11 +72,11 @@
flex-basis: 0; flex-basis: 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--space-4); gap: var(--size-4);
height: var(--size-btn-m); height: var(--size-control-m);
background-color: var(--clr-theme-container-pale); background-color: var(--clr-theme-container-pale);
padding: var(--space-4) var(--space-8); padding: var(--size-4) var(--size-8);
border-top-width: 1px; border-top-width: 1px;
border-bottom-width: 1px; border-bottom-width: 1px;
@ -96,7 +96,7 @@
&[aria-selected='true'] { &[aria-selected='true'] {
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
padding: var(--space-4) var(--space-8); padding: var(--size-4) var(--size-8);
border-right-width: 1px; border-right-width: 1px;
border-left-width: 1px; border-left-width: 1px;

8
gitbutler-ui/src/lib/components/Select.svelte
View File

@ -116,7 +116,7 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-6); gap: var(--size-6);
} }
.select__label { .select__label {
@ -130,7 +130,7 @@
top: 100%; top: 100%;
width: 100%; width: 100%;
z-index: 50; z-index: 50;
margin-top: var(--space-4); margin-top: var(--size-4);
border-radius: var(--radius-m); border-radius: var(--radius-m);
border: 1px solid var(--clr-theme-container-outline-light); border: 1px solid var(--clr-theme-container-outline-light);
background: var(--clr-theme-container-light); background: var(--clr-theme-container-light);
@ -141,8 +141,8 @@
.options__group { .options__group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--space-6); padding: var(--size-6);
gap: var(--space-2); gap: var(--size-2);
&:not(&:first-child):last-child { &:not(&:first-child):last-child {
border-top: 1px solid var(--clr-theme-container-outline-light); border-top: 1px solid var(--clr-theme-container-outline-light);

4
gitbutler-ui/src/lib/components/SelectItem.svelte
View File

@ -33,7 +33,7 @@
align-items: center; align-items: center;
color: var(--clr-theme-scale-ntrl-10); color: var(--clr-theme-scale-ntrl-10);
font-weight: 700; font-weight: 700;
padding: var(--space-8) var(--space-8); padding: var(--size-8) var(--size-8);
justify-content: space-between; justify-content: space-between;
border-radius: var(--radius-m); border-radius: var(--radius-m);
width: 100%; width: 100%;
@ -54,7 +54,7 @@
color: var(--clr-theme-scale-ntrl-50); color: var(--clr-theme-scale-ntrl-50);
} }
& .label { & .label {
height: var(--space-16); height: var(--size-16);
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
} }

14
gitbutler-ui/src/lib/components/SetupFeature.svelte
View File

@ -36,8 +36,8 @@
<style lang="postcss"> <style lang="postcss">
.setup-feature { .setup-feature {
display: flex; display: flex;
gap: var(--space-16); gap: var(--size-16);
padding: var(--space-20); padding: var(--size-20);
} }
.disabled.setup-feature { .disabled.setup-feature {
background: var(--clr-theme-container-pale); background: var(--clr-theme-container-pale);
@ -51,11 +51,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
gap: var(--space-10); gap: var(--size-10);
} }
.setup-feature__title { .setup-feature__title {
gap: var(--space-6); gap: var(--size-6);
line-height: 120%; line-height: 120%;
} }
@ -63,7 +63,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
gap: var(--space-10); gap: var(--size-10);
} }
.disabled .setup-feature__icon { .disabled .setup-feature__icon {
@ -71,7 +71,7 @@
} }
.setup-feature__actions { .setup-feature__actions {
margin-top: var(--space-6); margin-top: var(--size-6);
&:empty { &:empty {
display: none; display: none;
@ -80,7 +80,7 @@
.setup-feature__row { .setup-feature__row {
display: flex; display: flex;
gap: var(--space-10); gap: var(--size-10);
align-items: center; align-items: center;
} }

2
gitbutler-ui/src/lib/components/Spacer.svelte
View File

@ -6,7 +6,7 @@
return ''; return '';
} }
return `margin-top: var(--space-${margin}); margin-bottom: var(--space-${margin});`; return `margin-top: var(--size-${margin}); margin-bottom: var(--size-${margin});`;
} }
</script> </script>

10
gitbutler-ui/src/lib/components/SyncButton.svelte
View File

@ -49,10 +49,10 @@
.sync-btn { .sync-btn {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-2); gap: var(--size-2);
height: var(--space-20); height: var(--size-20);
padding-left: var(--space-2); padding-left: var(--size-2);
padding-right: var(--space-4); padding-right: var(--size-4);
background: var(--clr-theme-container-light); background: var(--clr-theme-container-light);
border: 1px solid var(--clr-theme-container-outline-light); border: 1px solid var(--clr-theme-container-outline-light);
border-radius: var(--radius-m); border-radius: var(--radius-m);
@ -99,6 +99,6 @@
} }
.sync-btn__busy-label { .sync-btn__busy-label {
padding-left: var(--space-4); padding-left: var(--size-4);
} }
</style> </style>

12
gitbutler-ui/src/lib/components/Tag.svelte
View File

@ -67,8 +67,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: var(--size-btn-s); height: var(--size-control-s);
padding: var(--space-2) var(--space-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);
} }
@ -78,7 +78,7 @@
.label { .label {
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
padding: 0 var(--space-2); padding: 0 var(--size-2);
} }
.clickable { .clickable {
cursor: pointer; cursor: pointer;
@ -232,8 +232,8 @@
.verticalOrientation { .verticalOrientation {
writing-mode: vertical-rl; writing-mode: vertical-rl;
height: max-content; height: max-content;
width: var(--size-btn-s); width: var(--size-control-s);
padding: var(--space-4) var(--space-2); padding: var(--size-4) var(--size-2);
transform: rotate(180deg); transform: rotate(180deg);
} }
@ -242,6 +242,6 @@
} }
.verticalLabel { .verticalLabel {
padding: var(--space-2) 0; padding: var(--size-2) 0;
} }
</style> </style>

6
gitbutler-ui/src/lib/components/TextArea.svelte
View File

@ -43,13 +43,13 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-6); gap: var(--size-6);
} }
.textarea { .textarea {
width: 100%; width: 100%;
resize: none; resize: none;
padding-top: var(--space-12); padding-top: var(--size-12);
padding-bottom: var(--space-12); padding-bottom: var(--size-12);
} }
.textbox__label { .textbox__label {

12
gitbutler-ui/src/lib/components/TextBox.svelte
View File

@ -67,7 +67,7 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-6); gap: var(--size-6);
} }
.textbox__input-wrap { .textbox__input-wrap {
@ -78,7 +78,7 @@
z-index: 1; z-index: 1;
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
height: var(--size-btn-l); height: var(--size-control-l);
width: 100%; width: 100%;
&:disabled { &:disabled {
@ -109,19 +109,19 @@
.textbox__left-orient { .textbox__left-orient {
& .textbox__input { & .textbox__input {
padding-left: calc(var(--space-32) + var(--space-2)); padding-left: calc(var(--size-32) + var(--size-2));
} }
& .textbox__icon { & .textbox__icon {
left: var(--space-12); left: var(--size-12);
} }
} }
.textbox__right-orient { .textbox__right-orient {
& .textbox__input { & .textbox__input {
padding-right: calc(var(--space-32) + var(--space-2)); padding-right: calc(var(--size-32) + var(--size-2));
} }
& .textbox__icon { & .textbox__icon {
right: var(--space-12); right: var(--size-12);
} }
} }

10
gitbutler-ui/src/lib/components/ThemeSelector.svelte
View File

@ -53,7 +53,7 @@
.cards-group { .cards-group {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: var(--space-16); gap: var(--size-16);
} }
.theme-card { .theme-card {
@ -61,7 +61,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--space-8); gap: var(--size-8);
} }
.theme-card:hover { .theme-card:hover {
@ -90,7 +90,7 @@
} }
.theme-card__label { .theme-card__label {
padding: var(--space-6); padding: var(--size-6);
text-align: center; text-align: center;
border-radius: var(--radius-m); border-radius: var(--radius-m);
} }
@ -98,8 +98,8 @@
.theme-card__icon { .theme-card__icon {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
bottom: var(--space-6); bottom: var(--size-6);
right: var(--space-6); right: var(--size-6);
opacity: 0; opacity: 0;
} }

26
gitbutler-ui/src/lib/components/Toggle.svelte
View File

@ -36,9 +36,9 @@
.toggle { .toggle {
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
width: calc(var(--space-24) + var(--space-2)); width: calc(var(--size-24) + var(--size-2));
height: var(--space-16); height: var(--size-16);
border-radius: var(--space-16); border-radius: var(--size-16);
background-color: var(--clr-theme-container-sub); background-color: var(--clr-theme-container-sub);
box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-light); box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-light);
transition: transition:
@ -84,7 +84,7 @@
} }
&::after { &::after {
transform: translateX(var(--space-10)); transform: translateX(var(--size-10));
} }
} }
@ -92,11 +92,11 @@
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: var(--space-2); top: var(--size-2);
left: var(--space-2); left: var(--size-2);
width: var(--space-12); width: var(--size-12);
height: var(--space-12); height: var(--size-12);
border-radius: var(--space-12); border-radius: var(--size-12);
background-color: var(--clr-core-ntrl-100); background-color: var(--clr-core-ntrl-100);
transition: transition:
background-color var(--transition-fast), background-color var(--transition-fast),
@ -106,12 +106,12 @@
/* modifiers */ /* modifiers */
&.small { &.small {
width: var(--space-24); width: var(--size-24);
height: var(--space-14); height: var(--size-14);
&:after { &:after {
width: var(--space-10); width: var(--size-10);
height: var(--space-10); height: var(--size-10);
} }
} }
} }

14
gitbutler-ui/src/lib/components/TreeListFile.svelte
View File

@ -97,7 +97,7 @@
/> />
{/if} {/if}
<div class="name-wrapper"> <div class="name-wrapper">
<img src={getVSIFileIcon(file.path)} alt="js" style="width: var(--space-12)" class="icon" /> <img src={getVSIFileIcon(file.path)} alt="js" style="width: var(--size-12)" class="icon" />
<span class="name text-base-12"> <span class="name text-base-12">
{file.filename} {file.filename}
</span> </span>
@ -111,7 +111,7 @@
.draggable-wrapper { .draggable-wrapper {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
margin-bottom: var(--space-2); margin-bottom: var(--size-2);
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -119,9 +119,9 @@
.tree-list-file { .tree-list-file {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: var(--size-btn-m); height: var(--size-control-m);
padding: var(--space-6) var(--space-8) var(--space-6) var(--space-6); padding: var(--size-6) var(--size-8) var(--size-6) var(--size-6);
gap: var(--space-6); gap: var(--size-6);
border-radius: var(--radius-s); border-radius: var(--radius-s);
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -139,13 +139,13 @@
.content-wrapper { .content-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-10); gap: var(--size-10);
overflow: hidden; overflow: hidden;
} }
.name-wrapper { .name-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-6); gap: var(--size-6);
overflow: hidden; overflow: hidden;
} }
.name { .name {

14
gitbutler-ui/src/lib/components/TreeListFolder.svelte
View File

@ -46,7 +46,7 @@
<div class="name-wrapper"> <div class="name-wrapper">
<!-- folder-icon.svg --> <!-- folder-icon.svg -->
<svg <svg
style="width: var(--space-12)" style="width: var(--size-12)"
viewBox="0 0 12 12" viewBox="0 0 12 12"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -81,12 +81,12 @@
.tree-list-folder { .tree-list-folder {
display: flex; display: flex;
align-items: center; align-items: center;
height: var(--space-28); height: var(--size-28);
width: 100%; width: 100%;
padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4); padding: var(--size-4) var(--size-8) var(--size-4) var(--size-4);
gap: var(--space-6); gap: var(--size-6);
border-radius: var(--radius-s); border-radius: var(--radius-s);
margin-bottom: var(--space-2); margin-bottom: var(--size-2);
&:hover { &:hover {
background: color-mix(in srgb, var(--clr-theme-container-light), var(--darken-tint-light)); background: color-mix(in srgb, var(--clr-theme-container-light), var(--darken-tint-light));
@ -98,12 +98,12 @@
.content-wrapper { .content-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-10); gap: var(--size-10);
} }
.name-wrapper { .name-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-6); gap: var(--size-6);
} }
.name { .name {
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);

24
gitbutler-ui/src/lib/components/Welcome.svelte
View File

@ -79,39 +79,39 @@
.welcome__actions { .welcome__actions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-8); gap: var(--size-8);
margin-top: var(--space-32); margin-top: var(--size-32);
} }
.links { .links {
display: flex; display: flex;
gap: var(--space-56); gap: var(--size-56);
padding: var(--space-28); padding: var(--size-28);
background: var(--clr-theme-container-pale); background: var(--clr-theme-container-pale);
border-radius: var(--radius-l); border-radius: var(--radius-l);
margin-top: var(--space-20); margin-top: var(--size-20);
} }
.links__section { .links__section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-20); gap: var(--size-20);
} }
.education-links { .education-links {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: var(--space-6); gap: var(--size-6);
margin-left: calc(var(--space-6) * -1); margin-left: calc(var(--size-6) * -1);
} }
.community-links { .community-links {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
column-gap: var(--space-12); column-gap: var(--size-12);
row-gap: var(--space-4); row-gap: var(--size-4);
max-width: calc(var(--space-64) * 3); max-width: calc(var(--size-64) * 3);
margin-left: calc(var(--space-6) * -1); margin-left: calc(var(--size-6) * -1);
} }
</style> </style>

12
gitbutler-ui/src/lib/components/WelcomeAction.svelte
View File

@ -31,9 +31,9 @@
border: 1px solid var(--clr-theme-container-outline-light); border: 1px solid var(--clr-theme-container-outline-light);
display: flex; display: flex;
position: relative; position: relative;
padding: var(--space-16); padding: var(--size-16);
flex-direction: row; flex-direction: row;
gap: var(--space-16); gap: var(--size-16);
align-items: center; align-items: center;
text-align: left; text-align: left;
transition: transition:
@ -67,14 +67,14 @@
z-index: 0; z-index: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-10); gap: var(--size-10);
transition: opacity var(--transition-slow); transition: opacity var(--transition-slow);
} }
.action__spinner { .action__spinner {
position: absolute; position: absolute;
top: var(--space-10); top: var(--size-10);
right: var(--space-10); right: var(--size-10);
display: flex; display: flex;
} }
@ -91,6 +91,6 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
flex-shrink: 0; flex-shrink: 0;
width: calc(var(--space-40) * 2); width: calc(var(--size-40) * 2);
} }
</style> </style>

6
gitbutler-ui/src/lib/components/contextmenu/ContextMenuItem.svelte
View File

@ -45,10 +45,10 @@
text-align: left; text-align: left;
align-items: center; align-items: center;
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
height: var(--space-24); height: var(--size-24);
padding: var(--space-4) var(--space-6); padding: var(--size-4) var(--size-6);
border-radius: var(--radius-s); border-radius: var(--radius-s);
gap: var(--space-12); gap: var(--size-12);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
&:not(.disabled):hover { &:not(.disabled):hover {
transition: none; transition: none;

4
gitbutler-ui/src/lib/components/contextmenu/ContextMenuSection.svelte
View File

@ -9,8 +9,8 @@
.context-menu-section { .context-menu-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--space-8); padding: var(--size-8);
gap: var(--space-2); gap: var(--size-2);
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid var(--clr-theme-container-outline-light); border-top: 1px solid var(--clr-theme-container-outline-light);
} }

4
gitbutler-ui/src/lib/components/settings/ContentWrapper.svelte
View File

@ -34,10 +34,10 @@
} }
.content { .content {
padding: var(--space-48) var(--space-32); padding: var(--size-48) var(--size-32);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-16); gap: var(--size-16);
max-width: 40rem; max-width: 40rem;
width: 100%; width: 100%;
margin: auto; margin: auto;

20
gitbutler-ui/src/lib/components/settings/ProfileSIdebar.svelte
View File

@ -110,7 +110,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding: calc(var(--space-40) + var(--space-4)) var(--space-20) var(--space-20) var(--space-20); padding: calc(var(--size-40) + var(--size-4)) var(--size-20) var(--size-20) var(--size-20);
border-right: 1px solid var(--clr-theme-container-outline-light); border-right: 1px solid var(--clr-theme-container-outline-light);
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
height: 100%; height: 100%;
@ -120,7 +120,7 @@
.profile-sidebar__header { .profile-sidebar__header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-8); gap: var(--size-8);
} }
/* TOP */ /* TOP */
@ -128,7 +128,7 @@
.profile-sidebar__top { .profile-sidebar__top {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-20); gap: var(--size-20);
} }
.profile-sidebar__title { .profile-sidebar__title {
@ -140,20 +140,20 @@
.profile-sidebar__menu-wrapper { .profile-sidebar__menu-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-20); gap: var(--size-20);
} }
.profile-sidebar__menu { .profile-sidebar__menu {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-2); gap: var(--size-2);
} }
.profile-sidebar__menu-item { .profile-sidebar__menu-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-10); gap: var(--size-10);
padding: var(--space-8); padding: var(--size-8);
border-radius: var(--radius-m); border-radius: var(--radius-m);
width: 100%; width: 100%;
color: var(--clr-theme-scale-ntrl-30); color: var(--clr-theme-scale-ntrl-30);
@ -188,7 +188,7 @@
.profile-sidebar__bottom { .profile-sidebar__bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-24); gap: var(--size-24);
} }
/* BANNERS */ /* BANNERS */
@ -196,14 +196,14 @@
.social-banners { .social-banners {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-6); gap: var(--size-6);
} }
.social-banner { .social-banner {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--space-16); padding: var(--size-16);
border-radius: var(--radius-m); border-radius: var(--radius-m);
border: 1px solid var(--clr-theme-container-outline-light); border: 1px solid var(--clr-theme-container-outline-light);
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);

2
gitbutler-ui/src/lib/components/settings/SupportersBanner.svelte
View File

@ -24,7 +24,7 @@
.banner { .banner {
display: flex; display: flex;
align-items: center; align-items: center;
padding: var(--space-16); padding: var(--size-16);
border-radius: var(--radius-m); border-radius: var(--radius-m);
background-color: #d7f2f1; background-color: #d7f2f1;

2
gitbutler-ui/src/lib/dragging/draggable.ts
View File

@ -23,7 +23,7 @@ export function createContainerForMultiDrag(children: Element[]): HTMLDivElement
const inner = document.createElement('div'); const inner = document.createElement('div');
inner.style.display = 'flex'; inner.style.display = 'flex';
inner.style.flexDirection = 'column'; inner.style.flexDirection = 'column';
inner.style.gap = 'var(--space-2)'; inner.style.gap = 'var(--size-2)';
children.forEach((child) => { children.forEach((child) => {
inner.appendChild(cloneWithPreservedDimensions(child)); inner.appendChild(cloneWithPreservedDimensions(child));
}); });

6
gitbutler-ui/src/lib/notifications/ToastController.svelte
View File

@ -33,9 +33,9 @@
position: absolute; position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
bottom: var(--space-20); bottom: var(--size-20);
right: var(--space-20); right: var(--size-20);
gap: var(--space-8); gap: var(--size-8);
max-width: 30rem; max-width: 30rem;
z-index: 50; z-index: 50;
} }

6
gitbutler-ui/src/routes/[projectId]/base/+page.svelte
View File

@ -109,11 +109,11 @@
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
align-items: flex-start; align-items: flex-start;
padding: var(--space-12) var(--space-12) var(--space-12) var(--space-6); padding: var(--size-12) var(--size-12) var(--size-12) var(--size-6);
width: 50rem; width: 50rem;
} }
.card { .card {
margin: var(--space-12) var(--space-6) var(--space-12) var(--space-12); margin: var(--size-12) var(--size-6) var(--size-12) var(--size-12);
padding: var(--space-16); padding: var(--size-16);
} }
</style> </style>

2
gitbutler-ui/src/routes/[projectId]/pull/[number]/+page.svelte
View File

@ -32,6 +32,6 @@
overflow-y: auto; overflow-y: auto;
} }
.inner { .inner {
padding: var(--space-16); padding: var(--size-16);
} }
</style> </style>

14
gitbutler-ui/src/routes/settings/+page.svelte
View File

@ -344,7 +344,7 @@
.profile-form { .profile-form {
display: flex; display: flex;
gap: var(--space-24); gap: var(--size-24);
} }
.hidden-input { .hidden-input {
@ -387,11 +387,11 @@
.profile-pic__edit-label { .profile-pic__edit-label {
position: absolute; position: absolute;
bottom: var(--space-8); bottom: var(--size-8);
left: var(--space-8); left: var(--size-8);
color: var(--clr-core-ntrl-100); color: var(--clr-core-ntrl-100);
background-color: color-mix(in srgb, var(--clr-core-ntrl-0), transparent 30%); background-color: color-mix(in srgb, var(--clr-core-ntrl-0), transparent 30%);
padding: var(--space-4) var(--space-6); padding: var(--size-4) var(--size-6);
border-radius: var(--radius-m); border-radius: var(--radius-m);
opacity: 0; opacity: 0;
transition: opacity var(--transition-medium); transition: opacity var(--transition-medium);
@ -401,7 +401,7 @@
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-20); gap: var(--size-20);
align-items: flex-end; align-items: flex-end;
} }
@ -409,12 +409,12 @@
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-12); gap: var(--size-12);
} }
.row-buttons { .row-buttons {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: var(--space-8); gap: var(--size-8);
} }
</style> </style>

12
gitbutler-ui/src/styles/card.css
View File

@ -9,25 +9,25 @@
.card__header { .card__header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: var(--space-16); padding: var(--size-16);
gap: var(--space-8); gap: var(--size-8);
border-bottom: 1px solid var(--clr-theme-container-outline-light); border-bottom: 1px solid var(--clr-theme-container-outline-light);
} }
.card__title { .card__title {
padding: var(--space-4) var(--space-6); padding: var(--size-4) var(--size-6);
} }
.card__content { .card__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--space-16); padding: var(--size-16);
} }
.card__footer { .card__footer {
display: flex; display: flex;
gap: var(--space-6); gap: var(--size-6);
padding: var(--space-16); padding: var(--size-16);
justify-content: space-between; justify-content: space-between;
border-top: 1px solid var(--clr-theme-container-outline-light); border-top: 1px solid var(--clr-theme-container-outline-light);
} }

Some files were not shown because too many files have changed in this diff Show More