Replace existing skillmap color variables with theme ones.

Author: thsparks

skillmap/src/App.css

@@ -1,24 +1,4 @@
 :root {
-    --black: #000;
-    --white: #fff;
-
-    --primary-color: var(--pxt-primary-background);
-    --secondary-color: var(--pxt-secondary-background);
-    --tertiary-color: var(--pxt-tertiary-background);
-
-    --hover-color: var(--secondary-color);
-    --active-color: var(--tertiary-color);
-    --inactive-color: var(--secondary-color);
-    --inactive-hover-color: var(--pxt-secondary-background-hover);
-
-    --body-background-color: var(--pxt-target-background1);
-    --default-card-color: var(--pxt-neutral-background1);
-    --card-hover-color: var(--pxt-neutral-background1-hover);
-    --card-border-color: var(--pxt-neutral-stencil1);
-    --dropdown-hover-color: var(--pxt-neutral-background1);
-    --inverted-text-color: var(--pxt-neutral-background1);
-    --subtitle-text-color: var(--pxt-neutral-background3);
-
     --header-height: 4rem;
     --header-padding-top: 1rem;
 
@@ -34,8 +14,8 @@
     --graph-backround-zindex: 10;
     --above-graph-zindex: 20;
 
-    --high-contrast-text: var(--white);
-    --high-contrast-background: var(--black);
+    --high-contrast-text: #fff;
+    --high-contrast-background: #000;
     --high-contrast-highlight: #ffff00;
     --high-contrast-focus-outline: 2px solid var(--high-contrast-highlight);
     --high-contrast-hyperlink: #807FFF;
@@ -92,7 +72,6 @@ code {
     max-height: var(--header-height);
     display: flex;
     align-items: center;
-    color: var(--inverted-text-color);
     flex-grow: 0;
     flex-shrink: 0;
 
@@ -295,12 +274,11 @@ code {
 
 .banner-card {
     background-color: var(--pxt-primary-background);
-    color: var(--pxt-primery-foreground);
+    color: var(--pxt-primary-foreground);
 
     min-width: 24rem;
     width: 60%;
     display: flex;
-    color: var(--inverted-text-color);
 }
 
 .banner-card > i {
@@ -324,7 +302,7 @@ code {
 
 .banner-info i, .banner-info i:hover {
     margin-left: 0.5rem;
-    color: var(--inverted-text-color);
+    color: var(--pxt-primary-foreground);
     font-size: 1.2rem;
     vertical-align: top;
     text-decoration: none;

skillmap/src/styles/carousel.css

@@ -15,14 +15,14 @@
 .carousel-subtitle {
     font-size: 1rem;
     font-weight: 500;
-    color: var(--subtitle-text-color);
+    color: var(--pxt-neutral-background3);
     margin-left: 0.5rem;
 }
 
 .carousel-subtitle {
     font-size: 1rem;
     font-weight: 500;
-    color: var(--subtitle-text-color);
+    color: var(--pxt-neutral-background3);
     margin-left: 0.5rem;
 }
 
@@ -31,8 +31,8 @@
 }
 
 .carousel-subtitle-tag {
-    color: var(--primary-color);
-    border: 1px solid var(--primary-color);
+    color: var(--pxt-primary-background);
+    border: 1px solid var(--pxt-primary-background);
     padding: 0.1rem 0.25rem;
 }
 

skillmap/src/styles/infopanel.css

@@ -77,7 +77,8 @@
     padding: 0.5rem;
     text-align: center;
     text-transform: uppercase;
-    background-color: var(--inactive-color);
+    background-color: var(--pxt-secondary-background);
+    color: var(--pxt-secondary-foreground);
 }
 
 .info-panel-link {
@@ -99,8 +100,8 @@
 }
 
 .info-panel-tags > div {
-    color: var(--active-color);
-    border: 1px solid var(--active-color);
+    color: var(--pxt-tertiary-background);
+    border: 1px solid var(--pxt-tertiary-background);
     padding: 0.2rem 0.5rem;
     font-size: 0.8rem;
     margin: 0 0.5rem 0.5rem 0;
@@ -133,9 +134,9 @@
 
 .locked.action-button,
 .locked.action-button:hover {
-    color: var(--inactive-color);
+    color: var(--pxt-secondary-background);
     background-color: transparent;
-    border-color: var(--inactive-color);
+    border-color: var(--pxt-secondary-background);
     cursor: default;
 }
 

skillmap/src/styles/makecode-editor.css

@@ -37,9 +37,9 @@
  }
 
 .makecode-frame-loader-bar {
-    --progress-bar-filled-color: var(--primary-color);
+    --progress-bar-filled-color: var(--pxt-primary-background);
     --progress-bar-unfilled-color: transparency;
-    --progress-bar-border-color: var(--black);
+    --progress-bar-border-color: var(--pxt-primary-foreground);
     width: 10rem;
     height: 1.5rem;
     margin-bottom: 1rem;

skillmap/src/styles/skillcard.css

@@ -12,7 +12,8 @@
     right: -2rem;
     width: 2rem;
     height: 0.75rem;
-    background-color: var(--primary-color);
+    background-color: var(--pxt-primary-background);
+    color: var(--pxt-primary-foreground);
     z-index: 1;
 }
 .carousel-item.linked:last-child:after {
@@ -61,7 +62,7 @@
 }
 
 .selected .skill-card {
-    border-color: var(--active-color);
+    border-color: var(--pxt-tertiary-background);
     transform: rotateX(180deg);
 }
 
@@ -96,11 +97,12 @@
 }
 
 .skill-card:not(.locked):hover .skill-card-display {
-    background-color: var(--active-color);
+    background-color: var(--pxt-tertiary-background);
 }
 
 .skill-card:not(.locked):hover .skill-card-image {
-    background-color: var(--card-hover-color);
+    background-color: var(--pxt-neutral-background1-hover);
+    color: var(--pxt-neutral-foreground1-hover);
 }
 
 
@@ -112,7 +114,8 @@
 }
 
 .skill-card-image {
-    background-color: var(--default-card-color);
+    background-color: var(--pxt-neutral-background1);
+    color: var(--pxt-neutral-foreground1);
     overflow: hidden;
     display: flex;
     justify-content: center;
@@ -150,7 +153,7 @@
 .skill-card-tags div {
     margin-right: 0.25rem;
     padding: 0 0.25rem;
-    border: 1px solid var(--inverted-text-color);
+    border: 1px solid var(--pxt-primary-foreground);
 }
 
 /* SKILL CARD INFO (BACK) */
@@ -178,8 +181,8 @@
 }
 
 .skill-card-button {
-    color: var(--active-color);
-    border: 1px solid var(--active-color);
+    color: var(--pxt-tertiary-background);
+    border: 1px solid var(--pxt-tertiary-background);
     padding: 0.5rem;
     margin-top: 0.5rem;
     font-size: 1.2rem;
@@ -191,21 +194,22 @@
 
 .skill-card-button:hover,
 .skill-card-button-icon:hover {
-    background-color: var(--hover-color);
+    background-color: var(--pxt-secondary-background);
+    color: var(--pxt-secondary-foreground);
 }
 
 .skill-card-button-icon {
-    color: var(--active-color);
-    border: 1px solid var(--active-color);
+    color: var(--pxt-tertiary-background);
+    border: 1px solid var(--pxt-tertiary-background);
     border-right: none;
     padding: 0.5rem;
 }
 
 .locked .skill-card-button,
 .locked .skill-card-button:hover {
-    color: var(--inactive-color);
+    color: var(--pxt-secondary-background);
     background-color: transparent;
-    border-color: var(--inactive-color);
+    border-color: var(--pxt-secondary-background);
     cursor: default;
 }
 
@@ -218,10 +222,10 @@
 }
 
 .circular-label {
-    background: var(--active-color);
+    background: var(--pxt-tertiary-background);
     padding: 0.2rem 0.3rem;
     font-size: 0.75rem;
-    color: var(--inverted-text-color);
+    color: var(--pxt-tertiary-foreground);
     border-radius: 1.5rem;
     vertical-align: middle;
     margin-right: 0.25rem;
@@ -250,8 +254,8 @@
     margin-right: 3rem;
     border-radius: 50%;
 
-    color: var(--inverted-text-color);
-    background-color: var(--primary-color);
+    color: var(--pxt-primary-foreground);
+    background-color: var(--pxt-primary-background);
 }
 
 .end-card i {
@@ -269,7 +273,8 @@
     left: -1.5rem;
     width: 2.5rem;
     height: 0.75rem;
-    background-color: var(--primary-color);
+    background-color: var(--pxt-primary-background);
+    color: var(--pxt-primary-foreground);
 }
 
 .end-card.spin i {