@vanjana/vue-ui 0.1.61 → 0.1.85

package/themes/common/components/_checkbox.scss

@@ -1,26 +1,60 @@
+@use "../mixins" as *;
+
 .checkbox {
-  gap: var(--space-s);
+  gap: 0.5rem;
+}
 
-  &:hover .checkbox-box {
-    border-color: var(--color-primary);
+.checkbox-input {
+  opacity: 0;
+
+  &:disabled + .checkbox-box {
+    opacity: 0.5;
+  }
+
+  &:focus-visible + .checkbox-box {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
   }
 }
 
 .checkbox-box {
-  border-color: var(--color-border);
-  border-radius: var(--border-radius-s);
-  background-color: var(--color-background);
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--color-border);
+  border-radius: var(--border-radius-input);
+  transition: all 0.2s ease;
+  @include useColor("input");
 }
 
 .checkbox-icon {
-  color: var(--color-primary-contrast);
+  width: 16px;
+  height: 16px;
+}
+
+.checkbox-check {
+  stroke-dasharray: 24;
+  stroke-dashoffset: 24;
+  transition: stroke-dashoffset 0.3s ease;
+  stroke: currentColor;
 }
 
 .checkbox-input:checked + .checkbox-box {
-  background-color: var(--color-primary);
+  @include useColor("primary");
+
+  .checkbox-check {
+    stroke-dashoffset: 0;
+  }
+}
+
+.checkbox-box:hover {
   border-color: var(--color-primary);
 }
 
 .checkbox-label {
-  color: var(--color-text-primary);
+  font-size: 1rem;
+  @include useColor("base");
+}
+
+.checkbox-input:disabled ~ .checkbox-label {
+  opacity: 0.5;
 }

package/themes/common/components/_chip.scss

@@ -0,0 +1,24 @@
+@use "../mixins" as *;
+
+.chip {
+  justify-content: center;
+  align-items: center;
+
+  gap: var(--space-s);
+  padding: var(--space-xs) var(--space-xl);
+  border-radius: 2rem;
+
+  background: rgba(0, 0, 0, 0.06);
+  color: inherit;
+
+  @include useFont("button");
+}
+
+.chip__close {
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}

package/themes/common/components/_loading-overlay.scss

@@ -0,0 +1,67 @@
+@use "../mixins" as *;
+
+.vj-loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(1px);
+  z-index: 9999;
+  pointer-events: all;
+
+  /* centered inner box with padding; spinner above text */
+  .vj-loading-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-xl);
+    padding: var(--space-xl);
+    border-radius: var(--space-m);
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: var(--box-shadow-container);
+    pointer-events: none; /* allow overlay to catch interactions but inner box should not intercept extra */
+
+    .spinner {
+      width: 5rem;
+      height: 5rem;
+    }
+  }
+
+  /* small padding variant when container has limited height */
+  .vj-loading-inner--small {
+    .spinner {
+      width: 2rem;
+      height: 2rem;
+    }
+    padding: 12px;
+    gap: 8px;
+  }
+
+  /* minimal variant: no inner frame, transparent background, no shadow */
+  .vj-loading-inner--minimal {
+    padding: 6px;
+    background: transparent;
+    box-shadow: none;
+    .spinner {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+}
+
+.vj-loading-overlay--hidden {
+  display: none;
+}
+
+.vj-loading-text {
+  text-align: center;
+  @include useFont("secondary");
+  @include useColor("base");
+}
+
+.vj-loading-text--hidden {
+  display: none;
+}

package/themes/common/components/_radio.scss

@@ -0,0 +1,59 @@
+@use "../mixins" as *;
+
+.radio {
+  gap: 0.5rem;
+}
+
+.radio-input {
+  opacity: 0;
+
+  &:disabled + .radio-box {
+    opacity: 0.5;
+  }
+
+  &:focus-visible + .radio-box {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+}
+
+.radio-box {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--color-border);
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @include useColor("input");
+}
+
+.radio-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  transform: scale(0);
+  transition: transform 180ms ease;
+  background: currentColor;
+}
+
+.radio-input:checked + .radio-box {
+  .radio-dot {
+    transform: scale(1);
+    @include useColor("primary");
+  }
+}
+
+.radio-box:hover {
+  border-color: var(--color-primary);
+}
+
+.radio-label {
+  font-size: 1rem;
+  @include useColor("base");
+}
+
+.radio-input:disabled ~ .radio-label {
+  opacity: 0.5;
+}

package/themes/common/components/_shell.scss

