@placeholderco/placeholder-ui 2.6.7 → 2.7.1

package/README.md

@@ -37,6 +37,7 @@ Or skip `AppShell` and import the token stylesheet yourself:
 ```ts
 import '@placeholderco/placeholder-ui/app.css';
 ```
+
 ## Branding
 
 Everything colour- and font-related resolves to `--ui-*` custom properties, so
@@ -53,16 +54,46 @@ applyTheme({
 	colors: {
 		primary: '#1e3a5f', // dark brand colour: solid buttons, headings
 		accent: '#93c5fd', // light brand colour: highlights, dark-mode accent
-		tertiary: '#a5f3fc' // supporting colour: links use its dark shade
+		tertiary: '#a5f3fc' // supporting color: links use its readable text color
 	},
 	fontFamily: "'Inter', system-ui, sans-serif",
 	logo // raw SVG, rendered by <Logo />
 });
 ```
 
-Darker and lighter shades are derived automatically. Set `primaryDark`,
-`accentDark`, `tertiaryDark`, `tertiaryLight`, `link`, `linkHover` and the
-`*Contrast` text colours explicitly when you want full control.
+Each brand color has independent `*HoverColor` and `*PressedColor` settings:
+`primaryHoverColor`, `accentHoverColor`, `tertiaryHoverColor`,
+`primaryPressedColor`, `accentPressedColor` and `tertiaryPressedColor`.
+They are shared by solid, outline and subtle controls; subtle variants use
+translucent hover fills where appropriate.
+
+All three colors have the same two text roles:
+
+| Setting | Used for |
+| --- | --- |
+| `primaryTextColor`, `accentTextColor`, `tertiaryTextColor` | Colored text and outline borders on page/paper surfaces. |
+| `primaryContrastColor`, `accentContrastColor`, `tertiaryContrastColor` | Text and icons on the matching solid fill, including hover and pressed fills. |
+
+For example, `primaryTextColor` styles a primary outline button at rest, while
+`primaryContrastColor` styles the label on a filled primary button.
+`focusColor`, `link` and `linkHover` control keyboard focus rings and links
+independently. Changing a hover color does not change these other roles.
+
+All role overrides are optional. By default, primary hover uses the accent text
+color, accent hover uses tertiary, and tertiary hover uses accent. Primary pressed
+is darkened from its base color. Primary text defaults to primary; accent and
+tertiary text colors are darkened from their base colors. Accent and tertiary
+pressed colors are lightened from tertiary (or accent when tertiary is omitted).
+Primary contrast defaults to white; accent and tertiary contrast default to primary.
+
+For existing configs, replace `primaryDark` with `primaryPressedColor`,
+`accentDark` with `accentTextColor`, and `tertiaryDark` with `tertiaryTextColor`.
+Replace `tertiaryLight` with both `accentPressedColor` and `tertiaryPressedColor`
+to preserve both sets of pressed states. Set the hover colors separately when
+customizing interactions. Rename `primaryContrast` and `accentContrast` to
+`primaryContrastColor` and `accentContrastColor`. Their CSS tokens also gain the
+`-color` suffix. CSS overrides use the corresponding kebab-case names,
+such as `--ui-primary-hover-color` and `--ui-tertiary-text-color`.
 
 ### Light and dark values
 
@@ -104,13 +135,23 @@ Override the tokens in any stylesheet loaded after the library:
 	--ui-primary-rgb: 30 58 95;
 	--ui-primary-rgbc: 30, 58, 95;
 	--ui-primary: rgb(var(--ui-primary-rgb));
-	--ui-primary-dark: #12253d;
+	--ui-primary-hover-color: #1d4ed8;
+	--ui-primary-pressed-color: #12253d;
+	--ui-primary-text-color: #1e3a5f;
+	--ui-primary-contrast-color: #ffffff;
 	--ui-accent-rgb: 147 197 253;
 	--ui-accent-rgbc: 147, 197, 253;
 	--ui-accent: rgb(var(--ui-accent-rgb));
-	--ui-accent-dark: #1d4ed8;
+	--ui-accent-hover-color: #a5f3fc;
+	--ui-accent-pressed-color: #cffafe;
+	--ui-accent-text-color: #1d4ed8;
+	--ui-accent-contrast-color: #1e3a5f;
 	--ui-tertiary: #a5f3fc;
-	--ui-tertiary-dark: #0e7490;
+	--ui-tertiary-hover-color: #93c5fd;
+	--ui-tertiary-pressed-color: #cffafe;
+	--ui-tertiary-text-color: #0e7490;
+	--ui-tertiary-contrast-color: #1e3a5f;
+	--ui-focus-color: #1d4ed8;
 	--ui-font-family: 'Inter', system-ui, sans-serif;
 }
 ```
