@prokodo/ui 1.0.6 → 1.0.7

package/dist/components/tooltip/Tooltip.module.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;

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "1.0.6";
+const PROKODO_UI_VERSION = "1.0.7";
 export {
   PROKODO_UI_VERSION
 };

package/dist/theme-tokens.css

@@ -195,358 +195,6 @@
   --pk-z-modal-backdrop: 1300;
   --pk-z-modal: 1301;
   --pk-z-popover: 1400;
-  --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);
-  --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);
-  --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);
-  --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;
-  --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);
-  --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);
-  --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);
-  --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);
-  --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);
-  --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);
-  --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;
-  --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;
-  --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);
-  --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);
-  --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;
-  --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);
-  --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);
-  --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);
-  --pk-grid-padding: var(--pk-space-lg);
-  --pk-image-text-content-color: var(--pk-color-muted);
-  --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);
-  --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);
-  --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);
-  --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);
-  --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);
-  --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);
-  --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;
-  --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);
-  --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;
-  --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);
 }
 
 html[data-theme=dark],