@prokodo/ui 0.1.15 → 1.0.0

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,6 +77,7 @@ 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",
@@ -82,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.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;

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

@@ -13,7 +13,7 @@ import { RichText } from "../rich-text/RichText.js";
 import { Card } from "../card/Card.js";
 const bem = create(styles, "PostItem");
 function PostItemView(props) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const {
     locale,
     className,
@@ -33,13 +33,14 @@ function PostItemView(props) {
     // public opts
     structuredData = true,
     animate = true,
+    color,
     ...rest
   } = props;
   const cardMerged = {
     ...componentsProps == null ? void 0 : componentsProps.card,
     ...rest,
-    // keep variant narrow; if none is provided, let Card default handle it
-    variant: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.variant) ?? (rest == null ? void 0 : rest.variant) ?? void 0
+    // keep color narrow; if none is provided, let Card default handle it
+    color: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.color) ?? (rest == null ? void 0 : rest.color) ?? color ?? void 0
   };
   const ArticleWrapper = animate ? Animated : ({
     children,
@@ -82,6 +83,10 @@ function PostItemView(props) {
                           classes == null ? void 0 : classes.headline
                         ].filter(Boolean).join(" ")
                       ),
+                      color: (title == null ? void 0 : title.color) ?? ((_e = componentsProps == null ? void 0 : componentsProps.headline) == null ? void 0 : _e.color) ?? (color && color !== "white" ? color : (
+                        /* istanbul ignore next */
+                        void 0
+                      )) ?? "inherit",
                       children: title.content
                     }
                   ),
@@ -172,16 +177,20 @@ function PostItemView(props) {
                       void 0,
                       [
                         button == null ? void 0 : button.className,
-                        (_e = componentsProps == null ? void 0 : componentsProps.button) == null ? void 0 : _e.className,
+                        (_f = componentsProps == null ? void 0 : componentsProps.button) == null ? void 0 : _f.className,
                         classes == null ? void 0 : classes.button
                       ].filter(Boolean).join(" ")
                     ),
+                    color: (button == null ? void 0 : button.color) ?? ((_g = componentsProps == null ? void 0 : componentsProps.button) == null ? void 0 : _g.color) ?? (color && color !== "white" ? color : (
+                      /* istanbul ignore next */
+                      void 0
+                    )),
                     contentClassName: bem(
                       "button__content",
                       void 0,
                       [button == null ? void 0 : button.contentClassName, classes == null ? void 0 : classes.buttonContent].filter(Boolean).join(" ")
                     ),
-                    variant: (button == null ? void 0 : button.variant) ?? ((_f = componentsProps == null ? void 0 : componentsProps.button) == null ? void 0 : _f.variant) ?? "outlined"
+                    variant: (button == null ? void 0 : button.variant) ?? ((_h = componentsProps == null ? void 0 : componentsProps.button) == null ? void 0 : _h.variant) ?? "outlined"
                   }
                 )
               ]

package/dist/components/post-teaser/PostTeaser.css

@@ -135,20 +135,20 @@
   overflow: hidden;
 }
 .prokodo-PostTeaser__card__content {
-  padding: 0 1rem 0;
+  padding: 0 var(--pk-space-lg) 0;
 }
 .prokodo-PostTeaser__card__footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: auto;
-  padding: 1rem;
+  padding: var(--pk-space-lg);
 }
 .prokodo-PostTeaser__meta {
   position: absolute;
-  top: 1rem;
-  left: 1rem;
-  width: calc(100% - 2rem);
+  top: var(--pk-space-lg);
+  left: var(--pk-space-lg);
+  width: calc(100% - 2 * var(--pk-space-lg));
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -167,7 +167,7 @@
 }
 .prokodo-PostTeaser__meta__readcount__wrapper {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
 }
 .prokodo-PostTeaser__image {
   display: block;
@@ -189,14 +189,14 @@
   height: 100%;
 }
 .prokodo-PostTeaser__image__caption {
-  bottom: 0.5rem;
+  bottom: var(--pk-space-sm);
   text-align: right;
-  padding-right: 0.5rem;
-  width: calc(100% - 0.5rem);
+  padding-right: var(--pk-space-sm);
+  width: calc(100% - var(--pk-space-sm));
 }
 .prokodo-PostTeaser__date {
   padding: 0;
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -212,7 +212,7 @@
   height: 230px;
 }
 .prokodo-PostTeaser__headline {
-  padding: 1rem 1rem 0;
+  padding: var(--pk-space-lg) var(--pk-space-lg) 0;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
@@ -250,8 +250,8 @@
   align-items: center;
 }
 .prokodo-PostTeaser__link__icon {
-  margin-right: 0.25rem;
+  margin-right: var(--pk-space-xs);
 }
 .prokodo-PostTeaser__link--is-hovered {
-  color: var(--color-primary-500) !important;
+  color: var(--pk-color-brand) !important;
 }

