@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/pagination/Pagination.css

@@ -124,15 +124,99 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes pk-pagination-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.96);
+  }
+}
 .prokodo-Pagination {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--pk-pagination-gap);
+}
+.prokodo-Pagination--is-pending {
+  --pk-button-disabled-bg: transparent;
+  --pk-button-disabled-fg: var(--pk-pagination-fg);
+  pointer-events: none;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__btn, .prokodo-Pagination--is-pending .prokodo-Pagination__page {
+  animation: pk-pagination-pulse 1.4s ease-in-out infinite;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__page--active {
+  animation-duration: 2.4s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(1) .prokodo-Pagination__page {
+  animation-delay: 0s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(2) .prokodo-Pagination__page {
+  animation-delay: 0.065s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(3) .prokodo-Pagination__page {
+  animation-delay: 0.13s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(4) .prokodo-Pagination__page {
+  animation-delay: 0.195s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(5) .prokodo-Pagination__page {
+  animation-delay: 0.26s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(6) .prokodo-Pagination__page {
+  animation-delay: 0.325s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(7) .prokodo-Pagination__page {
+  animation-delay: 0.39s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(8) .prokodo-Pagination__page {
+  animation-delay: 0.455s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(9) .prokodo-Pagination__page {
+  animation-delay: 0.52s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(10) .prokodo-Pagination__page {
+  animation-delay: 0.585s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(11) .prokodo-Pagination__page {
+  animation-delay: 0.65s;
+}
+.prokodo-Pagination--color-primary {
+  --pk-pagination-active-border: var(--pk-color-brand);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-brand) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-4);
+}
+.prokodo-Pagination--color-secondary {
+  --pk-pagination-active-border: var(--pk-color-accent);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-accent) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-2);
+}
+.prokodo-Pagination--color-success {
+  --pk-pagination-active-border: var(--pk-color-success);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-success) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-success);
+}
+.prokodo-Pagination--color-error {
+  --pk-pagination-active-border: var(--pk-color-error);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-error) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-error);
+}
+.prokodo-Pagination--color-warning {
+  --pk-pagination-active-border: var(--pk-color-warning);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-warning) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-warning);
+}
+.prokodo-Pagination--color-info {
+  --pk-pagination-active-border: var(--pk-color-info);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-info) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-info);
 }
 .prokodo-Pagination__list {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--pk-pagination-gap);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -142,8 +226,8 @@
   align-items: center;
 }
 .prokodo-Pagination__ellipsis {
-  color: var(--color-grey-700);
-  padding: 0 0.25rem;
+  color: var(--pk-pagination-fg);
+  padding: 0 var(--pk-pagination-pad-x);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -172,20 +256,52 @@
 .prokodo-Pagination__btn {
   width: 40px;
   height: 40px;
+  transition: box-shadow 140ms ease;
+}
+.prokodo-Pagination__btn:not(:disabled):hover {
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--pk-pagination-active-border) 30%, transparent);
 }
 .prokodo-Pagination__page {
   min-width: 36px;
   height: 36px;
-  padding: 0 0.25rem;
-  border-radius: 10px;
-  color: var(--color-grey-700);
-  border: 1px solid var(--color-grey-100);
+  padding: 0 var(--pk-pagination-pad-x);
+  border-radius: var(--pk-pagination-page-radius);
+  color: var(--pk-pagination-fg);
+  border: none !important;
+  background: transparent !important;
+  background-color: transparent !important;
   text-align: center !important;
+  transition: box-shadow 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
 }
