diff --git a/app/globals.css b/app/globals.css index 02687bd..db35a28 100644 --- a/app/globals.css +++ b/app/globals.css @@ -28,6 +28,14 @@ --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); + --color-chart-series-1: var(--chart-1); + --color-chart-series-2: var(--chart-2); + --color-chart-series-3: var(--chart-3); + --color-chart-series-4: var(--chart-4); + --color-chart-series-5: var(--chart-5); + --color-chart-series-6: var(--chart-1); + --color-chart-series-7: var(--chart-2); + --color-chart-series-8: var(--chart-3); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); @@ -64,6 +72,14 @@ --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); + --color-chart-series-1: var(--chart-1); + --color-chart-series-2: var(--chart-2); + --color-chart-series-3: var(--chart-3); + --color-chart-series-4: var(--chart-4); + --color-chart-series-5: var(--chart-5); + --color-chart-series-6: var(--chart-1); + --color-chart-series-7: var(--chart-2); + --color-chart-series-8: var(--chart-3); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); diff --git a/package.json b/package.json index fe4d7b4..1394406 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,10 @@ "version": "0.1.0", "private": true, "scripts": { + "check:theme-tokens": "node scripts/check-global-theme-tokens.mjs", "build": "next build", "dev": "next dev", - "lint": "next lint", + "lint": "npm run check:theme-tokens && next lint", "start": "next start" }, "dependencies": { diff --git a/scripts/check-global-theme-tokens.mjs b/scripts/check-global-theme-tokens.mjs new file mode 100644 index 0000000..5fb2fd1 --- /dev/null +++ b/scripts/check-global-theme-tokens.mjs @@ -0,0 +1,77 @@ +#!/usr/bin/env node + +import { readFile } from "node:fs/promises"; +import path from "node:path"; +import process from "node:process"; +import { fileURLToPath } from "node:url"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +const projectRoot = path.resolve(__dirname, ".."); +const cssFiles = ["app/globals.css", "styles/globals.css"]; + +const hardcodedColorPattern = /#[\da-fA-F]{3,8}\b|rgba?\(|hsla?\(/; +const varFallbackPattern = /var\([^),]+,\s*[^)]+\)/; + +function removeInlineComment(line) { + const start = line.indexOf("/*"); + if (start < 0) { + return line; + } + return line.slice(0, start); +} + +async function checkCssFile(relativePath) { + const absolutePath = path.join(projectRoot, relativePath); + const file = await readFile(absolutePath, "utf8"); + const lines = file.split(/\r?\n/); + const issues = []; + + for (let index = 0; index < lines.length; index += 1) { + const lineNumber = index + 1; + const line = removeInlineComment(lines[index]).trim(); + if (!line || line.startsWith("@")) { + continue; + } + if (!line.includes(":")) { + continue; + } + const [property, ...valueParts] = line.split(":"); + const propertyName = property.trim(); + const value = valueParts.join(":").trim(); + if (!propertyName || propertyName.startsWith("--")) { + continue; + } + if (varFallbackPattern.test(value)) { + issues.push(`${relativePath}:${lineNumber} forbidden CSS fallback: ${value}`); + continue; + } + if (hardcodedColorPattern.test(value)) { + issues.push(`${relativePath}:${lineNumber} hardcoded color literal/function: ${value}`); + } + } + + return issues; +} + +async function main() { + const issues = []; + for (const cssFile of cssFiles) { + issues.push(...(await checkCssFile(cssFile))); + } + + if (issues.length > 0) { + console.error("[check-global-theme-tokens] failed:"); + for (const issue of issues) { + console.error(`- ${issue}`); + } + process.exit(1); + } + + console.log("[check-global-theme-tokens] OK"); +} + +main().catch((error) => { + console.error(`[check-global-theme-tokens] ${String(error)}`); + process.exit(1); +}); diff --git a/styles/globals.css b/styles/globals.css index b776803..492bcd8 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -28,6 +28,14 @@ --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); + --color-chart-series-1: var(--chart-1); + --color-chart-series-2: var(--chart-2); + --color-chart-series-3: var(--chart-3); + --color-chart-series-4: var(--chart-4); + --color-chart-series-5: var(--chart-5); + --color-chart-series-6: var(--chart-1); + --color-chart-series-7: var(--chart-2); + --color-chart-series-8: var(--chart-3); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); @@ -64,6 +72,14 @@ --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); + --color-chart-series-1: var(--chart-1); + --color-chart-series-2: var(--chart-2); + --color-chart-series-3: var(--chart-3); + --color-chart-series-4: var(--chart-4); + --color-chart-series-5: var(--chart-5); + --color-chart-series-6: var(--chart-1); + --color-chart-series-7: var(--chart-2); + --color-chart-series-8: var(--chart-3); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376);