seed

excalidraw-app/App.tsx

@@ -4,6 +4,7 @@ import {
   TTDDialogTrigger,
   CaptureUpdateAction,
   reconcileElements,
+  convertToExcalidrawElements,
 } from "@excalidraw/excalidraw";
 import { trackEvent } from "@excalidraw/excalidraw/analytics";
 import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
@@ -471,6 +472,276 @@ const ExcalidrawWrapper = () => {
 
     initializeScene({ collabAPI, excalidrawAPI }).then(async (data) => {
       loadImages(data, /* isInitialLoad */ true);
+      if (data.scene) {
+        data.scene.elements = data.scene.elements?.length
+          ? data.scene.elements
+          : convertToExcalidrawElements([
+              {
+                id: "MyWwgGwbjyZoxKSa2pfBI",
+                type: "rectangle",
+                x: 43.5,
+                y: 52.5,
+                width: 357,
+                height: 280,
+                strokeColor: "transparent",
+                backgroundColor: "#ff8787",
+                fillStyle: "solid",
+                strokeWidth: 2,
+                strokeStyle: "solid",
+                roughness: 1,
+                opacity: 100,
+                groupIds: [],
+                frameId: null,
+                roundness: { type: 3 },
+                seed: 246249428,
+                version: 427,
+                versionNonce: 2079096276,
+                boundElements: [],
+                link: null,
+                locked: false,
+              },
+              {
+                id: "ABor4pClpJJs6adQb4iqs",
+                type: "rectangle",
+                x: 357.5,
+                y: 481.5,
+                width: 357,
+                height: 280,
+                strokeColor: "transparent",
+                backgroundColor: "#b2f2bb",
+                fillStyle: "solid",
+                strokeWidth: 2,
+                strokeStyle: "solid",
+                roughness: 1,
+                opacity: 100,
+                groupIds: [],
+                frameId: null,
+                roundness: { type: 3 },
+                seed: 1800887636,
+                version: 445,
+                versionNonce: 650486612,
+                boundElements: [],
+                link: null,
+                locked: false,
+              },
+              {
+                id: "-FGknlZxdFGYZNoUr2lG5",
+                type: "rectangle",
+                x: 1280.5,
+                y: 47.5,
+                width: 357,
+                height: 280,
+                strokeColor: "transparent",
+                backgroundColor: "#69db7c",
+                fillStyle: "solid",
+                strokeWidth: 2,
+                strokeStyle: "solid",
+                roughness: 1,
+                opacity: 100,
+                groupIds: [],
+                frameId: null,
+                roundness: { type: 3 },
+                seed: 883462868,
+                version: 532,
+                versionNonce: 912136404,
+                boundElements: [],
+                link: null,
+                locked: false,
+              },
+              {
+                id: "XQ3bRtQnS_ydtq13c_p99",
+                type: "rectangle",
+                x: 863.5,
+                y: 334.5,
+                width: 357,
+                height: 280,
+                strokeColor: "transparent",
+                backgroundColor: "#a5d8ff",
+                fillStyle: "solid",
+                strokeWidth: 2,
+                strokeStyle: "solid",
+                roughness: 1,
+                opacity: 100,
+                groupIds: [],
+                frameId: null,
+                roundness: { type: 3 },
+                seed: 2033653844,
+                version: 459,
+                versionNonce: 1984683604,
+                boundElements: [],
+                link: null,
+                locked: false,
+              },
+              {
+                id: "GmC3zgvVq3xUd2Qn0cNX3",
+                type: "rectangle",
+                x: 897.5,
+                y: 697.5,
+                width: 357,
+                height: 280,
+                strokeColor: "transparent",
+                backgroundColor: "#ffec99",
+                fillStyle: "solid",
+                strokeWidth: 2,
+                strokeStyle: "solid",
+                roughness: 1,
+                opacity: 100,
+                groupIds: [],
+                frameId: null,
+                roundness: { type: 3 },
+                seed: 81325524,
+                version: 488,
+                versionNonce: 1332016084,
+                boundElements: [],
+                link: null,
+                locked: false,
+              },
+              {
+                id: "8nvmvwbmFmNAcLAmwZryR",
+                type: "rectangle",
+                x: 456.5,
+                y: 229.5,
+                width: 357,
+                height: 280,
+                strokeColor: "transparent",
+                backgroundColor: "#eebefa",
+                fillStyle: "solid",
+                strokeWidth: 2,
+                strokeStyle: "solid",
+                roughness: 1,
+                opacity: 100,
+                groupIds: [],
+                frameId: null,
+                roundness: { type: 3 },
+                seed: 950276948,
+                version: 649,
+                versionNonce: 532633940,
+                boundElements: [],
+                link: null,
+                locked: false,
+              },
+              {
+                id: "7dyXEvhPDLA0-e3XCaM2H",
+                type: "rectangle",
+                x: 1446.5,
+                y: 609.5,
+                width: 357,
+                height: 280,
+                strokeColor: "transparent",
+                backgroundColor: "#d0bfff",
+                fillStyle: "solid",
+                strokeWidth: 2,
+                strokeStyle: "solid",
+                roughness: 1,
+                opacity: 100,
+                groupIds: [],
+                frameId: null,
+                roundness: { type: 3 },
+                seed: 1659799764,
+                version: 570,
+                versionNonce: 313593556,
+                boundElements: [],
+                link: null,
+                locked: false,
+              },
+              {
+                id: "gJubXeAjkEAr6yywtiZ0T",
+                type: "rectangle",
+                x: 1182.5,
+                y: 800.5,
+                width: 357,
+                height: 280,
+                strokeColor: "transparent",
+                backgroundColor: "#96f2d7",
+                fillStyle: "solid",
+                strokeWidth: 2,
+                strokeStyle: "solid",
+                roughness: 1,
+                opacity: 100,
+                groupIds: [],
+                frameId: null,
+                roundness: { type: 3 },
+                seed: 391007828,
+                version: 563,
+                versionNonce: 2026902612,
+                boundElements: [],
+                link: null,
+                locked: false,
+              },
+              {
+                id: "pSB2Izj9osR_XxVCzyVnD",
+                type: "rectangle",
+                x: 1477.5,
+                y: 295.5,
+                width: 357,
+                height: 280,
+                strokeColor: "transparent",
+                backgroundColor: "#9775fa",
+                fillStyle: "solid",
+                strokeWidth: 2,
+                strokeStyle: "solid",
+                roughness: 1,
+                opacity: 100,
+                groupIds: [],
+                frameId: null,
+                roundness: { type: 3 },
+                seed: 110715860,
+                version: 590,
+                versionNonce: 535980500,
+                boundElements: [],
+                link: null,
+                locked: false,
+              },
+              {
+                id: "yc7IKdtbnjLRaxJI5_q7m",
+                type: "rectangle",
+                x: 696.5,
+                y: 21.5,
+                width: 357,
+                height: 280,
+                strokeColor: "transparent",
+                backgroundColor: "#4dabf7",
+                fillStyle: "solid",
+                strokeWidth: 2,
+                strokeStyle: "solid",
+                roughness: 1,
+                opacity: 100,
+                groupIds: [],
+                frameId: null,
+                roundness: { type: 3 },
+                seed: 1457899860,
+                version: 587,
+                versionNonce: 724438868,
+                boundElements: [],
+                link: null,
+                locked: false,
+              },
+              {
+                id: "7KjY1vcMQm_i_i05wowTC",
+                type: "rectangle",
+                x: 447.5,
+                y: 771.5,
+                width: 357,
+                height: 280,
+                strokeColor: "transparent",
+                backgroundColor: "#ffc9c9",
+                fillStyle: "solid",
+                strokeWidth: 2,
+                strokeStyle: "solid",
+                roughness: 1,
+                opacity: 100,
+                groupIds: [],
+                frameId: null,
+                roundness: { type: 3 },
+                seed: 2072608468,
+                version: 610,
+                versionNonce: 1792607444,
+                boundElements: [],
+                link: null,
+                locked: false,
+              },
+            ]);
+      }
       initialStatePromiseRef.current.promise.resolve(data.scene);
     });
 

packages/excalidraw/components/Actions.scss

@@ -2,7 +2,8 @@
 .undo-redo-buttons {
   background-color: var(--island-bg-color);
   border-radius: var(--border-radius-lg);
-  box-shadow: 0 0 0 1px var(--color-surface-lowest);
+  // box-shadow: 0 0 0 1px var(--color-surface-lowest);
+  backdrop-filter: blur(40px);
 }
 
 .zoom-button,
@@ -12,6 +13,7 @@
   font-size: 0.875rem !important;
   width: var(--lg-button-size);
   height: var(--lg-button-size);
+  backdrop-filter: blur(40px);
 
   svg {
     width: var(--lg-icon-size) !important;

packages/excalidraw/components/Island.scss

@@ -3,6 +3,8 @@
     --padding: 0;
     box-sizing: border-box;
     background-color: var(--island-bg-color);
+    backdrop-filter: blur(40px);
+    -webkit-backdrop-filter: blur(40px);
     box-shadow: var(--shadow-island);
     border-radius: var(--border-radius-lg);
     padding: calc(var(--padding) * var(--space-factor));

packages/excalidraw/css/styles.scss

@@ -386,6 +386,9 @@ body.excalidraw-cursor-resize * {
     width: 12.5rem;
     box-sizing: border-box;
     position: absolute;
+    background: transparent !important;
+    backdrop-filter: blur(40px);
+    -webkit-backdrop-filter: blur(40px);
   }
 
   .dropdown-select {
@@ -648,14 +651,16 @@ body.excalidraw-cursor-resize * {
   .App-mobile-menu,
   .App-menu__left {
     --button-border: transparent;
-    --button-bg: var(--color-surface-mid);
+    // --button-bg: var(--color-surface-mid);
+    --button-bg: rgba(255, 255, 255, 0.3);
   }
 
   @at-root .excalidraw.theme--dark#{&} {
     .App-mobile-menu,
     .App-menu__left {
       --button-hover-bg: #363541;
-      --button-bg: var(--color-surface-high);
+      // --button-bg: var(--color-surface-high);
+      --button-bg: rgba(0, 0, 0, 0.15);
     }
   }
 

packages/excalidraw/css/theme.scss

@@ -19,7 +19,7 @@
   --input-border-color: #{$oc-gray-4};
   --input-hover-bg-color: #{$oc-gray-1};
   --input-label-color: #{$oc-gray-7};
-  --island-bg-color: #ffffff;
+  --island-bg-color: transparent !important;
   --keybinding-color: var(--color-gray-40);
   --link-color: #{$oc-blue-7};
   --overlay-bg-color: #{transparentize($oc-white, 0.12)};
@@ -149,16 +149,16 @@
 
   --color-surface-high: #f1f0ff;
   --color-surface-mid: #f6f6f9;
-  --color-surface-low: #ececf4;
+  --color-surface-low: rgba(236, 236, 244, 0.1);
   --color-surface-lowest: #ffffff;
   --color-on-surface: #1b1b1f;
   --color-brand-hover: #5753d0;
   --color-on-primary-container: #030064;
-  --color-surface-primary-container: #e0dfff;
+  --color-surface-primary-container: rgba(224, 223, 255, 0.7);
   --color-brand-active: #4440bf;
   --color-border-outline: #767680;
   --color-border-outline-variant: #c5c5d0;
-  --color-surface-primary-container: #e0dfff;
+  // --color-surface-primary-container: #e0dfff;
 
   --color-badge: #0b6513;
   --background-color-badge: #d3ffd2;
@@ -253,16 +253,15 @@
     --color-logo-text: #e2dfff;
 
     --color-surface-high: #2e2d39;
-    --color-surface-low: hsl(240, 8%, 15%);
+    --color-surface-low: rgba(35, 35, 41, 0.1);
     --color-surface-mid: hsl(240 6% 10%);
     --color-surface-lowest: hsl(0, 0%, 7%);
     --color-on-surface: #e3e3e8;
     --color-brand-hover: #bbb8ff;
     --color-on-primary-container: #e0dfff;
-    --color-surface-primary-container: #403e6a;
+    --color-surface-primary-container: rgba(64, 62, 106, 0.7);
     --color-brand-active: #d0ccff;
     --color-border-outline: #8e8d9c;
     --color-border-outline-variant: #46464f;
-    --color-surface-primary-container: #403e6a;
   }
 }

packages/excalidraw/css/variables.module.scss

@@ -79,6 +79,10 @@
   color: var(--button-color, var(--color-on-surface));
   font-family: var(--ui-font);
 
+  // background: transparent !important;
+  backdrop-filter: blur(40px);
+  -webkit-backdrop-filter: blur(40px);
+
   svg {
     width: var(--button-width, var(--lg-icon-size));
     height: var(--button-height, var(--lg-icon-size));
@@ -183,6 +187,8 @@
   border: none;
   box-shadow: 0 0 0 1px var(--color-surface-lowest);
   background-color: var(--color-surface-low);
+  backdrop-filter: blur(40px);
+  -webkit-backdrop-filter: blur(40px);
 
   &:active {
     box-shadow: 0 0 0 1px var(--color-brand-active);