diff --git a/site/styles/home-kinpaku.css b/site/styles/home-kinpaku.css index d91dd7b2c..4bcf9bf33 100644 --- a/site/styles/home-kinpaku.css +++ b/site/styles/home-kinpaku.css @@ -6,8 +6,8 @@ @import "./kinpaku-tokens.css"; .home-kinpaku { - /* --ks-rule / --ks-rule-strong inherit the global tokens (neutral default, - gold strong); the homepage no longer diverges on border color. */ + /* --ks-rule inherits the global token (neutral hairline); the homepage no + longer diverges on border color. */ /* Legacy alias — homepage code reads --ks-muted; map it to the global muted text token (no divergent value). */ diff --git a/site/styles/kinpaku-tokens.css b/site/styles/kinpaku-tokens.css index 56ffb87fc..93df3cae4 100644 --- a/site/styles/kinpaku-tokens.css +++ b/site/styles/kinpaku-tokens.css @@ -59,13 +59,11 @@ --ks-text-mute-deep: oklch(52% 0 0); /* disabled */ /* ============================================================ - Rules. The default hairline is neutral so borders/dividers/labels - don't carry warmth (warmth lives in the gold accents and surfaces). - "strong" stays gold — it appears on focus, active state, and - structural brand anchors where the gold is the signal. + Rules. The hairline is neutral so borders/dividers/labels don't + carry warmth (warmth lives in the gold accents and surfaces). For a + gold accent border, use --ks-kinpaku directly, not a muddy variant. ============================================================ */ --ks-rule: oklch(78% 0 0 / 0.16); - --ks-rule-strong: oklch(74% 0.09 82 / 0.6); /* ============================================================ Code. One treatment site-wide. Inline code is a neutral graphite @@ -197,7 +195,6 @@ html.light { /* Rules — dark hairlines. */ --ks-rule: oklch(25% 0.02 95 / 0.12); - --ks-rule-strong: oklch(61% 0.085 78 / 0.45); /* Code — light chips, dark text. */ --ks-code-fg: oklch(28% 0.02 95); diff --git a/site/styles/light-mode.css b/site/styles/light-mode.css index 689298b79..34d2ee223 100644 --- a/site/styles/light-mode.css +++ b/site/styles/light-mode.css @@ -62,9 +62,8 @@ html.light .theme-toggle .theme-toggle-icon--dark { } /* Light mode: the toggle and the GitHub pill both read as refined hairline - chips — neutral hairline (--ks-rule, not the gold --ks-rule-strong), no fill. - The contextual seam scrim (below) carries them over the bright hero corner, - so neither needs a solid backing of its own. */ + chips — neutral --ks-rule border, no fill. The contextual seam scrim (below) + carries them over the bright hero corner, so neither needs a solid backing. */ html.light .kinpaku-chrome .theme-toggle { border-color: var(--ks-rule); color: var(--ks-text-muted);