@class-kit/react 0.1.0 → 0.1.2

package/dist/styles/themes/minimal.css

@@ -1,19 +1,411 @@
-.cc-theme-minimal,
+.cc-theme-minimal,
 [data-cc-theme="minimal"] {
-  --cc-color-text: #111111;
-  --cc-color-muted: #626262;
-  --cc-color-border: #d8d8d8;
-  --cc-color-border-hover: #a3a3a3;
-  --cc-color-border-focus: #111111;
-  --cc-color-divider: #e9e9e9;
+  --cc-minimal-ink: #0b0d10;
+  --cc-minimal-text: #20242a;
+  --cc-minimal-muted: #58616c;
+  --cc-minimal-soft: #7c858f;
+  --cc-minimal-border: #d6dce3;
+  --cc-minimal-border-hover: #aeb7c2;
+  --cc-minimal-divider: #e8edf2;
+  --cc-minimal-surface: #ffffff;
+  --cc-minimal-surface-soft: #f8fafc;
+  --cc-minimal-surface-muted: #f4f6f8;
+  --cc-color-text: var(--cc-minimal-ink);
+  --cc-color-muted: var(--cc-minimal-muted);
+  --cc-color-border: var(--cc-minimal-border);
+  --cc-color-border-hover: var(--cc-minimal-border-hover);
+  --cc-color-border-focus: var(--cc-minimal-ink);
+  --cc-color-divider: var(--cc-minimal-divider);
   --cc-color-surface: #ffffff;
-  --cc-color-surface-soft: #f7f7f7;
-  --cc-color-danger: #b91c1c;
-  --cc-color-success: #166534;
-  --cc-color-warning: #92400e;
-  --cc-color-accent: #111111;
-  --cc-color-accent-hover: #000000;
+  --cc-color-surface-soft: var(--cc-minimal-surface-soft);
+  --cc-color-danger: #f53f3f;
+  --cc-color-success: #00b42a;
+  --cc-color-warning: #ff7d00;
+  --cc-color-info: #007aff;
+  --cc-color-accent: var(--cc-minimal-ink);
+  --cc-color-accent-hover: #24282e;
   --cc-color-accent-contrast: #ffffff;
-  --cc-tooltip-background: #111111;
+  --cc-shadow-focus: 0 0 0 3px rgba(11, 13, 16, 0.13);
+  --cc-shadow-floating: 0 18px 48px rgba(12, 16, 22, 0.12);
+  --cc-form-color-text: var(--cc-minimal-ink);
+  --cc-form-color-muted: var(--cc-minimal-muted);
+  --cc-form-color-border: var(--cc-minimal-border);
+  --cc-form-color-border-hover: var(--cc-minimal-border-hover);
+  --cc-form-color-border-focus: var(--cc-minimal-ink);
+  --cc-form-color-divider: var(--cc-minimal-divider);
+  --cc-form-color-surface: var(--cc-minimal-surface);
+  --cc-form-color-surface-soft: var(--cc-minimal-surface-soft);
+  --cc-form-color-accent: var(--cc-minimal-ink);
+  --cc-form-color-accent-hover: #24282e;
+  --cc-form-color-accent-contrast: #ffffff;
+  --cc-form-color-danger: #f53f3f;
+  --cc-form-color-success: #00b42a;
+  --cc-form-color-warning: #ff7d00;
+  --cc-form-placeholder-color: var(--cc-minimal-soft);
+  --cc-form-control-background: var(--cc-minimal-surface);
+  --cc-form-control-hover-background: var(--cc-minimal-surface-muted);
+  --cc-form-control-focus-background: #ffffff;
+  --cc-form-control-readonly-background: var(--cc-minimal-surface-soft);
+  --cc-form-control-disabled-background: var(--cc-minimal-surface-muted);
+  --cc-form-shadow-focus: var(--cc-shadow-focus);
+  --cc-form-shadow-floating: var(--cc-shadow-floating);
+  --cc-form-disabled-background: var(--cc-minimal-surface-muted);
+  --cc-form-disabled-border-color: var(--cc-minimal-divider);
+  --cc-form-disabled-color: #aeb7c2;
+  --cc-form-disabled-opacity: 0.58;
+  --cc-form-readonly-background: #ffffff;
+  --cc-form-readonly-border-color: var(--cc-minimal-border);
+  --cc-form-readonly-color: var(--cc-minimal-ink);
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: var(--cc-minimal-border);
+  --cc-select-menu-text-color: var(--cc-minimal-ink);
+  --cc-select-menu-shadow: var(--cc-shadow-floating);
+  --cc-select-option-hover-color: var(--cc-minimal-surface-muted);
+  --cc-select-option-selected-color: rgba(11, 13, 16, 0.075);
+  --cc-select-option-selected-text-color: var(--cc-minimal-ink);
+  --cc-select-check-color: var(--cc-minimal-ink);
+  --cc-select-placeholder-color: var(--cc-minimal-soft);
+  --cc-virtual-select-search-background: var(--cc-minimal-surface-soft);
+  --cc-virtual-select-empty-color: var(--cc-minimal-muted);
+  --cc-choice-background: #ffffff;
+  --cc-choice-border-color: var(--cc-minimal-border);
+  --cc-choice-border-hover-color: var(--cc-minimal-border-hover);
+  --cc-choice-checked-background: var(--cc-minimal-ink);
+  --cc-choice-checked-border-color: var(--cc-minimal-ink);
+  --cc-choice-check-color: #ffffff;
+  --cc-switch-track-background: var(--cc-minimal-border);
+  --cc-switch-track-checked-background: var(--cc-minimal-ink);
+  --cc-switch-thumb-background: #ffffff;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: var(--cc-minimal-ink);
+  --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
+  --cc-date-picker-day-hover-background: var(--cc-minimal-surface-muted);
+  --cc-date-picker-day-selected-background: var(--cc-minimal-ink);
+  --cc-date-picker-day-selected-color: #ffffff;
+  --cc-date-picker-day-today-ring: inset 0 0 0 1px var(--cc-minimal-ink);
+  --cc-date-range-summary-active-border-color: var(--cc-minimal-ink);
+  --cc-date-range-day-in-range-background: rgba(11, 13, 16, 0.075);
+  --cc-calendar-day-hover-background: var(--cc-minimal-surface-muted);
+  --cc-calendar-day-selected-background: var(--cc-minimal-ink);
+  --cc-calendar-day-selected-color: #ffffff;
+  --cc-calendar-day-today-ring: inset 0 0 0 1px var(--cc-minimal-ink);
+  --cc-progress-fill-color: var(--cc-minimal-ink);
+  --cc-progress-thumb-shadow: 0 0 0 4px rgba(11, 13, 16, 0.1);
+  --cc-timeline-active-color: var(--cc-minimal-ink);
+  --cc-picker-active-color: var(--cc-minimal-ink);
+  --cc-picker-indicator-border-color: var(--cc-minimal-ink);
+  --cc-backtop-background: var(--cc-minimal-ink);
+  --cc-backtop-background-hover: #24282e;
+  --cc-backtop-color: #ffffff;
+  --cc-backtop-shadow: 0 12px 28px rgba(12, 16, 22, 0.14);
+  --cc-backtop-shadow-hover: 0 16px 34px rgba(12, 16, 22, 0.18);
+  --cc-marquee-focus-outline-color: var(--cc-minimal-ink);
+  --cc-typewriter-loading-color: var(--cc-minimal-ink);
+  --cc-typewriter-cursor-color: var(--cc-minimal-ink);
+  --cc-lazy-image-placeholder-color: var(--cc-minimal-muted);
+  --cc-lazy-image-skeleton-color: #edf1f5;
+  --cc-lazy-image-skeleton-highlight-color: rgba(255, 255, 255, 0.9);
+  --cc-lazy-image-error-color: #f53f3f;
+  --cc-tilt-card-background: #ffffff;
+  --cc-tilt-card-border-color: var(--cc-minimal-border);
+  --cc-tilt-card-color: var(--cc-minimal-ink);
+  --cc-tilt-card-shadow: 0 16px 38px rgba(12, 16, 22, 0.08);
+  --cc-tilt-card-shadow-active: 0 22px 56px rgba(12, 16, 22, 0.12);
+  --cc-canvas-editor-background: #ffffff;
+  --cc-canvas-editor-card-background: #ffffff;
+  --cc-canvas-editor-card-border-color: #dedede;
+  --cc-canvas-editor-card-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
+  --cc-canvas-editor-line-color: #000000;
+  --cc-canvas-editor-muted-color: #555a60;
+  --cc-canvas-editor-text-color: #111111;
+  --cc-canvas-editor-grid-color: rgba(0, 0, 0, 0.06);
+  --cc-canvas-editor-selection-ring: 0 0 0 2px rgba(0, 0, 0, 0.1);
+  --cc-canvas-editor-control-active-background: #000000;
+  --cc-canvas-editor-control-active-border-color: #000000;
+  --cc-canvas-editor-control-active-color: #ffffff;
+  --cc-canvas-editor-control-hover-border-color: #000000;
+  --cc-canvas-editor-document-accent-color: rgba(0, 0, 0, 0.05);
+  --cc-canvas-editor-node-border-color: rgba(0, 0, 0, 0.1);
+  --cc-canvas-editor-node-editing-border-color: rgba(0, 0, 0, 0.32);
+  --cc-canvas-editor-input-focus-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
+  --cc-canvas-editor-mind-glow: radial-gradient(
+    circle at 50% 45%,
+    rgba(0, 0, 0, 0.05),
+    transparent 44%
+  );
+  --cc-canvas-editor-card-selected-border-color: #000000;
+  --cc-canvas-editor-card-selected-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
+  --cc-drag-drop-slot-dragging-background: rgba(0, 0, 0, 0.05);
+  --cc-drag-drop-slot-dragging-border-color: rgba(0, 0, 0, 0.24);
+  --cc-drag-drop-slot-over-background: rgba(0, 0, 0, 0.07);
+  --cc-drag-drop-slot-over-border-color: rgba(0, 0, 0, 0.34);
+  --cc-drag-drop-preview-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
+  --cc-button-shadow: 0 1px 2px rgba(12, 16, 22, 0.08);
+  --cc-button-primary-background: var(--cc-minimal-ink);
+  --cc-button-primary-background-hover: #24282e;
+  --cc-button-primary-color: #ffffff;
+  --cc-button-primary-shadow-hover: 0 8px 18px rgba(12, 16, 22, 0.18);
+  --cc-button-secondary-background: #ffffff;
+  --cc-button-secondary-border-color: var(--cc-minimal-border);
+  --cc-button-secondary-color: var(--cc-minimal-ink);
+  --cc-button-ghost-color: var(--cc-minimal-ink);
+  --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: var(--cc-minimal-border);
+  --cc-tabs-tab-active-color: var(--cc-minimal-ink);
+  --cc-modal-overlay-background: rgba(0, 0, 0, 0.48);
+  --cc-modal-background: #ffffff;
+  --cc-modal-color: var(--cc-minimal-ink);
+  --cc-modal-shadow: var(--cc-shadow-floating);
+  --cc-modal-header-background: #ffffff;
+  --cc-modal-header-border-color: var(--cc-minimal-divider);
+  --cc-modal-header-color: var(--cc-minimal-ink);
+  --cc-popup-overlay-background: rgba(0, 0, 0, 0.48);
+  --cc-popup-background: #ffffff;
+  --cc-popup-color: var(--cc-minimal-ink);
+  --cc-popup-shadow: var(--cc-shadow-floating);
+  --cc-popup-header-background: #ffffff;
+  --cc-popup-header-border-color: var(--cc-minimal-divider);
+  --cc-popup-header-color: var(--cc-minimal-ink);
+  --cc-tooltip-background: var(--cc-minimal-ink);
   --cc-tooltip-color: #ffffff;
+  --cc-tooltip-shadow: 0 10px 24px rgba(12, 16, 22, 0.16);
+  --cc-toast-background: #ffffff;
+  --cc-toast-border-color: var(--cc-minimal-border);
+  --cc-toast-accent-color: var(--cc-minimal-ink);
+  --cc-toast-shadow: 0 14px 34px rgba(12, 16, 22, 0.1);
+  --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: var(--cc-minimal-ink);
+  --cc-color-muted: var(--cc-minimal-muted);
+  --cc-select-menu-text-color: var(--cc-minimal-ink);
+  --cc-select-option-selected-text-color: var(--cc-minimal-ink);
+  --cc-select-placeholder-color: var(--cc-minimal-soft);
+  --cc-virtual-select-empty-color: var(--cc-minimal-muted);
+  --cc-lazy-image-placeholder-color: var(--cc-minimal-muted);
+  --cc-lazy-image-skeleton-color: #edf1f5;
+  --cc-tilt-card-color: var(--cc-minimal-ink);
+  --cc-canvas-editor-muted-color: var(--cc-minimal-muted);
+  --cc-canvas-editor-text-color: var(--cc-minimal-ink);
+  --cc-button-secondary-color: var(--cc-minimal-ink);
+  --cc-modal-color: var(--cc-minimal-ink);
+  --cc-modal-header-color: var(--cc-minimal-ink);
+  --cc-popup-color: var(--cc-minimal-ink);
+  --cc-popup-header-color: var(--cc-minimal-ink);
+
+  /* Ten-pass enterprise polish: contrast, hierarchy, motion, menus, overlays and code surfaces. */
+  --cc-minimal-ink: #08090b;
+  --cc-minimal-text: #15171c;
+  --cc-minimal-muted: #3d424b;
+  --cc-minimal-soft: #646b76;
+  --cc-minimal-border: #cfd4dc;
+  --cc-minimal-border-strong: #8b929d;
+  --cc-minimal-divider: #eceff3;
+  --cc-minimal-panel: #ffffff;
+  --cc-minimal-panel-soft: #f7f8fa;
+  --cc-minimal-panel-muted: #f0f2f5;
+  --cc-color-text: var(--cc-minimal-text);
+  --cc-color-muted: var(--cc-minimal-muted);
+  --cc-color-border: var(--cc-minimal-border);
+  --cc-color-border-hover: var(--cc-minimal-border-strong);
+  --cc-color-border-focus: var(--cc-minimal-ink);
+  --cc-color-divider: var(--cc-minimal-divider);
+  --cc-color-surface: var(--cc-minimal-panel);
+  --cc-color-surface-soft: var(--cc-minimal-panel-soft);
+  --cc-color-accent: var(--cc-minimal-ink);
+  --cc-color-accent-hover: #20242b;
+  --cc-form-color-text: var(--cc-minimal-text);
+  --cc-form-color-muted: var(--cc-minimal-muted);
+  --cc-form-color-border: var(--cc-minimal-border);
+  --cc-form-color-border-hover: var(--cc-minimal-border-strong);
+  --cc-form-color-border-focus: var(--cc-minimal-ink);
+  --cc-form-placeholder-color: #727984;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #fafbfc;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-form-disabled-background: #f3f4f6;
+  --cc-form-disabled-color: #7b828d;
+  --cc-shadow-focus: 0 0 0 3px rgba(8, 9, 11, 0.14);
+  --cc-shadow-floating:
+    0 20px 52px rgba(8, 9, 11, 0.1), 0 1px 0 rgba(8, 9, 11, 0.05);
+  --cc-button-primary-background: #08090b;
+  --cc-button-primary-background-hover: #20242b;
+  --cc-button-primary-color: #ffffff;
+  --cc-button-secondary-background: #ffffff;
+  --cc-button-secondary-border-color: #bdc4ce;
+  --cc-button-secondary-color: #111318;
+  --cc-button-ghost-color: #111318;
+  --cc-button-shadow: 0 8px 18px rgba(8, 9, 11, 0.08);
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #c7cdd6;
+  --cc-select-menu-text-color: #15171c;
+  --cc-select-option-hover-color: #f0f2f5;
+  --cc-select-option-selected-color: rgba(8, 9, 11, 0.08);
+  --cc-select-option-selected-text-color: #08090b;
+  --cc-select-check-color: #08090b;
+  --cc-switch-track-background: #d9dde4;
+  --cc-switch-track-checked-background: #08090b;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #08090b;
+  --cc-tabs-tab-active-color: #08090b;
+  --cc-tabs-list-border-color: #cfd4dc;
+  --cc-modal-overlay-background: rgba(8, 9, 11, 0.5);
+  --cc-modal-background: #ffffff;
+  --cc-modal-color: #15171c;
+  --cc-modal-header-background: #ffffff;
+  --cc-modal-header-border-color: #e6e9ee;
+  --cc-modal-header-color: #08090b;
+  --cc-popup-background: #ffffff;
+  --cc-popup-color: #15171c;
+  --cc-popup-header-background: #ffffff;
+  --cc-popup-header-border-color: #e6e9ee;
+  --cc-popup-header-color: #08090b;
+  --cc-toast-background: #ffffff;
+  --cc-toast-border-color: #d7dce4;
+  --cc-toast-accent-color: #08090b;
+  --cc-tooltip-background: #08090b;
+  --cc-tooltip-color: #ffffff;
+  --cc-menu-background: transparent;
+  --cc-menu-text-color: #2e333b;
+  --cc-menu-muted-color: #5c6470;
+  --cc-menu-item-color: #2e333b;
+  --cc-menu-item-muted-color: #5c6470;
+  --cc-menu-item-hover-background: #f3f4f6;
+  --cc-menu-item-hover-color: #111318;
+  --cc-menu-item-active-background: rgba(8, 9, 11, 0.07);
+  --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: #3d424b;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: #ffffff;
+  --cc-code-preview-panel-background: #f7f8fa;
+  --cc-code-preview-border-color: #d8dde5;
+  --cc-code-preview-bar-background: #ffffff;
+  --cc-code-preview-color: #171a20;
+  --cc-code-preview-text-color: #171a20;
+  --cc-code-preview-muted-color: #555d69;
+  --cc-code-preview-accent-color: #08090b;
+  --cc-code-preview-line-color: rgba(8, 9, 11, 0.42);
+
+  /* Five-round premium tuning: editorial monochrome, sharper hierarchy, quieter surfaces. */
+  --cc-minimal-ink: #050608;
+  --cc-minimal-text: #111318;
+  --cc-minimal-muted: #343a43;
+  --cc-minimal-soft: #69727d;
+  --cc-minimal-border: #c8ced7;
+  --cc-minimal-border-strong: #747d89;
+  --cc-minimal-divider: #e8ebef;
+  --cc-minimal-panel: #ffffff;
+  --cc-minimal-panel-soft: #fafbfc;
+  --cc-minimal-panel-muted: #f2f4f7;
+  --cc-color-text: var(--cc-minimal-text);
+  --cc-color-muted: var(--cc-minimal-muted);
+  --cc-color-border: var(--cc-minimal-border);
+  --cc-color-border-hover: var(--cc-minimal-border-strong);
+  --cc-color-border-focus: var(--cc-minimal-ink);
+  --cc-color-divider: var(--cc-minimal-divider);
+  --cc-color-surface: var(--cc-minimal-panel);
+  --cc-color-surface-soft: var(--cc-minimal-panel-soft);
+  --cc-color-accent: var(--cc-minimal-ink);
+  --cc-color-accent-hover: #181b20;
+  --cc-shadow-focus: 0 0 0 3px rgba(5, 6, 8, 0.13);
+  --cc-shadow-floating:
+    0 18px 44px rgba(5, 6, 8, 0.11), 0 1px 0 rgba(5, 6, 8, 0.04);
+  --cc-form-color-text: var(--cc-minimal-text);
+  --cc-form-color-muted: var(--cc-minimal-muted);
+  --cc-form-color-border: var(--cc-minimal-border);
+  --cc-form-color-border-hover: var(--cc-minimal-border-strong);
+  --cc-form-color-border-focus: var(--cc-minimal-ink);
+  --cc-form-color-surface: #ffffff;
+  --cc-form-color-surface-soft: var(--cc-minimal-panel-soft);
+  --cc-form-placeholder-color: var(--cc-minimal-soft);
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #f7f8fa;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-form-disabled-background: #f1f3f5;
+  --cc-form-disabled-border-color: #dde2e8;
+  --cc-form-disabled-color: #7e8793;
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #c8ced7;
+  --cc-select-menu-text-color: #111318;
+  --cc-select-option-hover-color: #f1f3f5;
+  --cc-select-option-selected-color: rgba(5, 6, 8, 0.075);
+  --cc-select-option-selected-text-color: #050608;
+  --cc-select-check-color: #050608;
+  --cc-select-placeholder-color: #69727d;
+  --cc-choice-checked-background: #050608;
+  --cc-choice-checked-border-color: #050608;
+  --cc-switch-track-background: #d7dce3;
+  --cc-switch-track-checked-background: #050608;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #050608;
+  --cc-tabs-list-border-color: #c8ced7;
+  --cc-tabs-tab-active-color: #050608;
+  --cc-button-primary-background: #050608;
+  --cc-button-primary-background-hover: #181b20;
+  --cc-button-secondary-border-color: #b8c0cb;
+  --cc-button-secondary-color: #111318;
+  --cc-button-ghost-color: #111318;
+  --cc-button-shadow: 0 8px 18px rgba(5, 6, 8, 0.08);
+  --cc-modal-overlay-background: rgba(5, 6, 8, 0.54);
+  --cc-modal-background: #ffffff;
+  --cc-modal-color: #111318;
+  --cc-modal-header-background: #ffffff;
+  --cc-modal-header-border-color: #e4e8ed;
+  --cc-modal-header-color: #050608;
+  --cc-modal-shadow: var(--cc-shadow-floating);
+  --cc-popup-overlay-background: rgba(5, 6, 8, 0.54);
+  --cc-popup-background: #ffffff;
+  --cc-popup-color: #111318;
+  --cc-popup-header-background: #ffffff;
+  --cc-popup-header-border-color: #e4e8ed;
+  --cc-popup-header-color: #050608;
+  --cc-popup-shadow: var(--cc-shadow-floating);
+  --cc-toast-background: #ffffff;
+  --cc-toast-border-color: #c8ced7;
+  --cc-toast-accent-color: #050608;
+  --cc-tooltip-background: #050608;
+  --cc-tooltip-color: #ffffff;
+  --cc-menu-text-color: #252b33;
+  --cc-menu-muted-color: #59626e;
+  --cc-menu-item-color: #252b33;
+  --cc-menu-item-muted-color: #59626e;
+  --cc-menu-item-hover-background: #f2f4f7;
+  --cc-menu-item-hover-color: #111318;
+  --cc-menu-item-active-background: rgba(5, 6, 8, 0.065);
+  --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: #343a43;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: #ffffff;
+  --cc-code-preview-panel-background: #f7f8fa;
+  --cc-code-preview-border-color: #d8dde5;
+  --cc-code-preview-bar-background: #ffffff;
+  --cc-code-preview-color: #0f1217;
+  --cc-code-preview-text-color: #0f1217;
+  --cc-code-preview-muted-color: #4b5563;
+  --cc-code-preview-accent-color: #050608;
+  --cc-code-preview-line-color: #e4e8ed;
+  --cc-code-preview-shadow:
+    0 1px 2px rgba(12, 16, 22, 0.06), 0 18px 42px rgba(12, 16, 22, 0.1);
 }