@class-kit/vue 0.1.2 → 0.1.3

package/dist/styles/components/skeleton.css

@@ -21,7 +21,7 @@
 }
 
 .cc-skeleton__mask {
-  background: color-mix(in srgb, var(--cc-form-color-muted) 16%, transparent);
+  background: rgba(100, 116, 139, 0);
   border-radius: var(--cc-skeleton-radius, inherit);
   inset: 0;
   overflow: hidden;
@@ -33,15 +33,15 @@
   animation: cc-lazy-image-skeleton 1.2s ease-in-out infinite;
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--cc-form-color-muted) 12%, transparent),
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent),
-    color-mix(in srgb, var(--cc-form-color-muted) 12%, transparent)
+    rgba(100, 116, 139, 0),
+    rgba(22, 119, 255, 0),
+    rgba(100, 116, 139, 0)
   );
   background-size: 220% 100%;
 }
 
 .cc-skeleton[data-overlay="false"] > span {
-  background: color-mix(in srgb, var(--cc-form-color-muted) 16%, transparent);
+  background: rgba(100, 116, 139, 0);
   border-radius: var(--cc-radius-pill);
   display: block;
   height: 14px;
@@ -52,9 +52,9 @@
   animation: cc-lazy-image-skeleton 1.2s ease-in-out infinite;
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--cc-form-color-muted) 12%, transparent),
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent),
-    color-mix(in srgb, var(--cc-form-color-muted) 12%, transparent)
+    rgba(100, 116, 139, 0),
+    rgba(22, 119, 255, 0),
+    rgba(100, 116, 139, 0)
   );
   background-size: 220% 100%;
 }

package/dist/styles/components/slide-captcha.css

@@ -1,7 +1,8 @@
 @import "../base.css";
 
 .cc-slide-captcha {
-  max-width: min(100%, var(--cc-slide-captcha-width, 320px));
+  max-width: var(--cc-slide-captcha-width, 320px);
+  width: 100%;
 }
 
 .cc-slide-captcha__card {
@@ -75,16 +76,8 @@
 .cc-slide-captcha__result {
   align-items: center;
   background:
-    radial-gradient(
-      circle at 50% 48%,
-      color-mix(
-        in srgb,
-        var(--cc-slide-captcha-success-color) 18%,
-        transparent
-      ),
-      transparent 46%
-    ),
-    color-mix(in srgb, var(--cc-form-color-surface) 70%, transparent);
+    radial-gradient(circle at 50% 48%, rgba(0, 180, 42, 0), transparent 46%),
+    rgba(255, 255, 255, 1);
   display: flex;
   inset: 0;
   justify-content: center;
@@ -100,15 +93,13 @@
   align-items: center;
   background: linear-gradient(
     145deg,
-    color-mix(in srgb, var(--cc-slide-captcha-success-color) 18%, white),
+    white,
     var(--cc-slide-captcha-success-color)
   );
   border-radius: var(--cc-radius-pill);
   box-shadow:
-    0 18px 38px
-      color-mix(in srgb, var(--cc-slide-captcha-success-color) 34%, transparent),
-    0 0 0 10px
-      color-mix(in srgb, var(--cc-slide-captcha-success-color) 12%, transparent);
+    0 18px 38px rgba(0, 180, 42, 0),
+    0 0 0 10px rgba(0, 180, 42, 0);
   color: var(--cc-form-color-accent-contrast);
   display: inline-flex;
   font: 900 42px/1 var(--cc-font-family);
@@ -120,8 +111,7 @@
 
 .cc-slide-captcha__result-icon::before,
 .cc-slide-captcha__result-icon::after {
-  border: 2px solid
-    color-mix(in srgb, var(--cc-slide-captcha-success-color) 46%, transparent);
+  border: 2px solid rgba(0, 180, 42, 0);
   border-radius: inherit;
   content: "";
   inset: -10px;
@@ -212,8 +202,7 @@
   background: var(--cc-slide-captcha-thumb-background);
   border: 0;
   border-radius: var(--cc-radius-pill);
-  box-shadow: 0 8px 18px
-    color-mix(in srgb, var(--cc-form-color-accent) 28%, transparent);
+  box-shadow: 0 8px 18px rgba(22, 119, 255, 0);
   color: var(--cc-slide-captcha-thumb-color);
   cursor: grab;
   display: inline-flex;
@@ -265,20 +254,12 @@
 }
 
 .cc-slide-captcha[data-status="success"] .cc-slide-captcha__track {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-slide-captcha-success-color) 48%,
-    var(--cc-slide-captcha-border-color)
-  );
+  border-color: var(--cc-slide-captcha-border-color);
   color: var(--cc-slide-captcha-success-color);
 }
 
 .cc-slide-captcha[data-status="failed"] .cc-slide-captcha__track {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-slide-captcha-error-color) 52%,
