Skip to content

docs: tick [P0-B] in the token-unification follow-ups (verified done) - #486

Merged
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b
Jul 31, 2026
Merged

docs: tick [P0-B] in the token-unification follow-ups (verified done)#486
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b

Conversation

@AndresL230

@AndresL230AndresL230 commented Jul 31, 2026

Copy link
Copy Markdown
Collaborator

Docs-only, one checkbox.

While verifying the design-debt pool I found [P0-B] still unticked although it is verifiably done: beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the landing CTAs are the shared <Button variant="primary" size="xl"> (.btn .btn--primary .btn--xl) — app button language, no motion. It landed with the #291 motion work and the #287 beta-pill removal and was simply never ticked, so anyone trusting the doc would have re-done it.

The note also records that the glow was deleted outright rather than converted into a --brand-glow finite entrance. That satisfies the item's intent (no perpetual motion, one button species) and explains why --brand-glow has no consumers today.

No code paths touched, so no e2e cycle.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Updated the beta call-to-action to use the standard primary button appearance.
    • Removed the pill-shaped styling and persistent glow effect for a cleaner, more consistent presentation.
  • Documentation
    • Marked the related beta call-to-action follow-up as completed.

beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the
landing CTAs are the shared <Button variant="primary" size="xl">. Landed with
the #291 motion work + the #287 beta-pill removal; the item was simply never
ticked, so a reader would have re-done it.
Notes that the glow was deleted outright rather than converted to a
--brand-glow entrance — satisfies the intent, and explains why --brand-glow
has no consumers.
Docs-only; no code paths touched.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@supabase

supabaseBot commented Jul 31, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project ybgqdonkoqftwrmweuyv because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitaiBot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 3eb5d7dc-ee2d-4298-a063-287680d6b539

📥 Commits

Reviewing files that changed from the base of the PR and between 53a990b and 0d3aaeb.

📒 Files selected for processing (1)
  • docs/superpowers/followups/2026-06-30-token-unification-followups.md

📝 Walkthrough

Walkthrough

The follow-up documentation marks the beta CTA re-skin complete, recording adoption of shared primary button styling and removal of the former pill and glow treatments.

Changes

Beta CTA styling follow-up

Layer / File(s)Summary
Record CTA styling completion
docs/superpowers/followups/2026-06-30-token-unification-followups.md
Marks the beta CTA re-skin complete and documents removal of the pill treatment and perpetual glow animation.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly identifies the documentation change and the specific P0-B follow-up being marked complete.
Description check✅ PassedThe description is detailed, on-topic, and covers the documentation change, rationale, verification, and testing impact.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/tick-p0b

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with Cloudflare Workers Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

StatusNameLatest CommitPreview URLUpdated (UTC)
✅ Deployment successful!
View logs
frontend-staging0d3aaebCommit Preview URL

Branch Preview URL
Jul 31 2026, 01:37 AM

