Improved Theming

Signed-off-by: Frank Jogeleit <[email protected]>
kyverno · Mar 15, 2024 · 9bfaecf · 9bfaecf
1 parent 0c5897b
commit 9bfaecf
Show file tree

Hide file tree

Showing 16 changed files with 132 additions and 100 deletions.
diff --git a/frontend/components/PageLayout.vue b/frontend/components/PageLayout.vue
@@ -21,7 +21,7 @@
 <script setup lang="ts">
 import { ClusterKinds, NamespacedKinds } from "~/modules/core/provider/dashboard";
 
-const props = defineProps<{ title?: string; category?: string; source?: string; store?: string; nsScoped?: boolean; kinds?: string[]; clusterKinds?: string[]; hideReport: boolean }>()
+const props = defineProps<{ title?: string; category?: string; source?: string; store?: string; nsScoped?: boolean; kinds?: string[]; clusterKinds?: string[]; hideReport?: boolean }>()
 
 const kinds = ref<string[]>(props.kinds ?? [])
 const clusterKinds = ref<string[]>(props.clusterKinds ?? [])

diff --git a/frontend/components/StatusBtn.vue b/frontend/components/StatusBtn.vue
@@ -1,16 +1,9 @@
 <template>
-  <v-btn :color="color" clss="py-1" size="small" :value="status">{{ status }}</v-btn>
+  <v-btn :color="`btn-${status}`" clss="py-1" size="small" :value="status">{{ status }}</v-btn>
 </template>
 
 <script setup lang="ts">
 import { Status } from "~/modules/core/types";
-import { useTheme } from "vuetify";
-import { useStatusBtnColor } from "~/modules/core/composables/theme";
 
 const props = defineProps<{ status: Status }>()
-
-const theme = useTheme()
-
-const color = useStatusBtnColor(props.status)
-
 </script>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
@@ -5,7 +5,7 @@
       <v-toolbar-title>Policy Reporter</v-toolbar-title>
       <template #append>
         <form-cluster-select />
-        <form-display-mode-select style="width: 150px;" />
+        <form-display-mode-select />
         <user-menu />
       </template>
     </v-app-bar>

diff --git a/frontend/modules/core/components/ResultChip.vue b/frontend/modules/core/components/ResultChip.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-chip :prepend-icon="`mdi-${icons[status]}`" :color="color" variant="flat">
+    <v-chip :prepend-icon="`mdi-${icons[status]}`" :color="`status-${status}`" variant="flat">
         <div class="text-right" style="min-width: 40px;">{{ count || 0 }}</div>
         <v-tooltip :text="tooltip" location="top" activator="parent" />
     </v-chip>
@@ -14,8 +14,6 @@ const props = defineProps<{
   tooltip: string;
 }>()
 
