@prokodo/ui 0.1.15 → 1.0.1

package/dist/components/avatar/Avatar.module.css

@@ -134,25 +134,28 @@
   background-color: transparent;
 }
 .prokodo-Avatar--primary {
-  background-color: var(--color-primary-500);
+  background-color: var(--pk-color-brand);
 }
 .prokodo-Avatar--secondary {
-  background-color: var(--color-secondary-500);
+  background-color: var(--pk-color-accent);
 }
 .prokodo-Avatar--info {
-  background-color: var(--color-grey-300);
+  background-color: var(--pk-color-muted);
 }
 .prokodo-Avatar--success {
-  background-color: var(--color-success);
+  background-color: var(--pk-color-success);
 }
 .prokodo-Avatar--warning {
-  background-color: var(--color-warning);
+  background-color: var(--pk-color-warning);
 }
 .prokodo-Avatar--error {
-  background-color: var(--color-error);
+  background-color: var(--pk-color-error);
 }
 .prokodo-Avatar--white {
-  background-color: var(--color-white);
+  background-color: var(--pk-palette-white);
+}
+.prokodo-Avatar--inherit {
+  color: var(--pk-color-fg);
 }
 .prokodo-Avatar--has-size-xs {
   width: 30px;
@@ -183,6 +186,6 @@
   border-radius: 100%;
 }
 .prokodo-Avatar__link {
-  box-shadow: var(--elevation-1);
+  box-shadow: var(--pk-shadow-sm);
   border-radius: 200px;
 }

package/dist/components/avatar/Avatar.module.scss.js

