From 521aa6a2dce6832b192e8895815b01270467b8fe Mon Sep 17 00:00:00 2001 From: rossrobino Date: Thu, 19 Sep 2024 14:19:00 -0400 Subject: [PATCH] improve spacing / fix copy bug --- .changeset/eighty-meals-walk.md | 8 ++ apps/docs/package.json | 8 +- apps/docs/src/+client.ts | 3 - apps/docs/src/{ => client}/+page.html | 3 +- .../{ => client}/color-generator/+page.html | 5 +- .../color-generator/index.ts} | 2 +- .../{ => client}/color-generator/style.css | 0 .../{ => client}/components/color/index.ts | 8 +- .../{ => client}/components/color/style.css | 0 .../{ => client}/components/dialog/index.ts | 0 .../{ => client}/components/dialog/style.css | 0 .../{ => client}/components/theme/index.ts | 0 .../{ => client}/components/theme/style.css | 0 apps/docs/src/client/index.ts | 3 + apps/docs/src/{ => client}/style.css | 6 +- apps/docs/src/color-generator/+server.ts | 20 --- apps/docs/src/content/overview.md | 2 +- apps/docs/src/env.d.ts | 2 + apps/docs/src/global.d.ts | 7 -- apps/docs/src/{+server.ts => server/+app.ts} | 21 +++- package-lock.json | 115 ++++++++---------- package.json | 4 +- packages/uico/style.css | 14 ++- 23 files changed, 111 insertions(+), 120 deletions(-) create mode 100644 .changeset/eighty-meals-walk.md delete mode 100644 apps/docs/src/+client.ts rename apps/docs/src/{ => client}/+page.html (97%) rename apps/docs/src/{ => client}/color-generator/+page.html (81%) rename apps/docs/src/{color-generator/+client.ts => client/color-generator/index.ts} (97%) rename apps/docs/src/{ => client}/color-generator/style.css (100%) rename apps/docs/src/{ => client}/components/color/index.ts (94%) rename apps/docs/src/{ => client}/components/color/style.css (100%) rename apps/docs/src/{ => client}/components/dialog/index.ts (100%) rename apps/docs/src/{ => client}/components/dialog/style.css (100%) rename apps/docs/src/{ => client}/components/theme/index.ts (100%) rename apps/docs/src/{ => client}/components/theme/style.css (100%) create mode 100644 apps/docs/src/client/index.ts rename apps/docs/src/{ => client}/style.css (87%) delete mode 100644 apps/docs/src/color-generator/+server.ts create mode 100644 apps/docs/src/env.d.ts delete mode 100644 apps/docs/src/global.d.ts rename apps/docs/src/{+server.ts => server/+app.ts} (65%) diff --git a/.changeset/eighty-meals-walk.md b/.changeset/eighty-meals-walk.md new file mode 100644 index 0000000..44ec9c5 --- /dev/null +++ b/.changeset/eighty-meals-walk.md @@ -0,0 +1,8 @@ +--- +"uico": patch +--- + +A few small changes. + +- Improve prose styles - li and image spacing. +- Fix copy color on color generator. diff --git a/apps/docs/package.json b/apps/docs/package.json index 1629cd9..799289c 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -10,11 +10,11 @@ "preview": "vite preview" }, "devDependencies": { - "@robino/md": "^0.2.0", - "domco": "^0.8.1", + "@robino/md": "^0.2.1", + "domco": "^0.13.3", "drab": "^5.4.2", - "hono": "^4.5.11", + "hono": "^4.6.2", "uico": "*", - "vite": "^5.4.3" + "vite": "^5.4.6" } } diff --git a/apps/docs/src/+client.ts b/apps/docs/src/+client.ts deleted file mode 100644 index 0c9b013..0000000 --- a/apps/docs/src/+client.ts +++ /dev/null @@ -1,3 +0,0 @@ -import "@/components/color"; -import "@/components/dialog"; -import "@/components/theme"; diff --git a/apps/docs/src/+page.html b/apps/docs/src/client/+page.html similarity index 97% rename from apps/docs/src/+page.html rename to apps/docs/src/client/+page.html index c88046a..0d12e4e 100644 --- a/apps/docs/src/+page.html +++ b/apps/docs/src/client/+page.html @@ -4,7 +4,8 @@ - + + uico diff --git a/apps/docs/src/color-generator/+page.html b/apps/docs/src/client/color-generator/+page.html similarity index 81% rename from apps/docs/src/color-generator/+page.html rename to apps/docs/src/client/color-generator/+page.html index 4708f5c..c41a70f 100644 --- a/apps/docs/src/color-generator/+page.html +++ b/apps/docs/src/client/color-generator/+page.html @@ -4,8 +4,9 @@ - - + + + OKLCH Color Generator { + copy.copy(getComputedStyle(this).backgroundColor); + }); + button.dataset.content = ""; button.ariaLabel = `Copy base color of shade ${shade}`; diff --git a/apps/docs/src/components/color/style.css b/apps/docs/src/client/components/color/style.css similarity index 100% rename from apps/docs/src/components/color/style.css rename to apps/docs/src/client/components/color/style.css diff --git a/apps/docs/src/components/dialog/index.ts b/apps/docs/src/client/components/dialog/index.ts similarity index 100% rename from apps/docs/src/components/dialog/index.ts rename to apps/docs/src/client/components/dialog/index.ts diff --git a/apps/docs/src/components/dialog/style.css b/apps/docs/src/client/components/dialog/style.css similarity index 100% rename from apps/docs/src/components/dialog/style.css rename to apps/docs/src/client/components/dialog/style.css diff --git a/apps/docs/src/components/theme/index.ts b/apps/docs/src/client/components/theme/index.ts similarity index 100% rename from apps/docs/src/components/theme/index.ts rename to apps/docs/src/client/components/theme/index.ts diff --git a/apps/docs/src/components/theme/style.css b/apps/docs/src/client/components/theme/style.css similarity index 100% rename from apps/docs/src/components/theme/style.css rename to apps/docs/src/client/components/theme/style.css diff --git a/apps/docs/src/client/index.ts b/apps/docs/src/client/index.ts new file mode 100644 index 0000000..a888dcc --- /dev/null +++ b/apps/docs/src/client/index.ts @@ -0,0 +1,3 @@ +import "@/client/components/color"; +import "@/client/components/dialog"; +import "@/client/components/theme"; diff --git a/apps/docs/src/style.css b/apps/docs/src/client/style.css similarity index 87% rename from apps/docs/src/style.css rename to apps/docs/src/client/style.css index a6aa4cc..f91f9ff 100644 --- a/apps/docs/src/style.css +++ b/apps/docs/src/client/style.css @@ -1,7 +1,7 @@ @import "uico"; -@import "@/components/color/style.css" layer(components); -@import "@/components/dialog/style.css" layer(components); -@import "./components/theme/style.css" layer(components); +@import "@/client/components/color/style.css" layer(components); +@import "@/client/components/dialog/style.css" layer(components); +@import "@/client/components/theme/style.css" layer(components); @layer theme { :root { diff --git a/apps/docs/src/color-generator/+server.ts b/apps/docs/src/color-generator/+server.ts deleted file mode 100644 index 7c7984e..0000000 --- a/apps/docs/src/color-generator/+server.ts +++ /dev/null @@ -1,20 +0,0 @@ -import md from "@/content/color-generator.md?raw"; -import { processMarkdown } from "@robino/md"; -import type { Prerender } from "domco"; -import { Injector } from "domco/injector"; -import { Hono } from "hono"; - -export const prerender: Prerender = true; - -const app = new Hono(); - -app.get("/", async (c) => { - const { html } = processMarkdown({ md }); - return c.html( - new Injector(c.var.page()) - .comment([{ text: "content", children: html }]) - .toString(), - ); -}); - -export default app; diff --git a/apps/docs/src/content/overview.md b/apps/docs/src/content/overview.md index 7189ea8..228e252 100644 --- a/apps/docs/src/content/overview.md +++ b/apps/docs/src/content/overview.md @@ -16,7 +16,7 @@ npm i -D uico @import "uico"; ``` -or copy and paste the [stylesheet](https://github.com/rossrobino/uico/tree/main/packages/uico/style.css) into your project (everything is in one file). +or copy and paste the [stylesheet](https://github.com/rossrobino/uico/tree/main/packages/uico/style.css) into your project (everything is in one CSS file). ### Layers diff --git a/apps/docs/src/env.d.ts b/apps/docs/src/env.d.ts new file mode 100644 index 0000000..b1d9caa --- /dev/null +++ b/apps/docs/src/env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/apps/docs/src/global.d.ts b/apps/docs/src/global.d.ts deleted file mode 100644 index 65d5a21..0000000 --- a/apps/docs/src/global.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -/// -import type { DomcoContextVariableMap } from "domco"; -import "hono"; - -declare module "hono" { - interface ContextVariableMap extends DomcoContextVariableMap {} -} diff --git a/apps/docs/src/+server.ts b/apps/docs/src/server/+app.ts similarity index 65% rename from apps/docs/src/+server.ts rename to apps/docs/src/server/+app.ts index 65c5e38..979dbd8 100644 --- a/apps/docs/src/+server.ts +++ b/apps/docs/src/server/+app.ts @@ -1,13 +1,16 @@ import base from "@/content/base.md?raw"; +import color from "@/content/color-generator.md?raw"; import overview from "@/content/overview.md?raw"; import prose from "@/content/prose.md?raw"; import theme from "@/content/theme.md?raw"; import { processMarkdown } from "@robino/md"; +import { html } from "client:page"; +import { html as colorHtml } from "client:page/color-generator"; import type { Prerender } from "domco"; import { Injector } from "domco/injector"; import { Hono } from "hono"; -export const prerender: Prerender = true; +export const prerender: Prerender = ["/"]; const app = new Hono(); @@ -17,14 +20,24 @@ app.get("/", async (c) => { const { html: overviewHtml } = processMarkdown({ md: overview }); const { html: themeHtml } = processMarkdown({ md: theme }); - const page = new Injector(c.var.page()).comment([ + const page = new Injector(html).comment([ { text: "prose", children: proseHtml }, { text: "base", children: baseHtml }, { text: "overview", children: overviewHtml }, { text: "theme", children: themeHtml }, ]); - return c.html(page.toString()); + return c.html(page.html); +}); + +app.get("/color-generator", async (c) => { + const { html: colorMdHtml } = processMarkdown({ md: color }); + + const page = new Injector(colorHtml).comment([ + { text: "content", children: colorMdHtml }, + ]); + + return c.html(page.html); }); // redirects from previous version @@ -34,4 +47,4 @@ app.get("/fonts/", (c) => c.redirect("/", 301)); app.get("/oklch/", (c) => c.redirect("/color-generator", 301)); -export default app; +export const handler = app.fetch; diff --git a/package-lock.json b/package-lock.json index cc767f6..dc743bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,19 +16,19 @@ "@robino/prettier": "^0.1.1", "@robino/tsconfig": "^0.2.1", "prettier": "^3.3.3", - "turbo": "^2.1.1", - "typescript": "^5.5.4" + "turbo": "^2.1.2", + "typescript": "^5.6.2" } }, "apps/docs": { "version": "0.0.0", "devDependencies": { - "@robino/md": "^0.2.0", - "domco": "^0.8.1", + "@robino/md": "^0.2.1", + "domco": "^0.13.3", "drab": "^5.4.2", - "hono": "^4.5.11", + "hono": "^4.6.2", "uico": "*", - "vite": "^5.4.3" + "vite": "^5.4.6" } }, "node_modules/@babel/code-frame": { @@ -1018,19 +1018,6 @@ "node": ">=12" } }, - "node_modules/@hono/node-server": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.12.2.tgz", - "integrity": "sha512-xjzhqhSWUE/OhN0g3KCNVzNsQMlFUAL+/8GgPUr3TKcU7cvgZVBGswFofJ8WwGEHTqobzze1lDpGJl9ZNckDhA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=18.14.1" - }, - "peerDependencies": { - "hono": "^4" - } - }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", @@ -1195,9 +1182,9 @@ } }, "node_modules/@robino/md": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@robino/md/-/md-0.2.0.tgz", - "integrity": "sha512-w7VhRoOJf3oPTCSOZ2bCdkUTqqtNQ9JajIHrqNBZ4/HIP6SeRv1gbveh9I8TFxIvkVHuRCNEUdMSl7mimOflhw==", + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@robino/md/-/md-0.2.1.tgz", + "integrity": "sha512-J1BUWqM0V2PydrEBZiRO0slT/MRapZkMjVpbq2nsRnO+NHpr5fX8nTnrJhkgYTL8qwG5Zyole9vDzalmyFN7Hg==", "dev": true, "license": "MIT", "dependencies": { @@ -1816,19 +1803,15 @@ "link": true }, "node_modules/domco": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/domco/-/domco-0.8.1.tgz", - "integrity": "sha512-ccc4aZ5kdyhagvRKIEVO3xUjzFRb/gb9vOv0sSHbSiCNHl3MWqyonuIZ7UD2xR4o4vAYc61i85XVVJ7AL7rUTw==", + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/domco/-/domco-0.13.3.tgz", + "integrity": "sha512-mLinRVKisav2TFmp86fPqqNJc0NTL/7TJZ4ikAmW/g5N5+C/TA6ysT4TGXTK817A6v1KQsyJ/X5GiILJpb0xNQ==", "dev": true, "license": "MIT", - "dependencies": { - "@hono/node-server": "^1.12.2" - }, "engines": { "node": ">=20" }, "peerDependencies": { - "hono": "^4.5.0", "vite": "^5.4.0" } }, @@ -2097,13 +2080,13 @@ } }, "node_modules/hono": { - "version": "4.5.11", - "resolved": "https://registry.npmjs.org/hono/-/hono-4.5.11.tgz", - "integrity": "sha512-62FcjLPtjAFwISVBUshryl+vbHOjg8rE4uIK/dxyR8GpLztunZpwFmfEvmJCUI7xoGh/Sr3CGCDPCmYxVw7wUQ==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/hono/-/hono-4.6.2.tgz", + "integrity": "sha512-v+39817TgAhetmHUEli8O0uHDmxp2Up3DnhS4oUZXOl5IQ9np9tYtldd42e5zgdLVS0wsOoXQNZ6mx+BGmEvCA==", "dev": true, "license": "MIT", "engines": { - "node": ">=16.0.0" + "node": ">=16.9.0" } }, "node_modules/human-id": { @@ -2978,27 +2961,27 @@ } }, "node_modules/turbo": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/turbo/-/turbo-2.1.1.tgz", - "integrity": "sha512-u9gUDkmR9dFS8b5kAYqIETK4OnzsS4l2ragJ0+soSMHh6VEeNHjTfSjk1tKxCqLyziCrPogadxP680J+v6yGHw==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/turbo/-/turbo-2.1.2.tgz", + "integrity": "sha512-Jb0rbU4iHEVQ18An/YfakdIv9rKnd3zUfSE117EngrfWXFHo3RndVH96US3GsT8VHpwTncPePDBT2t06PaFLrw==", "dev": true, "license": "MIT", "bin": { "turbo": "bin/turbo" }, "optionalDependencies": { - "turbo-darwin-64": "2.1.1", - "turbo-darwin-arm64": "2.1.1", - "turbo-linux-64": "2.1.1", - "turbo-linux-arm64": "2.1.1", - "turbo-windows-64": "2.1.1", - "turbo-windows-arm64": "2.1.1" + "turbo-darwin-64": "2.1.2", + "turbo-darwin-arm64": "2.1.2", + "turbo-linux-64": "2.1.2", + "turbo-linux-arm64": "2.1.2", + "turbo-windows-64": "2.1.2", + "turbo-windows-arm64": "2.1.2" } }, "node_modules/turbo-darwin-64": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-2.1.1.tgz", - "integrity": "sha512-aYNuJpZlCoi0Htd79fl/2DywpewGKijdXeOfg9KzNuPVKzSMYlAXuAlNGh0MKjiOcyqxQGL7Mq9LFhwA0VpDpQ==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-2.1.2.tgz", + "integrity": "sha512-3TEBxHWh99h2yIzkuIigMEOXt/ItYQp0aPiJjPd1xN4oDcsKK5AxiFKPH9pdtfIBzYsY59kQhZiFj0ELnSP7Bw==", "cpu": [ "x64" ], @@ -3010,9 +2993,9 @@ ] }, "node_modules/turbo-darwin-arm64": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-2.1.1.tgz", - "integrity": "sha512-tifJKD8yHY48rHXPMcM8o1jI/Jk2KCaXiNjTKvvy9Zsim61BZksNVLelIbrRoCGwAN6PUBZO2lGU5iL/TQJ5Pw==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-2.1.2.tgz", + "integrity": "sha512-he0miWNq2WxJzsH82jS2Z4MXpnkzn9SH8a79iPXiJkq25QREImucscM4RPasXm8wARp91pyysJMq6aasD45CeA==", "cpu": [ "arm64" ], @@ -3024,9 +3007,9 @@ ] }, "node_modules/turbo-linux-64": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-2.1.1.tgz", - "integrity": "sha512-Js6d/bSQe9DuV9c7ITXYpsU/ADzFHABdz1UIHa7Oqjj9VOEbFeA9WpAn0c+mdJrVD+IXJFbbDZUjN7VYssmtcg==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-2.1.2.tgz", + "integrity": "sha512-fKUBcc0rK8Vdqv5a/E3CSpMBLG1bzwv+Q0Q83F8fG2ZfNCNKGbcEYABdonNZkkx141Rj03cZQFCgxu3MVEGU+A==", "cpu": [ "x64" ], @@ -3038,9 +3021,9 @@ ] }, "node_modules/turbo-linux-arm64": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-2.1.1.tgz", - "integrity": "sha512-LidzTCq0yvQ+N8w8Qub9FmhQ/mmEIeoqFi7DSupekEV2EjvE9jw/zYc9Pk67X+g7dHVfgOnvVzmrjChdxpFePw==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-2.1.2.tgz", + "integrity": "sha512-sV8Bpmm0WiuxgbhxymcC7wSsuxfBBieI98GegSwbr/bs1ANAgzCg93urIrdKdQ3/b31zZxQwcaP4FBF1wx1Qdg==", "cpu": [ "arm64" ], @@ -3052,9 +3035,9 @@ ] }, "node_modules/turbo-windows-64": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-2.1.1.tgz", - "integrity": "sha512-GKc9ZywKwy4xLDhwXd6H07yzl0TB52HjXMrFLyHGhCVnf/w0oq4sLJv2sjbvuarPjsyx4xnCBJ3m3oyL2XmFtA==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-2.1.2.tgz", + "integrity": "sha512-wcmIJZI9ORT9ykHGliFE6kWRQrlH930QGSjSgWC8uFChFFuOyUlvC7ttcxuSvU9VqC7NF4C+GVAcFJQ8lTjN7g==", "cpu": [ "x64" ], @@ -3066,9 +3049,9 @@ ] }, "node_modules/turbo-windows-arm64": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-2.1.1.tgz", - "integrity": "sha512-oFKkMj11KKUv3xSK9/fhAEQTxLUp1Ol1EOktwc32+SFtEU0uls7kosAz0b+qe8k3pJGEMFdDPdqoEjyJidbxtQ==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-2.1.2.tgz", + "integrity": "sha512-zdnXjrhk7YO6CP+Q5wPueEvOCLH4lDa6C4rrwiakcWcPgcQGbVozJlo4uaQ6awo8HLWQEvOwu84RkWTdLAc/Hw==", "cpu": [ "arm64" ], @@ -3080,9 +3063,9 @@ ] }, "node_modules/typescript": { - "version": "5.5.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", - "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz", + "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==", "dev": true, "license": "Apache-2.0", "bin": { @@ -3122,9 +3105,9 @@ } }, "node_modules/vite": { - "version": "5.4.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz", - "integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==", + "version": "5.4.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz", + "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 5529c01..dfc2f98 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@robino/prettier": "^0.1.1", "@robino/tsconfig": "^0.2.1", "prettier": "^3.3.3", - "turbo": "^2.1.1", - "typescript": "^5.5.4" + "turbo": "^2.1.2", + "typescript": "^5.6.2" } } diff --git a/packages/uico/style.css b/packages/uico/style.css index ea95037..1d3eb66 100644 --- a/packages/uico/style.css +++ b/packages/uico/style.css @@ -747,7 +747,7 @@ @layer utilities { .prose { section { - margin-block: var(--size-6); + margin-block-end: var(--size-6); } h1 { @@ -789,14 +789,21 @@ ol, table, blockquote, - pre, - hr, dl { &:not(li > &) { margin-block-end: var(--size-4); } } + hr, + pre, + img, + video, + iframe { + /* Slightly larger since there's no line height space. */ + margin-block: var(--size-5); + } + blockquote, dd { padding-inline-start: var(--size-5); @@ -825,6 +832,7 @@ } li { + margin-block: var(--size-1); padding-inline-start: var(--size-1); &::marker {