@prokodo/ui 0.1.14 → 1.0.0

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,21 +103,32 @@ 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;
-                    const key = `carousel-item-${((_a2 = item.title) == null ? void 0 : _a2.content) ?? idx}`;
+                    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;
                     const imgMerged = imgBase ? {
                       ...imgBase,
@@ -125,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;
@@ -193,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.js

@@ -5,8 +5,14 @@ import ProgressBarServer from "./ProgressBar.server.js";
 const ProgressBar = createIsland({
   name: "ProgressBar",
   Server: ProgressBarServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./ProgressBar.lazy.js"), "loadLazy"),
-  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./ProgressBar.lazy.js"), "loadLazy")
+  ),
+  isInteractive: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => true, "isInteractive")
+  )
 });
 export {
   ProgressBar

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,17 +11,20 @@ function ProgressBarView({
   label,
   hideLabel,
   infinity,
-  variant = "primary",
+  color = "primary",
   animated = true,
   className,
   ...domRest
 }) {
   const safeValue = typeof value === "number" ? Math.min(100, Math.max(0, value)) : void 0;
   const isIndeterminate = safeValue === void 0;
+  const { "aria-label": ariaLabelFromRest, ...restWithoutAriaLabel } = domRest;
+  const computedAriaLabel = isString(label) ? label : ariaLabelFromRest;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ...domRest,
+      ...restWithoutAriaLabel,
+      "aria-label": computedAriaLabel,
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": safeValue ?? void 0,
@@ -36,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.client.js

@@ -44,7 +44,12 @@ function RatingClient({
   }, [value]);
   const runValidation = useCallback(
     (newVal) => {
-      const numeric = isNumber(newVal) ? newVal : isString(newVal) ? Number(newVal) : void 0;
+      let numeric;
+      if (isNumber(newVal)) {
+        numeric = newVal;
+      } else {
+        numeric = isString(newVal) ? Number(newVal) : void 0;
+      }
       handleRatingValidation(
         name,
         numeric,

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.js

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

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);
 }

package/dist/components/rating/Rating.module.scss.js

@@ -1,6 +1,14 @@
 const styles = {
   "prokodo-Rating": "prokodo-Rating",
   "prokodo-Rating--full-width": "prokodo-Rating--full-width",
+  "prokodo-Rating--primary": "prokodo-Rating--primary",
+  "prokodo-Rating--secondary": "prokodo-Rating--secondary",
+  "prokodo-Rating--success": "prokodo-Rating--success",
+  "prokodo-Rating--warning": "prokodo-Rating--warning",
+  "prokodo-Rating--error": "prokodo-Rating--error",
+  "prokodo-Rating--info": "prokodo-Rating--info",
+  "prokodo-Rating--inherit": "prokodo-Rating--inherit",
+  "prokodo-Rating--white": "prokodo-Rating--white",
   "prokodo-Rating__inner": "prokodo-Rating__inner",
   "prokodo-Rating__label": "prokodo-Rating__label",
   "prokodo-Rating__field": "prokodo-Rating__field",