@@ -118,15 +159,15 @@ Override the tokens in any stylesheet loaded after the library:
 The full token list, with comments on each role, is at the top of
 [src/lib/app.css](src/lib/app.css).
 
-### Colour roles
+### Color roles
 
 Keep these relationships when choosing colours, because components assume them:
 
 | Token           | Role                                                         |
 | --------------- | ------------------------------------------------------------ |
-| `--ui-primary`  | Dark. Solid buttons, active states, headings. White text.    |
+| `--ui-primary`  | Dark by default. Solid buttons and active backgrounds.    |
 | `--ui-accent`   | Light. Hovers, highlights, the accent in dark mode.          |
-| `--ui-tertiary` | Light. Supporting fills; its `-dark` shade is used for links |
+| `--ui-tertiary` | Light. Supporting fills; its text color is used for links |
 
 ### Fonts
 
@@ -147,6 +188,13 @@ variants named after the tokens: `primary`, `accent`, `tertiary`, plus
 `-outline` and `-subtle` forms, and the neutral `secondary`, `white`, `danger`
 and `auto-*` variants.
 
+The additional coloured buttons use `tertiary`, `tertiary-outline` and
+`tertiary-subtle`, configured through `colors.tertiary` and the existing
+`--ui-tertiary*` tokens. The `secondary`, `secondary-subtle` and
+`secondary-selected` variants retain their original neutral styles; existing
+apps do not need to rename them. Existing tertiary colours and button styles
+are preserved, with outline support added to the family.
+
 ## Theme (light / dark)
 
 ```ts

package/dist/app.css

@@ -6,14 +6,18 @@
  * `applyTheme()` / `themeToCss()` from the package to generate them from a
  * `ThemeConfig` object.
  *
- * Colour roles (keep these relationships when re-branding):
- *   --ui-primary   dark brand colour. Used for solid buttons, headings, active
- *                  states. Text on top of it uses --ui-primary-contrast.
- *   --ui-accent    light brand colour. Used for highlights, hover states and as
+ * Color roles (keep these relationships when re-branding):
+ *   --ui-primary   dark brand color. Used for solid buttons and active
+ *                  states. Text on top of it uses --ui-primary-contrast-color.
+ *   --ui-accent    light brand color. Used for highlights, hover states and as
  *                  the adaptive accent in dark mode. Text on top of it uses
- *                  --ui-accent-contrast.
- *   --ui-tertiary  light supporting colour. Its *-dark shade is used for links
- *                  and subtle text.
+ *                  --ui-accent-contrast-color.
+ *   --ui-tertiary  light supporting color. Its text color is used for links
+ *                  and subtle text. Hover and pressed colors are separate
+ *                  from readable text and keyboard focus colors.
+ *   Each color has the same roles: base fill, hover fill, pressed fill,
+ *   text on page/paper surfaces (-text-color), and foreground on its filled
+ *   controls (-contrast-color). Text and contrast colors are independent.
  */
 
 :root {
@@ -22,29 +26,37 @@
 		ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif, 'Apple Color Emoji',
 		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
-	/* ---- Brand colours (neutral defaults) ---- */
+	/* ---- Brand colors (neutral defaults) ---- */
 	--ui-primary-rgb: 30 58 95;
 	--ui-primary-rgbc: 30, 58, 95;
 	--ui-primary: rgb(var(--ui-primary-rgb));
-	--ui-primary-dark: #12253d;
-	--ui-primary-contrast: #ffffff;
+	--ui-primary-hover-color: var(--ui-accent-text-color);
+	--ui-primary-pressed-color: #12253d;
+	--ui-primary-text-color: var(--ui-primary);
+	--ui-primary-contrast-color: #ffffff;
 
 	--ui-accent-rgb: 147 197 253;
 	--ui-accent-rgbc: 147, 197, 253;
 	--ui-accent: rgb(var(--ui-accent-rgb));
-	--ui-accent-dark: #1d4ed8;
-	--ui-accent-contrast: var(--ui-primary);
+	--ui-accent-hover-color: var(--ui-tertiary);
+	--ui-accent-pressed-color: #cffafe;
+	--ui-accent-text-color: #1d4ed8;
+	--ui-accent-contrast-color: var(--ui-primary);
 
 	--ui-tertiary-rgb: 165 243 252;
 	--ui-tertiary-rgbc: 165, 243, 252;
 	--ui-tertiary: rgb(var(--ui-tertiary-rgb));
-	--ui-tertiary-dark-rgbc: 14, 116, 144;
-	--ui-tertiary-dark: rgb(var(--ui-tertiary-dark-rgbc));
-	--ui-tertiary-light: #cffafe;
+	--ui-tertiary-hover-color: var(--ui-accent);
+	--ui-tertiary-pressed-color: #cffafe;
+	--ui-tertiary-text-color: #0e7490;
+	--ui-tertiary-contrast-color: var(--ui-primary);
 
-	/* ---- Link colours ---- */
-	--ui-link-color: var(--ui-tertiary-dark);
-	--ui-link-hover-color: var(--ui-accent-dark);
+	/* ---- Keyboard focus ---- */
+	--ui-focus-color: var(--ui-accent-text-color);
+
+	/* ---- Link colors ---- */
+	--ui-link-color: var(--ui-tertiary-text-color);
+	--ui-link-hover-color: var(--ui-accent-text-color);
 
 	/* ---- Surfaces and text (light mode) ---- */
 	--off-white: rgb(221, 221, 221);
@@ -125,7 +137,7 @@ textarea {
 
 header a {
 	text-decoration: none;
-	color: var(--ui-primary);
+	color: var(--ui-primary-text-color);
 	transition: color 200ms;
 }
 
@@ -178,11 +190,11 @@ a:hover {
    The classes live here rather than in the editor so the saved HTML looks the
    same wherever it is rendered. The look follows the Button component. */
 .editor-button {
-	--editor-button-fg: var(--ui-primary-contrast);
+	--editor-button-fg: var(--ui-primary-contrast-color);
 	--editor-button-bg: var(--ui-primary);
 	--editor-button-border: transparent;
-	--editor-button-hover-fg: var(--ui-primary-contrast);
-	--editor-button-hover-bg: var(--ui-accent-dark);
+	--editor-button-hover-fg: var(--ui-primary-contrast-color);
+	--editor-button-hover-bg: var(--ui-primary-hover-color);
 	--editor-button-hover-border: transparent;
 	display: inline-block;
 	padding: 0.5rem 1rem;
@@ -209,45 +221,67 @@ a:hover {
 }
 
 .editor-button:focus-visible {
-	outline: solid 0.125rem var(--ui-accent-dark);
+	outline: solid 0.125rem var(--ui-focus-color);
 	outline-offset: 2px;
 }
 
 .editor-button-accent {
-	--editor-button-fg: var(--ui-accent-contrast);
+	--editor-button-fg: var(--ui-accent-contrast-color);
 	--editor-button-bg: var(--ui-accent);
-	--editor-button-hover-fg: var(--ui-primary);
-	--editor-button-hover-bg: var(--ui-tertiary);
+	--editor-button-hover-fg: var(--ui-accent-contrast-color);
+	--editor-button-hover-bg: var(--ui-accent-hover-color);
 }
 
 .editor-button-tertiary {
-	--editor-button-fg: var(--ui-primary);
+	--editor-button-fg: var(--ui-tertiary-contrast-color);
 	--editor-button-bg: var(--ui-tertiary);
-	--editor-button-hover-fg: var(--ui-primary);
-	--editor-button-hover-bg: var(--ui-accent);
+	--editor-button-hover-fg: var(--ui-tertiary-contrast-color);
+	--editor-button-hover-bg: var(--ui-tertiary-hover-color);
 }
 
 .editor-button-primary-outline,
+.editor-button-tertiary-outline,
 .editor-button-accent-outline {
 	border: 1px solid var(--editor-button-border);
 	--editor-button-bg: transparent;
-	--editor-button-hover-bg: transparent;
 }
 
 .editor-button-primary-outline {
 	--editor-button-fg: var(--ui-primary);
 	--editor-button-border: var(--ui-primary);
-	--editor-button-hover-fg: var(--ui-accent-dark);
-	--editor-button-hover-border: var(--ui-accent-dark);
+	--editor-button-hover-fg: var(--ui-primary-contrast-color);
+	--editor-button-hover-bg: var(--ui-primary);
+	--editor-button-hover-border: var(--ui-primary);
 }
 
 .editor-button-accent-outline {
 	--editor-button-fg: var(--ui-accent);
 	--editor-button-border: var(--ui-accent);
-	--editor-button-hover-fg: var(--ui-tertiary);
+	--editor-button-hover-fg: var(--ui-accent-contrast-color);
+	--editor-button-hover-bg: var(--ui-accent);
+	--editor-button-hover-border: var(--ui-accent);
+}
+
+.editor-button-tertiary-outline {
+	--editor-button-fg: var(--ui-tertiary);
+	--editor-button-border: var(--ui-tertiary);
+	--editor-button-hover-fg: var(--ui-tertiary-contrast-color);
+	--editor-button-hover-bg: var(--ui-tertiary);
 	--editor-button-hover-border: var(--ui-tertiary);
 }
 
+.editor-button-tertiary-subtle {
+	--editor-button-fg: var(--ui-tertiary);
+	--editor-button-bg: transparent;
+	--editor-button-hover-fg: var(--ui-tertiary-contrast-color);
+	--editor-button-hover-bg: var(--ui-tertiary);
+}
+
+.editor-button-tertiary-outline:focus-visible,
+.editor-button-tertiary-subtle:focus-visible {
+	outline-color: var(--ui-focus-color);
+}
+
 .editor-button-sm {
 	padding: 0.375rem 0.75rem;
 	font-size: 0.8125rem;

package/dist/cards/GitCard.svelte

@@ -83,7 +83,7 @@
 		font-size: 1.25rem;
 		font-style: normal;
 		font-weight: 600;
-		color: var(--ui-primary);
+		color: var(--ui-primary-text-color);
 	}
 
 	.git-jobtitle {

package/dist/display/Avatar.svelte

@@ -121,7 +121,7 @@
 
 			&:hover {
 				background: var(--ui-primary);
-				color: var(--text-color);
+				color: var(--ui-primary-contrast-color);
 			}
 		}
 
@@ -166,7 +166,7 @@
 			.avatar {
 				&:hover {
 					background: var(--ui-accent);
-					color: black;
+					color: var(--ui-accent-contrast-color);
 				}
 			}
 		}

package/dist/display/LinkCollection.svelte

@@ -135,7 +135,7 @@
 		align-items: center;
 		gap: 0.5rem;
 		text-decoration: none;
-		color: var(--ui-tertiary-dark);
+		color: var(--ui-link-color);
 		font-weight: normal;
 
 		&:hover {

package/dist/display/alert/Alert.svelte

@@ -67,7 +67,7 @@
 
 		.alert-title,
 		.icon {
-			color: var(--ui-primary);
+			color: var(--ui-primary-text-color);
 		}
 	}
 

package/dist/display/filetree/FileTreeItem.svelte

@@ -350,7 +350,7 @@
 	.ft-icon {
 		display: inline-flex;
 		flex-shrink: 0;
-		color: var(--ui-primary);
+		color: var(--ui-primary-text-color);
 	}
 
 	:global(.dark) .ft-icon {

package/dist/editors/tiptap/LinkActionMenu.svelte

@@ -202,7 +202,7 @@
 		border: 1px solid var(--border-color);
 		border-radius: 4px;
 		background: var(--paper-body-bg);
-		color: var(--ui-tertiary-dark);
+		color: var(--ui-link-color);
 		cursor: pointer;
 		font: inherit;
 		font-size: 13px;
@@ -263,7 +263,7 @@
 
 	.link-icon-button:hover {
 		background: rgba(var(--ui-primary-rgbc), 0.1);
-		color: var(--ui-primary);
+		color: var(--ui-primary-text-color);
 	}
 
 	:global(.dark) .link-icon-button:hover {
@@ -273,17 +273,22 @@
 
 	.link-icon-button.primary {
 		background: var(--ui-primary);
-		color: white;
+		color: var(--ui-primary-contrast-color);
 	}
 
 	.link-icon-button.primary:hover {
-		background: var(--ui-tertiary-dark);
-		color: white;
+		background: var(--ui-primary-hover-color);
+		color: var(--ui-primary-contrast-color);
 	}
 
 	:global(.dark) .link-icon-button.primary {
 		background: var(--ui-accent);
-		color: var(--ui-primary);
+		color: var(--ui-accent-contrast-color);
+	}
+
+	:global(.dark) .link-icon-button.primary:hover {
+		background: var(--ui-accent-hover-color);
+		color: var(--ui-accent-contrast-color);
 	}
 
 	.link-icon-button.danger:hover {

package/dist/editors/tiptap/TipTap.svelte

@@ -609,7 +609,7 @@
 		border-radius: 3px;
 		font-family: 'Monaco', 'Courier New', monospace;
 		font-size: 0.9em;
-		color: var(--ui-accent-dark);
+		color: var(--ui-accent-text-color);
 	}
 
 	:global(.dark) .editor-content :global(.ProseMirror code) {
@@ -617,7 +617,7 @@
 	}
 
 	.editor-content :global(.ProseMirror a) {
-		color: var(--ui-tertiary-dark);
+		color: var(--ui-link-color);
 		text-decoration: underline;
 		cursor: pointer;
 		pointer-events: auto;
@@ -780,7 +780,7 @@
 	}
 
 	.editor-content :global(.ProseMirror .alert-default .alert-title) {
-		color: var(--ui-primary);
+		color: var(--ui-primary-text-color);
 	}
 
 	/* Danger variant */

package/dist/editors/tiptap/TipTapBubble.svelte

@@ -287,7 +287,7 @@
 
 		if (bubbleMenuElement && editable) {
 			extensions.push(
-				BubbleMenu.configure({
+				BubbleMenu.extend({ name: 'formatBubbleMenu' }).configure({
 					pluginKey: 'formatBubbleMenu',
 					element: bubbleMenuElement,
 					shouldShow: ({ editor, state }) => {
@@ -300,7 +300,7 @@
 
 		if (linkBubbleMenuElement) {
 			extensions.push(
-				BubbleMenu.configure({
+				BubbleMenu.extend({ name: 'linkActionBubbleMenu' }).configure({
 					pluginKey: 'linkActionBubbleMenu',
 					element: linkBubbleMenuElement,
 					shouldShow: ({ editor }) => Boolean(editor.getAttributes('link').href),
@@ -546,7 +546,7 @@
 		border-radius: 3px;
 		font-family: 'Monaco', 'Courier New', monospace;
 		font-size: 0.9em;
-		color: var(--ui-accent-dark);
+		color: var(--ui-accent-text-color);
 	}
 
 	:global(.dark) .editor-content :global(.ProseMirror code) {
@@ -554,7 +554,7 @@
 	}
 
 	.editor-content :global(.ProseMirror a) {
-		color: var(--ui-tertiary-dark);
+		color: var(--ui-link-color);
 		text-decoration: underline;
 		cursor: pointer;
 		pointer-events: auto;
@@ -702,7 +702,7 @@
 	}
 
 	.editor-content :global(.ProseMirror .alert-default .alert-title) {
-		color: var(--ui-primary);
+		color: var(--ui-primary-text-color);
 	}
 
 	.editor-content :global(.ProseMirror .alert-danger) {

package/dist/editors/tiptap/buttonLink.d.ts

@@ -6,7 +6,7 @@
  * (global, built on the `--ui-*` tokens) so the saved HTML looks the same in
  * the editor and wherever the consumer renders it.
  */
-export declare const editorButtonVariants: readonly ["primary", "accent", "tertiary", "primary-outline", "accent-outline"];
+export declare const editorButtonVariants: readonly ["primary", "accent", "tertiary", "primary-outline", "accent-outline", "tertiary-outline", "tertiary-subtle"];
 export type EditorButtonVariant = (typeof editorButtonVariants)[number];
 export declare const editorButtonSizes: readonly ["sm", "md", "lg"];
 export type EditorButtonSize = (typeof editorButtonSizes)[number];

package/dist/editors/tiptap/buttonLink.js

@@ -11,7 +11,9 @@ export const editorButtonVariants = [
     'accent',
     'tertiary',
     'primary-outline',
-    'accent-outline'
+    'accent-outline',
+    'tertiary-outline',
+    'tertiary-subtle'
 ];
 export const editorButtonSizes = ['sm', 'md', 'lg'];
 export const EDITOR_BUTTON_CLASS = 'editor-button';

package/dist/editors/tiptap/toolbar/AlertButton.svelte

@@ -248,7 +248,7 @@
 
 	.btn-primary {
 		background: var(--ui-primary);
-		color: var(--off-white);
+		color: var(--ui-primary-contrast-color);
 	}
 
 	.btn-primary:hover {
@@ -257,6 +257,6 @@
 
 	:global(.dark) .btn-primary {
 		background: var(--ui-accent);
-		color: var(--ui-primary);
+		color: var(--ui-accent-contrast-color);
 	}
 </style>

package/dist/editors/tiptap/toolbar/ButtonLinkButton.svelte

@@ -31,7 +31,9 @@
 		{ value: 'accent', label: 'Accent' },
 		{ value: 'tertiary', label: 'Tertiary' },
 		{ value: 'primary-outline', label: 'Primary outline' },
-		{ value: 'accent-outline', label: 'Accent outline' }
+		{ value: 'accent-outline', label: 'Accent outline' },
+		{ value: 'tertiary-outline', label: 'Tertiary outline' },
+		{ value: 'tertiary-subtle', label: 'Tertiary subtle' }
 	];
 
 	const sizes: { value: EditorButtonSize; label: string }[] = [
@@ -403,7 +405,7 @@
 
 	.btn-primary {
 		background: var(--ui-primary);
-		color: var(--off-white);
+		color: var(--ui-primary-contrast-color);
 	}
 
 	.btn-primary:hover {
@@ -412,7 +414,7 @@
 
 	:global(.dark) .btn-primary {
 		background: var(--ui-accent);
-		color: var(--ui-primary);
+		color: var(--ui-accent-contrast-color);
 	}
 
 	.btn-remove {

package/dist/editors/tiptap/toolbar/ColorButton.svelte

@@ -23,9 +23,9 @@
 	export const defaultBrandColors: ColorSwatch[] = [
 		{ value: 'var(--ui-primary)', label: 'Primary' },
 		{ value: 'var(--ui-accent)', label: 'Accent' },
-		{ value: 'var(--ui-accent-dark)', label: 'Accent Dark' },
+		{ value: 'var(--ui-accent-text-color)', label: 'Accent Text' },
 		{ value: 'var(--ui-tertiary)', label: 'Tertiary' },
-		{ value: 'var(--ui-tertiary-dark)', label: 'Tertiary Dark' }
+		{ value: 'var(--ui-tertiary-text-color)', label: 'Tertiary Text' }
 	];
 
 	let { editor, brandColors = defaultBrandColors }: Props = $props();
@@ -291,7 +291,7 @@
 		padding: 6px 12px;
 		border: none;
 		background: var(--ui-tertiary);
-		color: var(--ui-primary);
+		color: var(--ui-tertiary-contrast-color);
 		border-radius: 4px;
 		cursor: pointer;
 		font-size: 13px;
@@ -301,15 +301,15 @@
 	}
 
 	.color-remove-button:hover {
-		background: var(--ui-tertiary-dark);
+		background: var(--ui-tertiary-hover-color);
 	}
 
 	:global(.dark) .color-remove-button {
 		background: var(--ui-accent);
-		color: var(--ui-primary);
+		color: var(--ui-accent-contrast-color);
 	}
 
 	:global(.dark) .color-remove-button:hover {
-		background: var(--ui-accent-dark);
+		background: var(--ui-accent-hover-color);
 	}
 </style>

package/dist/editors/tiptap/toolbar/LinkButton.svelte

@@ -194,7 +194,7 @@
 	}
 
 	.link-checkbox-label:hover {
-		color: var(--ui-primary);
+		color: var(--ui-primary-text-color);
 	}
 
 	:global(.dark) .link-checkbox-label:hover {
@@ -208,7 +208,7 @@
 		padding: 6px 12px;
 		border: none;
 		background: var(--ui-primary);
-		color: white;
+		color: var(--ui-primary-contrast-color);
 		border-radius: 4px;
 		cursor: pointer;
 		font-size: 16px;
@@ -217,16 +217,16 @@
 	}
 
 	.link-submit-button:hover {
-		background: var(--ui-tertiary-dark);
+		background: var(--ui-primary-hover-color);
 	}
 
 	:global(.dark) .link-submit-button {
 		background: var(--ui-accent);
-		color: var(--ui-primary);
+		color: var(--ui-accent-contrast-color);
 	}
 
 	:global(.dark) .link-submit-button:hover {
-		background: var(--ui-accent-dark);
+		background: var(--ui-accent-hover-color);
 	}
 
 	.link-remove-button {
@@ -236,7 +236,7 @@
 		padding: 6px 12px;
 		border: none;
 		background: var(--ui-tertiary);
-		color: var(--ui-primary);
+		color: var(--ui-tertiary-contrast-color);
 		border-radius: 4px;
 		cursor: pointer;
 		font-size: 16px;
@@ -245,15 +245,15 @@
 	}
 
 	.link-remove-button:hover {
-		background: var(--ui-tertiary-dark);
+		background: var(--ui-tertiary-hover-color);
 	}
 
 	:global(.dark) .link-remove-button {
 		background: var(--ui-accent);
-		color: var(--ui-primary);
+		color: var(--ui-accent-contrast-color);
 	}
 
 	:global(.dark) .link-remove-button:hover {
-		background: var(--ui-accent-dark);
+		background: var(--ui-accent-hover-color);
 	}
 </style>

package/dist/editors/tiptap/toolbar/TableButton.svelte

@@ -248,12 +248,12 @@
 
 	.size-cell.highlighted {
 		background: var(--ui-tertiary);
-		border-color: var(--ui-tertiary-dark);
+		border-color: var(--ui-tertiary-text-color);
 	}
 
 	:global(.dark) .size-cell.highlighted {
 		background: var(--ui-accent);
-		border-color: var(--ui-accent-dark);
+		border-color: var(--ui-accent-text-color);
 	}
 
 	.size-label {