package/dist/components/post-teaser/PostTeaser.module.css

@@ -135,20 +135,20 @@
   overflow: hidden;
 }
 .prokodo-PostTeaser__card__content {
-  padding: 0 1rem 0;
+  padding: 0 var(--pk-space-lg) 0;
 }
 .prokodo-PostTeaser__card__footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: auto;
-  padding: 1rem;
+  padding: var(--pk-space-lg);
 }
 .prokodo-PostTeaser__meta {
   position: absolute;
-  top: 1rem;
-  left: 1rem;
-  width: calc(100% - 2rem);
+  top: var(--pk-space-lg);
+  left: var(--pk-space-lg);
+  width: calc(100% - 2 * var(--pk-space-lg));
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -167,7 +167,7 @@
 }
 .prokodo-PostTeaser__meta__readcount__wrapper {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
 }
 .prokodo-PostTeaser__image {
   display: block;
@@ -189,14 +189,14 @@
   height: 100%;
 }
 .prokodo-PostTeaser__image__caption {
-  bottom: 0.5rem;
+  bottom: var(--pk-space-sm);
   text-align: right;
-  padding-right: 0.5rem;
-  width: calc(100% - 0.5rem);
+  padding-right: var(--pk-space-sm);
+  width: calc(100% - var(--pk-space-sm));
 }
 .prokodo-PostTeaser__date {
   padding: 0;
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -212,7 +212,7 @@
   height: 230px;
 }
 .prokodo-PostTeaser__headline {
-  padding: 1rem 1rem 0;
+  padding: var(--pk-space-lg) var(--pk-space-lg) 0;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
@@ -250,8 +250,8 @@
   align-items: center;
 }
 .prokodo-PostTeaser__link__icon {
-  margin-right: 0.25rem;
+  margin-right: var(--pk-space-xs);
 }
 .prokodo-PostTeaser__link--is-hovered {
-  color: var(--color-primary-500) !important;
+  color: var(--pk-color-brand) !important;
 }

package/dist/components/post-teaser/PostTeaser.view.js

@@ -30,6 +30,7 @@ function PostTeaserView(props) {
     onClick,
     redirect,
     structuredData = true,
+    color,
     // private
     isHovered,
     readMinutes,
@@ -41,7 +42,7 @@ function PostTeaserView(props) {
   const cardMerged = {
     ...componentsProps == null ? void 0 : componentsProps.card,
     ...cardRest,
-    variant: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.variant) ?? (cardRest == null ? void 0 : cardRest.variant) ?? "white"
+    color: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.color) ?? (cardRest == null ? void 0 : cardRest.color) ?? color ?? "white"
   };
   const baseImg = image;
   const imageMerged = baseImg ? {
@@ -166,7 +167,10 @@ function PostTeaserView(props) {
                       void 0,
                       [title == null ? void 0 : title.className, classes == null ? void 0 : classes.headline].filter(Boolean).join(" ")
                     ),
-                    variant: (title == null ? void 0 : title.variant) ?? ((_b = componentsProps == null ? void 0 : componentsProps.headline) == null ? void 0 : _b.variant) ?? "secondary",
+                    color: (title == null ? void 0 : title.color) ?? ((_b = componentsProps == null ? void 0 : componentsProps.headline) == null ? void 0 : _b.color) ?? (color && color !== "white" ? color : (
+                      /* istanbul ignore next */
+                      void 0
+                    )) ?? "secondary",
                     children: title == null ? void 0 : title.content
                   }
                 )
