fix: connect orphaned tokens and close page-property control gaps

[jackgranatowski]

Four tokens were defined but never consumed by the framework, making
user overrides silently ineffective:

• --sf-caret-color: base.css used var(--sf-color-action) directly;
  now routes through the token so overrides take effect
• --sf-touch-target: accessibility.css used hardcoded 44px;
  now uses var(--sf-touch-target) so the tap-size token works
• --sf-reel-height: token existed but .sf-reel had no height property;
  added block-size: var(--sf-reel-height) to close the gap
• --sf-code-font-size: new token (0.875em default) added to the
  typography-alias block; base.css code {} now references it

Additional fixes:

• .is-loading spinner: 2px solid → var(--sf-border-width-2), 0.6s →
  var(--sf-duration-slower) so both respect the token system
• .is-skeleton shimmer: 1.5s → calc(1.5s * var(--sf-motion-scale))
  so --sf-motion-scale: 0 correctly disables the animation
• .is-drop-target: hardcoded 2px/2px outline replaced with
  --sf-focus-ring-width / --sf-focus-ring-offset for consistency

https://claude.ai/code/session_01JZgSS8oM38zt4JRETmCsSz

Summary by CodeRabbit

• Refactor
  • Migrated component styling to use design tokens for touch targets, typography sizing, caret styling, layout heights, and interactive state animations, replacing hard-coded values across the design system.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2c99e757-29a8-4388-a7ef-4ddaedf39a77

📥 Commits

Reviewing files that changed from the base of the PR and between 23c421c and 598e212.

📒 Files selected for processing (5)

• core/accessibility.css
• core/base.css
• core/layout.css
• core/states.css
• core/tokens.css

---

📝 Walkthrough

Walkthrough

This PR systematically replaces hardcoded CSS values in five core framework stylesheets with design tokens. A new --sf-code-font-size token is defined and adopted by code elements, while existing tokens like --sf-touch-target, --sf-caret-color, --sf-reel-height, focus-ring properties, and motion-scale expressions are wired into accessibility, layout, and interactive state styling rules.

Changes

Core CSS Tokenization

Layer / File(s)	Summary
New typography token definition core/tokens.css	Introduces --sf-code-font-size: 0.875em token in the typography aliases section.
Typography and form control tokenization core/base.css	code element font-size switches from hardcoded 0.875em to the new --sf-code-font-size token; input, textarea caret color switches from --sf-color-action to a dedicated --sf-caret-color token.
Accessibility and layout tokenization core/accessibility.css, core/layout.css	Coarse-pointer touch-target sizing switches from fixed 44px to --sf-touch-target token; .sf-reel explicitly sets block-size via --sf-reel-height token.
Interactive state tokenization core/states.css	Loading spinner (.is-loading::after) applies tokenized border properties and sf-spin animation with slower duration; skeleton shimmer (.is-skeleton) drives animation timing via calc(1.5s * var(--sf-motion-scale)); drop-target focus ring (.is-drop-target) uses tokenized focus-ring width, style, color, and offset instead of hardcoded outline values.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• codeslash-dev/SLASHED#63: Both PRs are part of the same tokenization effort—this PR adds --sf-code-font-size and switches core CSS to token-based values, aligning directly with #63's "perfected tokens/core" work.
• codeslash-dev/SLASHED#55: This PR updates core/*.css to consume tokenized values (e.g., --sf-touch-target, --sf-code-font-size, motion-scale, focus-ring tokens), which is directly aligned with #55's redesigned tokens framework that defines those framework tokens.
• codeslash-dev/SLASHED#34: Both PRs touch core/states.css's loading/skeleton styling—Phase 1: truthfulness foundation — themes layer extraction, bundle scope, browser floor accuracy #34 moves the sf-spin/sf-shimmer keyframe definitions into core/motion.css, while this PR updates .is-loading::after and .is-skeleton to use tokenized animation timing and border values.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main objective: connecting orphaned/unused tokens and fixing related styling gaps by integrating token variables throughout the CSS files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/page-properties-token-control-slHE2

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}