Change styling

darrencoutts118 · darrencoutts118 · commit 529e61425c5c · 2025-04-15T11:30:31.000Z
diff --git a/resources/views/components/card.blade.php b/resources/views/components/card.blade.php
@@ -0,0 +1,3 @@
+<div {{ $attributes }} class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6 dark:text-white text-zinc-500 dark:text-zinc-300 hover:text-zinc-800 dark:hover:text-white">
+    {{ $slot }}
+</div>
diff --git a/resources/views/components/form.blade.php b/resources/views/components/form.blade.php
@@ -1,7 +1,10 @@
 <form {{ $attributes }}>
     <div class="space-y-6">
         @if (isset($errors) && $errors->any())
-        <x-appkit::alert>{{ config('formulate.form_error_message') }}</x-appkit::alert>
+        <x-appkit::alert type="error" title="Error">
+            {{ config('formulate.form_error_message') }}
+            {{ dump($errors) }}
+        </x-appkit::alert>
         @endif
 
         {{ $slot }}
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
@@ -0,0 +1,23 @@
+<div class="bg-gray-100 dark:bg-gray-900">
+    <div class="grid grid-cols-[15%_minmax(0,1fr)_15%] grid-rows-[auto_1fr_auto] [grid-template-areas:'header_header_header''sidebar_main_aside''sidebar_footer_aside'] min-h-screen">
+        <div class="[grid-area:header] sticky top-0 z-100">
+            {{ $header ?? '' }}
+        </div>
+
+        <div class="[grid-area:main]">
+            <div class="p-8">{{ $slot ?? '' }}</div>
+        </div>
+
+        <div class="[grid-area:footer] p-6 text-white bg-white dark:bg-gray-800 shadow-sm border-t border-gray-100 dark:border-gray-700">
+            {{ $footer ?? '' }}
+        </div>
+
+        <div class="[grid-area:sidebar] overflow-y-auto overscroll-contain flex flex-col gap-4 p-4 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700" x-data x-bind:style="{ position: 'sticky', top: $el.offsetTop + 'px', 'max-height': 'calc(100dvh - ' + $el.offsetTop + 'px)' }">
+            {{ $sidebar ?? '' }}
+        </div>
+
+        <div class="[grid-area:aside] flex flex-col gap-4 p-4 bg-white dark:bg-gray-800 border-l text-white border-gray-200 dark:border-gray-700" x-data x-bind:style="{ position: 'sticky', top: $el.offsetTop + 'px', 'max-height': 'calc(100dvh - ' + $el.offsetTop + 'px)' }">
+            <div class="p-4">{{ $aside ?? 'Empty Aside' }}</div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/nav/group.blade.php b/resources/views/components/nav/group.blade.php
@@ -0,0 +1,5 @@
+<div {{ $attributes }}>
+    <div {{ $titleElement }}>{{ $title }}</div>
+
+    {{ $slot }}
+</div>
diff --git a/resources/views/components/nav/index.blade.php b/resources/views/components/nav/index.blade.php
@@ -0,0 +1,3 @@
+<nav {{ $attributes }}>
+    {{ $slot }}
+</nav>
diff --git a/resources/views/components/nav/item.blade.php b/resources/views/components/nav/item.blade.php
@@ -0,0 +1,7 @@
+<a href="{{ $href }}" {{ $attributes }}>
+    <div class="flex-1 leading-none whitespace-nowrap">
+        {{ $slot }}
+    </div>
+
+    <span class="text-xs font-medium rounded-sm px-1 py-0.5 text-zinc-700 dark:text-zinc-200 bg-teal-400/15 dark:bg-teal-500/10">12</span>
+</a>
diff --git a/src/Components/App.php b/src/Components/App.php
@@ -2,12 +2,17 @@
 
 namespace AppKit\UI\Components;
 
