Adjust colors

VedaWebProject · Jan 9, 2025 · 8ae1e42 · 8ae1e42
1 parent e34f28f
commit 8ae1e42
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 40 deletions.
diff --git a/Tekst-API/tekst/sample_data/db/texts.json b/Tekst-API/tekst/sample_data/db/texts.json
@@ -24,7 +24,7 @@
         "default_level": 2,
         "loc_delim": " > ",
         "labeled_location": true,
-        "accent_color": "#43895f",
+        "accent_color": "#416952",
         "is_active": true,
         "resource_categories": [
             {
@@ -76,7 +76,7 @@
         "default_level": 0,
         "loc_delim": "/",
         "labeled_location": true,
-        "accent_color": "#305d97",
+        "accent_color": "#405B85",
         "is_active": true,
         "resource_categories": [
             {

diff --git a/Tekst-Web/src/api/index.ts b/Tekst-Web/src/api/index.ts
@@ -110,14 +110,14 @@ export function downloadData(blob: Blob, filename: string) {
 // export some common platform properties for use throughout codebase
 
 export const accentColorPresets = [
-  '#305D97',
-  '#3C8589',
-  '#43895F',
-  '#CC9618',
-  '#BA5614',
-  '#C62B26',
-  '#B52651',
-  '#88447F',
+  '#405B85', // indigo
+  '#416367', // teal
+  '#416952', // green
+  '#927E34', // mustard
+  '#67583C', // coffee
+  '#853435', // dark red
+  '#6A3F4E', // aubergine
+  '#524470', // violet
 ];
 
 export const resourceTypes = [

diff --git a/Tekst-Web/src/components/browse/BrowseLocationControls.vue b/Tekst-Web/src/components/browse/BrowseLocationControls.vue
@@ -73,10 +73,7 @@ whenever(ArrowRight, () => {
       </template>
     </n-button>
 
-    <n-badge
-      :show="!browse.isOnDefaultLevel && !browse.loadingLocationData"
-      color="var(--accent-color-spotlight)"
-    >
+    <n-badge :show="!browse.isOnDefaultLevel && !browse.loadingLocationData">
       <template #value>
         <n-icon :component="WarningIcon" />
       </template>

diff --git a/Tekst-Web/src/components/browse/BrowseSearchResultsToolbar.vue b/Tekst-Web/src/components/browse/BrowseSearchResultsToolbar.vue
@@ -149,12 +149,7 @@ onMounted(() => {
 
       <n-flex :wrap="false">
         <!-- keep active resources in sync with relevant resources from current hit? -->
-        <n-badge
-          dot
-          :offset="[0, 5]"
-          color="var(--accent-color-spotlight)"
-          :show="search.browseHitResourcesActive"
-        >
+        <n-badge dot :offset="[0, 5]" :show="search.browseHitResourcesActive">
           <n-button
             :quaternary="!search.browseHitResourcesActive"
             :tertiary="search.browseHitResourcesActive"

diff --git a/Tekst-Web/src/components/browse/BrowseToolbar.vue b/Tekst-Web/src/components/browse/BrowseToolbar.vue
@@ -66,12 +66,7 @@ const buttonSize = computed(() => (state.smallScreen ? 'small' : 'large'));
       </div>
 
       <div class="browse-toolbar-end">
-        <n-badge
-          dot
-          :offset="[0, 5]"
-          color="var(--accent-color-spotlight)"
-          :show="browse.reducedView"
-        >
+        <n-badge dot :offset="[0, 5]" :show="browse.reducedView">
           <n-button
             type="primary"
             :size="buttonSize"
@@ -87,7 +82,7 @@ const buttonSize = computed(() => (state.smallScreen ? 'small' : 'large'));
           </n-button>
         </n-badge>
 
-        <n-badge :value="resourceDrawerBadgeLabel" color="var(--accent-color-spotlight)">
+        <n-badge :value="resourceDrawerBadgeLabel">
           <n-button
             type="primary"
             :size="buttonSize"
@@ -184,9 +179,3 @@ const buttonSize = computed(() => (state.smallScreen ? 'small' : 'large'));
   white-space: nowrap;
 }
 </style>
-
-<style>
-.browse-toolbar .n-badge > .n-badge-sup {
-  color: #000;
-}
-</style>
diff --git a/Tekst-Web/src/stores/theme.ts b/Tekst-Web/src/stores/theme.ts
@@ -1,7 +1,7 @@
 import { usePlatformData } from '@/composables/platformData';
 import { useStateStore } from '@/stores';
 import { usePreferredDark, useStorage } from '@vueuse/core';
-import { adjustHue, lighten, saturate, toRgba, transparentize } from 'color2k';
+import { lighten, saturate, toRgba, transparentize } from 'color2k';
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { darkTheme, lightTheme } from 'naive-ui';
 import { defineStore } from 'pinia';
@@ -28,6 +28,7 @@ const _COMMON_OVERRIDES: GlobalThemeOverrides = {
   },
   Badge: {
     fontSize: 'var(--font-size-mini)',
+    color: '#D4443F',
   },
   Thing: {
     titleFontWeight: 'var(--font-weight-bold)',
@@ -38,7 +39,7 @@ const _LIGHT_OVERRIDES: GlobalThemeOverrides = {
   ..._COMMON_OVERRIDES,
   common: {
     ..._COMMON_OVERRIDES.common,
-    bodyColor: '#ffffff',
+    bodyColor: '#FFFFFF',
   },
 };
 
@@ -71,7 +72,6 @@ export const useThemeStore = defineStore('theme', () => {
     darkMode: boolean = dark.value
   ) {
     const lightenBy = darkMode ? 0.375 : 0.0;
-    const baseStatic = baseColor;
     const base = lighten(baseColor, lightenBy);
     return {
       base: toRgba(base),
@@ -80,9 +80,6 @@ export const useThemeStore = defineStore('theme', () => {
       fade3: toRgba(transparentize(base, 0.6)),
       fade4: toRgba(transparentize(base, 0.8)),
       fade5: toRgba(transparentize(base, 0.9)),
-      // this is supposed to create an attention-grabbing UI highlight color that
-      // complements each text's accent color
-      spotlight: toRgba(lighten(adjustHue(saturate(baseStatic, 0.3), 180), 0.45)),
     };
   }
 
@@ -137,7 +134,6 @@ export const useThemeStore = defineStore('theme', () => {
       '--accent-color-fade3': custom.value.accent.fade3,
       '--accent-color-fade4': custom.value.accent.fade4,
       '--accent-color-fade5': custom.value.accent.fade5,
-      '--accent-color-spotlight': custom.value.accent.spotlight,
 
       '--link-color': custom.value.accent.base,
       '--link-color-hover': custom.value.accent.fade1,