@class-kit/react 0.1.0 → 0.1.2

package/dist/styles/themes/creative-purple.css

@@ -0,0 +1,376 @@
+.cc-theme-creative-purple,
+[data-cc-theme="creative-purple"] {
+  --cc-color-text: #20142e;
+  --cc-color-muted: #8c70b2;
+  --cc-color-border: #e9dfff;
+  --cc-color-border-hover: #d3bff5;
+  --cc-color-border-focus: #722ed1;
+  --cc-color-divider: #f7f2fe;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #f7f2fe;
+  --cc-color-danger: #f53f3f;
+  --cc-color-success: #00b42a;
+  --cc-color-warning: #ff7d00;
+  --cc-color-info: #007aff;
+  --cc-color-accent: #722ed1;
+  --cc-color-accent-hover: #9254de;
+  --cc-color-accent-contrast: #ffffff;
+  --cc-shadow-focus: 0 0 0 3px rgba(114, 46, 209, 0.18);
+  --cc-shadow-floating: 0 22px 64px rgba(114, 46, 209, 0.2);
+  --cc-form-color-text: #3a2550;
+  --cc-form-color-muted: #a48aca;
+  --cc-form-color-border: #e9dfff;
+  --cc-form-color-border-hover: #d3bff5;
+  --cc-form-color-border-focus: #722ed1;
+  --cc-form-color-divider: #f7f2fe;
+  --cc-form-color-surface: #ffffff;
+  --cc-form-color-surface-soft: #f7f2fe;
+  --cc-form-color-accent: #722ed1;
+  --cc-form-color-accent-hover: #9254de;
+  --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: #decef7;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #f7f2fe;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-form-control-readonly-background: #f7f2fe;
+  --cc-form-control-disabled-background: #f7f2fe;
+  --cc-form-shadow-focus: var(--cc-shadow-focus);
+  --cc-form-shadow-floating: var(--cc-shadow-floating);
+  --cc-form-disabled-background: #f7f2fe;
+  --cc-form-disabled-border-color: #e9dfff;
+  --cc-form-disabled-color: #b199d2;
+  --cc-form-disabled-opacity: 0.58;
+  --cc-form-readonly-background: #f7f2fe;
+  --cc-form-readonly-border-color: #e9dfff;
+  --cc-form-readonly-color: #3a2550;
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #e9dfff;
+  --cc-select-menu-text-color: #20142e;
+  --cc-select-menu-shadow: var(--cc-shadow-floating);
+  --cc-select-option-hover-color: #f7f2fe;
+  --cc-select-option-selected-color: rgba(114, 46, 209, 0.12);
+  --cc-select-option-selected-text-color: #722ed1;
+  --cc-select-check-color: #722ed1;
+  --cc-select-placeholder-color: #d3bff5;
+  --cc-virtual-select-search-background: #ffffff;
+  --cc-virtual-select-empty-color: #8c70b2;
+  --cc-choice-background: #ffffff;
+  --cc-choice-border-color: #e9dfff;
+  --cc-choice-border-hover-color: #d3bff5;
+  --cc-choice-checked-background: #722ed1;
+  --cc-choice-checked-border-color: #722ed1;
+  --cc-choice-check-color: #ffffff;
+  --cc-switch-track-background: #e9dfff;
+  --cc-switch-track-checked-background: #722ed1;
+  --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: #722ed1;
+  --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
+  --cc-date-picker-day-hover-background: #f7f2fe;
+  --cc-date-picker-day-selected-background: #722ed1;
+  --cc-date-picker-day-selected-color: #ffffff;
+  --cc-date-picker-day-today-ring: inset 0 0 0 1px #722ed1;
+  --cc-date-range-summary-active-border-color: #722ed1;
+  --cc-date-range-day-in-range-background: rgba(114, 46, 209, 0.12);
+  --cc-calendar-day-hover-background: #f7f2fe;
+  --cc-calendar-day-selected-background: #722ed1;
+  --cc-calendar-day-selected-color: #ffffff;
+  --cc-calendar-day-today-ring: inset 0 0 0 1px #722ed1;
+  --cc-progress-fill-color: #722ed1;
+  --cc-progress-thumb-shadow: 0 0 0 4px rgba(114, 46, 209, 0.16);
+  --cc-timeline-active-color: #722ed1;
+  --cc-picker-active-color: #722ed1;
+  --cc-picker-indicator-border-color: #722ed1;
+  --cc-backtop-background: #722ed1;
+  --cc-backtop-background-hover: #9254de;
+  --cc-backtop-color: #ffffff;
+  --cc-backtop-shadow: 0 10px 24px rgba(114, 46, 209, 0.24);
+  --cc-backtop-shadow-hover: 0 14px 30px rgba(114, 46, 209, 0.3);
+  --cc-marquee-focus-outline-color: #722ed1;
+  --cc-typewriter-loading-color: #722ed1;
+  --cc-typewriter-cursor-color: #722ed1;
+  --cc-lazy-image-placeholder-color: #8c70b2;
+  --cc-lazy-image-skeleton-color: #8c70b2;
+  --cc-lazy-image-skeleton-highlight-color: rgba(114, 46, 209, 0.16);
+  --cc-lazy-image-error-color: #f53f3f;
+  --cc-tilt-card-background: #ffffff;
+  --cc-tilt-card-border-color: #e9dfff;
+  --cc-tilt-card-color: #20142e;
+  --cc-tilt-card-shadow: 0 18px 42px rgba(114, 46, 209, 0.14);
+  --cc-tilt-card-shadow-active: 0 24px 64px rgba(114, 46, 209, 0.22);
+  --cc-canvas-editor-background: #f7f2fe;
+  --cc-canvas-editor-card-background: #ffffff;
+  --cc-canvas-editor-card-border-color: #e9dfff;
+  --cc-canvas-editor-card-shadow: 0 10px 24px rgba(32, 20, 46, 0.08);
+  --cc-canvas-editor-line-color: #722ed1;
+  --cc-canvas-editor-muted-color: #8c70b2;
+  --cc-canvas-editor-text-color: #20142e;
+  --cc-canvas-editor-grid-color: rgba(114, 46, 209, 0.1);
+  --cc-canvas-editor-selection-ring: 0 0 0 2px rgba(114, 46, 209, 0.14);
+  --cc-canvas-editor-control-active-background: #722ed1;
+  --cc-canvas-editor-control-active-border-color: #722ed1;
+  --cc-canvas-editor-control-active-color: #ffffff;
+  --cc-canvas-editor-control-hover-border-color: #722ed1;
+  --cc-canvas-editor-document-accent-color: rgba(114, 46, 209, 0.08);
+  --cc-canvas-editor-node-border-color: rgba(114, 46, 209, 0.14);
+  --cc-canvas-editor-node-editing-border-color: rgba(114, 46, 209, 0.42);
+  --cc-canvas-editor-input-focus-shadow: inset 0 0 0 1px
+    rgba(114, 46, 209, 0.22);
+  --cc-canvas-editor-mind-glow: radial-gradient(
+    circle at 50% 45%,
+    rgba(114, 46, 209, 0.08),
+    transparent 44%
+  );
+  --cc-canvas-editor-card-selected-border-color: #722ed1;
+  --cc-canvas-editor-card-selected-shadow: 0 12px 30px rgba(114, 46, 209, 0.12);
+  --cc-drag-drop-slot-dragging-background: rgba(114, 46, 209, 0.08);
+  --cc-drag-drop-slot-dragging-border-color: rgba(114, 46, 209, 0.38);
+  --cc-drag-drop-slot-over-background: rgba(114, 46, 209, 0.1);
+  --cc-drag-drop-slot-over-border-color: rgba(114, 46, 209, 0.46);
+  --cc-drag-drop-preview-shadow: 0 18px 42px rgba(114, 46, 209, 0.26);
+  --cc-button-shadow: 0 1px 2px rgba(114, 46, 209, 0.08);
+  --cc-button-primary-background: #722ed1;
+  --cc-button-primary-background-hover: #9254de;
+  --cc-button-primary-color: #ffffff;
+  --cc-button-primary-shadow-hover: 0 8px 20px rgba(114, 46, 209, 0.22);
+  --cc-button-secondary-background: #ffffff;
+  --cc-button-secondary-border-color: #e9dfff;
+  --cc-button-secondary-color: #20142e;
+  --cc-button-ghost-color: #722ed1;
+  --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: #e9dfff;
+  --cc-tabs-tab-active-color: #722ed1;
+  --cc-modal-overlay-background: rgba(32, 20, 46, 0.5);
+  --cc-modal-background: #ffffff;
+  --cc-modal-color: #20142e;
+  --cc-modal-shadow: var(--cc-shadow-floating);
+  --cc-modal-header-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #f7f2fe 100%
+  );
+  --cc-modal-header-border-color: #f7f2fe;
+  --cc-modal-header-color: #20142e;
+  --cc-popup-overlay-background: rgba(32, 20, 46, 0.5);
+  --cc-popup-background: #ffffff;
+  --cc-popup-color: #20142e;
+  --cc-popup-shadow: var(--cc-shadow-floating);
+  --cc-popup-header-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #f7f2fe 100%
+  );
+  --cc-popup-header-border-color: #f7f2fe;
+  --cc-popup-header-color: #20142e;
+  --cc-tooltip-background: #20142e;
+  --cc-tooltip-color: #ffffff;
+  --cc-tooltip-shadow: 0 10px 24px rgba(114, 46, 209, 0.2);
+  --cc-toast-background: #ffffff;
+  --cc-toast-border-color: #e9dfff;
+  --cc-toast-accent-color: #722ed1;
+  --cc-toast-shadow: 0 12px 30px rgba(114, 46, 209, 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: #3a2550;
+  --cc-color-muted: #a48aca;
+  --cc-select-menu-text-color: #3a2550;
+  --cc-select-option-selected-text-color: #3a2550;
+  --cc-select-placeholder-color: #decef7;
+  --cc-virtual-select-empty-color: #a48aca;
+  --cc-lazy-image-placeholder-color: #a48aca;
+  --cc-lazy-image-skeleton-color: #a48aca;
+  --cc-tilt-card-color: #3a2550;
+  --cc-canvas-editor-muted-color: #a48aca;
+  --cc-canvas-editor-text-color: #3a2550;
+  --cc-button-secondary-color: #3a2550;
+  --cc-modal-color: #3a2550;
+  --cc-modal-header-color: #3a2550;
+  --cc-popup-color: #3a2550;
+  --cc-popup-header-color: #3a2550;
+
+  /* Ten-pass enterprise polish: saturated creative purple balanced with crisp neutrals. */
+  --cc-color-text: #21112f;
+  --cc-color-muted: #624b7c;
+  --cc-color-border: #dac8f4;
+  --cc-color-border-hover: #b89ae8;
+  --cc-color-border-focus: #6d28d9;
+  --cc-color-divider: #eee5fb;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #faf7ff;
+  --cc-color-accent: #6d28d9;
+  --cc-color-accent-hover: #5720b7;
+  --cc-form-color-text: #21112f;
+  --cc-form-color-muted: #624b7c;
+  --cc-form-color-border: #dac8f4;
+  --cc-form-color-border-hover: #b89ae8;
+  --cc-form-color-border-focus: #6d28d9;
+  --cc-form-placeholder-color: #8c76aa;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #fbf8ff;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-shadow-focus: 0 0 0 3px rgba(109, 40, 217, 0.16);
+  --cc-shadow-floating:
+    0 22px 56px rgba(61, 29, 103, 0.14), 0 1px 0 rgba(109, 40, 217, 0.07);
+  --cc-button-primary-background: linear-gradient(
+    135deg,
+    #6d28d9 0%,
+    #8b5cf6 100%
+  );
+  --cc-button-primary-background-hover: linear-gradient(
+    135deg,
+    #5720b7 0%,
+    #7444dc 100%
+  );
+  --cc-button-secondary-background: #ffffff;
+  --cc-button-secondary-border-color: #d2bff0;
+  --cc-button-secondary-color: #3d1d67;
+  --cc-button-ghost-color: #6d28d9;
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #d2bff0;
+  --cc-select-menu-text-color: #21112f;
+  --cc-select-option-hover-color: #f4edff;
+  --cc-select-option-selected-color: rgba(109, 40, 217, 0.13);
+  --cc-select-option-selected-text-color: #4b1c9b;
+  --cc-select-check-color: #6d28d9;
+  --cc-switch-track-background: #ded0f4;
+  --cc-switch-track-checked-background: #6d28d9;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #6d28d9;
+  --cc-tabs-tab-active-color: #6d28d9;
+  --cc-tabs-list-border-color: #dac8f4;
+  --cc-modal-overlay-background: rgba(33, 17, 47, 0.52);
+  --cc-modal-background: #ffffff;
+  --cc-modal-color: #21112f;
+  --cc-modal-header-background: #ffffff;
+  --cc-modal-header-border-color: #eee5fb;
+  --cc-modal-header-color: #21112f;
+  --cc-popup-background: #ffffff;
+  --cc-popup-color: #21112f;
+  --cc-popup-header-background: #ffffff;
+  --cc-popup-header-border-color: #eee5fb;
+  --cc-popup-header-color: #21112f;
+  --cc-toast-background: #ffffff;
+  --cc-toast-border-color: #dac8f4;
+  --cc-toast-accent-color: #6d28d9;
+  --cc-menu-background: transparent;
+  --cc-menu-text-color: #43245e;
+  --cc-menu-muted-color: #715b8e;
+  --cc-menu-item-color: #43245e;
+  --cc-menu-item-muted-color: #715b8e;
+  --cc-menu-item-hover-background: #f4edff;
+  --cc-menu-item-hover-color: #4b1c9b;
+  --cc-menu-item-active-background: rgba(109, 40, 217, 0.13);
+  --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: #624b7c;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: #ffffff;
+  --cc-code-preview-panel-background: #faf7ff;
+  --cc-code-preview-border-color: #dac8f4;
+  --cc-code-preview-bar-background: #ffffff;
+  --cc-code-preview-color: #21112f;
+  --cc-code-preview-text-color: #21112f;
+  --cc-code-preview-muted-color: #624b7c;
+  --cc-code-preview-accent-color: #6d28d9;
+  --cc-code-preview-line-color: rgba(109, 40, 217, 0.44);
+
+  /* Five-round premium tuning: saturated purple with enterprise-grade neutrals. */
+  --cc-color-text: #1f102e;
+  --cc-color-muted: #584171;
+  --cc-color-border: #d7c4f0;
+  --cc-color-border-hover: #aa89dc;
+  --cc-color-border-focus: #6624cb;
+  --cc-color-divider: #ece2fa;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #faf7ff;
+  --cc-color-accent: #6624cb;
+  --cc-color-accent-hover: #501aa8;
+  --cc-shadow-focus: 0 0 0 3px rgba(102, 36, 203, 0.16);
+  --cc-shadow-floating:
+    0 22px 56px rgba(54, 24, 94, 0.15), 0 1px 0 rgba(102, 36, 203, 0.07);
+  --cc-form-color-text: #1f102e;
+  --cc-form-color-muted: #584171;
+  --cc-form-color-border: #d7c4f0;
+  --cc-form-color-border-hover: #aa89dc;
+  --cc-form-color-border-focus: #6624cb;
+  --cc-form-placeholder-color: #8269a2;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #fbf8ff;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #ceb9ec;
+  --cc-select-menu-text-color: #1f102e;
+  --cc-select-option-hover-color: #f3edff;
+  --cc-select-option-selected-color: rgba(102, 36, 203, 0.13);
+  --cc-select-option-selected-text-color: #43188c;
+  --cc-select-check-color: #6624cb;
+  --cc-button-primary-background: linear-gradient(
+    135deg,
+    #6624cb 0%,
+    #8b5cf6 100%
+  );
+  --cc-button-primary-background-hover: linear-gradient(
+    135deg,
+    #501aa8 0%,
+    #7344d8 100%
+  );
+  --cc-button-secondary-border-color: #ceb9ec;
+  --cc-button-secondary-color: #351a58;
+  --cc-button-ghost-color: #6624cb;
+  --cc-switch-track-background: #dbcdf0;
+  --cc-switch-track-checked-background: #6624cb;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #6624cb;
+  --cc-tabs-tab-active-color: #6624cb;
+  --cc-tabs-list-border-color: #d7c4f0;
+  --cc-modal-overlay-background: rgba(31, 16, 46, 0.54);
+  --cc-modal-color: #1f102e;
+  --cc-modal-header-color: #1f102e;
+  --cc-popup-overlay-background: rgba(31, 16, 46, 0.54);
+  --cc-popup-color: #1f102e;
+  --cc-popup-header-color: #1f102e;
+  --cc-menu-text-color: #3d2457;
+  --cc-menu-muted-color: #6b5587;
+  --cc-menu-item-color: #3d2457;
+  --cc-menu-item-muted-color: #6b5587;
+  --cc-menu-item-hover-background: #f3edff;
+  --cc-menu-item-hover-color: #43188c;
+  --cc-menu-item-active-background: rgba(102, 36, 203, 0.12);
+  --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: #584171;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: #ffffff;
+  --cc-code-preview-panel-background: #faf7ff;
+  --cc-code-preview-border-color: #d7c4f0;
+  --cc-code-preview-bar-background: #ffffff;
+  --cc-code-preview-color: #1f102e;
+  --cc-code-preview-text-color: #1f102e;
+  --cc-code-preview-muted-color: #584171;
+  --cc-code-preview-accent-color: #6624cb;
+  --cc-code-preview-line-color: rgba(102, 36, 203, 0.43);
+}