wip: semantic tokens

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"
   }
-}
+}

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,22 +275,22 @@
 }
 
 .vocs tr {
-  border-top: 1px solid var(--vocs-color_border);
+  border-top: 1px solid var(--vocs-color_table-border);
 }
 
 .vocs tr:nth-child(2n) {
   background-color: var(--vocs-color_background-2);
 }
 
 .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);
 }

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);
   }