@class-kit/vue 0.1.1 → 0.1.3

package/dist/styles/components/config-provider.css

@@ -1,7 +1,93 @@
 @import "../base.css";
 
+:where(
+  .cc-config-provider,
+  [data-cc-theme],
+  [class^="cc-theme-"],
+  [class*=" cc-theme-"]
+),
+:where(
+    .cc-config-provider,
+    [data-cc-theme],
+    [class^="cc-theme-"],
+    [class*=" cc-theme-"]
+  )
+  * {
+  scrollbar-color: var(--cc-scrollbar-thumb-color)
+    var(--cc-scrollbar-track-color);
+  scrollbar-width: thin;
+}
+
+:where(
+  .cc-config-provider,
+  [data-cc-theme],
+  [class^="cc-theme-"],
+  [class*=" cc-theme-"]
+)::-webkit-scrollbar,
+:where(
+    .cc-config-provider,
+    [data-cc-theme],
+    [class^="cc-theme-"],
+    [class*=" cc-theme-"]
+  )
+  *::-webkit-scrollbar {
+  width: var(--cc-scrollbar-size);
+  height: var(--cc-scrollbar-size);
+}
+
+:where(
+  .cc-config-provider,
+  [data-cc-theme],
+  [class^="cc-theme-"],
+  [class*=" cc-theme-"]
+)::-webkit-scrollbar-track,
+:where(
+    .cc-config-provider,
+    [data-cc-theme],
+    [class^="cc-theme-"],
+    [class*=" cc-theme-"]
+  )
+  *::-webkit-scrollbar-track {
+  background: var(--cc-scrollbar-track-color);
+}
+
+:where(
+  .cc-config-provider,
+  [data-cc-theme],
+  [class^="cc-theme-"],
+  [class*=" cc-theme-"]
+)::-webkit-scrollbar-thumb,
+:where(
+    .cc-config-provider,
+    [data-cc-theme],
+    [class^="cc-theme-"],
+    [class*=" cc-theme-"]
+  )
+  *::-webkit-scrollbar-thumb {
+  background: var(--cc-scrollbar-thumb-color);
+  border-radius: var(--cc-radius-pill);
+}
+
+:where(
+    .cc-config-provider,
+    [data-cc-theme],
+    [class^="cc-theme-"],
+    [class*=" cc-theme-"]
+  )::-webkit-scrollbar-thumb:hover,
+:where(
+    .cc-config-provider,
+    [data-cc-theme],
+    [class^="cc-theme-"],
+    [class*=" cc-theme-"]
+  )
+  *::-webkit-scrollbar-thumb:hover {
+  background: var(--cc-scrollbar-thumb-hover-color);
+}
+
 .cc-config-provider {
-  color: var(--cc-form-color-text);
+  background: var(--cc-page-background-image), var(--cc-page-background);
+  box-sizing: border-box;
+  color: var(--cc-page-color);
   font-family: var(--cc-form-font);
   min-width: 0;
 }

package/dist/styles/components/config-table.css

@@ -1,28 +1,5 @@
 @import "../base.css";
 
-.cc-field__control,
-.cc-color-picker__panel,
-.cc-verification-code__input,
-.cc-select__menu,
-.cc-virtual-select__menu,
-.cc-date-picker__panel,
-.cc-date-range-picker__panel,
-.cc-calendar,
-.cc-canvas-image,
-.cc-canvas-editor,
-.cc-canvas-editor__toolbar,
-.cc-canvas-editor__card,
-.cc-tilt-card__surface,
-.cc-table,
-.cc-upload,
-.cc-modal__panel,
-.cc-popup__panel,
-.cc-tooltip__content,
-.cc-toast {
-  backdrop-filter: var(--cc-theme-backdrop-filter);
-  -webkit-backdrop-filter: var(--cc-theme-backdrop-filter);
-}
-
 .cc-choice-group {
   border: 0;
   margin: 0;
@@ -106,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;
 }
