From 7d5ae1dea2bec70b942e71ccfb01bd3eecec7976 Mon Sep 17 00:00:00 2001 From: Jamie Barton Date: Thu, 28 May 2026 16:11:31 +0100 Subject: [PATCH 1/3] docs(ensnode.io): brighten caution aside yellow and split accent from background --- docs/ensnode.io/src/styles/starlight.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index a3db095c8..c0159b54f 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -45,7 +45,8 @@ /* Aside colors */ --aside-danger-color: #ef4444; - --aside-caution-color: #ca8a04; + --aside-caution-color: #a16207; + --aside-caution-bg-color: #fde047; --aside-note-color: #3b82f6; --aside-tip-color: #16a34a; } @@ -560,7 +561,7 @@ starlight-tabs ul[role="tablist"] { .starlight-aside--caution { border: 1px solid color-mix(in srgb, var(--aside-caution-color) 20%, transparent); - background-color: color-mix(in srgb, var(--aside-caution-color) 10%, transparent); + background-color: color-mix(in srgb, var(--aside-caution-bg-color) 30%, transparent); & .starlight-aside__icon { color: var(--aside-caution-color); @@ -571,11 +572,11 @@ starlight-tabs ul[role="tablist"] { } & code { - background-color: color-mix(in srgb, var(--aside-caution-color) 12%, transparent); + background-color: color-mix(in srgb, var(--aside-caution-bg-color) 35%, transparent); } & pre { - background-color: color-mix(in srgb, var(--aside-caution-color) 5%, transparent); + background-color: color-mix(in srgb, var(--aside-caution-bg-color) 18%, transparent); border: 1px solid color-mix(in srgb, var(--aside-caution-color) 20%, transparent); } From 11bf16619c128e904f670507f80e8605313c3aae Mon Sep 17 00:00:00 2001 From: Jamie Barton Date: Thu, 28 May 2026 21:24:51 +0100 Subject: [PATCH 2/3] updates --- docs/ensnode.io/src/styles/starlight.css | 113 ++++++++++------------- 1 file changed, 48 insertions(+), 65 deletions(-) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index c0159b54f..3611cd384 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -45,8 +45,7 @@ /* Aside colors */ --aside-danger-color: #ef4444; - --aside-caution-color: #a16207; - --aside-caution-bg-color: #fde047; + --aside-caution-color: #eab308; --aside-note-color: #3b82f6; --aside-tip-color: #16a34a; } @@ -460,6 +459,25 @@ starlight-tabs ul[role="tablist"] { padding: 20px 16px; border-radius: 12px; + border: 1px solid color-mix(in srgb, var(--aside-color) 20%, transparent); + background-color: color-mix(in srgb, var(--aside-color) 10%, transparent); + + & .starlight-aside__icon { + color: var(--aside-text-color, var(--aside-color)); + } + + & a { + color: var(--aside-text-color, var(--aside-color)); + } + + & code { + background-color: color-mix( + in srgb, + var(--aside-color) var(--aside-code-strength, 12%), + transparent + ); + border-radius: 4px; + } } .starlight-aside__title { @@ -502,118 +520,83 @@ starlight-tabs ul[role="tablist"] { } .starlight-aside--tip { - border: 1px solid color-mix(in srgb, var(--aside-tip-color) 20%, transparent); - background-color: color-mix(in srgb, var(--aside-tip-color) 10%, transparent); - - & .starlight-aside__icon { - color: var(--aside-tip-color); - } - - & a { - color: var(--aside-tip-color); - } - - & code { - background-color: color-mix(in srgb, var(--aside-tip-color) 12%, transparent); - } + --aside-color: var(--aside-tip-color); & .sl-link-card:hover { - border-color: var(--aside-tip-color); + border-color: var(--aside-color); & .title { - color: var(--aside-tip-color); + color: var(--aside-color); } & .icon { - color: var(--aside-tip-color); + color: var(--aside-color); } } } .starlight-aside--danger { - border: 1px solid color-mix(in srgb, var(--aside-danger-color) 20%, transparent); - background-color: color-mix(in srgb, var(--aside-danger-color) 10%, transparent); - - & .starlight-aside__icon { - color: var(--aside-danger-color); - } - - & a { - color: var(--aside-danger-color); - } - - & code { - background-color: color-mix(in srgb, var(--aside-danger-color) 12%, transparent); - } + --aside-color: var(--aside-danger-color); & .sl-link-card:hover { - border-color: var(--aside-danger-color); + border-color: var(--aside-color); & .title { - color: var(--aside-danger-color); + color: var(--aside-color); } & .icon { - color: var(--aside-danger-color); + color: var(--aside-color); } } } .starlight-aside--caution { - border: 1px solid color-mix(in srgb, var(--aside-caution-color) 20%, transparent); - background-color: color-mix(in srgb, var(--aside-caution-bg-color) 30%, transparent); - - & .starlight-aside__icon { - color: var(--aside-caution-color); - } - - & a { - color: var(--aside-caution-color); - } + --aside-color: var(--aside-caution-color); + --aside-text-color: var(--color-yellow-700); + --aside-code-strength: 15%; & code { - background-color: color-mix(in srgb, var(--aside-caution-bg-color) 35%, transparent); + color: var(--aside-text-color); } & pre { - background-color: color-mix(in srgb, var(--aside-caution-bg-color) 18%, transparent); - border: 1px solid color-mix(in srgb, var(--aside-caution-color) 20%, transparent); + background-color: color-mix(in srgb, var(--aside-color) 8%, transparent); + border: 1px solid color-mix(in srgb, var(--aside-color) 15%, transparent); + border-radius: 12px; + color: var(--aside-text-color); + + & code { + color: var(--aside-text-color); + background-color: transparent; + } } & .sl-link-card { - border-color: var(--aside-caution-color); + border-color: var(--aside-color); & .title { - color: var(--aside-caution-color); + color: var(--aside-color); } & .icon { - color: var(--aside-caution-color); + color: var(--aside-color); } } } .starlight-aside--note { - border: 1px solid color-mix(in srgb, var(--aside-note-color) 20%, transparent); - background-color: color-mix(in srgb, var(--aside-note-color) 10%, transparent); - - & .starlight-aside__icon { - color: var(--aside-note-color); - } - - & a { - color: var(--aside-note-color); - } + --aside-color: var(--aside-note-color); & .sl-link-card { - border-color: var(--aside-note-color); + border-color: var(--aside-color); & .title { - color: var(--aside-note-color); + color: var(--aside-color); } & .icon { - color: var(--aside-note-color); + color: var(--aside-color); } } } From 1128db6cae7e74c93298ba4055eeec874cb545df Mon Sep 17 00:00:00 2001 From: Jamie Barton Date: Fri, 29 May 2026 08:59:30 +0100 Subject: [PATCH 3/3] color-yellow-700 --- docs/ensnode.io/src/styles/starlight.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index 3611cd384..7f977de13 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/docs/ensnode.io/src/styles/starlight.css @@ -48,6 +48,8 @@ --aside-caution-color: #eab308; --aside-note-color: #3b82f6; --aside-tip-color: #16a34a; + + --color-yellow-700: #a16207; } /* Starlight-specific variable overrides using global tokens */