feat: begin nuking alpha beta gamma

web/components/ColorSwitcher.ce.vue

@@ -7,63 +7,84 @@ const themeStore = useThemeStore();
 const { darkMode, theme } = toRefs(themeStore);
 
 const setDarkMode = ref<boolean>(false);
+const setGradient = ref<boolean>(false);
+const setDescription = ref<boolean>(true);
+const setBanner = ref<boolean>(true);
 
-const toggleSwitch= (value: boolean) => {
+const toggleSwitch = (value: boolean) => {
   setDarkMode.value = value;
-}
-const textPrimary = ref<string>("");
-const textSecondary = ref<string>("");
-const bgColor = ref<string>("");
+};
+const toggleGradient = (value: boolean) => {
+  setGradient.value = value;
+};
+const toggleDescription = (value: boolean) => {
+  setDescription.value = value;
+};
+const toggleBanner = (value: boolean) => {
+  setBanner.value = value;
+};
+
+const textPrimary = ref<string>('');
+const textSecondary = ref<string>('');
+const bgColor = ref<string>('');
 
 const textPrimaryToSet = computed(() => {
   if (textPrimary.value) {
     return textPrimary.value;
   }
   return darkMode.value ? defaultColors.dark.headerTextPrimary : defaultColors.light.headerTextPrimary;
-})
+});
 
 const textSecondaryToSet = computed(() => {
   if (textSecondary.value) {
     return textSecondary.value;
   }
-  return darkMode.value ? defaultColors.dark.headerTextSecondary : defaultColors.light.headerTextSecondary;
-})  
+  return darkMode.value
+    ? defaultColors.dark.headerTextSecondary
+    : defaultColors.light.headerTextSecondary;
+});
 
 const bgColorToSet = computed(() => {
   if (bgColor.value) {
     return bgColor.value;
   }
-  return darkMode.value ? defaultColors.dark.headerBackgroundColor : defaultColors.light.headerBackgroundColor;
-})
-
+  return darkMode.value
+    ? defaultColors.dark.headerBackgroundColor
+    : defaultColors.light.headerBackgroundColor;
+});
 
 watch([setDarkMode, bgColorToSet, textSecondaryToSet, textPrimaryToSet], (newVal) => {
   console.log(newVal);
   const themeToSet: Theme = {
-    banner: true,
-    bannerGradient: true,
-    descriptionShow: true,
+    banner: setBanner.value,
+    bannerGradient: setGradient.value,
+    descriptionShow: setDescription.value,
     textColor: textPrimaryToSet.value,
     metaColor: textSecondaryToSet.value,
     bgColor: bgColorToSet.value,
     name: setDarkMode.value ? 'black' : 'light',
-  }
+  };
   themeStore.setTheme(themeToSet);
 });
 </script>
 
 <template>
-
   <div class="flex flex-col gap-2 border-solid border-2 p-2 border-r-2">
     <h1 class="text-lg">Color Theme Customization</h1>
-    <Label for="primary-text-color">Header Primary Text Color</label>
+    <Label for="primary-text-color">Header Primary Text Color</Label>
     <Input id="primary-text-color" v-model="textPrimary" />
-    <Label for="primary-text-color">Header Secondary Text Color</label>
+    <Label for="primary-text-color">Header Secondary Text Color</Label>
     <Input id="primary-text-color" v-model="textSecondary" />
-    <Label for="primary-text-color">Header Background Color</label>
+    <Label for="primary-text-color">Header Background Color</Label>
     <Input id="primary-text-color" v-model="bgColor" />
     <Label for="dark-mode">Dark Mode</Label>
-    <Switch id="dark-mode" @update:checked="toggleSwitch"/>
+    <Switch id="dark-mode" @update:checked="toggleSwitch" />
+    <Label for="gradient">Gradient</Label>
+    <Switch id="gradient" @update:checked="toggleGradient" />
+    <Label for="description">Description</Label>
+    <Switch id="description" @update:checked="toggleDescription" />
+    <Label for="banner">Banner</Label>
+    <Switch id="banner" @update:checked="toggleBanner" />
   </div>
 </template>
 

