Elements template (#105)

* Remove `autoprefixer`

* Update Bun dependencies

* Update Composer dependencies

* Remove autoprefixer form Vite config

* Update app.css

* Remove `@tailwindcss/typography`

* Add simple template for testing elements

* Add form elements

* Add toggle button

* Add text content

* Update forms.css

* Move toggle styles to forms file

* Style content

* Style tables

* Refactor transition usage

* Add hover state to toggle

* Update App.vue

* Fix code style

Author: SebKay

bun.lockb

@@ -1,15 +1,13 @@
 {
   "devDependencies": {
-    "@inertiajs/vue3": "^2.0.3",
-    "@sentry/vue": "^8.54.0",
+    "@inertiajs/vue3": "^2.0.5",
+    "@sentry/vue": "^8.55.0",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.0.4",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "autoprefixer": "^10.4.20",
+    "@tailwindcss/vite": "^4.0.17",
+    "@vitejs/plugin-vue": "^5.2.3",
     "laravel-vite-plugin": "^1.2.0",
-    "tailwindcss": "^4.0.0",
-    "vite": "^6.1.0",
+    "tailwindcss": "^4.0.17",
+    "vite": "^6.2.3",
     "vue": "^3.5.13"
   },
   "private": true,
@@ -19,7 +17,7 @@
   },
   "type": "module",
   "dependencies": {
-    "caniuse-lite": "^1.0.30001697",
+    "caniuse-lite": "^1.0.30001707",
     "lucide-vue-next": "^0.479.0"
   }
 }

composer.lock

@@ -3,41 +3,19 @@
 
 @import "tailwindcss";
 
+@plugin '@tailwindcss/forms';
+
+@import "./variables.css";
+
 @import "./typography.css";
+@import "./utilities.css";
 @import "./forms.css";
 @import "./buttons.css";
+@import "./tables.css";
 @import "./content.css";
 
-@plugin '@tailwindcss/forms';
-@plugin '@tailwindcss/typography';
-
-@theme {
-    --font-*: initial;
-    --font-text: "Arial", sans-serif;
-    --font-heading: "Arial", sans-serif;
-
-    --breakpoint-xs: 321px;
-    --breakpoint-sm: 451px;
-    --breakpoint-md: 671px;
-    --breakpoint-lg: 769px;
-    --breakpoint-xl: 1025px;
-    --breakpoint-2xl: 1281px;
-    --breakpoint-3xl: 1441px;
-    --breakpoint-4xl: 1901px;
-
-    --color-brand-50: #f3f6fb;
-    --color-brand-100: #e5e9f4;
-    --color-brand-200: #d0d9ed;
-    --color-brand-300: #b0c0e0;
-    --color-brand-400: #8a9fd0;
-    --color-brand-500: #6a7fc1;
-    --color-brand-600: #5b6bb5;
-    --color-brand-700: #505aa5;
-    --color-brand-800: #464c87;
-    --color-brand-900: #3c416c;
-    --color-brand-950: #282a43;
-}
-
-#app {
-    @apply h-full;
+@layer base {
+    #app {
+        @apply h-full;
+    }
 }

package.json

