forge/Anvil
1
0
Fork 0
Code Pull requests Activity

fix: properly assign tokens or dark mode

Browse source 
When I was working on this I learned about

https://www.skeleton.dev/docs/tokens#color-pairing-chart

and how the different colour values of

https://www.skeleton.dev/docs/colors

relate to each other. I went off and augmented every colour class to the
respective dark mode according to the pairing.

There is no predefined mapping for text-white resp. bg-white to replace
it with black, so I had to fallback to dark:.
Likewise with the placeholder: assignments.

Another major aha moment came after studying

https://github.com/skeletonlabs/skeleton/blob/%40skeletonlabs/skeleton%402.10.2/packages/skeleton/src/lib/utilities/LightSwitch/lightswitch.ts

and realising, that I could put away my hack and instead use Svelte
stores - or rather the wrappers Skeleton provided for convenience.
This way, the LightSwitch I use in the Overlay popup now syncs up with
the Appearance radios in the Settings! Hooray!

I had to think a little bit harder how to handle Auto option. I feel
like it's not 100% where I would like to be but Skeleton is looking at
preferred colour scheme in a binary view and does not know anything
other than light or dark.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-08-09 18:15:45 +02:00
parent 5af877bcaa
commit c86902b2f8
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
24 changed files with 276 additions and 193 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/lib/components/atoms/CommitBody.svelte
View file

@ -31,11 +31,11 @@ You should have received a copy of the GNU Affero General Public License along w
}; };
</script> </script>
<div class="flex w-full justify-between gap-4 border border-surface-100"> <div class="flex w-full justify-between gap-4 border border-surface-100-800-token">
<!-- Detail text --> <!-- Detail text -->
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<span class="text-surface-500">{commit.name}</span> <span class="text-surface-500-400-token">{commit.name}</span>
<span class="text-surface-400" <span class="text-surface-400-500-token"
>{$_(i18n.relative_time, { >{$_(i18n.relative_time, {
values: { relativeTime: $date(new Date(commit.committed)) } values: { relativeTime: $date(new Date(commit.committed)) }
})}</span })}</span
@ -43,21 +43,27 @@ You should have received a copy of the GNU Affero General Public License along w
</div> </div>
<!-- SHA --> <!-- SHA -->
<div class="flex"> <div class="flex">
<button type="button" class="btn-icon border border-surface-100 rounded bg-white self-start"> <button
type="button"
class="btn-icon border border-surface-100-800-token rounded bg-white dark:bg-black self-start"
>
<Copy16 fill="currentColor" /> <Copy16 fill="currentColor" />
<span class="sr-only">{$_(i18n.actions.copy)}</span> <span class="sr-only">{$_(i18n.actions.copy)}</span>
</button> </button>
<!-- Since I cannot successfully define font-mono here, enforce a minimum width for equally sized buttons --> <!-- Since I cannot successfully define font-mono here, enforce a minimum width for equally sized buttons -->
<button <button
type="button" type="button"
class="btn border border-surface-100 rounded bg-white min-w-32 self-start" class="btn border border-surface-100-800-token rounded bg-white dark:bg-black min-w-32 self-start"
> >
{commit.hash.slice(0, 8)} {commit.hash.slice(0, 8)}
</button> </button>
</div> </div>
<!-- Browse --> <!-- Browse -->
<div> <div>
<button type="button" class="btn-icon border border-surface-100 rounded bg-white"> <button
type="button"
class="btn-icon border border-surface-100-800-token rounded bg-white dark:bg-black"
>
<FileDirectory16 fill="currentColor" /> <FileDirectory16 fill="currentColor" />
<span class="sr-only">{$_(i18n.actions.browse)}</span> <span class="sr-only">{$_(i18n.actions.browse)}</span>
</button> </button>

2
src/lib/components/atoms/CommitDate.svelte
View file

@ -36,7 +36,7 @@ You should have received a copy of the GNU Affero General Public License along w
</script> </script>
<div class="flex gap-6 -ms-6"> <div class="flex gap-6 -ms-6">
<span class="bg-white"> <span class="bg-white dark:bg-black">
<GitCommit24 fill="currentColor" /> <GitCommit24 fill="currentColor" />
</span> </span>
<span class="flex gap-6 -ms-3"> <span class="flex gap-6 -ms-3">

12
src/lib/components/atoms/MainMenuActions.svelte
View file

@ -17,15 +17,21 @@ You should have received a copy of the GNU Affero General Public License along w
</script> </script>
<div class="flex gap-4"> <div class="flex gap-4">
<div class="flex flex-1 align-center justify-center gap-2 bg-white border-surface-200"> <div
class="flex flex-1 align-center justify-center gap-2 bg-white dark:bg-black border-surface-200-700-token"
>
<RepoForked24 fill="currentColor" /> <RepoForked24 fill="currentColor" />
<span class="sr-only">{$_('page.profile.menu.actions.fork')}</span> <span class="sr-only">{$_('page.profile.menu.actions.fork')}</span>
</div> </div>
<div class="flex flex-1 align-center justify-center gap-2 bg-white border-surface-200"> <div
class="flex flex-1 align-center justify-center gap-2 bg-white dark:bg-black border-surface-200-700-token"
>
<Star24 fill="currentColor" /> <Star24 fill="currentColor" />
<span class="sr-only">{$_('page.profile.menu.actions.star')}</span> <span class="sr-only">{$_('page.profile.menu.actions.star')}</span>
</div> </div>
<div class="flex flex-1 align-center justify-center gap-2 bg-white border-surface-200"> <div
class="flex flex-1 align-center justify-center gap-2 bg-white dark:bg-black border-surface-200-700-token"
>
<EyeClosed24 fill="currentColor" /> <EyeClosed24 fill="currentColor" />
<span class="sr-only">{$_('page.profile.menu.actions.watch')}</span> <span class="sr-only">{$_('page.profile.menu.actions.watch')}</span>
<TriangleDown24 fill="currentColor" /> <TriangleDown24 fill="currentColor" />

10
src/lib/components/atoms/MainMenuSummary.svelte
View file

@ -28,14 +28,14 @@ You should have received a copy of the GNU Affero General Public License along w
<div class="flex items-center content-stretch justify-start gap-4 ps-1"> <div class="flex items-center content-stretch justify-start gap-4 ps-1">
<button <button
type="button" type="button"
class="btn btn-icon text-white bg-surface-400 rounded-full" class="btn btn-icon text-white dark:text-black bg-surface-400-500-token rounded-full"
use:popup={popupClick} use:popup={popupClick}
> >
<Person24 fill="currentColor" /> <Person24 fill="currentColor" />
<span class="sr-only">{$_('page.profile.menu.buttons.avatar')}</span> <span class="sr-only">{$_('page.profile.menu.buttons.avatar')}</span>
</button> </button>
<div class="flex flex-1 justify-around content-stretch bg-white"> <div class="flex flex-1 justify-around content-stretch bg-white dark:bg-black">
<div class="flex items-center content-stretch gap-1 bg-white"> <div class="flex items-center content-stretch gap-1 bg-white dark:bg-black">
<button class="btn btn-icon rounded-full"> <button class="btn btn-icon rounded-full">
<IssueOpened24 fill="currentColor" /> <IssueOpened24 fill="currentColor" />
<span> <span>
@ -49,7 +49,7 @@ You should have received a copy of the GNU Affero General Public License along w
</span> </span>
</button> </button>
</div> </div>
<div class="flex items-center content-stretch gap-1 bg-white"> <div class="flex items-center content-stretch gap-1 bg-white dark:bg-black">
<button class="btn btn-icon rounded-full"> <button class="btn btn-icon rounded-full">
<GitPullRequest24 fill="currentColor" /> <GitPullRequest24 fill="currentColor" />
<span> <span>
@ -63,7 +63,7 @@ You should have received a copy of the GNU Affero General Public License along w
</span> </span>
</button> </button>
</div> </div>
<div class="flex items-center content-stretch gap-1 bg-white"> <div class="flex items-center content-stretch gap-1 bg-white dark:bg-black">
<button class="btn btn-icon rounded-full"> <button class="btn btn-icon rounded-full">
<Bell24 fill="currentColor" /> <Bell24 fill="currentColor" />
<span> <span>

