@class-kit/vue 0.1.2 → 0.1.4

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

@@ -1,5 +1,16 @@
 .cc-theme-business-blue,
 [data-cc-theme="business-blue"] {
+  --cc-page-background: #f5f8fc;
+  --cc-page-background-image: linear-gradient(
+    135deg,
+    #f5f8fc 0%,
+    #ffffff 52%,
+    #eef4fb 100%
+  );
+  --cc-page-color: #162033;
+  --cc-page-muted-color: #526074;
+  --cc-page-accent-color: #1454d8;
+  --cc-page-surface-color: #ffffff;
   --cc-color-text: #1d2129;
   --cc-color-muted: #8c93a2;
   --cc-color-border: #e4e7ed;
@@ -66,11 +77,7 @@
   --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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #165dff;
   --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
   --cc-date-picker-day-hover-background: #f5f7fa;
@@ -179,8 +186,6 @@
   --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),
@@ -249,11 +254,7 @@
   --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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #155eef;
   --cc-tabs-tab-active-color: #155eef;
   --cc-tabs-list-border-color: #cbd5e1;
@@ -338,11 +339,7 @@
   --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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #1454d8;
   --cc-tabs-tab-active-color: #1454d8;
   --cc-tabs-list-border-color: #c7d2e3;
@@ -373,3 +370,15 @@
   --cc-code-preview-accent-color: #1454d8;
   --cc-code-preview-line-color: rgba(20, 84, 216, 0.42);
 }
+
+.cc-theme-business-blue,
+[data-cc-theme="business-blue"] {
+  --cc-menu-background: #ffffff;
+  --cc-menu-border-color: #d0dae8;
+  --cc-menu-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 44px rgba(20, 84, 216, 0.14);
+  --cc-menu-focus-shadow: 0 0 0 3px rgba(20, 84, 216, 0.16);
+  --cc-scrollbar-track-color: rgba(20, 84, 216, 0.1);
+  --cc-scrollbar-thumb-color: rgba(20, 84, 216, 0.42);
+  --cc-scrollbar-thumb-hover-color: #1454d8;
+}

package/dist/styles/themes/cartoon-3d.css

@@ -1,5 +1,16 @@
-.cc-theme-cartoon-3d,
+.cc-theme-cartoon-3d,
 [data-cc-theme="cartoon-3d"] {
+  --cc-page-background: #f2f5fa;
+  --cc-page-background-image: linear-gradient(
+    135deg,
+    #f2f5fa 0%,
+    #ffffff 50%,
+    #eaf1ff 100%
+  );
+  --cc-page-color: #182238;
+  --cc-page-muted-color: #53627b;
+  --cc-page-accent-color: #2c55d9;
+  --cc-page-surface-color: #ffffff;
   --cc-color-text: #122633;
   --cc-color-muted: #649ec7;
   --cc-color-border: #d6ecff;
@@ -18,8 +29,6 @@
   --cc-form-placeholder-color: #c0e3fb;
   --cc-tooltip-background: #122633;
   --cc-tooltip-color: #ffffff;
-  --cc-theme-backdrop-filter: none;
-  --cc-theme-overlay-backdrop-filter: none;
   --cc-theme-glass-highlight: linear-gradient(
     135deg,
     rgba(255, 255, 255, 0.72),
@@ -90,11 +99,7 @@
     #7b61ff 100%
   );
   --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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #36bffb;
   --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
   --cc-date-picker-day-hover-background: #d6ecff;
@@ -260,11 +265,7 @@
     #3656f5 0%,
     #22a7f2 100%
   );
-  --cc-rating-star-color: color-mix(
-    in srgb,
-    var(--cc-form-color-muted) 72%,
-    var(--cc-form-color-text)
-  );
+  --cc-rating-star-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #3656f5;
   --cc-tabs-tab-active-color: #3656f5;
   --cc-tabs-list-border-color: #c9d2e3;
@@ -361,11 +362,7 @@
     #2f55df 0%,
     #1f9dd8 100%
   );
