finalize kits style changes

.env.development

@@ -13,7 +13,7 @@ VITE_APP_WS_SERVER_URL=http://localhost:5001
 # set this only if using the collaboration workflow we use on excalidraw.com
 VITE_APP_PORTAL_URL=
 
-VITE_APP_PLUS_LP=https://plus.excalidraw.com
+VITE_APP_PLUS_LP=
 VITE_APP_PLUS_APP=https://app.excalidraw.com
 
 VITE_APP_AI_BACKEND=

.env.production

@@ -17,6 +17,7 @@ VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfu
 # not needed for self hosted
 VITE_APP_PORTAL_URL=
 VITE_APP_AI_BACKEND=
+VITE_APP_PLUS_LP=
 
 # production-only vars
 VITE_APP_GOOGLE_ANALYTICS_ID=

excalidraw-app/components/AppWelcomeScreen.tsx

@@ -43,7 +43,9 @@ export const AppWelcomeScreen: React.FC<{
       <WelcomeScreen.Hints.ToolbarHint />
       <WelcomeScreen.Hints.HelpHint />
       <WelcomeScreen.Center>
-        <WelcomeScreen.Center.Logo />
+        {import.meta.env.VITE_APP_PLUS_LP &&
+          <WelcomeScreen.Center.Logo />
+        }
         <WelcomeScreen.Center.Heading>
           {headingContent}
         </WelcomeScreen.Center.Heading>
@@ -55,7 +57,7 @@ export const AppWelcomeScreen: React.FC<{
               onSelect={() => props.setCollabDialogShown(true)}
             />
           )}
-          {!isExcalidrawPlusSignedUser && (
+          {!isExcalidrawPlusSignedUser && import.meta.env.VITE_APP_PLUS_LP && (
             <WelcomeScreen.Center.MenuItemLink
               href={`${
                 import.meta.env.VITE_APP_PLUS_LP

excalidraw-app/index.html

@@ -23,9 +23,9 @@
     <meta name="image" content="https://excalidraw.com/og-image-2.png" />
 
     <!-- Open Graph / Facebook -->
-    <meta property="og:site_name" content="Excalidraw" />
+    <meta property="og:site_name" content="Draw" />
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://excalidraw.com" />
+    <meta property="og:url" content="https://kits.blog" />
     <meta
       property="og:title"
       content="Excalidraw — Collaborative whiteboarding made easy"
@@ -37,23 +37,6 @@
     />
     <meta property="og:image" content="https://excalidraw.com/og-image-2.png" />
 
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:site" content="@excalidraw" />
-    <meta property="twitter:url" content="https://excalidraw.com" />
-    <meta
-      property="twitter:title"
-      content="Excalidraw — Collaborative whiteboarding made easy"
-    />
-    <meta
-      property="twitter:description"
-      content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
-    />
-    <meta
-      property="twitter:image"
-      content="https://excalidraw.com/og-twitter-v2.png"
-    />
-
     <!-- General tags -->
     <meta
       name="description"
@@ -99,9 +82,9 @@
     </script>
     <% } %>
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="ios/icons/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="kits-icon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="kits-icon-16.png" />
 
     <!-- Excalidraw version -->
     <meta name="version" content="{version}" />

excalidraw-app/index.scss

@@ -1,8 +1,8 @@
 .excalidraw {
-  --color-primary-contrast-offset: #625ee0; // to offset Chubb illusion
+  --color-primary-contrast-offset: #00a3d3; // to offset Chubb illusion
 
   &.theme--dark {
-    --color-primary-contrast-offset: #726dff; // to offset Chubb illusion
+    --color-primary-contrast-offset: #00a3d3; // to offset Chubb illusion
   }
   .footer-center {
     justify-content: flex-end;

excalidraw-app/start/start.scss

@@ -47,8 +47,7 @@ a {
 }
 
 .kits-content-left img {
-  width: 40%;
-  height: 40%;
+  width: 272px;
 }
 
 .kits-content-right {

packages/excalidraw/components/Toolbar.scss

@@ -37,7 +37,7 @@
     &--selected,
     &--selected:hover {
       background: var(--color-primary-light);
-      color: var(--color-primary);
+      color: $oc-white;
     }
   }
 

packages/excalidraw/components/welcome-screen/WelcomeScreen.Center.tsx

@@ -110,7 +110,7 @@ Center.displayName = "Center";
 const Logo = ({ children }: { children?: React.ReactNode }) => {
   return (
     <div className="welcome-screen-center__logo virgil welcome-screen-decor">
-      {children || <ExcalidrawLogo withText />}
+      {children || <ExcalidrawLogo />}
     </div>
   );
 };

packages/excalidraw/css/theme.scss

@@ -137,15 +137,15 @@
   --border-radius-md: 0.375rem;
   --border-radius-lg: 0.5rem;
 
-  --color-surface-high: hsl(244, 100%, 97%);
-  --color-surface-mid: hsl(240 25% 96%);
-  --color-surface-low: hsl(240 25% 94%);
+  --color-surface-high: var(--color-gray-20);
+  --color-surface-mid: white;
+  --color-surface-low: white;
   --color-surface-lowest: #ffffff;
   --color-on-surface: #1b1b1f;
-  --color-brand-hover: #5753d0;
+  --color-brand-hover: var(--color-primary-darker);
   --color-on-primary-container: #030064;
   --color-surface-primary-container: #e0dfff;
-  --color-brand-active: #4440bf;
+  --color-brand-active: var(--color-primary-darker);
   --color-border-outline: #767680;
   --color-border-outline-variant: #c5c5d0;
   --color-surface-primary-container: #e0dfff;
@@ -170,7 +170,7 @@
     --dialog-border-color: var(--color-gray-80);
     --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
     --focus-highlight-color: #{$oc-blue-6};
-    --icon-fill-color: var(--white);
+    --icon-fill-color: #{$oc-white};
     --icon-green-fill-color: var(--color-primary);
     --default-bg-color: #121212;
     --input-bg-color: #121212;
@@ -245,7 +245,7 @@
     --color-surface-mid: hsl(240 6% 10%);
     --color-surface-lowest: hsl(0, 0%, 7%);
     --color-on-surface: #e3e3e8;
-    --color-brand-hover: #bbb8ff;
+    --color-brand-hover: var(--color-primary-darker);
     --color-on-primary-container: #e0dfff;
     --color-surface-primary-container: #403e6a;
     --color-brand-active: #d0ccff;

packages/excalidraw/css/variables.module.scss

@@ -74,7 +74,7 @@
   }
 
   &:hover {
-    background-color: var(--button-hover-bordwe, var(--default-border-color));
+    background-color: var(--button-hover-border, var(--default-border-color));
     border-color: var(
       --button-hover-border,
       var(--button-border, var(--default-border-color))

packages/excalidraw/renderer/renderElement.ts

@@ -572,7 +572,7 @@ export const renderSelectionElement = (
 ) => {
   context.save();
   context.translate(element.x + appState.scrollX, element.y + appState.scrollY);
-  context.fillStyle = "rgba(0, 0, 200, 0.04)";
+  context.fillStyle = "rgba(0, 163, 211, 0.04)";
 
   // render from 0.5px offset  to get 1px wide line
   // https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540
@@ -582,7 +582,7 @@ export const renderSelectionElement = (
 
   context.fillRect(offset, offset, element.width, element.height);
   context.lineWidth = 1 / appState.zoom.value;
-  context.strokeStyle = " rgb(105, 101, 219)";
+  context.strokeStyle = " rgb(0, 163, 211)";
   context.strokeRect(offset, offset, element.width, element.height);
 
   context.restore();