@prokodo/ui 0.1.15 → 1.0.1

package/dist/components/calendly/Calendly.module.css

@@ -0,0 +1,132 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-Calendly__widget {
+  display: block;
+  min-width: 320px;
+  height: var(--pk-calendly-height, 700px);
+  width: 100%;
+}

package/dist/components/calendly/Calendly.module.scss.js

@@ -0,0 +1,6 @@
+const styles = {
+  "prokodo-Calendly__widget": "prokodo-Calendly__widget"
+};
+export {
+  styles as default
+};

package/dist/components/calendly/Calendly.view.js

@@ -2,22 +2,28 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Animated } from "../animated/Animated.js";
+import { create } from "../../helpers/bem.js";
+import styles from "./Calendly.module.scss.js";
 import { Loading } from "../loading/Loading.js";
+const bem = create(styles, "Calendly");
 function CalendlyView({
   animationProps,
   hideLoading,
   LoadingComponent = Loading,
   calendlyId: _calendlyId,
+  className,
   ...rest
 }) {
-  const style = {
-    display: "block",
-    minWidth: 320,
-    height: 700
-  };
   return /* @__PURE__ */ jsxs(Animated, { ...animationProps, children: [
     !Boolean(hideLoading) && /* @__PURE__ */ jsx(LoadingComponent, {}),
-    /* @__PURE__ */ jsx("div", { ...rest, "data-calendly": true, style })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        "data-calendly": true,
+        className: bem("widget", void 0, className)
+      }
+    )
   ] });
 }
 __name(CalendlyView, "CalendlyView");

package/dist/components/card/Card.client.js

@@ -20,8 +20,13 @@ function CardClient({
   }, [onClick]);
   const handleKey = useCallback(
     (e) => {
-      if (e.code === "Enter" && typeof onClick === "function" && !Boolean(disabled))
+      const isActivationKey = e.key === "Enter" || e.key === " " || e.key === "Spacebar" || e.code === "Enter" || e.code === "Space";
+      if (isActivationKey && typeof onClick === "function" && !Boolean(disabled)) {
+        if (e.key === " " || e.key === "Spacebar" || e.code === "Space") {
+          e.preventDefault();
+        }
         onClick();
+      }
       onKeyDown == null ? void 0 : onKeyDown(e);
     },
     [onClick, onKeyDown, disabled]

package/dist/components/card/Card.css

@@ -124,9 +124,6 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-/**
-* Fade in
-*/
 @keyframes Card_fadeInAnimation {
   0% {
     opacity: 0;
@@ -142,50 +139,88 @@
 }
 .prokodo-Card {
   position: relative;
-  color: var(--color-grey-900);
-  background-color: var(--color-white);
-  border-radius: 2rem;
-  /* keep the gradient *class hooks*, but DO NOT include animated keyframes here */
-  /* Reveal animation (what used to be &--has-animation + fadeInAnimation) */
+  overflow: hidden;
+  color: var(--pk-card-fg, #111);
+  background-color: var(--pk-card-bg, #fff);
+  border-radius: var(--pk-card-radius);
 }
 .prokodo-Card--inherit {
-  background-color: var(--color-grey-100);
+  background-color: var(--pk-card-inherit-bg);
 }
 .prokodo-Card--white {
-  background-color: var(--color-white);
+  background-color: var(--pk-card-bg);
+}
+.prokodo-Card--primary {
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  background-color: color-mix(in srgb, var(--pk-color-brand) 4%, var(--pk-card-bg));
+}
+.prokodo-Card--secondary {
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+  background-color: color-mix(in srgb, var(--pk-color-accent) 4%, var(--pk-card-bg));
+}
+.prokodo-Card--success {
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+  background-color: color-mix(in srgb, var(--pk-color-success) 4%, var(--pk-card-bg));
+}
+.prokodo-Card--warning {
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+  background-color: color-mix(in srgb, var(--pk-color-warning) 4%, var(--pk-card-bg));
+}
+.prokodo-Card--error {
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+  background-color: color-mix(in srgb, var(--pk-color-error) 4%, var(--pk-card-bg));
+}
+.prokodo-Card--info {
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-color-fg) 20%, transparent);
+  background-color: color-mix(in srgb, var(--pk-color-fg) 4%, var(--pk-card-bg));
 }
-html[data-theme=dark] .prokodo-Card--white {
-  background-color: transparent;
+.prokodo-Card--primary.prokodo-Card--is-clickable {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-brand) 18%, transparent);
+}
+.prokodo-Card--secondary.prokodo-Card--is-clickable {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-accent) 18%, transparent);
+}
+.prokodo-Card--success.prokodo-Card--is-clickable {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-success) 18%, transparent);
+}
+.prokodo-Card--warning.prokodo-Card--is-clickable {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-warning) 18%, transparent);
+}
+.prokodo-Card--error.prokodo-Card--is-clickable {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-error) 18%, transparent);
+}
+.prokodo-Card--info.prokodo-Card--is-clickable {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-fg) 10%, transparent);
 }
 .prokodo-Card--panel {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  /* in light mode trotzdem lesbar */
+  background: var(--pk-card-panel-bg);
+  border: var(--pk-border-width) solid var(--pk-card-panel-border);
 }
