Merge 94bff27b1890fb0cc22a0c6a5786e449de96c92f into 23f3556371321faf199866989b906f2ef06a8034

Add Catppuccin Latte (the light version) theme based on the existing Catppuccin Macchiato theme.
The palette and player styling are adapted for light mode while staying as close as practical
to the existing Macchiato theme behavior. I've opted to use gray for the
color for controls.

The dark version appears to mix a few control/accent colors,
so for Latte I standardized those choices. This might be worth looking
into in a separate PR. It uses gray and blue.

Signed-off-by: Love Billenius <lovebillenius@disroot.org>

ui/src/themes/catppuccinLatte.css.js

@@ -0,0 +1,203 @@
+const stylesheet = `
+  .react-jinke-music-player-main.light-theme svg,
+  .react-jinke-music-player .music-player-controller,
+  .react-jinke-music-player .audio-circle-process-bar circle[class='stroke'] {
+    color: #6c6f85;
+    stroke: #6c6f85;
+  }
+
+  .react-jinke-music-player-main svg:active,
+  .react-jinke-music-player-main svg:hover {
+    color: #7c7f93;
+  }
+
+  .react-jinke-music-player-main.light-theme svg:active,
+  .react-jinke-music-player-main.light-theme svg:hover {
+    color: #7c7f93;
+  }
+
+  .react-jinke-music-player-mobile-play-model-tip,
+  .react-jinke-music-player-main.light-theme .play-mode-title {
+    background-color: #6c6f85;
+    color: #eff1f5;
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle,
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
+    background-color: #6c6f85;
+  }
+
+  .react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: #6c6f85;
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #6c6f85;
+  }
+
+  .react-jinke-music-player-main .audio-item.playing svg {
+    color: #6c6f85;
+  }
+
+  .react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #6c6f85 !important;
+  }
+
+  .react-jinke-music-player-main .loading svg {
+    color: #6c6f85 !important;
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+    border: hidden;
+    box-shadow:
+      rgba(76, 79, 105, 0.12) 0px 4px 6px,
+      rgba(76, 79, 105, 0.08) 0px 5px 7px;
+  }
+
+  .rc-slider-rail,
+  .rc-slider-track {
+    height: 6px;
+  }
+
+  .rc-slider {
+    padding: 3px 0;
+  }
+
+  .react-jinke-music-player-main.light-theme .rc-switch-checked {
+    background-color: #6c6f85 !important;
+    border: 1px solid #6c6f85;
+  }
+
+  .sound-operation > div:nth-child(4) {
+    transform: translateX(-50%) translateY(5%) !important;
+  }
+
+  .sound-operation {
+    padding: 4px 0;
+  }
+
+  .react-jinke-music-player-main .music-player-panel {
+    background-color: #e6e9ef;
+    color: #4c4f69;
+    box-shadow: 0 0 8px rgba(76, 79, 105, 0.15);
+  }
+
+  .react-jinke-music-player-main.light-theme .music-player-panel {
+    color: #4c4f69;
+  }
+
+  .audio-lists-panel {
+    background-color: #e6e9ef;
+    bottom: 6.25rem;
+    box-shadow:
+      rgba(76, 79, 105, 0.12) 0px 4px 6px,
+      rgba(76, 79, 105, 0.08) 0px 5px 7px;
+  }
+
+  .audio-lists-panel-content .audio-item.playing {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  .audio-lists-panel-content .audio-item:nth-child(2n+1) {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
+    background-color: rgba(76, 79, 105, 0.08);
+  }
+
+  .audio-lists-panel-header {
+    border-bottom: 1px solid #ccd0da;
+    box-shadow: none;
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
+    background-color: rgba(0, 0, 0, 0);
+    box-shadow: 0 0 0 0;
+  }
+
+  .react-jinke-music-player-main.light-theme .audio-lists-panel-header {
+    background-color: #e6e9ef;
+    color: #4c4f69;
+  }
+
+  .audio-lists-panel-content .audio-item {
+    line-height: 32px;
+    color: #4c4f69;
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+    box-shadow:
+      rgba(76, 79, 105, 0.12) 0px 4px 6px,
+      rgba(76, 79, 105, 0.08) 0px 5px 7px;
+  }
+
+  .react-jinke-music-player-main .music-player-lyric {
+    color: #6c6f85; /* subtext0 */
+    -webkit-text-stroke: 0.35px #eff1f5;
+    font-weight: bolder;
+  }
+
+  .react-jinke-music-player-main .lyric-btn-active,
+  .react-jinke-music-player-main .lyric-btn-active svg {
+    color: #6c6f85 !important;
+  }
+
+  .audio-lists-panel-content .audio-item.playing,
+  .audio-lists-panel-content .audio-item.playing svg {
+    color: #6c6f85;
+  }
+
+  .audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg,
+  .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
+    color: #6c6f85;
+  }
+
+  .audio-lists-panel-content .audio-item .player-icons {
+    scale: 75%;
+  }
+
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
+    background-color: #dce0e8; /* surface1 */
+  }
+
+  /* Mobile */
+  .react-jinke-music-player-mobile-cover {
+    border: none;
+    box-shadow:
+      rgba(76, 79, 105, 0.12) 0px 4px 6px,
+      rgba(76, 79, 105, 0.08) 0px 5px 7px;
+  }
+
+  .react-jinke-music-player .music-player-controller {
+    border: none;
+    background-color: #e6e9ef;
+    border-color: #e6e9ef;
+    box-shadow:
+      rgba(76, 79, 105, 0.12) 0px 4px 6px,
+      rgba(76, 79, 105, 0.08) 0px 5px 7px;
+    color: #6c6f85;
+  }
+
+  .react-jinke-music-player .music-player-controller.music-player-playing:before {
+    border: 1px solid rgba(76, 79, 105, 0.18);
+  }
+
+  .react-jinke-music-player .music-player-controller .music-player-controller-setting {
+    background: rgba(108, 111, 133, 0.2);
+    color: #eff1f5;
+  }
+
+  .react-jinke-music-player-mobile-progress .rc-slider-handle,
+  .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #6c6f85;
+  }
+
+  .react-jinke-music-player-mobile-progress .rc-slider-handle {
+    border: none;
+  }
+`
+
+export default stylesheet

