Skip to content

Upgrade/tailwind v4 #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rohanharikr merged 5 commits into from
Apr 1, 2026
Merged

Upgrade/tailwind v4 #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
31f87b9
Upgrade to Tailwind v4
rohanharikr Apr 1, 2026
4972a8c
Fix rounded-sm → rounded-xs for v4 border-radius change
rohanharikr Apr 1, 2026
046314f
Fix Reset button roundedness to match other buttons
rohanharikr Apr 1, 2026
d89774d
Revert Reset button to rounded-md to match Hellō/Public toggle
rohanharikr Apr 1, 2026
4851c8b
Remove rounded-xs from global button rule
rohanharikr Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,907 changes: 645 additions & 1,262 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 3 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,17 @@
"devDependencies": {
"@hellocoop/helper-browser": "^2.4.3",
"@sveltejs/vite-plugin-svelte": "^5.0.1",
"@tailwindcss/forms": "^0.5.9",
"autoprefixer": "^10.4.20",
"@tailwindcss/forms": "^0.5.11",
"@tailwindcss/vite": "^4.2.2",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.46.1",
"postcss": "^8.4.49",
"prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.2.4",
"prettier-plugin-tailwindcss": "^0.6.9",
"shiki": "^1.24.0",
"svelte": "^5.4.0",
"sveltejs-tippy": "^3.0.0",
"tailwindcss": "^3.4.15",
"tailwindcss": "^4.2.2",
"vite": "^6.0.2"
},
"dependencies": {
Expand Down
6 changes: 0 additions & 6 deletions postcss.config.js
View file
Open in desktop

This file was deleted.

56 changes: 44 additions & 12 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,22 @@
@tailwind base;
@import "tailwindcss";

@plugin "@tailwindcss/forms" {
strategy: class;
}

@theme {
--color-charcoal: #303030;
--color-gray: #D4D4D4;
--color-gray-800: #808080;
--color-gray-1000: #151515;

--spacing-18: 4.5rem;

--stroke-width-3: 3px;

--breakpoint-xs: 450px;
--breakpoint-4xl: 2000px;
}

/* hello.dev nextra default colors */
:root {
Expand Down Expand Up @@ -37,23 +55,21 @@ pre[class*='language-'] {
}

button {
@apply rounded-sm;
@apply cursor-pointer;
}

input[type='url'] {
@apply text-charcoal dark:text-gray;
}

@tailwind components;

.btn {
@apply ring-1 border-none bg-transparent ring-charcoal dark:ring-gray-800 rounded-sm hover:ring-2;
@utility btn {
@apply ring-1 border-none bg-transparent ring-charcoal dark:ring-gray-800 rounded-xs hover:ring-2;
}

.form-input {
@apply rounded-sm bg-transparent ring-1 border-none hover:ring-2;
@apply ring-charcoal !important;
@apply dark:ring-gray-800 !important;
@apply rounded-xs bg-transparent ring-1 border-none hover:ring-2;
@apply !ring-charcoal;
@apply dark:!ring-gray-800;
}

.form-input::placeholder,
Expand All @@ -70,13 +86,29 @@ pre {
}

input[type='checkbox'] {
@apply form-checkbox w-[14px] h-[14px] text-charcoal dark:text-gray-800 border-charcoal dark:border-gray-800 rounded-sm bg-transparent;
@apply form-checkbox w-[14px] h-[14px] text-charcoal dark:text-gray-800 border-charcoal dark:border-gray-800 rounded-xs bg-transparent;
@apply hover:border-2 focus:ring-0 focus:outline-none focus:ring-offset-0;
}
input[type='checkbox']:checked {
appearance: none !important;
background-color: currentColor !important;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
background-size: 100% 100% !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-color: transparent !important;
}

input[type='radio'] {
@apply form-radio w-[14px] h-[14px] text-charcoal dark:text-gray-800 border-charcoal dark:border-gray-800 bg-transparent;
@apply hover:border-2 focus:ring-0 focus:outline-none focus:ring-offset-0;
}

@tailwind utilities;
input[type='radio']:checked {
appearance: none !important;
background-color: currentColor !important;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e") !important;
background-size: 100% 100% !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-color: transparent !important;
}
2 changes: 1 addition & 1 deletion src/lib/components/AuthorizationRequest.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
</script>

<section
class="relative w-full rounded-sm border border-charcoal px-4 pb-4 pt-6 dark:border-gray-800"
class="relative w-full rounded-xs border border-charcoal px-4 pb-4 pt-6 dark:border-gray-800"
>
<span
class="absolute -mx-2 -mt-8 bg-white px-2 font-mono text-xs uppercase text-charcoal/70 dark:bg-gray-1000 dark:text-gray/70"
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/AuthorizationResponse.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

<section
id="authz-response-container"
class="relative w-full scroll-mt-5 rounded-sm border border-charcoal px-4 pb-4 pt-6 dark:border-gray-800"
class="relative w-full scroll-mt-5 rounded-xs border border-charcoal px-4 pb-4 pt-6 dark:border-gray-800"
>
<span
class="absolute -mx-2 -mt-8 bg-white px-2 font-mono text-xs uppercase text-charcoal/70 dark:bg-gray-1000 dark:text-gray/70"
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
mobileMenu = false;
}
}}
class="fixed left-0 top-12 z-40 h-full w-full bg-black bg-opacity-60 md:hidden"
class="fixed left-0 top-12 z-40 h-full w-full bg-black/60 md:hidden"
></div>
{/if}
</header>
1 change: 1 addition & 0 deletions src/lib/components/Request/HelloModeToggle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
</div>

