@exakt/ui 0.0.43 → 0.0.44

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.43"
+  "version": "0.0.44"
 }

package/dist/runtime/components/e/btn.vue

@@ -14,7 +14,7 @@
       'my-2': solid,
       loading,
       fab,
-      colored: background !== 'transparent' || color || solid,
+      ...backgroundClass
     }"
   >
     <div
@@ -41,8 +41,7 @@
   </button>
 </template>
 <script lang="ts" setup>
-import { computed, useNuxtApp,  } from "#imports";
-//import { IonSpinner } from "@ionic/vue";
+import { computed, useNuxtApp, } from "#imports";
 const { $exakt } = useNuxtApp();
 const props = withDefaults(
   defineProps<{
@@ -86,14 +85,32 @@ const backgroundColorRgb = computed(() => {
   if (!props.background || process.server) {
     return { r: 0, g: 0, b: 0 };
   }
-  return parseColor(parsedBackgroundProp.value);
+  return parseColor($exakt.parseColor(props.background));
 });
 
-const parsedBackgroundProp = computed(() =>
-  $exakt.parseColor(props.background)
-);
+const isRootColor = computed(() => $exakt.rootColors.includes(props.background))
+const backgroundClass = computed(() => {
+  const c: { [key: string]: boolean } = {}
+
+  if(props.background == 'transparent'){
+    c['transparent'] = true;
+  }else if (isRootColor.value) {
+    c["bg-" + props.background] = true
+  } else {
+    c['custom-color'] = true
+  }
 
+  return c
+})
+const backgroundColor = computed(() => {
+  if (isRootColor.value) { return 'unset' } else {
+    return props.background
+  }
+})
 const textColor = computed(() => {
+  if (isRootColor.value) {
+    return 'unset';
+  }
   if (props.color) {
     return props.color;
   }
@@ -112,14 +129,7 @@ const textColor = computed(() => {
   return "#FFFFFF";
 });
 
-const hoverColor = computed(() => {
-  if (parsedBackgroundProp.value === "transparent") {
-    return "rgba(98, 98, 98, 0.15)";
-  }
 
-  const rgb = backgroundColorRgb.value;
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.9)`;
-});
 </script>
 <style lang="scss" scoped>
 .e-btn-content {
@@ -135,7 +145,6 @@ const hoverColor = computed(() => {
 
 .e-btn {
   user-select: none;
-  background: rgba(0, 0, 0, 0);
   display: flex;
   font-size: 1rem;
 
@@ -144,7 +153,6 @@ const hoverColor = computed(() => {
   align-items: center;
   padding: 0.3rem var(--e-core-padding-x);
   overflow: hidden;
-  color: var(--e-color-dark);
   outline: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   border: none;
@@ -159,6 +167,14 @@ const hoverColor = computed(() => {
 
   border: transparent solid 0.1rem;
 
+  &.transparent {
+    color: var(--e-color-dark);
+    background: rgba(0, 0, 0, 0);
+    &:hover {
+       background: rgba(98, 98, 98, 0.15);
+    }
+  }
+
   &:focus-visible {
     transition: border-width 0.2s;
     border: var(--e-color-dark) solid 0.1rem;
@@ -173,7 +189,8 @@ const hoverColor = computed(() => {
   }
 
   &:hover {
-    background: rgba(98, 98, 98, 0.15);
+   // background: rgba(98, 98, 98, 0.15);
+   opacity: 0.7;
     border: transparent solid 0.1rem;
   }
 
@@ -198,13 +215,13 @@ const hoverColor = computed(() => {
     width: 100%;
   }
 
-  &.colored {
-    background-color: v-bind(parsedBackgroundProp);
+  &.custom-color {
+    background-color: v-bind(backgroundColor);
     color: v-bind(textColor);
 
-    &:hover {
-      background-color: v-bind(hoverColor);
-    }
+   /* &:hover {
+      opacity: 0.9;
+    } */
   }
 
   &.solid {

package/dist/runtime/components/e/hr.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="hr">
+    <slot />
+  </div>
+</template>
+<style scoped>
+.hr {
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+.hr::before,
+.hr::after {
+  content: '';
+  flex: 1;
+  border-bottom: .125em solid var(--e-color-elev);
+}
+
+.hr:not(:empty)::before {
+  margin-right: .75em;
+}
+
+.hr:not(:empty)::after {
+  margin-left: .75em;
+}
+</style>

package/dist/runtime/css/main.scss

@@ -42,6 +42,11 @@ $color-map: (
 
   .bg-#{$name} {
     background: $color;
+    @if (color.lightness($color) > 49%){
+      color: $root-dark
+    }@else{
+      color: $root-light
+    }
   }
 
   .color-#{$name} {

package/dist/runtime/plugin.mjs

@@ -34,6 +34,7 @@ export default defineNuxtPlugin(() => {
           }
           return p;
         },
+        rootColors: ["primary", "red", "dark", "light", "yellow"],
         /**
          * Generates an alphanumeric ID of a given length.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",