refactor(theme): rename theme colors for theme selection

starsJuly · Oct 5, 2024 · c88c470 · c88c470
1 parent 3005177
commit c88c470
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 41 deletions.
diff --git a/components/FeaturedSongList.component.jsx b/components/FeaturedSongList.component.jsx
@@ -57,7 +57,7 @@ const FeaturedSongItem = ({ props: [song, EffThis] }) => {
       </div>
       <div className="flex flex-row items-start pr-10">
         <span className={`text-label flex flex-row items-center ${get_artwork_url(bvid_list) !== "/favicon.png" ? "inline" : "hidden"}`}>
-          <span className="text-palette-7">{bili2_icon()}</span>
+          <span className="text-accent">{bili2_icon()}</span>
           <HiMiniPlay className="mr-1 ml-3" onClick={
             () => {
               EffThis.play_music_for_name(song.song_name);
@@ -97,9 +97,9 @@ const FeaturedSongItem = ({ props: [song, EffThis] }) => {
           <span className={`ml-[0.5rem] h-[1.2rem] inline-flex 
             items-center rounded-full
             px-2 py-1 font-medium mr-2
-          text-palette-9 ring-1 ring-inset 
-          ring-palette-9 text-xs shrink-0
-            transition-colors duration-100 hover:ring-white hover:text-white hover:bg-palette-9`}
+          text-secondary-label ring-1 ring-inset 
+          ring-secondary-label text-xs shrink-0
+            transition-colors duration-100 hover:ring-white hover:text-white hover:bg-secondary-label`}
             onClick={(e) => {
               e.stopPropagation();
               alert("暂时没有歌切记录；；");

diff --git a/components/HeaderView.component.jsx b/components/HeaderView.component.jsx
@@ -64,7 +64,7 @@ const StyledI = ({handle_click}) => {
     <div className="absolute bottom-0 right-0 text-base sm:text-title flex flex-col items-center text-label group/heart pointer-events-none">
       <div className='font-normal text-base absolute 
         right-0 -top-[3rem] shrink-0 text-nowrap backdrop-blur-xl opacity-0 transition-all
-        inline sm:group-hover/heart:!opacity-100 text-right bg-palette-7/10 rounded-full px-3 py-1 duration-150'>
+        inline sm:group-hover/heart:!opacity-100 text-right bg-accent/10 rounded-full px-3 py-1 duration-150'>
         <span className='flex flex-row items-center space-x-1'>
           <div className='relative w-[1.2rem] h-[1.2rem]'>
           <Image src={clicks <= 5 ? question_mark : bgs1314baobaomuamualovelove}
@@ -77,11 +77,11 @@ const StyledI = ({handle_click}) => {
         <div className="w-10 h-10 absolute top-[1.80rem] left-10 overflow-hidden inline-block">
           <div className='w-[10px] h-[10px] right-6
             -rotate-45 transform absolute -top-[5px]
-            backdrop-blur-xl bg-palette-7/10'>
+            backdrop-blur-xl bg-accent/10'>
           </div>
         </div>
       </div>
-      <HiHeart className="font-semibold text-palette-2 text-[0.35rem] sm:text-base absolute bottom-[1.1rem] sm:bottom-[2.3rem] pointer-events-auto" 
+      <HiHeart className="font-semibold text-extra-2 text-[0.35rem] sm:text-base absolute bottom-[1.1rem] sm:bottom-[2.3rem] pointer-events-auto" 
         onClick={() => {
           handle_click();
           set_clicks(clicks+1);

diff --git a/components/MandarinBtn.component.jsx b/components/MandarinBtn.component.jsx
@@ -35,16 +35,16 @@ export default function MandarinBtn(
       <div className={`relative inline-flex justify-center gap-x-1.5
          rounded-xl text-sm shadow-sm ring-1 
          ring-inset ring-gray-300 hover:bg-gray-50"
-         ${filter_state.lang === "华语" ? "bg-oen-color-1" : "bg-white"}
-         ${filter_state.lang === "华语" ? "text-oen-color-9" : "text-gray-900"}
+         ${filter_state.lang === "华语" ? "bg-tertiary-background" : "bg-white"}
+         ${filter_state.lang === "华语" ? "text-accent" : "text-label"}
          `}
          ref={ref}
          onClick={() => {
           setIsOpen(!isOpen);
          }}
       >
         <div className={`relative flex items-center divide-x divide-solid 
-          ${filter_state.lang === '华语' ? 'divide-oen-color-9' : 'divide-gray-300'}`}
+          ${filter_state.lang === '华语' ? 'divide-accent' : 'divide-secondary-label'}`}
         >
           <button type="button" className="inline-flex items-center
             px-2 py-2 text-sm pr-4" 
@@ -63,18 +63,18 @@ export default function MandarinBtn(
           </button>
           <ChevronDownIcon aria-hidden="true" 
             className={`mr-1 h-6 w-6 inline
-            ${filter_state.lang === '华语' ? "text-oen-color-9" : "text-gray-400"}
+            ${filter_state.lang === '华语' ? "text-accent" : "text-label"}
             `} 
           />
         </div>
       </div>
       {(isOpen) && (
         <motion.div
           className='origin-top-right absolute left-0 mt-2 w-32 z-10 
-          rounded-md shadow-lg 
-          bg-white ring-1 ring-black 
+          rounded-md shadow-lg text-label
+          bg-tertiary-background ring-1 ring-black 
           ring-opacity-5 focus:outline-none 
-          h-[10rem] overflow-y-auto' 
+          h-[10rem] overflow-y-auto'
           role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabIndex="-1"
           ref={dropdownRef}
           initial={{ opacity: 0, scale: 0, transform: 'translateY(-15px)' }}
@@ -92,8 +92,8 @@ export default function MandarinBtn(
                     style={{
                       cursor: theme.cursor.pointer,
                     }}
-                    className={`block px-4 py-2 text-sm text-gray-700 
-                      ${alphabet === filter_state.initial ? 'bg-oen-color-1' : 'bg-white'}
+                    className={`block px-4 py-2 text-sm text-label
+                      ${alphabet === filter_state.initial ? 'bg-accent-oen/30' : 'bg-tertiary-background'}
                     `} 
                     role="menuitem" tabIndex="-1" id="menu-item-3"
                     key={ alphabet }

diff --git a/components/SongList.component.jsx b/components/SongList.component.jsx
@@ -89,8 +89,8 @@ const PillList = ({ props: [song_info, song_idx, BVID, EffThis,] }) => {
       >
         {
           is_favorite
-            ? <BsBookmarkHeartFill className="text-oen-red hover:text-palette-2 transition-colors duration-100" />
-            : <BsBookmarkPlus className="text-oen-color-10 hover:text-palette-2 transition-colors duration-100" />
+            ? <BsBookmarkHeartFill className="text-oen-red hover:text-extra-2 transition-colors duration-100" />
+            : <BsBookmarkPlus className="text-oen-color-10 hover:text-extra-2 transition-colors duration-100" />
         }
         {
           show_love 
@@ -219,10 +219,10 @@ const CompactButtonList = ({ props: [song_info, song_idx, BVID, EffThis,] }) =>
         <span className={`ml-[0.5rem] h-[1.2rem] inline-flex 
           items-center rounded-full
           px-2 py-1 font-medium 
-        text-palette-9 ring-1 ring-inset 
-        ring-palette-9 text-xs shrink-0
+        text-secondary-label ring-1 ring-inset 
+        ring-secondary-label text-xs shrink-0
           transition-colors duration-100 ${has_record ? 'hidden' : 'inline'}
-          hover:ring-white hover:text-white hover:bg-palette-9`}
+          hover:ring-white hover:text-white hover:bg-secondary-label`}
           onClick={(e) => {
             e.stopPropagation();
             alert("暂时没有歌切记录；；");

diff --git a/components/SongListFilter.component.jsx b/components/SongListFilter.component.jsx
@@ -46,15 +46,15 @@ export default function SongListFilter({ props: [ filter_state, searchBox, EffTh
           <div className="relative rounded-xl shadow-sm 
             justify-center mr-2 mb-2 grow hidden sm:inline-block">
             <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-              <span className="text-gray-500 sm:text-sm">
+              <span className="text-label sm:text-sm">
                 <MagnifyingGlassIcon className="inline h-5 w-5 ml-0" />
               </span>
             </div>
             <input type="text" className="block w-full rounded-xl border-0 
-              py-1.5 pl-10 pr-20 text-gray-900 ring-1 focus:outline-palette-7
-              ring-inset ring-gray-300 placeholder:text-gray-400 
+              py-1.5 pl-10 pr-20 text-label ring-0 focus:outline-accent
+              ring-inset placeholder:text-placeholder
               focus:ring-0 focus:ring-inset focus:ring-oen-color-1
-              sm:text-sm sm:leading-6" placeholder="搜索"
+              sm:text-sm sm:leading-6 bg-tertiary-background" placeholder="搜索"
               onChange={(e) => EffThis.do_set_search(e.target.value)}
             />
           </div>
@@ -97,8 +97,8 @@ export default function SongListFilter({ props: [ filter_state, searchBox, EffTh
               </span>
             </div>
             <input type="text" className="block w-full rounded-xl border-0 
-            py-1.5 pl-10 pr-20 text-gray-900
-            ring-inset placeholder:text-gray-400 focus:outline-palette-7
+            py-1.5 pl-10 pr-20 text-gray-900 bg-tertiary-background
+            ring-inset placeholder:text-placeholder focus:outline-accent
             focus:ring-0 focus:ring-inset focus:ring-oen-color-1
             sm:text-sm sm:leading-6 text-sm" placeholder="搜索"
               onChange={(e) => EffThis.do_set_search(e.target.value)}
@@ -114,9 +114,9 @@ const LocalSongListBtn = ({ props: [ is_active, EffThis, ] }) => {
   return (
     <div className={`relative inline-flex justify-center gap-x-1.5
       rounded-xl text-sm shadow-sm ring-1 transition-all
-      ring-inset ring-gray-300 shrink-0
-      ${is_active ? 'bg-oen-color-1' : 'bg-white'}
-      ${is_active ? 'text-oen-color-9' : 'text-gray-900'}
+      ring-insetshrink-0
+      ${is_active ? 'bg-tertiary-background' : 'bg-tertiary-background'}
+      ${is_active ? 'text-accent' : 'text-label'}
       mr-2 mb-2
       `}
     >
@@ -140,9 +140,9 @@ function LanguageFilterBtn ({ props: [ is_active, lang, EffThis, ] }) {
   return (
     <div className={`relative inline-flex justify-center gap-x-1.5
          rounded-xl text-sm shadow-sm ring-1 mr-2 mb-2
-         ring-inset ring-gray-300 shrink-0
-         ${is_active ? 'bg-oen-color-1' : 'bg-white'}
-         ${is_active ? 'text-oen-color-9' : 'text-gray-900'}
+         ring-inset shrink-0
+          ${is_active ? 'bg-tertiary-background' : 'bg-tertiary-background'}
+          ${is_active ? 'text-accent' : 'text-label'}
          `}
     >
       <button type="button" className="justify-center
@@ -170,7 +170,7 @@ function RandomFilterBtn () {
   return (
     <div className="relative inline-flex justify-center gap-x-1.5
          rounded-xl text-sm shadow-sm ring-1 items-center
-         ring-inset ring-gray-300 bg-white mr-2 mb-2
+         ring-inset text-label bg-tertiary-background mr-2 mb-2
          shrink-0"
     >
       <button type="button" className="justify-center

diff --git a/components/SortButton.jsx b/components/SortButton.jsx
@@ -38,15 +38,15 @@ export default function SortBtn({ props: [
     <div className="relative inline-block text-left mr-2 mb-2 shrink-0">
       <div className={`relative inline-flex justify-center gap-x-1.5
          rounded-xl text-sm shadow-sm ring-1 
-         ring-inset ring-gray-300 hover:bg-gray-50
-         bg-white text-gray-900
+         ring-inset ring-gray-300 
+         bg-tertiary-background text-label
          `}
         ref={ref}
         onClick={() => {
           setIsOpen(!isOpen);
         }}
       >
-        <div className="relative flex items-center divide-x divide-solid divide-gray-300"
+        <div className="relative flex items-center divide-x divide-solid divide-secondary-label"
         >
           <button type="button" className="inline-flex items-center
             px-2 py-2 text-sm pr-4"
@@ -68,7 +68,7 @@ export default function SortBtn({ props: [
         <motion.div
           className='origin-top-right absolute left-0 mt-2 w-32 z-10 
           rounded-md shadow-lg 
-          bg-white ring-1 ring-black 
+          bg-tertiary-background ring-1 ring-black 
           ring-opacity-5 focus:outline-none 
           h-[10rem] overflow-y-auto' 
           role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabIndex="-1"
@@ -90,8 +90,8 @@ export default function SortBtn({ props: [
                     style={{
                       cursor: theme.cursor.pointer,
                     }}
-                    className={`block px-4 py-2 text-sm text-gray-700 
-                      ${option === filter_state.sorting_method ? 'bg-oen-color-1' : 'bg-white'}
+                    className={`block px-4 py-2 text-sm text-label
+                      ${option === filter_state.sorting_method ? 'bg-accent-oen/30' : 'bg-tertiary-background'}
                     `} 
                     role="menuitem" tabIndex="-1" id="menu-item-3"
                     key={option}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -56,7 +56,7 @@ module.exports = {
 
         'vr-bg-light': '#e5feee',
         'vr-fg-light': '#53e383',
-        
+
         'palette-1': '#E7E2E3', 
         'palette-2': '#E97365', 
         'palette-3': '#99C7F3', 
@@ -70,6 +70,16 @@ module.exports = {
 
         'label': '#7C9DB4',
         'secondary-label': '#94B4CE',
+        'tertiary-label': '#99C7F3',
+        'accent': '#70B9F2',
+        'accent-oen': '#87EAFF',
+        'accent-oen-2': '#DA5D77',
+        'extra': '#FBF2C6',
+        'extra-2': '#E97365',
+        'placeholder': '#E7E2E3',
+        'background': '#B3D6F6',
+        'secondary-background': '#F0F8FD',
+        'tertiary-background': '#FEFEFE',
 
         'platinum': { 
           DEFAULT: '#E7E2E3',