lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

fix contrast tokens, focus rings, and scrollbar visibility for WCAG AAA

Browse Source
This commit is contained in:
Your Name
2026-02-19 19:42:04 +02:00
parent c921826f55
commit 7c4941ada4
1 changed files with 22 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/index.css
View File

@@ -70,11 +70,11 @@
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--muted-foreground: oklch(0.40 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--border: oklch(0.75 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
@@ -95,7 +95,7 @@
--pylon-column: oklch(95% 0.008 80);
--pylon-accent: oklch(55% 0.12 160);
--pylon-text: oklch(25% 0.015 50);
--pylon-text-secondary: oklch(55% 0.01 50);
--pylon-text-secondary: oklch(42% 0.01 50);
--pylon-danger: oklch(55% 0.18 25);
}
@@ -111,11 +111,11 @@
--secondary: oklch(0.32 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.32 0 0);
--muted-foreground: oklch(0.708 0 0);
--muted-foreground: oklch(0.75 0 0);
--accent: oklch(0.32 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 12%);
--border: oklch(1 0 0 / 25%);
--input: oklch(1 0 0 / 18%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
@@ -136,13 +136,13 @@
--pylon-column: oklch(27% 0.014 50);
--pylon-accent: oklch(62% 0.13 160);
--pylon-text: oklch(92% 0.01 50);
--pylon-text-secondary: oklch(58% 0.01 50);
--pylon-text-secondary: oklch(72% 0.01 50);
--pylon-danger: oklch(62% 0.18 25);
}
@layer base {
* {
@apply border-border outline-ring/50;
@apply border-border outline-ring;
scrollbar-width: thin;
scrollbar-color: oklch(50% 0 0 / 20%) transparent;
}
@@ -161,16 +161,16 @@
font-family: "Epilogue", system-ui, -apple-system, sans-serif;
}
:focus-visible {
outline: 2px solid var(--pylon-accent);
outline: 3px solid var(--pylon-accent);
outline-offset: 2px;
}
}
/* OverlayScrollbars custom theme */
.os-theme-pylon {
--os-handle-bg: oklch(50% 0 0 / 22%);
--os-handle-bg-hover: oklch(50% 0 0 / 40%);
--os-handle-bg-active: oklch(50% 0 0 / 55%);
--os-handle-bg: oklch(50% 0 0 / 45%);
--os-handle-bg-hover: oklch(50% 0 0 / 60%);
--os-handle-bg-active: oklch(50% 0 0 / 75%);
--os-size: 8px;
--os-handle-border-radius: 9999px;
--os-padding-perpendicular: 2px;
@@ -178,15 +178,22 @@
--os-handle-min-size: 30px;
}
.dark .os-theme-pylon {
--os-handle-bg: oklch(80% 0 0 / 18%);
--os-handle-bg-hover: oklch(80% 0 0 / 35%);
--os-handle-bg-active: oklch(80% 0 0 / 50%);
--os-handle-bg: oklch(80% 0 0 / 35%);
--os-handle-bg-hover: oklch(80% 0 0 / 55%);
--os-handle-bg-active: oklch(80% 0 0 / 70%);
}
@media (prefers-contrast: more) {
:root {
--pylon-text: oklch(10% 0.02 50);
--pylon-text-secondary: oklch(35% 0.01 50);
--pylon-text-secondary: oklch(30% 0.01 50);
--muted-foreground: oklch(0.30 0 0);
--border: oklch(0.55 0 0);
}
.dark {
--pylon-text-secondary: oklch(85% 0.01 50);
--muted-foreground: oklch(0.85 0 0);
--border: oklch(1 0 0 / 50%);
}
}