From 1b5c47c50d99b736e8a75843de53065712336f3a Mon Sep 17 00:00:00 2001
From: danielterletzkiy <danielterletzkiy@gmail.com>
Date: Sun, 23 Jul 2023 02:31:32 +0200
Subject: [PATCH] WIP changed hardcoded non-dynamic colors to css variables

---
 src/App.vue                             | 32 ++++++++++-
 src/VuelizePlugin.ts                    | 33 +++--------
 src/components/DWrapper.vue             | 56 +++++++++++-------
 src/components/app/toolbar/DToolbar.vue |  5 +-
 src/components/card/DCard.vue           | 11 +---
 src/components/root/DRoot.vue           | 58 +++++++++++++++----
 src/composables/Color.composable.ts     | 58 +++++++++++++++++++
 src/mixins/DefaultProps.ts              | 24 ++++----
 src/store/ThemeStore.ts                 | 73 ++++++++++++++++--------
 src/styles/index.scss                   | 11 +---
 src/types/Theme.ts                      | 76 +++++++++++++++++++++++++
 src/types/Vuelize.ts                    | 32 -----------
 12 files changed, 324 insertions(+), 145 deletions(-)
 create mode 100644 src/composables/Color.composable.ts
 create mode 100644 src/types/Theme.ts

diff --git a/src/App.vue b/src/App.vue
index 80e15e9..0d746a3 100644
--- a/src/App.vue
+++ b/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>
 
diff --git a/src/VuelizePlugin.ts b/src/VuelizePlugin.ts
index d61361c..f7d78da 100644
--- a/src/VuelizePlugin.ts
+++ b/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);
diff --git a/src/components/DWrapper.vue b/src/components/DWrapper.vue
index ebbd71e..5b82e54 100644
--- a/src/components/DWrapper.vue
+++ b/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">
diff --git a/src/components/app/toolbar/DToolbar.vue b/src/components/app/toolbar/DToolbar.vue
index a1503f8..f4d5bce 100644
--- a/src/components/app/toolbar/DToolbar.vue
+++ b/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'])
 
diff --git a/src/components/card/DCard.vue b/src/components/card/DCard.vue
index 8074a70..e81eb5b 100644
--- a/src/components/card/DCard.vue
+++ b/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>
diff --git a/src/components/root/DRoot.vue b/src/components/root/DRoot.vue
index 7591b43..7aeeba8 100644
--- a/src/components/root/DRoot.vue
+++ b/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>
diff --git a/src/composables/Color.composable.ts b/src/composables/Color.composable.ts
new file mode 100644
index 0000000..375d7c3
--- /dev/null
+++ b/src/composables/Color.composable.ts
@@ -0,0 +1,58 @@
+import {Color, ColorSettings, ThemeAllPropertyEnum, ThemeAllPropertyType, ThemeColorProperty} from "../types/Theme";
+import {nextTick} from "vue";
+
+export function useColor(ref: HTMLElement, colorProperty: ThemeAllPropertyType | string) {
+    //return getComputedStyle(ref).getPropertyValue(`--${colorProperty}`) || colorProperty;
+
+    return hasProperty(colorProperty) ? `var(--${colorProperty})` : colorProperty
+}
+
+export function useSetColor(ref: HTMLElement, color: string, colorProperty?: ThemeAllPropertyType) {
+    //console.log()
+    if (ref.tagName === "HTML" || !!colorProperty) {
+        ref.style.setProperty(`--${colorProperty}`, color)
+    } else {
+        color = hasProperty(color) ? `var(--${color})` : color;
+        ref.style.setProperty(`color`, color)
+
+    }
+}
+
+function hasProperty(prop: ThemeAllPropertyType | string) {
+    return Object.values(ThemeAllPropertyEnum)
+        .some((property) => property === prop)
+}
+
+export function useSetColors(ref: HTMLElement, inputColor: ColorSettings | ThemeColorProperty | string) {
+    const rand = Math.random() *1000
+    console.time("tick"+rand)
+    nextTick().then(() => {
+        if (!inputColor) {
+            //useSetColor(ref, ThemeColorProperty.primary)
+            return;
+        }
+        const modifyColor = (color: Color, property?: ThemeAllPropertyType) => {
+            const colorVar = useColor(ref, color)
+            useSetColor(ref, colorVar, property)
+        }
+
+        switch (typeof inputColor) {
+            case "string":
+                modifyColor(inputColor);
+                break;
+            case "object":
+                modifyColor(inputColor.color);
+                for (const {color, property} of inputColor.map) {
+                    modifyColor(color, property)
+                }
+                break;
+        }
+
+        console.timeEnd("tick"+rand)
+    })
+}
+
+/*const getMatchedCSSRules = (el: HTMLElement, css = el.ownerDocument.styleSheets) =>
+    [].concat(...[...css].map(s => [...s.cssRules || []]))
+        .filter(r => el.matches(r.selectorText));
+*/
diff --git a/src/mixins/DefaultProps.ts b/src/mixins/DefaultProps.ts
index 5544dd8..e560124 100644
--- a/src/mixins/DefaultProps.ts
+++ b/src/mixins/DefaultProps.ts
@@ -1,23 +1,21 @@
-import {Round, State} from "../types/Vuelize";
+import {Round} from "../types/Vuelize";
 import type {PropType} from "vue";
