From 047bf72c5bc55b1db4ccf6974249db68c1eb8b2f Mon Sep 17 00:00:00 2001 From: "moxey.eth" Date: Tue, 17 Oct 2023 17:45:15 +1100 Subject: [PATCH] wip: semantic tokens --- package.json | 3 ++- src/styles/elements.css | 36 +++++++++++++++++------------------- src/styles/vars.css | 32 ++++++++++++++++++++++++++------ 3 files changed, 45 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 713cc371..f27c04d7 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "type": "module", "scripts": { "build": "rimraf src/_lib src/tsconfig.build.* && tsc -p tsconfig.build.json && bun scripts/postbuild.ts", + "dev": "cd playground/dev && bun run dev", "format": "biome format . --write", "lint": "biome lint . --apply-unsafe", "prepare": "bun x simple-git-hooks", @@ -25,4 +26,4 @@ "simple-git-hooks": { "pre-commit": "bun run format && bun run lint" } -} \ No newline at end of file +} diff --git a/src/styles/elements.css b/src/styles/elements.css index a246bfbf..d01c451c 100644 --- a/src/styles/elements.css +++ b/src/styles/elements.css @@ -100,11 +100,11 @@ /************************************/ .vocs a { - color: var(--vocs-color_accent); + color: var(--vocs-color_link); font-weight: var(--vocs--fontWeight-medium); &:hover { - color: var(--vocs-color_accent-hover); + color: var(--vocs-color_link-hover); text-underline-offset: 2px; text-decoration: underline; } @@ -114,11 +114,9 @@ /* Code */ /************************************/ -/* TODO */ - .vocs :not(pre, [data-rehype-pretty-code-fragment])>code { - background-color: var(--vocs-color_accent-tint); - color: var(--vocs-color_accent); + background-color: var(--vocs-color_inline-code-background); + color: var(--vocs-color_inline-code); } .vocs :not(pre)>code { @@ -127,13 +125,13 @@ padding: var(--vocs-space_3) var(--vocs-space_6); } - -.vocs a>code { +.vocs.vocs a>code { + color: var(--vocs-color_link); text-decoration: underline; text-underline-offset: var(--vocs-space_2); &:hover { - color: var(--vocs-color_accent-hover); + color: var(--vocs-color_link-hover); } } @@ -165,7 +163,7 @@ } & pre { - background-color: var(--vocs-color_background-2) !important; + background-color: var(--vocs-color_code-block-background) !important; border-radius: var(--vocs-borderRadius_4); padding: var(--vocs-space_20) var(--vocs-space_0); } @@ -184,7 +182,7 @@ } & [data-line]::before { - color: var(--vocs-color_text-4); + color: var(--vocs-color_line-number); content: counter(line); counter-increment: line; display: inline-block; @@ -255,13 +253,13 @@ /** Markdown: "> (Text)" */ .vocs blockquote { - border-left: 2px solid var(--vocs-color_border); + border-left: 2px solid var(--vocs-color_blockquote-border); padding-left: var(--vocs-space_16); margin-bottom: var(--vocs-space_16); } .vocs blockquote>p { - color: var(--vocs-color_text-3); + color: var(--vocs-color_blockquote-text); } /************************************/ @@ -277,7 +275,7 @@ } .vocs tr { - border-top: 1px solid var(--vocs-color_border); + border-top: 1px solid var(--vocs-color_table-border); } .vocs tr:nth-child(2n) { @@ -285,14 +283,14 @@ } .vocs td { - border: 1px solid var(--vocs-color_border); + border: 1px solid var(--vocs-color_table-border); padding: var(--vocs-space_12) var(--vocs-space_16); } .vocs th { - border: 1px solid var(--vocs-color_border); - background-color: var(--vocs-color_background-2); - color: var(--vocs-color_text-3); + border: 1px solid var(--vocs-color_table-border); + background-color: var(--vocs-color_table-header-background); + color: var(--vocs-color_table-header-text); font-size: var(--vocs-fontSize_th); font-weight: 400; padding: var(--vocs-space_12) var(--vocs-space_16); @@ -316,6 +314,6 @@ /************************************/ .vocs hr { - border-top: 1px solid var(--vocs-color_border); + border-top: 1px solid var(--vocs-color_hr); margin-bottom: var(--vocs-space_16); } \ No newline at end of file diff --git a/src/styles/vars.css b/src/styles/vars.css index e36f6efe..3600ef26 100644 --- a/src/styles/vars.css +++ b/src/styles/vars.css @@ -11,7 +11,6 @@ :root { --vocs-color_white: rgba(255, 255, 255, 1); --vocs-color_black: rgba(0, 0, 0, 1); - --vocs-color_accent: var(--iris-11); --vocs-color_accent-hover: var(--iris-12); --vocs-color_accent-tint: var(--iris-3); @@ -25,9 +24,6 @@ --vocs-color_text-3: var(--gray-10); --vocs-color_text-4: var(--gray-8); - --vocs-color_code-highlight-background: var(--vocs-color_background-3); - --vocs-color_code-highlight-border: var(--gray-7); - &.dark { --vocs-color_accent-hover: var(--iris-10); --vocs-color_background: var(--mauve-3); @@ -36,10 +32,34 @@ --vocs-color_background-4: var(--mauve-6); --vocs-color_border: var(--mauve-6); --vocs-color_text: var(--white-a11); - --vocs-color_text-2: var(--white-a10); - --vocs-color_text-3: var(--white-a9); + --vocs-color_text-2: var(--white-a9); + --vocs-color_text-3: var(--white-a8); --vocs-color_text-4: var(--white-a5); + } +} + +/* Semantic colors */ +:root { + --vocs-color_blockquote-border: var(--vocs-color_border); + --vocs-color_blockquote-text: var(--vocs-color_text-3); + --vocs-color_inline-code: var(--vocs-color_accent); + --vocs-color_inline-code-background: var(--vocs-color_accent-tint); + --vocs-color_code-block-background: var(--vocs-color_background-2); + --vocs-color_code-highlight-background: var(--vocs-color_background-3); + --vocs-color_code-highlight-border: var(--gray-7); + --vocs-color_line-number: var(--vocs-color_text-4); + + --vocs-color_hr: var(--vocs-color_border); + + --vocs-color_link: var(--vocs-color_accent); + --vocs-color_link-hover: var(--vocs-color_accent-hover); + + --vocs-color_table-border: var(--vocs-color_border); + --vocs-color_table-header-background: var(--vocs-color_background-2); + --vocs-color_table-header-text: var(--vocs-color_text-2); + + &.dark { --vocs-color_code-highlight-background: var(--vocs-color_background-4); --vocs-color_code-highlight-border: var(--mauve-9); }