-    var(--cc-slide-captcha-border-color)
-  );
+  border-color: var(--cc-slide-captcha-error-color);
   color: var(--cc-slide-captcha-error-color);
 }
 
@@ -358,34 +339,14 @@
   0%,
   100% {
     box-shadow:
-      0 18px 38px
-        color-mix(
-          in srgb,
-          var(--cc-slide-captcha-success-color) 34%,
-          transparent
-        ),
-      0 0 0 10px
-        color-mix(
-          in srgb,
-          var(--cc-slide-captcha-success-color) 12%,
-          transparent
-        );
+      0 18px 38px rgba(0, 180, 42, 0),
+      0 0 0 10px rgba(0, 180, 42, 0);
   }
 
   46% {
     box-shadow:
-      0 20px 44px
-        color-mix(
-          in srgb,
-          var(--cc-slide-captcha-success-color) 46%,
-          transparent
-        ),
-      0 0 0 14px
-        color-mix(
-          in srgb,
-          var(--cc-slide-captcha-success-color) 18%,
-          transparent
-        );
+      0 20px 44px rgba(0, 180, 42, 0),
+      0 0 0 14px rgba(0, 180, 42, 0);
   }
 }
 

package/dist/styles/components/swiper.css

@@ -121,8 +121,7 @@
 .cc-swiper__arrow {
   align-items: center;
   background: var(--cc-swiper-arrow-background);
-  border: 1px solid
-    color-mix(in srgb, var(--cc-form-color-border) 70%, transparent);
+  border: 1px solid rgba(100, 116, 139, 1);
   border-radius: var(--cc-radius-pill);
   color: var(--cc-form-color-text);
   cursor: pointer;
@@ -180,7 +179,7 @@
 }
 
 .cc-swiper__dot {
-  background: color-mix(in srgb, var(--cc-swiper-dot-color) 26%, white);
+  background: white;
   border: 0;
   border-radius: var(--cc-radius-pill);
   cursor: pointer;

package/dist/styles/components/switch.css

@@ -36,43 +36,31 @@
     box-shadow 120ms ease;
 }
 
-.cc-field__control:-webkit-autofill,
-.cc-field__control:-webkit-autofill:hover,
-.cc-field__control:-webkit-autofill:focus,
-.cc-chat-textarea__control:-webkit-autofill,
-.cc-chat-textarea__control:-webkit-autofill:hover,
-.cc-chat-textarea__control:-webkit-autofill:focus,
-.cc-canvas-editor__card input:-webkit-autofill,
-.cc-canvas-editor__card input:-webkit-autofill:hover,
-.cc-canvas-editor__card input:-webkit-autofill:focus,
-.cc-canvas-editor__card textarea:-webkit-autofill,
-.cc-canvas-editor__card textarea:-webkit-autofill:hover,
-.cc-canvas-editor__card textarea:-webkit-autofill:focus {
+.cc-field__control:autofill,
+.cc-field__control:autofill:hover,
+.cc-field__control:autofill:focus,
+.cc-chat-textarea__control:autofill,
+.cc-chat-textarea__control:autofill:hover,
+.cc-chat-textarea__control:autofill:focus,
+.cc-canvas-editor__card input:autofill,
+.cc-canvas-editor__card input:autofill:hover,
+.cc-canvas-editor__card input:autofill:focus,
+.cc-canvas-editor__card textarea:autofill,
+.cc-canvas-editor__card textarea:autofill:hover,
+.cc-canvas-editor__card textarea:autofill:focus {
   box-shadow: 0 0 0 1000px var(--cc-form-control-background) inset;
   caret-color: var(--cc-form-color-text);
   transition:
     background-color 9999s ease-out,
     color 9999s ease-out;
-  -webkit-text-fill-color: var(--cc-form-color-text);
 }
 
-.cc-field__control::-ms-clear,
-.cc-field__control::-ms-reveal,
-.cc-field__control::-webkit-search-cancel-button,
-.cc-field__control::-webkit-search-decoration {
-  display: none;
+.cc-field__control[type="search"] {
+  appearance: none;
 }
 
 .cc-field__control[type="number"] {
   appearance: textfield;
-  -moz-appearance: textfield;
-}
-
-.cc-field__control[type="number"]::-webkit-inner-spin-button,
-.cc-field__control[type="number"]::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-  -webkit-appearance: none;
 }
 
 .cc-field__control--clearable {
@@ -109,6 +97,11 @@
   color: var(--cc-form-color-text);
 }
 
+.cc-field__clear:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-field__clear:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;
@@ -151,9 +144,9 @@
 }
 
 .cc-field__control[data-readonly="true"]:focus,
