gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2025-01-04 15:53:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

Moving faster with the UI (#1569)

Browse Source 
- using css vars directly in components for theming
- getting far with app bg, surfaces and cards
- lots of files touched to make app generally look better
This commit is contained in:
Mattias Granlund 2023-11-12 15:50:02 +00:00 committed by GitHub
parent 4d22f1339e
commit 5ed72f3883
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 810 additions and 692 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/src/app.html
View File

@ -7,8 +7,8 @@
</head>
<body
class="bg-color-4 text-color-2 h-full w-full cursor-default select-none overscroll-y-none font-sans text-base"
style="height: 100vh"
class="text-color-2 h-full w-full cursor-default select-none overscroll-y-none font-sans text-base"
style="height: 100vh; background-color: var(--bg-body)"
>
<div style="display: contents">%sveltekit.body%</div>
</body>

4
packages/ui/src/lib/components/Overlay.svelte
View File

@ -22,7 +22,9 @@
</script>
<dialog
class="rounded-lg border-[0.5px] border-light-200 bg-white p-0 backdrop:bg-white/50 dark:border-dark-500 dark:bg-dark-1000 backdrop:dark:bg-black/50"
class="rounded-lg border p-0 backdrop:bg-white/50 backdrop:dark:bg-black/50"
style:background-color="var(--bg-surface)"
style:border-color="var(--border-surface)"
style="max-height: calc(100vh - 5rem)"
bind:this={dialog}
on:close={close}

3
packages/ui/src/lib/components/Resizer.svelte
View File

@ -98,8 +98,7 @@
tabindex="0"
role="slider"
aria-valuenow={viewport?.clientHeight}
class:bg-orange-300={hovering}
class:dark:bg-orange-700={hovering}
style:background-color={hovering ? 'var(--resizer-bg-active)' : undefined}
class:cursor-ew-resize={hovering && direction == 'horizontal'}
class:cursor-ns-resize={hovering && direction == 'vertical'}
class:-mt-[2px]={hovering && grow && direction == 'vertical'}

2
packages/ui/src/routes/+layout.svelte
View File

@ -72,7 +72,7 @@
</script>
<div class="flex h-full flex-col">
<div class="flex flex-grow overflow-y-auto overscroll-none">
<div class="flex flex-grow overflow-hidden">
<slot />
</div>
<Toaster />

21
packages/ui/src/routes/+page.svelte
View File

@ -11,7 +11,11 @@
{#await projects.load()}
Loading...
{:then}
<div class="bg-color-2 flex h-full w-full flex-col p-8">
<div
class="flex h-full flex-grow flex-col p-8"
style:background-color="var(--bg-surface)"
style:border-color="var(--border-surface)"
>
<div class="mb-8 flex flex-row justify-between">
<div class="text-color-2">
<h1 class="mb-2 text-2xl">Your projects</h1>
@ -30,9 +34,7 @@
{/if}
</div>
{#if $projects.length == 0}
<div
class="border-color-3 bg-color-2 mx-auto flex w-full flex-grow items-center justify-center rounded-lg border p-8"
>
<div class="mx-auto flex w-full flex-grow items-center justify-center rounded-lg border p-8">
<div class="inline-flex w-96 flex-col items-center gap-y-4 text-center">
<svg
width="38"
@ -61,11 +63,13 @@
</div>
</div>
{:else}
<div class="flex flex-wrap gap-4">
<div class="flex max-w-xl flex-wrap gap-4">
{#each $projects as project}
<a
class="bg-color-5 text-color-2 dark:border-color-5 w-96 overflow-hidden rounded-lg shadow dark:border dark:shadow-none"
class="text-color-2 w-96 overflow-hidden rounded-lg shadow dark:border dark:shadow-none"
style:border-color="var(--border-surface)"
href="/{project.id}/board"
style:background-color="var(--bg-card)"
>
<div class="text-color-2 p-4">
<h1 class="text-lg">
@ -76,7 +80,10 @@
</p>
</div>
<div class="bg-color-4 flex flex-row items-center gap-x-2 px-4 py-2">
<div
class="flex flex-row items-center gap-x-2 px-4 py-2"
style:background-color="var(--bg-card-highlight)"
>
{#if project.api}
<div class="h-2 w-2 rounded-full bg-green-600" />
<div>Backed-up</div>

10
packages/ui/src/routes/[projectId]/+page.svelte Normal file
View File

@ -0,0 +1,10 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
$: projectId = $page.params.projectId;
$: if (projectId) {
goto(`/${projectId}/base`);
}
</script>

6
packages/ui/src/routes/[projectId]/PullRequests.svelte
View File

@ -24,7 +24,11 @@
}
</script>
<div class="bg-color-4 border-color-4 flex items-center justify-between border-t px-2 py-1 pr-1">
<div
class="flex items-center justify-between border-t px-2 py-1 pr-1"
style:background-color="var(--bg-surface-highlight)"
style:border-color="var(--border-surface)"
>
<div class="flex flex-row place-items-center space-x-2">
<!-- <button class="h-full w-full" on:click={() => (open = !open)}>
<IconTriangleDown class={!open ? '-rotate-90' : ''} />

9
packages/ui/src/routes/[projectId]/RemoteBranches.svelte
View File

@ -21,7 +21,9 @@
</script>
<div
class="bg-color-4 border-color-4 flex items-center justify-between border-b border-t px-2 py-1 pr-1"
class="flex items-center justify-between border-b border-t px-2 py-1 pr-1"
style:background-color="var(--bg-surface-highlight)"
style:border-color="var(--border-surface)"
>
<div class="flex flex-row place-items-center space-x-2">
<!-- <button class="h-full w-full" on:click={() => (open = !open)}>
@ -39,7 +41,7 @@
<div class="flex h-4 w-4 justify-around"></div>
</div>
<div bind:this={rbSection} use:accordion={open} class="border-color-5 relative flex-grow">
<div bind:this={rbSection} use:accordion={open} class="relative flex-grow">
<div
bind:this={rbViewport}
on:scroll
@ -68,7 +70,8 @@
<a
href="/{projectId}/remote/{branch.sha}"
class:bg-color-4={$page.url.pathname.includes(branch.sha)}
class="border-color-4 flex flex-col justify-between gap-1 border-b px-2 py-1 pt-2 -outline-offset-2 outline-blue-200 last:border-b-0 focus:outline-2"
class="flex flex-col justify-between gap-1 border-b px-2 py-1 pt-2 -outline-offset-2 outline-blue-200 last:border-b-0 focus:outline-2"
style:border-color="var(--border-surface)"
>
<div class="flex flex-row items-center gap-x-2 pr-1">
<div class="text-color-3">

8
packages/ui/src/routes/[projectId]/base/+page.svelte
View File

@ -6,8 +6,12 @@
let { projectId, branchController, baseBranchStore, baseBranchesState } = data;
</script>
<div class="bg-color-3 h-full flex-grow overflow-y-auto overscroll-none">
<div class="mx-auto flex max-w-xl flex-col gap-y-6 overflow-visible p-8">
<div class="h-full flex-grow overflow-y-auto overscroll-none p-3">
<div
class="flex min-w-min max-w-4xl flex-col gap-y-6 overflow-visible rounded-lg px-5 py-4"
style:background-color="var(--bg-surface)"
style:border-color="var(--border-surface)"
>
{#if $baseBranchesState.isLoading}
<p>Loading...</p>
{:else if $baseBranchesState.isError}

6
packages/ui/src/routes/[projectId]/board/Board.svelte
View File

@ -47,7 +47,7 @@
{:else if branches}
<div
id="branch-lanes"
class="flex h-full flex-shrink flex-grow items-start"
class="flex h-full flex-shrink flex-grow items-start px-1"
role="group"
bind:this={dropZone}
on:dragover={(e) => {
@ -117,7 +117,9 @@
{#if !activeBranches || activeBranches.length == 0}
<div
class="text-color-2 m-auto mx-10 flex w-full flex-grow items-center justify-center rounded border border-light-400 bg-light-200 p-8 dark:border-dark-500 dark:bg-dark-1000"
class="text-color-2 m-auto mx-10 flex w-full flex-grow items-center justify-center rounded border p-8"
style:background-color="var(--bg-surface-highlight)"
style:border-color="var(--border-surface)"
>
<div class="inline-flex w-[35rem] flex-col items-center gap-y-4">
<h3 class="text-xl font-medium">You are up to date</h3>

1003
packages/ui/src/routes/[projectId]/components/BranchLane.svelte
View File

File diff suppressed because it is too large Load Diff

6
packages/ui/src/routes/[projectId]/components/CommitCard.svelte
View File

@ -42,7 +42,11 @@
? draggableCommit(commit.branchId, commit)
: nonDraggable()}
>
<div class="text-color-2 bg-color-5 border-color-4 rounded border p-2 text-left">
<div
class="text-color-2 border-color-4 rounded border p-2 text-left"
style:background-color="var(--bg-card)"
style:border-color="var(--border-card)"
>
<div class="mb-1">
<button
class="max-w-full overflow-hidden truncate"

3
packages/ui/src/routes/[projectId]/components/CommitDialog.svelte
View File

@ -102,7 +102,8 @@
<textarea
bind:value={commitMessage}
on:dblclick|stopPropagation
class="text-color-2 bg-color-5 flex-grow cursor-text resize-none overflow-x-auto overflow-y-auto border border-transparent p-2 font-mono outline-none focus:border-purple-600 focus:ring-0 dark:focus:border-purple-600"
class="text-color-1 flex-grow cursor-text resize-none overflow-x-auto overflow-y-auto border border-transparent p-2 font-mono outline-none focus:ring-0"
style:background-color="var(--bg-surface)"
placeholder="Your commit message here"
rows={messageRows}
autocomplete="off"

12
packages/ui/src/routes/[projectId]/components/FileCard.svelte
View File

@ -100,10 +100,12 @@
...draggableFile(branchId, file),
disabled: readonly
}}
class="changed-file inner border-color-3 rounded-lg border p-1"
class="changed-file inner rounded-lg border p-1"
style:background-color="var(--bg-card)"
style:border-color="var(--border-card)"
class:opacity-80={isFileLocked}
>
<div class="bg-color-5 flex w-full flex-col justify-center gap-2 py-1">
<div class="flex w-full flex-col justify-center py-1">
<div
class="flex cursor-default pl-2"
role="button"
@ -185,7 +187,7 @@
{/await}
{/if}
<div
class="bg-6 border-color-3 my-1 flex w-full flex-col overflow-hidden rounded border"
class="bg-6 border-color-3 my-2 flex w-full flex-col overflow-hidden rounded border"
>
<div
tabindex="0"
@ -266,7 +268,7 @@
{:else}
{#if section.expanded}
<div
class="border-color-3 bg-color-5 my-1 flex w-full flex-col overflow-hidden rounded border"
class="border-color-3 bg-color-5 my-2 flex w-full flex-col overflow-hidden rounded border"
role="group"
on:dblclick
>
@ -288,7 +290,7 @@
{#if !section.expanded}
<div style:width={`calc(${2 * minWidth}rem - 1px)`} class="flex justify-center">
<button
class="text-color-4 hover:text-color-3 px-2 py-1.5 text-sm"
class="text-color-4 hover:text-color-3 px-2 text-sm"
on:click={() => {
if ('expanded' in section) {
section.expanded = true;

9
packages/ui/src/routes/[projectId]/components/Tabs.svelte
View File

@ -41,8 +41,11 @@
}
</script>
<div class="bg-color-4">
<div class="text-color-3 border-color-4 flex w-full border-b">
<div style:background-color="var(--bg-surface-highlight)">
<div
class="text-color-3 border-color-4 flex w-full border-b border-t"
style:border-color="var(--border-surface)"
>
{#each items as item}
<button
class:text-color-1={activeTabValue == item.name}
@ -77,7 +80,7 @@
</button>
</div>
{#if expanded}
<div class="relative">
<div class="relative border-b" style:border-color="var(--border-surface)">
<div
class="hide-native-scrollbar relative shrink-0 overflow-scroll overscroll-none bg-white dark:bg-dark-1000"
transition:slide|local={{ duration: 250 }}

3
packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte
View File

@ -19,7 +19,8 @@
<a
href="/{project.id}/base"
class="bg-color-3 flex flex-col rounded-lg p-3"
class="flex flex-col rounded-lg p-3"
style:background-color="var(--bg-card)"
tabindex="0"
bind:this={baseContents}
>

7
packages/ui/src/routes/[projectId]/navigation/DomainButton.svelte
View File

@ -7,7 +7,12 @@
$: selected = $page.url.href.includes(href);
</script>
<a class="bg-color-3 mx-4 block rounded px-3 py-2 font-semibold" class:bg-color-3={selected} {href}>
<a
class="mx-4 block rounded px-3 py-2 font-semibold"
class:bg-color-3={selected}
{href}
style:background-color={selected ? 'var(--bg-surface-highlight)' : undefined}
>
<svelte:component this={icon} class="text-color-4 mr-1 inline h-4 w-4 align-middle" />
<slot />
</a>

4
packages/ui/src/routes/[projectId]/navigation/Footer.svelte
View File

@ -12,7 +12,9 @@
</script>
<div
class="border-color-4 text-color-3 flex flex-shrink-0 items-center justify-between border-t px-4 py-4"
class="text-color-3 flex flex-shrink-0 items-center justify-between border-t px-4 py-4"
style:background-color="var(--bg-surface-highlight)"
style:border-color="var(--border-surface)"
>
<div class="flex items-center">
<Link href="/" class="p-1">

4
packages/ui/src/routes/[projectId]/navigation/Navigation.svelte
View File

@ -32,7 +32,9 @@
</script>
<div
class="bg-color-5 border-color-4 z-30 flex w-80 shrink-0 flex-col border-r"
class="z-30 flex w-80 shrink-0 flex-col border-r"
style:background-color="var(--bg-surface)"
style:border-color="var(--border-surface)"
style:width={$userSettings.trayWidth ? `${$userSettings.trayWidth}px` : null}
role="menu"
tabindex="0"

7
packages/ui/src/routes/[projectId]/navigation/YourBranches.svelte
View File

@ -51,7 +51,9 @@
</script>
<div
class="bg-color-3 border-color-4 flex items-center justify-between border-b border-t px-2 py-1 pr-1"
class="flex items-center justify-between border-b border-t px-2 py-1 pr-1"
style:background-color="var(--bg-surface-highlight)"
style:border-color="var(--border-surface)"
>
<div class="flex flex-row place-items-center space-x-2">
<button class="h-full w-full" on:click={() => (yourBranchesOpen = !yourBranchesOpen)}>
@ -86,9 +88,10 @@
<a
href={`/${project.id}/stashed/${branch.id}`}
transition:slide={{ duration: 250 }}
class="border-color-4 group block border-b p-2 pr-0 -outline-offset-2 outline-blue-200 last:border-b focus-within:outline-2"
class="group block border-b p-2 pr-0 -outline-offset-2 outline-blue-200 last:border-b focus-within:outline-2"
class:bg-light-50={$page.url.pathname.includes(branch.id)}
class:dark:bg-zinc-700={$page.url.pathname.includes(branch.id)}
style:border-color="var(--border-surface)"
>
<div class="relative flex max-w-full flex-row">
<div class="flex flex-shrink flex-grow flex-col gap-y-2 overflow-hidden">

9
packages/ui/src/routes/[projectId]/remote/[sha]/+page.svelte
View File

@ -1,7 +1,6 @@
<script lang="ts">
import type { PageData } from './$types';
import { page } from '$app/stores';
import ProjectHeader from '../../ProjectHeader.svelte';
import RemoteBranchPreview from './RemoteBranchPreview.svelte';
export let data: PageData;
@ -10,8 +9,12 @@
$: branch = $remoteBranchStore?.find((b) => b.sha == $page.params.sha);
</script>
<div class="bg-color-3 flex h-full flex-grow flex-col overflow-y-auto overscroll-none">
<div class="flex-grow px-8">
<div class="h-full max-w-xl flex-grow flex-col overflow-y-auto overscroll-none p-4">
<div
class="rounded-lg border"
style:background-color="var(--bg-surface)"
style:border-color="var(--border-surface)"
>
{#if $remoteBranchState?.isLoading}
<p>Loading...</p>
{:else if $remoteBranchState?.isError}

24
packages/ui/src/routes/[projectId]/settings/+page.svelte
View File

@ -11,6 +11,7 @@
import BackButton from '$lib/components/BackButton.svelte';
import Modal from '$lib/components/Modal.svelte';
import Button from '$lib/components/Button.svelte';
import Spacer from './Spacer.svelte';
export let data: PageData;
const { project, cloud } = data;
@ -52,20 +53,21 @@
};
</script>
<div class="h-full flex-grow overflow-y-auto overscroll-none">
<div class="mx-auto flex min-w-min max-w-xl flex-col gap-y-6 overflow-visible p-8">
<div class="flex w-full">
<BackButton />
<h2 class="text-2xl font-medium">Project settings</h2>
</div>
<div class="bg-color-1 h-[0.0625rem] shrink-0" />
<div class="h-full flex-grow overflow-y-auto overscroll-none p-3">
<div
class="flex min-w-min max-w-4xl flex-col gap-y-6 overflow-visible rounded-lg px-5 py-4"
style:background-color="var(--bg-surface)"
style:border-color="var(--border-surface)"
>
<h2 class="text-2xl font-medium">Project settings</h2>
<Spacer />
<CloudForm project={$project} on:updated={onCloudUpdated} />
<div class="bg-color-1 h-[0.0625rem] shrink-0" />
<Spacer />
<DetailsForm project={$project} on:updated={onDetailsUpdated} />
<div class="bg-color-1 h-[0.0625rem] shrink-0" />
<Spacer />
<KeysForm project={$project} on:updated={onKeysUpdated} />
<Spacer />
<div class="bg-color-1 h-[0.0625rem] shrink-0" />
<div class="flex gap-x-4">
<a
href="https://discord.gg/wDKZCPEjXC"
@ -90,7 +92,7 @@
</a>
</div>
<div class="bg-color-1 h-[0.0625rem] shrink-0" />
<Spacer />
<Button color="destructive" kind="outlined" on:click={() => deleteConfirmationModal.show()}>
Delete project
</Button>

3
packages/ui/src/routes/[projectId]/settings/Spacer.svelte Normal file
View File

@ -0,0 +1,3 @@
<script lang="ts"></script>
<div class="h-[0.0625rem] shrink-0" style:background-color="var(--bg-surface-highlight)" />

8
packages/ui/src/routes/[projectId]/stashed/[branchId]/+page.svelte
View File

@ -18,8 +18,12 @@
$: branch = $vbranchStore?.find((b) => b.id == $page.params.branchId);
</script>
<div class="bg-color-3 flex h-full flex-grow flex-col overflow-y-auto overscroll-none">
<div class="flex-grow px-8">
<div class="h-full flex-grow overflow-y-auto overscroll-none p-3">
<div
class="flex min-w-min max-w-4xl flex-col gap-y-6 overflow-visible rounded-lg px-5 py-4"
style:background-color="var(--bg-surface)"
style:border-color="var(--border-surface)"
>
{#if $vbranchesState.isLoading}
<p>Loading...</p>
{:else if $vbranchesState.isError}

124
packages/ui/src/routes/user/+page.svelte
View File

@ -16,6 +16,7 @@
import Login from '$lib/components/Login.svelte';
import Button from '$lib/components/Button.svelte';
import Modal from '$lib/components/Modal.svelte';
import Spacer from '../[projectId]/settings/Spacer.svelte';
export let data: PageData;
const { cloud } = data;
@ -162,18 +163,28 @@
}
</script>
<div class="mx-auto h-fit w-full max-w-xl py-10">
<div class="flex flex-col gap-y-8">
<div class="flex w-full justify-between">
<div
class="flex h-full flex-shrink flex-grow flex-col pb-4"
style:background-color="var(--bg-surface)"
>
<div class="h-8" data-tauri-drag-region></div>
<div
class="flex w-full items-center justify-between border-b px-2 pb-2"
style:border-color="var(--border-surface)"
>
<div class="flex">
<BackButton />
<h2 class="text-2xl font-medium">GitButler Settings</h2>
{#if $user}
<!-- TODO: Separate logout from login button -->
<Login />
{/if}
<h2 class="ml-2 text-2xl font-medium">GitButler Settings</h2>
</div>
<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
{#if $user}
<!-- TODO: Separate logout from login button -->
<Login />
{/if}
</div>
<div
class="flex flex-col gap-y-6 overflow-y-auto overscroll-none border-b px-5 py-4"
style:border-color="var(--border-surface)"
>
<div>
<h2 class="mb-2 text-lg font-medium">GitButler Cloud</h2>
<p class="">
@ -254,7 +265,7 @@
{:else}
<Login />
{/if}
<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
<Spacer />
<div>
<h2 class="mb-2 text-lg font-medium">Git Stuff</h2>
</div>
@ -353,7 +364,7 @@
</div>
</div>
<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
<Spacer />
<div>
<h2 class="mb-2 text-lg font-medium">Appearance</h2>
</div>
@ -392,7 +403,7 @@
<div><ThemeSelector /></div>
</div>
<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
<Spacer />
{#if $user}
<div>
@ -420,8 +431,6 @@
</Button>
</div>
</div>
<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
{/if}
<div>
@ -451,57 +460,54 @@
</a>
</div>
<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
<Spacer />
<div class="flex flex-col gap-4">
<Button color="destructive" kind="outlined" on:click={() => deleteConfirmationModal.show()}>
Delete all data
</Button>
</div>
<Modal bind:this={deleteConfirmationModal} title="Delete all local data?">
<p>Are you sure you want to delete all local data? This can’t be undone.</p>
<svelte:fragment slot="controls" let:close>
<Button kind="outlined" on:click={close}>Cancel</Button>
<Button color="destructive" loading={isDeleting} on:click={onDeleteClicked}>Delete</Button>
</svelte:fragment>
</Modal>
<Modal
on:close={() => gitHubOauthCheckStatus(deviceCode)}
bind:this={gitHubOauthModal}
title="Authenticate with GitHub"
>
<div class="flex flex-col gap-4">
<div class="flex items-center gap-2">
<span class="flex-grow">1️⃣ Copy the following verification code: </span>
<input
bind:value={userCode}
class="
whitespece-pre h-6 w-24 select-all rounded border border-light-200 bg-white font-mono dark:border-dark-400 dark:bg-dark-700"
/>
<Button kind="outlined" color="purple" on:click={() => copyToClipboard(userCode)}>
Copy to Clipboard
</Button>
</div>
<div>
2️⃣ Navigate to
<a
class="underline"
href="https://github.com/login/device"
target="_blank"
rel="noreferrer">https://github.com/login/device</a
>
</div>
<div>3️⃣ Paste the code that you copied and follow the on-screen instructions.</div>
</div>
<svelte:fragment slot="controls" let:close>
<Button color="purple" on:click={close}>Done</Button>
</svelte:fragment>
</Modal>
</div>
<Modal bind:this={deleteConfirmationModal} title="Delete all local data?">
<p>Are you sure you want to delete all local data? This can’t be undone.</p>
<svelte:fragment slot="controls" let:close>
<Button kind="outlined" on:click={close}>Cancel</Button>
<Button color="destructive" loading={isDeleting} on:click={onDeleteClicked}>Delete</Button>
</svelte:fragment>
</Modal>
<Modal
on:close={() => gitHubOauthCheckStatus(deviceCode)}
bind:this={gitHubOauthModal}
title="Authenticate with GitHub"
>
<div class="flex flex-col gap-4">
<div class="flex items-center gap-2">
<span class="flex-grow">1️⃣ Copy the following verification code: </span>
<input
bind:value={userCode}
class="
whitespece-pre h-6 w-24 select-all rounded border border-light-200 bg-white font-mono dark:border-dark-400 dark:bg-dark-700"
/>
<Button kind="outlined" color="purple" on:click={() => copyToClipboard(userCode)}>
Copy to Clipboard
</Button>
</div>
<div>
2️⃣ Navigate to
<a class="underline" href="https://github.com/login/device" target="_blank" rel="noreferrer"
>https://github.com/login/device</a
>
</div>
<div>3️⃣ Paste the code that you copied and follow the on-screen instructions.</div>
</div>
<svelte:fragment slot="controls" let:close>
<Button color="purple" on:click={close}>Done</Button>
</svelte:fragment>
</Modal>
</div>
<div id="clipboard" />

89
packages/ui/src/styles/main.postcss
View File

@ -1,5 +1,6 @@
@import 'inter-ui/inter.css';
@import './diff.postcss';
@import './themes.postcss';
@import './syntax-highlighting.postcss';
@tailwind base;
@ -370,94 +371,6 @@ input[type='checkbox'].large {
/* Themes */
:root {
--background-1: #dddddd;
--background-2: #eaeaeb;
--background-3: #f4f4f5;
--background-4: #f9f9f8;
--background-5: #ffffff;
--text-color-1: #333333;
--text-color-2: #555555;
--text-color-3: #777777;
--text-color-4: #999999;
--border-color-1: #949498;
--border-color-2: #adadae;
--border-color-3: #c4c4c7;
--border-color-4: #e6e6e8;
--border-color-5: #fafafa;
}
:root.dark {
--background-1: #414141;
--background-2: #373737;
--background-3: #313131;
--background-4: #1f1f1f;
--background-5: #181818;
--text-color-1: #ffffff;
--text-color-2: #eeeeee;
--text-color-3: #aaaaaa;
--text-color-4: #888888;
--border-color-1: #d4d4d8;
--border-color-2: #a1a1aa;
--border-color-3: #51515a;
--border-color-4: #313131;
--border-color-5: #101010;
}
@layer base {
/* Background colors */
.bg-color-1 {
background-color: var(--background-1);
}
.bg-color-2 {
background-color: var(--background-2);
}
.bg-color-3 {
background-color: var(--background-3);
}
.bg-color-4 {
background-color: var(--background-4);
}
.bg-color-5 {
background-color: var(--background-5);
}
/* Text colors */
.text-color-1 {
color: var(--text-color-1);
}
.text-color-2 {
color: var(--text-color-2);
}
.text-color-3 {
color: var(--text-color-3);
}
.text-color-4 {
color: var(--text-color-4);
}
/* Border colors */
.border-color-1 {
border-color: var(--border-color-1);
}
.border-color-2 {
border-color: var(--border-color-2);
}
.border-color-3 {
border-color: var(--border-color-3);
}
.border-color-4 {
border-color: var(--border-color-4);
}
.border-color-5 {
border-color: var(--border-color-5);
}
}
/**
* When using native drag & drop :hover events do not work, and per-component styles
* are processed independently by svelte/postcss, so we don't have access to the colors

114
packages/ui/src/styles/themes.postcss Normal file
View File

@ -0,0 +1,114 @@
/* Color Palettes */
:root {
--background-1: #ffffff;
--background-2: #f9f9f9;
--background-3: #f4f4f5;
--background-4: #efefef;
--background-5: #dddddd;
--text-color-1: #333333;
--text-color-2: #555555;
--text-color-3: #777777;
--text-color-4: #999999;
--border-color-5: #949498;
--border-color-4: #adadae;
--border-color-3: #d4d4d7;
--border-color-2: #e6e6e8;
--border-color-1: #fafafa;
--bg-body: var(--background-4);
--bg-surface: var(--background-1);
--bg-surface-highlight: var(--background-3);
--bg-card: var(--background-2);
--bg-card-highlight: var(--background-4);
--border-card: var(--border-color-3);
--border-surface: var(--border-color-2);
--resizer-bg: var(--background-5);
--resizer-bg-active: #fbbf24;
}
:root.dark {
--background-1: #181818;
--background-2: #222222;
--background-3: #2c2c2c;
--background-4: #373737;
--background-5: #414141;
--text-color-1: #ffffff;
--text-color-2: #eeeeee;
--text-color-3: #aaaaaa;
--text-color-4: #888888;
--border-color-1: #101010;
--border-color-2: #313131;
--border-color-3: #41414a;
--border-color-4: #a1a1aa;
--border-color-5: #d4d4d8;
--bg-body: var(--background-1);
--bg-surface: var(--background-2);
--bg-surface-highlight: var(--background-3);
--bg-card: var(--background-3);
--bg-card-highlight: var(--background-4);
--border-card: var(--border-color-3);
--border-surface: var(--border-color-3);
--resizer-bg: var(--background-2);
--resizer-bg-active: #b45309;
}
/* Utility Classes */
@layer base {
/* Background colors */
.bg-color-1 {
background-color: var(--background-1);
}
.bg-color-2 {
background-color: var(--background-2);
}
.bg-color-3 {
background-color: var(--background-3);
}
.bg-color-4 {
background-color: var(--background-4);
}
.bg-color-5 {
background-color: var(--background-5);
}
/* Text colors */
.text-color-1 {
color: var(--text-color-1);
}
.text-color-2 {
color: var(--text-color-2);
}
.text-color-3 {
color: var(--text-color-3);
}
.text-color-4 {
color: var(--text-color-4);
}
/* Border colors */
.border-color-1 {
border-color: var(--border-color-1);
}
.border-color-2 {
border-color: var(--border-color-2);
}
.border-color-3 {
border-color: var(--border-color-3);
}
.border-color-4 {
border-color: var(--border-color-4);
}
.border-color-5 {
border-color: var(--border-color-5);
}
}