-  --cc-rating-star-color: color-mix(
-    in srgb,
-    var(--cc-form-color-muted) 72%,
-    var(--cc-form-color-text)
-  );
+  --cc-rating-star-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #2f55df;
   --cc-tabs-tab-active-color: #2f55df;
   --cc-tabs-list-border-color: #c3cddd;
@@ -460,46 +457,7 @@
   --cc-tilt-card-shadow-active:
     0 3px 0 rgba(17, 24, 39, 0.18), 0 34px 72px rgba(47, 85, 223, 0.22),
     0 72px 136px rgba(17, 24, 39, 0.14);
-}
-
-:where(.cc-theme-cartoon-3d, [data-cc-theme="cartoon-3d"])
-  :where(
-    .cc-field__control,
-    .cc-select__menu,
-    .cc-virtual-select__menu,
-    .cc-date-picker__panel,
-    .cc-date-range-picker__panel,
-    .cc-calendar,
-    .cc-modal__panel,
-    .cc-popup__panel,
-    .cc-toast,
-    .cc-tilt-card__surface
-  ):not(
-    :where(
-      .cc-theme-minimal *,
-      [data-cc-theme="minimal"] *,
-      .cc-theme-business-blue *,
-      [data-cc-theme="business-blue"] *,
-      .cc-theme-dark-tech *,
-      [data-cc-theme="dark-tech"] *,
-      .cc-theme-soft-pink *,
-      [data-cc-theme="soft-pink"] *,
-      .cc-theme-creative-purple *,
-      [data-cc-theme="creative-purple"] *,
-      .cc-theme-liquid-glass *,
-      [data-cc-theme="liquid-glass"] *
-    )
-  ) {
-  border-width: 1px;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.86),
-    inset 0 -18px 36px rgba(54, 86, 245, 0.035),
-    var(--cc-shadow-floating);
-  transform: translateZ(0);
-  transform-style: preserve-3d;
-}
-
-/* Five-round realistic 3D tuning: physical light, contact shadows, readable surfaces and pressed depth. */
+} /* Five-round realistic 3D tuning: physical light, contact shadows, readable surfaces and pressed depth. */
 .cc-theme-cartoon-3d,
 [data-cc-theme="cartoon-3d"] {
   --cc-color-text: #111827;
@@ -654,42 +612,15 @@
     0 44px 92px rgba(44, 85, 217, 0.26), 0 92px 170px rgba(17, 24, 39, 0.18);
 }
 
-:where(.cc-theme-cartoon-3d, [data-cc-theme="cartoon-3d"])
-  :where(
-    .cc-button,
-    .cc-field__control,
-    .cc-select__menu,
-    .cc-modal__panel,
-    .cc-popup__panel,
-    .cc-toast,
-    .cc-tilt-card__surface
-  ):not(
-    :where(
-      .cc-theme-minimal *,
-      [data-cc-theme="minimal"] *,
-      .cc-theme-business-blue *,
-      [data-cc-theme="business-blue"] *,
-      .cc-theme-dark-tech *,
-      [data-cc-theme="dark-tech"] *,
-      .cc-theme-soft-pink *,
-      [data-cc-theme="soft-pink"] *,
-      .cc-theme-creative-purple *,
-      [data-cc-theme="creative-purple"] *,
-      .cc-theme-liquid-glass *,
-      [data-cc-theme="liquid-glass"] *
-    )
-  ) {
-  background-image:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.9),
-      rgba(247, 249, 253, 0.94)
-    ),
-    radial-gradient(
-      circle at 18% 0%,
-      rgba(255, 255, 255, 0.95),
-      transparent 38%
-    );
-  box-shadow: var(--cc-shadow-floating);
-  transform-style: preserve-3d;
+.cc-theme-cartoon-3d,
+[data-cc-theme="cartoon-3d"] {
+  --cc-menu-background: #fffdf7;
+  --cc-menu-border-color: #ccd5e5;
+  --cc-menu-shadow:
+    0 3px 0 rgba(17, 24, 39, 0.12), 0 20px 42px rgba(44, 85, 217, 0.14);
+  --cc-menu-focus-shadow:
+    0 0 0 3px rgba(44, 85, 217, 0.18), 0 4px 0 rgba(17, 24, 39, 0.12);
+  --cc-scrollbar-track-color: rgba(44, 85, 217, 0.12);
+  --cc-scrollbar-thumb-color: rgba(44, 85, 217, 0.46);
+  --cc-scrollbar-thumb-hover-color: #2c55d9;
 }

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