-.cc-field__control[data-readonly="true"]:focus-visible,
+.cc-field__control[data-readonly="true"]:focus,
 .cc-field[data-readonly="true"] .cc-field__control:focus,
-.cc-field[data-readonly="true"] .cc-field__control:focus-visible {
+.cc-field[data-readonly="true"] .cc-field__control:focus {
   border-color: var(--cc-form-readonly-border-color);
   box-shadow: none;
 }
@@ -206,9 +199,9 @@
 }
 
 .cc-field[data-readonly="true"] .cc-select__option:hover:not(:disabled),
-.cc-field[data-readonly="true"] .cc-select__option:focus-visible,
+.cc-field[data-readonly="true"] .cc-select__option:focus,
 .cc-select[data-readonly="true"] .cc-select__option:hover:not(:disabled),
-.cc-select[data-readonly="true"] .cc-select__option:focus-visible {
+.cc-select[data-readonly="true"] .cc-select__option:focus {
   background: transparent;
   color: inherit;
   cursor: default;
@@ -271,13 +264,13 @@
   transform: translateX(20px);
 }
 
-.cc-switch input:focus-visible + .cc-switch__track {
+.cc-switch input:focus + .cc-switch__track {
   box-shadow: var(--cc-form-shadow-focus);
 }
 
 .cc-switch-field[data-readonly="true"]
   .cc-switch
-  input:focus-visible
+  input:focus
   + .cc-switch__track {
   box-shadow: inset 0 0 0 1px var(--cc-form-readonly-border-color);
 }
@@ -296,11 +289,7 @@
 }
 
 .cc-switch-field[data-readonly="true"] input:checked + .cc-switch__track {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 24%,
-    var(--cc-form-readonly-background)
-  );
+  background: var(--cc-form-readonly-background);
 }
 
 .cc-switch-field__label {

package/dist/styles/components/table.css

@@ -83,14 +83,14 @@
   transform: rotate(45deg) scale(1);
 }
 
-.cc-choice input:focus-visible {
+.cc-choice input:focus {
   border-color: var(--cc-form-color-border-focus);
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;
 }
 
-.cc-choice[data-readonly="true"] input:focus-visible,
-.cc-choice-group[data-readonly="true"] .cc-choice input:focus-visible {
+.cc-choice[data-readonly="true"] input:focus,
+.cc-choice-group[data-readonly="true"] .cc-choice input:focus {
   border-color: var(--cc-form-readonly-border-color);
   box-shadow: none;
 }
@@ -137,7 +137,6 @@
   overflow-y: auto;
   overscroll-behavior: contain;
   position: sticky;
-  scrollbar-width: thin;
   width: 100%;
 }
 
@@ -211,46 +210,25 @@
 }
 
 .cc-table__cell[data-fixed="left"] {
-  border-right-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 18%,
-    var(--cc-form-color-divider)
-  );
+  border-right-color: var(--cc-form-color-divider);
 }
 
 .cc-table__cell[data-fixed="right"] {
-  border-left: 1px solid
-    color-mix(
-      in srgb,
-      var(--cc-form-color-accent) 18%,
-      var(--cc-form-color-divider)
-    );
+  border-left: 1px solid var(--cc-form-color-divider);
 }
 
 .cc-table__cell[data-fixed-edge="left"],
 .cc-table__selection[data-fixed-edge="left"] {
   box-shadow:
-    10px 0 18px -14px
-      color-mix(in srgb, var(--cc-form-color-text) 38%, transparent),
-    inset -1px 0 0
-      color-mix(
-        in srgb,
-        var(--cc-form-color-accent) 18%,
-        var(--cc-form-color-divider)
-      );
+    10px 0 18px -14px rgba(15, 23, 42, 0),
+    inset -1px 0 0 var(--cc-form-color-divider);
   z-index: 5;
 }
 
 .cc-table__cell[data-fixed-edge="right"] {
   box-shadow:
-    -10px 0 18px -14px
-      color-mix(in srgb, var(--cc-form-color-text) 38%, transparent),
-    inset 1px 0 0
-      color-mix(
-        in srgb,
-        var(--cc-form-color-accent) 18%,
-        var(--cc-form-color-divider)
-      );
+    -10px 0 18px -14px rgba(15, 23, 42, 0),
+    inset 1px 0 0 var(--cc-form-color-divider);
   z-index: 5;
 }
 
