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