@playpilot/tpi 5.24.4 → 5.25.0-beta.theme.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.24.4",
+	"version": "5.25.0-beta.theme.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/scss/_functions.scss

@@ -1,3 +1,20 @@
+@use "sass:map";
+@use "sass:string";
+@use "sass:meta";
+
 @function margin($value) {
   @return 16px * $value;
 }
+
+@function theme($scope, $fallback: "") {
+  // If the given fallback value is a string we use a variable, if it's not, we use the value straight up.
+  // In some cases you might need use a quoted string to get a variable. `"green"` vs `green`.
+  // If the fallback value is not given at all we assume it's meant to be a variable straight up without fallback.
+  @if $fallback == "" {
+    @return var(--playpilot-#{$scope});
+  } @if meta.type-of($fallback) == "string" {
+    @return var(--playpilot-#{$scope}, var(--playpilot-#{$fallback}));
+  } @else {
+    @return var(--playpilot-#{$scope}, $fallback);
+  }
+}

package/src/lib/scss/_theme.scss

@@ -0,0 +1,38 @@
+@use "./_functions.scss" as *;
+
+$variables: (
+  // Colors
+  "primary": #fa548a,
+  "dark": #101426,
+  "light": #1b2743,
+  "lighter": #233257,
+  "content": #354367,
+  "content-light": #4b5b82,
+  "green": #53bca0,
+  "error": #ea5a5a,
+  "error-dark": #442533,
+  "warning": #f7c74e,
+  "warning-dark": #413c23,
+  "text-color": #fff,
+  "text-color-alt": #c8d4de,
+
+  // Sizing
+  "border-radius-small": margin(0.25),
+  "border-radius": margin(0.5),
+  "border-radius-large": margin(1),
+
+  // Fonts
+  "font-family": #{"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif},
+  "font-size-small": 12px,
+  "font-size-base": 14px,
+  "font-size-large": 16px,
+  "font-bold": 500,
+
+  // Other
+  "shadow": #{margin(0.2) margin(0.15) margin(0.15) rgba(0, 0, 0, 0.2)},
+  "shadow-large": #{
+    margin(0.15) margin(0.15) margin(0.2) rgba(0, 0, 0, 0.05),
+    margin(0.2) margin(0.35) margin(0.35) rgba(0, 0, 0, 0.1),
+    margin(0.1) margin(0.1) margin(0.75) rgba(0, 0, 0, 0.25),
+  }
+);

package/src/lib/scss/global.scss

@@ -1,4 +1,10 @@
-@use "./_functions" as *;
+@use "./theme";
+
+:root {
+  @each $name, $value in theme.$variables {
+    --playpilot-#{$name}: #{$value};
+  }
+}
 
 [data-playpilot-injection-key] {
   position: relative;

package/src/routes/+page.svelte

@@ -227,7 +227,6 @@
 <Consent onchange={start} />
 
 <style lang="scss">
-  @import url('$lib/scss/variables.scss');
   @import url('$lib/scss/global.scss');
 
   .playpilot-link-injections {

package/src/routes/components/Ads/Disclaimer.svelte

@@ -33,18 +33,18 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border: var(--playpilot-disclaimer-border, 2px solid rgba(255, 255, 255, 0.5));
+    border: theme(disclaimer-border, 2px solid rgba(255, 255, 255, 0.5));
     padding: margin(0.25);
     height: margin(1.25);
     width: margin(1.25);
     border-radius: 99px;
-    color: var(--playpilot-disclaimer-text-color, rgba(255, 255, 255, 0.75));
+    color: theme(disclaimer-text-color, text-color-alt);
     font-weight: bold;
     line-height: 1;
 
     &:hover {
-      border-color: var(--playpilot-disclaimer-hover-border-color, white);
-      color: var(--playpilot-disclaimer-hover-text-color, white);
+      border-color: theme(disclaimer-hover-border-color, text-color);
+      color: theme(disclaimer-hover-text-color, text-color);
     }
 
     &.small {
@@ -61,7 +61,7 @@
     padding: margin(0.25);
     background: transparent;
     border: 0;
-    color: var(--playpilot-disclaimer-tooltip-text-color, var(--playpilot-detail-text-color, white));
+    color: theme(disclaimer-tooltip-text-color, text-color);
     cursor: pointer;
   }
 
@@ -74,8 +74,8 @@
     width: calc(var(--width, 15rem) * 0.8);
     padding: margin(0.5);
     border-radius: margin(0.5);
-    background: var(--playpilot-disclaimer-tooltip-background, var(--playpilot-detail-background, var(--playpilot-content)));
-    box-shadow: var(--playpilot-shadow);
+    background: theme(disclaimer-tooltip-background, content);
+    box-shadow: theme(shadow);
     font-size: 12px;
     line-height: 1.1;
     text-align: right;

package/src/routes/components/Ads/Display.svelte

@@ -85,13 +85,13 @@
   .display {
     display: block;
     position: relative;
-    border-radius: var(--playpilot-display-ad-border-radius, margin(0.5));
+    border-radius: theme(display-ad-border-radius, border-radius);
     overflow: hidden;
     background: black;
     aspect-ratio: 16 / 9;
     color: white !important;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
-    font-family: var(--playpilot-detail-font-family, var(--playpilot-font-family));
+    font-family: theme(detail-font-family, font-family);
     line-height: 1.2;
     font-style: normal !important;
   }
@@ -137,7 +137,7 @@
   }
 
   .logo {
-    border-radius: var(--playpilot-display-ad-border-radius, margin(0.5));
+    border-radius: theme(display-ad-border-radius, border-radius);
   }
 
   .name {
@@ -151,12 +151,12 @@
   .action {
     margin-left: auto;
     padding: margin(0.5) margin(0.75);
-    background: var(--playpilot-display-ad-action-background, white);
-    border-radius: var(--playpilot-display-action-border-radius, margin(2));
+    background: theme(display-ad-action-background, white);
+    border-radius: theme(display-action-border-radius, margin(2));
     transition: transform 50ms;
     text-shadow: none;
-    font-weight: var(--playpilot-display-action-font-weight, 500);
-    color: var(--playpilot-display-action-text-color, black);
+    font-weight: theme(display-action-font-weight, 500);
+    color: theme(display-action-text-color, black);
     white-space: nowrap;
 
     &:hover {

package/src/routes/components/Ads/TopScroll.svelte

@@ -75,7 +75,7 @@
 </a>
 
 <style lang="scss">
-  $border-radius-size: var(--playpilot-top-scroll-border-radius, var(--playpilot-popover-border-radius, margin(1)));
+  $border-radius-size: theme(top-scroll-border-radius, border-radius-large);
 
   .top-scroll {
     position: relative;
@@ -83,9 +83,9 @@
     width: 100%;
     border-radius: $border-radius-size;
     background: black;
-    color: var(--playpilot-top-scroll-text-color, white);
-    font-family: var(--playpilot-top-scroll-font-family, var(--playpilot-detail-font-family, var(--playpilot-font-family)));
-    font-size: var(--playpilot-top-scroll-font-size, var(--playpilot-detail-font-size, 14px));
+    color: theme(top-scroll-text-color, white);
+    font-family: theme(top-scroll-font-family, font-family);
+    font-size: theme(top-scroll-font-size, font-size-base);
     text-decoration: none;
     line-height: 1.35;
 
@@ -103,7 +103,7 @@
     min-height: margin(4.5);
     padding: margin(0.25) margin(0.5);
     gap: margin(0.5);
-    color: var(--playpilot-top-scroll-text-color, white);
+    color: theme(top-scroll-text-color, white);
 
     .simple & {
       justify-content: center;
@@ -113,35 +113,35 @@
   }
 
   .logo {
-    border-radius: var(--playpilot-top-scroll-logo-border-radius, margin(0.5));
+    border-radius: theme(top-scroll-logo-border-radius, border-radius);
     background: black;
   }
 
   .tagline {
     margin: 0;
-    text-shadow: var(--playpilot-shadow);
+    text-shadow: theme(shadow);
   }
 
   .button {
     margin-left: auto;
     margin-right: margin(1);
     padding: margin(0.25) margin(0.5);
-    background: var(--playpilot-top-scroll-button-background, white);
+    background: theme(top-scroll-button-background, white);
     border: 0;
-    border-radius: var(--playpilot-top-scroll-button-border-radius, margin(0.25));
-    box-shadow: var(--playpilot-shadow);
-    color: var(--playpilot-top-scroll-button-text-color, black);
+    border-radius: theme(top-scroll-button-border-radius, border-radius-small);
+    box-shadow: theme(shadow);
+    color: theme(top-scroll-button-text-color, black);
     font-family: inherit;
     font-size: inherit;
     line-height: inherit;
 
     &:hover {
-      outline: margin(0.25) solid var(--playpilot-top-scroll-button-background, rgba(white, 0.35));
-      background: var(--playpilot-top-scroll-button-background, white);
+      outline: margin(0.25) solid theme(top-scroll-button-background, rgba(white, 0.35));
+      background: theme(top-scroll-button-background, white);
     }
 
     &:active {
-      background: var(--playpilot-top-scroll-button-background, white);
+      background: theme(top-scroll-button-background, white);
     }
   }
 

package/src/routes/components/ContextMenu.svelte

@@ -46,7 +46,7 @@
     border: 0;
     border-radius: margin(0.25);
     background: transparent;
-    color: var(--playpilot-text-color-alt);
+    color: theme(text-color-alt);
 
     &:hover {
       cursor: pointer;
@@ -65,6 +65,6 @@
     right: 0;
     max-width: margin(15);
     border-radius: margin(0.5);
-    background: var(--playpilot-lighter);
+    background: theme(lighter);
   }
 </style>

package/src/routes/components/Debugger.svelte

@@ -122,26 +122,26 @@
 
 <style lang="scss">
   summary {
-    color: var(--playpilot-primary);
+    color: theme(primary);
     font-weight: bold;
   }
 
   hr {
-    border-color: var(--playpilot-primary);
+    border-color: theme(primary);
   }
 
   button {
     cursor: pointer;
     padding: margin(0.5);
-    border: 1px solid var(--playpilot-primary);
+    border: 1px solid theme(primary);
     background: transparent;
-    color: var(--playpilot-primary);
+    color: theme(primary);
     font-family: inherit;
     font-weight: bold;
 
     &:hover {
       color: black;
-      background: var(--playpilot-primary);
+      background: theme(primary);
     }
   }
 
@@ -153,12 +153,12 @@
     max-width: 70dvw;
     max-height: 50dvh;
     padding: margin(1);
-    border: 1px solid var(--playpilot-primary);
+    border: 1px solid theme(primary);
     background: black;
     overflow: auto;
     color: white;
     font-family: "Consolas", monospace;
-    color: var(--playpilot-primary);
+    color: theme(primary);
   }
 
   .item {

package/src/routes/components/Description.svelte

@@ -38,8 +38,8 @@
     padding: 0;
     background: transparent;
     border: 0;
-    color: var(--playpilot-read-more-text-color, var(--playpilot-text-color-alt));
-    font-weight: var(--playpilot-read-more-font-weight, inherit);
+    color: theme(read-more-text-color, text-color-alt);
+    font-weight: theme(read-more-font-weight, inherit);
     font-family: inherit;
     font-size: inherit;
 

package/src/routes/components/Editorial/AIIndicator.svelte

@@ -87,14 +87,14 @@
     position: relative;
     display: flex;
     gap: margin(0.5);
-    background: var(--playpilot-light);
+    background: theme(light);
     padding: margin(0.5);
     margin: 2px;
     border-radius: 0.5rem;
     font-size: 12px;
     line-height: 1.5;
     z-index: 1;
-    color: var(--playpilot-text-color-alt);
+    color: theme(text-color-alt);
     overflow: hidden;
   }
 
@@ -105,7 +105,7 @@
   }
 
   .icon {
-    color: var(--playpilot-green);
+    color: theme(green);
   }
 
   .border {
@@ -115,12 +115,12 @@
     bottom: 0;
     left: 0;
     border-radius: 0.5rem;
-    background: var(--playpilot-green);
+    background: theme(green);
     overflow: hidden;
     transition: background-color 500ms;
 
     .running & {
-      background: var(--playpilot-light);
+      background: theme(light);
     }
   }
 
@@ -137,7 +137,7 @@
     transform: translateY(-50%);
     width: 100%;
     height: 20rem;
-    background: var(--playpilot-green);
+    background: theme(green);
     transform-origin: left 50%;
     animation: rotate 2000ms infinite linear;
     filter: blur(5rem);
@@ -152,13 +152,13 @@
   .loading-bar-progress {
     height: 0.5em;
     border-radius: 0.25rem;
-    background: var(--playpilot-dark);
+    background: theme(dark);
   }
 
   .loading-bar-fill {
     height: 100%;
     border-radius: 0.25rem;
-    background: var(--playpilot-green);
+    background: theme(green);
     transition: width 200ms;
   }
 
@@ -194,18 +194,18 @@
     appearance: none;
     margin-top: margin(0.25);
     padding: margin(0.25);
-    border: 2px solid var(--playpilot-content-light);
+    border: 2px solid theme(content-light);
     border-radius: margin(0.25);
-    background: var(--playpilot-light);
+    background: theme(light);
     font-family: inherit;
-    color: var(--playpilot-text-color-alt);
+    color: theme(text-color-alt);
     font-size: margin(0.75);
     line-height: 1;
     cursor: pointer;
 
     &:hover {
-      background: var(--playpilot-content-light);
-      color: var(--playpilot-text-color);
+      background: theme(content-light);
+      color: theme(text-color);
     }
   }
 </style>

package/src/routes/components/Editorial/Alert.svelte

@@ -18,14 +18,14 @@
   .alert {
     padding: margin(0.5);
     border-radius: margin(0.5);
-    border: 1px solid var(--playpilot-error);
-    background: var(--playpilot-error-dark);
+    border: 1px solid theme(error);
+    background: theme(error-dark);
     font-size: margin(0.75);
-    font-family: var(--playpilot-font-family);
+    font-family: theme(font-family);
 
     &.warning {
-      border-color: var(--playpilot-warning);
-      background: var(--playpilot-warning-dark);
+      border-color: theme(warning);
+      background: theme(warning-dark);
     }
 
     &.fixed {

package/src/routes/components/Editorial/DragHandle.svelte

@@ -119,7 +119,7 @@
       bottom: 60%;
       left: 0;
       border-radius: margin(1);
-      background: var(--playpilot-text-color);
+      background: theme(text-color);
       opacity: 0.15;
       transition: opacity 100ms, transform 50ms;
     }

package/src/routes/components/Editorial/Editor.svelte

@@ -239,7 +239,14 @@
 </section>
 
 <style lang="scss">
+  @use "lib/scss/_theme";
+
   .editor {
+    // Reset any possible theme overrides back to their defaults
+    @each $name, $value in theme.$variables {
+      --playpilot-#{$name}: #{$value};
+    }
+
     z-index: 2147483646; // 1 less than as high as she goes;
     display: flex;
     flex-direction: column;
@@ -253,10 +260,10 @@
     margin: 0;
     padding: margin(1);
     border-radius: margin(1.5);
-    background: var(--playpilot-dark);
-    box-shadow: var(--playpilot-shadow-large);
-    color: var(--playpilot-text-color);
-    font-family: var(--playpilot-font-family);
+    background: theme(dark);
+    box-shadow: theme(shadow-large);
+    color: theme(text-color);
+    font-family: theme(font-family);
     transition: border-radius 100ms;
     overflow-y: auto;
     overflow-x: hidden;
@@ -273,7 +280,7 @@
     border-radius: margin(2);
     margin-left: auto;
     padding-right: margin(0.5);
-    color: var(--playpilot-text-color-alt);
+    color: theme(text-color-alt);
     font-size: margin(0.85);
   }
 
@@ -301,7 +308,7 @@
     padding: margin(1) margin(1) margin(1) margin(1.5);
     margin: 0 margin(-1) 0;
     border: 0;
-    background: var(--playpilot-dark);
+    background: theme(dark);
 
     .loading & {
       margin: margin(-1);
@@ -310,7 +317,7 @@
 
   .heading {
     margin: 0 margin(0.75) 0 0;
-    color: var(--playpilot-text-color);
+    color: theme(text-color);
     font-size: margin(1.25);
     font-weight: normal;
     line-height: normal;
@@ -324,7 +331,7 @@
     padding: 0;
     margin-right: auto;
     border-radius: 50%;
-    background: var(--playpilot-green);
+    background: theme(green);
     line-height: margin(1.5);
     text-align: center;
     font-size: margin(0.85);
@@ -339,7 +346,7 @@
     padding: margin(0.5);
     font-size: margin(0.85);
     font-style: italic;
-    color: var(--playpilot-text-color-alt);
+    color: theme(text-color-alt);
   }
 
   .save {
@@ -353,23 +360,23 @@
     padding: margin(0.5);
     border: 0;
     border-radius: margin(2);
-    background: var(--playpilot-content);
-    box-shadow: 0 0 margin(1) margin(1) var(--playpilot-dark);
+    background: theme(content);
+    box-shadow: 0 0 margin(1) margin(1) theme(dark);
     transition: opacity 100ms;
     font-family: inherit;
-    color: var(--playpilot-text-color-alt);
+    color: theme(text-color-alt);
     font-size: margin(0.85);
     cursor: pointer;
 
     &:hover {
-      background: var(--playpilot-content-light);
-      color: var(--playpilot-text-color);
+      background: theme(content-light);
+      color: theme(text-color);
     }
 
     &[disabled] {
       opacity: 0.75;
-      background: var(--playpilot-light);
-      color: var(--playpilot-content-light);
+      background: theme(light);
+      color: theme(content-light);
     }
   }
 
@@ -389,7 +396,7 @@
     width: 100%;
     height: 100%;
     padding: margin(1.5);
-    background: var(--playpilot-dark);
+    background: theme(dark);
     overflow-y: auto;
   }
 </style>

package/src/routes/components/Editorial/EditorItem.svelte

@@ -177,19 +177,19 @@
 <style lang="scss">
   .item {
     padding: margin(1) margin(0.5) margin(1) margin(0.5);
-    border-bottom: 1px solid var(--playpilot-lighter);
+    border-bottom: 1px solid theme(lighter);
     transition: outline-offset 100ms;
 
     &:hover,
     &.highlighted {
       border-radius: margin(0.5);
       border-color: transparent;
-      outline: 2px solid var(--playpilot-content);
+      outline: 2px solid theme(content);
       outline-offset: 1px;
     }
 
     &.highlighted {
-      outline: 2px solid var(--playpilot-primary);
+      outline: 2px solid theme(primary);
     }
   }
 
@@ -204,7 +204,7 @@
     width: margin(2);
     height: margin(3);
     border-radius: margin(0.25);
-    background: var(--playpilot-content);
+    background: theme(content);
 
     .inactive & {
       opacity: 0.35;
@@ -220,11 +220,11 @@
     font-size: 0.7em;
     line-height: 150%;
     margin-right: margin(-0.5);
-    color: var(--playpilot-text-color-alt);
+    color: theme(text-color-alt);
     opacity: 0.75;
 
     :global(em) {
-      color: var(--playpilot-text-color);
+      color: theme(text-color);
       font-weight: bold;
     }
   }
@@ -244,7 +244,7 @@
     text-decoration: underline;
 
     &:hover {
-      color: var(--playpilot-text-color);
+      color: theme(text-color);
     }
   }
 
@@ -271,12 +271,12 @@
     text-align: left;
     font-family: inherit;
     white-space: nowrap;
-    color: var(--playpilot-text-color-alt);
+    color: theme(text-color-alt);
     cursor: pointer;
 
     &:hover {
-      color: var(--playpilot-text-color);
-      background-color: var(--playpilot-content-light);
+      color: theme(text-color);
+      background-color: theme(content-light);
     }
 
     &:first-child {
@@ -304,9 +304,9 @@
     height: margin(1.5);
     border: 0;
     border-radius: 50%;
-    background: var(--playpilot-content);
-    color: var(--playpilot-text-color);
-    box-shadow: var(--playpilot-shadow);
+    background: theme(content);
+    color: theme(text-color);
+    box-shadow: theme(shadow);
     cursor: pointer;
 
     &:hover {
@@ -326,7 +326,7 @@
     margin-bottom: margin(0.25);
     opacity: 0.75;
     font-size: margin(0.675);
-    color: var(--playpilot-text-color-alt);
+    color: theme(text-color-alt);
   }
 
   .offset {

package/src/routes/components/Editorial/EditorTrigger.svelte

@@ -35,8 +35,8 @@
     border: 0;
     padding: margin(0.75);
     border-radius: 50%;
-    background: var(--playpilot-light);
-    box-shadow: var(--playpilot-shadow-large);
+    background: theme(light);
+    box-shadow: theme(shadow-large);
     transition: transform 50ms;
     line-height: margin(1.5);
     text-align: center;
@@ -62,7 +62,7 @@
     width: margin(1.5);
     height: margin(1.5);
     padding: margin(0.25);
-    background: var(--playpilot-content);
+    background: theme(content);
     color: white;
 
     :global(svg) {