diff --git a/packages/website-ue/src/components/BaseStyles.astro b/packages/website-ue/src/components/BaseStyles.astro index d9041feb0..48c763af3 100644 --- a/packages/website-ue/src/components/BaseStyles.astro +++ b/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); } diff --git a/packages/website-ue/src/components/ColorScale.astro b/packages/website-ue/src/components/ColorScale.astro index 817d00f35..8f19135c2 100644 --- a/packages/website-ue/src/components/ColorScale.astro +++ b/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 += "}"; diff --git a/packages/website-ue/src/components/Footer.astro b/packages/website-ue/src/components/Footer.astro new file mode 100644 index 000000000..1ed27832c --- /dev/null +++ b/packages/website-ue/src/components/Footer.astro @@ -0,0 +1,19 @@ + + + diff --git a/packages/website-ue/src/components/Section.astro b/packages/website-ue/src/components/Section.astro index d0e9af505..5839af491 100644 --- a/packages/website-ue/src/components/Section.astro +++ b/packages/website-ue/src/components/Section.astro @@ -1,12 +1,22 @@
- +
+ +
diff --git a/packages/website-ue/src/components/ToolCard.astro b/packages/website-ue/src/components/ToolCard.astro index ec1490a9b..c282da022 100644 --- a/packages/website-ue/src/components/ToolCard.astro +++ b/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); + } } @@ -78,4 +90,6 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools]; + +
diff --git a/packages/website-ue/src/layouts/BaseLayout.astro b/packages/website-ue/src/layouts/BaseLayout.astro index 3a1ada42e..5e48694ed 100644 --- a/packages/website-ue/src/layouts/BaseLayout.astro +++ b/packages/website-ue/src/layouts/BaseLayout.astro @@ -3,6 +3,7 @@ import BaseMeta from "../components/BaseMeta.astro"; import BaseStyles from "../components/BaseStyles.astro"; import ColorAlias from "../components/ColorAlias.astro"; import ColorScale from "../components/ColorScale.astro"; +import Footer from "../components/Footer.astro"; import Navbar from "../components/Navbar.astro"; import type { Color } from "../core/ui/color"; @@ -42,6 +43,9 @@ const { accent, noNavbar } = Astro.props; {!noNavbar && } + + + {(