@prokodo/ui 0.1.15 → 1.0.1

package/dist/components/post-widget-carousel/PostWidgetCarousel.css

@@ -129,10 +129,10 @@
 }
 .prokodo-PostWidgetCarousel__carousel {
   position: relative;
-  margin-top: 1.5rem;
+  margin-top: var(--pk-space-xl);
 }
 .prokodo-PostWidgetCarousel__carousel__wrapper {
-  padding-bottom: 1rem;
+  padding-bottom: var(--pk-space-lg);
 }
 .prokodo-PostWidgetCarousel__carousel__item__image__link {
   position: relative;
@@ -140,7 +140,7 @@
   height: clamp(180px, 30vw, 420px);
   display: block;
   line-height: 0;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
   overflow: hidden;
 }
 .prokodo-PostWidgetCarousel__carousel__item__image {
@@ -164,16 +164,16 @@
 }
 .prokodo-PostWidgetCarousel__carousel__buttons {
   position: absolute;
-  bottom: 0.75rem;
-  right: 0.5rem;
+  bottom: var(--pk-space-md);
+  right: var(--pk-space-sm);
   display: flex;
   flex-direction: row;
   max-width: 100px;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
   z-index: 2;
 }
 .prokodo-PostWidgetCarousel__headline {
-  margin-top: 0.75rem !important;
+  margin-top: var(--pk-space-md) !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

package/dist/components/post-widget-carousel/PostWidgetCarousel.module.css

@@ -129,10 +129,10 @@
 }
 .prokodo-PostWidgetCarousel__carousel {
   position: relative;
-  margin-top: 1.5rem;
+  margin-top: var(--pk-space-xl);
 }
 .prokodo-PostWidgetCarousel__carousel__wrapper {
-  padding-bottom: 1rem;
+  padding-bottom: var(--pk-space-lg);
 }
 .prokodo-PostWidgetCarousel__carousel__item__image__link {
   position: relative;
@@ -140,7 +140,7 @@
   height: clamp(180px, 30vw, 420px);
   display: block;
   line-height: 0;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
   overflow: hidden;
 }
 .prokodo-PostWidgetCarousel__carousel__item__image {
@@ -164,16 +164,16 @@
 }
 .prokodo-PostWidgetCarousel__carousel__buttons {
   position: absolute;
-  bottom: 0.75rem;
-  right: 0.5rem;
+  bottom: var(--pk-space-md);
+  right: var(--pk-space-sm);
   display: flex;
   flex-direction: row;
   max-width: 100px;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
   z-index: 2;
 }
 .prokodo-PostWidgetCarousel__headline {
-  margin-top: 0.75rem !important;
+  margin-top: var(--pk-space-md) !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

package/dist/components/post-widget-carousel/PostWidgetCarousel.view.js

@@ -11,7 +11,7 @@ import { Link } from "../link/Link.js";
 import { Image } from "../image/Image.js";
 const bem = create(styles, "PostWidgetCarousel");
 function PostWidgetCarouselView(props) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const {
     autoplay = 5e3,
     className,
@@ -20,6 +20,7 @@ function PostWidgetCarouselView(props) {
     classes,
     componentsProps,
     structuredData = true,
+    color,
     ...rest
   } = props;
   const cardMerged = {
@@ -27,7 +28,7 @@ function PostWidgetCarouselView(props) {
     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) ?? "white"
+    color: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.color) ?? (rest == null ? void 0 : rest.color) ?? color ?? "white"
   };
   return /* @__PURE__ */ jsxs(
     "section",
@@ -51,16 +52,19 @@ function PostWidgetCarouselView(props) {
                 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
                 }
               ),
@@ -99,20 +103,30 @@ function PostWidgetCarouselView(props) {
                   ),
                   nextButton: {
                     variant: "contained",
-                    color: "primary",
+                    color: (color && color !== "white" ? color : (
+                      /* istanbul ignore next */
+                      void 0
+                    )) ?? "primary",
+                    ...componentsProps == null ? void 0 : componentsProps.nextButton,
                     iconProps: {
-                      size: "sm"
+                      size: "sm",
+                      ...(_c = componentsProps == null ? void 0 : componentsProps.nextButton) == null ? void 0 : _c.iconProps
                     }
                   },
                   prevButton: {
                     variant: "contained",
-                    color: "primary",
+                    color: (color && color !== "white" ? color : (
+                      /* istanbul ignore next */
+                      void 0
+                    )) ?? "primary",
+                    ...componentsProps == null ? void 0 : componentsProps.prevButton,
                     iconProps: {
-                      size: "sm"
+                      size: "sm",
+                      ...(_d = componentsProps == null ? void 0 : componentsProps.prevButton) == null ? void 0 : _d.iconProps
                     }
                   },
                   children: items.map((item, idx) => {
-                    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+                    var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
                     const key = `carousel-item-${((_a2 = item.title) == null ? void 0 : _a2.content) ?? /* istanbul ignore next */
                     idx}`;
                     const imgBase = item.image;
@@ -126,11 +140,11 @@ function PostWidgetCarouselView(props) {
                         [
                           imgBase.className,
                           classes == null ? void 0 : classes.carouselItemImage,
-                          (_c = item.classes) == null ? void 0 : _c.image
+                          (_c2 = item.classes) == null ? void 0 : _c2.image
                         ].filter(Boolean).join(" ")
                       ),
                       containerClassName: bem("carousel__item__image__container"),
-                      decoding: ((_e = (_d = item.componentsProps) == null ? void 0 : _d.image) == null ? void 0 : _e.decoding) ?? ((_f = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _f.decoding) ?? imgBase.decoding ?? "async",
+                      decoding: ((_e = (_d2 = item.componentsProps) == null ? void 0 : _d2.image) == null ? void 0 : _e.decoding) ?? ((_f = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _f.decoding) ?? imgBase.decoding ?? "async",
                       loading: ((_h = (_g = item.componentsProps) == null ? void 0 : _g.image) == null ? void 0 : _h.loading) ?? ((_i = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _i.loading) ?? imgBase.loading ?? "lazy",
                       sizes: ((_k = (_j = item.componentsProps) == null ? void 0 : _j.image) == null ? void 0 : _k.sizes) ?? ((_l = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _l.sizes) ?? imgBase.sizes ?? "(max-width: 960px) 100vw, 100vw"
                     } : void 0;
@@ -194,7 +208,10 @@ function PostWidgetCarouselView(props) {
                                   (_t = item.classes) == null ? void 0 : _t.headline
                                 ].filter(Boolean).join(" ")
                               ),
-                              variant: ((_u = item.title) == null ? void 0 : _u.variant) ?? ((_v = componentsProps == null ? void 0 : componentsProps.title) == null ? void 0 : _v.variant) ?? "inherit",
+                              color: ((_u = item.title) == null ? void 0 : _u.color) ?? ((_v = componentsProps == null ? void 0 : componentsProps.title) == null ? void 0 : _v.color) ?? (color && color !== "white" ? color : (
+                                /* istanbul ignore next */
+                                void 0
+                              )) ?? "inherit",
                               children: (_w = item.title) == null ? void 0 : _w.content
                             }
                           )

package/dist/components/progressBar/ProgressBar.css

@@ -147,11 +147,11 @@
 }
 .prokodo-ProgressBar__track {
   width: 100%;
-  height: 1rem;
-  border-radius: 0.75rem;
-  background-color: var(--color-grey-100);
+  height: var(--pk-progressbar-height, 1rem);
+  border-radius: var(--pk-progressbar-radius, 0.75rem);
+  background-color: var(--pk-progressbar-track-bg);
   overflow: hidden;
-  box-shadow: var(--elevation-2);
+  box-shadow: var(--pk-progressbar-shadow);
 }
 .prokodo-ProgressBar__bar {
   height: 100%;

package/dist/components/progressBar/ProgressBar.module.css

@@ -147,11 +147,11 @@
 }
 .prokodo-ProgressBar__track {
   width: 100%;
-  height: 1rem;
-  border-radius: 0.75rem;
-  background-color: var(--color-grey-100);
+  height: var(--pk-progressbar-height, 1rem);
+  border-radius: var(--pk-progressbar-radius, 0.75rem);
+  background-color: var(--pk-progressbar-track-bg);
   overflow: hidden;
-  box-shadow: var(--elevation-2);
+  box-shadow: var(--pk-progressbar-shadow);
 }
 .prokodo-ProgressBar__bar {
   height: 100%;

package/dist/components/progressBar/ProgressBar.view.js

@@ -11,7 +11,7 @@ function ProgressBarView({
   label,
   hideLabel,
   infinity,
-  variant = "primary",
+  color = "primary",
   animated = true,
   className,
   ...domRest
@@ -39,7 +39,7 @@ function ProgressBarView({
             {
               style: !isIndeterminate ? { width: `${safeValue}%` } : void 0,
               className: bem("bar", {
-                [`${variant}`]: true,
+                [`${color}`]: true,
                 indeterminate: isIndeterminate,
                 infinity: Boolean(infinity),
                 "indeterminate--infinity": isIndeterminate && Boolean(infinity)

package/dist/components/quote/Quote.css

@@ -127,14 +127,29 @@
 .prokodo-Quote {
   margin: 0;
 }
+.prokodo-Quote--secondary {
+  --gradient-border-4: var(--gradient-border-6);
+}
+.prokodo-Quote--success {
+  --gradient-border-4: var(--gradient-border-success);
+}
+.prokodo-Quote--warning {
+  --gradient-border-4: var(--gradient-border-warning);
+}
+.prokodo-Quote--error {
+  --gradient-border-4: var(--gradient-border-error);
+}
+.prokodo-Quote--info {
+  --gradient-border-4: var(--gradient-border-info);
+}
 .prokodo-Quote__headline {
-  padding-bottom: 1rem;
+  padding-bottom: var(--pk-space-lg);
 }
 .prokodo-Quote__quote {
   margin: 0;
 }
 .prokodo-Quote__quote__content {
-  margin: 0 0 1rem 0;
+  margin: 0 0 var(--pk-space-lg) 0;
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -159,14 +174,14 @@
   display: flex;
 }
 .prokodo-Quote__caption__avatar {
-  margin-right: 1rem;
+  margin-right: var(--pk-space-lg);
 }
 .prokodo-Quote__caption__author {
   display: flex;
   flex-direction: column;
 }
 .prokodo-Quote__caption__author__name {
-  color: var(--color-grey-900);
+  color: var(--pk-color-fg);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -178,8 +193,8 @@
   text-decoration: none;
 }
 .prokodo-Quote__caption__author__position {
-  padding-top: 0.25rem;
-  color: var(--color-grey-500);
+  padding-top: var(--pk-space-xs);
+  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;

package/dist/components/quote/Quote.js

@@ -11,7 +11,7 @@ import { Avatar } from "../avatar/Avatar.js";
 const bem = create(styles, "Quote");
 const Quote = /* @__PURE__ */ __name(({
   className,
-  variant = "primary",
+  color = "primary",
   title,
   subTitle,
   content,
@@ -20,7 +20,7 @@ const Quote = /* @__PURE__ */ __name(({
   "figure",
   {
     itemScope: true,
-    className: bem(void 0, void 0, className),
+    className: bem(void 0, { [color]: true }, className),
     itemType: "https://schema.org/Quotation",
     children: [
       subTitle && /* @__PURE__ */ jsx(
@@ -31,7 +31,7 @@ const Quote = /* @__PURE__ */ __name(({
           size: "sm",
           type: "h3",
           ...subTitle,
-          variant: subTitle.variant ?? variant,
+          color: subTitle.color ?? color,
           children: subTitle == null ? void 0 : subTitle.content
         }
       ),
@@ -51,9 +51,9 @@ const Quote = /* @__PURE__ */ __name(({
           animated: true,
           highlight: true,
           className: bem("card__container"),
+          color: "white",
           contentClassName: bem("card"),
           customAnimation: "left-right",
-          variant: "white",
           children: [
             /* @__PURE__ */ jsx("blockquote", { className: bem("quote"), children: /* @__PURE__ */ jsx(RichText, { className: bem("quote__content"), itemProp: "text", children: content }) }),
             author && /* @__PURE__ */ jsx("figcaption", { children: /* @__PURE__ */ jsxs(
@@ -68,7 +68,7 @@ const Quote = /* @__PURE__ */ __name(({
                     {
                       className: bem("caption__avatar"),
                       ...author.avatar,
-                      variant
+                      color
                     }
                   ),
                   /* @__PURE__ */ jsxs("div", { className: bem("caption__author"), children: [

package/dist/components/quote/Quote.module.css

@@ -127,14 +127,29 @@
 .prokodo-Quote {
   margin: 0;
 }
+.prokodo-Quote--secondary {
+  --gradient-border-4: var(--gradient-border-6);
+}
+.prokodo-Quote--success {
+  --gradient-border-4: var(--gradient-border-success);
+}
+.prokodo-Quote--warning {
+  --gradient-border-4: var(--gradient-border-warning);
+}
+.prokodo-Quote--error {
+  --gradient-border-4: var(--gradient-border-error);
+}
+.prokodo-Quote--info {
+  --gradient-border-4: var(--gradient-border-info);
+}
 .prokodo-Quote__headline {
-  padding-bottom: 1rem;
+  padding-bottom: var(--pk-space-lg);
 }
 .prokodo-Quote__quote {
   margin: 0;
 }
 .prokodo-Quote__quote__content {
-  margin: 0 0 1rem 0;
+  margin: 0 0 var(--pk-space-lg) 0;
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -159,14 +174,14 @@
   display: flex;
 }
 .prokodo-Quote__caption__avatar {
-  margin-right: 1rem;
+  margin-right: var(--pk-space-lg);
 }
 .prokodo-Quote__caption__author {
   display: flex;
   flex-direction: column;
 }
 .prokodo-Quote__caption__author__name {
-  color: var(--color-grey-900);
+  color: var(--pk-color-fg);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -178,8 +193,8 @@
   text-decoration: none;
 }
 .prokodo-Quote__caption__author__position {
-  padding-top: 0.25rem;
-  color: var(--color-grey-500);
+  padding-top: var(--pk-space-xs);
+  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;

package/dist/components/quote/Quote.module.scss.js

@@ -1,5 +1,10 @@
 const styles = {
   "prokodo-Quote": "prokodo-Quote",
+  "prokodo-Quote--secondary": "prokodo-Quote--secondary",
+  "prokodo-Quote--success": "prokodo-Quote--success",
+  "prokodo-Quote--warning": "prokodo-Quote--warning",
+  "prokodo-Quote--error": "prokodo-Quote--error",
+  "prokodo-Quote--info": "prokodo-Quote--info",
   "prokodo-Quote__headline": "prokodo-Quote__headline",
   "prokodo-Quote__quote": "prokodo-Quote__quote",
   "prokodo-Quote__quote__content": "prokodo-Quote__quote__content",

package/dist/components/rating/Rating.css

@@ -133,20 +133,33 @@
 .prokodo-Rating--full-width {
   width: 100%;
 }
+.prokodo-Rating--primary {
+  --pk-rating-icon-fg-filled: var(--pk-color-brand);
+}
+.prokodo-Rating--secondary {
+  --pk-rating-icon-fg-filled: var(--pk-color-accent);
+}
+.prokodo-Rating--success {
+  --pk-rating-icon-fg-filled: var(--pk-color-success);
+}
+.prokodo-Rating--warning {
+  --pk-rating-icon-fg-filled: var(--pk-color-warning);
+}
+.prokodo-Rating--error {
+  --pk-rating-icon-fg-filled: var(--pk-color-error);
+}
+.prokodo-Rating--info, .prokodo-Rating--inherit, .prokodo-Rating--white {
+  --pk-rating-icon-fg-filled: var(--pk-color-muted);
+}
 .prokodo-Rating__inner {
   position: relative;
 }
 .prokodo-Rating__label {
-  padding-bottom: 0.5rem;
-  color: var(--color-grey-600);
+  padding-bottom: var(--pk-rating-label-pb);
+  color: var(--pk-color-muted);
   z-index: 1;
   pointer-events: none;
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Rating__label {
-    font-size: 1.125rem;
-    padding: 0;
-  }
+  font-size: 1.125rem;
 }
 .prokodo-Rating__field {
   position: relative;
@@ -154,8 +167,8 @@
 .prokodo-Rating__group {
   display: flex;
   align-items: center;
-  gap: 1rem;
-  padding: 0.75rem 0;
+  gap: var(--pk-rating-gap);
+  padding: var(--pk-rating-padding-y) 0;
 }
 .prokodo-Rating__icon {
   border: none;
@@ -163,12 +176,12 @@
   padding: 0;
   margin: 0;
   cursor: pointer;
-  font-size: 1.5rem;
+  font-size: var(--pk-rating-icon-size);
   line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-grey-300);
+  color: var(--pk-rating-icon-fg);
   transition: transform 0.1s ease, color 0.15s ease;
 }
 .prokodo-Rating__icon__symbol {
@@ -183,14 +196,14 @@
   text-indent: -99999px;
 }
 .prokodo-Rating__icon--filled {
-  color: var(--color-primary-500);
+  color: var(--pk-rating-icon-fg-filled);
 }
 .prokodo-Rating__icon--selected {
   transform: scale(1.05);
 }
 .prokodo-Rating__icon--disabled {
   cursor: not-allowed;
-  color: var(--color-grey-200);
+  color: var(--pk-rating-icon-fg-disabled);
 }
 .prokodo-Rating__icon--readonly {
   cursor: default;
@@ -199,7 +212,7 @@
   transform: scale(1.05);
 }
 .prokodo-Rating__icon:focus-visible {
-  outline: 2px solid var(--color-primary-500);
+  outline: 2px solid var(--pk-rating-focus-ring);
   outline-offset: 2px;
   border-radius: 999px;
 }
@@ -207,13 +220,13 @@
   width: 100%;
   display: flex;
   justify-content: flex-start;
-  padding-top: 0.5rem;
+  padding-top: var(--pk-rating-footer-pt);
 }
 .prokodo-Rating__helperText {
   width: 100%;
-  padding-top: 0.75rem;
+  padding-top: var(--pk-rating-helper-pt);
   display: flex;
-  color: var(--color-grey-300);
+  color: var(--pk-rating-helper-fg);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -236,12 +249,12 @@
     line-height: 1.4;
   }
 }
-html[data-theme=dark] .prokodo-Rating__helperText {
-  color: var(--color-grey-700);
+[data-theme="dark"] .prokodo-Rating__helperText, .pk-theme-dark .prokodo-Rating__helperText {
+  color: var(--pk-palette-grey-400);
 }
 .prokodo-Rating__helperText__content {
   width: 100%;
 }
 .prokodo-Rating__helperText__content--is-error {
-  color: var(--color-error);
+  color: var(--pk-rating-error-fg);
 }

package/dist/components/rating/Rating.module.css

@@ -133,20 +133,33 @@
 .prokodo-Rating--full-width {
   width: 100%;
 }
+.prokodo-Rating--primary {
+  --pk-rating-icon-fg-filled: var(--pk-color-brand);
+}
+.prokodo-Rating--secondary {
+  --pk-rating-icon-fg-filled: var(--pk-color-accent);
+}
+.prokodo-Rating--success {
+  --pk-rating-icon-fg-filled: var(--pk-color-success);
+}
+.prokodo-Rating--warning {
+  --pk-rating-icon-fg-filled: var(--pk-color-warning);
+}
+.prokodo-Rating--error {
+  --pk-rating-icon-fg-filled: var(--pk-color-error);
+}
+.prokodo-Rating--info, .prokodo-Rating--inherit, .prokodo-Rating--white {
+  --pk-rating-icon-fg-filled: var(--pk-color-muted);
+}
 .prokodo-Rating__inner {
   position: relative;
 }
 .prokodo-Rating__label {
-  padding-bottom: 0.5rem;
-  color: var(--color-grey-600);
+  padding-bottom: var(--pk-rating-label-pb);
+  color: var(--pk-color-muted);
   z-index: 1;
   pointer-events: none;
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Rating__label {
-    font-size: 1.125rem;
-    padding: 0;
-  }
+  font-size: 1.125rem;
 }
 .prokodo-Rating__field {
   position: relative;
@@ -154,8 +167,8 @@
 .prokodo-Rating__group {
   display: flex;
   align-items: center;
-  gap: 1rem;
-  padding: 0.75rem 0;
+  gap: var(--pk-rating-gap);
+  padding: var(--pk-rating-padding-y) 0;
 }
 .prokodo-Rating__icon {
   border: none;
@@ -163,12 +176,12 @@
   padding: 0;
   margin: 0;
   cursor: pointer;
-  font-size: 1.5rem;
+  font-size: var(--pk-rating-icon-size);
   line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-grey-300);
+  color: var(--pk-rating-icon-fg);
   transition: transform 0.1s ease, color 0.15s ease;
 }
 .prokodo-Rating__icon__symbol {
@@ -183,14 +196,14 @@
   text-indent: -99999px;
 }
 .prokodo-Rating__icon--filled {
-  color: var(--color-primary-500);
+  color: var(--pk-rating-icon-fg-filled);
 }
 .prokodo-Rating__icon--selected {
   transform: scale(1.05);
 }
 .prokodo-Rating__icon--disabled {
   cursor: not-allowed;
-  color: var(--color-grey-200);
+  color: var(--pk-rating-icon-fg-disabled);
 }
 .prokodo-Rating__icon--readonly {
   cursor: default;
@@ -199,7 +212,7 @@
   transform: scale(1.05);
 }
 .prokodo-Rating__icon:focus-visible {
-  outline: 2px solid var(--color-primary-500);
+  outline: 2px solid var(--pk-rating-focus-ring);
   outline-offset: 2px;
   border-radius: 999px;
 }
@@ -207,13 +220,13 @@
   width: 100%;
   display: flex;
   justify-content: flex-start;
-  padding-top: 0.5rem;
+  padding-top: var(--pk-rating-footer-pt);
 }
 .prokodo-Rating__helperText {
   width: 100%;
-  padding-top: 0.75rem;
+  padding-top: var(--pk-rating-helper-pt);
   display: flex;
-  color: var(--color-grey-300);
+  color: var(--pk-rating-helper-fg);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -236,12 +249,12 @@
     line-height: 1.4;
   }
 }
-html[data-theme=dark] .prokodo-Rating__helperText {
-  color: var(--color-grey-700);
+[data-theme="dark"] .prokodo-Rating__helperText, .pk-theme-dark .prokodo-Rating__helperText {
+  color: var(--pk-palette-grey-400);
 }
 .prokodo-Rating__helperText__content {
   width: 100%;
 }
 .prokodo-Rating__helperText__content--is-error {
-  color: var(--color-error);
+  color: var(--pk-rating-error-fg);
 }