Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 | /** * Admin Design Tokens * * Centralized design tokens for admin panel styling consistency. * Uses Tailwind classes for easy integration with existing components. */ export const adminTokens = { colors: { sidebar: { bg: 'bg-gray-900 dark:bg-gray-950', hover: 'hover:bg-gray-800 dark:hover:bg-gray-900', active: 'bg-gray-800 dark:bg-gray-900', text: 'text-gray-300', textActive: 'text-white', border: 'border-gray-800 dark:border-gray-900', }, header: { bg: 'bg-white dark:bg-gray-900', border: 'border-gray-200 dark:border-gray-800', text: 'text-gray-900 dark:text-white', }, card: { bg: 'bg-white dark:bg-gray-900', border: 'border-gray-200 dark:border-gray-800', shadow: 'shadow-sm', }, table: { header: 'bg-gray-50 dark:bg-gray-800', headerText: 'text-gray-700 dark:text-gray-300', row: 'bg-white dark:bg-gray-900', rowHover: 'hover:bg-gray-50 dark:hover:bg-gray-800', rowSelected: 'bg-primary-50 dark:bg-primary-900/20', border: 'border-gray-200 dark:border-gray-700', }, form: { label: 'text-gray-700 dark:text-gray-300', input: { bg: 'bg-white dark:bg-gray-800', border: 'border-gray-300 dark:border-gray-600', text: 'text-gray-900 dark:text-white', placeholder: 'placeholder-gray-400 dark:placeholder-gray-500', focus: 'focus:ring-primary-500 focus:border-primary-500', error: 'border-red-500 focus:ring-red-500 focus:border-red-500', }, hint: 'text-gray-500 dark:text-gray-400', error: 'text-red-500 dark:text-red-400', }, button: { primary: 'bg-primary-600 hover:bg-primary-700 text-white', secondary: 'bg-gray-100 hover:bg-gray-200 text-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-300', danger: 'bg-red-600 hover:bg-red-700 text-white', ghost: 'hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300', }, status: { success: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400', warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400', error: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400', info: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400', }, }, spacing: { sidebar: 'w-64', sidebarCollapsed: 'w-16', content: 'ml-64 p-6', contentCollapsed: 'ml-16 p-6', card: 'p-6', cardCompact: 'p-4', section: 'space-y-6', form: 'space-y-4', }, typography: { pageTitle: 'text-2xl font-bold text-gray-900 dark:text-white', sectionTitle: 'text-lg font-semibold text-gray-900 dark:text-white', cardTitle: 'text-base font-medium text-gray-900 dark:text-white', body: 'text-sm text-gray-600 dark:text-gray-400', caption: 'text-xs text-gray-500 dark:text-gray-500', }, border: { radius: { sm: 'rounded', md: 'rounded-md', lg: 'rounded-lg', xl: 'rounded-xl', }, width: 'border', }, transition: { default: 'transition-colors duration-200', fast: 'transition-colors duration-100', slow: 'transition-colors duration-300', }, } as const; /** * Helper function to combine admin tokens into a className string */ export function adminClass(...classes: (string | undefined | null | false)[]): string { return classes.filter(Boolean).join(' '); } /** * Common admin component class combinations */ export const adminStyles = { card: adminClass( adminTokens.colors.card.bg, adminTokens.colors.card.border, adminTokens.border.width, adminTokens.border.radius.lg, adminTokens.colors.card.shadow, adminTokens.spacing.card ), cardCompact: adminClass( adminTokens.colors.card.bg, adminTokens.colors.card.border, adminTokens.border.width, adminTokens.border.radius.lg, adminTokens.colors.card.shadow, adminTokens.spacing.cardCompact ), input: adminClass( 'w-full px-3 py-2', adminTokens.colors.form.input.bg, adminTokens.colors.form.input.border, adminTokens.colors.form.input.text, adminTokens.colors.form.input.placeholder, adminTokens.border.width, adminTokens.border.radius.md, 'focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900', adminTokens.colors.form.input.focus ), buttonPrimary: adminClass( 'px-4 py-2', adminTokens.colors.button.primary, adminTokens.border.radius.md, adminTokens.transition.default, 'disabled:opacity-50 disabled:cursor-not-allowed' ), buttonSecondary: adminClass( 'px-4 py-2', adminTokens.colors.button.secondary, adminTokens.border.radius.md, adminTokens.transition.default ), buttonDanger: adminClass( 'px-4 py-2', adminTokens.colors.button.danger, adminTokens.border.radius.md, adminTokens.transition.default ), buttonGhost: adminClass( 'px-4 py-2', adminTokens.colors.button.ghost, adminTokens.border.radius.md, adminTokens.transition.default ), } as const; export type AdminTokens = typeof adminTokens; export type AdminStyles = typeof adminStyles; |