@vanjana/vue-ui 0.1.59

package/themes/common/components/_shell.scss

@@ -0,0 +1,101 @@
+@use "../mixins" as *;
+
+.shell {
+  padding: 0;
+
+  > header {
+    padding: var(--space-s);
+
+    .shell-title {
+      gap: var(--space-m);
+      img {
+        width: 40px;
+        height: 40px;
+      }
+    }
+
+    .header-actions {
+      display: flex;
+      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);
+  }
+
+  .shell-content {
+    main {
+      padding: 0;
+      overflow: auto;
+    }
+
+    aside {
+      border-left: 1px solid var(--color-border);
+    }
+
+    &.with-navigation {
+      main {
+        padding: 0 var(--space-m);
+      }
+    }
+  }
+
+  .shell-navigation {
+    flex-basis: 4rem;
+    border-radius: 0 10px 20px 0 !important;
+    border-bottom: var(--border-footer) !important;
+
+    @include useColor("navigation");
+    @include container();
+
+    ul {
+      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-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-item-label {
+      display: none;
+    }
+    &.with-labels {
+      .shell-navigation-item-label {
+        display: inline;
+      }
+    }
+
+    .navigation-bottom {
+      margin-top: auto;
+    }
+  }
+}

package/themes/common/components/_tab-view.scss

@@ -0,0 +1,40 @@
+@use "../mixins" as *;
+
+.tab-view {
+  .tab-view-header {
+    gap: var(--space-s);
+    position: relative;
+
+    .tab-button {
+      padding: var(--space-s) var(--space-l);
+      background: none;
+      border: none;
+      cursor: pointer;
+      transition: color 0.2s;
+      @include useFont("button");
+      @include useColor("tab");
+
+      &:hover {
+        @include useColor("tab-hover");
+      }
+
+      &.active {
+        @include useColor("tab-active");
+      }
+    }
+  }
+}
+
+.tab-indicator {
+  height: var(--tab-indicator-height);
+  background-color: var(--color-border-highlight);
+  transition: all 0.3s ease;
+}
+.tab-line {
+  height: var(--tab-indicator-height);
+  background-color: var(--color-border);
+}
+
+.tab-view-content {
+  flex: 1;
+}

package/themes/common/components/_tab.scss

@@ -0,0 +1,12 @@
+.tab {
+  animation: fadeIn 0.2s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,32 @@
+@use "../../mixins" as *;
+
+.form-field {
+  margin-top: var(--space-s);
+  font-family: inherit;
+
+  /* LABEL */
+  .form-field__label {
+    left: 8px;
+    padding: 0 var(--space-xs);
+    @include useFont("caption");
+    @include useColor("input-label");
+  }
+
+  .form-field__label--float {
+    left: 12px;
+    @include useFont("caption");
+    @include useColor("input-label-floating");
+  }
+
+  &.disabled {
+    opacity: var(--opacity-disabled);
+  }
+
+  &.labelless {
+    margin-top: 0;
+
+    .form-field__label {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+@use "../../mixins" as *;
+
+.input {
+  padding: var(--space-s) var(--space-l);
+  border-radius: var(--border-radius-input);
+  outline: var(--border-input);
+  outline-offset: -1px;
+  gap: var(--space-s);
+
+  @include useFont("input");
+  @include useColor("input");
+
+  > * {
+    align-self: center;
+    width: 100%;
+  }
+
+  &:focus-within {
+    @include inputFocus();
+  }
+
+  input {
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0 var(--space-s);
+    background: transparent;
+    font: inherit;
+    color: inherit;
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .clear-icon {
+    transition: opacity 0.2s ease-in;
+  }
+}

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

@@ -0,0 +1,60 @@
+@use "../../mixins" as *;
+
+.select:not(.form-field--control) {
+  .select-trigger {
+    border: var(--border-input);
+    border-radius: var(--border-radius-input);
+    padding: var(--space-s) var(--space-m);
+    text-align: left;
+    transition: all 0.2s;
+    height: 40px;
+    outline: var(--border-input);
+    outline-offset: -1px;
+
+    @include useColor("input");
+    @include useFont("input");
+
+    &:hover:not(:disabled) {
+      @include useColor("input-hover");
+      border-color: var(--color-primary);
+    }
+
+    &:focus-visible {
+      @include inputFocus();
+    }
+  }
+
+  .select-placeholder {
+    color: var(--color-text-secondary);
+  }
+
+  .select-dropdown {
+    background-color: var(--color-background);
+    border-color: var(--color-border);
+    border-radius: var(--border-radius-s);
+  }
+
+  .select-option {
+    &:hover,
+    &.highlighted {
+      background-color: var(--color-hover);
+    }
+
+    &.selected {
+      background-color: var(--color-primary-light);
+      color: var(--color-primary);
+    }
+  }
+}
+
+// Select im FormField
+.select.form-field--control {
+  .select-trigger {
+    @include useFont("input");
+    @include useColor("input");
+  }
+
+  .select-placeholder {
+    color: var(--color-text-secondary);
+  }
+}

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

@@ -0,0 +1,38 @@
+@use "../../mixins" as *;
+
+.textarea {
+  padding: var(--space-s) var(--space-l);
+  border-radius: var(--border-radius-input);
+  outline: var(--border-input);
+  outline-offset: -1px;
+
+  @include useFont("input");
+  @include useColor("input");
+
+  > * {
+    align-self: flex-start;
+  }
+
+  &:focus-within {
+    @include inputFocus();
+  }
+
+  textarea {
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0 var(--space-s);
+    background: transparent;
+    font: inherit;
+    color: inherit;
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .clear-icon {
+    transition: opacity 0.2s ease-in;
+  }
+}

package/themes/default.scss

@@ -0,0 +1,12 @@
+:root {
+  --box-shadow-container: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  --padding-container: 0.5rem;
+  --border-radius-component: 6px;
+  --border-radius-container: 4px;
+
+  --space-xs: 0.25rem;
+  --space-s: 0.5rem;
+  --space-m: 0.75rem;
+  --space-l: 1em;
+  --space-xl: 1.5rem;
+}

package/themes/light/_shell.scss

@@ -0,0 +1,56 @@
+@mixin glassbox($bordered: true, $color: #7b7fdf) {
+  background: $color;
+  color: white;
+  border-radius: 4px;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  @if $bordered {
+    padding: var(--space-m);
+    border: solid 1px #ffffff90;
+  }
+}
+
+body {
+  @include glassbox(false, #6664d0);
+}
+
+.shell {
+  > header {
+    @include glassbox(false, #6664d0);
+
+    h1 {
+      @include glassbox();
+      // @include glassbox(true, linear-gradient(135deg, #8b5fbf 0%, #6b46c1 50%, #553c9a 100%));
+      // @include glassbox(true, radial-gradient(circle, #8b5fbf 0%, #553c9a 100%));
+      // @include glassbox(true, radial-gradient(ellipse, #a78bfa 0%, #7c3aed 70%, #6d28d9 100%));
+
+      // @include glassbox(true, radial-gradient(circle at center, #8b5cf6 0%, #6b46c1 100%));
+      // @include glassbox(true, radial-gradient(circle at top left, #8b5cf6 0%, #553c9a 100%));
+      // @include glassbox(true, radial-gradient(ellipse at center, #a855f7 0%, #8b5cf6 40%, #ec4899 100%));
+      // @include glassbox(true, radial-gradient(circle, #78716c 0%, #44403c 100%));
+      // @include glassbox(true, radial-gradient(circle, #f8fafc 0%, #e2e8f0 100%));
+      // @include glassbox(true, );
+    }
+
+    .button {
+      @include glassbox();
+    }
+    .button {
+      border-radius: 50%;
+    }
+  }
+}
+
+.page {
+  > header {
+    @include glassbox(false, #6664d0);
+
+    h2 {
+      @include glassbox();
+    }
+  }
+}
+
+.project-center {
+  @include glassbox();
+}

package/themes/light/theme.scss

@@ -0,0 +1,51 @@
+@use "../common/mixins" as *;
+@forward "../common/components";
+@forward "../default";
+
+:root {
+  --color-border: #dedede; //#cbd5e1
+  --color-border-highlight: #4f46e5; //#cbd5e1
+  --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;
+
+  @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("navigation", #ffffff, #2d3748);
+  @include defineColor("navigation-item", transparent, #64748b);
+  @include defineColor("navigation-hover", transparent, #4f46e5);
+
+  @include defineColor("button-primary", #4f46e5, #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 defineFont("title", h1, 24px, 600);
+  @include defineFont("title", h2, 24px, 600);
+  @include defineFont("header", h3, 18px, 600, 32px);
+  @include defineFont("primary", body, 16px, 400);
+  @include defineFont("input", input, 16px, 400, 24px);
+  @include defineFont("caption", label, 14px, 400, 24px);
+  @include defineFont("button", button, 16px, 600, 24px);
+}
+
+html,
+body {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: white;
+}

package/themes/mixins.scss

@@ -0,0 +1 @@
+@forward "./common/mixins";