From 0cb974acf51cdcdf33374266ef8f7c9659b790ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Wed, 7 Jan 2026 20:36:55 -0600 Subject: [PATCH] feat: scales --- bun.lock | 3 + packages/i18n/strings/en.json | 2 +- packages/website-ue/astro.config.ts | 54 +++++++++--------- packages/website-ue/package.json | 1 + .../src/components/BaseStyles.astro | 56 ++----------------- .../src/components/ColorAlias.astro | 23 ++++++++ .../src/components/ColorScale.astro | 25 +++++++++ .../src/components/TextField/index.css | 6 +- .../src/components/TextField/index.tsx | 2 +- .../website-ue/src/layouts/BaseLayout.astro | 9 ++- packages/website/src/layouts/BaseLayout.astro | 1 - 11 files changed, 97 insertions(+), 85 deletions(-) create mode 100644 packages/website-ue/src/components/ColorAlias.astro create mode 100644 packages/website-ue/src/components/ColorScale.astro diff --git a/bun.lock b/bun.lock index 06d5d5fe7..84c1b422c 100644 --- a/bun.lock +++ b/bun.lock @@ -188,6 +188,7 @@ "@blitzkit/i18n": "workspace:*", "@bufbuild/protobuf": "^2.10.2", "@fontsource-variable/inter": "^5.2.8", + "@fontsource-variable/roboto-flex": "^5.2.8", "@radix-ui/colors": "^3.0.0", "@radix-ui/react-icons": "^1.3.2", "@react-three/drei": "^10.7.6", @@ -546,6 +547,8 @@ "@fontsource-variable/inter": ["@fontsource-variable/inter@5.2.8", "", {}, "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ=="], + "@fontsource-variable/roboto-flex": ["@fontsource-variable/roboto-flex@5.2.8", "", {}, "sha512-Q9zbz+P2VrDeIxBu9YAIG+eYpLmQF5FIJEEwAWn8En9Lao1TOISnoYcywGV+jSv7LGsHEndCR8hveXPnvCBEQQ=="], + "@fontsource/inter": ["@fontsource/inter@5.2.8", "", {}, "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg=="], "@gltf-transform/core": ["@gltf-transform/core@4.2.1", "", { "dependencies": { "property-graph": "^3.0.0" } }, "sha512-qKhrQ29KJ9K6sz7xGoGRllqPBlROjPJMQPvCLBOfgMPH3S/Ph5E0e6fD5WmwTY5QPyBsDMRqKd1Vl0ncThTXGw=="], diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json index eca1b0062..9feddb93b 100644 --- a/packages/i18n/strings/en.json +++ b/packages/i18n/strings/en.json @@ -1,6 +1,6 @@ { "common": { - "blitzkit": "BlitzKit" + "name": "BlitzKit" }, "units": { diff --git a/packages/website-ue/astro.config.ts b/packages/website-ue/astro.config.ts index 9f5d73bf2..0efa8e1a7 100644 --- a/packages/website-ue/astro.config.ts +++ b/packages/website-ue/astro.config.ts @@ -1,13 +1,11 @@ import node from "@astrojs/node"; import react from "@astrojs/react"; -import { wrapper } from "@blitzkit/i18n"; import locales from "@blitzkit/i18n/locales.json"; import strings from "@blitzkit/i18n/strings/en.json"; import { mauve, mauveDark } from "@radix-ui/colors"; import favicons from "astro-favicons"; import { defineConfig } from "astro/config"; import packageJSON from "../../package.json"; -import { tools } from "./src/core/tools/tools"; const POSSIBLE_TARGETS = ["app", "web"]; @@ -48,35 +46,35 @@ export default defineConfig({ version: packageJSON.version, - shortcuts: Object.values(tools) - .filter((tool) => !tool.disabled && !tool.href) - .map((tool) => { - const stringId = (tool.strings ?? - tool.id) as keyof typeof strings.website.tools; + // shortcuts: Object.values(tools) + // .filter((tool) => !tool.disabled && !tool.href) + // .map((tool) => { + // const stringId = (tool.strings ?? + // tool.id) as keyof typeof strings.website.tools; - return { - name: strings.website.tools[stringId].name, - name_localized: wrapper( - (strings) => strings.website.tools[stringId].name - ), - description: strings.website.tools[stringId].description, - description_localized: wrapper( - (strings) => strings.website.tools[stringId].description - ), - short_name: strings.website.tools[stringId].name, - short_name_localized: wrapper( - (strings) => strings.website.tools[stringId].name - ), - url: `/${tool.id}`, - icon: `public/assets/tools/${tool.id}.webp`, - }; - }), + // return { + // name: strings.website.tools[stringId].name, + // name_localized: wrapper( + // (strings) => strings.website.tools[stringId].name + // ), + // description: strings.website.tools[stringId].description, + // description_localized: wrapper( + // (strings) => strings.website.tools[stringId].description + // ), + // short_name: strings.website.tools[stringId].name, + // short_name_localized: wrapper( + // (strings) => strings.website.tools[stringId].name + // ), + // url: `/${tool.id}`, + // icon: `public/assets/tools/${tool.id}.webp`, + // }; + // }), manifest: { - description: strings.website.home.seo_description, - description_localized: wrapper( - (strings) => strings.website.home.seo_description - ), + // description: strings.website.home.seo_description, + // description_localized: wrapper( + // (strings) => strings.website.home.seo_description + // ), dir: "ltr", categories: ["utilities", "games", "developer", "developer tools"], diff --git a/packages/website-ue/package.json b/packages/website-ue/package.json index c9af667b7..10d32f778 100644 --- a/packages/website-ue/package.json +++ b/packages/website-ue/package.json @@ -18,6 +18,7 @@ "@blitzkit/i18n": "workspace:*", "@bufbuild/protobuf": "^2.10.2", "@fontsource-variable/inter": "^5.2.8", + "@fontsource-variable/roboto-flex": "^5.2.8", "@radix-ui/colors": "^3.0.0", "@radix-ui/react-icons": "^1.3.2", "@react-three/drei": "^10.7.6", diff --git a/packages/website-ue/src/components/BaseStyles.astro b/packages/website-ue/src/components/BaseStyles.astro index c84a6a836..901659799 100644 --- a/packages/website-ue/src/components/BaseStyles.astro +++ b/packages/website-ue/src/components/BaseStyles.astro @@ -1,46 +1,9 @@ ---- -import type { Color } from "../pages/styles/colors/[accent].css"; - -interface Props { - accent: Color; -} - -const { accent } = Astro.props; - -const accentVariables = { - "accent-1": `var(--${accent}-1)`, - "accent-2": `var(--${accent}-2)`, - "accent-3": `var(--${accent}-3)`, - "accent-4": `var(--${accent}-4)`, - "accent-5": `var(--${accent}-5)`, - "accent-6": `var(--${accent}-6)`, - "accent-7": `var(--${accent}-7)`, - "accent-8": `var(--${accent}-8)`, - "accent-9": `var(--${accent}-9)`, - "accent-10": `var(--${accent}-10)`, - "accent-11": `var(--${accent}-11)`, - "accent-12": `var(--${accent}-12)`, -}; ---- - - diff --git a/packages/website-ue/src/components/ColorAlias.astro b/packages/website-ue/src/components/ColorAlias.astro new file mode 100644 index 000000000..64f5a52a8 --- /dev/null +++ b/packages/website-ue/src/components/ColorAlias.astro @@ -0,0 +1,23 @@ +--- +import type { Color } from "../pages/styles/colors/[accent].css"; + +interface Props { + color: Color; + alias: string; +} + +const { color, alias } = Astro.props; + +let styles = ""; + +styles += ":root{"; + +for (let i = 0; i < 12; i++) { + const n = i + 1; + styles += `--${alias}-${n}:var(--${color}-${n});`; +} + +styles += "}"; +--- + + diff --git a/packages/website-ue/src/components/ColorScale.astro b/packages/website-ue/src/components/ColorScale.astro new file mode 100644 index 000000000..0b379e44f --- /dev/null +++ b/packages/website-ue/src/components/ColorScale.astro @@ -0,0 +1,25 @@ +--- +import * as colors from "@radix-ui/colors"; +import type { Color } from "../pages/styles/colors/[accent].css"; + +interface Props { + color: Color; +} + +const { color } = Astro.props; +const scale = colors[`${color}Dark`]; + +let styles = ""; + +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};`; +} + +styles += "}"; +--- + + diff --git a/packages/website-ue/src/components/TextField/index.css b/packages/website-ue/src/components/TextField/index.css index de770b196..ce483a7ac 100644 --- a/packages/website-ue/src/components/TextField/index.css +++ b/packages/website-ue/src/components/TextField/index.css @@ -1,4 +1,4 @@ -input { +.text-field { min-width: 0; max-width: var(--space-9); @@ -12,4 +12,8 @@ input { font-weight: var(--weight-medium); font-size: var(--font-size-regular); + + &[data-has-icon="true"] { + padding-left: var(--space-3); + } } diff --git a/packages/website-ue/src/components/TextField/index.tsx b/packages/website-ue/src/components/TextField/index.tsx index e042cba7e..06304618a 100644 --- a/packages/website-ue/src/components/TextField/index.tsx +++ b/packages/website-ue/src/components/TextField/index.tsx @@ -2,5 +2,5 @@ import type { ComponentProps } from "react"; import "./index.css"; export function TextField(props: ComponentProps<"input">) { - return ; + return ; } diff --git a/packages/website-ue/src/layouts/BaseLayout.astro b/packages/website-ue/src/layouts/BaseLayout.astro index 1f0a640ff..7f5709e91 100644 --- a/packages/website-ue/src/layouts/BaseLayout.astro +++ b/packages/website-ue/src/layouts/BaseLayout.astro @@ -2,6 +2,8 @@ import "@fontsource-variable/inter"; 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 Navbar from "../components/Navbar.astro"; import type { Color } from "../pages/styles/colors/[accent].css"; @@ -16,7 +18,12 @@ const { accent, noNavbar } = Astro.props; - + + + + + + diff --git a/packages/website/src/layouts/BaseLayout.astro b/packages/website/src/layouts/BaseLayout.astro index 4fce031c1..4b7f7dc09 100644 --- a/packages/website/src/layouts/BaseLayout.astro +++ b/packages/website/src/layouts/BaseLayout.astro @@ -11,7 +11,6 @@ import LocaleRedirector from "../components/LocaleRedirector.astro"; import Meta from "../components/Meta.astro"; import Navbar from "../components/Navbar.astro"; import Servicing from "../components/Servicing.astro"; -import "./base.css"; export interface Props { noFooter?: boolean;