docs(demo): Update demo with lastest version

Author: immohammadjaved

package-lock.json

@@ -26,7 +26,7 @@
     "@angular/forms": "^20.0.0",
     "@angular/platform-browser": "^20.0.0",
     "@angular/router": "^20.0.0",
-    "@angularui/theme": "^0.0.2",
+    "@angularui/theme": "^0.0.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },

package.json

@@ -6,11 +6,7 @@ import { provideUiTheme } from '@angularui/theme';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideUiTheme({
-      strategy: 'attribute',
-      defaultTheme: 'system',
-      enableColorScheme: true
-    }),
+    provideUiTheme(),
     provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
     provideRouter(routes)

projects/demo/src/app/app.config.ts

@@ -179,99 +179,114 @@ section h3 {
   text-transform: capitalize;
 }
 
-/* Enhanced Buttons */
+/* Enhanced Buttons - shadcn/ui style */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.75rem 1.5rem;
-  border: 2px solid transparent;
-  border-radius: 0.75rem;
+  border-radius: 0.5rem;
   font-size: 0.875rem;
-  font-weight: 600;
+  font-weight: 500;
   text-decoration: none;
   cursor: pointer;
   transition: all 0.2s ease;
-  background-color: var(--bg-tertiary);
-  color: var(--text-primary);
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   position: relative;
   overflow: hidden;
+  border: 1px solid transparent;
+  background-color: transparent;
+  color: var(--text-primary);
+  padding: 0.5rem 1rem;
+  line-height: 1.25rem;
+  white-space: nowrap;
 }
 
-.btn::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-  transition: left 0.5s;
+.btn:hover {
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
 }
 
-.btn:hover::before {
-  left: 100%;
+.btn:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
 }
 
-.btn:hover {
-  background-color: var(--bg-secondary);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.btn:active {
-  transform: translateY(0);
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+.btn-sm {
+  height: 2rem;
+  padding: 0 0.75rem;
+  font-size: 0.75rem;
 }
 
-.btn-primary {
+.btn-theme {
   background-color: var(--accent-color);
   color: white;
-  border-color: var(--accent-color);
+  font-weight: 600;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--accent-color);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
-.btn-primary:hover {
+.btn-theme:hover {
   background-color: var(--accent-hover);
   border-color: var(--accent-hover);
+  color: white;
 }
 
+.btn-theme:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+
+/* Black button variant */
+.btn-black {
+  background-color: var(--text-primary);
+  color: var(--bg-primary);
+  border: 1px solid var(--text-primary);
+  font-weight: 600;
+}
+
+.btn-black:hover {
+  background-color: var(--text-secondary);
+  border-color: var(--text-secondary);
+  color: var(--bg-primary);
+}
+
+.btn-black:focus-visible {
+  outline: 2px solid var(--text-primary);
+  outline-offset: 2px;
+}
+
+/* Secondary button variant */
 .btn-secondary {
   background-color: var(--bg-secondary);
-  border-color: var(--border-color);
   color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  font-weight: 500;
 }
 
 .btn-secondary:hover {
   background-color: var(--bg-tertiary);
-  border-color: var(--accent-color);
-}
-
-.btn-sm {
-  padding: 0.5rem 1rem;
-  font-size: 0.75rem;
-  border-radius: 0.5rem;
+  border-color: var(--text-secondary);
+  color: var(--text-primary);
 }
 
-.btn-theme {
-  background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
-  color: white;
-  font-weight: 700;
-  font-size: 1rem;
-  padding: 0.875rem 2rem;
-  border-radius: 1rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  border: none;
+.btn-secondary:focus-visible {
+  outline: 2px solid var(--text-secondary);
+  outline-offset: 2px;
 }
 
-.btn-theme:hover {
-  background: linear-gradient(135deg, var(--accent-hover), var(--accent-color));
-  transform: translateY(-2px);
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+/* Remove old button styles */
+.btn::before {
+  display: none;
 }
 
-.btn-theme:active {
-  transform: translateY(0);
+.btn:hover::before {
+  display: none;
 }
 
 /* Footer */

projects/demo/src/app/app.css

@@ -16,11 +16,11 @@ <h1>&#64;angularui/theme</h1>
       <section class="hero">
         <!-- Theme Controls -->
         <div class="theme-controls">
-          <button class="btn btn-theme" (click)="toggleTheme()">Toggle Theme</button>
+          <button class="btn btn-black" (click)="toggleTheme()">Toggle Theme</button>
           <div class="theme-buttons">
-            <button class="btn btn-sm" (click)="setTheme('light')">Light</button>
-            <button class="btn btn-sm" (click)="setTheme('dark')">Dark</button>
-            <button class="btn btn-sm" (click)="setTheme('system')">System</button>
+            <button class="btn btn-secondary btn-sm" (click)="setTheme('light')">Light</button>
+            <button class="btn btn-secondary btn-sm" (click)="setTheme('dark')">Dark</button>
+            <button class="btn btn-secondary btn-sm" (click)="setTheme('system')">System</button>
           </div>
         </div>
 

projects/demo/src/app/app.html

@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
-  <title>Demo</title>
+  <title>Angular UI Theme: Modern Theme Management for Angular</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
+
 <body>
   <app-root></app-root>
 </body>
-</html>
+
+</html>