web/components/shadcn/sheet/index.ts

@@ -10,7 +10,7 @@ export { default as SheetDescription } from './SheetDescription.vue'
 export { default as SheetFooter } from './SheetFooter.vue'
 
 export const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-alpha shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 bg-muted dark:bg-background gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {

web/store/theme.ts

@@ -21,24 +21,15 @@ interface ColorMode {
   headerTextPrimary: string;
   headerTextSecondary: string;
   headerBackgroundColor: string;
-  alpha: string;
-  beta: string;
-  gamma: string;
 }
 
 export const defaultColors: Record<string, ColorMode> = {
   dark: {
-    alpha: '#1c1c1c', // previously header custom text color
-    beta: '#f2f2f2', // previously header background color
-    gamma: '#999999', // previously header custom secondary text color
     headerTextPrimary: '#1c1c1c',
     headerBackgroundColor: '#f2f2f2',
     headerTextSecondary: '#999999',
   },
   light: {
-    alpha: '#f2f2f2', // previously header custom text color
-    beta: '#1c1b1b', // previously header background color
-    gamma: '#999999', // previously header custom secondary text color
     headerTextPrimary: '#f2f2f2',
     headerBackgroundColor: '#1c1b1b',
     headerTextSecondary: '#999999',
@@ -68,32 +59,34 @@ export const useThemeStore = defineStore('theme', () => {
   const setCssVars = () => {
     const body = document.body;
 
-    let { alpha, beta, gamma, headerTextPrimary, headerTextSecondary, headerBackgroundColor } =
-      darkMode.value ? defaultColors.dark : defaultColors.light;
+    let { headerTextPrimary, headerTextSecondary, headerBackgroundColor } = darkMode.value
+      ? defaultColors.dark
+      : defaultColors.light;
     // overwrite with hex colors set in webGUI @ /Settings/DisplaySettings
     if (theme.value?.textColor) {
       headerTextPrimary = theme.value?.textColor;
     }
     if (theme.value?.bgColor) {
       headerBackgroundColor = theme.value.bgColor;
-      body.style.setProperty('--color-customgradient-start', hexToRgba(beta, 0));
-      body.style.setProperty('--color-customgradient-end', hexToRgba(beta, 0.7));
+      body.style.setProperty('--color-customgradient-start', hexToRgba(headerBackgroundColor, 0));
+      body.style.setProperty('--color-customgradient-end', hexToRgba(headerBackgroundColor, 0.7));
     }
     if (theme.value?.metaColor) {
       headerTextSecondary = theme.value?.metaColor;
     }
-    body.style.setProperty('--color-alpha', alpha);
-    body.style.setProperty('--color-beta', beta);
-    body.style.setProperty('--color-gamma', gamma);
+
     body.style.setProperty('--header-text-primary', headerTextPrimary);
     body.style.setProperty('--header-text-secondary', headerTextSecondary);
     body.style.setProperty('--header-background-color', headerBackgroundColor);
-    body.style.setProperty('--color-gamma-opaque', hexToRgba(gamma, 0.25));
+    body.style.setProperty('--color-gamma-opaque', hexToRgba(headerTextSecondary, 0.25));
     // box shadow
-    body.style.setProperty('--shadow-beta', `0 25px 50px -12px ${hexToRgba(beta, 0.15)}`);
-    body.style.setProperty('--ring-offset-shadow', `0 0 ${beta}`);
-    body.style.setProperty('--ring-shadow', `0 0 ${beta}`);
-    body.style.setProperty('--dev-test', `0 0 ${beta}`);
+    body.style.setProperty(
+      '--shadow-beta',
+      `0 25px 50px -12px ${hexToRgba(headerBackgroundColor, 0.15)}`
+    );
+    body.style.setProperty('--ring-offset-shadow', `0 0 ${headerBackgroundColor}`);
+    body.style.setProperty('--ring-shadow', `0 0 ${headerBackgroundColor}`);
+    body.style.setProperty('--dev-test', `0 0 ${headerBackgroundColor}`);
 
     if (darkMode.value) {
       document.body.classList.add('dark');