@aquiferre/theme-kit 0.1.0

package/base.css

@@ -0,0 +1,33 @@
+@import './variables.css';
+@import './components.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    min-height: 100vh;
+    @apply bg-bg-primary text-text-primary antialiased;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-bg-secondary;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-bg-tertiary rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-text-tertiary;
+  }
+}

package/components.css

@@ -0,0 +1,360 @@
+/* Reusable Component Styles */
+
+@layer components {
+  /* ========== Navbar ========== */
+  .navbar {
+    @apply bg-bg-elevated border-b border-border-primary
+           flex items-center justify-between px-6 shadow-xs;
+    height: 48px;
+  }
+
+  .navbar-brand {
+    @apply text-lg font-bold text-accent-primary;
+  }
+
+  .navbar-user {
+    @apply flex items-center space-x-3;
+  }
+
+  .navbar-avatar {
+    @apply w-7 h-7 rounded-full bg-accent-primary
+           flex items-center justify-center text-text-inverse text-xs font-medium;
+  }
+
+  /* ========== Card Components ========== */
+  .card {
+    @apply bg-bg-elevated border border-border-primary rounded-xl shadow-sm overflow-hidden;
+  }
+
+  .card-glass {
+    @apply bg-bg-glass backdrop-blur-xl border border-border-primary rounded-xl;
+  }
+
+  .card-hover {
+    @apply bg-bg-elevated border border-border-primary rounded-xl shadow-sm transition-all duration-300 overflow-hidden;
+  }
+
+  .card-hover:hover {
+    @apply shadow-lg;
+    transform: translateY(-2px);
+  }
+
+  /* ========== Input Components ========== */
+  .input {
+    background-color: var(--color-input-bg);
+    color: var(--color-input-text);
+    @apply border border-border-primary rounded-md px-3 py-1.5
+           text-sm
+           transition-all duration-200
+           focus:outline-none focus:border-border-focus focus:ring-2;
+    --tw-ring-color: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
+  }
+
+  .input::placeholder {
+    color: var(--color-input-placeholder);
+  }
+
+  .input-sm {
+    @apply px-2.5 py-1 text-xs;
+  }
+
+  .input-lg {
+    @apply px-4 py-2.5 text-base;
+  }
+
+  .input-error {
+    @apply border-border-danger focus:border-border-danger focus:ring-2;
+    --tw-ring-color: color-mix(in srgb, var(--color-accent-danger) 20%, transparent);
+  }
+
+  .select {
+    @apply input appearance-none cursor-pointer;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-right: 2.5rem;
+    color: var(--color-text-tertiary);
+  }
+
+  /* ========== Button Components ========== */
+  .btn {
+    @apply inline-flex items-center justify-center
+           font-semibold rounded-md px-3 py-1.5 text-sm
+           transition-all duration-200
+           focus:outline-none focus:ring-2 focus:ring-offset-2
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-primary {
+    @apply btn text-text-inverse
+           hover:shadow-lg
+           focus:ring-accent-primary;
+    background: linear-gradient(to right, var(--color-accent-primary), var(--color-accent-secondary));
+  }
+
+  .btn-secondary {
+    @apply btn bg-bg-secondary text-text-primary border border-border-primary
+           hover:bg-bg-hover
+           focus:ring-accent-primary;
+  }
+
+  .btn-danger {
+    @apply btn bg-accent-danger text-text-inverse
+           hover:shadow-lg
+           focus:ring-accent-danger;
+  }
+
+  .btn-ghost {
+    @apply btn bg-transparent text-text-secondary
+           hover:bg-bg-hover hover:text-text-primary
+           focus:ring-accent-primary;
+  }
+
+  .btn-sm {
+    @apply px-2.5 py-1 text-xs;
+  }
+
+  .btn-lg {
+    @apply px-5 py-2.5 text-base;
+  }
+
+  .btn-icon {
+    @apply btn p-1.5;
+  }
+
+  /* ========== Table Components ========== */
+  .table-container {
+    @apply overflow-x-auto overflow-y-hidden;
+    border-radius: 0;
+  }
+
+  .table {
+    @apply min-w-full divide-y divide-border-primary;
+  }
+
+  .table-header {
+    @apply bg-bg-tertiary;
+  }
+
+  .table-header-cell {
+    @apply px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider;
+  }
+
+  .table-body {
+    @apply bg-bg-elevated divide-y divide-border-secondary;
+  }
+
+  .table-row {
+    @apply hover:bg-bg-hover transition-colors duration-150;
+  }
+
+  .table-cell {
+    @apply px-6 py-4 whitespace-nowrap text-sm text-text-primary;
+  }
+
+  .table-empty {
+    @apply px-6 py-12 text-center text-text-tertiary;
+  }
+
+  /* ========== Sidebar Components ========== */
+  .sidebar {
+    @apply bg-sidebar-bg min-h-screen border-r border-sidebar-border;
+  }
+
+  .sidebar-item {
+    @apply flex items-center px-4 py-2.5 text-sidebar-text
+           hover:bg-sidebar-hover hover:text-text-primary
+           transition-colors duration-150;
+  }
+
+  .sidebar-item-active {
+    @apply bg-sidebar-active text-text-primary font-medium;
+  }
+
+  .sidebar-section-title {
+    @apply px-4 pt-3 pb-1.5 text-text-tertiary uppercase tracking-wider;
+  }
+
+  /* ========== Badge Components ========== */
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  .badge-primary {
+    @apply badge;
+    background-color: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
+    color: var(--color-accent-primary);
+    border: 1px solid color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
+  }
+
+  .badge-success {
+    @apply badge;
+    background-color: color-mix(in srgb, var(--color-accent-success) 15%, transparent);
+    color: var(--color-accent-success);
+    border: 1px solid color-mix(in srgb, var(--color-accent-success) 30%, transparent);
+  }
+
+  .badge-warning {
+    @apply badge;
+    background-color: color-mix(in srgb, var(--color-accent-warning) 15%, transparent);
+    color: var(--color-accent-warning);
+    border: 1px solid color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
+  }
+
+  .badge-danger {
+    @apply badge;
+    background-color: color-mix(in srgb, var(--color-accent-danger) 15%, transparent);
+    color: var(--color-accent-danger);
+    border: 1px solid color-mix(in srgb, var(--color-accent-danger) 30%, transparent);
+  }
+
+  .badge-info {
+    @apply badge;
+    background-color: color-mix(in srgb, var(--color-accent-info) 15%, transparent);
+    color: var(--color-accent-info);
+    border: 1px solid color-mix(in srgb, var(--color-accent-info) 30%, transparent);
+  }
+
+  /* ========== Status Components ========== */
+  .status-dot {
+    @apply w-2 h-2 rounded-full animate-pulse;
+  }
+
+  .status-dot-success {
+    @apply status-dot bg-accent-success;
+  }
+
+  .status-dot-warning {
+    @apply status-dot bg-accent-warning;
+  }
+
+  .status-dot-danger {
+    @apply status-dot bg-accent-danger;
+  }
+
+  .status-dot-info {
+    @apply status-dot bg-accent-info;
+  }
+
+  /* ========== Dialog Components ========== */
+  .dialog-overlay {
+    @apply fixed inset-0 bg-bg-overlay z-50 flex items-center justify-center p-4;
+  }
+
+  .dialog {
+    @apply card-glass w-full max-w-md p-6 rounded-2xl shadow-xl;
+  }
+
+  .dialog-title {
+    @apply text-lg font-semibold text-text-primary mb-4;
+  }
+
+  .dialog-actions {
+    @apply flex justify-end space-x-3 mt-6;
+  }
+
+  /* ========== Toast Components ========== */
+  .toast {
+    @apply fixed top-4 right-4 z-50 card p-4 shadow-lg min-w-[300px];
+  }
+
+  .toast-success {
+    @apply toast border-l-4 border-accent-success;
+  }
+
+  .toast-warning {
+    @apply toast border-l-4 border-accent-warning;
+  }
+
+  .toast-danger {
+    @apply toast border-l-4 border-accent-danger;
+  }
+
+  .toast-info {
+    @apply toast border-l-4 border-accent-info;
+  }
+
+  /* ========== Pagination Components ========== */
+  .pagination {
+    @apply flex items-center justify-center space-x-1;
+  }
+
+  .pagination-btn {
+    @apply btn-ghost px-3 py-1.5 text-sm;
+  }
+
+  .pagination-btn-active {
+    @apply pagination-btn bg-accent-primary text-text-inverse;
+  }
+
+  .pagination-btn-disabled {
+    @apply pagination-btn opacity-50 cursor-not-allowed;
+  }
+
+  /* ========== Search Input ========== */
+  .search-input {
+    @apply input pl-10;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3e%3c/svg%3e");
+    background-position: left 0.75rem center;
+    background-repeat: no-repeat;
+    background-size: 1.25em 1.25em;
+    color: var(--color-text-tertiary);
+  }
+
+  /* ========== Filter Dropdown ========== */
+  .filter-dropdown {
+    @apply relative;
+  }
+
+  .filter-dropdown-menu {
+    @apply absolute top-full left-0 mt-1 w-48 card shadow-lg z-10 py-1;
+  }
+
+  .filter-dropdown-item {
+    @apply px-4 py-2 text-sm text-text-primary hover:bg-bg-hover cursor-pointer;
+  }
+
+  /* ========== Loading States ========== */
+  .skeleton {
+    @apply bg-bg-tertiary rounded animate-pulse;
+  }
+
+  .spinner {
+    @apply w-5 h-5 border-2 border-text-tertiary border-t-accent-primary rounded-full animate-spin;
+  }
+
+  /* ========== Page Layout ========== */
+  .page-container {
+    @apply max-w-7xl mx-auto px-8 py-12;
+  }
+
+  .page-header {
+    @apply mb-8;
+  }
+
+  .page-title {
+    @apply text-2xl font-bold text-text-primary mb-2;
+  }
+
+  .page-subtitle {
+    @apply text-text-secondary;
+  }
+
+  /* ========== Form Layout ========== */
+  .form-group {
+    @apply mb-4;
+  }
+
+  .form-label {
+    @apply block text-xs font-semibold text-text-secondary mb-2 uppercase tracking-wider;
+  }
+
+  .form-error {
+    @apply text-accent-danger text-xs mt-1;
+  }
+
+  .form-hint {
+    @apply text-text-tertiary text-xs mt-1;
+  }
+}

package/index.ts

@@ -0,0 +1 @@
+export { useThemeStore, type ThemeMode } from './theme'

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@aquiferre/theme-kit",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "main": "index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./base.css": "./base.css",
+    "./variables.css": "./variables.css",
+    "./components.css": "./components.css",
+    "./tailwind.preset": "./tailwind.preset.js"
+  },
+  "files": ["*.css", "*.ts", "*.js"],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/tailwind.preset.js

