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 @@