<style>
@reference "../../../app.css";
label {
@apply block flex h-[22px] w-14 cursor-pointer select-none items-center justify-center border-y border-charcoal bg-white px-3 text-xs peer-checked:bg-charcoal peer-checked:text-white dark:border-gray-800 dark:bg-gray-1000;
}
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/Request/InviteRequest.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</script>

<section
class="relative w-full rounded-sm border border-charcoal px-4 pb-4 pt-6 dark:border-gray-800"
class="relative w-full rounded-xs border border-charcoal px-4 pb-4 pt-6 dark:border-gray-800"
>
<span
class="absolute -mx-2 -mt-8 bg-white px-2 font-mono text-xs uppercase text-charcoal/70 dark:bg-gray-1000 dark:text-gray/70"
Expand All @@ -22,7 +22,7 @@
<div class="mx-auto max-w-lg">
{#if canInvite}
<div
class="relative overflow-x-auto break-words rounded-sm bg-[#F2F6FB] p-4 dark:bg-charcoal"
class="relative overflow-x-auto break-words rounded-xs bg-[#F2F6FB] p-4 dark:bg-charcoal"
>
<span class="absolute right-4 top-4">
<CopyButton content={inviteUrl} />
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Request/ProtocolParams.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
<div class="flex w-full flex-col">
{#if Array.isArray(param.POSSIBLE_VALUE)}
<ul
class="flex w-full flex-col items-center gap-1 rounded-sm p-1 ring-1 ring-charcoal xl:h-8 xl:flex-row dark:ring-gray-800"
class="flex w-full flex-col items-center gap-1 rounded-xs p-1 ring-1 ring-charcoal xl:h-8 xl:flex-row dark:ring-gray-800"
class:opacity-50={!selected}
>
{#each param.POSSIBLE_VALUE as value}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Request/RequestUrl.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
{#if dropdowns.request}
<div class="relative" transition:slide={{ duration: 150 }}>
<div
class="relative mt-2 overflow-x-auto break-words rounded-sm bg-[#F2F6FB] p-4 dark:bg-charcoal"
class="relative mt-2 overflow-x-auto break-words rounded-xs bg-[#F2F6FB] p-4 dark:bg-charcoal"
>
<span class="absolute right-4 top-4">
<CopyButton content={authzUrl} />
Expand Down
32 changes: 0 additions & 32 deletions tailwind.config.js
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import tailwindcss from '@tailwindcss/vite';
import path from 'path';

// https://vite.dev/config/
export default defineConfig({
plugins: [svelte()],
plugins: [tailwindcss(), svelte()],
resolve: {
alias: {
$lib: path.resolve('./src/lib'),
Expand Down
Loading