feat: bumps

packages/website-ue/src/components/BaseStyles.astro

@@ -34,9 +34,14 @@ import "@fontsource-variable/roboto-flex";
     --outline-focus: var(--space-1) solid var(--accent-6);
 
     --shadow-cavity:
-      inset var(--space-1) var(--space-1) var(--space-1) var(--gray-2),
-      inset calc(var(--space-1) * -1) calc(var(--space-1) * -1) var(--space-1)
-        var(--gray-4);
-    --shadow-focus: 0 0 var(--space-3) var(--accent-4);
+      inset calc(var(--space-1) * sin(45deg)) calc(var(--space-1) * sin(45deg))
+        var(--space-1) var(--black-a3),
+      inset calc(var(--space-1) * sin(45deg) * -1)
+        calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--white-a1);
+    --shadow-bump:
+      inset calc(var(--space-1) * sin(45deg)) calc(var(--space-1) * sin(45deg))
+        var(--space-1) var(--white-a3),
+      inset calc(var(--space-1) * sin(45deg) * -1)
+        calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--black-a3);
   }
 </style>

packages/website-ue/src/components/ColorScale.astro

@@ -3,11 +3,18 @@ import * as colors from "@radix-ui/colors";
 import type { Color } from "../core/ui/color";
 
 interface Props {
-  color: Color;
+  color: Color | AlphaOnlyColor;
+  alpha?: boolean;
 }
 
-const { color } = Astro.props;
-const scale = colors[`${color}Dark`];
+const ALPHA_ONLY_COLORS = ["black", "white"] as const;
+type AlphaOnlyColor = (typeof ALPHA_ONLY_COLORS)[number];
+
+const { color, alpha } = Astro.props;
+const name = `${color}${
+  ALPHA_ONLY_COLORS.includes(color as AlphaOnlyColor) ? "" : "Dark"
+}${alpha ? "A" : ""}`;
+const scale = colors[name as keyof typeof colors];
 
 let styles = "";
 
@@ -15,8 +22,8 @@ styles += ":root{";
 
 for (let i = 0; i < 12; i++) {
   const n = i + 1;
-  const value = scale[`${color}${n}` as keyof typeof scale];
-  styles += `--${color}-${n}:${value};`;
+  const value = scale[`${color}${alpha ? "A" : ""}${n}` as keyof typeof scale];
+  styles += `--${color}-${alpha ? "a" : ""}${n}:${value};`;
 }
 
 styles += "}";

packages/website-ue/src/components/Footer.astro

@@ -0,0 +1,19 @@
+<style>
+  .footer {
+    display: flex;
+    justify-content: center;
+
+    padding: var(--space-6) var(--space-4);
+
+    background-color: var(--gray-3);
+
+    .content {
+      flex: 1;
+      max-width: 52rem;
+    }
+  }
+</style>
+
+<div class="footer">
+  <div class="content">poopy</div>
+</div>

packages/website-ue/src/components/Section.astro

@@ -1,12 +1,22 @@
 <style>
   .section {
     display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
+    justify-content: center;
     padding: 0 var(--space-4);
+
+    .content {
+      flex: 1;
+      max-width: 52rem;
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
+    }
   }
 </style>
 
 <div class="section">
-  <slot />
+  <div class="content">
+    <slot />
+  </div>
 </div>

packages/website-ue/src/components/ToolCard.astro

@@ -21,6 +21,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
     display: flex;
     flex-direction: column;
     height: 10rem;
+    position: relative;
 
     border-radius: var(--space-3);
 
@@ -47,6 +48,17 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
         flex-direction: column;
       }
     }
+
+    .shadow {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      border-radius: var(--space-3);
+      box-shadow: var(--shadow-bump);
+    }
   }
 </style>
 
@@ -78,4 +90,6 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
       <CaretRightIcon />
     </Button>
   </div>
+
+  <div class="shadow"></div>
 </LinkI18n>