@@ -0,0 +1,56 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['selector', '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      colors: {
+        'bg-primary': 'var(--color-bg-primary)',
+        'bg-secondary': 'var(--color-bg-secondary)',
+        'bg-tertiary': 'var(--color-bg-tertiary)',
+        'bg-elevated': 'var(--color-bg-elevated)',
+        'bg-glass': 'var(--color-bg-glass)',
+        'bg-overlay': 'var(--color-bg-overlay)',
+        'bg-hover': 'var(--color-bg-hover)',
+        'text-primary': 'var(--color-text-primary)',
+        'text-secondary': 'var(--color-text-secondary)',
+        'text-tertiary': 'var(--color-text-tertiary)',
+        'text-inverse': 'var(--color-text-inverse)',
+        'text-link': 'var(--color-text-link)',
+        'border-primary': 'var(--color-border-primary)',
+        'border-secondary': 'var(--color-border-secondary)',
+        'border-focus': 'var(--color-border-focus)',
+        'border-danger': 'var(--color-border-danger)',
+        'accent-primary': 'var(--color-accent-primary)',
+        'accent-primary-hover': 'var(--color-accent-primary-hover)',
+        'accent-secondary': 'var(--color-accent-secondary)',
+        'accent-success': 'var(--color-accent-success)',
+        'accent-warning': 'var(--color-accent-warning)',
+        'accent-danger': 'var(--color-accent-danger)',
+        'accent-info': 'var(--color-accent-info)',
+        'sidebar-bg': 'var(--color-sidebar-bg)',
+        'sidebar-text': 'var(--color-sidebar-text)',
+        'sidebar-hover': 'var(--color-sidebar-hover)',
+        'sidebar-active': 'var(--color-sidebar-active)',
+        'sidebar-border': 'var(--color-sidebar-border)',
+        'input-bg': 'var(--color-input-bg)',
+        'input-text': 'var(--color-input-text)',
+        'input-placeholder': 'var(--color-input-placeholder)',
+      },
+      boxShadow: {
+        xs: 'var(--shadow-xs)',
+        sm: 'var(--shadow-sm)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+        xl: 'var(--shadow-xl)',
+      },
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+        '2xl': 'var(--radius-2xl)',
+        full: 'var(--radius-full)',
+      },
+    },
+  },
+}