33
src/lib/components/atoms/OverlayAvatar.svelte
View file

@ -11,7 +11,7 @@ This program is distributed in the hope that it will be useful, but WITHOUT ANY
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<script> <script>
import { getModalStore } from '@skeletonlabs/skeleton'; import { getModalStore, LightSwitch } from '@skeletonlabs/skeleton';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { Gear24, Info24, Moon24, Person24, SignOut24 } from 'svelte-octicons'; import { Gear24, Info24, Moon24, Person24, SignOut24 } from 'svelte-octicons';
@ -26,28 +26,33 @@ You should have received a copy of the GNU Affero General Public License along w
} }
</script> </script>
<div class="flex flex-col bg-white border-surface-300 border-rounded drop-shadow px-4 py-2"> <div
<div class="bg-white flex gap-4"> class="flex flex-col bg-white dark:bg-black border-surface-300-600 border-rounded drop-shadow px-4 py-2"
<Person24 fill="currentColor" class="text-white bg-surface-400 rounded-full" /> >
<span class="text-surface-500 -mb-2">{$_('overlay.avatar.profile')}</span> <div class="bg-white dark:bg-black flex gap-4">
<Person24
fill="currentColor"
class="text-white dark:text-black bg-surface-400-500-token rounded-full"
/>
<span class="text-surface-500-400-token -mb-2">{$_('overlay.avatar.profile')}</span>
</div> </div>
<div class="bg-white flex gap-4"> <div class="bg-white dark:bg-black flex gap-4">
<Gear24 fill="currentColor" /> <Gear24 fill="currentColor" />
<button type="button" class="text-surface-500 -mb-2" on:click={openSettingsOnClick} <button type="button" class="text-surface-500-400-token -mb-2" on:click={openSettingsOnClick}
>{$_('overlay.avatar.settings')}</button >{$_('overlay.avatar.settings')}</button
> >
</div> </div>
<div class="bg-white flex gap-4"> <div class="bg-white dark:bg-black flex gap-4">
<Moon24 fill="currentColor" /> <Moon24 fill="currentColor" />
<span class="text-surface-500 -mb-2">{$_('overlay.avatar.dark_mode')}</span> <span class="text-surface-500-400-token -mb-2">{$_('overlay.avatar.dark_mode')}</span>
<span>Slider missing</span> <LightSwitch />
</div> </div>
<div class="bg-white flex gap-4"> <div class="bg-white dark:bg-black flex gap-4">
<Info24 fill="currentColor" /> <Info24 fill="currentColor" />
<span class="text-surface-500 -mb-2">{$_('overlay.avatar.about_anvil')}</span> <span class="text-surface-500-400-token -mb-2">{$_('overlay.avatar.about_anvil')}</span>
</div> </div>
<div class="bg-white flex gap-4"> <div class="bg-white dark:bg-black flex gap-4">
<SignOut24 fill="currentColor" /> <SignOut24 fill="currentColor" />
<span class="text-surface-500 -mb-2">{$_('overlay.avatar.sign_out')}</span> <span class="text-surface-500-400-token -mb-2">{$_('overlay.avatar.sign_out')}</span>
</div> </div>
</div> </div>

22
src/lib/components/atoms/SettingsSidebar.svelte
View file

@ -28,7 +28,7 @@ You should have received a copy of the GNU Affero General Public License along w
<AppRail aspectRatio="auto" gap="gap-8" height="h-auto" width="w-[230px]" spacing="my-2"> <AppRail aspectRatio="auto" gap="gap-8" height="h-auto" width="w-[230px]" spacing="my-2">
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">
<AppRailTile <AppRailTile
regionLabel="!text-3xl text-surface-500 bg-surface-100 float-start w-full text-start ps-8 pt-8 -my-2" regionLabel="!text-3xl text-surface-500-400-token bg-surface-100-800-token float-start w-full text-start ps-8 pt-8 -my-2"
>{$_('settings.headline')}</AppRailTile >{$_('settings.headline')}</AppRailTile
> >
</svelte:fragment> </svelte:fragment>
@ -37,8 +37,8 @@ You should have received a copy of the GNU Affero General Public License along w
name="profile" name="profile"
value="profile" value="profile"
on:change={onTileChanged} on:change={onTileChanged}
regionLabel="float-start ps-2 py-1 font-normal text-surface-500 !text-xl" regionLabel="float-start ps-2 py-1 font-normal text-surface-500-400-token !text-xl"
regionLead="float-start ps-8 text-surface-500" regionLead="float-start ps-8 text-surface-500-400-token"
title={$_('settings.profile.label')} title={$_('settings.profile.label')}
> >
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">
@ -51,8 +51,8 @@ You should have received a copy of the GNU Affero General Public License along w
name="account" name="account"
value="account" value="account"
on:change={onTileChanged} on:change={onTileChanged}
regionLabel="float-start ps-2 py-1 font-normal text-surface-500 !text-xl" regionLabel="float-start ps-2 py-1 font-normal text-surface-500-400-token !text-xl"
regionLead="float-start ps-8 text-surface-500" regionLead="float-start ps-8 text-surface-500-400-token"
title={$_('settings.account.label')} title={$_('settings.account.label')}
> >
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">
@ -65,8 +65,8 @@ You should have received a copy of the GNU Affero General Public License along w
name="ssh_gpg_keys" name="ssh_gpg_keys"
value="ssh_gpg_keys" value="ssh_gpg_keys"
on:change={onTileChanged} on:change={onTileChanged}
regionLabel="float-start ps-2 py-1 font-normal text-surface-500 !text-xl" regionLabel="float-start ps-2 py-1 font-normal text-surface-500-400-token !text-xl"
regionLead="float-start ps-8 text-surface-500" regionLead="float-start ps-8 text-surface-500-400-token"
title={$_('settings.ssh_gpg_keys.label')} title={$_('settings.ssh_gpg_keys.label')}
> >
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">
@ -79,8 +79,8 @@ You should have received a copy of the GNU Affero General Public License along w
name="appearance" name="appearance"
value="appearance" value="appearance"
on:change={onTileChanged} on:change={onTileChanged}
regionLabel="float-start ps-2 py-1 font-normal text-surface-500 !text-xl" regionLabel="float-start ps-2 py-1 font-normal text-surface-500-400-token !text-xl"
regionLead="float-start ps-8 text-surface-500" regionLead="float-start ps-8 text-surface-500-400-token"
title={$_('settings.appearance.label')} title={$_('settings.appearance.label')}
> >
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">
@ -93,8 +93,8 @@ You should have received a copy of the GNU Affero General Public License along w
name="notifications" name="notifications"
value="notifications" value="notifications"
on:change={onTileChanged} on:change={onTileChanged}
regionLabel="float-start ps-2 py-1 font-normal text-surface-500 !text-xl" regionLabel="float-start ps-2 py-1 font-normal text-surface-500-400-token !text-xl"
regionLead="float-start ps-8 text-surface-500" regionLead="float-start ps-8 text-surface-500-400-token"
title={$_('settings.notifications.label')} title={$_('settings.notifications.label')}
> >
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">

