TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-21 10:47:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: scales

Browse Source
This commit is contained in:
TrèsAbhi committed 2026-01-07 20:36:55 -06:00
1 parent 9bca5dccc7
commit 0cb974acf5
11 files changed
+97 -85
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

bun.lock
+3
View File
@@ -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 -1
View File
@@ -1,6 +1,6 @@
{
"common": {
"blitzkit": "BlitzKit"
"name": "BlitzKit"
},
"units": {
packages/website-ue/astro.config.ts
+26 -28
View File
@@ -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"],
packages/website-ue/package.json
+1
View File
@@ -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
+4 -52
View File
@@ -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)`,
};
---
<style is:global define:vars={accentVariables}>
<style is:global>
@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,
h1,
h2,
h3,
h4,
h5,
h6,
p {
body {
margin: 0;
}
a {
color: var(--accent-11);
}
</style>
packages/website-ue/src/components/ColorAlias.astro
+23
View File
@@ -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
+25
View File
@@ -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
+5 -1
View File
@@ -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
+1 -1
View File
@@ -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
+8 -1
View File
@@ -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
-1
View File
@@ -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;