+import {ColorSettings, ElevationSettings, OutlinedSettings, ThemeColorProperty} from "../types/Theme";
 
 export default {
     link: {type: String, default: null},
-    color: {type: [String as any, String as PropType<State>]},
-    tint: {type: Number, default: 0},
+    color: {type: Object as PropType<ColorSettings | ThemeColorProperty | string>}, //
     rounded: {type: String as PropType<Round>, default: Round.LG},
-    outlined: {type: Boolean},
-    outlineOffset: {type: String, default: "0px"},
-    outlineWidth: {type: String, default: "1px"},
-    outlineColor: {type: String, default: 'none'},
-    depressed: {type: Boolean, default: true},
-    elevation: {type: [String, Number]},
-    elevationLight: {type: [String, Number]},
-    elevationDark: {type: [String, Number]},
+    //
+    outlined: {type: Object as PropType<OutlinedSettings | boolean>},
+    //
+    elevation: {type: Object as PropType<ElevationSettings | string | number>}, //
+    //
     disabled: {type: Boolean},
-    glow: {type: Boolean},
+    //
+    glow: {type: Boolean}, //
     glowing: {type: Boolean},
-    filledGlow: {type: Boolean},
+    //
     height: {type: String, default: ''},
     width: {type: String, default: ''},
 }
diff --git a/src/store/ThemeStore.ts b/src/store/ThemeStore.ts
index 79a4c50..1c18391 100644
--- a/src/store/ThemeStore.ts
+++ b/src/store/ThemeStore.ts
@@ -1,30 +1,57 @@
 import {defineStore} from 'pinia'
+import {computed, ref} from "vue";
+import {ThemeColorProperty, Themes, ThemeSheetProperty, ThemeTextProperty} from "../types/Theme";
 
 const isServer = !(typeof window != 'undefined' && window.document);
 
 const prefersDark = isServer || window.matchMedia("(prefers-color-scheme: dark)").matches;
