@prokodo/ui 1.0.5 → 1.0.7

package/dist/components/form/Form.css

@@ -1,3 +1,18 @@
+@import "../autocomplete/Autocomplete.css";
+@import "../button/Button.css";
+@import "../checkbox/Checkbox.css";
+@import "../checkbox-group/CheckboxGroup.css";
+@import "../datePicker/DatePicker.css";
+@import "../dynamic-list/DynamicList.css";
+@import "../grid/Grid.css";
+@import "../headline/Headline.css";
+@import "../input/Input.css";
+@import "../inputOTP/InputOTP.css";
+@import "../rating/Rating.css";
+@import "../select/Select.css";
+@import "../slider/Slider.css";
+@import "../switch/Switch.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -151,4 +166,173 @@
 
 .prokodo-FormField {
   padding-bottom: 1rem;
+}
+
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-FormResponse {
+  padding: 0 1rem;
+}
+.prokodo-FormResponse__success {
+  color: var(--color-success);
+  font-weight: 700;
+}
+.prokodo-FormResponse__errors {
+  display: block;
+  margin-bottom: 0.75rem;
+  color: var(--color-grey-300);
+}
+.prokodo-FormResponse__errors__item {
+  display: block;
+  padding-bottom: 1rem;
+  font-weight: 500;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-FormResponse__errors__item {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-FormResponse__errors__item {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-FormResponse__errors__desc {
+  display: block;
+  padding: 0;
+  color: var(--color-error);
 }

package/dist/components/grid/Grid.css

@@ -124,6 +124,10 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-grid-padding: var(--pk-space-lg);
+}
+
 .prokodo-Grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);

package/dist/components/grid/Grid.module.css

@@ -124,6 +124,10 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-grid-padding: var(--pk-space-lg);
+}
+
 .prokodo-Grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);

package/dist/components/headline/Headline.css

