Skip to content

feat: add corner-scoop, corner/overlap recipe macros #517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jackgranatowski wants to merge 16 commits into from
Closed

feat: add corner-scoop, corner/overlap recipe macros #517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f9990f0
feat: add corner-scoop, corner/overlap recipes, and .sf-bg fix
claude Jul 4, 2026
d1e5bcc
chore: sync frozen audit snapshots with the 7 new macro tokens
claude Jul 4, 2026
a7c447e
fix: categorize new macro tokens, drop unused test variable
claude Jul 4, 2026
9feae29
fix(tests): lock new macro tokens into token-api snapshot
claude Jul 4, 2026
20055a9
docs(demo): add a composed profile-card showcase for the new macros
claude Jul 4, 2026
f197a27
Update demo.html
jackgranatowski Jul 4, 2026
9a04461
fix(docs): stop stylelint comments leaking into class descriptions, c…
claude Jul 4, 2026
0410ddc
fix(demo): revert stylesheet link to local build, not the dist CDN
claude Jul 4, 2026
b5ac26e
Merge remote-tracking branch 'origin/main' into claude/macros-scoop-o…
claude Jul 4, 2026
ca6f7b3
feat(macros): add two-corner .sf-corner-scoop pair variants
claude Jul 4, 2026
9084218
fix(macros): avoid a WebKit mask-composite bug in corner-scoop pairs
claude Jul 4, 2026
9d6f23d
fix(macros): add legacy -webkit-mask-composite for corner-scoop pairs
claude Jul 4, 2026
1eefda6
Revert "fix(macros): add legacy -webkit-mask-composite for corner-sco…
claude Jul 4, 2026
87315a6
Revert "fix(macros): avoid a WebKit mask-composite bug in corner-scoo…
claude Jul 4, 2026
078ea14
Revert "feat(macros): add two-corner .sf-corner-scoop pair variants"
claude Jul 4, 2026
b82ec6f
fix(macros): drop .sf-corners (leaf/leaf-flip), keep scoop and overlap
claude Jul 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),

## Unreleased

### Added
- **macros:** `.sf-corner-scoop` — mask-based concave-corner cut, with `--top-left`/`--top-right`/`--bottom-left`/`--bottom-right` placement modifiers and `--sf-corner-scoop-size`/`--sf-corner-scoop-at` knobs.
- **macros:** `.sf-overlap` / `.sf-overlap-host` — negative-margin overlap recipe (`--down`/`--start`/`--end` modifiers) driven by `--sf-overlap-pull`, with a host class that reserves matching space.

## [0.6.35] - 2026-07-03

