@insymetri/styleguide 0.1.0

package/dist/Typography/index.d.ts

@@ -0,0 +1 @@
+export { default as Typography } from './Typography.svelte';

package/dist/Typography/index.js

@@ -0,0 +1 @@
+export { default as Typography } from './Typography.svelte';

package/dist/icons.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Centralized Phosphor icon exports
+ *
+ * All icons are imported from @iconify/json via unplugin-icons
+ * Using Phosphor Regular weight for consistency
+ *
+ * Icon naming convention:
+ * - Material "add" → IconAdd (Phosphor "plus")
+ * - Material "arrow_back" → IconArrowLeft (Phosphor "arrow-left")
+ * - Material "group" → IconUsers (Phosphor "users")
+ */
+export { default as IconAdd } from '~icons/ph/plus';
+export { default as IconArrowLeft } from '~icons/ph/arrow-left';
+export { default as IconArrowRight } from '~icons/ph/arrow-right';
+export { default as IconClose } from '~icons/ph/x';
+export { default as IconCheck } from '~icons/ph/check';
+export { default as IconCheckCircle } from '~icons/ph/check-circle';
+export { default as IconSearch } from '~icons/ph/magnifying-glass';
+export { default as IconSearchOff } from '~icons/ph/magnifying-glass-minus';
+export { default as IconExpandMore } from '~icons/ph/caret-down';
+export { default as IconExpandLess } from '~icons/ph/caret-up';
+export { default as IconChevronLeft } from '~icons/ph/caret-left';
+export { default as IconChevronRight } from '~icons/ph/caret-right';
+export { default as IconChevronsRight } from '~icons/ph/caret-double-right';
+export { default as IconPlay } from '~icons/ph/play';
+export { default as IconCall } from '~icons/ph/phone';
+export { default as IconPhone } from '~icons/ph/phone';
+export { default as IconPhoneMissed } from '~icons/ph/phone-slash';
+export { default as IconPhoneDisconnect } from '~icons/ph/phone-disconnect';
+export { default as IconPhoneIncoming } from '~icons/ph/phone-incoming';
+export { default as IconPhoneOutgoing } from '~icons/ph/phone-outgoing';
+export { default as IconPhonePlus } from '~icons/ph/phone-plus';
+export { default as IconMicrophone } from '~icons/ph/microphone';
+export { default as IconMicrophoneSlash } from '~icons/ph/microphone-slash';
+export { default as IconSpeaker } from '~icons/ph/speaker-high';
+export { default as IconChat } from '~icons/ph/chats-circle';
+export { default as IconChatCircle } from '~icons/ph/chats-circle';
+export { default as IconSms } from '~icons/ph/chat-dots';
+export { default as IconMail } from '~icons/ph/envelope';
+export { default as IconSend } from '~icons/ph/paper-plane-tilt';
+export { default as IconPerson } from '~icons/ph/user';
+export { default as IconUser } from '~icons/ph/user';
+export { default as IconPersonAdd } from '~icons/ph/user-plus';
+export { default as IconUserPlus } from '~icons/ph/user-plus';
+export { default as IconUserCirclePlus } from '~icons/ph/user-circle-plus';
+export { default as IconUserRectangle } from '~icons/ph/user-rectangle';
+export { default as IconUserSwitch } from '~icons/ph/user-switch';
+export { default as IconUserFour } from '~icons/ph/users-four';
+export { default as IconUsers } from '~icons/ph/users';
+export { default as IconGroup } from '~icons/ph/users';
+export { default as IconAddressBook } from '~icons/ph/address-book';
+export { default as IconShieldCheck } from '~icons/ph/shield-check';
+export { default as IconDescription } from '~icons/ph/file-text';
+export { default as IconArticle } from '~icons/ph/article';
+export { default as IconAssignment } from '~icons/ph/clipboard-text';
+export { default as IconUploadFile } from '~icons/ph/upload-simple';
+export { default as IconNoteAdd } from '~icons/ph/note-pencil';
+export { default as IconEdit } from '~icons/ph/pencil-simple';
+export { default as IconEditNote } from '~icons/ph/note-pencil';
+export { default as IconPaid } from '~icons/ph/currency-dollar-simple';
+export { default as IconPayment } from '~icons/ph/credit-card';
+export { default as IconPayments } from '~icons/ph/money';
+export { default as IconBank } from '~icons/ph/bank';
+export { default as IconCalendar } from '~icons/ph/calendar';
+export { default as IconSchedule } from '~icons/ph/clock';
+export { default as IconSnooze } from '~icons/ph/clock-countdown';
+export { default as IconClockClockwise } from '~icons/ph/clock-clockwise';
+export { default as IconUpdate } from '~icons/ph/arrows-clockwise';
+export { default as IconSync } from '~icons/ph/arrows-clockwise';
+export { default as IconDashboard } from '~icons/ph/squares-four';
+export { default as IconMonitoring } from '~icons/ph/chart-line';
+export { default as IconSettings } from '~icons/ph/gear';
+export { default as IconViewList } from '~icons/ph/list';
+export { default as IconGridView } from '~icons/ph/grid-four';
+export { default as IconListAlt } from '~icons/ph/list-bullets';
+export { default as IconMoreVert } from '~icons/ph/dots-three-vertical';
+export { default as IconDelete } from '~icons/ph/trash';
+export { default as IconCircle } from '~icons/ph/circle';
+export { default as IconError } from '~icons/ph/warning-circle';
+export { default as IconWarning } from '~icons/ph/warning';
+export { default as IconChangeCircle } from '~icons/ph/arrows-clockwise';
+export { default as IconGavel } from '~icons/ph/gavel';
+export { default as IconLogin } from '~icons/ph/sign-in';
+export { default as IconLogout } from '~icons/ph/sign-out';
+export { default as IconSortAsc } from '~icons/ph/sort-ascending';
+export { default as IconSortDesc } from '~icons/ph/sort-descending';
+export { default as IconFilter } from '~icons/ph/funnel';
+export { default as IconFilterFilled } from '~icons/ph/funnel-fill';
+export { default as IconEye } from '~icons/ph/eye';
+export { default as IconEyeSlash } from '~icons/ph/eye-slash';
+export { default as IconSmartToy } from '~icons/ph/robot';
+export { default as IconRobot } from '~icons/ph/robot';