@@ -1,5 +1,16 @@
 .cc-theme-creative-purple,
 [data-cc-theme="creative-purple"] {
+  --cc-page-background: #faf7ff;
+  --cc-page-background-image: linear-gradient(
+    135deg,
+    #faf7ff 0%,
+    #ffffff 52%,
+    #f3ecff 100%
+  );
+  --cc-page-color: #26183d;
+  --cc-page-muted-color: #645277;
+  --cc-page-accent-color: #6624cb;
+  --cc-page-surface-color: #ffffff;
   --cc-color-text: #20142e;
   --cc-color-muted: #8c70b2;
   --cc-color-border: #e9dfff;
@@ -66,11 +77,7 @@
   --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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #722ed1;
   --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
   --cc-date-picker-day-hover-background: #f7f2fe;
@@ -180,8 +187,6 @@
   --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),
@@ -250,11 +255,7 @@
   --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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #6d28d9;
   --cc-tabs-tab-active-color: #6d28d9;
   --cc-tabs-list-border-color: #dac8f4;
@@ -339,11 +340,7 @@
   --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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #6624cb;
   --cc-tabs-tab-active-color: #6624cb;
   --cc-tabs-list-border-color: #d7c4f0;
@@ -374,3 +371,15 @@
   --cc-code-preview-accent-color: #6624cb;
   --cc-code-preview-line-color: rgba(102, 36, 203, 0.43);
 }
+
+.cc-theme-creative-purple,
+[data-cc-theme="creative-purple"] {
+  --cc-menu-background: #fffaff;
+  --cc-menu-border-color: #dfcef5;
+  --cc-menu-shadow:
+    0 1px 2px rgba(36, 18, 56, 0.04), 0 18px 42px rgba(102, 36, 203, 0.14);
+  --cc-menu-focus-shadow: 0 0 0 3px rgba(102, 36, 203, 0.16);
+  --cc-scrollbar-track-color: rgba(102, 36, 203, 0.1);
+  --cc-scrollbar-thumb-color: rgba(102, 36, 203, 0.42);
+  --cc-scrollbar-thumb-hover-color: #6624cb;
+}

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