4
src/lib/components/molecules/MainMenu.svelte
View file

@ -18,7 +18,9 @@ You should have received a copy of the GNU Affero General Public License along w
import MainMenuDetails from './MainMenuDetails.svelte'; import MainMenuDetails from './MainMenuDetails.svelte';
</script> </script>
<div class="flex flex-col gap-6 h-full px-8 py-6 bg-surface-50 border-surface-200"> <div
class="flex flex-col gap-6 h-full px-8 py-6 bg-surface-50-900-token border-surface-200-700-token"
>
<MainMenuSummary /> <MainMenuSummary />
<MainMenuDetails /> <MainMenuDetails />
<MainMenuActions /> <MainMenuActions />

91
src/lib/components/molecules/MainMenuDetails.svelte
View file

@ -32,73 +32,96 @@ You should have received a copy of the GNU Affero General Public License along w
</script> </script>
<div class="flex -mx-2"> <div class="flex -mx-2">
<div class="flex flex-1 gap-2 bg-surface-50 border-surface-300 drop-shadow p-2"> <div
class="flex flex-1 gap-2 bg-surface-50-900-token border-surface-300-600-token drop-shadow p-2"
>
<Repo24 fill="currentColor" /> <Repo24 fill="currentColor" />
<span class="text-primary-600 semibold flex-1 self-center"> Project Name </span> <span class="text-primary-600 semibold flex-1 self-center"> Project Name </span>
<TriangleDown24 fill="currentColor" /> <TriangleDown24 fill="currentColor" />
</div> </div>
</div> </div>
<div class="flex flex-col -mt-6"> <div class="flex flex-col -mt-6">
<div class="flex flex-col bg-white border-surface-300 rounded-border px-4"> <div
<div class="flex gap-4 bg-white"> class="flex flex-col bg-white dark:bg-black border-surface-300-600-token rounded-border px-4"
>
<div class="flex gap-4 bg-white dark:bg-black">
<Code24 fill="currentColor" /> <Code24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.repository')}</span <span class="text-surface-500-400-token -mb-2 flex-1"
>{$_('page.profile.menu.details.repository')}</span
> >
<ChevronDown24 fill="currentColor" /> <ChevronDown24 fill="currentColor" />
</div> </div>
<div class="flex flex-col ps-4"> <div class="flex flex-col ps-4">
<div class="flex gap-4 bg-white"> <div class="flex gap-4 bg-white dark:bg-black">
<FileDirectory24 fill="currentColor" /> <FileDirectory24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.files')}</span> <span class="text-surface-500-400-token -mb-2 flex-1"
>{$_('page.profile.menu.details.files')}</span
>
</div> </div>
<div class="flex gap-4 bg-white"> <div class="flex gap-4 bg-white dark:bg-black">
<GitBranch24 fill="currentColor" /> <GitBranch24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.branches')}</span <span class="text-surface-500-400-token -mb-2 flex-1"
>{$_('page.profile.menu.details.branches')}</span
> >
</div> </div>
<div class="flex gap-4 bg-white"> <div class="flex gap-4 bg-white dark:bg-black">
<GitCommit24 fill="currentColor" /> <GitCommit24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.commits')}</span> <span class="text-surface-500-400-token -mb-2 flex-1"
</div> >{$_('page.profile.menu.details.commits')}</span
<div class="flex gap-4 bg-white">
<Tag24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.tags')}</span>
</div>
</div>
<div class="flex gap-4 bg-white">
<IssueOpened24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.issues')}</span>
<span class="text-surface-500 text-center bg-secondary-200 rounded-full min-w-6">2</span>
</div>
<div class="flex gap-4 bg-white">
<GitPullRequest24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1"
>{$_('page.profile.menu.details.merge_requests')}</span
> >
<span class="text-surface-500 text-center bg-secondary-200 rounded-full min-w-6 self-baseline" </div>
<div class="flex gap-4 bg-white dark:bg-black">
<Tag24 fill="currentColor" />
<span class="text-surface-500-400-token -mb-2 flex-1"
>{$_('page.profile.menu.details.tags')}</span
>
</div>
</div>
<div class="flex gap-4 bg-white dark:bg-black">
<IssueOpened24 fill="currentColor" />
<span class="text-surface-500-400-token -mb-2 flex-1"
>{$_('page.profile.menu.details.issues')}</span
>
<span class="text-surface-500-400-token text-center bg-secondary-200 rounded-full min-w-6"
>2</span >2</span
> >
</div> </div>
<div class="flex gap-4 bg-white"> <div class="flex gap-4 bg-white dark:bg-black">
<GitPullRequest24 fill="currentColor" />
<span class="text-surface-500-400-token -mb-2 flex-1"
>{$_('page.profile.menu.details.merge_requests')}</span
>
<span
class="text-surface-500-400-token text-center bg-secondary-200 rounded-full min-w-6 self-baseline"
>2</span
>
</div>
<div class="flex gap-4 bg-white dark:bg-black">
<Person24 fill="currentColor" /> <Person24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.people')}</span> <span class="text-surface-500-400-token -mb-2 flex-1"
>{$_('page.profile.menu.details.people')}</span
>
<ChevronDown24 fill="currentColor" /> <ChevronDown24 fill="currentColor" />
</div> </div>
<div class="flex flex-col ps-4"> <div class="flex flex-col ps-4">
<div class="flex gap-4 bg-white"> <div class="flex gap-4 bg-white dark:bg-black">
<PersonAdd24 fill="currentColor" /> <PersonAdd24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.roles')}</span> <span class="text-surface-500-400-token -mb-2 flex-1"
>{$_('page.profile.menu.details.roles')}</span
>
</div> </div>
<div class="flex gap-4 bg-white"> <div class="flex gap-4 bg-white dark:bg-black">
<CommentDiscussion24 fill="currentColor" /> <CommentDiscussion24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1" <span class="text-surface-500-400-token -mb-2 flex-1"
>{$_('page.profile.menu.details.moderation')}</span >{$_('page.profile.menu.details.moderation')}</span
> >
</div> </div>
</div> </div>
<div class="flex gap-4 bg-white"> <div class="flex gap-4 bg-white dark:bg-black">
<ListUnordered24 fill="currentColor" /> <ListUnordered24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.overview')}</span> <span class="text-surface-500-400-token -mb-2 flex-1"
>{$_('page.profile.menu.details.overview')}</span
>
<ChevronDown24 fill="currentColor" /> <ChevronDown24 fill="currentColor" />
</div> </div>
</div> </div>

