@placeholderco/placeholder-ui 2.1.1 → 2.2.1

package/dist/index.js

@@ -1,77 +1,78 @@
-export { default as Accordion } from "./ui/Accordion.svelte";
-export { default as AccordionItem } from "./ui/AccordionItem.svelte";
-export { default as Button } from "./ui/Button.svelte";
-export { default as ActionIcon } from "./ui/ActionIcon.svelte";
-export { default as Badge } from "./ui/Badge.svelte";
-export { default as Dialog } from "./ui/Dialog.svelte";
-export { default as Drawer } from "./ui/Drawer.svelte";
-export { default as Dropdown } from "./ui/Dropdown.svelte";
-export { default as Dropzone } from "./ui/Dropzone.svelte";
-export { default as Link } from "./ui/Link.svelte";
-export { default as Loader } from "./ui/Loader.svelte";
-export { default as Logo } from "./ui/Logo.svelte";
-export { default as Pagination } from "./ui/Pagination.svelte";
-export { default as Popover } from "./ui/Popover.svelte";
-export { default as ContextMenu } from "./ui/ContextMenu.svelte";
-export { default as ProgressBar } from "./ui/ProgressBar.svelte";
-export { default as Tabs } from "./ui/Tabs.svelte";
-export { default as Table } from "./ui/Table.svelte";
-export { default as ThemeSwitcher } from "./ui/ThemeSwitcher.svelte";
-export { default as Sortable } from "./ui/Sortable.svelte";
-export { default as MultiSortable } from "./ui/MultiSortable.svelte";
-export { default as Toaster } from "./ui/Toaster.svelte";
-export { default as Tooltip } from "./ui/Tooltip.svelte";
-export { default as Alert } from "./display/alert/Alert.svelte";
-export { default as LinkCollection } from "./display/LinkCollection.svelte";
-export { default as Navbar } from "./layout/Navbar.svelte";
-export { default as NavbarItemView } from "./layout/NavbarItemView.svelte";
-export { default as CustomNavbar } from "./layout/CustomNavbar.svelte";
-export { default as AppShell } from "./layout/AppShell.svelte";
-export { default as Sidenav } from "./layout/Sidenav.svelte";
-export { default as Paper } from "./display/Paper.svelte";
-export { default as Avatar } from "./display/Avatar.svelte";
-export { default as Autocomplete } from "./form/Autocomplete.svelte";
-export { default as AutocompleteMulti } from "./form/AutocompleteMulti.svelte";
-export { default as Checkbox } from "./form/Checkbox.svelte";
-export { default as ComboBoxItemBuilder } from "./form/ComboBoxItemBuilder.svelte";
-export { default as StringArrayBuilder } from "./form/StringArrayBuilder.svelte";
-export { default as CronBuilder } from "./form/CronBuilder.svelte";
-export { default as DatePicker } from "./form/DatePicker.svelte";
-export { default as DateRangePicker } from "./form/DateRangePicker.svelte";
-export { default as TimePicker } from "./form/TimePicker.svelte";
-export { default as DateTimePicker } from "./form/DateTimePicker.svelte";
-export { default as FormGroup } from "./form/FormGroup.svelte";
-export { default as Number } from "./form/Number.svelte";
-export { default as Radio } from "./form/Radio.svelte";
-export { default as RadioGroup } from "./form/RadioGroup.svelte";
-export { default as Select } from "./form/Select.svelte";
-export { default as SelectMulti } from "./form/SelectMulti.svelte";
-export { default as SegmentedControl } from "./form/SegmentedControl.svelte";
-export { default as TextArea } from "./form/TextArea.svelte";
-export { default as Textbox } from "./form/Textbox.svelte";
-export { default as Slider } from "./form/Slider.svelte";
-export { default as Switch } from "./form/Switch.svelte";
-export { default as Chips } from "./form/Chips.svelte";
-export { default as ColorPicker } from "./form/ColorPicker.svelte";
-export { parseColor, parseHex, toHex, formatColor, rgbToHsv, hsvToRgb, rgbToHsl, } from "./form/ColorPicker.svelte";
-export { default as TipTap } from "./editors/tiptap/TipTap.svelte";
-export { default as TipTapBubble } from "./editors/tiptap/TipTapBubble.svelte";
-export { CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage, } from "./editors/tiptap/extensions/index.js";
-export { default as CodeMirror } from "./editors/CodeMirror.svelte";
-export { default as GitCard } from "./cards/GitCard.svelte";
-export * from "./icon/index.js";
-export * from "./models/ComboBoxItem.js";
-export * from "./models/NavbarItem.js";
-export * from "./models/NotifyModel.js";
-export * from "./util/ClickOutside.js";
-export * from "./util/CronParser.js";
-export { dayjs } from "./util/dayjs.js";
-export * from "./util/DateFunctions.js";
-export * from "./util/DragDrop.js";
-export * from "./util/Transitions.js";
-export * from "./util/interceptLinkClick.js";
-export * from "./util/NavigateTo.js";
-export * from "./display/filetree/index.js";
-export * from "./theme.svelte.js";
-export * from "./uiTheme.svelte.js";
-export * from "./ui/Toast.svelte.js";
+export { default as Accordion } from './ui/Accordion.svelte';
+export { default as AccordionItem } from './ui/AccordionItem.svelte';
+export { default as Button } from './ui/Button.svelte';
+export { default as ActionIcon } from './ui/ActionIcon.svelte';
+export { default as Badge } from './ui/Badge.svelte';
+export { default as Dialog } from './ui/Dialog.svelte';
+export { default as Drawer } from './ui/Drawer.svelte';
+export { default as Dropdown } from './ui/Dropdown.svelte';
+export { default as Dropzone } from './ui/Dropzone.svelte';
+export { default as Link } from './ui/Link.svelte';
+export { default as Loader } from './ui/Loader.svelte';
+export { default as Logo } from './ui/Logo.svelte';
+export { default as Pagination } from './ui/Pagination.svelte';
+export { default as Popover } from './ui/Popover.svelte';
+export { default as ContextMenu } from './ui/ContextMenu.svelte';
+export { default as ProgressBar } from './ui/ProgressBar.svelte';
+export { default as Tabs } from './ui/Tabs.svelte';
+export { default as Table } from './ui/Table.svelte';
+export { default as ThemeSwitcher } from './ui/ThemeSwitcher.svelte';
+export { default as Sortable } from './ui/Sortable.svelte';
+export { default as MultiSortable } from './ui/MultiSortable.svelte';
+export { default as Toaster } from './ui/Toaster.svelte';
+export { default as Tooltip } from './ui/Tooltip.svelte';
+export { default as Alert } from './display/alert/Alert.svelte';
+export { default as LinkCollection } from './display/LinkCollection.svelte';
+export { default as Navbar } from './layout/Navbar.svelte';
+export { default as NavbarItemView } from './layout/NavbarItemView.svelte';
+export { default as CustomNavbar } from './layout/CustomNavbar.svelte';
+export { default as AppShell } from './layout/AppShell.svelte';
+export { default as Sidenav } from './layout/Sidenav.svelte';
+export { default as Paper } from './display/Paper.svelte';
+export { default as Avatar } from './display/Avatar.svelte';
+export { default as Autocomplete } from './form/Autocomplete.svelte';
+export { default as AutocompleteMulti } from './form/AutocompleteMulti.svelte';
+export { default as Checkbox } from './form/Checkbox.svelte';
+export { default as ComboBoxItemBuilder } from './form/ComboBoxItemBuilder.svelte';
+export { default as StringArrayBuilder } from './form/StringArrayBuilder.svelte';
+export { default as CronBuilder } from './form/CronBuilder.svelte';
+export { default as DatePicker } from './form/DatePicker.svelte';
+export { default as DateRangePicker } from './form/DateRangePicker.svelte';
+export { default as TimePicker } from './form/TimePicker.svelte';
+export { default as DateTimePicker } from './form/DateTimePicker.svelte';
+export { default as FormGroup } from './form/FormGroup.svelte';
+export { default as Number } from './form/Number.svelte';
+export { default as Radio } from './form/Radio.svelte';
+export { default as RadioGroup } from './form/RadioGroup.svelte';
+export { default as Select } from './form/Select.svelte';
+export { default as SelectMulti } from './form/SelectMulti.svelte';
+export { default as SegmentedControl } from './form/SegmentedControl.svelte';
+export { default as TextArea } from './form/TextArea.svelte';
+export { default as Textbox } from './form/Textbox.svelte';
+export { default as Slider } from './form/Slider.svelte';
+export { default as Switch } from './form/Switch.svelte';
+export { default as Chips } from './form/Chips.svelte';
+export { default as ColorPicker } from './form/ColorPicker.svelte';
+export { parseColor, parseHex, toHex, formatColor, rgbToHsv, hsvToRgb, rgbToHsl } from './form/ColorPicker.svelte';
+export { default as TipTap } from './editors/tiptap/TipTap.svelte';
+export { default as TipTapBubble } from './editors/tiptap/TipTapBubble.svelte';
+export { CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage } from './editors/tiptap/extensions/index.js';
+export { default as CodeMirror } from './editors/CodeMirror.svelte';
+export { default as GitCard } from './cards/GitCard.svelte';
+export * from './icon/index.js';
+export * from './models/ComboBoxItem.js';
+export * from './models/NavbarItem.js';
+export * from './models/NotifyModel.js';
+export * from './util/ClickOutside.js';
+export * from './util/Floating.js';
+export * from './util/CronParser.js';
+export { dayjs } from './util/dayjs.js';
+export * from './util/DateFunctions.js';
+export * from './util/DragDrop.js';
+export * from './util/Transitions.js';
+export * from './util/interceptLinkClick.js';
+export * from './util/NavigateTo.js';
+export * from './display/filetree/index.js';
+export * from './theme.svelte.js';
+export * from './uiTheme.svelte.js';
+export * from './ui/Toast.svelte.js';