@AndresL230
AndresL230 merged commit 432c207 into mainJul 31, 2026
7 checks passed
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
* refactor(ui): extract the shared hero-card surface (#288)
The warm gradient behind the sign-in and beta modals was inlined as a
literal at five sites, and had already drifted at four of them: three
different shadow alphas (0.12 / 0.15 / 0.18), two radii (20 / 24), and one
card missing the inset highlight entirely. Meanwhile --surface-hero and
--surface-hero-shadow sat in globals.css with zero consumers.
Adds `.card--hero` (a named variant of .card, used as `card card--hero`) and
`.hero-surface` (the gradient alone, for panels nested inside a hero card
that must not restate its border, radius or shadow), plus a thin <HeroCard>
wrapper that owns those classes and forwards everything else. Both classes
are now the tokens' only consumers.
This is a VISIBLE change, not a pure refactor, and an intended one: adopting
the token moves the shadow hue from cool slate rgba(15,23,42) to the warm
rgba(19,38,16) the rest of the app uses, unifies the alphas at 0.12, and
gives the beta success modal the 24px radius and inset highlight its two
siblings already had.
The literal fallbacks in both CSS rules are deliberate. The tokens are
scoped to `.public-surface, .landing-page`; every consumer sits inside that
subtree today (verified — SignInModal is mounted only from the landing page,
and nothing here portals to document.body), so the fallback is defensive
rather than load-bearing. For a shared component it is the cheap guard
against the first mount that isn't.
data-testid="signin-modal" and "signin-close" are unchanged.
Deliberately NOT folded in: the close button and the logo/wordmark row. The
close buttons are not actually duplicated verbatim — they differ in offset
(18 vs 14) and only one carries a testid — and the wordmark appears at 20
sites repo-wide with no shared component, so extracting it for 2 of them
would leave a half-migration. #111 touches every icon site anyway; that is
the coherent place for it.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* docs+comments: close review findings on the hero-card extraction (#288)
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(css): repair the hero-surface comment, and guard globals.css structurally (#288)
The review-fix commit closed the hero-surface block comment early: the `*/`
that used to end the whole comment stayed put while a new paragraph was
inserted above it, so the rest of the original comment became raw stylesheet
text. postcss reported it as "Unclosed string" at line 1007 — 780 lines below
the actual mistake, at the first quote it happened to reach.
It got that far because nothing in the fast lane reads this file as CSS.
eslint lints JS/TS, tsc checks types, vitest never imports the stylesheet;
CI's `lint + tsc + vitest` job went green on the broken file. The first thing
that actually parses globals.css is the Next production build, which is why
the local e2e cycle caught it and everything cheaper did not.
Adds src/app/globals.test.ts: a dependency-free structural scan (comments,
strings, brace depth) that fails on exactly this class of breakage, in the
fast lane, pointing at the right line. Hand-rolled rather than importing
postcss on purpose — postcss is only a transitive dependency here and the
installed copy already drifts from CI's. It also tests itself: a second case
feeds it each broken shape to prove it does not silently return "fine".
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
@AndresL230
AndresL230 deleted the docs/tick-p0b branch August 2, 2026 18:29
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@AndresL230
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
docs: tick [P0-B] in the token-unification follow-ups (verified done) by AndresL230 · Pull Request #486 · SaplingLearn/Sapling · GitHub
Skip to content

docs: tick [P0-B] in the token-unification follow-ups (verified done) - #486

Merged
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b
Jul 31, 2026
Merged

docs: tick [P0-B] in the token-unification follow-ups (verified done)#486
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b

Conversation

@AndresL230

@AndresL230AndresL230 commented Jul 31, 2026

Copy link
Copy Markdown
Collaborator

Docs-only, one checkbox.

While verifying the design-debt pool I found [P0-B] still unticked although it is verifiably done: beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the landing CTAs are the shared <Button variant="primary" size="xl"> (.btn .btn--primary .btn--xl) — app button language, no motion. It landed with the #291 motion work and the #287 beta-pill removal and was simply never ticked, so anyone trusting the doc would have re-done it.

The note also records that the glow was deleted outright rather than converted into a --brand-glow finite entrance. That satisfies the item's intent (no perpetual motion, one button species) and explains why --brand-glow has no consumers today.

No code paths touched, so no e2e cycle.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Updated the beta call-to-action to use the standard primary button appearance.
    • Removed the pill-shaped styling and persistent glow effect for a cleaner, more consistent presentation.
  • Documentation
    • Marked the related beta call-to-action follow-up as completed.

beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the
landing CTAs are the shared <Button variant="primary" size="xl">. Landed with
the #291 motion work + the #287 beta-pill removal; the item was simply never
ticked, so a reader would have re-done it.
Notes that the glow was deleted outright rather than converted to a
--brand-glow entrance — satisfies the intent, and explains why --brand-glow
has no consumers.
Docs-only; no code paths touched.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@supabase

supabaseBot commented Jul 31, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project ybgqdonkoqftwrmweuyv because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitaiBot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 3eb5d7dc-ee2d-4298-a063-287680d6b539

📥 Commits

Reviewing files that changed from the base of the PR and between 53a990b and 0d3aaeb.

📒 Files selected for processing (1)
  • docs/superpowers/followups/2026-06-30-token-unification-followups.md

📝 Walkthrough

Walkthrough

The follow-up documentation marks the beta CTA re-skin complete, recording adoption of shared primary button styling and removal of the former pill and glow treatments.

Changes

Beta CTA styling follow-up

Layer / File(s)Summary
Record CTA styling completion
docs/superpowers/followups/2026-06-30-token-unification-followups.md
Marks the beta CTA re-skin complete and documents removal of the pill treatment and perpetual glow animation.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly identifies the documentation change and the specific P0-B follow-up being marked complete.
Description check✅ PassedThe description is detailed, on-topic, and covers the documentation change, rationale, verification, and testing impact.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/tick-p0b

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with Cloudflare Workers Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

StatusNameLatest CommitPreview URLUpdated (UTC)
✅ Deployment successful!
View logs
frontend-staging0d3aaebCommit Preview URL

Branch Preview URL
Jul 31 2026, 01:37 AM

@AndresL230
AndresL230 merged commit 432c207 into mainJul 31, 2026
7 checks passed
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
* refactor(ui): extract the shared hero-card surface (#288)
The warm gradient behind the sign-in and beta modals was inlined as a
literal at five sites, and had already drifted at four of them: three
different shadow alphas (0.12 / 0.15 / 0.18), two radii (20 / 24), and one
card missing the inset highlight entirely. Meanwhile --surface-hero and
--surface-hero-shadow sat in globals.css with zero consumers.
Adds `.card--hero` (a named variant of .card, used as `card card--hero`) and
`.hero-surface` (the gradient alone, for panels nested inside a hero card
that must not restate its border, radius or shadow), plus a thin <HeroCard>
wrapper that owns those classes and forwards everything else. Both classes
are now the tokens' only consumers.
This is a VISIBLE change, not a pure refactor, and an intended one: adopting
the token moves the shadow hue from cool slate rgba(15,23,42) to the warm
rgba(19,38,16) the rest of the app uses, unifies the alphas at 0.12, and
gives the beta success modal the 24px radius and inset highlight its two
siblings already had.
The literal fallbacks in both CSS rules are deliberate. The tokens are
scoped to `.public-surface, .landing-page`; every consumer sits inside that
subtree today (verified — SignInModal is mounted only from the landing page,
and nothing here portals to document.body), so the fallback is defensive
rather than load-bearing. For a shared component it is the cheap guard
against the first mount that isn't.
data-testid="signin-modal" and "signin-close" are unchanged.
Deliberately NOT folded in: the close button and the logo/wordmark row. The
close buttons are not actually duplicated verbatim — they differ in offset
(18 vs 14) and only one carries a testid — and the wordmark appears at 20
sites repo-wide with no shared component, so extracting it for 2 of them
would leave a half-migration. #111 touches every icon site anyway; that is
the coherent place for it.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* docs+comments: close review findings on the hero-card extraction (#288)
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(css): repair the hero-surface comment, and guard globals.css structurally (#288)
The review-fix commit closed the hero-surface block comment early: the `*/`
that used to end the whole comment stayed put while a new paragraph was
inserted above it, so the rest of the original comment became raw stylesheet
text. postcss reported it as "Unclosed string" at line 1007 — 780 lines below
the actual mistake, at the first quote it happened to reach.
It got that far because nothing in the fast lane reads this file as CSS.
eslint lints JS/TS, tsc checks types, vitest never imports the stylesheet;
CI's `lint + tsc + vitest` job went green on the broken file. The first thing
that actually parses globals.css is the Next production build, which is why
the local e2e cycle caught it and everything cheaper did not.
Adds src/app/globals.test.ts: a dependency-free structural scan (comments,
strings, brace depth) that fails on exactly this class of breakage, in the
fast lane, pointing at the right line. Hand-rolled rather than importing
postcss on purpose — postcss is only a transitive dependency here and the
installed copy already drifts from CI's. It also tests itself: a second case
feeds it each broken shape to prove it does not silently return "fine".
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
@AndresL230
AndresL230 deleted the docs/tick-p0b branch August 2, 2026 18:29
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@AndresL230
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' docs: tick [P0-B] in the token-unification follow-ups (verified done) by AndresL230 · Pull Request #486 · SaplingLearn/Sapling · GitHub
Skip to content

docs: tick [P0-B] in the token-unification follow-ups (verified done) - #486

Merged
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b
Jul 31, 2026
Merged

docs: tick [P0-B] in the token-unification follow-ups (verified done)#486
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b

Conversation

@AndresL230

@AndresL230AndresL230 commented Jul 31, 2026

Copy link
Copy Markdown
Collaborator

Docs-only, one checkbox.

While verifying the design-debt pool I found [P0-B] still unticked although it is verifiably done: beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the landing CTAs are the shared <Button variant="primary" size="xl"> (.btn .btn--primary .btn--xl) — app button language, no motion. It landed with the #291 motion work and the #287 beta-pill removal and was simply never ticked, so anyone trusting the doc would have re-done it.

The note also records that the glow was deleted outright rather than converted into a --brand-glow finite entrance. That satisfies the item's intent (no perpetual motion, one button species) and explains why --brand-glow has no consumers today.

No code paths touched, so no e2e cycle.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Updated the beta call-to-action to use the standard primary button appearance.
    • Removed the pill-shaped styling and persistent glow effect for a cleaner, more consistent presentation.
  • Documentation
    • Marked the related beta call-to-action follow-up as completed.

beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the
landing CTAs are the shared <Button variant="primary" size="xl">. Landed with
the #291 motion work + the #287 beta-pill removal; the item was simply never
ticked, so a reader would have re-done it.
Notes that the glow was deleted outright rather than converted to a
--brand-glow entrance — satisfies the intent, and explains why --brand-glow
has no consumers.
Docs-only; no code paths touched.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@supabase

supabaseBot commented Jul 31, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project ybgqdonkoqftwrmweuyv because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitaiBot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 3eb5d7dc-ee2d-4298-a063-287680d6b539

📥 Commits

Reviewing files that changed from the base of the PR and between 53a990b and 0d3aaeb.

📒 Files selected for processing (1)
  • docs/superpowers/followups/2026-06-30-token-unification-followups.md

📝 Walkthrough

Walkthrough

The follow-up documentation marks the beta CTA re-skin complete, recording adoption of shared primary button styling and removal of the former pill and glow treatments.

Changes

Beta CTA styling follow-up

Layer / File(s)Summary
Record CTA styling completion
docs/superpowers/followups/2026-06-30-token-unification-followups.md
Marks the beta CTA re-skin complete and documents removal of the pill treatment and perpetual glow animation.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly identifies the documentation change and the specific P0-B follow-up being marked complete.
Description check✅ PassedThe description is detailed, on-topic, and covers the documentation change, rationale, verification, and testing impact.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/tick-p0b

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with Cloudflare Workers Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

StatusNameLatest CommitPreview URLUpdated (UTC)
✅ Deployment successful!
View logs
frontend-staging0d3aaebCommit Preview URL

Branch Preview URL
Jul 31 2026, 01:37 AM

@AndresL230
AndresL230 merged commit 432c207 into mainJul 31, 2026
7 checks passed
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
* refactor(ui): extract the shared hero-card surface (#288)
The warm gradient behind the sign-in and beta modals was inlined as a
literal at five sites, and had already drifted at four of them: three
different shadow alphas (0.12 / 0.15 / 0.18), two radii (20 / 24), and one
card missing the inset highlight entirely. Meanwhile --surface-hero and
--surface-hero-shadow sat in globals.css with zero consumers.
Adds `.card--hero` (a named variant of .card, used as `card card--hero`) and
`.hero-surface` (the gradient alone, for panels nested inside a hero card
that must not restate its border, radius or shadow), plus a thin <HeroCard>
wrapper that owns those classes and forwards everything else. Both classes
are now the tokens' only consumers.
This is a VISIBLE change, not a pure refactor, and an intended one: adopting
the token moves the shadow hue from cool slate rgba(15,23,42) to the warm
rgba(19,38,16) the rest of the app uses, unifies the alphas at 0.12, and
gives the beta success modal the 24px radius and inset highlight its two
siblings already had.
The literal fallbacks in both CSS rules are deliberate. The tokens are
scoped to `.public-surface, .landing-page`; every consumer sits inside that
subtree today (verified — SignInModal is mounted only from the landing page,
and nothing here portals to document.body), so the fallback is defensive
rather than load-bearing. For a shared component it is the cheap guard
against the first mount that isn't.
data-testid="signin-modal" and "signin-close" are unchanged.
Deliberately NOT folded in: the close button and the logo/wordmark row. The
close buttons are not actually duplicated verbatim — they differ in offset
(18 vs 14) and only one carries a testid — and the wordmark appears at 20
sites repo-wide with no shared component, so extracting it for 2 of them
would leave a half-migration. #111 touches every icon site anyway; that is
the coherent place for it.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* docs+comments: close review findings on the hero-card extraction (#288)
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(css): repair the hero-surface comment, and guard globals.css structurally (#288)
The review-fix commit closed the hero-surface block comment early: the `*/`
that used to end the whole comment stayed put while a new paragraph was
inserted above it, so the rest of the original comment became raw stylesheet
text. postcss reported it as "Unclosed string" at line 1007 — 780 lines below
the actual mistake, at the first quote it happened to reach.
It got that far because nothing in the fast lane reads this file as CSS.
eslint lints JS/TS, tsc checks types, vitest never imports the stylesheet;
CI's `lint + tsc + vitest` job went green on the broken file. The first thing
that actually parses globals.css is the Next production build, which is why
the local e2e cycle caught it and everything cheaper did not.
Adds src/app/globals.test.ts: a dependency-free structural scan (comments,
strings, brace depth) that fails on exactly this class of breakage, in the
fast lane, pointing at the right line. Hand-rolled rather than importing
postcss on purpose — postcss is only a transitive dependency here and the
installed copy already drifts from CI's. It also tests itself: a second case
feeds it each broken shape to prove it does not silently return "fine".
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
@AndresL230
AndresL230 deleted the docs/tick-p0b branch August 2, 2026 18:29
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@AndresL230
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' docs: tick [P0-B] in the token-unification follow-ups (verified done) by AndresL230 · Pull Request #486 · SaplingLearn/Sapling · GitHub
Skip to content

docs: tick [P0-B] in the token-unification follow-ups (verified done) - #486

Merged
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b
Jul 31, 2026
Merged

docs: tick [P0-B] in the token-unification follow-ups (verified done)#486
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b

Conversation

@AndresL230

@AndresL230AndresL230 commented Jul 31, 2026

Copy link
Copy Markdown
Collaborator

Docs-only, one checkbox.

While verifying the design-debt pool I found [P0-B] still unticked although it is verifiably done: beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the landing CTAs are the shared <Button variant="primary" size="xl"> (.btn .btn--primary .btn--xl) — app button language, no motion. It landed with the #291 motion work and the #287 beta-pill removal and was simply never ticked, so anyone trusting the doc would have re-done it.

The note also records that the glow was deleted outright rather than converted into a --brand-glow finite entrance. That satisfies the item's intent (no perpetual motion, one button species) and explains why --brand-glow has no consumers today.

No code paths touched, so no e2e cycle.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Updated the beta call-to-action to use the standard primary button appearance.
    • Removed the pill-shaped styling and persistent glow effect for a cleaner, more consistent presentation.
  • Documentation
    • Marked the related beta call-to-action follow-up as completed.

beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the
landing CTAs are the shared <Button variant="primary" size="xl">. Landed with
the #291 motion work + the #287 beta-pill removal; the item was simply never
ticked, so a reader would have re-done it.
Notes that the glow was deleted outright rather than converted to a
--brand-glow entrance — satisfies the intent, and explains why --brand-glow
has no consumers.
Docs-only; no code paths touched.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@supabase

supabaseBot commented Jul 31, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project ybgqdonkoqftwrmweuyv because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitaiBot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 3eb5d7dc-ee2d-4298-a063-287680d6b539

📥 Commits

Reviewing files that changed from the base of the PR and between 53a990b and 0d3aaeb.

📒 Files selected for processing (1)
  • docs/superpowers/followups/2026-06-30-token-unification-followups.md

📝 Walkthrough

Walkthrough

The follow-up documentation marks the beta CTA re-skin complete, recording adoption of shared primary button styling and removal of the former pill and glow treatments.

Changes

Beta CTA styling follow-up

Layer / File(s)Summary
Record CTA styling completion
docs/superpowers/followups/2026-06-30-token-unification-followups.md
Marks the beta CTA re-skin complete and documents removal of the pill treatment and perpetual glow animation.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly identifies the documentation change and the specific P0-B follow-up being marked complete.
Description check✅ PassedThe description is detailed, on-topic, and covers the documentation change, rationale, verification, and testing impact.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/tick-p0b

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with Cloudflare Workers Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

StatusNameLatest CommitPreview URLUpdated (UTC)
✅ Deployment successful!
View logs
frontend-staging0d3aaebCommit Preview URL

Branch Preview URL
Jul 31 2026, 01:37 AM

@AndresL230
AndresL230 merged commit 432c207 into mainJul 31, 2026
7 checks passed
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
* refactor(ui): extract the shared hero-card surface (#288)
The warm gradient behind the sign-in and beta modals was inlined as a
literal at five sites, and had already drifted at four of them: three
different shadow alphas (0.12 / 0.15 / 0.18), two radii (20 / 24), and one
card missing the inset highlight entirely. Meanwhile --surface-hero and
--surface-hero-shadow sat in globals.css with zero consumers.
Adds `.card--hero` (a named variant of .card, used as `card card--hero`) and
`.hero-surface` (the gradient alone, for panels nested inside a hero card
that must not restate its border, radius or shadow), plus a thin <HeroCard>
wrapper that owns those classes and forwards everything else. Both classes
are now the tokens' only consumers.
This is a VISIBLE change, not a pure refactor, and an intended one: adopting
the token moves the shadow hue from cool slate rgba(15,23,42) to the warm
rgba(19,38,16) the rest of the app uses, unifies the alphas at 0.12, and
gives the beta success modal the 24px radius and inset highlight its two
siblings already had.
The literal fallbacks in both CSS rules are deliberate. The tokens are
scoped to `.public-surface, .landing-page`; every consumer sits inside that
subtree today (verified — SignInModal is mounted only from the landing page,
and nothing here portals to document.body), so the fallback is defensive
rather than load-bearing. For a shared component it is the cheap guard
against the first mount that isn't.
data-testid="signin-modal" and "signin-close" are unchanged.
Deliberately NOT folded in: the close button and the logo/wordmark row. The
close buttons are not actually duplicated verbatim — they differ in offset
(18 vs 14) and only one carries a testid — and the wordmark appears at 20
sites repo-wide with no shared component, so extracting it for 2 of them
would leave a half-migration. #111 touches every icon site anyway; that is
the coherent place for it.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* docs+comments: close review findings on the hero-card extraction (#288)
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(css): repair the hero-surface comment, and guard globals.css structurally (#288)
The review-fix commit closed the hero-surface block comment early: the `*/`
that used to end the whole comment stayed put while a new paragraph was
inserted above it, so the rest of the original comment became raw stylesheet
text. postcss reported it as "Unclosed string" at line 1007 — 780 lines below
the actual mistake, at the first quote it happened to reach.
It got that far because nothing in the fast lane reads this file as CSS.
eslint lints JS/TS, tsc checks types, vitest never imports the stylesheet;
CI's `lint + tsc + vitest` job went green on the broken file. The first thing
that actually parses globals.css is the Next production build, which is why
the local e2e cycle caught it and everything cheaper did not.
Adds src/app/globals.test.ts: a dependency-free structural scan (comments,
strings, brace depth) that fails on exactly this class of breakage, in the
fast lane, pointing at the right line. Hand-rolled rather than importing
postcss on purpose — postcss is only a transitive dependency here and the
installed copy already drifts from CI's. It also tests itself: a second case
feeds it each broken shape to prove it does not silently return "fine".
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
@AndresL230
AndresL230 deleted the docs/tick-p0b branch August 2, 2026 18:29
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@AndresL230
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' docs: tick [P0-B] in the token-unification follow-ups (verified done) by AndresL230 · Pull Request #486 · SaplingLearn/Sapling · GitHub
Skip to content

docs: tick [P0-B] in the token-unification follow-ups (verified done) - #486

Merged
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b
Jul 31, 2026
Merged

docs: tick [P0-B] in the token-unification follow-ups (verified done)#486
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b

Conversation

@AndresL230

@AndresL230AndresL230 commented Jul 31, 2026

Copy link
Copy Markdown
Collaborator

Docs-only, one checkbox.

While verifying the design-debt pool I found [P0-B] still unticked although it is verifiably done: beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the landing CTAs are the shared <Button variant="primary" size="xl"> (.btn .btn--primary .btn--xl) — app button language, no motion. It landed with the #291 motion work and the #287 beta-pill removal and was simply never ticked, so anyone trusting the doc would have re-done it.

The note also records that the glow was deleted outright rather than converted into a --brand-glow finite entrance. That satisfies the item's intent (no perpetual motion, one button species) and explains why --brand-glow has no consumers today.

No code paths touched, so no e2e cycle.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Updated the beta call-to-action to use the standard primary button appearance.
    • Removed the pill-shaped styling and persistent glow effect for a cleaner, more consistent presentation.
  • Documentation
    • Marked the related beta call-to-action follow-up as completed.

beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the
landing CTAs are the shared <Button variant="primary" size="xl">. Landed with
the #291 motion work + the #287 beta-pill removal; the item was simply never
ticked, so a reader would have re-done it.
Notes that the glow was deleted outright rather than converted to a
--brand-glow entrance — satisfies the intent, and explains why --brand-glow
has no consumers.
Docs-only; no code paths touched.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@supabase

supabaseBot commented Jul 31, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project ybgqdonkoqftwrmweuyv because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitaiBot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 3eb5d7dc-ee2d-4298-a063-287680d6b539

📥 Commits

Reviewing files that changed from the base of the PR and between 53a990b and 0d3aaeb.

📒 Files selected for processing (1)
  • docs/superpowers/followups/2026-06-30-token-unification-followups.md

📝 Walkthrough

Walkthrough

The follow-up documentation marks the beta CTA re-skin complete, recording adoption of shared primary button styling and removal of the former pill and glow treatments.

Changes

Beta CTA styling follow-up

Layer / File(s)Summary
Record CTA styling completion
docs/superpowers/followups/2026-06-30-token-unification-followups.md
Marks the beta CTA re-skin complete and documents removal of the pill treatment and perpetual glow animation.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly identifies the documentation change and the specific P0-B follow-up being marked complete.
Description check✅ PassedThe description is detailed, on-topic, and covers the documentation change, rationale, verification, and testing impact.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/tick-p0b

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with Cloudflare Workers Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

StatusNameLatest CommitPreview URLUpdated (UTC)
✅ Deployment successful!
View logs
frontend-staging0d3aaebCommit Preview URL

Branch Preview URL
Jul 31 2026, 01:37 AM

@AndresL230
AndresL230 merged commit 432c207 into mainJul 31, 2026
7 checks passed
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
* refactor(ui): extract the shared hero-card surface (#288)
The warm gradient behind the sign-in and beta modals was inlined as a
literal at five sites, and had already drifted at four of them: three
different shadow alphas (0.12 / 0.15 / 0.18), two radii (20 / 24), and one
card missing the inset highlight entirely. Meanwhile --surface-hero and
--surface-hero-shadow sat in globals.css with zero consumers.
Adds `.card--hero` (a named variant of .card, used as `card card--hero`) and
`.hero-surface` (the gradient alone, for panels nested inside a hero card
that must not restate its border, radius or shadow), plus a thin <HeroCard>
wrapper that owns those classes and forwards everything else. Both classes
are now the tokens' only consumers.
This is a VISIBLE change, not a pure refactor, and an intended one: adopting
the token moves the shadow hue from cool slate rgba(15,23,42) to the warm
rgba(19,38,16) the rest of the app uses, unifies the alphas at 0.12, and
gives the beta success modal the 24px radius and inset highlight its two
siblings already had.
The literal fallbacks in both CSS rules are deliberate. The tokens are
scoped to `.public-surface, .landing-page`; every consumer sits inside that
subtree today (verified — SignInModal is mounted only from the landing page,
and nothing here portals to document.body), so the fallback is defensive
rather than load-bearing. For a shared component it is the cheap guard
against the first mount that isn't.
data-testid="signin-modal" and "signin-close" are unchanged.
Deliberately NOT folded in: the close button and the logo/wordmark row. The
close buttons are not actually duplicated verbatim — they differ in offset
(18 vs 14) and only one carries a testid — and the wordmark appears at 20
sites repo-wide with no shared component, so extracting it for 2 of them
would leave a half-migration. #111 touches every icon site anyway; that is
the coherent place for it.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* docs+comments: close review findings on the hero-card extraction (#288)
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(css): repair the hero-surface comment, and guard globals.css structurally (#288)
The review-fix commit closed the hero-surface block comment early: the `*/`
that used to end the whole comment stayed put while a new paragraph was
inserted above it, so the rest of the original comment became raw stylesheet
text. postcss reported it as "Unclosed string" at line 1007 — 780 lines below
the actual mistake, at the first quote it happened to reach.
It got that far because nothing in the fast lane reads this file as CSS.
eslint lints JS/TS, tsc checks types, vitest never imports the stylesheet;
CI's `lint + tsc + vitest` job went green on the broken file. The first thing
that actually parses globals.css is the Next production build, which is why
the local e2e cycle caught it and everything cheaper did not.
Adds src/app/globals.test.ts: a dependency-free structural scan (comments,
strings, brace depth) that fails on exactly this class of breakage, in the
fast lane, pointing at the right line. Hand-rolled rather than importing
postcss on purpose — postcss is only a transitive dependency here and the
installed copy already drifts from CI's. It also tests itself: a second case
feeds it each broken shape to prove it does not silently return "fine".
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
@AndresL230
AndresL230 deleted the docs/tick-p0b branch August 2, 2026 18:29
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@AndresL230
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' docs: tick [P0-B] in the token-unification follow-ups (verified done) by AndresL230 · Pull Request #486 · SaplingLearn/Sapling · GitHub
Skip to content

docs: tick [P0-B] in the token-unification follow-ups (verified done) - #486

Merged
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b
Jul 31, 2026
Merged

docs: tick [P0-B] in the token-unification follow-ups (verified done)#486
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b

Conversation

@AndresL230

@AndresL230AndresL230 commented Jul 31, 2026

Copy link
Copy Markdown
Collaborator

Docs-only, one checkbox.

While verifying the design-debt pool I found [P0-B] still unticked although it is verifiably done: beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the landing CTAs are the shared <Button variant="primary" size="xl"> (.btn .btn--primary .btn--xl) — app button language, no motion. It landed with the #291 motion work and the #287 beta-pill removal and was simply never ticked, so anyone trusting the doc would have re-done it.

The note also records that the glow was deleted outright rather than converted into a --brand-glow finite entrance. That satisfies the item's intent (no perpetual motion, one button species) and explains why --brand-glow has no consumers today.

No code paths touched, so no e2e cycle.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Updated the beta call-to-action to use the standard primary button appearance.
    • Removed the pill-shaped styling and persistent glow effect for a cleaner, more consistent presentation.
  • Documentation
    • Marked the related beta call-to-action follow-up as completed.

beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the
landing CTAs are the shared <Button variant="primary" size="xl">. Landed with
the #291 motion work + the #287 beta-pill removal; the item was simply never
ticked, so a reader would have re-done it.
Notes that the glow was deleted outright rather than converted to a
--brand-glow entrance — satisfies the intent, and explains why --brand-glow
has no consumers.
Docs-only; no code paths touched.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@supabase

supabaseBot commented Jul 31, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project ybgqdonkoqftwrmweuyv because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitaiBot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 3eb5d7dc-ee2d-4298-a063-287680d6b539

📥 Commits

Reviewing files that changed from the base of the PR and between 53a990b and 0d3aaeb.

📒 Files selected for processing (1)
  • docs/superpowers/followups/2026-06-30-token-unification-followups.md

📝 Walkthrough

Walkthrough

The follow-up documentation marks the beta CTA re-skin complete, recording adoption of shared primary button styling and removal of the former pill and glow treatments.

Changes

Beta CTA styling follow-up

Layer / File(s)Summary
Record CTA styling completion
docs/superpowers/followups/2026-06-30-token-unification-followups.md
Marks the beta CTA re-skin complete and documents removal of the pill treatment and perpetual glow animation.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly identifies the documentation change and the specific P0-B follow-up being marked complete.
Description check✅ PassedThe description is detailed, on-topic, and covers the documentation change, rationale, verification, and testing impact.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/tick-p0b

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with Cloudflare Workers Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

StatusNameLatest CommitPreview URLUpdated (UTC)
✅ Deployment successful!
View logs
frontend-staging0d3aaebCommit Preview URL

Branch Preview URL
Jul 31 2026, 01:37 AM

@AndresL230
AndresL230 merged commit 432c207 into mainJul 31, 2026
7 checks passed
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
* refactor(ui): extract the shared hero-card surface (#288)
The warm gradient behind the sign-in and beta modals was inlined as a
literal at five sites, and had already drifted at four of them: three
different shadow alphas (0.12 / 0.15 / 0.18), two radii (20 / 24), and one
card missing the inset highlight entirely. Meanwhile --surface-hero and
--surface-hero-shadow sat in globals.css with zero consumers.
Adds `.card--hero` (a named variant of .card, used as `card card--hero`) and
`.hero-surface` (the gradient alone, for panels nested inside a hero card
that must not restate its border, radius or shadow), plus a thin <HeroCard>
wrapper that owns those classes and forwards everything else. Both classes
are now the tokens' only consumers.
This is a VISIBLE change, not a pure refactor, and an intended one: adopting
the token moves the shadow hue from cool slate rgba(15,23,42) to the warm
rgba(19,38,16) the rest of the app uses, unifies the alphas at 0.12, and
gives the beta success modal the 24px radius and inset highlight its two
siblings already had.
The literal fallbacks in both CSS rules are deliberate. The tokens are
scoped to `.public-surface, .landing-page`; every consumer sits inside that
subtree today (verified — SignInModal is mounted only from the landing page,
and nothing here portals to document.body), so the fallback is defensive
rather than load-bearing. For a shared component it is the cheap guard
against the first mount that isn't.
data-testid="signin-modal" and "signin-close" are unchanged.
Deliberately NOT folded in: the close button and the logo/wordmark row. The
close buttons are not actually duplicated verbatim — they differ in offset
(18 vs 14) and only one carries a testid — and the wordmark appears at 20
sites repo-wide with no shared component, so extracting it for 2 of them
would leave a half-migration. #111 touches every icon site anyway; that is
the coherent place for it.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* docs+comments: close review findings on the hero-card extraction (#288)
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(css): repair the hero-surface comment, and guard globals.css structurally (#288)
The review-fix commit closed the hero-surface block comment early: the `*/`
that used to end the whole comment stayed put while a new paragraph was
inserted above it, so the rest of the original comment became raw stylesheet
text. postcss reported it as "Unclosed string" at line 1007 — 780 lines below
the actual mistake, at the first quote it happened to reach.
It got that far because nothing in the fast lane reads this file as CSS.
eslint lints JS/TS, tsc checks types, vitest never imports the stylesheet;
CI's `lint + tsc + vitest` job went green on the broken file. The first thing
that actually parses globals.css is the Next production build, which is why
the local e2e cycle caught it and everything cheaper did not.
Adds src/app/globals.test.ts: a dependency-free structural scan (comments,
strings, brace depth) that fails on exactly this class of breakage, in the
fast lane, pointing at the right line. Hand-rolled rather than importing
postcss on purpose — postcss is only a transitive dependency here and the
installed copy already drifts from CI's. It also tests itself: a second case
feeds it each broken shape to prove it does not silently return "fine".
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
@AndresL230
AndresL230 deleted the docs/tick-p0b branch August 2, 2026 18:29
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@AndresL230
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' docs: tick [P0-B] in the token-unification follow-ups (verified done) by AndresL230 · Pull Request #486 · SaplingLearn/Sapling · GitHub
Skip to content

docs: tick [P0-B] in the token-unification follow-ups (verified done) - #486

Merged
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b
Jul 31, 2026
Merged

docs: tick [P0-B] in the token-unification follow-ups (verified done)#486
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b

Conversation

@AndresL230

@AndresL230AndresL230 commented Jul 31, 2026

Copy link
Copy Markdown
Collaborator

Docs-only, one checkbox.

While verifying the design-debt pool I found [P0-B] still unticked although it is verifiably done: beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the landing CTAs are the shared <Button variant="primary" size="xl"> (.btn .btn--primary .btn--xl) — app button language, no motion. It landed with the #291 motion work and the #287 beta-pill removal and was simply never ticked, so anyone trusting the doc would have re-done it.

The note also records that the glow was deleted outright rather than converted into a --brand-glow finite entrance. That satisfies the item's intent (no perpetual motion, one button species) and explains why --brand-glow has no consumers today.

No code paths touched, so no e2e cycle.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Updated the beta call-to-action to use the standard primary button appearance.
    • Removed the pill-shaped styling and persistent glow effect for a cleaner, more consistent presentation.
  • Documentation
    • Marked the related beta call-to-action follow-up as completed.

beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the
landing CTAs are the shared <Button variant="primary" size="xl">. Landed with
the #291 motion work + the #287 beta-pill removal; the item was simply never
ticked, so a reader would have re-done it.
Notes that the glow was deleted outright rather than converted to a
--brand-glow entrance — satisfies the intent, and explains why --brand-glow
has no consumers.
Docs-only; no code paths touched.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@supabase

supabaseBot commented Jul 31, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project ybgqdonkoqftwrmweuyv because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitaiBot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 3eb5d7dc-ee2d-4298-a063-287680d6b539

📥 Commits

Reviewing files that changed from the base of the PR and between 53a990b and 0d3aaeb.

📒 Files selected for processing (1)
  • docs/superpowers/followups/2026-06-30-token-unification-followups.md

📝 Walkthrough

Walkthrough

The follow-up documentation marks the beta CTA re-skin complete, recording adoption of shared primary button styling and removal of the former pill and glow treatments.

Changes

Beta CTA styling follow-up

Layer / File(s)Summary
Record CTA styling completion
docs/superpowers/followups/2026-06-30-token-unification-followups.md
Marks the beta CTA re-skin complete and documents removal of the pill treatment and perpetual glow animation.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly identifies the documentation change and the specific P0-B follow-up being marked complete.
Description check✅ PassedThe description is detailed, on-topic, and covers the documentation change, rationale, verification, and testing impact.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/tick-p0b

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with Cloudflare Workers Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

StatusNameLatest CommitPreview URLUpdated (UTC)
✅ Deployment successful!
View logs
frontend-staging0d3aaebCommit Preview URL

Branch Preview URL
Jul 31 2026, 01:37 AM

@AndresL230
AndresL230 merged commit 432c207 into mainJul 31, 2026
7 checks passed
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
* refactor(ui): extract the shared hero-card surface (#288)
The warm gradient behind the sign-in and beta modals was inlined as a
literal at five sites, and had already drifted at four of them: three
different shadow alphas (0.12 / 0.15 / 0.18), two radii (20 / 24), and one
card missing the inset highlight entirely. Meanwhile --surface-hero and
--surface-hero-shadow sat in globals.css with zero consumers.
Adds `.card--hero` (a named variant of .card, used as `card card--hero`) and
`.hero-surface` (the gradient alone, for panels nested inside a hero card
that must not restate its border, radius or shadow), plus a thin <HeroCard>
wrapper that owns those classes and forwards everything else. Both classes
are now the tokens' only consumers.
This is a VISIBLE change, not a pure refactor, and an intended one: adopting
the token moves the shadow hue from cool slate rgba(15,23,42) to the warm
rgba(19,38,16) the rest of the app uses, unifies the alphas at 0.12, and
gives the beta success modal the 24px radius and inset highlight its two
siblings already had.
The literal fallbacks in both CSS rules are deliberate. The tokens are
scoped to `.public-surface, .landing-page`; every consumer sits inside that
subtree today (verified — SignInModal is mounted only from the landing page,
and nothing here portals to document.body), so the fallback is defensive
rather than load-bearing. For a shared component it is the cheap guard
against the first mount that isn't.
data-testid="signin-modal" and "signin-close" are unchanged.
Deliberately NOT folded in: the close button and the logo/wordmark row. The
close buttons are not actually duplicated verbatim — they differ in offset
(18 vs 14) and only one carries a testid — and the wordmark appears at 20
sites repo-wide with no shared component, so extracting it for 2 of them
would leave a half-migration. #111 touches every icon site anyway; that is
the coherent place for it.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* docs+comments: close review findings on the hero-card extraction (#288)
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(css): repair the hero-surface comment, and guard globals.css structurally (#288)
The review-fix commit closed the hero-surface block comment early: the `*/`
that used to end the whole comment stayed put while a new paragraph was
inserted above it, so the rest of the original comment became raw stylesheet
text. postcss reported it as "Unclosed string" at line 1007 — 780 lines below
the actual mistake, at the first quote it happened to reach.
It got that far because nothing in the fast lane reads this file as CSS.
eslint lints JS/TS, tsc checks types, vitest never imports the stylesheet;
CI's `lint + tsc + vitest` job went green on the broken file. The first thing
that actually parses globals.css is the Next production build, which is why
the local e2e cycle caught it and everything cheaper did not.
Adds src/app/globals.test.ts: a dependency-free structural scan (comments,
strings, brace depth) that fails on exactly this class of breakage, in the
fast lane, pointing at the right line. Hand-rolled rather than importing
postcss on purpose — postcss is only a transitive dependency here and the
installed copy already drifts from CI's. It also tests itself: a second case
feeds it each broken shape to prove it does not silently return "fine".
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
@AndresL230
AndresL230 deleted the docs/tick-p0b branch August 2, 2026 18:29
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@AndresL230
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); docs: tick [P0-B] in the token-unification follow-ups (verified done) by AndresL230 · Pull Request #486 · SaplingLearn/Sapling · GitHub
Skip to content

docs: tick [P0-B] in the token-unification follow-ups (verified done) - #486

Merged
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b
Jul 31, 2026
Merged

docs: tick [P0-B] in the token-unification follow-ups (verified done)#486
AndresL230 merged 1 commit into
mainfrom
docs/tick-p0b

Conversation

@AndresL230

@AndresL230AndresL230 commented Jul 31, 2026

Copy link
Copy Markdown
Collaborator

Docs-only, one checkbox.

While verifying the design-debt pool I found [P0-B] still unticked although it is verifiably done: beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the landing CTAs are the shared <Button variant="primary" size="xl"> (.btn .btn--primary .btn--xl) — app button language, no motion. It landed with the #291 motion work and the #287 beta-pill removal and was simply never ticked, so anyone trusting the doc would have re-done it.

The note also records that the glow was deleted outright rather than converted into a --brand-glow finite entrance. That satisfies the item's intent (no perpetual motion, one button species) and explains why --brand-glow has no consumers today.

No code paths touched, so no e2e cycle.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Updated the beta call-to-action to use the standard primary button appearance.
    • Removed the pill-shaped styling and persistent glow effect for a cleaner, more consistent presentation.
  • Documentation
    • Marked the related beta call-to-action follow-up as completed.

beta-glow / .beta-glow-btn no longer exist anywhere in frontend/src, and the
landing CTAs are the shared <Button variant="primary" size="xl">. Landed with
the #291 motion work + the #287 beta-pill removal; the item was simply never
ticked, so a reader would have re-done it.
Notes that the glow was deleted outright rather than converted to a
--brand-glow entrance — satisfies the intent, and explains why --brand-glow
has no consumers.
Docs-only; no code paths touched.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@supabase

supabaseBot commented Jul 31, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project ybgqdonkoqftwrmweuyv because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitaiBot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 3eb5d7dc-ee2d-4298-a063-287680d6b539

📥 Commits

Reviewing files that changed from the base of the PR and between 53a990b and 0d3aaeb.

📒 Files selected for processing (1)
  • docs/superpowers/followups/2026-06-30-token-unification-followups.md

📝 Walkthrough

Walkthrough

The follow-up documentation marks the beta CTA re-skin complete, recording adoption of shared primary button styling and removal of the former pill and glow treatments.

Changes

Beta CTA styling follow-up

Layer / File(s)Summary
Record CTA styling completion
docs/superpowers/followups/2026-06-30-token-unification-followups.md
Marks the beta CTA re-skin complete and documents removal of the pill treatment and perpetual glow animation.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly identifies the documentation change and the specific P0-B follow-up being marked complete.
Description check✅ PassedThe description is detailed, on-topic, and covers the documentation change, rationale, verification, and testing impact.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/tick-p0b

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with Cloudflare Workers Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

StatusNameLatest CommitPreview URLUpdated (UTC)
✅ Deployment successful!
View logs
frontend-staging0d3aaebCommit Preview URL

Branch Preview URL
Jul 31 2026, 01:37 AM

@AndresL230
AndresL230 merged commit 432c207 into mainJul 31, 2026
7 checks passed
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
AndresL230 added a commit that referenced this pull request Jul 31, 2026
* refactor(ui): extract the shared hero-card surface (#288)
The warm gradient behind the sign-in and beta modals was inlined as a
literal at five sites, and had already drifted at four of them: three
different shadow alphas (0.12 / 0.15 / 0.18), two radii (20 / 24), and one
card missing the inset highlight entirely. Meanwhile --surface-hero and
--surface-hero-shadow sat in globals.css with zero consumers.
Adds `.card--hero` (a named variant of .card, used as `card card--hero`) and
`.hero-surface` (the gradient alone, for panels nested inside a hero card
that must not restate its border, radius or shadow), plus a thin <HeroCard>
wrapper that owns those classes and forwards everything else. Both classes
are now the tokens' only consumers.
This is a VISIBLE change, not a pure refactor, and an intended one: adopting
the token moves the shadow hue from cool slate rgba(15,23,42) to the warm
rgba(19,38,16) the rest of the app uses, unifies the alphas at 0.12, and
gives the beta success modal the 24px radius and inset highlight its two
siblings already had.
The literal fallbacks in both CSS rules are deliberate. The tokens are
scoped to `.public-surface, .landing-page`; every consumer sits inside that
subtree today (verified — SignInModal is mounted only from the landing page,
and nothing here portals to document.body), so the fallback is defensive
rather than load-bearing. For a shared component it is the cheap guard
against the first mount that isn't.
data-testid="signin-modal" and "signin-close" are unchanged.
Deliberately NOT folded in: the close button and the logo/wordmark row. The
close buttons are not actually duplicated verbatim — they differ in offset
(18 vs 14) and only one carries a testid — and the wordmark appears at 20
sites repo-wide with no shared component, so extracting it for 2 of them
would leave a half-migration. #111 touches every icon site anyway; that is
the coherent place for it.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* docs+comments: close review findings on the hero-card extraction (#288)
Tick [P1-E] in the token-unification follow-ups. This PR is what completes
it, and the repo's convention is to fold that tick into the same PR — #486
existed purely to backfill a tick missed the same way.
Name the shadow hue change for what it is. The comments described the
adoption as de-drifting "three shadow alphas, two radii, one missing inset",
which is accurate but incomplete in a misleading direction: the shadow's base
COLOUR was the one value that had not drifted — all five sites agreed on
slate rgba(15,23,42). The token is rgba(19,38,16) = --sap-900, the base the
app's other shadows use, so adopting it re-tints these shadows rather than
reconciling them. Deliberate, and called out in the PR body, but a reader of
the code would have assumed the colour was untouched. Now stated in
globals.css and HeroCard.tsx.
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(css): repair the hero-surface comment, and guard globals.css structurally (#288)
The review-fix commit closed the hero-surface block comment early: the `*/`
that used to end the whole comment stayed put while a new paragraph was
inserted above it, so the rest of the original comment became raw stylesheet
text. postcss reported it as "Unclosed string" at line 1007 — 780 lines below
the actual mistake, at the first quote it happened to reach.
It got that far because nothing in the fast lane reads this file as CSS.
eslint lints JS/TS, tsc checks types, vitest never imports the stylesheet;
CI's `lint + tsc + vitest` job went green on the broken file. The first thing
that actually parses globals.css is the Next production build, which is why
the local e2e cycle caught it and everything cheaper did not.
Adds src/app/globals.test.ts: a dependency-free structural scan (comments,
strings, brace depth) that fails on exactly this class of breakage, in the
fast lane, pointing at the right line. Hand-rolled rather than importing
postcss on purpose — postcss is only a transitive dependency here and the
installed copy already drifts from CI's. It also tests itself: a second case
feeds it each broken shape to prove it does not silently return "fine".
part of #288
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
@AndresL230
AndresL230 deleted the docs/tick-p0b branch August 2, 2026 18:29
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@AndresL230