@prokodo/ui 0.1.13 → 0.1.15

package/README.md

@@ -168,6 +168,8 @@ export default function GalleryPage() {
 | Calendly            |               ✅               |                 ✅                 |
 | Card                |               ✅               |                 ✅                 |
 | Carousel            |               ✅               |                 ✅                 |
+| Checkbox            |               ✅               |                 ✅                 |
+| CheckboxGroup       |               ✅               |                 ✅                 |
 | Chip                |               ✅               |                 ✅                 |
 | DatePicker          |               ✅               |                 ✅                 |
 | Dialog              |               ✅               |                 ✅                 |

package/dist/components/RTE/RTE.client.js

@@ -263,7 +263,6 @@ function RTEClient(props) {
       const root = q.root;
       const onRootClick = /* @__PURE__ */ __name((ev) => {
         var _a2, _b2;
-        if (Boolean(disabled) || Boolean(readOnly)) return;
         const el = ev.target;
         if (!el || el.tagName !== "IMG") return;
         const img = el;

package/dist/components/RTE/RTE.js

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

package/dist/components/accordion/Accordion.js

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

package/dist/components/accordion/Accordion.view.js

@@ -37,7 +37,7 @@ function AccordionView({
           actions,
           className: itemCls
         } = item;
-        const accId = `${id}-${title}`;
+        const accId = `${id}-${index}`;
         const isExpanded = expandedIndex === index;
         const accHeaderProps = {
           "aria-controls": `${accId}-content`,

package/dist/components/animated/Animated.client.js

@@ -7,7 +7,11 @@ import { isNumber } from "../../helpers/validations.js";
 import { AnimatedView } from "./Animated.view.js";
 function AnimatedClient(props) {
   const {
-    delay = 0,
+    /* istanbul ignore next */
+    delay = (
+      /* istanbul ignore next */
+      0
+    ),
     onAnimate,
     disabled,
     speed,
@@ -20,10 +24,14 @@ function AnimatedClient(props) {
   const timeoutRef = useRef(null);
   useEffect(() => {
     if (Boolean(disabled)) return;
-    timeoutRef.current = window.setTimeout(() => {
-      setVisible(true);
-      onAnimate == null ? void 0 : onAnimate(true);
-    }, delay);
+    timeoutRef.current = window.setTimeout(
+      /* istanbul ignore next */
+      () => {
+        setVisible(true);
+        onAnimate == null ? void 0 : onAnimate(true);
+      },
+      delay
+    );
     return () => {
       if (timeoutRef.current !== null && isNumber(timeoutRef.current)) {
         clearTimeout(timeoutRef.current);

package/dist/components/animated/Animated.js

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

package/dist/components/animatedText/AnimatedText.client.js

@@ -5,8 +5,16 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { AnimatedTextView } from "./AnimatedText.view.js";
 function AnimatedTextClient({
-  speed = 30,
-  delay = 0,
+  /* istanbul ignore next */
+  speed = (
+    /* istanbul ignore next */
+    30
+  ),
+  /* istanbul ignore next */
+  delay = (
+    /* istanbul ignore next */
+    0
+  ),
   disabled,
   children,
   ...rest

package/dist/components/animatedText/AnimatedText.js

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

package/dist/components/autocomplete/Autocomplete.client.js

@@ -32,7 +32,11 @@ function AutocompleteClient({
     window.addEventListener("mousedown", onClickOutside);
     return () => window.removeEventListener("mousedown", onClickOutside);
   }, [open]);
-  const list = useMemo(() => items ?? [], [items]);
+  const list = useMemo(
+    /* istanbul ignore next */
+    () => items ?? [],
+    [items]
+  );
   const updateListAnchor = useCallback(() => {
     const root = rootRef.current;
     if (!root) return;

package/dist/components/autocomplete/Autocomplete.js

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

package/dist/components/autocomplete/Autocomplete.view.js

@@ -94,13 +94,22 @@ function AutocompleteView({
         className: bem("list", void 0, listClassName),
         role: "listbox",
         tabIndex: -1,
-        style: {
-          top: isNumber(_clientState == null ? void 0 : _clientState.listTop) ? `${_clientState.listTop}px` : void 0
-        },
+        style: (
+          /* istanbul ignore next */
+          {
+            top: isNumber(_clientState == null ? void 0 : _clientState.listTop) ? `${_clientState.listTop}px` : (
+              /* istanbul ignore next */
+              void 0
+            )
+          }
+        ),
         children: Boolean(loading) ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("p", { className: bem("state"), children: [
           /* @__PURE__ */ jsx(Loading, { size: "sm" }),
           loadingText
-        ] }) }) : !canSearch ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("p", { className: bem("state"), children: isNumber(minQueryLength) ? (minQueryLengthText ?? "{count} characters required").replaceAll("{count}", String(minQueryLength)) : "Type to search" }) }) : !hasItems ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("p", { className: bem("state"), children: emptyText }) }) : items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx(
+        ] }) }) : !canSearch ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("p", { className: bem("state"), children: isNumber(minQueryLength) ? (minQueryLengthText ?? "{count} characters required").replaceAll("{count}", String(minQueryLength)) : (
+          /* istanbul ignore next */
+          "Type to search"
+        ) }) }) : !hasItems ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("p", { className: bem("state"), children: emptyText }) }) : items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx(
           "li",
           {
             "aria-selected": (_clientState == null ? void 0 : _clientState.activeIndex) === index,

package/dist/components/avatar/Avatar.js

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

package/dist/components/avatar/Avatar.view.js

@@ -14,6 +14,7 @@ function AvatarView({
   size = "sm",
   image,
   redirect,
+  iconOverride,
   ...rest
 }) {
   const rootClass = bem(
@@ -28,10 +29,13 @@ function AvatarView({
       ...rest,
       className: rootClass,
       tabIndex: -1,
-      style: isNumber(size) ? {
-        width: size,
-        height: size
-      } : void 0,
+      style: isNumber(size) ? (
+        /* istanbul ignore next */
+        {
+          width: size,
+          height: size
+        }
+      ) : void 0,
       children: image ? /* @__PURE__ */ jsx(
         Image,
         {
@@ -40,14 +44,17 @@ function AvatarView({
           className: bem("image", void 0, image.className),
           tabIndex: 0
         }
-      ) : /* @__PURE__ */ jsx(
-        Icon,
-        {
-          className: bem("icon", { [variant]: true }),
-          color: !["inherit", "white"].includes(variant) ? "white" : void 0,
-          name: "UserIcon",
-          size: iconSize
-        }
+      ) : (
+        /* istanbul ignore next */
+        iconOverride ? iconOverride : /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: bem("icon", { [variant]: true }),
+            color: !["inherit", "white"].includes(variant) ? "white" : void 0,
+            name: "UserIcon",
+            size: iconSize
+          }
+        )
       )
     }
   );

package/dist/components/base-link/BaseLink.js

@@ -6,7 +6,10 @@ const isInteractive = /* @__PURE__ */ __name((p) => typeof p.linkComponent === "
 const BaseLink = createIsland({
   name: "BaseLink",
   Server: BaseLinkServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./BaseLink.lazy.js"), "loadLazy"),
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./BaseLink.lazy.js"), "loadLazy")
+  ),
   isInteractive
 });
 export {

package/dist/components/base-link/BaseLink.view.js

@@ -43,12 +43,14 @@ function BaseLinkView({
   const pointerOff = { pointerEvents: "none" };
   const tabIndex = !isNull(disabled) ? -1 : void 0;
   const linkStyle = !isNull(disabled) ? { ...pointerOff, ...style } : style;
+  const ariaDisabled = !isNull(disabled) ? true : void 0;
   const { linkComponent, ...aProps } = restProps;
   if (linkComponent) {
     const LinkTag = linkComponent;
     return /* @__PURE__ */ jsx(
       LinkTag,
       {
+        "aria-disabled": ariaDisabled,
         href: finalHref,
         rel: computedRel,
         style: linkStyle,
@@ -63,6 +65,7 @@ function BaseLinkView({
     "a",
     {
       ...aProps,
+      "aria-disabled": ariaDisabled,
       href: finalHref,
       rel: computedRel,
       style: linkStyle,

package/dist/components/button/Button.css

@@ -155,29 +155,58 @@ html[data-theme=dark] .prokodo-Button {
   border-radius: 1.5rem;
   border-radius: 1.5rem;
 }
-.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
-  color: #FFFFFF !important;
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
-.prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
-  color: var(--color-black);
+.prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-bg-primary {
   background: var(--gradient-background-primary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-primary {
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-inherit {
+  color: var(--color-grey-900);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
 }
 .prokodo-Button--has-bg-secondary {
   background: var(--gradient-background-secondary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-secondary {
+  color: #FFFFFF;
 }
 .prokodo-Button--is-disabled, .prokodo-Button--has-bg-info {
   background: var(--gradient-background-info);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--is-disabled, html[data-theme=dark] .prokodo-Button--has-bg-info {
+  color: var(--color-grey-700);
 }
 .prokodo-Button--has-bg-success {
   background: var(--gradient-background-success);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-success {
+  color: #000000;
 }
 .prokodo-Button--has-bg-warning {
   background: var(--gradient-background-warning);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
 .prokodo-Button--has-bg-error {
   background: var(--gradient-background-error);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-text-inherit, .prokodo-Button--has-text-primary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-text-info, .prokodo-Button--has-text-success, .prokodo-Button--has-text-warning, .prokodo-Button--has-text-error {
   background: none;
@@ -233,7 +262,7 @@ html[data-theme=dark] .prokodo-Button {
 .prokodo-Button--has-variant-outlined {
   position: relative;
   background: none;
-  color: var(--color-black) !important;
+  color: var(--color-black);
 }
 .prokodo-Button--has-variant-outlined::before {
   content: "";
@@ -254,6 +283,66 @@ html[data-theme=dark] .prokodo-Button {
 html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
+.prokodo-Button--has-variant-outlined--has-outline-inherit {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-inherit::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary::before {
+  background: var(--gradient-border-4);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary::before {
+  background: var(--gradient-border-2);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info::before {
+  background: var(--gradient-border-info);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-info {
+  color: #FFFFFF;
+}
+.prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-success::before {
+  background: var(--gradient-border-success);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-success);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning::before {
+  background: var(--gradient-border-warning);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-warning);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error::before {
+  background: var(--gradient-border-error);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-error);
+}
 .prokodo-Button--has-image, .prokodo-Button--has-icon {
   display: flex;
   align-items: center;
@@ -272,6 +361,26 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
 }
 .prokodo-Button--is-disabled {
   cursor: default;
+  box-shadow: none;
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+.prokodo-Button--is-disabled::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--is-disabled:hover {
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled {
+  color: var(--color-grey-600);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled::before {
+  background: linear-gradient(112deg, var(--color-grey-300) 0%, var(--color-grey-500) 100%);
 }
 .prokodo-Button__title {
   display: flex;
@@ -315,6 +424,5 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   width: 100%;
 }
 .prokodo-Button__content--icon-only {
-  padding: 0.5rem;
   border-radius: 2000rem;
 }

package/dist/components/button/Button.js

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

package/dist/components/button/Button.module.css

@@ -155,29 +155,58 @@ html[data-theme=dark] .prokodo-Button {
   border-radius: 1.5rem;
   border-radius: 1.5rem;
 }
-.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
-  color: #FFFFFF !important;
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
-.prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
-  color: var(--color-black);
+.prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-bg-primary {
   background: var(--gradient-background-primary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-primary {
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-inherit {
+  color: var(--color-grey-900);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
 }
 .prokodo-Button--has-bg-secondary {
   background: var(--gradient-background-secondary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-secondary {
+  color: #FFFFFF;
 }
 .prokodo-Button--is-disabled, .prokodo-Button--has-bg-info {
   background: var(--gradient-background-info);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--is-disabled, html[data-theme=dark] .prokodo-Button--has-bg-info {
+  color: var(--color-grey-700);
 }
 .prokodo-Button--has-bg-success {
   background: var(--gradient-background-success);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-success {
+  color: #000000;
 }
 .prokodo-Button--has-bg-warning {
   background: var(--gradient-background-warning);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
 .prokodo-Button--has-bg-error {
   background: var(--gradient-background-error);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-text-inherit, .prokodo-Button--has-text-primary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-text-info, .prokodo-Button--has-text-success, .prokodo-Button--has-text-warning, .prokodo-Button--has-text-error {
   background: none;
@@ -233,7 +262,7 @@ html[data-theme=dark] .prokodo-Button {
 .prokodo-Button--has-variant-outlined {
   position: relative;
   background: none;
-  color: var(--color-black) !important;
+  color: var(--color-black);
 }
 .prokodo-Button--has-variant-outlined::before {
   content: "";
@@ -254,6 +283,66 @@ html[data-theme=dark] .prokodo-Button {
 html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
+.prokodo-Button--has-variant-outlined--has-outline-inherit {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-inherit::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary::before {
+  background: var(--gradient-border-4);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary::before {
+  background: var(--gradient-border-2);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info::before {
+  background: var(--gradient-border-info);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-info {
+  color: #FFFFFF;
+}
+.prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-success::before {
+  background: var(--gradient-border-success);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-success);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning::before {
+  background: var(--gradient-border-warning);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-warning);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error::before {
+  background: var(--gradient-border-error);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-error);
+}
 .prokodo-Button--has-image, .prokodo-Button--has-icon {
   display: flex;
   align-items: center;
@@ -272,6 +361,26 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
 }
 .prokodo-Button--is-disabled {
   cursor: default;
+  box-shadow: none;
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+.prokodo-Button--is-disabled::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--is-disabled:hover {
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled {
+  color: var(--color-grey-600);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled::before {
+  background: linear-gradient(112deg, var(--color-grey-300) 0%, var(--color-grey-500) 100%);
 }
 .prokodo-Button__title {
   display: flex;
@@ -315,6 +424,5 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   width: 100%;
 }
 .prokodo-Button__content--icon-only {
-  padding: 0.5rem;
   border-radius: 2000rem;
 }