✨ feat (styles): introduce main.css for base styles and css variables

app/assets/css/main.css

@@ -0,0 +1,333 @@
+/* SIMRS RSSA Design System - Pure CSS (No Tailwind) */
+
+/* CSS Variables */
+:root {
+  /* Medical Theme Colors */
+  --background: 210 20% 98%;
+  --foreground: 210 20% 15%;
+  --card: 0 0% 100%;
+  --card-foreground: 210 20% 15%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 210 20% 15%;
+
+  /* Primary - Medical Green */
+  --primary: 150 75% 35%;
+  --primary-foreground: 0 0% 100%;
+  --primary-hover: 150 75% 40%;
+
+  /* Secondary - Clean Blue */
+  --secondary: 210 50% 96%;
+  --secondary-foreground: 210 20% 20%;
+  --muted: 210 25% 95%;
+  --muted-foreground: 210 15% 50%;
+
+  /* Accent - Professional Blue */
+  --accent: 210 100% 50%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 75% 55%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 210 20% 88%;
+  --input: 210 20% 95%;
+  --ring: 150 75% 35%;
+
+  /* Medical Status Colors */
+  --success: 150 75% 40%;
+  --success-foreground: 0 0% 100%;
+  --warning: 45 95% 60%;
+  --warning-foreground: 210 20% 15%;
+  --info: 210 100% 50%;
+  --info-foreground: 0 0% 100%;
+
+  /* Gradients */
+  --gradient-primary: linear-gradient(135deg, hsl(150 75% 35%), hsl(150 75% 45%));
+  --gradient-medical: linear-gradient(135deg, hsl(150 75% 35%), hsl(210 100% 50%));
+  --gradient-subtle: linear-gradient(180deg, hsl(210 20% 98%), hsl(210 25% 95%));
+
+  /* Shadows */
+  --shadow-medical: 0 4px 20px -4px hsl(150 75% 35% / 0.15);
+  --shadow-card: 0 2px 10px -2px hsl(210 20% 15% / 0.1);
+  --shadow-glow: 0 0 30px hsl(150 75% 35% / 0.2);
+
+  /* Transitions */
+  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-fast: all 0.15s ease-out;
+
+  /* Border Radius */
+  --radius: 0.5rem;
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  /* Sidebar */
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+}
+
+/* .dark { */
+/*   --background: 210 25% 8%; */
+/*   --foreground: 210 20% 95%; */
+/*   --card: 210 25% 10%; */
+/*   --card-foreground: 210 20% 95%; */
+/*   --popover: 210 25% 10%; */
+/*   --popover-foreground: 210 20% 95%; */
+/*   --primary: 150 75% 45%; */
+/*   --primary-foreground: 0 0% 100%; */
+/*   --primary-hover: 150 75% 50%; */
+/*   --secondary: 210 25% 15%; */
+/*   --secondary-foreground: 210 20% 90%; */
+/*   --muted: 210 25% 15%; */
+/*   --muted-foreground: 210 15% 65%; */
+/*   --accent: 210 100% 55%; */
+/*   --accent-foreground: 0 0% 100%; */
+/*   --destructive: 0 75% 60%; */
+/*   --destructive-foreground: 0 0% 100%; */
+/*   --border: 210 25% 20%; */
+/*   --input: 210 25% 15%; */
+/*   --ring: 150 75% 45%; */
+/*   --success: 150 75% 50%; */
+/*   --warning: 45 95% 65%; */
+/*   --info: 210 100% 60%; */
+/*   --gradient-primary: linear-gradient(135deg, hsl(150 75% 45%), hsl(150 75% 55%)); */
+/*   --gradient-medical: linear-gradient(135deg, hsl(150 75% 45%), hsl(210 100% 55%)); */
+/*   --gradient-subtle: linear-gradient(180deg, hsl(210 25% 8%), hsl(210 25% 12%)); */
+/*   --sidebar-background: 240 5.9% 10%; */
+/*   --sidebar-foreground: 240 4.8% 95.9%; */
+/*   --sidebar-primary: 224.3 76.3% 48%; */
+/*   --sidebar-primary-foreground: 0 0% 100%; */
+/*   --sidebar-accent: 240 3.7% 15.9%; */
+/*   --sidebar-accent-foreground: 240 4.8% 95.9%; */
+/*   --sidebar-border: 240 3.7% 15.9%; */
+/*   --sidebar-ring: 217.2 91.2% 59.8%; */
+/* } */
+
+/* Keyframes for Animations */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulseMedical {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 hsl(var(--primary) / 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 10px hsl(var(--primary) / 0);
+  }
+}
+
+/* Base Styles */
+* {
+  border-color: hsl(var(--border));
+  box-sizing: border-box;
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* Container */
+.container {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1400px;
+  }
+}
+
+/* Color Classes */
+.bg-background {
+  background-color: hsl(var(--background));
+}
+.bg-foreground {
+  background-color: hsl(var(--foreground));
+}
+.bg-card {
+  background-color: hsl(var(--card));
+}
+.bg-primary {
+  background-color: hsl(var(--primary));
+}
+.bg-secondary {
+  background-color: hsl(var(--secondary));
+}
+.bg-accent {
+  background-color: hsl(var(--accent));
+}
+.bg-destructive {
+  background-color: hsl(var(--destructive));
+}
+.bg-muted {
+  background-color: hsl(var(--muted));
+}
+.bg-success {
+  background-color: hsl(var(--success));
+}
+.bg-warning {
+  background-color: hsl(var(--warning));
+}
+.bg-info {
+  background-color: hsl(var(--info));
+}
+
+.text-background {
+  color: hsl(var(--background));
+}
+.text-foreground {
+  color: hsl(var(--foreground));
+}
+.text-card {
+  color: hsl(var(--card));
+}
+.text-primary {
+  color: hsl(var(--primary));
+}
+.text-secondary {
+  color: hsl(var(--secondary));
+}
+.text-accent {
+  color: hsl(var(--accent));
+}
+.text-destructive {
+  color: hsl(var(--destructive));
+}
+.text-muted {
+  color: hsl(var(--muted));
+}
+.text-success {
+  color: hsl(var(--success));
+}
+.text-warning {
+  color: hsl(var(--warning));
+}
+.text-info {
+  color: hsl(var(--info));
+}
+
+.text-primary-foreground {
+  color: hsl(var(--primary-foreground));
+}
+.text-secondary-foreground {
+  color: hsl(var(--secondary-foreground));
+}
+.text-accent-foreground {
+  color: hsl(var(--accent-foreground));
+}
+.text-destructive-foreground {
+  color: hsl(var(--destructive-foreground));
+}
+.text-muted-foreground {
+  color: hsl(var(--muted-foreground));
+}
+.text-success-foreground {
+  color: hsl(var(--success-foreground));
+}
+.text-warning-foreground {
+  color: hsl(var(--warning-foreground));
+}
+.text-info-foreground {
+  color: hsl(var(--info-foreground));
+}
+
+.border-primary {
+  border-color: hsl(var(--primary));
+}
+.border-secondary {
+  border-color: hsl(var(--secondary));
+}
+.border-accent {
+  border-color: hsl(var(--accent));
+}
+.border-destructive {
+  border-color: hsl(var(--destructive));
+}
+.border-input {
+  border-color: hsl(var(--input));
+}
+
+/* Sidebar Colors */
+.bg-sidebar {
+  background-color: hsl(var(--sidebar-background));
+}
+.text-sidebar {
+  color: hsl(var(--sidebar-foreground));
+}
+.bg-sidebar-primary {
+  background-color: hsl(var(--sidebar-primary));
+}
+.text-sidebar-primary {
+  color: hsl(var(--sidebar-primary));
+}
+.bg-sidebar-accent {
+  background-color: hsl(var(--sidebar-accent));
+}
+.text-sidebar-accent {
+  color: hsl(var(--sidebar-accent));
+}
+.border-sidebar {
+  border-color: hsl(var(--sidebar-border));
+}
+
+/* Background Images */
+.bg-gradient-medical {
+  background-image: var(--gradient-medical);
+}
+.bg-gradient-primary {
+  background-image: var(--gradient-primary);
+}
+.bg-gradient-subtle {
+  background-image: var(--gradient-subtle);
+}
+
+/* Border Radius */
+.rounded-sm {
+  border-radius: var(--radius-sm);
+}
+/* .rounded-md { border-radius: var */

