@class-kit/vue 0.1.1 → 0.1.3

package/dist/styles/base.css

@@ -3,33 +3,43 @@
     ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     sans-serif;
   --cc-radius-sm: 4px;
-  --cc-radius-md: 8px;
-  --cc-radius-lg: 10px;
+  --cc-radius-md: 4px;
+  --cc-radius-lg: 4px;
   --cc-radius-pill: 999px;
-  --cc-color-text: #111111;
-  --cc-color-muted: #626262;
-  --cc-color-border: #d8d8d8;
-  --cc-color-border-hover: #a3a3a3;
-  --cc-color-border-focus: #111111;
-  --cc-color-divider: #e9e9e9;
+  --cc-color-text: #1d2129;
+  --cc-color-muted: #86909c;
+  --cc-color-border: #e5e6eb;
+  --cc-color-border-hover: #c9cdd4;
+  --cc-color-border-focus: #1d2129;
+  --cc-color-divider: #f2f3f5;
   --cc-color-surface: #ffffff;
-  --cc-color-surface-soft: #f7f7f7;
-  --cc-color-danger: #b91c1c;
-  --cc-color-success: #166534;
-  --cc-color-warning: #92400e;
-  --cc-color-accent: #111111;
-  --cc-color-accent-hover: #000000;
+  --cc-color-surface-soft: #f7f8fa;
+  --cc-page-background: var(--cc-color-surface-soft);
+  --cc-page-background-image: none;
+  --cc-page-color: var(--cc-color-text);
+  --cc-page-muted-color: var(--cc-color-muted);
+  --cc-page-accent-color: var(--cc-color-accent);
+  --cc-page-surface-color: var(--cc-color-surface);
+  --cc-color-danger: #f53f3f;
+  --cc-color-success: #00b42a;
+  --cc-color-warning: #ff7d00;
+  --cc-color-accent: #1d2129;
+  --cc-color-accent-hover: #0a0c10;
   --cc-color-accent-contrast: #ffffff;
-  --cc-shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.18);
-  --cc-shadow-floating: 0 22px 64px rgba(124, 58, 237, 0.2);
+  --cc-scrollbar-size: 4px;
+  --cc-scrollbar-track-color: rgba(29, 33, 41, 0.06);
+  --cc-scrollbar-thumb-color: rgba(29, 33, 41, 0.42);
+  --cc-scrollbar-thumb-hover-color: rgba(29, 33, 41, 0.68);
+  --cc-shadow-focus: 0 0 0 3px rgba(29, 33, 41, 0.18);
+  --cc-shadow-floating: 0 22px 64px rgba(29, 33, 41, 0.2);
   --cc-form-gap: 16px;
   --cc-form-control-height: 40px;
   --cc-form-control-radius: var(--cc-radius-md);
-  --cc-form-control-background: transparent;
-  --cc-form-control-hover-background: transparent;
-  --cc-form-control-focus-background: transparent;
-  --cc-form-control-readonly-background: transparent;
-  --cc-form-control-disabled-background: transparent;
+  --cc-form-control-background: var(--cc-form-color-surface);
+  --cc-form-control-hover-background: var(--cc-form-color-surface-soft);
+  --cc-form-control-focus-background: var(--cc-form-color-surface);
+  --cc-form-control-readonly-background: var(--cc-form-color-surface-soft);
+  --cc-form-control-disabled-background: var(--cc-form-color-surface-soft);
   --cc-form-placeholder-color: var(--cc-color-muted);
   --cc-form-placeholder-font-size: inherit;
   --cc-form-font: var(--cc-font-family);
@@ -50,11 +60,7 @@
   --cc-form-shadow-focus: var(--cc-shadow-focus);
   --cc-form-shadow-floating: var(--cc-shadow-floating);
   --cc-form-disabled-background: var(--cc-form-control-disabled-background);
-  --cc-form-disabled-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-muted) 42%,
-    var(--cc-form-color-border)
-  );
+  --cc-form-disabled-border-color: var(--cc-form-color-border);
   --cc-form-disabled-color: var(--cc-form-color-muted);
   --cc-form-disabled-opacity: 0.58;
   --cc-form-readonly-background: var(--cc-form-control-readonly-background);
