@exakt/ui 0.0.42 → 0.0.44

package/dist/module.d.ts

@@ -1,6 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
+    hue: number;
     colors: {
         primary?: string;
         dark?: string;

package/dist/module.json

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

package/dist/module.mjs

@@ -2,6 +2,7 @@ import { defineNuxtModule, createResolver, addPlugin, extendViteConfig, addImpor
 import fs from 'fs';
 
 const defaults = {
+  hue: 9,
   colors: {
     primary: "#008dff",
     dark: "#212121",
@@ -38,7 +39,7 @@ const module = defineNuxtModule({
     );
     let SCSSvariables = "";
     let CSSvariables = ":root{";
-    for (const [key, value] of Object.entries(options.colors)) {
+    for (const [key, value] of [["hue", options.hue + "deg"], ...Object.entries(options.colors)]) {
       SCSSvariables += `$root-${key}: ${value}; `;
     }
     for (const [key, value] of Object.entries(options.breakpoints)) {

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/focus-sheet.vue

@@ -29,13 +29,13 @@ const emit = defineEmits(["update:modelValue"]);
   //background-color: red;
 
   &.opaque-on-desktop {
-    background-color: rgba(var(--e-color-light-rgb), 0.7);
+    background-color: rgba(var(--e-color-bg-rgb), 0.7);
   }
 }
 
 @media screen and (max-width: $e-md-screen-breakpoint) {
   .focus-sheet {
-    background-color: rgba(var(--e-color-light-rgb), 0.7);
+    background-color: rgba(var(--e-color-bg-rgb), 0.7);
   }
 }
 </style>

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/components/e/iconButton.vue

@@ -1,6 +1,6 @@
 <template>
   <e-btn
-    class="a-btn"
+    class="a-btn pa-1"
     :loading="loading"
     :solid="false"
     :type="type"

package/dist/runtime/components/e/input/text.vue

@@ -156,6 +156,7 @@ const transitionEnd = () => {
   color: var(--e-color-dark);
   font-family: var(--e-font-family);
   height: v-bind(height);
+  transition: outline ease-in-out 0.15s, background-color ease-in-out 0.15s;
 
   &:-webkit-autofill {
     // Expose a hook for JavaScript when auto fill is shown.
@@ -192,13 +193,24 @@ const transitionEnd = () => {
   background-color: transparent;
   color: var(--e-color-dark);
   padding: 10px;
+  outline: var(--e-color-i-outline) solid 0.1rem;
+  //box-shadow: 0 0 0 0.1rem  var(--e-color-i-outline);
 
   overflow: clip;
+  transition: outline ease-in-out 0.15s, background-color ease-in-out 0.15s;
+}
+
+.wrapper.solid:has(:focus){
+  outline: var(--e-color-primary) solid 0.125rem;
+  //box-shadow: 0 0 0 0.125rem  var(--e-color-primary);
+
+  background-color: var(--e-color-i-depressed-active);
+
 }
 
 .wrapper.solid {
   padding: 15px;
-  background-color: var(--e-color-elev);
+  background-color: var(--e-color-i-depressed);
 }
 
 .fullwidth {
@@ -206,7 +218,8 @@ const transitionEnd = () => {
 }
 
 .wrapper:active {
-  background-color: rgba(var(--e-color-elev-2-rgb), 0.4);
+  background-color: var(--e-color-i-depressed-2) !important;
+  outline: var(--e-color-primary) solid 0.2rem !important;
 }
 
 .input::-ms-reveal {

package/dist/runtime/components/e/nav/sidebar.vue

@@ -160,7 +160,7 @@ const background = computed(() =>
 
 .app-content {
   transition: transform var(--reveal-duration) ease-in-out;
-  background-color: var(--e-color-light);
+  background-color: var(--e-color-bg);
   width: 100%;
   width: fill-available;
   height: 100%;

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

@@ -1,6 +1,6 @@
 <template>
   <e-icon-button
-    class="rounded pa-1"
+    class="rounded"
     size="20"
     :icon="modelValue ? 'visibility' : 'visibility_off'"
     @click.stop="emit('update:modelValue', !modelValue)"

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} {
@@ -63,12 +68,40 @@ a,
   }
 }
 
-@mixin elev($source, $lightness) {
-  $root-elev: color.scale($source, $lightness: $lightness);
-  $root-elev-2: color.scale($source, $lightness: $lightness * 1.5);
-  $root-elev-3: color.scale($source, $lightness: $lightness * 2);
+@mixin elev($lightness, $light) {
+  
+  $source: hsl($root-hue,15%, $lightness);
+  $source-i:  color.change($source, $saturation: 20%);
+
+    $full: 0;
+    $factor: 1;
+    @if $light == 1 {
+    $full: 100;
+    $factor: -1;
+  }
+  $root-i-depressed: color.adjust($source-i, $lightness: -2.5%);
+  $root-i-depressed-2: color.adjust($source-i, $lightness: -7.5%);
+  $root-i-depressed-active: color.adjust($source-i, $lightness: -5%, $saturation: 2%);
+  //$root-depressed: color.change($source, $lightness: $full + $factor*20%, $saturation:22%);
+  --e-color-i-depressed: #{$root-i-depressed};
+  --e-color-i-depressed-active: #{$root-i-depressed-active};
+  //--e-color-depressed: #{$root-depressed};
+  --e-color-i-depressed-2: #{$root-i-depressed-2};
 
 
+  $root-i-outline: color.change($source, $lightness:  $full + $factor*30%, $saturation: 20%);
+  --e-color-i-outline: #{$root-i-outline};
+
+  $root-bg: color.adjust($source, $lightness:  -2%);
+  $root-fg: color.adjust($source, $lightness:  2%);
+  --e-color-fg: #{$root-fg};
+  --e-color-bg: #{$root-bg};
+  
+
+  $root-elev: color.scale($source, $lightness: $lightness);
+  $root-elev-2: color.scale($source, $lightness: $lightness);
+  $root-elev-3: color.scale($source, $lightness: $lightness);
+  
   --e-color-elev: #{$root-elev};
   --e-color-elev-rgb: #{red($root-elev), green($root-elev), blue($root-elev)};
 
@@ -84,23 +117,23 @@ a,
 :root {
   --e-color-primary-rgb: #{$root-primary-rgb};
 
-  --e-color-light: #{$root-light};
-  --e-color-light-rgb: #{$root-light-rgb};
+  --e-color-bg: #{$root-light};
+  --e-color-bg-rgb: #{$root-light-rgb};
 
   --e-color-dark: #{$root-dark};
   --e-color-dark-rgb: #{$root-dark-rgb};
 
-  @include elev($root-light, -5%);
+  @include elev(83%, 1);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --e-color-light: #{$root-dark};
-    --e-color-light-rgb: #{$root-dark-rgb};
+    --e-color-bg: #{$root-dark};
+    --e-color-bg-rgb: #{$root-dark-rgb};
 
     --e-color-dark: #{$root-light};
     --e-color-dark-rgb: #{$root-light-rgb};
     color-scheme: dark;
-    @include elev($root-dark, 5%);
+    @include elev(18%, 0);
   }
 }

package/dist/runtime/css/util.scss

@@ -143,7 +143,7 @@ $directions: (
 /* Other */
 
 body {
-  background-color: var(--e-color-light);
+  background-color: var(--e-color-bg);
   color: var(--e-color-dark);
   font-family: var(--e-font-family);
   font-weight: var(--e-font-weight);

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.42",
+  "version": "0.0.44",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",