@@ -7,6 +7,7 @@ const styles = {
   "prokodo-Avatar--warning": "prokodo-Avatar--warning",
   "prokodo-Avatar--error": "prokodo-Avatar--error",
   "prokodo-Avatar--white": "prokodo-Avatar--white",
+  "prokodo-Avatar--inherit": "prokodo-Avatar--inherit",
   "prokodo-Avatar--has-size-xs": "prokodo-Avatar--has-size-xs",
   "prokodo-Avatar--has-size-sm": "prokodo-Avatar--has-size-sm",
   "prokodo-Avatar--has-size-md": "prokodo-Avatar--has-size-md",

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

@@ -10,7 +10,7 @@ import { Image } from "../image/Image.js";
 const bem = create(styles, "Avatar");
 function AvatarView({
   className,
-  variant = "inherit",
+  color = "inherit",
   size = "sm",
   image,
   redirect,
@@ -19,7 +19,7 @@ function AvatarView({
 }) {
   const rootClass = bem(
     void 0,
-    { [variant]: true, [`has-size-${size}`]: true },
+    { [color]: true, [`has-size-${size}`]: true },
     className
   );
   const iconSize = getIconSize(size);
@@ -49,8 +49,8 @@ function AvatarView({
         iconOverride ? iconOverride : /* @__PURE__ */ jsx(
           Icon,
           {
-            className: bem("icon", { [variant]: true }),
-            color: !["inherit", "white"].includes(variant) ? "white" : void 0,
+            className: bem("icon", { [color]: true }),
+            color: !["inherit", "white"].includes(color) ? "white" : void 0,
             name: "UserIcon",
             size: iconSize
           }
@@ -64,7 +64,7 @@ function AvatarView({
       ...redirect,
       className: bem(
         "link",
-        { [variant]: true, [`has-size-${size}`]: true },
+        { [color]: true, [`has-size-${size}`]: true },
         redirect.className
       ),
       children: inner

package/dist/components/button/Button.client.js

@@ -1,28 +1,24 @@
 "use client";
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import LinkClient from "../link/Link.client.js";
 import { ButtonView } from "./Button.view.js";
-import { Loading } from "../loading/Loading.js";
 function ButtonClient(props, ref) {
   const { loading, iconProps = {}, ...rest } = props;
   const isIconOnly = typeof (iconProps == null ? void 0 : iconProps.name) === "string" && !props.title;
-  const finalIconProps = Boolean(loading) ? { name: void 0 } : iconProps;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    Boolean(loading) && /* @__PURE__ */ jsx(Loading, { size: "xs" }),
-    /* @__PURE__ */ jsx(
-      ButtonView,
-      {
-        ...rest,
-        buttonRef: ref,
-        iconProps: finalIconProps,
-        isIconOnly: Boolean(isIconOnly),
-        LinkComponent: LinkClient
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    ButtonView,
+    {
+      ...rest,
+      buttonRef: ref,
+      iconProps,
+      isIconOnly: Boolean(isIconOnly),
+      LinkComponent: LinkClient,
+      loading
+    }
+  );
 }
 __name(ButtonClient, "ButtonClient");
 const ButtonClient$1 = forwardRef(ButtonClient);

package/dist/components/button/Button.css

@@ -125,12 +125,16 @@
  * content.
  */
 .prokodo-Button {
-  display: inline-block;
-  border-radius: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--pk-space-sm);
+  border-radius: var(--pk-button-radius);
   border-width: 0;
-  padding: 0.875rem 1.5rem;
-  background-color: var(--color-grey-50);
-  box-shadow: var(--elevation-1);
+  padding: var(--pk-button-padding-y) var(--pk-button-padding-x);
+  background-color: var(--pk-button-bg, var(--pk-color-brand, #1E90FF));
+  color: var(--pk-button-fg, var(--pk-color-fg, #111));
+  box-shadow: var(--pk-button-shadow);
   cursor: pointer;
   background: var(--gradient-background-inherit);
   font-weight: 400 !important;
@@ -143,9 +147,6 @@
   text-align: left !important;
   text-decoration: none !important;
 }
-html[data-theme=dark] .prokodo-Button {
-  background-color: var(--color-grey-100);
-}
 .prokodo-Button:hover {
   box-shadow: none;
 }
@@ -153,126 +154,117 @@ html[data-theme=dark] .prokodo-Button {
   outline: 3px solid #1E90FF;
   outline-offset: 4px;
   border-radius: 1.5rem;
-  border-radius: 1.5rem;
-}
-.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
-  color: #000000;
+  border-radius: var(--pk-button-radius);
 }
 .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
 }
 .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-inherit {
+  background: linear-gradient(112deg, var(--pk-color-surface-raised) 0%, var(--pk-color-border) 100%);
+  background-color: var(--pk-color-surface-raised);
 }
 .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 {
+.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);
+  color: var(--pk-palette-white);
 }
 .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;
+  color: var(--pk-palette-white);
+}
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-text-primary, .prokodo-Button--has-variant-outlined--has-outline-primary {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-brand) 18%, transparent);
 }
-html[data-theme=dark] .prokodo-Button--has-bg-error {
-  color: #FFFFFF;
+.prokodo-Button--has-bg-secondary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-variant-outlined--has-outline-secondary {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-accent) 18%, transparent);
+}
+.prokodo-Button--has-bg-success, .prokodo-Button--has-text-success, .prokodo-Button--has-variant-outlined--has-outline-success {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-success) 18%, transparent);
+}
+.prokodo-Button--has-bg-warning, .prokodo-Button--has-text-warning, .prokodo-Button--has-variant-outlined--has-outline-warning {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-warning) 18%, transparent);
+}
+.prokodo-Button--has-bg-error, .prokodo-Button--has-text-error, .prokodo-Button--has-variant-outlined--has-outline-error {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-error) 18%, transparent);
+}
+.prokodo-Button--has-bg-info, .prokodo-Button--has-text-info, .prokodo-Button--has-variant-outlined--has-outline-info, .prokodo-Button--has-bg-inherit, .prokodo-Button--has-text-inherit, .prokodo-Button--has-variant-outlined--has-outline-inherit {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-fg) 10%, transparent);
 }
 .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;
