@class-kit/vue 0.1.2 → 0.1.4

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);
 }

package/dist/styles/themes/minimal.css

@@ -1,5 +1,11 @@
 .cc-theme-minimal,
 [data-cc-theme="minimal"] {
+  --cc-page-background: #ffffff;
+  --cc-page-background-image: none;
+  --cc-page-color: #111318;
+  --cc-page-muted-color: #59626e;
+  --cc-page-accent-color: #050608;
+  --cc-page-surface-color: #ffffff;
   --cc-minimal-ink: #0b0d10;
   --cc-minimal-text: #20242a;
   --cc-minimal-muted: #58616c;
@@ -76,11 +82,7 @@
   --cc-switch-track-background: var(--cc-minimal-border);
   --cc-switch-track-checked-background: var(--cc-minimal-ink);
   --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: var(--cc-minimal-ink);
   --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
   --cc-date-picker-day-hover-background: var(--cc-minimal-surface-muted);
@@ -181,8 +183,6 @@
   --cc-toast-border-color: var(--cc-minimal-border);
   --cc-toast-accent-color: var(--cc-minimal-ink);
   --cc-toast-shadow: 0 14px 34px rgba(12, 16, 22, 0.1);
-  --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 +257,7 @@
   --cc-select-check-color: #08090b;
   --cc-switch-track-background: #d9dde4;
   --cc-switch-track-checked-background: #08090b;
-  --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: #08090b;
   --cc-tabs-tab-active-color: #08090b;
   --cc-tabs-list-border-color: #cfd4dc;
@@ -353,11 +349,7 @@
   --cc-choice-checked-border-color: #050608;
   --cc-switch-track-background: #d7dce3;
   --cc-switch-track-checked-background: #050608;
-  --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: #050608;
   --cc-tabs-list-border-color: #c8ced7;
   --cc-tabs-tab-active-color: #050608;
@@ -409,3 +401,15 @@
   --cc-code-preview-shadow:
     0 1px 2px rgba(12, 16, 22, 0.06), 0 18px 42px rgba(12, 16, 22, 0.1);
 }
+
+.cc-theme-minimal,
+[data-cc-theme="minimal"] {
+  --cc-menu-background: #ffffff;
+  --cc-menu-border-color: #d8dde5;
+  --cc-menu-shadow:
+    0 1px 2px rgba(12, 16, 22, 0.05), 0 18px 42px rgba(12, 16, 22, 0.1);
+  --cc-menu-focus-shadow: 0 0 0 3px rgba(5, 6, 8, 0.13);
+  --cc-scrollbar-track-color: rgba(5, 6, 8, 0.06);
+  --cc-scrollbar-thumb-color: rgba(5, 6, 8, 0.42);
+  --cc-scrollbar-thumb-hover-color: rgba(5, 6, 8, 0.68);
+}

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

@@ -1,5 +1,16 @@
 .cc-theme-soft-pink,
 [data-cc-theme="soft-pink"] {
+  --cc-page-background: #fff7fa;
+  --cc-page-background-image: linear-gradient(
+    135deg,
+    #fff7fa 0%,
+    #ffffff 54%,
+    #fff0f6 100%
+  );
+  --cc-page-color: #372230;
+  --cc-page-muted-color: #775466;
+  --cc-page-accent-color: #bd2f71;
+  --cc-page-surface-color: #ffffff;
   --cc-color-text: #2e2027;
   --cc-color-muted: #a88498;
   --cc-color-border: #f4e6ed;
@@ -66,11 +77,7 @@
   --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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #d64d8c;
   --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
   --cc-date-picker-day-hover-background: #fcf5f8;
@@ -180,8 +187,6 @@
   --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),
@@ -250,11 +255,7 @@
   --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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #c93678;
   --cc-tabs-tab-active-color: #c93678;
   --cc-tabs-list-border-color: #e7cdda;
@@ -339,11 +340,7 @@
   --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-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: #bd2f71;
   --cc-tabs-tab-active-color: #bd2f71;
   --cc-tabs-list-border-color: #e4c8d5;
@@ -374,3 +371,15 @@
   --cc-code-preview-accent-color: #bd2f71;
   --cc-code-preview-line-color: rgba(189, 47, 113, 0.42);
 }
+
+.cc-theme-soft-pink,
+[data-cc-theme="soft-pink"] {
+  --cc-menu-background: #fffafd;
+  --cc-menu-border-color: #ead1dc;
+  --cc-menu-shadow:
+    0 1px 2px rgba(47, 23, 37, 0.04), 0 18px 42px rgba(189, 47, 113, 0.13);
+  --cc-menu-focus-shadow: 0 0 0 3px rgba(189, 47, 113, 0.16);
+  --cc-scrollbar-track-color: rgba(189, 47, 113, 0.1);
+  --cc-scrollbar-thumb-color: rgba(189, 47, 113, 0.38);
+  --cc-scrollbar-thumb-hover-color: #bd2f71;
+}