webcake-ui-kit 1.3.1 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/badge/badge.css

@@ -8,11 +8,12 @@
   font-size: var(--paragraph-mini-font-size);
   line-height: var(--paragraph-mini-line-height);
   letter-spacing: var(--paragraph-mini-letter-spacing);
-  font-weight: var(--paragraph-bold-font-weight);
+  font-weight: 500;
   white-space: nowrap;
   transition: box-shadow 0.15s ease;
   border-width: 1px;
   border-style: solid;
+  height: 20px;
 }
 
 .ui-badge--round-default {
@@ -28,7 +29,7 @@
   border-color: var(--positive-border-subtle);
 }
 .ui-badge--secondary {
-  background: var(--secondary-bg);
+  background: var(--tertiary-bg);
   color: var(--secondary-fg);
   border: none;
 }

package/src/components/date-picker/DatePicker.vue

@@ -182,7 +182,7 @@ export default {
     size: {
       type: String,
       default: 'md',
-      validator: v => ['sm', 'md', 'lg'].includes(v)
+      validator: v => ['xs', 'sm', 'md', 'lg'].includes(v)
     },
     todayText: { type: String, default: 'Today' },
     clearText: { type: String, default: 'Clear' },

package/src/components/date-picker/date-picker.css

@@ -24,6 +24,12 @@
 }
 
 .ui-date-picker__trigger--sm {
+  height: 32px;
+  gap: var(--spacing-6);
+  padding: 0 var(--spacing-xs);
+}
+
+.ui-date-picker__trigger--xs {
   height: 28px;
   padding: 0 var(--spacing-xs);
   font-size: var(--paragraph-mini-font-size);

package/src/components/input/input.css

@@ -75,6 +75,11 @@
   border-radius: var(--rounded-full);
 }
 
+/* Hover */
+.ui-input:hover:not(.ui-input--disabled):not(.ui-input--error) {
+  border-color: var(--border-focus);
+}
+
 /* Focus (interactive) — wrapper highlights when inner field is focused. */
 .ui-input:focus-within {
   border-color: var(--border-focus);
@@ -116,6 +121,7 @@
   color: inherit;
   font: inherit;
   letter-spacing: inherit;
+  text-overflow: ellipsis;
 }
 
 .ui-input__field::placeholder {

package/src/components/input-counter/input-counter.css

@@ -77,6 +77,11 @@
   border-radius: var(--rounded-full);
 }
 
+/* Hover */
+.ui-input-counter:hover:not(.ui-input-counter--disabled):not(.ui-input-counter--error) {
+  border-color: var(--border-focus);
+}
+
 /* Focus (interactive) — wrapper highlights when the inner field is focused. */
 .ui-input-counter:focus-within {
   border-color: var(--border-focus);

package/src/components/input-number/input-number.css

@@ -73,6 +73,11 @@
   border-radius: var(--rounded-full);
 }
 
+/* Hover */
+.ui-input-number:hover:not(.ui-input-number--disabled):not(.ui-input-number--error) {
+  border-color: var(--border-focus);
+}
+
 .ui-input-number:focus-within {
   border-color: var(--border-focus);
   box-shadow: 0 0 0 3px var(--focus-ring);

package/src/components/tag/Tag.vue

@@ -36,7 +36,7 @@ export default {
       type: String,
       default: 'md',
       validator: function (v) {
-        return ['sm', 'md', 'lg'].includes(v)
+        return ['sm', 'md', 'lg', 'xl', 'huge'].includes(v)
       }
     },
     counter: { type: Number, default: 0 },

package/src/components/tag/tag.css

@@ -15,12 +15,12 @@
 
 /* — type — */
 .ui-tag--type-default {
-  background: var(--secondary-bg);
+  background: var(--tertiary-bg);
   color: var(--primary-fg);
 }
 .ui-tag--type-default:hover,
 .ui-tag--type-default.ui-tag--active {
-  background: #f0f0f0;
+  background: var(--tertiary-hover);
 }
 
 .ui-tag--type-outline {
@@ -39,19 +39,38 @@
 
 .ui-tag--sm {
   gap: var(--spacing-2xs);
+  height: 20px;
 }
 
 .ui-tag--md {
   border-radius: var(--radius);
   font-size: var(--paragraph-small-font-size);
   line-height: var(--paragraph-small-line-height);
+  height: 24px;
 }
 
 .ui-tag--lg {
   padding: var(--spacing-2xs) 10px;
-  border-radius: var(--radius-10);
+  border-radius: var(--rounded-xl);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  height: 28px;
+}
+
+.ui-tag--xl {
+  padding: var(--spacing-6) var(--spacing-10) var(--spacing-6) var(--spacing-xs);
+  border-radius: var(--rounded-xl);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  height: 32px;
+}
+
+.ui-tag--huge {
+  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-10);
+  border-radius: var(--rounded-xl);
   font-size: var(--paragraph-small-font-size);
   line-height: var(--paragraph-small-line-height);
+  height: 36px;
 }
 
 /* reduce left padding when icon slot is present */

package/src/components/textarea/textarea.css

@@ -25,6 +25,10 @@
   border-radius: var(--radius-18);
 }
 
