@prokodo/ui 1.0.6 → 1.0.7

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/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/progressBar/ProgressBar.css

@@ -124,6 +124,14 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-progressbar-track-bg: var(--pk-color-surface-raised, var(--pk-palette-grey-100));
+  --pk-progressbar-radius: 0.75rem;
+  --pk-progressbar-height: 1rem;
+  --pk-progressbar-shadow: var(--elevation-2);
+  --pk-progressbar-label-size: 0.875rem;
+}
+
 @keyframes gradientShift {
   0% {
     background-position: 0 0;

package/dist/components/progressBar/ProgressBar.module.css

@@ -124,6 +124,14 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-progressbar-track-bg: var(--pk-color-surface-raised, var(--pk-palette-grey-100));
+  --pk-progressbar-radius: 0.75rem;
+  --pk-progressbar-height: 1rem;
+  --pk-progressbar-shadow: var(--elevation-2);
+  --pk-progressbar-label-size: 0.875rem;
+}
+
 @keyframes gradientShift {
   0% {
     background-position: 0 0;

package/dist/components/rating/Rating.css

@@ -126,6 +126,21 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-rating-gap: var(--pk-space-lg);
+  --pk-rating-padding-y: var(--pk-space-md);
+  --pk-rating-label-pb: var(--pk-space-sm);
+  --pk-rating-footer-pt: var(--pk-space-sm);
+  --pk-rating-helper-pt: var(--pk-space-md);
+  --pk-rating-icon-size: 1.5rem;
+  --pk-rating-icon-fg: var(--pk-palette-grey-200);
+  --pk-rating-icon-fg-filled: var(--pk-color-brand);
+  --pk-rating-icon-fg-disabled: var(--pk-palette-grey-200);
+  --pk-rating-focus-ring: var(--pk-color-brand);
+  --pk-rating-helper-fg: var(--pk-palette-grey-300);
+  --pk-rating-error-fg: var(--pk-color-error);
+}
+
 .prokodo-Rating {
   position: relative;
   display: flex;

package/dist/components/rating/Rating.module.css

@@ -124,6 +124,21 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-rating-gap: var(--pk-space-lg);
+  --pk-rating-padding-y: var(--pk-space-md);
+  --pk-rating-label-pb: var(--pk-space-sm);
+  --pk-rating-footer-pt: var(--pk-space-sm);
+  --pk-rating-helper-pt: var(--pk-space-md);
+  --pk-rating-icon-size: 1.5rem;
+  --pk-rating-icon-fg: var(--pk-palette-grey-200);
+  --pk-rating-icon-fg-filled: var(--pk-color-brand);
+  --pk-rating-icon-fg-disabled: var(--pk-palette-grey-200);
+  --pk-rating-focus-ring: var(--pk-color-brand);
+  --pk-rating-helper-fg: var(--pk-palette-grey-300);
+  --pk-rating-error-fg: var(--pk-color-error);
+}
+
 .prokodo-Rating {
   position: relative;
   display: flex;

package/dist/components/rich-text/RichText.css

@@ -129,6 +129,24 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-rte-bg: var(--pk-color-surface);
+  --pk-rte-toolbar-bg: color-mix(in srgb, var(--pk-color-brand) 8%, var(--pk-color-surface));
+  --pk-rte-accent: var(--pk-color-brand);
+  --pk-rte-icon-color: var(--pk-color-fg);
+  --pk-rte-icon-opacity: 0.7;
+  --pk-rte-picker-bg: var(--pk-color-surface);
+  --pk-rte-picker-border: var(--pk-color-border);
+  --pk-rte-picker-hover-bg: color-mix(in srgb, var(--pk-rte-accent) 8%, var(--pk-color-surface));
+  --pk-rte-picker-active-bg: color-mix(in srgb, var(--pk-rte-accent) 16%, var(--pk-color-surface));
+  --pk-rte-picker-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+  --pk-rte-code-bg: color-mix(in srgb, var(--pk-color-fg) 6%, transparent);
+  --pk-rte-radius: var(--pk-radius-md);
+  --pk-rte-radius-lg: 14px;
+  --pk-rte-resize-color: var(--pk-color-fg);
+  --pk-rte-resize-opacity: 0.55;
+}
+
 .prokodo-RichText__a {
   color: var(--pk-color-brand);
 }

package/dist/components/rich-text/RichText.module.css

@@ -124,6 +124,24 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-rte-bg: var(--pk-color-surface);
+  --pk-rte-toolbar-bg: color-mix(in srgb, var(--pk-color-brand) 8%, var(--pk-color-surface));
+  --pk-rte-accent: var(--pk-color-brand);
+  --pk-rte-icon-color: var(--pk-color-fg);
+  --pk-rte-icon-opacity: 0.7;
+  --pk-rte-picker-bg: var(--pk-color-surface);
+  --pk-rte-picker-border: var(--pk-color-border);
+  --pk-rte-picker-hover-bg: color-mix(in srgb, var(--pk-rte-accent) 8%, var(--pk-color-surface));
+  --pk-rte-picker-active-bg: color-mix(in srgb, var(--pk-rte-accent) 16%, var(--pk-color-surface));
+  --pk-rte-picker-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+  --pk-rte-code-bg: color-mix(in srgb, var(--pk-color-fg) 6%, transparent);
+  --pk-rte-radius: var(--pk-radius-md);
+  --pk-rte-radius-lg: 14px;
+  --pk-rte-resize-color: var(--pk-color-fg);
+  --pk-rte-resize-opacity: 0.55;
+}
+
 .prokodo-RichText__a {
   color: var(--pk-color-brand);
 }

package/dist/components/select/Select.css

@@ -127,6 +127,29 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-select-bg: var(--pk-color-surface);
+  --pk-select-fg: var(--pk-color-fg);
+  --pk-select-fg-muted: var(--pk-color-muted);
+  --pk-select-fg-placeholder: var(--pk-palette-grey-500);
+  --pk-select-label-fg: var(--pk-color-brand);
+  --pk-select-label-bg: var(--pk-color-surface);
+  --pk-select-radius: var(--pk-radius-pill);
+  --pk-select-shadow: var(--pk-shadow-sm);
+  --pk-select-listbox-shadow: var(--pk-shadow-lg);
+  --pk-select-shadow-color: rgba(0, 0, 0, 0.1);
+  --pk-select-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-select-gradient-from: var(--pk-color-brand);
+  --pk-select-gradient-to: var(--pk-color-accent);
+  --pk-select-item-hover-bg: var(--pk-palette-primary-50);
+  --pk-select-item-active-bg: var(--pk-palette-primary-100);
+  --pk-select-helper-fg: var(--pk-palette-grey-300);
+  --pk-select-padding-x: var(--pk-space-lg);
+  --pk-select-padding-y: 0.875rem;
+  --pk-select-item-padding-x: var(--pk-space-md);
+  --pk-select-item-padding-y: var(--pk-space-sm);
+}
+
 @keyframes selectBorderShift {
   from {
     background-position: 0 0, 0 0, 0 0;

package/dist/components/select/Select.module.css

@@ -125,6 +125,29 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-select-bg: var(--pk-color-surface);
+  --pk-select-fg: var(--pk-color-fg);
+  --pk-select-fg-muted: var(--pk-color-muted);
+  --pk-select-fg-placeholder: var(--pk-palette-grey-500);
+  --pk-select-label-fg: var(--pk-color-brand);
+  --pk-select-label-bg: var(--pk-color-surface);
+  --pk-select-radius: var(--pk-radius-pill);
+  --pk-select-shadow: var(--pk-shadow-sm);
+  --pk-select-listbox-shadow: var(--pk-shadow-lg);
+  --pk-select-shadow-color: rgba(0, 0, 0, 0.1);
+  --pk-select-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-select-gradient-from: var(--pk-color-brand);
+  --pk-select-gradient-to: var(--pk-color-accent);
+  --pk-select-item-hover-bg: var(--pk-palette-primary-50);
+  --pk-select-item-active-bg: var(--pk-palette-primary-100);
+  --pk-select-helper-fg: var(--pk-palette-grey-300);
+  --pk-select-padding-x: var(--pk-space-lg);
+  --pk-select-padding-y: 0.875rem;
+  --pk-select-item-padding-x: var(--pk-space-md);
+  --pk-select-item-padding-y: var(--pk-space-sm);
+}
+
 @keyframes selectBorderShift {
   from {
     background-position: 0 0, 0 0, 0 0;

package/dist/components/sidenav/SideNav.css

@@ -130,6 +130,26 @@
  * content.
  */
 /* src/components/side-nav/SideNav.module.scss */
+:root {
+  --pk-sidenav-bg: var(--pk-color-surface);
+  --pk-sidenav-shadow: var(--pk-shadow-md);
+  --pk-sidenav-toggle-hover: var(--pk-color-surface-raised);
+  --pk-sidenav-link-hover-bg: color-mix(in srgb, var(--pk-color-brand) 10%, transparent);
+  --pk-sidenav-link-active-bg: color-mix(in srgb, var(--pk-color-brand) 5%, transparent);
+  --pk-sidenav-icon-color: var(--pk-color-fg);
+  --pk-sidenav-icon-bg: var(--pk-color-surface-raised);
+  --pk-sidenav-label-color: color-mix(in srgb, var(--pk-color-fg) 70%, transparent);
+  --pk-sidenav-fg: var(--pk-color-fg);
+  --pk-sidenav-radius: var(--pk-radius-sm);
+  --pk-sidenav-gap: var(--pk-space-xs);
+  --pk-sidenav-pad-xs: var(--pk-space-xs);
+  --pk-sidenav-pad-sm: var(--pk-space-sm);
+  --pk-sidenav-pad-md: var(--pk-space-md);
+  --pk-sidenav-pad-lg: var(--pk-space-lg);
+  --pk-sidenav-link-gap: var(--pk-space-md);
+  --pk-sidenav-section-headline-color: color-mix(in srgb, var(--pk-color-fg) 45%, transparent);
+}
+
 @keyframes label-in {
   from {
     opacity: 0;

package/dist/components/sidenav/SideNav.module.css

@@ -126,6 +126,26 @@
  * content.
  */
 /* src/components/side-nav/SideNav.module.scss */
+:root {
+  --pk-sidenav-bg: var(--pk-color-surface);
+  --pk-sidenav-shadow: var(--pk-shadow-md);
+  --pk-sidenav-toggle-hover: var(--pk-color-surface-raised);
+  --pk-sidenav-link-hover-bg: color-mix(in srgb, var(--pk-color-brand) 10%, transparent);
+  --pk-sidenav-link-active-bg: color-mix(in srgb, var(--pk-color-brand) 5%, transparent);
+  --pk-sidenav-icon-color: var(--pk-color-fg);
+  --pk-sidenav-icon-bg: var(--pk-color-surface-raised);
+  --pk-sidenav-label-color: color-mix(in srgb, var(--pk-color-fg) 70%, transparent);
+  --pk-sidenav-fg: var(--pk-color-fg);
+  --pk-sidenav-radius: var(--pk-radius-sm);
+  --pk-sidenav-gap: var(--pk-space-xs);
+  --pk-sidenav-pad-xs: var(--pk-space-xs);
+  --pk-sidenav-pad-sm: var(--pk-space-sm);
+  --pk-sidenav-pad-md: var(--pk-space-md);
+  --pk-sidenav-pad-lg: var(--pk-space-lg);
+  --pk-sidenav-link-gap: var(--pk-space-md);
+  --pk-sidenav-section-headline-color: color-mix(in srgb, var(--pk-color-fg) 45%, transparent);
+}
+
 @keyframes label-in {
   from {
     opacity: 0;

package/dist/components/skeleton/Skeleton.css

@@ -124,6 +124,14 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-skeleton-bg: rgba(0, 0, 0, 0.08);
+  --pk-skeleton-bg-dark: rgba(30, 48, 79, 0.11);
+  --pk-skeleton-shimmer-fg: var(--pk-palette-white);
+  --pk-skeleton-shimmer-fg-dark: var(--pk-palette-primary-50, var(--pk-color-brand));
+  --pk-skeleton-radius: 4px;
+}
+
 /* Pulse opacity */
 @keyframes skeleton-pulse {
   0% {

package/dist/components/skeleton/Skeleton.module.css

@@ -124,6 +124,14 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-skeleton-bg: rgba(0, 0, 0, 0.08);
+  --pk-skeleton-bg-dark: rgba(30, 48, 79, 0.11);
+  --pk-skeleton-shimmer-fg: var(--pk-palette-white);
+  --pk-skeleton-shimmer-fg-dark: var(--pk-palette-primary-50, var(--pk-color-brand));
+  --pk-skeleton-radius: 4px;
+}
+
 /* Pulse opacity */
 @keyframes skeleton-pulse {
   0% {

package/dist/components/slider/Slider.css

@@ -126,6 +126,25 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-slider-track-height: 4px;
+  --pk-slider-track-bg: var(--pk-color-border);
+  --pk-slider-fill-from: var(--pk-color-brand);
+  --pk-slider-fill-to: var(--pk-color-accent);
+  --pk-slider-label-fg: var(--pk-color-fg);
+  --pk-slider-mark-bg: var(--pk-palette-grey-400);
+  --pk-slider-mark-label-fg: var(--pk-input-helper-fg);
+  --pk-slider-thumb-size: 24px;
+  --pk-slider-thumb-border: var(--pk-color-surface);
+  --pk-slider-thumb-glow-rgb: var(--pk-palette-primary-500-rgb);
+  --pk-slider-tooltip-bg: var(--pk-color-fg);
+  --pk-slider-tooltip-fg: var(--pk-color-surface);
+  --pk-slider-tooltip-height: 24px;
+  --pk-slider-tooltip-gap: 10px;
+  --pk-slider-mark-label-height: 20px;
+  --pk-slider-timing: 150ms;
+}
+
 .prokodo-Slider {
   position: relative;
   width: 100%;

package/dist/components/slider/Slider.module.css

@@ -124,6 +124,25 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-slider-track-height: 4px;
+  --pk-slider-track-bg: var(--pk-color-border);
+  --pk-slider-fill-from: var(--pk-color-brand);
+  --pk-slider-fill-to: var(--pk-color-accent);
+  --pk-slider-label-fg: var(--pk-color-fg);
+  --pk-slider-mark-bg: var(--pk-palette-grey-400);
+  --pk-slider-mark-label-fg: var(--pk-input-helper-fg);
+  --pk-slider-thumb-size: 24px;
+  --pk-slider-thumb-border: var(--pk-color-surface);
+  --pk-slider-thumb-glow-rgb: var(--pk-palette-primary-500-rgb);
+  --pk-slider-tooltip-bg: var(--pk-color-fg);
+  --pk-slider-tooltip-fg: var(--pk-color-surface);
+  --pk-slider-tooltip-height: 24px;
+  --pk-slider-tooltip-gap: 10px;
+  --pk-slider-mark-label-height: 20px;
+  --pk-slider-timing: 150ms;
+}
+
 .prokodo-Slider {
   position: relative;
   width: 100%;

package/dist/components/snackbar/Snackbar.css

@@ -126,6 +126,33 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-snackbar-bg: var(--pk-color-fg);
+  --pk-snackbar-fg: var(--pk-color-surface);
+  --pk-snackbar-border-color: color-mix(in srgb, var(--pk-color-surface) 15%, transparent);
+  --pk-snackbar-radius: var(--pk-radius-md);
+  --pk-snackbar-shadow: var(--pk-shadow-lg);
+  --pk-snackbar-padding-x: var(--pk-space-xl);
+  --pk-snackbar-padding-y: var(--pk-space-lg);
+  --pk-snackbar-timing: var(--pk-timing-normal);
+  --pk-snackbar-success-bg: color-mix(in srgb, var(--pk-color-success) 10%, var(--pk-color-surface));
+  --pk-snackbar-success-fg: var(--pk-color-fg);
+  --pk-snackbar-success-border: color-mix(in srgb, var(--pk-color-success) 40%, transparent);
+  --pk-snackbar-success-shadow: 0 4px 24px color-mix(in srgb, var(--pk-color-success) 20%, transparent);
+  --pk-snackbar-error-bg: color-mix(in srgb, var(--pk-color-error) 10%, var(--pk-color-surface));
+  --pk-snackbar-error-fg: var(--pk-color-fg);
+  --pk-snackbar-error-border: color-mix(in srgb, var(--pk-color-error) 40%, transparent);
+  --pk-snackbar-error-shadow: 0 4px 24px color-mix(in srgb, var(--pk-color-error) 20%, transparent);
+  --pk-snackbar-warning-bg: color-mix(in srgb, var(--pk-color-warning) 10%, var(--pk-color-surface));
+  --pk-snackbar-warning-fg: var(--pk-color-fg);
+  --pk-snackbar-warning-border: color-mix(in srgb, var(--pk-color-warning) 40%, transparent);
+  --pk-snackbar-warning-shadow: 0 4px 24px color-mix(in srgb, var(--pk-color-warning) 20%, transparent);
+  --pk-snackbar-info-bg: color-mix(in srgb, var(--pk-color-fg) 8%, var(--pk-color-surface));
+  --pk-snackbar-info-fg: var(--pk-color-fg);
+  --pk-snackbar-info-border: color-mix(in srgb, var(--pk-color-fg) 20%, transparent);
+  --pk-snackbar-info-shadow: var(--pk-shadow-md);
+}
+
 .prokodo-SnackbarProvider {
   position: fixed;
   z-index: 1400;

package/dist/components/snackbar/Snackbar.module.css

@@ -124,6 +124,33 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-snackbar-bg: var(--pk-color-fg);
+  --pk-snackbar-fg: var(--pk-color-surface);
+  --pk-snackbar-border-color: color-mix(in srgb, var(--pk-color-surface) 15%, transparent);
+  --pk-snackbar-radius: var(--pk-radius-md);
+  --pk-snackbar-shadow: var(--pk-shadow-lg);
+  --pk-snackbar-padding-x: var(--pk-space-xl);
+  --pk-snackbar-padding-y: var(--pk-space-lg);
+  --pk-snackbar-timing: var(--pk-timing-normal);
+  --pk-snackbar-success-bg: color-mix(in srgb, var(--pk-color-success) 10%, var(--pk-color-surface));
+  --pk-snackbar-success-fg: var(--pk-color-fg);
+  --pk-snackbar-success-border: color-mix(in srgb, var(--pk-color-success) 40%, transparent);
+  --pk-snackbar-success-shadow: 0 4px 24px color-mix(in srgb, var(--pk-color-success) 20%, transparent);
+  --pk-snackbar-error-bg: color-mix(in srgb, var(--pk-color-error) 10%, var(--pk-color-surface));
+  --pk-snackbar-error-fg: var(--pk-color-fg);
+  --pk-snackbar-error-border: color-mix(in srgb, var(--pk-color-error) 40%, transparent);
+  --pk-snackbar-error-shadow: 0 4px 24px color-mix(in srgb, var(--pk-color-error) 20%, transparent);
+  --pk-snackbar-warning-bg: color-mix(in srgb, var(--pk-color-warning) 10%, var(--pk-color-surface));
+  --pk-snackbar-warning-fg: var(--pk-color-fg);
+  --pk-snackbar-warning-border: color-mix(in srgb, var(--pk-color-warning) 40%, transparent);
+  --pk-snackbar-warning-shadow: 0 4px 24px color-mix(in srgb, var(--pk-color-warning) 20%, transparent);
+  --pk-snackbar-info-bg: color-mix(in srgb, var(--pk-color-fg) 8%, var(--pk-color-surface));
+  --pk-snackbar-info-fg: var(--pk-color-fg);
+  --pk-snackbar-info-border: color-mix(in srgb, var(--pk-color-fg) 20%, transparent);
+  --pk-snackbar-info-shadow: var(--pk-shadow-md);
+}
+
 .prokodo-SnackbarProvider {
   position: fixed;
   z-index: 1400;

package/dist/components/stepper/Stepper.css

@@ -126,6 +126,15 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-stepper-icon-mask-bg: var(--pk-color-surface);
+  --pk-stepper-label-color: color-mix(in srgb, var(--pk-color-fg) 45%, transparent);
+  --pk-stepper-label-color-active: var(--pk-color-fg);
+  --pk-stepper-shadow: var(--pk-shadow-sm);
+  --pk-stepper-shadow-inset: var(--elevation-1--inset);
+  --pk-stepper-icon-mb: var(--pk-space-md);
+}
+
 .prokodo-Stepper {
   display: flex;
   justify-content: space-between;

package/dist/components/stepper/Stepper.module.css

@@ -124,6 +124,15 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-stepper-icon-mask-bg: var(--pk-color-surface);
+  --pk-stepper-label-color: color-mix(in srgb, var(--pk-color-fg) 45%, transparent);
+  --pk-stepper-label-color-active: var(--pk-color-fg);
+  --pk-stepper-shadow: var(--pk-shadow-sm);
+  --pk-stepper-shadow-inset: var(--elevation-1--inset);
+  --pk-stepper-icon-mb: var(--pk-space-md);
+}
+
 .prokodo-Stepper {
   display: flex;
   justify-content: space-between;

package/dist/components/switch/Switch.css

@@ -126,6 +126,22 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-switch-track-width: 44px;
+  --pk-switch-track-height: 24px;
+  --pk-switch-track-bg: color-mix(in srgb, var(--pk-color-fg) 18%, transparent);
+  --pk-switch-track-checked-bg: var(--pk-color-brand);
+  --pk-switch-track-radius: 9999px;
+  --pk-switch-thumb-size: 18px;
+  --pk-switch-thumb-bg: #ffffff;
+  --pk-switch-thumb-checked-bg: #ffffff;
+  --pk-switch-thumb-glow-rgb: var(--pk-palette-primary-500-rgb);
+  --pk-switch-label-fg: var(--pk-color-fg);
+  --pk-switch-active: var(--pk-color-brand);
+  --pk-switch-focus-ring: var(--pk-color-brand);
+  --pk-switch-timing: 180ms;
+}
+
 .prokodo-Switch {
   width: 100%;
   display: inline-flex;

package/dist/components/switch/Switch.module.css

@@ -124,6 +124,22 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-switch-track-width: 44px;
+  --pk-switch-track-height: 24px;
+  --pk-switch-track-bg: color-mix(in srgb, var(--pk-color-fg) 18%, transparent);
+  --pk-switch-track-checked-bg: var(--pk-color-brand);
+  --pk-switch-track-radius: 9999px;
+  --pk-switch-thumb-size: 18px;
+  --pk-switch-thumb-bg: #ffffff;
+  --pk-switch-thumb-checked-bg: #ffffff;
+  --pk-switch-thumb-glow-rgb: var(--pk-palette-primary-500-rgb);
+  --pk-switch-label-fg: var(--pk-color-fg);
+  --pk-switch-active: var(--pk-color-brand);
+  --pk-switch-focus-ring: var(--pk-color-brand);
+  --pk-switch-timing: 180ms;
+}
+
 .prokodo-Switch {
   width: 100%;
   display: inline-flex;

package/dist/components/table/Table.css

@@ -130,6 +130,17 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-table-border-color: var(--pk-color-border);
+  --pk-table-header-accent-color: var(--pk-color-brand);
+  --pk-table-row-hover-bg: color-mix(in srgb, var(--pk-color-brand) 8%, transparent);
+  --pk-table-caption-color: var(--pk-color-muted);
+  --pk-table-cell-fg: var(--pk-color-fg);
+  --pk-table-padding-y: var(--pk-space-xl);
+  --pk-table-padding-x: var(--pk-space-sm);
+  --pk-table-container-pb: var(--pk-space-xl);
+}
+
 .prokodo-Table {
   padding-bottom: var(--pk-table-container-pb);
   padding-left: calc(var(--pk-space-lg) + var(--pk-space-xs));

package/dist/components/table/Table.module.css

@@ -124,6 +124,17 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-table-border-color: var(--pk-color-border);
+  --pk-table-header-accent-color: var(--pk-color-brand);
+  --pk-table-row-hover-bg: color-mix(in srgb, var(--pk-color-brand) 8%, transparent);
+  --pk-table-caption-color: var(--pk-color-muted);
+  --pk-table-cell-fg: var(--pk-color-fg);
+  --pk-table-padding-y: var(--pk-space-xl);
+  --pk-table-padding-x: var(--pk-space-sm);
+  --pk-table-container-pb: var(--pk-space-xl);
+}
+
 .prokodo-Table {
   padding-bottom: var(--pk-table-container-pb);
   padding-left: calc(var(--pk-space-lg) + var(--pk-space-xs));

package/dist/components/tabs/Tabs.css

@@ -126,6 +126,24 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-tabs-border: var(--pk-color-border);
+  --pk-tabs-tab-color: color-mix(in srgb, var(--pk-color-fg) 70%, transparent);
+  --pk-tabs-tab-hover-color: var(--pk-color-brand);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-tabs-tab-hover-color) 8%, transparent);
+  --pk-tabs-tab-selected-color: var(--pk-color-fg);
+  --pk-tabs-tab-disabled-color: var(--pk-color-muted);
+  --pk-tabs-badge-bg: var(--pk-color-border);
+  --pk-tabs-badge-fg: color-mix(in srgb, var(--pk-color-fg) 70%, transparent);
+  --pk-tabs-indicator-gradient: var(--gradient-border-4);
+  --pk-tabs-gap: var(--pk-space-lg);
+  --pk-tabs-pad-xs: var(--pk-space-xs);
+  --pk-tabs-pad-sm: var(--pk-space-sm);
+  --pk-tabs-pad-md: var(--pk-space-md);
+  --pk-tabs-pad-lg: var(--pk-space-lg);
+  --pk-tabs-radius: var(--pk-radius-sm);
+}
+
 .prokodo-Tabs {
   width: 100%;
 }

package/dist/components/tabs/Tabs.module.css

@@ -124,6 +124,24 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-tabs-border: var(--pk-color-border);
+  --pk-tabs-tab-color: color-mix(in srgb, var(--pk-color-fg) 70%, transparent);
+  --pk-tabs-tab-hover-color: var(--pk-color-brand);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-tabs-tab-hover-color) 8%, transparent);
+  --pk-tabs-tab-selected-color: var(--pk-color-fg);
+  --pk-tabs-tab-disabled-color: var(--pk-color-muted);
+  --pk-tabs-badge-bg: var(--pk-color-border);
+  --pk-tabs-badge-fg: color-mix(in srgb, var(--pk-color-fg) 70%, transparent);
+  --pk-tabs-indicator-gradient: var(--gradient-border-4);
+  --pk-tabs-gap: var(--pk-space-lg);
+  --pk-tabs-pad-xs: var(--pk-space-xs);
+  --pk-tabs-pad-sm: var(--pk-space-sm);
+  --pk-tabs-pad-md: var(--pk-space-md);
+  --pk-tabs-pad-lg: var(--pk-space-lg);
+  --pk-tabs-radius: var(--pk-radius-sm);
+}
+
 .prokodo-Tabs {
   width: 100%;
 }

package/dist/components/tooltip/Tooltip.css

@@ -124,6 +124,31 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-tooltip-bg: color-mix(in srgb, var(--pk-color-fg) 92%, var(--pk-color-surface));
+  --pk-tooltip-fg: var(--pk-color-surface);
+  --pk-tooltip-border: color-mix(in srgb, var(--pk-color-surface) 12%, transparent);
+  --pk-tooltip-shadow: var(--pk-shadow-lg);
+  --pk-tooltip-radius: var(--pk-radius-sm);
+  --pk-tooltip-z: 2147483647;
+  --pk-tooltip-success-bg: color-mix(in srgb, var(--pk-color-success) 12%, var(--pk-color-surface));
+  --pk-tooltip-success-fg: var(--pk-color-fg);
+  --pk-tooltip-success-border: color-mix(in srgb, var(--pk-color-success) 35%, transparent);
+  --pk-tooltip-success-shadow: 0 4px 16px color-mix(in srgb, var(--pk-color-success) 18%, transparent);
+  --pk-tooltip-error-bg: color-mix(in srgb, var(--pk-color-error) 12%, var(--pk-color-surface));
+  --pk-tooltip-error-fg: var(--pk-color-fg);
+  --pk-tooltip-error-border: color-mix(in srgb, var(--pk-color-error) 35%, transparent);
+  --pk-tooltip-error-shadow: 0 4px 16px color-mix(in srgb, var(--pk-color-error) 18%, transparent);
+  --pk-tooltip-warning-bg: color-mix(in srgb, var(--pk-color-warning) 12%, var(--pk-color-surface));
+  --pk-tooltip-warning-fg: var(--pk-color-fg);
+  --pk-tooltip-warning-border: color-mix(in srgb, var(--pk-color-warning) 35%, transparent);
+  --pk-tooltip-warning-shadow: 0 4px 16px color-mix(in srgb, var(--pk-color-warning) 18%, transparent);
+  --pk-tooltip-info-bg: color-mix(in srgb, var(--pk-color-fg) 8%, var(--pk-color-surface));
+  --pk-tooltip-info-fg: var(--pk-color-fg);
+  --pk-tooltip-info-border: color-mix(in srgb, var(--pk-color-fg) 20%, transparent);
+  --pk-tooltip-info-shadow: var(--pk-shadow-md);
+}
+
 .prokodo-Tooltip {
   position: relative;
   display: inline-flex;