From 05b2362bccb2e9c0e8623342c3f6f5dab87444dd Mon Sep 17 00:00:00 2001
From: Michael Taranto <michael.taranto@gmail.com>
Date: Fri, 28 Jun 2024 10:17:59 +1000
Subject: [PATCH] site: Update example bgs from checkers to dots

---
 .../src/App/ThemeSetting/ThemedExample.css.ts | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/site/src/App/ThemeSetting/ThemedExample.css.ts b/site/src/App/ThemeSetting/ThemedExample.css.ts
index e8db5bd2c81..43e397bb30a 100644
--- a/site/src/App/ThemeSetting/ThemedExample.css.ts
+++ b/site/src/App/ThemeSetting/ThemedExample.css.ts
@@ -7,25 +7,20 @@ export const unthemedBorderRadius = style({
 });
 
 const bgColor = createVar();
-const cubeColor = createVar();
-const cubeSize = createVar();
+const dotColor = createVar();
+const dotSize = createVar();
 export const canvas = style([
   {
     vars: {
-      [cubeSize]: '12px',
+      [dotSize]: '12px',
     },
-    backgroundColor: bgColor,
-    backgroundImage: [
-      `linear-gradient(45deg, ${cubeColor} 25%, transparent 25%, transparent 75%, ${cubeColor} 75%, ${cubeColor})`,
-      `linear-gradient(45deg, ${cubeColor} 25%, transparent 25%, transparent 75%, ${cubeColor} 75%, ${cubeColor})`,
-    ].join(', '),
-    backgroundSize: `calc(${cubeSize} * 2) calc(${cubeSize} * 2)`,
-    backgroundPosition: `0 0, ${cubeSize} ${cubeSize}`,
+    backgroundImage: `radial-gradient(${dotColor} 1px, transparent 0)`,
+    backgroundSize: `${dotSize} ${dotSize}`,
   },
 ]);
 
 const darkVars = {
-  [cubeColor]: 'rgba(255,255,255, .08)',
+  [dotColor]: 'rgba(255,255,255, .1)',
   [bgColor]: tokens.color.background.bodyDark,
 };
 export const explicitDark = style({
@@ -36,7 +31,7 @@ export const adaptiveCanvas = style(
   colorModeStyle({
     lightMode: {
       vars: {
-        [cubeColor]: 'rgba(0,0,0, .04)',
+        [dotColor]: 'rgba(0,0,0, .1)',
         [bgColor]: tokens.color.background.body,
       },
     },