@@ -66,11 +72,7 @@
   --cc-select-menu-text-color: var(--cc-form-color-text);
   --cc-select-menu-shadow: var(--cc-form-shadow-floating);
   --cc-select-option-hover-color: var(--cc-form-color-surface-soft);
-  --cc-select-option-selected-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 12%,
-    transparent
-  );
+  --cc-select-option-selected-color: rgba(29, 33, 41, 0.08);
   --cc-select-option-selected-text-color: var(--cc-form-color-accent);
   --cc-select-check-color: var(--cc-form-color-accent);
   --cc-select-placeholder-color: var(--cc-form-placeholder-color);
@@ -87,59 +89,32 @@
   --cc-switch-track-checked-background: var(--cc-form-color-accent);
   --cc-switch-thumb-background: var(--cc-form-color-surface);
   --cc-switch-thumb-shadow: 0 1px 3px rgba(23, 32, 38, 0.24);
-  --cc-rating-star-color: var(--cc-form-color-border);
+  --cc-rating-star-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: var(--cc-form-color-accent);
-  --cc-canvas-editor-background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 5%,
-    var(--cc-form-color-surface)
-  );
+  --cc-canvas-editor-background: var(--cc-form-color-surface);
   --cc-canvas-editor-card-background: var(--cc-form-color-surface);
   --cc-canvas-editor-card-border-color: var(--cc-form-color-border);
-  --cc-canvas-editor-card-shadow: 0 10px 24px rgba(49, 32, 88, 0.08);
-  --cc-canvas-editor-line-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 48%,
-    var(--cc-form-color-border)
-  );
+  --cc-canvas-editor-card-shadow: 0 10px 24px rgba(29, 33, 41, 0.08);
+  --cc-canvas-editor-line-color: var(--cc-form-color-border);
   --cc-canvas-editor-muted-color: var(--cc-form-color-muted);
   --cc-canvas-editor-text-color: var(--cc-form-color-text);
-  --cc-canvas-editor-grid-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 10%,
-    transparent
-  );
-  --cc-canvas-editor-selection-ring: 0 0 0 2px
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
+  --cc-canvas-editor-grid-color: rgba(29, 33, 41, 0.08);
+  --cc-canvas-editor-selection-ring: 0 0 0 2px rgba(29, 33, 41, 0.18);
   --cc-canvas-editor-control-active-background: var(--cc-form-color-accent);
   --cc-canvas-editor-control-active-border-color: var(--cc-form-color-accent);
   --cc-canvas-editor-control-active-color: var(--cc-form-color-accent-contrast);
   --cc-canvas-editor-control-hover-border-color: var(--cc-form-color-accent);
-  --cc-canvas-editor-document-accent-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 8%,
-    transparent
-  );
-  --cc-canvas-editor-node-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 14%,
-    transparent
-  );
-  --cc-canvas-editor-node-editing-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 42%,
-    transparent
-  );
-  --cc-canvas-editor-input-focus-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--cc-form-color-accent) 22%, transparent);
+  --cc-canvas-editor-document-accent-color: rgba(29, 33, 41, 0.12);
+  --cc-canvas-editor-node-border-color: rgba(29, 33, 41, 0.16);
+  --cc-canvas-editor-node-editing-border-color: rgba(29, 33, 41, 0.45);
+  --cc-canvas-editor-input-focus-shadow: inset 0 0 0 1px rgba(29, 33, 41, 0.2);
   --cc-canvas-editor-mind-glow: radial-gradient(
     circle at 50% 45%,
-    color-mix(in srgb, var(--cc-form-color-accent) 8%, transparent),
+    rgba(29, 33, 41, 0.12),
     transparent 44%
   );
   --cc-canvas-editor-card-selected-border-color: var(--cc-form-color-accent);
-  --cc-canvas-editor-card-selected-shadow: 0 12px 30px
-    color-mix(in srgb, var(--cc-form-color-accent) 12%, transparent);
+  --cc-canvas-editor-card-selected-shadow: 0 12px 30px rgba(29, 33, 41, 0.16);
   --cc-color-picker-swatch-radius: var(--cc-radius-md);
   --cc-date-picker-panel-radius: var(--cc-radius-lg);
   --cc-date-picker-panel-shadow: var(--cc-form-shadow-floating);
@@ -147,16 +122,8 @@
   --cc-date-picker-day-selected-background: var(--cc-form-color-accent);
   --cc-date-picker-day-selected-color: var(--cc-form-color-accent-contrast);
   --cc-date-picker-day-today-ring: inset 0 0 0 1px var(--cc-form-color-accent);
-  --cc-date-range-summary-active-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 48%,
-    var(--cc-form-color-border)
-  );
-  --cc-date-range-day-in-range-background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 12%,
-    transparent
-  );
+  --cc-date-range-summary-active-border-color: var(--cc-form-color-border);
+  --cc-date-range-day-in-range-background: rgba(29, 33, 41, 0.08);
   --cc-calendar-day-hover-background: var(
     --cc-date-picker-day-hover-background
   );
@@ -169,16 +136,11 @@
   --cc-verification-code-radius: var(--cc-radius-md);
   --cc-verification-code-border: var(--cc-form-color-border);
   --cc-verification-code-focus-border: var(--cc-form-color-accent);
-  --cc-verification-code-focus-shadow: 0 0 0 3px
-    color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent);
+  --cc-verification-code-focus-shadow: 0 0 0 3px rgba(29, 33, 41, 0.18);
   --cc-slide-captcha-radius: var(--cc-radius-lg);
   --cc-slide-captcha-border-color: var(--cc-form-color-border);
   --cc-slide-captcha-track-background: var(--cc-form-color-surface-soft);
-  --cc-slide-captcha-track-fill: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 18%,
-    transparent
-  );
+  --cc-slide-captcha-track-fill: rgba(29, 33, 41, 0.16);
   --cc-slide-captcha-thumb-background: var(--cc-form-color-accent);
   --cc-slide-captcha-thumb-color: var(--cc-form-color-accent-contrast);
   --cc-slide-captcha-success-color: var(--cc-form-color-success);
@@ -197,121 +159,113 @@
   --cc-code-border-color: transparent;
   --cc-code-text-color: var(--cc-form-color-text);
   --cc-code-padding: 10px;
-  --cc-qr-code-logo-shadow: 0 4px 14px rgba(49, 32, 88, 0.16);
+  --cc-qr-code-logo-shadow: 0 4px 14px rgba(29, 33, 41, 0.16);
   --cc-lazy-image-radius: var(--cc-radius-lg);
   --cc-lazy-image-border-color: transparent;
   --cc-lazy-image-placeholder-background: transparent;
   --cc-lazy-image-placeholder-color: var(--cc-form-color-muted);
-  --cc-lazy-image-skeleton-color: color-mix(
-    in srgb,
-    var(--cc-form-color-muted) 16%,
-    transparent
-  );
-  --cc-lazy-image-skeleton-highlight-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 16%,
-    transparent
-  );
+  --cc-lazy-image-skeleton-color: rgba(100, 116, 139, 0);
+  --cc-lazy-image-skeleton-highlight-color: rgba(255, 255, 255, 0.72);
   --cc-lazy-image-error-color: var(--cc-form-color-danger);
   --cc-lazy-image-transition-duration: var(--cc-animation-duration);
   --cc-tilt-card-background: var(--cc-form-color-surface);
   --cc-tilt-card-border-color: var(--cc-form-color-border);
   --cc-tilt-card-color: var(--cc-form-color-text);
   --cc-tilt-card-radius: var(--cc-radius-lg);
-  --cc-tilt-card-shadow: 0 18px 42px rgba(49, 32, 88, 0.14);
-  --cc-tilt-card-shadow-active: 0 24px 64px rgba(124, 58, 237, 0.22);
+  --cc-tilt-card-shadow: 0 18px 42px rgba(29, 33, 41, 0.14);
+  --cc-tilt-card-shadow-active: 0 24px 64px rgba(29, 33, 41, 0.22);
   --cc-tilt-card-glare-color: rgba(255, 255, 255, 0.55);
+  --cc-orbital-sphere-size: 360px;
+  --cc-orbital-sphere-radius: 50%;
+  --cc-orbital-sphere-item-size: 72px;
+  --cc-orbital-sphere-duration: 9000ms;
+  --cc-orbital-sphere-cycle-duration: 12000ms;
+  --cc-orbital-sphere-border-color: rgba(15, 23, 42, 0.16);
+  --cc-orbital-sphere-shadow-color: rgba(15, 23, 42, 0.08);
+  --cc-orbital-sphere-item-background: rgba(255, 255, 255, 1);
+  --cc-orbital-sphere-item-border-color: rgba(100, 116, 139, 1);
+  --cc-menu-width: 240px;
+  --cc-menu-collapsed-width: 64px;
+  --cc-menu-item-height: 40px;
+  --cc-menu-collapsed-item-size: 48px;
+  --cc-menu-icon-size: 28px;
+  --cc-menu-icon-inner-size: 18px;
+  --cc-menu-icon-radius: var(--cc-radius-md);
+  --cc-menu-background: var(--cc-form-color-surface);
+  --cc-menu-border-color: var(--cc-form-color-border);
+  --cc-menu-text-color: var(--cc-form-color-text);
+  --cc-menu-muted-color: var(--cc-form-color-muted);
+  --cc-menu-item-color: var(--cc-menu-text-color);
+  --cc-menu-item-muted-color: var(--cc-menu-muted-color);
+  --cc-menu-item-hover-background: var(--cc-form-control-hover-background);
+  --cc-menu-item-hover-color: var(--cc-menu-text-color);
+  --cc-menu-item-active-background: rgba(29, 33, 41, 0.08);
+  --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: var(--cc-menu-muted-color);
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-menu-shadow: 0 18px 42px rgba(29, 33, 41, 0.08);
+  --cc-menu-focus-shadow: var(--cc-form-shadow-focus);
+  --cc-code-preview-background: var(--cc-form-color-surface);
+  --cc-code-preview-bar-background: var(--cc-code-preview-background);
+  --cc-code-preview-panel-background: var(--cc-form-color-surface-soft);
+  --cc-code-preview-border-color: var(--cc-form-color-border);
+  --cc-code-preview-color: var(--cc-form-color-text);
+  --cc-code-preview-muted-color: var(--cc-form-color-muted);
+  --cc-code-preview-accent-color: var(--cc-form-color-accent);
+  --cc-code-preview-line-color: rgba(29, 33, 41, 0.12);
+  --cc-code-preview-shadow: var(--cc-form-shadow-floating);
+  --cc-drag-drop-preview-background: var(
+    --cc-drag-drop-slot-dragging-background
+  );
+  --cc-drag-drop-preview-border-color: var(
+    --cc-drag-drop-slot-dragging-border-color
+  );
+  --cc-drag-drop-preview-color: var(--cc-form-color-text);
   --cc-gradient-text-background: linear-gradient(
     90deg,
     var(--cc-form-color-accent),
-    #ec4899,
-    #22d3ee
+    #d64d8c,
+    #36bffb
   );
   --cc-gradient-text-background-size: 200% 100%;
   --cc-gradient-text-duration: 3600ms;
   --cc-gradient-text-easing: cubic-bezier(0.22, 0.8, 0.28, 1);
   --cc-gradient-text-font-weight: 700;
   --cc-design-effect-color-1: var(--cc-form-color-accent);
-  --cc-design-effect-color-2: #ec4899;
-  --cc-design-effect-color-3: #22d3ee;
+  --cc-design-effect-color-2: #d64d8c;
+  --cc-design-effect-color-3: #36bffb;
   --cc-design-effect-alpha: 0.72;
   --cc-design-effect-radius: var(--cc-radius-lg);
-  --cc-design-effect-border-color: color-mix(
-    in srgb,
-    var(--cc-design-effect-color-1) 34%,
-    var(--cc-form-color-border)
-  );
-  --cc-design-effect-background: color-mix(
-    in srgb,
-    var(--cc-form-color-surface) 88%,
-    transparent
-  );
-  --cc-design-effect-shadow: 0 18px 48px
-    color-mix(in srgb, var(--cc-design-effect-color-1) 18%, transparent);
+  --cc-design-effect-border-color: var(--cc-form-color-border);
+  --cc-design-effect-background: rgba(255, 255, 255, 1);
+  --cc-design-effect-shadow: 0 18px 48px rgba(29, 33, 41, 0.18);
   --cc-typewriter-loading-color: var(--cc-form-color-accent);
   --cc-typewriter-cursor-color: var(--cc-form-color-accent);
   --cc-video-player-radius: var(--cc-radius-lg);
-  --cc-video-player-controls-background: color-mix(
-    in srgb,
-    var(--cc-form-color-surface) 88%,
-    transparent
-  );
+  --cc-video-player-controls-background: rgba(255, 255, 255, 1);
   --cc-video-player-controls-color: var(--cc-form-color-text);
-  --cc-business-surface: color-mix(
-    in srgb,
-    var(--cc-form-color-surface) 92%,
-    transparent
-  );
-  --cc-business-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-border) 82%,
-    transparent
-  );
+  --cc-business-surface: rgba(255, 255, 255, 1);
+  --cc-business-border-color: rgba(100, 116, 139, 1);
   --cc-business-text-color: var(--cc-form-color-text);
   --cc-business-muted-color: var(--cc-form-color-muted);
   --cc-danmaku-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
-  --cc-drag-drop-slot-dragging-background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 8%,
-    transparent
-  );
-  --cc-drag-drop-slot-dragging-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 38%,
-    transparent
-  );
-  --cc-drag-drop-slot-over-background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 10%,
-    transparent
-  );
-  --cc-drag-drop-slot-over-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 46%,
-    transparent
-  );
-  --cc-drag-drop-preview-shadow: 0 18px 42px
-    color-mix(in srgb, var(--cc-form-color-accent) 26%, transparent);
-  --cc-progress-track-color: color-mix(
-    in srgb,
-    var(--cc-form-color-border) 70%,
-    transparent
-  );
+  --cc-drag-drop-slot-dragging-background: rgba(22, 119, 255, 0.08);
+  --cc-drag-drop-slot-dragging-border-color: rgba(22, 119, 255, 0.35);
+  --cc-drag-drop-slot-over-background: rgba(22, 119, 255, 0.12);
+  --cc-drag-drop-slot-over-border-color: rgba(22, 119, 255, 0.46);
+  --cc-drag-drop-preview-shadow: 0 18px 42px rgba(22, 119, 255, 0.22);
+  --cc-progress-track-color: rgba(100, 116, 139, 1);
   --cc-progress-fill-color: var(--cc-form-color-accent);
   --cc-progress-thumb-color: var(--cc-form-color-surface);
-  --cc-progress-thumb-shadow: 0 0 0 4px
-    color-mix(in srgb, var(--cc-form-color-accent) 16%, transparent);
+  --cc-progress-thumb-shadow: 0 0 0 4px rgba(29, 33, 41, 0.16);
   --cc-signature-border-color: var(--cc-form-color-border);
   --cc-signature-border-radius: var(--cc-radius-lg);
   --cc-signature-action-bg: var(--cc-form-color-surface);
   --cc-signature-action-color: var(--cc-form-color-text);
   --cc-signature-action-hover-bg: var(--cc-form-color-hover);
   --cc-signature-action-disabled-color: var(--cc-form-color-placeholder);
-  --cc-signature-guide-color: color-mix(
-    in srgb,
-    var(--cc-form-color-muted) 26%,
-    transparent
-  );
+  --cc-signature-guide-color: rgba(100, 116, 139, 0);
   --cc-timeline-color: var(--cc-form-color-text);
   --cc-timeline-muted-color: var(--cc-form-color-muted);
   --cc-timeline-line-color: var(--cc-form-color-border);
@@ -320,11 +274,7 @@
   --cc-floating-ball-color: var(--cc-form-color-accent-contrast);
   --cc-picker-option-height: 38px;
   --cc-picker-active-color: var(--cc-form-color-accent);
-  --cc-picker-indicator-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 42%,
-    var(--cc-form-color-border)
-  );
+  --cc-picker-indicator-border-color: var(--cc-form-color-border);
   --cc-picker-mask-background: var(--cc-form-color-surface);
   --cc-swiper-radius: var(--cc-radius-lg);
   --cc-swiper-arrow-background: rgba(255, 255, 255, 0.76);
@@ -337,19 +287,21 @@
   --cc-chat-virtual-list-radius: var(--cc-radius-lg);
   --cc-chat-virtual-list-text-color: var(--cc-form-color-text);
   --cc-button-radius: var(--cc-form-control-radius);
-  --cc-button-shadow: 0 1px 2px rgba(49, 32, 88, 0.08);
+  --cc-button-shadow: 0 1px 2px rgba(29, 33, 41, 0.08);
   --cc-button-primary-background: var(--cc-form-color-accent);
   --cc-button-primary-background-hover: var(--cc-form-color-accent-hover);
   --cc-button-primary-color: var(--cc-form-color-accent-contrast);
-  --cc-button-primary-shadow-hover: 0 8px 20px
-    color-mix(in srgb, var(--cc-form-color-accent) 22%, transparent);
+  --cc-button-primary-shadow-hover: 0 8px 20px rgba(29, 33, 41, 0.18);
   --cc-button-secondary-background: var(--cc-form-color-surface-soft);
   --cc-button-secondary-border-color: var(--cc-form-color-border);
   --cc-button-secondary-color: var(--cc-form-color-text);
   --cc-button-ghost-color: var(--cc-form-color-accent);
   --cc-button-danger-background: var(--cc-form-color-danger);
   --cc-button-danger-color: #fff;
-  --cc-modal-overlay-background: rgba(31, 26, 46, 0.52);
+  --cc-button-hover-transform: translateY(-1px);
+  --cc-button-active-transform: translateY(0);
+  --cc-button-active-shadow: var(--cc-button-shadow);
+  --cc-modal-overlay-background: rgba(29, 33, 41, 0.52);
   --cc-modal-radius: var(--cc-radius-lg);
   --cc-modal-background: var(--cc-form-color-surface);
   --cc-modal-color: var(--cc-form-color-text);
@@ -373,29 +325,33 @@
   --cc-popup-header-background: var(--cc-modal-header-background);
   --cc-popup-header-border-color: var(--cc-form-color-divider);
   --cc-popup-header-color: var(--cc-form-color-text);
-  --cc-popup-max-size: min(420px, 86vw);
+  --cc-popup-max-size: 420px;
   --cc-popup-slide-distance: 100%;
   --cc-popup-overlay-enter-opacity: 1;
   --cc-popup-overlay-exit-opacity: 0;
-  --cc-tooltip-background: #2f2450;
+  --cc-tooltip-background: #1d2129;
   --cc-tooltip-color: #fff;
   --cc-tooltip-radius: var(--cc-radius-md);
-  --cc-tooltip-shadow: 0 10px 24px rgba(49, 32, 88, 0.2);
+  --cc-tooltip-shadow: 0 10px 24px rgba(29, 33, 41, 0.2);
   --cc-toast-radius: var(--cc-radius-lg);
   --cc-toast-background: var(--cc-form-color-surface);
   --cc-toast-border-color: var(--cc-form-color-border);
   --cc-toast-accent-color: var(--cc-form-color-accent);
-  --cc-toast-shadow: 0 12px 30px rgba(49, 32, 88, 0.16);
+  --cc-toast-shadow: 0 12px 30px rgba(29, 33, 41, 0.16);
   --cc-toast-slide-distance: 16px;
   --cc-toast-scale-enter: 0.9;
   --cc-toast-scale-active: 1;
+  --cc-toast-stack-gap: 10px;
+  --cc-toast-max-height: 160px;
   --cc-tabs-radius: var(--cc-radius-lg);
   --cc-tabs-list-border-color: var(--cc-form-color-border);
-  --cc-tabs-tab-color: var(--cc-form-color-muted);
+  --cc-tabs-tab-color: var(--cc-form-color-text);
+  --cc-tabs-tab-hover-background: rgba(29, 33, 41, 0.08);
+  --cc-tabs-tab-hover-color: var(--cc-form-color-accent);
+  --cc-tabs-tab-active-background: var(--cc-form-color-surface);
   --cc-tabs-tab-active-color: var(--cc-form-color-accent);
   --cc-animation-duration: 180ms;
   --cc-animation-easing: cubic-bezier(0.22, 0.8, 0.28, 1);
-  --cc-theme-backdrop-filter: none;
   --cc-theme-glass-highlight: linear-gradient(
     135deg,
     rgba(255, 255, 255, 0.72),
@@ -403,15 +359,26 @@
   );
 }
 
+html[data-cc-theme-page="true"] {
+  background: var(--cc-page-background);
+  color: var(--cc-page-color);
+  min-height: 100%;
+}
+
+html[data-cc-theme-page="true"] body {
+  min-height: 100vh;
+  margin: 0;
+  background: var(--cc-page-background-image), var(--cc-page-background);
+  color: var(--cc-page-color);
+  font-family: var(--cc-font-family);
+  text-rendering: optimizeLegibility;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .cc-chat-virtual-list__top-loading {
+  .cc-loading.cc-chat-virtual-list__top-loading {
     transition-duration: 1ms;
   }
 
-  .cc-chat-virtual-list__top-loading::before {
-    animation: none;
-  }
-
   .cc-rolling-number__track {
     transition-duration: 1ms;
   }
@@ -431,6 +398,8 @@
   .cc-popup__overlay,
   .cc-popup__panel,
   .cc-tooltip__content,
+  .cc-orbital-sphere__stage,
+  .cc-orbital-sphere__item,
   .cc-tilt-card,
   .cc-tilt-card__surface,
   .cc-tilt-card__glare,
@@ -445,6 +414,8 @@
   .cc-design-effect,
   .cc-design-effect__overlay,
   .cc-design-effect::after,
+  .cc-orbital-sphere__stage,
+  .cc-orbital-sphere__item,
   .cc-typewriter-text__cursor {
     animation: none;
   }

package/dist/styles/components/backtop.css

@@ -7,12 +7,8 @@
   border: 0;
   border-radius: var(--cc-radius-pill);
   bottom: 28px;
-  box-shadow: var(
-    --cc-backtop-shadow,
-    0 10px 24px color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent)
-  );
+  box-shadow: var(--cc-backtop-shadow, 0 10px 24px rgba(22, 119, 255, 0));
   color: var(--cc-backtop-color, var(--cc-form-color-accent-contrast));
-  contain: layout paint style;
   cursor: pointer;
   display: inline-flex;
   font: inherit;
@@ -42,20 +38,18 @@
     --cc-backtop-background-hover,
     var(--cc-form-color-accent-hover)
   );
-  box-shadow: var(
-    --cc-backtop-shadow-hover,
-    0 14px 30px color-mix(in srgb, var(--cc-form-color-accent) 30%, transparent)
-  );
+  box-shadow: var(--cc-backtop-shadow-hover, 0 14px 30px rgba(22, 119, 255, 0));
+}
+
+.cc-backtop:focus {
+  box-shadow: var(--cc-backtop-shadow, 0 10px 24px rgba(22, 119, 255, 0));
+  outline: none;
 }
 
 .cc-backtop:focus-visible {
   box-shadow:
     var(--cc-form-shadow-focus),
-    var(
-      --cc-backtop-shadow-hover,
-      0 14px 30px
-        color-mix(in srgb, var(--cc-form-color-accent) 30%, transparent)
-    );
+    var(--cc-backtop-shadow-hover, 0 14px 30px rgba(22, 119, 255, 0));
 }
 
 .cc-backtop:active {