@academy-sdk/sdk 0.2.1 → 0.2.3

package/dist/styles.css

@@ -1364,8 +1364,8 @@
   .bg-center {
     background-position: center;
   }
-  .fill-gray-300 {
-    fill: var(--color-gray-300);
+  .fill-theme-border-primary {
+    fill: var(--color-theme-border-primary);
   }
   .fill-yellow-400 {
     fill: var(--color-yellow-400);
@@ -1704,6 +1704,9 @@
   .text-theme-accent-primary {
     color: var(--color-theme-accent-primary);
   }
+  .text-theme-border-primary {
+    color: var(--color-theme-border-primary);
+  }
   .text-theme-text-muted {
     color: var(--color-theme-text-muted);
   }
@@ -2091,13 +2094,6 @@
       }
     }
   }
-  .hover\:bg-gray-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-100);
-      }
-    }
-  }
   .hover\:bg-green-600 {
     &:hover {
       @media (hover: hover) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@academy-sdk/sdk",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "SDK for building custom learner templates for the Academy platform",
   "files": [
     "dist",

package/src/components/molecules/CourseCard.tsx

@@ -203,7 +203,7 @@ export function CourseCard({
               {!isFree && originalPrice && originalPrice > price && (
                 <span className="text-sm text-gray-400 line-through">${originalPrice}</span>
               )}
-              <span className="text-lg font-bold text-[rgb(var(--accent-primary))]">
+              <span className="text-xl font-bold text-[rgb(var(--accent-primary))]">
                 {isFree ? 'Free' : `$${price}`}
               </span>
             </div>

package/src/components/pages/CourseDetailPage.tsx

@@ -102,7 +102,7 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
   };
 
   const renderEnrollmentCard = () => (
-    <div className="bg-white p-4 rounded-xl shadow-lg border border-gray-100">
+    <div className="bg-theme-bg-secondary p-4 rounded-xl shadow-lg border border-theme-border-primary">
       {thumbnail && !imgError && (
         <img
           src={thumbnail}
@@ -124,23 +124,23 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
       <div className="text-center mb-4">
         {appliedCoupon && discountedPrice !== undefined ? (
           <div className="space-y-1">
-            <div className="text-2xl font-bold text-gray-900">
+            <div className="text-2xl font-bold text-theme-text-primary">
               {formatCoursePrice(discountedPrice, false, currency)}
             </div>
-            <div className="text-base line-through text-gray-400">
+            <div className="text-base line-through text-theme-text-muted">
               {formatCoursePrice(price, isFree, currency)}
             </div>
-            <div className="text-sm font-semibold text-gray-900">
+            <div className="text-sm font-semibold text-theme-text-primary">
               {(appliedCoupon as any).discountType === 'PERCENTAGE'
                 ? `${(appliedCoupon as any).discountValue}% Off`
                 : formatCoursePrice((appliedCoupon as any).discountValue, false, currency)}
             </div>
           </div>
         ) : (
-          <div className="text-2xl font-bold text-gray-900">
+          <div className="text-2xl font-bold text-theme-text-primary">
             {formatCoursePrice(price, isFree, currency)}
             {pricingType === 'SUBSCRIPTION' && (
-              <span className="text-lg font-normal text-gray-500"> / month</span>
+              <span className="text-lg font-normal text-theme-text-secondary"> / month</span>
             )}
           </div>
         )}
@@ -197,7 +197,7 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
                   placeholder="Enter coupon code"
                   value={couponCode}
                   onChange={(e) => onCouponCodeChange(e.target.value.toUpperCase())}
-                  className={`flex-1 text-sm border rounded-md px-3 py-2 focus:outline-none focus:border-[#49BBBD] ${couponError ? 'border-red-500' : 'border-gray-300'}`}
+                  className={`flex-1 text-sm border rounded-md px-3 py-2 focus:outline-none focus:border-[#49BBBD] ${couponError ? 'border-red-500' : 'border-theme-border-primary'}`}
                 />
                 <button
                   onClick={onApplyCoupon as any}
@@ -222,22 +222,22 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
       )}
 
       {/* This course included */}
-      <div className="border-t border-gray-200 pt-4">
-        <h3 className="font-semibold text-gray-900 mb-3 text-sm">This course included</h3>
+      <div className="border-t border-theme-border-primary pt-4">
+        <h3 className="font-semibold text-theme-text-primary mb-3 text-sm">This course included</h3>
         <div className="space-y-2.5">
-          <div className="flex items-center gap-2.5 text-gray-700">
+          <div className="flex items-center gap-2.5 text-theme-text-secondary">
             <div className="w-4 h-4 rounded-full bg-theme-accent-primary flex items-center justify-center flex-shrink-0">
               <FileText className="h-2.5 w-2.5 text-white" />
             </div>
             <span className="text-sm">{totalLessons} lessons</span>
           </div>
-          <div className="flex items-center gap-2.5 text-gray-700">
+          <div className="flex items-center gap-2.5 text-theme-text-secondary">
             <div className="w-4 h-4 rounded-full bg-theme-accent-primary flex items-center justify-center flex-shrink-0">
               <Clock className="h-2.5 w-2.5 text-white" />
             </div>
             <span className="text-sm">Self-paced learning</span>
           </div>
-          <div className="flex items-center gap-2.5 text-gray-700">
+          <div className="flex items-center gap-2.5 text-theme-text-secondary">
             <div className="w-4 h-4 rounded-full bg-theme-accent-primary flex items-center justify-center flex-shrink-0">
               <Monitor className="h-2.5 w-2.5 text-white" />
             </div>
@@ -302,7 +302,7 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
               className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all cursor-pointer ${
                 activeTab === tab
                   ? 'bg-theme-accent-primary text-white shadow-md'
-                  : 'bg-white text-gray-600 border border-gray-200 hover:border-[#49BBBD] hover:text-[#49BBBD]'
+                  : 'bg-theme-bg-secondary text-theme-text-secondary border border-theme-border-primary hover:border-[#49BBBD] hover:text-[#49BBBD]'
               }`}
             >
               {tab.charAt(0).toUpperCase() + tab.slice(1)}
@@ -317,17 +317,17 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
         {activeTab === 'overview' && (
           <div className="lg:pr-110">
             {/* About This Course */}
-            <div className="mb-8 pb-8 border-b border-gray-300">
-              <h2 className="text-xl font-bold text-gray-900 mb-4">About This Course</h2>
+            <div className="mb-8 pb-8 border-b border-theme-border-primary">
+              <h2 className="text-xl font-bold text-theme-text-primary mb-4">About This Course</h2>
               {course.summary && (
                 <div
-                  className="text-gray-700 text-sm leading-relaxed mb-6"
+                  className="text-theme-text-secondary text-sm leading-relaxed mb-6"
                   dangerouslySetInnerHTML={{ __html: course.summary }}
                 />
               )}
               {course.description && (
                 <div
-                  className="text-gray-700 text-sm leading-relaxed"
+                  className="text-theme-text-secondary text-sm leading-relaxed"
                   dangerouslySetInnerHTML={{ __html: course.description }}
                 />
               )}
@@ -335,13 +335,13 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
 
             {/* What You'll Learn */}
             {course.whatYouWillLearn && course.whatYouWillLearn.length > 0 && (
-              <div className="mb-8 pb-8 border-b border-gray-300">
-                <h2 className="text-xl font-bold text-gray-900 mb-4">What You'll Learn</h2>
+              <div className="mb-8 pb-8 border-b border-theme-border-primary">
+                <h2 className="text-xl font-bold text-theme-text-primary mb-4">What You'll Learn</h2>
                 <div className="grid md:grid-cols-2 gap-3">
                   {course.whatYouWillLearn.map((item: string, i: number) => (
                     <div key={i} className="flex items-start gap-3">
                       <CheckCircle2 className="h-5 w-5 text-green-600 flex-shrink-0" />
-                      <span className="text-sm text-gray-700">{item}</span>
+                      <span className="text-sm text-theme-text-secondary">{item}</span>
                     </div>
                   ))}
                 </div>
@@ -350,13 +350,13 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
 
             {/* Requirements */}
             {course.requirements && course.requirements.length > 0 && (
-              <div className="mb-8 pb-8 border-b border-gray-300">
-                <h2 className="text-xl font-bold text-gray-900 mb-4">Requirements</h2>
+              <div className="mb-8 pb-8 border-b border-theme-border-primary">
+                <h2 className="text-xl font-bold text-theme-text-primary mb-4">Requirements</h2>
                 <ul className="space-y-2">
                   {course.requirements.map((item: string, i: number) => (
                     <li key={i} className="flex items-start gap-2">
-                      <span className="text-gray-400 text-sm">•</span>
-                      <span className="text-sm text-gray-700">{item}</span>
+                      <span className="text-theme-text-muted text-sm">•</span>
+                      <span className="text-sm text-theme-text-secondary">{item}</span>
                     </li>
                   ))}
                 </ul>
@@ -365,13 +365,13 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
 
             {/* Target Audience */}
             {course.targetAudience && course.targetAudience.length > 0 && (
-              <div className="mb-8 pb-8 border-b border-gray-300">
-                <h2 className="text-xl font-bold text-gray-900 mb-4">Who This Course Is For</h2>
+              <div className="mb-8 pb-8 border-b border-theme-border-primary">
+                <h2 className="text-xl font-bold text-theme-text-primary mb-4">Who This Course Is For</h2>
                 <ul className="space-y-2">
                   {course.targetAudience.map((item: string, i: number) => (
                     <li key={i} className="flex items-start gap-2">
-                      <span className="text-gray-400 text-sm">•</span>
-                      <span className="text-sm text-gray-700">{item}</span>
+                      <span className="text-theme-text-muted text-sm">•</span>
+                      <span className="text-sm text-theme-text-secondary">{item}</span>
                     </li>
                   ))}
                 </ul>
@@ -390,21 +390,21 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
                       {[1, 2, 3, 4, 5].map((star) => (
                         <svg
                           key={star}
-                          className={`w-4 h-4 ${star <= Math.round(ratingSummary.averageRating || 0) ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300 fill-gray-300'}`}
+                          className={`w-4 h-4 ${star <= Math.round(ratingSummary.averageRating || 0) ? 'text-yellow-400 fill-yellow-400' : 'text-theme-border-primary fill-theme-border-primary'}`}
                           viewBox="0 0 24 24"
                         >
                           <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                         </svg>
                       ))}
                     </div>
-                    <p className="text-sm text-gray-600">
+                    <p className="text-sm text-theme-text-secondary">
                       Course Rating • {ratingSummary.totalRatings} ratings
                     </p>
                   </div>
                 </div>
 
                 {ratings && ratings.slice(0, 2).map((review: any) => (
-                  <div key={review.id} className="mb-4 p-4 border border-gray-200 rounded-lg">
+                  <div key={review.id} className="mb-4 p-4 border border-theme-border-primary rounded-lg">
                     <div className="flex items-center gap-3 mb-2">
                       <div className="w-9 h-9 rounded-full bg-theme-accent-primary flex items-center justify-center text-white font-semibold text-sm">
                         {(review.reviewerName || 'U').charAt(0)}
@@ -415,7 +415,7 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
                           {[1, 2, 3, 4, 5].map((star) => (
                             <svg
                               key={star}
-                              className={`w-3 h-3 ${star <= (review.rating || 0) ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300 fill-gray-300'}`}
+                              className={`w-3 h-3 ${star <= (review.rating || 0) ? 'text-yellow-400 fill-yellow-400' : 'text-theme-border-primary fill-theme-border-primary'}`}
                               viewBox="0 0 24 24"
                             >
                               <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
@@ -425,7 +425,7 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
                       </div>
                     </div>
                     {review.review && (
-                      <p className="text-sm text-gray-700">{review.review}</p>
+                      <p className="text-sm text-theme-text-secondary">{review.review}</p>
                     )}
                   </div>
                 ))}
@@ -437,53 +437,53 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
         {/* Curriculum Tab */}
         {activeTab === 'curriculum' && (
           <div className="mb-8">
-            <h2 className="text-xl font-bold text-gray-900 mb-4">Curriculum</h2>
+            <h2 className="text-xl font-bold text-theme-text-primary mb-4">Curriculum</h2>
             <div className="space-y-1">
               {sections.map((section: any) => (
-                <div key={section.id} className="border border-gray-200 rounded overflow-hidden">
+                <div key={section.id} className="border border-theme-border-primary rounded overflow-hidden">
                   <button
                     onClick={() => toggleSection(section.id)}
-                    className="w-full flex items-center justify-between p-3 hover:bg-gray-50 transition-colors text-left cursor-pointer"
+                    className="w-full flex items-center justify-between p-3 hover:bg-theme-bg-tertiary transition-colors text-left cursor-pointer"
                   >
                     <div className="flex items-center gap-2">
                       {expandedSections.has(section.id) ? (
-                        <ChevronDown className="h-4 w-4 text-gray-600" />
+                        <ChevronDown className="h-4 w-4 text-theme-text-secondary" />
                       ) : (
-                        <ChevronRight className="h-4 w-4 text-gray-600" />
+                        <ChevronRight className="h-4 w-4 text-theme-text-secondary" />
                       )}
                       <div>
-                        <span className="text-sm font-medium text-gray-900">{section.title}</span>
+                        <span className="text-sm font-medium text-theme-text-primary">{section.title}</span>
                         {section.description && (
-                          <p className="text-xs text-gray-500 mt-0.5">{section.description}</p>
+                          <p className="text-xs text-theme-text-muted mt-0.5">{section.description}</p>
                         )}
                       </div>
                     </div>
-                    <span className="text-xs text-gray-500">
+                    <span className="text-xs text-theme-text-muted">
                       {section.activities?.length || 0} lessons
                     </span>
                   </button>
 
                   {expandedSections.has(section.id) && (
-                    <div className="bg-gray-50 border-t border-gray-200">
+                    <div className="bg-theme-bg-tertiary border-t border-theme-border-primary">
                       {section.activities?.map((activity: any) => {
                         const isSelected = selectedLesson === activity.id;
                         return (
                           <button
                             key={activity.id}
                             onClick={() => setSelectedLesson(activity.id)}
-                            className={`w-full flex items-start justify-between gap-3 px-10 py-3 border-b border-gray-100 last:border-b-0 transition-colors text-left cursor-pointer ${
+                            className={`w-full flex items-start justify-between gap-3 px-10 py-3 border-b border-theme-border-primary last:border-b-0 transition-colors text-left cursor-pointer ${
                               isSelected
                                 ? 'bg-blue-50 border-l-4 border-l-blue-600'
-                                : 'hover:bg-gray-100'
+                                : 'hover:bg-theme-bg-secondary'
                             }`}
                           >
                             <div className="flex items-start gap-3 flex-1">
                               <PlayCircle
-                                className={`h-4 w-4 flex-shrink-0 mt-0.5 ${isSelected ? 'text-blue-600' : 'text-gray-400'}`}
+                                className={`h-4 w-4 flex-shrink-0 mt-0.5 ${isSelected ? 'text-blue-600' : 'text-theme-text-muted'}`}
                               />
                               <div className="flex-1">
                                 <div className="flex items-center gap-2">
-                                  <span className={`text-xs font-medium ${isSelected ? 'text-blue-600' : 'text-gray-700'}`}>
+                                  <span className={`text-xs font-medium ${isSelected ? 'text-blue-600' : 'text-theme-text-secondary'}`}>
                                     {activity.title}
                                   </span>
                                   {activity.freePreview && (
@@ -496,10 +496,10 @@ export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
                             </div>
                             <div className="flex items-center gap-3 flex-shrink-0">
                               {activity.downloadable && (
-                                <Download className="h-3 w-3 text-gray-400" />
+                                <Download className="h-3 w-3 text-theme-text-muted" />
                               )}
                               {activity.duration && (
-                                <span className="text-xs text-gray-500">
+                                <span className="text-xs text-theme-text-muted">
                                   {typeof activity.duration === 'number'
                                     ? formatDuration(activity.duration)
                                     : activity.duration}

package/src/components/pages/CoursePlayerPage.tsx

@@ -57,7 +57,7 @@ export function CoursePlayerPage(props: Partial<CoursePlayerPageProps> & {
 
   const [currentLessonIdx, setCurrentLessonIdx] = useState(0);
   const [expandedModules, setExpandedModules] = useState<Set<string>>(
-    () => new Set(course?.modules?.[0]?.id ? [course.modules[0].id] : []),
+    () => new Set(course?.modules?.map((m) => m.id) ?? []),
   );
   const [activeTab, setActiveTab] = useState('overview');
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);