-export const ThemeStore = defineStore('theme', {
-    state: () =>
-        ({
-            dark: prefersDark,
-            rounded: 'lg',
-            themes: {
-                dark: {
-                    primary: '#A8B2FF',
-                    secondary: '#9ea7ad',
-                    success: '#74ec38',
-                    error: '#ff6b6b',
-                    warning: '#fca121',
-                    info: '#2ea2e0'
-                },
-                light: {
-                    primary: '#3075FF',
-                    secondary: '#424242',
-                    success: '#62c62f',
-                    error: '#ff6b6b',
-                    warning: '#ffa600',
-                    info: '#00b2ff'
-                },
+export const useVuelizeTheme = defineStore('vuelizeTheme', () => {
+    const themes = ref<Themes>({
+        dark: {
+            colors: {
+                primary: '#A8B2FF',
+                secondary: '#9ea7ad',
+                success: '#74ec38',
+                error: '#ff6b6b',
+                warning: '#fca121',
+                info: '#2ea2e0'
             },
-        } as Theme.ThemeStore)
+            sheets: {
+                background: "#0c0c0c",
+                card: "#171717",
+            },
+            text: {
+                header: "#eaeaea",
+                card: "#8b8b8b"
+            }
+        },
+        light: {
+            colors: {
+                primary: '#3075FF',
+                secondary: '#424242',
+                success: '#62c62f',
+                error: '#ff6b6b',
+                warning: '#ffa600',
+                info: '#00b2ff'
+            },
+            sheets: {
+                background: "#fafafa",
+                card: "#fefefe",
+            },
+            text: {
+                header: "#020202",
+                card: "#363636"
+            }
+        },
+    })
+
+    const mode = ref<keyof Themes>(prefersDark ? "dark" : "light");
+
+    const currentTheme = computed(() => {
+        return themes.value[mode.value];
+    })
+
+    return {
+        themes, mode, currentTheme
+    }
 })
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 19d87fa..ab099c5 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -69,15 +69,8 @@ button {
   scrollbar-gutter: stable;
   scrollbar-width: thin;
 
-  &.dark {
-    background: $dark_background;
-    color: $dark_card_text;
-  }
-
-  &.light {
-    background: $light_background;
-    color: $light_card_text;
-  }
+  background: var(--sheet-background);
+  color: var(--text-card);
 }
 
 ::-webkit-scrollbar-corner {
diff --git a/src/types/Theme.ts b/src/types/Theme.ts
new file mode 100644
index 0000000..10aafb2
--- /dev/null
+++ b/src/types/Theme.ts
@@ -0,0 +1,76 @@
+export type Themes = {
+    dark: Theme
+    light: Theme
+}
+
+export type Theme = {
+    colors: ThemeColor,
+    sheets: ThemeSheet,
+    text: ThemeText,
+}
+
+type ThemeColorKey = keyof typeof ThemeColorProperty;
+type ThemeSheetKey = keyof typeof ThemeSheetProperty;
+type ThemeTextKey = keyof typeof ThemeTextProperty;
+
+type ThemeColor = {
+    [K in ThemeColorKey]: string;
+};
+
+type ThemeSheet = {
+    [K in ThemeSheetKey]: string;
+};
+
+type ThemeText = {
+    [K in ThemeTextKey]: string;
+};
+
+export enum ThemeColorProperty {
+    primary = 'color-primary',
+    secondary = 'color-secondary',
+    success = 'color-success',
+    error = 'color-error',
+    warning = 'color-warning',
+    info = 'color-info',
+}
+
+export enum ThemeSheetProperty {
+    background = 'sheet-background',
+    card = 'sheet-card',
+}
+
+export enum ThemeTextProperty {
+    header = 'text-header',
+    card = 'text-card',
+}
+
+export const ThemeAllPropertyEnum = {
+    ...ThemeColorProperty,
+    ...ThemeSheetProperty,
+    ...ThemeTextProperty
+}
+export type ThemeAllPropertyType = ThemeColorProperty | ThemeSheetProperty | ThemeTextProperty
+
+export type Color = ThemeAllPropertyType | string
+
+export type ColorSettings = {
+    color: Color,
+    map: ColorSetting[],
+}
+
+export type ColorSetting = {
+    color: Color,
+    property?: ThemeAllPropertyType,
+    tint?: number,
+}
+
+export type OutlinedSettings = {
+    color: Color,
+    offset: string,
+    width: string,
+}
+
+export type ElevationSettings = {
+    light: string,
+    dark: string,
+}
diff --git a/src/types/Vuelize.ts b/src/types/Vuelize.ts
index 9c73e1b..8aa52b7 100644
--- a/src/types/Vuelize.ts
+++ b/src/types/Vuelize.ts
@@ -29,7 +29,6 @@ export const enum Position {
 declare global {
     interface Vuelize {
         app: App;
-        theme: Theme.ThemeStore;
         notifications: Ref<Array<Ref<Notification>>>;
 
         notify(title: string, content: string, type: State, options?: object | undefined): void;
@@ -47,35 +46,4 @@ declare global {
             timeout: number
         }
     }
-
-    namespace Theme {
-        interface ThemeStore {
-            dark: boolean
-            rounded: string
-            themes: Themes
-        }
-
-        interface Themes {
-            dark: Dark
-            light: Light
-        }
-
-        interface Dark {
-            primary: string
-            secondary: string
-            success: string
-            error: string
-            warning: string
-            info: string
-        }
-
-        interface Light {
-            primary: string
-            secondary: string
-            success: string
-            error: string
-            warning: string
-            info: string
-        }
-    }
 }