-html:not([data-theme=dark]) .prokodo-Card--panel {
-  background: var(--color-white);
-  border: 1px solid rgba(0, 0, 0, 0.08);
+.prokodo-Card--panel:not([data-theme=dark] *) {
+  background: var(--pk-card-panel-light-bg);
+  border-color: var(--pk-card-panel-light-border);
 }
 .prokodo-Card__skeleton {
   position: absolute;
   z-index: 3;
   width: 100%;
   height: 100% !important;
-  border-radius: 2rem;
+  border-radius: var(--pk-card-radius);
 }
 .prokodo-Card__background {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border-radius: 2rem;
+  border-radius: var(--pk-card-radius);
   z-index: 1;
-}
-html[data-theme=dark] .prokodo-Card__background {
   opacity: 0.7;
 }
 .prokodo-Card__link {
@@ -197,8 +232,8 @@ html[data-theme=dark] .prokodo-Card__background {
 .prokodo-Card__content {
   position: relative;
   z-index: 2;
-  padding: 1.5rem;
-  color: var(--color-grey-900);
+  padding: var(--pk-card-padding);
+  color: var(--pk-card-fg);
 }
 .prokodo-Card__content--has-link {
   cursor: pointer;
@@ -213,7 +248,7 @@ html[data-theme=dark] .prokodo-Card__background {
   width: 100%;
   height: 100%;
   top: 0;
-  border-radius: 2rem;
+  border-radius: var(--pk-card-radius);
 }
 .prokodo-Card__gradiant--primary {
   background: var(--gradient-background-primary);
@@ -232,20 +267,18 @@ html[data-theme=dark] .prokodo-Card__background {
 }
 .prokodo-Card--has-highlight {
   position: relative;
-  /* Highlight border fade-in that previously defined @keyframes inline */
 }
 .prokodo-Card--has-highlight::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  padding: 2px;
+  padding: var(--pk-border-width);
   -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;
   opacity: 0;
-  /* If gradientBorderVar injects animated gradient, it's fine here */
   background: var(--gradient-border-4);
   animation: Card_fadeInMask 0.5s ease forwards;
 }
@@ -253,18 +286,20 @@ html[data-theme=dark] .prokodo-Card__background {
   position: relative;
 }
 .prokodo-Card--has-gradiant, .prokodo-Card--has-background {
-  color: var(--color-grey-900);
+  color: var(--pk-card-fg);
 }
 .prokodo-Card--has-shadow {
-  box-shadow: var(--elevation-1);
+  box-shadow: var(--pk-card-shadow);
 }
 .prokodo-Card--has-animation {
   animation: Card_fadeInAnimation 0.5s;
 }
 .prokodo-Card--is-clickable {
   cursor: pointer;
+  transition: transform var(--pk-timing-fast, 0.15s) ease;
 }
 .prokodo-Card--is-clickable:hover {
+  transform: translateY(-2px);
   box-shadow: none;
 }
 .prokodo-Card--is-clickable:focus {

package/dist/components/card/Card.module.css

@@ -124,9 +124,6 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-/**
-* Fade in
-*/
 @keyframes Card_fadeInAnimation {
   0% {
     opacity: 0;
@@ -142,50 +139,88 @@
 }
 .prokodo-Card {
   position: relative;
-  color: var(--color-grey-900);
-  background-color: var(--color-white);
-  border-radius: 2rem;
-  /* keep the gradient *class hooks*, but DO NOT include animated keyframes here */
-  /* Reveal animation (what used to be &--has-animation + fadeInAnimation) */
+  overflow: hidden;
+  color: var(--pk-card-fg, #111);
+  background-color: var(--pk-card-bg, #fff);
+  border-radius: var(--pk-card-radius);
 }
 .prokodo-Card--inherit {
-  background-color: var(--color-grey-100);
+  background-color: var(--pk-card-inherit-bg);
 }
 .prokodo-Card--white {
-  background-color: var(--color-white);
+  background-color: var(--pk-card-bg);
+}
+.prokodo-Card--primary {
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  background-color: color-mix(in srgb, var(--pk-color-brand) 4%, var(--pk-card-bg));
+}
+.prokodo-Card--secondary {
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+  background-color: color-mix(in srgb, var(--pk-color-accent) 4%, var(--pk-card-bg));
+}
+.prokodo-Card--success {
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+  background-color: color-mix(in srgb, var(--pk-color-success) 4%, var(--pk-card-bg));
+}
+.prokodo-Card--warning {
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+  background-color: color-mix(in srgb, var(--pk-color-warning) 4%, var(--pk-card-bg));
+}
+.prokodo-Card--error {
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+  background-color: color-mix(in srgb, var(--pk-color-error) 4%, var(--pk-card-bg));
+}
+.prokodo-Card--info {
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-color-fg) 20%, transparent);
+  background-color: color-mix(in srgb, var(--pk-color-fg) 4%, var(--pk-card-bg));
 }
-html[data-theme=dark] .prokodo-Card--white {
-  background-color: transparent;
+.prokodo-Card--primary.prokodo-Card--is-clickable {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-brand) 18%, transparent);
+}
+.prokodo-Card--secondary.prokodo-Card--is-clickable {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-accent) 18%, transparent);
+}
+.prokodo-Card--success.prokodo-Card--is-clickable {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-success) 18%, transparent);
+}
+.prokodo-Card--warning.prokodo-Card--is-clickable {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-warning) 18%, transparent);
+}
+.prokodo-Card--error.prokodo-Card--is-clickable {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-error) 18%, transparent);
+}
+.prokodo-Card--info.prokodo-Card--is-clickable {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-fg) 10%, transparent);
 }
 .prokodo-Card--panel {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  /* in light mode trotzdem lesbar */
+  background: var(--pk-card-panel-bg);
+  border: var(--pk-border-width) solid var(--pk-card-panel-border);
 }
