@prokodo/ui 1.0.5 → 1.0.7

package/dist/components/RTE/RTE.css

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

package/dist/components/accordion/Accordion.css

@@ -1,3 +1,7 @@
+@import "../button/Button.css";
+@import "../headline/Headline.css";
+@import "../rich-text/RichText.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -124,6 +128,24 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-accordion-radius: var(--pk-radius-md);
+  --pk-accordion-border: var(--pk-color-border);
+  --pk-accordion-border-focus: var(--pk-color-brand);
+  --pk-accordion-shadow: var(--pk-shadow-sm);
+  --pk-accordion-header-bg: var(--pk-color-surface);
+  --pk-accordion-content-bg: var(--pk-color-surface);
+  --pk-accordion-actions-bg: var(--pk-color-surface-raised);
+  --pk-accordion-actions-border: var(--pk-color-border);
+  --pk-accordion-fg: var(--pk-color-fg);
+  --pk-accordion-padding-x: var(--pk-space-lg);
+  --pk-accordion-padding-y: var(--pk-space-md);
+  --pk-accordion-gradient-from: var(--pk-color-brand);
+  --pk-accordion-gradient-to: var(--pk-color-accent);
+  --pk-accordion-item-tint: var(--pk-color-brand);
+  --pk-accordion-shadow-color: rgba(0, 0, 0, 0.1);
+}
+
 @keyframes accordionBorderShift {
   from {
     background-position: 0 0, 0% 0;

package/dist/components/accordion/Accordion.module.css

@@ -124,6 +124,24 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-accordion-radius: var(--pk-radius-md);
+  --pk-accordion-border: var(--pk-color-border);
+  --pk-accordion-border-focus: var(--pk-color-brand);
+  --pk-accordion-shadow: var(--pk-shadow-sm);
+  --pk-accordion-header-bg: var(--pk-color-surface);
+  --pk-accordion-content-bg: var(--pk-color-surface);
+  --pk-accordion-actions-bg: var(--pk-color-surface-raised);
+  --pk-accordion-actions-border: var(--pk-color-border);
+  --pk-accordion-fg: var(--pk-color-fg);
+  --pk-accordion-padding-x: var(--pk-space-lg);
+  --pk-accordion-padding-y: var(--pk-space-md);
+  --pk-accordion-gradient-from: var(--pk-color-brand);
+  --pk-accordion-gradient-to: var(--pk-color-accent);
+  --pk-accordion-item-tint: var(--pk-color-brand);
+  --pk-accordion-shadow-color: rgba(0, 0, 0, 0.1);
+}
+
 @keyframes accordionBorderShift {
   from {
     background-position: 0 0, 0% 0;

package/dist/components/autocomplete/Autocomplete.css

@@ -1,3 +1,5 @@
+@import "../input/Input.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -124,6 +126,25 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-autocomplete-bg: var(--pk-color-surface);
+  --pk-autocomplete-fg: var(--pk-color-fg);
+  --pk-autocomplete-fg-muted: var(--pk-color-muted);
+  --pk-autocomplete-radius: var(--pk-radius-pill);
+  --pk-autocomplete-shadow-color: rgba(0, 0, 0, 0.1);
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-brand);
+  --pk-autocomplete-gradient-to: var(--pk-color-accent);
+  --pk-autocomplete-shadow: var(--pk-shadow-lg);
+  --pk-autocomplete-item-hover-bg: var(--pk-palette-primary-50);
+  --pk-autocomplete-item-active-bg: var(--pk-palette-primary-100);
+  --pk-autocomplete-state-bg: var(--pk-color-surface);
+  --pk-autocomplete-state-fg: var(--pk-palette-grey-700);
+  --pk-autocomplete-dropdown-bg: var(--pk-color-surface-raised);
+  --pk-autocomplete-padding-x: var(--pk-space-md);
+  --pk-autocomplete-padding-y: var(--pk-space-sm);
+}
+
 .prokodo-Autocomplete {
   position: relative;
   display: flex;

package/dist/components/autocomplete/Autocomplete.module.css

@@ -124,6 +124,25 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-autocomplete-bg: var(--pk-color-surface);
+  --pk-autocomplete-fg: var(--pk-color-fg);
+  --pk-autocomplete-fg-muted: var(--pk-color-muted);
+  --pk-autocomplete-radius: var(--pk-radius-pill);
+  --pk-autocomplete-shadow-color: rgba(0, 0, 0, 0.1);
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-brand);
+  --pk-autocomplete-gradient-to: var(--pk-color-accent);
+  --pk-autocomplete-shadow: var(--pk-shadow-lg);
+  --pk-autocomplete-item-hover-bg: var(--pk-palette-primary-50);
+  --pk-autocomplete-item-active-bg: var(--pk-palette-primary-100);
+  --pk-autocomplete-state-bg: var(--pk-color-surface);
+  --pk-autocomplete-state-fg: var(--pk-palette-grey-700);
+  --pk-autocomplete-dropdown-bg: var(--pk-color-surface-raised);
+  --pk-autocomplete-padding-x: var(--pk-space-md);
+  --pk-autocomplete-padding-y: var(--pk-space-sm);
+}
+
 .prokodo-Autocomplete {
   position: relative;
   display: flex;

package/dist/components/avatar/Avatar.css

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

package/dist/components/button/Button.css

@@ -1,3 +1,7 @@
+@import "../icon/Icon.css";
+@import "../image/Image.css";
+@import "../link/Link.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -124,6 +128,17 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-button-bg: var(--pk-color-surface-raised);
+  --pk-button-fg: var(--pk-color-fg);
+  --pk-button-radius: var(--pk-radius-pill);
+  --pk-button-padding-x: var(--pk-space-xl);
+  --pk-button-padding-y: 0.875rem;
+  --pk-button-shadow: var(--pk-shadow-sm);
+  --pk-button-disabled-bg: var(--pk-color-border);
+  --pk-button-disabled-fg: var(--pk-color-muted);
+}
+
 .prokodo-Button {
   display: inline-flex;
   align-items: center;

package/dist/components/button/Button.module.css

@@ -124,6 +124,17 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-button-bg: var(--pk-color-surface-raised);
+  --pk-button-fg: var(--pk-color-fg);
+  --pk-button-radius: var(--pk-radius-pill);
+  --pk-button-padding-x: var(--pk-space-xl);
+  --pk-button-padding-y: 0.875rem;
+  --pk-button-shadow: var(--pk-shadow-sm);
+  --pk-button-disabled-bg: var(--pk-color-border);
+  --pk-button-disabled-fg: var(--pk-color-muted);
+}
+
 .prokodo-Button {
   display: inline-flex;
   align-items: center;

package/dist/components/calendly/Calendly.css

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

package/dist/components/card/Card.css

@@ -1,3 +1,10 @@
+@import "../animated/Animated.css";
+@import "../headline/Headline.css";
+@import "../image/Image.css";
+@import "../link/Link.css";
+@import "../rich-text/RichText.css";
+@import "../skeleton/Skeleton.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -124,6 +131,19 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-card-bg: var(--pk-color-surface);
+  --pk-card-fg: var(--pk-color-fg);
+  --pk-card-radius: var(--pk-radius-lg);
+  --pk-card-shadow: var(--pk-shadow-sm);
+  --pk-card-padding: var(--pk-space-xl);
+  --pk-card-inherit-bg: var(--pk-color-surface-raised);
+  --pk-card-panel-bg: rgba(255, 255, 255, 0.03);
+  --pk-card-panel-border: rgba(255, 255, 255, 0.10);
+  --pk-card-panel-light-bg: var(--pk-color-surface);
+  --pk-card-panel-light-border: rgba(0, 0, 0, 0.08);
+}
+
 @keyframes Card_fadeInAnimation {
   0% {
     opacity: 0;

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

@@ -124,6 +124,19 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-card-bg: var(--pk-color-surface);
+  --pk-card-fg: var(--pk-color-fg);
+  --pk-card-radius: var(--pk-radius-lg);
+  --pk-card-shadow: var(--pk-shadow-sm);
+  --pk-card-padding: var(--pk-space-xl);
+  --pk-card-inherit-bg: var(--pk-color-surface-raised);
+  --pk-card-panel-bg: rgba(255, 255, 255, 0.03);
+  --pk-card-panel-border: rgba(255, 255, 255, 0.10);
+  --pk-card-panel-light-bg: var(--pk-color-surface);
+  --pk-card-panel-light-border: rgba(0, 0, 0, 0.08);
+}
+
 @keyframes Card_fadeInAnimation {
   0% {
     opacity: 0;

package/dist/components/carousel/Carousel.css

@@ -1,3 +1,5 @@
+@import "../button/Button.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-carousel-overlay-bg: color-mix(in srgb, var(--pk-palette-grey-900) 70%, transparent);
+  --pk-carousel-dot-active-bg: var(--pk-color-surface);
+  --pk-carousel-button-padding: var(--pk-space-md);
+  --pk-carousel-dots-mt: var(--pk-space-2xl);
+  --pk-carousel-controls-mt: var(--pk-space-lg);
+}
+
 .prokodo-Carousel {
   position: relative;
   width: 100%;

package/dist/components/carousel/Carousel.module.css

@@ -124,6 +124,14 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-carousel-overlay-bg: color-mix(in srgb, var(--pk-palette-grey-900) 70%, transparent);
+  --pk-carousel-dot-active-bg: var(--pk-color-surface);
+  --pk-carousel-button-padding: var(--pk-space-md);
+  --pk-carousel-dots-mt: var(--pk-space-2xl);
+  --pk-carousel-controls-mt: var(--pk-space-lg);
+}
+
 .prokodo-Carousel {
   position: relative;
   width: 100%;

package/dist/components/checkbox/Checkbox.css

@@ -124,6 +124,22 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-checkbox-size: 1.125rem;
+  --pk-checkbox-radius: var(--pk-radius-md);
+  --pk-checkbox-control-radius: 6px;
+  --pk-checkbox-control-border: var(--pk-palette-grey-200);
+  --pk-checkbox-control-bg: var(--pk-palette-white);
+  --pk-checkbox-control-checked-border: transparent;
+  --pk-checkbox-gradient-from: var(--pk-color-brand);
+  --pk-checkbox-gradient-to: var(--pk-color-accent);
+  --pk-checkbox-shadow-color: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-checkbox-fg: var(--pk-color-fg);
+  --pk-checkbox-fg-muted: var(--pk-color-muted);
+  --pk-checkbox-error-fg: var(--pk-color-error);
+  --pk-checkbox-card-bg: var(--pk-color-surface);
+}
+
 .prokodo-Checkbox {
   display: inline-flex;
   align-items: flex-start;

package/dist/components/checkbox/Checkbox.module.css

@@ -124,6 +124,22 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-checkbox-size: 1.125rem;
+  --pk-checkbox-radius: var(--pk-radius-md);
+  --pk-checkbox-control-radius: 6px;
+  --pk-checkbox-control-border: var(--pk-palette-grey-200);
+  --pk-checkbox-control-bg: var(--pk-palette-white);
+  --pk-checkbox-control-checked-border: transparent;
+  --pk-checkbox-gradient-from: var(--pk-color-brand);
+  --pk-checkbox-gradient-to: var(--pk-color-accent);
+  --pk-checkbox-shadow-color: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-checkbox-fg: var(--pk-color-fg);
+  --pk-checkbox-fg-muted: var(--pk-color-muted);
+  --pk-checkbox-error-fg: var(--pk-color-error);
+  --pk-checkbox-card-bg: var(--pk-color-surface);
+}
+
 .prokodo-Checkbox {
   display: inline-flex;
   align-items: flex-start;

package/dist/components/datePicker/DatePicker.css

@@ -1,3 +1,5 @@
+@import "../input/Input.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -124,6 +126,47 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-dp-trigger-bg: var(--pk-color-surface);
+  --pk-dp-trigger-fg: var(--pk-color-fg);
+  --pk-dp-trigger-fg-muted: var(--pk-color-muted);
+  --pk-dp-trigger-border: var(--pk-color-border);
+  --pk-dp-trigger-radius: var(--pk-radius-pill);
+  --pk-dp-trigger-padding-x: var(--pk-space-lg);
+  --pk-dp-trigger-padding-y: 0.875rem;
+  --pk-dp-trigger-label-fg: var(--pk-color-muted);
+  --pk-dp-trigger-label-float-fg: var(--pk-color-brand);
+  --pk-dp-dialog-bg: var(--pk-color-surface);
+  --pk-dp-dialog-border: var(--pk-color-border);
+  --pk-dp-dialog-radius: var(--pk-radius-lg);
+  --pk-dp-dialog-shadow: var(--pk-shadow-lg);
+  --pk-dp-dialog-padding: var(--pk-space-md);
+  --pk-dp-dialog-min-width: 17rem;
+  --pk-dp-header-fg: var(--pk-color-fg);
+  --pk-dp-nav-fg: var(--pk-color-muted);
+  --pk-dp-nav-hover-bg: var(--pk-color-border);
+  --pk-dp-nav-radius: var(--pk-radius-circle);
+  --pk-dp-weekday-fg: var(--pk-color-muted);
+  --pk-dp-day-fg: var(--pk-color-fg);
+  --pk-dp-day-radius: var(--pk-radius-circle);
+  --pk-dp-day-hover-bg: color-mix(in srgb, var(--pk-color-border) 60%, transparent);
+  --pk-dp-day-outside-fg: color-mix(in srgb, var(--pk-color-muted) 50%, transparent);
+  --pk-dp-day-disabled-fg: color-mix(in srgb, var(--pk-color-muted) 40%, transparent);
+  --pk-dp-day-today-ring: var(--pk-color-brand);
+  --pk-dp-gradient-from: var(--pk-color-brand);
+  --pk-dp-gradient-to: var(--pk-color-accent);
+  --pk-dp-shadow-color: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-dp-time-label-fg: var(--pk-color-fg);
+  --pk-dp-time-select-bg: var(--pk-color-surface);
+  --pk-dp-time-select-fg: var(--pk-color-fg);
+  --pk-dp-time-select-border: var(--pk-color-border);
+  --pk-dp-time-select-radius: var(--pk-radius-md);
+  --pk-dp-time-sep-fg: var(--pk-color-muted);
+  --pk-dp-footer-border: var(--pk-color-border);
+  --pk-dp-footer-ghost-fg: var(--pk-color-muted);
+  --pk-dp-footer-ghost-hover-fg: var(--pk-color-fg);
+}
+
 @keyframes dpDialogIn {
   from {
     opacity: 0;

package/dist/components/datePicker/DatePicker.module.css

@@ -124,6 +124,47 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-dp-trigger-bg: var(--pk-color-surface);
+  --pk-dp-trigger-fg: var(--pk-color-fg);
+  --pk-dp-trigger-fg-muted: var(--pk-color-muted);
+  --pk-dp-trigger-border: var(--pk-color-border);
+  --pk-dp-trigger-radius: var(--pk-radius-pill);
+  --pk-dp-trigger-padding-x: var(--pk-space-lg);
+  --pk-dp-trigger-padding-y: 0.875rem;
+  --pk-dp-trigger-label-fg: var(--pk-color-muted);
+  --pk-dp-trigger-label-float-fg: var(--pk-color-brand);
+  --pk-dp-dialog-bg: var(--pk-color-surface);
+  --pk-dp-dialog-border: var(--pk-color-border);
+  --pk-dp-dialog-radius: var(--pk-radius-lg);
+  --pk-dp-dialog-shadow: var(--pk-shadow-lg);
+  --pk-dp-dialog-padding: var(--pk-space-md);
+  --pk-dp-dialog-min-width: 17rem;
+  --pk-dp-header-fg: var(--pk-color-fg);
+  --pk-dp-nav-fg: var(--pk-color-muted);
+  --pk-dp-nav-hover-bg: var(--pk-color-border);
+  --pk-dp-nav-radius: var(--pk-radius-circle);
+  --pk-dp-weekday-fg: var(--pk-color-muted);
+  --pk-dp-day-fg: var(--pk-color-fg);
+  --pk-dp-day-radius: var(--pk-radius-circle);
+  --pk-dp-day-hover-bg: color-mix(in srgb, var(--pk-color-border) 60%, transparent);
+  --pk-dp-day-outside-fg: color-mix(in srgb, var(--pk-color-muted) 50%, transparent);
+  --pk-dp-day-disabled-fg: color-mix(in srgb, var(--pk-color-muted) 40%, transparent);
+  --pk-dp-day-today-ring: var(--pk-color-brand);
+  --pk-dp-gradient-from: var(--pk-color-brand);
+  --pk-dp-gradient-to: var(--pk-color-accent);
+  --pk-dp-shadow-color: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-dp-time-label-fg: var(--pk-color-fg);
+  --pk-dp-time-select-bg: var(--pk-color-surface);
+  --pk-dp-time-select-fg: var(--pk-color-fg);
+  --pk-dp-time-select-border: var(--pk-color-border);
+  --pk-dp-time-select-radius: var(--pk-radius-md);
+  --pk-dp-time-sep-fg: var(--pk-color-muted);
+  --pk-dp-footer-border: var(--pk-color-border);
+  --pk-dp-footer-ghost-fg: var(--pk-color-muted);
+  --pk-dp-footer-ghost-hover-fg: var(--pk-color-fg);
+}
+
 @keyframes dpDialogIn {
   from {
     opacity: 0;

package/dist/components/dialog/Dialog.css

@@ -1,3 +1,5 @@
+@import "../button/Button.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -124,6 +126,17 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-dialog-bg: var(--pk-color-surface);
+  --pk-dialog-fg: var(--pk-color-fg);
+  --pk-dialog-radius: var(--pk-radius-md);
+  --pk-dialog-shadow: var(--pk-shadow-lg);
+  --pk-dialog-padding-x: var(--pk-space-lg);
+  --pk-dialog-padding-y: var(--pk-space-xl);
+  --pk-dialog-header-fg: var(--pk-color-fg);
+  --pk-dialog-close-fg: var(--pk-palette-grey-500);
+}
+
 @keyframes Dialog_fadeIn {
   from {
     opacity: 0;

package/dist/components/dialog/Dialog.module.css

@@ -124,6 +124,17 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-dialog-bg: var(--pk-color-surface);
+  --pk-dialog-fg: var(--pk-color-fg);
+  --pk-dialog-radius: var(--pk-radius-md);
+  --pk-dialog-shadow: var(--pk-shadow-lg);
+  --pk-dialog-padding-x: var(--pk-space-lg);
+  --pk-dialog-padding-y: var(--pk-space-xl);
+  --pk-dialog-header-fg: var(--pk-color-fg);
+  --pk-dialog-close-fg: var(--pk-palette-grey-500);
+}
+
 @keyframes Dialog_fadeIn {
   from {
     opacity: 0;

package/dist/components/drawer/Drawer.css

@@ -1,3 +1,6 @@
+@import "../button/Button.css";
+@import "../headline/Headline.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -124,6 +127,15 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-drawer-bg: var(--pk-color-surface);
+  --pk-drawer-border: var(--pk-color-border);
+  --pk-drawer-shadow: var(--elevation-1);
+  --pk-drawer-backdrop-bg: rgba(0, 0, 0, 0.5);
+  --pk-drawer-z-index: 1302;
+  --pk-drawer-padding: var(--pk-space-md);
+}
+
 .prokodo-Drawer {
   /* Backdrop (unchanged, fades in) */
   /* Container (slide + fade via transitions) */

package/dist/components/drawer/Drawer.module.css

@@ -124,6 +124,15 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-drawer-bg: var(--pk-color-surface);
+  --pk-drawer-border: var(--pk-color-border);
+  --pk-drawer-shadow: var(--elevation-1);
+  --pk-drawer-backdrop-bg: rgba(0, 0, 0, 0.5);
+  --pk-drawer-z-index: 1302;
+  --pk-drawer-padding: var(--pk-space-md);
+}
+
 .prokodo-Drawer {
   /* Backdrop (unchanged, fades in) */
   /* Container (slide + fade via transitions) */

package/dist/components/dynamic-list/DynamicList.css

@@ -1,3 +1,8 @@
+@import "../button/Button.css";
+@import "../input/Input.css";
+@import "../label/Label.css";
+@import "../select/Select.css";
+
 @charset "UTF-8";
 /* stylelint-disable */
 /**
@@ -125,6 +130,18 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-dynamic-list-label-mb: var(--pk-space-md);
+  --pk-dynamic-list-gap: var(--pk-space-lg);
+  --pk-dynamic-list-field-mb: var(--pk-space-lg);
+  --pk-dynamic-list-delete-mt: var(--pk-space-sm);
+  --pk-dynamic-list-helper-fg: var(--pk-palette-grey-300);
+  --pk-dynamic-list-helper-pl: var(--pk-space-xl);
+  --pk-dynamic-list-helper-pt: var(--pk-space-md);
+  --pk-dynamic-list-helper-w: 80%;
+  --pk-dynamic-list-error-fg: var(--pk-color-error);
+}
+
 .prokodo-DynamicList {
   border: none;
   padding: 0;

package/dist/components/dynamic-list/DynamicList.module.css

@@ -125,6 +125,18 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-dynamic-list-label-mb: var(--pk-space-md);
+  --pk-dynamic-list-gap: var(--pk-space-lg);
+  --pk-dynamic-list-field-mb: var(--pk-space-lg);
+  --pk-dynamic-list-delete-mt: var(--pk-space-sm);
+  --pk-dynamic-list-helper-fg: var(--pk-palette-grey-300);
+  --pk-dynamic-list-helper-pl: var(--pk-space-xl);
+  --pk-dynamic-list-helper-pt: var(--pk-space-md);
+  --pk-dynamic-list-helper-w: 80%;
+  --pk-dynamic-list-error-fg: var(--pk-color-error);
+}
+
 .prokodo-DynamicList {
   border: none;
   padding: 0;