@prokodo/ui 1.0.6 → 1.0.7

package/dist/components/accordion/Accordion.css

@@ -128,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

@@ -126,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/button/Button.css

@@ -128,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/card/Card.css

@@ -131,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

@@ -126,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

@@ -126,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

@@ -126,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

@@ -127,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

@@ -130,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;

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/image-text/ImageText.css

@@ -132,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

@@ -126,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

@@ -126,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;