package/theme.ts

@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+
+export type ThemeMode = 'light' | 'dark' | 'neutral'
+
+export const useThemeStore = defineStore('theme', () => {
+  const theme = ref<ThemeMode>(
+    (localStorage.getItem('theme') as ThemeMode) || 'dark'
+  )
+
+  function toggle() {
+    const cycle: ThemeMode[] = ['light', 'dark', 'neutral']
+    const idx = cycle.indexOf(theme.value)
+    theme.value = cycle[(idx + 1) % cycle.length]
+  }
+
+  function setTheme(t: ThemeMode) {
+    theme.value = t
+  }
+
+  function applyTheme(val: ThemeMode) {
+    document.documentElement.setAttribute('data-theme', val)
+    localStorage.setItem('theme', val)
+
+    const metaThemeColor = document.querySelector('meta[name="theme-color"]')
+    if (metaThemeColor) {
+      metaThemeColor.setAttribute('content', val === 'dark' ? '#0f172a' : '#ffffff')
+    }
+  }
+
+  watch(theme, (val) => {
+    applyTheme(val)
+  }, { immediate: true })
+
+  function getSystemTheme(): ThemeMode {
+    if (typeof window === 'undefined') return 'dark'
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  if (typeof window !== 'undefined') {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      if (!localStorage.getItem('theme')) {
+        theme.value = e.matches ? 'dark' : 'light'
+      }
+    })
+  }
+
+  return {
+    theme,
+    toggle,
+    setTheme,
+    getSystemTheme,
+  }
+})

