Get styles from CSS

src/shared/initial-app/Intro/blob-anim/index.ts

@@ -1,5 +1,5 @@
 import * as style from '../style.css';
-import { startBlobs, blobColor } from './meta';
+import { startBlobs } from './meta';
 
 /**
  * Control point x,y - point x,y - control point x,y
@@ -142,12 +142,16 @@ class CentralBlobs {
     x: number,
     y: number,
     radius: number,
+    color: string,
+    opacity: number,
   ) {
     ctx.save();
     ctx.translate(x, y);
     ctx.scale(radius, radius);
     this.rotatePos = (this.rotatePos + timeDelta / rotationTime) % 1;
     ctx.rotate(Math.PI * 2 * this.rotatePos);
+    ctx.globalAlpha = opacity;
+    ctx.fillStyle = color;
 
     for (const blob of this.blobs) {
       const points = blob.frame(timeDelta);
@@ -211,8 +215,9 @@ export function startBlobAnim(canvas: HTMLCanvasElement) {
     canvas.width = canvasBounds.width * devicePixelRatio;
     canvas.height = canvasBounds.height * devicePixelRatio;
     const loadImgBounds = loadImgEl.getBoundingClientRect();
+    const computedStyles = getComputedStyle(canvas);
+    const blobPink = computedStyles.getPropertyValue('--blob-pink');
 
-    ctx.fillStyle = blobColor;
     ctx.scale(devicePixelRatio, devicePixelRatio);
 
     centralBlobs.draw(
@@ -221,6 +226,8 @@ export function startBlobAnim(canvas: HTMLCanvasElement) {
       loadImgBounds.left - canvasBounds.left + loadImgBounds.width / 2,
       loadImgBounds.top - canvasBounds.top + loadImgBounds.height / 2,
       loadImgBounds.height / 2 / (1 + maxRandomDistance),
+      blobPink,
+      Number(computedStyles.getPropertyValue('--center-blob-opacity')),
     );
   }
 

src/shared/initial-app/Intro/blob-anim/meta.ts

@@ -39,5 +39,3 @@ export const startBlobs: BlobPoint[][] = [
     [-1.141, -0.335, -0.951, -0.573, -0.761, -0.811],
   ],
 ];
-
-export const blobColor = 'rgba(255, 0, 102, 0.3)';

src/shared/initial-app/Intro/index.tsx

@@ -14,7 +14,7 @@ import logoWithText from 'url:./imgs/logo-with-text.svg';
 import * as style from './style.css';
 import type SnackBarElement from 'shared/initial-app/custom-els/snack-bar';
 import 'shared/initial-app/custom-els/snack-bar';
-import { blobColor, startBlobs } from './blob-anim/meta';
+import { startBlobs } from './blob-anim/meta';
 
 const demos = [
   {
@@ -247,11 +247,7 @@ export default class Intro extends Component<Props, State> {
           </h1>
           <div class={style.loadImg}>
             {showBlobSVG && (
-              <svg
+              <svg class={style.blobSvg} viewBox="-1.25 -1.25 2.5 2.5">
-                class={style.blobSvg}
-                style={{ fill: blobColor }}
-                viewBox="-1.25 -1.25 2.5 2.5"
-              >
                 {startBlobs.map((points) => (
                   <path
                     d={points

src/shared/initial-app/Intro/style.css

@@ -21,6 +21,8 @@
   grid-template-rows: max-content max-content;
   justify-items: center;
   position: relative;
+  --blob-pink: var(--hot-pink);
+  --center-blob-opacity: 0.3;
 }
 
 .logo-container {
@@ -44,6 +46,11 @@
   composes: abs-fill from '../util.css';
   width: 100%;
   height: 100%;
+  fill: var(--blob-pink);
+
+  & path {
+    opacity: var(--center-blob-opacity);
+  }
 }
 
 .load-img-content {

src/shared/initial-app/colors.css

@@ -1,4 +1,5 @@
 html {
   --pink: #ff3385;
+  --hot-pink: #ff0066;
   --white: #fff;
 }

src/shared/missing-types.d.ts

@@ -13,3 +13,23 @@
 /// <reference path="../../missing-types.d.ts" />
 
 declare const __PRERENDER__: boolean;
+
+interface ResizeObserverCallback {
+  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;
+}
+
+interface ResizeObserverEntry {
+  readonly target: Element;
+  readonly contentRect: DOMRectReadOnly;
+}
+
+interface ResizeObserver {
+  observe(target: Element): void;
+  unobserve(target: Element): void;
+  disconnect(): void;
+}
+
+declare var ResizeObserver: {
+  prototype: ResizeObserver;
+  new (callback: ResizeObserverCallback): ResizeObserver;
+};