@prosophia/lab-techy 0.0.2 → 0.0.4

package/dist/styles/globals.css

@@ -0,0 +1,215 @@
+/* Design Tokens & Global Styles */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');
+
+:root {
+  /* Colors */
+  --primary: #D4A012;
+  --primary-dark: #B8860B;
+  --primary-light: rgba(212, 160, 18, 0.1);
+  --background-light: #f6f6f8;
+  --background-dark: #101622;
+  --white: #ffffff;
+  --slate-50: #f8fafc;
+  --slate-100: #f1f5f9;
+  --slate-200: #e2e8f0;
+  --slate-300: #cbd5e1;
+  --slate-400: #94a3b8;
+  --slate-500: #64748b;
+  --slate-600: #475569;
+  --slate-700: #334155;
+  --slate-800: #1e293b;
+  --slate-900: #0f172a;
+  --slate-950: #020617;
+
+  /* Badge colors */
+  --blue-100: #dbeafe;
+  --blue-600: rgba(37, 99, 235, 0.9);
+  --blue-800: #1e40af;
+  --purple-100: #f3e8ff;
+  --purple-600: rgba(147, 51, 234, 0.9);
+  --purple-800: #6b21a8;
+  --emerald-600: rgba(5, 150, 105, 0.9);
+  --green-100: #dcfce7;
+  --green-800: #166534;
+  --amber-100: #fef3c7;
+  --amber-800: #92400e;
+  --rose-100: #ffe4e9;
+  --rose-800: #9f1239;
+  --red-100: #fee2e2;
+  --red-700: #b91c1c;
+
+  /* Motion Design Tokens */
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --timing-quick: 150ms;
+  --timing-standard: 350ms;
+  --timing-ambient: 800ms;
+
+  /* Spacing */
+  --container-max: 1280px;
+  --container-sm: 1200px;
+  --container-article: 960px;
+
+  /* Border radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* Text colors */
+  --text-primary: #0f172a;
+  --text-secondary: #475569;
+  --text-muted: #94a3b8;
+
+  /* Border colors */
+  --border-color: #e2e8f0;
+
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-base: 300ms ease;
+}
+
+/* CSS Reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background-color: var(--background-light);
+  color: var(--slate-900);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+  font-family: inherit;
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+}
+
+/* Material Icons */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Animations */
+@keyframes pulse-soft {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+@keyframes float-subtle {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+}
+
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.animate-pulse { animation: pulse-soft 2s ease-in-out infinite; }
+.animate-float { animation: float-subtle 3s ease-in-out infinite; }
+.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
+
+/* Dark Mode Styles */
+[data-theme="dark"] {
+  --background-light: #0f172a;
+  --white: #1e293b;
+  --slate-50: #1e293b;
+  --slate-100: #334155;
+  --slate-200: #475569;
+  --slate-300: #64748b;
+  --slate-400: #94a3b8;
+  --slate-500: #cbd5e1;
+  --slate-600: #e2e8f0;
+  --slate-700: #f1f5f9;
+  --slate-800: #f8fafc;
+  --slate-900: #ffffff;
+  --slate-950: #ffffff;
+
+  /* Dark mode badge colors */
+  --blue-100: rgba(59, 130, 246, 0.2);
+  --blue-800: #93c5fd;
+  --purple-100: rgba(168, 85, 247, 0.2);
+  --purple-800: #d8b4fe;
+  --green-100: rgba(34, 197, 94, 0.2);
+  --green-800: #86efac;
+  --amber-100: rgba(245, 158, 11, 0.2);
+  --amber-800: #fcd34d;
+  --rose-100: rgba(244, 63, 94, 0.2);
+  --rose-800: #fda4af;
+  --red-100: rgba(239, 68, 68, 0.2);
+  --red-700: #fca5a5;
+
+  /* Dark mode shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+
+  /* Dark mode text colors */
+  --text-primary: #ffffff;
+  --text-secondary: #e2e8f0;
+  --text-muted: #94a3b8;
+
+  /* Dark mode border colors */
+  --border-color: #475569;
+}
+
+[data-theme="dark"] body {
+  background-color: var(--background-light);
+  color: var(--slate-900);
+}

package/package.json

@@ -1,34 +1,52 @@
 {
   "name": "@prosophia/lab-techy",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Techy lab website template with Sanity CMS for Prosophia",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
-    "./styles": "./dist/styles/index.css"
+    "./schemas": {
+      "types": "./dist/schemas/index.d.ts",
+      "import": "./dist/schemas/index.mjs",
+      "require": "./dist/schemas/index.js"
+    },
+    "./layouts": {
+      "types": "./dist/layouts/index.d.ts",
+      "import": "./dist/layouts/index.mjs",
+      "require": "./dist/layouts/index.js"
+    },
+    "./styles": "./dist/styles/globals.css"
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "lint": "eslint src/"
   },
   "peerDependencies": {
+    "@sanity/image-url": ">=1.0.0",
+    "framer-motion": ">=10.0.0",
     "next": ">=14.0.0",
+    "next-sanity": ">=7.0.0",
+    "next-themes": ">=0.2.0",
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "sanity": ">=3.0.0"
   },
   "devDependencies": {
+    "@portabletext/types": "^2.0.0",
+    "@sanity/image-url": "^1.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "next-sanity": "^7.0.0",
+    "next-themes": "^0.2.0",
+    "sanity": "^3.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   },