@@ -1,5 +1,5 @@
 @utility button {
-    @apply cursor-pointer rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-xs hover:bg-brand-600 transition-all ease-in-out duration-200;
+    @apply cursor-pointer rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-xs hover:bg-brand-600 transition-colors;
 
     &[disabled] {
         @apply pointer-events-none opacity-50;

resources/css/app.css

@@ -1,87 +1,110 @@
 @utility content {
-    @apply prose text-neutral-700;
+    strong {
+        @apply font-bold;
+    }
 
     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
-        @apply font-heading font-bold  text-neutral-900;
+        @apply heading;
     }
 
     h1 {
-        @apply text-4xl md:text-5xl;
+        @apply h1;
     }
 
     h2 {
-        @apply text-3xl;
+        @apply h2;
     }
 
     h3 {
-        @apply text-2xl;
+        @apply h3;
     }
 
     h4 {
-        @apply text-xl;
+        @apply h4;
     }
 
     h5 {
-        @apply text-lg;
+        @apply h5;
     }
 
     h6 {
-        @apply text-base;
+        @apply h6;
     }
 
-    li {
-        @apply ml-8;
+    a:not(.button) {
+        @apply text-link;
     }
 
-    a {
-        @apply hover:underline;
+    blockquote {
+        @apply pl-6 py-3 border-l-3 border-brand-300;
+
+        p {
+            @apply text-xl font-serif italic;
+        }
     }
 
-    ul li {
-        @apply list-disc;
+    table {
+        @apply table;
     }
 
-    ol li {
-        @apply list-decimal;
+    tr:first-child th {
+        @apply pt-0;
     }
 
-    strong {
-        @apply font-bold;
+    ol,
+    ul {
+        @apply list-inside;
     }
 
-    blockquote {
-        @apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
+    ol li {
+        @apply list-decimal;
     }
 
-    table {
-        @apply w-full text-sm text-left;
+    ul li {
+        @apply list-disc;
     }
 
-    th {
-        @apply p-4 font-bold bg-brand-200;
+    > * + * {
+        @apply mt-12;
     }
 
-    td {
-        @apply p-4 font-medium;
+    p + p,
+    p + ol,
+    ol + p,
+    p + ul,
+    ul + p,
+    ul + ul,
+    ol + ol,
+    ul + ol,
+    ol + ul {
+        @apply mt-6;
     }
 
-    tr:not(:last-child) td {
-        @apply border-b border-brand-200;
+    li + li {
+        @apply mt-2;
     }
 
-    * {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        & + p,
+        & + ul,
+        & + ol,
         & + h1,
         & + h2,
         & + h3,
         & + h4,
         & + h5,
         & + h6 {
-            @apply mt-8;
+            @apply mt-6;
         }
     }
 }

resources/css/buttons.css

@@ -25,11 +25,11 @@
 }
 
 @utility inline-label {
-    @apply flex items-center gap-x-2;
+    @apply flex items-center gap-x-2 text-sm;
 }
 
 @utility field {
-    @apply block rounded-md border-brand-300 shadow-xs outline-hidden hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition ease-in-out duration-200;
+    @apply block rounded-md border-brand-300 shadow-xs outline-hidden hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition;
 }
 
 @utility input {
@@ -45,7 +45,7 @@
 }
 
 @utility option {
-    @apply field cursor-pointer size-5 text-brand-800;
+    @apply field cursor-pointer size-5 text-brand-800 checked:border-transparent;
 }
 
 @utility checkbox {
@@ -55,3 +55,18 @@
 @utility radio {
     @apply option rounded-full;
 }
+
+@utility toggle {
+    @apply inline-flex items-center gap-3 cursor-pointer;
+
+    div {
+        @apply relative w-9 h-5 bg-brand-200 rounded-full transition;
+        @apply peer-hover:ring-3 peer-hover:ring-brand-200/50 peer-focus:ring-3 peer-focus:ring-brand-200/50 peer-focus:outline-hidden;
+        @apply peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white peer-checked:bg-brand-800;
+        @apply after:bg-white after:rounded-full after:size-4 after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:transition-all;
+    }
+
+    span {
+        @apply text-sm;
+    }
+}

resources/css/content.css

@@ -0,0 +1,34 @@
+@utility table {
+    @apply w-full text-left;
+
+    th,
+    td {
+        @apply border-b;
+    }
+
+    th:first-child,
+    td:first-child {
+        @apply pl-0;
+    }
+
+    th:last-child,
+    td:last-child {
+        @apply pr-0;
+    }
+
+    th {
+        @apply p-3 font-bold border-b-2 border-brand-950;
+    }
+
+    td {
+        @apply p-3 border-brand-950/15;
+    }
+}
+
+@utility table-wrap {
+    @apply w-full overflow-auto;
+
+    table {
+        @apply min-w-[500px];
+    }
+}

resources/css/forms.css

@@ -1,5 +1,5 @@
 @utility heading {
-    @apply text-neutral-900 font-semibold leading-none;
+    @apply text-neutral-900 font-medium leading-none;
 }
 
 @utility h1 {

resources/css/tables.css

@@ -0,0 +1,3 @@
+@utility text-link {
+    @apply underline hover:decoration-transparent transition-colors;
+}