migrate 1

packages/website/src/components/AesonPlug/index.module.css

@@ -0,0 +1,12 @@
+.plug {
+  display: flex;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+
+    justify-content: center;
+
+    padding: var(--space-3) var(--space-5);
+  }
+}

packages/website/src/components/AesonPlug/index.tsx

@@ -1,5 +1,8 @@
-import { Flex, Heading, Link, Text } from '@radix-ui/themes';
-import { Var } from '../core/radix/var';
+import { Var } from "../../core/radix/var";
+import { Heading } from "../Heading";
+import { Link } from "../Link";
+import { Text } from "../Text";
+import styles from "./index.module.css";
 
 export function AesonPlug() {
   return (
@@ -9,25 +12,26 @@ export function AesonPlug() {
       href="https://discord.gg/WHdER7ZPAD"
       underline="hover"
     >
-      <Flex
+      <div
+        className={styles.plug}
         style={{
-          backgroundColor: Var('green-3'),
-          borderRadius: Var('radius-3'),
-          overflow: 'hidden',
+          backgroundColor: Var("green-3"),
+          borderRadius: Var("radius-3"),
+          overflow: "hidden",
         }}
       >
         <img
           src="/assets/images/third-party/wotb-news.png"
-          style={{ width: '6rem', height: '6rem', objectFit: 'cover' }}
+          style={{ width: "6rem", height: "6rem", objectFit: "cover" }}
         />
 
-        <Flex py="3" px="5" direction="column" justify="center">
+        <div className={styles.content}>
           <Heading size="5">Preview brought to you by WoT Blitz News</Heading>
           <Text color="gray">
             Join the Discord for the absolute latest news
           </Text>
-        </Flex>
-      </Flex>
+        </div>
+      </div>
     </Link>
   );
 }

packages/website/src/components/Heading/index.module.css

@@ -0,0 +1,25 @@
+.heading {
+  &[data-size="1"] {
+    font-size: var(--font-size-heading-1);
+  }
+
+  &[data-size="2"] {
+    font-size: var(--font-size-heading-2);
+  }
+
+  &[data-size="3"] {
+    font-size: var(--font-size-heading-3);
+  }
+
+  &[data-size="4"] {
+    font-size: var(--font-size-heading-4);
+  }
+
+  &[data-size="5"] {
+    font-size: var(--font-size-heading-5);
+  }
+
+  &[data-size="6"] {
+    font-size: var(--font-size-heading-6);
+  }
+}

packages/website/src/components/Heading/index.tsx

@@ -0,0 +1,23 @@
+import { classNames } from "../../ui/classNames";
+import { Text, type TextProps } from "../Text";
+import styles from "./index.module.css";
+
+export interface HeadingProps extends Omit<TextProps, "size"> {
+  size?: `${1 | 2 | 3 | 4 | 5 | 6}`;
+}
+
+export function Heading({
+  className,
+  weight,
+  size = "1",
+  ...props
+}: HeadingProps) {
+  return (
+    <Text
+      {...props}
+      weight={weight ?? "medium"}
+      className={classNames(styles.heading, className)}
+      data-size={size}
+    />
+  );
+}

packages/website/src/components/HelpTranslate.astro

@@ -0,0 +1,41 @@
+---
+import { literals } from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
+import { getStrings } from "../core/i18n/getStrings";
+import { Link } from "./Link";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = getStrings(locale)
+---
+
+<style>
+  .center {
+    display: flex;
+    justify-content: center;
+  }
+</style>
+
+{
+  locale !== locales.default && (
+    <div class="center">
+      <Link
+        href="https://crowdin.com/project/blitzkrieg"
+        target="_blank"
+        underline="always"
+      >
+        {literals(strings.website.home.help_translate, {
+          name: "BlitzKit",
+          language:
+            strings.common.locales[
+              locale as keyof typeof strings.common.locales
+            ],
+        })}
+      </Link>
+    </div>
+  )
+}

packages/website/src/components/Link/index.module.css

@@ -0,0 +1,23 @@
+.link {
+  text-decoration-color: currentColor;
+  cursor: pointer;
+
+  display: inline;
+  align-items: center;
+  gap: var(--space-3);
+
+  &[data-underline="hover"],
+  &[data-underline="never"] {
+    text-decoration: none;
+  }
+
+  &[data-underline="hover"]:hover,
+  &[data-underline="hover"]:focus {
+    text-decoration: underline;
+  }
+
+  svg {
+    width: 1.25em;
+    height: 1.25em;
+  }
+}

packages/website/src/components/Link/index.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import type { Color } from "../../ui/color";
+import styles from "./index.module.css";
+
+export interface LinkProps extends ComponentProps<"a"> {
+  underline?: "always" | "hover" | "never";
+  highContrast?: boolean;
+  color?: Color | "accent";
+}
+
+export function Link({
+  highContrast,
+  className,
+  underline = "always",
+  color = "accent",
+  style,
+  ...props
+}: LinkProps) {
+  return (
+    <a
+      className={classNames(styles.link, className)}
+      style={{
+        color: `var(--${color}-${highContrast ? 12 : 11})`,
+        ...style,
+      }}
+      {...props}
+      data-underline={underline}
+      data-high-contrast={highContrast}
+    />
+  );
+}

packages/website/src/components/Text/index.module.css

@@ -0,0 +1,33 @@
+.text {
+  font-size: var(--font-size-regular);
+
+  &[data-size="minor"] {
+    font-size: var(--font-size-minor);
+  }
+  &[data-size="major"] {
+    font-size: var(--font-size-major);
+  }
+
+  &[data-weight="light"] {
+    font-weight: var(--weight-light);
+  }
+  &[data-weight="regular"] {
+    font-weight: var(--weight-regular);
+  }
+  &[data-weight="medium"] {
+    font-weight: var(--weight-medium);
+  }
+  &[data-weight="bold"] {
+    font-weight: var(--weight-bold);
+  }
+  &[data-weight="black"] {
+    font-weight: var(--weight-black);
+  }
+
+  &[data-align="center"] {
+    text-align: center;
+  }
+  &[data-align="right"] {
+    text-align: right;
+  }
+}

packages/website/src/components/Text/index.tsx

@@ -0,0 +1,45 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import type { ColorWithBW } from "../../ui/color";
+import styles from "./index.module.css";
+
+export interface TextProps extends ComponentProps<"span"> {
+  weight?: "light" | "regular" | "medium" | "bold" | "black";
+  lowContrast?: boolean;
+  size?: "regular" | "minor" | "major";
+  align?: "left" | "center" | "right";
+  color?: ColorWithBW;
+}
+
+export function Text({
+  lowContrast,
+  className,
+  size = "regular",
+  weight,
+  style,
+  align,
+  color = "gray",
+  ...props
+}: TextProps) {
+  const scale = color === "gray" && lowContrast ? "white" : color;
+  const isBW = color === "black" || color === "white";
+  let power: string | number = isBW ? "a12" : 12;
+
+  if (lowContrast) {
+    power = color === "gray" ? "a9" : isBW ? "a11" : 11;
+  }
+
+  return (
+    <span
+      className={classNames(styles.text, className)}
+      data-low-contrast={lowContrast}
+      data-size={size}
+      data-weight={weight}
+      data-align={align === "left" ? undefined : align}
+      style={{
+        color: `var(--${scale}-${power})`,
+      }}
+      {...props}
+    />
+  );
+}

packages/website/src/pages/[...chunk_default]/[...locale]/index.astro

@@ -2,9 +2,8 @@
 import { AstroSeo } from "@astrolib/seo";
 import { assertSecret } from "@blitzkit/core";
 import locales from "@blitzkit/i18n/locales.json";
-import { literals } from "@blitzkit/i18n/src/literals";
-import { Flex, Link } from "@radix-ui/themes";
 import { AesonPlug } from "../../../components/AesonPlug";
+import HelpTranslate from "../../../components/HelpTranslate.astro";
 import HomeCosmetics from "../../../components/HomeCosmetics.astro";
 import HomeGames from "../../../components/HomeGames.astro";
 import HomeHero from "../../../components/HomeHero.astro";
@@ -70,25 +69,7 @@ export const getStaticPaths = mixStaticPaths(_getStaticPaths, () => {
 <BaseLayout {locale}>
   <HomeHero {locale} />
 
-  {
-    locale !== locales.default && (
-      <Flex justify="center" mb="4">
-        <Link
-          href="https://crowdin.com/project/blitzkrieg"
-          target="_blank"
-          underline="always"
-        >
-          {literals(strings.website.home.help_translate, {
-            name: "BlitzKit",
-            language:
-              strings.common.locales[
-                locale as keyof typeof strings.common.locales
-              ],
-          })}
-        </Link>
-      </Flex>
-    )
-  }
+  <HelpTranslate {locale} />
 
   <Plugs client:idle />
 

packages/website/src/ui/classNames.ts

@@ -0,0 +1,3 @@
+export function classNames(...classes: (string | undefined)[]) {
+  return classes.filter(Boolean).join(" ");
+}

packages/website/src/ui/color.ts

@@ -0,0 +1,10 @@
+import type * as colors from "@radix-ui/colors";
+
+const ignoreEndings = ["A", "P3", "Dark", "DarkA", "DarkP3"] as const;
+
+export type Color = Exclude<
+  keyof typeof colors,
+  `${string}${(typeof ignoreEndings)[number]}` | "__esModule"
+>;
+
+export type ColorWithBW = Color | "black" | "white";