@class-kit/react 0.1.1 → 0.1.2

package/dist/styles/themes/dark-tech.css

@@ -0,0 +1,495 @@
+.cc-theme-dark-tech,
+[data-cc-theme="dark-tech"] {
+  --cc-color-text: #e4e7ed;
+  --cc-color-muted: #6c7486;
+  --cc-color-border: #2c303a;
+  --cc-color-border-hover: #404652;
+  --cc-color-border-focus: #00c6ff;
+  --cc-color-divider: #1e2129;
+  --cc-color-surface: #1e2129;
+  --cc-color-surface-soft: #17191f;
+  --cc-color-danger: #f53f3f;
+  --cc-color-success: #00b42a;
+  --cc-color-warning: #ff7d00;
+  --cc-color-info: #007aff;
+  --cc-color-accent: #00c6ff;
+  --cc-color-accent-hover: #4cd0ff;
+  --cc-color-accent-contrast: #071014;
+  --cc-shadow-focus: 0 0 0 3px rgba(0, 198, 255, 0.18);
+  --cc-shadow-floating: 0 22px 64px rgba(0, 198, 255, 0.2);
+  --cc-form-color-text: #f3f7ff;
+  --cc-form-color-muted: #b3bdd0;
+  --cc-form-color-border: #2c303a;
+  --cc-form-color-border-hover: #404652;
+  --cc-form-color-border-focus: #00c6ff;
+  --cc-form-color-divider: #1e2129;
+  --cc-form-color-surface: #1e2129;
+  --cc-form-color-surface-soft: #17191f;
+  --cc-form-color-accent: #00c6ff;
+  --cc-form-color-accent-hover: #4cd0ff;
+  --cc-form-color-accent-contrast: #071014;
+  --cc-form-color-danger: #f53f3f;
+  --cc-form-color-success: #00b42a;
+  --cc-form-color-warning: #ff7d00;
+  --cc-form-placeholder-color: #8995aa;
+  --cc-form-control-background: #1e2129;
+  --cc-form-control-hover-background: #17191f;
+  --cc-form-control-focus-background: #1e2129;
+  --cc-form-control-readonly-background: #17191f;
+  --cc-form-control-disabled-background: #17191f;
+  --cc-form-shadow-focus: var(--cc-shadow-focus);
+  --cc-form-shadow-floating: var(--cc-shadow-floating);
+  --cc-form-disabled-background: #17191f;
+  --cc-form-disabled-border-color: #2c303a;
+  --cc-form-disabled-color: #8f99aa;
+  --cc-form-disabled-opacity: 0.58;
+  --cc-form-readonly-background: #17191f;
+  --cc-form-readonly-border-color: #2c303a;
+  --cc-form-readonly-color: #f3f7ff;
+  --cc-select-menu-background: #1e2129;
+  --cc-select-menu-border-color: #2c303a;
+  --cc-select-menu-text-color: #e4e7ed;
+  --cc-select-menu-shadow: var(--cc-shadow-floating);
+  --cc-select-option-hover-color: #17191f;
+  --cc-select-option-selected-color: rgba(0, 198, 255, 0.12);
+  --cc-select-option-selected-text-color: #00c6ff;
+  --cc-select-check-color: #00c6ff;
+  --cc-select-placeholder-color: #404652;
+  --cc-virtual-select-search-background: #1e2129;
+  --cc-virtual-select-empty-color: #6c7486;
+  --cc-choice-background: #1e2129;
+  --cc-choice-border-color: #2c303a;
+  --cc-choice-border-hover-color: #404652;
+  --cc-choice-checked-background: #00c6ff;
+  --cc-choice-checked-border-color: #00c6ff;
+  --cc-choice-check-color: #071014;
+  --cc-switch-track-background: #2c303a;
+  --cc-switch-track-checked-background: #00c6ff;
+  --cc-switch-thumb-background: #1e2129;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #00c6ff;
+  --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
+  --cc-date-picker-day-hover-background: #17191f;
+  --cc-date-picker-day-selected-background: #00c6ff;
+  --cc-date-picker-day-selected-color: #071014;
+  --cc-date-picker-day-today-ring: inset 0 0 0 1px #00c6ff;
+  --cc-date-range-summary-active-border-color: #00c6ff;
+  --cc-date-range-day-in-range-background: rgba(0, 198, 255, 0.12);
+  --cc-calendar-day-hover-background: #17191f;
+  --cc-calendar-day-selected-background: #00c6ff;
+  --cc-calendar-day-selected-color: #071014;
+  --cc-calendar-day-today-ring: inset 0 0 0 1px #00c6ff;
+  --cc-progress-fill-color: #00c6ff;
+  --cc-progress-thumb-shadow: 0 0 0 4px rgba(0, 198, 255, 0.16);
+  --cc-timeline-active-color: #00c6ff;
+  --cc-picker-active-color: #00c6ff;
+  --cc-picker-indicator-border-color: #00c6ff;
+  --cc-backtop-background: #00c6ff;
+  --cc-backtop-background-hover: #4cd0ff;
+  --cc-backtop-color: #071014;
+  --cc-backtop-shadow: 0 10px 24px rgba(0, 198, 255, 0.24);
+  --cc-backtop-shadow-hover: 0 14px 30px rgba(0, 198, 255, 0.3);
+  --cc-marquee-focus-outline-color: #00c6ff;
+  --cc-typewriter-loading-color: #00c6ff;
+  --cc-typewriter-cursor-color: #00c6ff;
+  --cc-lazy-image-placeholder-color: #6c7486;
+  --cc-lazy-image-skeleton-color: #6c7486;
+  --cc-lazy-image-skeleton-highlight-color: rgba(0, 198, 255, 0.16);
+  --cc-lazy-image-error-color: #f53f3f;
+  --cc-tilt-card-background: #1e2129;
+  --cc-tilt-card-border-color: #2c303a;
+  --cc-tilt-card-color: #e4e7ed;
+  --cc-tilt-card-shadow: 0 18px 42px rgba(0, 198, 255, 0.14);
+  --cc-tilt-card-shadow-active: 0 24px 64px rgba(0, 198, 255, 0.22);
+  --cc-canvas-editor-background: #17191f;
+  --cc-canvas-editor-card-background: #1e2129;
+  --cc-canvas-editor-card-border-color: #2c303a;
+  --cc-canvas-editor-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
+  --cc-canvas-editor-line-color: #00c6ff;
+  --cc-canvas-editor-muted-color: #6c7486;
+  --cc-canvas-editor-text-color: #e4e7ed;
+  --cc-canvas-editor-grid-color: rgba(0, 198, 255, 0.1);
+  --cc-canvas-editor-selection-ring: 0 0 0 2px rgba(0, 198, 255, 0.14);
+  --cc-canvas-editor-control-active-background: #00c6ff;
+  --cc-canvas-editor-control-active-border-color: #00c6ff;
+  --cc-canvas-editor-control-active-color: #071014;
+  --cc-canvas-editor-control-hover-border-color: #00c6ff;
+  --cc-canvas-editor-document-accent-color: rgba(0, 198, 255, 0.08);
+  --cc-canvas-editor-node-border-color: rgba(0, 198, 255, 0.14);
+  --cc-canvas-editor-node-editing-border-color: rgba(0, 198, 255, 0.42);
+  --cc-canvas-editor-input-focus-shadow: inset 0 0 0 1px rgba(0, 198, 255, 0.22);
+  --cc-canvas-editor-mind-glow: radial-gradient(
+    circle at 50% 45%,
+    rgba(0, 198, 255, 0.08),
+    transparent 44%
+  );
+  --cc-canvas-editor-card-selected-border-color: #00c6ff;
+  --cc-canvas-editor-card-selected-shadow: 0 12px 30px rgba(0, 198, 255, 0.12);
+  --cc-drag-drop-slot-dragging-background: rgba(0, 198, 255, 0.3);
+  --cc-drag-drop-slot-dragging-border-color: #00c6ff;
+  --cc-drag-drop-slot-over-background: rgba(0, 198, 255, 0.1);
+  --cc-drag-drop-slot-over-border-color: rgba(0, 198, 255, 0.46);
+  --cc-drag-drop-preview-background: rgba(0, 198, 255, 0.6);
+  --cc-drag-drop-preview-border-color: #00c6ff;
+  --cc-drag-drop-preview-color: #ffffff;
+  --cc-drag-drop-preview-shadow: 0 18px 42px rgba(0, 198, 255, 0.26);
+  --cc-button-shadow: 0 1px 2px rgba(0, 198, 255, 0.08);
+  --cc-button-primary-background: #00c6ff;
+  --cc-button-primary-background-hover: #4cd0ff;
+  --cc-button-primary-color: #071014;
+  --cc-button-primary-shadow-hover: 0 8px 20px rgba(0, 198, 255, 0.22);
+  --cc-button-secondary-background: #1e2129;
+  --cc-button-secondary-border-color: #2c303a;
+  --cc-button-secondary-color: #e4e7ed;
+  --cc-button-ghost-color: #00c6ff;
+  --cc-button-danger-background: #f53f3f;
+  --cc-button-danger-color: #ffffff;
+  --cc-button-hover-transform: translateY(-1px);
+  --cc-button-active-transform: translateY(0);
+  --cc-button-active-shadow: var(--cc-button-shadow);
+  --cc-tabs-list-border-color: #2c303a;
+  --cc-tabs-tab-active-color: #00c6ff;
+  --cc-modal-overlay-background: rgba(5, 6, 10, 0.72);
+  --cc-modal-background: #1e2129;
+  --cc-modal-color: #e4e7ed;
+  --cc-modal-shadow: var(--cc-shadow-floating);
+  --cc-modal-header-background: linear-gradient(
+    180deg,
+    #1e2129 0%,
+    #17191f 100%
+  );
+  --cc-modal-header-border-color: #1e2129;
+  --cc-modal-header-color: #e4e7ed;
+  --cc-popup-overlay-background: rgba(5, 6, 10, 0.72);
+  --cc-popup-background: #1e2129;
+  --cc-popup-color: #e4e7ed;
+  --cc-popup-shadow: var(--cc-shadow-floating);
+  --cc-popup-header-background: linear-gradient(
+    180deg,
+    #1e2129 0%,
+    #17191f 100%
+  );
+  --cc-popup-header-border-color: #1e2129;
+  --cc-popup-header-color: #e4e7ed;
+  --cc-tooltip-background: #0f1116;
+  --cc-tooltip-color: #e4e7ed;
+  --cc-tooltip-shadow: 0 10px 24px rgba(0, 198, 255, 0.2);
+  --cc-toast-background: #1e2129;
+  --cc-toast-border-color: #2c303a;
+  --cc-toast-accent-color: #00c6ff;
+  --cc-toast-shadow: 0 12px 30px rgba(0, 198, 255, 0.16);
+  --cc-theme-backdrop-filter: none;
+  --cc-theme-overlay-backdrop-filter: none;
+  --cc-theme-glass-highlight: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.72),
+    rgba(255, 255, 255, 0.36)
+  );
+  --cc-color-text: #f3f7ff;
+  --cc-color-muted: #b3bdd0;
+  --cc-select-menu-text-color: #f3f7ff;
+  --cc-select-option-selected-text-color: #f3f7ff;
+  --cc-select-placeholder-color: #8995aa;
+  --cc-virtual-select-empty-color: #b3bdd0;
+  --cc-lazy-image-placeholder-color: #b3bdd0;
+  --cc-lazy-image-skeleton-color: #8995aa;
+  --cc-tilt-card-color: #f3f7ff;
+  --cc-canvas-editor-muted-color: #b3bdd0;
+  --cc-canvas-editor-text-color: #f3f7ff;
+  --cc-button-secondary-color: #f3f7ff;
+  --cc-modal-color: #f3f7ff;
+  --cc-modal-header-color: #f3f7ff;
+  --cc-popup-color: #f3f7ff;
+  --cc-popup-header-color: #f3f7ff;
+  --cc-tooltip-color: #f3f7ff;
+
+  /* Ten-pass enterprise polish: luminous contrast without washing out dark surfaces. */
+  --cc-color-text: #f7fbff;
+  --cc-color-muted: #aab6c8;
+  --cc-color-border: #303846;
+  --cc-color-border-hover: #566275;
+  --cc-color-border-focus: #23d3ff;
+  --cc-color-divider: #232a35;
+  --cc-color-surface: #151a22;
+  --cc-color-surface-soft: #10151d;
+  --cc-color-accent: #23d3ff;
+  --cc-color-accent-hover: #67e2ff;
+  --cc-form-color-text: #f7fbff;
+  --cc-form-color-muted: #aab6c8;
+  --cc-form-color-border: #303846;
+  --cc-form-color-border-hover: #566275;
+  --cc-form-color-border-focus: #23d3ff;
+  --cc-form-placeholder-color: #7e8ba0;
+  --cc-form-control-background: #151a22;
+  --cc-form-control-hover-background: #19202a;
+  --cc-form-control-focus-background: #151a22;
+  --cc-shadow-focus: 0 0 0 3px rgba(35, 211, 255, 0.2);
+  --cc-shadow-floating:
+    0 26px 64px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(35, 211, 255, 0.08);
+  --cc-button-primary-background: linear-gradient(
+    135deg,
+    #23d3ff 0%,
+    #4f8cff 100%
+  );
+  --cc-button-primary-background-hover: linear-gradient(
+    135deg,
+    #67e2ff 0%,
+    #73a4ff 100%
+  );
+  --cc-button-secondary-background: #151a22;
+  --cc-button-secondary-border-color: #3a4555;
+  --cc-button-secondary-color: #edf7ff;
+  --cc-button-ghost-color: #67e2ff;
+  --cc-select-menu-background: #151a22;
+  --cc-select-menu-border-color: #3a4555;
+  --cc-select-menu-text-color: #f7fbff;
+  --cc-select-option-hover-color: #1d2632;
+  --cc-select-option-selected-color: rgba(35, 211, 255, 0.16);
+  --cc-select-option-selected-text-color: #ffffff;
+  --cc-select-check-color: #67e2ff;
+  --cc-switch-track-background: #303846;
+  --cc-switch-track-checked-background: linear-gradient(
+    135deg,
+    #23d3ff 0%,
+    #4f8cff 100%
+  );
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #23d3ff;
+  --cc-tabs-tab-active-color: #67e2ff;
+  --cc-tabs-list-border-color: #303846;
+  --cc-modal-overlay-background: rgba(2, 6, 12, 0.76);
+  --cc-modal-background: #151a22;
+  --cc-modal-color: #f7fbff;
+  --cc-modal-header-background: #151a22;
+  --cc-modal-header-border-color: #27303d;
+  --cc-modal-header-color: #ffffff;
+  --cc-popup-background: #151a22;
+  --cc-popup-color: #f7fbff;
+  --cc-popup-header-background: #151a22;
+  --cc-popup-header-border-color: #27303d;
+  --cc-popup-header-color: #ffffff;
+  --cc-toast-background: #151a22;
+  --cc-toast-border-color: #303846;
+  --cc-toast-accent-color: #23d3ff;
+  --cc-tooltip-background: #05080d;
+  --cc-tooltip-color: #ffffff;
+  --cc-menu-background: transparent;
+  --cc-menu-text-color: #dce7f5;
+  --cc-menu-muted-color: #93a1b5;
+  --cc-menu-item-color: #dce7f5;
+  --cc-menu-item-muted-color: #93a1b5;
+  --cc-menu-item-hover-background: #1d2632;
+  --cc-menu-item-hover-color: #ffffff;
+  --cc-menu-item-active-background: rgba(35, 211, 255, 0.14);
+  --cc-menu-item-active-color: var(--cc-form-color-accent);
+  --cc-menu-item-active-border-color: var(--cc-form-color-accent);
+  --cc-menu-item-icon-color: #b5c3d6;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: #111720;
+  --cc-code-preview-panel-background: #0d121a;
+  --cc-code-preview-border-color: #303846;
+  --cc-code-preview-bar-background: #151a22;
+  --cc-code-preview-color: #eaf4ff;
+  --cc-code-preview-text-color: #eaf4ff;
+  --cc-code-preview-muted-color: #9facbf;
+  --cc-code-preview-accent-color: #23d3ff;
+  --cc-code-preview-line-color: rgba(35, 211, 255, 0.48);
+
+  /* Five-round premium tuning: deep graphite, neon focus, readable long-form text. */
+  --cc-color-text: #f6fbff;
+  --cc-color-muted: #b3bfd0;
+  --cc-color-border: #334052;
+  --cc-color-border-hover: #64758d;
+  --cc-color-border-focus: #2dd7ff;
+  --cc-color-divider: #26313f;
+  --cc-color-surface: #141a23;
+  --cc-color-surface-soft: #0f151e;
+  --cc-color-accent: #2dd7ff;
+  --cc-color-accent-hover: #7ae7ff;
+  --cc-shadow-focus: 0 0 0 3px rgba(45, 215, 255, 0.2);
+  --cc-shadow-floating:
+    0 28px 70px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(45, 215, 255, 0.09);
+  --cc-form-color-text: #f6fbff;
+  --cc-form-color-muted: #b3bfd0;
+  --cc-form-color-border: #334052;
+  --cc-form-color-border-hover: #64758d;
+  --cc-form-color-border-focus: #2dd7ff;
+  --cc-form-placeholder-color: #8492a8;
+  --cc-form-control-background: #141a23;
+  --cc-form-control-hover-background: #1a2230;
+  --cc-form-control-focus-background: #141a23;
+  --cc-select-menu-background: #141a23;
+  --cc-select-menu-border-color: #405067;
+  --cc-select-menu-text-color: #f6fbff;
+  --cc-select-option-hover-color: #1d2836;
+  --cc-select-option-selected-color: rgba(45, 215, 255, 0.15);
+  --cc-select-option-selected-text-color: #ffffff;
+  --cc-select-check-color: #7ae7ff;
+  --cc-button-primary-background: linear-gradient(
+    135deg,
+    #2dd7ff 0%,
+    #5d8cff 100%
+  );
+  --cc-button-primary-background-hover: linear-gradient(
+    135deg,
+    #7ae7ff 0%,
+    #83a9ff 100%
+  );
+  --cc-button-secondary-background: #141a23;
+  --cc-button-secondary-border-color: #405067;
+  --cc-button-secondary-color: #f2f8ff;
+  --cc-button-ghost-color: #7ae7ff;
+  --cc-switch-track-background: #334052;
+  --cc-switch-track-checked-background: linear-gradient(
+    135deg,
+    #2dd7ff 0%,
+    #5d8cff 100%
+  );
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #2dd7ff;
+  --cc-tabs-tab-active-color: #7ae7ff;
+  --cc-tabs-list-border-color: #334052;
+  --cc-modal-overlay-background: rgba(2, 6, 12, 0.78);
+  --cc-modal-background: #141a23;
+  --cc-modal-color: #f6fbff;
+  --cc-modal-header-background: #141a23;
+  --cc-modal-header-border-color: #26313f;
+  --cc-modal-header-color: #ffffff;
+  --cc-popup-overlay-background: rgba(2, 6, 12, 0.78);
+  --cc-popup-background: #141a23;
+  --cc-popup-color: #f6fbff;
+  --cc-popup-header-background: #141a23;
+  --cc-popup-header-border-color: #26313f;
+  --cc-popup-header-color: #ffffff;
+  --cc-toast-background: #141a23;
+  --cc-toast-border-color: #334052;
+  --cc-toast-accent-color: #2dd7ff;
+  --cc-tooltip-background: #05080d;
+  --cc-tooltip-color: #ffffff;
+  --cc-menu-text-color: #e0ebf7;
+  --cc-menu-muted-color: #98a8bc;
+  --cc-menu-item-color: #e0ebf7;
+  --cc-menu-item-muted-color: #98a8bc;
+  --cc-menu-item-hover-background: #1d2836;
+  --cc-menu-item-hover-color: #ffffff;
+  --cc-menu-item-active-background: rgba(45, 215, 255, 0.14);
+  --cc-menu-item-active-color: var(--cc-form-color-accent);
+  --cc-menu-item-active-border-color: var(--cc-form-color-accent);
+  --cc-menu-item-icon-color: #bbcada;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: #111821;
+  --cc-code-preview-panel-background: #0c1119;
+  --cc-code-preview-border-color: #334052;
+  --cc-code-preview-bar-background: #141a23;
+  --cc-code-preview-color: #edf7ff;
+  --cc-code-preview-text-color: #edf7ff;
+  --cc-code-preview-muted-color: #a6b4c6;
+  --cc-code-preview-accent-color: #2dd7ff;
+  --cc-code-preview-line-color: rgba(45, 215, 255, 0.5);
+
+  /* Control readability pass: keep values bright on graphite surfaces. */
+  --cc-color-text: #f8fbff;
+  --cc-color-muted: #bac7d8;
+  --cc-color-border: #3c4b60;
+  --cc-color-border-hover: #70839a;
+  --cc-form-color-accent: var(--cc-color-accent);
+  --cc-form-color-accent-hover: var(--cc-color-accent-hover);
+  --cc-form-color-accent-contrast: #071014;
+  --cc-form-color-text: #f8fbff;
+  --cc-form-color-muted: #bac7d8;
+  --cc-form-color-border: #3c4b60;
+  --cc-form-color-border-hover: #70839a;
+  --cc-form-color-border-focus: var(--cc-form-color-accent);
+  --cc-form-placeholder-color: #9aa9bb;
+  --cc-form-control-background: #101722;
+  --cc-form-control-hover-background: #172131;
+  --cc-form-control-focus-background: #101722;
+  --cc-form-control-readonly-background: #151d2a;
+  --cc-form-control-disabled-background: #111822;
+  --cc-form-disabled-background: #111822;
+  --cc-form-disabled-border-color: #2f3a4a;
+  --cc-form-disabled-color: #9facbf;
+  --cc-form-disabled-opacity: 0.72;
+  --cc-form-readonly-background: #151d2a;
+  --cc-form-readonly-border-color: #3c4b60;
+  --cc-form-readonly-color: #eef6ff;
+  --cc-select-menu-background: #101722;
+  --cc-select-menu-border-color: #3c4b60;
+  --cc-select-menu-text-color: #f8fbff;
+  --cc-select-option-hover-color: #1d2a3a;
+  --cc-select-option-selected-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 20%,
+    transparent
+  );
+  --cc-select-option-selected-text-color: #ffffff;
+  --cc-select-check-color: var(--cc-form-color-accent-hover);
+  --cc-select-placeholder-color: #9aa9bb;
+  --cc-virtual-select-search-background: #101722;
+  --cc-virtual-select-empty-color: #bac7d8;
+  --cc-choice-background: #101722;
+  --cc-choice-border-color: #3c4b60;
+  --cc-choice-border-hover-color: #70839a;
+  --cc-choice-checked-background: linear-gradient(
+    135deg,
+    var(--cc-form-color-accent) 0%,
+    color-mix(in srgb, var(--cc-form-color-accent-hover) 58%, #5d8cff) 100%
+  );
+  --cc-choice-checked-border-color: var(--cc-form-color-accent-hover);
+  --cc-choice-check-color: var(--cc-form-color-accent-contrast);
+  --cc-switch-track-checked-background: linear-gradient(
+    135deg,
+    var(--cc-form-color-accent) 0%,
+    color-mix(in srgb, var(--cc-form-color-accent-hover) 58%, #5d8cff) 100%
+  );
+  --cc-rating-star-active-color: var(--cc-form-color-accent);
+  --cc-tabs-tab-active-color: var(--cc-form-color-accent);
+  --cc-toast-accent-color: var(--cc-form-color-accent);
+  --cc-code-preview-accent-color: var(--cc-form-color-accent);
+  --cc-code-preview-line-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 52%,
+    transparent
+  );
+  --cc-menu-item-active-background: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 14%,
+    transparent
+  );
+  --cc-menu-item-active-color: var(--cc-form-color-accent);
+  --cc-menu-item-active-border-color: var(--cc-form-color-accent);
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-progress-fill-color: var(--cc-form-color-accent);
+  --cc-timeline-active-color: var(--cc-form-color-accent);
+  --cc-picker-active-color: var(--cc-form-color-accent);
+  --cc-picker-indicator-border-color: var(--cc-form-color-accent);
+  --cc-backtop-background: var(--cc-form-color-accent);
+  --cc-backtop-background-hover: var(--cc-form-color-accent-hover);
+  --cc-backtop-color: var(--cc-form-color-accent-contrast);
+  --cc-marquee-focus-outline-color: var(--cc-form-color-accent);
+  --cc-typewriter-loading-color: var(--cc-form-color-accent);
+  --cc-typewriter-cursor-color: var(--cc-form-color-accent);
+  --cc-button-secondary-background: #101722;
+  --cc-button-secondary-border-color: #3c4b60;
+  --cc-button-secondary-color: #f8fbff;
+  --cc-button-ghost-color: #8aecff;
+  --cc-modal-background: #101722;
+  --cc-modal-color: #f8fbff;
+  --cc-popup-background: #101722;
+  --cc-popup-color: #f8fbff;
+  --cc-tooltip-color: #f8fbff;
+  --cc-toast-background: #101722;
+  --cc-toast-border-color: #3c4b60;
+}