@class-kit/react 0.1.0 → 0.1.2

package/dist/styles/themes/soft-pink.css

@@ -0,0 +1,376 @@
+.cc-theme-soft-pink,
+[data-cc-theme="soft-pink"] {
+  --cc-color-text: #2e2027;
+  --cc-color-muted: #a88498;
+  --cc-color-border: #f4e6ed;
+  --cc-color-border-hover: #e2c8d7;
+  --cc-color-border-focus: #d64d8c;
+  --cc-color-divider: #fcf5f8;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #fcf5f8;
+  --cc-color-danger: #f53f3f;
+  --cc-color-success: #00b42a;
+  --cc-color-warning: #ff7d00;
+  --cc-color-info: #007aff;
+  --cc-color-accent: #d64d8c;
+  --cc-color-accent-hover: #e879ad;
+  --cc-color-accent-contrast: #ffffff;
+  --cc-shadow-focus: 0 0 0 3px rgba(214, 77, 140, 0.18);
+  --cc-shadow-floating: 0 22px 64px rgba(214, 77, 140, 0.2);
+  --cc-form-color-text: #46323b;
+  --cc-form-color-muted: #b695a7;
+  --cc-form-color-border: #f4e6ed;
+  --cc-form-color-border-hover: #e2c8d7;
+  --cc-form-color-border-focus: #d64d8c;
+  --cc-form-color-divider: #fcf5f8;
+  --cc-form-color-surface: #ffffff;
+  --cc-form-color-surface-soft: #fcf5f8;
+  --cc-form-color-accent: #d64d8c;
+  --cc-form-color-accent-hover: #e879ad;
+  --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: #ead3df;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #fcf5f8;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-form-control-readonly-background: #fcf5f8;
+  --cc-form-control-disabled-background: #fcf5f8;
+  --cc-form-shadow-focus: var(--cc-shadow-focus);
+  --cc-form-shadow-floating: var(--cc-shadow-floating);
+  --cc-form-disabled-background: #fcf5f8;
+  --cc-form-disabled-border-color: #f4e6ed;
+  --cc-form-disabled-color: #c0a3b2;
+  --cc-form-disabled-opacity: 0.58;
+  --cc-form-readonly-background: #fcf5f8;
+  --cc-form-readonly-border-color: #f4e6ed;
+  --cc-form-readonly-color: #46323b;
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #f4e6ed;
+  --cc-select-menu-text-color: #2e2027;
+  --cc-select-menu-shadow: var(--cc-shadow-floating);
+  --cc-select-option-hover-color: #fcf5f8;
+  --cc-select-option-selected-color: rgba(214, 77, 140, 0.12);
+  --cc-select-option-selected-text-color: #d64d8c;
+  --cc-select-check-color: #d64d8c;
+  --cc-select-placeholder-color: #e2c8d7;
+  --cc-virtual-select-search-background: #ffffff;
+  --cc-virtual-select-empty-color: #a88498;
+  --cc-choice-background: #ffffff;
+  --cc-choice-border-color: #f4e6ed;
+  --cc-choice-border-hover-color: #e2c8d7;
+  --cc-choice-checked-background: #d64d8c;
+  --cc-choice-checked-border-color: #d64d8c;
+  --cc-choice-check-color: #ffffff;
+  --cc-switch-track-background: #f4e6ed;
+  --cc-switch-track-checked-background: #d64d8c;
+  --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: #d64d8c;
+  --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
+  --cc-date-picker-day-hover-background: #fcf5f8;
+  --cc-date-picker-day-selected-background: #d64d8c;
+  --cc-date-picker-day-selected-color: #ffffff;
+  --cc-date-picker-day-today-ring: inset 0 0 0 1px #d64d8c;
+  --cc-date-range-summary-active-border-color: #d64d8c;
+  --cc-date-range-day-in-range-background: rgba(214, 77, 140, 0.12);
+  --cc-calendar-day-hover-background: #fcf5f8;
+  --cc-calendar-day-selected-background: #d64d8c;
+  --cc-calendar-day-selected-color: #ffffff;
+  --cc-calendar-day-today-ring: inset 0 0 0 1px #d64d8c;
+  --cc-progress-fill-color: #d64d8c;
+  --cc-progress-thumb-shadow: 0 0 0 4px rgba(214, 77, 140, 0.16);
+  --cc-timeline-active-color: #d64d8c;
+  --cc-picker-active-color: #d64d8c;
+  --cc-picker-indicator-border-color: #d64d8c;
+  --cc-backtop-background: #d64d8c;
+  --cc-backtop-background-hover: #e879ad;
+  --cc-backtop-color: #ffffff;
+  --cc-backtop-shadow: 0 10px 24px rgba(214, 77, 140, 0.24);
+  --cc-backtop-shadow-hover: 0 14px 30px rgba(214, 77, 140, 0.3);
+  --cc-marquee-focus-outline-color: #d64d8c;
+  --cc-typewriter-loading-color: #d64d8c;
+  --cc-typewriter-cursor-color: #d64d8c;
+  --cc-lazy-image-placeholder-color: #a88498;
+  --cc-lazy-image-skeleton-color: #a88498;
+  --cc-lazy-image-skeleton-highlight-color: rgba(214, 77, 140, 0.16);
+  --cc-lazy-image-error-color: #f53f3f;
+  --cc-tilt-card-background: #ffffff;
+  --cc-tilt-card-border-color: #f4e6ed;
+  --cc-tilt-card-color: #2e2027;
+  --cc-tilt-card-shadow: 0 18px 42px rgba(214, 77, 140, 0.14);
+  --cc-tilt-card-shadow-active: 0 24px 64px rgba(214, 77, 140, 0.22);
+  --cc-canvas-editor-background: #fcf5f8;
+  --cc-canvas-editor-card-background: #ffffff;
+  --cc-canvas-editor-card-border-color: #f4e6ed;
+  --cc-canvas-editor-card-shadow: 0 10px 24px rgba(46, 32, 39, 0.08);
+  --cc-canvas-editor-line-color: #d64d8c;
+  --cc-canvas-editor-muted-color: #a88498;
+  --cc-canvas-editor-text-color: #2e2027;
+  --cc-canvas-editor-grid-color: rgba(214, 77, 140, 0.1);
+  --cc-canvas-editor-selection-ring: 0 0 0 2px rgba(214, 77, 140, 0.14);
+  --cc-canvas-editor-control-active-background: #d64d8c;
+  --cc-canvas-editor-control-active-border-color: #d64d8c;
+  --cc-canvas-editor-control-active-color: #ffffff;
+  --cc-canvas-editor-control-hover-border-color: #d64d8c;
+  --cc-canvas-editor-document-accent-color: rgba(214, 77, 140, 0.08);
+  --cc-canvas-editor-node-border-color: rgba(214, 77, 140, 0.14);
+  --cc-canvas-editor-node-editing-border-color: rgba(214, 77, 140, 0.42);
+  --cc-canvas-editor-input-focus-shadow: inset 0 0 0 1px
+    rgba(214, 77, 140, 0.22);
+  --cc-canvas-editor-mind-glow: radial-gradient(
+    circle at 50% 45%,
+    rgba(214, 77, 140, 0.08),
+    transparent 44%
+  );
+  --cc-canvas-editor-card-selected-border-color: #d64d8c;
+  --cc-canvas-editor-card-selected-shadow: 0 12px 30px rgba(214, 77, 140, 0.12);
+  --cc-drag-drop-slot-dragging-background: rgba(214, 77, 140, 0.08);
+  --cc-drag-drop-slot-dragging-border-color: rgba(214, 77, 140, 0.38);
+  --cc-drag-drop-slot-over-background: rgba(214, 77, 140, 0.1);
+  --cc-drag-drop-slot-over-border-color: rgba(214, 77, 140, 0.46);
+  --cc-drag-drop-preview-shadow: 0 18px 42px rgba(214, 77, 140, 0.26);
+  --cc-button-shadow: 0 1px 2px rgba(214, 77, 140, 0.08);
+  --cc-button-primary-background: #d64d8c;
+  --cc-button-primary-background-hover: #e879ad;
+  --cc-button-primary-color: #ffffff;
+  --cc-button-primary-shadow-hover: 0 8px 20px rgba(214, 77, 140, 0.22);
+  --cc-button-secondary-background: #ffffff;
+  --cc-button-secondary-border-color: #f4e6ed;
+  --cc-button-secondary-color: #2e2027;
+  --cc-button-ghost-color: #d64d8c;
+  --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: #f4e6ed;
+  --cc-tabs-tab-active-color: #d64d8c;
+  --cc-modal-overlay-background: rgba(46, 32, 39, 0.48);
+  --cc-modal-background: #ffffff;
+  --cc-modal-color: #2e2027;
+  --cc-modal-shadow: var(--cc-shadow-floating);
+  --cc-modal-header-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #fcf5f8 100%
+  );
+  --cc-modal-header-border-color: #fcf5f8;
+  --cc-modal-header-color: #2e2027;
+  --cc-popup-overlay-background: rgba(46, 32, 39, 0.48);
+  --cc-popup-background: #ffffff;
+  --cc-popup-color: #2e2027;
+  --cc-popup-shadow: var(--cc-shadow-floating);
+  --cc-popup-header-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #fcf5f8 100%
+  );
+  --cc-popup-header-border-color: #fcf5f8;
+  --cc-popup-header-color: #2e2027;
+  --cc-tooltip-background: #2e2027;
+  --cc-tooltip-color: #ffffff;
+  --cc-tooltip-shadow: 0 10px 24px rgba(214, 77, 140, 0.2);
+  --cc-toast-background: #ffffff;
+  --cc-toast-border-color: #f4e6ed;
+  --cc-toast-accent-color: #d64d8c;
+  --cc-toast-shadow: 0 12px 30px rgba(214, 77, 140, 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: #46323b;
+  --cc-color-muted: #b695a7;
+  --cc-select-menu-text-color: #46323b;
+  --cc-select-option-selected-text-color: #46323b;
+  --cc-select-placeholder-color: #ead3df;
+  --cc-virtual-select-empty-color: #b695a7;
+  --cc-lazy-image-placeholder-color: #b695a7;
+  --cc-lazy-image-skeleton-color: #b695a7;
+  --cc-tilt-card-color: #46323b;
+  --cc-canvas-editor-muted-color: #b695a7;
+  --cc-canvas-editor-text-color: #46323b;
+  --cc-button-secondary-color: #46323b;
+  --cc-modal-color: #46323b;
+  --cc-modal-header-color: #46323b;
+  --cc-popup-color: #46323b;
+  --cc-popup-header-color: #46323b;
+
+  /* Ten-pass enterprise polish: warm editorial pink with stronger readable neutrals. */
+  --cc-color-text: #26141d;
+  --cc-color-muted: #6f5362;
+  --cc-color-border: #e7cdda;
+  --cc-color-border-hover: #c99aaa;
+  --cc-color-border-focus: #c93678;
+  --cc-color-divider: #f3e4eb;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #fff7fa;
+  --cc-color-accent: #c93678;
+  --cc-color-accent-hover: #aa245f;
+  --cc-form-color-text: #26141d;
+  --cc-form-color-muted: #6f5362;
+  --cc-form-color-border: #e7cdda;
+  --cc-form-color-border-hover: #c99aaa;
+  --cc-form-color-border-focus: #c93678;
+  --cc-form-placeholder-color: #9b7385;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #fff8fb;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-shadow-focus: 0 0 0 3px rgba(201, 54, 120, 0.16);
+  --cc-shadow-floating:
+    0 22px 54px rgba(94, 35, 59, 0.13), 0 1px 0 rgba(201, 54, 120, 0.06);
+  --cc-button-primary-background: linear-gradient(
+    135deg,
+    #c93678 0%,
+    #e15a96 100%
+  );
+  --cc-button-primary-background-hover: linear-gradient(
+    135deg,
+    #aa245f 0%,
+    #cf4381 100%
+  );
+  --cc-button-secondary-background: #ffffff;
+  --cc-button-secondary-border-color: #dfbfd0;
+  --cc-button-secondary-color: #4a2538;
+  --cc-button-ghost-color: #c93678;
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #dfbfd0;
+  --cc-select-menu-text-color: #26141d;
+  --cc-select-option-hover-color: #fff0f6;
+  --cc-select-option-selected-color: rgba(201, 54, 120, 0.13);
+  --cc-select-option-selected-text-color: #8c1e50;
+  --cc-select-check-color: #c93678;
+  --cc-switch-track-background: #ead2de;
+  --cc-switch-track-checked-background: #c93678;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #c93678;
+  --cc-tabs-tab-active-color: #c93678;
+  --cc-tabs-list-border-color: #e7cdda;
+  --cc-modal-overlay-background: rgba(38, 20, 29, 0.52);
+  --cc-modal-background: #ffffff;
+  --cc-modal-color: #26141d;
+  --cc-modal-header-background: #ffffff;
+  --cc-modal-header-border-color: #f3e4eb;
+  --cc-modal-header-color: #26141d;
+  --cc-popup-background: #ffffff;
+  --cc-popup-color: #26141d;
+  --cc-popup-header-background: #ffffff;
+  --cc-popup-header-border-color: #f3e4eb;
+  --cc-popup-header-color: #26141d;
+  --cc-toast-background: #ffffff;
+  --cc-toast-border-color: #e7cdda;
+  --cc-toast-accent-color: #c93678;
+  --cc-menu-background: transparent;
+  --cc-menu-text-color: #513243;
+  --cc-menu-muted-color: #806173;
+  --cc-menu-item-color: #513243;
+  --cc-menu-item-muted-color: #806173;
+  --cc-menu-item-hover-background: #fff0f6;
+  --cc-menu-item-hover-color: #8c1e50;
+  --cc-menu-item-active-background: rgba(201, 54, 120, 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: #6f5362;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: #ffffff;
+  --cc-code-preview-panel-background: #fff7fa;
+  --cc-code-preview-border-color: #e8cfdb;
+  --cc-code-preview-bar-background: #ffffff;
+  --cc-code-preview-color: #26141d;
+  --cc-code-preview-text-color: #26141d;
+  --cc-code-preview-muted-color: #735567;
+  --cc-code-preview-accent-color: #c93678;
+  --cc-code-preview-line-color: rgba(201, 54, 120, 0.42);
+
+  /* Five-round premium tuning: soft rose, editorial contrast, restrained sweetness. */
+  --cc-color-text: #24131c;
+  --cc-color-muted: #624858;
+  --cc-color-border: #e4c8d5;
+  --cc-color-border-hover: #bd8da3;
+  --cc-color-border-focus: #bd2f71;
+  --cc-color-divider: #f1e1e8;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #fff7fa;
+  --cc-color-accent: #bd2f71;
+  --cc-color-accent-hover: #9e225b;
+  --cc-shadow-focus: 0 0 0 3px rgba(189, 47, 113, 0.16);
+  --cc-shadow-floating:
+    0 22px 54px rgba(87, 32, 55, 0.13), 0 1px 0 rgba(189, 47, 113, 0.06);
+  --cc-form-color-text: #24131c;
+  --cc-form-color-muted: #624858;
+  --cc-form-color-border: #e4c8d5;
+  --cc-form-color-border-hover: #bd8da3;
+  --cc-form-color-border-focus: #bd2f71;
+  --cc-form-placeholder-color: #907083;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #fff8fb;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #ddbdcc;
+  --cc-select-menu-text-color: #24131c;
+  --cc-select-option-hover-color: #fff0f6;
+  --cc-select-option-selected-color: rgba(189, 47, 113, 0.13);
+  --cc-select-option-selected-text-color: #821a4b;
+  --cc-select-check-color: #bd2f71;
+  --cc-button-primary-background: linear-gradient(
+    135deg,
+    #bd2f71 0%,
+    #e15a96 100%
+  );
+  --cc-button-primary-background-hover: linear-gradient(
+    135deg,
+    #9e225b 0%,
+    #cb3e80 100%
+  );
+  --cc-button-secondary-border-color: #dab8c9;
+  --cc-button-secondary-color: #432236;
+  --cc-button-ghost-color: #bd2f71;
+  --cc-switch-track-background: #e8cfdb;
+  --cc-switch-track-checked-background: #bd2f71;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #bd2f71;
+  --cc-tabs-tab-active-color: #bd2f71;
+  --cc-tabs-list-border-color: #e4c8d5;
+  --cc-modal-overlay-background: rgba(36, 19, 28, 0.54);
+  --cc-modal-color: #24131c;
+  --cc-modal-header-color: #24131c;
+  --cc-popup-overlay-background: rgba(36, 19, 28, 0.54);
+  --cc-popup-color: #24131c;
+  --cc-popup-header-color: #24131c;
+  --cc-menu-text-color: #4b2d3e;
+  --cc-menu-muted-color: #76586a;
+  --cc-menu-item-color: #4b2d3e;
+  --cc-menu-item-muted-color: #76586a;
+  --cc-menu-item-hover-background: #fff0f6;
+  --cc-menu-item-hover-color: #821a4b;
+  --cc-menu-item-active-background: rgba(189, 47, 113, 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: #624858;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: #ffffff;
+  --cc-code-preview-panel-background: #fff7fa;
+  --cc-code-preview-border-color: #e5c9d6;
+  --cc-code-preview-bar-background: #ffffff;
+  --cc-code-preview-color: #24131c;
+  --cc-code-preview-text-color: #24131c;
+  --cc-code-preview-muted-color: #6b4d5f;
+  --cc-code-preview-accent-color: #bd2f71;
+  --cc-code-preview-line-color: rgba(189, 47, 113, 0.42);
+}