@djangocfg/ui-core 1.0.1

package/src/styles/theme/tokens.css

@@ -0,0 +1,134 @@
+/**
+ * Tailwind CSS v4 Theme Tokens
+ *
+ * Defines custom properties that Tailwind utilities can use
+ * @theme directive registers these for Tailwind v4
+ */
+
+@theme {
+  /* Default breakpoints - mobile-first responsive design */
+  --breakpoint-sm: 40rem;    /* 640px */
+  --breakpoint-md: 48rem;    /* 768px */
+  --breakpoint-lg: 64rem;    /* 1024px */
+  --breakpoint-xl: 80rem;    /* 1280px */
+  --breakpoint-2xl: 96rem;   /* 1536px */
+
+  /* Register semantic color tokens for Tailwind utilities */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-warning: hsl(var(--warning));
+
+  /* Sidebar colors */
+  --color-sidebar-background: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+  /* Spacing scale - required for all spacing utilities to work */
+  --spacing: 0.25rem; /* Base unit: 4px */
+  --spacing-0: 0;
+  --spacing-px: 1px;
+  --spacing-0\.5: 0.125rem;  /* 2px */
+  --spacing-1: 0.25rem;   /* 4px */
+  --spacing-1\.5: 0.375rem;  /* 6px */
+  --spacing-2: 0.5rem;    /* 8px */
+  --spacing-2\.5: 0.625rem;  /* 10px */
+  --spacing-3: 0.75rem;   /* 12px */
+  --spacing-3\.5: 0.875rem;  /* 14px */
+  --spacing-4: 1rem;      /* 16px */
+  --spacing-5: 1.25rem;   /* 20px */
+  --spacing-6: 1.5rem;    /* 24px */
+  --spacing-7: 1.75rem;   /* 28px */
+  --spacing-8: 2rem;      /* 32px */
+  --spacing-9: 2.25rem;   /* 36px */
+  --spacing-10: 2.5rem;   /* 40px */
+  --spacing-11: 2.75rem;  /* 44px */
+  --spacing-12: 3rem;     /* 48px */
+  --spacing-14: 3.5rem;   /* 56px */
+  --spacing-16: 4rem;     /* 64px */
+  --spacing-20: 5rem;     /* 80px */
+  --spacing-24: 6rem;     /* 96px */
+  --spacing-28: 7rem;     /* 112px */
+  --spacing-32: 8rem;     /* 128px */
+  --spacing-36: 9rem;     /* 144px */
+  --spacing-40: 10rem;    /* 160px */
+  --spacing-44: 11rem;    /* 176px */
+  --spacing-48: 12rem;    /* 192px */
+  --spacing-52: 13rem;    /* 208px */
+  --spacing-56: 14rem;    /* 224px */
+  --spacing-60: 15rem;    /* 240px */
+  --spacing-64: 16rem;    /* 256px */
+  --spacing-72: 18rem;    /* 288px */
+  --spacing-80: 20rem;    /* 320px */
+  --spacing-96: 24rem;    /* 384px */
+
+  /* Gap utilities - required for gap-* classes to work */
+  --gap-9: 2.25rem; /* 36px */
+  --gap-10: 2.5rem;  /* 40px */
+  --gap-11: 2.75rem; /* 44px */
+  --gap-12: 3rem;    /* 48px */
+  --gap-14: 3.5rem;  /* 56px */
+  --gap-16: 4rem;    /* 64px */
+  --gap-20: 5rem;    /* 80px */
+  --gap-24: 6rem;    /* 96px */
+
+  /* Blur utilities - required for backdrop-blur-* classes to work */
+  --blur-xs: 4px;
+  --blur-sm: 8px;
+  --blur-md: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
+
+  /* Custom width utilities */
+  --width-dropdown: 500px;
+
+  /* Z-index scale for stacking context */
+  --z-index-0: 0;
+  --z-index-10: 10;
+  --z-index-20: 20;
+  --z-index-30: 30;
+  --z-index-40: 40;
+  --z-index-50: 50;
+  --z-index-100: 100;
+  --z-index-150: 150;
+  --z-index-200: 200;
+  --z-index-500: 500;
+  --z-index-600: 600;
+  --z-index-9995: 9995;
+  --z-index-9996: 9996;
+  --z-index-9999: 9999;
+  --z-index-auto: auto;
+
+  /* Custom animations for smooth floating effects */
+  --animate-float: float 20s ease-in-out infinite;
+  --animate-float-slow: float 25s ease-in-out infinite;
+  --animate-float-x: float-x 18s ease-in-out infinite;
+  --animate-float-diagonal: float-diagonal 22s ease-in-out infinite;
+  --animate-morph: morph 15s ease-in-out infinite;
+  --animate-gradient-shift: gradient-shift 10s ease-in-out infinite;
+}

