@class-kit/vue 0.1.2 → 0.1.4

package/dist/styles/components/canvas-editor.css

@@ -1,23 +1,22 @@
 @import "../base.css";
 
-.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-canvas-editor {
@@ -33,7 +32,7 @@
 
 .cc-canvas-editor__toolbar {
   align-items: center;
-  background: color-mix(in srgb, var(--cc-form-color-surface) 92%, transparent);
+  background: rgba(255, 255, 255, 1);
   border-bottom: 1px solid var(--cc-form-color-divider);
   display: flex;
   flex-wrap: wrap;
@@ -96,7 +95,8 @@
   min-height: 480px;
   overflow: auto;
   padding: 34px 42px;
-  width: min(100% - 32px, 860px);
+  max-width: 860px;
+  width: calc(100% - 32px);
 }
 
 .cc-canvas-editor__doc-head {

package/dist/styles/components/chat-textarea.css

@@ -1,23 +1,22 @@
 @import "../base.css";
 
-.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-chat-textarea {
@@ -45,9 +44,6 @@
   overflow-y: hidden;
   padding: 8px 12px;
   resize: none;
-  scrollbar-width: thin;
-  scrollbar-color: var(--cc-form-color-border-hover) transparent;
-  word-break: normal;
   transition:
     background-color var(--cc-animation-duration) var(--cc-animation-easing),
     border-color var(--cc-animation-duration) var(--cc-animation-easing),
@@ -89,6 +85,11 @@
   color: var(--cc-form-color-text);
 }
 
+.cc-chat-textarea__clear:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-chat-textarea__clear:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;

package/dist/styles/components/chat-virtual-list.css

@@ -31,7 +31,6 @@
   overflow-anchor: none;
   overscroll-behavior: contain;
   position: relative;
-  scrollbar-gutter: stable;
 }
 
 .cc-chat-virtual-list__inner {
@@ -50,9 +49,8 @@
 
 .cc-loading.cc-chat-virtual-list__top-loading {
   align-items: center;
-  background: color-mix(in srgb, var(--cc-form-color-surface) 92%, transparent);
-  border: 1px solid
-    color-mix(in srgb, var(--cc-form-color-border) 72%, transparent);
+  background: rgba(255, 255, 255, 1);
+  border: 1px solid rgba(100, 116, 139, 1);
   border-radius: 999px;
   box-shadow: var(--cc-shadow-sm);
   color: var(--cc-form-color-accent);
@@ -82,9 +80,7 @@
 }
 
 .cc-loading.cc-chat-virtual-list__top-loading .cc-loading__bolt {
-  filter: drop-shadow(
-    0 4px 8px color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent)
-  );
+  filter: drop-shadow(0 4px 8px rgba(22, 119, 255, 0));
   height: 16px;
   width: 16px;
 }

package/dist/styles/components/checkbox.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;
@@ -297,14 +290,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;
 }

package/dist/styles/components/checked.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;
@@ -297,14 +290,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;
 }

package/dist/styles/components/code-preview.css

@@ -11,8 +11,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;
@@ -36,11 +35,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);
@@ -78,11 +73,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);
 }
@@ -91,35 +82,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;
 }
 
@@ -137,7 +127,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/color-picker.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;
 }
@@ -204,6 +197,8 @@
   box-shadow: var(--cc-form-shadow-floating);
   color: var(--cc-form-color-text);
   display: grid;
+  font-size: inherit;
+  font-weight: 400;
   gap: 12px;
   padding: 12px;
   position: fixed;
@@ -290,16 +285,6 @@
 
 .cc-color-picker__channels[data-show-steppers="false"] input[type="number"] {
   appearance: textfield;
-  -moz-appearance: textfield;
-}
-
-.cc-color-picker__channels[data-show-steppers="false"]
-  input[type="number"]::-webkit-inner-spin-button,
-.cc-color-picker__channels[data-show-steppers="false"]
-  input[type="number"]::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-  -webkit-appearance: none;
 }
 
 .cc-color-picker__alpha {
@@ -312,7 +297,6 @@
 }
 
 .cc-color-picker__alpha input[type="range"] {
-  accent-color: var(--cc-form-color-accent);
   height: 18px;
 }
 
@@ -370,9 +354,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/comic-reader.css

@@ -24,17 +24,8 @@
 .cc-novel-reader button,
 .cc-comic-reader button,
 .cc-live-room button {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 14%,
-    var(--cc-form-color-surface)
-  );
-  border: 1px solid
-    color-mix(
-      in srgb,
-      var(--cc-form-color-accent) 26%,
-      var(--cc-business-border-color)
-    );
+  background: var(--cc-form-color-surface);
+  border: 1px solid var(--cc-business-border-color);
   border-radius: var(--cc-radius-md);
   color: var(--cc-business-text-color);
   cursor: pointer;
@@ -61,11 +52,7 @@
 .cc-novel-reader button:hover:not(:disabled),
 .cc-comic-reader button:hover:not(:disabled),
 .cc-live-room button:hover {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 22%,
-    var(--cc-form-color-surface)
-  );
+  background: var(--cc-form-color-surface);
   transform: translateY(-1px);
 }
 
@@ -110,13 +97,8 @@
 }
 
 .cc-comic-reader__page[data-active="true"] {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 48%,
-    var(--cc-business-border-color)
-  );
-  box-shadow: 0 10px 30px
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
+  border-color: var(--cc-business-border-color);
+  box-shadow: 0 10px 30px rgba(22, 119, 255, 0);
 }
 
 .cc-comic-reader__page img {