4
src/lib/components/molecules/MoreFilters.svelte
View file

@ -23,8 +23,8 @@ You should have received a copy of the GNU Affero General Public License along w
}; };
</script> </script>
<form class="bg-surface-100 h-8 flex flex-col justify-center px-4"> <form class="bg-surface-100-800-token h-8 flex flex-col justify-center px-4">
<button type="submit" class="flex submit text-surface-400"> <button type="submit" class="flex submit text-surface-400-500-token">
{$_(i18n.submit)} {$_(i18n.submit)}
<TriangleDown24 fill="currentColor" class="ms-4 self-center" /> <TriangleDown24 fill="currentColor" class="ms-4 self-center" />
</button> </button>

16
src/lib/components/molecules/Pagination.svelte
View file

@ -29,20 +29,20 @@ You should have received a copy of the GNU Affero General Public License along w
<ChevronLeft24 fill="currentColor" /> <ChevronLeft24 fill="currentColor" />
{$_(i18n.previous)} {$_(i18n.previous)}
</a> </a>
<a href="?page=1" class="text-surface-500">1</a> <a href="?page=1" class="text-surface-500-400-token">1</a>
<a href="?page=2" class="text-surface-500">2</a> <a href="?page=2" class="text-surface-500-400-token">2</a>
<a href="?page=3" class="text-surface-500">3</a> <a href="?page=3" class="text-surface-500-400-token">3</a>
<a <a
href="?page=4" href="?page=4"
class="bg-primary-500 text-white rounded h-8 w-8 flex justify-center items-center" class="bg-primary-500 text-white dark:text-black rounded h-8 w-8 flex justify-center items-center"
> >
4 4
</a> </a>
<a href="?page=5" class="text-surface-500">5</a> <a href="?page=5" class="text-surface-500-400-token">5</a>
<a href="?page=6" class="text-surface-500">6</a> <a href="?page=6" class="text-surface-500-400-token">6</a>
<span>…</span> <span>…</span>
<a href="?page=17" class="text-surface-500">17</a> <a href="?page=17" class="text-surface-500-400-token">17</a>
<a href="?page=18" class="text-surface-500">18</a> <a href="?page=18" class="text-surface-500-400-token">18</a>
<a href="?page=+1" class="flex gap-2 text-primary-500"> <a href="?page=+1" class="flex gap-2 text-primary-500">
{$_(i18n.next)} {$_(i18n.next)}
<ChevronRight24 fill="currentColor" /> <ChevronRight24 fill="currentColor" />

4
src/lib/components/molecules/Project.svelte
View file