@@ -160,7 +137,6 @@
   overflow-y: auto;
   overscroll-behavior: contain;
   position: sticky;
-  scrollbar-width: thin;
   width: 100%;
 }
 
@@ -234,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;
 }
 
@@ -305,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 {
@@ -344,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);
@@ -362,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;
@@ -414,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/date-picker.css

@@ -1,28 +1,5 @@
 @import "../base.css";
 
-.cc-field__control,
-.cc-color-picker__panel,
-.cc-verification-code__input,
-.cc-select__menu,
-.cc-virtual-select__menu,
-.cc-date-picker__panel,
-.cc-date-range-picker__panel,
-.cc-calendar,
-.cc-canvas-image,
-.cc-canvas-editor,
-.cc-canvas-editor__toolbar,
-.cc-canvas-editor__card,
-.cc-tilt-card__surface,
-.cc-table,
-.cc-upload,
-.cc-modal__panel,
-.cc-popup__panel,
-.cc-tooltip__content,
-.cc-toast {
-  backdrop-filter: var(--cc-theme-backdrop-filter);
-  -webkit-backdrop-filter: var(--cc-theme-backdrop-filter);
-}
-
 .cc-field {
   display: grid;
   gap: 6px;
@@ -59,6 +36,33 @@
     box-shadow 120ms ease;
 }
 
+.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;
+}
+
+.cc-field__control[type="search"] {
+  appearance: none;
+}
+
+.cc-field__control[type="number"] {
+  appearance: textfield;
+}
+
 .cc-field__control--clearable {
   padding-right: 38px;
 }
@@ -93,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;
@@ -135,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;
 }
@@ -148,6 +157,8 @@
   border-radius: var(--cc-date-picker-panel-radius);
   box-shadow: var(--cc-date-picker-panel-shadow);
   color: var(--cc-form-color-text);
+  font-size: inherit;
+  font-weight: 400;
   max-width: 280px;
   padding: 10px;
 }
@@ -223,19 +234,21 @@
 
 .cc-date-picker__week {
   color: var(--cc-form-color-muted);
-  font-size: 12px;
+  font-size: inherit;
+  font-weight: 400;
   margin-bottom: 6px;
   text-align: center;
 }
 
 .cc-date-picker__day {
-  aspect-ratio: 1;
+  height: 34px;
   background: transparent;
   border: 0;
   border-radius: var(--cc-radius-md);
   color: var(--cc-form-color-text);
   cursor: pointer;
-  font-size: 13px;
+  font: inherit;
+  font-weight: 400;
   transition:
     background 120ms ease,
     color 120ms ease;
@@ -315,12 +328,11 @@
 .cc-date-picker__trigger[data-readonly="true"],
 .cc-date-picker__trigger[data-readonly="true"]:hover,
 .cc-date-picker__trigger[data-readonly="true"]:focus,
-.cc-date-picker__trigger[data-readonly="true"]:focus-visible,
+.cc-date-picker__trigger[data-readonly="true"]:focus,
 .cc-date-range-picker[data-readonly="true"] .cc-date-picker__trigger,
 .cc-date-range-picker[data-readonly="true"] .cc-date-picker__trigger:hover,
 .cc-date-range-picker[data-readonly="true"] .cc-date-picker__trigger:focus,
-.cc-date-range-picker[data-readonly="true"]
-  .cc-date-picker__trigger:focus-visible {
+.cc-date-range-picker[data-readonly="true"] .cc-date-picker__trigger:focus {
   background: var(--cc-form-readonly-background);
   border-color: var(--cc-form-readonly-border-color);
   box-shadow: none;
@@ -355,9 +367,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/date-range-picker.css

@@ -1,28 +1,5 @@
 @import "../base.css";
 
-.cc-field__control,
-.cc-color-picker__panel,
-.cc-verification-code__input,
-.cc-select__menu,
-.cc-virtual-select__menu,
-.cc-date-picker__panel,
-.cc-date-range-picker__panel,
-.cc-calendar,
-.cc-canvas-image,
-.cc-canvas-editor,
-.cc-canvas-editor__toolbar,
-.cc-canvas-editor__card,
-.cc-tilt-card__surface,
-.cc-table,
-.cc-upload,
-.cc-modal__panel,
-.cc-popup__panel,
-.cc-tooltip__content,
-.cc-toast {
-  backdrop-filter: var(--cc-theme-backdrop-filter);
-  -webkit-backdrop-filter: var(--cc-theme-backdrop-filter);
-}
-
 .cc-field {
   display: grid;
   gap: 6px;
@@ -59,6 +36,33 @@
     box-shadow 120ms ease;
 }
 
+.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;
+}
+
+.cc-field__control[type="search"] {
+  appearance: none;
+}
+
+.cc-field__control[type="number"] {
+  appearance: textfield;
+}
+
 .cc-field__control--clearable {
   padding-right: 38px;
 }
@@ -93,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;
@@ -135,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;
 }
@@ -148,6 +157,8 @@
   border-radius: var(--cc-date-picker-panel-radius);
   box-shadow: var(--cc-date-picker-panel-shadow);
   color: var(--cc-form-color-text);
+  font-size: inherit;
+  font-weight: 400;
   max-width: 280px;
   padding: 10px;
 }
