@oruga-ui/theme-oruga 0.0.1

package/src/App.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+const paths = import.meta.glob("./components/*.vue") as any;
+const components = Object.keys(paths)
+  .map((c: string) => c.replace(".vue", ""))
+  .map((c: string) => c.replace("./components/", ""))
+  .map((c: string) => `/${c}`)
+  .map((c: string) => {
+    const name = c.split("/")[1];
+    return {
+      name,
+      link: c,
+    };
+  });
+</script>
+
+<template>
+  <div id="app">
+    <nav id="nav">
+      <router-link to="/" class="theme-label">
+        <img
+          class="image__oruga"
+          src="https://oruga.io/logo.png"
+          alt="Logo Oruga Default Theme" />
+        <b>Oruga Default Theme</b>
+      </router-link>
+      <hr />
+      <router-link v-for="item in components" :key="item.name" :to="item.link">
+        {{ item.name }}
+      </router-link>
+    </nav>
+
+    <main>
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style lang="scss">
+@import "./assets/scss/utils/variables";
+
+#app {
+  display: flex;
+  width: 100%;
+
+  main {
+    flex-grow: 1;
+    margin: 2rem;
+
+    > section {
+      margin: 1rem 0;
+
+      h3 {
+        font-size: 1.75rem;
+      }
+
+      .buttons > *:not(:last-child) {
+        margin-right: 0.5rem;
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
+
+  #nav {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    min-height: 100vh;
+    width: 15%;
+    background-color: $grey-light;
+
+    .theme-label {
+      font-size: 1.5rem;
+      text-align: center;
+      padding: 1rem 0;
+    }
+
+    a {
+      font-weight: bold;
+      color: white;
+      text-decoration: none;
+      padding: 1px 0 1px 10px;
+      font-size: 1em;
+
+      &.router-link-exact-active {
+        color: $primary;
+      }
+    }
+  }
+}
+
+.image__oruga {
+  height: 64px;
+  display: flex;
+  margin: 0 auto;
+}
+
+@media (max-width: 576px) {
+  #app {
+    #nav {
+      display: none;
+    }
+  }
+}
+</style>

package/src/assets/scss/components/_autocomplete.scss

@@ -0,0 +1,130 @@
+/* @docs */
+$autocomplete-item-color: #000000 !default;
+$autocomplete-item-disabled-opacity: $base-disabled-opacity !default;
+$autocomplete-item-font-size: $base-font-size !default;
+$autocomplete-item-hover-background-color: #f5f5f5 !default;
+$autocomplete-item-hover-color: #000000 !default;
+$autocomplete-item-line-height: $base-line-height !default;
+$autocomplete-item-padding: 0.375rem 1rem !default;
+$autocomplete-menu-background: #ffffff !default;
+$autocomplete-menu-border-radius: $base-border-radius !default;
+$autocomplete-menu-box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
+  0 0 0 1px rgba(10, 10, 10, 0.02) !default;
+$autocomplete-menu-margin: 0 !default;
+$autocomplete-menu-max-height: 200px !default;
+$autocomplete-menu-padding: 0.5rem 0 0.5rem 0 !default;
+$autocomplete-menu-zindex: 20 !default;
+/* @docs */
+
+.o-acp {
+  position: relative;
+
+  &__menu {
+    display: block;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    overflow: auto;
+
+    @include avariable(
+      "z-index",
+      "autocomplete-menu-zindex",
+      $autocomplete-menu-zindex
+    );
+    @include avariable(
+      "background-color",
+      "autocomplete-menu-background",
+      $autocomplete-menu-background
+    );
+    @include avariable(
+      "border-radius",
+      "autocomplete-menu-border-radius",
+      $autocomplete-menu-border-radius
+    );
+    @include avariable(
+      "box-shadow",
+      "autocomplete-menu-box-shadow",
+      $autocomplete-menu-box-shadow
+    );
+    @include avariable(
+      "padding",
+      "autocomplete-menu-padding",
+      $autocomplete-menu-padding
+    );
+    @include avariable(
+      "margin",
+      "autocomplete-menu-margin",
+      $autocomplete-menu-margin
+    );
+    @include avariable(
+      "max-height",
+      "autocomplete-menu-max-height",
+      $autocomplete-menu-max-height
+    );
+
+    &--top {
+      top: auto;
+      bottom: 100%;
+    }
+  }
+
+  &__item {
+    display: block;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+
+    @include avariable(
+      "color",
+      "autocomplete-item-color",
+      $autocomplete-item-color
+    );
+    @include avariable(
+      "font-size",
+      "autocomplete-item-font-size",
+      $autocomplete-item-font-size
+    );
+    @include avariable(
+      "line-height",
+      "autocomplete-item-line-height",
+      $autocomplete-item-line-height
+    );
+    @include avariable(
+      "padding",
+      "autocomplete-item-padding",
+      $autocomplete-item-padding
+    );
+
+    &-group-title,
+    &--empty {
+      pointer-events: none;
+
+      @include avariable(
+        "opacity",
+        "autocomplete-item-disabled-opacity",
+        $autocomplete-item-disabled-opacity
+      );
+    }
+
+    &--hover,
+    &:hover {
+      @include avariable(
+        "background",
+        "autocomplete-item-hover-background-color",
+        $autocomplete-item-hover-background-color
+      );
+      @include avariable(
+        "color",
+        "autocomplete-item-hover-color",
+        $autocomplete-item-hover-color
+      );
+    }
+  }
+
+  &--expanded {
+    width: 100%;
+  }
+}

package/src/assets/scss/components/_button.scss