package/dist/icons.js

@@ -0,0 +1,104 @@
+/**
+ * Centralized Phosphor icon exports
+ *
+ * All icons are imported from @iconify/json via unplugin-icons
+ * Using Phosphor Regular weight for consistency
+ *
+ * Icon naming convention:
+ * - Material "add" → IconAdd (Phosphor "plus")
+ * - Material "arrow_back" → IconArrowLeft (Phosphor "arrow-left")
+ * - Material "group" → IconUsers (Phosphor "users")
+ */
+// === Navigation & Actions ===
+export { default as IconAdd } from '~icons/ph/plus';
+export { default as IconArrowLeft } from '~icons/ph/arrow-left';
+export { default as IconArrowRight } from '~icons/ph/arrow-right';
+export { default as IconClose } from '~icons/ph/x';
+export { default as IconCheck } from '~icons/ph/check';
+export { default as IconCheckCircle } from '~icons/ph/check-circle';
+export { default as IconSearch } from '~icons/ph/magnifying-glass';
+export { default as IconSearchOff } from '~icons/ph/magnifying-glass-minus';
+export { default as IconExpandMore } from '~icons/ph/caret-down';
+export { default as IconExpandLess } from '~icons/ph/caret-up';
+export { default as IconChevronLeft } from '~icons/ph/caret-left';
+export { default as IconChevronRight } from '~icons/ph/caret-right';
+export { default as IconChevronsRight } from '~icons/ph/caret-double-right';
+export { default as IconPlay } from '~icons/ph/play';
+// === Communication ===
+export { default as IconCall } from '~icons/ph/phone';
+export { default as IconPhone } from '~icons/ph/phone';
+export { default as IconPhoneMissed } from '~icons/ph/phone-slash';
+export { default as IconPhoneDisconnect } from '~icons/ph/phone-disconnect';
+export { default as IconPhoneIncoming } from '~icons/ph/phone-incoming';
+export { default as IconPhoneOutgoing } from '~icons/ph/phone-outgoing';
+export { default as IconPhonePlus } from '~icons/ph/phone-plus';
+export { default as IconMicrophone } from '~icons/ph/microphone';
+export { default as IconMicrophoneSlash } from '~icons/ph/microphone-slash';
+export { default as IconSpeaker } from '~icons/ph/speaker-high';
+export { default as IconChat } from '~icons/ph/chats-circle';
+export { default as IconChatCircle } from '~icons/ph/chats-circle';
+export { default as IconSms } from '~icons/ph/chat-dots';
+export { default as IconMail } from '~icons/ph/envelope';
+export { default as IconSend } from '~icons/ph/paper-plane-tilt';
+// === People & Users ===
+export { default as IconPerson } from '~icons/ph/user';
+export { default as IconUser } from '~icons/ph/user';
+export { default as IconPersonAdd } from '~icons/ph/user-plus';
+export { default as IconUserPlus } from '~icons/ph/user-plus';
+export { default as IconUserCirclePlus } from '~icons/ph/user-circle-plus';
+export { default as IconUserRectangle } from '~icons/ph/user-rectangle';
+export { default as IconUserSwitch } from '~icons/ph/user-switch';
+export { default as IconUserFour } from '~icons/ph/users-four';
+export { default as IconUsers } from '~icons/ph/users';
+export { default as IconGroup } from '~icons/ph/users';
+export { default as IconAddressBook } from '~icons/ph/address-book';
+export { default as IconShieldCheck } from '~icons/ph/shield-check';
+// === Documents & Files ===
+export { default as IconDescription } from '~icons/ph/file-text';
+export { default as IconArticle } from '~icons/ph/article';
+export { default as IconAssignment } from '~icons/ph/clipboard-text';
+export { default as IconUploadFile } from '~icons/ph/upload-simple';
+export { default as IconNoteAdd } from '~icons/ph/note-pencil';
+export { default as IconEdit } from '~icons/ph/pencil-simple';
+export { default as IconEditNote } from '~icons/ph/note-pencil';
+// === Finance & Money ===
+export { default as IconPaid } from '~icons/ph/currency-dollar-simple';
+export { default as IconPayment } from '~icons/ph/credit-card';
+export { default as IconPayments } from '~icons/ph/money';
+export { default as IconBank } from '~icons/ph/bank';
+// === Time & Schedule ===
+export { default as IconCalendar } from '~icons/ph/calendar';
+export { default as IconSchedule } from '~icons/ph/clock';
+export { default as IconSnooze } from '~icons/ph/clock-countdown';
+export { default as IconClockClockwise } from '~icons/ph/clock-clockwise';
+export { default as IconUpdate } from '~icons/ph/arrows-clockwise';
+export { default as IconSync } from '~icons/ph/arrows-clockwise';
+// === UI Elements ===
+export { default as IconDashboard } from '~icons/ph/squares-four';
+export { default as IconMonitoring } from '~icons/ph/chart-line';
+export { default as IconSettings } from '~icons/ph/gear';
+export { default as IconViewList } from '~icons/ph/list';
+export { default as IconGridView } from '~icons/ph/grid-four';
+export { default as IconListAlt } from '~icons/ph/list-bullets';
+export { default as IconMoreVert } from '~icons/ph/dots-three-vertical';
+export { default as IconDelete } from '~icons/ph/trash';
+export { default as IconCircle } from '~icons/ph/circle';
+// === Status & Feedback ===
+export { default as IconError } from '~icons/ph/warning-circle';
+export { default as IconWarning } from '~icons/ph/warning';
+export { default as IconChangeCircle } from '~icons/ph/arrows-clockwise';
+// === Legal & Auth ===
+export { default as IconGavel } from '~icons/ph/gavel';
+export { default as IconLogin } from '~icons/ph/sign-in';
+export { default as IconLogout } from '~icons/ph/sign-out';
+// === Sort & Filter ===
+export { default as IconSortAsc } from '~icons/ph/sort-ascending';
+export { default as IconSortDesc } from '~icons/ph/sort-descending';
+export { default as IconFilter } from '~icons/ph/funnel';
+export { default as IconFilterFilled } from '~icons/ph/funnel-fill';
+// === Visibility ===
+export { default as IconEye } from '~icons/ph/eye';
+export { default as IconEyeSlash } from '~icons/ph/eye-slash';
+// === Other ===
+export { default as IconSmartToy } from '~icons/ph/robot';
+export { default as IconRobot } from '~icons/ph/robot';

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+export { IIActionGroup } from './IIActionGroup';
+export { IIAsyncState } from './IIAsyncState';
+export { IIAuditTrail } from './IIAuditTrail';
+export { IIBadge } from './IIBadge';
+export { IIButton } from './IIButton';
+export { IICheckbox } from './IICheckbox';
+export { IICheckboxList } from './IICheckboxList';
+export { IICombobox } from './IICombobox';
+export { IIDatePicker } from './IIDatePicker';
+export { IIDropdownInput } from './IIDropdownInput';
+export { IIDropdownMenu } from './IIDropdownMenu';
+export { IIEditableBadges } from './IIEditableBadges';
+export { IIEditableText } from './IIEditableText';
+export { IIEmptyState } from './IIEmptyState';
+export { IIFilterChip } from './IIFilterChip';
+export { IIFormField } from './IIFormField';
+export { IIInput } from './IIInput';
+export { IIModal } from './IIModal';
+export { IIOverflowActions } from './IIOverflowActions';
+export { IIStatusBadge } from './IIStatusBadge';
+export { IISwitch } from './IISwitch';
+export { IITable } from './IITable';
+export { IITableSkeleton } from './IITableSkeleton';
+export { IITabs } from './IITabs';
+export { IITaskCardSkeleton } from './IITaskCardSkeleton';
+export { IITextarea } from './IITextarea';
+export { IIToaster } from './IIToaster';
+export { IIViewFilterChip } from './IIViewFilterChip';
+export type { AuditEvent, AuditFilter, Severity } from './IIAuditTrail';
+export type { BadgeVariant } from './IIBadge';
+export { toast } from './toast';
+export { cn } from './utils/cn';
+export * from './icons';

