Skip to content

Commit

Permalink
feat: Correct colors for contrast
Browse files Browse the repository at this point in the history
  • Loading branch information
PurpleBooth committed Oct 8, 2024
1 parent 078c508 commit fbd129f
Show file tree
Hide file tree
Showing 8 changed files with 126 additions and 42 deletions.
14 changes: 13 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"gatsby"
],
"scripts": {
"lint": "eslint --cache --cache-location=./node_modules/.eslintcache src",
"lint:fix": "eslint --cache --cache-location=./node_modules/.eslintcache --fix src",
"lint": "eslint --cache --cache-location=./node_modules/.eslintcache src tests",
"lint:fix": "eslint --cache --cache-location=./node_modules/.eslintcache --fix src tests",
"test:unit": "vitest",
"test:e2e": "playwright test",
"develop": "gatsby develop",
Expand All @@ -23,6 +23,7 @@
"node": ">=v22.2.0"
},
"dependencies": {
"@axe-core/playwright": "^4.10.0",
"@fontsource/maven-pro": "^5.0.16",
"@heroicons/react": "^2.1.5",
"@mdx-js/react": "^3.0.1",
Expand Down
4 changes: 2 additions & 2 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { defineConfig, devices } from '@playwright/test';

const baseUrl = process.env.PW_BASE_URL ? process.env.PW_BASE_URL : 'http://localhost:8000';
const baseUrl = process.env.PW_BASE_URL ? process.env.PW_BASE_URL : 'http://localhost:8002';
const startWebserver = !process.env.PW_BASE_URL;

export default defineConfig({
Expand Down Expand Up @@ -47,7 +47,7 @@ export default defineConfig({
],
// Run your local dev server before starting the tests.
webServer: startWebserver ? {
command: 'npm run start',
command: 'npm run start -- --port 8002',
url: baseUrl,
reuseExistingServer: !process.env.CI,
timeout: 5 * 60 * 1000,
Expand Down
1 change: 1 addition & 0 deletions src/components/post-layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default function PostLayout({ children }: PostLayoutProps) {
return (
<>
<Helmet>
<html lang="en" />
<title>
{data.mdx.frontmatter.title} - {data.site.siteMetadata.title}
</title>
Expand Down
1 change: 1 addition & 0 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,7 @@ export default IndexPage;
export const Head: HeadFC = () => {
return (
<>
<html lang="en" />
<title>Armakuni Way</title>
<body className="subpixel-antialiased bg-base-100 text-base-content min-h-screen overflow-x-hidden" />
</>
Expand Down
24 changes: 12 additions & 12 deletions tailwind.config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ module.exports = {
sans: ['"Maven Pro"', ...defaultTheme.fontFamily.sans],
},
colors: {
"info-light": "oklch(var(--info-light) / 1)",
"info-light-content": "oklch(var(--info-light-content) / 1)",
"info-light": "var(--info-light)",
"info-light-content": "var(--info-light-content)",
},
},
},
Expand All @@ -32,24 +32,24 @@ module.exports = {
"primary-content": "#ffffff",
secondary: "#d6f3ff",
"secondary-content": "#000",
accent: "#eb339e",
accent: "#EB66B3",
"accent-content": "#000",
neutral: "#ffffff",
"neutral-content": "#000000",
"base-100": "#ffffff",
"base-200": "#dedede",
"base-300": "#bebebe",
"base-content": "#161616",
info: "#1b95c5",
info: "#00A4EB",
"info-content": "#000",
success: "#7db701",
"success-content": "#000",
warning: "#f49301",
"warning-content": "#000",
error: "#db180f",
error: "#F56861",
"error-content": "#000",
"--info-light": "72.59% 0.1236 230.28",
"--info-light-content": "0% 0 0",
"--info-light": "#62C1EA",
"--info-light-content": "#000000",
},
},
{
Expand All @@ -58,24 +58,24 @@ module.exports = {
"primary-content": "#ffffff",
secondary: "#d6f3ff",
"secondary-content": "#000",
accent: "#eb339e",
accent: "#EB66B3",
"accent-content": "#000",
neutral: "#000",
"neutral-content": "#ffffff",
"base-100": "#001729",
"base-200": "#001222",
"base-300": "#000e1c",
"base-content": "#c5cbd0",
info: "#1b95c5",
info: "#00A4EB",
"info-content": "#000",
success: "#7db701",
"success-content": "#000",
warning: "#f49301",
"warning-content": "#000",
error: "#db180f",
error: "#F56861",
"error-content": "#000",
"--info-light": "72.59% 0.1236 230.28",
"--info-light-content": "0% 0 0",
"--info-light": "#62C1EA",
"--info-light-content": "#000000",
},
},
],
Expand Down
64 changes: 51 additions & 13 deletions tests/index.test.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,57 @@
import { test } from '@playwright/test';
import AxeBuilder from "@axe-core/playwright";
import { test } from "@playwright/test";

test.describe("index page", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/");
});

test('it should have at least one page', async ({ page }) => {
await page.goto("/")
test.expect(await page.getByRole("main").getByRole("link").count()).toBeGreaterThan(1)
});
test("it should have at least one page", async ({ page }) => {
test
.expect(await page.getByRole("main").getByRole("link").count())
.toBeGreaterThan(1);
});

test("it should link to the details page", async ({ page }) => {
const locator = page.getByRole("main").getByRole("link").first();
const headingText = await locator
.getByRole("heading", { level: 3 })
.textContent();

test.expect(headingText).not.toBe(null);

await locator.click();
await page.getByRole("heading", { level: 1 }).first().waitFor();
await test
.expect(page.getByRole("heading", { level: 1 }).first())
.toHaveText(headingText ?? "");
});

test.describe("a11y", () => {
test.describe("light mode", () => {
test.use({ colorScheme: "light" });
test("should not have any automatically detectable accessibility issues", async ({
page,
}) => {
const accessibilityScanResults = await new AxeBuilder({
page,
}).analyze();

test('it should link to the details page', async ({ page }) => {
await page.goto("/")
const locator = page.getByRole("main").getByRole("link").first();
const headingText = await locator.getByRole("heading", {level: 3}).textContent();
test.expect(accessibilityScanResults.violations).toEqual([]);
});
});

test.expect(headingText).not.toBe(null)
test.describe("dark mode", () => {
test.use({ colorScheme: "dark" });
test("should not have any automatically detectable accessibility issues", async ({
page,
}) => {
const accessibilityScanResults = await new AxeBuilder({
page,
}).analyze();

await locator.click()
await page.getByRole("heading", {level: 1}).first().waitFor()
await test.expect(page.getByRole("heading", {level: 1}).first()).toHaveText(headingText ?? "")
test.expect(accessibilityScanResults.violations).toEqual([]);
});
});
});
});
55 changes: 43 additions & 12 deletions tests/post.test.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,48 @@
import { test } from '@playwright/test';
import { expect } from "vitest";
import AxeBuilder from "@axe-core/playwright";
import { test } from "@playwright/test";

test.beforeEach(async ({ page }) => {
await page.goto("/")
const locator = page.getByRole("main").getByRole("link").first();
const headingText = await locator.getByRole("heading", {level: 3}).textContent();
test.describe("post page", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/");
const locator = page.getByRole("main").getByRole("link").first();
const headingText = await locator
.getByRole("heading", { level: 3 })
.textContent();

test.expect(headingText).not.toBe(null)
test.expect(headingText).not.toBe(null);

await locator.click()
await page.getByRole("heading", {level: 1}).first().waitFor()
})
await locator.click();
await page.getByRole("heading", { level: 1 }).first().waitFor();
});

test('it should have a header', async ({ page }) => {
await test.expect(page.getByRole("heading", {level: 1})).toBeVisible()
test("it should have a header", async ({ page }) => {
await test.expect(page.getByRole("heading", { level: 1 })).toBeVisible();
});

test.describe("a11y", () => {
test.describe("light mode", () => {
test.use({ colorScheme: "light" });
test("should not have any automatically detectable accessibility issues", async ({
page,
}) => {
const accessibilityScanResults = await new AxeBuilder({
page,
}).analyze();

test.expect(accessibilityScanResults.violations).toEqual([]);
});
});
test.describe("dark mode", () => {
test.use({ colorScheme: "dark" });
test("should not have any automatically detectable accessibility issues", async ({
page,
}) => {
const accessibilityScanResults = await new AxeBuilder({
page,
}).analyze();

test.expect(accessibilityScanResults.violations).toEqual([]);
});
});
});
});

0 comments on commit fbd129f

Please sign in to comment.