webcake-ui-kit 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "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,7 +8,7 @@
   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;
@@ -28,7 +28,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/button/Button.vue

@@ -6,7 +6,8 @@
       `ui-btn--${size}`,
       `ui-btn--round-${roundness}`,
       isIconOnly && 'ui-btn--icon-only',
-      loading && 'ui-btn--loading'
+      loading && 'ui-btn--loading',
+      active && 'ui-btn--active'
     ]"
     :type="htmlType"
     :disabled="disabled || loading"
@@ -64,6 +65,7 @@ export default {
     label: { type: String, default: '' },
     disabled: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },
+    active: { type: Boolean, default: false },
     htmlType: {
       type: String,
       default: 'button',

package/src/components/button/button.css

@@ -156,7 +156,8 @@
 }
 
 .ui-btn--primary:hover,
-.ui-btn--primary:active {
+.ui-btn--primary:active,
+.ui-btn--primary.ui-btn--active {
   background: var(--primary-brand-hover);
 }
 
@@ -167,7 +168,8 @@
 }
 
 .ui-btn--neutral:hover,
-.ui-btn--neutral:active {
+.ui-btn--neutral:active,
+.ui-btn--neutral.ui-btn--active {
   background: var(--button-black-hover);
 }
 
@@ -178,7 +180,8 @@
 }
 
 .ui-btn--secondary:hover,
-.ui-btn--secondary:active {
+.ui-btn--secondary:active,
+.ui-btn--secondary.ui-btn--active {
   background: var(--secondary-hover);
 }
 
@@ -191,7 +194,8 @@
 }
 
 .ui-btn--outline:hover,
-.ui-btn--outline:active {
+.ui-btn--outline:active,
+.ui-btn--outline.ui-btn--active {
   background: var(--outline-hover);
   box-shadow: none;
 }
@@ -203,7 +207,8 @@
 }
 
 .ui-btn--ghost:hover,
-.ui-btn--ghost:active {
+.ui-btn--ghost:active,
+.ui-btn--ghost.ui-btn--active {
   background: var(--ghost-hover);
 }
 
@@ -214,7 +219,8 @@
 }
 
 .ui-btn--destructive:hover,
-.ui-btn--destructive:active {
+.ui-btn--destructive:active,
+.ui-btn--destructive.ui-btn--active {
   background: var(--destructive-hover);
 }
 
@@ -225,7 +231,8 @@
 }
 
 .ui-btn--ghost-destructive:hover,
-.ui-btn--ghost-destructive:active {
+.ui-btn--ghost-destructive:active,
+.ui-btn--ghost-destructive.ui-btn--active {
   background: var(--destructive-subtle);
 }
 
@@ -239,7 +246,8 @@
 }
 
 .ui-btn--link:hover,
-.ui-btn--link:active {
+.ui-btn--link:active,
+.ui-btn--link.ui-btn--active {
   color: var(--primary-brand-hover);
 }
 

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/sidebar-item/sidebar_item.css

@@ -4,7 +4,7 @@
   gap: var(--spacing-xs);
   width: 100%;
   padding: var(--spacing-2xs) var(--spacing-xs);
-  border-radius: var(--radius-6);
+  border-radius: var(--radius);
   color: var(--color-brand-neutrals-700);
   background: transparent;
   border: none;

package/src/components/table/style/table-wrapper.css

@@ -72,12 +72,15 @@
 }
 
 .ui-table__wrapper--ping-left ::v-deep .ui-table__cell--fixed-left__last {
-  box-shadow: var(--shadow-fixed-column-left);
   border-inline-end: none !important;
 }
 
-.ui-table__wrapper--ping-right ::v-deep .ui-table__cell--fixed-right__first {
-  box-shadow: var(--shadow-fixed-column-right);
+.ui-table__wrapper--ping-left ::v-deep .ui-table__cell--fixed-left__last::after {
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.12);
+}
+
+.ui-table__wrapper--ping-right ::v-deep .ui-table__cell--fixed-right__first::before {
+  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.12);
 }
 
 .ui-table__wrapper ::v-deep .ui-table__cell--fixed-left,

package/src/components/tag/Tag.vue

@@ -1,6 +1,11 @@
 <template>
   <span
-    :class="['ui-tag', `ui-tag--type-${type}`, `ui-tag--${size}`, { 'ui-tag--with-icon': hasIcon }]"
+    :class="[
+      'ui-tag',
+      `ui-tag--type-${type}`,
+      `ui-tag--${size}`,
+      { 'ui-tag--with-icon': hasIcon, 'ui-tag--active': active }
+    ]"
     @click="handleClick"
   >
     <span v-if="hasIcon" class="ui-tag__icon"><slot name="icon" /></span>
@@ -31,12 +36,13 @@ 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 },
     closable: { type: Boolean, default: false },
-    label: { type: String, default: '' }
+    label: { type: String, default: '' },
+    active: { type: Boolean, default: false }
   },
   emits: ['close', 'click'],
   computed: {

package/src/components/tag/tag.css

@@ -15,11 +15,12 @@
 
 /* — type — */
 .ui-tag--type-default {
-  background: var(--secondary-bg);
+  background: var(--tertiary-bg);
   color: var(--primary-fg);
 }
-.ui-tag--type-default:hover {
-  background: #f0f0f0;
+.ui-tag--type-default:hover,
+.ui-tag--type-default.ui-tag--active {
+  background: var(--tertiary-hover);
 }
 
 .ui-tag--type-outline {
@@ -27,7 +28,8 @@
   border: 1px solid var(--border-primary);
   color: var(--secondary-fg);
 }
-.ui-tag--type-outline:hover {
+.ui-tag--type-outline:hover,
+.ui-tag--type-outline.ui-tag--active {
   background: rgba(0, 0, 0, 0.05);
   color: var(--primary-fg);
 }
@@ -37,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);

package/src/styles/shadow.css

@@ -10,7 +10,7 @@
   --shadow-2xl: 0px 25px 50px -12px var(--color-black-alpha-10);
   --shadow-sonner: 0px 4px 12px 0px var(--color-black-alpha-10);
   --shadow-fixed-column-left: 6px 0 6px -4px var(--color-black-alpha-10);
-  --shadow-fixed-column-right: -6px 0 6px -4px var(--color-black-alpha-10);
+  --shadow-fixed-column-right: -10px 0 8px -8px rgba(5, 5, 5, 0.06);
 
   --shadow-focus-ring: 0 0 0 3px var(--focus-ring);
   --shadow-focus-ring-error: 0 0 0 3px var(--focus-ring-error);