theme cleanup

assets/js/hooks/Mapper/components/map/Map.module.scss

@@ -1,8 +1,11 @@
 .MapRoot {
   width: 100%;
   height: 100%;
-}
 
-.BackgroundAlternateColor {
+  background-color: var(--rf-bg-color, #000000);
-  background-color: var(--rf-soft-bg-color, #2f2f2f);
+
+  &.BackgroundAlternateColor {
+    background-color: var(--rf-soft-bg-color, #171717);
+    --rf-node-bg-color: var(--rf-node-soft-bg-color, #2b2b2b);
+  }
 }

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.module.scss

@@ -1,12 +1,16 @@
 @import '@/hooks/Mapper/components/map/styles/eve-common-variables';
 
 .RootCustomNode {
+  background-color: var(--rf-node-bg-color, #202020) !important;
   position: relative;
   z-index: 1;
   overflow: hidden;
+  font-weight: var(--rf-node-font-weight, bold);
+  color: var(--rf-text-color, #ffffff);
+  font-family: var(--rf-node-font, inherit);
 }
 
-/* Region backgrounds */
+/* Region backgrounds for optional tinted headers, etc. */
 .Mataria,
 .Amarria,
 .Gallente,
@@ -47,23 +51,29 @@
   background-position-y: 0;
 }
 
-/* Node selected styling */
 .selected {
-  border-color: var(--pastel-pink);
+  border-color: var(--pastel-pink, #d291bc);
   box-shadow: 0 0 10px #9a1af1c2;
 }
 
-/* Eve system status backgrounds, etc. */
 .eve-system-status-home {
   border: 1px solid var(--eve-solar-system-status-color-home-dark30);
-  background-image: linear-gradient(275deg, var(--eve-solar-system-status-friendly), transparent);
+  background-image: linear-gradient(
+    275deg,
+    var(--eve-solar-system-status-friendly),
+    transparent
+  );
   &.selected {
     border-color: var(--eve-solar-system-status-color-home);
   }
 }
 .eve-system-status-friendly {
   border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
-  background-image: linear-gradient(275deg, var(--eve-solar-system-status-friendly-dark30), transparent);
+  background-image: linear-gradient(
+    275deg,
+    var(--eve-solar-system-status-friendly-dark30),
+    transparent
+  );
   &.selected {
     border-color: var(--eve-solar-system-status-color-friendly-dark5);
   }
@@ -72,20 +82,31 @@
   border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
   background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
   &.selected {
-    border-color: var(--pastel-pink);
+    border-color: var(--pastel-pink, #d291bc);
   }
 }
 .eve-system-status-warning {
-  background-image: linear-gradient(275deg, var(--eve-solar-system-status-warning), transparent);
+  background-image: linear-gradient(
+    275deg,
+    var(--eve-solar-system-status-warning),
+    transparent
+  );
 }
 .eve-system-status-dangerous {
-  background-image: linear-gradient(275deg, var(--eve-solar-system-status-dangerous), transparent);
+  background-image: linear-gradient(
+    275deg,
+    var(--eve-solar-system-status-dangerous),
+    transparent
+  );
 }
 .eve-system-status-target {
-  background-image: linear-gradient(275deg, var(--eve-solar-system-status-target), transparent);
+  background-image: linear-gradient(
+    275deg,
+    var(--eve-solar-system-status-target),
+    transparent
+  );
 }
 
-/* Bookmarks row */
 .Bookmarks {
   position: absolute;
   width: 100%;
@@ -128,33 +149,28 @@
   }
 }
 
-/* Slight shadow for text */
+
-.textShadowThin {
+.TagTitle {
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
+  font-size: 11px;
-}
+  font-weight: bold;
-.tagSkyFontMedium {
+  text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-  color: #38bdf8;
+  color: var(--rf-tag-color, #ffb01d);
-  font-weight: 500;
 }
 
-/* HeadRow near the top, possibly ~19px tall. */
+/* The top row (HeadRow). */
 .HeadRow {
   position: relative;
   top: 1px;
+
   .classTitle {
     font-weight: bold;
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.73);
     font-size: 11px;
   }
-  .TagTitle {
+
-    font-size: 11px;
-    font-weight: bold;
-    text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-    color: #ffb01d;
-  }
   @-moz-document url-prefix() {
     .classSystemName {
-      font-family: inherit !important;
+      font-family: var(--rf-node-font, inherit);
       font-weight: bold;
     }
   }
@@ -163,16 +179,17 @@
 /* Usually ~19px tall for bottom row. */
 .BottomRow {
   height: 19px;
+
   .localCounter {
     display: flex;
     gap: 2px;
   }
   .hasUserCharacters {
-    color: #fbbf24;
+    color: var(--rf-has-user-characters, #fbbf24);
   }
 }
 
-/* Overflows, effect icons, etc. */
+/* The systemName overflow + effect icon, etc. */
 .systemNameOverflow {
   flex-grow: 1;
   overflow: hidden;
@@ -194,7 +211,7 @@
   }
 }
 
-/* The node handlers / double-click area */
+/* The node's invisible handles/double-click overlay. */
 .Handlers {
   position: absolute;
   z-index: 2;
@@ -203,13 +220,17 @@
   width: 100%;
   height: 100%;
 }
+
+/* The little React Flow handles on each edge. */
 .Handle {
-  border: 1px solid var(--pastel-blue);
+  border: 1px solid var(--pastel-blue, #5a7d9a);
   width: 5px;
   height: 5px;
+
   &.selected {
-    border-color: var(--pastel-pink);
+    border-color: var(--pastel-pink, #d291bc);
   }
+
   &.HandleTop {
     top: -2px;
   }
@@ -242,7 +263,7 @@
   }
 }
 
-/* Unsplashed signature containers */
+/* Unsplashed signature containers. */
 .Unsplashed {
   position: absolute;
   width: calc(50% - 4px);

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.tsx

@@ -163,7 +163,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
         <div className={classes.Bookmarks}>
           {labelCustom !== '' && (
             <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className={classes.textShadowThin}>{labelCustom}</span>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">{labelCustom}</span>
             </div>
           )}
 
@@ -199,19 +199,19 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
           'flex flex-col w-[130px] h-[34px]',
           'px-[6px] pt-[2px] pb-[3px] text-[10px]',
           'leading-[1] space-y-[1px]',
-          'bg-[var(--tooltip-bg)] shadow-[0_0_5px_rgba(45,45,45,0.5)]',
+          'shadow-[0_0_5px_rgba(45,45,45,0.5)]',
           'border border-[var(--pastel-blue-darken10)] rounded-[5px]'
         )}
       >
         {visible && (
           <>
             <div className={clsx(classes.HeadRow, 'flex items-center gap-[3px]')}>
-              <div className={clsx(classes.classTitle, classTitleColor, classes.textShadowThin)}>
+              <div className={clsx(classes.classTitle, classTitleColor, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
                 {class_title ?? '-'}
               </div>
 
               {tag != null && tag !== '' && (
-                <div className={clsx(classes.TagTitle, classes.tagSkyFontMedium)}>
+                <div className={clsx(classes.TagTitle, "color: #38bdf8; font-weight: 500;")}>
                   {tag}
                 </div>
               )}
@@ -219,9 +219,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
               <div
                 className={clsx(
                   classes.classSystemName,
-                  classes.textShadowThin,
+                  'flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
-                  classes.systemNameOverflow,
-                  'overflow-hidden'
                 )}
               >
                 {systemName}
@@ -265,7 +263,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
                     )}
                   >
                     <i className="pi pi-users text-[0.50rem]" />
-                    <span className="font-sans text-[0.65rem]">{charactersInSystem.length}</span>
+                    <span className="text-[0.65rem]">{charactersInSystem.length}</span>
                   </div>
                 )}
               </div>

assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts

@@ -26,7 +26,7 @@ export function useBackgroundVars(themeName?: string) {
 
     const cssVarGap = style.getPropertyValue('--rf-bg-gap');
     const cssVarSize = style.getPropertyValue('--rf-bg-size');
-    const cssColor = style.getPropertyValue('--rf-bg-color');
+    const cssColor = style.getPropertyValue('--rf-bg-pattern-color');
 
     const gapNum = parseInt(cssVarGap, 10) || 16;
     const sizeNum = parseInt(cssVarSize, 10) || 1;

assets/js/hooks/Mapper/components/map/styles/neon-theme.scss

@@ -2,17 +2,28 @@
 @import './eve-common';
 
 .neon-theme {
+  --rf-bg-color: #000000;
+  --rf-soft-bg-color: #171717;
+
+  --rf-node-bg-color: #202020;
+  --rf-node-soft-bg-color: #2b2b2b;
+  --rf-text-color: #ffffff;
+
+
+  --rf-bg-variant: "dots";
+  --rf-bg-gap: 16;
+  --rf-bg-size: 1;
+  --rf-bg-pattern-color: #81818a;
+
   --pastel-blue: #5a7d9a;
   --pastel-pink: #d291bc;
   --pastel-green: #88b04b;
   --pastel-yellow: #ffdd59;
+
   --dark-bg: #2d2d2d;
   --text-color: #ffffff;
   --tooltip-bg: #202020;
 
-  --rf-bg-variant: "dots";
-  --rf-bg-gap: 16;
-
   .react-flow {
     color: var(--text-color);
 

assets/js/hooks/Mapper/components/map/styles/pathfinder-theme.scss

@@ -4,19 +4,21 @@
 @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
 
 .pathfinder-theme {
+  --rf-bg-color: #000000;
+  --rf-soft-bg-color: #282828;
 
-  --rf-bg-variant: "lines";
+  --rf-node-bg-color: #202020;
-  --rf-bg-gap: 32;
+  --rf-node-soft-bg-color: #313335;
-  --rf-bg-color: #353535;
+  --rf-node-font-weight: bold;
-  --rf-soft-bg-color: #282829;
+
+  --rf-text-color: #adadad;
+  --tooltip-bg: #202020;
 
-  --pf-text-color: #adadad;
-  --pf-dark-bg: #2d2d2d;
-  --pf-tooltip-bg: #202020;
   --rf-bg-variant: "lines";
   --rf-bg-gap: 32;
   --rf-bg-size: 1;
-  --rf-bg-color: #313131;
+  --rf-bg-pattern-color: #313131;
+
   --eve-effect-pulsar: #428bca;
   --eve-effect-magnetar: #e06fdf;
   --eve-effect-wolfRayet: #e28a0d;
@@ -36,153 +38,12 @@
   --eve-wh-type-color-c13: #7986cb;
   --eve-wh-type-color-drifter: #44aa82;
 
-  .MapRoot {
-    background-color: var(--rf-bg-color);
 
-    &.isSoftBackground {
+  --rf-node-font-weight: bold;
-      background-color: var(--rf-soft-bg-color);
+  --rf-node-line-height: normal;
-    }
+  --rf-node-font-family: 'Oxygen', sans-serif;
-    &.soft-bg {
+  --rf-node-text-color: var(--pf-text-color);
-      --rf-bg-color: var(--rf-soft-bg-color);
-    }
-  }
 
-  .RootCustomNode {
+  --rf-tag-color: #fbbf24;
-    background-color: #313335 !important;
+  --rf-has-user-characters: #5cb85c;
-    font-weight: 600;
-    line-height: normal;
-    color: var(--pf-text-color);
-    font-family: 'Oxygen', sans-serif !important;
-  }
-
-  .HeadRow {
-    position: relative;
-    top: 1px;
-
-    .classTitle {
-      font-size: 11px;
-      font-weight: bold;
-      text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
-    }
-
-    @-moz-document url-prefix() {
-      .classSystemName {
-        font-family: inherit !important;
-        font-weight: bold;
-        mix-blend-mode: screen;
-      }
-    }
-
-    .classSystemName {
-      font-family: inherit !important;
-      font-weight: bold;
-      color: var(--pf-text-color);
-      mix-blend-mode: screen;
-      text-shadow: rgba(0, 0, 0, 0.4) 1px 1px;
-    }
-
-    .textEllipsis {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .fontSans {
-      font-family: inherit !important;
-    }
-  }
-
-  .BottomRow {
-    .localCounter {
-      display: flex;
-
-      & > i {
-        position: relative;
-        top: 1px;
-      }
-      & > span {
-        font-size: 9px;
-        line-height: 9px;
-        font-weight: 700;
-        mix-blend-mode: screen;
-        color: #5cb85c;
-      }
-    }
-
-    .customName {
-      font-family: inherit !important;
-      font-weight: bold;
-      color: var(--pf-text-color);
-      mix-blend-mode: screen;
-      text-shadow: rgba(0, 0, 0, 0.4) 1px 1px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: inline-block;
-      flex-shrink: 1;
-    }
-
-    .tagTitle {
-      font-size: 9px;
-      font-family: inherit !important;
-      font-weight: bold;
-      color: #fbbf24 !important;
-      mix-blend-mode: screen;
-    }
-  }
-
-  .Handlers {
-    position: absolute;
-    z-index: 2;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .Handle {
-    min-width: initial;
-    min-height: initial;
-    border: 1px solid var(--pastel-blue, #5a7d9a);
-    width: 5px;
-    height: 5px;
-
-    &.selected {
-      border-color: var(--pastel-pink, #d291bc);
-    }
-
-    &.HandleTop {
-      top: -2px;
-    }
-    &.HandleRight {
-      right: -2px;
-    }
-    &.HandleBottom {
-      bottom: -2px;
-    }
-    &.HandleLeft {
-      left: -2px;
-    }
-
-    &.Tick {
-      width: 7px;
-      height: 7px;
-
-      &.HandleTop {
-        top: -3px;
-      }
-      &.HandleRight {
-        right: -3px;
-      }
-      &.HandleBottom {
-        bottom: -3px;
-      }
-      &.HandleLeft {
-        left: -3px;
-      }
-    }
-  }
-
-  .react-flow {
-    color: var(--pf-text-color);
-  }
 }