package/dist/index.js

@@ -0,0 +1,35 @@
+// @insymetri/styleguide
+// Components
+export { IIActionGroup } from './IIActionGroup';
+export { IIAsyncState } from './IIAsyncState';
+export { IIAuditTrail } from './IIAuditTrail';
+export { IIBadge } from './IIBadge';
+export { IIButton } from './IIButton';
+export { IICheckbox } from './IICheckbox';
+export { IICheckboxList } from './IICheckboxList';
+export { IICombobox } from './IICombobox';
+export { IIDatePicker } from './IIDatePicker';
+export { IIDropdownInput } from './IIDropdownInput';
+export { IIDropdownMenu } from './IIDropdownMenu';
+export { IIEditableBadges } from './IIEditableBadges';
+export { IIEditableText } from './IIEditableText';
+export { IIEmptyState } from './IIEmptyState';
+export { IIFilterChip } from './IIFilterChip';
+export { IIFormField } from './IIFormField';
+export { IIInput } from './IIInput';
+export { IIModal } from './IIModal';
+export { IIOverflowActions } from './IIOverflowActions';
+export { IIStatusBadge } from './IIStatusBadge';
+export { IISwitch } from './IISwitch';
+export { IITable } from './IITable';
+export { IITableSkeleton } from './IITableSkeleton';
+export { IITabs } from './IITabs';
+export { IITaskCardSkeleton } from './IITaskCardSkeleton';
+export { IITextarea } from './IITextarea';
+export { IIToaster } from './IIToaster';
+export { IIViewFilterChip } from './IIViewFilterChip';
+// Utilities
+export { toast } from './toast';
+export { cn } from './utils/cn';
+// Icons
+export * from './icons';