@@ -1,3 +1,5 @@
+@import "../rich-text/RichText.css";
+
 @charset "UTF-8";
 /* stylelint-disable */
 /**

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

@@ -1,3 +1,11 @@
+@import "../animated/Animated.css";
+@import "../button/Button.css";
+@import "../grid/Grid.css";
+@import "../headline/Headline.css";
+@import "../image/Image.css";
+@import "../lottie/Lottie.css";
+@import "../rich-text/RichText.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -124,6 +132,10 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-image-text-content-color: var(--pk-color-muted);
+}
+
 @keyframes ImageText_borderFlowDown {
   from {
     background-position: 0 -100%;

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

@@ -124,6 +124,10 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-image-text-content-color: var(--pk-color-muted);
+}
+
 @keyframes ImageText_borderFlowDown {
   from {
     background-position: 0 -100%;

package/dist/components/input/Input.css

@@ -1,3 +1,5 @@
+@import "../label/Label.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -124,6 +126,26 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-input-bg: var(--pk-color-surface);
+  --pk-input-fg: var(--pk-color-fg);
+  --pk-input-fg-muted: var(--pk-color-muted);
+  --pk-input-border: var(--pk-color-border);
+  --pk-input-border-focus: var(--pk-color-brand);
+  --pk-input-radius: var(--pk-radius-pill);
+  --pk-input-padding-x: var(--pk-space-lg);
+  --pk-input-padding-y: 0.875rem;
+  --pk-input-label-fg: var(--pk-color-muted);
+  --pk-input-label-focused-fg: var(--pk-color-brand);
+  --pk-input-helper-fg: var(--pk-palette-grey-300);
+  --pk-input-focus-ring: var(--pk-focus-ring-color);
+  --pk-input-shadow: var(--pk-shadow-sm);
+  --pk-input-shadow-color: rgba(0, 0, 0, 0.1);
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-input-border-focus) 30%, transparent);
+  --pk-input-gradient-from: var(--pk-color-brand);
+  --pk-input-gradient-to: var(--pk-color-accent);
+}
+
 @keyframes inputNotchAnimate {
   0%, 100% {
     border-color: var(--pk-input-gradient-from);

package/dist/components/input/Input.module.css

@@ -124,6 +124,26 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-input-bg: var(--pk-color-surface);
+  --pk-input-fg: var(--pk-color-fg);
+  --pk-input-fg-muted: var(--pk-color-muted);
+  --pk-input-border: var(--pk-color-border);
+  --pk-input-border-focus: var(--pk-color-brand);
+  --pk-input-radius: var(--pk-radius-pill);
+  --pk-input-padding-x: var(--pk-space-lg);
+  --pk-input-padding-y: 0.875rem;
+  --pk-input-label-fg: var(--pk-color-muted);
+  --pk-input-label-focused-fg: var(--pk-color-brand);
+  --pk-input-helper-fg: var(--pk-palette-grey-300);
+  --pk-input-focus-ring: var(--pk-focus-ring-color);
+  --pk-input-shadow: var(--pk-shadow-sm);
+  --pk-input-shadow-color: rgba(0, 0, 0, 0.1);
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-input-border-focus) 30%, transparent);
+  --pk-input-gradient-from: var(--pk-color-brand);
+  --pk-input-gradient-to: var(--pk-color-accent);
+}
+
 @keyframes inputNotchAnimate {
   0%, 100% {
     border-color: var(--pk-input-gradient-from);

package/dist/components/inputOTP/InputOTP.css

@@ -1,3 +1,5 @@
+@import "../input/Input.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -124,6 +126,14 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-otp-gap: var(--pk-space-sm, 0.5rem);
+  --pk-otp-cell-size: 2.75rem;
+  --pk-otp-cell-radius: var(--pk-radius-pill);
+  --pk-otp-gradient-from: var(--pk-color-brand);
+  --pk-otp-gradient-to: var(--pk-color-accent);
+}
+
 .prokodo-InputOTP {
   display: flex;
   flex-direction: column;

package/dist/components/inputOTP/InputOTP.module.css

@@ -124,6 +124,14 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-otp-gap: var(--pk-space-sm, 0.5rem);
+  --pk-otp-cell-size: 2.75rem;
+  --pk-otp-cell-radius: var(--pk-radius-pill);
+  --pk-otp-gradient-from: var(--pk-color-brand);
+  --pk-otp-gradient-to: var(--pk-color-accent);
+}
+
 .prokodo-InputOTP {
   display: flex;
   flex-direction: column;

package/dist/components/label/Label.css

@@ -124,6 +124,14 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-label-gradient-from: var(--pk-color-brand);
+  --pk-label-gradient-to: var(--pk-color-accent);
+  --pk-label-fg: var(--pk-color-muted);
+  --pk-label-error-from: var(--pk-color-error);
+  --pk-label-error-to: #ff6b6b;
+}
+
 .prokodo-Label {
   font-weight: 400;
   display: block;

package/dist/components/label/Label.module.css

@@ -124,6 +124,14 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-label-gradient-from: var(--pk-color-brand);
+  --pk-label-gradient-to: var(--pk-color-accent);
+  --pk-label-fg: var(--pk-color-muted);
+  --pk-label-error-from: var(--pk-color-error);
+  --pk-label-error-to: #ff6b6b;
+}
+
 .prokodo-Label {
   font-weight: 400;
   display: block;

package/dist/components/link/Link.css

@@ -124,6 +124,19 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-link-color: color-mix(in srgb, var(--pk-color-fg) 55%, transparent);
+  --pk-link-color-hover: var(--pk-color-fg);
+  --pk-link-color-primary: var(--pk-color-brand);
+  --pk-link-color-secondary: var(--pk-color-accent);
+  --pk-link-color-info: color-mix(in srgb, var(--pk-color-fg) 35%, transparent);
+  --pk-link-color-success: var(--pk-color-success);
+  --pk-link-color-warning: var(--pk-color-warning);
+  --pk-link-color-error: var(--pk-color-error);
+  --pk-link-color-white: var(--pk-palette-white);
+  --pk-link-color-variant-hover: color-mix(in srgb, var(--pk-color-fg) 55%, transparent);
+}
+
 .prokodo-Link {
   text-decoration: none;
   cursor: pointer;

package/dist/components/link/Link.module.css

@@ -124,6 +124,19 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-link-color: color-mix(in srgb, var(--pk-color-fg) 55%, transparent);
+  --pk-link-color-hover: var(--pk-color-fg);
+  --pk-link-color-primary: var(--pk-color-brand);
+  --pk-link-color-secondary: var(--pk-color-accent);
+  --pk-link-color-info: color-mix(in srgb, var(--pk-color-fg) 35%, transparent);
+  --pk-link-color-success: var(--pk-color-success);
+  --pk-link-color-warning: var(--pk-color-warning);
+  --pk-link-color-error: var(--pk-color-error);
+  --pk-link-color-white: var(--pk-palette-white);
+  --pk-link-color-variant-hover: color-mix(in srgb, var(--pk-color-fg) 55%, transparent);
+}
+
 .prokodo-Link {
   text-decoration: none;
   cursor: pointer;

package/dist/components/list/List.css

@@ -1,3 +1,7 @@
+@import "../card/Card.css";
+@import "../icon/Icon.css";
+@import "../link/Link.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/map/Map.css

@@ -1,3 +1,5 @@
+@import "../skeleton/Skeleton.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/pagination/Pagination.css

@@ -124,6 +124,16 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-pagination-gap: var(--pk-space-sm);
+  --pk-pagination-fg: color-mix(in srgb, var(--pk-color-fg) 70%, transparent);
+  --pk-pagination-page-radius: 10px;
+  --pk-pagination-pad-x: var(--pk-space-xs);
+  --pk-pagination-active-border: var(--pk-color-brand);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-brand) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-4);
+}
+
 @keyframes pk-pagination-pulse {
   0%, 100% {
     opacity: 1;

package/dist/components/pagination/Pagination.module.css

@@ -124,6 +124,16 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-pagination-gap: var(--pk-space-sm);
+  --pk-pagination-fg: color-mix(in srgb, var(--pk-color-fg) 70%, transparent);
+  --pk-pagination-page-radius: 10px;
+  --pk-pagination-pad-x: var(--pk-space-xs);
+  --pk-pagination-active-border: var(--pk-color-brand);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-brand) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-4);
+}
+
 @keyframes pk-pagination-pulse {
   0%, 100% {
     opacity: 1;

package/dist/components/post-item/PostItem.css

@@ -1,3 +1,11 @@
+@import "../animated/Animated.css";
+@import "../avatar/Avatar.css";
+@import "../button/Button.css";
+@import "../card/Card.css";
+@import "../headline/Headline.css";
+@import "../image/Image.css";
+@import "../rich-text/RichText.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -286,4 +294,161 @@
   .prokodo-PostItem__button {
     width: auto;
   }
+}
+
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-PostItemAuthor {
+  display: flex;
+  align-items: center;
+  padding-right: 1.5rem;
+}
+.prokodo-PostItemAuthor__name {
+  padding-left: 0.75rem;
+  color: var(--color-grey-500);
+  font-weight: 500;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-PostItemAuthor__name {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-PostItemAuthor__name {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
 }

package/dist/components/post-teaser/PostTeaser.css

@@ -1,3 +1,11 @@
+@import "../card/Card.css";
+@import "../chip/Chip.css";
+@import "../headline/Headline.css";
+@import "../icon/Icon.css";
+@import "../image/Image.css";
+@import "../link/Link.css";
+@import "../rich-text/RichText.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/post-widget/PostWidget.css

@@ -1,3 +1,8 @@
+@import "../card/Card.css";
+@import "../headline/Headline.css";
+@import "../image/Image.css";
+@import "../link/Link.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/post-widget-carousel/PostWidgetCarousel.css

@@ -1,3 +1,10 @@
+@import "../button/Button.css";
+@import "../card/Card.css";
+@import "../carousel/Carousel.css";
+@import "../headline/Headline.css";
+@import "../image/Image.css";
+@import "../link/Link.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.