-  background-color: var(--color-grey-50);
-  padding: 0.75rem 1rem;
-  transition: background-color 0.3s ease-in-out;
+  background-color: color-mix(in srgb, currentColor 8%, transparent);
+  padding: var(--pk-space-md) var(--pk-space-lg);
+  transition: background-color var(--pk-timing-normal) ease-in-out, color var(--pk-timing-fast) ease-in-out;
 }
 .prokodo-Button--has-text-inherit:hover, .prokodo-Button--has-text-primary:hover, .prokodo-Button--has-text-secondary:hover, .prokodo-Button--has-text-info:hover, .prokodo-Button--has-text-success:hover, .prokodo-Button--has-text-warning:hover, .prokodo-Button--has-text-error:hover {
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
 }
 .prokodo-Button--has-text-inherit {
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
 .prokodo-Button--has-text-inherit:hover {
-  background-color: var(--color-grey-500);
+  background-color: var(--pk-color-muted);
 }
 .prokodo-Button--has-text-primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Button--has-text-primary:hover {
-  background-color: var(--color-primary-500);
+  background-color: var(--pk-color-brand);
 }
 .prokodo-Button--has-text-secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Button--has-text-secondary:hover {
-  background-color: var(--color-secondary-500);
+  background-color: var(--pk-color-accent);
+  color: var(--pk-palette-black);
 }
-.prokodo-Button--is-disabled, .prokodo-Button--has-text-info {
-  color: var(--color-grey-700);
+.prokodo-Button--has-text-info {
+  color: var(--pk-color-fg);
 }
-.prokodo-Button--is-disabled:hover, .prokodo-Button--has-text-info:hover {
-  background-color: var(--color-grey-100);
+.prokodo-Button--has-text-info:hover {
+  background-color: var(--pk-color-muted);
 }
 .prokodo-Button--has-text-success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Button--has-text-success:hover {
-  background-color: var(--color-success);
+  background-color: var(--pk-color-success);
 }
 .prokodo-Button--has-text-warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Button--has-text-warning:hover {
-  background-color: var(--color-warning);
+  background-color: var(--pk-color-warning);
+  color: var(--pk-palette-black);
 }
 .prokodo-Button--has-text-error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Button--has-text-error:hover {
-  background-color: var(--color-error);
+  background-color: var(--pk-color-error);
 }
 .prokodo-Button--has-variant-outlined {
   position: relative;
   background: none;
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
 .prokodo-Button--has-variant-outlined::before {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  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;
@@ -280,124 +272,86 @@ html[data-theme=dark] .prokodo-Button--has-bg-error {
   z-index: 0;
   background: var(--gradient-border-4);
 }
-html[data-theme=dark] .prokodo-Button--has-variant-outlined {
-  background: none;
-}
 .prokodo-Button--has-variant-outlined--has-outline-inherit {
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
 .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);
+  color: var(--pk-color-fg);
 }
 .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);
+  color: var(--pk-color-fg);
 }
 .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);
+  color: var(--pk-color-fg);
 }
 .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);
+  color: var(--pk-color-fg);
 }
 .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);
+  color: var(--pk-color-fg);
 }
 .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);
+  color: var(--pk-color-fg);
 }
 .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;
-}
 .prokodo-Button--icon-only {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   border-radius: 10000px;
-  padding: 0.75rem;
+  padding: var(--pk-space-md);
 }
 .prokodo-Button--has-fullWidth {
-  display: flex;
-  justify-content: center;
   width: 100%;
 }
+.prokodo-Button--is-loading {
+  cursor: progress;
+  pointer-events: none;
+}
 .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%);
+  opacity: 0.45;
+  pointer-events: none;
 }
 .prokodo-Button__title {
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: var(--pk-space-xs);
 }
 .prokodo-Button__image {
-  margin-right: 0.5rem;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 .prokodo-Button__icon {
-  margin-right: 0.5rem;
-}
-.prokodo-Button__icon--icon-only {
-  margin-right: 0;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 .prokodo-Button__link {
-  display: table;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: inherit;
   width: 100%;
   color: inherit;
   font-weight: 400;
@@ -410,9 +364,6 @@ html[data-theme=dark] .prokodo-Button--is-disabled::before {
   text-align: left;
   text-decoration: none;
 }
-.prokodo-Button__link--icon-only {
-  display: contents;
-}
 .prokodo-Button__link:hover {
   text-decoration: none;
 }
@@ -420,9 +371,6 @@ html[data-theme=dark] .prokodo-Button--is-disabled::before {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 2rem;
+  gap: var(--pk-space-sm);
   width: 100%;
-}
-.prokodo-Button__content--icon-only {
-  border-radius: 2000rem;
 }