Package UI update (#4594)

* bump SB version * fix Segmented control import * formatting fix * fix formatting on build * migrate to Terrazzo + utility classes WIP * copy update * Update c-colors.mdx * fix hex color * move diff variables into tokens * Update c-colors.mdx * Update pnpm-lock.yaml * Update pnpm-lock.yaml * update terrazzo * Update pnpm-lock.yaml
2024-09-11 12:25:42 +03:00 · 2024-08-04 14:53:45 +02:00 · 2024-08-04 14:53:45 +02:00 · 48d2e8baea
commit 48d2e8baea
parent d559cffe6a
16 changed files with 1083 additions and 938 deletions
--- a/apps/desktop/src/lib/components/contextmenu/ContextMenu.svelte
+++ b/apps/desktop/src/lib/components/contextmenu/ContextMenu.svelte
@ -189,7 +189,7 @@
 		background: var(--clr-bg-2);
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-m);
-		box-shadow: var(--fx-shadow-s);
+		box-shadow: var(--shadow-s);

 		animation: fadeIn 0.08s ease-out forwards;
 	}
--- a/apps/desktop/src/lib/hunk/HunkDiff.svelte
+++ b/apps/desktop/src/lib/hunk/HunkDiff.svelte
@ -270,7 +270,7 @@
 	.table__wrapper {
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-s);
-		background-color: var(--clr-bg-1);
+		background-color: var(--clr-diff-line-bg);
 		overflow-x: auto;

 		&:hover .table__drag-handle {
@ -308,9 +308,9 @@
 	}

 	.table__numberColumn {
-		color: color-mix(in srgb, var(--clr-text-1), transparent 60%);
-		border-color: var(--clr-border-2);
-		background-color: var(--clr-bg-1-muted);
+		color: var(--clr-diff-count-text);
+		border-color: var(--clr-diff-count-border);
+		background-color: var(--clr-diff-count-bg);
 		font-size: 11px;
 		text-align: center;
 		padding: 0 4px;
@ -323,24 +323,24 @@
 		width: var(--number-col-width);
 		min-width: var(--number-col-width);

-		box-shadow: inset -1px 0 0 0 var(--clr-border-2);
+		box-shadow: inset -1px 0 0 0 var(--clr-diff-count-border);

 		&.diff-line-addition {
-			background-color: var(--override-addition-counter-background);
-			color: var(--override-addition-counter-text);
-			box-shadow: inset -1px 0 0 0 var(--override-addition-counter-border);
+			background-color: var(--clr-diff-addition-count-bg);
+			color: var(--clr-diff-addition-count-text);
+			box-shadow: inset -1px 0 0 0 var(--clr-diff-addition-count-border);
 		}

 		&.diff-line-deletion {
-			background-color: var(--override-deletion-counter-background);
-			color: var(--override-deletion-counter-text);
-			box-shadow: inset -1px 0 0 0 var(--override-deletion-counter-border);
+			background-color: var(--clr-diff-deletion-count-bg);
+			color: var(--clr-diff-deletion-count-text);
+			box-shadow: inset -1px 0 0 0 var(--clr-diff-deletion-count-border);
 		}

 		&.selected {
-			background-color: var(--hunk-line-selected-bg);
-			box-shadow: inset -1px 0 0 0 var(--hunk-line-selected-border);
-			color: rgba(255, 255, 255, 0.9);
+			background-color: var(--clr-diff-selected-count-bg);
+			box-shadow: inset -1px 0 0 0 var(--clr-diff-count-border);
+			color: var(--clr-diff-selected-count-text);
 		}
 	}

@ -358,9 +358,6 @@
 		tab-size: var(--tab-size);
 		white-space: pre;
 		user-select: text;
-
-		&:hover {
-			cursor: text;
-		}
+		cursor: text;
 	}
 </style>
--- a/apps/desktop/src/lib/select/Select.svelte
+++ b/apps/desktop/src/lib/select/Select.svelte
@ -248,7 +248,7 @@
 		border-radius: var(--radius-m);
 		border: 1px solid var(--clr-border-2);
 		background: var(--clr-bg-1);
-		box-shadow: var(--fx-shadow-s);
+		box-shadow: var(--shadow-s);
 		overflow: hidden;
 		transform-origin: top;

--- a/apps/desktop/src/lib/shared/Modal.svelte
+++ b/apps/desktop/src/lib/shared/Modal.svelte
@ -106,7 +106,7 @@
 		border-radius: var(--radius-l);
 		background-color: var(--clr-bg-1);
 		border: 1px solid var(--clr-border-2);
-		box-shadow: var(--fx-shadow-l);
+		box-shadow: var(--shadow-l);
 		overflow: hidden;
 	}

--- a/packages/ui/.storybook/stories-styles.css
+++ b/packages/ui/.storybook/stories-styles.css
@ -9,6 +9,32 @@
 	h4,
 	h5,
 	h6 {
+		font-weight: 600;
 		border-bottom: none;
 	}
 }
+
+.colors {
+	display: flex;
+	width: 100%;
+}
+
+.color-item {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	padding: 40px 10px 10px;
+	background: repeating-linear-gradient(
+		-55deg,
+		#d9d9d9,
+		#d9d9d9 1px,
+		transparent 1px,
+		transparent 6px
+	);
+	border: 1px solid #d9d9d9;
+
+	span {
+		font-size: 12px;
+		color: #000;
+	}
+}
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -17,7 +17,7 @@
 		"package:svelte": "svelte-kit sync && svelte-package",
 		"package:styles": "postcss ./src/styles/main.css -o ./dist/styles/main.css && pnpm run copy-fonts",
 		"copy-fonts": "postcss ./src/styles/fonts.css -o ./dist/fonts.css && cpy './src/styles/fonts/**/*.woff2' './dist/fonts' --parents",
-		"build:design-tokens": "npx co build",
+		"design-tokens:build": "npx tz build && prettier --write ./src/lib/design-tokens.json ./src/styles/core/design-tokens.css",
 		"prepublishOnly": "pnpm run package",
 		"prepare": "svelte-kit sync",
 		"storybook": "storybook dev --no-open -p 6006",
@ -25,9 +25,6 @@
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "^1.6.1",
-		"@cobalt-ui/cli": "^1.8.0",
-		"@cobalt-ui/plugin-css": "^1.7.3",
-		"@cobalt-ui/plugin-js": "^1.4.3",
 		"@csstools/postcss-bundler": "^1.0.15",
 		"@csstools/postcss-minify": "^1.1.5",
 		"@storybook/addon-docs": "^8.2.7",
@ -42,6 +39,8 @@
 		"@sveltejs/kit": "catalog:svelte",
 		"@sveltejs/package": "^2.3.2",
 		"@sveltejs/vite-plugin-svelte": "catalog:svelte",
+		"@terrazzo/cli": "^0.0.11",
+		"@terrazzo/plugin-css": "^0.0.9",
 		"autoprefixer": "^10.4.19",
 		"cpy-cli": "^5.0.0",
 		"postcss": "^8.4.38",
--- a/packages/ui/src/lib/design-tokens.json
+++ b/packages/ui/src/lib/design-tokens.json
@ -3590,329 +3590,340 @@
 					}
 				}
 			}
