feat: change default theme color and fix color contrast (#7)

nimbus-town · Nov 23, 2024 · b8ebb42 · b8ebb42
1 parent bb97189
commit b8ebb42
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 61 deletions.
diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
@@ -87,24 +87,24 @@ const buttonStyle = computed(() => {
     </template>
     <template v-else>
       <template v-if="relationship?.blocking">
-        <span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
-        <span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
+        <span nimbus-group-hover="hidden">{{ $t('account.blocking') }}</span>
+        <span hidden nimbus-group-hover="inline">{{ $t('account.unblock') }}</span>
       </template>
       <template v-if="relationship?.muting">
-        <span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
-        <span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
+        <span nimbus-group-hover="hidden">{{ $t('account.muting') }}</span>
+        <span hidden nimbus-group-hover="inline">{{ $t('account.unmute') }}</span>
       </template>
       <template v-else-if="relationship ? relationship.following : context === 'following'">
-        <span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
-        <span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
+        <span nimbus-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
+        <span hidden nimbus-group-hover="inline">{{ $t('account.unfollow') }}</span>
       </template>
       <template v-else-if="relationship?.requested">
-        <span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
-        <span hidden elk-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
+        <span nimbus-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
+        <span hidden nimbus-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
       </template>
       <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
-        <span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
-        <span hidden elk-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
+        <span nimbus-group-hover="hidden">{{ $t('account.follows_you') }}</span>
+        <span hidden nimbus-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
       </template>
       <template v-else>
         <span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>

diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
@@ -57,7 +57,7 @@ async function removeUserNote() {
 <template>
   <CommonDropdown :eager-mount="command">
     <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group :aria-label="t('actions.more')">
-      <div rounded-5 p2 elk-group-hover="bg-purple/10">
+      <div rounded-5 p2 nimbus-group-hover="bg-purple/10">
         <div i-ri:more-2-fill />
       </div>
     </button>

diff --git a/components/nav/NavLogo.vue b/components/nav/NavLogo.vue
@@ -1,45 +1,66 @@
+<script setup lang="ts">
+</script>
+
 <template>
-  <span shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip"><svg
-    xmlns="http://www.w3.org/2000/svg" w-full
-    aspect="1/1" sm:h-8 xl:h-10 sm:w-8 xl:w-10 viewBox="0 0 250 250" fill="none"
-  >
-    <mask
-      id="a"
-      width="240"
-      height="234"
-      x="4"
-      y="1"
-      maskUnits="userSpaceOnUse"
-      style="mask-type:alpha"
-    >
-      <path
-        id="path19"
-        fill="#D9D9D9"
-        d="M244 123c0 64.617-38.383 112-103 112-64.617 0-103-30.883-103-95.5C38 111.194-8.729 36.236 8 16 29.46-9.959 88.689 6 125 6c64.617 0 119 52.383 119 117Z"
-      />
-    </mask>
-    <g
-      id="g28"
-      mask="url(#a)"
-      transform="matrix(0.90923731,0,0,1.0049564,13.520015,-3.1040835)"
+  <span shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      w-full
+      aspect="1/1" sm:h-8 xl:h-10 sm:w-8 xl:w-10
+      fill="none"
+      viewBox="0 0 512 512"
     >
       <path
-        id="path22"
-        class="body"
-        d="m 116.94,88.1 c -13.344,1.552 -20.436,-2.019 -24.706,10.71 0,0 14.336,21.655 52.54,21.112 -2.135,8.848 -1.144,15.368 -1.144,23.207 0,26.079 -20.589,48.821 -65.961,48.821 -23.03,0 -51.015,4.191 -72.367,15.911 -15.175,8.305 -27.048,20.336 -32.302,37.023 l 5.956,8.461 11.4,0.155 v 47.889 l -13.91,21.966 3.998,63.645 H -6.364 L -5.22,335.773 C 1.338,331.892 16.36,321.802 29.171,306.279 46.557,285.4 59.902,255.052 44.193,217.486 l 11.744,-5.045 c 12.887,30.814 8.388,57.514 -2.898,79.013 21.58,-0.698 40.11,-2.095 55.819,-4.734 l -3.584,-43.698 12.659,-1.087 L 129.98,387 h 13.116 l 2.212,-94.459 c 10.447,-4.502 34.239,-21.034 45.372,-78.47 1.372,-6.986 2.135,-12.885 2.516,-17.93 1.754,-12.806 2.745,-27.243 3.051,-43.698 l -18.683,-5.976 h 57.42 l 5.567,-12.807 c -5.414,0.233 -11.896,-2.639 -11.896,-2.639 l 1.297,-6.209 H 242 L 176.801,90.428 c -7.244,2.794 -14.87,6.442 -20.208,10.866 -4.27,-3.105 -19.063,-12.807 -39.653,-13.195 z"
-      />
-      <path
-        id="path24"
         class="wood"
-        d="M 6.217,24.493 18.494,21 c 5.948,21.577 13.345,33.375 22.648,39.352 8.388,5.099 19.75,5.239 31.799,4.579 C 69.433,63.767 66.154,62.137 63.104,59.886 56.317,54.841 50.522,46.458 46.175,31.246 l 12.201,-3.649 c 3.279,11.488 7.092,18.085 12.201,21.888 5.11,3.726 11.286,4.657 18.606,5.433 13.726,1.553 30.884,2.174 52.312,12.264 2.898,1.086 5.872,2.483 8.769,4.036 -0.381,-0.776 -0.762,-1.553 -1.296,-2.406 -3.66,-5.822 -10.828,-11.953 -24.097,-16.92 l 4.27,-12.109 c 21.581,7.917 30.121,19.171 33.553,28.097 3.965,10.168 1.525,18.124 1.525,18.124 -3.05,1.009 -6.1,2.406 -9.608,3.492 -6.634,-4.579 -12.887,-8.033 -18.835,-10.75 C 113.814,70.442 92.31,76.108 73.246,77.893 58.91,79.213 45.794,78.591 34.432,71.295 23.222,64.155 13.385,50.495 6.217,24.493 Z"
+        d="M277.8 294.8c-.5 0-1.1-.1-1.6-.1-2.6 0-5.2 0-7.8.3-9.3-40.8-45.9-71.5-89.7-71.5-50.8 0-91.9 40.9-91.9 91.4 0 3.1.2 6.1.5 9.1-31 2.7-55.3 30.1-55.3 61.6C32 419 58.8 448 92.3 448h185.5c41.9 0 75.8-34.7 75.8-76.3 0-41.6-33.9-76.9-75.8-76.9z"
       />
       <path
-        id="path26"
-        class="wood"
-        d="M 90.098,45.294 C 87.582,39.55 86.057,32.487 86.743,23.794 l 12.659,0.932 c -0.763,10.555 2.897,17.696 7.015,22.353 -5.338,-0.931 -10.447,-1.04 -16.319,-1.785 z m 80.069,-1.32 8.312,-9.702 c 21.58,19.094 8.159,46.415 8.159,46.415 l -11.819,-1.32 c -0.382,-6.24 -1.144,-17.836 -6.635,-24.371 3.584,1.84 6.635,3.865 9.99,6.908 0,-5.666 -1.754,-12.341 -8.007,-17.93 z"
+        class="body"
+        d="M452.1 305.4c-2.5.1-5 .2-7.6.2-41.7 0-80.8-15.7-110.3-44.3-29.5-28.5-45.7-66.5-45.7-106.8 0-23 5.3-45.2 15.2-65.3L315.4 70c1.7-2.9-.8-6.5-4.1-6-7.6 1.2-15.7 4-23.2 6.3-59.5 18.2-104.4 68.1-113.7 129.3 1.4-.1 2.9-.1 4.3-.1 26.5 0 52.4 9.2 73 25.9 15.1 12.2 26.9 28 34.2 45.7 23.7 2 45.7 12.4 62.7 29.8 18.7 19.1 29 44.2 29 70.7 0 2.3-.1 4.6-.2 6.8 34.2-8.1 64.3-26.6 86.4-51.8 4.8-5.5 11.3-12.8 15.3-18.5 2-2.8-.3-6.7-3.8-6.3-6.8 1-15.9 3.2-23.2 3.6z"
       />
-    </g>
-  </svg>
+    </svg>
+
+    <!--    <svg
+      xmlns="http://www.w3.org/2000/svg" w-full
+      aspect="1/1" sm:h-8 xl:h-10 sm:w-8 xl:w-10 viewBox="0 0 250 250" fill="none"
+    >
+      <mask
+        id="a"
+        width="240"
+        height="234"
+        x="4"
+        y="1"
+        maskUnits="userSpaceOnUse"
+        style="mask-type:alpha"
+      >
+        <path
+          id="path19"
+          fill="#D9D9D9"
+          d="M244 123c0 64.617-38.383 112-103 112-64.617 0-103-30.883-103-95.5C38 111.194-8.729 36.236 8 16 29.46-9.959 88.689 6 125 6c64.617 0 119 52.383 119 117Z"
+        />
+      </mask>
+      <g
+        id="g28"
+        mask="url(#a)"
+        transform="matrix(0.90923731,0,0,1.0049564,13.520015,-3.1040835)"
+      >
+        <path
+          id="path22"
+          class="body"
+          d="m 116.94,88.1 c -13.344,1.552 -20.436,-2.019 -24.706,10.71 0,0 14.336,21.655 52.54,21.112 -2.135,8.848 -1.144,15.368 -1.144,23.207 0,26.079 -20.589,48.821 -65.961,48.821 -23.03,0 -51.015,4.191 -72.367,15.911 -15.175,8.305 -27.048,20.336 -32.302,37.023 l 5.956,8.461 11.4,0.155 v 47.889 l -13.91,21.966 3.998,63.645 H -6.364 L -5.22,335.773 C 1.338,331.892 16.36,321.802 29.171,306.279 46.557,285.4 59.902,255.052 44.193,217.486 l 11.744,-5.045 c 12.887,30.814 8.388,57.514 -2.898,79.013 21.58,-0.698 40.11,-2.095 55.819,-4.734 l -3.584,-43.698 12.659,-1.087 L 129.98,387 h 13.116 l 2.212,-94.459 c 10.447,-4.502 34.239,-21.034 45.372,-78.47 1.372,-6.986 2.135,-12.885 2.516,-17.93 1.754,-12.806 2.745,-27.243 3.051,-43.698 l -18.683,-5.976 h 57.42 l 5.567,-12.807 c -5.414,0.233 -11.896,-2.639 -11.896,-2.639 l 1.297,-6.209 H 242 L 176.801,90.428 c -7.244,2.794 -14.87,6.442 -20.208,10.866 -4.27,-3.105 -19.063,-12.807 -39.653,-13.195 z"
+        />
+        <path
+          id="path24"
+          class="wood"
+          d="M 6.217,24.493 18.494,21 c 5.948,21.577 13.345,33.375 22.648,39.352 8.388,5.099 19.75,5.239 31.799,4.579 C 69.433,63.767 66.154,62.137 63.104,59.886 56.317,54.841 50.522,46.458 46.175,31.246 l 12.201,-3.649 c 3.279,11.488 7.092,18.085 12.201,21.888 5.11,3.726 11.286,4.657 18.606,5.433 13.726,1.553 30.884,2.174 52.312,12.264 2.898,1.086 5.872,2.483 8.769,4.036 -0.381,-0.776 -0.762,-1.553 -1.296,-2.406 -3.66,-5.822 -10.828,-11.953 -24.097,-16.92 l 4.27,-12.109 c 21.581,7.917 30.121,19.171 33.553,28.097 3.965,10.168 1.525,18.124 1.525,18.124 -3.05,1.009 -6.1,2.406 -9.608,3.492 -6.634,-4.579 -12.887,-8.033 -18.835,-10.75 C 113.814,70.442 92.31,76.108 73.246,77.893 58.91,79.213 45.794,78.591 34.432,71.295 23.222,64.155 13.385,50.495 6.217,24.493 Z"
+        />
+        <path
+          id="path26"
+          class="wood"
+          d="M 90.098,45.294 C 87.582,39.55 86.057,32.487 86.743,23.794 l 12.659,0.932 c -0.763,10.555 2.897,17.696 7.015,22.353 -5.338,-0.931 -10.447,-1.04 -16.319,-1.785 z m 80.069,-1.32 8.312,-9.702 c 21.58,19.094 8.159,46.415 8.159,46.415 l -11.819,-1.32 c -0.382,-6.24 -1.144,-17.836 -6.635,-24.371 3.584,1.84 6.635,3.865 9.99,6.908 0,-5.666 -1.754,-12.341 -8.007,-17.93 z"
+        />
+      </g>
+    </svg> -->
 
   </span>
 </template>

diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
@@ -68,7 +68,7 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
             w-fit rounded-3
             px2 mx3 sm:mxa
             transition-100
-            elk-group-hover-bg-active
+            nimbus-group-hover-bg-active
             group-focus-visible:ring-2
             group-focus-visible:ring-current
           `"

diff --git a/components/settings/SettingsThemeColors.vue b/components/settings/SettingsThemeColors.vue
@@ -1,10 +1,40 @@
 <script setup lang="ts">
 import type { ThemeColors } from '~/composables/settings'
+import { THEME_COLORS } from '~/constants'
 
-const themes = await import('~/constants/themes.json').then(r => r.default) as [string, ThemeColors][]
+const themes = await import('~/constants/themes.json').then((r) => {
+  const map = new Map<'dark' | 'light', [string, ThemeColors][]>([['dark', []], ['light', []]])
+  const themes = r.default as [string, ThemeColors][]
+  for (const [key, theme] of themes) {
+    map.get('dark')!.push([key, theme])
+    map.get('light')!.push([key, {
+      ...theme,
+      '--c-primary': `color-mix(in srgb, ${theme['--c-primary']}, black 25%)`,
+    }])
+  }
+  return map
+})
 const settings = useUserSettings()
 
-const currentTheme = computed(() => settings.value.themeColors?.['--theme-color-name'] || themes[0][1]['--theme-color-name'])
+const media = useMediaQuery('(prefers-color-scheme: dark)')
+const colorMode = useColorMode()
+
+const useThemes = shallowRef<[string, ThemeColors][]>([])
+
+watch(() => colorMode.preference, (cm) => {
+  const dark = cm === 'dark' || (cm === 'system' && media.value)
+  const newThemes = dark ? themes.get('dark')! : themes.get('light')!
+  const key = settings.value.themeColors?.['--theme-color-name'] || THEME_COLORS.defaultTheme
+  for (const [k, theme] of newThemes) {
+    if (k === key) {
+      settings.value.themeColors = theme
+      break
+    }
+  }
+  useThemes.value = newThemes
+}, { immediate: true, flush: 'post' })
+
+const currentTheme = computed(() => settings.value.themeColors?.['--theme-color-name'] || THEME_COLORS.defaultTheme)
 
 function updateTheme(theme: ThemeColors) {
   settings.value.themeColors = theme
@@ -18,10 +48,11 @@ function updateTheme(theme: ThemeColors) {
     </h2>
     <div flex="~ gap4 wrap" p2 role="group" aria-labelledby="interface-tc">
       <button
-        v-for="[key, theme] in themes" :key="key"
+        v-for="[key, theme] in useThemes" :key="key"
         :style="{
-          'background': key,
-          '--local-ring-color': key,
+          '--rgb-primary': theme['--rgb-primary'],
+          'background': theme['--c-primary'],
+          '--local-ring-color': theme['--c-primary'],
         }"
         type="button"
         :class="currentTheme === theme['--theme-color-name'] ? 'ring-2' : 'scale-90'"

diff --git a/components/status/StatusActionButton.vue b/components/status/StatusActionButton.vue
@@ -11,7 +11,7 @@ const { as = 'button', command, disabled, content, icon } = defineProps<{
   activeIcon?: string
   inactiveIcon?: string
   hover: string
-  elkGroupHover: string
+  nimbusGroupHover: string
   active?: boolean
   disabled?: boolean
   as?: string
@@ -64,8 +64,8 @@ useCommand({
       <div
         rounded-full p2
         v-bind="disabled ? {} : {
-          'elk-group-hover': elkGroupHover,
-          'group-focus-visible': elkGroupHover,
+          'nimbus-group-hover': nimbusGroupHover,
+          'group-focus-visible': nimbusGroupHover,
           'group-focus-visible:ring': '2 current',
         }"
       >

diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
@@ -38,7 +38,7 @@ function reply() {
       <StatusActionButton
         :content="$t('action.reply')"
         :text="!getPreferences(userSettings, 'hideReplyCount') && status.repliesCount || ''"
-        color="text-blue" hover="text-blue" elk-group-hover="bg-blue/10"
+        color="text-blue" hover="text-blue" nimbus-group-hover="bg-blue/10"
         icon="i-ri:chat-1-line"
         :command="command"
         @click="reply"
@@ -56,7 +56,7 @@ function reply() {
       <StatusActionButton
         :content="$t(status.reblogged ? 'action.boosted' : 'action.boost')"
         :text="!getPreferences(userSettings, 'hideBoostCount') && status.reblogsCount ? status.reblogsCount : ''"
-        color="text-green" hover="text-green" elk-group-hover="bg-green/10"
+        color="text-green" hover="text-green" nimbus-group-hover="bg-green/10"
         icon="i-ri:repeat-line"
         active-icon="i-ri:repeat-fill"
         inactive-icon="i-tabler:repeat-off"
@@ -80,7 +80,7 @@ function reply() {
         :text="!getPreferences(userSettings, 'hideFavoriteCount') && status.favouritesCount ? status.favouritesCount : ''"
         :color="useStarFavoriteIcon ? 'text-yellow' : 'text-rose'"
         :hover="useStarFavoriteIcon ? 'text-yellow' : 'text-rose'"
-        :elk-group-hover="useStarFavoriteIcon ? 'bg-yellow/10' : 'bg-rose/10'"
+        :nimbus-group-hover="useStarFavoriteIcon ? 'bg-yellow/10' : 'bg-rose/10'"
         :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'"
         :active-icon="useStarFavoriteIcon ? 'i-ri:star-fill' : 'i-ri:heart-3-fill'"
         :active="!!status.favourited"

diff --git a/components/status/StatusActionsMore.vue b/components/status/StatusActionsMore.vue
@@ -136,7 +136,7 @@ function showFavoritedAndBoostedBy() {
       :content="$t('action.more')"
       color="text-primary"
       hover="text-primary"
-      elk-group-hover="bg-primary-light"
+      nimbus-group-hover="bg-primary-light"
       icon="i-ri:more-line"
       my--2
     />

diff --git a/components/tag/TagActionButton.vue b/components/tag/TagActionButton.vue
@@ -41,7 +41,7 @@ async function toggleFollowTag() {
     @click="toggleFollowTag()"
   >
     <CommonTooltip placement="bottom" :content="tag.following ? $t('tag.unfollow') : $t('tag.follow')">
-      <div rounded-full p2 elk-group-hover="bg-orange/10" group-focus-visible="bg-orange/10" group-focus-visible:ring="2 current">
+      <div rounded-full p2 nimbus-group-hover="bg-orange/10" group-focus-visible="bg-orange/10" group-focus-visible:ring="2 current">
         <div :class="[tag.following ? 'i-ri:star-fill' : 'i-ri:star-line']" />
       </div>
     </CommonTooltip>

diff --git a/constants/index.ts b/constants/index.ts
@@ -31,6 +31,7 @@ export const HANDLED_MASTO_URLS = /^(https?:\/\/)?([\w\-]+\.)+\w+\/(@[@\w\-.]+)(
 export const NOTIFICATION_FILTER_TYPES: mastodon.v1.NotificationType[] = ['status', 'reblog', 'follow', 'follow_request', 'favourite', 'poll', 'update', 'admin.sign_up', 'admin.report']
 
 export const THEME_COLORS = {
+  defaultTheme: '#0097fd',
   themeDark: '#111111',
   themeLight: '#fafafa',
   backgroundDark: '#fafafa',

diff --git a/unocss.config.ts b/unocss.config.ts
@@ -68,7 +68,7 @@ export default defineConfig({
 
       'timeline-title-style': 'text-primary text-lg font-bold',
     },
-    [/^elk-group-hover[:-]([a-z0-9/-]+)$/, ([,r]) => `media-mouse-group-hover-${r} group-active-${r}`],
+    [/^nimbus-group-hover[:-]([a-z0-9/-]+)$/, ([,r]) => `media-mouse-group-hover-${r} group-active-${r}`],
   ],
   presets: [
     presetUno({