@prokodo/ui 1.0.6 → 1.0.8

package/README.md

@@ -39,30 +39,55 @@
 
 ## ✨ Features
 
-- ✨ **Adaptive Island Components (AIC)**: A rendering strategy where each component loads only the JavaScript it needs — when needed.
-- ⚡️ **Modern stack**: Vite, React 19, TypeScript, and SCSS Modules
-- 💅 **Design consistency**: Theming via design tokens and BEM-style naming
-- 🧩 **Component-rich**: 50+ reusable UI components
-- 🧪 **Reliable**: Fully tested with Jest and Testing Library
-- 📚 **Storybook**: Explore the components at [ui.prokodo.com](https://ui.prokodo.com)
-- 📦 **Ready-to-install**: Distributed via npm under the Apache-2.0 license — free for production use
-- 🚀 **Optimized for Next.js 13–16 out of the box** (App Router, React Server Components)
-- ⚡ **Turbopack compatible** (no config required)
-- 🔗 **Framework adapters** via `UIRuntimeProvider` for `next/link` & `next/image`
+- ✨ **AIC architecture**: Components are split into server, client, and lazy variants so JS is loaded only where interaction is needed.
+- ⚡️ **Modern stack**: Vite, React 19, TypeScript, and SCSS Modules.
+- 💅 **Design consistency**: Token-driven styling via CSS custom properties (`--pk-*`).
+- 🧩 **Component-rich**: 52 production-ready components across multiple categories.
+- 🧪 **Reliable**: Tested with Jest, Testing Library, and Cypress component tests.
+- 📚 **Storybook**: Explore live component examples at [ui.prokodo.com/storybook](https://ui.prokodo.com/storybook).
+- 📦 **Ready to install**: Published on npm under Apache-2.0 for production use.
+- 🚀 **Built for Next.js 13-16**: App Router and React Server Component workflows out of the box.
+- ⚡ **Turbopack friendly**: Works without custom bundler configuration.
+- 🔗 **Framework adapters**: `UIRuntimeProvider` integrates routing/image primitives (for example `next/link` and `next/image`).
 
 ## ⚡ Lightweight by Design
 
-Adaptive Island Components (AIC) are fully modular and optimized for modern frameworks (Next.js, Remix, etc.).  
-Each component is built for **lazy loading**, works seamlessly with **React Server Components (RSC)**, and can be **tree-shaken** out when unused.
+prokodo UI is designed to stay lean in SSR-first architectures by combining split component entry points with static CSS output.
 
-**Total bundle (all components): ~195 kB gzipped**
+- **Component-level entry points** for server, client, and lazy usage
+- **No CSS-in-JS runtime injection** in the default styling model
+- **Tree-shakable imports** with per-component CSS/JS separation
+- **RSC-friendly usage model** for Next.js App Router workflows
 
-- **Only 5–20 kB** are typically loaded per page
-- **Zero-JS on initial render** for most components
-- **Hydration is deferred** until interaction or visibility
-- Shared styles are minimal: **only ~16.5 kB gzipped**
+**Measured production baseline (current build):**
 
-This makes `@prokodo/ui` ideal for modern SSR apps using Next.js or Remix, with excellent Time-to-Interactive (TTI) and Core Web Vitals.
+- `theme.css`: ~34 KB gzip
+- `theme-tokens.css`: ~3 KB gzip
+- Additional component CSS/JS depends on what your app imports
+
+Real-world payload varies by route composition, import discipline, and rendering strategy.
+
+---
+
+## 🎯 How It Compares
+
+| Aspect                | prokodo UI                                   | Material-UI (MUI)                      | Radix UI                                 | Shadcn/ui                             |
+| --------------------- | -------------------------------------------- | -------------------------------------- | ---------------------------------------- | ------------------------------------- |
+| **RSC Readiness**     | ✅ Native App Router fit                     | ⚠️ Works, but setup/runtime is heavier | ✅ Good fit, mostly low-level primitives | ✅ Good App Router workflow           |
+| **Styling Runtime**   | ✅ No CSS-in-JS runtime                      | ⚠️ Emotion runtime by default          | ✅ No styling runtime (unstyled)         | ✅ Static styles in app code          |
+| **Baseline CSS**      | ~34 KB (measured production baseline)        | Project-dependent                      | Project-dependent                        | Project-dependent                     |
+| **Tree-shaking**      | ✅ Strong by design (component-level CSS/JS) | ✅ Good with strict import discipline  | ✅ Strong with granular packages         | ✅ Strong (copy only what you use)    |
+| **Maintenance Model** | ✅ Versioned npm library                     | Versioned npm library                  | Versioned npm library                    | Source ownership in each app          |
+| **Best Fit**          | Next.js/Remix SSR + Core Web Vitals          | Teams standardized on Material Design  | Teams building custom primitives         | Teams preferring copy-paste ownership |
+
+**Recommendation:**
+
+- Choose **prokodo UI** when performance, SSR clarity, and a ready-to-use component system are priorities.
+- Consider alternatives only when your project explicitly needs their model (Material Design lock-in, fully headless primitives, or copy-paste ownership).
+
+---
+
+**Data note:** prokodo-ui bundle size (34 KB) is measured from production build. Other library sizes depend heavily on import patterns, tree-shaking, and individual project configuration.
 
 ---
 

package/dist/components/RTE/RTE.js

@@ -8,6 +8,10 @@ const RTE = createIsland({
   loadLazy: (
     /* istanbul ignore next */
     /* @__PURE__ */ __name(() => import("./RTE.lazy.js"), "loadLazy")
+  ),
+  isInteractive: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => true, "isInteractive")
   )
 });
 export {

package/dist/components/RTE/RTE.lazy.js

@@ -1,11 +1,14 @@
 "use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
 import RTEClient from "./RTE.client.js";
 import RTEServer from "./RTE.server.js";
 const RTE_lazy = createLazyWrapper({
   name: "RTE",
   Client: RTEClient,
-  Server: RTEServer
+  Server: RTEServer,
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
 });
 export {
   RTE_lazy as default

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-fg);
+  --pk-carousel-button-padding: var(--pk-space-md);
+  --pk-carousel-dots-mt: 0;
+  --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-fg);
+  --pk-carousel-button-padding: var(--pk-space-md);
+  --pk-carousel-dots-mt: 0;
+  --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);