@class-kit/vue 0.1.2 → 0.1.3

package/dist/styles/components/design-effect.css

@@ -16,13 +16,8 @@
 }
 
 .cc-design-effect[data-interactive="true"]:hover {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-design-effect-color-1) 58%,
-    var(--cc-form-color-border)
-  );
-  box-shadow: 0 22px 64px
-    color-mix(in srgb, var(--cc-design-effect-color-1) 26%, transparent);
+  border-color: var(--cc-design-effect-color-1);
+  box-shadow: 0 22px 64px rgba(22, 119, 255, 0);
   transform: translateY(-1px);
 }
 
@@ -46,29 +41,15 @@
 .cc-design-effect--glass,
 .cc-design-effect--frosted {
   background:
-    linear-gradient(
-      135deg,
-      color-mix(in srgb, #fff 72%, transparent),
-      color-mix(in srgb, var(--cc-design-effect-color-2) 10%, transparent)
-    ),
-    color-mix(in srgb, var(--cc-form-color-surface) 68%, transparent);
-  backdrop-filter: blur(calc(10px + 10px * var(--cc-design-effect-alpha)))
-    saturate(1.24);
+    linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(22, 119, 255, 0)),
+    rgba(255, 255, 255, 1);
 }
 
 .cc-design-effect--glass .cc-design-effect__overlay,
 .cc-design-effect--frosted .cc-design-effect__overlay {
   background:
-    radial-gradient(
-      circle at 18% 12%,
-      color-mix(in srgb, #fff 54%, transparent),
-      transparent 26%
-    ),
-    linear-gradient(
-      135deg,
-      color-mix(in srgb, #fff 28%, transparent),
-      transparent 42%
-    );
+    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 1), transparent 26%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0), transparent 42%);
   opacity: var(--cc-design-effect-alpha);
 }
 
@@ -86,73 +67,38 @@
 .cc-design-effect--aurora .cc-design-effect__overlay,
 .cc-design-effect--mesh .cc-design-effect__overlay {
   background:
-    radial-gradient(
-      circle at 18% 22%,
-      color-mix(in srgb, var(--cc-design-effect-color-1) 64%, transparent),
-      transparent 28%
-    ),
-    radial-gradient(
-      circle at 82% 18%,
-      color-mix(in srgb, var(--cc-design-effect-color-2) 58%, transparent),
-      transparent 30%
-    ),
-    radial-gradient(
-      circle at 48% 86%,
-      color-mix(in srgb, var(--cc-design-effect-color-3) 54%, transparent),
-      transparent 34%
-    );
+    radial-gradient(circle at 18% 22%, rgba(22, 119, 255, 1), transparent 28%),
+    radial-gradient(circle at 82% 18%, rgba(22, 119, 255, 1), transparent 30%),
+    radial-gradient(circle at 48% 86%, rgba(22, 119, 255, 1), transparent 34%);
   filter: blur(8px);
   opacity: var(--cc-design-effect-alpha);
 }
 
 .cc-design-effect--aurora,
 .cc-design-effect--mesh {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-surface) 78%,
-    var(--cc-design-effect-color-1)
-  );
+  background: var(--cc-form-color-surface);
 }
 
 .cc-design-effect--spotlight .cc-design-effect__overlay {
   background:
-    radial-gradient(
-      circle at 50% 0%,
-      color-mix(in srgb, var(--cc-design-effect-color-1) 42%, transparent),
-      transparent 42%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, #fff 16%, transparent),
-      transparent
-    );
+    radial-gradient(circle at 50% 0%, rgba(22, 119, 255, 0), transparent 42%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0), transparent);
   opacity: var(--cc-design-effect-alpha);
 }
 
 .cc-design-effect--border-glow {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-design-effect-color-1) 72%,
-    var(--cc-form-color-border)
-  );
+  border-color: var(--cc-design-effect-color-1);
   box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, #fff 42%, transparent),
