@class-kit/react 0.1.0 → 0.1.2

package/dist/styles/themes/business-blue.css

@@ -0,0 +1,375 @@
+.cc-theme-business-blue,
+[data-cc-theme="business-blue"] {
+  --cc-color-text: #1d2129;
+  --cc-color-muted: #8c93a2;
+  --cc-color-border: #e4e7ed;
+  --cc-color-border-hover: #c0c6d0;
+  --cc-color-border-focus: #165dff;
+  --cc-color-divider: #f5f7fa;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #f5f7fa;
+  --cc-color-danger: #f53f3f;
+  --cc-color-success: #00b42a;
+  --cc-color-warning: #ff7d00;
+  --cc-color-info: #007aff;
+  --cc-color-accent: #165dff;
+  --cc-color-accent-hover: #4080ff;
+  --cc-color-accent-contrast: #ffffff;
+  --cc-shadow-focus: 0 0 0 3px rgba(22, 93, 255, 0.18);
+  --cc-shadow-floating: 0 22px 64px rgba(22, 93, 255, 0.2);
+  --cc-form-color-text: #303746;
+  --cc-form-color-muted: #9aa5b7;
+  --cc-form-color-border: #e4e7ed;
+  --cc-form-color-border-hover: #c0c6d0;
+  --cc-form-color-border-focus: #165dff;
+  --cc-form-color-divider: #f5f7fa;
+  --cc-form-color-surface: #ffffff;
+  --cc-form-color-surface-soft: #f5f7fa;
+  --cc-form-color-accent: #165dff;
+  --cc-form-color-accent-hover: #4080ff;
+  --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: #cfd5df;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #f5f7fa;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-form-control-readonly-background: #f5f7fa;
+  --cc-form-control-disabled-background: #f5f7fa;
+  --cc-form-shadow-focus: var(--cc-shadow-focus);
+  --cc-form-shadow-floating: var(--cc-shadow-floating);
+  --cc-form-disabled-background: #f5f7fa;
+  --cc-form-disabled-border-color: #e4e7ed;
+  --cc-form-disabled-color: #a8b0bf;
+  --cc-form-disabled-opacity: 0.58;
+  --cc-form-readonly-background: #f5f7fa;
+  --cc-form-readonly-border-color: #e4e7ed;
+  --cc-form-readonly-color: #303746;
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #e4e7ed;
+  --cc-select-menu-text-color: #1d2129;
+  --cc-select-menu-shadow: var(--cc-shadow-floating);
+  --cc-select-option-hover-color: #f5f7fa;
+  --cc-select-option-selected-color: rgba(22, 93, 255, 0.12);
+  --cc-select-option-selected-text-color: #165dff;
+  --cc-select-check-color: #165dff;
+  --cc-select-placeholder-color: #c0c6d0;
+  --cc-virtual-select-search-background: #ffffff;
+  --cc-virtual-select-empty-color: #8c93a2;
+  --cc-choice-background: #ffffff;
+  --cc-choice-border-color: #e4e7ed;
+  --cc-choice-border-hover-color: #c0c6d0;
+  --cc-choice-checked-background: #165dff;
+  --cc-choice-checked-border-color: #165dff;
+  --cc-choice-check-color: #ffffff;
+  --cc-switch-track-background: #e4e7ed;
+  --cc-switch-track-checked-background: #165dff;
+  --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: #165dff;
+  --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
+  --cc-date-picker-day-hover-background: #f5f7fa;
+  --cc-date-picker-day-selected-background: #165dff;
+  --cc-date-picker-day-selected-color: #ffffff;
+  --cc-date-picker-day-today-ring: inset 0 0 0 1px #165dff;
+  --cc-date-range-summary-active-border-color: #165dff;
+  --cc-date-range-day-in-range-background: rgba(22, 93, 255, 0.12);
+  --cc-calendar-day-hover-background: #f5f7fa;
+  --cc-calendar-day-selected-background: #165dff;
+  --cc-calendar-day-selected-color: #ffffff;
+  --cc-calendar-day-today-ring: inset 0 0 0 1px #165dff;
+  --cc-progress-fill-color: #165dff;
+  --cc-progress-thumb-shadow: 0 0 0 4px rgba(22, 93, 255, 0.16);
+  --cc-timeline-active-color: #165dff;
+  --cc-picker-active-color: #165dff;
+  --cc-picker-indicator-border-color: #165dff;
+  --cc-backtop-background: #165dff;
+  --cc-backtop-background-hover: #4080ff;
+  --cc-backtop-color: #ffffff;
+  --cc-backtop-shadow: 0 10px 24px rgba(22, 93, 255, 0.24);
+  --cc-backtop-shadow-hover: 0 14px 30px rgba(22, 93, 255, 0.3);
+  --cc-marquee-focus-outline-color: #165dff;
+  --cc-typewriter-loading-color: #165dff;
+  --cc-typewriter-cursor-color: #165dff;
+  --cc-lazy-image-placeholder-color: #8c93a2;
+  --cc-lazy-image-skeleton-color: #8c93a2;
+  --cc-lazy-image-skeleton-highlight-color: rgba(22, 93, 255, 0.16);
+  --cc-lazy-image-error-color: #f53f3f;
+  --cc-tilt-card-background: #ffffff;
+  --cc-tilt-card-border-color: #e4e7ed;
+  --cc-tilt-card-color: #1d2129;
+  --cc-tilt-card-shadow: 0 18px 42px rgba(22, 93, 255, 0.14);
+  --cc-tilt-card-shadow-active: 0 24px 64px rgba(22, 93, 255, 0.22);
+  --cc-canvas-editor-background: #f5f7fa;
+  --cc-canvas-editor-card-background: #ffffff;
+  --cc-canvas-editor-card-border-color: #e4e7ed;
+  --cc-canvas-editor-card-shadow: 0 10px 24px rgba(29, 33, 41, 0.08);
+  --cc-canvas-editor-line-color: #165dff;
+  --cc-canvas-editor-muted-color: #8c93a2;
+  --cc-canvas-editor-text-color: #1d2129;
+  --cc-canvas-editor-grid-color: rgba(22, 93, 255, 0.1);
+  --cc-canvas-editor-selection-ring: 0 0 0 2px rgba(22, 93, 255, 0.14);
+  --cc-canvas-editor-control-active-background: #165dff;
+  --cc-canvas-editor-control-active-border-color: #165dff;
+  --cc-canvas-editor-control-active-color: #ffffff;
+  --cc-canvas-editor-control-hover-border-color: #165dff;
+  --cc-canvas-editor-document-accent-color: rgba(22, 93, 255, 0.08);
+  --cc-canvas-editor-node-border-color: rgba(22, 93, 255, 0.14);
+  --cc-canvas-editor-node-editing-border-color: rgba(22, 93, 255, 0.42);
+  --cc-canvas-editor-input-focus-shadow: inset 0 0 0 1px rgba(22, 93, 255, 0.22);
+  --cc-canvas-editor-mind-glow: radial-gradient(
+    circle at 50% 45%,
+    rgba(22, 93, 255, 0.08),
+    transparent 44%
+  );
+  --cc-canvas-editor-card-selected-border-color: #165dff;
+  --cc-canvas-editor-card-selected-shadow: 0 12px 30px rgba(22, 93, 255, 0.12);
+  --cc-drag-drop-slot-dragging-background: rgba(22, 93, 255, 0.08);
+  --cc-drag-drop-slot-dragging-border-color: rgba(22, 93, 255, 0.38);
+  --cc-drag-drop-slot-over-background: rgba(22, 93, 255, 0.1);
+  --cc-drag-drop-slot-over-border-color: rgba(22, 93, 255, 0.46);
+  --cc-drag-drop-preview-shadow: 0 18px 42px rgba(22, 93, 255, 0.26);
+  --cc-button-shadow: 0 1px 2px rgba(22, 93, 255, 0.08);
+  --cc-button-primary-background: #165dff;
+  --cc-button-primary-background-hover: #4080ff;
+  --cc-button-primary-color: #ffffff;
+  --cc-button-primary-shadow-hover: 0 8px 20px rgba(22, 93, 255, 0.22);
+  --cc-button-secondary-background: #ffffff;
+  --cc-button-secondary-border-color: #e4e7ed;
+  --cc-button-secondary-color: #1d2129;
+  --cc-button-ghost-color: #165dff;
+  --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: #e4e7ed;
+  --cc-tabs-tab-active-color: #165dff;
+  --cc-modal-overlay-background: rgba(29, 33, 41, 0.52);
+  --cc-modal-background: #ffffff;
+  --cc-modal-color: #1d2129;
+  --cc-modal-shadow: var(--cc-shadow-floating);
+  --cc-modal-header-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #f5f7fa 100%
+  );
+  --cc-modal-header-border-color: #f5f7fa;
+  --cc-modal-header-color: #1d2129;
+  --cc-popup-overlay-background: rgba(29, 33, 41, 0.52);
+  --cc-popup-background: #ffffff;
+  --cc-popup-color: #1d2129;
+  --cc-popup-shadow: var(--cc-shadow-floating);
+  --cc-popup-header-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #f5f7fa 100%
+  );
+  --cc-popup-header-border-color: #f5f7fa;
+  --cc-popup-header-color: #1d2129;
+  --cc-tooltip-background: #1d2129;
+  --cc-tooltip-color: #ffffff;
+  --cc-tooltip-shadow: 0 10px 24px rgba(22, 93, 255, 0.2);
+  --cc-toast-background: #ffffff;
+  --cc-toast-border-color: #e4e7ed;
+  --cc-toast-accent-color: #165dff;
+  --cc-toast-shadow: 0 12px 30px rgba(22, 93, 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: #303746;
+  --cc-color-muted: #9aa5b7;
+  --cc-select-menu-text-color: #303746;
+  --cc-select-option-selected-text-color: #303746;
+  --cc-select-placeholder-color: #cfd5df;
+  --cc-virtual-select-empty-color: #9aa5b7;
+  --cc-lazy-image-placeholder-color: #9aa5b7;
+  --cc-lazy-image-skeleton-color: #9aa5b7;
+  --cc-tilt-card-color: #303746;
+  --cc-canvas-editor-muted-color: #9aa5b7;
+  --cc-canvas-editor-text-color: #303746;
+  --cc-button-secondary-color: #303746;
+  --cc-modal-color: #303746;
+  --cc-modal-header-color: #303746;
+  --cc-popup-color: #303746;
+  --cc-popup-header-color: #303746;
+
+  /* Ten-pass enterprise polish: clear text, calm blue emphasis and isolated interaction states. */
+  --cc-color-text: #111827;
+  --cc-color-muted: #4b5a6b;
+  --cc-color-border: #cbd5e1;
+  --cc-color-border-hover: #8fa3bd;
+  --cc-color-border-focus: #155eef;
+  --cc-color-divider: #e8edf4;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #f6f8fb;
+  --cc-color-accent: #155eef;
+  --cc-color-accent-hover: #0f4ed8;
+  --cc-form-color-text: #111827;
+  --cc-form-color-muted: #4b5a6b;
+  --cc-form-color-border: #cbd5e1;
+  --cc-form-color-border-hover: #8fa3bd;
+  --cc-form-color-border-focus: #155eef;
+  --cc-form-placeholder-color: #738094;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #f7f9fc;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-shadow-focus: 0 0 0 3px rgba(21, 94, 239, 0.16);
+  --cc-shadow-floating:
+    0 20px 52px rgba(15, 42, 92, 0.14), 0 1px 0 rgba(21, 94, 239, 0.08);
+  --cc-button-primary-background: linear-gradient(
+    135deg,
+    #155eef 0%,
+    #2f6df6 100%
+  );
+  --cc-button-primary-background-hover: linear-gradient(
+    135deg,
+    #0f4ed8 0%,
+    #255fdc 100%
+  );
+  --cc-button-secondary-background: #ffffff;
+  --cc-button-secondary-border-color: #b9c7da;
+  --cc-button-secondary-color: #12315f;
+  --cc-button-ghost-color: #155eef;
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #c0ccdc;
+  --cc-select-menu-text-color: #111827;
+  --cc-select-option-hover-color: #eef4ff;
+  --cc-select-option-selected-color: rgba(21, 94, 239, 0.12);
+  --cc-select-option-selected-text-color: #0f3d9e;
+  --cc-select-check-color: #155eef;
+  --cc-switch-track-background: #d5deea;
+  --cc-switch-track-checked-background: #155eef;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #155eef;
+  --cc-tabs-tab-active-color: #155eef;
+  --cc-tabs-list-border-color: #cbd5e1;
+  --cc-modal-overlay-background: rgba(17, 24, 39, 0.52);
+  --cc-modal-background: #ffffff;
+  --cc-modal-color: #111827;
+  --cc-modal-header-background: #ffffff;
+  --cc-modal-header-border-color: #e8edf4;
+  --cc-modal-header-color: #111827;
+  --cc-popup-background: #ffffff;
+  --cc-popup-color: #111827;
+  --cc-popup-header-background: #ffffff;
+  --cc-popup-header-border-color: #e8edf4;
+  --cc-popup-header-color: #111827;
+  --cc-toast-background: #ffffff;
+  --cc-toast-border-color: #cbd5e1;
+  --cc-toast-accent-color: #155eef;
+  --cc-menu-background: transparent;
+  --cc-menu-text-color: #26364d;
+  --cc-menu-muted-color: #607087;
+  --cc-menu-item-color: #26364d;
+  --cc-menu-item-muted-color: #607087;
+  --cc-menu-item-hover-background: #eef4ff;
+  --cc-menu-item-hover-color: #0f3d9e;
+  --cc-menu-item-active-background: rgba(21, 94, 239, 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: #46617f;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: #ffffff;
+  --cc-code-preview-panel-background: #f5f8fc;
+  --cc-code-preview-border-color: #d5deea;
+  --cc-code-preview-bar-background: #ffffff;
+  --cc-code-preview-color: #111827;
+  --cc-code-preview-text-color: #111827;
+  --cc-code-preview-muted-color: #516176;
+  --cc-code-preview-accent-color: #155eef;
+  --cc-code-preview-line-color: rgba(21, 94, 239, 0.44);
+
+  /* Five-round premium tuning: enterprise blue with stronger text and calmer chrome. */
+  --cc-color-text: #0f172a;
+  --cc-color-muted: #3f4f63;
+  --cc-color-border: #c7d2e3;
+  --cc-color-border-hover: #8297b4;
+  --cc-color-border-focus: #1454d8;
+  --cc-color-divider: #e5ebf4;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #f5f8fc;
+  --cc-color-accent: #1454d8;
+  --cc-color-accent-hover: #0f45b6;
+  --cc-shadow-focus: 0 0 0 3px rgba(20, 84, 216, 0.16);
+  --cc-shadow-floating:
+    0 20px 52px rgba(13, 40, 92, 0.15), 0 1px 0 rgba(20, 84, 216, 0.07);
+  --cc-form-color-text: #0f172a;
+  --cc-form-color-muted: #3f4f63;
+  --cc-form-color-border: #c7d2e3;
+  --cc-form-color-border-hover: #8297b4;
+  --cc-form-color-border-focus: #1454d8;
+  --cc-form-placeholder-color: #6f7f93;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #f7faff;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #bfcbdd;
+  --cc-select-menu-text-color: #0f172a;
+  --cc-select-option-hover-color: #edf4ff;
+  --cc-select-option-selected-color: rgba(20, 84, 216, 0.12);
+  --cc-select-option-selected-text-color: #123f9b;
+  --cc-select-check-color: #1454d8;
+  --cc-button-primary-background: linear-gradient(
+    135deg,
+    #1454d8 0%,
+    #2b6ff2 100%
+  );
+  --cc-button-primary-background-hover: linear-gradient(
+    135deg,
+    #0f45b6 0%,
+    #1f5fd8 100%
+  );
+  --cc-button-secondary-border-color: #b7c5d9;
+  --cc-button-secondary-color: #12315f;
+  --cc-button-ghost-color: #1454d8;
+  --cc-switch-track-background: #d2ddea;
+  --cc-switch-track-checked-background: #1454d8;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #1454d8;
+  --cc-tabs-tab-active-color: #1454d8;
+  --cc-tabs-list-border-color: #c7d2e3;
+  --cc-modal-overlay-background: rgba(15, 23, 42, 0.54);
+  --cc-modal-color: #0f172a;
+  --cc-modal-header-color: #0f172a;
+  --cc-popup-overlay-background: rgba(15, 23, 42, 0.54);
+  --cc-popup-color: #0f172a;
+  --cc-popup-header-color: #0f172a;
+  --cc-menu-text-color: #22334a;
+  --cc-menu-muted-color: #586b84;
+  --cc-menu-item-color: #22334a;
+  --cc-menu-item-muted-color: #586b84;
+  --cc-menu-item-hover-background: #edf4ff;
+  --cc-menu-item-hover-color: #123f9b;
+  --cc-menu-item-active-background: rgba(20, 84, 216, 0.115);
+  --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: #46617f;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: #ffffff;
+  --cc-code-preview-panel-background: #f4f7fb;
+  --cc-code-preview-border-color: #d0dae8;
+  --cc-code-preview-bar-background: #ffffff;
+  --cc-code-preview-color: #0f172a;
+  --cc-code-preview-text-color: #0f172a;
+  --cc-code-preview-muted-color: #4d5d72;
+  --cc-code-preview-accent-color: #1454d8;
+  --cc-code-preview-line-color: rgba(20, 84, 216, 0.42);
+}