@@ -282,7 +260,7 @@
 }
 
 .cc-table__resize:hover::after {
-  background: color-mix(in srgb, var(--cc-form-color-muted) 18%, transparent);
+  background: rgba(100, 116, 139, 0);
 }
 
 .cc-table__checkbox {
@@ -321,9 +299,7 @@
 }
 
 .cc-table__column-settings > button {
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-  background: color-mix(in srgb, var(--cc-form-color-surface) 86%, transparent);
+  background: rgba(255, 255, 255, 1);
   border: 1px solid var(--cc-form-color-border);
   border-radius: var(--cc-radius-md);
   box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
@@ -339,17 +315,14 @@
 }
 
 .cc-table__column-settings > button:hover {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 52%,
-    var(--cc-form-color-border)
-  );
-  box-shadow: 0 8px 24px
-    color-mix(in srgb, var(--cc-form-color-accent) 12%, transparent);
+  border-color: var(--cc-form-color-accent);
+  box-shadow: 0 8px 24px rgba(22, 119, 255, 0);
   transform: translateY(-1px);
 }
 
 .cc-table__column-menu {
+  font-size: inherit;
+  font-weight: 400;
   min-width: 180px;
   overflow: auto;
   position: fixed;
@@ -391,9 +364,7 @@
 
 .cc-table__loading {
   align-items: center;
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
-  background: color-mix(in srgb, var(--cc-form-color-surface) 72%, transparent);
+  background: rgba(255, 255, 255, 1);
   display: flex;
   inset: 42px 0 0;
   justify-content: center;

package/dist/styles/components/tag.css

@@ -2,17 +2,8 @@
 
 .cc-tag {
   align-items: center;
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 10%,
-    var(--cc-form-color-surface)
-  );
-  border: 1px solid
-    color-mix(
-      in srgb,
-      var(--cc-form-color-accent) 22%,
-      var(--cc-form-color-border)
-    );
+  background: var(--cc-form-color-surface);
+  border: 1px solid var(--cc-form-color-border);
   border-radius: var(--cc-radius-pill);
   color: var(--cc-form-color-text);
   display: inline-flex;
@@ -45,7 +36,7 @@
 }
 
 .cc-tag button:hover {
-  background: color-mix(in srgb, currentColor 12%, transparent);
+  background: rgba(15, 23, 42, 0);
   transform: scale(1.08);
 }
 

package/dist/styles/components/textarea.css

@@ -36,43 +36,31 @@
     box-shadow 120ms ease;
 }
 
