@class-kit/vue 0.1.2 → 0.1.3

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;
@@ -66,11 +75,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 +187,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 +260,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 +352,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 +424,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 +436,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 +476,17 @@
   --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);
+}

package/dist/styles/themes/liquid-glass.css

@@ -1,5 +1,16 @@
-.cc-theme-liquid-glass,
+.cc-theme-liquid-glass,
 [data-cc-theme="liquid-glass"] {
+  --cc-page-background: #f5faff;
+  --cc-page-background-image: linear-gradient(
+    135deg,
+    rgba(245, 250, 255, 0.82) 0%,
+    rgba(255, 255, 255, 0.72) 50%,
+    rgba(232, 243, 255, 0.86) 100%
+  );
+  --cc-page-color: #182438;
+  --cc-page-muted-color: #56677c;
+  --cc-page-accent-color: #0071e3;
+  --cc-page-surface-color: rgba(255, 255, 255, 0.68);
   --cc-color-text: #1f2329;
   --cc-color-muted: #86909c;
   --cc-color-border: rgba(255, 255, 255, 0.44);
@@ -18,8 +29,6 @@
   --cc-form-placeholder-color: #b7bfca;
   --cc-tooltip-background: rgba(30, 30, 32, 0.82);
   --cc-tooltip-color: #f7f9fc;
-  --cc-theme-backdrop-filter: saturate(1.72) blur(28px) contrast(1.04);
-  --cc-theme-overlay-backdrop-filter: saturate(1.18) blur(14px);
   --cc-theme-glass-highlight: linear-gradient(
     135deg,
     rgba(255, 255, 255, 0.82),
@@ -74,11 +83,7 @@
   --cc-switch-track-background: rgba(255, 255, 255, 0.44);
   --cc-switch-track-checked-background: #007aff;
   --cc-switch-thumb-background: rgba(255, 255, 255, 0.92);
-  --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: #007aff;
   --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
   --cc-date-picker-day-hover-background: rgba(255, 255, 255, 0.54);
@@ -123,11 +128,7 @@
   --cc-toast-shadow: 0 12px 30px rgba(0, 122, 255, 0.16);
   --cc-tilt-card-background: var(--cc-color-surface);
   --cc-tilt-card-border-color: var(--cc-color-border);
-  --cc-canvas-editor-background: color-mix(
-    in srgb,
-    var(--cc-color-surface) 74%,
-    transparent
-  );
+  --cc-canvas-editor-background: rgba(255, 255, 255, 1);
   --cc-canvas-editor-card-background: var(--cc-color-surface);
   --cc-color-text: #343941;
   --cc-color-muted: #9aa3ad;
@@ -166,8 +167,6 @@
   --cc-form-control-background: rgba(255, 255, 255, 0.72);
   --cc-form-control-hover-background: rgba(255, 255, 255, 0.84);
   --cc-form-control-focus-background: rgba(255, 255, 255, 0.9);
-  --cc-theme-backdrop-filter: saturate(1.5) blur(36px) contrast(1.06);
-  --cc-theme-overlay-backdrop-filter: saturate(1.12) blur(26px) contrast(1.03);
   --cc-shadow-focus: 0 0 0 3px rgba(0, 122, 255, 0.17);
   --cc-shadow-floating:
     0 28px 70px rgba(18, 36, 58, 0.2), 0 10px 26px rgba(0, 122, 255, 0.08),
@@ -187,11 +186,7 @@
   --cc-select-check-color: #007aff;
   --cc-switch-track-background: rgba(126, 152, 184, 0.3);
   --cc-switch-track-checked-background: #007aff;
-  --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: #007aff;
   --cc-tabs-tab-active-color: #0067d6;
   --cc-tabs-list-border-color: rgba(126, 152, 184, 0.34);
@@ -248,8 +243,6 @@
   --cc-color-surface-soft: rgba(246, 250, 255, 0.74);
   --cc-color-accent: #006fe6;
   --cc-color-accent-hover: #005cc8;
-  --cc-theme-backdrop-filter: saturate(1.55) blur(38px) contrast(1.07);
-  --cc-theme-overlay-backdrop-filter: saturate(1.18) blur(30px) contrast(1.04);
   --cc-shadow-focus: 0 0 0 3px rgba(0, 111, 230, 0.18);
   --cc-shadow-floating:
     0 34px 86px rgba(18, 36, 58, 0.24), 0 12px 30px rgba(0, 111, 230, 0.09),
@@ -278,11 +271,7 @@
   --cc-button-ghost-color: #005fcf;
   --cc-switch-track-background: rgba(107, 132, 164, 0.32);
   --cc-switch-track-checked-background: #006fe6;
-  --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: #006fe6;
   --cc-tabs-tab-active-color: #005fcf;
   --cc-tabs-list-border-color: rgba(107, 132, 164, 0.36);
@@ -373,54 +362,7 @@
   --cc-code-preview-accent-color: #006fe6;
   --cc-code-preview-line-color: rgba(0, 111, 230, 0.43);
   isolation: isolate;
-}
-
-:where(.cc-theme-liquid-glass, [data-cc-theme="liquid-glass"])
-  :where(.cc-modal__overlay, .cc-popup__overlay):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-cartoon-3d *,
-      [data-cc-theme="cartoon-3d"] *
-    )
-  ) {
-  backdrop-filter: var(--cc-theme-overlay-backdrop-filter);
-  -webkit-backdrop-filter: var(--cc-theme-overlay-backdrop-filter);
-}
-
-:where(.cc-theme-liquid-glass, [data-cc-theme="liquid-glass"])
-  :where(.cc-modal__panel, .cc-popup__panel, .cc-toast):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-cartoon-3d *,
-      [data-cc-theme="cartoon-3d"] *
-    )
-  ) {
-  border: 1px solid var(--cc-color-border);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.7),
-    inset 0 -22px 48px rgba(255, 255, 255, 0.18),
-    var(--cc-shadow-floating);
-}
-
-/* Five-round liquid glass tuning: stronger material blur, edge refraction and focused overlays. */
+} /* Five-round liquid glass tuning: stronger material blur, edge refraction and focused overlays. */
 .cc-theme-liquid-glass,
 [data-cc-theme="liquid-glass"] {
   --cc-color-text: #101a28;
@@ -433,10 +375,6 @@
   --cc-color-surface-soft: rgba(245, 250, 255, 0.52);
   --cc-color-accent: #0071e3;
   --cc-color-accent-hover: #0057b8;
-  --cc-theme-backdrop-filter: saturate(1.75) blur(44px) contrast(1.08)
-    brightness(1.03);
-  --cc-theme-overlay-backdrop-filter: saturate(1.35) blur(36px) contrast(1.06)
-    brightness(0.96);
   --cc-theme-glass-highlight:
     radial-gradient(
       circle at 20% 0%,
@@ -520,41 +458,15 @@
   isolation: isolate;
 }
 
-:where(.cc-theme-liquid-glass, [data-cc-theme="liquid-glass"])
-  :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,
-    .cc-code-preview
-  ):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-cartoon-3d *,
-      [data-cc-theme="cartoon-3d"] *
-    )
-  ) {
-  backdrop-filter: var(--cc-theme-backdrop-filter);
-  -webkit-backdrop-filter: var(--cc-theme-backdrop-filter);
-  background-image: var(--cc-theme-glass-highlight);
-  border-color: var(--cc-color-border);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.86),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
-    var(--cc-shadow-floating);
+.cc-theme-liquid-glass,
+[data-cc-theme="liquid-glass"] {
+  --cc-menu-background: rgba(255, 255, 255, 0.68);
+  --cc-menu-border-color: rgba(255, 255, 255, 0.54);
+  --cc-menu-shadow:
+    inset 1px 1px 0 rgba(255, 255, 255, 0.72),
+    0 18px 50px rgba(35, 77, 118, 0.16);
+  --cc-menu-focus-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18);
+  --cc-scrollbar-track-color: rgba(255, 255, 255, 0.32);
+  --cc-scrollbar-thumb-color: rgba(0, 113, 227, 0.38);
+  --cc-scrollbar-thumb-hover-color: rgba(0, 113, 227, 0.62);
 }