package/src/styles/theme.css

@@ -0,0 +1,22 @@
+/**
+ * Theme System
+ *
+ * Main entry point for theme configuration
+ * Aggregates all theme-related styles in logical order:
+ * 1. Tailwind tokens (@theme)
+ * 2. Custom animations (@keyframes)
+ * 3. Light theme colors (:root)
+ * 4. Dark theme colors (.dark)
+ */
+
+/* 1. Tailwind v4 theme tokens - MUST be first */
+@import "./theme/tokens.css";
+
+/* 2. Custom animations */
+@import "./theme/animations.css";
+
+/* 3. Light theme (default) */
+@import "./theme/light.css";
+
+/* 4. Dark theme */
+@import "./theme/dark.css";

package/src/styles/utilities.css

@@ -0,0 +1,187 @@
+/**
+ * Custom Utilities
+ * Utility classes that extend Tailwind CSS
+ * Compatible with Tailwind CSS v4
+ */
+
+/**
+ * Screen Reader Only
+ * Hides content visually but keeps it accessible to screen readers
+ * Note: Using clip for better browser compatibility (clip-path may have issues)
+ */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/**
+ * Step Counter Utility
+ * Used for numbered step indicators in documentation/tutorials
+ */
+.step {
+  counter-increment: step;
+}
+
+.step:before {
+  position: absolute;
+  width: 2.25rem;
+  height: 2.25rem;
+  background-color: hsl(var(--muted));
+  border-radius: 9999px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-weight: 500;
+  text-align: center;
+  font-size: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-indent: -1px;
+  border: 4px solid hsl(var(--background));
+  content: counter(step);
+}
+
+/**
+ * MultiSelectPro Animation Classes
+ * Custom animations for the MultiSelectPro component
+ */
+
+/* Badge Animations */
+@keyframes wiggle {
+  0%, 100% { transform: rotate(-3deg); }
+  50% { transform: rotate(3deg); }
+}
+
+.animate-wiggle {
+  animation: wiggle 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slideIn {
+  animation: slideIn 0.3s ease-out;
+}
+
+/* Popover Animations */
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-scaleIn {
+  animation: scaleIn 0.2s ease-out;
+}
+
+@keyframes scaleOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+.animate-scaleOut {
+  animation: scaleOut 0.2s ease-in;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slideDown {
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+.animate-slideUp {
+  animation: slideUp 0.3s ease-in;
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.animate-fadeOut {
+  animation: fadeOut 0.2s ease-in;
+}
+
+@keyframes flipIn {
+  from {
+    opacity: 0;
+    transform: rotateX(-90deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotateX(0);
+  }
+}
+
+.animate-flipIn {
+  animation: flipIn 0.3s ease-out;
+}
+
+@keyframes flipOut {
+  from {
+    opacity: 1;
+    transform: rotateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: rotateX(90deg);
+  }
+}
+
+.animate-flipOut {
+  animation: flipOut 0.3s ease-in;
+}