Finish basic welcome experience

styles/src/styleTree/components.ts

@@ -93,7 +93,7 @@ interface Text {
     underline?: boolean
 }
 
-interface TextProperties {
+export interface TextProperties {
     size?: keyof typeof fontSizes
     weight?: FontWeight
     underline?: boolean

styles/src/styleTree/hoverPopover.ts

@@ -2,44 +2,44 @@ import { ColorScheme } from "../themes/common/colorScheme"
 import { background, border, text } from "./components"
 
 export default function HoverPopover(colorScheme: ColorScheme) {
-    let layer = colorScheme.middle
-    let baseContainer = {
-        background: background(layer),
-        cornerRadius: 8,
-        padding: {
-            left: 8,
-            right: 8,
-            top: 4,
-            bottom: 4,
-        },
-        shadow: colorScheme.popoverShadow,
-        border: border(layer),
-        margin: {
-            left: -8,
-        },
-    }
+  let layer = colorScheme.middle
+  let baseContainer = {
+    background: background(layer),
+    cornerRadius: 8,
+    padding: {
+      left: 8,
+      right: 8,
+      top: 4,
+      bottom: 4,
+    },
+    shadow: colorScheme.popoverShadow,
+    border: border(layer),
+    margin: {
+      left: -8,
+    },
+  }
 
-    return {
-        container: baseContainer,
-        infoContainer: {
-            ...baseContainer,
-            background: background(layer, "accent"),
-            border: border(layer, "accent"),
-        },
-        warningContainer: {
-            ...baseContainer,
-            background: background(layer, "warning"),
-            border: border(layer, "warning"),
-        },
-        errorContainer: {
-            ...baseContainer,
-            background: background(layer, "negative"),
-            border: border(layer, "negative"),
-        },
-        block_style: {
-            padding: { top: 4 },
-        },
-        prose: text(layer, "sans", { size: "sm" }),
-        highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
-    }
+  return {
+    container: baseContainer,
+    infoContainer: {
+      ...baseContainer,
+      background: background(layer, "accent"),
+      border: border(layer, "accent"),
+    },
+    warningContainer: {
+      ...baseContainer,
+      background: background(layer, "warning"),
+      border: border(layer, "warning"),
+    },
+    errorContainer: {
+      ...baseContainer,
+      background: background(layer, "negative"),
+      border: border(layer, "negative"),
+    },
+    block_style: {
+      padding: { top: 4 },
+    },
+    prose: text(layer, "sans", { size: "sm" }),
+    highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
+  }
 }

styles/src/styleTree/welcome.ts

@@ -1,12 +1,11 @@
 
 import { ColorScheme } from "../themes/common/colorScheme";
-import { border, background, foreground, text } from "./components";
+import { border, background, foreground, text, TextProperties } from "./components";
 
 
 export default function welcome(colorScheme: ColorScheme) {
   let layer = colorScheme.highest;
 
-  // TODO
   let checkboxBase = {
     cornerRadius: 4,
     padding: {
@@ -18,20 +17,30 @@ export default function welcome(colorScheme: ColorScheme) {
     shadow: colorScheme.popoverShadow,
     border: border(layer),
     margin: {
-      left: 8,
       right: 8,
       top: 5,
       bottom: 5
     },
   };
+  
+  let interactive_text_size: TextProperties = { size: "md" }
 
   return {
+    pageWidth: 450,
+    logoSubheading: {
+      ...text(layer, "sans", { size: "lg" }),
+      margin: {
+        top: 10,
+        bottom: 7,
+      },
+    },
     button: {
       background: background(layer),
-      border: border(layer),
-      cornerRadius: 6,
+      border: border(layer, "active"),
+      cornerRadius: 4,
       margin: {
-        top: 1,
+        top: 8,
+        bottom: 7
       },
       padding: {
         top: 1,
@@ -39,50 +48,46 @@ export default function welcome(colorScheme: ColorScheme) {
         left: 7,
         right: 7,
       },
-      ...text(layer, "sans", "variant", { size: "xs" }),
+      ...text(layer, "sans", "hovered", interactive_text_size),
       hover: {
-        ...text(layer, "sans", "hovered", { size: "xs" }),
+        ...text(layer, "sans", "hovered", interactive_text_size),
         background: background(layer, "hovered"),
         border: border(layer, "hovered"),
       },
     },
     checkbox: {
+      label: {
+          ...text(layer, "sans", interactive_text_size),
+          // Also supports margin, container, border, etc.
+      },
+      container: {
+        margin: {
+          top: 5,
+        },
+      },
       width: 12,
       height: 12,
-      icon: "icons/check_12.svg",
-      iconColor: foreground(layer, "on"),
+      checkIcon: "icons/check_12.svg",
+      checkIconColor: foreground(layer, "on"),
       default: {
         ...checkboxBase,
         background: background(layer, "default"),
-        border: {
-          color: foreground(layer, "hovered"),
-          width: 1,
-        }
+        border: border(layer, "active")
       },
       checked: {
         ...checkboxBase,
         background: background(layer, "hovered"),
-        border: {
-          color: foreground(layer, "hovered"),
-          width: 1,
-        }
+        border: border(layer, "active")
       },
       hovered: {
         ...checkboxBase,
         background: background(layer, "hovered"),
-
-        border: {
-          color: foreground(layer, "hovered"),
-          width: 1,
-        }
+        border: border(layer, "hovered")
       },
       hoveredAndChecked: {
         ...checkboxBase,
         background: background(layer, "hovered"),
-        border: {
-          color: foreground(layer, "hovered"),
-          width: 1,
-        }
+        border: border(layer, "active")
       }
     }
   }