package/variables.css

@@ -0,0 +1,146 @@
+/* Theme CSS Variables */
+
+:root {
+  /* ========== Light Theme ========== */
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f8fafc;
+  --color-bg-tertiary: #f1f5f9;
+  --color-bg-elevated: #ffffff;
+  --color-bg-glass: rgba(255, 255, 255, 0.9);
+  --color-bg-overlay: rgba(0, 0, 0, 0.5);
+  --color-bg-hover: #f1f5f9;
+
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-tertiary: #94a3b8;
+  --color-text-inverse: #ffffff;
+  --color-text-link: #2563eb;
+
+  --color-border-primary: #e2e8f0;
+  --color-border-secondary: #f1f5f9;
+  --color-border-focus: #2563eb;
+  --color-border-danger: #dc2626;
+
+  --color-accent-primary: #2563eb;
+  --color-accent-primary-hover: #1d4ed8;
+  --color-accent-secondary: #4f46e5;
+  --color-accent-success: #059669;
+  --color-accent-warning: #d97706;
+  --color-accent-danger: #dc2626;
+  --color-accent-info: #0891b2;
+
+  --color-sidebar-bg: #f8fafc;
+  --color-sidebar-text: #475569;
+  --color-sidebar-hover: #f1f5f9;
+  --color-sidebar-active: #e2e8f0;
+  --color-sidebar-border: #e2e8f0;
+
+  --color-input-bg: #f8fafc;
+  --color-input-text: #1e293b;
+  --color-input-placeholder: #94a3b8;
+
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 9999px;
+}
+
+/* ========== Dark Theme ========== */
+[data-theme="dark"] {
+  --color-bg-primary: #0C0C10;
+  --color-bg-elevated: #1B1B22;
+  --color-sidebar-bg: #161616;
+  --color-bg-secondary: #1e1e28;
+  --color-bg-tertiary: #282838;
+  --color-bg-glass: rgba(27, 27, 34, 0.9);
+  --color-bg-overlay: rgba(0, 0, 0, 0.7);
+  --color-bg-hover: #1e1e28;
+
+  --color-text-primary: #f0f0f5;
+  --color-text-secondary: #a0a0b0;
+  --color-text-tertiary: #7a7a8a;
+  --color-text-inverse: #0C0C10;
+  --color-text-link: #818cf8;
+
+  --color-border-primary: #32323e;
+  --color-border-secondary: #1e1e28;
+  --color-border-focus: #818cf8;
+  --color-border-danger: #f87171;
+
+  --color-accent-primary: #818cf8;
+  --color-accent-primary-hover: #6366f1;
+  --color-accent-secondary: #a78bfa;
+  --color-accent-success: #4ade80;
+  --color-accent-warning: #facc15;
+  --color-accent-danger: #f87171;
+  --color-accent-info: #22d3ee;
+
+  --color-sidebar-text: #9e9eaa;
+  --color-sidebar-hover: #1e1e28;
+  --color-sidebar-active: #22222e;
+  --color-sidebar-border: #2a2a36;
+
+  --color-input-bg: #f0f0f5;
+  --color-input-text: #1a1a2e;
+  --color-input-placeholder: #6a6a7a;
+
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
+}
+
+/* ========== Neutral Theme ========== */
+[data-theme="neutral"] {
+  --color-bg-primary: #f5f5f5;
+  --color-bg-secondary: #e8e8e8;
+  --color-bg-tertiary: #d9d9d9;
+  --color-bg-elevated: #efefef;
+  --color-bg-glass: rgba(239, 239, 239, 0.9);
+  --color-bg-overlay: rgba(0, 0, 0, 0.4);
+  --color-bg-hover: #d9d9d9;
+
+  --color-text-primary: #2d2d2d;
+  --color-text-secondary: #5c5c5c;
+  --color-text-tertiary: #8a8a8a;
+  --color-text-inverse: #f5f5f5;
+  --color-text-link: #5a6a8a;
+
+  --color-border-primary: #d0d0d0;
+  --color-border-secondary: #e0e0e0;
+  --color-border-focus: #5a6a8a;
+  --color-border-danger: #cc4444;
+
+  --color-accent-primary: #5a6a8a;
+  --color-accent-primary-hover: #4a5a7a;
+  --color-accent-secondary: #6a7a9a;
+  --color-accent-success: #5a8a5a;
+  --color-accent-warning: #8a7a4a;
+  --color-accent-danger: #a05050;
+  --color-accent-info: #4a7a8a;
+
+  --color-sidebar-bg: #eaeaea;
+  --color-sidebar-text: #5c5c5c;
+  --color-sidebar-hover: #d9d9d9;
+  --color-sidebar-active: #d0d0d0;
+  --color-sidebar-border: #d0d0d0;
+
+  --color-input-bg: #f0f0f0;
+  --color-input-text: #2d2d2d;
+  --color-input-placeholder: #8a8a8a;
+
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}