@ -47,7 +47,7 @@ You should have received a copy of the GNU Affero General Public License along w
}; };
</script> </script>
<div class="flex bg-white border border-surface-100 p-4"> <div class="flex bg-white dark:bg-black border border-surface-100 p-4">
<!-- Left --> <!-- Left -->
<div class="flex flex-col flex-grow ps-10"> <div class="flex flex-col flex-grow ps-10">
<!-- Name + Icon --> <!-- Name + Icon -->
@ -58,7 +58,7 @@ You should have received a copy of the GNU Affero General Public License along w
<ul class="ms-2 gap-4"> <ul class="ms-2 gap-4">
{#each collaborators as member} {#each collaborators as member}
<li title={member.preferredUsername}> <li title={member.preferredUsername}>
<div class="bg-surface-500 text-white rounded-full"> <div class="bg-surface-500-400-token text-white dark:text-black rounded-full">
<Person24 fill="currentColor" /> <Person24 fill="currentColor" />
</div> </div>
</li> </li>

2
src/lib/components/molecules/Projects.svelte
View file

@ -24,7 +24,7 @@ You should have received a copy of the GNU Affero General Public License along w
</script> </script>
<form> <form>
<button type="submit" class="flex submit text-surface-400"> <button type="submit" class="flex submit text-surface-400-500-token">
<Filter24 fill="currentColor" class="ms-4 self-center" /> <Filter24 fill="currentColor" class="ms-4 self-center" />
{$_(i18n.submit)} {$_(i18n.submit)}
</button> </button>

4
src/lib/components/molecules/Search.svelte
View file

@ -31,10 +31,10 @@ You should have received a copy of the GNU Affero General Public License along w
id="search" id="search"
name="search" name="search"
type="search" type="search"
class="bg-surface-200 border-none" class="bg-surface-200-700-token border-none"
placeholder={$_(i18n.placeholder)} placeholder={$_(i18n.placeholder)}
/> />
<button type="submit" class="submit bg-surface-400 text-white w-40"> <button type="submit" class="submit bg-surface-400-500-token text-white dark:text-black w-40">
{$_(i18n.submit)} {$_(i18n.submit)}
</button> </button>
</div> </div>

22
src/lib/components/molecules/Settings.svelte
View file

@ -19,31 +19,13 @@ You should have received a copy of the GNU Affero General Public License along w
import SettingsProfile from './SettingsProfile.svelte'; import SettingsProfile from './SettingsProfile.svelte';
let activeSetting = 'profile'; let activeSetting = 'profile';
let activeTheme = 'auto';
function onTileChanged(ev) { function onTileChanged(ev) {
activeSetting = ev.detail; activeSetting = ev.detail;
} }
function onThemeSwitched(ev) {
activeTheme = ev.detail;
// This is a hack.
// Skeleton relies on Cookies and a hook:
// https://github.com/skeletonlabs/skeleton/blob/%40skeletonlabs/skeleton%402.10.2/sites/skeleton.dev/src/hooks.server.ts#L16
// Svelte itself features a svelte:document special element that must
// only be used at the top level - except SvelteKit has app.html
// as a static file :[]
// Ideas welcome!
if (window?.document?.documentElement) {
window.document.documentElement.classList.remove('auto');
window.document.documentElement.classList.remove('dark');
window.document.documentElement.classList.remove('light');
window.document.documentElement.classList.add(activeTheme);
}
}
</script> </script>
<div class="flex bg-surface-50 min-h-[900px]"> <div class="flex bg-surface-50-900-token min-h-[900px]">
<SettingsSidebar on:switch-settings={onTileChanged} /> <SettingsSidebar on:switch-settings={onTileChanged} />
{#if activeSetting === 'profile'} {#if activeSetting === 'profile'}
@ -53,6 +35,6 @@ You should have received a copy of the GNU Affero General Public License along w
{:else if activeSetting === 'ssh_gpg_keys'} {:else if activeSetting === 'ssh_gpg_keys'}
<SettingsKeys /> <SettingsKeys />
{:else if activeSetting === 'appearance'} {:else if activeSetting === 'appearance'}
<SettingsAppearance on:switch-theme={onThemeSwitched} /> <SettingsAppearance />
{/if} {/if}
</div> </div>

22
src/lib/components/molecules/SettingsAccount.svelte
View file

@ -15,26 +15,32 @@ You should have received a copy of the GNU Affero General Public License along w
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
</script> </script>
<div class="flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100"> <div class="flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100-800-token">
<div class="flex text-surface-500 text-xl font-semibold">{$_('settings.account.headline')}</div> <div class="flex text-surface-500-400-token text-xl font-semibold">
{$_('settings.account.headline')}
</div>
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<div> <div>
<span class="text-surface-500 font-semibold">{$_('settings.account.f2.label')}</span> <span class="text-surface-500-400-token font-semibold">{$_('settings.account.f2.label')}</span
>
<input <input
type="text" type="text"
placeholder={$_('settings.account.f2.placeholder')} placeholder={$_('settings.account.f2.placeholder')}
class="input bg-white placeholder:text-surface-300" class="input bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-600"
/> />
</div> </div>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<span class="text-surface-500 font-semibold">{$_('settings.account.password.label')}</span> <span class="text-surface-500-400-token font-semibold"
<input type="password" class="input bg-white" /> >{$_('settings.account.password.label')}</span
>
<input type="password" class="input bg-white dark:bg-black" />
<a>{$_('settings.account.password.reset')}</a> <a>{$_('settings.account.password.reset')}</a>
</div> </div>
<div> <div>
<span class="text-surface-500 font-semibold">{$_('settings.account.verification.label')}</span <span class="text-surface-500-400-token font-semibold"
>{$_('settings.account.verification.label')}</span
> >
<input type="text" class="input bg-white" /> <input type="text" class="input bg-white dark:bg-black" />
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
<button class="btn variant-filled-warning">{$_('settings.account.delete')}</button> <button class="btn variant-filled-warning">{$_('settings.account.delete')}</button>

44
src/lib/components/molecules/SettingsAppearance.svelte
View file

@ -12,31 +12,53 @@ You should have received a copy of the GNU Affero General Public License along w
--> -->
<script> <script>
import { createEventDispatcher } from 'svelte'; import { modeCurrent, getModeOsPrefers, setModeCurrent } from '@skeletonlabs/skeleton';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
const dispatcher = createEventDispatcher(); export let activeTheme = 'auto';
modeCurrent.subscribe(function (isLight) {
activeTheme = isLight ? 'light' : 'dark';
});
function onThemeSwitched(ev) { function onThemeSwitched({ target }) {
dispatcher('switch-theme', ev.target.value); const { value } = target;
let theme = value === 'light';
if (value === 'auto') {
theme = getModeOsPrefers();
}
setModeCurrent(theme);
} }
</script> </script>
<div class="flex flex-col flex-1 gap-6 pe-8 pb-8 ps-8 pt-20 bg-surface-100-800-token"> <div class="flex flex-col flex-1 gap-6 pe-8 pb-8 ps-8 pt-20 bg-surface-100-800-token">
<div class="text-surface-500-300-token text-xl font-semibold"> <div class="text-surface-500-400-token text-xl font-semibold">
{$_('settings.appearance.headline')} {$_('settings.appearance.headline')}
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div class="text-surface-500-300-token font-semibold py-1"> <div class="text-surface-500-400-token font-semibold py-1">
{$_('settings.appearance.theme.headline')} {$_('settings.appearance.theme.headline')}
</div> </div>
<div class="flex gap-8"> <div class="flex gap-8">
<label class="label flex items-center space-x-2"> <label class="label flex items-center space-x-2">
<input type="radio" class="me-2" name="theme" value="light" on:change={onThemeSwitched} /> <input
type="radio"
class="me-2"
name="theme"
value="light"
checked={activeTheme === 'light'}
on:change={onThemeSwitched}
/>
{$_('settings.appearance.theme.light')} {$_('settings.appearance.theme.light')}
</label> </label>
<label class="label flex items-center space-x-2"> <label class="label flex items-center space-x-2">
<input type="radio" class="me-2" name="theme" value="dark" on:change={onThemeSwitched} /> <input
type="radio"
class="me-2"
name="theme"
value="dark"
checked={activeTheme === 'dark'}
on:change={onThemeSwitched}
/>
{$_('settings.appearance.theme.dark')} {$_('settings.appearance.theme.dark')}
</label> </label>
<label class="label flex items-center space-x-2"> <label class="label flex items-center space-x-2">
@ -45,7 +67,7 @@ You should have received a copy of the GNU Affero General Public License along w
class="me-2" class="me-2"
name="theme" name="theme"
value="auto" value="auto"
checked checked={activeTheme === 'auto'}
on:change={onThemeSwitched} on:change={onThemeSwitched}
/> />
{$_('settings.appearance.theme.auto')} {$_('settings.appearance.theme.auto')}
@ -54,13 +76,13 @@ You should have received a copy of the GNU Affero General Public License along w
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div class="text-surface-500-300-token font-semibold py-1"> <div class="text-surface-500-400-token font-semibold py-1">
{$_('settings.appearance.tab_indent.headline')} {$_('settings.appearance.tab_indent.headline')}
</div> </div>
<p class="text-sm">{$_('settings.appearance.tab_indent.intro')}</p> <p class="text-sm">{$_('settings.appearance.tab_indent.intro')}</p>
<input <input
type="text" type="text"
class="input bg-white text-center text-surface-500-300-token max-w-16" class="input bg-white dark:bg-black text-center text-surface-500-400-token max-w-16"
name="tab_indent" name="tab_indent"
value="4" value="4"
/> />

34
src/lib/components/molecules/SettingsKeys.svelte
View file

@ -35,13 +35,13 @@ You should have received a copy of the GNU Affero General Public License along w
]; ];
</script> </script>
<div class="flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100"> <div class="flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100-800-token">
<div class="flex text-surface-500 text-xl font-semibold"> <div class="flex text-surface-500-400-token text-xl font-semibold">
{$_('settings.ssh_gpg_keys.headline')} {$_('settings.ssh_gpg_keys.headline')}
</div> </div>
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<div class="flex text-surface-500 font-semibold py-1"> <div class="flex text-surface-500-400-token font-semibold py-1">
{$_('settings.ssh_gpg_keys.ssh.headline')} {$_('settings.ssh_gpg_keys.ssh.headline')}
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
@ -51,8 +51,8 @@ You should have received a copy of the GNU Affero General Public License along w
class="flex border-b border-surface-200 last:border-b-0 items-center justify-between gap-4 pb-2" class="flex border-b border-surface-200 last:border-b-0 items-center justify-between gap-4 pb-2"
> >
<Key24 fill="currentColor" /> <Key24 fill="currentColor" />
<span class="text-surface-500 flex-1 shrink-0">{key.title}</span> <span class="text-surface-500-400-token flex-1 shrink-0">{key.title}</span>
<code class="text-surface-500 shrink-0">{key.fingerprint}</code> <code class="text-surface-500-400-token shrink-0">{key.fingerprint}</code>
<button type="button" class="btn font-semibold variant-filled-warning" <button type="button" class="btn font-semibold variant-filled-warning"
>{$_('settings.ssh_gpg_keys.ssh.remove')}</button >{$_('settings.ssh_gpg_keys.ssh.remove')}</button
> >
@ -61,21 +61,23 @@ You should have received a copy of the GNU Affero General Public License along w
</div> </div>
<input <input
type="text" type="text"
class="input bg-white placeholder:text-surface-300" class="input bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-600"
placeholder={$_('settings.ssh_gpg_keys.ssh.title.placeholder')} placeholder={$_('settings.ssh_gpg_keys.ssh.title.placeholder')}
/> />
<textarea <textarea
placeholder={$_('settings.ssh_gpg_keys.ssh.key.placeholder')} placeholder={$_('settings.ssh_gpg_keys.ssh.key.placeholder')}
rows="4" rows="4"
class="placeholder:text-surface-300" class="bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-600"
></textarea> ></textarea>
<button type="button" class="btn font-semibold text-white variant-filled-success self-end" <button
type="button"
class="btn font-semibold text-white dark:text-black variant-filled-success self-end"
>{$_('settings.ssh_gpg_keys.ssh.add')}</button >{$_('settings.ssh_gpg_keys.ssh.add')}</button
> >
</div> </div>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<div class="flex text-surface-500 font-semibold py-1"> <div class="flex text-surface-500-400-token font-semibold py-1">
{$_('settings.ssh_gpg_keys.gpg.headline')} {$_('settings.ssh_gpg_keys.gpg.headline')}
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
@ -85,8 +87,10 @@ You should have received a copy of the GNU Affero General Public License along w
class="flex border-b border-surface-200 last:border-b-0 items-center justify-between gap-4 pb-2" class="flex border-b border-surface-200 last:border-b-0 items-center justify-between gap-4 pb-2"
> >
<Key24 fill="currentColor" /> <Key24 fill="currentColor" />
<span class="text-surface-500 flex-1 shrink-0">{key.title}</span> <span class="text-surface-500-400-token flex-1 shrink-0">{key.title}</span>
<code class="text-surface-500 font-medium shrink-0 w-[245px]">{key.fingerprint}</code> <code class="text-surface-500-400-token font-medium shrink-0 w-[245px]"
>{key.fingerprint}</code
>
<button type="button" class="btn font-semibold variant-filled-warning" <button type="button" class="btn font-semibold variant-filled-warning"
>{$_('settings.ssh_gpg_keys.gpg.remove')}</button >{$_('settings.ssh_gpg_keys.gpg.remove')}</button
> >
@ -95,15 +99,17 @@ You should have received a copy of the GNU Affero General Public License along w
</div> </div>
<input <input
type="text" type="text"
class="input bg-white placeholder:text-surface-300" class="input bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-600"
placeholder={$_('settings.ssh_gpg_keys.gpg.title.placeholder')} placeholder={$_('settings.ssh_gpg_keys.gpg.title.placeholder')}
/> />
<textarea <textarea
placeholder={$_('settings.ssh_gpg_keys.gpg.key.placeholder')} placeholder={$_('settings.ssh_gpg_keys.gpg.key.placeholder')}
rows="4" rows="4"
class="placeholder:text-surface-300" class="bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-600"
></textarea> ></textarea>
<button type="button" class="btn font-semibold text-white variant-filled-success self-end" <button
type="button"
class="btn font-semibold text-white dark:text-black variant-filled-success self-end"
>{$_('settings.ssh_gpg_keys.gpg.add')}</button >{$_('settings.ssh_gpg_keys.gpg.add')}</button
> >
</div> </div>