### ⚠️ Breaking Changes
Expand Down
2 changes: 1 addition & 1 deletion badges/badge-optimal.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"schemaVersion": 1,
"label": "optimal",
"message": "17.8 kB gzip",
"message": "18.1 kB gzip",
"color": "brightgreen",
"namedLogo": "css3"
}
17 changes: 16 additions & 1 deletion badges/css-custom-data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@
},
{
"name": "--sf-bg-inset",
"description": "Inset from every edge of the parent. A single length applied uniformly; the layer size is derived from it so a non-zero inset still fills correctly.\n\nDefault: `0`",
"description": "Inset from every edge of the parent. A single length applied uniformly; the layer size is derived from it so a non-zero inset still fills correctly.\n\nDefault: `0px`",
"syntax": "*"
},
{
Expand Down Expand Up @@ -1626,6 +1626,16 @@
"description": "OKLCH lightness crossover for auto-contrast on colored surfaces. Colors with L above this get dark text; below get light text. Default 0.6.\n\nDefault: `0.6`\n\n(advanced token)",
"syntax": "*"
},
{
"name": "--sf-corner-scoop-at",
"description": "radius and corner position for .sf-corner-scoop. Override per element: style=\"--sf-corner-scoop-size: var(--sf-radius-3xl)\".\n\nDefault: `100% 0`",
"syntax": "*"
},
{
"name": "--sf-corner-scoop-size",
"description": "radius and corner position for .sf-corner-scoop. Override per element: style=\"--sf-corner-scoop-size: var(--sf-radius-3xl)\".\n\nDefault: `var(--sf-radius-2xl)`",
"syntax": "*"
},
{
"name": "--sf-cover-min-height",
"description": "Minimum height of the cover layout (typically 100svh).\n\nDefault: `100dvh`",
Expand Down Expand Up @@ -2396,6 +2406,11 @@
"description": "CSS font-optical-sizing value. 'auto' lets the browser optimize letterforms for the rendered size. Set 'none' to disable optical sizing.\n\nDefault: `auto`\n\n(advanced token)",
"syntax": "*"
},
{
"name": "--sf-overlap-pull",
"description": "how far .sf-overlap pulls into the adjacent element. .sf-overlap-host's padding compensation defaults to this same value via a var() fallback in the rule itself (not aliased here — see core/macros.css), so one override on the host tunes both unless --sf-overlap-host-pad is set…\n\nDefault: `var(--sf-space-xl)`",
"syntax": "*"
},
{
"name": "--sf-palette-mix-100",
"description": "Color-mix percentage for palette step 100. Controls blend depth toward the surface. Default 8%.\n\nDefault: `8%`\n\n(advanced token)",
Expand Down
79 changes: 74 additions & 5 deletions configurator/src/data/api-index.generated.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@
"_sync": {
"generatedBy": "configurator/scripts/sync-api.mjs",
"source": "docs/api-index.json",
"tokensHash": "354667facc7c",
"tokensHash": "4a0ad429ba01",
"bundles": [
"full",
"optimal",
"optimal-components",
"optimal-utilities"
],
"counts": {
"tokens": 684,
"tokens": 687,
"byTier": {
"PUBLIC": 628,
"PUBLIC": 631,
"PUBLIC-ADVANCED": 55,
"INTERNAL": 1
},
"byCategory": {
"Layout tokens": 53,
"Core tokens": 602,
"Macro tokens": 23,
"Macro tokens": 26,
"Component tokens": 6
}
}
Expand Down Expand Up @@ -678,7 +678,7 @@
"group": "Background layer (.sf-bg)",
"description": "Inset from every edge of the parent. A single length applied uniformly; the layer size is derived from it so a non-zero inset still fills correctly.",
"note": "Inset from every edge of the parent. A single length applied uniformly; the layer size is derived from it so a non-zero inset still fills correctly.",
"value": "0",
"value": "0px",
"aliasOf": null,
"registered": false,
"syntax": null,
Expand Down Expand Up @@ -7494,6 +7494,52 @@
"optimal-utilities"
]
},
{
"name": "--sf-corner-scoop-at",
"tier": "PUBLIC",
"role": "knob",
"namespace": "corner",
"category": "Macro tokens",
"group": "Concave corner",
"description": "radius and corner position for .sf-corner-scoop. Override per element: style=\"--sf-corner-scoop-size: var(--sf-radius-3xl)\".",
"note": "",
"value": "100% 0",
"aliasOf": null,
"registered": false,
"syntax": null,
"fallbackOnly": false,
"optional": false,
"layer": "slashed.tokens",
"bundles": [
"full",
"optimal",
"optimal-components",
"optimal-utilities"
]
},
{
"name": "--sf-corner-scoop-size",
"tier": "PUBLIC",
"role": "consumption",
"namespace": "corner",
"category": "Macro tokens",
"group": "Concave corner",
"description": "radius and corner position for .sf-corner-scoop. Override per element: style=\"--sf-corner-scoop-size: var(--sf-radius-3xl)\".",
"note": "",
"value": "var(--sf-radius-2xl)",
"aliasOf": "--sf-radius-2xl",
"registered": false,
"syntax": null,
"fallbackOnly": false,
"optional": false,
"layer": "slashed.tokens",
"bundles": [
"full",
"optimal",
"optimal-components",
"optimal-utilities"
]
},
{
"name": "--sf-cover-min-height",
"tier": "PUBLIC",
Expand Down Expand Up @@ -11053,6 +11099,29 @@
"optimal-utilities"
]
},
{
"name": "--sf-overlap-pull",
"tier": "PUBLIC",
"role": "consumption",
"namespace": "overlap",
"category": "Macro tokens",
"group": "Overlap recipe",
"description": "how far .sf-overlap pulls into the adjacent element. .sf-overlap-host's padding compensation defaults to this same value via a var() fallback in the rule itself (not aliased here — see core/macros.css), so one override on the host tunes both unless --sf-overlap-host-pad is set…",
"note": "",
"value": "var(--sf-space-xl)",
"aliasOf": "--sf-space-xl",
"registered": false,
"syntax": null,
"fallbackOnly": false,
"optional": false,
"layer": "slashed.tokens",
"bundles": [
"full",
"optimal",
"optimal-components",
"optimal-utilities"
]
},
Comment on lines +11102 to +11124

