From 3d307ebdb9a97c48a67a458b04c01f361f6eba51 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 19 Nov 2024 14:14:59 -0600 Subject: [PATCH 1/8] apply OddBird brand tokens to demo site --- index.html | 7 ++- public/anchor-scroll.css | 2 +- public/demo.css | 111 ++++++++++++++++++++++++--------------- 3 files changed, 77 insertions(+), 43 deletions(-) diff --git a/index.html b/index.html index 05cde0e6..58036e74 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ CSS Anchor Positioning Polyfill Demo - + + + + + + diff --git a/public/anchor-scroll.css b/public/anchor-scroll.css index 0906bfb0..4750c443 100644 --- a/public/anchor-scroll.css +++ b/public/anchor-scroll.css @@ -1,7 +1,7 @@ .scroll-container { height: 400px; overflow: scroll; - border: solid; + border: thin solid; position: relative; } diff --git a/public/demo.css b/public/demo.css index 16846e3a..44dcde7d 100644 --- a/public/demo.css +++ b/public/demo.css @@ -4,39 +4,50 @@ } html { - --action: var(--action-light); - --action-dark: var(--pink-2); - --action-light: hsl(339deg 68% 37%); - --anchor-color: var(--yellow-6); - --bg: var(--gray-1); - --brand: var(--green-9); + --brand-blue: lch(38.953 23.391 229.55); + --brand-pink: lch(50.161 77.603 3.8969); + --brand-pink-light: lch(from var(--brand-pink) calc(l + 8) c h); + --brand-pink-dark: lch(from var(--brand-pink) calc(l - 20) c h); + --brand-orange: lch(70.149 72.526 55.336); + --brand-orange-dark: lch(from var(--brand-orange) calc(l - 20) c h); + --gray-1: lch(from var(--brand-blue) calc(l + 53) calc(c - 19) h); + --gray-2: lch(from var(--brand-blue) calc(l + 14) calc(c - 19) h); + --gray-3: lch(from var(--brand-blue) calc(l + 4) calc(c - 13) h); + --gray-4: lch(from var(--brand-blue) calc(l - 13) calc(c - 13) h); + --gray-5: lch(from var(--brand-blue) calc(l - 26) calc(c - 13) h); + --action: var(--brand-pink-dark); + --anchor-color: var(--brand-pink); + --bg: white; + --border: var(--gray-3); --button-border: var(--text); - --callout: var(--gray-3); - --disabled-bg: var(--gray-6); - --disabled-text: var(--gray-2); - --grad: var(--lime-0); - --target: var(--lime-8); + --text: var(--gray-5); + --callout: lch(89 7 229); + --disabled-bg: var(--gray-3); + --disabled-text: white; + --target: var(--brand-blue); --link-focus: var(--text); - --outer-anchored: var(--blue-2); - --text: var(--gray-9); + --outer-anchored: var(--brand-orange-dark); --note-color: var(--target); - --page-margin: calc(var(--size-3) + 4vw); - --pseudo-element: var(--gray-0); + --page-margin: calc(1rem + 4vw); + --pseudo-element: var(--action); + --font-serif: freight-text-pro,Baskerville,Palatino,Cambria,Georgia,serif; + --font-sans: freight-sans-pro,'Helvetica Neue',Helvetica,Arial,sans-serif; + --font-mono: 'Dank Mono','Operator Mono',Inconsolata,'Fira Mono',ui-monospace,'SF Mono',Monaco,'Droid Sans Mono','Source Code Pro','Cascadia Code',Menlo,Consolas,'DejaVu Sans Mono',monospace; background-color: var(--bg); color: var(--text); - font-family: var(--font-sans); + font-family: var(--font-serif); + font-size: calc(1em + 0.25vw); } @media (prefers-color-scheme: dark) { html { - --action: var(--action-dark); - --bg: var(--gray-9); - --brand: var(--green-3); - --callout: var(--gray-8); - --grad: var(--lime-9); - --gradient-bg: var(--gradient-16); - --text: var(--gray-2); + --action: var(--brand-pink-light); + --bg: var(--gray-5); + --border: var(--gray-2); + --callout: var(--gray-4); + --button-text: var(--text); + --text: white; } } @@ -52,7 +63,7 @@ body { @media (width >= 30em) { body { - --page-margin: calc(var(--size-6) + 4vw); + --page-margin: calc(1.75rem + 4vw); } } @@ -60,11 +71,11 @@ body { header, footer { - background: var(--gradient-bg, var(--grad)); grid-column: full; } header { + background-color: var(--bg); border-block-end: thin dotted var(--text); display: grid; grid-column: full; @@ -82,21 +93,27 @@ header { header { --header-padding: 1em 0; + align-items: start; display: grid; gap: 0.5em; grid-template: - '. title title .' auto - '. nav button .' minmax(2rem, auto) + '. title button .' auto + '. nav button .' auto / var(--page-margin) minmax(min-content, 1fr) minmax(2rem, auto) var(--page-margin); } [data-button] { - align-self: center; justify-self: end; + margin-block-start: 0.25lh; } } +:where(h1,h2,h3,h4,h5,h6) { + font-family: var(--font-sans); +} + h1 { + font-size: calc(1.75rem + 1vw); grid-area: title; margin: 0; } @@ -104,8 +121,8 @@ h1 { nav { display: flex; flex-wrap: wrap; + gap: 1ch; grid-area: nav; - padding: 1em 0; } section { @@ -142,11 +159,12 @@ footer p { .demo-elements { grid-area: elements; + font-family: var(--font-sans); } -.demo-item .note { +.note { background-color: var(--callout); - border-left: 0.5em solid var(--note-color); + border-inline-start: 0.5em solid var(--note-color); grid-area: note; margin: 2em 0 0; padding: 1em; @@ -157,11 +175,7 @@ footer p { /* prettier-ignore */ [href*='://']::after { content: ' ↗'; -} - -nav a:any-link, -nav span { - padding: 0.25em; + font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; } a:any-link { @@ -189,8 +203,8 @@ a:any-link:focus { [data-button]:hover, [data-button]:focus, [data-button]:active { - --button-bg-color: var(--gray-2); - --button-text: var(--action-light); + --button-bg-color: var(--bg); + --button-text: var(--action); } [data-button]:disabled { @@ -208,6 +222,7 @@ a:any-link:focus { /* heading links */ h2 { + font-size: calc(1.5rem + 0.5vw); position: relative; } @@ -240,9 +255,9 @@ h2 [aria-hidden]:active { .anchor, .target { background: var(--element-color); - border: thin solid var(--text); + border: thin solid var(--border); border-radius: var(--radius-1); - color: var(--gray-9); + color: white; font-weight: bold; padding: 0.5em; white-space: nowrap; @@ -264,7 +279,7 @@ h2 [aria-hidden]:active { /* code samples */ pre { - border: thin dotted gray; + border: thin dotted var(--border); background-color: var(--callout); font-family: var(--font-mono); grid-area: code; @@ -272,3 +287,17 @@ pre { max-width: 100%; padding: 1em; } + +code { + font-size: 90%; +} + +code[class*="language-"], +pre[class*="language-"] { + font-size: 0.9em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background-color: lch(98 2 269.6); +} From 230e15ec6dc8e109a220a3ac7276c57ef5b84336 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 19 Nov 2024 14:15:39 -0600 Subject: [PATCH 2/8] spacing --- index.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/index.html b/index.html index 58036e74..99cc9bd0 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,6 @@ CSS Anchor Positioning Polyfill Demo - - - + From c1df471e2e330105814c6a2b919932a6828d22de Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 19 Nov 2024 14:25:53 -0600 Subject: [PATCH 3/8] lint --- public/demo.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/public/demo.css b/public/demo.css index 44dcde7d..f1e4a708 100644 --- a/public/demo.css +++ b/public/demo.css @@ -4,11 +4,11 @@ } html { - --brand-blue: lch(38.953 23.391 229.55); - --brand-pink: lch(50.161 77.603 3.8969); + --brand-blue: lch(38.953% 23.391 229.55deg); + --brand-pink: lch(50.161% 77.603 3.8969deg); --brand-pink-light: lch(from var(--brand-pink) calc(l + 8) c h); --brand-pink-dark: lch(from var(--brand-pink) calc(l - 20) c h); - --brand-orange: lch(70.149 72.526 55.336); + --brand-orange: lch(70.149% 72.526 55.336deg); --brand-orange-dark: lch(from var(--brand-orange) calc(l - 20) c h); --gray-1: lch(from var(--brand-blue) calc(l + 53) calc(c - 19) h); --gray-2: lch(from var(--brand-blue) calc(l + 14) calc(c - 19) h); @@ -21,7 +21,7 @@ html { --border: var(--gray-3); --button-border: var(--text); --text: var(--gray-5); - --callout: lch(89 7 229); + --callout: lch(89% 7 229deg); --disabled-bg: var(--gray-3); --disabled-text: white; --target: var(--brand-blue); @@ -175,7 +175,7 @@ footer p { /* prettier-ignore */ [href*='://']::after { content: ' ↗'; - font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; + font-family: system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif; } a:any-link { @@ -299,5 +299,5 @@ pre[class*="language-"] { :not(pre) > code[class*="language-"], pre[class*="language-"] { - background-color: lch(98 2 269.6); + background-color: lch(98% 2 269.6deg); } From cb5b8ba87a20cb55a55dbc1a51a5607b37335793 Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Tue, 19 Nov 2024 15:35:36 -0500 Subject: [PATCH 4/8] lint --- index.html | 6 +++++- public/demo.css | 6 +++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 99cc9bd0..352f675c 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,11 @@ > - + diff --git a/public/demo.css b/public/demo.css index f1e4a708..0061c831 100644 --- a/public/demo.css +++ b/public/demo.css @@ -30,9 +30,9 @@ html { --note-color: var(--target); --page-margin: calc(1rem + 4vw); --pseudo-element: var(--action); - --font-serif: freight-text-pro,Baskerville,Palatino,Cambria,Georgia,serif; - --font-sans: freight-sans-pro,'Helvetica Neue',Helvetica,Arial,sans-serif; - --font-mono: 'Dank Mono','Operator Mono',Inconsolata,'Fira Mono',ui-monospace,'SF Mono',Monaco,'Droid Sans Mono','Source Code Pro','Cascadia Code',Menlo,Consolas,'DejaVu Sans Mono',monospace; + --font-serif: freight-text-pro,baskerville,palatino,cambria,georgia,serif; + --font-sans: freight-sans-pro,'Helvetica Neue',helvetica,arial,sans-serif; + --font-mono: 'Dank Mono','Operator Mono',inconsolata,'Fira Mono',ui-monospace,'SF Mono',monaco,'Droid Sans Mono','Source Code Pro','Cascadia Code',menlo,consolas,'DejaVu Sans Mono',monospace; background-color: var(--bg); color: var(--text); From ec1c9381cef6fdfed37ab415ab93f949ddee94b8 Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Tue, 19 Nov 2024 15:46:00 -0500 Subject: [PATCH 5/8] remove reference to open-props --- index.html | 6 ------ package.json | 2 +- public/demo.css | 18 ++++++++++-------- 3 files changed, 11 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 352f675c..adee94b0 100644 --- a/index.html +++ b/index.html @@ -1310,12 +1310,6 @@

Sponsor OddBird's OSS Work

target="_blank" rel="noopener noreferrer" >OddBird. Designed using - Open Props.

diff --git a/package.json b/package.json index d2bc13f6..667a5b4a 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "eslint:fix": "npm run eslint:check -- --fix", "format:css": "npm run lint:css -- --fix", "format:js": "run-s prettier:fix eslint:fix tsc tsc:tests", - "lint": "run-p format:css format:js", + "lint": "run-s format:css format:js", "lint:css": "stylelint \"**/*.css\"", "lint:js": "run-s prettier:check eslint:check tsc tsc:tests", "lint:ci": "run-p lint:css lint:js", diff --git a/public/demo.css b/public/demo.css index 0061c831..c7006989 100644 --- a/public/demo.css +++ b/public/demo.css @@ -30,9 +30,11 @@ html { --note-color: var(--target); --page-margin: calc(1rem + 4vw); --pseudo-element: var(--action); - --font-serif: freight-text-pro,baskerville,palatino,cambria,georgia,serif; - --font-sans: freight-sans-pro,'Helvetica Neue',helvetica,arial,sans-serif; - --font-mono: 'Dank Mono','Operator Mono',inconsolata,'Fira Mono',ui-monospace,'SF Mono',monaco,'Droid Sans Mono','Source Code Pro','Cascadia Code',menlo,consolas,'DejaVu Sans Mono',monospace; + --font-serif: freight-text-pro, baskerville, palatino, cambria, georgia, serif; + --font-sans: freight-sans-pro, 'Helvetica Neue', helvetica, arial, sans-serif; + --font-mono: 'Dank Mono', 'Operator Mono', inconsolata, 'Fira Mono', + ui-monospace, 'SF Mono', monaco, 'Droid Sans Mono', 'Source Code Pro', + 'Cascadia Code', menlo, consolas, 'DejaVu Sans Mono', monospace; background-color: var(--bg); color: var(--text); @@ -108,7 +110,7 @@ header { } } -:where(h1,h2,h3,h4,h5,h6) { +:where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-sans); } @@ -292,12 +294,12 @@ code { font-size: 90%; } -code[class*="language-"], -pre[class*="language-"] { +code[class*='language-'], +pre[class*='language-'] { font-size: 0.9em; } -:not(pre) > code[class*="language-"], -pre[class*="language-"] { +:not(pre) > code[class*='language-'], +pre[class*='language-'] { background-color: lch(98% 2 269.6deg); } From 6c59c1583c97eced206daf3b5b3cf61d8beb6d6b Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Tue, 19 Nov 2024 15:55:08 -0500 Subject: [PATCH 6/8] Fix tests --- tests/e2e/polyfill.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/e2e/polyfill.test.ts b/tests/e2e/polyfill.test.ts index d689cf45..81dc486f 100644 --- a/tests/e2e/polyfill.test.ts +++ b/tests/e2e/polyfill.test.ts @@ -72,7 +72,7 @@ test('applies polyfill for `anchor()`', async ({ page }) => { await applyPolyfill(page); - await expect(target).toHaveCSS('top', `${parentHeight}px`); + await expectWithinOne(target, 'top', parentHeight); await expectWithinOne(target, 'right', expected); }); @@ -88,7 +88,7 @@ test('applies polyfill from inline styles', async ({ page }) => { await applyPolyfill(page); - await expect(targetInLine).toHaveCSS('top', `${parentHeight}px`); + await expectWithinOne(targetInLine, 'top', parentHeight); await expectWithinOne(targetInLine, 'right', expected); }); @@ -99,7 +99,7 @@ test('updates when sizes change', async ({ page }) => { const parentHeight = await getParentHeight(page, targetSelector); await applyPolyfill(page); - await expect(target).toHaveCSS('top', `${parentHeight}px`); + await expectWithinOne(target, 'top', parentHeight); await expectWithinOne(target, 'right', parentWidth - width); await page From 720031c3eb5e8d40b1c69f90c454c8682234c03f Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 19 Nov 2024 21:10:42 -0500 Subject: [PATCH 7/8] Adjust examples --- index.html | 8 ++++---- public/anchor-absolute.css | 5 ----- public/anchor-math.css | 4 ++-- 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index adee94b0..e3066ebd 100644 --- a/index.html +++ b/index.html @@ -861,8 +861,8 @@

Target

- With polyfill applied: Target's left edge is 50px left of the Anchor's - right edge). The top edge of the Target is 50px above the bottom edge of + With polyfill applied: Target's left edge is 10px left of the Anchor's + right edge). The top edge of the Target is 10px below the bottom edge of the Anchor. 


 
 #my-target-math {
   --full-math: anchor(--my-anchor-math 100%);
-  --full-minus-math: calc(anchor(--my-anchor-math 100%) - 50px);
+  --full-minus-math: calc(anchor(--my-anchor-math 100%) - 10px);
 
   position: absolute;
-  top: calc(var(--full-math) - 50px);
+  top: calc(var(--full-math) + 10px);
   left: var(--full-minus-math);
 }
diff --git a/public/anchor-absolute.css b/public/anchor-absolute.css index 325e7c1e..3695bef1 100644 --- a/public/anchor-absolute.css +++ b/public/anchor-absolute.css @@ -4,11 +4,6 @@ anchor-name: --my-anchor-absolute; } -#my-anchor-absolute-one { - top: 10px; - left: 20px; -} - #my-anchor-absolute-two { top: 100px; left: 200px; diff --git a/public/anchor-math.css b/public/anchor-math.css index 624f5c59..6968c01a 100644 --- a/public/anchor-math.css +++ b/public/anchor-math.css @@ -4,9 +4,9 @@ #my-target-math { --full-math: anchor(--my-anchor-math 100%); - --full-minus-math: calc(anchor(--my-anchor-math 100%) - 50px); + --full-minus-math: calc(anchor(--my-anchor-math 100%) - 10px); position: absolute; - top: calc(var(--full-math) - 50px); + top: calc(var(--full-math) + 10px); left: var(--full-minus-math); } From 1efc9ef92fc1b81174d09201024e82f89fd1efcd Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Wed, 20 Nov 2024 12:24:33 -0500 Subject: [PATCH 8/8] Update links and add description to readme. --- README.md | 13 ++++++++++--- index.html | 6 +++--- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 3652e031..34e10e59 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,18 @@ # CSS Anchor Positioning Polyfill -[![Build Status](https://github.com/oddbird/css-anchor-positioning/actions/workflows/test.yml/badge.svg)](https://github.com/oddbird/css-anchor-positioning/actions/workflows/test.yml) - -[![Netlify Status](https://api.netlify.com/api/v1/badges/61a20096-7925-4775-99a9-b40a010197c0/deploy-status)](https://app.netlify.com/sites/anchor-polyfill/deploys) +[![Build Status](https://github.com/oddbird/css-anchor-positioning/actions/workflows/test.yml/badge.svg)](https://github.com/oddbird/css-anchor-positioning/actions/workflows/test.yml) [![npm version](https://badge.fury.io/js/@oddbird%2Fcss-anchor-positioning.svg)](https://www.npmjs.com/package/@oddbird/css-anchor-positioning) [![Netlify Status](https://api.netlify.com/api/v1/badges/61a20096-7925-4775-99a9-b40a010197c0/deploy-status)](https://app.netlify.com/sites/anchor-polyfill/deploys) +- [Demo](https://anchor-positioning.oddbird.net/) +- [Draft Spec](https://drafts.csswg.org/css-anchor-position/) + +The CSS anchor positioning +[specification](https://drafts.csswg.org/css-anchor-position/) defines anchor +positioning, "where a positioned element can size and position itself relative +to one or more 'anchor elements' elsewhere on the page." This CSS Anchor +Positioning Polyfill supports and is based on this specification. + ## Browser Support - Firefox 54+ diff --git a/index.html b/index.html index e3066ebd..a61cc115 100644 --- a/index.html +++ b/index.html @@ -243,7 +243,7 @@

CSS Anchor Positioning Polyfill

>WPT results --> Draft SpecAnchoring Elements Using CSS

The CSS anchor positioning specificationAnchoring Elements Using CSS

  • Browse or open issues related to the specification here