@@ -1,5 +1,14 @@
 .cc-theme-dark-tech,
 [data-cc-theme="dark-tech"] {
+  --cc-page-background: #0f151e;
+  --cc-page-background-image:
+    linear-gradient(rgba(45, 215, 255, 0.06) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(45, 215, 255, 0.05) 1px, transparent 1px),
+    linear-gradient(135deg, #0f151e 0%, #151d29 52%, #0f151e 100%);
+  --cc-page-color: #edf7ff;
+  --cc-page-muted-color: #a6b4c6;
+  --cc-page-accent-color: #2dd7ff;
+  --cc-page-surface-color: #151c27;
   --cc-color-text: #e4e7ed;
   --cc-color-muted: #6c7486;
   --cc-color-border: #2c303a;
@@ -37,6 +46,20 @@
   --cc-form-control-focus-background: #1e2129;
   --cc-form-control-readonly-background: #17191f;
   --cc-form-control-disabled-background: #17191f;
+  --cc-rich-editor-background: #101722;
+  --cc-rich-editor-control-background: #141d2a;
+  --cc-rich-editor-control-hover-background: #172131;
+  --cc-rich-editor-menu-background: #101722;
+  --cc-rich-editor-border-color: #2a3b52;
+  --cc-rich-editor-border-hover-color: #00c6ff;
+  --cc-rich-editor-color: #f3f7ff;
+  --cc-rich-editor-muted-color: #b3bdd0;
+  --cc-rich-editor-placeholder-color: #8995aa;
+  --cc-rich-editor-disabled-color: #8f99aa;
+  --cc-rich-editor-accent-color: #00c6ff;
+  --cc-rich-editor-link-color: #4cd0ff;
+  --cc-rich-editor-toolbar-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
+  --cc-rich-editor-menu-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
   --cc-form-shadow-focus: var(--cc-shadow-focus);
   --cc-form-shadow-floating: var(--cc-shadow-floating);
   --cc-form-disabled-background: #17191f;
@@ -66,11 +89,7 @@
   --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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #00c6ff;
   --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
   --cc-date-picker-day-hover-background: #17191f;
@@ -182,8 +201,6 @@
   --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),
@@ -257,11 +274,7 @@
     #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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #23d3ff;
   --cc-tabs-tab-active-color: #67e2ff;
   --cc-tabs-list-border-color: #303846;
@@ -353,11 +366,7 @@
     #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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #2dd7ff;
   --cc-tabs-tab-active-color: #7ae7ff;
   --cc-tabs-list-border-color: #334052;
@@ -429,11 +438,7 @@
   --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-color: rgba(78, 168, 255, 0.18);
   --cc-select-option-selected-text-color: #ffffff;
   --cc-select-check-color: var(--cc-form-color-accent-hover);
   --cc-select-placeholder-color: #9aa9bb;
@@ -445,29 +450,21 @@
   --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%
+    var(--cc-form-color-accent-hover) 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%
+    var(--cc-form-color-accent-hover) 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-code-preview-line-color: rgba(22, 119, 255, 1);
+  --cc-menu-item-active-background: rgba(78, 168, 255, 0.18);
   --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);
@@ -493,3 +490,37 @@
   --cc-toast-background: #101722;
   --cc-toast-border-color: #3c4b60;
 }
+
+.cc-theme-dark-tech,
+[data-cc-theme="dark-tech"] {
+  --cc-menu-background: #101722;
+  --cc-menu-border-color: #2a3b52;
+  --cc-menu-shadow:
+    0 18px 46px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(45, 215, 255, 0.08);
+  --cc-menu-item-hover-background: #172131;
+  --cc-menu-item-active-background: rgba(45, 215, 255, 0.16);
+  --cc-menu-focus-shadow: 0 0 0 3px rgba(45, 215, 255, 0.22);
+  --cc-scrollbar-track-color: rgba(122, 231, 255, 0.08);
+  --cc-scrollbar-thumb-color: rgba(45, 215, 255, 0.52);
+  --cc-scrollbar-thumb-hover-color: rgba(122, 231, 255, 0.78);
+}
+
+.cc-theme-dark-tech .cc-rich-editor,
+[data-cc-theme="dark-tech"] .cc-rich-editor,
+.cc-rich-editor.cc-theme-dark-tech,
+.cc-rich-editor[data-cc-theme="dark-tech"] {
+  --cc-rich-editor-background: #101722;
+  --cc-rich-editor-control-background: #141d2a;
+  --cc-rich-editor-control-hover-background: #172131;
+  --cc-rich-editor-menu-background: #101722;
+  --cc-rich-editor-border-color: #2a3b52;
+  --cc-rich-editor-border-hover-color: #00c6ff;
+  --cc-rich-editor-color: #f3f7ff;
+  --cc-rich-editor-muted-color: #b3bdd0;
+  --cc-rich-editor-placeholder-color: #8995aa;
+  --cc-rich-editor-disabled-color: #8f99aa;
+  --cc-rich-editor-accent-color: #00c6ff;
+  --cc-rich-editor-link-color: #4cd0ff;
+  --cc-rich-editor-toolbar-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
+  --cc-rich-editor-menu-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
+}