Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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,581 changes: 545 additions & 1,036 deletions package-lock.json

Large diffs are not rendered by default.

11 changes: 6 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,25 @@
"eslint-plugin-vue": "^9.32.0",
"prettier": "^3.4.2",
"prettier-plugin-organize-imports": "^4.1.0",
"prettier-plugin-tailwindcss": "^0.6.9",
"prettier-plugin-tailwindcss": "^0.6.11",
"tw-animate-css": "^1.2.5",
"typescript-eslint": "^8.23.0",
"vue-tsc": "^2.2.4"
},
"dependencies": {
"@inertiajs/vue3": "^2.0.0-beta.3",
"@tailwindcss/vite": "^4.1.1",
"@vitejs/plugin-vue": "^5.2.1",
"@vueuse/core": "^12.0.0",
"autoprefixer": "^10.4.20",
"@vueuse/core": "^12.8.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"concurrently": "^9.0.1",
"laravel-vite-plugin": "^1.0",
"lucide": "^0.468.0",
"lucide-vue-next": "^0.468.0",
"reka-ui": "^2.0.0",
"reka-ui": "^2.2.0",
"tailwind-merge": "^2.5.5",
"tailwindcss": "^3.4.1",
"tailwindcss": "^4.1.1",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.2.2",
"vite": "^6.2.0",
Expand Down
247 changes: 171 additions & 76 deletions resources/css/app.css
Original file line number Diff line number Diff line change
@@ -1,84 +1,166 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';

body,
html {
--font-sans:
'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@import "tw-animate-css";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@custom-variant dark (&:is(.dark *));

@theme inline {
--font-sans:
Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);

--color-background: var(--background);
--color-foreground: var(--foreground);

--color-card: var(--card);
--color-card-foreground: var(--card-foreground);

--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);

--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);

--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);

--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);

--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);

--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);

--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);

--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);

--color-sidebar: var(--sidebar-background);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}

/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.

If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 92.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 92.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 0 0% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 0 0% 94%;
--sidebar-accent-foreground: 0 0% 30%;
--sidebar-border: 0 0% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}

.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 6.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--sidebar-background: 0 0% 7%;
--sidebar-foreground: 0 0% 95.9%;
--sidebar-primary: 360, 100%, 100%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 0 0% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 0 0% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
@layer utilities {
body,
html {
--font-sans:
'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
}
}