56
src/lib/components/molecules/SettingsProfile.svelte
View file

@ -16,16 +16,23 @@ You should have received a copy of the GNU Affero General Public License along w
import { Person24, Upload16, XCircleFill12 } from 'svelte-octicons'; import { Person24, Upload16, XCircleFill12 } from 'svelte-octicons';
</script> </script>
<div class="flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100"> <div class="flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100-800-token">
<div class="flex text-surface-500 text-xl font-semibold">{$_('settings.profile.headline')}</div> <div class="flex text-surface-500-400-token text-xl font-semibold">
{$_('settings.profile.headline')}
</div>
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<div class="text-surface-500 font-semibold">{$_('settings.profile.avatar.headline')}</div> <div class="text-surface-500-400-token font-semibold">
{$_('settings.profile.avatar.headline')}
</div>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<div class="flex gap-4"> <div class="flex gap-4">
<Person24 fill="currentColor" class="h-16 w-16 text-white bg-surface-400 rounded-full" /> <Person24
fill="currentColor"
class="h-16 w-16 text-white dark:text-surface-300 bg-surface-400-500-token rounded-full"
/>
<button <button
type="button" type="button"
class="btn flex gap-4 justify-between px-4 bg-surface-50 border-surface-100" class="btn flex gap-4 justify-between px-4 text-surface-900-50-token bg-surface-50-900-token border-surface-100-800-token"
> >
<Upload16 fill="currentColor" /> <Upload16 fill="currentColor" />
<span>{$_('settings.profile.avatar.upload')}</span> <span>{$_('settings.profile.avatar.upload')}</span>
@ -41,78 +48,85 @@ You should have received a copy of the GNU Affero General Public License along w
<div> <div>
<div class="flex gap-8"> <div class="flex gap-8">
<div class="flex flex-col gap-2 grow"> <div class="flex flex-col gap-2 grow">
<span class="text-surface-500 font-semibold">{$_('settings.profile.name.label')}</span> <span class="text-surface-500-400-token font-semibold"
>{$_('settings.profile.name.label')}</span
>
<input <input
type="text" type="text"
placeholder={$_('settings.profile.name.placeholder')} placeholder={$_('settings.profile.name.placeholder')}
class="input bg-white placeholder:text-surface-300" class="input bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-400"
/> />
</div> </div>
<div class="flex flex-col gap-2 flex-1 shrink basis-40"> <div class="flex flex-col gap-2 flex-1 shrink basis-40">
<span class="text-surface-500 font-semibold">{$_('settings.profile.pronouns.label')}</span <span class="text-surface-500-400-token font-semibold"
>{$_('settings.profile.pronouns.label')}</span
> >
<input type="text" class="input bg-white" /> <input type="text" class="input bg-white dark:bg-black" />
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<span class="text-surface-500 font-semibold">{$_('settings.profile.bio.label')}</span> <span class="text-surface-500-400-token font-semibold"
>{$_('settings.profile.bio.label')}</span
>
<textarea <textarea
placeholder={$_('settings.profile.bio.placeholder')} placeholder={$_('settings.profile.bio.placeholder')}
rows="4" rows="4"
class="placeholder:text-surface-300" class="placeholder:text-surface-300 dark:placeholder:text-surface-400 bg-white dark:bg-black"
></textarea> ></textarea>
</div> </div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-surface-500 font-semibold">{$_('settings.profile.extra.headline')}</div> <div class="text-surface-500-400-token font-semibold">
<div class="text-surface-500">{$_('settings.profile.extra.hint')}</div> {$_('settings.profile.extra.headline')}
</div>
<div class="text-surface-500-400-token">{$_('settings.profile.extra.hint')}</div>
<div class="flex gap-2 py-1"> <div class="flex gap-2 py-1">
<input <input
type="text" type="text"
class="input bg-white shrink basis-40 placeholder:text-surface-300" class="input bg-white dark:bg-black shrink basis-40 placeholder:text-surface-300 dark:placeholder:text-surface-400"
placeholder={$_('settings.profile.extra.label.placeholder')} placeholder={$_('settings.profile.extra.label.placeholder')}
/> />
<input <input
type="text" type="text"
class="input bg-white grow placeholder:text-surface-300" class="input bg-white dark:bg-black grow placeholder:text-surface-300 dark:placeholder:text-surface-400"
placeholder={$_('settings.profile.extra.content.placeholder')} placeholder={$_('settings.profile.extra.content.placeholder')}
/> />
</div> </div>
<div class="flex gap-2 py-1"> <div class="flex gap-2 py-1">
<input <input
type="text" type="text"
class="input bg-white shrink basis-40 placeholder:text-surface-300" class="input bg-white dark:bg-black shrink basis-40 placeholder:text-surface-300 dark:placeholder:text-surface-400"
placeholder={$_('settings.profile.extra.label.placeholder')} placeholder={$_('settings.profile.extra.label.placeholder')}
/> />
<input <input
type="text" type="text"
class="input bg-white grow placeholder:text-surface-300" class="input bg-white dark:bg-black grow placeholder:text-surface-300 dark:placeholder:text-surface-400"
placeholder={$_('settings.profile.extra.content.placeholder')} placeholder={$_('settings.profile.extra.content.placeholder')}
/> />
</div> </div>
<div class="flex gap-2 py-1"> <div class="flex gap-2 py-1">
<input <input
type="text" type="text"
class="input bg-white shrink basis-40 placeholder:text-surface-300" class="input bg-white dark:bg-black shrink basis-40 placeholder:text-surface-300 dark:placeholder:text-surface-400"
placeholder={$_('settings.profile.extra.label.placeholder')} placeholder={$_('settings.profile.extra.label.placeholder')}
/> />
<input <input
type="text" type="text"
class="input bg-white grow placeholder:text-surface-300" class="input bg-white dark:bg-black grow placeholder:text-surface-300 dark:placeholder:text-surface-400"
placeholder={$_('settings.profile.extra.content.placeholder')} placeholder={$_('settings.profile.extra.content.placeholder')}
/> />
</div> </div>
<div class="flex gap-2 py-1"> <div class="flex gap-2 py-1">
<input <input
type="text" type="text"
class="input bg-white shrink basis-40 placeholder:text-surface-300" class="input bg-white dark:bg-black shrink basis-40 placeholder:text-surface-300 dark:placeholder:text-surface-400"
placeholder={$_('settings.profile.extra.label.placeholder')} placeholder={$_('settings.profile.extra.label.placeholder')}
/> />
<input <input
type="text" type="text"
class="input bg-white grow placeholder:text-surface-300" class="input bg-white dark:bg-black grow placeholder:text-surface-300 dark:placeholder:text-surface-400"
placeholder={$_('settings.profile.extra.content.placeholder')} placeholder={$_('settings.profile.extra.content.placeholder')}
/> />
</div> </div>

