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

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

@ -35,8 +35,8 @@
}
.ahead,
.behind {
padding: var(--space-2);
min-width: var(--space-12);
padding: var(--size-2);
min-width: var(--size-12);
}
.behind {
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%;
display: flex;
flex-direction: column;
gap: var(--space-12);
gap: var(--size-12);
}
.title {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -58,7 +58,7 @@
autocomplete="off"
autocorrect="off"
spellcheck="false"
style={`width: calc(${inputWidth}px + var(--space-12))`}
style={`width: calc(${inputWidth}px + var(--size-12))`}
/>
{:else}
<div
@ -76,10 +76,10 @@
<style lang="postcss">
.branch-name,
.branch-name-input {
height: var(--space-20);
height: var(--size-20);
pointer-events: auto;
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: 1px solid transparent;
}

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

@ -139,6 +139,6 @@
overflow: hidden;
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>

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

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

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

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

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

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

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

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

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

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

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

@ -35,8 +35,8 @@
.checkbox {
appearance: none;
cursor: pointer;
width: var(--space-16);
height: var(--space-16);
width: var(--size-16);
height: var(--size-16);
flex-shrink: 0;
border-radius: var(--radius-s);
background-color: var(--clr-theme-container-light);
@ -129,8 +129,8 @@
/* modifiers */
&.small {
width: var(--space-14);
height: var(--space-14);
width: var(--size-14);
height: var(--size-14);
}
}
</style>

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

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

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

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

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

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

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

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

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

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

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

@ -38,9 +38,9 @@
.header {
display: flex;
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;
gap: var(--space-8);
gap: var(--size-8);
&:hover {
& .expander {
@ -52,7 +52,7 @@
display: flex;
align-items: center;
color: var(--clr-theme-scale-ntrl-0);
gap: var(--space-8);
gap: var(--size-8);
overflow-x: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -67,7 +67,12 @@
<span class="added">+{added}</span>
<span class="removed">-{removed}</span>
{#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" />
</div>
{/if}
@ -98,18 +103,18 @@
position: relative;
max-height: 100%;
flex-shrink: 0;
padding: var(--space-16);
gap: var(--space-16);
padding: var(--size-16);
gap: var(--size-16);
}
.hunk-wrapper {
display: flex;
flex-direction: column;
gap: var(--space-10);
gap: var(--size-10);
}
.indicators {
display: flex;
align-items: center;
gap: var(--space-2);
gap: var(--size-2);
}
.added {
color: #45b156;

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

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

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

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

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

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

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

@ -167,11 +167,11 @@
}
.line-wrapper {
position: relative;
padding-left: var(--space-12);
padding-right: var(--space-6);
padding-left: var(--size-12);
padding-right: var(--size-6);
}
.line {
width: var(--space-2);
width: var(--size-2);
height: 100%;
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 {
display: flex;
justify-content: space-between;
padding: var(--space-12);
padding: var(--size-12);
border-top: 1px solid var(--clr-theme-container-outline-light);
border-color: var(--clr-theme-container-outline-light);
}
.left-btns {
display: flex;
gap: var(--space-2);
gap: var(--size-2);
}
.footer.collapsed {
flex-direction: column;
padding: 0 var(--space-14);
padding: 0 var(--size-14);
align-items: flex-start;
gap: var(--space-4);
gap: var(--size-4);
border: none;
& .left-btns {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -131,14 +131,14 @@
display: flex;
overflow-x: auto;
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 {
display: flex;
flex-direction: column;
gap: var(--space-8);
margin: var(--space-12) var(--space-6) var(--space-12) var(--space-12);
gap: var(--size-8);
margin: var(--size-12) var(--size-6) var(--size-12) var(--size-12);
}
.card__content {

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

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

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

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

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

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

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

@ -72,11 +72,11 @@
flex-basis: 0;
align-items: 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);
padding: var(--space-4) var(--space-8);
padding: var(--size-4) var(--size-8);
border-top-width: 1px;
border-bottom-width: 1px;
@ -96,7 +96,7 @@
&[aria-selected='true'] {
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-left-width: 1px;

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

@ -116,7 +116,7 @@
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-6);
gap: var(--size-6);
}
.select__label {
@ -130,7 +130,7 @@
top: 100%;
width: 100%;
z-index: 50;
margin-top: var(--space-4);
margin-top: var(--size-4);
border-radius: var(--radius-m);
border: 1px solid var(--clr-theme-container-outline-light);
background: var(--clr-theme-container-light);
@ -141,8 +141,8 @@
.options__group {
display: flex;
flex-direction: column;
padding: var(--space-6);
gap: var(--space-2);
padding: var(--size-6);
gap: var(--size-2);
&:not(&:first-child):last-child {
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;
color: var(--clr-theme-scale-ntrl-10);
font-weight: 700;
padding: var(--space-8) var(--space-8);
padding: var(--size-8) var(--size-8);
justify-content: space-between;
border-radius: var(--radius-m);
width: 100%;
@ -54,7 +54,7 @@
color: var(--clr-theme-scale-ntrl-50);
}
& .label {
height: var(--space-16);
height: var(--size-16);
text-overflow: ellipsis;
overflow-x: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

@ -67,7 +67,7 @@
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-6);
gap: var(--size-6);
}
.textbox__input-wrap {
@ -78,7 +78,7 @@
z-index: 1;
position: relative;
flex-grow: 1;
height: var(--size-btn-l);
height: var(--size-control-l);
width: 100%;
&:disabled {
@ -109,19 +109,19 @@
.textbox__left-orient {
& .textbox__input {
padding-left: calc(var(--space-32) + var(--space-2));
padding-left: calc(var(--size-32) + var(--size-2));
}
& .textbox__icon {
left: var(--space-12);
left: var(--size-12);
}
}
.textbox__right-orient {
& .textbox__input {
padding-right: calc(var(--space-32) + var(--space-2));
padding-right: calc(var(--size-32) + var(--size-2));
}
& .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 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-16);
gap: var(--size-16);
}
.theme-card {
@ -61,7 +61,7 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
gap: var(--size-8);
}
.theme-card:hover {
@ -90,7 +90,7 @@
}
.theme-card__label {
padding: var(--space-6);
padding: var(--size-6);
text-align: center;
border-radius: var(--radius-m);
}
@ -98,8 +98,8 @@
.theme-card__icon {
z-index: 1;
position: absolute;
bottom: var(--space-6);
right: var(--space-6);
bottom: var(--size-6);
right: var(--size-6);
opacity: 0;
}

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

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

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

@ -97,7 +97,7 @@
/>
{/if}
<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">
{file.filename}
</span>
@ -111,7 +111,7 @@
.draggable-wrapper {
display: inline-block;
width: 100%;
margin-bottom: var(--space-2);
margin-bottom: var(--size-2);
&:last-child {
margin-bottom: 0;
}
@ -119,9 +119,9 @@
.tree-list-file {
display: inline-flex;
align-items: center;
height: var(--size-btn-m);
padding: var(--space-6) var(--space-8) var(--space-6) var(--space-6);
gap: var(--space-6);
height: var(--size-control-m);
padding: var(--size-6) var(--size-8) var(--size-6) var(--size-6);
gap: var(--size-6);
border-radius: var(--radius-s);
width: 100%;
max-width: 100%;
@ -139,13 +139,13 @@
.content-wrapper {
display: flex;
align-items: center;
gap: var(--space-10);
gap: var(--size-10);
overflow: hidden;
}
.name-wrapper {
display: flex;
align-items: center;
gap: var(--space-6);
gap: var(--size-6);
overflow: hidden;
}
.name {

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

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

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

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

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

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

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

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

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

@ -9,8 +9,8 @@
.context-menu-section {
display: flex;
flex-direction: column;
padding: var(--space-8);
gap: var(--space-2);
padding: var(--size-8);
gap: var(--size-2);
&:not(:first-child) {
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 {
padding: var(--space-48) var(--space-32);
padding: var(--size-48) var(--size-32);
display: flex;
flex-direction: column;
gap: var(--space-16);
gap: var(--size-16);
max-width: 40rem;
width: 100%;
margin: auto;

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

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

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

@ -24,7 +24,7 @@
.banner {
display: flex;
align-items: center;
padding: var(--space-16);
padding: var(--size-16);
border-radius: var(--radius-m);
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');
inner.style.display = 'flex';
inner.style.flexDirection = 'column';
inner.style.gap = 'var(--space-2)';
inner.style.gap = 'var(--size-2)';
children.forEach((child) => {
inner.appendChild(cloneWithPreservedDimensions(child));
});

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

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

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

@ -109,11 +109,11 @@
display: flex;
overflow-x: auto;
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;
}
.card {
margin: var(--space-12) var(--space-6) var(--space-12) var(--space-12);
padding: var(--space-16);
margin: var(--size-12) var(--size-6) var(--size-12) var(--size-12);
padding: var(--size-16);
}
</style>

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

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

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

@ -344,7 +344,7 @@
.profile-form {
display: flex;
gap: var(--space-24);
gap: var(--size-24);
}
.hidden-input {
@ -387,11 +387,11 @@
.profile-pic__edit-label {
position: absolute;
bottom: var(--space-8);
left: var(--space-8);
bottom: var(--size-8);
left: var(--size-8);
color: var(--clr-core-ntrl-100);
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);
opacity: 0;
transition: opacity var(--transition-medium);
@ -401,7 +401,7 @@
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-20);
gap: var(--size-20);
align-items: flex-end;
}
@ -409,12 +409,12 @@
width: 100%;
display: flex;
flex-direction: column;
gap: var(--space-12);
gap: var(--size-12);
}
.row-buttons {
display: flex;
justify-content: flex-end;
gap: var(--space-8);
gap: var(--size-8);
}
</style>

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

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