feat: scales

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/[email protected]", "", {}, "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ=="],
 
+    "@fontsource-variable/roboto-flex": ["@fontsource-variable/[email protected]", "", {}, "sha512-Q9zbz+P2VrDeIxBu9YAIG+eYpLmQF5FIJEEwAWn8En9Lao1TOISnoYcywGV+jSv7LGsHEndCR8hveXPnvCBEQQ=="],
+
     "@fontsource/inter": ["@fontsource/[email protected]", "", {}, "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg=="],
 
     "@gltf-transform/core": ["@gltf-transform/[email protected]", "", { "dependencies": { "property-graph": "^3.0.0" } }, "sha512-qKhrQ29KJ9K6sz7xGoGRllqPBlROjPJMQPvCLBOfgMPH3S/Ph5E0e6fD5WmwTY5QPyBsDMRqKd1Vl0ncThTXGw=="],

packages/i18n/strings/en.json

@@ -1,6 +1,6 @@
 {
   "common": {
-    "blitzkit": "BlitzKit"
+    "name": "BlitzKit"
   },
 
   "units": {

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)
+      // shortcuts: Object.values(tools)
-        .filter((tool) => !tool.disabled && !tool.href)
+      //   .filter((tool) => !tool.disabled && !tool.href)
-        .map((tool) => {
+      //   .map((tool) => {
-          const stringId = (tool.strings ??
+      //     const stringId = (tool.strings ??
-            tool.id) as keyof typeof strings.website.tools;
+      //       tool.id) as keyof typeof strings.website.tools;
 
-          return {
+      //     return {
-            name: strings.website.tools[stringId].name,
+      //       name: strings.website.tools[stringId].name,
-            name_localized: wrapper(
+      //       name_localized: wrapper(
-              (strings) => strings.website.tools[stringId].name
+      //         (strings) => strings.website.tools[stringId].name
-            ),
+      //       ),
-            description: strings.website.tools[stringId].description,
+      //       description: strings.website.tools[stringId].description,
-            description_localized: wrapper(
+      //       description_localized: wrapper(
-              (strings) => strings.website.tools[stringId].description
+      //         (strings) => strings.website.tools[stringId].description
-            ),
+      //       ),
-            short_name: strings.website.tools[stringId].name,
+      //       short_name: strings.website.tools[stringId].name,
-            short_name_localized: wrapper(
+      //       short_name_localized: wrapper(
-              (strings) => strings.website.tools[stringId].name
+      //         (strings) => strings.website.tools[stringId].name
-            ),
+      //       ),
-            url: `/${tool.id}`,
+      //       url: `/${tool.id}`,
-            icon: `public/assets/tools/${tool.id}.webp`,
+      //       icon: `public/assets/tools/${tool.id}.webp`,
-          };
+      //     };
-        }),
+      //   }),
 
       manifest: {
-        description: strings.website.home.seo_description,
+        // description: strings.website.home.seo_description,
-        description_localized: wrapper(
+        // description_localized: wrapper(
-          (strings) => strings.website.home.seo_description
+        //   (strings) => strings.website.home.seo_description
-        ),
+        // ),
 
         dir: "ltr",
         categories: ["utilities", "games", "developer", "developer tools"],

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",

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

@@ -1,46 +1,9 @@
----
+<style is:global>
-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)`,
-};
----
-
-<style is:global define:vars={accentVariables}>
   @import "@radix-ui/colors/mauve-dark.css";
   @import "@radix-ui/colors/mauve-alpha.css";
+  @import "@fontsource-variable/roboto-flex";
 
   body {
-    --gray-1: var(--mauve-1);
-    --gray-2: var(--mauve-2);
-    --gray-3: var(--mauve-3);
-    --gray-4: var(--mauve-4);
-    --gray-5: var(--mauve-5);
-    --gray-6: var(--mauve-6);
-    --gray-7: var(--mauve-7);
-    --gray-8: var(--mauve-8);
-    --gray-9: var(--mauve-9);
-    --gray-10: var(--mauve-10);
-    --gray-11: var(--mauve-11);
-    --gray-12: var(--mauve-12);
-
     --space-0: 0.0625rem;
     --space-1: 0.125rem;
     --space-2: 0.25rem;
@@ -66,24 +29,13 @@ const accentVariables = {
 
     background-color: var(--gray-1);
     color: var(--gray-12);
-    font-family: "Inter Variable", sans-serif;
+    font-family: "Roboto Flex", sans-serif;
 
     display: flex;
     flex-direction: column;
   }
 
-  body,
+  body {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
     margin: 0;
   }
-
-  a {
-    color: var(--accent-11);
-  }
 </style>

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 += "}";
+---
+
+<style set:html={styles}></style>

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 += "}";
+---
+
+<style set:html={styles}></style>

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);
+  }
 }

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 <input {...props} />;
+  return <input className="text-field" {...props} />;
 }

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;
 <html>
   <head>
     <BaseMeta />
-    <BaseStyles {accent} />
+
+    <ColorScale color="mauve" />
+    <ColorScale color={accent} />
+    <ColorAlias color="mauve" alias="gray" />
+    <ColorAlias color={accent} alias="accent" />
+    <BaseStyles />
   </head>
 
   <body class="dark">

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;