chore: deprecate standalone tokens

lsst-epo · Jul 17, 2024 · 5292eaf · 5292eaf
1 parent 09cf8c6
commit 5292eaf
Show file tree

Hide file tree

Showing 49 changed files with 423 additions and 483 deletions.
diff --git a/.gitignore b/.gitignore
@@ -33,8 +33,5 @@ yarn-error.log*
 # vercel
 .vercel
 
-# Ignore generated token scss file
-_tokens.scss
-
 # Environment config
 .env
diff --git a/Dockerfile b/Dockerfile
@@ -18,7 +18,7 @@ ARG NEXT_PUBLIC_API_URL=https://skyviewer-api-e3g4rcii3q-uc.a.run.app/api
 ARG NEXT_PUBLIC_ASSETS_BASE_URL=https://skyviewer-api-e3g4rcii3q-uc.a.run.app/assets
 ARG NEXT_PUBLIC_ASTRO_API_URL=https://us-central1-skyviewer.cloudfunctions.net/astro-objects-api
 
-RUN yarn tokens && yarn cloud-start:build
+RUN yarn cloud-start:build
 
 # Production image, copy all the files and run next
 FROM node:20-alpine AS runner

diff --git a/components/Bubbles/_styles.scss b/components/Bubbles/_styles.scss
@@ -1,5 +1,5 @@
-@use 'abstracts/mixins/base';
-@use 'abstracts/functions';
+@use "abstracts/mixins/base";
+@use "abstracts/functions";
 
 .bubbles {
   display: flex;
@@ -9,11 +9,11 @@
   .bubble {
     width: 5px;
     height: 5px;
-    background-color: functions.palette(neutral50);
+    background-color: var(--neutral50);
     border-radius: 50%;
 
     &.full {
-      background-color: functions.palette(white);
+      background-color: var(--white);
     }
 
     + .bubble {

diff --git a/components/Pois/_overlay.scss b/components/Pois/_overlay.scss
@@ -11,7 +11,7 @@
   display: flex;
   max-height: 0%;
   overflow: hidden;
-  color: functions.palette(white);
+  color: var(--white);
   background-color: rgba(0 0 0 / 70%);
   transition: max-height 0.25s ease-out;
 

diff --git a/components/ShareButtons/_styles.scss b/components/ShareButtons/_styles.scss
@@ -11,7 +11,7 @@
   width: 52px;
 
   .share-icon {
-    color: functions.palette(white);
+    color: var(--white);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -35,24 +35,24 @@
     }
 
     &.email {
-      background-color: functions.palette(turquoise85);
+      background-color: var(--turquoise85);
 
       line,
       .envelope-top {
-        stroke: functions.palette(white);
+        stroke: var(--white);
       }
 
       .envelope-outline {
-        fill: functions.palette(white);
+        fill: var(--white);
       }
     }
 
     &.image {
-      background-color: functions.palette(turquoise70);
+      background-color: var(--turquoise70);
     }
 
     &.url {
-      background-color: functions.palette(turquoise70);
+      background-color: var(--turquoise70);
 
       svg {
         width: 26px;
@@ -88,7 +88,7 @@
     outline: none;
 
     .share-icon {
-      border-color: functions.palette(blue20);
+      border-color: var(--blue20);
     }
   }
 }
@@ -112,7 +112,7 @@
     font-size: 10px;
     font-weight: functions.font-weight(light);
     line-height: 1.6;
-    color: functions.palette(white);
+    color: var(--white);
 
     @include base.respond(functions.break(desktop-height), min, height) {
       margin-top: 0;

diff --git a/components/explorer/Aladin/_styles.scss b/components/explorer/Aladin/_styles.scss
@@ -1,5 +1,5 @@
-@use 'abstracts/mixins/appearance';
-@use 'abstracts/functions';
+@use "abstracts/mixins/appearance";
+@use "abstracts/functions";
 
 // Overrides
 // .aladin-logo-container,
@@ -21,7 +21,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: functions.palette(black);
+  background-color: var(--black);
   border: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
@@ -40,7 +40,6 @@
   }
 }
 
-
 .sources-list-container {
   @include appearance.hidden;
 
@@ -53,7 +52,7 @@
 
   .info-button,
   .close-button {
-    background-color: functions.palette(turquoise55);
+    background-color: var(--turquoise55);
   }
 
   .info-button {

diff --git a/components/explorer/Controls/Filters/index.js b/components/explorer/Controls/Filters/index.js
@@ -20,8 +20,6 @@ export default function Filters({ defaultFilters }) {
   };
 
   const handleCharacteristicFilter = (value, characteristic) => {
-    console.log({ value, characteristic });
-
     setFilters({
       ...filters,
       characteristics: {
@@ -47,8 +45,6 @@ export default function Filters({ defaultFilters }) {
     setShowFiltersReset(false);
   };
 
-  console.log({ filters });
-
   return (
     <FiltersMenu
       {...{ menuLabelId, menuDescriptionId }}

diff --git a/components/explorer/Controls/Grid/_styles.scss b/components/explorer/Controls/Grid/_styles.scss
@@ -1,4 +1,4 @@
-@use 'abstracts/functions';
+@use "abstracts/functions";
 
 .grid-button {
   top: 52px;
@@ -7,6 +7,6 @@
   svg {
     width: 22px;
     height: 22px;
-    fill: functions.palette(white);
+    fill: var(--white);
   }
 }
diff --git a/components/explorer/Controls/Markers/_styles.scss b/components/explorer/Controls/Markers/_styles.scss
@@ -1,9 +1,9 @@
-@use 'abstracts/functions';
+@use "abstracts/functions";
 
-.markers-button, {
+.markers-button {
   svg {
     width: 26px;
     height: 26px;
-    fill: functions.palette(white);
+    fill: var(--white);
   }
 }
diff --git a/components/explorer/Controls/Orientation/_styles.scss b/components/explorer/Controls/Orientation/_styles.scss
@@ -1,11 +1,11 @@
-@use 'abstracts/functions';
+@use "abstracts/functions";
 
 .orientation-indicator {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
-  background-color: functions.palette(neutral90);
+  background-color: var(--neutral90);
   border-radius: 50%;
 }
diff --git a/components/explorer/Controls/Pan/_styles.scss b/components/explorer/Controls/Pan/_styles.scss
@@ -1,7 +1,7 @@
-@use 'abstracts/functions';
+@use "abstracts/functions";
 
 .pan {
   .direction-button {
-    color: functions.palette(white);
+    color: var(--white);
   }
 }
diff --git a/components/explorer/Controls/Search/_styles.scss b/components/explorer/Controls/Search/_styles.scss
@@ -1,27 +1,27 @@
-@use 'abstracts/functions';
+@use "abstracts/functions";
 
 .controls .control-button.search-button {
   position: absolute;
   top: 0;
   left: 0;
   z-index: functions.z-stack(controls);
-  background-color: functions.palette(white);
+  background-color: var(--white);
 
   svg {
     width: 16px;
     height: 16px;
-    fill: functions.palette(black);
+    fill: var(--black);
     transition: fill 0.4s;
   }
 
   &:focus {
-    background-color: functions.palette(blue15);
+    background-color: var(--blue15);
   }
 
   &.active,
   &:hover {
     svg {
-      fill: functions.palette(white);
+      fill: var(--white);
     }
   }
 }
diff --git a/components/explorer/Controls/Share/_styles.scss b/components/explorer/Controls/Share/_styles.scss
@@ -1,7 +1,7 @@
-@use 'abstracts/functions';
-@use 'abstracts/mixins/base';
-@use 'abstracts/mixins/appearance';
-@use 'abstracts/mixins/typography';
+@use "abstracts/functions";
+@use "abstracts/mixins/base";
+@use "abstracts/mixins/appearance";
+@use "abstracts/mixins/typography";
 
 .share-menu {
   .open-share-button {
@@ -13,7 +13,7 @@
     svg {
       width: 22px;
       height: 22px;
-      fill: functions.palette(white);
+      fill: var(--white);
     }
   }
 
@@ -54,7 +54,7 @@
       width: 100%;
       height: auto;
       padding: 6px 18px 12px;
-      background-color: functions.palette(black);
+      background-color: var(--black);
       border-radius: 2px;
 
       @include base.respond(functions.break(mobile), min) {

diff --git a/components/explorer/Controls/Zoom/_styles.scss b/components/explorer/Controls/Zoom/_styles.scss
@@ -1,4 +1,4 @@
-@use 'abstracts/functions';
+@use "abstracts/functions";
 
 .controls {
   .control-button.zoom-in,
@@ -8,28 +8,28 @@
     justify-content: center;
     width: 40px;
     height: 40px;
-    background-color: functions.palette(white);
+    background-color: var(--white);
     border-radius: 50%;
 
     path,
     rect {
-      fill: functions.palette(black);
+      fill: var(--black);
       transition: fill 0.4s;
     }
 
     &:hover {
       path,
       rect {
-        fill: functions.palette(white);
+        fill: var(--white);
       }
     }
 
     &:focus {
-      background-color: functions.palette(blue15);
+      background-color: var(--blue15);
 
       &.active,
       &:hover {
-        background-color: functions.palette(turquoise55);
+        background-color: var(--turquoise55);
       }
     }
   }
@@ -48,14 +48,14 @@
 //   flex-grow: 1;
 //   width: 14px;
 //   height: 100%;
-//   background-color: rgba(functions.palette(neutral10), 0.6);
+//   background-color: rgba(var(--neutral10), 0.6);
 //   border-radius: 7px;
 // }
 
 // .zoom-thumb {
 //   width: 30px;
 //   height: 30px;
-//   background-color: functions.palette(turquoise55);
-//   border: 4px solid functions.palette(white);
+//   background-color: var(--turquoise55);
+//   border: 4px solid var(--white);
 //   border-radius: 50%;
 // }
diff --git a/components/explorer/Controls/_styles.scss b/components/explorer/Controls/_styles.scss
@@ -39,17 +39,17 @@
     justify-content: center;
     width: $controlDim;
     height: $controlDim;
-    background-color: functions.palette(neutral90);
+    background-color: var(--neutral90);
     border-radius: 50%;
     transition: background-color 0.4s, outline 0.4s;
 
     &:focus {
-      outline: 2px solid functions.palette(blue20);
+      outline: 2px solid var(--blue20);
     }
 
     &.active,
     &:hover {
-      background-color: functions.palette(turquoise55);
+      background-color: var(--turquoise55);
     }
   }