@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/teaser/Teaser.js

@@ -13,7 +13,7 @@ import { Icon } from "../icon/Icon.js";
 const bem = create(styles, "Teaser");
 const Teaser = /* @__PURE__ */ __name(({
   className,
-  variant = "primary",
+  color = "primary",
   animation,
   lineClamp,
   align,
@@ -27,7 +27,7 @@ const Teaser = /* @__PURE__ */ __name(({
   return /* @__PURE__ */ jsxs(
     Card,
     {
-      variant,
+      color,
       ...props,
       className: bem(void 0, void 0, className),
       contentClassName: bem("card"),
@@ -51,7 +51,7 @@ const Teaser = /* @__PURE__ */ __name(({
               size: "md",
               type: "h3",
               ...title,
-              variant: (title == null ? void 0 : title.variant) ?? variant,
+              color: (title == null ? void 0 : title.color) ?? color,
               className: bem(
                 "headline",
                 {
@@ -76,7 +76,7 @@ const Teaser = /* @__PURE__ */ __name(({
             /* @__PURE__ */ jsx(
               Icon,
               {
-                color: variant,
+                color,
                 name: "ArrowRight01Icon",
                 size: "xs",
                 ...redirect == null ? void 0 : redirect.icon,

package/dist/components/teaser/Teaser.module.css

@@ -131,7 +131,7 @@
   padding: 0;
 }
 .prokodo-Teaser__card__content {
-  padding: 1rem;
+  padding: var(--pk-space-lg);
 }
 .prokodo-Teaser__image {
   -o-object-fit: cover;
@@ -143,10 +143,10 @@
   height: 230px;
 }
 .prokodo-Teaser__image__caption {
-  bottom: 0.5rem;
+  bottom: var(--pk-space-sm);
   text-align: right;
-  padding-right: 0.5rem;
-  width: calc(100% - 0.5rem);
+  padding-right: var(--pk-space-sm);
+  width: calc(100% - var(--pk-space-sm));
 }
 .prokodo-Teaser__animation {
   width: 100%;
@@ -197,5 +197,5 @@
   align-items: center;
 }
 .prokodo-Teaser__link__icon {
-  margin-right: 0.25rem;
+  margin-right: var(--pk-space-xs);
 }

package/dist/components/tooltip/Tooltip.client.js

@@ -154,6 +154,7 @@ function TooltipClient(props) {
     triggerProps,
     placement = "top",
     tooltipClassName,
+    color = "default",
     ...rest
   } = props;
   const isControlled = controlledOpen !== void 0;
@@ -271,16 +272,24 @@ function TooltipClient(props) {
     ]
   );
   const portalBubbleClassBase = useMemo(
-    () => bem("bubble", void 0, tooltipClassName),
-    [tooltipClassName]
+    () => bem(
+      "bubble",
+      { ...color !== "default" ? { [color]: true } : {} },
+      tooltipClassName
+    ),
+    [color, tooltipClassName]
   );
   const portalBubbleClassFinal = useMemo(
     () => bem(
       "bubble",
-      { open: Boolean(open && bubbleStyle), [effectivePlacement]: true },
+      {
+        open: Boolean(open && bubbleStyle),
+        [effectivePlacement]: true,
+        ...color !== "default" ? { [color]: true } : {}
+      },
       tooltipClassName
     ),
-    [open, bubbleStyle, effectivePlacement, tooltipClassName]
+    [open, bubbleStyle, effectivePlacement, color, tooltipClassName]
   );
   const compute = useCallback(
     /* istanbul ignore next */
@@ -374,6 +383,7 @@ function TooltipClient(props) {
         __placement: portal ? effectivePlacement : placement,
         __renderVisualBubble: !portal,
         __triggerRef: triggerRef,
+        color,
         content,
         disabled,
         placement,

package/dist/components/tooltip/Tooltip.css

@@ -164,11 +164,12 @@
   max-width: min(360px, 100vw - 16px);
   white-space: normal;
   overflow-wrap: anywhere;
-  padding: 0.25rem 0.5rem;
-  border-radius: 10px;
-  box-shadow: var(--elevation-2);
-  background: var(--color-grey-900);
-  color: var(--color-white);
+  padding: var(--pk-space-xs) var(--pk-space-sm);
+  border-radius: var(--pk-tooltip-radius);
+  border: var(--pk-border-width) solid var(--pk-tooltip-border);
+  box-shadow: var(--pk-tooltip-shadow);
+  background: var(--pk-tooltip-bg);
+  color: var(--pk-tooltip-fg);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
@@ -213,28 +214,64 @@
   top: 100%;
   transform: translateX(-50%);
   border-width: 8px 8px 0 8px;
-  border-color: var(--color-grey-900) transparent transparent transparent;
+  border-color: var(--pk-tooltip-bg) transparent transparent transparent;
 }
 .prokodo-Tooltip__bubble--bottom::after {
   left: var(--pk-tt-arrow-x, 50%);
   bottom: 100%;
   transform: translateX(-50%);
   border-width: 0 8px 8px 8px;
-  border-color: transparent transparent var(--color-grey-900) transparent;
+  border-color: transparent transparent var(--pk-tooltip-bg) transparent;
 }
 .prokodo-Tooltip__bubble--left::after {
   top: var(--pk-tt-arrow-y, 50%);
   left: 100%;
   transform: translateY(-50%);
   border-width: 8px 0 8px 8px;
-  border-color: transparent transparent transparent var(--color-grey-900);
+  border-color: transparent transparent transparent var(--pk-tooltip-bg);
 }
 .prokodo-Tooltip__bubble--right::after {
   top: var(--pk-tt-arrow-y, 50%);
   right: 100%;
   transform: translateY(-50%);
   border-width: 8px 8px 8px 0;
-  border-color: transparent var(--color-grey-900) transparent transparent;
+  border-color: transparent var(--pk-tooltip-bg) transparent transparent;
+}
+.prokodo-Tooltip__bubble--success {
+  --pk-tooltip-bg: var(--pk-tooltip-success-bg);
+  --pk-tooltip-fg: var(--pk-tooltip-success-fg);
+  --pk-tooltip-border: var(--pk-tooltip-success-border);
+  box-shadow: var(--pk-tooltip-success-shadow);
+  background: var(--pk-tooltip-bg);
+  color: var(--pk-tooltip-fg);
+  border-color: var(--pk-tooltip-border);
+}
+.prokodo-Tooltip__bubble--error {
+  --pk-tooltip-bg: var(--pk-tooltip-error-bg);
+  --pk-tooltip-fg: var(--pk-tooltip-error-fg);
+  --pk-tooltip-border: var(--pk-tooltip-error-border);
+  box-shadow: var(--pk-tooltip-error-shadow);
+  background: var(--pk-tooltip-bg);
+  color: var(--pk-tooltip-fg);
+  border-color: var(--pk-tooltip-border);
+}
+.prokodo-Tooltip__bubble--warning {
+  --pk-tooltip-bg: var(--pk-tooltip-warning-bg);
+  --pk-tooltip-fg: var(--pk-tooltip-warning-fg);
+  --pk-tooltip-border: var(--pk-tooltip-warning-border);
+  box-shadow: var(--pk-tooltip-warning-shadow);
+  background: var(--pk-tooltip-bg);
+  color: var(--pk-tooltip-fg);
+  border-color: var(--pk-tooltip-border);
+}
+.prokodo-Tooltip__bubble--info {
+  --pk-tooltip-bg: var(--pk-tooltip-info-bg);
+  --pk-tooltip-fg: var(--pk-tooltip-info-fg);
+  --pk-tooltip-border: var(--pk-tooltip-info-border);
+  box-shadow: var(--pk-tooltip-info-shadow);
+  background: var(--pk-tooltip-bg);
+  color: var(--pk-tooltip-fg);
+  border-color: var(--pk-tooltip-border);
 }
 .prokodo-Tooltip:hover .prokodo-Tooltip__bubble, .prokodo-Tooltip:focus-within .prokodo-Tooltip__bubble {
   opacity: 1;

package/dist/components/tooltip/Tooltip.module.css

@@ -164,11 +164,12 @@
   max-width: min(360px, 100vw - 16px);
   white-space: normal;
   overflow-wrap: anywhere;
-  padding: 0.25rem 0.5rem;
-  border-radius: 10px;
-  box-shadow: var(--elevation-2);
-  background: var(--color-grey-900);
-  color: var(--color-white);
+  padding: var(--pk-space-xs) var(--pk-space-sm);
+  border-radius: var(--pk-tooltip-radius);
+  border: var(--pk-border-width) solid var(--pk-tooltip-border);
+  box-shadow: var(--pk-tooltip-shadow);
+  background: var(--pk-tooltip-bg);
+  color: var(--pk-tooltip-fg);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
@@ -213,28 +214,64 @@
   top: 100%;
   transform: translateX(-50%);
   border-width: 8px 8px 0 8px;
-  border-color: var(--color-grey-900) transparent transparent transparent;
+  border-color: var(--pk-tooltip-bg) transparent transparent transparent;
 }
 .prokodo-Tooltip__bubble--bottom::after {
   left: var(--pk-tt-arrow-x, 50%);
   bottom: 100%;
   transform: translateX(-50%);
   border-width: 0 8px 8px 8px;
-  border-color: transparent transparent var(--color-grey-900) transparent;
+  border-color: transparent transparent var(--pk-tooltip-bg) transparent;
 }
 .prokodo-Tooltip__bubble--left::after {
   top: var(--pk-tt-arrow-y, 50%);
   left: 100%;
   transform: translateY(-50%);
   border-width: 8px 0 8px 8px;
-  border-color: transparent transparent transparent var(--color-grey-900);
+  border-color: transparent transparent transparent var(--pk-tooltip-bg);
 }
 .prokodo-Tooltip__bubble--right::after {
   top: var(--pk-tt-arrow-y, 50%);
   right: 100%;
   transform: translateY(-50%);
   border-width: 8px 8px 8px 0;
-  border-color: transparent var(--color-grey-900) transparent transparent;
+  border-color: transparent var(--pk-tooltip-bg) transparent transparent;
+}
+.prokodo-Tooltip__bubble--success {
+  --pk-tooltip-bg: var(--pk-tooltip-success-bg);
+  --pk-tooltip-fg: var(--pk-tooltip-success-fg);
+  --pk-tooltip-border: var(--pk-tooltip-success-border);
+  box-shadow: var(--pk-tooltip-success-shadow);
+  background: var(--pk-tooltip-bg);
+  color: var(--pk-tooltip-fg);
+  border-color: var(--pk-tooltip-border);
+}
+.prokodo-Tooltip__bubble--error {
+  --pk-tooltip-bg: var(--pk-tooltip-error-bg);
+  --pk-tooltip-fg: var(--pk-tooltip-error-fg);
+  --pk-tooltip-border: var(--pk-tooltip-error-border);
+  box-shadow: var(--pk-tooltip-error-shadow);
+  background: var(--pk-tooltip-bg);
+  color: var(--pk-tooltip-fg);
+  border-color: var(--pk-tooltip-border);
+}
+.prokodo-Tooltip__bubble--warning {
+  --pk-tooltip-bg: var(--pk-tooltip-warning-bg);
+  --pk-tooltip-fg: var(--pk-tooltip-warning-fg);
+  --pk-tooltip-border: var(--pk-tooltip-warning-border);
+  box-shadow: var(--pk-tooltip-warning-shadow);
+  background: var(--pk-tooltip-bg);
+  color: var(--pk-tooltip-fg);
+  border-color: var(--pk-tooltip-border);
+}
+.prokodo-Tooltip__bubble--info {
+  --pk-tooltip-bg: var(--pk-tooltip-info-bg);
+  --pk-tooltip-fg: var(--pk-tooltip-info-fg);
+  --pk-tooltip-border: var(--pk-tooltip-info-border);
+  box-shadow: var(--pk-tooltip-info-shadow);
+  background: var(--pk-tooltip-bg);
+  color: var(--pk-tooltip-fg);
+  border-color: var(--pk-tooltip-border);
 }
 .prokodo-Tooltip:hover .prokodo-Tooltip__bubble, .prokodo-Tooltip:focus-within .prokodo-Tooltip__bubble {
   opacity: 1;

package/dist/components/tooltip/Tooltip.module.scss.js

@@ -8,7 +8,11 @@ const styles = {
   "prokodo-Tooltip__bubble--top": "prokodo-Tooltip__bubble--top",
   "prokodo-Tooltip__bubble--bottom": "prokodo-Tooltip__bubble--bottom",
   "prokodo-Tooltip__bubble--left": "prokodo-Tooltip__bubble--left",
-  "prokodo-Tooltip__bubble--right": "prokodo-Tooltip__bubble--right"
+  "prokodo-Tooltip__bubble--right": "prokodo-Tooltip__bubble--right",
+  "prokodo-Tooltip__bubble--success": "prokodo-Tooltip__bubble--success",
+  "prokodo-Tooltip__bubble--error": "prokodo-Tooltip__bubble--error",
+  "prokodo-Tooltip__bubble--warning": "prokodo-Tooltip__bubble--warning",
+  "prokodo-Tooltip__bubble--info": "prokodo-Tooltip__bubble--info"
 };
 export {
   styles as default

package/dist/components/tooltip/Tooltip.view.js

@@ -38,6 +38,7 @@ function TooltipView(props) {
     content,
     children,
     placement = "top",
+    color = "default",
     disabled,
     open,
     className,
@@ -94,7 +95,11 @@ function TooltipView(props) {
   };
   const inlineBubbleClass = bem(
     "bubble",
-    { open: Boolean(effectiveOpen), [effectivePlacement]: true },
+    {
+      open: Boolean(effectiveOpen),
+      [effectivePlacement]: true,
+      ...color !== "default" ? { [color]: true } : {}
+    },
     tooltipClassName
   );
   return /* @__PURE__ */ jsxs(

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.1.15";
+const PROKODO_UI_VERSION = "1.0.0";
 export {
   PROKODO_UI_VERSION
 };