-    0 0 0 1px
-      color-mix(in srgb, var(--cc-design-effect-color-2) 26%, transparent),
-    0 18px 50px
-      color-mix(in srgb, var(--cc-design-effect-color-1) 24%, transparent);
+    inset 0 0 0 1px rgba(255, 255, 255, 0),
+    0 0 0 1px rgba(22, 119, 255, 0),
+    0 18px 50px rgba(22, 119, 255, 0);
 }
 
 .cc-design-effect--neon {
-  background: color-mix(in srgb, #17191f 88%, var(--cc-design-effect-color-1));
-  border-color: color-mix(
-    in srgb,
-    var(--cc-design-effect-color-2) 68%,
-    transparent
-  );
+  background: #17191f;
+  border-color: rgba(22, 119, 255, 1);
   color: #fff;
-  text-shadow: 0 0 18px
-    color-mix(in srgb, var(--cc-design-effect-color-2) 62%, transparent);
+  text-shadow: 0 0 18px rgba(22, 119, 255, 1);
 }
 
 .cc-design-effect--noise::after,
@@ -169,7 +115,7 @@
 .cc-design-effect--noise::after {
   background-image: repeating-radial-gradient(
     circle at 0 0,
-    color-mix(in srgb, var(--cc-design-effect-color-1) 22%, transparent) 0 1px,
+    rgba(22, 119, 255, 0) 0 1px,
     transparent 1px 4px
   );
   opacity: calc(var(--cc-design-effect-alpha) * 0.32);
@@ -177,15 +123,8 @@
 
 .cc-design-effect--soft-grid::after {
   background-image:
-    linear-gradient(
-      color-mix(in srgb, var(--cc-design-effect-color-1) 18%, transparent) 1px,
-      transparent 1px
-    ),
-    linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--cc-design-effect-color-1) 18%, transparent) 1px,
-      transparent 1px
-    );
+    linear-gradient(rgba(22, 119, 255, 0) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(22, 119, 255, 0) 1px, transparent 1px);
   background-size: 22px 22px;
   opacity: var(--cc-design-effect-alpha);
 }