@@ -204,7 +208,6 @@ function PostTeaserView(props) {
                       /* @__PURE__ */ jsx(
                         Icon,
                         {
-                          color: "primary",
                           name: "ArrowRight01Icon",
                           size: "xs",
                           className: bem(
@@ -212,6 +215,10 @@ function PostTeaserView(props) {
                             { "is-hovered": Boolean(isHovered) },
                             classes == null ? void 0 : classes.linkIcon
                           ),
+                          color: (color && color !== "white" ? color : (
+                            /* istanbul ignore next */
+                            void 0
+                          )) ?? "primary",
                           ...componentsProps == null ? void 0 : componentsProps.linkIcon,
                           ...redirect == null ? void 0 : redirect.icon
                         }

package/dist/components/post-widget/PostWidget.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -133,18 +132,18 @@
 .prokodo-PostWidget__list--has-fullWidth {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: var(--pk-space-lg);
 }
 .prokodo-PostWidget__list__item {
   display: block;
-  margin-top: 1rem;
+  margin-top: var(--pk-space-lg);
 }
 .prokodo-PostWidget__list__item--has-fullWidth {
   width: 100%;
 }
 @media screen and (min-width: 480px) {
   .prokodo-PostWidget__list__item--has-fullWidth {
-    width: calc(50% - 0.5rem);
+    width: calc(50% - var(--pk-space-lg) / 2);
   }
 }
 .prokodo-PostWidget__list__item__content {
@@ -156,16 +155,15 @@
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-  /* This is the Image component’s container to force fill */
 }
 .prokodo-PostWidget__image__link {
   position: relative;
   display: block;
   width: 80px;
   height: 80px;
-  margin-right: 1rem;
+  margin-right: var(--pk-space-lg);
   line-height: 0;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
   overflow: hidden;
 }
 .prokodo-PostWidget__image__container {
@@ -189,7 +187,7 @@
 .prokodo-PostWidget__date {
   display: block;
   margin: 0;
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/components/post-widget/PostWidget.module.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -133,18 +132,18 @@
 .prokodo-PostWidget__list--has-fullWidth {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: var(--pk-space-lg);
 }
 .prokodo-PostWidget__list__item {
   display: block;
-  margin-top: 1rem;
+  margin-top: var(--pk-space-lg);
 }
 .prokodo-PostWidget__list__item--has-fullWidth {
   width: 100%;
 }
 @media screen and (min-width: 480px) {
   .prokodo-PostWidget__list__item--has-fullWidth {
-    width: calc(50% - 0.5rem);
+    width: calc(50% - var(--pk-space-lg) / 2);
   }
 }
 .prokodo-PostWidget__list__item__content {
@@ -156,16 +155,15 @@
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-  /* This is the Image component’s container to force fill */
 }
 .prokodo-PostWidget__image__link {
   position: relative;
   display: block;
   width: 80px;
   height: 80px;
-  margin-right: 1rem;
+  margin-right: var(--pk-space-lg);
   line-height: 0;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
   overflow: hidden;
 }
 .prokodo-PostWidget__image__container {
@@ -189,7 +187,7 @@
 .prokodo-PostWidget__date {
   display: block;
   margin: 0;
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/components/post-widget/PostWidget.view.js

@@ -22,6 +22,7 @@ function PostWidgetView({
   classes,
   componentsProps,
   structuredData = true,
+  color,
   ...rest
 }) {
   var _a, _b;
@@ -30,7 +31,7 @@ function PostWidgetView({
     enableShadow: true,
     ...componentsProps == null ? void 0 : componentsProps.card,
     ...rest,
-    variant: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.variant) ?? (rest == null ? void 0 : rest.variant) ?? void 0
+    color: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.color) ?? (rest == null ? void 0 : rest.color) ?? color ?? void 0
   };
   return /* @__PURE__ */ jsxs(
     "section",
@@ -58,16 +59,19 @@ function PostWidgetView({
                 Headline,
                 {
                   highlight: true,
-                  size: "md",
-                  type: "h2",
                   ...{ ...title, ...(componentsProps == null ? void 0 : componentsProps.title) ?? {} },
                   itemProp: "headline",
+                  size: "md",
+                  type: "h2",
                   className: bem(
                     "title",
                     void 0,
                     [title == null ? void 0 : title.className, classes == null ? void 0 : classes.title].filter(Boolean).join(" ")
                   ),
-                  variant: (title == null ? void 0 : title.variant) ?? ((_b = componentsProps == null ? void 0 : componentsProps.title) == null ? void 0 : _b.variant) ?? "secondary",
+                  color: (title == null ? void 0 : title.color) ?? ((_b = componentsProps == null ? void 0 : componentsProps.title) == null ? void 0 : _b.color) ?? (color && color !== "white" ? color : (
+                    /* istanbul ignore next */
+                    void 0
+                  )) ?? "inherit",
                   children: title == null ? void 0 : title.content
                 }
               ),
@@ -118,7 +122,10 @@ function PostWidgetView({
                     const headlineMerged = {
                       size: "sm",
                       type: "h3",
-                      variant: "inherit",
+                      color: (color && color !== "white" ? color : (
+                        /* istanbul ignore next */
+                        void 0
+                      )) ?? "inherit",
                       ...item.title ?? /* istanbul ignore next */
                       {},
                       ...(componentsProps == null ? void 0 : componentsProps.title) ?? {},