-html:not([data-theme=dark]) .prokodo-Card--panel {
-  background: var(--color-white);
-  border: 1px solid rgba(0, 0, 0, 0.08);
+.prokodo-Card--panel:not([data-theme=dark] *) {
+  background: var(--pk-card-panel-light-bg);
+  border-color: var(--pk-card-panel-light-border);
 }
 .prokodo-Card__skeleton {
   position: absolute;
   z-index: 3;
   width: 100%;
   height: 100% !important;
-  border-radius: 2rem;
+  border-radius: var(--pk-card-radius);
 }
 .prokodo-Card__background {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border-radius: 2rem;
+  border-radius: var(--pk-card-radius);
   z-index: 1;
-}
-html[data-theme=dark] .prokodo-Card__background {
   opacity: 0.7;
 }
 .prokodo-Card__link {
@@ -197,8 +232,8 @@ html[data-theme=dark] .prokodo-Card__background {
 .prokodo-Card__content {
   position: relative;
   z-index: 2;
-  padding: 1.5rem;
-  color: var(--color-grey-900);
+  padding: var(--pk-card-padding);
+  color: var(--pk-card-fg);
 }
 .prokodo-Card__content--has-link {
   cursor: pointer;
@@ -213,7 +248,7 @@ html[data-theme=dark] .prokodo-Card__background {
   width: 100%;
   height: 100%;
   top: 0;
-  border-radius: 2rem;
+  border-radius: var(--pk-card-radius);
 }
 .prokodo-Card__gradiant--primary {
   background: var(--gradient-background-primary);
@@ -232,20 +267,18 @@ html[data-theme=dark] .prokodo-Card__background {
 }
 .prokodo-Card--has-highlight {
   position: relative;
-  /* Highlight border fade-in that previously defined @keyframes inline */
 }
 .prokodo-Card--has-highlight::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  padding: 2px;
+  padding: var(--pk-border-width);
   -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;
   opacity: 0;
-  /* If gradientBorderVar injects animated gradient, it's fine here */
   background: var(--gradient-border-4);
   animation: Card_fadeInMask 0.5s ease forwards;
 }
@@ -253,18 +286,20 @@ html[data-theme=dark] .prokodo-Card__background {
   position: relative;
 }
 .prokodo-Card--has-gradiant, .prokodo-Card--has-background {
-  color: var(--color-grey-900);
+  color: var(--pk-card-fg);
 }
 .prokodo-Card--has-shadow {
-  box-shadow: var(--elevation-1);
+  box-shadow: var(--pk-card-shadow);
 }
 .prokodo-Card--has-animation {
   animation: Card_fadeInAnimation 0.5s;
 }
 .prokodo-Card--is-clickable {
   cursor: pointer;
+  transition: transform var(--pk-timing-fast, 0.15s) ease;
 }
 .prokodo-Card--is-clickable:hover {
+  transform: translateY(-2px);
   box-shadow: none;
 }
 .prokodo-Card--is-clickable:focus {

package/dist/components/card/Card.module.scss.js

@@ -4,6 +4,13 @@ const styles = {
   "prokodo-Card": "prokodo-Card",
   "prokodo-Card--inherit": "prokodo-Card--inherit",
   "prokodo-Card--white": "prokodo-Card--white",
+  "prokodo-Card--primary": "prokodo-Card--primary",
+  "prokodo-Card--secondary": "prokodo-Card--secondary",
+  "prokodo-Card--success": "prokodo-Card--success",
+  "prokodo-Card--warning": "prokodo-Card--warning",
+  "prokodo-Card--error": "prokodo-Card--error",
+  "prokodo-Card--info": "prokodo-Card--info",
+  "prokodo-Card--is-clickable": "prokodo-Card--is-clickable",
   "prokodo-Card--panel": "prokodo-Card--panel",
   "prokodo-Card__skeleton": "prokodo-Card__skeleton",
   "prokodo-Card__background": "prokodo-Card__background",
@@ -22,8 +29,7 @@ const styles = {
   "prokodo-Card--has-background": "prokodo-Card--has-background",
   "prokodo-Card--has-shadow": "prokodo-Card--has-shadow",
   "prokodo-Card--has-animation": "prokodo-Card--has-animation",
-  Card_fadeInAnimation,
-  "prokodo-Card--is-clickable": "prokodo-Card--is-clickable"
+  Card_fadeInAnimation
 };
 export {
   Card_fadeInAnimation,

package/dist/components/card/Card.view.js

@@ -11,7 +11,7 @@ import { Link } from "../link/Link.js";
 const bem = create(styles, "Card");
 function CardView({
   isClickable,
-  variant = "white",
+  color = "white",
   loading,
   skeletonProps,
   highlight,
@@ -35,7 +35,7 @@ function CardView({
   onMouseLeave
 }) {
   const modifiers = {
-    [variant]: true,
+    [color]: true,
     "is-clickable": Boolean(isClickable),
     "has-highlight": Boolean(highlight),
     "has-gradiant": Boolean(gradiant),
@@ -93,7 +93,7 @@ function CardView({
             {
               className: bem(
                 "gradiant",
-                { [variant]: variant !== "inherit" && variant !== "white" },
+                { [color]: color !== "inherit" && color !== "white" },
                 gradiantClassName
               )
             }

package/dist/components/carousel/Carousel.client.js

@@ -215,8 +215,7 @@ function CarouselClient(props) {
                 ),
                 iconProps: {
                   name: "ArrowLeft01Icon",
-                  size: "md",
-                  color: "white",
+                  size: "sm",
                   /* istanbul ignore next */
                   ...prevButton == null ? void 0 : prevButton.iconProps
                 },
@@ -256,8 +255,7 @@ function CarouselClient(props) {
                 ),
                 iconProps: {
                   name: "ArrowRight01Icon",
-                  size: "md",
-                  color: "white",
+                  size: "sm",
                   /* istanbul ignore next */
                   ...nextButton == null ? void 0 : nextButton.iconProps
                 },

package/dist/components/carousel/Carousel.css

@@ -152,7 +152,7 @@
   left: 0;
   opacity: 1;
   visibility: visible;
-  background-color: rgba(36, 36, 36, 0.7);
+  background-color: var(--pk-carousel-overlay-bg);
   transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
   z-index: 10;
 }
@@ -179,6 +179,7 @@
   width: 100%;
   align-items: center;
   justify-content: space-between;
+  margin-top: var(--pk-carousel-controls-mt);
   opacity: 0;
 }
 @media screen and (min-width: 480px) {
@@ -187,11 +188,14 @@
   }
 }
 .prokodo-Carousel__button {
-  padding: 0.25rem;
+  padding: var(--pk-carousel-button-padding) !important;
+  line-height: 1 !important;
+  --pk-button-padding-x: var(--pk-carousel-button-padding);
+  --pk-button-padding-y: var(--pk-carousel-button-padding);
 }
 .prokodo-Carousel__dots {
   display: flex;
-  margin: 2rem auto 0 auto;
+  margin: var(--pk-carousel-dots-mt) auto 0 auto;
   text-align: center;
 }
 .prokodo-Carousel__dots__dot {
@@ -222,7 +226,7 @@
   background: var(--gradient-border-4);
 }
 .prokodo-Carousel__dots__dot--is-active {
-  background-color: #FFFFFF;
+  background-color: var(--pk-carousel-dot-active-bg);
 }
 @media screen and (max-width: 1280px) {
   .prokodo-Carousel__dots__dot {