@@ -5,6 +5,7 @@
 
   > header {
     padding: var(--space-s);
+    @include useColor("shell-header");
 
     .shell-title {
       gap: var(--space-m);
@@ -19,8 +20,6 @@
       gap: var(--space-s);
     }
 
-    --application__color: blue;
-    --application-gradient: linear-gradient(90deg, #e0f7ff 0%, #c5dbff 20%, #fff9e6 50%, #ffe4f0 75%, #ffd9f2 100%);
     border-bottom: solid var(--space-s) var(--application__color);
     border-image-slice: 1;
     border-image-source: var(--application-gradient);
@@ -28,7 +27,7 @@
 
   .shell-content {
     main {
-      padding: 0;
+      padding: var(--space-s);
       overflow: auto;
     }
 
@@ -55,32 +54,30 @@
       padding: 0;
       margin: 0;
       gap: var(--space-s);
+    }
+    .shell-navigation-item {
+      padding: 0;
+      margin: 0;
+
+      .shell-navigation-item-link {
+        padding: var(--space-m) var(--space-s);
+        text-decoration: none;
+        border-left: solid 5px transparent;
+        transition: all 0.2s ease;
 
-      .shell-navigation-item {
-        padding: 0;
-        margin: 0;
-
-        .shell-navigation-item-link {
-          padding: var(--space-m) var(--space-s);
-          text-decoration: none;
-          border-left: solid 5px transparent;
-          transition: all 0.2s ease;
-
-          .shell-navigation-icon {
-            font-size: 1.5rem;
-          }
-
-          @include useColor("navigation-item");
-
-          &:hover {
-            @include useColor("navigation-hover");
-            border-left: solid 5px currentColor;
-          }
-          &.router-link-active {
-            @include useColor("navigation-hover");
-            border-left: solid 5px currentColor;
-            background-color: rgba(255, 255, 255, 0.5);
-          }
+        .shell-navigation-icon {
+          font-size: 1.5rem;
+        }
+
+        @include useColor("navigation-item");
+
+        &:hover {
+          border-left: solid 5px currentColor;
+          @include useColor("navigation-hover");
+        }
+        &.router-link-active {
+          border-left: solid 5px currentColor;
+          @include useColor("navigation-item-active");
         }
       }
     }

package/themes/common/components/_skeleton.scss

@@ -0,0 +1,31 @@
+@use "../mixins" as *;
+
+.vj-skeleton {
+  @include useColor("skeleton");
+
+  &::after {
+    transform: translate(0, 0);
+    filter: blur(0.2px);
+    opacity: 0.95;
+    animation: shimmer-diag 2.5s linear infinite;
+
+    @include useColor("skeleton-shimmer");
+  }
+
+  @keyframes shimmer-diag {
+    0% {
+      transform: translate(-100%, -100%);
+    }
+    100% {
+      transform: translate(100%, 100%);
+    }
+  }
+
+  /* Respect users who prefer reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .vj-skeleton::after {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+}

package/themes/common/components/form/_form-field.scss

@@ -6,14 +6,14 @@
 
   /* LABEL */
   .form-field__label {
-    left: 8px;
+    left: var(--space-s);
     padding: 0 var(--space-xs);
     @include useFont("caption");
     @include useColor("input-label");
   }
 
   .form-field__label--float {
-    left: 12px;
+    left: var(--space-m);
     @include useFont("caption");
     @include useColor("input-label-floating");
   }
@@ -29,4 +29,41 @@
       display: none;
     }
   }
+
+  &.form-field--underlined {
+    .form-field__label {
+      left: 0 !important;
+      padding-left: 0px !important;
+    }
+
+    .input,
+    .textarea {
+      border-radius: 0 !important;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+      outline: none !important;
+      box-shadow: 0px 2px 0px var(--color-border);
+
+      &:focus-within {
+        box-shadow: 0px 2px 0px #7c3aed !important;
+      }
+    }
+
+    .select-trigger {
+      outline: none !important;
+      border-left: none !important;
+      border-right: none !important;
+      border-top: none !important;
+      border-radius: 0 !important;
+      border-width: 2px !important;
+      padding-left: 0px !important;
+      border-color: var(--color-border) !important;
+
+      &:focus-visible {
+        outline: none !important;
+        box-shadow: none !important;
+        border-color: #7c3aed !important;
+      }
+    }
+  }
 }

package/themes/common/components/form/_input.scss

@@ -1,10 +1,10 @@
 @use "../../mixins" as *;
 
 .input {
-  padding: var(--space-s) var(--space-l);
   border-radius: var(--border-radius-input);
   outline: var(--border-input);
   outline-offset: -1px;
+  padding: var(--space-s) var(--space-l);
   gap: var(--space-s);
 
   @include useFont("input");

package/themes/common/components/notification/_notification.scss

@@ -0,0 +1,39 @@
+@use "../../mixins" as *;
+
+.notification {
+  position: relative;
+  gap: var(--space-s);
+  padding: var(--space-xs) var(--space-s);
+  border-radius: var(--border-radius-component);
+  border-left: 4px solid;
+
+  .notification__message {
+    flex: 1 1 auto;
+    gap: var(--space-s);
+
+    .notification__title {
+      @include useFont("button");
+    }
+  }
+
+  .notification__icon {
+    flex-shrink: 0;
+    font-size: 24px;
+  }
+}
+
+.notification--success {
+  @include useColor("success");
+}
+
+.notification--info {
+  @include useColor("info");
+}
+
+.notification--warning {
+  @include useColor("warning");
+}
+
+.notification--error {
+  @include useColor("danger");
+}

package/themes/light/theme.scss

@@ -3,37 +3,61 @@
 @forward "../default";
 
 :root {
-  --color-border: #dedede; //#cbd5e1
-  --color-border-highlight: #4f46e5; //#cbd5e1
+  /* Restore previous primary (softer blue) and add a subtle gradient/shimmer */
+  --primary-solid: #3b82c4; /* restored soft primary */
+  --primary-gradient: linear-gradient(90deg, #3b82c4 0%, #6197ca 45%, #3b82c4 100%);
+  --application__color: var(--primary-solid);
+  --application-gradient: linear-gradient(90deg, #e8f6ff 0%, #d6e9ff 35%, #f7f9ff 70%, #fff8ea 100%);
+
+  --color-border: #cccccc;
+  --color-border-highlight: #6d5df6;
   --border-footer: solid 1px var(--color-border);
   --border-input: solid 1px var(--color-border); //#cbd5e1
   --border-radius-input: 6px;
   --opacity-disabled: 0.5;
   --tab-indicator-height: 3px;
 
+  --spinner-gradient: linear-gradient(90deg, #00b3a6 0%, #6fb6ff 40%, #ffd39a 80%);
+
   @include defineColor("base", #ffffff, #333333);
   @include defineColor("input", #ffffff, #333333);
   @include defineColor("input-label", #ffffff, #64748b);
   @include defineColor("input-label-floating", #ffffff, #4c1d95);
 
+  @include defineColor("shell-header", #ffffff, #2d3748);
   @include defineColor("navigation", #ffffff, #2d3748);
   @include defineColor("navigation-item", transparent, #64748b);
-  @include defineColor("navigation-hover", transparent, #4f46e5);
+  @include defineColor("navigation-item-active", rgba(255, 255, 255, 0.5), #3b82c4);
+  @include defineColor("navigation-hover", transparent, #3b82c4);
 
-  @include defineColor("button-primary", #4f46e5, #ffffff);
+  @include defineColor("button-primary", var(--primary-gradient), #ffffff);
   @include defineColor("button-secondary", #f97316, #ffffff);
   @include defineColor("button-tertiary", transparent, #374151);
   @include defineColor("dot-menu", #eeeeee, #374151);
   @include defineColor("button-hover", #403b9c, #ffffff);
 
   @include defineColor("tab", transparent, #333333);
-  @include defineColor("tab-hover", transparent, #4f46e5);
-  @include defineColor("tab-active", transparent, #4f46e5);
+  @include defineColor("tab-hover", transparent, #3b82c4);
+  @include defineColor("tab-active", transparent, #3b82c4);
+
+  @include defineColor("primary", var(--primary-solid), #ffffff);
+  @include defineColor("success", #1fb67a, #ffffff);
+  @include defineColor("info", #e6f0ff, #0b57d0);
+  @include defineColor("warning", #f59e0b, #ffffff);
+  @include defineColor("danger", #e11d48, #ffffff);
+
+  @include defineColor("skeleton", #e9ecef, #b00020);
+  @include defineColor(
+    "skeleton-shimmer",
+    linear-gradient(135deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 70%),
+    #b00020
+  );
 
   @include defineFont("title", h1, 24px, 600);
-  @include defineFont("title", h2, 24px, 600);
+  @include defineFont("subtitle", h2, 24px, 600);
   @include defineFont("header", h3, 18px, 600, 32px);
   @include defineFont("primary", body, 16px, 400);
+  @include defineFont("secondary", secondary, 14px, 300, 16px);
   @include defineFont("input", input, 16px, 400, 24px);
   @include defineFont("caption", label, 14px, 400, 24px);
   @include defineFont("button", button, 16px, 600, 24px);