package/dist/layout/CustomNavbar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	
+
 	export interface CustomNavbarProps {
 		/** Header text for the mobile drawer */
 		drawerHeader?: string | undefined;

package/dist/layout/Navbar.svelte

@@ -12,8 +12,7 @@
 	import Logo from '../ui/Logo.svelte';
 	import type { Snippet } from 'svelte';
 
-	/** `midnight` is a legacy alias for `primary`. */
-	export type NavbarVariant = 'default' | 'primary' | 'midnight';
+	export type NavbarVariant = 'default' | 'primary';
 
 	export interface NavbarProps {
 		/** Visual variant. `primary` uses the primary brand colour as the background across all themes */
@@ -67,7 +66,7 @@
 		onDrawerButtonClick = undefined
 	}: NavbarProps = $props();
 
-	const isPrimary = $derived(variant === 'primary' || variant === 'midnight');
+	const isPrimary = $derived(variant === 'primary');
 </script>
 
 <header class={isPrimary ? 'primary' : ''}>
@@ -254,7 +253,7 @@
 		height: 1.5rem;
 	}
 
-	.inner-navbar :global(.cu-icon) {
+	.inner-navbar :global(.pui-icon) {
 		display: flex;
 	}
 

package/dist/layout/Navbar.svelte.d.ts

@@ -1,8 +1,7 @@
 import type { NavbarItem } from '../models/NavbarItem.js';
 import { type Hyperlink } from '../index.js';
 import type { Snippet } from 'svelte';
-/** `midnight` is a legacy alias for `primary`. */
-export type NavbarVariant = 'default' | 'primary' | 'midnight';
+export type NavbarVariant = 'default' | 'primary';
 export interface NavbarProps {
     /** Visual variant. `primary` uses the primary brand colour as the background across all themes */
     variant?: NavbarVariant;

package/dist/layout/NavbarItemDisplay.svelte

@@ -27,4 +27,4 @@
             {/if}
         </div>
     {/if}
-    </div> -->
+    </div> -->

package/dist/layout/NavbarItemView.svelte

@@ -61,7 +61,9 @@
 			<div
 				class="navbar-submenu"
 				class:flyout={depth > 0}
-				style={item.submenuWidth ? `width: ${item.submenuWidth}; min-width: ${item.submenuWidth};` : ''}
+				style={item.submenuWidth
+					? `width: ${item.submenuWidth}; min-width: ${item.submenuWidth};`
+					: ''}
 				onclick={(e) => {
 					// Close the fold-out once an actual link is chosen (but not when toggling a nested parent)
 					if ((e.target as HTMLElement).closest('a')) close();

package/dist/layout/Sidenav.svelte

@@ -471,7 +471,7 @@
 		border-top: 1px solid var(--border-color);
 		border-bottom: 1px solid var(--border-color);
 	}
-	
+
 	.section-title:first-child {
 		border-top: none;
 	}

package/dist/models/ComboBoxItem.d.ts

@@ -1,4 +1,4 @@
-import type { NotifyModel } from "./NotifyModel.js";
+import type { NotifyModel } from './NotifyModel.js';
 export interface ComboBoxGroup {
     label: string;
     items: ComboBoxItem[];
@@ -20,6 +20,6 @@ export interface ComboBoxItem {
     /** Marks a synthetic "add new value" suggestion (see Autocomplete) */
     isAddNew?: boolean;
 }
-export type FetchFunctionType = (() => Promise<NotifyModel<ComboBoxItem[]>>);
-export type SearchFunctionType = ((query: string) => Promise<NotifyModel<ComboBoxItem[]>>);
-export type RetrieveLabelFunctionType = ((value: any) => Promise<NotifyModel<string | undefined>>);
+export type FetchFunctionType = () => Promise<NotifyModel<ComboBoxItem[]>>;
+export type SearchFunctionType = (query: string) => Promise<NotifyModel<ComboBoxItem[]>>;
+export type RetrieveLabelFunctionType = (value: any) => Promise<NotifyModel<string | undefined>>;

package/dist/models/NotifyModel.js

@@ -6,4 +6,3 @@ export var MessageTypes;
     MessageTypes["notFound"] = "NotFound";
     MessageTypes["accessDenied"] = "AccessDenied";
 })(MessageTypes || (MessageTypes = {}));
-;

package/dist/theme.svelte.d.ts

@@ -1,4 +1,4 @@
-type Theme = "system" | "light" | "dark";
+type Theme = 'system' | 'light' | 'dark';
 export declare const breakpoints: {
     readonly sm: 640;
     readonly md: 768;

package/dist/theme.svelte.js

@@ -4,12 +4,12 @@ const browser = typeof window !== 'undefined' && typeof document !== 'undefined'
 // Theme State
 // ============================================
 // Svelte 5 runes for reactive state
-let theme = $state("system");
+let theme = $state('system');
 let systemDarkMode = $state(browser && isSystemDarkMode());
 let isDarkMode = $derived.by(() => {
-    if (theme === "system")
+    if (theme === 'system')
         return systemDarkMode;
-    return theme === "dark";
+    return theme === 'dark';
 });
 // Initialize theme on module load (browser only - SSR has no localStorage/document)
 if (browser)
@@ -18,8 +18,8 @@ if (browser)
 if (browser && window.matchMedia) {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
         systemDarkMode = e.matches;
-        if (theme === "system")
-            applyThemeClass(e.matches ? "dark" : "light");
+        if (theme === 'system')
+            applyThemeClass(e.matches ? 'dark' : 'light');
     });
 }
 // ============================================
@@ -55,20 +55,44 @@ if (typeof window !== 'undefined') {
 }
 // Export reactive viewport state object
 export const viewportState = {
-    get width() { return windowWidth; },
-    get height() { return windowHeight; },
+    get width() {
+        return windowWidth;
+    },
+    get height() {
+        return windowHeight;
+    },
     // Boolean helpers
-    get isMobile() { return isMobile; },
-    get isTablet() { return isTablet; },
-    get isDesktop() { return isDesktop; },
-    get isSmall() { return isSmall; },
-    get isMedium() { return isMedium; },
-    get isLarge() { return isLarge; },
-    get isExtraLarge() { return isExtraLarge; },
-    get isUltrawide() { return isUltrawide; },
+    get isMobile() {
+        return isMobile;
+    },
+    get isTablet() {
+        return isTablet;
+    },
+    get isDesktop() {
+        return isDesktop;
+    },
+    get isSmall() {
+        return isSmall;
+    },
+    get isMedium() {
+        return isMedium;
+    },
+    get isLarge() {
+        return isLarge;
+    },
+    get isExtraLarge() {
+        return isExtraLarge;
+    },
+    get isUltrawide() {
+        return isUltrawide;
+    },
     // Utility function for custom breakpoints
-    isBelow(breakpoint) { return windowWidth < breakpoint; },
-    isAbove(breakpoint) { return windowWidth >= breakpoint; }
+    isBelow(breakpoint) {
+        return windowWidth < breakpoint;
+    },
+    isAbove(breakpoint) {
+        return windowWidth >= breakpoint;
+    }
 };
 // Export getter for the theme state
 export function getTheme() {
@@ -86,7 +110,7 @@ export const themeState = {
 export function loadTheme() {
     if (!browser)
         return;
-    const themeString = localStorage.getItem("theme") || "system";
+    const themeString = localStorage.getItem('theme') || 'system';
     if (themeString == 'light')
         setTheme('light');
     else if (themeString == 'dark')
@@ -96,9 +120,9 @@ export function loadTheme() {
 }
 export function setTheme(newTheme) {
     let appliedTheme;
-    if (newTheme === "system") {
+    if (newTheme === 'system') {
         systemDarkMode = isSystemDarkMode();
-        appliedTheme = systemDarkMode ? "dark" : "light";
+        appliedTheme = systemDarkMode ? 'dark' : 'light';
     }
     else {
         appliedTheme = newTheme;
@@ -108,13 +132,13 @@ export function setTheme(newTheme) {
     if (!browser)
         return;
     applyThemeClass(appliedTheme);
-    localStorage.setItem("theme", newTheme);
+    localStorage.setItem('theme', newTheme);
 }
 function applyThemeClass(appliedTheme) {
     if (!browser)
         return;
     const classList = document.documentElement.classList;
-    classList.remove("light", "dark");
+    classList.remove('light', 'dark');
     classList.add(appliedTheme);
 }
 function isSystemDarkMode() {

package/dist/ui/Accordion.svelte

@@ -59,9 +59,7 @@
 		children
 	}: AccordionProps = $props();
 
-	const openValues = $derived(
-		Array.isArray(value) ? value : value ? [value] : []
-	);
+	const openValues = $derived(Array.isArray(value) ? value : value ? [value] : []);
 
 	function isOpen(itemValue: string): boolean {
 		return openValues.includes(itemValue);

package/dist/ui/AccordionItem.svelte

@@ -219,52 +219,44 @@
 		--accordion-open-color: var(--danger-text);
 	}
 
-	.variant-accent,
-	.variant-pistachio {
+	.variant-accent {
 		--accordion-open-bg: var(--ui-accent);
 		--accordion-open-color: var(--ui-primary);
 	}
 
-	.variant-accent-subtle,
-	.variant-pistachio-subtle {
+	.variant-accent-subtle {
 		--accordion-open-bg: rgba(var(--ui-accent-rgbc), 0.15);
 		--accordion-open-color: var(--text-color);
 	}
 
-	.variant-accent-outline,
-	.variant-pistachio-outline {
+	.variant-accent-outline {
 		--accordion-open-bg: transparent;
 		--accordion-open-color: var(--ui-accent);
 		--accordion-open-border-color: var(--ui-accent);
 	}
 
-	.variant-primary,
-	.variant-midnight {
+	.variant-primary {
 		--accordion-open-bg: var(--ui-primary);
 		--accordion-open-color: white;
 	}
 
-	.variant-primary-subtle,
-	.variant-midnight-subtle {
+	.variant-primary-subtle {
 		--accordion-open-bg: rgba(var(--ui-primary-rgbc), 0.1);
 		--accordion-open-color: var(--text-color);
 	}
 
-	.variant-primary-outline,
-	.variant-midnight-outline {
+	.variant-primary-outline {
 		--accordion-open-bg: transparent;
 		--accordion-open-color: var(--ui-primary);
 		--accordion-open-border-color: var(--ui-primary);
 	}
 
-	.variant-tertiary,
-	.variant-turquoise {
+	.variant-tertiary {
 		--accordion-open-bg: var(--ui-tertiary);
 		--accordion-open-color: var(--ui-primary);
 	}
 
-	.variant-tertiary-subtle,
-	.variant-turquoise-subtle {
+	.variant-tertiary-subtle {
 		--accordion-open-bg: rgba(var(--ui-tertiary-dark-rgbc), 0.25);
 		--accordion-open-color: var(--ui-tertiary-dark);
 	}

package/dist/ui/Badge.svelte

@@ -43,12 +43,12 @@
 	let isDisabled: boolean = $derived(loading || disabled);
 	let type: 'a' | 'button' | 'div' = $derived(onClick ? 'button' : href ? 'a' : 'div');
 
-	const elClass = $derived(
-		`badge ${isDisabled ? 'disabled' : ''}`
-	);
+	const elClass = $derived(`badge ${isDisabled ? 'disabled' : ''}`);
 </script>
 
-<div class="badge-container {variant} shape-{shape} size-{size} {onDelete ? 'badge-with-button' : ''} ">
+<div
+	class="badge-container {variant} shape-{shape} size-{size} {onDelete ? 'badge-with-button' : ''} "
+>
 	{#if type == 'a' && !disabled}
 		<a class={elClass} {href} {target}> {@render children?.()}</a>
 	{:else if type == 'button'}
@@ -122,8 +122,7 @@
 		color: var(--badge-text-color) !important;
 	}
 
-	.accent,
-	.pistachio {
+	.accent {
 		--badge-bg-color: var(--ui-accent);
 		--badge-text-color: var(--ui-primary);
 		--badge-hover-bg-color: var(--ui-tertiary);
@@ -131,13 +130,11 @@
 		--badge-outline-color: var(--ui-tertiary);
 	}
 
-	.accent :global(.loader),
-	.pistachio :global(.loader) {
+	.accent :global(.loader) {
 		color: var(--ui-primary);
 	}
 
-	.primary,
-	.midnight {
+	.primary {
 		--badge-bg-color: var(--ui-primary);
 		--badge-text-color: #fff;
 		--badge-hover-bg-color: var(--ui-accent-dark);
@@ -145,8 +142,7 @@
 		--badge-outline-color: var(--ui-accent-dark);
 	}
 
-	.primary :global(.loader),
-	.midnight :global(.loader) {
+	.primary :global(.loader) {
 		color: var(--ui-accent);
 	}
 
@@ -213,8 +209,7 @@
 		--badge-outline-color: var(--ui-tertiary);
 	}
 
-	.accent-outline,
-	.pistachio-outline {
+	.accent-outline {
 		--badge-text-color: var(--ui-accent);
 		--badge-bg-color: initial;
 		--badge-border: 1px solid var(--ui-accent);
@@ -224,8 +219,7 @@
 		--badge-outline-color: var(--ui-tertiary);
 	}
 
-	.primary-outline,
-	.midnight-outline {
+	.primary-outline {
 		--badge-text-color: var(--ui-primary);
 		--badge-bg-color: initial;
 		--badge-border: 1px solid var(--ui-primary);
@@ -235,8 +229,7 @@
 		--badge-outline-color: var(--ui-accent-dark);
 	}
 
-	.tertiary,
-	.turquoise {
+	.tertiary {
 		--badge-text-color: black;
 		--badge-bg-color: var(--ui-tertiary);
 		--badge-hover-bg-color: var(--ui-tertiary-dark);
@@ -334,5 +327,4 @@
 	.size-lg .badge-button {
 		padding: 6px;
 	}
-
 </style>

package/dist/ui/Button.svelte

@@ -87,7 +87,13 @@
 {/snippet}
 
 {#if isLink && href && !disabled}
-	<a {target} class={elClass} aria-label={ariaLabel} href={href?.startsWith('/') ? resolve(href as any) : href} onclick={(e) => interceptLinkClick(e, { href, target, onclick })}>
+	<a
+		{target}
+		class={elClass}
+		aria-label={ariaLabel}
+		href={href?.startsWith('/') ? resolve(href as any) : href}
+		onclick={(e) => interceptLinkClick(e, { href, target, onclick })}
+	>
 		{@render buttonContent?.()}
 	</a>
 {:else}
@@ -211,8 +217,7 @@
 		}
 	}
 
-	.accent,
-	.pistachio {
+	.accent {
 		--button-text-color: var(--ui-primary);
 		--button-bg-color: var(--ui-accent);
 		--button-hover-bg-color: var(--ui-tertiary);
@@ -220,8 +225,7 @@
 		--button-outline-color: var(--ui-tertiary);
 	}
 
-	.accent-outline,
-	.pistachio-outline {
+	.accent-outline {
 		--button-text-color: var(--ui-accent);
 		--button-bg-color: initial;
 		--button-border: 1px solid var(--ui-accent);
@@ -232,8 +236,7 @@
 		--button-outline-color: var(--ui-tertiary);
 	}
 
-	.accent-subtle,
-	.pistachio-subtle {
+	.accent-subtle {
 		--button-text-color: var(--ui-accent);
 		--button-bg-color: initial;
 		--button-hover-text-color: var(--ui-primary);
@@ -243,16 +246,14 @@
 		--button-outline-color: var(--ui-tertiary);
 	}
 
-	.primary,
-	.midnight {
+	.primary {
 		--button-bg-color: var(--ui-primary);
 		--button-text-color: white;
 		--button-hover-bg-color: var(--ui-accent-dark);
 		--button-active-bg-color: var(--ui-primary-dark);
 	}
 
-	.primary-outline,
-	.midnight-outline {
+	.primary-outline {
 		--button-text-color: var(--ui-primary);
 		--button-bg-color: initial;
 		--button-border: 1px solid var(--ui-primary);
@@ -262,8 +263,7 @@
 		--button-active-border: 1px solid var(--ui-primary-dark);
 	}
 
-	.primary-subtle,
-	.midnight-subtle {
+	.primary-subtle {
 		--button-text-color: var(--ui-primary);
 		--button-bg-color: initial;
 		--button-hover-text-color: white;
@@ -272,8 +272,7 @@
 		--button-active-bg-color: var(--ui-primary-dark);
 	}
 
-	.tertiary,
-	.turquoise {
+	.tertiary {
 		--button-text-color: var(--ui-primary);
 		--button-bg-color: var(--ui-tertiary);
 		--button-hover-bg-color: var(--ui-accent);
@@ -281,8 +280,7 @@
 		--button-outline-color: var(--ui-accent);
 	}
 
-	.tertiary-subtle,
-	.turquoise-subtle {
+	.tertiary-subtle {
 		background-color: initial;
 		color: var(--ui-tertiary-dark);