ui/src/themes/catppuccinLatte.js

@@ -0,0 +1,104 @@
+import stylesheet from './catppuccinLatte.css.js'
+
+export default {
+  themeName: 'Catppuccin Latte',
+  palette: {
+    primary: { main: '#8839ef' }, // mauve
+    secondary: {
+      main: '#ccd0da', // surface0
+      contrastText: '#4c4f69', // text
+    },
+    type: 'light',
+    background: {
+      default: '#eff1f5', // base
+    },
+  },
+
+  overrides: {
+    MuiPaper: {
+      root: {
+        color: '#4c4f69', // text
+        backgroundColor: '#e6e9ef', // mantle
+      },
+    },
+
+    MuiButton: {
+      textPrimary: {
+        color: '#1e66f5', // blue
+      },
+      textSecondary: {
+        color: '#4c4f69', // text
+      },
+    },
+
+    MuiChip: {
+      clickable: {
+        background: '#ccd0da', // surface0
+      },
+    },
+
+    MuiFormGroup: {
+      root: {
+        color: '#4c4f69',
+      },
+    },
+
+    MuiFormHelperText: {
+      root: {
+        Mui: {
+          error: {
+            color: '#d20f39', // red
+          },
+        },
+      },
+    },
+
+    MuiTableHead: {
+      root: {
+        color: '#4c4f69',
+        background: '#e6e9ef',
+      },
+    },
+
+    MuiTableCell: {
+      root: {
+        color: '#4c4f69',
+        background: '#e6e9ef !important',
+      },
+      head: {
+        color: '#4c4f69',
+        background: '#e6e9ef !important',
+      },
+    },
+
+    NDLogin: {
+      systemNameLink: {
+        color: '#8839ef', // mauve
+      },
+      icon: {},
+      welcome: {
+        color: '#4c4f69',
+      },
+      card: {
+        minWidth: 300,
+        background: '#eff1f5',
+      },
+      avatar: {},
+      button: {
+        boxShadow: '3px 3px 5px #ccd0da',
+      },
+    },
+
+    NDMobileArtistDetails: {
+      bgContainer: {
+        background:
+          'linear-gradient(to bottom, rgba(255 255 255 / 72%), rgb(239 241 245))!important',
+      },
+    },
+  },
+
+  player: {
+    theme: 'light',
+    stylesheet,
+  },
+}

ui/src/themes/index.js

@@ -9,6 +9,7 @@ import ElectricPurpleTheme from './electricPurple'
 import NordTheme from './nord'
 import GruvboxDarkTheme from './gruvboxDark'
 import CatppuccinMacchiatoTheme from './catppuccinMacchiato'
+import CatppuccinLatteTheme from './catppuccinLatte'
 import DraculaTheme from './dracula'
 import NuclearTheme from './nuclear'
 import NutballTheme from './nutball'
@@ -24,6 +25,7 @@ export default {
   // New themes should be added here, in alphabetic order
   AmusicTheme,
   CatppuccinMacchiatoTheme,
+  CatppuccinLatteTheme,
   DraculaTheme,
   ElectricPurpleTheme,
   ExtraDarkTheme,