@prokodo/ui 1.0.4 → 1.0.6

package/dist/theme-tokens.css

@@ -0,0 +1,723 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+:root,
+.pk-theme-default {
+  --pk-palette-white: #FFFFFF;
+  --pk-palette-black: #000000;
+  --pk-palette-grey-50: #F5F5F5;
+  --pk-palette-grey-100: #BCBCBC;
+  --pk-palette-grey-200: #9C9C9C;
+  --pk-palette-grey-300: #7D7D7D;
+  --pk-palette-grey-400: #606060;
+  --pk-palette-grey-500: #4D4D4D;
+  --pk-palette-grey-600: #393939;
+  --pk-palette-grey-700: #2F2F2F;
+  --pk-palette-grey-800: #242424;
+  --pk-palette-grey-900: #121212;
+  --pk-palette-primary-50: #E5EBFF;
+  --pk-palette-primary-100: #C9D8FF;
+  --pk-palette-primary-400: #64A1FF;
+  --pk-palette-primary-500: #1E90FF;
+  --pk-palette-primary-600: #2676d0;
+  --pk-palette-primary-700: #275ea2;
+  --pk-palette-secondary-500: #00E6FF;
+  --pk-palette-slate-950: #10131b;
+  --pk-palette-success: #20E381;
+  --pk-palette-warning: #f7b529;
+  --pk-palette-error: #f0453a;
+  --pk-palette-primary-500-rgb: 30 144 255;
+  --pk-palette-primary-700-rgb: 39 94 162;
+  --pk-color-overlay-rgb: 0 0 0;
+  --pk-color-bg: var(--pk-palette-grey-50);
+  --pk-color-fg: var(--pk-palette-grey-900);
+  --pk-color-surface: var(--pk-palette-white);
+  --pk-color-surface-raised: var(--pk-palette-grey-50);
+  --pk-color-border: var(--pk-palette-grey-200);
+  --pk-color-muted: var(--pk-palette-grey-500);
+  --pk-color-overlay-alpha: 0.5;
+  --pk-color-brand: var(--pk-palette-primary-500);
+  --pk-color-brand-hover: var(--pk-palette-primary-400);
+  --pk-color-accent: var(--pk-palette-secondary-500);
+  --pk-color-on-brand: var(--pk-palette-white);
+  --pk-color-on-dark: var(--pk-palette-grey-50);
+  --pk-color-success: var(--pk-palette-success);
+  --pk-color-warning: var(--pk-palette-warning);
+  --pk-color-error: var(--pk-palette-error);
+  --pk-space-xs: 0.25rem;
+  --pk-space-sm: 0.5rem;
+  --pk-space-md: 0.75rem;
+  --pk-space-lg: 1rem;
+  --pk-space-xl: 1.5rem;
+  --pk-space-2xl: 2rem;
+  --pk-space-3xl: 4rem;
+  --pk-space-4xl: 8rem;
+  --pk-radius-sm: 5px;
+  --pk-radius-md: 0.75rem;
+  --pk-radius-lg: 2rem;
+  --pk-radius-pill: 1.5rem;
+  --pk-border-width: 1px;
+  --pk-focus-ring-width: 2px;
+  --pk-focus-ring-offset: 2px;
+  --pk-focus-ring-color: var(--pk-color-brand);
+  --pk-shadow-sm: var(--elevation-1);
+  --pk-shadow-md: var(--elevation-2);
+  --pk-shadow-lg: var(--elevation-3);
+  --pk-timing-fast: 0.15s;
+  --pk-timing-normal: 0.3s;
+  --pk-timing-slow: 0.6s;
+  --pk-z-header: 2;
+  --pk-z-nav: 999;
+  --pk-z-dropdown: 998;
+  --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],
+[data-theme=dark],
+.pk-theme-dark {
+  --pk-color-bg: var(--pk-palette-grey-900);
+  --pk-color-fg: var(--pk-palette-grey-50);
+  --pk-color-surface: var(--pk-palette-slate-950);
+  --pk-color-surface-raised: var(--pk-palette-grey-800);
+  --pk-color-border: var(--pk-palette-grey-700);
+  --pk-color-muted: var(--pk-palette-grey-200);
+  --pk-color-overlay-alpha: 0.7;
+  --pk-snackbar-info-bg: var(--pk-palette-grey-300);
+}
+
+:root {
+  --color-white: #FFFFFF;
+  --color-black: #000000;
+  --color-grey-50: #F5F5F5;
+  --color-grey-100: #BCBCBC;
+  --color-grey-200: #9C9C9C;
+  --color-grey-300: #7D7D7D;
+  --color-grey-400: #606060;
+  --color-grey-500: #4D4D4D;
+  --color-grey-600: #393939;
+  --color-grey-700: #2F2F2F;
+  --color-grey-800: #242424;
+  --color-grey-900: #121212;
+  --color-primary-20: #FFFFFF;
+  --color-primary-40: #FFFFFF;
+  --color-primary-50: #E5EBFF;
+  --color-primary-100: #C9D8FF;
+  --color-primary-200: #ACC5FF;
+  --color-primary-300: #8CB3FF;
+  --color-primary-400: #64A1FF;
+  --color-primary-500: #1E90FF;
+  --color-primary-600: #2676d0;
+  --color-primary-700: #275ea2;
+  --color-primary-800: #244677;
+  --color-primary-900: #1e304f;
+  --color-secondary-50: #E6FBFF;
+  --color-secondary-100: #CCF7FF;
+  --color-secondary-200: #AFF3FF;
+  --color-secondary-300: #8EEFFF;
+  --color-secondary-400: #64EBFF;
+  --color-secondary-500: #00E6FF;
+  --color-secondary-600: #1dbcd0;
+  --color-secondary-700: #2393a2;
+  --color-secondary-800: #236c77;
+  --color-secondary-900: #1e484e;
+  --color-success: #20E381;
+  --color-warning: #f7b529;
+  --color-error: #f0453a;
+  --color-primary-500-rgb: 30 144 255;
+  --color-primary-700-rgb: 39 94 162;
+  --elevation-1: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  --elevation-1--inset: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.3), inset 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --elevation-1--text: 0px 1px 2px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.15);
+  --elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --elevation-3: 0px 6px 10px -3px rgba(0, 0, 0, 0.25);
+  --elevation-5: 0px -20px 30px -25px rgba(0, 0, 0, 0.15);
+  --inner-elevation-1: 0px 2px 4px 1px rgba(0, 0, 0, 0.25) inset;
+  --inner-elevation-2: 0px -20px 30px -25px rgba(0, 0, 0, 0.15) inset;
+  --inner-elevation-3: -4px 0px 6px 0px rgba(0, 0, 0, 0.15) inset;
+  --gradient-background-primary-secondary: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-background-primary-grey-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
+  --gradient-background-grey-1: linear-gradient(180deg, var(--color-white) -9.57%, var(--color-grey-50) 102.02%);
+  --gradient-background-grey-2: linear-gradient(180deg, var(--color-grey-50) -9.57%, var(--color-white) 102.02%);
+  --gradient-background-radial-grey-1: radial-gradient(55.8% 55.8% at 50% 46.23%, #F0F0F0 0%, var(--color-white) 100%);
+  --gradient-background-inherit: linear-gradient(112deg, var(--color-grey-50) 0%, var(--color-grey-100) 100%);
+  --gradient-background-primary: linear-gradient(112deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-background-secondary: linear-gradient(112deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
+  --gradient-background-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-200) 50%, var(--color-grey-300) 100%);
+  --gradient-background-success: linear-gradient(112deg, #20E381 0%, #20E381 50%, #10CCB8 100%);
+  --gradient-background-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-background-error: linear-gradient(112deg, #EB5550 0%, #DB4A46 50%, #FF4444 100%);
+  --gradient-border-1: linear-gradient(180deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
+  --gradient-border-2: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-3: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-4: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-6: linear-gradient(90deg, var(--color-secondary-500) 4.63%, var(--color-primary-500) 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
+  --gradient-border-8: linear-gradient(90deg, var(--color-grey-100) 4.63%, var(--color-grey-300) 100%);
+  --gradient-border-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-300) 100%);
+  --gradient-border-success: linear-gradient(112deg, #20E381 0%, #10CCB8 100%);
+  --gradient-border-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-border-error: linear-gradient(112deg, #EB5550 0%, #FF4444 100%);
+  --gradient-text-primary-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
+  --gradient-text-primary-secondary-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 50%, var(--color-primary-500) 100%);
+  --gradient-text-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-grey-400) 100%);
+  --gradient-text-grey: linear-gradient(90deg, var(--color-grey-300) 0%, var(--color-grey-600) 100%);
+  --gradient-text-success: linear-gradient(#20E381, #20E381, #10CCB8);
+  --gradient-text-warning: linear-gradient(#FFCC00, #CCA300);
+  --gradient-text-error: linear-gradient(#6c4d4c, #984b47, #c52a2a);
+}
+
+:root[data-theme=dark] {
+  --color-white: #000000;
+  --color-black: #F5F5F5;
+  --color-grey-50: #121212;
+  --color-grey-100: #242424;
+  --color-grey-200: #2F2F2F;
+  --color-grey-300: #393939;
+  --color-grey-400: #4D4D4D;
+  --color-grey-500: #606060;
+  --color-grey-600: #7D7D7D;
+  --color-grey-700: #9C9C9C;
+  --color-grey-800: #BCBCBC;
+  --color-grey-900: #F5F5F5;
+  --color-primary-20: #080c14;
+  --color-primary-40: #0f1726;
+  --color-primary-50: #1e304f;
+  --color-primary-100: #244677;
+  --color-primary-200: #275ea2;
+  --color-primary-300: #2676d0;
+  --color-primary-400: #64A1FF;
+  --color-primary-500: #1E90FF;
+  --color-primary-600: #8CB3FF;
+  --color-primary-700: #ACC5FF;
+  --color-primary-800: #C9D8FF;
+  --color-primary-900: #E5EBFF;
+  --color-secondary-50: #1e484e;
+  --color-secondary-100: #236c77;
+  --color-secondary-200: #2393a2;
+  --color-secondary-300: #1dbcd0;
+  --color-secondary-400: #64EBFF;
+  --color-secondary-500: #00E6FF;
+  --color-secondary-600: #8EEFFF;
+  --color-secondary-700: #AFF3FF;
+  --color-secondary-800: #CCF7FF;
+  --color-secondary-900: #E6FBFF;
+  --color-success: #20E381;
+  --color-warning: #f7b529;
+  --color-error: #f0453a;
+  --elevation-1: 0 4px 6px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.08);
+  --elevation-1--inset: inset 0px 1px 2px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px 1px rgba(255, 255, 255, 0.15);
+  --elevation-1--text: 0px 1px 2px rgba(255, 255, 255, 0.15), 0px 1px 3px rgba(255, 255, 255, 0.15);
+  --elevation-2: 0px 1px 2px 0px rgba(255, 255, 255, 0.3), 0px 2px 6px 2px rgba(255, 255, 255, 0.15);
+  --elevation-3: 0px 6px 10px -3px rgba(255, 255, 255, 0.25);
+  --elevation-5: 0px -20px 30px -25px rgba(255, 255, 255, 0.15);
+  --inner-elevation-1: 0px 2px 4px 1px rgba(255, 255, 255, 0.25) inset;
+  --inner-elevation-2: 0px -20px 30px -25px rgba(255, 255, 255, 0.15) inset;
+  --inner-elevation-3: -4px 0px 6px 0px rgba(255, 255, 255, 0.15) inset;
+  --gradient-background-primary-secondary: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-background-primary-grey-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 50%, var(--color-secondary-500) 100%);
+  --gradient-background-grey-1: linear-gradient(180deg, var(--color-white) -9.57%, var(--color-grey-50) 102.02%);
+  --gradient-background-grey-2: linear-gradient(180deg, var(--color-grey-50) -9.57%, var(--color-white) 102.02%);
+  --gradient-background-radial-grey-1: radial-gradient(55.8% 55.8% at 50% 46.23%, var(--color-grey-100) 0%, #1e1e1e 100%);
+  --gradient-background-inherit: linear-gradient(112deg, var(--color-grey-50) 0%, var(--color-grey-100) 100%);
+  --gradient-background-primary: linear-gradient(112deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-background-secondary: linear-gradient(112deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
+  --gradient-background-info: linear-gradient(var(--color-grey-100), var(--color-grey-200), var(--color-grey-300));
+  --gradient-background-success: linear-gradient(#20E381, #20E381, #10CCB8);
+  --gradient-background-warning: linear-gradient(#FFCC00, #CCA300);
+  --gradient-background-error: linear-gradient(#EB5550, #DB4A46, #FF4444);
+  --gradient-border-1: linear-gradient(180deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
+  --gradient-border-2: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-3: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-4: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-7: linear-gradient(180deg, var(--color-grey-400) 0%, var(--color-grey-600) 100%);
+  --gradient-border-8: linear-gradient(90deg, var(--color-grey-100) 4.63%, var(--color-grey-300) 100%);
+  --gradient-border-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-300) 100%);
+  --gradient-border-success: linear-gradient(112deg, #20E381 0%, #10CCB8 100%);
+  --gradient-border-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-border-error: linear-gradient(112deg, #EB5550 0%, #FF4444 100%);
+  --gradient-text-primary-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
+  --gradient-text-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-grey-700) 100%);
+  --gradient-text-grey: linear-gradient(90deg, var(--color-grey-700) 0%, var(--color-grey-900) 100%);
+  --gradient-text-success: linear-gradient(#20E381, #20E381, #10CCB8);
+  --gradient-text-warning: linear-gradient(#FFCC00, #CCA300);
+  --gradient-text-error: linear-gradient(#6c4d4c, #984b47, #c52a2a);
+}