@prokodo/ui 0.1.15 → 1.0.0

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

@@ -127,43 +127,37 @@
  */
 .prokodo-Headline {
   margin: 0;
-  /* Basale Farb-Varianten (ohne Gradients) */
-  /* Highlight-Grundlage */
+  /* Color variants (mapped to semantic design tokens) */
   /* Varianten mit Highlight (mit Gradients/Shadow) */
   /* Größen */
   /* Alignment */
 }
 .prokodo-Headline--inherit {
-  color: var(--color-grey-900);
+  color: var(--pk-color-fg);
 }
 .prokodo-Headline--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Headline--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Headline--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Headline--info {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
 }
 .prokodo-Headline--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Headline--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Headline--white {
-  color: #fff;
+  color: var(--pk-palette-white);
 }
 .prokodo-Headline--black {
-  color: var(--color-black);
-}
-.prokodo-Headline--is-highlighted {
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  color: var(--pk-palette-black);
 }
 .prokodo-Headline--inherit--highlighted {
   background-image: var(--gradient-text-grey);
@@ -206,6 +200,12 @@
   -webkit-text-fill-color: transparent;
   filter: drop-shadow(var(--elevation-1--text));
 }
+.prokodo-Headline--info--highlighted {
+  background-image: var(--gradient-text-grey);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
 .prokodo-Headline--xs {
   font-weight: 400;
   font-size: 1rem;

package/dist/components/headline/Headline.module.scss.js

@@ -9,13 +9,13 @@ const styles = {
   "prokodo-Headline--error": "prokodo-Headline--error",
   "prokodo-Headline--white": "prokodo-Headline--white",
   "prokodo-Headline--black": "prokodo-Headline--black",
-  "prokodo-Headline--is-highlighted": "prokodo-Headline--is-highlighted",
   "prokodo-Headline--inherit--highlighted": "prokodo-Headline--inherit--highlighted",
   "prokodo-Headline--primary--highlighted": "prokodo-Headline--primary--highlighted",
   "prokodo-Headline--secondary--highlighted": "prokodo-Headline--secondary--highlighted",
   "prokodo-Headline--success--highlighted": "prokodo-Headline--success--highlighted",
   "prokodo-Headline--warning--highlighted": "prokodo-Headline--warning--highlighted",
   "prokodo-Headline--error--highlighted": "prokodo-Headline--error--highlighted",
+  "prokodo-Headline--info--highlighted": "prokodo-Headline--info--highlighted",
   "prokodo-Headline--xs": "prokodo-Headline--xs",
   "prokodo-Headline--sm": "prokodo-Headline--sm",
   "prokodo-Headline--md": "prokodo-Headline--md",

package/dist/components/headline/Headline.variants.js

@@ -2,7 +2,10 @@ const POSSIBLE_HIGHLIGHTS = [
   "inherit",
   "primary",
   "secondary",
-  "white"
+  "success",
+  "warning",
+  "error",
+  "info"
 ];
 export {
   POSSIBLE_HIGHLIGHTS

package/dist/components/icon/Icon.css

@@ -138,44 +138,44 @@
   --webkit-mask-position: center;
 }
 .prokodo-Icon--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Icon--primary:hover {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Icon--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Icon--secondary:hover {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Icon--info {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
 }
 .prokodo-Icon--info:hover {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
 }
 .prokodo-Icon--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Icon--success:hover {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Icon--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Icon--warning:hover {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Icon--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Icon--error:hover {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Icon--white {
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
 }
 .prokodo-Icon--white:hover {
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
 }

package/dist/components/icon/Icon.module.css

@@ -138,44 +138,44 @@
   --webkit-mask-position: center;
 }
 .prokodo-Icon--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Icon--primary:hover {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Icon--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Icon--secondary:hover {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Icon--info {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
 }
 .prokodo-Icon--info:hover {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
 }
 .prokodo-Icon--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Icon--success:hover {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Icon--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Icon--warning:hover {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Icon--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Icon--error:hover {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Icon--white {
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
 }
 .prokodo-Icon--white:hover {
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
 }

package/dist/components/image/Image.css

@@ -132,14 +132,15 @@
   width: 100%;
   height: 100%;
   margin: 0;
-  padding-bottom: 1rem;
+  padding-bottom: var(--pk-space-lg);
 }
 .prokodo-Image__caption {
   position: absolute;
   width: 100%;
-  bottom: -1rem;
+  bottom: calc(-1 * var(--pk-space-lg));
   left: 0;
-  opacity: 0.5;
+  opacity: 0.6;
+  color: var(--pk-color-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;

package/dist/components/image/Image.module.css

@@ -132,14 +132,15 @@
   width: 100%;
   height: 100%;
   margin: 0;
-  padding-bottom: 1rem;
+  padding-bottom: var(--pk-space-lg);
 }
 .prokodo-Image__caption {
   position: absolute;
   width: 100%;
-  bottom: -1rem;
+  bottom: calc(-1 * var(--pk-space-lg));
   left: 0;
-  opacity: 0.5;
+  opacity: 0.6;
+  color: var(--pk-color-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;

package/dist/components/image-text/ImageText.css

@@ -124,23 +124,25 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-.prokodo-ImageText__grid {
-  position: relative;
-  flex-direction: column-reverse !important;
-}
-@media screen and (min-width: 960px) {
-  .prokodo-ImageText__grid {
-    flex-direction: row !important;
+@keyframes ImageText_borderFlowDown {
+  from {
+    background-position: 0 -100%;
+  }
+  to {
+    background-position: 0 100%;
   }
 }
-.prokodo-ImageText__grid--is-reverse {
-  flex-direction: column-reverse !important;
-}
-@media screen and (min-width: 960px) {
-  .prokodo-ImageText__grid--is-reverse {
-    flex-direction: row-reverse !important;
+@keyframes ImageText_borderFlowUp {
+  from {
+    background-position: 0 100%;
+  }
+  to {
+    background-position: 0 -100%;
   }
 }
+.prokodo-ImageText__grid {
+  position: relative;
+}
 .prokodo-ImageText__sub__headline {
   text-transform: uppercase;
 }
@@ -174,7 +176,7 @@
   }
 }
 .prokodo-ImageText__content__paragraph {
-  color: var(--color-grey-300);
+  color: var(--pk-image-text-content-color);
 }
 .prokodo-ImageText__animated__container {
   width: 100%;
@@ -189,6 +191,33 @@
   align-items: center;
   align-self: end;
 }
+@media screen and (min-width: 960px) {
+  .prokodo-ImageText__image {
+    order: -1;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-ImageText__image--is-reverse {
+    order: 1;
+  }
+}
 .prokodo-ImageText__image__src {
   width: 100%;
+}
+.prokodo-ImageText__animated-border {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  padding: var(--pk-space-xl) 0;
+}
+.prokodo-ImageText__animated-border__line {
+  width: 3px;
+  border-radius: var(--pk-radius-pill);
+  background: linear-gradient(to bottom, transparent 0%, var(--pk-color-brand) 40%, var(--pk-color-accent) 60%, transparent 100%);
+  background-size: 100% 200%;
+  background-position: 0 -100%;
+  animation: ImageText_borderFlowDown 2.5s ease-in-out infinite;
+}
+.prokodo-ImageText__animated-border__line--bottom-to-top {
+  animation: ImageText_borderFlowUp 2.5s ease-in-out infinite;
 }

package/dist/components/image-text/ImageText.js

@@ -26,57 +26,57 @@ const ImageText = /* @__PURE__ */ __name(({
   button
 }) => {
   const leftColumnMd = image ? animatedBorder ? 4 : 6 : animatedBorder ? 10 : 12;
-  return /* @__PURE__ */ jsx("div", { className: bem(), children: /* @__PURE__ */ jsxs(
-    Grid,
-    {
-      className: bem("grid", {
-        "is-reverse": Boolean(reverse)
-      }),
-      children: [
-        /* @__PURE__ */ jsx(GridRow, { className: bem("content"), md: leftColumnMd, xs: 10, children: /* @__PURE__ */ jsxs(Animated, { children: [
-          isString(subTitle) && /* @__PURE__ */ jsx(
-            Headline,
-            {
-              highlight: true,
-              size: "sm",
-              type: "h3",
-              variant: "primary",
-              ...subTitleProps,
-              className: bem(
-                "sub__headline",
-                void 0,
-                /* istanbul ignore next */
-                subTitleProps == null ? void 0 : subTitleProps.className
-              ),
-              children: subTitle
-            }
+  return /* @__PURE__ */ jsx("div", { className: bem(), children: /* @__PURE__ */ jsxs(Grid, { className: bem("grid"), children: [
+    /* @__PURE__ */ jsx(GridRow, { className: bem("content"), md: leftColumnMd, xs: 10, children: /* @__PURE__ */ jsxs(Animated, { children: [
+      isString(subTitle) && /* @__PURE__ */ jsx(
+        Headline,
+        {
+          highlight: true,
+          color: "primary",
+          size: "sm",
+          type: "h3",
+          ...subTitleProps,
+          className: bem(
+            "sub__headline",
+            void 0,
+            /* istanbul ignore next */
+            subTitleProps == null ? void 0 : subTitleProps.className
           ),
-          /* @__PURE__ */ jsx(
-            Headline,
-            {
-              size: "lg",
-              type: "h2",
-              ...titleProps,
-              className: bem(
-                "headline",
-                void 0,
-                /* istanbul ignore next */
-                titleProps == null ? void 0 : titleProps.className
-              ),
-              children: title
-            }
+          children: subTitle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Headline,
+        {
+          size: "lg",
+          type: "h2",
+          ...titleProps,
+          className: bem(
+            "headline",
+            void 0,
+            /* istanbul ignore next */
+            titleProps == null ? void 0 : titleProps.className
           ),
-          isString(content) && /* @__PURE__ */ jsx(RichText, { className: bem("content__paragraph"), children: content }),
-          button && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outlined",
-              ...button,
-              className: bem("button", void 0, button == null ? void 0 : button.className)
-            }
-          )
-        ] }) }),
-        image && /* @__PURE__ */ jsx(GridRow, { className: bem("image"), md: 6, xs: 10, children: /* @__PURE__ */ jsx(Animated, {
+          children: title
+        }
+      ),
+      isString(content) && /* @__PURE__ */ jsx(RichText, { className: bem("content__paragraph"), children: content }),
+      button && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          ...button,
+          className: bem("button", void 0, button == null ? void 0 : button.className)
+        }
+      )
+    ] }) }),
+    image && /* @__PURE__ */ jsx(
+      GridRow,
+      {
+        className: bem("image", { "is-reverse": Boolean(reverse) }),
+        md: 6,
+        xs: 10,
+        children: /* @__PURE__ */ jsx(Animated, {
           className: bem("animated__container"),
           /* istanbul ignore next */
           children: isString(animation) ? /* @__PURE__ */ jsx(
@@ -86,10 +86,18 @@ const ImageText = /* @__PURE__ */ __name(({
               className: bem("animation")
             }
           ) : /* @__PURE__ */ jsx(Image, { className: bem("image__src"), ...image })
-        }) })
-      ]
-    }
-  ) });
+        })
+      }
+    ),
+    animatedBorder && /* @__PURE__ */ jsx(GridRow, { className: bem("animated-border"), md: 2, xs: 12, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: bem("animated-border__line", {
+          "bottom-to-top": animatedBorder.direction === "bottom-to-top"
+        })
+      }
+    ) })
+  ] }) });
 }, "ImageText");
 export {
   ImageText

package/dist/components/image-text/ImageText.module.css

@@ -124,23 +124,25 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-.prokodo-ImageText__grid {
-  position: relative;
-  flex-direction: column-reverse !important;
-}
-@media screen and (min-width: 960px) {
-  .prokodo-ImageText__grid {
-    flex-direction: row !important;
+@keyframes ImageText_borderFlowDown {
+  from {
+    background-position: 0 -100%;
+  }
+  to {
+    background-position: 0 100%;
   }
 }
-.prokodo-ImageText__grid--is-reverse {
-  flex-direction: column-reverse !important;
-}
-@media screen and (min-width: 960px) {
-  .prokodo-ImageText__grid--is-reverse {
-    flex-direction: row-reverse !important;
+@keyframes ImageText_borderFlowUp {
+  from {
+    background-position: 0 100%;
+  }
+  to {
+    background-position: 0 -100%;
   }
 }
+.prokodo-ImageText__grid {
+  position: relative;
+}
 .prokodo-ImageText__sub__headline {
   text-transform: uppercase;
 }
@@ -174,7 +176,7 @@
   }
 }
 .prokodo-ImageText__content__paragraph {
-  color: var(--color-grey-300);
+  color: var(--pk-image-text-content-color);
 }
 .prokodo-ImageText__animated__container {
   width: 100%;
@@ -189,6 +191,33 @@
   align-items: center;
   align-self: end;
 }
+@media screen and (min-width: 960px) {
+  .prokodo-ImageText__image {
+    order: -1;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-ImageText__image--is-reverse {
+    order: 1;
+  }
+}
 .prokodo-ImageText__image__src {
   width: 100%;
+}
+.prokodo-ImageText__animated-border {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  padding: var(--pk-space-xl) 0;
+}
+.prokodo-ImageText__animated-border__line {
+  width: 3px;
+  border-radius: var(--pk-radius-pill);
+  background: linear-gradient(to bottom, transparent 0%, var(--pk-color-brand) 40%, var(--pk-color-accent) 60%, transparent 100%);
+  background-size: 100% 200%;
+  background-position: 0 -100%;
+  animation: ImageText_borderFlowDown 2.5s ease-in-out infinite;
+}
+.prokodo-ImageText__animated-border__line--bottom-to-top {
+  animation: ImageText_borderFlowUp 2.5s ease-in-out infinite;
 }

package/dist/components/image-text/ImageText.module.scss.js

@@ -1,14 +1,23 @@
+const ImageText_borderFlowDown = "ImageText_borderFlowDown";
+const ImageText_borderFlowUp = "ImageText_borderFlowUp";
 const styles = {
   "prokodo-ImageText__grid": "prokodo-ImageText__grid",
-  "prokodo-ImageText__grid--is-reverse": "prokodo-ImageText__grid--is-reverse",
   "prokodo-ImageText__sub__headline": "prokodo-ImageText__sub__headline",
   "prokodo-ImageText__content": "prokodo-ImageText__content",
   "prokodo-ImageText__content__paragraph": "prokodo-ImageText__content__paragraph",
   "prokodo-ImageText__animated__container": "prokodo-ImageText__animated__container",
   "prokodo-ImageText__animation": "prokodo-ImageText__animation",
   "prokodo-ImageText__image": "prokodo-ImageText__image",
-  "prokodo-ImageText__image__src": "prokodo-ImageText__image__src"
+  "prokodo-ImageText__image--is-reverse": "prokodo-ImageText__image--is-reverse",
+  "prokodo-ImageText__image__src": "prokodo-ImageText__image__src",
+  "prokodo-ImageText__animated-border": "prokodo-ImageText__animated-border",
+  "prokodo-ImageText__animated-border__line": "prokodo-ImageText__animated-border__line",
+  ImageText_borderFlowDown,
+  "prokodo-ImageText__animated-border__line--bottom-to-top": "prokodo-ImageText__animated-border__line--bottom-to-top",
+  ImageText_borderFlowUp
 };
 export {
+  ImageText_borderFlowDown,
+  ImageText_borderFlowUp,
   styles as default
 };