@exakt/ui 0.0.33 → 0.0.35

package/dist/module.d.ts

@@ -7,6 +7,7 @@ interface ModuleOptions {
         light?: string;
         red?: string;
         blue?: string;
+        yellow?: string;
     };
     breakpoints: {
         sm?: string;

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.33"
+  "version": "0.0.35"
 }

package/dist/module.mjs

@@ -5,9 +5,10 @@ const defaults = {
   colors: {
     primary: "#008dff",
     dark: "#212121",
-    light: "#f5f5f5",
+    light: "#ffffff",
     red: "#f44336",
-    blue: "#2196f3"
+    blue: "#2196f3",
+    yellow: "#FFA000"
   },
   breakpoints: {
     sm: "16em",

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

@@ -37,9 +37,11 @@
       </div>
       <span
         class="actual-content d-flex"
-        :class="{fullwidth: props.justify == 'space-between'}"
-        :style="{justifyContent:
-          justify, alignContent: props.align, alignItems: props.align}"
+        :class="{ fullwidth: props.justify == 'space-between' }"
+        :style="{
+          justifyContent:
+            justify, alignContent: props.align, alignItems: props.align
+        }"
       >
         <slot />
       </span>
@@ -113,7 +115,9 @@ const textColor = computed(() => {
   if (props.color) {
     return props.color;
   }
-
+  if (props.background == 'transparent') {
+    return 'var(--e-color-dark)'
+  }
   const rgb = backgroundColorRgb.value;
 
   const brightness = Math.round(
@@ -177,10 +181,12 @@ const hoverColor = computed(() => {
   box-sizing: border-box;
 
   border: transparent solid 0.1rem;
+
   &:focus-visible {
     transition: border-width 0.2s;
     border: var(--e-color-dark) solid 0.1rem;
   }
+
   &.loading {
     pointer-events: none;
 

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

@@ -37,7 +37,7 @@ const emit = defineEmits(["update:modelValue"]);
 .dialog-wrap {
   position: fixed;
   pointer-events: none;
-  z-index: 4;
+  z-index: 6;
   width: 100%;
   height: 100%;
   top: 0px;

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

@@ -197,7 +197,7 @@ const onActivatorClick = () => {
 
   background-color: var(--e-color-elev-2);
   color: var(--e-color-dark);
-  z-index: 4;
+  z-index: 6;
 
   flex-shrink: 1;
   flex-direction: column;

package/dist/runtime/components/e/focus-sheet.vue

@@ -25,17 +25,17 @@ const emit = defineEmits(["update:modelValue"]);
   height: 100%;
   left: 0px;
   top: 0px;
-  z-index: 3;
+  z-index: 5;
   //background-color: red;
 
   &.opaque-on-desktop {
-    background-color: rgba(var(--e-color-light-rgb), 0.5);
+    background-color: rgba(var(--e-color-light-rgb), 0.7);
   }
 }
 
 @media screen and (max-width: $e-md-screen-breakpoint) {
   .focus-sheet {
-    background-color: rgba(var(--e-color-light-rgb), 0.5);
+    background-color: rgba(var(--e-color-light-rgb), 0.7);
   }
 }
 </style>

package/dist/runtime/css/main.scss

@@ -6,10 +6,13 @@ $root-light-rgb: red($root-light), green($root-light), blue($root-light);
 $root-primary-rgb: red($root-primary), green($root-primary), blue($root-primary);
 $root-red-rgb: red($root-red), green($root-red), blue($root-red);
 $root-blue-rgb: red($root-blue), green($root-blue), blue($root-blue);
+$root-yellow-rgb: red($root-yellow), green($root-yellow), blue($root-yellow);
+
 
 .rounded {
   border-radius: var(--e-rounded-border-radius);
 }
+
 .rounded-top {
   border-top-left-radius: var(--e-rounded-border-radius);
   border-top-right-radius: var(--e-rounded-border-radius);
@@ -30,15 +33,18 @@ $color-map: (
   "primary": $root-primary,
   "dark": $root-dark,
   "light": $root-light,
+  "yellow": $root-yellow,
 );
 
 @each $name, $color in $color-map {
   :root {
     #{'--e-color-'+$name}: $color;
   }
+
   .bg-#{$name} {
     background: $color;
   }
+
   .color-#{$name} {
     color: $color;
   }
@@ -51,6 +57,7 @@ a,
   &:visited {
     color: color.scale($root-blue, $lightness: -10%);
   }
+
   &:active,
   .e-link-active {
     color: color.scale($root-blue, $lightness: 10%);
@@ -66,7 +73,10 @@ a,
 
   --e-color-elev-2: #{$root-elev-2};
   --e-color-elev-2-rgb: #{red($root-elev-2), green($root-elev-2),
-    blue($root-elev-2)};
+ blue($root-elev-2)
+}
+
+;
 }
 
 :root {
@@ -88,7 +98,7 @@ a,
 
     --e-color-dark: #{$root-light};
     --e-color-dark-rgb: #{$root-light-rgb};
-color-scheme: dark;
+    color-scheme: dark;
     @include elev($root-dark, 5%);
   }
-}
+}

package/dist/runtime/css/util.scss

@@ -184,8 +184,9 @@ body {
 }
 
 .e-disabled {
-  opacity: 0.7;
+  opacity: 0.5;
   pointer-events: none;
+  cursor: not-allowed !important;
 }
 
 router-link,

package/package.json

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