@coderabbitai coderabbitai Bot Jul 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check the source comment in core/macros.css for --sf-overlap-pull
rg -n -B2 -A2 'sf-overlap-pull' core/macros.css

Repository: codeslash-dev/SLASHED

Length of output: 972

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== overlap entry in generated index ==="
sed -n '11194,11216p' configurator/src/data/api-index.generated.json

echo
echo "=== nearby source comment in core/macros.css ==="
sed -n '424,436p' core/macros.css

echo
echo "=== search for other generated descriptions ending with ellipsis ==="
python3 - <<'PY'
import json, re
from pathlib import Path

p = Path('configurator/src/data/api-index.generated.json')
data = json.loads(p.read_text())
hits = []
for item in data:
    desc = item.get('description')
    if isinstance(desc, str) and desc.endswith('…'):
        hits.append((item.get('name'), desc))
print("count", len(hits))
for name, desc in hits[:20]:
    print(name, "=>", desc)
PY

Repository: codeslash-dev/SLASHED

Length of output: 1927

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== source for overlap-pull docs in repo ==="
rg -n -B2 -A3 --fixed-strings '--sf-overlap-pull' core configurator/src/data

Repository: codeslash-dev/SLASHED

Length of output: 624

configurator/src/data/api-index.generated.json:11194-11216 — Truncated description for --sf-overlap-pull. The generated text ends mid-sentence; regenerate this entry so the public-facing tooltip/docs show the full sentence.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@configurator/src/data/api-index.generated.json` around lines 11194 - 11216,
The generated api-index entry for --sf-overlap-pull has a truncated description
that ends mid-sentence, so regenerate the corresponding record in
api-index.generated.json to restore the full public-facing text. Update the
description field for the --sf-overlap-pull token so it includes the complete
sentence, keeping the existing metadata (such as name, aliasOf, and group)
unchanged.

{
"name": "--sf-palette-mix-100",
"tier": "PUBLIC-ADVANCED",
Expand Down
100 changes: 100 additions & 0 deletions configurator/src/data/classes.generated.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -834,6 +834,56 @@
"optional": false,
"layer": "slashed.layout"
},
{
"name": "sf-corner-scoop",
"selector": ".sf-corner-scoop",
"kind": "macro",
"category": "Macro classes",
"group": "",
"description": "Concave corner — a corner that curves AWAY from the box (revealing whatever sits behind it), via a radial-gradient mask. Physical corner names (mask geometry has no logical form, same rationale as .sf-overflow-fade's physical directions). Cuts the element's full paint at that…",
"optional": false,
"layer": "slashed.macros"
},
{
"name": "sf-corner-scoop--bottom-left",
"selector": ".sf-corner-scoop--bottom-left",
"kind": "macro",
"category": "Macro classes",
"group": "",
"description": "Concave corner — a corner that curves AWAY from the box (revealing whatever sits behind it), via a radial-gradient mask. Physical corner names (mask geometry has no logical form, same rationale as .sf-overflow-fade's physical directions). Cuts the element's full paint at that…",
"optional": false,
"layer": "slashed.macros"
},
{
"name": "sf-corner-scoop--bottom-right",
"selector": ".sf-corner-scoop--bottom-right",
"kind": "macro",
"category": "Macro classes",
"group": "",
"description": "Concave corner — a corner that curves AWAY from the box (revealing whatever sits behind it), via a radial-gradient mask. Physical corner names (mask geometry has no logical form, same rationale as .sf-overflow-fade's physical directions). Cuts the element's full paint at that…",
"optional": false,
"layer": "slashed.macros"
},
{
"name": "sf-corner-scoop--top-left",
"selector": ".sf-corner-scoop--top-left",
"kind": "macro",
"category": "Macro classes",
"group": "",
"description": "Concave corner — a corner that curves AWAY from the box (revealing whatever sits behind it), via a radial-gradient mask. Physical corner names (mask geometry has no logical form, same rationale as .sf-overflow-fade's physical directions). Cuts the element's full paint at that…",
"optional": false,
"layer": "slashed.macros"
},
{
"name": "sf-corner-scoop--top-right",
"selector": ".sf-corner-scoop--top-right",
"kind": "macro",
"category": "Macro classes",
"group": "",
"description": "Concave corner — a corner that curves AWAY from the box (revealing whatever sits behind it), via a radial-gradient mask. Physical corner names (mask geometry has no logical form, same rationale as .sf-overflow-fade's physical directions). Cuts the element's full paint at that…",
"optional": false,
"layer": "slashed.macros"
},
{
"name": "sf-cover",
"selector": ".sf-cover",
Expand Down Expand Up @@ -1854,6 +1904,56 @@
"optional": false,
"layer": "slashed.macros"
},
{
"name": "sf-overlap",
"selector": ".sf-overlap",
"kind": "macro",
"category": "Macro classes",
"group": "",
"description": "Overlap recipe — one element intentionally overlapping the previous one (e.g. an image pulled up over the card below it), via a negative logical margin + a raised stacking context. Directional variants are standalone (margins are distinct properties, not a re-pointable knob).",
"optional": false,
"layer": "slashed.macros"
},
{
"name": "sf-overlap--down",
"selector": ".sf-overlap--down",
"kind": "macro",
"category": "Macro classes",
"group": "",
"description": "Overlap recipe — one element intentionally overlapping the previous one (e.g. an image pulled up over the card below it), via a negative logical margin + a raised stacking context. Directional variants are standalone (margins are distinct properties, not a re-pointable knob).",
"optional": false,
"layer": "slashed.macros"
},
{
"name": "sf-overlap--end",
"selector": ".sf-overlap--end",
"kind": "macro",
"category": "Macro classes",
"group": "",
"description": "Overlap recipe — one element intentionally overlapping the previous one (e.g. an image pulled up over the card below it), via a negative logical margin + a raised stacking context. Directional variants are standalone (margins are distinct properties, not a re-pointable knob).",
"optional": false,
"layer": "slashed.macros"
},
{
"name": "sf-overlap--start",
"selector": ".sf-overlap--start",
"kind": "macro",
"category": "Macro classes",
"group": "",
"description": "Overlap recipe — one element intentionally overlapping the previous one (e.g. an image pulled up over the card below it), via a negative logical margin + a raised stacking context. Directional variants are standalone (margins are distinct properties, not a re-pointable knob).",
"optional": false,
"layer": "slashed.macros"
},
{
"name": "sf-overlap-host",
"selector": ".sf-overlap-host",
"kind": "macro",
"category": "Macro classes",
"group": "",
"description": "Card-container recipe — the receiving side of an overlap: an isolated stacking context with block-start padding compensation so in-flow content clears an element intruding from above. The padding knob defaults to the pull knob so one override tunes both.",
"optional": false,
"layer": "slashed.macros"
},
{
"name": "sf-pancake",
"selector": ".sf-pancake",
Expand Down
2 changes: 1 addition & 1 deletion configurator/src/data/domain-patterns.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"macros": ["prose", "flow-space", "line-clamp", "aspect", "scroll-shadow", "scrim", "surface-color", "content-intrinsic"],
"macros": ["prose", "flow-space", "line-clamp", "aspect", "scroll-shadow", "scrim", "surface-color", "content-intrinsic", "corner-scoop", "overlap-"],
"colors": ["color", "contrast", "palette-mix", "lumlocker", "gradient"],
"typography": ["font", "--sf-text", "leading", "tracking", "weight", "body-font", "heading-font",
"body-em", "body-text", "heading-text", "display-l-", "display-m-",
Expand Down
34 changes: 33 additions & 1 deletion configurator/src/data/token-registry.generated.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"_meta": {
"generatedBy": "scripts/gen-token-registry.js",
"nextId": 710
"nextId": 717
},
"tokens": [
{
Expand Down Expand Up @@ -2869,6 +2869,38 @@
"id": 709,
"name": "--sf-boxed-shadow",
"removed": true
},
{
"id": 710,
"name": "--sf-corner-scoop-at"
},
{
"id": 711,
"name": "--sf-corner-scoop-size"
},
{
"id": 712,
"name": "--sf-corners-end-end",
"removed": true
},
{
"id": 713,
"name": "--sf-corners-end-start",
"removed": true
},
{
"id": 714,
"name": "--sf-corners-start-end",
"removed": true
},
{
"id": 715,
"name": "--sf-corners-start-start",
"removed": true
},
{
"id": 716,
"name": "--sf-overlap-pull"
}
]
}
Loading
Loading