@exakt/ui 0.0.42 → 0.0.43

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.43"
 }

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/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/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

@@ -63,12 +63,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 +112,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/package.json

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