+use AppKit\UI\Attributes\ExposedAsState;
+
 class App extends BaseComponent
 {
     /**
      * Create an instance of the component
      */
-    public function __construct()
+    public function __construct(
+        #[ExposedAsState]
+        public string $accent = 'teal',
+    )
     {
         // constructor promotion handles the rest
     }
diff --git a/src/Components/BaseComponent.php b/src/Components/BaseComponent.php
@@ -289,7 +289,6 @@ public function render()
             // if we have inheritable attributes on the component (attributes passed in from another attribute bag)
             if (isset($data['inheritedAttributes'])) {
                 // we merge them in right at the end
-                dd($this->inheritedAttributes);
                 $data['attributes'] = $data['attributes']->merge($this->inheritedAttributes);
             }
 
diff --git a/src/Components/Button.php b/src/Components/Button.php
@@ -16,7 +16,7 @@ class Button extends BaseComponent
      */
     public function __construct(
         #[ExposedAsState]
-        public string $color = 'red',
+        public string $color = 'accent',
         #[ExposedAsState]
         public string $size = 'md',
         #[ExposedAsState]
diff --git a/src/Components/Card.php b/src/Components/Card.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace AppKit\UI\Components;
+
+class Card extends BaseComponent
+{
+    /**
+     * Create an instance of the component
+     */
+    public function __construct()
+    {
+        // constructor promotion handles the rest
+    }
+}
diff --git a/src/Components/Input.php b/src/Components/Input.php
@@ -77,7 +77,7 @@ public function isCheckable()
         return $this->type === 'checkbox' || $this->type === 'radio';
     }
 
-    // TODO: Move this to the inherritable attribute
+    // TODO: Move this to the inheritable attribute
     public function parentSet()
     {
         if ($this->parentComponent instanceof (FieldGroup::class) && $this->parentComponent->error) {
diff --git a/src/Components/Layout.php b/src/Components/Layout.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace AppKit\UI\Components;
+
+use AppKit\UI\Attributes\ExposedAsState;
+
+class Layout extends BaseComponent
+{
+    /**
+     * Create an instance of the component
+     */
+    public function __construct()
+    {
+        // constructor promotion handles the rest
+    }
+}
diff --git a/src/Components/Nav.php b/src/Components/Nav.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace AppKit\UI\Components;
+
+class Nav extends BaseComponent
+{
+    public string $viewName = 'components.nav.index';
+
+    /**
+     * Create an instance of the component
+     */
+    public function __construct()
+    {
+        // constructor promotion handles the rest
+    }
+}
diff --git a/src/Components/Nav/Group.php b/src/Components/Nav/Group.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace AppKit\UI\Components\Nav;
+
+use AppKit\UI\Attributes\Element;
+use AppKit\UI\Components\BaseComponent;
+use AppKit\UI\ElementAttributeBag;
+
+class Group extends BaseComponent
+{
+    /**
+     * The attributes that get applied to the title of the group
+     *
+     * @var ElementAttributeBag|null
+     */
+    #[Element('title')]
+    public ?ElementAttributeBag $titleElement = null;
+
+    /**
+     * Create an instance of the component
+     */
+    public function __construct(
+        public string $title,
+    )
+    {
+        // constructor promotion handles the rest
+    }
+}
diff --git a/src/Components/Nav/Item.php b/src/Components/Nav/Item.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace AppKit\UI\Components\Nav;
+
+use AppKit\UI\Attributes\ExposedAsState;
+use AppKit\UI\Components\BaseComponent;
+use Illuminate\Support\Facades\Request;
+
+class Item extends BaseComponent
+{
+    /**
+     * Create an instance of the component
+     */
+    public function __construct(
+        #[ExposedAsState]
+        public bool $current = false,
+        public ?string $href = null,
+        public ?string $route = null,
+    )
+    {
+        if (!$this->href && $this->route) {
+            $this->href = route($this->route);
+        }
+
+        if ($this->route && !$this->current) {
+            $this->current = (Request::url() == route($this->route));
+        }
+    }
+}
diff --git a/src/Styles/Tailwind/Components/AppStyler.php b/src/Styles/Tailwind/Components/AppStyler.php
@@ -4,11 +4,14 @@
 
 use AppKit\UI\ComponentBuilder;
 use AppKit\UI\Components\BaseComponent;
+use AppKit\UI\Styles\Tailwind\Mixins\AccentCssVariableMixin;
 
 class AppStyler extends BaseStyler
 {
     public function __invoke(ComponentBuilder $component, BaseComponent $instance): void
     {
-        $component->addClass('[&_[x-cloak]]:hidden');
+        $component
+            ->addClass('[&_[x-cloak]]:hidden')
+            ->mixin(AccentCssVariableMixin::class);
     }
 }
diff --git a/src/Styles/Tailwind/Components/ButtonStyler.php b/src/Styles/Tailwind/Components/ButtonStyler.php
@@ -12,17 +12,17 @@ class ButtonStyler extends BaseStyler
     public function __invoke(ComponentBuilder $component, BaseComponent $instance): void
     {
         $component
-            ->addClass(['text-md', 'font-semibold', 'shadow-sm'])
+            ->addClass(['font-semibold', 'shadow-sm', 'transition-colors'])
             ->mixin(
                 FocusOutlineMixin::class,
-                BackgroundColorMixin::with(['include' => ['text', 'hover']])
+                BackgroundColorMixin::with(includeHover: true, includeText: true)
             )
             ->addClassForSize([
                 'xs' => 'px-2 py-1 text-xs',
                 'sm' => 'px-2 py-1 text-sm',
                 'md' => 'px-2.5 py-1.5 text-sm',
                 'lg' => 'px-3 py-2 text-sm',
-                'xl' => 'px-3.5 py-2.5 text-sm',
+                'xl' => 'px-3.5 py-2.5 text-md',
             ])
             ->addClassForShape([
                 'square' => '',
diff --git a/src/Styles/Tailwind/Components/FieldGroupStyler.php b/src/Styles/Tailwind/Components/FieldGroupStyler.php
@@ -9,6 +9,6 @@ class FieldGroupStyler extends BaseStyler
 {
     public function __invoke(ComponentBuilder $component, BaseComponent $instance): void
     {
-        $component->addClass('space-y-2');
+        $component->addClass('space-y-1');
     }
 }
diff --git a/src/Styles/Tailwind/Components/LabelStyler.php b/src/Styles/Tailwind/Components/LabelStyler.php
@@ -10,6 +10,7 @@ class LabelStyler extends BaseStyler
     public function __invoke(ComponentBuilder $componentBuilder, BaseComponent $instance): void
     {
         $componentBuilder->addClass([
+            'block',
             'font-medium',
             'text-gray-900',
             'leading-6',
diff --git a/src/Styles/Tailwind/Components/Nav/GroupStyler.php b/src/Styles/Tailwind/Components/Nav/GroupStyler.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace AppKit\UI\Styles\Tailwind\Components\Nav;
+
+use AppKit\UI\ComponentBuilder;
+use AppKit\UI\Components\BaseComponent;
+use AppKit\UI\Styles\Tailwind\Components\BaseStyler;
+
+class GroupStyler extends BaseStyler
+{
+    public function __invoke(ComponentBuilder $component, BaseComponent $instance): void
+    {
+        $component->addClassToTitle('mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200 space-y-3');
+    }
+}
diff --git a/src/Styles/Tailwind/Components/Nav/ItemStyler.php b/src/Styles/Tailwind/Components/Nav/ItemStyler.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace AppKit\UI\Styles\Tailwind\Components\Nav;
+
+use AppKit\UI\ComponentBuilder;
+use AppKit\UI\Components\BaseComponent;
+use AppKit\UI\Styles\Tailwind\Components\BaseStyler;
+
+class ItemStyler extends BaseStyler
+{
+    public function __invoke(ComponentBuilder $component, BaseComponent $instance): void
+    {
+        $component
+            ->addClass('flex gap-2 items-center pl-4 py-[5px] first:pt-0 last:pb-0 border-l-2 border-zinc-100 dark:border-zinc-500 text-zinc-500 dark:text-zinc-300 hover:text-zinc-800 dark:hover:text-white')
+            ->addClassWhenCurrent('dark:text-teal-300 dark:border-teal-500');
+    }
+}
diff --git a/src/Styles/Tailwind/Components/NavStyler.php b/src/Styles/Tailwind/Components/NavStyler.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace AppKit\UI\Styles\Tailwind\Components;
+
+use AppKit\UI\ComponentBuilder;
+use AppKit\UI\Components\BaseComponent;
+
+class NavStyler extends BaseStyler
+{
+    public function __invoke(ComponentBuilder $component, BaseComponent $instance): void
+    {
+        $component->addClass('flex flex-col overflow-visible min-h-auto space-y-6');
+    }
+}
diff --git a/src/Styles/Tailwind/Mixins/AccentCssVariableMixin.php b/src/Styles/Tailwind/Mixins/AccentCssVariableMixin.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace AppKit\UI\Styles\Tailwind\Mixins;
+
+use AppKit\UI\ComponentBuilder;
+
+class AccentCssVariableMixin extends BaseMixin {
+
+    public function __invoke(ComponentBuilder $component): void
+    {
+        $component->addClassForAccent([
+            'amber' => '[--ui-accent:var(--color-amber-500)] dark:[--ui-accent:var(--color-amber-500)]',
+            'blue' => '[--ui-accent:var(--color-blue-500)] dark:[--ui-accent:var(--color-blue-600)]',
+            'cyan' => '[--ui-accent:var(--color-cyan-500)] dark:[--ui-accent:var(--color-cyan-600)]',
+            'emerald' => '[--ui-accent:var(--color-emerald-500)] dark:[--ui-accent:var(--color-emerald-600)]',
+            'fuchsia' => '[--ui-accent:var(--color-fuchsia-500)] dark:[--ui-accent:var(--color-fuchsia-600)]',
+            'green' => '[--ui-accent:var(--color-green-500)] dark:[--ui-accent:var(--color-green-600)]',
+            'indigo' => '[--ui-accent:var(--color-indigo-500)] dark:[--ui-accent:var(--color-indigo-600)]',
+            'lime' => '[--ui-accent:var(--color-lime-500)] dark:[--ui-accent:var(--color-lime-600)]',
+            'orange' => '[--ui-accent:var(--color-orange-500)] dark:[--ui-accent:var(--color-orange-600)]',
+            'pink' => '[--ui-accent:var(--color-pink-500)] dark:[--ui-accent:var(--color-pink-600)]',
+            'purple' => '[--ui-accent:var(--color-purple-500)] dark:[--ui-accent:var(--color-purple-600)]',
+            'red' => '[--ui-accent:var(--color-red-500)] dark:[--ui-accent:var(--color-red-600)]',
+            'rose' => '[--ui-accent:var(--color-rose-500)] dark:[--ui-accent:var(--color-rose-600)]',
+            'sky' => '[--ui-accent:var(--color-sky-500)] dark:[--ui-accent:var(--color-sky-600)]',
+            'teal' => '[--ui-accent:var(--color-teal-500)] dark:[--ui-accent:var(--color-teal-600)]',
+            'violet' => '[--ui-accent:var(--color-violet-500)] dark:[--ui-accent:var(--color-violet-600)]',
+            'yellow' => '[--ui-accent:var(--color-yellow-500)] dark:[--ui-accent:var(--color-yellow-400)]',
+        ]);
+
+        $component->addClassForAccent([
+            'amber' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-zinc-950)]',
+            'blue' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'cyan' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'emerald' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'fuchsia' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'green' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'indigo' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'lime' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'orange' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'pink' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'purple' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'red' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'rose' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'sky' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'teal' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'violet' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-white)]',
+            'yellow' => '[--ui-text-on-accent:var(--color-white)] dark:[--ui-text-on-accent:var(--color-zinc-950)]',
+        ]);
+
+        $component->addClassForAccent([
+            'amber' => '[--ui-accent-hover:var(--color-amber-600)] dark:[--ui-accent-hover:var(--color-amber-400)]',
+            'blue' => '[--ui-accent-hover:var(--color-blue-600)] dark:[--ui-accent-hover:var(--color-blue-500)]',
+            'cyan' => '[--ui-accent-hover:var(--color-cyan-600)] dark:[--ui-accent-hover:var(--color-cyan-500)]',
+            'emerald' => '[--ui-accent-hover:var(--color-emerald-600)] dark:[--ui-accent-hover:var(--color-emerald-500)]',
+            'fuchsia' => '[--ui-accent-hover:var(--color-fuchsia-600)] dark:[--ui-accent-hover:var(--color-fuchsia-500)]',
+            'green' => '[--ui-accent-hover:var(--color-green-600)] dark:[--ui-accent-hover:var(--color-green-500)]',
+            'indigo' => '[--ui-accent-hover:var(--color-indigo-600)] dark:[--ui-accent-hover:var(--color-indigo-500)]',
+            'lime' => '[--ui-accent-hover:var(--color-lime-600)] dark:[--ui-accent-hover:var(--color-lime-500)]',
+            'orange' => '[--ui-accent-hover:var(--color-orange-600)] dark:[--ui-accent-hover:var(--color-orange-500)]',
+            'pink' => '[--ui-accent-hover:var(--color-pink-600)] dark:[--ui-accent-hover:var(--color-pink-500)]',
+            'purple' => '[--ui-accent-hover:var(--color-purple-600)] dark:[--ui-accent-hover:var(--color-purple-500)]',
+            'red' => '[--ui-accent-hover:var(--color-red-600)] dark:[--ui-accent-hover:var(--color-red-500)]',
+            'rose' => '[--ui-accent-hover:var(--color-rose-600)] dark:[--ui-accent-hover:var(--color-rose-500)]',
+            'sky' => '[--ui-accent-hover:var(--color-sky-600)] dark:[--ui-accent-hover:var(--color-sky-500)]',
+            'teal' => '[--ui-accent-hover:var(--color-teal-600)] dark:[--ui-accent-hover:var(--color-teal-500)]',
+            'violet' => '[--ui-accent-hover:var(--color-violet-600)] dark:[--ui-accent-hover:var(--color-violet-500)]',
+            'yellow' => '[--ui-accent-hover:var(--color-yellow-600)] dark:[--ui-accent-hover:var(--color-yellow-300)]',
+        ]);
+    }
+}
diff --git a/src/Styles/Tailwind/Mixins/BackgroundColorMixin.php b/src/Styles/Tailwind/Mixins/BackgroundColorMixin.php
diff --git a/src/Styles/Tailwind/Mixins/BaseMixin.php b/src/Styles/Tailwind/Mixins/BaseMixin.php
diff --git a/src/Styles/Tailwind/Tailwind.php b/src/Styles/Tailwind/Tailwind.php

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<div {{ $attributes }} class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6 dark:text-white text-zinc-500 dark:text-zinc-300 hover:text-zinc-800 dark:hover:text-white">`
	`2`	`+ {{ $slot }}`
	`3`	`+</div>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<nav {{ $attributes }}>`
	`2`	`+ {{ $slot }}`
	`3`	`+</nav>`
Original file line number	Diff line number	Diff line change
`@@ -2,12 +2,17 @@`
`2`	`2`
`3`	`3`	`namespace AppKit\UI\Components;`
`4`	`4`
	`5`	`+use AppKit\UI\Attributes\ExposedAsState;`
	`6`	`+`
`5`	`7`	`class App extends BaseComponent`
`6`	`8`	`{`
`7`	`9`	`/**`
`8`	`10`	`* Create an instance of the component`
`9`	`11`	`*/`
`10`		`- public function __construct()`
	`12`	`+ public function __construct(`
	`13`	`+ #[ExposedAsState]`
	`14`	`+ public string $accent = 'teal',`
	`15`	`+ )`
`11`	`16`	`{`
`12`	`17`	`// constructor promotion handles the rest`
`13`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -289,7 +289,6 @@ public function render()`
`289`	`289`	`// if we have inheritable attributes on the component (attributes passed in from another attribute bag)`
`290`	`290`	`if (isset($data['inheritedAttributes'])) {`
`291`	`291`	`// we merge them in right at the end`
`292`		`- dd($this->inheritedAttributes);`
`293`	`292`	`$data['attributes'] = $data['attributes']->merge($this->inheritedAttributes);`
`294`	`293`	`}`
`295`	`294`