+		},
+		"diff": {
+			"line-bg": {
+				"$type": "color",
+				"$value": "{clr.bg.1}",
+				"$description": "",
+				"$extensions": {
+					"mode": {
+						"light": "{clr.bg.1}",
+						"dark": "{clr.bg.1}"
+					},
+					"figma": {
+						"variableId": "VariableID:3935:248",
+						"collection": {
+							"id": "VariableCollectionId:8:1868",
+							"name": "clr",
+							"defaultModeId": "8:5"
+						}
+					}
+				}
+			},
+			"count-bg": {
+				"$type": "color",
+				"$value": "#f7f7f6",
+				"$description": "",
+				"$extensions": {
+					"mode": {
+						"light": "#f7f7f6",
+						"dark": "#302c2b"
+					},
+					"figma": {
+						"variableId": "VariableID:3935:249",
+						"collection": {
+							"id": "VariableCollectionId:8:1868",
+							"name": "clr",
+							"defaultModeId": "8:5"
+						}
+					}
+				}
+			},
+			"count-border": {
+				"$type": "color",
+				"$value": "{clr.border.2}",
+				"$description": "",
+				"$extensions": {
+					"mode": {
+						"light": "{clr.border.2}",
+						"dark": "{clr.border.2}"
+					},
+					"figma": {
+						"variableId": "VariableID:3935:250",
+						"collection": {
+							"id": "VariableCollectionId:8:1868",
+							"name": "clr",
+							"defaultModeId": "8:5"
+						}
+					}
+				}
+			},
+			"selected": {
+				"count-bg": {
+					"$type": "color",
+					"$value": "#378bf2",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#378bf2",
+							"dark": "#044289"
+						},
+						"figma": {
+							"variableId": "VariableID:3935:251",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				},
+				"count-border": {
+					"$type": "color",
+					"$value": "#265dd4",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#265dd4",
+							"dark": "#005cc5"
+						},
+						"figma": {
+							"variableId": "VariableID:3935:253",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				},
+				"count-text": {
+					"$type": "color",
+					"$value": "#ffffff",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#ffffff",
+							"dark": "#98c6ff"
+						},
+						"figma": {
+							"variableId": "VariableID:3935:254",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				}
+			},
+			"count-text": {
+				"$type": "color",
+				"$value": "{clr.text.3}",
+				"$description": "",
+				"$extensions": {
+					"mode": {
+						"light": "{clr.text.3}",
+						"dark": "{clr.text.3}"
+					},
+					"figma": {
+						"variableId": "VariableID:3935:252",
+						"collection": {
+							"id": "VariableCollectionId:8:1868",
+							"name": "clr",
+							"defaultModeId": "8:5"
+						}
+					}
+				}
+			},
+			"deletion": {
+				"line-bg": {
+					"$type": "color",
+					"$value": "#fff0f2",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#fff0f2",
+							"dark": "#3c131b"
+						},
+						"figma": {
+							"variableId": "VariableID:3935:255",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				},
+				"line-highlight": {
+					"$type": "color",
+					"$value": "#fdd2da",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#fdd2da",
+							"dark": "#78061c"
+						},
+						"figma": {
+							"variableId": "VariableID:3935:257",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				},
+				"count-bg": {
+					"$type": "color",
+					"$value": "#fcdfe4",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#fcdfe4",
+							"dark": "#53131e"
+						},
+						"figma": {
+							"variableId": "VariableID:3935:10972",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				},
+				"count-border": {
+					"$type": "color",
+					"$value": "#e3c1c1",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#e3c1c1",
+							"dark": "#8e3c3c"
+						},
+						"figma": {
+							"variableId": "VariableID:3935:12107",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				},
+				"count-text": {
+					"$type": "color",
+					"$value": "#b69292",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#b69292",
+							"dark": "#b36773"
+						},
+						"figma": {
+							"variableId": "VariableID:3935:12108",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				}
+			},
+			"addition": {
+				"line-highlight": {
+					"$type": "color",
+					"$value": "#b6edd6",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#b6edd6",
+							"dark": "#075445"
+						},
+						"figma": {
+							"variableId": "VariableID:3976:12110",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				},
+				"count-bg": {
+					"$type": "color",
+					"$value": "#cbf4e3",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#cbf4e3",
+							"dark": "#0c4538"
+						},
+						"figma": {
+							"variableId": "VariableID:3976:12111",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				},
+				"count-border": {
+					"$type": "color",
+					"$value": "#a6cdbd",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#a6cdbd",
+							"dark": "#2b6e53"
+						},
+						"figma": {
+							"variableId": "VariableID:3976:12112",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				},
+				"count-text": {
+					"$type": "color",
+					"$value": "#87a89a",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#87a89a",
+							"dark": "#689e88"
+						},
+						"figma": {
+							"variableId": "VariableID:3976:12113",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				},
+				"line-bg": {
+					"$type": "color",
+					"$value": "#e0fbf0",
+					"$description": "",
+					"$extensions": {
+						"mode": {
+							"light": "#e0fbf0",
+							"dark": "#0e2f25"
+						},
+						"figma": {
+							"variableId": "VariableID:3976:12114",
+							"collection": {
+								"id": "VariableCollectionId:8:1868",
+								"name": "clr",
+								"defaultModeId": "8:5"
+							}
+						}
+					}
+				}
+			}
 		}
 	},
 	"size": {
-		"2": {
-			"$type": "dimension",
-			"$value": "2px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:592",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"4": {
-			"$type": "dimension",
-			"$value": "4px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:594",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"6": {
-			"$type": "dimension",
-			"$value": "6px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:595",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"8": {
-			"$type": "dimension",
-			"$value": "8px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:596",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"10": {
-			"$type": "dimension",
-			"$value": "10px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:427:7275",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"12": {
-			"$type": "dimension",
-			"$value": "12px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:597",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"14": {
-			"$type": "dimension",
-			"$value": "14px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:2831:13998",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"16": {
-			"$type": "dimension",
-			"$value": "16px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:598",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"20": {
-			"$type": "dimension",
-			"$value": "20px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:599",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"24": {
-			"$type": "dimension",
-			"$value": "24px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:600",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"26": {
-			"$type": "dimension",
-			"$value": "26px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:2831:13999",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"28": {
-			"$type": "dimension",
-			"$value": "28px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:601",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"32": {
-			"$type": "dimension",
-			"$value": "32px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:602",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"36": {
-			"$type": "dimension",
-			"$value": "36px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:603",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"40": {
-			"$type": "dimension",
-			"$value": "40px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:604",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"48": {
-			"$type": "dimension",
-			"$value": "48px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:605",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"56": {
-			"$type": "dimension",
-			"$value": "56px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:606",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"64": {
-			"$type": "dimension",
-			"$value": "64px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:98:607",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"80": {
-			"$type": "dimension",
-			"$value": "80px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:2531:6326",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
-		"96": {
-			"$type": "dimension",
-			"$value": "96px",
-			"$description": "",
-			"$extensions": {
-				"mode": {},
-				"figma": {
-					"variableId": "VariableID:2531:6327",
-					"collection": {
-						"id": "VariableCollectionId:98:591",
-						"name": "size",
-						"defaultModeId": "98:0"
-					}
-				}
-			}
-		},
 		"icon": {
 			"$type": "dimension",
 			"$value": "16px",
@ -3979,7 +3990,7 @@
 		},
 		"card-padding": {
 			"$type": "dimension",
-			"$value": "{size.14}",
+			"$value": "14px",
 			"$description": "",
 			"$extensions": {
 				"mode": {},
@ -4086,7 +4097,7 @@
 			"useDTCGKeys": true,
 			"colorMode": "hex",
 			"variableCollections": ["clr-core", "clr", "size", "radius"],
-			"createdAt": "2024-07-28T12:37:45.122Z"
+			"createdAt": "2024-08-03T22:40:57.727Z"
 		}
 	}
 }
--- a/packages/ui/src/stories/b-design-tokens.mdx
+++ b/packages/ui/src/stories/b-design-tokens.mdx
@ -16,7 +16,7 @@ For all basic styles like colors, typography, and spacing, radius, and shadows,
 	height="600"
 	src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FJir22AjzvPokdbMbe8yt5k%2F%25F0%259F%2592%258E-Core%3Fnode-id%3D0-1%26t%3DBvUKbga6mKnt6vo8-1"
 	allowFullScreen
-></iframe>
+/>

 ---

@ -33,13 +33,19 @@ The first step here is to grab design tokens from Figma. To do this, you need to

 The second step is to convert the JSON file to a CSS file.

-You can generate a CSS file within this repository. Just replace the root file `design-tokens.json` with the new one and run the `build:design-tokens` command. The command will generate a new `design-tokens.css` file in the `packages/ui/src/styles/core` folder.
+You can generate a CSS file within this repository. Just replace the root file `design-tokens.json` with the new one and run:

-In order to convert the JSON file to a CSS file, we use the [Cobalt UI CLI](https://cobalt-ui.pages.dev/guides/getting-started).
+```bash
+$ pnpm design-tokens:build
+```

-<a href="https://cobalt-ui.pages.dev/guides/getting-started" target="_blank">
+The command will generate a new `design-tokens.css` file in the `packages/ui/src/styles/core` folder.
+
+In order to convert the JSON file to a CSS file, we use the [Terrazzo](https://terrazzo.app/docs).
+
+<a href="https://terrazzo.app/docs" target="_blank">
 	<img
-		src="https://img.shields.io/badge/Download%20Cobalt%20UI%20CLI-4D40E9?style=for-the-badge&logo=&logoColor=white"
-		alt="Get Cobalt UI"
+		src="https://img.shields.io/badge/Get%20Terrazzo-4D40E9?style=for-the-badge&logo=&logoColor=white"
+		alt="Get Terrazzo"
 	/>
 </a>
--- a/packages/ui/src/stories/c-colors.mdx
+++ b/packages/ui/src/stories/c-colors.mdx
@ -3,3 +3,124 @@ import { Meta } from '@storybook/addon-docs';
 <Meta title="About/Colors" />

 # 🎨 Colors
+
+In our design system, we use different types of colors.
+The first group is the Core colors.
+
+---
+
+## Core colors
+
+Core colors doesn't have any specific meaning or themes. They are just color ranges that used in the next color groups.
+It's better to avoid using core colors directly in the app. Use color `Scale` colors instead.
+
+<iframe
+	style={{
+		border: '1px solid rgba(0, 0, 0, 0.1)'
+	}}
+	width="100%"
+	height="500"
+	src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FJir22AjzvPokdbMbe8yt5k%2F%25F0%259F%2592%258E-Core%3Fnode-id%3D404-4319%26t%3Dd8WJEYZK76vUHeB6-1"
+	allowFullScreen
+/>
+
+Core colors still have some useage areas.
+All colors in the app could be breaked down to 4 areas — from the very light to the very dark:
+
+- **Background colors** — colors that are used for backgrounds on large areas - like pages, modals, containers, etc.
+- **Soft colors** — colors a bit darker and suitable for smaller elements like buttons, inputs, borders, etc.
+- **Solid colors** — these colors are strong and dark. It's suitable small elements that should be highlighted - like error buttons, borders, alerts, etc.
+- **Text colors** — these colors are dark and therefore suitable for text.
+
+<iframe
+	style={{
+		border: '1px solid rgba(0, 0, 0, 0.1)'
+	}}
+	width="100%"
+	height="700"
+	src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FJir22AjzvPokdbMbe8yt5k%2F%25F0%259F%2592%258E-Core%3Fnode-id%3D3709-9834%26t%3Dd8WJEYZK76vUHeB6-1"
+	allowFullScreen
+/>
+
+All colors in the app could be also split into 6 color groups:
+
+- **Ntrl colors** — neutral colors. These colors are used for backgrounds, text, and other elements that should not be highlighted.
+- **Pop colors** — this color used to highlight elements.
+
+- **Err colors** — error colors — a service group.
+- **Warn colors** — warning colors — a service group.
+- **Succ colors** — success colors - a service group.
+
+- **Purp colors** — info colors.
+
+---
+
+## Scale colors
+
+Scale colors also doesn't have any specific meaning, but they have themes.
+
+This is how you use scale colors:
+
+```css
+/* Use scale colors */
+background-color: var(--clr-scale-ntrl-10);
+color: var(--clr-scale-pop-90);
+```
+
+<iframe
+	style={{
+		border: '1px solid rgba(0, 0, 0, 0.1)'
+	}}
+	width="100%"
+	height="500"
+	src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FJir22AjzvPokdbMbe8yt5k%2F%25F0%259F%2592%258E-Core%3Fnode-id%3D3835-268%26t%3Dd8WJEYZK76vUHeB6-1"
+	allowFullScreen
+/>
+
+---
+
+## Theme colors
+
+Theme colors are functional colors that could be used for general elements like buttons, links, etc.
+This color palette are preffered compared to the Scale colors. _eleborate why_
+
+There are 2 theme groups and one additional background color:
+
+- **Element**
+- **Element hover**
+- **Soft**
+- **Soft hover**
+- **Background**
+
+<iframe
+	style={{
+		border: '1px solid rgba(0, 0, 0, 0.1)'
+	}}
+	width="100%"
+	height="600"
+	src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FJir22AjzvPokdbMbe8yt5k%2F%25F0%259F%2592%258E-Core%3Fnode-id%3D3920-59%26t%3DGK9Nb44CzAd8BTne-1"
+	allowFullScreen
+/>
+
+---
+
+## Role colors
+
+Role colors are used for specific elements. THis color palette has the highest specificity. Currently, we have 6 role colors:
+
+- **bg** — background colors
+- **border** — outline colors
+- **text** — text colors
+- **illustration** — colors for illustrations
+- **commit** — colors for commit lines and commits indicators
+- **diff** — colors for diff lines
+
+<iframe
+	style={{
+		border: '1px solid rgba(0, 0, 0, 0.1)'
+	}}
+	width="100%"
+	height="700"
+	src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FJir22AjzvPokdbMbe8yt5k%2F%25F0%259F%2592%258E-Core%3Fnode-id%3D3920-146%26t%3DGK9Nb44CzAd8BTne-1"
+	allowFullScreen
+/>
--- a/packages/ui/src/styles/components/diff.css
+++ b/packages/ui/src/styles/components/diff.css
@ -1,63 +1,21 @@
-:root {
-	--hunk-line-selected-bg: #60a5fa;
-	--hunk-line-selected-border: #2563eb;
-
-	--override-addition-background: #e0fbf0;
-	--override-addition-inner-diff-background: #b6edd6;
-	--override-addition-counter-background: #c8f3e1;
-	--override-addition-counter-text: #87a89a;
-	--override-addition-counter-border: #aecbb7;
-
-	--override-deletion-background: #fff0f2;
-	--override-deletion-inner-diff-background: #fdd2da;
-	--override-deletion-counter-background: #fcdfe4;
-	--override-deletion-counter-text: #b69292;
-	--override-deletion-counter-border: #e3c1c1;
-}
-
-:root.dark {
-	--hunk-line-selected-bg: #044289;
-	--hunk-line-selected-border: #005cc5;
-
-	--override-addition-background: #0e2f25;
-	--override-addition-inner-diff-background: #075445;
-	--override-addition-counter-background: #0c4538;
-	--override-addition-counter-text: #689e88;
-	--override-addition-counter-border: #2b6e53;
-
-	--override-deletion-background: #3c131b;
-	--override-deletion-inner-diff-background: #78061c;
-	--override-deletion-counter-background: #53131e;
-	--override-deletion-counter-text: #b36773;
-	--override-deletion-counter-border: #8e3c3c;
-}
-
 .inner-diff {
 	border-radius: 2px;
 }

 .diff-line-marker-addition,
 .diff-line-addition {
-	background-color: var(--override-addition-background);
+	background-color: var(--clr-diff-addition-line-bg);
 }

 .diff-line-marker-deletion,
 .diff-line-deletion {
-	background-color: var(--override-deletion-background);
+	background-color: var(--clr-diff-deletion-line-bg);
 }

 .diff-line-addition .inner-diff {
-	background-color: var(--override-addition-inner-diff-background);
+	background-color: var(--clr-diff-addition-line-highlight);
 }

 .diff-line-deletion .inner-diff {
-	background-color: var(--override-deletion-inner-diff-background);
-}
-
-.diff-line-spacer {
-	color: rgb(229, 231, 235);
-	text-align: left;
-	background-color: rgba(24, 24, 27, 1);
-	padding-left: 8px;
-	padding-right: 8px;
+	background-color: var(--clr-diff-deletion-line-highlight);
 }
--- a/packages/ui/src/styles/core/design-tokens.css
+++ b/packages/ui/src/styles/core/design-tokens.css
@ -1,106 +1,126 @@
-/**
- * Design Tokens
- * Autogenerated from tokens.json.
- * DO NOT EDIT!
- */
+/* -------------------------------------------
+ *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+ * ------------------------------------------- */

 :root {
+	--clr-core-ntrl-0: color(srgb 0.0392156862745098 0.0392156862745098 0.0392156862745098);
+	--clr-core-ntrl-5: color(srgb 0.10196078431372549 0.08627450980392157 0.0784313725490196);
+	--clr-core-ntrl-10: color(srgb 0.15294117647058825 0.13725490196078433 0.12941176470588237);
+	--clr-core-ntrl-20: color(srgb 0.18823529411764706 0.17254901960784313 0.16862745098039217);
+	--clr-core-ntrl-30: color(srgb 0.30980392156862746 0.29411764705882354 0.2823529411764706);
+	--clr-core-ntrl-40: color(srgb 0.403921568627451 0.38823529411764707 0.3686274509803922);
+	--clr-core-ntrl-50: color(srgb 0.5254901960784314 0.49411764705882355 0.4745098039215686);
+	--clr-core-ntrl-60: color(srgb 0.7058823529411765 0.6862745098039216 0.6745098039215687);
+	--clr-core-ntrl-70: color(srgb 0.8313725490196079 0.8156862745098039 0.807843137254902);
+	--clr-core-ntrl-80: color(srgb 0.9176470588235294 0.9137254901960784 0.9098039215686274);
+	--clr-core-ntrl-90: color(srgb 0.9529411764705882 0.9529411764705882 0.9490196078431372);
+	--clr-core-ntrl-95: color(srgb 0.9686274509803922 0.9686274509803922 0.9647058823529412);
+	--clr-core-ntrl-100: color(srgb 1 1 1);
+	--clr-core-pop-5: color(srgb 0.054901960784313725 0.16470588235294117 0.1607843137254902);
+	--clr-core-pop-10: color(srgb 0.09019607843137255 0.27058823529411763 0.2627450980392157);
+	--clr-core-pop-20: color(srgb 0.10980392156862745 0.32941176470588235 0.3176470588235294);
+	--clr-core-pop-30: color(srgb 0.1450980392156863 0.43529411764705883 0.4196078431372549);
+	--clr-core-pop-40: color(srgb 0.16470588235294117 0.5725490196078431 0.5529411764705883);
+	--clr-core-pop-50: color(srgb 0.2823529411764706 0.6588235294117647 0.6392156862745098);
+	--clr-core-pop-60: color(srgb 0.592156862745098 0.807843137254902 0.796078431372549);
+	--clr-core-pop-70: color(srgb 0.7764705882352941 0.9058823529411765 0.8980392156862745);
+	--clr-core-pop-80: color(srgb 0.8549019607843137 0.9450980392156862 0.9411764705882353);
+	--clr-core-pop-90: color(srgb 0.9137254901960784 0.9686274509803922 0.9647058823529412);
+	--clr-core-pop-95: color(srgb 0.9568627450980393 0.984313725490196 0.9803921568627451);
+	--clr-core-err-5: color(srgb 0.14901960784313725 0.050980392156862744 0.058823529411764705);
+	--clr-core-err-10: color(srgb 0.2980392156862745 0.10196078431372549 0.12156862745098039);
+	--clr-core-err-20: color(srgb 0.4196078431372549 0.1411764705882353 0.16862745098039217);
+	--clr-core-err-30: color(srgb 0.5843137254901961 0.19607843137254902 0.23529411764705882);
+	--clr-core-err-40: color(srgb 0.7411764705882353 0.2823529411764706 0.3215686274509804);
+	--clr-core-err-50: color(srgb 0.8627450980392157 0.3764705882352941 0.4196078431372549);
+	--clr-core-err-60: color(srgb 0.9294117647058824 0.6901960784313725 0.7294117647058823);
+	--clr-core-err-70: color(srgb 0.9686274509803922 0.8509803921568627 0.8627450980392157);
+	--clr-core-err-80: color(srgb 0.984313725490196 0.8980392156862745 0.9058823529411765);
+	--clr-core-err-90: color(srgb 0.9921568627450981 0.9450980392156862 0.9568627450980393);
+	--clr-core-err-95: color(srgb 1 0.9803921568627451 0.9882352941176471);
+	--clr-core-warn-5: color(srgb 0.14901960784313725 0.10980392156862745 0.050980392156862744);
+	--clr-core-warn-10: color(srgb 0.2627450980392157 0.17647058823529413 0.058823529411764705);
+	--clr-core-warn-20: color(srgb 0.3764705882352941 0.2549019607843137 0.08627450980392157);
+	--clr-core-warn-30: color(srgb 0.5411764705882353 0.34901960784313724 0.0784313725490196);
+	--clr-core-warn-40: color(srgb 0.7803921568627451 0.4980392156862745 0.10196078431372549);
+	--clr-core-warn-50: color(srgb 0.8627450980392157 0.6078431372549019 0.0784313725490196);
+	--clr-core-warn-60: color(srgb 0.9568627450980393 0.7333333333333333 0.4235294117647059);
+	--clr-core-warn-70: color(srgb 0.996078431372549 0.8666666666666667 0.6823529411764706);
+	--clr-core-warn-80: color(srgb 1 0.9098039215686274 0.7803921568627451);
+	--clr-core-warn-90: color(srgb 1 0.9490196078431372 0.8784313725490196);
+	--clr-core-warn-95: color(srgb 0.9921568627450981 0.9686274509803922 0.9294117647058824);
+	--clr-core-succ-5: color(srgb 0.050980392156862744 0.14901960784313725 0.10196078431372549);
+	--clr-core-succ-10: color(srgb 0.10980392156862745 0.25098039215686274 0.1843137254901961);
+	--clr-core-succ-20: color(srgb 0.13333333333333333 0.3254901960784314 0.23529411764705882);
+	--clr-core-succ-30: color(srgb 0.16470588235294117 0.49411764705882355 0.3411764705882353);
+	--clr-core-succ-40: color(srgb 0.27450980392156865 0.6078431372549019 0.45098039215686275);
+	--clr-core-succ-50: color(srgb 0.3058823529411765 0.6941176470588235 0.5098039215686274);
+	--clr-core-succ-60: color(srgb 0.6313725490196078 0.807843137254902 0.7254901960784313);
+	--clr-core-succ-70: color(srgb 0.792156862745098 0.9098039215686274 0.8549019607843137);
+	--clr-core-succ-80: color(srgb 0.8392156862745098 0.9411764705882353 0.8941176470588236);
+	--clr-core-succ-90: color(srgb 0.9098039215686274 0.9686274509803922 0.9411764705882353);
+	--clr-core-succ-95: color(srgb 0.9647058823529412 0.9882352941176471 0.984313725490196);
+	--clr-core-purp-5: color(srgb 0.1568627450980392 0.11372549019607843 0.26666666666666666);
+	--clr-core-purp-10: color(srgb 0.24705882352941178 0.17254901960784313 0.40784313725490196);
+	--clr-core-purp-20: color(srgb 0.29411764705882354 0.20392156862745098 0.4745098039215686);
+	--clr-core-purp-30: color(srgb 0.3686274509803922 0.25882352941176473 0.6039215686274509);
+	--clr-core-purp-40: color(srgb 0.4627450980392157 0.3411764705882353 0.7176470588235294);
+	--clr-core-purp-50: color(srgb 0.6 0.47058823529411764 0.8666666666666667);
+	--clr-core-purp-60: color(srgb 0.7607843137254902 0.6745098039215687 0.9450980392156862);
+	--clr-core-purp-70: color(srgb 0.8745098039215686 0.8274509803921568 0.9725490196078431);
+	--clr-core-purp-80: color(srgb 0.9137254901960784 0.8784313725490196 0.9803921568627451);
+	--clr-core-purp-90: color(srgb 0.9490196078431372 0.9294117647058824 0.9882352941176471);
+	--clr-core-purp-95: color(srgb 0.9764705882352941 0.9647058823529412 0.9921568627450981);
 	--clr-bg-1: var(--clr-core-ntrl-100);
-	--clr-bg-1-muted: var(--clr-core-ntrl-95);
 	--clr-bg-2: var(--clr-core-ntrl-90);
-	--clr-bg-2-muted: var(--clr-core-ntrl-80);
 	--clr-bg-3: var(--clr-core-ntrl-80);
+	--clr-bg-1-muted: var(--clr-core-ntrl-95);
+	--clr-bg-2-muted: var(--clr-core-ntrl-80);
 	--clr-bg-3-muted: var(--clr-core-ntrl-70);
+	--clr-theme-pop-element: var(--clr-core-pop-50);
+	--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
+	--clr-theme-pop-bg: var(--clr-core-pop-90);
+	--clr-theme-pop-on-soft: var(--clr-core-pop-20);
+	--clr-theme-pop-soft: var(--clr-core-pop-80);
+	--clr-theme-pop-element-hover: var(--clr-core-pop-40);
+	--clr-theme-pop-soft-hover: var(--clr-core-pop-70);
+	--clr-theme-err-element: var(--clr-core-err-50);
+	--clr-theme-err-on-element: var(--clr-core-err-95);
+	--clr-theme-err-bg: var(--clr-core-err-90);
+	--clr-theme-err-on-soft: var(--clr-core-err-20);
+	--clr-theme-err-soft: var(--clr-core-err-80);
+	--clr-theme-err-soft-hover: var(--clr-core-err-70);
+	--clr-theme-err-element-hover: var(--clr-core-err-40);
+	--clr-theme-warn-element: var(--clr-core-warn-50);
+	--clr-theme-warn-on-element: var(--clr-core-warn-95);
+	--clr-theme-warn-bg: var(--clr-core-warn-90);
+	--clr-theme-warn-on-soft: var(--clr-core-warn-20);
+	--clr-theme-warn-soft: var(--clr-core-warn-80);
+	--clr-theme-warn-element-hover: var(--clr-core-warn-40);
+	--clr-theme-warn-soft-hover: var(--clr-core-warn-70);
+	--clr-theme-succ-element: var(--clr-core-succ-50);
+	--clr-theme-succ-on-element: var(--clr-core-succ-95);
+	--clr-theme-succ-bg: var(--clr-core-succ-90);
+	--clr-theme-succ-on-soft: var(--clr-core-succ-20);
+	--clr-theme-succ-soft: var(--clr-core-succ-80);
+	--clr-theme-succ-element-hover: var(--clr-core-succ-40);
+	--clr-theme-succ-soft-hover: var(--clr-core-succ-70);
+	--clr-theme-purp-element: var(--clr-core-purp-50);
+	--clr-theme-purp-on-element: var(--clr-core-purp-95);
+	--clr-theme-purp-bg: var(--clr-core-purp-90);
+	--clr-theme-purp-on-soft: var(--clr-core-purp-20);
+	--clr-theme-purp-soft: var(--clr-core-purp-80);
+	--clr-theme-purp-element-hover: var(--clr-core-purp-40);
+	--clr-theme-purp-soft-hover: var(--clr-core-purp-70);
+	--clr-theme-ntrl-element: var(--clr-core-ntrl-30);
+	--clr-theme-ntrl-element-hover: var(--clr-core-ntrl-20);
+	--clr-theme-ntrl-on-element: var(--clr-core-ntrl-100);
+	--clr-theme-ntrl-soft: var(--clr-core-ntrl-90);
+	--clr-theme-ntrl-soft-hover: var(--clr-core-ntrl-80);
+	--clr-theme-ntrl-on-soft: var(--clr-core-ntrl-0);
 	--clr-border-1: var(--clr-core-ntrl-60);
 	--clr-border-2: var(--clr-core-ntrl-70);
 	--clr-border-3: var(--clr-core-ntrl-80);
-	--clr-commit-local: var(--clr-core-pop-50);
-	--clr-commit-remote: var(--clr-core-ntrl-50);
-	--clr-commit-shadow: var(--clr-core-ntrl-60);
-	--clr-commit-upstream: var(--clr-core-warn-50);
-	--clr-core-err-5: #260d0f;
-	--clr-core-err-10: #4c1a1f;
-	--clr-core-err-20: #6b242b;
-	--clr-core-err-30: #95323c;
-	--clr-core-err-40: #bd4852;
-	--clr-core-err-50: #dc606b;
-	--clr-core-err-60: #edb0ba;
-	--clr-core-err-70: #f7d9dc;
-	--clr-core-err-80: #fbe5e7;
-	--clr-core-err-90: #fdf1f4;
-	--clr-core-err-95: #fffafc;
-	--clr-core-ntrl-0: #0a0a0a;
-	--clr-core-ntrl-5: #1a1614;
-	--clr-core-ntrl-10: #272321;
-	--clr-core-ntrl-20: #302c2b;
-	--clr-core-ntrl-30: #4f4b48;
-	--clr-core-ntrl-40: #67635e;
-	--clr-core-ntrl-50: #867e79;
-	--clr-core-ntrl-60: #b4afac;
-	--clr-core-ntrl-70: #d4d0ce;
-	--clr-core-ntrl-80: #eae9e8;
-	--clr-core-ntrl-90: #f3f3f2;
-	--clr-core-ntrl-95: #f7f7f6;
-	--clr-core-ntrl-100: #ffffff;
-	--clr-core-pop-5: #0e2a29;
-	--clr-core-pop-10: #174543;
-	--clr-core-pop-20: #1c5451;
-	--clr-core-pop-30: #256f6b;
-	--clr-core-pop-40: #2a928d;
-	--clr-core-pop-50: #48a8a3;
-	--clr-core-pop-60: #97cecb;
-	--clr-core-pop-70: #c6e7e5;
-	--clr-core-pop-80: #daf1f0;
-	--clr-core-pop-90: #e9f7f6;
-	--clr-core-pop-95: #f4fbfa;
-	--clr-core-purp-5: #281d44;
-	--clr-core-purp-10: #3f2c68;
-	--clr-core-purp-20: #4b3479;
-	--clr-core-purp-30: #5e429a;
-	--clr-core-purp-40: #7657b7;
-	--clr-core-purp-50: #9978dd;
-	--clr-core-purp-60: #c2acf1;
-	--clr-core-purp-70: #dfd3f8;
-	--clr-core-purp-80: #e9e0fa;
-	--clr-core-purp-90: #f2edfc;
-	--clr-core-purp-95: #f9f6fd;
-	--clr-core-succ-5: #0d261a;
-	--clr-core-succ-10: #1c402f;
-	--clr-core-succ-20: #22533c;
-	--clr-core-succ-30: #2a7e57;
-	--clr-core-succ-40: #469b73;
-	--clr-core-succ-50: #4eb182;
-	--clr-core-succ-60: #a1ceb9;
-	--clr-core-succ-70: #cae8da;
-	--clr-core-succ-80: #d6f0e4;
-	--clr-core-succ-90: #e8f7f0;
-	--clr-core-succ-95: #f6fcfb;
-	--clr-core-warn-5: #261c0d;
-	--clr-core-warn-10: #432d0f;
-	--clr-core-warn-20: #604116;
-	--clr-core-warn-30: #8a5914;
-	--clr-core-warn-40: #c77f1a;
-	--clr-core-warn-50: #dc9b14;
-	--clr-core-warn-60: #f4bb6c;
-	--clr-core-warn-70: #feddae;
-	--clr-core-warn-80: #ffe8c7;
-	--clr-core-warn-90: #fff2e0;
-	--clr-core-warn-95: #fdf7ed;
-	--clr-illustration-bg: #d6f0ee;
-	--clr-illustration-fill: #fcfcf1;
-	--clr-illustration-outline: #475050;
-	--clr-overlay-bg: #d6d6d666;
-	--clr-scale-err-5: var(--clr-core-err-5);
-	--clr-scale-err-10: var(--clr-core-err-10);
-	--clr-scale-err-20: var(--clr-core-err-20);
-	--clr-scale-err-30: var(--clr-core-err-30);
-	--clr-scale-err-40: var(--clr-core-err-40);
-	--clr-scale-err-50: var(--clr-core-err-50);
-	--clr-scale-err-60: var(--clr-core-err-60);
-	--clr-scale-err-70: var(--clr-core-err-70);
-	--clr-scale-err-80: var(--clr-core-err-80);
-	--clr-scale-err-90: var(--clr-core-err-90);
-	--clr-scale-err-95: var(--clr-core-err-95);
 	--clr-scale-ntrl-0: var(--clr-core-ntrl-0);
 	--clr-scale-ntrl-5: var(--clr-core-ntrl-5);
 	--clr-scale-ntrl-10: var(--clr-core-ntrl-10);
@ -125,28 +145,17 @@
 	--clr-scale-pop-80: var(--clr-core-pop-80);
 	--clr-scale-pop-90: var(--clr-core-pop-90);
 	--clr-scale-pop-95: var(--clr-core-pop-95);
-	--clr-scale-purp-5: var(--clr-core-purp-5);
-	--clr-scale-purp-10: var(--clr-core-purp-10);
-	--clr-scale-purp-20: var(--clr-core-purp-20);
-	--clr-scale-purp-30: var(--clr-core-purp-30);
-	--clr-scale-purp-40: var(--clr-core-purp-40);
-	--clr-scale-purp-50: var(--clr-core-purp-50);
-	--clr-scale-purp-60: var(--clr-core-purp-60);
-	--clr-scale-purp-70: var(--clr-core-purp-70);
-	--clr-scale-purp-80: var(--clr-core-purp-80);
-	--clr-scale-purp-90: var(--clr-core-purp-90);
-	--clr-scale-purp-95: var(--clr-core-purp-95);
-	--clr-scale-succ-5: var(--clr-core-succ-5);
-	--clr-scale-succ-10: var(--clr-core-succ-10);
-	--clr-scale-succ-20: var(--clr-core-succ-20);
-	--clr-scale-succ-30: var(--clr-core-succ-30);
-	--clr-scale-succ-40: var(--clr-core-succ-40);
-	--clr-scale-succ-50: var(--clr-core-succ-50);
-	--clr-scale-succ-60: var(--clr-core-succ-60);
-	--clr-scale-succ-70: var(--clr-core-succ-70);
-	--clr-scale-succ-80: var(--clr-core-succ-80);
-	--clr-scale-succ-90: var(--clr-core-succ-90);
-	--clr-scale-succ-95: var(--clr-core-succ-95);
+	--clr-scale-err-5: var(--clr-core-err-5);
+	--clr-scale-err-10: var(--clr-core-err-10);
+	--clr-scale-err-20: var(--clr-core-err-20);
+	--clr-scale-err-30: var(--clr-core-err-30);
+	--clr-scale-err-40: var(--clr-core-err-40);
+	--clr-scale-err-50: var(--clr-core-err-50);
+	--clr-scale-err-60: var(--clr-core-err-60);
+	--clr-scale-err-70: var(--clr-core-err-70);
+	--clr-scale-err-80: var(--clr-core-err-80);
+	--clr-scale-err-90: var(--clr-core-err-90);
+	--clr-scale-err-95: var(--clr-core-err-95);
 	--clr-scale-warn-5: var(--clr-core-warn-5);
 	--clr-scale-warn-10: var(--clr-core-warn-10);
 	--clr-scale-warn-20: var(--clr-core-warn-20);
@ -158,112 +167,138 @@
 	--clr-scale-warn-80: var(--clr-core-warn-80);
 	--clr-scale-warn-90: var(--clr-core-warn-90);
 	--clr-scale-warn-95: var(--clr-core-warn-95);
+	--clr-scale-succ-5: var(--clr-core-succ-5);
+	--clr-scale-succ-10: var(--clr-core-succ-10);
+	--clr-scale-succ-20: var(--clr-core-succ-20);
+	--clr-scale-succ-30: var(--clr-core-succ-30);
+	--clr-scale-succ-40: var(--clr-core-succ-40);
+	--clr-scale-succ-50: var(--clr-core-succ-50);
+	--clr-scale-succ-60: var(--clr-core-succ-60);
+	--clr-scale-succ-70: var(--clr-core-succ-70);
+	--clr-scale-succ-80: var(--clr-core-succ-80);
+	--clr-scale-succ-90: var(--clr-core-succ-90);
+	--clr-scale-succ-95: var(--clr-core-succ-95);
+	--clr-scale-purp-5: var(--clr-core-purp-5);
+	--clr-scale-purp-10: var(--clr-core-purp-10);
+	--clr-scale-purp-20: var(--clr-core-purp-20);
+	--clr-scale-purp-30: var(--clr-core-purp-30);
+	--clr-scale-purp-40: var(--clr-core-purp-40);
+	--clr-scale-purp-50: var(--clr-core-purp-50);
+	--clr-scale-purp-60: var(--clr-core-purp-60);
+	--clr-scale-purp-70: var(--clr-core-purp-70);
+	--clr-scale-purp-80: var(--clr-core-purp-80);
+	--clr-scale-purp-90: var(--clr-core-purp-90);
+	--clr-scale-purp-95: var(--clr-core-purp-95);
+	--clr-overlay-bg: color(srgb 0.8392156862745098 0.8392156862745098 0.8392156862745098 / 0.4);
+	--clr-illustration-bg: color(srgb 0.8392156862745098 0.9411764705882353 0.9333333333333333);
+	--clr-illustration-outline: color(srgb 0.2784313725490196 0.3137254901960784 0.3137254901960784);
+	--clr-illustration-fill: color(srgb 0.9882352941176471 0.9882352941176471 0.9450980392156862);
+	--clr-commit-upstream: var(--clr-core-warn-50);
+	--clr-commit-local: var(--clr-core-pop-50);
+	--clr-commit-remote: var(--clr-core-ntrl-50);
+	--clr-commit-shadow: var(--clr-core-ntrl-60);
 	--clr-text-1: var(--clr-core-ntrl-5);
 	--clr-text-2: var(--clr-core-ntrl-50);
 	--clr-text-3: var(--clr-core-ntrl-60);
-	--clr-theme-err-bg: var(--clr-core-err-90);
-	--clr-theme-err-element: var(--clr-core-err-50);
-	--clr-theme-err-element-hover: var(--clr-core-err-40);
-	--clr-theme-err-on-element: var(--clr-core-err-95);
-	--clr-theme-err-on-soft: var(--clr-core-err-20);
-	--clr-theme-err-soft: var(--clr-core-err-80);
-	--clr-theme-err-soft-hover: var(--clr-core-err-70);
-	--clr-theme-ntrl-element: var(--clr-core-ntrl-30);
-	--clr-theme-ntrl-element-hover: var(--clr-core-ntrl-20);
-	--clr-theme-ntrl-on-element: var(--clr-core-ntrl-100);
-	--clr-theme-ntrl-on-soft: var(--clr-scale-ntrl-0);
-	--clr-theme-ntrl-soft: var(--clr-core-ntrl-90);
-	--clr-theme-ntrl-soft-hover: var(--clr-core-ntrl-80);
-	--clr-theme-pop-bg: var(--clr-core-pop-90);
-	--clr-theme-pop-element: var(--clr-core-pop-50);
-	--clr-theme-pop-element-hover: var(--clr-core-pop-40);
-	--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
-	--clr-theme-pop-on-soft: var(--clr-core-pop-20);
-	--clr-theme-pop-soft: var(--clr-core-pop-80);
-	--clr-theme-pop-soft-hover: var(--clr-core-pop-70);
-	--clr-theme-purp-bg: var(--clr-core-purp-90);
-	--clr-theme-purp-element: var(--clr-core-purp-50);
-	--clr-theme-purp-element-hover: var(--clr-core-purp-40);
-	--clr-theme-purp-on-element: var(--clr-core-purp-95);
-	--clr-theme-purp-on-soft: var(--clr-core-purp-20);
-	--clr-theme-purp-soft: var(--clr-core-purp-80);
-	--clr-theme-purp-soft-hover: var(--clr-core-purp-70);
-	--clr-theme-succ-bg: var(--clr-core-succ-90);
-	--clr-theme-succ-element: var(--clr-core-succ-50);
-	--clr-theme-succ-element-hover: var(--clr-core-succ-40);
-	--clr-theme-succ-on-element: var(--clr-core-succ-95);
-	--clr-theme-succ-on-soft: var(--clr-core-succ-20);
-	--clr-theme-succ-soft: var(--clr-core-succ-80);
-	--clr-theme-succ-soft-hover: var(--clr-core-succ-70);
-	--clr-theme-warn-bg: var(--clr-core-warn-90);
-	--clr-theme-warn-element: var(--clr-core-warn-50);
-	--clr-theme-warn-element-hover: var(--clr-core-warn-40);
-	--clr-theme-warn-on-element: var(--clr-core-warn-95);
-	--clr-theme-warn-on-soft: var(--clr-core-warn-20);
-	--clr-theme-warn-soft: var(--clr-core-warn-80);
-	--clr-theme-warn-soft-hover: var(--clr-core-warn-70);
-	--fx-shadow-l: 0 10px 40px 0 #0000001a;
-	--fx-shadow-m: 0 6px 30px 0 #00000014;
-	--fx-shadow-s: 0 4px 14px 0 #0000000f;
-	--radius-l: 0.75rem;
-	--radius-m: 0.375rem;
-	--radius-s: 0.25rem;
-	--size-2: 0.125rem;
-	--size-4: 0.25rem;
-	--size-6: 0.375rem;
-	--size-8: 0.5rem;
-	--size-10: 0.625rem;
-	--size-12: 0.75rem;
-	--size-14: 0.875rem;
-	--size-16: 1rem;
-	--size-20: 1.25rem;
-	--size-24: 1.5rem;
-	--size-26: 1.625rem;
-	--size-28: 1.75rem;
-	--size-32: 2rem;
-	--size-36: 2.25rem;
-	--size-40: 2.5rem;
-	--size-48: 3rem;
-	--size-56: 3.5rem;
-	--size-64: 4rem;
-	--size-80: 5rem;
-	--size-96: 6rem;
-	--size-button: 1.75rem;
-	--size-card-padding: 0.875rem;
-	--size-cta: 2rem;
+	--clr-diff-line-bg: var(--clr-bg-1);
+	--clr-diff-count-bg: color(srgb 0.9686274509803922 0.9686274509803922 0.9647058823529412);
+	--clr-diff-count-border: var(--clr-border-2);
+	--clr-diff-selected-count-bg: color(
+		srgb 0.21568627450980393 0.5450980392156862 0.9490196078431372
+	);
+	--clr-diff-selected-count-border: color(
+		srgb 0.14901960784313725 0.36470588235294116 0.8313725490196079
+	);
+	--clr-diff-selected-count-text: color(srgb 1 1 1);
+	--clr-diff-count-text: var(--clr-text-3);
+	--clr-diff-deletion-line-bg: color(srgb 1 0.9411764705882353 0.9490196078431372);
+	--clr-diff-deletion-line-highlight: color(
+		srgb 0.9921568627450981 0.8235294117647058 0.8549019607843137
+	);
+	--clr-diff-deletion-count-bg: color(
+		srgb 0.9882352941176471 0.8745098039215686 0.8941176470588236
+	);
+	--clr-diff-deletion-count-border: color(
+		srgb 0.8901960784313725 0.7568627450980392 0.7568627450980392
+	);
+	--clr-diff-deletion-count-text: color(
+		srgb 0.7137254901960784 0.5725490196078431 0.5725490196078431
+	);
+	--clr-diff-addition-line-highlight: color(
+		srgb 0.7137254901960784 0.9294117647058824 0.8392156862745098
+	);
+	--clr-diff-addition-count-bg: color(srgb 0.796078431372549 0.9568627450980393 0.8901960784313725);
+	--clr-diff-addition-count-border: color(
+		srgb 0.6509803921568628 0.803921568627451 0.7411764705882353
+	);
+	--clr-diff-addition-count-text: color(
+		srgb 0.5294117647058824 0.6588235294117647 0.6039215686274509
+	);
+	--clr-diff-addition-line-bg: color(srgb 0.8784313725490196 0.984313725490196 0.9411764705882353);
 	--size-icon: 1rem;
 	--size-tag: 1.375rem;
+	--size-button: 1.75rem;
+	--size-cta: 2rem;
+	--size-card-padding: 0.875rem;
+	--radius-s: 0.25rem;
+	--radius-m: 0.375rem;
+	--radius-l: 0.75rem;
+	--fx-shadow-s: 0 4px 14px 0 color(srgb 0 0 0 / 0.058823529411764705);
+	--fx-shadow-m: 0 6px 30px 0 color(srgb 0 0 0 / 0.0784313725490196);
+	--fx-shadow-l: 0 10px 40px 0 color(srgb 0 0 0 / 0.10196078431372549);
 }

 :root.dark {
 	--clr-bg-1: var(--clr-core-ntrl-10);
-	--clr-bg-1-muted: var(--clr-core-ntrl-20);
 	--clr-bg-2: var(--clr-core-ntrl-5);
-	--clr-bg-2-muted: var(--clr-core-ntrl-10);
 	--clr-bg-3: var(--clr-core-ntrl-0);
+	--clr-bg-1-muted: var(--clr-core-ntrl-20);
+	--clr-bg-2-muted: var(--clr-core-ntrl-10);
 	--clr-bg-3-muted: var(--clr-core-ntrl-5);
+	--clr-theme-pop-element: var(--clr-core-pop-40);
+	--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
+	--clr-theme-pop-bg: var(--clr-core-pop-10);
+	--clr-theme-pop-on-soft: var(--clr-core-pop-90);
+	--clr-theme-pop-soft: var(--clr-core-pop-10);
+	--clr-theme-pop-element-hover: var(--clr-core-pop-30);
+	--clr-theme-pop-soft-hover: var(--clr-core-pop-20);
+	--clr-theme-err-element: var(--clr-core-err-40);
+	--clr-theme-err-on-element: var(--clr-core-err-95);
+	--clr-theme-err-bg: var(--clr-core-err-10);
+	--clr-theme-err-on-soft: var(--clr-core-err-90);
+	--clr-theme-err-soft: var(--clr-core-err-20);
+	--clr-theme-err-soft-hover: var(--clr-core-err-30);
+	--clr-theme-err-element-hover: var(--clr-core-err-30);
+	--clr-theme-warn-element: var(--clr-core-warn-40);
+	--clr-theme-warn-on-element: var(--clr-core-warn-90);
+	--clr-theme-warn-bg: var(--clr-core-warn-10);
+	--clr-theme-warn-on-soft: var(--clr-core-warn-90);
+	--clr-theme-warn-soft: var(--clr-core-warn-20);
+	--clr-theme-warn-element-hover: var(--clr-core-warn-30);
+	--clr-theme-warn-soft-hover: var(--clr-core-warn-30);
+	--clr-theme-succ-element: var(--clr-core-succ-40);
+	--clr-theme-succ-on-element: var(--clr-core-succ-90);
+	--clr-theme-succ-bg: var(--clr-core-succ-10);
+	--clr-theme-succ-on-soft: var(--clr-core-succ-90);
+	--clr-theme-succ-soft: var(--clr-core-succ-10);
+	--clr-theme-succ-element-hover: var(--clr-core-succ-30);
+	--clr-theme-succ-soft-hover: var(--clr-core-succ-20);
+	--clr-theme-purp-element: var(--clr-core-purp-40);
+	--clr-theme-purp-on-element: var(--clr-core-purp-90);
+	--clr-theme-purp-bg: var(--clr-core-purp-10);
+	--clr-theme-purp-on-soft: var(--clr-core-purp-90);
+	--clr-theme-purp-soft: var(--clr-core-purp-10);
+	--clr-theme-purp-element-hover: var(--clr-core-purp-30);
+	--clr-theme-purp-soft-hover: var(--clr-core-purp-20);
+	--clr-theme-ntrl-element: var(--clr-core-ntrl-80);
+	--clr-theme-ntrl-element-hover: var(--clr-core-ntrl-95);
+	--clr-theme-ntrl-on-element: var(--clr-core-ntrl-0);
+	--clr-theme-ntrl-soft: var(--clr-core-ntrl-20);
+	--clr-theme-ntrl-soft-hover: var(--clr-core-ntrl-30);
+	--clr-theme-ntrl-on-soft: var(--clr-core-ntrl-90);
 	--clr-border-1: var(--clr-core-ntrl-40);
 	--clr-border-2: var(--clr-core-ntrl-30);
 	--clr-border-3: var(--clr-core-ntrl-20);
-	--clr-commit-local: var(--clr-core-pop-50);
-	--clr-commit-remote: var(--clr-core-ntrl-50);
-	--clr-commit-shadow: var(--clr-core-ntrl-40);
-	--clr-commit-upstream: var(--clr-core-warn-50);
-	--clr-illustration-bg: #214f4d;
-	--clr-illustration-fill: #d8e3c1;
-	--clr-illustration-outline: #142222;
-	--clr-overlay-bg: #00000059;
-	--clr-scale-err-5: var(--clr-core-err-95);
-	--clr-scale-err-10: var(--clr-core-err-90);
-	--clr-scale-err-20: var(--clr-core-err-80);
-	--clr-scale-err-30: var(--clr-core-err-70);
-	--clr-scale-err-40: var(--clr-core-err-60);
-	--clr-scale-err-50: var(--clr-core-err-50);
-	--clr-scale-err-60: var(--clr-core-err-40);
-	--clr-scale-err-70: var(--clr-core-err-30);
-	--clr-scale-err-80: var(--clr-core-err-20);
-	--clr-scale-err-90: var(--clr-core-err-10);
-	--clr-scale-err-95: var(--clr-core-err-5);
 	--clr-scale-ntrl-0: var(--clr-core-ntrl-100);
 	--clr-scale-ntrl-5: var(--clr-core-ntrl-95);
 	--clr-scale-ntrl-10: var(--clr-core-ntrl-90);
@ -288,28 +323,17 @@
 	--clr-scale-pop-80: var(--clr-core-pop-20);
 	--clr-scale-pop-90: var(--clr-core-pop-10);
 	--clr-scale-pop-95: var(--clr-core-pop-5);
-	--clr-scale-purp-5: var(--clr-core-purp-95);
-	--clr-scale-purp-10: var(--clr-core-purp-90);
-	--clr-scale-purp-20: var(--clr-core-purp-80);
-	--clr-scale-purp-30: var(--clr-core-purp-70);
-	--clr-scale-purp-40: var(--clr-core-purp-60);
-	--clr-scale-purp-50: var(--clr-core-purp-50);
-	--clr-scale-purp-60: var(--clr-core-purp-40);
-	--clr-scale-purp-70: var(--clr-core-purp-30);
-	--clr-scale-purp-80: var(--clr-core-purp-20);
-	--clr-scale-purp-90: var(--clr-core-purp-10);
-	--clr-scale-purp-95: var(--clr-core-purp-5);
-	--clr-scale-succ-5: var(--clr-core-succ-95);
-	--clr-scale-succ-10: var(--clr-core-succ-90);
-	--clr-scale-succ-20: var(--clr-core-succ-80);
-	--clr-scale-succ-30: var(--clr-core-succ-70);
-	--clr-scale-succ-40: var(--clr-core-succ-60);
-	--clr-scale-succ-50: var(--clr-core-succ-50);
-	--clr-scale-succ-60: var(--clr-core-succ-40);
-	--clr-scale-succ-70: var(--clr-core-succ-30);
-	--clr-scale-succ-80: var(--clr-core-succ-20);
-	--clr-scale-succ-90: var(--clr-core-succ-10);
-	--clr-scale-succ-95: var(--clr-core-succ-5);
+	--clr-scale-err-5: var(--clr-core-err-95);
+	--clr-scale-err-10: var(--clr-core-err-90);
+	--clr-scale-err-20: var(--clr-core-err-80);
+	--clr-scale-err-30: var(--clr-core-err-70);
+	--clr-scale-err-40: var(--clr-core-err-60);
+	--clr-scale-err-50: var(--clr-core-err-50);
+	--clr-scale-err-60: var(--clr-core-err-40);
+	--clr-scale-err-70: var(--clr-core-err-30);
+	--clr-scale-err-80: var(--clr-core-err-20);
+	--clr-scale-err-90: var(--clr-core-err-10);
+	--clr-scale-err-95: var(--clr-core-err-5);
 	--clr-scale-warn-5: var(--clr-core-warn-95);
 	--clr-scale-warn-10: var(--clr-core-warn-90);
 	--clr-scale-warn-20: var(--clr-core-warn-80);
@ -321,48 +345,174 @@
 	--clr-scale-warn-80: var(--clr-core-warn-20);
 	--clr-scale-warn-90: var(--clr-core-warn-10);
 	--clr-scale-warn-95: var(--clr-core-warn-5);
+	--clr-scale-succ-5: var(--clr-core-succ-95);
+	--clr-scale-succ-10: var(--clr-core-succ-90);
+	--clr-scale-succ-20: var(--clr-core-succ-80);
+	--clr-scale-succ-30: var(--clr-core-succ-70);
+	--clr-scale-succ-40: var(--clr-core-succ-60);
+	--clr-scale-succ-50: var(--clr-core-succ-50);
+	--clr-scale-succ-60: var(--clr-core-succ-40);
+	--clr-scale-succ-70: var(--clr-core-succ-30);
+	--clr-scale-succ-80: var(--clr-core-succ-20);
+	--clr-scale-succ-90: var(--clr-core-succ-10);
+	--clr-scale-succ-95: var(--clr-core-succ-5);
+	--clr-scale-purp-5: var(--clr-core-purp-95);
+	--clr-scale-purp-10: var(--clr-core-purp-90);
+	--clr-scale-purp-20: var(--clr-core-purp-80);
+	--clr-scale-purp-30: var(--clr-core-purp-70);
+	--clr-scale-purp-40: var(--clr-core-purp-60);
+	--clr-scale-purp-50: var(--clr-core-purp-50);
+	--clr-scale-purp-60: var(--clr-core-purp-40);
+	--clr-scale-purp-70: var(--clr-core-purp-30);
+	--clr-scale-purp-80: var(--clr-core-purp-20);
+	--clr-scale-purp-90: var(--clr-core-purp-10);
+	--clr-scale-purp-95: var(--clr-core-purp-5);
+	--clr-overlay-bg: color(srgb 0 0 0 / 0.34901960784313724);
+	--clr-illustration-bg: color(srgb 0.12941176470588237 0.30980392156862746 0.30196078431372547);
+	--clr-illustration-outline: color(
+		srgb 0.0784313725490196 0.13333333333333333 0.13333333333333333
+	);
+	--clr-illustration-fill: color(srgb 0.8470588235294118 0.8901960784313725 0.7568627450980392);
+	--clr-commit-upstream: var(--clr-core-warn-50);
+	--clr-commit-local: var(--clr-core-pop-50);
+	--clr-commit-remote: var(--clr-core-ntrl-50);
+	--clr-commit-shadow: var(--clr-core-ntrl-40);
 	--clr-text-1: var(--clr-core-ntrl-95);
 	--clr-text-2: var(--clr-core-ntrl-60);
 	--clr-text-3: var(--clr-core-ntrl-40);
-	--clr-theme-err-bg: var(--clr-core-err-10);
-	--clr-theme-err-element: var(--clr-core-err-40);
-	--clr-theme-err-element-hover: var(--clr-core-err-30);
-	--clr-theme-err-on-element: var(--clr-core-err-95);
-	--clr-theme-err-on-soft: var(--clr-core-err-90);
-	--clr-theme-err-soft: var(--clr-core-err-20);
-	--clr-theme-err-soft-hover: var(--clr-core-err-30);
-	--clr-theme-ntrl-element: var(--clr-core-ntrl-80);
-	--clr-theme-ntrl-element-hover: var(--clr-core-ntrl-95);
-	--clr-theme-ntrl-on-element: var(--clr-core-ntrl-0);
-	--clr-theme-ntrl-on-soft: var(--clr-core-ntrl-90);
-	--clr-theme-ntrl-soft: var(--clr-core-ntrl-20);
-	--clr-theme-ntrl-soft-hover: var(--clr-core-ntrl-30);
-	--clr-theme-pop-bg: var(--clr-core-pop-10);
-	--clr-theme-pop-element: var(--clr-core-pop-40);
-	--clr-theme-pop-element-hover: var(--clr-core-pop-30);
-	--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
-	--clr-theme-pop-on-soft: var(--clr-core-pop-90);
-	--clr-theme-pop-soft: var(--clr-core-pop-10);
-	--clr-theme-pop-soft-hover: var(--clr-core-pop-20);
-	--clr-theme-purp-bg: var(--clr-core-purp-10);
-	--clr-theme-purp-element: var(--clr-core-purp-40);
-	--clr-theme-purp-element-hover: var(--clr-core-purp-30);
-	--clr-theme-purp-on-element: var(--clr-core-purp-90);
-	--clr-theme-purp-on-soft: var(--clr-core-purp-90);
-	--clr-theme-purp-soft: var(--clr-core-purp-10);
-	--clr-theme-purp-soft-hover: var(--clr-core-purp-20);
-	--clr-theme-succ-bg: var(--clr-core-succ-10);
-	--clr-theme-succ-element: var(--clr-core-succ-40);
-	--clr-theme-succ-element-hover: var(--clr-core-succ-30);
-	--clr-theme-succ-on-element: var(--clr-core-succ-90);
-	--clr-theme-succ-on-soft: var(--clr-core-succ-90);
-	--clr-theme-succ-soft: var(--clr-core-succ-10);
-	--clr-theme-succ-soft-hover: var(--clr-core-succ-20);
-	--clr-theme-warn-bg: var(--clr-core-warn-10);
-	--clr-theme-warn-element: var(--clr-core-warn-40);
-	--clr-theme-warn-element-hover: var(--clr-core-warn-30);
-	--clr-theme-warn-on-element: var(--clr-core-warn-90);
-	--clr-theme-warn-on-soft: var(--clr-core-warn-90);
-	--clr-theme-warn-soft: var(--clr-core-warn-20);
-	--clr-theme-warn-soft-hover: var(--clr-core-warn-30);
+	--clr-diff-line-bg: var(--clr-bg-1);
+	--clr-diff-count-bg: color(srgb 0.18823529411764706 0.17254901960784313 0.16862745098039217);
+	--clr-diff-count-border: var(--clr-border-2);
+	--clr-diff-selected-count-bg: color(
+		srgb 0.01568627450980392 0.25882352941176473 0.5372549019607843
+	);
+	--clr-diff-selected-count-border: color(srgb 0 0.3607843137254902 0.7725490196078432);
+	--clr-diff-selected-count-text: color(srgb 0.596078431372549 0.7764705882352941 1);
+	--clr-diff-count-text: var(--clr-text-3);
+	--clr-diff-deletion-line-bg: color(
+		srgb 0.23529411764705882 0.07450980392156863 0.10588235294117647
+	);
+	--clr-diff-deletion-line-highlight: color(
+		srgb 0.47058823529411764 0.023529411764705882 0.10980392156862745
+	);
+	--clr-diff-deletion-count-bg: color(
+		srgb 0.3254901960784314 0.07450980392156863 0.11764705882352941
+	);
+	--clr-diff-deletion-count-border: color(
+		srgb 0.5568627450980392 0.23529411764705882 0.23529411764705882
+	);
+	--clr-diff-deletion-count-text: color(
+		srgb 0.7019607843137254 0.403921568627451 0.45098039215686275
+	);
+	--clr-diff-addition-line-highlight: color(
+		srgb 0.027450980392156862 0.32941176470588235 0.27058823529411763
+	);
+	--clr-diff-addition-count-bg: color(
+		srgb 0.047058823529411764 0.27058823529411763 0.2196078431372549
+	);
+	--clr-diff-addition-count-border: color(
+		srgb 0.16862745098039217 0.43137254901960786 0.3254901960784314
+	);
+	--clr-diff-addition-count-text: color(
+		srgb 0.40784313725490196 0.6196078431372549 0.5333333333333333
+	);
+	--clr-diff-addition-line-bg: color(
+		srgb 0.054901960784313725 0.1843137254901961 0.1450980392156863
+	);
+}
+
+.bg-clr1 {
+	background-color: var(--clr-bg-1);
+}
+
+.bg-clr2 {
+	background-color: var(--clr-bg-2);
+}
+
+.bg-clr3 {
+	background-color: var(--clr-bg-3);
+}
+
+.bg-clr1-muted {
+	background-color: var(--clr-bg-1-muted);
+}
+
+.bg-clr2-muted {
+	background-color: var(--clr-bg-2-muted);
+}
+
+.bg-clr3-muted {
+	background-color: var(--clr-bg-3-muted);
+}
+
+.border-clr1 {
+	border-color: var(--clr-border-1);
+}
+
+.border-clr2 {
+	border-color: var(--clr-border-2);
+}
+
+.border-clr3 {
+	border-color: var(--clr-border-3);
+}
+
+.border-top-clr1 {
+	border-top-color: var(--clr-border-1);
+}
+
+.border-right-clr1 {
+	border-right-color: var(--clr-border-1);
+}
+
+.border-bottom-clr1 {
+	border-bottom-color: var(--clr-border-1);
+}
+
+.border-left-clr1 {
+	border-left-color: var(--clr-border-1);
+}
+
+.border-top-clr2 {
+	border-top-color: var(--clr-border-2);
+}
+
+.border-right-clr2 {
+	border-right-color: var(--clr-border-2);
+}
+
+.border-bottom-clr2 {
+	border-bottom-color: var(--clr-border-2);
+}
+
+.border-left-clr2 {
+	border-left-color: var(--clr-border-2);
+}
+
+.border-top-clr3 {
+	border-top-color: var(--clr-border-3);
+}
+
+.border-right-clr3 {
+	border-right-color: var(--clr-border-3);
+}
+
+.border-bottom-clr3 {
+	border-bottom-color: var(--clr-border-3);
+}
+
+.border-left-clr3 {
+	border-left-color: var(--clr-border-3);
+}
+
+.text-clr1 {
+	color: var(--clr-text-1);
+}
+
+.text-clr2 {
+	color: var(--clr-text-2);
+}
+
+.text-clr3 {
+	color: var(--clr-text-3);
 }
--- a/packages/ui/src/styles/sharable/syntax-highlighting.css
+++ b/packages/ui/src/styles/sharable/syntax-highlighting.css
@ -1,6 +1,6 @@
@layer sharable {
 	.token-variable {
-		color: #8953800;
+		color: #0550ae;
 	}

 	.token-property {
@ -60,11 +60,11 @@
 	}

 	.token-inserted {
-		background-color: var(--override-addition-inner-diff-background);
+		background-color: var(--clr-diff-addition-line-highlight);
 	}

 	.token-deleted {
-		background-color: var(--override-deletion-inner-diff-background);
+		background-color: var(--clr-diff-deletion-line-highlight);
 	}

 	.token-heading {
--- a/packages/ui/terrazzo.config.js
+++ b/packages/ui/terrazzo.config.js
@ -0,0 +1,40 @@
+import { defineConfig } from '@terrazzo/cli';
+import css from '@terrazzo/plugin-css';
+
+function pxToRem(token) {
+	if (token.$type === 'dimension' && token.$value.slice(-2) === 'px') {
+		return token.$value.slice(0, -2) / 16 + 'rem';
+	}
+}
+
+function clearFxPrefix(id) {
+	if (id.includes('fx.')) {
+		return id.replace('fx.', '').replace('.', '-');
+	}
+}
+
+export default defineConfig({
+	tokens: './src/lib/design-tokens.json',
+	outDir: './src/styles/core',
+	plugins: [
+		css({
+			filename: 'design-tokens.css',
+			modeSelectors: [
+				{
+					mode: 'dark',
+					selectors: [':root.dark']
+				}
+			],
+			p3: false,
+			transform: pxToRem,
+			generateName(variableId) {
+				return clearFxPrefix(variableId);
+			},
+			utility: {
+				bg: ['clr.bg.*'],
+				text: ['clr.text.*'],
+				border: ['clr.border.*']
+			}
+		})
+	]
+});
--- a/packages/ui/tokens.config.js
+++ b/packages/ui/tokens.config.js
@ -1,26 +0,0 @@
-import pluginCSS from '@cobalt-ui/plugin-css';
-
-function pxToRem(token) {
-	if (token.$type === 'dimension' && token.$value.slice(-2) === 'px') {
-		return token.$value.slice(0, -2) / 16 + 'rem';
-	}
-}
-
-export default {
-	tokens: './design-tokens.json',
-	outDir: './src/styles/core',
-	plugins: [
-		pluginCSS({
-			filename: 'design-tokens.css',
-			modeSelectors: [
-				{
-					mode: 'dark',
-					selectors: [':root.dark']
-				}
-			],
-			p3: false,
-			colorFormat: 'hex',
-			transform: pxToRem
-		})
-	]
-};
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@ -19,7 +19,7 @@
 		".svelte-kit/types/**/$types.d.ts",
 		"vite.config.js",
 		"vite.config.ts",
-		"tokens.config.js",
+		"terrazzo.config.js",
 		"src/**/*.js",
 		"src/**/*.ts",
 		"src/**/*.svelte",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -341,15 +341,6 @@ importers:
      '@chromatic-com/storybook':
        specifier: ^1.6.1
        version: 1.6.1(react@18.3.1)
-      '@cobalt-ui/cli':
-        specifier: ^1.8.0
-        version: 1.11.3
-      '@cobalt-ui/plugin-css':
-        specifier: ^1.7.3
-        version: 1.7.5(@cobalt-ui/cli@1.11.3)
-      '@cobalt-ui/plugin-js':
-        specifier: ^1.4.3
-        version: 1.4.4(@cobalt-ui/cli@1.11.3)
      '@csstools/postcss-bundler':
        specifier: ^1.0.15
        version: 1.0.15(postcss@8.4.39)
@ -392,6 +383,12 @@ importers:
      '@sveltejs/vite-plugin-svelte':
        specifier: catalog:svelte
        version: 3.1.1(svelte@5.0.0-next.196)(vite@5.2.13(@types/node@20.14.13))
+      '@terrazzo/cli':
+        specifier: ^0.0.11
+        version: 0.0.11
+      '@terrazzo/plugin-css':
+        specifier: ^0.0.9
+        version: 0.0.9(@terrazzo/cli@0.0.11)
      autoprefixer:
        specifier: ^10.4.19
        version: 10.4.19(postcss@8.4.39)
@ -1073,27 +1070,6 @@ packages:
    resolution: {integrity: sha512-x1x1NB3j4xpfeSWKr96emc+7ZvfsvH+/WVb3XCjkB24PPbT8VZXb3mJSAQMrSzuQ8+eQE9kDogYHH9Fj3tb/Cw==}
    engines: {node: '>=16.0.0', yarn: '>=1.22.18'}

-  '@cobalt-ui/cli@1.11.3':
-    resolution: {integrity: sha512-wQBd9Bp9xJQ7R2TY1YT7t18coslVQJ/eMtNwwnm/FGSbHlBU+Q1hnE5+HEsh+LED/MkL5e1J7ZrdT+gGw7tcUA==}
-    engines: {node: '>=18.0.0'}
-    hasBin: true
-
-  '@cobalt-ui/core@1.11.3':
-    resolution: {integrity: sha512-zK7gSAtErZvFpFWP5am86BKqheE4bFt6vWQ2KpUQI1r6BowKYT5gsJXWsqT2UAd9wgRmBk+3mLSajokJcpoEDQ==}
-
-  '@cobalt-ui/plugin-css@1.7.5':
-    resolution: {integrity: sha512-U9t+mjTyx7hjJO5FlaBmIIBRkT0XfrAdB7MdpXtX94DsqcLwKLwccxB0tZd8aXSsxYc0yjAq4t+xa3ZJTNnKDg==}
-    peerDependencies:
-      '@cobalt-ui/cli': ^1.11.0
-
-  '@cobalt-ui/plugin-js@1.4.4':
-    resolution: {integrity: sha512-kL9h2J9o9jOkH9qUwwcFvZWKZtKAi7JGWGct/a9Xd2BZ+IQdPMTQjUvmtA0Sm/3m0ctLkW2CSwcMhzHqiBCgrQ==}
-    peerDependencies:
-      '@cobalt-ui/cli': ^1.11.0
-
-  '@cobalt-ui/utils@1.2.6':
-    resolution: {integrity: sha512-dlSU76WAUTUDt1nA1qAFb9tDSNMsPvBcPeL/oRFYDVK91auxB8SlncsAasOSILfRe4waSvYJAy5wWYanrzf25A==}
-
  '@codemirror/autocomplete@6.16.2':
    resolution: {integrity: sha512-MjfDrHy0gHKlPWsvSsikhO1+BOh+eBHNgfH1OXs1+DAf30IonQldgMM3kxLDTG9ktE7kDLaA1j/l7KMPA4KNfw==}
    peerDependencies:
@ -1389,6 +1365,10 @@ packages:
    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
    engines: {node: '>=12.22'}

+  '@humanwhocodes/momoa@3.2.0':
+    resolution: {integrity: sha512-xvLEGSmd8qxcqlKFnTxdnmqQFsYGC4GhpuhHgdFoZBV9zxvmSlTuasj2D3vei3IsBGmjP/ITwPFejNAG/w+jsw==}
+    engines: {node: '>=18'}
+
  '@humanwhocodes/object-schema@1.2.1':
    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
    deprecated: Use @eslint/object-schema instead
@ -2282,6 +2262,24 @@ packages:
    engines: {node: '>= 10'}
    hasBin: true

+  '@terrazzo/cli@0.0.11':
+    resolution: {integrity: sha512-VJTzZ+uw5bzFcvX73g9kvsEtMebRAP/J1oUB7uB8KZYkHtbjKt153jL7YZl5N6B5pHRFLFRE3RU6XPslSvG29g==}
+    hasBin: true
+
+  '@terrazzo/parser@0.0.11':
+    resolution: {integrity: sha512-TLoSpjAEla8uJbjPTb7d/+2xI4JQ+tsVhC0voKrI2SX2LUnz7Yt8jwvs2B7vDYevzXQzuJM8peOGD39uibwF4g==}
+
+  '@terrazzo/plugin-css@0.0.9':
+    resolution: {integrity: sha512-2veAZrexuyivYjv2YcDRG9ArIjrYRiadaAejee9THzt+ocxv3YSijLxB0IyQGW2uCPBwR3NLARkI00zcMqakKA==}
+    peerDependencies:
+      '@terrazzo/cli': '*'
+
+  '@terrazzo/token-tools@0.0.4':
+    resolution: {integrity: sha512-9jViw85Ppz6vjOHf9eY7mYo3C3dDic1Eya+ZkuPokqjsgrE3vQD0+UdDgILEfpoBf3rBMv9bp1uTGtjxXKuz3w==}
+
+  '@terrazzo/token-tools@0.0.5':
+    resolution: {integrity: sha512-bKYXMTVzKD3ua8MVAgBvN4zYFOqDCbRS7KeRbkiOZ1dsErfQ2RhPuSGGZ3AlsFRdAA7aU6zPXUaK/affDtlD5Q==}
+
  '@testing-library/dom@10.1.0':
    resolution: {integrity: sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==}
    engines: {node: '>=18'}
@ -2316,10 +2314,6 @@ packages:
  '@tootallnate/quickjs-emscripten@0.23.0':
    resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}

-  '@trysound/sax@0.2.0':
-    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
-    engines: {node: '>=10.13.0'}
-
  '@tsconfig/node10@1.0.11':
    resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}

@ -2338,6 +2332,9 @@ packages:
  '@types/aria-query@5.0.4':
    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}

+  '@types/babel__code-frame@7.0.6':
+    resolution: {integrity: sha512-Anitqkl3+KrzcW2k77lRlg/GfLZLWXBuNgbEcIOU6M92yw42vsd3xV/Z/yAHEj8m+KUjL6bWOVOFqX8PFPJ4LA==}
+
  '@types/body-parser@1.19.5':
    resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}

@ -2458,9 +2455,6 @@ packages:
  '@types/mime@1.3.5':
    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}

-  '@types/mime@3.0.4':
-    resolution: {integrity: sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==}
-
  '@types/mocha@10.0.7':
    resolution: {integrity: sha512-GN8yJ1mNTcFcah/wKEFIJckJx9iJLoMSzWcfRRuxz/Jk+U6KQNnml+etbtxFK8lPjzOw3zp4Ha/kjSst9fsHYw==}

@ -2959,9 +2953,6 @@ packages:
    resolution: {integrity: sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==}
    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}

-  boolbase@1.0.0:
-    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
-
  brace-expansion@1.1.11:
    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}

@ -3157,10 +3148,6 @@ packages:
    resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
    engines: {node: '>= 6'}

-  commander@7.2.0:
-    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
-    engines: {node: '>= 10'}
-
  commander@9.5.0:
    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
    engines: {node: ^12.20.0 || >=14}
@ -3242,27 +3229,12 @@ packages:
    resolution: {integrity: sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==}
    engines: {node: '>=12'}

-  css-select@5.1.0:
-    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
-
  css-shorthand-properties@1.1.1:
    resolution: {integrity: sha512-Md+Juc7M3uOdbAFwOYlTrccIZ7oCFuzrhKYQjdeUEW/sE1hv17Jp/Bws+ReOPpGVBTYCBoYo+G17V5Qo8QQ75A==}

-  css-tree@2.2.1:
-    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
-
-  css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
  css-value@0.0.1:
    resolution: {integrity: sha512-FUV3xaJ63buRLgHrLQVlVgQnQdR4yqdLGaDu7g8CQcWjInDfM9plBTPI9FRfpahju1UBSaMckeb2/46ApS/V1Q==}

-  css-what@6.1.0:
-    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
-    engines: {node: '>= 6'}
-
  css.escape@1.5.1:
    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}

@ -3271,10 +3243,6 @@ packages:
    engines: {node: '>=4'}
    hasBin: true

-  csso@5.0.5:
-    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
-
  csstype@3.1.3:
    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}

@ -3385,10 +3353,6 @@ packages:
    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
    engines: {node: '>= 0.4'}

-  define-properties@1.2.0:
-    resolution: {integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==}
-    engines: {node: '>= 0.4'}
-
  define-properties@1.2.1:
    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
    engines: {node: '>= 0.4'}
@ -3472,9 +3436,6 @@ packages:
  dom-serializer@1.4.1:
    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}

-  dom-serializer@2.0.0:
-    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
-
  domelementtype@2.3.0:
    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}

@ -3486,16 +3447,9 @@ packages:
    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
    engines: {node: '>= 4'}

-  domhandler@5.0.3:
-    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
-    engines: {node: '>= 4'}
-
  domutils@2.8.0:
    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}

-  domutils@3.1.0:
-    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
-
  dotenv@16.4.5:
    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
    engines: {node: '>=12'}
@ -3552,10 +3506,6 @@ packages:
  entities@2.2.0:
    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}

-  entities@4.5.0:
-    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
-    engines: {node: '>=0.12'}
-
  envinfo@7.13.0:
    resolution: {integrity: sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==}
    engines: {node: '>=4'}
@ -4186,9 +4136,6 @@ packages:
    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
    engines: {node: '>=8'}

-  has-property-descriptors@1.0.0:
-    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
-
  has-property-descriptors@1.0.2:
    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}

@ -4324,10 +4271,6 @@ packages:
    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
    engines: {node: '>=12'}

-  index-to-position@0.1.2:
-    resolution: {integrity: sha512-MWDKS3AS1bGCHLBA2VLImJz42f7bJh8wQsTGCzI3j519/CASStoDONUBVz2I/VID0MpiX3SGSnbOD2xUalbE5g==}
-    engines: {node: '>=18'}
-
  inflight@1.0.6:
    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@ -4509,6 +4452,10 @@ packages:
    resolution: {integrity: sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==}
    engines: {node: '>= 0.4'}

+  is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
+
  isarray@1.0.0:
    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}

@ -4813,12 +4760,6 @@ packages:
    engines: {node: '>= 18'}
    hasBin: true

-  mdn-data@2.0.28:
-    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
-
-  mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-
  media-typer@0.3.0:
    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
    engines: {node: '>= 0.6'}
@ -4830,6 +4771,10 @@ packages:
    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
    engines: {node: '>=16.10'}

+  merge-anything@5.1.7:
+    resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
+    engines: {node: '>=12.13'}
+
  merge-descriptors@1.0.1:
    resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}

@ -4861,11 +4806,6 @@ packages:
    engines: {node: '>=4'}
    hasBin: true

-  mime@3.0.0:
-    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
-    engines: {node: '>=10.0.0'}
-    hasBin: true
-
  mimic-fn@2.1.0:
    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
    engines: {node: '>=6'}
@ -5058,9 +4998,6 @@ packages:
    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}

-  nth-check@2.1.1:
-    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
-
  nypm@0.3.8:
    resolution: {integrity: sha512-IGWlC6So2xv6V4cIDmoV0SwwWx7zLG086gyqkyumteH2fIgCAM4nDVFB2iDRszDvmdSVW9xb1N+2KjQ6C7d4og==}
    engines: {node: ^14.16.0 || >=16.10.0}
@ -5209,10 +5146,6 @@ packages:
    resolution: {integrity: sha512-SgOTCX/EZXtZxBE5eJ97P4yGM5n37BwRU+YMsH4vNzFqJV/oWFXXCmwFlgWUM4PrakybVOueJJ6pwHqSVhTFDw==}
    engines: {node: '>=16'}

-  parse-json@8.1.0:
-    resolution: {integrity: sha512-rum1bPifK5SSar35Z6EKZuYPJx85pkNaFrxBK3mwdfSJ1/WKbYrjoW/zTPSjRRamfmVX1ACBIdFAO0VRErW/EA==}
-    engines: {node: '>=18'}
-
  parse-ms@2.1.0:
    resolution: {integrity: sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==}
    engines: {node: '>=6'}
@ -6127,11 +6060,6 @@ packages:
    resolution: {integrity: sha512-sWJRa4qOfRdSORSVw9GhfDEwsbsYsegnDzBevUCF6k/Eis/QqCu9lJ6I0+d/E2wOWCjOhlcJ3+jl/Iur+5mmCw==}
    engines: {node: '>=10.0.0'}

-  svgo@3.3.2:
-    resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
  tapable@2.2.1:
    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
    engines: {node: '>=6'}
@ -6629,6 +6557,9 @@ packages:
    engines: {node: '>=8'}
    hasBin: true

+  wildcard-match@5.1.3:
+    resolution: {integrity: sha512-a95hPUk+BNzSGLntNXYxsjz2Hooi5oL7xOfJR6CKwSsSALh7vUNuTlzsrZowtYy38JNduYFRVhFv19ocqNOZlg==}
+
  workerpool@6.5.1:
    resolution: {integrity: sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==}

@ -7597,46 +7528,6 @@ snapshots:
      - '@chromatic-com/playwright'
      - react

-  '@cobalt-ui/cli@1.11.3':
-    dependencies:
-      '@cobalt-ui/core': 1.11.3
-      '@cobalt-ui/utils': 1.2.6
-      chokidar: 3.6.0
-      culori: 4.0.1
-      dotenv: 16.4.5
-      parse-json: 8.1.0
-      svgo: 3.3.2
-      yaml: 2.5.0
-      yargs-parser: 21.1.1
-
-  '@cobalt-ui/core@1.11.3':
-    dependencies:
-      '@cobalt-ui/utils': 1.2.6
-      '@types/culori': 2.1.1
-      '@types/deep-equal': 1.0.4
-      culori: 4.0.1
-      deep-equal: 2.2.3
-      parse-json: 8.1.0
-      scule: 1.3.0
-      yaml: 2.5.0
-
-  '@cobalt-ui/plugin-css@1.7.5(@cobalt-ui/cli@1.11.3)':
-    dependencies:
-      '@cobalt-ui/cli': 1.11.3
-      '@cobalt-ui/utils': 1.2.6
-      '@types/culori': 2.1.1
-      '@types/mime': 3.0.4
-      culori: 4.0.1
-      mime: 3.0.0
-      svgo: 3.3.2
-
-  '@cobalt-ui/plugin-js@1.4.4(@cobalt-ui/cli@1.11.3)':
-    dependencies:
-      '@cobalt-ui/cli': 1.11.3
-      '@cobalt-ui/utils': 1.2.6
-
-  '@cobalt-ui/utils@1.2.6': {}
-
  '@codemirror/autocomplete@6.16.2(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)':
    dependencies:
      '@codemirror/language': 6.10.2
@ -7951,6 +7842,8 @@ snapshots:

  '@humanwhocodes/module-importer@1.0.1': {}

+  '@humanwhocodes/momoa@3.2.0': {}
+
  '@humanwhocodes/object-schema@1.2.1': {}

  '@humanwhocodes/retry@0.3.0': {}
@ -9194,6 +9087,53 @@ snapshots:
      '@tauri-apps/cli-win32-ia32-msvc': 1.6.0
      '@tauri-apps/cli-win32-x64-msvc': 1.6.0

+  '@terrazzo/cli@0.0.11':
+    dependencies:
+      '@terrazzo/parser': 0.0.11
+      '@terrazzo/token-tools': 0.0.4
+      chokidar: 3.6.0
+      dotenv: 16.4.5
+      merge-anything: 5.1.7
+      picocolors: 1.0.1
+      yargs-parser: 21.1.1
+
+  '@terrazzo/parser@0.0.11':
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@humanwhocodes/momoa': 3.2.0
+      '@terrazzo/token-tools': 0.0.4
+      '@types/babel__code-frame': 7.0.6
+      '@types/culori': 2.1.1
+      '@types/deep-equal': 1.0.4
+      culori: 4.0.1
+      deep-equal: 2.2.3
+      is-what: 4.1.16
+      merge-anything: 5.1.7
+      picocolors: 1.0.1
+      wildcard-match: 5.1.3
+      yaml: 2.5.0
+
+  '@terrazzo/plugin-css@0.0.9(@terrazzo/cli@0.0.11)':
+    dependencies:
+      '@terrazzo/cli': 0.0.11
+      '@terrazzo/parser': 0.0.11
+      '@terrazzo/token-tools': 0.0.5
+      scule: 1.3.0
+
+  '@terrazzo/token-tools@0.0.4':
+    dependencies:
+      '@humanwhocodes/momoa': 3.2.0
+      culori: 4.0.1
+      scule: 1.3.0
+      wildcard-match: 5.1.3
+
+  '@terrazzo/token-tools@0.0.5':
+    dependencies:
+      '@humanwhocodes/momoa': 3.2.0
+      culori: 4.0.1
+      scule: 1.3.0
+      wildcard-match: 5.1.3
+
  '@testing-library/dom@10.1.0':
    dependencies:
      '@babel/code-frame': 7.24.7
@ -9224,8 +9164,6 @@ snapshots:

  '@tootallnate/quickjs-emscripten@0.23.0': {}

-  '@trysound/sax@0.2.0': {}
-
  '@tsconfig/node10@1.0.11': {}

  '@tsconfig/node12@1.0.11': {}
@ -9240,6 +9178,8 @@ snapshots:

  '@types/aria-query@5.0.4': {}

+  '@types/babel__code-frame@7.0.6': {}
+
  '@types/body-parser@1.19.5':
    dependencies:
      '@types/connect': 3.4.38
@ -9370,8 +9310,6 @@ snapshots:

  '@types/mime@1.3.5': {}

-  '@types/mime@3.0.4': {}
-
  '@types/mocha@10.0.7': {}

  '@types/mysql@2.15.22':
@ -10086,8 +10024,6 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  boolbase@1.0.0: {}
-
  brace-expansion@1.1.11:
    dependencies:
      balanced-match: 1.0.2
@ -10287,8 +10223,6 @@ snapshots:

  commander@6.2.1: {}

-  commander@7.2.0: {}
-
  commander@9.5.0: {}

  commondir@1.0.1: {}
@ -10372,38 +10306,14 @@ snapshots:
    dependencies:
      type-fest: 1.4.0

-  css-select@5.1.0:
-    dependencies:
-      boolbase: 1.0.0
-      css-what: 6.1.0
-      domhandler: 5.0.3
-      domutils: 3.1.0
-      nth-check: 2.1.1
-
  css-shorthand-properties@1.1.1: {}

-  css-tree@2.2.1:
-    dependencies:
-      mdn-data: 2.0.28
-      source-map-js: 1.2.0
-
-  css-tree@2.3.1:
-    dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.2.0
-
  css-value@0.0.1: {}

-  css-what@6.1.0: {}
-
  css.escape@1.5.1: {}

  cssesc@3.0.0: {}

-  csso@5.0.5:
-    dependencies:
-      css-tree: 2.2.1
-
  csstype@3.1.3: {}

  culori@4.0.1: {}
@ -10505,11 +10415,6 @@ snapshots:
      es-errors: 1.3.0
      gopd: 1.0.1

-  define-properties@1.2.0:
-    dependencies:
-      has-property-descriptors: 1.0.0
-      object-keys: 1.1.1
-
  define-properties@1.2.1:
    dependencies:
      define-data-property: 1.1.4
@ -10574,12 +10479,6 @@ snapshots:
      domhandler: 4.3.1
      entities: 2.2.0

-  dom-serializer@2.0.0:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      entities: 4.5.0
-
  domelementtype@2.3.0: {}

  domhandler@3.3.0:
@ -10590,22 +10489,12 @@ snapshots:
    dependencies:
      domelementtype: 2.3.0

-  domhandler@5.0.3:
-    dependencies:
-      domelementtype: 2.3.0
-
  domutils@2.8.0:
    dependencies:
      dom-serializer: 1.4.1
      domelementtype: 2.3.0
      domhandler: 4.3.1

-  domutils@3.1.0:
-    dependencies:
-      dom-serializer: 2.0.0
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-
  dotenv@16.4.5: {}

  eastasianwidth@0.2.0: {}
@ -10662,8 +10551,6 @@ snapshots:

  entities@2.2.0: {}

-  entities@4.5.0: {}
-
  envinfo@7.13.0: {}

  error-ex@1.3.2:
@ -11609,10 +11496,6 @@ snapshots:

  has-flag@4.0.0: {}

-  has-property-descriptors@1.0.0:
-    dependencies:
-      get-intrinsic: 1.2.4
-
  has-property-descriptors@1.0.2:
    dependencies:
      es-define-property: 1.0.0
@ -11759,8 +11642,6 @@ snapshots:

  indent-string@5.0.0: {}

-  index-to-position@0.1.2: {}
-
  inflight@1.0.6:
    dependencies:
      once: 1.4.0
@ -11928,6 +11809,8 @@ snapshots:
      call-bind: 1.0.7
      get-intrinsic: 1.2.4

+  is-what@4.1.16: {}
+
  isarray@1.0.0: {}

  isarray@2.0.5: {}
@ -12222,10 +12105,6 @@ snapshots:

  marked@10.0.0: {}

-  mdn-data@2.0.28: {}
-
-  mdn-data@2.0.30: {}
-
  media-typer@0.3.0: {}

  memoizerific@1.11.3:
@ -12234,6 +12113,10 @@ snapshots:

  meow@12.1.1: {}

+  merge-anything@5.1.7:
+    dependencies:
+      is-what: 4.1.16
+
  merge-descriptors@1.0.1: {}

  merge-stream@2.0.0: {}
@ -12255,8 +12138,6 @@ snapshots:

  mime@1.6.0: {}

-  mime@3.0.0: {}
-
  mimic-fn@2.1.0: {}

  mimic-fn@4.0.0: {}
@ -12421,10 +12302,6 @@ snapshots:
    dependencies:
      path-key: 4.0.0

-  nth-check@2.1.1:
-    dependencies:
-      boolbase: 1.0.0
-
  nypm@0.3.8:
    dependencies:
      citty: 0.1.6
@ -12438,7 +12315,7 @@ snapshots:
  object-is@1.1.5:
    dependencies:
      call-bind: 1.0.7
-      define-properties: 1.2.0
+      define-properties: 1.2.1

  object-keys@1.1.1: {}

@ -12613,12 +12490,6 @@ snapshots:
      lines-and-columns: 2.0.4
      type-fest: 3.13.1

-  parse-json@8.1.0:
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      index-to-position: 0.1.2
-      type-fest: 4.23.0
-
  parse-ms@2.1.0: {}

  parse-path@7.0.0:
@ -13633,16 +13504,6 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  svgo@3.3.2:
-    dependencies:
-      '@trysound/sax': 0.2.0
-      commander: 7.2.0
-      css-select: 5.1.0
-      css-tree: 2.3.1
-      css-what: 6.1.0
-      csso: 5.0.5
-      picocolors: 1.0.1
-
  tapable@2.2.1: {}

  tar-fs@3.0.4:
@ -14193,6 +14054,8 @@ snapshots:
      siginfo: 2.0.0
      stackback: 0.0.2

+  wildcard-match@5.1.3: {}
+
  workerpool@6.5.1: {}

  wrap-ansi@6.2.0: