@class-kit/vue 0.1.2 → 0.1.4

package/dist/styles/base.css

@@ -14,6 +14,12 @@
   --cc-color-divider: #f2f3f5;
   --cc-color-surface: #ffffff;
   --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;
@@ -21,13 +27,9 @@
   --cc-color-accent-hover: #0a0c10;
   --cc-color-accent-contrast: #ffffff;
   --cc-scrollbar-size: 4px;
-  --cc-scrollbar-track-color: transparent;
-  --cc-scrollbar-thumb-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 56%,
-    transparent
-  );
-  --cc-scrollbar-thumb-hover-color: var(--cc-form-color-accent);
+  --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;
@@ -58,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);
@@ -74,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);
@@ -95,63 +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: 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-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(29, 33, 41, 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-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);
@@ -159,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
   );
@@ -181,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);
@@ -214,16 +164,8 @@
   --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);
@@ -238,26 +180,10 @@
   --cc-orbital-sphere-item-size: 72px;
   --cc-orbital-sphere-duration: 9000ms;
   --cc-orbital-sphere-cycle-duration: 12000ms;
-  --cc-orbital-sphere-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-text) 16%,
-    transparent
-  );
-  --cc-orbital-sphere-shadow-color: color-mix(
-    in srgb,
-    var(--cc-form-color-text) 28%,
-    transparent
-  );
-  --cc-orbital-sphere-item-background: color-mix(
-    in srgb,
-    var(--cc-form-color-surface) 78%,
-    transparent
-  );
-  --cc-orbital-sphere-item-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-border) 86%,
-    transparent
-  );
+  --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;
@@ -273,16 +199,13 @@
   --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: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 10%,
-    transparent
-  );
+  --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);
@@ -290,11 +213,7 @@
   --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: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 32%,
-    transparent
-  );
+  --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
@@ -318,82 +237,35 @@
   --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);
@@ -402,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);
@@ -423,8 +291,7 @@
   --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);
@@ -458,7 +325,7 @@
   --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;
@@ -478,27 +345,13 @@
   --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: color-mix(
-    in srgb,
-    var(--cc-form-color-text) 72%,
-    var(--cc-form-color-muted)
-  );
-  --cc-tabs-tab-hover-background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 8%,
-    transparent
-  );
+  --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: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 12%,
-    var(--cc-form-color-surface)
-  );
+  --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-overlay-backdrop-filter: none;
   --cc-theme-glass-highlight: linear-gradient(
     135deg,
     rgba(255, 255, 255, 0.72),
@@ -506,28 +359,19 @@
   );
 }
 
-* {
-  scrollbar-color: var(--cc-scrollbar-thumb-color)
-    var(--cc-scrollbar-track-color);
-  scrollbar-width: thin;
-}
-
-*::-webkit-scrollbar {
-  height: var(--cc-scrollbar-size);
-  width: var(--cc-scrollbar-size);
-}
-
-*::-webkit-scrollbar-track {
-  background: var(--cc-scrollbar-track-color);
-}
-
-*::-webkit-scrollbar-thumb {
-  background: var(--cc-scrollbar-thumb-color);
-  border-radius: var(--cc-radius-pill);
+html[data-cc-theme-page="true"] {
+  background: var(--cc-page-background);
+  color: var(--cc-page-color);
+  min-height: 100%;
 }
 
-*::-webkit-scrollbar-thumb:hover {
-  background: var(--cc-scrollbar-thumb-hover-color);
+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) {

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 {

package/dist/styles/components/barcode.css

@@ -42,8 +42,7 @@
   background: var(--cc-code-preview-bar-background);
   border: 1px solid var(--cc-code-preview-border-color);
   border-radius: var(--cc-radius-lg);
-  box-shadow: inset 0 1px 0
-    color-mix(in srgb, var(--cc-code-preview-background) 84%, transparent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
   display: flex;
   gap: 12px;
   justify-content: space-between;
@@ -67,11 +66,7 @@
 }
 
 .cc-code-preview__lang {
-  background: color-mix(
-    in srgb,
-    var(--cc-code-preview-panel-background) 78%,
-    transparent
-  );
+  background: rgba(255, 255, 255, 1);
   border: 1px solid var(--cc-code-preview-border-color);
   border-radius: 999px;
   color: var(--cc-code-preview-muted-color);
@@ -109,11 +104,7 @@
 }
 
 .cc-code-preview__actions button:hover {
-  background: color-mix(
-    in srgb,
-    var(--cc-code-preview-accent-color) 7%,
-    var(--cc-code-preview-background)
-  );
+  background: var(--cc-code-preview-background);
   border-color: var(--cc-code-preview-accent-color);
   color: var(--cc-code-preview-accent-color);
 }
@@ -122,35 +113,34 @@
   transform: translateY(1px);
 }
 
+.cc-code-preview__actions button:focus {
+  outline: none;
+}
+
 .cc-code-preview__actions button:focus-visible {
-  outline: 2px solid
-    color-mix(in srgb, var(--cc-code-preview-accent-color) 28%, transparent);
+  outline: 2px solid rgba(22, 119, 255, 0);
   outline-offset: 2px;
 }
 
 .cc-code-preview__panel {
   background:
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--cc-code-preview-background) 42%, transparent),
-      transparent 36%
-    ),
+    linear-gradient(180deg, rgba(255, 255, 255, 0), transparent 36%),
     var(--cc-code-preview-panel-background);
   border: 1px solid var(--cc-code-preview-border-color);
   border-radius: var(--cc-radius-lg);
   box-shadow:
-    inset 0 1px 0
-      color-mix(in srgb, var(--cc-code-preview-background) 78%, transparent),
+    inset 0 1px 0 rgba(255, 255, 255, 1),
     var(--cc-code-preview-shadow);
   left: 0;
   margin: 0;
-  max-height: min(420px, calc(100vh - 48px));
+  max-height: calc(100vh - 48px);
   overflow: auto;
   padding: 0;
   position: absolute;
   right: auto;
   top: calc(100% + 10px);
-  width: min(720px, calc(100vw - 48px));
+  max-width: 720px;
+  width: calc(100vw - 48px);
   z-index: 40;
 }
 
@@ -168,7 +158,7 @@
 .cc-code-preview[data-strategy="fixed"] .cc-code-preview__panel,
 .cc-code-preview__panel[data-strategy="fixed"] {
   bottom: auto;
-  max-height: min(420px, calc(100dvh - 20px));
+  max-height: calc(100vh - 20px);
   position: fixed;
   right: auto;
   z-index: 1000;

package/dist/styles/components/button.css

@@ -65,27 +65,14 @@
 }
 
 .cc-button--soft {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 12%,
-    var(--cc-form-color-surface)
-  );
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 20%,
-    var(--cc-form-color-border)
-  );
+  background: var(--cc-form-color-surface);
+  border-color: var(--cc-form-color-border);
   color: var(--cc-form-color-accent);
 }
 
 .cc-button--soft:hover:not(:disabled) {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 18%,
-    var(--cc-form-color-surface)
-  );
-  box-shadow: 0 10px 24px
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
+  background: var(--cc-form-color-surface);
+  box-shadow: 0 10px 24px rgba(22, 119, 255, 0);
 }
 
 .cc-button--shine {
@@ -126,22 +113,18 @@
 }
 
 .cc-button--neon {
-  background: color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent);
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 60%,
-    transparent
-  );
+  background: rgba(22, 119, 255, 0);
+  border-color: rgba(22, 119, 255, 1);
   box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--cc-form-color-accent) 28%, transparent),
-    0 0 22px color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent);
+    0 0 0 1px rgba(22, 119, 255, 0),
+    0 0 22px rgba(22, 119, 255, 0);
   color: var(--cc-form-color-accent);
 }
 
 .cc-button--neon:hover:not(:disabled) {
   box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--cc-form-color-accent) 48%, transparent),
-    0 0 34px color-mix(in srgb, var(--cc-form-color-accent) 34%, transparent);
+    0 0 0 1px rgba(22, 119, 255, 0),
+    0 0 34px rgba(22, 119, 255, 0);
 }
 
 .cc-button__spinner {

package/dist/styles/components/calendar.css

@@ -101,7 +101,7 @@
 }
 
 .cc-calendar__festival {
-  background: color-mix(in srgb, var(--cc-form-color-accent) 12%, transparent);
+  background: rgba(22, 119, 255, 0);
   border-radius: var(--cc-radius-pill);
   color: var(--cc-form-color-accent);
   display: inline-flex;
@@ -140,7 +140,7 @@
 }
 
 .cc-calendar__day[data-selected="true"] .cc-calendar__festival {
-  background: color-mix(in srgb, currentColor 16%, transparent);
+  background: rgba(15, 23, 42, 0);
 }
 
 .cc-calendar__day:disabled,