-html[data-theme=dark] .prokodo-Pagination__page {
-  border: 1px solid var(--color-grey-500);
+.prokodo-Pagination__page:not(:disabled):hover {
+  background: color-mix(in srgb, var(--pk-pagination-active-bg) 10%, transparent) !important;
+  background-color: color-mix(in srgb, var(--pk-pagination-active-bg) 10%, transparent) !important;
+  color: var(--pk-pagination-active-border) !important;
+  transform: scale(1.05);
 }
 .prokodo-Pagination__page--active {
-  border: none;
   pointer-events: none;
+  border-radius: calc(var(--pk-pagination-page-radius) + 2px);
+  box-shadow: var(--pk-pagination-active-shadow);
+  transform: scale(1.1);
+  font-weight: 600 !important;
+  letter-spacing: -0.01em;
+  transition: transform 140ms ease, box-shadow 140ms ease;
+  color: var(--pk-color-fg) !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  --pk-button-disabled-bg: transparent;
+  --pk-button-disabled-fg: var(--pk-color-fg);
+}
+.prokodo-Pagination__page--active::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 2px;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  background: var(--pk-pagination-active-gradient) !important;
 }

package/dist/components/pagination/Pagination.js

@@ -5,7 +5,10 @@ import PaginationServer from "./Pagination.server.js";
 const Pagination = createIsland({
   name: "Pagination",
   Server: PaginationServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./Pagination.lazy.js"), "loadLazy")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./Pagination.lazy.js"), "loadLazy")
+  )
 });
 export {
   Pagination

package/dist/components/pagination/Pagination.module.css

@@ -124,15 +124,99 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes pk-pagination-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.96);
+  }
+}
 .prokodo-Pagination {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--pk-pagination-gap);
+}
+.prokodo-Pagination--is-pending {
+  --pk-button-disabled-bg: transparent;
+  --pk-button-disabled-fg: var(--pk-pagination-fg);
+  pointer-events: none;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__btn, .prokodo-Pagination--is-pending .prokodo-Pagination__page {
+  animation: pk-pagination-pulse 1.4s ease-in-out infinite;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__page--active {
+  animation-duration: 2.4s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(1) .prokodo-Pagination__page {
+  animation-delay: 0s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(2) .prokodo-Pagination__page {
+  animation-delay: 0.065s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(3) .prokodo-Pagination__page {
+  animation-delay: 0.13s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(4) .prokodo-Pagination__page {
+  animation-delay: 0.195s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(5) .prokodo-Pagination__page {
+  animation-delay: 0.26s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(6) .prokodo-Pagination__page {
+  animation-delay: 0.325s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(7) .prokodo-Pagination__page {
+  animation-delay: 0.39s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(8) .prokodo-Pagination__page {
+  animation-delay: 0.455s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(9) .prokodo-Pagination__page {
+  animation-delay: 0.52s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(10) .prokodo-Pagination__page {
+  animation-delay: 0.585s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(11) .prokodo-Pagination__page {
+  animation-delay: 0.65s;
+}
+.prokodo-Pagination--color-primary {
+  --pk-pagination-active-border: var(--pk-color-brand);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-brand) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-4);
+}
+.prokodo-Pagination--color-secondary {
+  --pk-pagination-active-border: var(--pk-color-accent);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-accent) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-2);
+}
+.prokodo-Pagination--color-success {
+  --pk-pagination-active-border: var(--pk-color-success);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-success) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-success);
+}
+.prokodo-Pagination--color-error {
+  --pk-pagination-active-border: var(--pk-color-error);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-error) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-error);
+}
+.prokodo-Pagination--color-warning {
+  --pk-pagination-active-border: var(--pk-color-warning);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-warning) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-warning);
+}
+.prokodo-Pagination--color-info {
+  --pk-pagination-active-border: var(--pk-color-info);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-info) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-info);
 }
 .prokodo-Pagination__list {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--pk-pagination-gap);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -142,8 +226,8 @@
   align-items: center;
 }
 .prokodo-Pagination__ellipsis {
-  color: var(--color-grey-700);
-  padding: 0 0.25rem;
+  color: var(--pk-pagination-fg);
+  padding: 0 var(--pk-pagination-pad-x);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -172,20 +256,52 @@
 .prokodo-Pagination__btn {
   width: 40px;
   height: 40px;
+  transition: box-shadow 140ms ease;
+}
+.prokodo-Pagination__btn:not(:disabled):hover {
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--pk-pagination-active-border) 30%, transparent);
 }
 .prokodo-Pagination__page {
   min-width: 36px;
   height: 36px;
-  padding: 0 0.25rem;
-  border-radius: 10px;
-  color: var(--color-grey-700);
-  border: 1px solid var(--color-grey-100);
+  padding: 0 var(--pk-pagination-pad-x);
+  border-radius: var(--pk-pagination-page-radius);
+  color: var(--pk-pagination-fg);
+  border: none !important;
+  background: transparent !important;
+  background-color: transparent !important;
   text-align: center !important;
+  transition: box-shadow 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
 }