@@ -223,19 +234,21 @@
 
 .cc-date-picker__week {
   color: var(--cc-form-color-muted);
-  font-size: 12px;
+  font-size: inherit;
+  font-weight: 400;
   margin-bottom: 6px;
   text-align: center;
 }
 
 .cc-date-picker__day {
-  aspect-ratio: 1;
+  height: 34px;
   background: transparent;
   border: 0;
   border-radius: var(--cc-radius-md);
   color: var(--cc-form-color-text);
   cursor: pointer;
-  font-size: 13px;
+  font: inherit;
+  font-weight: 400;
   transition:
     background 120ms ease,
     color 120ms ease;
@@ -260,8 +273,8 @@
 }
 
 .cc-date-range-picker__panel {
-  max-width: min(92vw, 620px);
-  width: min(92vw, 620px);
+  max-width: 620px;
+  width: 92vw;
 }
 
 .cc-date-range-picker__summary {
@@ -313,7 +326,8 @@
 
 .cc-date-range-picker__month-title {
   display: block;
-  font-size: 13px;
+  font-size: inherit;
+  font-weight: 400;
   margin-bottom: 8px;
   text-align: center;
 }
@@ -345,7 +359,8 @@
 
 @media (max-width: 720px) {
 .cc-date-range-picker__panel {
-    width: min(92vw, 360px);
+    max-width: 360px;
+    width: 92vw;
   }
 
 .cc-date-range-picker__months {
@@ -388,12 +403,11 @@
 .cc-date-picker__trigger[data-readonly="true"],
 .cc-date-picker__trigger[data-readonly="true"]:hover,
 .cc-date-picker__trigger[data-readonly="true"]:focus,
-.cc-date-picker__trigger[data-readonly="true"]:focus-visible,
+.cc-date-picker__trigger[data-readonly="true"]:focus,
 .cc-date-range-picker[data-readonly="true"] .cc-date-picker__trigger,
 .cc-date-range-picker[data-readonly="true"] .cc-date-picker__trigger:hover,
 .cc-date-range-picker[data-readonly="true"] .cc-date-picker__trigger:focus,
-.cc-date-range-picker[data-readonly="true"]
-  .cc-date-picker__trigger:focus-visible {
+.cc-date-range-picker[data-readonly="true"] .cc-date-picker__trigger:focus {
   background: var(--cc-form-readonly-background);
   border-color: var(--cc-form-readonly-border-color);
   box-shadow: none;
@@ -428,9 +442,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;