:root {
--background: hsl(0 0% 100%);
--foreground: hsl(0 0% 3.9%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(0 0% 3.9%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(0 0% 3.9%);
--primary: hsl(0 0% 9%);
--primary-foreground: hsl(0 0% 98%);
--secondary: hsl(0 0% 92.1%);
--secondary-foreground: hsl(0 0% 9%);
--muted: hsl(0 0% 96.1%);
--muted-foreground: hsl(0 0% 45.1%);
--accent: hsl(0 0% 96.1%);
--accent-foreground: hsl(0 0% 9%);
--destructive: hsl(0 84.2% 60.2%);
--destructive-foreground: hsl(0 0% 98%);
--border: hsl(0 0% 92.8%);
--input: hsl(0 0% 89.8%);
--ring: hsl(0 0% 3.9%);
--chart-1: hsl(12 76% 61%);
--chart-2: hsl(173 58% 39%);
--chart-3: hsl(197 37% 24%);
--chart-4: hsl(43 74% 66%);
--chart-5: hsl(27 87% 67%);
--radius: 0.5rem;
--sidebar-background: hsl(0 0% 98%);
--sidebar-foreground: hsl(240 5.3% 26.1%);
--sidebar-primary: hsl(0 0% 10%);
--sidebar-primary-foreground: hsl(0 0% 98%);
--sidebar-accent: hsl(0 0% 94%);
--sidebar-accent-foreground: hsl(0 0% 30%);
--sidebar-border: hsl(0 0% 91%);
--sidebar-ring: hsl(217.2 91.2% 59.8%);
--sidebar:
hsl(0 0% 98%);
}

.dark {
--background: hsl(0 0% 3.9%);
--foreground: hsl(0 0% 98%);
--card: hsl(0 0% 3.9%);
--card-foreground: hsl(0 0% 98%);
--popover: hsl(0 0% 3.9%);
--popover-foreground: 0 0% 98%;
--primary: hsl(0 0% 98%);
--primary-foreground: hsl(0 0% 9%);
--secondary: hsl(0 0% 14.9%);
--secondary-foreground: hsl(0 0% 98%);
--muted: hsl(0 0% 16.08%);
--muted-foreground: hsl(0 0% 63.9%);
--accent: hsl(0 0% 14.9%);
--accent-foreground: hsl(0 0% 98%);
--destructive: hsl(0 84% 60%);
--destructive-foreground: hsl(0 0% 98%);
--border: hsl(0 0% 14.9%);
--input: hsl(0 0% 14.9%);
--ring: hsl(0 0% 83.1%);
--chart-1: hsl(220 70% 50%);
--chart-2: hsl(160 60% 45%);
--chart-3: hsl(30 80% 55%);
--chart-4: hsl(280 65% 60%);
--chart-5: hsl(340 75% 55%);
--sidebar-background: hsl(0 0% 7%);
--sidebar-foreground: hsl(0 0% 95.9%);
--sidebar-primary: hsl(360, 100%, 100%);
--sidebar-primary-foreground: hsl(0 0% 100%);
--sidebar-accent: hsl(0 0% 15.9%);
--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
--sidebar-border: hsl(0 0% 15.9%);
--sidebar-ring: hsl(217.2 91.2% 59.8%);
--sidebar:
hsl(240 5.9% 10%);
}

@layer base {
Expand All @@ -90,3 +172,16 @@ html {
@apply bg-background text-foreground;
}
}

/*
---break---
*/

@layer base {
* {
@apply border-border outline-ring/50;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this outline-ring/50 not just added to the previous @layer base a few lines above?

}
body {
@apply bg-background text-foreground;
}
}
2 changes: 1 addition & 1 deletion resources/js/components/AppSidebarHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ defineProps<{

<template>
<header
class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 md:px-4"
class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4"
>
<div class="flex items-center gap-2">
<SidebarTrigger class="-ml-1" />
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/AppearanceTabs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const tabs = [
:class="[
'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
appearance === value
? 'bg-white shadow-sm dark:bg-neutral-700 dark:text-neutral-100'
? 'bg-white shadow-xs dark:bg-neutral-700 dark:text-neutral-100'
: 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
]"
>
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/NavUser.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const { isMobile, state } = useSidebar();
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'"
align="end"
:side-offset="4"
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/TextLink.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ defineProps<Props>();
:tabindex="tabindex"
:method="method"
:as="as"
class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:!decoration-current dark:decoration-neutral-500"
class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
>
<slot />
</Link>
Expand Down
30 changes: 12 additions & 18 deletions resources/js/components/ui/avatar/Avatar.vue
Original file line number Diff line number Diff line change
@@ -1,24 +1,18 @@
<script setup lang="ts">
import { cn } from '@/lib/utils';
import { AvatarRoot } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { avatarVariant, type AvatarVariants } from '.';
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { AvatarRoot } from 'reka-ui'

const props = withDefaults(
defineProps<{
class?: HTMLAttributes['class'];
size?: AvatarVariants['size'];
shape?: AvatarVariants['shape'];
}>(),
{
size: 'sm',
shape: 'circle',
},
);
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
</script>

<template>
<AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
<slot />
</AvatarRoot>
<AvatarRoot
data-slot="avatar"
:class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
>
<slot />
</AvatarRoot>
</template>
22 changes: 17 additions & 5 deletions resources/js/components/ui/avatar/AvatarFallback.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
<script setup lang="ts">
import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui';
import { cn } from '@/lib/utils'
import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AvatarFallbackProps>();
const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
</script>

<template>
<AvatarFallback v-bind="props">
<slot />
</AvatarFallback>
<AvatarFallback
data-slot="avatar-fallback"
v-bind="delegatedProps"
:class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
>
<slot />
</AvatarFallback>
</template>
Loading