@prokodo/ui 0.1.15 → 1.0.1

package/dist/components/inputOTP/InputOTP.module.css

@@ -126,7 +126,68 @@
  */
 .prokodo-InputOTP {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 0;
+}
+.prokodo-InputOTP--primary {
+  --pk-otp-gradient-from: var(--pk-color-brand);
+  --pk-otp-gradient-to: var(--pk-color-accent);
+  --pk-input-gradient-from: var(--pk-color-brand);
+  --pk-input-gradient-to: var(--pk-color-accent);
+  --pk-input-border-focus: var(--pk-color-brand);
+  --pk-input-label-focused-fg: var(--pk-color-brand);
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+}
+.prokodo-InputOTP--secondary {
+  --pk-otp-gradient-from: var(--pk-color-accent);
+  --pk-otp-gradient-to: var(--pk-color-brand);
+  --pk-input-gradient-from: var(--pk-color-accent);
+  --pk-input-gradient-to: var(--pk-color-brand);
+  --pk-input-border-focus: var(--pk-color-accent);
+  --pk-input-label-focused-fg: var(--pk-color-accent);
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+}
+.prokodo-InputOTP--success {
+  --pk-otp-gradient-from: var(--pk-color-success);
+  --pk-otp-gradient-to: #10CCB8;
+  --pk-input-gradient-from: var(--pk-color-success);
+  --pk-input-gradient-to: #10CCB8;
+  --pk-input-border-focus: var(--pk-color-success);
+  --pk-input-label-focused-fg: var(--pk-color-success);
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+}
+.prokodo-InputOTP--warning {
+  --pk-otp-gradient-from: var(--pk-color-warning);
+  --pk-otp-gradient-to: #f7cc6a;
+  --pk-input-gradient-from: var(--pk-color-warning);
+  --pk-input-gradient-to: #f7cc6a;
+  --pk-input-border-focus: var(--pk-color-warning);
+  --pk-input-label-focused-fg: var(--pk-color-warning);
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+}
+.prokodo-InputOTP--error {
+  --pk-otp-gradient-from: var(--pk-color-error);
+  --pk-otp-gradient-to: #ff6b6b;
+  --pk-input-gradient-from: var(--pk-color-error);
+  --pk-input-gradient-to: #ff6b6b;
+  --pk-input-border-focus: var(--pk-color-error);
+  --pk-input-label-focused-fg: var(--pk-color-error);
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+}
+.prokodo-InputOTP--info, .prokodo-InputOTP--inherit, .prokodo-InputOTP--white {
+  --pk-otp-gradient-from: var(--pk-color-muted);
+  --pk-otp-gradient-to: var(--pk-color-border);
+  --pk-input-gradient-from: var(--pk-color-muted);
+  --pk-input-gradient-to: var(--pk-color-border);
+  --pk-input-border-focus: var(--pk-color-muted);
+  --pk-input-label-focused-fg: var(--pk-color-muted);
+}
+.prokodo-InputOTP--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+  --pk-otp-gradient-from: var(--pk-color-border);
+  --pk-otp-gradient-to: var(--pk-color-muted);
 }
 .prokodo-InputOTP__label, .prokodo-InputOTP__instruction {
   position: absolute;
@@ -136,20 +197,107 @@
   height: 0;
   text-indent: -99999px;
 }