@@ -0,0 +1,242 @@
+@use "sass:list";
+
+/* @docs */
+$button-background-color: $primary !default;
+$button-color: $primary-invert !default;
+$button-border-radius: $base-border-radius !default;
+$button-border: 1px solid $button-background-color !default;
+$button-box-shadow: none !default;
+$button-font-weight: 400 !default;
+$button-line-height: $base-line-height !default;
+$button-margin-icon-to-text: 0.1875em !default;
+$button-margin: 0 !default;
+$button-height: $control-height !default;
+$button-padding: $control-padding-vertical 0.75em !default;
+$button-rounded-border-radius: $base-rounded-border-radius !default;
+$button-disabled-opacity: $base-disabled-opacity !default;
+$button-outlined-background-color: transparent !default;
+/* @docs */
+
+@keyframes spinAround {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+.o-btn {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+  text-decoration: none;
+
+  @include unselectable;
+  @include avariable(
+    "background-color",
+    "button-background-color",
+    $button-background-color
+  );
+  @include avariable("color", "button-color", $button-color);
+  @include avariable("padding", "button-padding", $button-padding);
+  @include avariable("border", "button-border", $button-border);
+  @include avariable(
+    "border-radius",
+    "button-border-radius",
+    $button-border-radius
+  );
+  @include avariable("box-shadow", "button-box-shadow", $button-box-shadow);
+  @include avariable("font-size", "base-font-size", $base-font-size);
+  @include avariable("font-weight", "button-font-weight", $button-font-weight);
+  @include avariable("line-height", "button-line-height", $button-line-height);
+  @include avariable("margin", "button-margin", $button-margin);
+  @include avariable("height", "button-height", $button-height);
+
+  &__wrapper {
+    @include side-flex-gap($button-margin-icon-to-text);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+  }
+
+  &__label {
+    width: 100%;
+  }
+
+  &--expanded {
+    width: 100%;
+  }
+
+  &--rounded {
+    @include avariable(
+      "border-radius",
+      "button-rounded-border-radius",
+      $button-rounded-border-radius
+    );
+  }
+
+  &--disabled {
+    @include avariable(
+      "opacity",
+      "button-disabled-opacity",
+      $button-disabled-opacity
+    );
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include avariable("font-size", ("button-font-size-" + #{$name}), $value);
+    }
+  }
+  @each $name, $pair in $colors {
+    $color: list.nth($pair, 1);
+    $color-invert: list.nth($pair, 2);
+    &--#{$name} {
+      border-color: transparent;
+
+      @include avariable("background-color", ("variant-" + #{$name}), $color);
+      @include avariable(
+        "color",
+        ("variant-invert-" + #{$name}),
+        $color-invert
+      );
+
+      &:hover {
+        // background-color: darken($color, 2.5%)
+        // IE 11 needs polyfill
+        filter: brightness(97.5%);
+      }
+    }
+  }
+
+  &--outlined {
+    @include avariable(
+      "background-color",
+      "button-outlined-background-color",
+      $button-outlined-background-color
+    );
+    @include avariable(
+      "border-color",
+      "button-background-color",
+      $button-background-color
+    );
+    @include avariable(
+      "color",
+      "button-background-color",
+      $button-background-color
+    );
+
+    &:hover {
+      border-color: transparent;
+
+      @include avariable(
+        "background-color",
+        "button-background-color",
+        $button-background-color
+      );
+      @include avariable("color", "button-color", $button-color);
+    }
+
+    @each $name, $pair in $colors {
+      $color: list.nth($pair, 1);
+      $color-invert: list.nth($pair, 2);
+      &-#{$name} {
+        @include avariable(
+          "background-color",
+          "button-outlined-background-color",
+          $button-outlined-background-color
+        );
+        @include avariable("border-color", ("variant-" + #{$name}), $color);
+        @include avariable("color", ("variant-" + #{$name}), $color);
+
+        &:hover {
+          border-color: transparent;
+
+          @include avariable(
+            "background-color",
+            ("variant-" + #{$name}),
+            $color
+          );
+          @include avariable(
+            "color",
+            ("variant-invert-" + #{$name}),
+            $color-invert
+          );
+        }
+      }
+    }
+  }
+
+  &--loading {
+    color: transparent !important;
+    pointer-events: none;
+  }
+
+  &--loading::after {
+    -webkit-animation: spinAround 500ms infinite linear;
+    left: calc(50% - 0.5em);
+    top: calc(50% - 0.5em);
+    position: absolute !important;
+    border: 2px solid #dbdbdb;
+    border-radius: 9999px;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: 1em;
+    width: 1em;
+  }
+
+  &--inverted {
+    @include avariable("background-color", "button-color", $button-color);
+    @include avariable("border-color", "button-color", $button-color);
+    @include avariable(
+      "color",
+      "button-background-color",
+      $button-background-color
+    );
+
+    &:hover {
+      // background-color: darken($color-invert, 5%)
+      // IE 11 needs polyfill
+      filter: brightness(95%);
+    }
+
+    @each $name, $pair in $colors {
+      $color: list.nth($pair, 1);
+      $color-invert: list.nth($pair, 2);
+      &-#{$name} {
+        @include avariable(
+          "background-color",
+          ("variant-invert-" + #{$name}),
+          $color-invert
+        );
+        @include avariable(
+          "border-color",
+          ("variant-invert-" + #{$name}),
+          $color-invert
+        );
+        @include avariable("color", ("variant-" + #{$name}), $color);
+
+        &:hover {
+          // background-color: darken($color-invert, 5%)
+          // IE 11 needs polyfill
+          filter: brightness(95%);
+        }
+      }
+    }
+  }
+}