@@ -193,7 +132,7 @@
 .cc-design-effect--scanline::after {
   background: repeating-linear-gradient(
     180deg,
-    color-mix(in srgb, var(--cc-design-effect-color-1) 20%, transparent) 0 1px,
+    rgba(22, 119, 255, 0) 0 1px,
     transparent 1px 6px
   );
   opacity: calc(var(--cc-design-effect-alpha) * 0.52);
@@ -214,7 +153,7 @@
   background: linear-gradient(
     110deg,
     transparent 20%,
-    color-mix(in srgb, #fff 34%, transparent) 42%,
+    rgba(255, 255, 255, 0) 42%,
     transparent 64%
   );
   mix-blend-mode: screen;

package/dist/styles/components/draggable.css

@@ -14,20 +14,13 @@
 
 .cc-draggable[data-dragging="true"] {
   cursor: grabbing;
-  filter: drop-shadow(
-    0 12px 26px color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent)
-  );
+  filter: drop-shadow(0 12px 26px rgba(22, 119, 255, 0.22));
   transition: filter var(--cc-animation-duration) var(--cc-animation-easing);
 }
 
 .cc-draggable[data-over-target="true"] {
-  filter: drop-shadow(
-      0 0 0 color-mix(in srgb, var(--cc-form-color-accent) 0%, transparent)
-    )
-    drop-shadow(
-      0 14px 30px
-        color-mix(in srgb, var(--cc-form-color-accent) 28%, transparent)
-    );
+  filter: drop-shadow(0 0 10px rgba(22, 119, 255, 0.18))
+    drop-shadow(0 14px 30px rgba(22, 119, 255, 0.24));
 }
 
 .cc-draggable[data-disabled="true"] {

package/dist/styles/components/ellipsis-text.css

@@ -29,6 +29,10 @@
   cursor: pointer;
 }
 
+.cc-ellipsis[data-expandable="true"]:focus {
+  outline: none;
+}
+
 .cc-ellipsis[data-expandable="true"]:focus-visible {
   border-radius: var(--cc-radius-sm);
   outline: 2px solid var(--cc-form-color-accent);
@@ -36,10 +40,7 @@
 }
 
 .cc-ellipsis[data-lines="multiple"] .cc-ellipsis__content {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--cc-ellipsis-lines, 1);
-  line-clamp: var(--cc-ellipsis-lines, 1);
+  max-height: calc(var(--cc-ellipsis-lines, 1) * 1.5em);
 }
 
 .cc-ellipsis[data-lines="single"] .cc-ellipsis__content {
@@ -51,9 +52,7 @@
 .cc-ellipsis[data-expanded="true"] .cc-ellipsis__content {
   display: block;
   max-height: var(--cc-ellipsis-expanded-max-height, 999px);
-  text-overflow: clip;
+  text-overflow: hidden;
   white-space: normal;
-  -webkit-line-clamp: unset;
-  line-clamp: unset;
 }
 

package/dist/styles/components/empty.css

@@ -29,9 +29,7 @@
 .cc-empty__illustration {
   animation: cc-empty-bolt-float 2.4s var(--cc-animation-easing) infinite;
   display: block;
-  filter: drop-shadow(
-    0 10px 18px color-mix(in srgb, var(--cc-form-color-accent) 22%, transparent)
-  );
+  filter: drop-shadow(0 10px 18px rgba(22, 119, 255, 0));
   height: 58px;
   overflow: visible;
   transform-origin: 50% 56%;
@@ -40,32 +38,20 @@
 
 .cc-empty__illustration-shadow {
   animation: cc-empty-bolt-shadow 2.4s var(--cc-animation-easing) infinite;
-  fill: color-mix(in srgb, var(--cc-form-color-muted) 18%, transparent);
+  fill: rgba(100, 116, 139, 0);
   transform-origin: 51px 74px;
 }
 
 .cc-empty__tray-back {
-  fill: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 10%,
-    var(--cc-form-color-surface)
-  );
-  stroke: color-mix(in srgb, var(--cc-form-color-muted) 28%, transparent);
+  fill: var(--cc-form-color-surface);
+  stroke: rgba(100, 116, 139, 0);
   stroke-linejoin: round;
   stroke-width: 2;
 }
 
 .cc-empty__tray-front {
-  fill: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 16%,
-    var(--cc-form-color-surface)
-  );
-  stroke: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 26%,
-    var(--cc-form-color-muted)
-  );
+  fill: var(--cc-form-color-surface);
+  stroke: var(--cc-form-color-muted);
   stroke-linejoin: round;
   stroke-width: 2;
 }
