calcazar/frontend-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

jhxk68cdy: Add the five approved button styles, the glossy icon button and a dev story page

Browse Source
This commit is contained in:
calcazar
2026-10-19 21:55:26 -06:00
parent 3306a24d33
commit dd47cfd911
7 changed files with 1010 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+20 -3
View File
@@ -1,9 +1,11 @@
/* Global styles only (ADR 0001, section 6): layer order, tokens, reset, focus ring. */
@layer reset, base;
/* Tokens. Dark is the default, so it applies even without data-theme. */
/* Tokens. Dark is the default, so it applies even without data-theme.
A nested [data-theme] element re-scopes the theme tokens (used by the dev button page). */
:root,
:root[data-theme="dark"] {
:root[data-theme="dark"],
[data-theme="dark"] {
--bg: #09090B;
--tile: #121215;
--tile-2: #19191D;
@@ -17,10 +19,16 @@
--danger: #FF6B70;
--glass: rgba(18,18,21,.72);
--shadow-pop: 0 10px 28px rgba(0,0,0,.5);
/* Buttons: drop shadows and the soft-depth (neumorphic) light and shade. */
--shadow-btn: 0 10px 20px -6px rgba(0,0,0,.35);
--shadow-float: 0 14px 28px -12px rgba(0,0,0,.55);
--neu-d: rgba(0,0,0,.8);
--neu-l: rgba(255,255,255,.05);
color-scheme: dark;
}
:root[data-theme="light"] {
:root[data-theme="light"],
[data-theme="light"] {
--bg: #EFEDE9;
--tile: #FBFAF8;
--tile-2: #F3F1EE;
@@ -34,6 +42,10 @@
--danger: #B3121A;
--glass: rgba(251,250,248,.74);
--shadow-pop: 0 10px 28px rgba(26,28,31,.14);
--shadow-btn: 0 10px 20px -6px rgba(26,28,31,.22);
--shadow-float: 0 14px 28px -12px rgba(26,28,31,.3);
--neu-d: rgba(26,28,31,.17);
--neu-l: rgba(255,255,255,.95);
color-scheme: light;
}
@@ -42,6 +54,11 @@
--accent-hi: color-mix(in srgb, var(--accent), white 26%);
--accent-lo: color-mix(in srgb, var(--accent), black 30%);
--accent-soft: color-mix(in srgb, var(--accent), transparent 88%);
--accent-deep: color-mix(in srgb, var(--accent), black 55%);
--accent-glow: rgba(255,110,110,.75);
--accent-glow-0: rgba(255,110,110,0);
/* Text and marks on a crimson face: white in both themes. */
--on-accent: #FFFFFF;
/* HexAvatar initials: dark muted gradients, same in both themes. */
--hex-oxblood: linear-gradient(145deg, #6e1a22, #3a0d12);