app: Add some default css variables

evanpurkhiser · Dec 14, 2020 · 0f81e16 · 0f81e16
1 parent e6c51a3
commit 0f81e16
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/src/overlay/overlays/nowPlaying/ThemeAsot.tsx b/src/overlay/overlays/nowPlaying/ThemeAsot.tsx
@@ -14,6 +14,15 @@ type OrientedMotionDivProps = MotionDivProps & {
   alignRight?: boolean;
 };
 
+const defaultColors = {
+  '--pt-np-primary-text': '#fff',
+  '--pt-np-indicator-highlight': '#f00',
+  '--pt-np-indicator-text': '#fff',
+};
+
+const cssVar = (name: keyof typeof defaultColors) =>
+  `var(${name}, ${defaultColors[name]})`;
+
 const Text = styled(motion.div)`
   display: block;
   line-height: 1.1;
@@ -76,8 +85,8 @@ const NowPlayingLabel = styled(motion.div)`
     left: 0;
     bottom: 0;
     right: 0;
-    color: #fff;
-    background: #ff0000;
+    color: ${cssVar('--pt-np-indicator-text')};
+    background: ${cssVar('--pt-np-indicator-highlight')};
     position: absolute;
     clip-path: inset(0% var(--expose-front) 0% 0%);
   }
@@ -182,7 +191,7 @@ const TrackContainer = styled(motion.div)<{alignRight?: boolean}>`
   display: flex;
   flex-direction: column;
   grid-gap: 0.5rem;
-  color: #fff;
+  color: ${cssVar('--pt-np-primary-text')};
   font-family: 'Proxmia Nova';
   font-size: 2rem;
   text-rendering: optimizeLegibility;
@@ -254,5 +263,6 @@ const CurrentWrapper = styled('div')`
 export default {
   label: 'A State of Overlays',
   component: ThemeAsot,
+  colors: defaultColors,
   enabledConfigs: ['alignRight', 'tags'],
 } as ThemeDescriptor;
diff --git a/src/overlay/overlays/nowPlaying/ThemeModern.tsx b/src/overlay/overlays/nowPlaying/ThemeModern.tsx
@@ -22,6 +22,17 @@ type OrientedMotionDivProps = MotionDivProps & {
   alignRight?: boolean;
 };
 
+const defaultColors = {
+  '--pt-np-primary-text': '#fff',
+  '--pt-np-primary-bg': 'rgba(0, 0, 0, 0.25)',
+  '--pt-np-empty-attrs-text': 'rgba(255, 255, 255, 0.6)',
+  '--pt-np-empty-art-bg': '#28272b',
+  '--pt-np-empty-art-icon': '#aaa',
+};
+
+const cssVar = (name: keyof typeof defaultColors) =>
+  `var(${name}, ${defaultColors[name]})`;
+
 const MissingArtwork = styled((p: MotionDivProps) => (
   <motion.div {...p}>
     <Disc size="50%" />
@@ -30,8 +41,8 @@ const MissingArtwork = styled((p: MotionDivProps) => (
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #28272b;
-  color: #aaa;
+  background: ${cssVar('--pt-np-empty-art-bg')};
+  color: ${cssVar('--pt-np-empty-art-icon')};
   opacity: 1;
 `;
 
@@ -78,7 +89,7 @@ Artwork.defaultProps = {
 };
 
 const Text = styled(motion.div)`
-  background: rgba(0, 0, 0, 0.25);
+  background: ${cssVar('--pt-np-primary-bg')};
   padding: 0 0.28em;
   border-radius: 1px;
   display: inline-block;
@@ -172,7 +183,7 @@ const Attribute = ({icon, text, ...p}: AttributeProps) =>
 const NoAttributes = styled(p => (
   <Attribute text="No Release Metadata" icon={X} {...p} />
 ))`
-  color: rgba(255, 255, 255, 0.6);
+  color: ${cssVar('--pt-np-empty-attrs-text')};
 `;
 
 const MetadataWrapper = styled((p: OrientedMotionDivProps) => {
@@ -264,7 +275,7 @@ const FullTrack = ({played, firstPlayed, hideArtwork, ...props}: BaseTrackProps)
 const TrackContainer = styled(motion.div)<{alignRight?: boolean}>`
   display: inline-grid;
   grid-gap: 0.5rem;
-  color: #fff;
+  color: ${cssVar('--pt-np-primary-text')};
   font-family: Ubuntu;
   justify-content: ${p => (p.alignRight ? 'right' : 'left')};
   grid-template-columns: ${p =>
@@ -411,5 +422,6 @@ const CurrentWrapper = styled('div')`
 export default {
   label: 'Track List',
   component: ThemeModern,
+  colors: defaultColors,
   enabledConfigs: ['alignRight', 'hideArtwork', 'historyCount', 'tags'],
 } as ThemeDescriptor;
diff --git a/src/overlay/overlays/nowPlaying/index.tsx b/src/overlay/overlays/nowPlaying/index.tsx
@@ -65,6 +65,10 @@ export type ThemeDescriptor = {
    * The component used to render the 'now playing' indicator
    */
   component: React.ComponentType<ThemeComponentProps>;
+  /**
+   * Defaults for CSS variables to allow for color customization
+   */
+  colors: Record<string, string>;
   /**
    * Enabled settings for this theme
    */