-.cc-field__control:-webkit-autofill,
-.cc-field__control:-webkit-autofill:hover,
-.cc-field__control:-webkit-autofill:focus,
-.cc-chat-textarea__control:-webkit-autofill,
-.cc-chat-textarea__control:-webkit-autofill:hover,
-.cc-chat-textarea__control:-webkit-autofill:focus,
-.cc-canvas-editor__card input:-webkit-autofill,
-.cc-canvas-editor__card input:-webkit-autofill:hover,
-.cc-canvas-editor__card input:-webkit-autofill:focus,
-.cc-canvas-editor__card textarea:-webkit-autofill,
-.cc-canvas-editor__card textarea:-webkit-autofill:hover,
-.cc-canvas-editor__card textarea:-webkit-autofill:focus {
+.cc-field__control:autofill,
+.cc-field__control:autofill:hover,
+.cc-field__control:autofill:focus,
+.cc-chat-textarea__control:autofill,
+.cc-chat-textarea__control:autofill:hover,
+.cc-chat-textarea__control:autofill:focus,
+.cc-canvas-editor__card input:autofill,
+.cc-canvas-editor__card input:autofill:hover,
+.cc-canvas-editor__card input:autofill:focus,
+.cc-canvas-editor__card textarea:autofill,
+.cc-canvas-editor__card textarea:autofill:hover,
+.cc-canvas-editor__card textarea:autofill:focus {
   box-shadow: 0 0 0 1000px var(--cc-form-control-background) inset;
   caret-color: var(--cc-form-color-text);
   transition:
     background-color 9999s ease-out,
     color 9999s ease-out;
-  -webkit-text-fill-color: var(--cc-form-color-text);
 }
 
-.cc-field__control::-ms-clear,
-.cc-field__control::-ms-reveal,
-.cc-field__control::-webkit-search-cancel-button,
-.cc-field__control::-webkit-search-decoration {
-  display: none;
+.cc-field__control[type="search"] {
+  appearance: none;
 }
 
 .cc-field__control[type="number"] {
   appearance: textfield;
-  -moz-appearance: textfield;
-}
-
-.cc-field__control[type="number"]::-webkit-inner-spin-button,
-.cc-field__control[type="number"]::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-  -webkit-appearance: none;
 }
 
 .cc-field__control--clearable {
@@ -109,6 +97,11 @@
   color: var(--cc-form-color-text);
 }
 
+.cc-field__clear:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-field__clear:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;
@@ -151,9 +144,9 @@
 }
 
 .cc-field__control[data-readonly="true"]:focus,
-.cc-field__control[data-readonly="true"]:focus-visible,
+.cc-field__control[data-readonly="true"]:focus,
 .cc-field[data-readonly="true"] .cc-field__control:focus,
-.cc-field[data-readonly="true"] .cc-field__control:focus-visible {
+.cc-field[data-readonly="true"] .cc-field__control:focus {
   border-color: var(--cc-form-readonly-border-color);
   box-shadow: none;
 }
@@ -206,9 +199,9 @@
 }
 
 .cc-field[data-readonly="true"] .cc-select__option:hover:not(:disabled),
-.cc-field[data-readonly="true"] .cc-select__option:focus-visible,
+.cc-field[data-readonly="true"] .cc-select__option:focus,
 .cc-select[data-readonly="true"] .cc-select__option:hover:not(:disabled),
-.cc-select[data-readonly="true"] .cc-select__option:focus-visible {
+.cc-select[data-readonly="true"] .cc-select__option:focus {
   background: transparent;
   color: inherit;
   cursor: default;

package/dist/styles/components/theme-box.css

@@ -0,0 +1,39 @@
+@import "../base.css";
+
+.cc-theme-box {
+  background: var(--cc-page-surface-color);
+  border: 1px solid var(--cc-form-color-border);
+  border-radius: var(--cc-theme-box-radius, var(--cc-radius-lg));
+  box-shadow: var(--cc-form-shadow-floating);
+  box-sizing: border-box;
+  color: var(--cc-page-color);
+  font-family: var(--cc-form-font);
+  min-width: 0;
+  padding: var(--cc-theme-box-padding, 16px);
+}
+
+.cc-theme-box[data-size="sm"] {
+  --cc-theme-box-padding: 12px;
+}
+
+.cc-theme-box[data-size="md"] {
+  --cc-theme-box-padding: 16px;
+}
+
+.cc-theme-box[data-size="lg"] {
+  --cc-theme-box-padding: 24px;
+}
+
+.cc-theme-box[data-variant="page"] {
+  background: var(--cc-page-background-image), var(--cc-page-background);
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.cc-theme-box[data-variant="plain"] {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+

package/dist/styles/components/tilt-card.css

@@ -33,11 +33,7 @@
 }
 
 .cc-tilt-card[data-active="true"] .cc-tilt-card__surface {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 42%,
-    var(--cc-tilt-card-border-color)
-  );
+  border-color: var(--cc-tilt-card-border-color);
   box-shadow: var(--cc-tilt-card-shadow-active);
 }
 

package/dist/styles/components/toast.css

@@ -13,7 +13,8 @@
   --cc-toast-max-height: 160px;
   display: flex;
   flex-direction: column;
-  max-width: min(360px, calc(100vw - 32px));
+  max-width: 360px;
+  width: calc(100vw - 32px);
   position: fixed;
   right: 16px;
   top: 16px;
@@ -239,6 +240,11 @@
   color: var(--cc-form-color-text);
 }
 
+.cc-toast__close:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-toast__close:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;