-const color = useStatusMapper(props.status)
-
 const icons = {
     [Status.PASS]: 'check',
     [Status.WARN]: 'alert',

diff --git a/frontend/modules/core/components/avatar/Severity.vue b/frontend/modules/core/components/avatar/Severity.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-avatar :color="color" dark v-bind="$attrs" variant="tonal">
+  <v-avatar :color="`severity-${severity}`" dark v-bind="$attrs" variant="tonal">
     {{ severity.charAt(0).toUpperCase() }}
     <v-tooltip :text="`${severity} severity`" location="top" activator="parent" />
   </v-avatar>
@@ -9,6 +9,4 @@
 import type { Severity } from "~/modules/core/types";
 
 const props = defineProps<{ severity: Severity }>()
-
-const color = useSeverityColor(props.severity)
 </script>
diff --git a/frontend/modules/core/components/chip/Severity.vue b/frontend/modules/core/components/chip/Severity.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-chip :color="color" dark v-bind="$attrs">
+  <v-chip :color="`severity-${severity}`" dark v-bind="$attrs">
     {{ severity }}
   </v-chip>
 </template>
@@ -8,6 +8,4 @@
 import type { Severity } from "~/modules/core/types";
 
 const props = defineProps<{ severity: Severity }>()
-
-const color = useSeverityColor(props.severity)
 </script>
diff --git a/frontend/modules/core/components/chip/Status.vue b/frontend/modules/core/components/chip/Status.vue
@@ -1,14 +1,11 @@
 <template>
-  <v-chip :color="color" dark v-bind="$attrs" variant="tonal">
+  <v-chip :color="`btn-${status}`" dark v-bind="$attrs" variant="tonal">
     {{ status }}
   </v-chip>
 </template>
 
 <script lang="ts" setup>
 import { Status } from "~/modules/core/types";
-import { useStatusBtnColor } from "~/modules/core/composables/theme";
 
 const props = defineProps<{ status: Status }>()
-
-const color = useStatusBtnColor(props.status)
 </script>
diff --git a/frontend/modules/core/components/form/DisplayModeSelect.vue b/frontend/modules/core/components/form/DisplayModeSelect.vue
@@ -1,12 +1,12 @@
 <template>
   <v-select
     :model-value="config.theme"
-    :items="[DisplayMode.LIGHT, DisplayMode.DARK]"
+    :items="items"
     variant="outlined"
     hide-details
     density="compact"
     prepend-inner-icon="mdi-brightness-6"
-    style="max-width: 140px;"
+    style="width: 220px;"
     @update:model-value="input"
   />
 </template>
@@ -17,6 +17,13 @@ import { useConfigStore } from "~/store/config";
 
 const config = useConfigStore()
 
+const items = [
+  { title: 'Light', value: DisplayMode.LIGHT },
+  { title: 'Dark', value: DisplayMode.DARK },
+  { title: 'Color Blind Light', value: DisplayMode.COLOR_BLIND },
+  { title: 'Color Blind Dark', value: DisplayMode.COLOR_BLIND_DARK },
+]
+
 const input = (mode: DisplayMode) => { config.setDisplayMode(mode) }
 
 </script>
diff --git a/frontend/modules/core/components/graph/ClusterResultCounts.vue b/frontend/modules/core/components/graph/ClusterResultCounts.vue
@@ -2,28 +2,28 @@
   <v-container fluid>
     <v-row>
       <v-col cols="12" sm="6" md="3">
-        <v-card flat title="pass results" class="text-white text-center" :style="`background-color: ${statusColors[Status.PASS]}`">
+        <v-card flat title="pass results" :class="['text-white', 'text-center', `bg-status-${Status.PASS}`]">
           <v-card-text class="text-h3 my-4">
             {{ data.pass }}
           </v-card-text>
         </v-card>
       </v-col>
       <v-col cols="12" sm="6" md="3">
-        <v-card flat title="warn results" class="text-white text-center" :style="`background-color: ${statusColors[Status.WARN]}`">
+        <v-card flat title="warn results" :class="['text-white', 'text-center', `bg-status-${Status.WARN}`]">
           <v-card-text class="text-h3 my-4">
             {{ data.warn }}
           </v-card-text>
         </v-card>
       </v-col>
       <v-col cols="12" sm="6" md="3">
-        <v-card flat title="fail results" class="text-white text-center" :style="`background-color: ${statusColors[Status.FAIL]}`">
+        <v-card flat title="fail results" :class="['text-white', 'text-center', `bg-status-${Status.FAIL}`]">
           <v-card-text class="text-h3 my-4">
             {{ data.fail }}
           </v-card-text>
         </v-card>
       </v-col>
       <v-col cols="12" sm="6" md="3">
-        <v-card flat title="error results" class="text-white text-center" :style="`background-color: ${statusColors[Status.ERROR]}`">
+        <v-card flat title="error results" :class="['text-white', 'text-center', `bg-status-${Status.ERROR}`]">
           <v-card-text class="text-h3 my-4">
             {{ data.error }}
           </v-card-text>
@@ -34,10 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { useStatusColors } from "~/modules/core/composables/theme";
 import { Status } from "../../types";
 
 const props = defineProps<{ data: { [key in Status]: number; }; }>()
-
-const statusColors = useStatusColors()
 </script>
diff --git a/frontend/modules/core/components/graph/Findings.vue b/frontend/modules/core/components/graph/Findings.vue
@@ -20,6 +20,7 @@ import { type Findings, Status } from '../../types'
 import chroma from 'chroma-js'
 import { mapStatus } from "../../mapper";
 import { capilize } from "../../layouthHelper";
+import {useTheme} from "vuetify";
 
 const props = defineProps({
   status: { type: String as PropType<Status>, default: Status.FAIL, required: true },
@@ -28,10 +29,11 @@ const props = defineProps({
 })
 
 const diff = 0.80
+const theme = useTheme()
 
 const colors = (status: Status, amount: number) => {
   const middle = Math.floor(amount / 2)
-  const base = chroma(mapStatus(status))
+  const base = chroma(theme.current.value.colors[`status-${status}`])
 
   return Array.from(Array(amount).keys()).map((index) => {
     if (index < middle) {

diff --git a/frontend/modules/core/components/graph/ResourceResultCounts.vue b/frontend/modules/core/components/graph/ResourceResultCounts.vue
@@ -2,28 +2,28 @@
   <v-container fluid>
     <v-row>
       <v-col cols="12" sm="6" md="3">
-        <v-card flat title="pass results" class="text-white text-center" :style="`background-color: ${statusColors.pass}`">
+        <v-card flat title="pass results" :class="['text-white', 'text-center', `bg-status-${Status.PASS}`]">
           <v-card-text class="text-h3 my-4">
             {{ data[Status.PASS] }}
           </v-card-text>
         </v-card>
       </v-col>
       <v-col cols="12" sm="6" md="3">
-        <v-card flat title="warn results" class="text-white text-center" :style="`background-color: ${statusColors.warn}`">
+        <v-card flat title="warn results" :class="['text-white', 'text-center', `bg-status-${Status.WARN}`]">
           <v-card-text class="text-h3 my-4">
             {{ data[Status.WARN] }}
           </v-card-text>
         </v-card>
       </v-col>
       <v-col cols="12" sm="6" md="3">
-        <v-card flat title="fail results" class="text-white text-center" :style="`background-color: ${statusColors.fail}`">
+        <v-card flat title="fail results" :class="['text-white', 'text-center', `bg-status-${Status.FAIL}`]">
           <v-card-text class="text-h3 my-4">
             {{ data[Status.FAIL] }}
           </v-card-text>
         </v-card>
       </v-col>
       <v-col cols="12" sm="6" md="3">
-        <v-card flat title="error results" class="text-white text-center" :style="`background-color: ${statusColors.error}`">
+        <v-card flat title="error results" :class="['text-white', 'text-center', `bg-status-${Status.ERROR}`]">
           <v-card-text class="text-h3 my-4">
             {{ data[Status.ERROR] }}
           </v-card-text>
@@ -35,9 +35,6 @@
 
 <script setup lang="ts">
 import { Status } from "~/modules/core/types";
-import { useStatusColors } from "~/modules/core/composables/theme";
 
 const props = defineProps<{ data: { [key in Status]: number; }}>()
-
-const statusColors = useStatusColors()
 </script>
diff --git a/frontend/modules/core/composables/theme.ts b/frontend/modules/core/composables/theme.ts
@@ -1,34 +1,15 @@
 import { useTheme } from "vuetify";
-import { mapDarkStatus, mapStatus } from "../mapper";
-import { Severity, Status } from "../types";
+import { Status } from "../types";
 import { computed } from "vue";
 
-const statusToBtnColor: { [status in Status]: string } = {
-  [Status.SKIP]: '#EEEEEE',
-  [Status.PASS]: '#00E676',
-  [Status.WARN]: '#FF6D00',
-  [Status.FAIL]: '#FF5252',
-  [Status.ERROR]: '#E53935'
-}
-
-export const useStatusMapper = (status: Status) => {
-  const theme = useTheme()
-
-  return computed(() => theme.current.value.dark ? mapDarkStatus(status) : mapStatus(status))
-}
-
-export const useStatusBtnColor = (status: Status) => {
+export const useStatusColors = () => {
   const theme = useTheme()
 
-  return computed(() => theme.current.value.dark ? statusToBtnColor[status] : mapStatus(status))
-}
-
-export const useStatusColors = () => {
-  const pass = useStatusMapper(Status.PASS)
-  const fail = useStatusMapper(Status.FAIL)
-  const warn = useStatusMapper(Status.WARN)
-  const error = useStatusMapper(Status.ERROR)
-  const skip = useStatusMapper(Status.SKIP)
+  const pass = computed(() => theme.current.value.colors[`status-${Status.PASS}`])
+  const fail = computed(() => theme.current.value.colors[`status-${Status.FAIL}`])
+  const warn = computed(() => theme.current.value.colors[`status-${Status.WARN}`])
+  const error = computed(() => theme.current.value.colors[`status-${Status.ERROR}`])
+  const skip = computed(() => theme.current.value.colors[`status-${Status.SKIP}`])
 
   return computed(() => ({
     pass: pass.value,
@@ -43,7 +24,7 @@ export const  useChartColors = () => {
   return computed(() => {
     if (theme.current.value.dark) {
       return {
-        color: '#ADBABD',
+        color: '#CCCCCC',
         borderColor: "rgba(255,255,255,0.1)",
         backgroundColor: "rgba(255,255,255,0.1)",
         element: "rgba(255,255,255,0.4)",
@@ -70,25 +51,3 @@ export const useBGColor = () => {
     return 'bg-grey-lighten-3'
   })
 }
-
-const severityToColor = {
-  [Severity.INFO]: 'grey',
-  [Severity.LOW]: 'info',
-  [Severity.MEDIUM]: 'warning',
-  [Severity.HIGH]: 'red-darken-2',
-  [Severity.CRITICAL]: 'red-accent-3',
-}
-
-const severityToDarkColor = {
-  [Severity.INFO]: 'light-blue-accent-1',
-  [Severity.LOW]: 'blue-accent-1',
-  [Severity.MEDIUM]: 'amber-accent-3',
-  [Severity.HIGH]: 'red-accent-1',
-  [Severity.CRITICAL]: 'red-accent-2',
-}
-
-export const useSeverityColor = (severity: Severity) => {
-  const theme = useTheme()
-
-  return computed(() => theme.current.value.dark ? severityToDarkColor[severity] : severityToColor[severity])
-}
diff --git a/frontend/modules/core/types.ts b/frontend/modules/core/types.ts
@@ -26,7 +26,9 @@ export enum Status {
 export enum DisplayMode {
     UNSPECIFIED = '',
     DARK = 'dark',
-    LIGHT = 'light'
+    LIGHT = 'light',
+    COLOR_BLIND = 'colorblind',
+    COLOR_BLIND_DARK = 'colorblinddark'
 }
 
 export enum Direction {