-html[data-theme=dark] .prokodo-Pagination__page {
-  border: 1px solid var(--color-grey-500);
+.prokodo-Pagination__page:not(:disabled):hover {
+  background: color-mix(in srgb, var(--pk-pagination-active-bg) 10%, transparent) !important;
+  background-color: color-mix(in srgb, var(--pk-pagination-active-bg) 10%, transparent) !important;
+  color: var(--pk-pagination-active-border) !important;
+  transform: scale(1.05);
 }
 .prokodo-Pagination__page--active {
-  border: none;
   pointer-events: none;
+  border-radius: calc(var(--pk-pagination-page-radius) + 2px);
+  box-shadow: var(--pk-pagination-active-shadow);
+  transform: scale(1.1);
+  font-weight: 600 !important;
+  letter-spacing: -0.01em;
+  transition: transform 140ms ease, box-shadow 140ms ease;
+  color: var(--pk-color-fg) !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  --pk-button-disabled-bg: transparent;
+  --pk-button-disabled-fg: var(--pk-color-fg);
+}
+.prokodo-Pagination__page--active::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 2px;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  background: var(--pk-pagination-active-gradient) !important;
 }

package/dist/components/pagination/Pagination.module.scss.js

@@ -1,11 +1,19 @@
 const styles = {
   "prokodo-Pagination": "prokodo-Pagination",
-  "prokodo-Pagination__list": "prokodo-Pagination__list",
-  "prokodo-Pagination__item": "prokodo-Pagination__item",
-  "prokodo-Pagination__ellipsis": "prokodo-Pagination__ellipsis",
+  "prokodo-Pagination--is-pending": "prokodo-Pagination--is-pending",
   "prokodo-Pagination__btn": "prokodo-Pagination__btn",
   "prokodo-Pagination__page": "prokodo-Pagination__page",
-  "prokodo-Pagination__page--active": "prokodo-Pagination__page--active"
+  "pk-pagination-pulse": "pk-pagination-pulse",
+  "prokodo-Pagination__page--active": "prokodo-Pagination__page--active",
+  "prokodo-Pagination__item": "prokodo-Pagination__item",
+  "prokodo-Pagination--color-primary": "prokodo-Pagination--color-primary",
+  "prokodo-Pagination--color-secondary": "prokodo-Pagination--color-secondary",
+  "prokodo-Pagination--color-success": "prokodo-Pagination--color-success",
+  "prokodo-Pagination--color-error": "prokodo-Pagination--color-error",
+  "prokodo-Pagination--color-warning": "prokodo-Pagination--color-warning",
+  "prokodo-Pagination--color-info": "prokodo-Pagination--color-info",
+  "prokodo-Pagination__list": "prokodo-Pagination__list",
+  "prokodo-Pagination__ellipsis": "prokodo-Pagination__ellipsis"
 };
 export {
   styles as default

package/dist/components/pagination/Pagination.view.js

@@ -12,6 +12,7 @@ function PaginationView({
   totalPages,
   disabled,
   isPending,
+  color,
   siblingCount = 1,
   boundaryCount = 1,
   onPrev,
@@ -33,14 +34,23 @@ function PaginationView({
   return /* @__PURE__ */ jsxs(
     "nav",
     {
+      "aria-busy": isPending || void 0,
       "aria-label": (t == null ? void 0 : t.pagination) ?? "Pagination",
-      className: bem(void 0, void 0, className),
+      className: bem(
+        void 0,
+        {
+          "is-pending": Boolean(isPending),
+          [`color-${color}`]: Boolean(color)
+        },
+        className
+      ),
       children: [
         /* @__PURE__ */ jsx(
           Button,
           {
             "aria-label": (t == null ? void 0 : t.prev) ?? "Previous page",
             className: bem("btn"),
+            color,
             disabled: isDisabled || safePage <= 1,
             iconProps: { name: "ArrowLeft01Icon" },
             variant: "outlined",
@@ -67,10 +77,13 @@ function PaginationView({
             {
               "aria-current": isActive ? "page" : void 0,
               className: bem("page", { active: isActive }),
+              color,
               disabled: isDisabled || isActive,
               title: (_a = it.value) == null ? void 0 : _a.toString(),
               variant: isActive ? "outlined" : "text",
-              "aria-label": isActive ? ((_b = t == null ? void 0 : t.pageCurrent) == null ? void 0 : _b.replace("{page}", String(it.value))) ?? `Current page ${it.value}` : ((_c = t == null ? void 0 : t.pageGoTo) == null ? void 0 : _c.replace("{page}", String(it.value))) ?? `Go to page ${it.value}`,
+              "aria-label": isActive ? ((_b = t == null ? void 0 : t.pageCurrent) == null ? void 0 : _b.replace("{page}", String(it.value))) ?? /* istanbul ignore next */
+              `Current page ${it.value}` : ((_c = t == null ? void 0 : t.pageGoTo) == null ? void 0 : _c.replace("{page}", String(it.value))) ?? /* istanbul ignore next */
+              `Go to page ${it.value}`,
               onClick: isDisabled ? void 0 : () => onPageChange == null ? void 0 : onPageChange(it.value)
             }
           ) }, it.value);
@@ -80,6 +93,7 @@ function PaginationView({
           {
             "aria-label": (t == null ? void 0 : t.next) ?? "Next page",
             className: bem("btn"),
+            color,
             disabled: isDisabled || safePage >= safeTotal,
             iconProps: { name: "ArrowRight01Icon" },
             variant: "outlined",

package/dist/components/post-item/PostItem.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -129,27 +128,29 @@
   /* Mobile: stacked, image on top via order */
   display: flex;
   flex-direction: column-reverse;
-  gap: 1rem;
+  gap: var(--pk-space-lg);
   align-items: stretch;
 }
 @media screen and (min-width: 960px) {
   .prokodo-PostItem__grid {
     flex-direction: row;
     align-items: flex-start;
-    gap: 1.5rem;
+    gap: var(--pk-space-xl);
   }
 }
 .prokodo-PostItem__media {
   order: 1;
   width: 100%;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 @media screen and (min-width: 960px) {
   .prokodo-PostItem__media {
     order: 0;
     flex: 0 1 33.3333%;
     max-width: 33.333%;
-    min-width: 0; /* prevent overflow pushing layout */
+    min-width: 0;
   }
 }
 .prokodo-PostItem__main {
@@ -179,7 +180,7 @@
   align-items: center;
 }
 .prokodo-PostItem__date {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -201,8 +202,8 @@
   }
 }
 .prokodo-PostItem__read__count {
-  padding-left: 0.75rem;
-  color: var(--color-grey-300);
+  padding-left: var(--pk-space-md);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -226,8 +227,8 @@
 .prokodo-PostItem__content {
   display: flex;
   align-items: center;
-  min-width: 0; /* ← prevent long lines from forcing column wider */
-  overflow-wrap: anywhere; /* ← allow breaking long words/URLs */
+  min-width: 0;
+  overflow-wrap: anywhere;
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -249,17 +250,16 @@
   }
 }
 .prokodo-PostItem__content__paragraph {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 .prokodo-PostItem__content__paragraph > p {
-  margin: 0.5rem 0.25rem;
+  margin: var(--pk-space-sm) var(--pk-space-xs);
 }
 .prokodo-PostItem__image {
-  min-height: 300px;
   min-height: 300px;
   -o-object-fit: cover;
      object-fit: cover;
@@ -268,16 +268,16 @@
   padding: 0;
 }
 .prokodo-PostItem__image__wrapper {
+  flex: 1 1;
   width: 100%;
-  min-width: 300px;
   min-height: 300px;
-  border-radius: 25px;
+  border-radius: var(--pk-radius-lg);
   overflow: hidden;
-  transform: none; /* prevent overlay */
+  transform: none;
 }
 .prokodo-PostItem__button {
   width: 100%;
-  margin-top: 1rem;
+  margin-top: var(--pk-space-lg);
 }
 .prokodo-PostItem__button__content {
   justify-content: flex-start;

package/dist/components/post-item/PostItem.js

@@ -5,7 +5,10 @@ import PostItemServer from "./PostItem.server.js";
 const PostItem = createIsland({
   name: "PostItem",
   Server: PostItemServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./PostItem.lazy.js"), "loadLazy")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./PostItem.lazy.js"), "loadLazy")
+  )
 });
 export {
   PostItem

package/dist/components/post-item/PostItem.module.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -129,27 +128,29 @@
   /* Mobile: stacked, image on top via order */
   display: flex;
   flex-direction: column-reverse;
-  gap: 1rem;
+  gap: var(--pk-space-lg);
   align-items: stretch;
 }
 @media screen and (min-width: 960px) {
   .prokodo-PostItem__grid {
     flex-direction: row;
     align-items: flex-start;
-    gap: 1.5rem;
+    gap: var(--pk-space-xl);
   }
 }
 .prokodo-PostItem__media {
   order: 1;
   width: 100%;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 @media screen and (min-width: 960px) {
   .prokodo-PostItem__media {
     order: 0;
     flex: 0 1 33.3333%;
     max-width: 33.333%;
-    min-width: 0; /* prevent overflow pushing layout */
+    min-width: 0;
   }
 }
 .prokodo-PostItem__main {
@@ -179,7 +180,7 @@
   align-items: center;
 }
 .prokodo-PostItem__date {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -201,8 +202,8 @@
   }
 }
 .prokodo-PostItem__read__count {
-  padding-left: 0.75rem;
-  color: var(--color-grey-300);
+  padding-left: var(--pk-space-md);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -226,8 +227,8 @@
 .prokodo-PostItem__content {
   display: flex;
   align-items: center;
-  min-width: 0; /* ← prevent long lines from forcing column wider */
-  overflow-wrap: anywhere; /* ← allow breaking long words/URLs */
+  min-width: 0;
+  overflow-wrap: anywhere;
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -249,17 +250,16 @@
   }
 }
 .prokodo-PostItem__content__paragraph {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 .prokodo-PostItem__content__paragraph > p {
-  margin: 0.5rem 0.25rem;
+  margin: var(--pk-space-sm) var(--pk-space-xs);
 }
 .prokodo-PostItem__image {
-  min-height: 300px;
   min-height: 300px;
   -o-object-fit: cover;
      object-fit: cover;
@@ -268,16 +268,16 @@
   padding: 0;
 }
 .prokodo-PostItem__image__wrapper {
+  flex: 1 1;
   width: 100%;
-  min-width: 300px;
   min-height: 300px;
-  border-radius: 25px;
+  border-radius: var(--pk-radius-lg);
   overflow: hidden;
-  transform: none; /* prevent overlay */
+  transform: none;
 }
 .prokodo-PostItem__button {
   width: 100%;
-  margin-top: 1rem;
+  margin-top: var(--pk-space-lg);
 }
 .prokodo-PostItem__button__content {
   justify-content: flex-start;