2
src/lib/components/molecules/Starred.svelte
View file

@ -24,7 +24,7 @@ You should have received a copy of the GNU Affero General Public License along w
</script> </script>
<form> <form>
<button type="submit" class="flex submit text-surface-400"> <button type="submit" class="flex submit text-surface-400-500-token">
<Filter24 fill="currentColor" class="ms-4 self-center" /> <Filter24 fill="currentColor" class="ms-4 self-center" />
{$_(i18n.submit)} {$_(i18n.submit)}
</button> </button>

9
src/lib/components/molecules/Welcome.svelte
View file

@ -48,11 +48,11 @@ You should have received a copy of the GNU Affero General Public License along w
<main class="flex h-full"> <main class="flex h-full">
<div <div
class="max-w-[400px] mx-auto flex flex-col self-center justify-start items-center content-stretch bg-surface-50 border border-rounded border-surface-200 drop-shadow p-8" class="max-w-[400px] mx-auto flex flex-col self-center justify-start items-center content-stretch bg-surface-50-900-token border border-rounded border-surface-200-700-token drop-shadow p-8"
> >
<AnvilLogo i18n={i18n.logo} class="items-center w-[77px]" /> <AnvilLogo i18n={i18n.logo} class="items-center w-[77px]" />
<h1 class="font-semibold text-4xl text-surface-500">{$_(i18n.headline)}</h1> <h1 class="font-semibold text-4xl text-surface-500-400-token">{$_(i18n.headline)}</h1>
<p class="text-surface-500">{$_(i18n.intro)}</p> <p class="text-surface-500-400-token">{$_(i18n.intro)}</p>
<div class="space-y-3"> <div class="space-y-3">
<div> <div>
<a href="/account/create" class="btn variant-filled-primary" data-sb-kind={sbCreate} <a href="/account/create" class="btn variant-filled-primary" data-sb-kind={sbCreate}
@ -68,7 +68,8 @@ You should have received a copy of the GNU Affero General Public License along w
</div> </div>
</div> </div>
<div class="text-center"> <div class="text-center">
<a href="/" class="btn bg-initial text-surface-500" data-sb-kind={sbReset}>{$_(i18n.reset)}</a <a href="/" class="btn bg-initial text-surface-500-400-token" data-sb-kind={sbReset}
>{$_(i18n.reset)}</a
> >
</div> </div>
</div> </div>

27
src/lib/components/organisms/FileTable.svelte
View file

