@cyber-harbour/ui 2.2.43 → 3.0.0-fix-button-focus-visible.0

package/dist/styles/design-tokens.css

@@ -0,0 +1,839 @@
+/* AUTO-GENERATED by scripts/build-tokens.mjs — DO NOT EDIT.
+   Source of truth: tokens/Light.tokens.json + tokens/Dark.tokens.json
+   Regenerate: npm run tokens:build */
+
+@theme {
+  --color-avatar-background: #353533;
+  --color-avatar-name: #535353;
+  --color-avatar-position: #838286;
+  --color-avatar-text: #ffffff;
+  --color-background-overlay: rgb(0 0 30 / 0.5);
+  --color-background-page: #f6f6f4;
+  --color-background-scroll-overlay: rgb(0 0 30 / 0.5);
+  --color-background-surface: #ffffff;
+  --color-background-surface-hover: #e8e8e8;
+  --color-background-surface-secondary: #f0f0ec;
+  --color-border-disabled: #e0e0e0;
+  --color-border-divider: #c7c5c5;
+  --color-border-interactive: #0f62fe;
+  --color-border-strong: #b9bfc5;
+  --color-border-subtle: #c6c6c6;
+  --color-brand-accent-muted: #4d6a70;
+  --color-brand-accent-primary: #4ab2be;
+  --color-brand-accent-secondary: #49a6b7;
+  --color-brand-blue-dark: #002d9c;
+  --color-brand-blue-primary: #0042ec;
+  --color-button-danger-ghost-bg-active: #750e13;
+  --color-button-danger-ghost-bg-hover: #ffd6e8;
+  --color-button-danger-ghost-text: #da1e28;
+  --color-button-danger-ghost-text-active: #ffffff;
+  --color-button-danger-primary-bg: #da1e28;
+  --color-button-danger-primary-bg-active: #750e13;
+  --color-button-danger-primary-bg-disabled: #c4c4c4;
+  --color-button-danger-primary-bg-hover: #b81922;
+  --color-button-danger-primary-text: #ffffff;
+  --color-button-ghost-bg-hover: #e5ecfd;
+  --color-button-ghost-text: #0f62fe;
+  --color-button-ghost-text-active: #002d9c;
+  --color-button-ghost-text-hover: #0050e6;
+  --color-button-primary-bg: #0f62fe;
+  --color-button-primary-bg-active: #002d9c;
+  --color-button-primary-bg-disabled: #c4c4c4;
+  --color-button-primary-bg-hover: #0050e6;
+  --color-button-primary-text: #ffffff;
+  --color-button-primary-text-disabled: #8d8d8d;
+  --color-button-secondary-bg: #393939;
+  --color-button-secondary-bg-active: #6f6f6f;
+  --color-button-secondary-bg-disabled: #c4c4c4;
+  --color-button-secondary-bg-hover: #474747;
+  --color-button-secondary-text: #ffffff;
+  --color-button-sources-button-bg: #ffffff;
+  --color-button-sources-button-bg-hover: #e0e0e0;
+  --color-button-sources-button-border: #a8a8a8;
+  --color-button-sources-button-text: #000000;
+  --color-button-tertiary-bg: #0f62fe;
+  --color-button-tertiary-bg-active: #002d9c;
+  --color-button-tertiary-bg-hover: #0050e6;
+  --color-button-tertiary-text: #0f62fe;
+  --color-button-tertiary-text-hover: #ffffff;
+  --color-chart-heatmap-level-0: #e0e0e0;
+  --color-chart-heatmap-level-1: #d0e2ff;
+  --color-chart-heatmap-level-2: #78a9ff;
+  --color-chart-heatmap-level-3: #0f62fe;
+  --color-chart-heatmap-level-4: #002d9c;
+  --color-chart-line-primary: #0f62fe;
+  --color-checkbox-label: #525252;
+  --color-checkbox-label-disabled: #c5c5c5;
+  --color-checkbox-value: #161616;
+  --color-checkbox-value-disabled: #c5c5c5;
+  --color-dropdown-bg: #f4f4f4;
+  --color-dropdown-bg-disabled: #f4f4f4;
+  --color-dropdown-bg-hover: #e8e8e8;
+  --color-dropdown-divider: #c6c6c6;
+  --color-dropdown-syntax-exclude-bg: #f9e6a5;
+  --color-dropdown-syntax-exclude-icon: #cda413;
+  --color-dropdown-syntax-logical-bg: #ffcbce;
+  --color-dropdown-syntax-logical-icon: #fa4d56;
+  --color-dropdown-syntax-match-bg: #d0e2ff;
+  --color-dropdown-syntax-match-icon: #0043ce;
+  --color-dropdown-text: #525252;
+  --color-dropdown-text-disabled: #c5c5c5;
+  --color-dropdown-text-disabled-label: #c5c5c5;
+  --color-dropdown-text-disabled-value: #bfbfbf;
+  --color-dropdown-text-hover: #161616;
+  --color-input-bg: #ffffff;
+  --color-input-bg-disabled: #f4f4f4;
+  --color-input-bg-filled: #fafafa;
+  --color-input-border: #8d8d8d;
+  --color-input-border-disabled: #c6c6c6;
+  --color-input-border-error: #c0392b;
+  --color-input-helper: #9d9d9d;
+  --color-input-helper-error: #c0392b;
+  --color-input-helper-warning: #a16207;
+  --color-input-label: #525252;
+  --color-input-label-disabled: #c5c5c5;
+  --color-input-placeholder: #a8a8a8;
+  --color-input-placeholder-disabled: #bfbfbf;
+  --color-input-text: #161616;
+  --color-input-text-disabled: #bfbfbf;
+  --color-interactive-danger: #da1e28;
+  --color-interactive-danger-active: #750e13;
+  --color-interactive-danger-hover: #b81922;
+  --color-interactive-focus: #0f62fe;
+  --color-interactive-link: #0043ce;
+  --color-interactive-primary: #0f62fe;
+  --color-interactive-primary-active: #002d9c;
+  --color-interactive-primary-disabled: #c4c4c4;
+  --color-interactive-primary-hover: #0050e6;
+  --color-interactive-secondary: #393939;
+  --color-interactive-secondary-hover: #474747;
+  --color-link-active: #002d9c;
+  --color-link-default: #0043ce;
+  --color-link-hover: #0050e6;
+  --color-link-visited: #6929c4;
+  --color-logo-gradient-2: #0042ec;
+  --color-logo-gradient-3: rgb(0 66 236 / 0.8);
+  --color-logo-gradient-4: rgb(0 66 236 / 0.6);
+  --color-logo-gradient-5: rgb(0 66 236 / 0.4);
+  --color-logo-gradient-6: rgb(0 66 236 / 0.2);
+  --color-logo-gradient-7: rgb(0 66 236 / 0);
+  --color-logo-gradient-overlay-table-1: #ffffff;
+  --color-logo-gradient-overlay-table-2: rgb(255 255 255 / 0);
+  --color-logo-gradient-overlay-table-3: rgb(0 0 0 / 0.03);
+  --color-logo-gradient-white-1: rgb(255 255 255 / 0);
+  --color-logo-gradient-white-2: rgb(255 255 255 / 0.1);
+  --color-logo-gradient-white-8: #ffffff;
+  --color-modal-bg: #ffffff;
+  --color-modal-border: #e0e0e0;
+  --color-modal-drawer-bg: #ffffff;
+  --color-modal-drawer-border: #e0e0e0;
+  --color-modal-drawer-close-icon: #161616;
+  --color-modal-drawer-close-icon-hover: rgb(0 0 0 / 0.05);
+  --color-modal-drawer-header-bg: #f4f4f4;
+  --color-modal-drawer-header-text: #161616;
+  --color-modal-drawer-overlay: rgb(0 0 30 / 0.5);
+  --color-modal-overlay: rgb(0 0 0 / 0.5);
+  --color-notification-error-accent: #c0392b;
+  --color-notification-error-action: #c0392b;
+  --color-notification-error-bg: #ffd6e8;
+  --color-notification-error-border: rgb(192 57 43 / 0.3);
+  --color-notification-info-accent: #0043ce;
+  --color-notification-info-action: #0043ce;
+  --color-notification-info-bg: #e5ecfd;
+  --color-notification-info-border: rgb(0 67 206 / 0.3);
+  --color-notification-success-accent: #24a148;
+  --color-notification-success-action: #0e6027;
+  --color-notification-success-bg: #a7f0ba;
+  --color-notification-success-border: rgb(36 161 72 / 0.3);
+  --color-notification-text: #161616;
+  --color-notification-warning-accent: #f1c21b;
+  --color-notification-warning-action: #a16207;
+  --color-notification-warning-bg: #fef3c7;
+  --color-notification-warning-border: rgb(249 229 158 / 0.3);
+  --color-pagination-active-bg: #0f62fe;
+  --color-pagination-active-text: #ffffff;
+  --color-pagination-bg: #f4f4f4;
+  --color-pagination-disabled-text: #c5c5c5;
+  --color-pagination-text: #161616;
+  --color-photo-card-bg: #f3f3f3;
+  --color-photo-card-border: #e0e0e0;
+  --color-photo-card-overlay: rgb(0 0 0 / 0.4);
+  --color-photo-card-subtitle: #525252;
+  --color-photo-card-tag-bg: #f4f4f4;
+  --color-photo-card-title: #101010;
+  --color-search-input-bg: #ffffff;
+  --color-search-input-bg-disabled: #f4f4f4;
+  --color-search-input-bg-filled: #ffffff;
+  --color-search-input-bg-hover: #fbfbfb;
+  --color-search-input-bg-read-only: #ffffff;
+  --color-search-input-bg-read-only-hover: #fbfbfb;
+  --color-search-input-border: #8d8d8d;
+  --color-search-input-border-disabled: #c6c6c6;
+  --color-search-input-border-focus: #0f62fe;
+  --color-search-input-border-hover: #8d8d8d;
+  --color-search-input-border-read-only: #e0e0e0;
+  --color-search-input-icon: #525252;
+  --color-search-input-icon-disabled: #c5c5c5;
+  --color-search-input-icon-read-only: #525252;
+  --color-search-input-placeholder: #a8a8a8;
+  --color-search-input-text: #161616;
+  --color-search-input-text-disabled: #bfbfbf;
+  --color-search-input-text-filled: #161616;
+  --color-search-input-text-read-only: #a8a8a8;
+  --color-select-list-bg: #393939;
+  --color-select-list-bg-active: #6f6f6f;
+  --color-select-list-bg-diasabled: #c4c4c4;
+  --color-select-list-bg-hover: #474747;
+  --color-select-list-text: #393939;
+  --color-select-list-text-diasabled: #c4c4c4;
+  --color-select-list-text-hover: #ffffff;
+  --color-side-navigation-bg: #ffffff;
+  --color-side-navigation-button-default: #ffffff;
+  --color-side-navigation-button-hover: #eff2f9;
+  --color-side-navigation-button-icon-default: #535353;
+  --color-side-navigation-button-icon-pressed: #002d9c;
+  --color-side-navigation-button-pressed: #e0e6f1;
+  --color-side-navigation-button-selected: #e5ecfd;
+  --color-side-navigation-button-selected-hover: #e5ecfd;
+  --color-side-navigation-buttun-icon-selected: #0f62fe;
+  --color-side-navigation-divider: #c7c5c5;
+  --color-support-error: #da1e28;
+  --color-support-error-active: #750e13;
+  --color-support-error-bg: #ffd6e8;
+  --color-support-error-hover: #b81922;
+  --color-support-error-message: #c0392b;
+  --color-support-error-text: #9f1853;
+  --color-support-info: #0043ce;
+  --color-support-info-bg: #d0e2ff;
+  --color-support-purple: #6929c4;
+  --color-support-purple-bg: #e8daff;
+  --color-support-success: #24a148;
+  --color-support-success-bg: #a7f0ba;
+  --color-support-success-text: #0e6027;
+  --color-support-warning: #a16207;
+  --color-support-warning-bg: #fef3c7;
+  --color-support-warning-message: #a16207;
+  --color-syntax-icon-exclude-bg: #f9e6a5;
+  --color-syntax-icon-exclude-icon: #cda413;
+  --color-syntax-icon-logical-bg: #ffcbce;
+  --color-syntax-icon-logical-icon: #fa4d56;
+  --color-syntax-icon-match-bg: #d0e2ff;
+  --color-syntax-icon-match-icon: #0043ce;
+  --color-table-carplate-bg: #ffffff;
+  --color-table-carplate-bg-hover: rgb(0 0 0 / 0.05);
+  --color-table-carplate-bg-pressed: rgb(0 0 0 / 0.1);
+  --color-table-carplate-border-default: #000000;
+  --color-table-carplate-border-disabled: #99989c;
+  --color-table-carplate-text: #000000;
+  --color-table-cell-helper-error: #c0392b;
+  --color-table-cell-helper-warning: #a16207;
+  --color-table-cell-text-muted: #404040;
+  --color-table-cell-text-primary: #000000;
+  --color-table-cell-text-secondary: #525252;
+  --color-table-cell-text-tertiary: #9d9d9d;
+  --color-table-counter-tag-bg-high: #fdc7c7;
+  --color-table-counter-tag-bg-low: #ffffff;
+  --color-table-counter-tag-bg-medium: #fde7c7;
+  --color-table-counter-tag-bg-mid-low: #fdf3c7;
+  --color-table-counter-tag-border-high: #b23d3d;
+  --color-table-counter-tag-border-low: #ebebeb;
+  --color-table-counter-tag-border-medium: #b2663d;
+  --color-table-counter-tag-border-mid-low: #b2913d;
+  --color-table-counter-tag-text-high: #b23d3d;
+  --color-table-counter-tag-text-low: #404040;
+  --color-table-counter-tag-text-medium: #b2663d;
+  --color-table-counter-tag-text-mid-low: #b2913d;
+  --color-table-expanded-row-bg: rgb(0 0 0 / 0.01);
+  --color-table-expanded-row-border: #e0e0e0;
+  --color-table-expanded-row-hover: rgb(0 0 0 / 0.01);
+  --color-table-header-bg: #edeff2;
+  --color-table-header-bg-hover: #d7dae6;
+  --color-table-header-bg-pressed: #d7dae6;
+  --color-table-header-border: #e0e0e0;
+  --color-table-header-border-hover: #d3d3d1;
+  --color-table-header-border-pressed: #c3c2be;
+  --color-table-header-border-sorted: #bab9b5;
+  --color-table-header-icon: #8e8f91;
+  --color-table-header-icon-sorted: #000000;
+  --color-table-header-text: #000000;
+  --color-table-ip-container-bg: #ffffff;
+  --color-table-ip-container-border: #e0e0e0;
+  --color-table-ip-text-date: #9d9d9d;
+  --color-table-ip-text-primary: #000000;
+  --color-table-row-bg: #ffffff;
+  --color-table-row-bg-expanded: rgb(0 0 0 / 0.01);
+  --color-table-row-bg-hover: rgb(0 0 0 / 0.05);
+  --color-table-row-bg-pressed: rgb(0 0 0 / 0.1);
+  --color-table-row-bg-zebra: rgb(0 0 0 / 0.02);
+  --color-table-row-border: #e0e0e0;
+  --color-tag-amber-bg: #ffd999;
+  --color-tag-amber-bg-hover: #fac775;
+  --color-tag-amber-bg-pressed: #ef9f27;
+  --color-tag-amber-border: #faeeda;
+  --color-tag-amber-border-hover: #d1a359;
+  --color-tag-amber-border-pressed: #633806;
+  --color-tag-amber-button-bg: #ffd999;
+  --color-tag-amber-button-bg-hover: #f4bc61;
+  --color-tag-amber-button-bg-pressed: #d58e22;
+  --color-tag-amber-button-icon: #1c1b1f;
+  --color-tag-amber-text: #633806;
+  --color-tag-bg-disabled: #c4c4c4;
+  --color-tag-blue-bg: #d0e2ff;
+  --color-tag-blue-bg-hover: #d0e2ff;
+  --color-tag-blue-bg-pressed: #d0e2ff;
+  --color-tag-blue-border-hover: #7da4f5;
+  --color-tag-blue-border-pressed: #0043ce;
+  --color-tag-blue-button-bg: #d0e2ff;
+  --color-tag-blue-button-bg-hover: #bdd4f8;
+  --color-tag-blue-button-bg-pressed: #bbd5fe;
+  --color-tag-blue-button-icon: #1c1b1f;
+  --color-tag-blue-text: #0043ce;
+  --color-tag-cyan-bg: #bae6ff;
+  --color-tag-cyan-bg-hover: #bae6ff;
+  --color-tag-cyan-bg-pressed: #9dd8fa;
+  --color-tag-cyan-border: #bae6ff;
+  --color-tag-cyan-border-hover: #9dd3f2;
+  --color-tag-cyan-border-pressed: #0043ce;
+  --color-tag-cyan-button-bg: #bae6ff;
+  --color-tag-cyan-button-bg-hover: #aadffe;
+  --color-tag-cyan-button-bg-pressed: #88cef6;
+  --color-tag-cyan-button-icon: #1c1b1f;
+  --color-tag-cyan-text: #0043ce;
+  --color-tag-gray-bg: #e0e0e0;
+  --color-tag-gray-bg-hover: #c6c6c6;
+  --color-tag-gray-bg-pressed: #a8a8a8;
+  --color-tag-gray-border: #e0e0e0;
+  --color-tag-gray-border-hover: #a8a8a8;
+  --color-tag-gray-border-pressed: #393939;
+  --color-tag-gray-button-bg: #e0e0e0;
+  --color-tag-gray-button-bg-hover: #bbbbbb;
+  --color-tag-gray-button-bg-pressed: #999999;
+  --color-tag-gray-button-icon: #393939;
+  --color-tag-gray-text: #393939;
+  --color-tag-green-bg: #a7f0ba;
+  --color-tag-green-bg-hover: #a7f0ba;
+  --color-tag-green-bg-pressed: #88e7a0;
+  --color-tag-green-border: #a7f0ba;
+  --color-tag-green-border-hover: #0dc13c;
+  --color-tag-green-border-pressed: #0dc13c;
+  --color-tag-green-button-bg: #a7f0ba;
+  --color-tag-green-button-bg-hover: #99e3ac;
+  --color-tag-green-button-bg-pressed: #87da9c;
+  --color-tag-green-button-icon: #1c1b1f;
+  --color-tag-green-text: #0e6027;
+  --color-tag-interactive-bg: #e5ecfd;
+  --color-tag-magenta-bg: #ffd6e8;
+  --color-tag-magenta-bg-hover: #ffafd2;
+  --color-tag-magenta-bg-pressed: #ff7eb6;
+  --color-tag-magenta-border-hover: #e881ae;
+  --color-tag-magenta-border-pressed: #9f1853;
+  --color-tag-magenta-button-bg: #ffd6e8;
+  --color-tag-magenta-button-bg-hover: #fe9cc7;
+  --color-tag-magenta-button-bg-pressed: #f569a6;
+  --color-tag-magenta-button-icon: #1c1b1f;
+  --color-tag-magenta-text: #9f1853;
+  --color-tag-orange-bg: #ffd9be;
+  --color-tag-orange-bg-hover: #ffb784;
+  --color-tag-orange-bg-pressed: #ff832b;
+  --color-tag-orange-border: #ffead5;
+  --color-tag-orange-border-hover: #dc8e51;
+  --color-tag-orange-border-pressed: #5e2900;
+  --color-tag-orange-button-bg: #ffd9be;
+  --color-tag-orange-button-bg-hover: #f09c5c;
+  --color-tag-orange-button-bg-pressed: #c56a1b;
+  --color-tag-orange-button-icon: #1c1b1f;
+  --color-tag-orange-text: #5e2900;
+  --color-tag-purple-bg: #e8daff;
+  --color-tag-purple-bg-hover: #e8daff;
+  --color-tag-purple-bg-pressed: #e8daff;
+  --color-tag-purple-border: #e8daff;
+  --color-tag-purple-border-hover: #c3aaee;
+  --color-tag-purple-border-pressed: #9271c7;
+  --color-tag-purple-button-bg: #e8daff;
+  --color-tag-purple-button-bg-hover: #e1cfff;
+  --color-tag-purple-button-bg-pressed: #d3bef6;
+  --color-tag-purple-button-icon: #1c1b1f;
+  --color-tag-purple-text: #6929c4;
+  --color-tag-red-bg: #ffd7d9;
+  --color-tag-red-bg-hover: #ffb3b8;
+  --color-tag-red-bg-pressed: #ff8389;
+  --color-tag-red-border: #ffd6d7;
+  --color-tag-red-border-hover: #dd7e7f;
+  --color-tag-red-border-pressed: #8e161b;
+  --color-tag-red-button-bg: #ffd7d9;
+  --color-tag-red-button-bg-hover: #ffb3b8;
+  --color-tag-red-button-bg-pressed: #ff8389;
+  --color-tag-red-button-icon: #1c1b1f;
+  --color-tag-red-text: #8e161b;
+  --color-tag-teal-bg: #c2f2f2;
+  --color-tag-teal-bg-hover: #9ef0f0;
+  --color-tag-teal-bg-pressed: #6fecea;
+  --color-tag-teal-border: #005d5d;
+  --color-tag-teal-border-hover: #7dd1d1;
+  --color-tag-teal-border-pressed: #005d5d;
+  --color-tag-teal-button-bg: #c2f2f2;
+  --color-tag-teal-button-bg-hover: #86e6e6;
+  --color-tag-teal-button-bg-pressed: #64dad8;
+  --color-tag-teal-button-icon: #1c1b1f;
+  --color-tag-teal-text: #005d5d;
+  --color-tag-text-disabled: #9c9c9c;
+  --color-text-body: #161616;
+  --color-text-disabled: #c5c5c5;
+  --color-text-helper: #9d9d9d;
+  --color-text-inverse: #000000;
+  --color-text-label: #525252;
+  --color-text-placeholder: #a8a8a8;
+  --color-text-placeholder-disabled: #bfbfbf;
+  --color-text-primary: #101010;
+  --color-text-secondary: #4f4f4f;
+  --color-text-tertiary: #6f6f6f;
+  --color-tile-bg: #ffffff;
+  --color-tile-bg-hover: rgb(0 0 0 / 0.05);
+  --color-tile-bg-pressed: rgb(0 0 0 / 0.07);
+  --color-tile-border: #e0e0e0;
+  --color-tile-empty-state: #525252;
+  --color-tile-link: #2d72d2;
+  --color-tile-title: #525252;
+  --color-tile-value: #000000;
+  --color-toggle-handle: #ffffff;
+  --color-toggle-handle-disabled: #8d8d8d;
+  --color-toggle-track-disabled: #c6c6c6;
+  --color-toggle-track-off: #8d8d8d;
+  --color-toggle-track-on: var(--color-interactive-primary);
+  --color-toggle-track-readonly: #c6c6c6;
+  --color-tooltip-bg: #393939;
+  --color-tooltip-caret: #393939;
+  --color-tooltip-text: #ffffff;
+  --color-vertical-navigation-bg: #ffffff;
+  --color-vertical-navigation-divider: #ebebeb;
+  --color-vertical-navigation-item-active-indicator: #0f62fe;
+  --color-vertical-navigation-item-default: #ffffff;
+  --color-vertical-navigation-item-hover: #f9f9f9;
+  --color-vertical-navigation-item-icon: #535353;
+  --color-vertical-navigation-item-line: #e4e4e4;
+  --color-vertical-navigation-item-line-hover: #d2d2d2;
+  --color-vertical-navigation-item-pressed-bg: #f5f6f7;
+  --color-vertical-navigation-item-selected-bg: #f5f6f7;
+  --color-vertical-navigation-item-selected-text: #0043ce;
+  --color-vertical-navigation-item-text: #000000;
+  --color-vertical-navigation-item-text-secondary: #535353;
+}
+
+@layer base {
+  :where(.dark, .dark *) {
+    --color-avatar-background: #353533;
+    --color-avatar-name: #c6c6c6;
+    --color-avatar-position: #8d8d8d;
+    --color-avatar-text: #ffffff;
+    --color-background-overlay: rgb(0 0 30 / 0.5);
+    --color-background-page: #0d0d0d;
+    --color-background-scroll-overlay: rgb(0 0 30 / 0.5);
+    --color-background-surface: #202020;
+    --color-background-surface-hover: #2c2c2c;
+    --color-background-surface-secondary: #161616;
+    --color-border-disabled: #2c2c2c;
+    --color-border-divider: #443d3e;
+    --color-border-interactive: #0f62fe;
+    --color-border-strong: #4d4d4d;
+    --color-border-subtle: #393939;
+    --color-brand-accent-muted: #3a7c88;
+    --color-brand-accent-primary: #0f62fe;
+    --color-brand-accent-secondary: #4ab2be;
+    --color-brand-blue-dark: #002d9c;
+    --color-brand-blue-primary: #0042ec;
+    --color-button-danger-ghost-bg-active: #c0244c;
+    --color-button-danger-ghost-bg-hover: #330a1a;
+    --color-button-danger-ghost-text: #fa4d56;
+    --color-button-danger-ghost-text-active: #ffffff;
+    --color-button-danger-primary-bg: #fa4d56;
+    --color-button-danger-primary-bg-active: #c0244c;
+    --color-button-danger-primary-bg-disabled: #393939;
+    --color-button-danger-primary-bg-hover: #e8346a;
+    --color-button-danger-primary-text: #ffffff;
+    --color-button-ghost-bg-hover: #4ab2be;
+    --color-button-ghost-text: #5fe4fd;
+    --color-button-ghost-text-active: #3a7c88;
+    --color-button-ghost-text-hover: #4ab2be;
+    --color-button-primary-bg: #007c8f;
+    --color-button-primary-bg-active: #3a7c88;
+    --color-button-primary-bg-disabled: #393939;
+    --color-button-primary-bg-hover: #006878;
+    --color-button-primary-text: #ffffff;
+    --color-button-primary-text-disabled: #6f6f6f;
+    --color-button-secondary-bg: #c3c3c3;
+    --color-button-secondary-bg-active: #a8a8a8;
+    --color-button-secondary-bg-disabled: #393939;
+    --color-button-secondary-bg-hover: #8d8d8d;
+    --color-button-secondary-text: #000000;
+    --color-button-sources-button-bg: #2d2d2d;
+    --color-button-sources-button-bg-hover: #676767;
+    --color-button-sources-button-border: #676767;
+    --color-button-sources-button-text: #ffffff;
+    --color-button-tertiary-bg: #5fe4fd;
+    --color-button-tertiary-bg-active: #3a7c88;
+    --color-button-tertiary-bg-hover: #4ab2be;
+    --color-button-tertiary-text: #5fe4fd;
+    --color-button-tertiary-text-hover: #ffffff;
+    --color-chart-heatmap-level-0: #3c3c3c;
+    --color-chart-heatmap-level-1: #4d6a70;
+    --color-chart-heatmap-level-2: #3a7c88;
+    --color-chart-heatmap-level-3: #49a6b7;
+    --color-chart-heatmap-level-4: #5fe4fd;
+    --color-chart-line-primary: #5fe4fd;
+    --color-checkbox-label: #c6c6c6;
+    --color-checkbox-label-disabled: #4f4f4f;
+    --color-checkbox-value: #f4f4f4;
+    --color-checkbox-value-disabled: #4f4f4f;
+    --color-dropdown-bg: #2c2c2c;
+    --color-dropdown-bg-disabled: #2c2c2c;
+    --color-dropdown-bg-hover: #393939;
+    --color-dropdown-divider: #393939;
+    --color-dropdown-syntax-exclude-bg: #3d2800;
+    --color-dropdown-syntax-exclude-icon: #f1c21b;
+    --color-dropdown-syntax-logical-bg: #330d12;
+    --color-dropdown-syntax-logical-icon: #ff8389;
+    --color-dropdown-syntax-match-bg: #002d9c;
+    --color-dropdown-syntax-match-icon: #a6c8ff;
+    --color-dropdown-text: #c6c6c6;
+    --color-dropdown-text-disabled: #4f4f4f;
+    --color-dropdown-text-disabled-label: #4f4f4f;
+    --color-dropdown-text-disabled-value: #767676;
+    --color-dropdown-text-hover: #f4f4f4;
+    --color-input-bg: #262626;
+    --color-input-bg-disabled: #393939;
+    --color-input-bg-filled: #222222;
+    --color-input-border: #6f6f6f;
+    --color-input-border-disabled: #393939;
+    --color-input-border-error: #fa4d56;
+    --color-input-helper: #6d6e6d;
+    --color-input-helper-error: #fa4d56;
+    --color-input-helper-warning: #f1c21b;
+    --color-input-label: #c6c6c6;
+    --color-input-label-disabled: #4f4f4f;
+    --color-input-placeholder: #6f6f6f;
+    --color-input-placeholder-disabled: #767676;
+    --color-input-text: #f4f4f4;
+    --color-input-text-disabled: #767676;
+    --color-interactive-danger: #fa4d56;
+    --color-interactive-danger-active: #c0244c;
+    --color-interactive-danger-hover: #e8346a;
+    --color-interactive-focus: #0f62fe;
+    --color-interactive-link: #78a9ff;
+    --color-interactive-primary: #5fe4fd;
+    --color-interactive-primary-active: #002d9c;
+    --color-interactive-primary-disabled: #393939;
+    --color-interactive-primary-hover: #0050e6;
+    --color-interactive-secondary: #6f6f6f;
+    --color-interactive-secondary-hover: #5a5a5a;
+    --color-link-active: #3a7c88;
+    --color-link-default: #5fe4fd;
+    --color-link-hover: #4ab2be;
+    --color-link-visited: #be95ff;
+    --color-logo-gradient-2: #5fe4fd;
+    --color-logo-gradient-3: rgb(95 228 253 / 0.8);
+    --color-logo-gradient-4: rgb(95 228 253 / 0.6);
+    --color-logo-gradient-5: rgb(95 228 253 / 0.4);
+    --color-logo-gradient-6: rgb(95 228 253 / 0.2);
+    --color-logo-gradient-7: rgb(95 228 253 / 0);
+    --color-logo-gradient-overlay-table-1: #343434;
+    --color-logo-gradient-overlay-table-2: rgb(52 52 52 / 0);
+    --color-logo-gradient-overlay-table-3: rgb(0 0 0 / 0.03);
+    --color-logo-gradient-white-1: rgb(34 34 34 / 0);
+    --color-logo-gradient-white-2: rgb(34 34 34 / 0.1);
+    --color-logo-gradient-white-8: #222222;
+    --color-modal-bg: #222222;
+    --color-modal-border: #393939;
+    --color-modal-drawer-bg: #222222;
+    --color-modal-drawer-border: #393939;
+    --color-modal-drawer-close-icon: #f4f4f4;
+    --color-modal-drawer-close-icon-hover: rgb(255 255 255 / 0.05);
+    --color-modal-drawer-header-bg: #2c2c2c;
+    --color-modal-drawer-header-text: #f4f4f4;
+    --color-modal-drawer-overlay: rgb(0 0 0 / 0.5);
+    --color-modal-overlay: rgb(0 0 0 / 0.7);
+    --color-notification-error-accent: #c0392b;
+    --color-notification-error-action: #ff7eb6;
+    --color-notification-error-bg: #330a1a;
+    --color-notification-error-border: rgb(192 57 43 / 0.3);
+    --color-notification-info-accent: #0043ce;
+    --color-notification-info-action: #78a9ff;
+    --color-notification-info-bg: #002d9c;
+    --color-notification-info-border: rgb(0 67 206 / 0.3);
+    --color-notification-success-accent: #24a148;
+    --color-notification-success-action: #6fdc8c;
+    --color-notification-success-bg: #002f18;
+    --color-notification-success-border: rgb(36 161 72 / 0.3);
+    --color-notification-text: #f4f4f4;
+    --color-notification-warning-accent: #f1c21b;
+    --color-notification-warning-action: #f1c21b;
+    --color-notification-warning-bg: #2d2000;
+    --color-notification-warning-border: rgb(249 229 158 / 0.3);
+    --color-pagination-active-bg: #007c8f;
+    --color-pagination-active-text: #ffffff;
+    --color-pagination-bg: #2c2c2c;
+    --color-pagination-disabled-text: #4f4f4f;
+    --color-pagination-text: #f4f4f4;
+    --color-photo-card-bg: #242424;
+    --color-photo-card-border: #393939;
+    --color-photo-card-overlay: rgb(0 0 0 / 0.6);
+    --color-photo-card-subtitle: #8d8d8d;
+    --color-photo-card-tag-bg: #2c2c2c;
+    --color-photo-card-title: #f4f4f4;
+    --color-search-input-bg: #262626;
+    --color-search-input-bg-disabled: #393939;
+    --color-search-input-bg-filled: #222222;
+    --color-search-input-bg-hover: #2c2c2c;
+    --color-search-input-bg-read-only: #222222;
+    --color-search-input-bg-read-only-hover: #2c2c2c;
+    --color-search-input-border: #6f6f6f;
+    --color-search-input-border-disabled: #393939;
+    --color-search-input-border-focus: #0f62fe;
+    --color-search-input-border-hover: #6f6f6f;
+    --color-search-input-border-read-only: #393939;
+    --color-search-input-icon: #8d8d8d;
+    --color-search-input-icon-disabled: #4f4f4f;
+    --color-search-input-icon-read-only: #8d8d8d;
+    --color-search-input-placeholder: #6f6f6f;
+    --color-search-input-text: #f4f4f4;
+    --color-search-input-text-disabled: #767676;
+    --color-search-input-text-filled: #f4f4f4;
+    --color-search-input-text-read-only: #6f6f6f;
+    --color-select-list-bg: #c3c3c3;
+    --color-select-list-bg-active: #a8a8a8;
+    --color-select-list-bg-diasabled: #393939;
+    --color-select-list-bg-hover: #8d8d8d;
+    --color-select-list-text: #c3c3c3;
+    --color-select-list-text-diasabled: #393939;
+    --color-select-list-text-hover: #000000;
+    --color-side-navigation-bg: #202020;
+    --color-side-navigation-button-default: #202020;
+    --color-side-navigation-button-hover: #2c2c2c;
+    --color-side-navigation-button-icon-default: #e2ddda;
+    --color-side-navigation-button-icon-pressed: #5fe4fd;
+    --color-side-navigation-button-pressed: #21393c;
+    --color-side-navigation-button-selected: #1c292b;
+    --color-side-navigation-button-selected-hover: #1c292b;
+    --color-side-navigation-buttun-icon-selected: #5fe4fd;
+    --color-side-navigation-divider: #484848;
+    --color-support-error: #fa4d56;
+    --color-support-error-active: #c0244c;
+    --color-support-error-bg: #330a1a;
+    --color-support-error-hover: #e8346a;
+    --color-support-error-message: #fa4d56;
+    --color-support-error-text: #ffd6e8;
+    --color-support-info: #78a9ff;
+    --color-support-info-bg: #002d9c;
+    --color-support-purple: #a968f9;
+    --color-support-purple-bg: #1c0b30;
+    --color-support-success: #57b65a;
+    --color-support-success-bg: #002f18;
+    --color-support-success-text: #a7f0ba;
+    --color-support-warning: #f1c21b;
+    --color-support-warning-bg: #2d2000;
+    --color-support-warning-message: #f1c21b;
+    --color-syntax-icon-exclude-bg: #3d2800;
+    --color-syntax-icon-exclude-icon: #f1c21b;
+    --color-syntax-icon-logical-bg: #330d12;
+    --color-syntax-icon-logical-icon: #ff8389;
+    --color-syntax-icon-match-bg: #002d9c;
+    --color-syntax-icon-match-icon: #a6c8ff;
+    --color-table-carplate-bg: #222222;
+    --color-table-carplate-bg-hover: rgb(255 255 255 / 0.05);
+    --color-table-carplate-bg-pressed: rgb(255 255 255 / 0.1);
+    --color-table-carplate-border-default: #f4f4f4;
+    --color-table-carplate-border-disabled: #6f6f6f;
+    --color-table-carplate-text: #f4f4f4;
+    --color-table-cell-helper-error: #fa4d56;
+    --color-table-cell-helper-warning: #f1c21b;
+    --color-table-cell-text-muted: #8d8d8d;
+    --color-table-cell-text-primary: #f4f4f4;
+    --color-table-cell-text-secondary: #c6c6c6;
+    --color-table-cell-text-tertiary: #6f6f6f;
+    --color-table-counter-tag-bg-high: #330a0a;
+    --color-table-counter-tag-bg-low: #2c2c2c;
+    --color-table-counter-tag-bg-medium: #3d1f00;
+    --color-table-counter-tag-bg-mid-low: #3d2800;
+    --color-table-counter-tag-border-high: #b23d3d;
+    --color-table-counter-tag-border-low: #4d4d4d;
+    --color-table-counter-tag-border-medium: #b2663d;
+    --color-table-counter-tag-border-mid-low: #b2913d;
+    --color-table-counter-tag-text-high: #b23d3d;
+    --color-table-counter-tag-text-low: #8d8d8d;
+    --color-table-counter-tag-text-medium: #b2663d;
+    --color-table-counter-tag-text-mid-low: #b2913d;
+    --color-table-expanded-row-bg: rgb(255 255 255 / 0.01);
+    --color-table-expanded-row-border: #393939;
+    --color-table-expanded-row-hover: rgb(255 255 255 / 0.01);
+    --color-table-header-bg: #2c2c2c;
+    --color-table-header-bg-hover: #393939;
+    --color-table-header-bg-pressed: #393939;
+    --color-table-header-border: #393939;
+    --color-table-header-border-hover: #4d4d4d;
+    --color-table-header-border-pressed: #6f6f6f;
+    --color-table-header-border-sorted: #8d8d8d;
+    --color-table-header-icon: #6f6f6f;
+    --color-table-header-icon-sorted: #f1f1f1;
+    --color-table-header-text: #ffffff;
+    --color-table-ip-container-bg: #2c2c2c;
+    --color-table-ip-container-border: #393939;
+    --color-table-ip-text-date: #6f6f6f;
+    --color-table-ip-text-primary: #f4f4f4;
+    --color-table-row-bg: #222222;
+    --color-table-row-bg-expanded: rgb(255 255 255 / 0.01);
+    --color-table-row-bg-hover: rgb(255 255 255 / 0.05);
+    --color-table-row-bg-pressed: rgb(255 255 255 / 0.1);
+    --color-table-row-bg-zebra: rgb(255 255 255 / 0.02);
+    --color-table-row-border: #393939;
+    --color-tag-amber-bg: #412402;
+    --color-tag-amber-bg-hover: #633806;
+    --color-tag-amber-bg-pressed: #854f0b;
+    --color-tag-amber-border: #412402;
+    --color-tag-amber-border-hover: #937038;
+    --color-tag-amber-border-pressed: #fac775;
+    --color-tag-amber-button-bg: #412402;
+    --color-tag-amber-button-bg-hover: #75440c;
+    --color-tag-amber-button-bg-pressed: #ac6a17;
+    --color-tag-amber-button-icon: #fac775;
+    --color-tag-amber-text: #fac775;
+    --color-tag-bg-disabled: #393939;
+    --color-tag-blue-bg: #004956;
+    --color-tag-blue-bg-hover: #004956;
+    --color-tag-blue-bg-pressed: #026172;
+    --color-tag-blue-border-hover: #5caebc;
+    --color-tag-blue-border-pressed: #90cbd5;
+    --color-tag-blue-button-bg: #004956;
+    --color-tag-blue-button-bg-hover: #056171;
+    --color-tag-blue-button-bg-pressed: #088095;
+    --color-tag-blue-button-icon: #5fe4fd;
+    --color-tag-blue-text: #5fe4fd;
+    --color-tag-cyan-bg: #003a6d;
+    --color-tag-cyan-bg-hover: #00498a;
+    --color-tag-cyan-bg-pressed: #0058a1;
+    --color-tag-cyan-border: #00498a;
+    --color-tag-cyan-border-hover: #278fd0;
+    --color-tag-cyan-border-pressed: #82cfff;
+    --color-tag-cyan-button-bg: #003a6d;
+    --color-tag-cyan-button-bg-hover: #175992;
+    --color-tag-cyan-button-bg-pressed: #2b71ae;
+    --color-tag-cyan-button-icon: #82cfff;
+    --color-tag-cyan-text: #82cfff;
+    --color-tag-gray-bg: #393939;
+    --color-tag-gray-bg-hover: #474747;
+    --color-tag-gray-bg-pressed: #525252;
+    --color-tag-gray-border: #e0e0e0;
+    --color-tag-gray-border-hover: #797979;
+    --color-tag-gray-border-pressed: #c6c6c6;
+    --color-tag-gray-button-bg: #393939;
+    --color-tag-gray-button-bg-hover: #545454;
+    --color-tag-gray-button-bg-pressed: #747474;
+    --color-tag-gray-button-icon: #c6c6c6;
+    --color-tag-gray-text: #c6c6c6;
+    --color-tag-green-bg: #002f18;
+    --color-tag-green-bg-hover: #002f18;
+    --color-tag-green-bg-pressed: #002f18;
+    --color-tag-green-border: #409055;
+    --color-tag-green-border-hover: #1d5f2e;
+    --color-tag-green-border-pressed: #6fdc8c;
+    --color-tag-green-button-bg: #002f18;
+    --color-tag-green-button-bg-hover: #013d20;
+    --color-tag-green-button-bg-pressed: #04572e;
+    --color-tag-green-button-icon: #6fdc8c;
+    --color-tag-green-text: #a7f0ba;
+    --color-tag-interactive-bg: #002d9c;
+    --color-tag-magenta-bg: #740937;
+    --color-tag-magenta-bg-hover: #9f1853;
+    --color-tag-magenta-bg-pressed: #a11950;
+    --color-tag-magenta-border-hover: #e75a98;
+    --color-tag-magenta-border-pressed: #ff9bc6;
+    --color-tag-magenta-button-bg: #740937;
+    --color-tag-magenta-button-bg-hover: #b52765;
+    --color-tag-magenta-button-bg-pressed: #d23e7a;
+    --color-tag-magenta-button-icon: #ff9bc6;
+    --color-tag-magenta-text: #ff9bc6;
+    --color-tag-orange-bg: #3e1a00;
+    --color-tag-orange-bg-hover: #5e2900;
+    --color-tag-orange-bg-pressed: #8a3800;
+    --color-tag-orange-border: #3e1a00;
+    --color-tag-orange-border-hover: #a35719;
+    --color-tag-orange-border-pressed: #ffb784;
+    --color-tag-orange-button-bg: #3e1a00;
+    --color-tag-orange-button-bg-hover: #6b330d;
+    --color-tag-orange-button-bg-pressed: #985016;
+    --color-tag-orange-button-icon: #ffb784;
+    --color-tag-orange-text: #ffb784;
+    --color-tag-purple-bg: #37175e;
+    --color-tag-purple-bg-hover: #37175e;
+    --color-tag-purple-bg-pressed: #37175e;
+    --color-tag-purple-border: #1c0b30;
+    --color-tag-purple-border-hover: #583780;
+    --color-tag-purple-border-pressed: #a586ca;
+    --color-tag-purple-button-bg: #37175e;
+    --color-tag-purple-button-bg-hover: #472077;
+    --color-tag-purple-button-bg-pressed: #582e8a;
+    --color-tag-purple-button-icon: #be95ff;
+    --color-tag-purple-text: #be95ff;
+    --color-tag-red-bg: #750e13;
+    --color-tag-red-bg-hover: #a2191f;
+    --color-tag-red-bg-pressed: #b81922;
+    --color-tag-red-border: #330a0b;
+    --color-tag-red-border-hover: #c45b60;
+    --color-tag-red-border-pressed: #ffb3b8;
+    --color-tag-red-button-bg: #750e13;
+    --color-tag-red-button-bg-hover: #a42e33;
+    --color-tag-red-button-bg-pressed: #ba4047;
+    --color-tag-red-button-icon: #ffb3b8;
+    --color-tag-red-text: #ffb3b8;
+    --color-tag-teal-bg: #004144;
+    --color-tag-teal-bg-hover: #005157;
+    --color-tag-teal-bg-pressed: #006161;
+    --color-tag-teal-border: #3ddbd9;
+    --color-tag-teal-border-hover: #32a19f;
+    --color-tag-teal-border-pressed: #3ddbd9;
+    --color-tag-teal-button-bg: #004144;
+    --color-tag-teal-button-bg-hover: #056970;
+    --color-tag-teal-button-bg-pressed: #0c8989;
+    --color-tag-teal-button-icon: #3ddbd9;
+    --color-tag-teal-text: #3ddbd9;
+    --color-tag-text-disabled: #6f6f6f;
+    --color-text-body: #f4f4f4;
+    --color-text-disabled: #4f4f4f;
+    --color-text-helper: #6d6e6d;
+    --color-text-inverse: #ffffff;
+    --color-text-label: #c6c6c6;
+    --color-text-placeholder: #6f6f6f;
+    --color-text-placeholder-disabled: #767676;
+    --color-text-primary: #f4f4f4;
+    --color-text-secondary: #8d8d8d;
+    --color-text-tertiary: #696969;
+    --color-tile-bg: #222222;
+    --color-tile-bg-hover: rgb(255 255 255 / 0.05);
+    --color-tile-bg-pressed: rgb(255 255 255 / 0.07);
+    --color-tile-border: #393939;
+    --color-tile-empty-state: #8d8d8d;
+    --color-tile-link: #78a9ff;
+    --color-tile-title: #8d8d8d;
+    --color-tile-value: #f4f4f4;
+    --color-toggle-handle: #ffffff;
+    --color-toggle-handle-disabled: #6f6f6f;
+    --color-toggle-track-disabled: #393939;
+    --color-toggle-track-off: #6f6f6f;
+    --color-toggle-track-on: var(--color-interactive-primary);
+    --color-toggle-track-readonly: #4f4f4f;
+    --color-tooltip-bg: #f4f4f4;
+    --color-tooltip-caret: #f4f4f4;
+    --color-tooltip-text: #161616;
+    --color-vertical-navigation-bg: #161616;
+    --color-vertical-navigation-divider: #443d3e;
+    --color-vertical-navigation-item-active-indicator: #0f62fe;
+    --color-vertical-navigation-item-default: #161616;
+    --color-vertical-navigation-item-hover: #2c2c2c;
+    --color-vertical-navigation-item-icon: #8d8d8d;
+    --color-vertical-navigation-item-line: #545454;
+    --color-vertical-navigation-item-line-hover: #9e9e9e;
+    --color-vertical-navigation-item-pressed-bg: #333333;
+    --color-vertical-navigation-item-selected-bg: #282828;
+    --color-vertical-navigation-item-selected-text: #78a9ff;
+    --color-vertical-navigation-item-text: #f4f4f4;
+    --color-vertical-navigation-item-text-secondary: #8d8d8d;
+  }
+}