app/assets/css/tailwind.css

@@ -1 +0,0 @@
-@import 'tailwindcss';

app/components/app/auth/SignIn.vue

@@ -60,7 +60,7 @@ async function onSubmit(event: Event) {
       </div>
       <Input id="password" v-model="password" type="password" :disabled="isLoading" />
     </div>
-    <Button type="submit" variant="outline" class="w-full" :disabled="isLoading">
+    <Button type="submit" class="w-full" :disabled="isLoading">
       <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
       Login
     </Button>

app/components/pub/ui/button/Button.vue

@@ -1,29 +1,29 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from "."
-import { Primitive } from "reka-ui"
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { ButtonVariants } from '.'
+import { Primitive } from 'reka-ui'
 import { cn } from '~/lib/utils'
-import { buttonVariants } from "."
+import { buttonVariants } from '.'
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: "button",
+  as: 'button',
 })
-</script>
-
-<template>
-  <Primitive
-    data-slot="button"
-    :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

nuxt.config.ts

@@ -14,7 +14,7 @@ export default defineNuxtConfig({
     '@nuxtjs/color-mode',
   ],
 
-  css: ['@unocss/reset/tailwind.css'],
+  css: ['@unocss/reset/tailwind.css', '~/assets/css/main.css'],
 
   colorMode: {
     classSuffix: '',

uno.config.ts

@@ -15,120 +15,12 @@ export default defineConfig({
       },
     },
     extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-          hover: 'hsl(var(--primary-hover))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        success: {
-          DEFAULT: 'hsl(var(--success))',
-          foreground: 'hsl(var(--success-foreground))',
-        },
-        warning: {
-          DEFAULT: 'hsl(var(--warning))',
-          foreground: 'hsl(var(--warning-foreground))',
-        },
-        info: {
-          DEFAULT: 'hsl(var(--info))',
-          foreground: 'hsl(var(--info-foreground))',
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))',
-        },
-      },
+      colors: {},
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
-      keyframes: {
-        'accordion-down': {
-          from: {
-            height: '0',
-          },
-          to: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-        },
-        'accordion-up': {
-          from: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-          to: {
-            height: '0',
-          },
-        },
-        fadeIn: {
-          '0%': { opacity: '0', transform: 'translateY(10px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
-        },
-        slideUp: {
-          '0%': { transform: 'translateY(100%)' },
-          '100%': { transform: 'translateY(0)' },
-        },
-        pulseMedical: {
-          '0%, 100%': { boxShadow: '0 0 0 0 hsl(var(--primary) / 0.4)' },
-          '50%': { boxShadow: '0 0 0 10px hsl(var(--primary) / 0)' },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-        'fade-in': 'fadeIn 0.5s ease-out',
-        'slide-up': 'slideUp 0.3s ease-out',
-        'pulse-medical': 'pulseMedical 2s ease-in-out infinite',
-      },
-      backgroundImage: {
-        'gradient-medical': 'var(--gradient-medical)',
-        'gradient-primary': 'var(--gradient-primary)',
-        'gradient-subtle': 'var(--gradient-subtle)',
-      },
-      boxShadow: {
-        medical: 'var(--shadow-medical)',
-        card: 'var(--shadow-card)',
-        glow: 'var(--shadow-glow)',
-      },
-      transitionProperty: {
-        smooth: 'var(--transition-smooth)',
-        fast: 'var(--transition-fast)',
-      },
     },
   },
   shortcuts: [