WIP changed hardcoded non-dynamic colors to css variables

src/App.vue

@@ -5,6 +5,9 @@ import DCardTitle from "./components/card/text/DCardTitle.vue";
 import DNotificationWrapper from "./components/notification/DNotificationWrapper.vue";
 import DNavigationBar from "./components/app/navigation/DNavigationBar.vue";
 import {ref} from "vue";
+import DButton from "./components/button/DButton.vue";
+import {ThemeColorProperty} from "./types/Theme";
+import DCard from "./components/card/DCard.vue";
 
 const navOpen = ref(false);
 </script>
@@ -13,7 +16,7 @@ const navOpen = ref(false);
   <DRoot>
     <template v-slot:toolbar>
       <DToolbar show-hamburger @hamburgerClick="navOpen = !navOpen">
-        <d-card-title color="primary" class="font-size-medium">
+        <d-card-title class="font-size-medium">
           Vuelize
         </d-card-title>
       </DToolbar>
@@ -26,6 +29,33 @@ const navOpen = ref(false);
     <template v-slot:notifications>
       <DNotificationWrapper/>
     </template>
+    <d-button :color="ThemeColorProperty.warning">
+      this is a button
+    </d-button>
+    <d-card :color="{ color: 'orange',map: [
+        {
+          property: ThemeColorProperty.success,
+          color: 'cyan'
+        }
+    ]}">
+      TEST
+      <d-button :color="ThemeColorProperty.success">
+        success but cyan
+      </d-button>
+    </d-card>
+    <d-card :color="{map: [
+        {
+          property: ThemeColorProperty.primary,
+          color: 'red'
+        }
+    ]}">
+      <d-button>
+        this is a button
+      </d-button>
+    </d-card>
+    <d-button :color="ThemeColorProperty.success" outlined>
+      this is a button
+    </d-button>
   </DRoot>
 </template>
 

src/VuelizePlugin.ts

@@ -2,14 +2,14 @@ import {ref} from 'vue';
 import type {Plugin, App} from "vue";
 import type {Ref} from "vue";
 import {createPinia} from "pinia";
-import {ThemeStore} from './store/ThemeStore'
+import {useVuelizeTheme} from './store/ThemeStore'
 import importAll from "./ComponentImport";
 import {State} from "./types/Vuelize";
 import Notification from "./components/notification/Notification";
 
 // @ts-ignore no ripple types available
 import VWave from "v-wave";
-import Unicon from 'vue3-unicons'
+//import Unicon from 'vue3-unicons'
 
 import 'v3-transitions/dist/style.css'
 import ClickOutside from "./directive/ClickOutside";
