@prokodo/ui 0.1.9 → 0.1.10

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

@@ -20,9 +20,11 @@ function AvatarView({
     { [variant]: true, [`has-size-${size}`]: true },
     className
   );
+  const defaultSide = getIconSize(size);
   const inner = /* @__PURE__ */ jsx("div", { ...rest, className: rootClass, tabIndex: -1, children: image ? /* @__PURE__ */ jsx(
     Image,
     {
+      fill: true,
       ...image,
       className: bem("image", void 0, image.className),
       tabIndex: 0
@@ -33,7 +35,7 @@ function AvatarView({
       className: bem("icon", { [variant]: true }),
       color: !["inherit", "white"].includes(variant) ? "white" : void 0,
       name: "UserIcon",
-      size: getIconSize(size)
+      size: defaultSide
     }
   ) });
   return redirect ? /* @__PURE__ */ jsx(

package/dist/components/card/Card.css

@@ -142,7 +142,7 @@
 }
 .prokodo-Card {
   position: relative;
-  color: var(--color-white);
+  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 */
@@ -168,12 +168,13 @@ html[data-theme=dark] .prokodo-Card--white {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
+  border-radius: 2rem;
+  z-index: 1;
 }
 html[data-theme=dark] .prokodo-Card__background {
   opacity: 0.7;
@@ -188,7 +189,7 @@ html[data-theme=dark] .prokodo-Card__background {
   position: relative;
   z-index: 2;
   padding: 1.5rem;
-  color: var(--color-grey-500);
+  color: var(--color-grey-900);
 }
 .prokodo-Card__content--has-link {
   cursor: pointer;
@@ -243,7 +244,7 @@ html[data-theme=dark] .prokodo-Card__background {
   position: relative;
 }
 .prokodo-Card--has-gradiant, .prokodo-Card--has-background {
-  color: var(--color-white);
+  color: var(--color-grey-900);
 }
 .prokodo-Card--has-shadow {
   box-shadow: var(--elevation-1);

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

@@ -142,7 +142,7 @@
 }
 .prokodo-Card {
   position: relative;
-  color: var(--color-white);
+  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 */
@@ -168,12 +168,13 @@ html[data-theme=dark] .prokodo-Card--white {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
+  border-radius: 2rem;
+  z-index: 1;
 }
 html[data-theme=dark] .prokodo-Card__background {
   opacity: 0.7;
@@ -188,7 +189,7 @@ html[data-theme=dark] .prokodo-Card__background {
   position: relative;
   z-index: 2;
   padding: 1.5rem;
-  color: var(--color-grey-500);
+  color: var(--color-grey-900);
 }
 .prokodo-Card__content--has-link {
   cursor: pointer;
@@ -243,7 +244,7 @@ html[data-theme=dark] .prokodo-Card__background {
   position: relative;
 }
 .prokodo-Card--has-gradiant, .prokodo-Card--has-background {
-  color: var(--color-white);
+  color: var(--color-grey-900);
 }
 .prokodo-Card--has-shadow {
   box-shadow: var(--elevation-1);

package/dist/components/headline/Headline.css

@@ -134,7 +134,7 @@
   /* Alignment */
 }
 .prokodo-Headline--inherit {
-  color: var(--color-grey-700);
+  color: var(--color-grey-900);
 }
 .prokodo-Headline--primary {
   color: var(--color-primary-500);

package/dist/components/headline/Headline.module.css

@@ -134,7 +134,7 @@
   /* Alignment */
 }
 .prokodo-Headline--inherit {
-  color: var(--color-grey-700);
+  color: var(--color-grey-900);
 }
 .prokodo-Headline--primary {
   color: var(--color-primary-500);

package/dist/components/link/Link.view.js

@@ -12,7 +12,7 @@ function LinkView({
   style,
   target,
   itemProp,
-  hasBackground,
+  hasBackground = false,
   ariaLabel,
   LinkTag,
   hasHandlers,

package/dist/components/sidenav/SideNav.css

@@ -161,37 +161,6 @@
 .prokodo-SideNav--collapsed {
   width: 56px;
 }
-.prokodo-SideNav__collape__label {
-  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-SideNav__collape__label {
-    font-size: 0.875rem;
-    line-height: 1.4;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-SideNav__collape__label {
-    font-size: 0.875rem;
-    line-height: 1.4;
-  }
-}
-.prokodo-SideNav__collape__label--is-hidden {
-  position: absolute;
-  top: auto;
-  left: -99999px;
-  width: 0;
-  height: 0;
-  text-indent: -99999px;
-}
 .prokodo-SideNav__toggle {
   position: relative;
   display: flex;
@@ -236,7 +205,7 @@
 }
 .prokodo-SideNav__link--is-active, .prokodo-SideNav__link:hover {
   text-decoration: none;
-  background: var(--color-grey-50);
+  background: var(--color-primary-100);
 }
 .prokodo-SideNav__link--is-active > div:first-of-type, .prokodo-SideNav__link:hover > div:first-of-type {
   position: relative;
@@ -255,6 +224,9 @@
 .prokodo-SideNav__link[aria-current=page] {
   background: var(--color-primary-50);
 }
+.prokodo-SideNav__icon {
+  color: var(--color-grey-900);
+}
 .prokodo-SideNav__icon__wrapper {
   display: flex;
   align-items: center;
@@ -263,7 +235,43 @@
   background: var(--color-grey-50);
   border-radius: 13px;
 }
+.prokodo-SideNav__collapse__icon {
+  color: var(--color-grey-700);
+}
+.prokodo-SideNav__collapse__label {
+  color: var(--color-grey-700);
+  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-SideNav__collapse__label {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-SideNav__collapse__label {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-SideNav__collapse__label--is-hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
 .prokodo-SideNav__label {
+  color: var(--color-grey-900);
   animation: label-in 150ms ease forwards;
   font-weight: 400;
   font-size: 1.125rem;

package/dist/components/sidenav/SideNav.module.css

@@ -161,37 +161,6 @@
 .prokodo-SideNav--collapsed {
   width: 56px;
 }
-.prokodo-SideNav__collape__label {
-  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-SideNav__collape__label {
-    font-size: 0.875rem;
-    line-height: 1.4;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-SideNav__collape__label {
-    font-size: 0.875rem;
-    line-height: 1.4;
-  }
-}
-.prokodo-SideNav__collape__label--is-hidden {
-  position: absolute;
-  top: auto;
-  left: -99999px;
-  width: 0;
-  height: 0;
-  text-indent: -99999px;
-}
 .prokodo-SideNav__toggle {
   position: relative;
   display: flex;
@@ -236,7 +205,7 @@
 }
 .prokodo-SideNav__link--is-active, .prokodo-SideNav__link:hover {
   text-decoration: none;
-  background: var(--color-grey-50);
+  background: var(--color-primary-100);
 }
 .prokodo-SideNav__link--is-active > div:first-of-type, .prokodo-SideNav__link:hover > div:first-of-type {
   position: relative;
@@ -255,6 +224,9 @@
 .prokodo-SideNav__link[aria-current=page] {
   background: var(--color-primary-50);
 }
+.prokodo-SideNav__icon {
+  color: var(--color-grey-900);
+}
 .prokodo-SideNav__icon__wrapper {
   display: flex;
   align-items: center;
@@ -263,7 +235,43 @@
   background: var(--color-grey-50);
   border-radius: 13px;
 }
+.prokodo-SideNav__collapse__icon {
+  color: var(--color-grey-700);
+}
+.prokodo-SideNav__collapse__label {
+  color: var(--color-grey-700);
+  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-SideNav__collapse__label {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-SideNav__collapse__label {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-SideNav__collapse__label--is-hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
 .prokodo-SideNav__label {
+  color: var(--color-grey-900);
   animation: label-in 150ms ease forwards;
   font-weight: 400;
   font-size: 1.125rem;

package/dist/components/sidenav/SideNav.module.scss.js

@@ -1,13 +1,15 @@
 const styles = {
   "prokodo-SideNav": "prokodo-SideNav",
   "prokodo-SideNav--collapsed": "prokodo-SideNav--collapsed",
-  "prokodo-SideNav__collape__label": "prokodo-SideNav__collape__label",
-  "prokodo-SideNav__collape__label--is-hidden": "prokodo-SideNav__collape__label--is-hidden",
   "prokodo-SideNav__toggle": "prokodo-SideNav__toggle",
   "prokodo-SideNav__list": "prokodo-SideNav__list",
   "prokodo-SideNav__link": "prokodo-SideNav__link",
   "prokodo-SideNav__link--is-active": "prokodo-SideNav__link--is-active",
+  "prokodo-SideNav__icon": "prokodo-SideNav__icon",
   "prokodo-SideNav__icon__wrapper": "prokodo-SideNav__icon__wrapper",
+  "prokodo-SideNav__collapse__icon": "prokodo-SideNav__collapse__icon",
+  "prokodo-SideNav__collapse__label": "prokodo-SideNav__collapse__label",
+  "prokodo-SideNav__collapse__label--is-hidden": "prokodo-SideNav__collapse__label--is-hidden",
   "prokodo-SideNav__label": "prokodo-SideNav__label",
   "label-in": "label-in",
   "prokodo-SideNav__label--collapsed": "prokodo-SideNav__label--collapsed",

package/dist/components/sidenav/SideNav.view.js

@@ -17,7 +17,8 @@ function SideNavView({
   onToggle,
   interactive = true,
   ariaLabel = "Main navigation",
-  className
+  className,
+  renderFooter
 }) {
   const renderItem = /* @__PURE__ */ __name((icon, label) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: bem("icon__wrapper"), children: /* @__PURE__ */ jsx(
@@ -50,10 +51,11 @@ function SideNavView({
                 {
                   size: "md",
                   ...iconProps,
+                  className: bem("collapse__icon", void 0, iconProps == null ? void 0 : iconProps.className),
                   name: collapsed ? collapsedIcon : unCollapsedIcon
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: bem("collape__label", { "is-hidden": collapsed }), children: collapsed ? collapsedLabel : unCollapsedLabel })
+              /* @__PURE__ */ jsx("span", { className: bem("collapse__label", { "is-hidden": collapsed }), children: collapsed ? collapsedLabel : unCollapsedLabel })
             ]
           }
         ),
@@ -69,7 +71,8 @@ function SideNavView({
             ),
             children: renderItem(icon, label)
           }
-        ) : /* @__PURE__ */ jsx(Fragment, { children: renderItem(icon, label) }) }, label)) }) })
+        ) : /* @__PURE__ */ jsx(Fragment, { children: renderItem(icon, label) }) }, label)) }) }),
+        renderFooter !== void 0 && !collapsed && renderFooter()
       ]
     }
   );

package/dist/components/skeleton/Skeleton.css

@@ -150,7 +150,7 @@
 }
 .prokodo-Skeleton {
   display: inline-block;
-  background-color: rgba(var(--color-black), 0.11);
+  background-color: rgba(255, 255, 255, 0.11);
   border-radius: 4px;
   position: relative;
   overflow: hidden;
@@ -158,13 +158,20 @@
   /* variants */
   /* animation hooks (keyframes live in effects sheet) */
 }
+html[data-theme=dark] .prokodo-Skeleton {
+  background-color: rgba(30, 48, 79, 0.11);
+}
 .prokodo-Skeleton::after {
   content: "";
   display: block;
   position: absolute;
   inset: 0;
   left: -100%;
-  background: linear-gradient(90deg, transparent, rgba(var(--color-white), 0.6), transparent);
+  background: linear-gradient(90deg, transparent, var(--color-white), transparent);
+  opacity: 0.6;
+}
+html[data-theme=dark] .prokodo-Skeleton::after {
+  background: linear-gradient(90deg, transparent, var(--color-primary-50), transparent);
 }
 .prokodo-Skeleton--text {
   height: 1em;

package/dist/components/skeleton/Skeleton.module.css

@@ -150,7 +150,7 @@
 }
 .prokodo-Skeleton {
   display: inline-block;
-  background-color: rgba(var(--color-black), 0.11);
+  background-color: rgba(255, 255, 255, 0.11);
   border-radius: 4px;
   position: relative;
   overflow: hidden;
@@ -158,13 +158,20 @@
   /* variants */
   /* animation hooks (keyframes live in effects sheet) */
 }
+html[data-theme=dark] .prokodo-Skeleton {
+  background-color: rgba(30, 48, 79, 0.11);
+}
 .prokodo-Skeleton::after {
   content: "";
   display: block;
   position: absolute;
   inset: 0;
   left: -100%;
-  background: linear-gradient(90deg, transparent, rgba(var(--color-white), 0.6), transparent);
+  background: linear-gradient(90deg, transparent, var(--color-white), transparent);
+  opacity: 0.6;
+}
+html[data-theme=dark] .prokodo-Skeleton::after {
+  background: linear-gradient(90deg, transparent, var(--color-primary-50), transparent);
 }
 .prokodo-Skeleton--text {
   height: 1em;

package/dist/components/table/Table.css

@@ -178,10 +178,10 @@
   border-bottom: 1px solid var(--color-grey-200);
 }
 .prokodo-Table__body__row--has-link:hover {
-  background: var(--color-grey-50);
+  background: var(--color-primary-20);
 }
 .prokodo-Table__body__row--has-link:focus {
-  background: var(--color-grey-50);
+  background: var(--color-primary-20);
 }
 .prokodo-Table__caption {
   color: var(--color-grey-300);
@@ -220,6 +220,7 @@
   justify-content: center;
   align-items: center;
   padding: 1.5rem 0.5rem;
+  color: var(--color-grey-900);
   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;

package/dist/components/table/Table.js

@@ -12,6 +12,7 @@ import { RichText } from "../rich-text/RichText.js";
 const bem = create(styles, "Table");
 const Table = /* @__PURE__ */ __name(({
   id,
+  containerClassName,
   title,
   titleProps,
   content,
@@ -23,7 +24,7 @@ const Table = /* @__PURE__ */ __name(({
   ...props
 }) => {
   const ariaLabelId = `Table-${id}`;
-  return /* @__PURE__ */ jsxs("div", { className: bem(), children: [
+  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, containerClassName), children: [
     isString(title) && /* @__PURE__ */ jsx(Animated, { animation: "left-right", className: bem("header"), children: /* @__PURE__ */ jsx(
       Headline,
       {

package/dist/components/table/Table.module.css

@@ -178,10 +178,10 @@
   border-bottom: 1px solid var(--color-grey-200);
 }
 .prokodo-Table__body__row--has-link:hover {
-  background: var(--color-grey-50);
+  background: var(--color-primary-20);
 }
 .prokodo-Table__body__row--has-link:focus {
-  background: var(--color-grey-50);
+  background: var(--color-primary-20);
 }
 .prokodo-Table__caption {
   color: var(--color-grey-300);
@@ -220,6 +220,7 @@
   justify-content: center;
   align-items: center;
   padding: 1.5rem 0.5rem;
+  color: var(--color-grey-900);
   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;

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.1.9";
+const PROKODO_UI_VERSION = "0.1.10";
 export {
   PROKODO_UI_VERSION
 };