Set up a style provider

music-player/client/src/StyleProvider.ts

@@ -0,0 +1,13 @@
+const colorGrey100 = "hsl(240 10% 95%)";
+
+export class StyleProvider {
+    styles: Record<string, string> = {};
+
+    constructor() {
+        this.styles["backgroundColorLight"] = colorGrey100;
+    }
+
+    get(key: string) {
+        return this.styles[key]
+    }
+}

music-player/client/src/components/NowPlaying/NowPlaying.ts

@@ -1,4 +1,4 @@
-import { TextField } from "./TextField";
+import { TextField } from "../TextField/TextField";
 
 export class NowPlaying extends HTMLElement {
   onStop: () => void;

music-player/client/src/components/TrackCard/TrackCard.ts

@@ -1,4 +1,15 @@
-import { TextField } from "./TextField";
+import { TextField } from "../TextField/TextField";
+import { StyleProvider } from "../../StyleProvider";
+
+const style = `
+.track-card {
+    display: grid;
+    gap: 4px 4px;
+    border: 1px solid $border-color;
+    background-color: $background-color-light;
+    box-shadow: $elevation-low;
+}
+`;
 
 export class TrackCard extends HTMLElement {
   trackNumberContainer: TextField;
@@ -6,14 +17,17 @@ export class TrackCard extends HTMLElement {
   albumContainer: TextField;
   artistContainer: TextField;
   durationContainer: TextField;
+  styleProvider: StyleProvider;
 
   static get observedAttributes() {
     return ["trackId", "trackNumber", "name", "album", "artist", "duration"];
   }
 
-  constructor() {
+  constructor(styleProvider: StyleProvider) {
     super();
 
+    this.styleProvider = styleProvider
+
     this.trackNumberContainer = document.createElement("text-field");
 
     this.nameContainer = document.createElement("text-field");
@@ -100,6 +114,11 @@ export class TrackCard extends HTMLElement {
   connectedCallback() {
     const container = document.createElement("data-card");
     container.classList.add("track-card");
+    container.style.setProperty("display", "grid");
+    container.style.setProperty("gap", "4px 4px");
+    container.style.setProperty("border", "1px solid --border-color");
+    container.style.setProperty("background-color", this.styleProvider.get("backgroundColorLight"));
+    container.style.setProperty("box-shadow", "$elevation-low");
 
     // this.appendChild(this.trackNumberContainer);
     container.appendChild(this.nameContainer);

music-player/client/src/main.ts

@@ -1,10 +1,11 @@
 import * as _ from "lodash";
 import { TrackInfo, getTracks, playTrack, stopPlayback } from "./client";
-import { DataCard } from "./components/DataCard";
+import { DataCard } from "./components/DataCard/DataCard";
-import { NowPlaying } from "./components/NowPlaying";
+import { NowPlaying } from "./components/NowPlaying/NowPlaying";
-import { TextField } from "./components/TextField";
+import { TextField } from "./components/TextField/TextField";
-import { TrackCard } from "./components/TrackCard";
+import { TrackCard } from "./components/TrackCard/TrackCard";
-import { PlaylistRow } from "./components/PlaylistRow";
+import { PlaylistRow } from "./components/PlaylistRow/PlaylistRow";
+import { StyleProvider } from "./StyleProvider";
 
 window.customElements.define("data-card", DataCard);
 window.customElements.define("now-playing", NowPlaying);
@@ -24,9 +25,11 @@ declare global {
 
 const updateTrackList = (tracks: TrackInfo[]) => {
   const playlist = document.querySelector(".track-list__tracks");
+  const styleProvider = new StyleProvider();
   if (playlist) {
     _.map(tracks, (info) => {
       let card: TrackCard = document.createElement("track-card");
+      card.styleProvider = styleProvider;
       let listItem: PlaylistRow = document.createElement("playlist-row");
 
       card.trackId = info.id;