@@ -21,7 +21,7 @@ class VuelizePlugin implements Vuelize {
 
     constructor(app: App) {
         this.app = app;
-        this.theme = ThemeStore();
+        this.theme = useVuelizeTheme();
         this.notifications.value;
     }
 
@@ -30,31 +30,13 @@ class VuelizePlugin implements Vuelize {
     }
 
     getColor(color: string, tint?: number | string | undefined): string {
-        let colorOut: string;
-        if (this.theme.dark) {
-            colorOut = this.theme.themes.dark[color as keyof Theme.Dark];
-        } else {
-            colorOut = this.theme.themes.light[color as keyof Theme.Light];
-        }
-        if (!colorOut) {
-            colorOut = color;
-        }
+        let colorOut: string = "unset";
 
-        if (tint && ['currentColor', 'transparent'].indexOf(colorOut) === -1) {
-            try {
-                if (typeof tint === "string") {
-                    tint = parseInt(tint)
-                }
-                colorOut = this.#tintColor(colorOut, tint);
-            } catch (e) {
-                console.warn(e)
-            }
-        }
         return colorOut;
     }
 
     getColorContrast(color: string, tint?: number | string | undefined): string {
-        try {
+        /*try {
             let hexColor = this.getColor(color, tint);
             if (hexColor.slice(0, 1) === '#') {
                 hexColor = hexColor.slice(1);
@@ -74,7 +56,8 @@ class VuelizePlugin implements Vuelize {
             return (yiq > 160) ? 'rgba(0,0,0,0.75)' : 'rgba(255,255,255,0.85)';
         } catch (e) {
             return this.getColor('error')
-        }
+        }*/
+        return "test"
     }
 
     #tintColor = function adjust(color: string, amount: number): string {
@@ -93,7 +76,7 @@ export const Vuelize: Plugin = {
             duration: 0.2,
             finalOpacity: 0.2
         });
-        app.use(Unicon);
+        //app.use(Unicon);
 
         app.config.globalProperties.$vuelize = new VuelizePlugin(app);
         app.provide('vuelize', app.config.globalProperties.$vuelize);

src/components/DWrapper.vue

@@ -1,20 +1,28 @@
 <template>
   <component ref="wrapper" :is="componentTag" :to="link" :disabled="disabled"
-             :class="[classes, themeClass, elevationClass, globalClasses]"
-             :style="{color, height, width, ...outline}"
+             :class="[classes, mode, elevationClass, globalClasses]"
+             :style="{height, width, ...outline}"
              @mouseenter="$emit('mouseenter')" @mouseleave="$emit('mouseleave')">
     <slot></slot>
   </component>
 </template>
 
 <script setup lang="ts">
+import {useVuelizeTheme} from "../store/ThemeStore";
+import {computed, inject, nextTick, onMounted, ref, watch} from "vue";
+import defaultProps from "../mixins/DefaultProps";
+import {storeToRefs} from "pinia";
+import {useColor, useSetColor, useSetColors} from "../composables/Color.composable";
+import {Color, ThemeAllPropertyType, ThemeColorProperty} from "../types/Theme";
+
 const wrapper = ref(null);
 defineExpose({wrapper});
-import {computed, inject, ref} from "vue";
-import defaultProps from "../mixins/DefaultProps";
 
 const vuelize: any = inject('vuelize');
 
+const vuelizeTheme = useVuelizeTheme()
+const {mode, currentTheme} = storeToRefs(vuelizeTheme)
+
 const props = defineProps({
   classes: {type: Array},
   rootTag: {type: String},
@@ -28,12 +36,10 @@ const componentTag = computed(() => {
 const globalClasses = computed(() => {
   return {
     [`rounded-${props.rounded}`]: props.rounded,
-    outlined: props.outlined,
-    depressed: props.depressed,
+    outlined: props.outlined !== undefined,
     disabled: props.disabled,
     glow: props.glow,
     ['glow--active glow']: props.glowing,
-    ['glow--filled glow']: props.filledGlow,
   }
 })
 
@@ -44,8 +50,8 @@ const elevationClass = computed(() => {
   } else if (props.elevation) {
     elevationObject[`elevation-${props.elevation}`] = true
   }
-
-  if (props.elevationDark === '') {
+  // TODO
+  /*if (props.elevationDark === '') {
     elevationObject['elevation-dark'] = true
   } else if (props.elevationDark) {
     elevationObject[`elevation-dark-${props.elevationDark}`] = true
@@ -55,26 +61,34 @@ const elevationClass = computed(() => {
     elevationObject['elevation-light'] = true
   } else if (props.elevationLight) {
     elevationObject[`elevation-light-${props.elevationLight}`] = true
-  }
+  }*/
   return elevationObject
 })
 
-const themeClass = computed(() => {
-  return vuelize.theme.dark ? 'dark' : 'light';
-})
-
-const color = computed(() => {
-  return vuelize.getColor(props.color, props.tint);
-})
-
 const outline = computed(() => {
+  if (typeof props.outlined !== "object") {
+    return {}
+  }
   return {
-    outlineOffset: props.outlineOffset,
-    outlineWidth: props.outlineWidth,
-    outlineColor: vuelize.getColor(props.outlineColor)
+    outlineOffset: props.outlined.offset,
+    outlineWidth: props.outlined.width,
+    //outlineColor: vuelize.getColor(props.outlineColor)
   };
 })
 
+watch(() => props.color, () => {
+  if(!wrapper.value || !props.color){
+    return;
+  }
+  useSetColors(wrapper.value, props.color)
+});
+
+onMounted(() => {
+  if(!wrapper.value || !props.color){
+    return;
+  }
+  useSetColors(wrapper.value, props.color)
+})
 </script>
 
 <style scoped lang="scss">

src/components/app/toolbar/DToolbar.vue

@@ -2,8 +2,8 @@
   <DWrapper ref="wrapper" :classes="['d-toolbar']" v-bind="{...$props, ...$attrs}">
     <DCard block rounded="none" height="100%">
       <DRow block gap class="px-2">
-        <DIconButton v-if="showHamburger" color="primary" @click="onHamburgerClick"
-                     style="margin-left: -8px">
+        <DIconButton v-if="showHamburger" @click="onHamburgerClick"
+                     style="margin-left: -8px" :color="ThemeColorProperty.primary">
           <DIcon name="bars"/>
         </DIconButton>
         <slot></slot>
@@ -29,6 +29,7 @@ import DRow from "../../flex/DRow.vue";
 import DIconButton from "../../button/DIconButton.vue";
 import DIcon from "../../icon/DIcon.vue";
 import defaultProps from "../../../mixins/DefaultProps";
+import {ThemeColorProperty} from "../../../types/Theme";
 
 const emit = defineEmits(['hamburgerClick'])
 

src/components/card/DCard.vue

@@ -49,15 +49,8 @@ const backgroundColor = computed(()=>{
     flex: 1;
   }
 
-  &.dark {
-    background: $dark_sheet;
-    color: $dark_card_text;
-  }
-
-  &.light {
-    background: $light_sheet;
-    color: $light_card_text;
-  }
+  background: var(--sheet-card);
+  color: var(--text-card);
 }
 
 </style>

src/components/root/DRoot.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="d-root" id="root" :class="theme">
-    <header style="position: sticky; top: 0; width: 100%; max-height: 54px; z-index: 10;" :class="theme">
+  <div ref="wrapper" class="d-root" id="root" :class="mode">
+    <header style="position: sticky; top: 0; width: 100%; max-height: 54px; z-index: 10;" :class="mode">
       <slot name="toolbar"></slot>
     </header>
-    <div style="position: relative;display: flex;" :class="theme">
+    <div style="position: relative;display: flex;" :class="mode">
       <aside style="position: sticky;">
         <slot name="navbar"></slot>
       </aside>
-      <main style="flex: 1;" :class="theme">
+      <main style="flex: 1;" :class="mode">
         <slot name="default"></slot>
       </main>
     </div>
-    <footer :class="theme">
+    <footer :class="mode">
       <slot name="footer"></slot>
     </footer>
     <slot name="notifications"/>
@@ -25,27 +25,65 @@ export default {
 </script>
 
 <script setup lang="ts">
-const wrapper = ref(null);
+import {Theme, ThemeColorProperty, ThemeSheetProperty, ThemeTextProperty} from "../../types/Theme";
+
+const wrapper = ref<HTMLElement | null>(null);
 defineExpose({wrapper});
 import {inject, onMounted, ref, watch} from "vue";
+import {useSetColor} from "../../composables/Color.composable";
+import {useVuelizeTheme} from "../../store/ThemeStore";
+import {storeToRefs} from "pinia";
 
 const vuelize: any = inject('vuelize');
-const theme = ref('dark');
 
-watch(() => vuelize.theme.dark, () => {
+const themeStore = useVuelizeTheme();
+const {mode, themes, currentTheme} = storeToRefs(themeStore);
+
+watch([mode, themes], () => {
   setTheme();
+}, {
+  deep: true
 })
 
 onMounted(() => {
   setTheme()
 })
 
-function setTheme(dark: boolean = vuelize.theme.dark) {
-  theme.value = dark ? 'dark' : 'light';
+function setTheme() {
+  if (!wrapper.value) {
+    return;
+  }
+  console.log(currentTheme);
+
+  for (const key of Object.keys(ThemeColorProperty)) {
+    useSetColor(
+        document.documentElement,
+        currentTheme.value.colors[key as keyof Theme['colors']],
+        ThemeColorProperty[key as keyof typeof ThemeColorProperty],
+    )
+  }
+
+  for (const key of Object.keys(ThemeSheetProperty)) {
+    useSetColor(
+        document.documentElement,
+        currentTheme.value.sheets[key as keyof Theme['sheets']],
+        ThemeSheetProperty[key as keyof typeof ThemeSheetProperty],
+    )
+  }
+
+  for (const key of Object.keys(ThemeTextProperty)) {
+    useSetColor(
+        document.documentElement,
+        currentTheme.value.text[key as keyof Theme['text']],
+        ThemeTextProperty[key as keyof typeof ThemeTextProperty],
+    )
+  }
 }
 
 </script>
 
 <style lang="scss">
 @import "../../styles/index";
+
+
 </style>