@ -43,19 +43,19 @@ You should have received a copy of the GNU Affero General Public License along w
<table class="w-4/5 min-w-96 px-4 mx-auto"> <table class="w-4/5 min-w-96 px-4 mx-auto">
<thead> <thead>
<tr class="flex justify-between gap-4 bg-surface-100 h-8"> <tr class="flex justify-between gap-4 bg-surface-100-800-token h-8">
<th class="flex text-surface-400 mx-4"> <th class="flex text-surface-400-500-token mx-4">
{$_(i18n.heading.name)} {$_(i18n.heading.name)}
<TriangleDown24 fill="currentColor" /> <TriangleDown24 fill="currentColor" />
</th> </th>
<th class="text-surface-400 mx-4"> <th class="text-surface-400-500-token mx-4">
{$_(i18n.heading.lastUpdated)} {$_(i18n.heading.lastUpdated)}
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each projects as project} {#each projects as project}
<tr class="flex justify-between gap-4 bg-white border"> <tr class="flex justify-between gap-4 bg-white dark:bg-black border">
<td class="flex mx-4 gap-4"> <td class="flex mx-4 gap-4">
<Repo24 fill="currentColor" /> <Repo24 fill="currentColor" />
<div class="flex flex-col"> <div class="flex flex-col">
@ -67,7 +67,7 @@ You should have received a copy of the GNU Affero General Public License along w
</a> </a>
{/each} {/each}
</div> </div>
<div class="text-surface-400"> <div class="text-surface-400-500-token">
{project.description} {project.description}
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
@ -82,18 +82,27 @@ You should have received a copy of the GNU Affero General Public License along w
<td> <td>
<div class="flex flex-col px-4 py-4"> <div class="flex flex-col px-4 py-4">
<div class="flex justify-between gap-4"> <div class="flex justify-between gap-4">
<button type="submit" class="bg-white text-surface-200 rounded border px-4 py-2"> <button
type="submit"
class="bg-white dark:bg-black text-surface-200-700-token rounded border px-4 py-2"
>
<RepoForked16 fill="currentColor" /> <RepoForked16 fill="currentColor" />
</button> </button>
<button type="submit" class="bg-white text-surface-200 rounded border px-4 py-2"> <button
type="submit"
class="bg-white dark:bg-black text-surface-200-700-token rounded border px-4 py-2"
>
<Star16 fill="currentColor" /> <Star16 fill="currentColor" />
</button> </button>
<button type="submit" class="bg-white text-surface-200 rounded border px-4 py-2 flex"> <button
type="submit"
class="bg-white dark:bg-black text-surface-200-700-token rounded border px-4 py-2 flex"
>
<EyeClosed16 fill="currentColor" /> <EyeClosed16 fill="currentColor" />
<TriangleDown16 fill="currentColor" /> <TriangleDown16 fill="currentColor" />
</button> </button>
</div> </div>
<div class="text-surface-400"> <div class="text-surface-400-500-token">
{$_(i18n.table.updated, { {$_(i18n.table.updated, {
values: { values: {
relativeTime: project.lastUpdated.toISOString() relativeTime: project.lastUpdated.toISOString()

32
src/lib/components/templates/ImportProject.svelte
View file

@ -61,13 +61,13 @@ You should have received a copy of the GNU Affero General Public License along w
<section class="w-full"> <section class="w-full">
<form <form
class="w-96 flex flex-col gap-6 mx-auto px-8 py-8 bg-surface-100 border border-surface-300" class="w-96 flex flex-col gap-6 mx-auto px-8 py-8 bg-surface-100-800-token border border-surface-300-600-token"
name="import-project" name="import-project"
> >
<h2 class="h2 text-surface-500">{$_(i18n.heading)}</h2> <h2 class="h2 text-surface-500-400-token">{$_(i18n.heading)}</h2>
<p class="text-surface-500">{$_(i18n.intro)}</p> <p class="text-surface-500-400-token">{$_(i18n.intro)}</p>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<h3 class="text-surface-500"> <h3 class="text-surface-500-400-token">
<label class="label" for="project-name"> <label class="label" for="project-name">
{$_(i18n.form.fields.name.label)} {$_(i18n.form.fields.name.label)}
<span class="required">*</span> <span class="required">*</span>
@ -76,21 +76,21 @@ You should have received a copy of the GNU Affero General Public License along w
<input <input
id="project-name" id="project-name"
name="project-name" name="project-name"
class="input input-error" class="input input-error dark:text-warning-400 dark:bg-warning-900 dark:border-warning-400"
type="text" type="text"
placeholder={$_(i18n.form.fields.name.placeholder)} placeholder={$_(i18n.form.fields.name.placeholder)}
/> />
<div class="flex gap-2 items-center text-error-500"> <div class="flex gap-2 items-center text-error-500 dark:text-error:400">
<AlertFill16 fill="currentColor" /> <AlertFill16 fill="currentColor" />
{$_(i18n.form.fields.name.error)} {$_(i18n.form.fields.name.error)}
</div> </div>
<div class="text-surface-400"> <div class="text-surface-400-500-token">
domain.example/projects/<span class="text-surface-500">NameUpdateRealtime</span> domain.example/projects/<span class="text-surface-500-400-token">NameUpdateRealtime</span>
</div> </div>
</div> </div>
<div> <div>
<h3 class="text-surface-500"> <h3 class="text-surface-500-400-token">
<label class="label" for="project-description"> <label class="label" for="project-description">
{$_(i18n.form.fields.description.label)} {$_(i18n.form.fields.description.label)}
</label> </label>
@ -104,14 +104,14 @@ You should have received a copy of the GNU Affero General Public License along w
</div> </div>
<div> <div>
<h3 class="text-surface-500">{$_(i18n.form.avatar)}</h3> <h3 class="text-surface-500-400-token">{$_(i18n.form.avatar)}</h3>
<div class="flex"> <div class="flex">
<span class="bg-surface-300 flex justify-center items-center h-12 w-12"> <span class="bg-surface-300-600-token flex justify-center items-center h-12 w-12">
<Repo24 class="h-6 w-6" /> <Repo24 class="h-6 w-6" />
</span> </span>
<label <label
for="project-avatar" for="project-avatar"
class="h-12 flex flex-1 gap-2 items-center justify-center px-4 bg-surface-025 text-surface-400" class="h-12 flex flex-1 gap-2 items-center justify-center px-4 text-surface-400-500-token"
> >
<Upload16 fill="currentColor" /> <Upload16 fill="currentColor" />
{$_(i18n.form.fields.avatar.label)} {$_(i18n.form.fields.avatar.label)}
@ -127,7 +127,7 @@ You should have received a copy of the GNU Affero General Public License along w
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h3 class="text-surface-500"> <h3 class="text-surface-500-400-token">
{$_(i18n.form.components)} {$_(i18n.form.components)}
</h3> </h3>
<div> <div>
@ -137,7 +137,7 @@ You should have received a copy of the GNU Affero General Public License along w
class="input h-6 w-6" class="input h-6 w-6"
type="checkbox" type="checkbox"
/> />
<label for="project-repository" class="label inline text-surface-500"> <label for="project-repository" class="label inline text-surface-500-400-token">
{$_(i18n.form.fields.repository.label)} {$_(i18n.form.fields.repository.label)}
</label> </label>
<input <input
@ -152,13 +152,13 @@ You should have received a copy of the GNU Affero General Public License along w
</div> </div>
<div> <div>
<input id="project-issues" name="project-issues" class="input h-6 w-6" type="checkbox" /> <input id="project-issues" name="project-issues" class="input h-6 w-6" type="checkbox" />
<label for="project-issues" class="label inline text-surface-500"> <label for="project-issues" class="label inline text-surface-500-400-token">
{$_(i18n.form.fields.issues.label)} {$_(i18n.form.fields.issues.label)}
</label> </label>
</div> </div>
<div> <div>
<input id="project-pr" name="project-pr" class="input h-6 w-6" type="checkbox" /> <input id="project-pr" name="project-pr" class="input h-6 w-6" type="checkbox" />
<label for="project-pr" class="label inline text-surface-500"> <label for="project-pr" class="label inline text-surface-500-400-token">
{$_(i18n.form.fields.pr.label)} {$_(i18n.form.fields.pr.label)}
</label> </label>
</div> </div>

2
src/lib/components/templates/Projects.svelte
View file

@ -62,7 +62,7 @@ You should have received a copy of the GNU Affero General Public License along w
}; };
</script> </script>
<section class="w-full flex flex-col gap-8 bg-white"> <section class="w-full flex flex-col gap-8 bg-white dark:bg-black">
<div class="flex mx-auto w-full items-center justify-center"> <div class="flex mx-auto w-full items-center justify-center">
<Search i18n={i18n.search} /> <Search i18n={i18n.search} />
<Projects i18n={i18n.projects} /> <Projects i18n={i18n.projects} />

3
src/routes/+layout.svelte
View file

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<script> <script>
import { locale } from 'svelte-i18n'; import { locale } from 'svelte-i18n';
import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom'; import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
import { initializeStores, storePopup, Modal } from '@skeletonlabs/skeleton'; import { autoModeWatcher, initializeStores, storePopup, Modal } from '@skeletonlabs/skeleton';
import Settings from '$lib/components/molecules/Settings.svelte'; import Settings from '$lib/components/molecules/Settings.svelte';
import { mapLocaleToDir } from '$lib/i18n'; import { mapLocaleToDir } from '$lib/i18n';
@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow }); storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
</script> </script>
<svelte:head>{@html '<script>(' + autoModeWatcher.toString() + ')();</script>'}</svelte:head>
<Modal components={modalRegistry} /> <Modal components={modalRegistry} />
<!-- Page Route Content --> <!-- Page Route Content -->
<slot /> <slot />