+.prokodo-InputOTP__visible-label {
+  margin-bottom: var(--pk-space-sm);
+}
+.prokodo-InputOTP__row {
+  display: flex;
+  align-items: center;
+  gap: var(--pk-otp-gap);
+}
+.prokodo-InputOTP__footer {
+  display: flex;
+  margin-top: var(--pk-space-xs);
+}
+.prokodo-InputOTP__helperText {
+  color: var(--pk-input-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;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-InputOTP__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-InputOTP__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-InputOTP__helperText__content--is-error {
+  color: var(--pk-color-error);
+}
 .prokodo-InputOTP__field {
-  width: 42px;
-  height: 42px;
+  position: relative;
+  width: var(--pk-otp-cell-size);
+  height: var(--pk-otp-cell-size);
+  border-radius: var(--pk-otp-cell-radius) !important;
+  flex-shrink: 0;
+}
+.prokodo-InputOTP__field::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--pk-otp-cell-radius);
+  padding: 2px;
+  background: conic-gradient(from 180deg, var(--pk-otp-gradient-from), var(--pk-otp-gradient-to), var(--pk-otp-gradient-from));
+  -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: destination-out;
+  mask-composite: exclude;
+  pointer-events: none;
+  z-index: 1;
 }
 .prokodo-InputOTP__input {
-  width: 42px;
-  height: 42px;
+  width: var(--pk-otp-cell-size);
+  height: var(--pk-otp-cell-size);
 }
 .prokodo-InputOTP__input__container {
   width: 100%;
   height: 100%;
-  border-radius: 80px;
+  border-radius: var(--pk-otp-cell-radius);
+  overflow: hidden;
+  background: transparent !important;
+  animation: none !important;
 }
 .prokodo-InputOTP__input__node {
   width: 100%;
-  padding: 0.5rem 1rem;
+  height: 100%;
+  padding: 0;
+  background: var(--pk-input-bg);
+  border-radius: var(--pk-otp-cell-radius);
+  font-weight: 700;
+  font-feature-settings: "tnum";
+  font-variant-numeric: tabular-nums;
+  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-InputOTP__input__node {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-InputOTP__input__node {
+    font-size: 1rem;
+  }
+}
+.prokodo-InputOTP__input__node {
+  text-align: center;
 }

package/dist/components/inputOTP/InputOTP.module.scss.js

@@ -1,7 +1,21 @@
 const styles = {
   "prokodo-InputOTP": "prokodo-InputOTP",
+  "prokodo-InputOTP--primary": "prokodo-InputOTP--primary",
+  "prokodo-InputOTP--secondary": "prokodo-InputOTP--secondary",
+  "prokodo-InputOTP--success": "prokodo-InputOTP--success",
+  "prokodo-InputOTP--warning": "prokodo-InputOTP--warning",
+  "prokodo-InputOTP--error": "prokodo-InputOTP--error",
+  "prokodo-InputOTP--info": "prokodo-InputOTP--info",
+  "prokodo-InputOTP--inherit": "prokodo-InputOTP--inherit",
+  "prokodo-InputOTP--white": "prokodo-InputOTP--white",
+  "prokodo-InputOTP--disabled": "prokodo-InputOTP--disabled",
   "prokodo-InputOTP__label": "prokodo-InputOTP__label",
   "prokodo-InputOTP__instruction": "prokodo-InputOTP__instruction",
+  "prokodo-InputOTP__visible-label": "prokodo-InputOTP__visible-label",
+  "prokodo-InputOTP__row": "prokodo-InputOTP__row",
+  "prokodo-InputOTP__footer": "prokodo-InputOTP__footer",
+  "prokodo-InputOTP__helperText": "prokodo-InputOTP__helperText",
+  "prokodo-InputOTP__helperText__content--is-error": "prokodo-InputOTP__helperText__content--is-error",
   "prokodo-InputOTP__field": "prokodo-InputOTP__field",
   "prokodo-InputOTP__input": "prokodo-InputOTP__input",
   "prokodo-InputOTP__input__container": "prokodo-InputOTP__input__container",

package/dist/components/inputOTP/InputOTP.server.js

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { InputOTPView } from "./InputOTP.view.js";
+function InputOTPServer({
+  length = 6,
+  ...props
+}) {
+  const emptyOtp = Array(length).fill("");
+  const noop = /* @__PURE__ */ __name(() => {
+  }, "noop");
+  const noopRef = /* @__PURE__ */ __name(() => () => {
+  }, "noopRef");
+  return /* @__PURE__ */ jsx(
+    InputOTPView,
+    {
+      ...props,
+      readOnly: true,
+      getInputRef: noopRef,
+      length,
+      otp: emptyOtp,
+      onDigitChange: noop,
+      onDigitFocus: noop,
+      onDigitKeyDown: noop,
+      onGroupPaste: noop
+    }
+  );
+}
+__name(InputOTPServer, "InputOTPServer");
+export {
+  InputOTPServer as default
+};

package/dist/components/inputOTP/InputOTP.view.js

@@ -0,0 +1,117 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./InputOTP.module.scss.js";
+import { Label } from "../label/Label.js";
+import { Input } from "../input/Input.js";
+const bem = create(styles, "InputOTP");
+function InputOTPView({
+  className,
+  groupLabel,
+  groupInstruction,
+  label,
+  labelProps = {},
+  helperText,
+  errorText,
+  name = "otp",
+  length = 6,
+  otp,
+  color = "primary",
+  disabled,
+  required,
+  getInputRef,
+  onDigitFocus,
+  onDigitChange,
+  onDigitKeyDown,
+  onGroupPaste,
+  ...props
+}) {
+  const isError = typeof errorText === "string";
+  const hasHelperText = isString(helperText);
+  const labelId = `${name}-label`;
+  const errorId = isError ? `${name}-error` : void 0;
+  const helperId = !isError && hasHelperText ? `${name}-helper` : void 0;
+  const describedBy = [`${name}-instructions`, errorId, helperId].filter(Boolean).join(" ") || /* istanbul ignore next */
+  void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-describedby": describedBy,
+      "aria-disabled": disabled || void 0,
+      "aria-labelledby": label ? labelId : `${name}-group-label`,
+      role: "group",
+      className: bem(
+        void 0,
+        { [color]: true, disabled: !!disabled, required: !!required },
+        className
+      ),
+      onPaste: onGroupPaste,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: bem("label"), id: `${name}-group-label`, children: groupLabel ?? "Enter your OTP" }),
+        /* @__PURE__ */ jsx("span", { className: bem("instruction"), id: `${name}-instructions`, children: groupInstruction ?? "Use the arrow keys to navigate between digits." }),
+        typeof label === "string" && /* @__PURE__ */ jsx(
+          Label,
+          {
+            ...labelProps,
+            className: bem("visible-label", void 0, labelProps.className),
+            color,
+            error: isError,
+            htmlFor: `${name}-0`,
+            id: labelId,
+            label,
+            required
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: bem("row"), children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...props,
+            hideCounter: true,
+            "aria-label": `${(props == null ? void 0 : props["aria-label"]) ?? "OTP digit"} ${index + 1}`,
+            autoComplete: "one-time-code",
+            className: bem("input"),
+            color,
+            disabled,
+            fieldClassName: bem("field"),
+            inputClassName: bem("input__node"),
+            inputContainerClassName: bem("input__container"),
+            inputMode: "numeric",
+            inputRef: getInputRef(index),
+            maxLength: 1,
+            name: `${name}-${index}`,
+            pattern: "\\\\d*",
+            placeholder: "•",
+            type: "text",
+            value: otp[index] ?? "",
+            onChange: /* @__PURE__ */ __name((e) => onDigitChange(e, index), "onChange"),
+            onFocus: /* @__PURE__ */ __name(() => onDigitFocus(index), "onFocus"),
+            onKeyDown: /* @__PURE__ */ __name((e) => onDigitKeyDown(e, index), "onKeyDown")
+          },
+          `${name}-${index}`
+        )) }),
+        (isError || hasHelperText) && /* @__PURE__ */ jsx("div", { className: bem("footer"), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-live": isError ? "assertive" : "polite",
+            className: bem("helperText"),
+            id: errorId ?? helperId,
+            role: isError ? "alert" : void 0,
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: bem("helperText__content", { "is-error": isError }),
+                children: errorText ?? helperText
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+__name(InputOTPView, "InputOTPView");
+export {
+  InputOTPView
+};

package/dist/components/label/Label.css

@@ -155,26 +155,45 @@
 .prokodo-Label {
   filter: drop-shadow(var(--elevation-1--text));
 }
+.prokodo-Label--primary {
+  --pk-label-gradient-from: var(--pk-color-brand);
+  --pk-label-gradient-to: var(--pk-color-accent);
+}
+.prokodo-Label--secondary {
+  --pk-label-gradient-from: var(--pk-color-accent);
+  --pk-label-gradient-to: var(--pk-color-brand);
+}
+.prokodo-Label--success {
+  --pk-label-gradient-from: var(--pk-color-success);
+  --pk-label-gradient-to: #10CCB8;
+}
+.prokodo-Label--warning {
+  --pk-label-gradient-from: var(--pk-color-warning);
+  --pk-label-gradient-to: #f7cc6a;
+}
+.prokodo-Label--error {
+  --pk-label-gradient-from: var(--pk-color-error);
+  --pk-label-gradient-to: #ff6b6b;
+}
+.prokodo-Label--info, .prokodo-Label--inherit, .prokodo-Label--white {
+  --pk-label-gradient-from: var(--pk-color-muted);
+  --pk-label-gradient-to: var(--pk-color-border);
+}
 .prokodo-Label__highlighted {
   font-style: normal;
-  background-image: var(--gradient-text-primary);
-  -webkit-background-clip: text;
+  background: linear-gradient(to right, color-mix(in srgb, var(--pk-label-gradient-from) 80%, #000000), color-mix(in srgb, var(--pk-label-gradient-to) 65%, #000000));
   background-clip: text;
+  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  color: var(--pk-label-gradient-from);
 }
-html[data-theme=dark] .prokodo-Label__highlighted {
-  background-image: var(--gradient-text-primary);
-  -webkit-background-clip: text;
+html[data-theme="dark"] .prokodo-Label__highlighted, [data-theme="dark"] .prokodo-Label__highlighted, .pk-theme-dark .prokodo-Label__highlighted {
+  background: linear-gradient(to right, var(--pk-label-gradient-from), var(--pk-label-gradient-to));
   background-clip: text;
-  -webkit-text-fill-color: var(--color-grey-800);
+  -webkit-background-clip: text;
 }
 .prokodo-Label__highlighted--error {
-  background-image: var(--gradient-text-error);
-}
-.prokodo-Label__text {
-  color: var(--color-grey-500);
-  font-style: normal;
-}
-html[data-theme=dark] .prokodo-Label__text {
-  color: var(--color-grey-800);
+  background: linear-gradient(to right, var(--pk-label-error-from), var(--pk-label-error-to));
+  background-clip: text;
+  -webkit-background-clip: text;
 }

package/dist/components/label/Label.js

@@ -12,53 +12,55 @@ const Label = /* @__PURE__ */ __name(({
   contentProps,
   textProps,
   error,
+  color,
   children,
   ...props
 }) => {
-  const splittedLabel = label == null ? void 0 : label.split(" ");
   const renderContent = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("span", { ...contentProps, children: [
-      /* @__PURE__ */ jsxs(
-        "i",
-        {
-          ...textProps,
-          className: bem(
-            "highlighted",
-            {
-              error: Boolean(error)
-            },
-            textProps == null ? void 0 : textProps.className
-          ),
-          children: [
-            splittedLabel == null ? void 0 : splittedLabel[0],
-            " "
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "i",
-        {
-          ...textProps,
-          className: bem("text", void 0, textProps == null ? void 0 : textProps.className),
-          children: [
-            splittedLabel == null ? void 0 : splittedLabel.slice(1).join(" "),
-            " ",
-            Boolean(required) && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "*" })
-          ]
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx("span", { ...contentProps, children: /* @__PURE__ */ jsxs(
+      "i",
+      {
+        ...textProps,
+        className: bem(
+          "highlighted",
+          {
+            error: Boolean(error)
+          },
+          textProps == null ? void 0 : textProps.className
+        ),
+        children: [
+          label,
+          " ",
+          Boolean(required) && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "*" })
+        ]
+      }
+    ) }),
     children
   ] }), "renderContent");
-  if (!splittedLabel) return children;
+  if (!label) return children;
   if (type === "legend") {
-    return /* @__PURE__ */ jsx("legend", { ...props, className: bem(void 0, void 0, className), children: renderContent() });
+    return /* @__PURE__ */ jsx(
+      "legend",
+      {
+        ...props,
+        className: bem(
+          void 0,
+          color ? { [color]: true } : void 0,
+          className
+        ),
+        children: renderContent()
+      }
+    );
   }
   return /* @__PURE__ */ jsx(
     "label",
     {
       ...props,
-      className: bem(void 0, void 0, className),
+      className: bem(
+        void 0,
+        color ? { [color]: true } : void 0,
+        className
+      ),
       children: renderContent()
     }
   );

package/dist/components/label/Label.module.css

@@ -155,26 +155,45 @@
 .prokodo-Label {
   filter: drop-shadow(var(--elevation-1--text));
 }
+.prokodo-Label--primary {
+  --pk-label-gradient-from: var(--pk-color-brand);
+  --pk-label-gradient-to: var(--pk-color-accent);
+}
+.prokodo-Label--secondary {
+  --pk-label-gradient-from: var(--pk-color-accent);
+  --pk-label-gradient-to: var(--pk-color-brand);
+}
+.prokodo-Label--success {
+  --pk-label-gradient-from: var(--pk-color-success);
+  --pk-label-gradient-to: #10CCB8;
+}
+.prokodo-Label--warning {
+  --pk-label-gradient-from: var(--pk-color-warning);
+  --pk-label-gradient-to: #f7cc6a;
+}
+.prokodo-Label--error {
+  --pk-label-gradient-from: var(--pk-color-error);
+  --pk-label-gradient-to: #ff6b6b;
+}
+.prokodo-Label--info, .prokodo-Label--inherit, .prokodo-Label--white {
+  --pk-label-gradient-from: var(--pk-color-muted);
+  --pk-label-gradient-to: var(--pk-color-border);
+}
 .prokodo-Label__highlighted {
   font-style: normal;
-  background-image: var(--gradient-text-primary);
-  -webkit-background-clip: text;
+  background: linear-gradient(to right, color-mix(in srgb, var(--pk-label-gradient-from) 80%, #000000), color-mix(in srgb, var(--pk-label-gradient-to) 65%, #000000));
   background-clip: text;
+  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  color: var(--pk-label-gradient-from);
 }
-html[data-theme=dark] .prokodo-Label__highlighted {
-  background-image: var(--gradient-text-primary);
-  -webkit-background-clip: text;
+html[data-theme="dark"] .prokodo-Label__highlighted, [data-theme="dark"] .prokodo-Label__highlighted, .pk-theme-dark .prokodo-Label__highlighted {
+  background: linear-gradient(to right, var(--pk-label-gradient-from), var(--pk-label-gradient-to));
   background-clip: text;
-  -webkit-text-fill-color: var(--color-grey-800);
+  -webkit-background-clip: text;
 }
 .prokodo-Label__highlighted--error {
-  background-image: var(--gradient-text-error);
-}
-.prokodo-Label__text {
-  color: var(--color-grey-500);
-  font-style: normal;
-}
-html[data-theme=dark] .prokodo-Label__text {
-  color: var(--color-grey-800);
+  background: linear-gradient(to right, var(--pk-label-error-from), var(--pk-label-error-to));
+  background-clip: text;
+  -webkit-background-clip: text;
 }

package/dist/components/label/Label.module.scss.js

@@ -1,8 +1,15 @@
 const styles = {
   "prokodo-Label": "prokodo-Label",
+  "prokodo-Label--primary": "prokodo-Label--primary",
+  "prokodo-Label--secondary": "prokodo-Label--secondary",
+  "prokodo-Label--success": "prokodo-Label--success",
+  "prokodo-Label--warning": "prokodo-Label--warning",
+  "prokodo-Label--error": "prokodo-Label--error",
+  "prokodo-Label--info": "prokodo-Label--info",
+  "prokodo-Label--inherit": "prokodo-Label--inherit",
+  "prokodo-Label--white": "prokodo-Label--white",
   "prokodo-Label__highlighted": "prokodo-Label__highlighted",
-  "prokodo-Label__highlighted--error": "prokodo-Label__highlighted--error",
-  "prokodo-Label__text": "prokodo-Label__text"
+  "prokodo-Label__highlighted--error": "prokodo-Label__highlighted--error"
 };
 export {
   styles as default

package/dist/components/link/Link.css

@@ -127,7 +127,7 @@
 .prokodo-Link {
   text-decoration: none;
   cursor: pointer;
-  color: var(--color-grey-500);
+  color: var(--pk-link-color);
   font-weight: 500;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -155,38 +155,38 @@
 }
 .prokodo-Link--has-no-background:hover {
   text-decoration: underline;
-  color: var(--color-primary-500);
+  color: var(--pk-link-color-hover);
 }
 .prokodo-Link--has-no-background:focus {
-  color: var(--color-primary-500);
+  color: var(--pk-link-color-hover);
 }
 .prokodo-Link--has-no-background--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-link-color-primary);
 }
 .prokodo-Link--has-no-background--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-link-color-secondary);
 }
 .prokodo-Link--has-no-background--info {
-  color: var(--color-grey-300);
+  color: var(--pk-link-color-info);
 }
 .prokodo-Link--has-no-background--success {
-  color: var(--color-success);
+  color: var(--pk-link-color-success);
 }
 .prokodo-Link--has-no-background--warning {
-  color: var(--color-warning);
+  color: var(--pk-link-color-warning);
 }
 .prokodo-Link--has-no-background--error {
-  color: var(--color-error);
+  color: var(--pk-link-color-error);
 }
 .prokodo-Link--has-no-background--white {
-  color: var(--color-white);
+  color: var(--pk-link-color-white);
 }
 .prokodo-Link--has-no-background--white:hover {
-  color: var(--color-white);
+  color: var(--pk-link-color-white);
 }
 .prokodo-Link--has-no-background--primary:hover, .prokodo-Link--has-no-background--secondary:hover, .prokodo-Link--has-no-background--success:hover, .prokodo-Link--has-no-background--error:hover, .prokodo-Link--has-no-background--info:hover, .prokodo-Link--has-no-background--warning:hover {
-  color: var(--color-grey-500);
+  color: var(--pk-link-color-variant-hover);
 }
 .prokodo-Link--has-no-background--primary:focus, .prokodo-Link--has-no-background--secondary:focus, .prokodo-Link--has-no-background--success:focus, .prokodo-Link--has-no-background--error:focus, .prokodo-Link--has-no-background--info:focus, .prokodo-Link--has-no-background--warning:focus {
-  color: var(--color-grey-500);
+  color: var(--pk-link-color-variant-hover);
 }