@exakt/ui 0.0.50 → 0.0.51

package/dist/module.d.ts

@@ -1,14 +1,19 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
+interface Colors {
+    primary?: string;
+    text?: string;
+    bg?: string;
+    green?: string;
+    red?: string;
+    blue?: string;
+    yellow?: string;
+}
 interface ModuleOptions {
     hue: number;
     colors: {
-        primary?: string;
-        dark?: string;
-        light?: string;
-        red?: string;
-        blue?: string;
-        yellow?: string;
+        light: Colors;
+        dark: Colors;
     };
     breakpoints: {
         sm?: string;

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.50"
+  "version": "0.0.51"
 }

package/dist/module.mjs

@@ -4,12 +4,24 @@ import fs from 'fs';
 const defaults = {
   hue: 9,
   colors: {
-    primary: "#008dff",
-    dark: "#212121",
-    light: "#ffffff",
-    red: "#f44336",
-    blue: "#2196f3",
-    yellow: "#FFA000"
+    light: {
+      primary: "#008dff",
+      text: "#212121",
+      red: "#f44336",
+      blue: "#2196f3",
+      green: "#00b850",
+      yellow: "#ebbc00",
+      bg: "#ffffff"
+    },
+    dark: {
+      primary: "#008dff",
+      text: "#ffffff",
+      red: "#ff8980",
+      blue: "#008dff",
+      green: "#00ff6e",
+      yellow: "#FFA000",
+      bg: "#212121"
+    }
   },
   breakpoints: {
     sm: "16em",
@@ -39,8 +51,13 @@ const module = defineNuxtModule({
     );
     let SCSSvariables = "";
     let CSSvariables = ":root{";
-    for (const [key, value] of [["hue", options.hue + "deg"], ...Object.entries(options.colors)]) {
-      SCSSvariables += `$root-${key}: ${value}; `;
+    SCSSvariables += `$root-hue: ${options.hue}; `;
+    for (const mode of ["light", "dark"]) {
+      SCSSvariables += `$root-colors-${mode}: (`;
+      for (const [key, value] of Object.entries(options.colors[mode])) {
+        SCSSvariables += `"${key}": ${value}, `;
+      }
+      SCSSvariables += ");";
     }
     for (const [key, value] of Object.entries(options.breakpoints)) {
       SCSSvariables += `$e-${key}-screen-breakpoint: ${value}; `;
@@ -62,7 +79,7 @@ const module = defineNuxtModule({
         css: {
           preprocessorOptions: {
             scss: {
-              additionalData: `@use "sass:color"; @import "${resolver.resolve(
+              additionalData: `@use "sass:color"; @use "sass:map"; @import "${resolver.resolve(
                 "../node_modules/.cache/exakt-ui/variables.scss"
               )}";  `
             }

package/dist/runtime/components/e/app-bars.vue

@@ -16,7 +16,7 @@
       class="bar-e-container"
       :force-full-width="true"
     >
-      <div class="rounded bar">
+      <div class="rounded bar bg-elev-2">
         <e-progress-linear
           :model-value="props.loading"
           class="md-and-up-only"
@@ -62,7 +62,6 @@ const props = withDefaults(
   display: flex;
   justify-content: flex-start;
   justify-items: flex-start;
-  background-color: var(--e-color-elev-2);
   width: 100%;
   overflow: clip;
   position: relative;

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

@@ -3,7 +3,7 @@
     <slot />
     <e-image-lazy-view
       v-if="src"
-      class="avatar"
+      class="avatar bg-elev"
       :width="props.size"
       :height="props.size"
       :contain="true"
@@ -32,7 +32,6 @@ const props = withDefaults(defineProps<{
   border-radius: 100%;
   width: fit-content;
   height: fit-content;
-  background-color: var(--e-color-elev);
 }
 
 .a-container {

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

@@ -115,7 +115,7 @@ const textColor = computed(() => {
     return props.color;
   }
   if (props.background == "transparent") {
-    return "var(--e-color-dark)";
+    return "var(--e-color-text)";
   }
   const rgb = backgroundColorRgb.value;
 
@@ -168,7 +168,7 @@ const textColor = computed(() => {
   border: transparent solid 0.1rem;
 
   &.transparent {
-    color: var(--e-color-dark);
+    color: var(--e-color-text);
     background: rgba(0, 0, 0, 0);
     &:hover {
        background: rgba(98, 98, 98, 0.15);
@@ -178,7 +178,7 @@ const textColor = computed(() => {
 
   &:focus-visible {
     transition: border-width 0.2s;
-    border: var(--e-color-dark) solid 0.1rem;
+    border: var(--e-color-text) solid 0.1rem;
   }
 
   &.loading {
@@ -234,7 +234,7 @@ const textColor = computed(() => {
   }
 
   &.inactive {
-    color: var(--e-color-dark);
+    color: var(--e-color-text);
     opacity: 80%;
   }
 }

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

@@ -1,7 +1,7 @@
 <template>
   <div
     class="e-chip py-3 px-4 ma-1 d-flex flex-center"
-    :class="{ active }"
+    :class="{ active, 'bg-i-active':active, 'bg-i-inactive':!active }"
     @click="active = !active"
   >
     <e-icon
@@ -41,7 +41,6 @@ const active = computed({
 .e-chip {
     outline: var(--e-color-i-outline) solid 0.1rem;
     width: fit-content;
-    background-color: var(--e-color-i-inactive);
     transition: background-color 0.15s;
     border-radius: 15rem;
     user-select: none;
@@ -53,7 +52,6 @@ const active = computed({
     }
 
     &.active {
-        background-color: var(--e-color-i-active);
         outline: var(--e-color-primary) solid 0.1rem;
 
         &>.icon {

package/dist/runtime/components/e/clickable-card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded clickable-card py-4 my-2">
+  <div class="rounded clickable-card bg-elev py-4 my-2">
     <div class=" px-6">
       <slot />
     </div>
@@ -9,7 +9,6 @@
 
 <style lang="scss" scoped>
 .clickable-card {
-  background-color: var(--e-color-elev);
   cursor: pointer;
   transition: background 0.15s;
   & > * {

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

@@ -11,7 +11,7 @@
         v-if="modelValue"
         class="dialog-wrap flex-center"
       >
-        <div class="dialog rounded px-6 pe-6 pb-2">
+        <div class="dialog bg-elev rounded px-6 pe-6 pb-2">
           <div class="mb-4">
             <h2 class="ma-0 pa-0">
               <slot name="title" />
@@ -47,8 +47,6 @@ const emit = defineEmits(["update:modelValue"]);
 .dialog {
   min-width: 25rem;
   pointer-events: all;
-  background-color: var(--e-color-elev);
-  color: var(--e-color-dark);
   position: relative;
   overflow: clip;
 }

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

@@ -12,7 +12,7 @@
       <div
         v-if="visibleComputed"
         ref="list"
-        class="list rounded"
+        class="list bg-elev-2 rounded"
         :style="{position:(fixed?'fixed':undefined)}"
       >
         <component
@@ -196,8 +196,6 @@ const onActivatorClick = () => {
   width: v-bind('state.width + `px`');
   display: flex;
 
-  background-color: var(--e-color-elev-2);
-  color: var(--e-color-dark);
   z-index: 6;
 
   flex-shrink: 1;
@@ -207,14 +205,14 @@ const onActivatorClick = () => {
   margin-top: v-bind("props.paddingY");
 
   .item {
-    // color: var(--e-color-dark);
+    // color: var(--e-color-text);
     font-size: 1rem;
     padding: 0.7rem;
     text-transform: capitalize;
     position: relative;
 
     &:hover {
-      background-color: rgba(var(--e-color-dark-rgb), 0.2);
+      background-color: rgba(var(--e-color-fg-rgb), 0.5);
     }
 
     &:focus {}

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

@@ -116,7 +116,7 @@ const selected = computed({
   width: var(--size);
   height: var(--size);
   border-radius: 50%;
-  background: var(--e-color-dark);
+  background: var(--e-color-text);
   transform: scale(0);
   transition: transform 0.25s;
   box-sizing: border-box;

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

@@ -165,7 +165,7 @@ const transitionEnd = () => {
   resize: none;
   margin: var(--e-core-padding-x) / 2;
   font-size: 1rem;
-  color: var(--e-color-dark);
+  color: var(--e-color-text);
   font-family: var(--e-font-family);
   height: v-bind(height);
   transition: outline ease-in-out 0.15s, background-color ease-in-out 0.15s;
@@ -203,7 +203,7 @@ const transitionEnd = () => {
   position: relative;
 
   background-color: transparent;
-  color: var(--e-color-dark);
+  color: var(--e-color-text);
   padding: 10px;
   outline: var(--e-color-i-outline) solid 0.1rem;
   //box-shadow: 0 0 0 0.1rem  var(--e-color-i-outline);

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

@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="nav e-blur"
+    class="nav bg-elev e-blur"
     :class="{ fixed }"
   >
     <e-container
@@ -32,7 +32,6 @@ defineProps<{
   height: 3.5rem;
   box-shadow: 0 0 0 0.06rem rgba(0, 0, 0, 0.12) !important;
 
-  background-color: var(--e-color-elev);
   position: sticky;
   top: 0;
 }

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

@@ -1,7 +1,7 @@
 
 
 <template>
-  <div class="titlebar d-flex flex-align-center">
+  <div class="titlebar d-flex flex-align-center bg-elev-2">
     <h4>Title</h4>
   </div>
 </template>
@@ -12,6 +12,5 @@
     left:0;
     height:3.5rem;
     padding-left: 3.5rem;
-    background-color: var(--e-color-elev-2);
 }
 </style>

package/dist/runtime/components/e/progress/linear.vue

@@ -2,7 +2,7 @@
   <Transition name="fade">
     <div
       v-if="modelValue"
-      class="e-progress-linear"
+      class="e-progress-linear bg-elev"
       :class="posClass"
     />
   </Transition>
@@ -51,7 +51,6 @@ const posClass = computed(() => {
   height: 0.2rem;
   overflow: clip;
 
-  background-color: var(--e-color-elev);
 }
 
 .e-progress-linear:before {

package/dist/runtime/css/main.scss

@@ -1,13 +1,5 @@
 /* This is very much a hack, but it will have to do for now */
 
-/* Color Definitions */
-$root-dark-rgb: red($root-dark), green($root-dark), blue($root-dark);
-$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);
 }
@@ -26,33 +18,6 @@ body {
   margin: 0px;
 }
 
-$color-map: (
-  "red": $root-red,
-  "blue": $root-blue,
-  "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;
-    @if (color.lightness($color) > 49%){
-      color: $root-dark
-    }@else{
-      color: $root-light
-    }
-  }
-
-  .color-#{$name} {
-    color: $color;
-  }
-}
 
 a {
   color: var(--e-color-primary);
@@ -65,88 +30,101 @@ a {
     color: var(--e-color-primary);
   }
 
-  &:active{
+  &:active {
     color: var(--e-color-i);
   }
 
   &:hover {
-  text-underline-offset: 0.15rem;
+    text-underline-offset: 0.15rem;
     text-decoration-thickness: 0.1rem;
 
   }
 }
 
-@mixin elev($lightness, $light) {
-  
-  $source: hsl($root-hue,15%, $lightness);
-  $source-i:  color.change($source, $saturation: 20%);
+@mixin color-definitions($color-map) {
+
+  :root {
+    @each $name, $color in $color-map {
+      #{'--e-color-'+$name}: $color;
+      #{'--e-color-'+$name+'-rgb'}: red($color), green($color), blue($color);
+
+    }
+  }
+
+  @each $name, $color in $color-map {
+    .bg-#{$name} {
+      background: $color;
+
+      @if (color.lightness($color) > 49%) {
+        color: map.get($root-colors-light, "text");
+      }
+
+      @else {
+        color: map.get($root-colors-dark, "text");
+      }
+    }
+
+    .color-#{$name} {
+      color: $color;
+    }
+  }
+}
+
+@mixin elev($lightness, $light, $color-map) {
 
-    $full: 0;
-    $factor: 1;
-    @if $light == 1 {
+  $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-inactive: #{color.adjust($source-i, $lightness: 10%)};
-  --e-color-i: #{color.adjust($source-i, $lightness: 20%)};
-  --e-color-i-active: #{color.change($root-primary, $lightness: 30%)};
 
+  $color-map: map.set($color-map, "i-depressed", color.adjust($source-i, $lightness: -2.5%));
+  $color-map: map.set($color-map, "i-depressed-2", color.adjust($source-i, $lightness: -7.5%));
+  $color-map: map.set($color-map, "i-depressed-active", color.adjust($source-i, $lightness: -5%, $saturation: 2%));
+
+
+  $color-map: map.set($color-map, "i-inactive", color.adjust($source-i, $lightness: 10%));
+  $color-map: map.set($color-map, "i", color.adjust($source-i, $lightness: 20%));
+  $color-map: map.set($color-map, "i-active", color.change(map.get($color-map, "primary"), $lightness: 30%));
+
+  $color-map: map.set($color-map, "i-outline", color.change($source-i, $lightness: $full + $factor*30%, $saturation: 20%));
 
-  --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};
+  $color-map: map.set($color-map, "bg", color.adjust($source, $lightness: -2%));
+  $color-map: map.set($color-map, "fg", color.adjust($source, $lightness: 2%));
 
 
-  $root-i-outline: color.change($source-i, $lightness:  $full + $factor*30%, $saturation: 20%);
-  --e-color-i-outline: #{$root-i-outline};
+  $color-map: map.set($color-map, "elev", color.scale($source, $lightness: $lightness));
+  $color-map: map.set($color-map, "elev-2", color.scale($source, $lightness: $lightness));
+  $color-map: map.set($color-map, "elev-3", color.scale($source, $lightness: $lightness));
+
 
-  $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)};
 
-  --e-color-elev-2: #{$root-elev-2};
-  --e-color-elev-2-rgb: #{red($root-elev-2), green($root-elev-2),
-    blue($root-elev-2)};
+  @include color-definitions($color-map);
 
-    --e-color-elev-3: #{$root-elev-3};
-    --e-color-elev-3-rgb: #{red($root-elev-3), green($root-elev-3),
-      blue($root-elev-3)};
 }
 
 :root {
-  --e-color-primary-rgb: #{$root-primary-rgb};
+  color-scheme: light;
+}
 
-  --e-color-bg: #{$root-light};
-  --e-color-bg-rgb: #{$root-light-rgb};
+@include elev(83%, 1, $root-colors-light);
 
-  --e-color-dark: #{$root-dark};
-  --e-color-dark-rgb: #{$root-dark-rgb};
-
-  @include elev(83%, 1);
-}
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --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(15%, 0);
   }
-}
+
+  @include elev(15%, 0, $root-colors-dark);
+
+
+}

package/dist/runtime/css/util.scss

@@ -144,7 +144,7 @@ $directions: (
 
 body {
   background-color: var(--e-color-bg);
-  color: var(--e-color-dark);
+  color: var(--e-color-text);
   font-family: var(--e-font-family);
   font-weight: var(--e-font-weight);
 

package/dist/runtime/plugin.mjs

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

package/package.json

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