+.ui-textarea:hover:not(.ui-textarea--disabled):not(.ui-textarea--error) {
+  border-color: var(--border-focus);
+}
+
 /* Focus (interactive) — wrapper highlights when the field is focused. */
 .ui-textarea:focus-within {
   border-color: var(--border-focus);

package/src/styles/chart_colors.css

@@ -9,9 +9,9 @@
   --chart-positive: #009689;
   --chart-negative: #f54a00;
 
-  --fill: #bfdeffb3;
+  --chart-fill: #bfdeffb3;
   --chart-stroke: #8ec5ff;
-  --fill-2: #aaccffb3;
+  --chart-fill-2: #aaccffb3;
   --chart-stroke-2: #3f8dff;
 }
 
@@ -26,8 +26,8 @@
   --chart-positive: #00bc7d;
   --chart-negative: #ff2056;
 
-  --fill: #475d75b3;
+  --chart-fill: #475d75b3;
   --chart-stroke: #8ec5ff;
-  --fill-2: #1f4176b3;
+  --chart-fill-2: #1f4176b3;
   --chart-stroke-2: #3f8dff;
 }

package/src/styles/color_general.css

@@ -29,10 +29,11 @@
 
   /* Start: Unofficial */
   --primary-hover: var(--color-brand-neutrals-50);
-  --secondary-hover: var(--color-brand-neutrals-50);
-  --primary-brand-hover: var(--color-brand-shades-500);
+  --secondary-hover: var(--color-brand-neutrals-200);
+  --tertiary-hover: var(--color-brand-neutrals-300);
+  --primary-brand-hover: var(--color-brand-shades-700);
   --destructive-text: var(--color-red-600);
-  --destructive-hover: var(--color-red-500);
+  --destructive-hover: var(--color-red-700);
   --destructive-subtle: var(--color-red-50);
   --destructive-border: var(--color-red-500);
   --destructive-border-subtle: var(--color-red-200);
@@ -128,6 +129,9 @@
   --non-delete-layer-hover: var(--color-violet-50);
   --non-delete-layer-accent: var(--color-violet-200);
 
+  --fill: rgba(63, 141, 255, 0.1);
+  --non-delete-fill: rgba(168, 85, 247, 0.1);
+
   --stroke: #3f8dff;
   --stroke-hover: #8fbcff;
   --non-delete-stroke: var(--color-violet-600);
@@ -160,10 +164,11 @@
 
   /* Start: Unofficial */
   --primary-hover: var(--color-brand-neutrals-950);
-  --secondary-hover: var(--color-brand-neutrals-900);
-  --primary-brand-hover: var(--color-brand-shades-500);
+  --secondary-hover: var(--color-brand-neutrals-800);
+  --tertiary-hover: var(--color-brand-neutrals-700);
+  --primary-brand-hover: var(--color-brand-shades-300);
   --destructive-text: var(--color-red-400);
-  --destructive-hover: var(--color-red-500);
+  --destructive-hover: var(--color-red-300);
   --destructive-subtle: var(--color-red-950);
   --destructive-border: var(--color-red-500);
   --destructive-border-subtle: var(--color-red-800);