@@ -79,37 +65,37 @@
 
 .cc-empty__tray-lip {
   opacity: 0.58;
-  stroke: color-mix(in srgb, var(--cc-form-color-muted) 44%, transparent);
+  stroke: rgba(100, 116, 139, 0);
   stroke-width: 2;
 }
 
 .cc-empty__tray-glow {
   animation: cc-empty-tray-glow 2.4s var(--cc-animation-easing) infinite;
-  stroke: color-mix(in srgb, var(--cc-form-color-accent) 42%, transparent);
+  stroke: rgba(22, 119, 255, 0);
   stroke-width: 3;
 }
 
 .cc-empty__mini-bolt-side {
-  fill: color-mix(in srgb, var(--cc-form-color-accent) 52%, #3b1c8f);
+  fill: var(--cc-form-color-accent);
   transform: translate(4px, 3px);
 }
 
 .cc-empty__mini-bolt-face {
-  fill: color-mix(in srgb, var(--cc-form-color-accent) 82%, #ffd84d);
-  stroke: color-mix(in srgb, var(--cc-form-color-accent) 46%, #ffffff);
+  fill: var(--cc-form-color-accent);
+  stroke: #ffffff;
   stroke-linejoin: round;
   stroke-width: 2;
 }
 
 .cc-empty__mini-bolt-highlight {
   animation: cc-empty-bolt-glint 2.4s var(--cc-animation-easing) infinite;
-  fill: color-mix(in srgb, #ffffff 42%, transparent);
+  fill: rgba(255, 255, 255, 0);
 }
 
 .cc-empty__spark {
   fill: none;
   opacity: 0.46;
-  stroke: color-mix(in srgb, var(--cc-form-color-accent) 54%, transparent);
+  stroke: rgba(22, 119, 255, 1);
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 2;

package/dist/styles/components/field.css

@@ -43,43 +43,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 {
@@ -116,6 +104,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;
@@ -158,9 +151,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;
 }
@@ -213,9 +206,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/file-preview.css

@@ -28,9 +28,8 @@
 
 .cc-file-preview__badge {
   align-items: center;
-  background: color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
-  border: 1px solid
-    color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent);
+  background: rgba(22, 119, 255, 0);
+  border: 1px solid rgba(22, 119, 255, 0);
   border-radius: var(--cc-radius-sm);
   color: var(--cc-form-color-accent);
   display: inline-flex;
@@ -63,9 +62,8 @@
 
 .cc-file-preview__actions a,
 .cc-file-preview__actions button {
-  background: color-mix(in srgb, var(--cc-form-color-accent) 10%, transparent);
-  border: 1px solid
-    color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent);
+  background: rgba(22, 119, 255, 0);
+  border: 1px solid rgba(22, 119, 255, 0);
   border-radius: var(--cc-radius-md);
   color: var(--cc-form-color-accent);
   cursor: pointer;
@@ -87,12 +85,8 @@
 
 .cc-file-preview__actions a:hover,
 .cc-file-preview__actions button:not(:disabled):hover {
-  background: color-mix(in srgb, var(--cc-form-color-accent) 16%, transparent);
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 32%,
-    transparent
-  );
+  background: rgba(22, 119, 255, 0);
+  border-color: rgba(22, 119, 255, 0);
 }
 
 .cc-file-preview__pager > span {
@@ -144,11 +138,7 @@
 }
 
 .cc-file-preview__local-html th {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 10%,
-    var(--cc-form-color-surface)
-  );
+  background: var(--cc-form-color-surface);
   font-weight: 700;
 }
 
@@ -163,11 +153,7 @@
 
 .cc-file-preview__skeleton {
   align-items: end;
-  background: linear-gradient(
-    180deg,
-    transparent,
-    color-mix(in srgb, var(--cc-form-color-surface) 92%, transparent) 62%
-  );
+  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 1) 62%);
   display: flex;
   inset: 0;
   justify-content: center;
@@ -188,11 +174,10 @@
 }
 
 .cc-file-preview__loading {
-  background: color-mix(in srgb, var(--cc-form-color-surface) 92%, transparent);
+  background: rgba(255, 255, 255, 1);
   border: 1px solid var(--cc-form-color-border);
   border-radius: var(--cc-radius-pill);
-  box-shadow: 0 12px 28px
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
+  box-shadow: 0 12px 28px rgba(22, 119, 255, 0);
   margin-bottom: 18px;
   padding: 10px 16px;
 }

package/dist/styles/components/form.css

@@ -43,43 +43,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 {
@@ -116,6 +104,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;
@@ -158,9 +151,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;
 }
@@ -213,9 +206,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/gradient-text.css

@@ -1,11 +1,7 @@
 @import "../base.css";
 
 .cc-gradient-text {
-  -webkit-background-clip: text;
-  background-clip: text;
-  background-image: var(--cc-gradient-text-background);
-  background-size: var(--cc-gradient-text-background-size);
-  color: transparent;
+  color: var(--cc-form-color-accent);
   display: inline;
   font-family: var(--cc-form-font);
   font-weight: var(--cc-gradient-text-font-weight);
@@ -14,8 +10,7 @@
 }
 
 .cc-gradient-text[data-animated="true"] {
-  animation: cc-gradient-text-flow var(--cc-gradient-text-duration)
-    var(--cc-gradient-text-easing) infinite alternate;
+  text-shadow: 0 0 18px rgba(22, 119, 255, 0.18);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -47,12 +42,3 @@
   }
 }
 
-@keyframes cc-gradient-text-flow {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-