@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/snackbar/Snackbar.css

@@ -124,95 +124,156 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes Snackbar_slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes Snackbar_slideOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
 .prokodo-Snackbar {
-  position: relative;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  min-width: 288px;
-  max-width: 430px;
-  padding: 1rem 1.5rem;
-  border-radius: 8px;
-  box-shadow: var(--elevation-2);
-  background-color: var(--color-grey-900);
-  color: var(--color-white);
+  gap: var(--pk-space-md);
+  padding: var(--pk-snackbar-padding-y) var(--pk-snackbar-padding-x);
+  border-radius: var(--pk-snackbar-radius);
+  border: var(--pk-border-width) solid var(--pk-snackbar-border-color);
+  box-shadow: var(--pk-snackbar-shadow);
+  background-color: var(--pk-snackbar-bg);
+  color: var(--pk-snackbar-fg);
+  animation: Snackbar_slideIn var(--pk-snackbar-timing) ease;
 }
-.prokodo-Snackbar--success {
-  background-color: var(--color-success);
+.prokodo-Snackbar--info {
+  background-color: var(--pk-snackbar-info-bg);
+  color: var(--pk-snackbar-info-fg);
+  border-color: var(--pk-snackbar-info-border);
+  box-shadow: var(--pk-snackbar-info-shadow);
 }
-.prokodo-Snackbar--error {
-  background-color: var(--color-error);
+.prokodo-Snackbar--success {
+  background-color: var(--pk-snackbar-success-bg);
+  color: var(--pk-snackbar-success-fg);
+  border-color: var(--pk-snackbar-success-border);
+  box-shadow: var(--pk-snackbar-success-shadow);
 }
 .prokodo-Snackbar--warning {
-  background-color: var(--color-warning);
-  color: var(--color-black);
+  background-color: var(--pk-snackbar-warning-bg);
+  color: var(--pk-snackbar-warning-fg);
+  border-color: var(--pk-snackbar-warning-border);
+  box-shadow: var(--pk-snackbar-warning-shadow);
 }
-.prokodo-Snackbar--info {
-  background-color: var(--color-grey-500);
+.prokodo-Snackbar--error {
+  background-color: var(--pk-snackbar-error-bg);
+  color: var(--pk-snackbar-error-fg);
+  border-color: var(--pk-snackbar-error-border);
+  box-shadow: var(--pk-snackbar-error-shadow);
 }
-html[data-theme=dark] .prokodo-Snackbar--info {
-  background-color: var(--color-grey-300);
-  color: var(--color-grey-900);
+.prokodo-Snackbar--is-leaving {
+  animation: Snackbar_slideOut var(--pk-snackbar-timing) ease forwards;
+}
+.prokodo-Snackbar__icon {
+  flex-shrink: 0;
 }
 .prokodo-Snackbar__message {
   flex: 1 1;
+  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;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Snackbar__message {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Snackbar__message {
+    font-size: 1rem;
+  }
 }
 .prokodo-Snackbar__action {
-  margin-left: auto;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
 }
-.prokodo-Snackbar__close {
+.prokodo-Snackbar__action button {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
+  gap: var(--pk-space-xs);
+  padding: var(--pk-space-xs) var(--pk-space-sm);
   border: none;
-  background: transparent;
+  border-radius: var(--pk-radius-sm);
+  background-color: color-mix(in srgb, currentColor 12%, transparent);
   color: inherit;
   cursor: pointer;
+  transition: background-color var(--pk-timing-fast) ease, transform var(--pk-timing-fast) ease;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
 }
-.prokodo-Snackbar__close:focus-visible {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: 2px;
+@media screen and (min-width: 480px) {
+  .prokodo-Snackbar__action button {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
 }
-.prokodo-Snackbar__close:hover {
-  opacity: 0.8;
+@media screen and (min-width: 960px) {
+  .prokodo-Snackbar__action button {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
 }
-.prokodo-Snackbar--readonly {
-  pointer-events: none;
+.prokodo-Snackbar__action button:hover {
+  background-color: color-mix(in srgb, currentColor 22%, transparent);
+  transform: scale(1.03);
 }
-
-.prokodo-SnackbarProvider {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  gap: 8;
-  z-index: 9000;
-  pointer-events: none;
-}
-.prokodo-SnackbarProvider--is-top {
-  top: 0;
-}
-.prokodo-SnackbarProvider--is-bottom {
-  bottom: 0;
-}
-.prokodo-SnackbarProvider--is-center {
-  left: 50%;
-  transform: translateX(-50%);
-}
-.prokodo-SnackbarProvider--is-left {
-  left: 1rem;
-}
-.prokodo-SnackbarProvider--is-right {
-  right: 1rem;
+.prokodo-Snackbar__action button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
-.prokodo-SnackbarProvider__snackbar {
-  pointer-events: auto;
+.prokodo-Snackbar__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: color-mix(in srgb, currentColor 8%, transparent);
+  color: inherit;
+  cursor: pointer;
+  transition: background-color var(--pk-timing-fast) ease, transform var(--pk-timing-fast) ease;
 }
-.prokodo-SnackbarProvider__snackbar--is-top {
-  margin-top: 1rem;
+.prokodo-Snackbar__close:hover {
+  background-color: color-mix(in srgb, currentColor 18%, transparent);
+  transform: scale(1.1);
 }
-.prokodo-SnackbarProvider__snackbar--is-bottom {
-  margin-bottom: 1rem;
+.prokodo-Snackbar__close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }

package/dist/components/snackbar/Snackbar.module.css

@@ -124,95 +124,156 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes Snackbar_slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes Snackbar_slideOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
 .prokodo-Snackbar {
-  position: relative;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  min-width: 288px;
-  max-width: 430px;
-  padding: 1rem 1.5rem;
-  border-radius: 8px;
-  box-shadow: var(--elevation-2);
-  background-color: var(--color-grey-900);
-  color: var(--color-white);
+  gap: var(--pk-space-md);
+  padding: var(--pk-snackbar-padding-y) var(--pk-snackbar-padding-x);
+  border-radius: var(--pk-snackbar-radius);
+  border: var(--pk-border-width) solid var(--pk-snackbar-border-color);
+  box-shadow: var(--pk-snackbar-shadow);
+  background-color: var(--pk-snackbar-bg);
+  color: var(--pk-snackbar-fg);
+  animation: Snackbar_slideIn var(--pk-snackbar-timing) ease;
 }
-.prokodo-Snackbar--success {
-  background-color: var(--color-success);
+.prokodo-Snackbar--info {
+  background-color: var(--pk-snackbar-info-bg);
+  color: var(--pk-snackbar-info-fg);
+  border-color: var(--pk-snackbar-info-border);
+  box-shadow: var(--pk-snackbar-info-shadow);
 }
-.prokodo-Snackbar--error {
-  background-color: var(--color-error);
+.prokodo-Snackbar--success {
+  background-color: var(--pk-snackbar-success-bg);
+  color: var(--pk-snackbar-success-fg);
+  border-color: var(--pk-snackbar-success-border);
+  box-shadow: var(--pk-snackbar-success-shadow);
 }
 .prokodo-Snackbar--warning {
-  background-color: var(--color-warning);
-  color: var(--color-black);
+  background-color: var(--pk-snackbar-warning-bg);
+  color: var(--pk-snackbar-warning-fg);
+  border-color: var(--pk-snackbar-warning-border);
+  box-shadow: var(--pk-snackbar-warning-shadow);
 }
-.prokodo-Snackbar--info {
-  background-color: var(--color-grey-500);
+.prokodo-Snackbar--error {
+  background-color: var(--pk-snackbar-error-bg);
+  color: var(--pk-snackbar-error-fg);
+  border-color: var(--pk-snackbar-error-border);
+  box-shadow: var(--pk-snackbar-error-shadow);
 }
-html[data-theme=dark] .prokodo-Snackbar--info {
-  background-color: var(--color-grey-300);
-  color: var(--color-grey-900);
+.prokodo-Snackbar--is-leaving {
+  animation: Snackbar_slideOut var(--pk-snackbar-timing) ease forwards;
+}
+.prokodo-Snackbar__icon {
+  flex-shrink: 0;
 }
 .prokodo-Snackbar__message {
   flex: 1 1;
+  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;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Snackbar__message {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Snackbar__message {
+    font-size: 1rem;
+  }
 }
 .prokodo-Snackbar__action {
-  margin-left: auto;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
 }
-.prokodo-Snackbar__close {
+.prokodo-Snackbar__action button {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
+  gap: var(--pk-space-xs);
+  padding: var(--pk-space-xs) var(--pk-space-sm);
   border: none;
-  background: transparent;
+  border-radius: var(--pk-radius-sm);
+  background-color: color-mix(in srgb, currentColor 12%, transparent);
   color: inherit;
   cursor: pointer;
+  transition: background-color var(--pk-timing-fast) ease, transform var(--pk-timing-fast) ease;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
 }
-.prokodo-Snackbar__close:focus-visible {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: 2px;
+@media screen and (min-width: 480px) {
+  .prokodo-Snackbar__action button {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
 }
-.prokodo-Snackbar__close:hover {
-  opacity: 0.8;
+@media screen and (min-width: 960px) {
+  .prokodo-Snackbar__action button {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
 }
-.prokodo-Snackbar--readonly {
-  pointer-events: none;
+.prokodo-Snackbar__action button:hover {
+  background-color: color-mix(in srgb, currentColor 22%, transparent);
+  transform: scale(1.03);
 }
-
-.prokodo-SnackbarProvider {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  gap: 8;
-  z-index: 9000;
-  pointer-events: none;
-}
-.prokodo-SnackbarProvider--is-top {
-  top: 0;
-}
-.prokodo-SnackbarProvider--is-bottom {
-  bottom: 0;
-}
-.prokodo-SnackbarProvider--is-center {
-  left: 50%;
-  transform: translateX(-50%);
-}
-.prokodo-SnackbarProvider--is-left {
-  left: 1rem;
-}
-.prokodo-SnackbarProvider--is-right {
-  right: 1rem;
+.prokodo-Snackbar__action button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
-.prokodo-SnackbarProvider__snackbar {
-  pointer-events: auto;
+.prokodo-Snackbar__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: color-mix(in srgb, currentColor 8%, transparent);
+  color: inherit;
+  cursor: pointer;
+  transition: background-color var(--pk-timing-fast) ease, transform var(--pk-timing-fast) ease;
 }
-.prokodo-SnackbarProvider__snackbar--is-top {
-  margin-top: 1rem;
+.prokodo-Snackbar__close:hover {
+  background-color: color-mix(in srgb, currentColor 18%, transparent);
+  transform: scale(1.1);
 }
-.prokodo-SnackbarProvider__snackbar--is-bottom {
-  margin-bottom: 1rem;
+.prokodo-Snackbar__close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }

package/dist/components/snackbar/Snackbar.module.scss.js

@@ -1,23 +1,21 @@
+const Snackbar_slideIn = "Snackbar_slideIn";
+const Snackbar_slideOut = "Snackbar_slideOut";
 const styles = {
   "prokodo-Snackbar": "prokodo-Snackbar",
+  Snackbar_slideIn,
+  "prokodo-Snackbar--info": "prokodo-Snackbar--info",
   "prokodo-Snackbar--success": "prokodo-Snackbar--success",
-  "prokodo-Snackbar--error": "prokodo-Snackbar--error",
   "prokodo-Snackbar--warning": "prokodo-Snackbar--warning",
-  "prokodo-Snackbar--info": "prokodo-Snackbar--info",
+  "prokodo-Snackbar--error": "prokodo-Snackbar--error",
+  "prokodo-Snackbar--is-leaving": "prokodo-Snackbar--is-leaving",
+  Snackbar_slideOut,
+  "prokodo-Snackbar__icon": "prokodo-Snackbar__icon",
   "prokodo-Snackbar__message": "prokodo-Snackbar__message",
   "prokodo-Snackbar__action": "prokodo-Snackbar__action",
-  "prokodo-Snackbar__close": "prokodo-Snackbar__close",
-  "prokodo-Snackbar--readonly": "prokodo-Snackbar--readonly",
-  "prokodo-SnackbarProvider": "prokodo-SnackbarProvider",
-  "prokodo-SnackbarProvider--is-top": "prokodo-SnackbarProvider--is-top",
-  "prokodo-SnackbarProvider--is-bottom": "prokodo-SnackbarProvider--is-bottom",
-  "prokodo-SnackbarProvider--is-center": "prokodo-SnackbarProvider--is-center",
-  "prokodo-SnackbarProvider--is-left": "prokodo-SnackbarProvider--is-left",
-  "prokodo-SnackbarProvider--is-right": "prokodo-SnackbarProvider--is-right",
-  "prokodo-SnackbarProvider__snackbar": "prokodo-SnackbarProvider__snackbar",
-  "prokodo-SnackbarProvider__snackbar--is-top": "prokodo-SnackbarProvider__snackbar--is-top",
-  "prokodo-SnackbarProvider__snackbar--is-bottom": "prokodo-SnackbarProvider__snackbar--is-bottom"
+  "prokodo-Snackbar__close": "prokodo-Snackbar__close"
 };
 export {
+  Snackbar_slideIn,
+  Snackbar_slideOut,
   styles as default
 };

package/dist/components/snackbar/Snackbar.view.js

@@ -7,7 +7,7 @@ import { Icon } from "../icon/Icon.js";
 const bem = create(styles, "Snackbar");
 function SnackbarView({
   message,
-  variant = "default",
+  color = "default",
   anchorOrigin = { vertical: "bottom", horizontal: "center" },
   action,
   closeable = true,
@@ -28,7 +28,7 @@ function SnackbarView({
       className: bem(
         void 0,
         {
-          [variant]: true,
+          [color]: true,
           readonly: Boolean(readOnly),
           [pos.vertical]: true,
           [pos.horizontal]: true

package/dist/components/stepper/Stepper.client.js

@@ -13,6 +13,7 @@ const StepperClient = forwardRef((props, ref) => {
     onBlur,
     translations,
     className,
+    color,
     ...rootProps
   } = props;
   const [activeStep, setActiveStep] = useState(initialStep);
@@ -41,21 +42,34 @@ const StepperClient = forwardRef((props, ref) => {
   );
   const handleStepKeyDown = useCallback(
     (e, index) => {
-      var _a, _b;
+      var _a, _b, _c;
       const prev = index - 1;
       const next = index + 1;
+      const isCompleted = index < activeStep;
+      const isActivationKey = e.key === "Enter" || e.key === " " || e.key === "Spacebar" || e.code === "Enter" || e.code === "Space";
+      if (isActivationKey) {
+        if (isCompleted) {
+          setActiveStep(index);
+          (_a = stepRefs.current[index]) == null ? void 0 : _a.focus();
+          onChange == null ? void 0 : onChange(e, index);
+        }
+        e.preventDefault();
+        return;
+      }
       if (e.key === "ArrowLeft") {
         if (prev >= 0 && prev < activeStep) {
           setActiveStep(prev);
-          (_a = stepRefs.current[prev]) == null ? void 0 : _a.focus();
+          (_b = stepRefs.current[prev]) == null ? void 0 : _b.focus();
           onChange == null ? void 0 : onChange(e, prev);
         }
         e.preventDefault();
       } else if (e.key === "ArrowRight") {
-        if (next < steps.length && next < activeStep) {
-          setActiveStep(next);
-          (_b = stepRefs.current[next]) == null ? void 0 : _b.focus();
-          onChange == null ? void 0 : onChange(e, next);
+        if (next < steps.length) {
+          if (next < activeStep) {
+            setActiveStep(next);
+            (_c = stepRefs.current[next]) == null ? void 0 : _c.focus();
+            onChange == null ? void 0 : onChange(e, next);
+          }
         }
         e.preventDefault();
       }
@@ -115,6 +129,7 @@ const StepperClient = forwardRef((props, ref) => {
       ...rootProps,
       activeStep,
       className,
+      color,
       stepRefs,
       steps: formattedSteps,
       translations

package/dist/components/stepper/Stepper.css

@@ -137,6 +137,41 @@
     flex-direction: row;
   }
 }
+.prokodo-Stepper--primary {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-brand) 0%, var(--pk-color-accent) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-brand) 0%, var(--pk-color-accent) 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-brand), var(--pk-color-accent), var(--pk-color-brand));
+}
+.prokodo-Stepper--secondary {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-accent) 0%, var(--pk-color-brand) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-accent) 0%, var(--pk-color-brand) 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-accent), var(--pk-color-brand), var(--pk-color-accent));
+}
+.prokodo-Stepper--success {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-success) 0%, #10CCB8 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-success) 0%, #10CCB8 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-success), #10CCB8, var(--pk-color-success));
+}
+.prokodo-Stepper--warning {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-warning) 0%, #f7cc6a 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-warning) 0%, #f7cc6a 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-warning), #f7cc6a, var(--pk-color-warning));
+}
+.prokodo-Stepper--error {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-error) 0%, #ff6b6b 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-error) 0%, #ff6b6b 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-error), #ff6b6b, var(--pk-color-error));
+}
+.prokodo-Stepper--info {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-fg) 0%, var(--pk-color-muted) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-fg) 0%, var(--pk-color-muted) 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-fg), var(--pk-color-muted), var(--pk-color-fg));
+}
+.prokodo-Stepper--inherit {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-border) 0%, var(--pk-color-muted) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-border) 0%, var(--pk-color-muted) 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-border), var(--pk-color-muted), var(--pk-color-border));
+}
 .prokodo-Stepper__step {
   position: relative;
   height: 100%;
@@ -195,7 +230,7 @@
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 9999px;
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--pk-stepper-icon-mb);
 }
 .prokodo-Stepper__icon__container::before {
   content: "";
@@ -207,13 +242,13 @@
   border-radius: inherit;
   padding: 3px;
   background: var(--gradient-border-7);
-  -webkit-mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
-          mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
+  -webkit-mask: linear-gradient(var(--pk-stepper-icon-mask-bg) 0 0) content-box, linear-gradient(var(--pk-stepper-icon-mask-bg) 0 0);
+          mask: linear-gradient(var(--pk-stepper-icon-mask-bg) 0 0) content-box, linear-gradient(var(--pk-stepper-icon-mask-bg) 0 0);
   -webkit-mask-composite: xor;
           mask-composite: exclude;
 }
 .prokodo-Stepper__icon__container--is-active {
-  box-shadow: var(--elevation-1);
+  box-shadow: var(--pk-stepper-shadow);
 }
 .prokodo-Stepper__icon__container--is-active::before {
   background: var(--gradient-border-1);
@@ -227,7 +262,7 @@
   right: 4px;
   bottom: 4px;
   border-radius: inherit;
-  box-shadow: var(--elevation-1--inset);
+  box-shadow: var(--pk-stepper-shadow-inset);
 }
 .prokodo-Stepper__icon__container:focus {
   border-radius: 9999px;
@@ -239,7 +274,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--color-grey-700);
+  color: var(--pk-stepper-label-color);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -251,7 +286,7 @@
   text-decoration: none;
 }
 .prokodo-Stepper__icon__label--is-active {
-  color: var(--color-grey-900);
+  color: var(--pk-stepper-label-color-active);
 }
 .prokodo-Stepper__icon__completed {
   visibility: hidden;
@@ -284,7 +319,7 @@
   font-family: !important;
   font-size: 1rem !important;
   line-height: 1.45 !important;
-  color: var(--color-grey-600) !important;
+  color: var(--pk-stepper-label-color) !important;
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -308,10 +343,10 @@
   }
 }
 .prokodo-Stepper__label--is-active {
-  color: var(--color-grey-800) !important;
+  color: var(--pk-stepper-label-color-active) !important;
 }
 .prokodo-Stepper__label__text {
-  color: var(--color-grey-700) !important;
+  color: var(--pk-stepper-label-color) !important;
   position: absolute;
   top: auto;
   left: -99999px;
@@ -320,7 +355,7 @@
   text-indent: -99999px;
 }
 .prokodo-Stepper__label__text--is-active {
-  color: var(--color-grey-900) !important;
+  color: var(--pk-stepper-label-color-active) !important;
 }
 @media screen and (min-width: 375px) {
   .prokodo-Stepper__label__text {