package/dist/style/base.css

@@ -0,0 +1,71 @@
+/* Inter Variable — self-hosted, font-display: block to prevent FOUT */
+@font-face {
+	font-family: 'Inter Variable';
+	font-style: normal;
+	font-display: block;
+	font-weight: 100 900;
+	src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+	font-family: 'Inter Variable';
+	font-style: normal;
+	font-display: block;
+	font-weight: 100 900;
+	src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
+		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+:root {
+	--sidebar-width: 22.4rem; /* 224px */
+	--topbar-height: 4.8rem; /* 48px */
+	--transition-fast: 0.15s ease;
+	--transition-base: 0.2s ease;
+}
+
+@layer base {
+	html {
+		font-size: 62.5%; /* 1rem = 10px — pixel-intuitive rem values */
+	}
+
+	body {
+		font-family:
+			'Inter Variable',
+			Inter,
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			sans-serif;
+		font-size: 1.4rem; /* 14px default */
+		margin: 0;
+		padding: 0;
+	}
+
+	* {
+		scrollbar-width: thin;
+		scrollbar-color: var(--ii-gray-300) transparent;
+	}
+
+	*::-webkit-scrollbar {
+		width: 6px;
+		height: 6px;
+	}
+
+	*::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	*::-webkit-scrollbar-thumb {
+		background-color: var(--ii-gray-300);
+		border-radius: var(--ii-radius-full);
+	}
+
+	*::-webkit-scrollbar-thumb:hover {
+		background-color: var(--ii-gray-400);
+	}
+}

package/dist/style/colors.css

@@ -0,0 +1,183 @@
+:root {
+	--ii-white: #ffffff;
+	--ii-black: #000000;
+
+	/* Brand */
+	--ii-primary: #1173d4;
+	--ii-primary-hover: #0f5bb6;
+
+	/* Grayscale */
+	--ii-gray-50: #f9fafb;
+	--ii-gray-100: #f3f4f6;
+	--ii-gray-200: #e5e7eb;
+	--ii-gray-300: #d1d5db;
+	--ii-gray-400: #9ca3af;
+	--ii-gray-500: #6b7280;
+	--ii-gray-600: #4b5563;
+	--ii-gray-700: #374151;
+	--ii-gray-800: #1f2937;
+	--ii-gray-900: #111827;
+
+	/* Semantic */
+	--ii-success: #10b981;
+	--ii-success-bg: #d1fae5;
+	--ii-success-text: #047857;
+	--ii-warning: #f59e0b;
+	--ii-warning-bg: #fef3c7;
+	--ii-warning-text: #b45309;
+	--ii-error: #ef4444;
+	--ii-error-bg: #fee2e2;
+	--ii-error-text: #dc2626;
+	--ii-info: #0ea5e9;
+	--ii-info-bg: #e0f2fe;
+	--ii-info-text: #0369a1;
+
+	/* Contact types */
+	--ii-client: #06b6d4;
+	--ii-client-light: rgba(6, 182, 212, 0.1);
+	--ii-client-border: rgba(6, 182, 212, 0.4);
+	--ii-applicant: #8b5cf6;
+	--ii-applicant-light: rgba(139, 92, 246, 0.1);
+	--ii-applicant-border: rgba(139, 92, 246, 0.3);
+
+	/* Surfaces */
+	--ii-surface: white;
+	--ii-surface-raised: white;
+	--ii-background: #f9fafb;
+	--ii-background-alt: #fbfbfb;
+
+	/* Text */
+	--ii-text-primary: #111827;
+	--ii-text-accent: #111827;
+	--ii-text-secondary: #6b7280;
+	--ii-text-tertiary: #9ca3af;
+	--ii-text-inverse: white;
+
+	/* Borders */
+	--ii-border: #e5e7eb;
+	--ii-border-strong: #d1d5db;
+
+	/* Input */
+	--color-input-bg: white;
+	--color-input-bg-disabled: #f3f4f6;
+	--color-input-border: #d1d5db;
+	--color-input-border-hover: #9ca3af;
+	--color-input-border-active: #111827;
+	--color-input-border-error: var(--ii-error);
+	--color-input-text: var(--ii-text-primary);
+	--color-input-text-disabled: var(--ii-text-secondary);
+	--color-input-placeholder: var(--ii-text-tertiary);
+
+	/* Dropdown */
+	--color-dropdown-bg: white;
+	--color-dropdown-border: #e5e7eb;
+	--color-dropdown-item-bg-hover: #f3f4f6;
+	--color-dropdown-item-bg-selected: #e5e7eb;
+	--color-dropdown-item-text: var(--ii-text-primary);
+	--color-dropdown-item-text-selected: var(--ii-text-primary);
+
+	/* Buttons */
+	--ii-button-ghost-hover: #eef0f3;
+
+	/* Badge variants */
+	--ii-badge-grey-bg: rgba(107, 114, 128, 0.1);
+	--ii-badge-grey-text: rgb(75, 85, 99);
+	--ii-badge-grey-border: rgba(107, 114, 128, 0.3);
+	--ii-badge-blue-bg: rgba(17, 115, 212, 0.1);
+	--ii-badge-blue-text: rgb(17, 115, 212);
+	--ii-badge-blue-border: rgba(17, 115, 212, 0.3);
+	--ii-badge-red-bg: rgba(220, 38, 38, 0.1);
+	--ii-badge-red-text: rgb(185, 28, 28);
+	--ii-badge-red-border: rgba(220, 38, 38, 0.3);
+	--ii-badge-purple-bg: rgba(79, 70, 229, 0.1);
+	--ii-badge-purple-text: rgb(79, 70, 229);
+	--ii-badge-purple-border: rgba(79, 70, 229, 0.3);
+	--ii-badge-green-bg: rgba(34, 197, 94, 0.1);
+	--ii-badge-green-text: rgb(22, 163, 74);
+	--ii-badge-green-border: rgba(34, 197, 94, 0.3);
+	--ii-badge-orange-bg: rgba(249, 115, 22, 0.1);
+	--ii-badge-orange-text: rgb(194, 65, 12);
+	--ii-badge-orange-border: rgba(249, 115, 22, 0.3);
+	--ii-badge-cyan-bg: rgba(6, 182, 212, 0.1);
+	--ii-badge-cyan-text: rgb(14, 116, 144);
+	--ii-badge-cyan-border: rgba(6, 182, 212, 0.3);
+	--ii-badge-pink-bg: rgba(236, 72, 153, 0.1);
+	--ii-badge-pink-text: rgb(190, 24, 93);
+	--ii-badge-pink-border: rgba(236, 72, 153, 0.3);
+	--ii-badge-teal-bg: rgba(20, 184, 166, 0.1);
+	--ii-badge-teal-text: rgb(13, 148, 136);
+	--ii-badge-teal-border: rgba(20, 184, 166, 0.3);
+	--ii-badge-amber-bg: rgba(245, 158, 11, 0.1);
+	--ii-badge-amber-text: rgb(180, 83, 9);
+	--ii-badge-amber-border: rgba(245, 158, 11, 0.3);
+	--ii-badge-yellow-bg: rgba(234, 179, 8, 0.1);
+	--ii-badge-yellow-text: rgb(161, 98, 7);
+	--ii-badge-yellow-border: rgba(234, 179, 8, 0.3);
+
+	/* Focus ring */
+	--ii-focus-primary: rgba(17, 115, 212, 0.1);
+	--ii-focus-error: rgba(239, 68, 68, 0.1);
+
+	/* Overlay / hover */
+	--ii-overlay: rgba(0, 0, 0, 0.5);
+	--ii-hover-overlay: rgba(0, 0, 0, 0.1);
+
+	/* Filter chips */
+	--ii-filter-bg: #eff6ff;
+	--ii-filter-border: #bfdbfe;
+	--ii-filter-text: #1d4ed8;
+	--ii-filter-operator: #3b82f6;
+	--ii-filter-remove-bg: #dbeafe;
+	--ii-filter-remove-hover: #bfdbfe;
+	--ii-filter-remove-icon: #2563eb;
+
+	/* Tab (TaskBar) */
+	--ii-tab-bg: #f6f7f8;
+	--ii-tab-active: #eceef1;
+
+	/* Primary opacity variants */
+	--ii-primary-2: rgba(17, 115, 212, 0.02);
+	--ii-primary-5: rgba(17, 115, 212, 0.05);
+	--ii-primary-8: rgba(17, 115, 212, 0.08);
+	--ii-primary-15: rgba(17, 115, 212, 0.15);
+	--ii-primary-20: rgba(17, 115, 212, 0.2);
+
+	/* Overlay variants */
+	--ii-overlay-light: rgba(0, 0, 0, 0.4);
+	--ii-overlay-heavy: rgba(0, 0, 0, 0.6);
+	--ii-subtle-bg: rgba(0, 0, 0, 0.05);
+
+	/* Shadow colors */
+	--ii-shadow-xs: rgba(0, 0, 0, 0.04);
+	--ii-shadow-subtle-color: rgba(0, 0, 0, 0.08);
+	--ii-shadow-card-hover-color: rgba(0, 0, 0, 0.2);
+	--ii-shadow-dropdown-color: rgba(0, 0, 0, 0.3);
+
+	/* Semantic light variants */
+	--ii-error-light: rgba(220, 38, 38, 0.05);
+	--ii-success-light: rgba(34, 197, 94, 0.05);
+	--ii-success-15: rgba(34, 197, 94, 0.15);
+	--ii-client-15: rgba(6, 182, 212, 0.15);
+	--ii-focus-blue: rgba(59, 130, 246, 0.1);
+	--ii-code-highlight: rgba(86, 156, 214, 0.15);
+	--ii-inspector-bg: #1e1e1e;
+	--ii-inspector-text: #d4d4d4;
+	--ii-inspector-border: #444444;
+	--ii-inspector-header: #2d2d2d;
+	--ii-inspector-keyword: #569cd6;
+
+	/* Misc */
+	--ii-error-dark: #dc2626;
+	--ii-success-dark-alt: #059669;
+	--ii-success-dark: #16a34a;
+	--ii-email-bg: #fce7f3;
+	--ii-email-text: #be185d;
+	--ii-manual-bg: #fff3e0;
+	--ii-manual-text: #e65100;
+	--ii-login-gradient-start: #f5f7fa;
+	--ii-login-gradient-end: #c3cfe2;
+	--ii-login-card-bg: rgba(255, 255, 255, 0.95);
+	--ii-login-card-border: rgba(255, 255, 255, 0.8);
+	--ii-login-particle: rgba(17, 115, 212, 0.3);
+	--ii-login-particle-link: rgba(17, 115, 212, 0.6);
+}

package/dist/style/global.css

@@ -0,0 +1,2 @@
+@import './colors.css';
+@import './base.css';

package/dist/style/index.d.ts

@@ -0,0 +1 @@
+export { default as preset } from './tailwind/preset';

package/dist/style/index.js

@@ -0,0 +1 @@
+export { default as preset } from './tailwind/preset';

package/dist/style/tailwind/animations.js

@@ -0,0 +1,89 @@
+import plugin from 'tailwindcss/plugin';
+export const keyframes = {
+    loginFadeInUp: {
+        from: { opacity: '0', transform: 'translateY(20px)' },
+        to: { opacity: '1', transform: 'translateY(0)' },
+    },
+    loginPulse: {
+        '0%, 100%': { opacity: '0.6' },
+        '50%': { opacity: '1' },
+    },
+    loginOrbit: {
+        '0%': { transform: 'translate(-50%, -50%) rotate(0deg) translateX(24px)' },
+        '100%': { transform: 'translate(-50%, -50%) rotate(360deg) translateX(24px)' },
+    },
+    modalIn: {
+        from: { opacity: '0', transform: 'scale(0.96)' },
+        to: { opacity: '1', transform: 'scale(1)' },
+    },
+    spin: {
+        to: { transform: 'rotate(360deg)' },
+    },
+    fadeIn: {
+        from: { opacity: '0' },
+        to: { opacity: '1' },
+    },
+    scaleIn: {
+        from: { opacity: '0', transform: 'scale(0.96)' },
+        to: { opacity: '1', transform: 'scale(1)' },
+    },
+    slideIn: {
+        from: { opacity: '0', transform: 'translateY(-0.8rem)' },
+        to: { opacity: '1', transform: 'translateY(0)' },
+    },
+    shake: {
+        '0%, 100%': { transform: 'translateX(0)' },
+        '20%, 60%': { transform: 'translateX(-4px)' },
+        '40%, 80%': { transform: 'translateX(4px)' },
+    },
+    shimmer: {
+        '0%': { backgroundPosition: '-200px 0' },
+        '100%': { backgroundPosition: 'calc(200px + 100%) 0' },
+    },
+    'skeleton-loading': {
+        '0%': { opacity: '0.6' },
+        '50%': { opacity: '1' },
+        '100%': { opacity: '0.6' },
+    },
+    commandPaletteSlideIn: {
+        from: { opacity: '0', transform: 'translateX(-50%) translateY(-10px)' },
+        to: { opacity: '1', transform: 'translateX(-50%) translateY(0)' },
+    },
+    ring: {
+        '0%, 100%': { transform: 'rotate(0deg)' },
+        '10%, 30%': { transform: 'rotate(15deg)' },
+        '20%': { transform: 'rotate(-15deg)' },
+        '40%': { transform: 'rotate(0deg)' },
+    },
+};
+export const animation = {
+    spin: 'spin 0.6s linear infinite',
+    'fade-in': 'fadeIn 200ms ease-out',
+    'scale-in': 'scaleIn 200ms ease-out',
+    'slide-in': 'slideIn 150ms ease-out',
+    shake: 'shake 0.4s ease-out',
+    shimmer: 'shimmer 1.5s infinite',
+    skeleton: 'skeleton-loading 1.2s ease-in-out infinite',
+    'modal-in': 'modalIn 200ms ease-out',
+    'login-fade-in-up': 'loginFadeInUp 0.6s ease-out',
+    'login-pulse': 'loginPulse 2s ease-in-out infinite',
+    'login-orbit': 'loginOrbit 1.5s linear infinite',
+    ring: 'ring 1.5s ease-in-out infinite',
+    pulse: 'loginPulse 1.5s ease-in-out infinite',
+    'pulse-slow': 'loginPulse 2s ease-in-out infinite',
+};
+// Loading skeleton utilities — bundled gradient + animation in a single class.
+export const loadingSkeletonsPlugin = plugin(({ addUtilities }) => {
+    addUtilities({
+        '.shimmer-bg': {
+            background: 'linear-gradient(90deg, var(--ii-gray-200) 25%, var(--ii-gray-100) 50%, var(--ii-gray-200) 75%)',
+            backgroundSize: '200% 100%',
+            animation: animation.shimmer,
+        },
+        '.skeleton-bg': {
+            background: 'linear-gradient(90deg, var(--ii-background-alt) 0%, var(--ii-border) 50%, var(--ii-background-alt) 100%)',
+            backgroundSize: '200% 100%',
+            animation: animation.skeleton,
+        },
+    });
+});