Update styles

src/renderer/styles/ag-grid.scss

@@ -1,8 +0,0 @@
-.ag-theme-alpine-dark {
-  --ag-borders: none;
-  --ag-background-color: #101010;
-  --ag-odd-row-background-color: #1d1d1d;
-  --ag-font-size: 12px;
-  --ag-foreground-color: #ffffff;
-  --ag-font-family: Poppins;
-}

src/renderer/styles/fonts.ts

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 
 export enum Font {
   EPILOGUE = 'Epilogue',

src/renderer/styles/global.scss

@@ -1,5 +1,6 @@
 @use '../themes/default.scss';
 @use '../themes/dark.scss';
+@use '../themes/light.scss';
 
 * {
   box-sizing: border-box;
@@ -47,6 +48,10 @@ html {
   height: 8px;
 }
 
+::-webkit-scrollbar-corner {
+  background: var(--scrollbar-track-bg);
+}
+
 ::-webkit-scrollbar-track {
   background: var(--scrollbar-track-bg);
 }
@@ -173,3 +178,17 @@ a {
   font-family: 'Work Sans';
   src: url('../fonts/WorkSans-Regular.ttf') format('truetype');
 }
+
+@font-face {
+  font-family: 'DroidSerif';
+  src: url('https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf')
+    format('truetype');
+  unicode-range: U+000-5FF; /* Latin glyphs */
+}
+
+@font-face {
+  font-family: 'DroidSerif';
+  src: url('https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2')
+    format('truetype');
+  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
+}

src/renderer/styles/mixins.ts

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 
 export const textEllipsis = css`
   overflow: hidden;

src/renderer/themes/default.scss

@@ -1,15 +1,24 @@
+@use 'sass:color' as color;
+
 :root {
-  --icon-color: #ffffff;
+  --label-font-family: Poppins, sans-serif;
 
-  --primary-color: #3a81ed;
+  --icon-color: rgb(255, 255, 255);
-  --secondary-color: #c7648d;
 
-  --content-bg: #181819;
+  --primary-color: rgb(58, 129, 237);
-  --content-text-color: #c1c2bb;
+  --secondary-color: rgb(199, 100, 141);
+  --success-color: green;
+  --warning-color: orange;
+  --danger-color: red;
+  --generic-border-color: rgba(50, 50, 50, 0.7);
 
-  --titlebar-bg: #1d1d1d;
+  --main-bg: rgb(24, 24, 25);
+  --main-fg: rgb(193, 194, 187);
 
-  --sidebar-bg: #101010;
+  --titlebar-fg: rgb(255, 255, 255);
+  --titlebar-bg: rgb(29, 29, 29);
+
+  --sidebar-bg: rgb(16, 16, 16);
   --sidebar-btn-color: #b3b3b3;
   --sidebar-btn-color-hover: #dddddd;
   --sidebar-handle-bg: #4d4d4d;
@@ -23,9 +32,51 @@
   --playerbar-slider-track-bg: #3c3f43;
   --playerbar-slider-track-progress-bg: #cccccc;
 
+  --grid-card-bg: rgb(24, 24, 24);
+
   --tooltip-bg: #ffffff;
   --tooltip-text-color: #000000;
 
   --scrollbar-track-bg: #181818;
   --scrollbar-thumb-bg: #5a5a5a;
+
+  --btn-primary-bg: var(--primary-color);
+  --btn-primary-bg-hover: rgb(47, 122, 237);
+  --btn-primary-fg: #ffffff;
+  --btn-primary-fg-hover: #ffffff;
+
+  --btn-default-bg: rgb(41, 41, 41);
+  --btn-default-bg-hover: color.scale(var(--btn-default-bg), $lightness: 15%);
+  --btn-default-fg: rgb(193, 193, 193);
+  --btn-default-fg-hover: rgb(193, 193, 193);
+
+  --btn-subtle-bg: transparent;
+  --btn-subtle-bg-hover: rgba(100, 100, 100, 0.5);
+  --btn-subtle-fg: rgb(119, 126, 139);
+  --btn-subtle-fg-hover: rgb(200, 200, 200);
+
+  --dropdown-menu-bg: rgb(24, 24, 24);
+  --dropdown-menu-fg: rgb(193, 194, 197);
+
+  --toast-title-fg: rgb(255, 255, 255);
+  --toast-description-fg: rgb(193, 194, 197);
+  --toast-bg: rgb(16, 16, 16);
+
+  .ag-theme-alpine-dark {
+    --ag-borders: none;
+    --ag-background-color: #101010;
+    --ag-odd-row-background-color: #101010;
+    --ag-font-size: 12px;
+    --ag-foreground-color: #ffffff;
+    --ag-font-family: Poppins;
+  }
+
+  .ag-header-cell-label {
+    font-family: Montserrat;
+    text-transform: uppercase;
+  }
+
+  .current-song {
+    background: rgba(0, 50, 150, 0.2) !important;
+  }
 }