UI lib: text utility classes (gitbutlerapp#4684)

liyingqin · Aug 14, 2024 · fdea1cb · fdea1cb
1 parent 11ff8a7
commit fdea1cb
Show file tree

Hide file tree

Showing 80 changed files with 189 additions and 249 deletions.
diff --git a/apps/desktop/src/lib/branch/BranchDropzone.svelte b/apps/desktop/src/lib/branch/BranchDropzone.svelte
@@ -55,7 +55,7 @@
 						</div>
 					</div>
 
-					<span class="text-base-body-13 new-branch-caption"
+					<span class="text-13 text-body new-branch-caption"
 						>Drag and drop files<br />to create a new branch</span
 					>
 				</div>

diff --git a/apps/desktop/src/lib/branch/BranchHeader.svelte b/apps/desktop/src/lib/branch/BranchHeader.svelte
@@ -134,7 +134,7 @@
 		<div class="collapsed-lane__info-wrap" bind:clientHeight={headerInfoHeight}>
 			<div class="collapsed-lane__info" style="width: {headerInfoHeight}px">
 				<div class="collapsed-lane__label-wrap">
-					<h3 class="collapsed-lane__label text-base-13 text-bold">
+					<h3 class="collapsed-lane__label text-13 text-bold">
 						{branch.name}
 					</h3>
 					{#if uncommittedChanges > 0}

diff --git a/apps/desktop/src/lib/branch/BranchLabel.svelte b/apps/desktop/src/lib/branch/BranchLabel.svelte
@@ -20,7 +20,7 @@
 	use:resizeObserver={(e) => {
 		inputWidth = `${Math.round(e.frame.width)}px`;
 	}}
-	class="branch-name-mesure-el text-base-14 text-bold"
+	class="branch-name-mesure-el text-14 text-bold"
 	bind:this={mesureEl}>{name}</span
 >
 <input
@@ -30,7 +30,7 @@
 	bind:value={name}
 	on:change={(e) => dispatch('change', { name: e.currentTarget.value.trim() })}
 	title={name}
-	class="branch-name-input text-base-14 text-bold"
+	class="branch-name-input text-14 text-bold"
 	on:dblclick|stopPropagation
 	on:click|stopPropagation={() => {
 		inputEl.focus();

diff --git a/apps/desktop/src/lib/branch/BranchPreviewHeader.svelte b/apps/desktop/src/lib/branch/BranchPreviewHeader.svelte
@@ -38,7 +38,7 @@
 			<div class="header__remote-branch">
 				{#if remoteBranch}
 					<div
-						class="status-tag text-base-11 text-semibold remote"
+						class="status-tag text-11 text-semibold remote"
 						use:tooltip={'At least some of your changes have been pushed'}
 					>
 						<Icon name="remote-branch-small" />
@@ -62,7 +62,7 @@
 						</Button>
 					{/if}
 				{:else}
-					<div class="status-tag text-base-11 text-semibold remote">
+					<div class="status-tag text-11 text-semibold remote">
 						<Icon name="remote-branch-small" /> local
 					</div>
 				{/if}

diff --git a/apps/desktop/src/lib/branch/PassphraseBox.svelte b/apps/desktop/src/lib/branch/PassphraseBox.svelte
@@ -23,7 +23,7 @@
 
 {#if prompt}
 	<div class="passbox">
-		<span class="text-base-body-11 passbox__helper-text">
+		<span class="text-body-11 text-body passbox__helper-text">
 			{prompt?.prompt}
 		</span>
 		<TextBox

diff --git a/apps/desktop/src/lib/commit/CommitCard.svelte b/apps/desktop/src/lib/commit/CommitCard.svelte
@@ -220,7 +220,7 @@
 				{/if}
 
 				{#if first}
-					<div class="commit__type text-semibold text-base-12">
+					<div class="commit__type text-semibold text-12">
 						{#if type === 'remote'}
 							Remote <Icon name="remote" />
 						{:else if type === 'local'}
@@ -234,15 +234,15 @@
 				{/if}
 
 				{#if isUndoable && !commit.descriptionTitle}
-					<span class="text-base-body-13 text-semibold commit__empty-title"
+					<span class="text-13 text-body text-semibold commit__empty-title"
 						>empty commit message</span
 					>
 				{:else}
-					<h5 class="text-base-body-13 text-semibold commit__title" class:truncate={!showDetails}>
+					<h5 class="text-13 text-body text-semibold commit__title" class:truncate={!showDetails}>
 						{commit.descriptionTitle}
 					</h5>
 
-					<div class="text-base-11 commit__subtitle">
+					<div class="text-11 commit__subtitle">
 						{#if commit.isSigned}
 							<div class="commit__signed" use:tooltip={{ text: 'Signed', delay: 500 }}>
 								<Icon name="success-outline-small" />
@@ -291,7 +291,7 @@
 				{#if commit.descriptionBody || isUndoable}
 					<div class="commit__details">
 						{#if commit.descriptionBody}
-							<span class="commit__description text-base-body-12">
+							<span class="commit__description text-12 text-body">
 								{commit.descriptionBody}
 							</span>
 						{/if}

diff --git a/apps/desktop/src/lib/commit/CommitList.svelte b/apps/desktop/src/lib/commit/CommitList.svelte
@@ -315,7 +315,7 @@
 					{/key}
 				</div>
 				<div class="base-row__content">
-					<span class="text-base-11 base-row__text"
+					<span class="text-11 base-row__text"
 						>Base commit <button
 							class="base-row__commit-link"
 							on:click={async () => await goto(`/${project.id}/base`)}

diff --git a/apps/desktop/src/lib/commit/CommitMessageInput.svelte b/apps/desktop/src/lib/commit/CommitMessageInput.svelte
@@ -127,7 +127,7 @@
 			value={title}
 			placeholder="Commit summary"
 			disabled={aiLoading}
-			class="text-base-body-13 text-semibold commit-box__textarea commit-box__textarea__title"
+			class="text-13 text-body text-semibold commit-box__textarea commit-box__textarea__title"
 			spellcheck="false"
 			rows="1"
 			bind:this={titleTextArea}
@@ -151,7 +151,7 @@
 				value={description}
 				disabled={aiLoading}
 				placeholder="Commit description (optional)"
-				class="text-base-body-13 commit-box__textarea commit-box__textarea__description"
+				class="text-13 text-body commit-box__textarea commit-box__textarea__description"
 				spellcheck="false"
 				rows="1"
 				bind:this={descriptionTextArea}

diff --git a/apps/desktop/src/lib/components/AIPromptEdit/AIPromptEdit.svelte b/apps/desktop/src/lib/components/AIPromptEdit/AIPromptEdit.svelte
@@ -35,7 +35,7 @@
 
 {#if prompts && $userPrompts}
 	<div class="prompt-item__title">
-		<h3 class="text-base-15 text-bold">
+		<h3 class="text-15 text-bold">
 			{promptUse === 'commits' ? 'Commit message' : 'Branch name'}
 		</h3>
 		<Button style="ghost" outline icon="plus-small" onclick={createNewPrompt}>New prompt</Button>

diff --git a/apps/desktop/src/lib/components/AIPromptEdit/Content.svelte b/apps/desktop/src/lib/components/AIPromptEdit/Content.svelte
@@ -107,7 +107,7 @@
 	>
 		{#if !isInEditing}
 			<Icon name="doc" />
-			<h3 class="text-base-15 text-bold title">{promptName}</h3>
+			<h3 class="text-15 text-bold title">{promptName}</h3>
 			<div class="icon">
 				<Icon name={expanded ? 'chevron-up' : 'chevron-down'} />
 			</div>

diff --git a/apps/desktop/src/lib/components/AIPromptEdit/DialogBubble.svelte b/apps/desktop/src/lib/components/AIPromptEdit/DialogBubble.svelte
@@ -45,7 +45,7 @@
 	class:bubble-wrap_assistant={promptMessage.role === MessageRole.Assistant}
 >
 	<div class="bubble">
-		<div class="bubble__header text-base-13 text-bold">
+		<div class="bubble__header text-13 text-bold">
 			{#if promptMessage.role === MessageRole.User}
 				<Icon name="profile" />
 				<span>User</span>
@@ -59,7 +59,7 @@
 			<textarea
 				bind:this={textareaElement}
 				bind:value={promptMessage.content}
-				class="textarea scrollbar text-base-body-13"
+				class="textarea scrollbar text-13 text-body"
 				class:is-error={isError}
 				rows={1}
 				on:input={(e) => {
@@ -72,7 +72,7 @@
 				}}
 			></textarea>
 		{:else}
-			<div class="markdown bubble-message scrollbar text-base-body-13">
+			<div class="markdown bubble-message scrollbar text-13 text-body">
 				{@html marked.parse(promptMessage.content, { renderer: markedRenderer })}
 			</div>
 		{/if}

diff --git a/apps/desktop/src/lib/components/AppUpdater.svelte b/apps/desktop/src/lib/components/AppUpdater.svelte
@@ -98,7 +98,7 @@
 			</svg>
 		</div>
 
-		<h4 class="text-base-13 label">
+		<h4 class="text-13 label">
 			{#if !$update.status}
 				New version available
 			{:else if $update.status === 'PENDING'}

diff --git a/apps/desktop/src/lib/components/BaseBranch.svelte b/apps/desktop/src/lib/components/BaseBranch.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <div class="wrapper">
-	<div class="info-text text-base-13">
+	<div class="info-text text-13">
 		There {multiple ? 'are' : 'is'}
 		{base.upstreamCommits.length} unmerged upstream
 		{multiple ? 'commits' : 'commit'}
@@ -73,7 +73,7 @@
 
 	<div>
 		<h1
-			class="text-base-13 info-text text-bold"
+			class="text-13 info-text text-bold"
 			use:tooltip={'This is the current base for your virtual branches.'}
 		>
 			Local
@@ -93,26 +93,26 @@
 
 <Modal width="small" bind:this={updateTargetModal} title="Merge Upstream Work">
 	<div class="modal-content">
-		<p class="text-base-body-14">You are about to merge upstream work from your base branch.</p>
+		<p class="text-14 text-body">You are about to merge upstream work from your base branch.</p>
 	</div>
 	<div class="modal-content">
-		<h4 class="text-base-body-14 text-semibold">What will this do?</h4>
-		<p class="modal__small-text text-base-body-12">
+		<h4 class="text-14 text-body text-semibold">What will this do?</h4>
+		<p class="modal__small-text text-12 text-body">
 			We will try to merge the work that is upstream into each of your virtual branches, so that
 			they are all up to date.
 		</p>
-		<p class="modal__small-text text-base-body-12">
+		<p class="modal__small-text text-12 text-body">
 			Any virtual branches that we can't merge cleanly, we will unapply and mark with a blue dot.
 			You can merge these manually later.
 		</p>
-		<p class="modal__small-text text-base-body-12">
+		<p class="modal__small-text text-12 text-body">
 			Any virtual branches that are fully integrated upstream will be automatically removed.
 		</p>
 	</div>
 
 	<label class="modal__dont-show-again" for="dont-show-again">
 		<Checkbox name="dont-show-again" bind:checked={mergeUpstreamWarningDismissedCheckbox} />
-		<span class="text-base-12">Don't show this again</span>
+		<span class="text-12">Don't show this again</span>
 	</label>
 
 	{#snippet controls(close)}

diff --git a/apps/desktop/src/lib/components/Board.svelte b/apps/desktop/src/lib/components/Board.svelte
@@ -136,7 +136,7 @@
 					<div class="empty-board__content">
 						<div class="empty-board__about">
 							<h3 class="text-serif-40">You are up to date</h3>
-							<p class="text-base-body-14">
+							<p class="text-14 text-body">
 								Your working directory matches the base branch.
 								<br />
 								Any edits auto-create a virtual branch for easy management.
@@ -145,7 +145,7 @@
 
 						<div class="empty-board__suggestions">
 							<div class="empty-board__suggestions__block">
-								<h3 class="text-base-14 text-bold">Start</h3>
+								<h3 class="text-14 text-bold">Start</h3>
 								<div class="empty-board__suggestions__links">
 									<div
 										class="empty-board__suggestions__link"
@@ -157,7 +157,7 @@
 										<div class="empty-board__suggestions__link__icon">
 											<Icon name="new-branch" />
 										</div>
-										<span class="text-base-12">Create a new branch</span>
+										<span class="text-12">Create a new branch</span>
 									</div>
 									<a
 										class="empty-board__suggestions__link"
@@ -169,7 +169,7 @@
 											<Icon name="docs" />
 										</div>
 
-										<span class="text-base-12">GitButler Docs</span>
+										<span class="text-12">GitButler Docs</span>
 									</a>
 									<div
 										class="empty-board__suggestions__link"
@@ -181,13 +181,13 @@
 										<div class="empty-board__suggestions__link__icon">
 											<Icon name="vscode" />
 										</div>
-										<span class="text-base-12">Open in VSCode</span>
+										<span class="text-12">Open in VSCode</span>
 									</div>
 								</div>
 							</div>
 
 							<div class="empty-board__suggestions__block">
-								<h3 class="text-base-14 text-bold">Recent commits</h3>
+								<h3 class="text-14 text-bold">Recent commits</h3>
 								<div class="empty-board__suggestions__links">
 									{#each ($baseBranch?.recentCommits || []).slice(0, 4) as commit}
 										<a
@@ -201,7 +201,7 @@
 												<Icon name="commit" />
 											</div>
 
-											<span class="text-base-12">{commit.description}</span>
+											<span class="text-12">{commit.description}</span>
 										</a>
 									{/each}
 								</div>

diff --git a/apps/desktop/src/lib/components/BranchPreview.svelte b/apps/desktop/src/lib/components/BranchPreview.svelte
@@ -108,9 +108,9 @@
 					<BranchPreviewHeader {localBranch} {remoteBranch} {pr} />
 					{#if pr}
 						<div class="card">
-							<div class="card__header text-base-body-14 text-semibold">{pr.title}</div>
+							<div class="card__header text-14 text-body text-semibold">{pr.title}</div>
 							{#if pr.body}
-								<div class="markdown card__content text-base-body-13">
+								<div class="markdown card__content text-13 text-body">
 									{@html marked.parse(pr.body, { renderer })}
 								</div>
 							{/if}

diff --git a/apps/desktop/src/lib/components/DecorativeSplitView.svelte b/apps/desktop/src/lib/components/DecorativeSplitView.svelte
@@ -43,15 +43,15 @@
 							href="https://docs.gitbutler.com/features/virtual-branches/branch-lanes"
 						>
 							<Icon name="docs" opacity={0.6} />
-							<span class="text-base-14 text-semibold">GitButler docs</span>
+							<span class="text-14 text-semibold">GitButler docs</span>
 						</a>
 						<a
 							class="right-side__link"
 							target="_blank"
 							href="https://discord.com/invite/MmFkmaJ42D"
 						>
 							<Icon name="discord" opacity={0.6} />
-							<span class="text-base-14 text-semibold">Join community</span>
+							<span class="text-14 text-semibold">Join community</span>
 						</a>
 					</div>
 

diff --git a/apps/desktop/src/lib/components/EmptyStatePlaceholder.svelte b/apps/desktop/src/lib/components/EmptyStatePlaceholder.svelte
@@ -16,12 +16,12 @@
 
 		<div class="empty-state__content">
 			{#if $$slots.title}
-				<h2 class="empty-state__title text-base-body-15 text-semibold">
+				<h2 class="empty-state__title text-15 text-body text-semibold">
 					<slot name="title" />
 				</h2>
 			{/if}
 			{#if $$slots.caption}
-				<p class="empty-state__caption text-base-body-13">
+				<p class="empty-state__caption text-13 text-body">
 					<slot name="caption" />
 				</p>
 			{/if}

diff --git a/apps/desktop/src/lib/components/Login.svelte b/apps/desktop/src/lib/components/Login.svelte
@@ -24,7 +24,7 @@
 		}}>Log out</Button
 	>
 {:else if token}
-	<p class="helper-text text-base-body-12">
+	<p class="helper-text text-12 text-body">
 		Your browser should have been opened. Please log into your GitButler account there.
 		{#if token}
 			If you were not redirected automatically, open <Link

diff --git a/apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte b/apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte
@@ -47,11 +47,11 @@
 		<div class="project-name">
 			<ProjectNameLabel projectName={project?.title} />
 		</div>
-		<p class="switchrepo__title text-base-body-18 text-bold">
+		<p class="switchrepo__title text-18 text-body text-bold">
 			Looks like you've switched away from <span class="code-string"> gitbutler/integration </span>
 		</p>
 
-		<p class="switchrepo__message text-base-body-13">
+		<p class="switchrepo__message text-13 text-body">
 			Due to GitButler managing multiple virtual branches, you cannot switch back and forth between
 			git branches and virtual branches easily.
 			<Link href="https://docs.gitbutler.com/features/virtual-branches/integration-branch">

diff --git a/apps/desktop/src/lib/components/ProblemLoadingRepo.svelte b/apps/desktop/src/lib/components/ProblemLoadingRepo.svelte
@@ -38,11 +38,11 @@
 <DecorativeSplitView img={loadErrorSvg}>
 	<div class="problem" data-tauri-drag-region>
 		<p class="problem__project text-bold"><Icon name="repo-book" /> {project?.title}</p>
-		<p class="problem__title text-base-body-18 text-bold" data-tauri-drag-region>
+		<p class="problem__title text-18 text-body text-bold" data-tauri-drag-region>
 			There was a problem loading this repo
 		</p>
 
-		<div class="problem__error text-base-body-12">
+		<div class="problem__error text-12 text-body">
 			<Icon name="error" color="error" />
 			{error ? error : 'An unknown error occurred'}
 		</div>