diff --git a/package.json b/package.json
index 7a65daf8..3fd0ee69 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@ltd/j-toml": "^1.38.0",
-    "@sveltia/ui": "^0.5.0",
+    "@sveltia/ui": "^0.6.0",
     "fast-deep-equal": "^3.1.3",
     "flat": "^5.0.2",
     "isomorphic-dompurify": "^1.8.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 97a6f847..a1046668 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^1.38.0
     version: 1.38.0
   '@sveltia/ui':
-    specifier: ^0.5.0
-    version: 0.5.0
+    specifier: ^0.6.0
+    version: 0.6.0
   fast-deep-equal:
     specifier: ^3.1.3
     version: 3.1.3
@@ -837,8 +837,8 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltia/ui@0.5.0:
-    resolution: {integrity: sha512-5gfI3k4EX3cnD2nWdUhLz5dwGU10rrdzotorBu3DtWkPYRpzWEPCp4pzl1zt/hp5CaYVAr0RdQBOuT6/REaZ2w==}
+  /@sveltia/ui@0.6.0:
+    resolution: {integrity: sha512-fcNrzNVEOZxMirulM6JoloD0wL9o5FW8ACH/oWnitHwIg9LFz5uef0tpnw0cyHtmrYu9IZv51FV6pNLAOnIYcw==}
     dependencies:
       svelte: 4.0.5
     dev: false
diff --git a/src/lib/components/assets/details/asset-details-overlay.svelte b/src/lib/components/assets/details/asset-details-overlay.svelte
index b817a5ec..21ed3709 100644
--- a/src/lib/components/assets/details/asset-details-overlay.svelte
+++ b/src/lib/components/assets/details/asset-details-overlay.svelte
@@ -33,7 +33,7 @@
     z-index: 100;
     display: flex;
     flex-direction: column;
-    background-color: var(--primary-background-color);
+    background-color: var(--sui-primary-background-color);
 
     .row {
       flex: auto;
@@ -43,7 +43,7 @@
       .preview {
         flex: auto;
         overflow: hidden;
-        border-right: 1px solid var(--primary-border-color);
+        border-right: 1px solid var(--sui-primary-border-color);
       }
     }
   }
diff --git a/src/lib/components/assets/shared/drop-zone.svelte b/src/lib/components/assets/shared/drop-zone.svelte
index c464284e..bcacb7e9 100644
--- a/src/lib/components/assets/shared/drop-zone.svelte
+++ b/src/lib/components/assets/shared/drop-zone.svelte
@@ -127,7 +127,7 @@
     position: absolute;
     inset: 0;
     z-index: 10;
-    background-color: hsl(var(--background-color-4-hsl) / 80%);
+    background-color: hsl(var(--sui-background-color-4-hsl) / 80%);
     backdrop-filter: blur(8px);
     pointer-events: none;
 
@@ -137,10 +137,10 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      font-size: var(--font-size--xxx-large);
+      font-size: var(--sui-font-size-xxx-large);
       border-width: 8px;
       border-style: dashed;
-      border-color: var(--primary-accent-color-foreground);
+      border-color: var(--sui-primary-accent-color-foreground);
       border-radius: 8px;
     }
   }
diff --git a/src/lib/components/assets/shared/info-panel.svelte b/src/lib/components/assets/shared/info-panel.svelte
index 5417b69c..9e27401f 100644
--- a/src/lib/components/assets/shared/info-panel.svelte
+++ b/src/lib/components/assets/shared/info-panel.svelte
@@ -157,7 +157,7 @@
     .preview {
       overflow: hidden;
       margin: 0 0 16px;
-      border-radius: var(--control--medium--border-radius);
+      border-radius: var(--sui-control-medium-border-radius);
       aspect-ratio: 1 / 1;
     }
 
diff --git a/src/lib/components/assets/shared/simple-image-grid.svelte b/src/lib/components/assets/shared/simple-image-grid.svelte
index b3c05fc4..e578b925 100644
--- a/src/lib/components/assets/shared/simple-image-grid.svelte
+++ b/src/lib/components/assets/shared/simple-image-grid.svelte
@@ -21,7 +21,7 @@
 
       :global(.option) {
         :global(button) {
-          border-radius: var(--control--medium--border-radius);
+          border-radius: var(--sui-control-medium-border-radius);
           padding: 4px;
           width: 100%;
           height: auto;
@@ -30,7 +30,7 @@
           :global(img),
           :global(video) {
             flex: none;
-            border-radius: var(--control--medium--border-radius);
+            border-radius: var(--sui-control-medium-border-radius);
             aspect-ratio: 1 / 1;
             object-fit: contain;
           }
@@ -39,7 +39,7 @@
         :global(button[aria-selected='true']) {
           outline-width: 4px;
           outline-style: solid;
-          outline-color: var(--primary-accent-color);
+          outline-color: var(--sui-primary-accent-color);
 
           :global(.icon) {
             display: none;
diff --git a/src/lib/components/assets/shared/upload-assets-preview.svelte b/src/lib/components/assets/shared/upload-assets-preview.svelte
index 8ea933fe..c243547d 100644
--- a/src/lib/components/assets/shared/upload-assets-preview.svelte
+++ b/src/lib/components/assets/shared/upload-assets-preview.svelte
@@ -63,14 +63,14 @@
       height: 48px;
       aspect-ratio: 1 / 1;
       object-fit: cover;
-      border-radius: var(--control--medium--border-radius);
+      border-radius: var(--sui-control-medium-border-radius);
     }
 
     .image {
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: var(--tertiary-background-color);
+      background-color: var(--sui-tertiary-background-color);
     }
 
     .meta {
@@ -80,8 +80,8 @@
       gap: 4px;
 
       .size {
-        font-size: var(--font-size--small);
-        color: var(--secondary-foreground-color);
+        font-size: var(--sui-font-size-small);
+        color: var(--sui-secondary-foreground-color);
       }
     }
   }
diff --git a/src/lib/components/common/basic-grid-view.svelte b/src/lib/components/common/basic-grid-view.svelte
index a8ccfd0b..9792468c 100644
--- a/src/lib/components/common/basic-grid-view.svelte
+++ b/src/lib/components/common/basic-grid-view.svelte
@@ -26,8 +26,8 @@
       overflow: hidden;
       border-width: 1px;
       border-style: solid;
-      border-color: var(--secondary-border-color);
-      border-radius: var(--control--medium--border-radius);
+      border-color: var(--sui-secondary-border-color);
+      border-radius: var(--sui-control-medium-border-radius);
       padding: 0;
       height: auto;
       aspect-ratio: 1 / 1;
@@ -48,7 +48,7 @@
         inset: auto 0 0 0;
         z-index: 1;
         padding: 16px 16px 16px 16px;
-        background-color: hsl(var(--background-color-4-hsl) / 80%);
+        background-color: hsl(var(--sui-background-color-4-hsl) / 80%);
 
         :global(span) {
           display: -webkit-box;
@@ -67,7 +67,7 @@
     }
 
     :global([role='row'][aria-selected='true']) {
-      border-color: var(--primary-accent-color);
+      border-color: var(--sui-primary-accent-color);
     }
   }
 </style>
diff --git a/src/lib/components/common/basic-list-view.svelte b/src/lib/components/common/basic-list-view.svelte
index 45d4132e..6dee709a 100644
--- a/src/lib/components/common/basic-list-view.svelte
+++ b/src/lib/components/common/basic-list-view.svelte
@@ -22,7 +22,7 @@
       }
 
       :global([role='row']:hover) {
-        background-color: var(--highlight-background-color);
+        background-color: var(--sui-highlight-background-color);
       }
 
       :global([role='gridcell']) {
@@ -32,7 +32,7 @@
         height: 40px;
         padding: 0 8px;
         max-width: 100%;
-        color: var(--secondary-foreground-color);
+        color: var(--sui-secondary-foreground-color);
         white-space: nowrap;
 
         :global(.label) {
@@ -51,7 +51,7 @@
 
       :global([role='row'] [role='gridcell']) {
         border-width: 1px 0 0;
-        border-color: var(--control-border-color);
+        border-color: var(--sui-control-border-color);
       }
 
       :global([role='row']:last-child [role='gridcell']) {
@@ -64,21 +64,21 @@
 
       :global([role='gridcell'].title) {
         width: 100%; // flex: auto
-        color: var(--primary-foreground-color);
+        color: var(--sui-primary-foreground-color);
       }
 
       :global([role='gridcell'].image) {
         width: 32px;
 
         :global(img) {
-          background-color: var(--primary-accent-color-foreground);
+          background-color: var(--sui-primary-accent-color-foreground);
         }
 
         :global(img),
         :global(video) {
           width: 32px;
           height: 32px;
-          border-radius: var(--control--medium--border-radius);
+          border-radius: var(--sui-control-medium-border-radius);
         }
       }
     }
diff --git a/src/lib/components/common/image.svelte b/src/lib/components/common/image.svelte
index 8c37c3d1..5c71378b 100644
--- a/src/lib/components/common/image.svelte
+++ b/src/lib/components/common/image.svelte
@@ -16,7 +16,7 @@
     width: 100%;
     height: 100%;
     object-fit: contain;
-    background-color: var(--tertiary-background-color);
+    background-color: var(--sui-tertiary-background-color);
 
     &.cover {
       object-fit: cover;
diff --git a/src/lib/components/common/page-container.svelte b/src/lib/components/common/page-container.svelte
index af8e1cec..de2ce16c 100644
--- a/src/lib/components/common/page-container.svelte
+++ b/src/lib/components/common/page-container.svelte
@@ -59,9 +59,9 @@
       flex: none;
       width: 240px;
       overflow-y: auto;
-      background-color: var(--tertiary-background-color);
+      background-color: var(--sui-tertiary-background-color);
       border-width: 0 1px 0 0;
-      border-color: var(--primary-border-color);
+      border-color: var(--sui-primary-border-color);
 
       :global([role='radiogroup']) {
         width: 100%;
@@ -87,7 +87,7 @@
           :global(button) {
             display: flex;
             justify-content: flex-start;
-            border-radius: var(--control--medium--border-radius);
+            border-radius: var(--sui-control-medium-border-radius);
             padding: 0 12px;
             height: 32px;
             width: 100%;
@@ -117,13 +117,13 @@
           }
 
           :global([role='option'][aria-selected='true']) {
-            color: var(--highlight-foreground-color);
-            background-color: var(--highlight-background-color);
+            color: var(--sui-highlight-foreground-color);
+            background-color: var(--sui-highlight-background-color);
           }
 
           :global([role='option'].dragover) {
-            color: var(--primary-accent-color-foreground) !important;
-            background-color: var(--primary-accent-color) !important;
+            color: var(--sui-primary-accent-color-foreground) !important;
+            background-color: var(--sui-primary-accent-color) !important;
           }
         }
       }
@@ -140,12 +140,12 @@
       }
 
       :global(.primary:not(.global)[role='toolbar']) {
-        background-color: var(--tertiary-background-color);
+        background-color: var(--sui-tertiary-background-color);
       }
 
       :global(.secondary[role='toolbar']) {
         border-width: 0 0 1px;
-        border-color: var(--primary-border-color);
+        border-color: var(--sui-primary-border-color);
       }
 
       :global(.list-container) {
@@ -153,7 +153,7 @@
         overflow-y: auto;
         overscroll-behavior-y: contain;
         padding: 16px;
-        border-radius: var(--control--medium--border-radius);
+        border-radius: var(--sui-control-medium-border-radius);
       }
     }
 
@@ -173,7 +173,7 @@
         flex: none;
         overflow: auto;
         width: 320px;
-        border-left: 1px solid var(--primary-border-color);
+        border-left: 1px solid var(--sui-primary-border-color);
       }
     }
   }
diff --git a/src/lib/components/contents/details/column-header.svelte b/src/lib/components/contents/details/column-header.svelte
index 9b536208..d135c28a 100644
--- a/src/lib/components/contents/details/column-header.svelte
+++ b/src/lib/components/contents/details/column-header.svelte
@@ -112,7 +112,7 @@
 <style lang="scss">
   .header {
     flex: none !important;
-    background-color: var(--tertiary-background-color);
+    background-color: var(--sui-tertiary-background-color);
 
     & > :global([role='toolbar']) {
       margin-right: auto;
@@ -120,11 +120,11 @@
       max-width: 800px;
 
       :global(h3) {
-        font-size: var(--font-size--default);
+        font-size: var(--sui-font-size-default);
       }
 
       :global(button.error) {
-        color: var(--error-foreground-color);
+        color: var(--sui-error-foreground-color);
       }
     }
   }
diff --git a/src/lib/components/contents/details/content-details-overlay.svelte b/src/lib/components/contents/details/content-details-overlay.svelte
index a08563cc..a1c183b0 100644
--- a/src/lib/components/contents/details/content-details-overlay.svelte
+++ b/src/lib/components/contents/details/content-details-overlay.svelte
@@ -158,7 +158,7 @@
     z-index: 100;
     display: flex;
     flex-direction: column;
-    background-color: var(--primary-background-color);
+    background-color: var(--sui-primary-background-color);
 
     .cols {
       flex: auto;
@@ -173,7 +173,7 @@
 
         &:first-child:not(:last-child) {
           border-width: 0 1px 0 0;
-          border-color: var(--primary-border-color);
+          border-color: var(--sui-primary-border-color);
         }
 
         & > :global(.content) {
diff --git a/src/lib/components/contents/details/editor/field-editor.svelte b/src/lib/components/contents/details/editor/field-editor.svelte
index 3a8511d8..6f0ad81f 100644
--- a/src/lib/components/contents/details/editor/field-editor.svelte
+++ b/src/lib/components/contents/details/editor/field-editor.svelte
@@ -183,14 +183,14 @@
     &[data-widget='object'] {
       & > header + div {
         border-width: 2px;
-        border-color: var(--secondary-border-color);
-        border-radius: var(--control--medium--border-radius);
+        border-color: var(--sui-secondary-border-color);
+        border-radius: var(--sui-control-medium-border-radius);
       }
     }
 
     &:not(:last-child) {
       border-width: 0 0 1px;
-      border-color: var(--secondary-border-color);
+      border-color: var(--sui-secondary-border-color);
     }
 
     & > * {
@@ -207,17 +207,17 @@
     margin-bottom: 8px;
 
     h4 {
-      font-size: var(--font-size--small);
+      font-size: var(--sui-font-size-small);
       font-weight: 600;
-      color: var(--secondary-foreground-color);
+      color: var(--sui-secondary-foreground-color);
     }
 
     .required {
-      border: 1px solid var(--control-border-color);
+      border: 1px solid var(--sui-control-border-color);
       border-radius: 4px;
       padding: 2px 4px;
-      color: var(--info-foreground-color);
-      font-size: var(--font-size--x-small);
+      color: var(--sui-info-foreground-color);
+      font-size: var(--sui-font-size-x-small);
     }
 
     & + div {
@@ -238,10 +238,10 @@
 
       :global(input[type='color']),
       :global(input[type='number']) {
-        background-color: var(--input-background-color);
+        background-color: var(--sui-input-background-color);
         border-width: 1px;
-        border-color: var(--primary-border-color);
-        border-radius: var(--control--medium--border-radius);
+        border-color: var(--sui-primary-border-color);
+        border-radius: var(--sui-control-medium-border-radius);
       }
 
       :global(input[type='file']),
@@ -273,7 +273,7 @@
   }
 
   .validation {
-    color: var(--error-foreground-color);
+    color: var(--sui-error-foreground-color);
 
     div {
       display: flex;
@@ -289,7 +289,7 @@
 
   .hint {
     margin-top: 8px;
-    font-size: var(--font-size--small);
+    font-size: var(--sui-font-size-small);
     opacity: 0.75;
 
     :global(p) {
diff --git a/src/lib/components/contents/details/preview/field-preview.svelte b/src/lib/components/contents/details/preview/field-preview.svelte
index 3d59d9b4..9e4c5d4c 100644
--- a/src/lib/components/contents/details/preview/field-preview.svelte
+++ b/src/lib/components/contents/details/preview/field-preview.svelte
@@ -81,8 +81,8 @@
     }
 
     h4 {
-      color: var(--secondary-foreground-color);
-      font-size: var(--font-size--small);
+      color: var(--sui-secondary-foreground-color);
+      font-size: var(--sui-font-size-small);
 
       &:not(:last-child) {
         margin-bottom: 8px;
@@ -100,7 +100,7 @@
     :global(.subsection) {
       border-width: 2px 2px 0;
       border-style: solid;
-      border-color: var(--secondary-border-color);
+      border-color: var(--sui-secondary-border-color);
       padding: 8px 16px;
 
       :global(.title) {
@@ -110,14 +110,14 @@
     }
 
     :global(.subsection:first-of-type) {
-      border-top-right-radius: var(--control--medium--border-radius);
-      border-top-left-radius: var(--control--medium--border-radius);
+      border-top-right-radius: var(--sui-control-medium-border-radius);
+      border-top-left-radius: var(--sui-control-medium-border-radius);
     }
 
     :global(.subsection:last-of-type) {
-      border-bottom: 2px solid var(--secondary-border-color);
-      border-bottom-right-radius: var(--control--medium--border-radius);
-      border-bottom-left-radius: var(--control--medium--border-radius);
+      border-bottom: 2px solid var(--sui-secondary-border-color);
+      border-bottom-right-radius: var(--sui-control-medium-border-radius);
+      border-bottom-left-radius: var(--sui-control-medium-border-radius);
     }
   }
 </style>
diff --git a/src/lib/components/contents/details/widgets/file/file-editor.svelte b/src/lib/components/contents/details/widgets/file/file-editor.svelte
index 35788b07..3d3d6727 100644
--- a/src/lib/components/contents/details/widgets/file/file-editor.svelte
+++ b/src/lib/components/contents/details/widgets/file/file-editor.svelte
@@ -186,8 +186,8 @@
       width: 160px !important;
       height: 160px !important;
       border-width: 1px;
-      border-color: var(--control-border-color);
-      border-radius: var(--control--medium--border-radius);
+      border-color: var(--sui-control-border-color);
+      border-radius: var(--sui-control-medium-border-radius);
     }
 
     & > div {
diff --git a/src/lib/components/contents/details/widgets/list/list-editor.svelte b/src/lib/components/contents/details/widgets/list/list-editor.svelte
index 07e849b5..fcf4e43a 100644
--- a/src/lib/components/contents/details/widgets/list/list-editor.svelte
+++ b/src/lib/components/contents/details/widgets/list/list-editor.svelte
@@ -340,14 +340,14 @@
   .item {
     margin: 4px 0;
     border-width: 2px;
-    border-color: var(--secondary-border-color);
-    border-radius: var(--control--medium--border-radius);
+    border-color: var(--sui-secondary-border-color);
+    border-radius: var(--sui-control-medium-border-radius);
 
     .header {
       display: flex;
       align-items: center;
       padding: 4px;
-      background-color: var(--primary-border-color);
+      background-color: var(--sui-primary-border-color);
 
       & > div {
         display: flex;
@@ -370,13 +370,13 @@
       }
 
       :global(.icon) {
-        font-size: var(--font-size--large);
+        font-size: var(--sui-font-size-large);
       }
 
       .type {
-        font-size: var(--font-size--small);
+        font-size: var(--sui-font-size-small);
         font-weight: 600;
-        color: var(--secondary-foreground-color);
+        color: var(--sui-secondary-foreground-color);
       }
     }
 
diff --git a/src/lib/components/contents/details/widgets/object/object-editor.svelte b/src/lib/components/contents/details/widgets/object/object-editor.svelte
index 55a7a6f0..83498e12 100644
--- a/src/lib/components/contents/details/widgets/object/object-editor.svelte
+++ b/src/lib/components/contents/details/widgets/object/object-editor.svelte
@@ -82,9 +82,9 @@
     padding: 4px;
 
     .summary {
-      font-size: var(--font-size--small);
+      font-size: var(--sui-font-size-small);
       font-weight: 600;
-      color: var(--secondary-foreground-color);
+      color: var(--sui-secondary-foreground-color);
     }
   }
 
diff --git a/src/lib/components/contents/details/widgets/select/select-editor.svelte b/src/lib/components/contents/details/widgets/select/select-editor.svelte
index 1dc6d790..e08f5b3a 100644
--- a/src/lib/components/contents/details/widgets/select/select-editor.svelte
+++ b/src/lib/components/contents/details/widgets/select/select-editor.svelte
@@ -150,11 +150,11 @@
       align-items: center;
       gap: 8px;
       padding: 4px 12px;
-      border-radius: var(--control--medium--border-radius);
-      background-color: var(--secondary-background-color);
+      border-radius: var(--sui-control-medium-border-radius);
+      background-color: var(--sui-secondary-background-color);
 
       :global(.icon) {
-        font-size: var(--font-size--large);
+        font-size: var(--sui-font-size-large);
       }
     }
   }
diff --git a/src/lib/components/contents/details/widgets/string/string-preview.svelte b/src/lib/components/contents/details/widgets/string/string-preview.svelte
index 3d23aaa0..8adfdac2 100644
--- a/src/lib/components/contents/details/widgets/string/string-preview.svelte
+++ b/src/lib/components/contents/details/widgets/string/string-preview.svelte
@@ -42,7 +42,7 @@
 
 <style lang="scss">
   .title {
-    font-size: var(--font-size--xxx-large);
+    font-size: var(--sui-font-size-xxx-large);
     font-weight: 600;
   }
 </style>
diff --git a/src/lib/components/contents/list/entry-list.svelte b/src/lib/components/contents/list/entry-list.svelte
index a222bf0d..75ad59da 100644
--- a/src/lib/components/contents/list/entry-list.svelte
+++ b/src/lib/components/contents/list/entry-list.svelte
@@ -61,8 +61,8 @@
 <style lang="scss">
   h3 {
     padding: 8px;
-    color: var(--secondary-foreground-color);
-    background-color: var(--secondary-background-color);
+    color: var(--sui-secondary-foreground-color);
+    background-color: var(--sui-secondary-background-color);
 
     & + :global(.basic-grid-view .table) {
       margin: 16px 0;
diff --git a/src/lib/components/contents/list/primary-toolbar.svelte b/src/lib/components/contents/list/primary-toolbar.svelte
index 4f255362..5f1f15f8 100644
--- a/src/lib/components/contents/list/primary-toolbar.svelte
+++ b/src/lib/components/contents/list/primary-toolbar.svelte
@@ -58,7 +58,7 @@
 <style lang="scss">
   .description {
     flex: auto;
-    font-size: var(--font-size--small);
+    font-size: var(--sui-font-size-small);
     opacity: 0.8;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/lib/components/entrance/entrance-page.svelte b/src/lib/components/entrance/entrance-page.svelte
index 828d8746..93a8d6ba 100644
--- a/src/lib/components/entrance/entrance-page.svelte
+++ b/src/lib/components/entrance/entrance-page.svelte
@@ -81,12 +81,12 @@
     }
 
     .logo ~ h1 {
-      font-size: var(--font-size--xxx-large);
+      font-size: var(--sui-font-size-xxx-large);
     }
 
     :global(h2) {
       margin: 0 0 16px;
-      font-size: var(--font-size--large);
+      font-size: var(--sui-font-size-large);
       font-weight: normal;
     }
   }
diff --git a/src/lib/components/global/global-toolbar/global-toolbar.svelte b/src/lib/components/global/global-toolbar/global-toolbar.svelte
index 4932b2a4..9c011a01 100644
--- a/src/lib/components/global/global-toolbar/global-toolbar.svelte
+++ b/src/lib/components/global/global-toolbar/global-toolbar.svelte
@@ -33,8 +33,8 @@
     & > :global(.toolbar) {
       --toolbar-size: 48px;
       border-width: 0 0 1px 0 !important;
-      border-color: var(--primary-border-color) !important;
-      background-color: var(--tertiary-background-color);
+      border-color: var(--sui-primary-border-color) !important;
+      background-color: var(--sui-tertiary-background-color);
 
       :global(.search-bar) {
         width: 640px;
diff --git a/src/lib/components/global/global-toolbar/items/quick-search-bar.svelte b/src/lib/components/global/global-toolbar/items/quick-search-bar.svelte
index 0da1e633..21bc30ed 100644
--- a/src/lib/components/global/global-toolbar/items/quick-search-bar.svelte
+++ b/src/lib/components/global/global-toolbar/items/quick-search-bar.svelte
@@ -60,7 +60,7 @@
     bind:this={searchBar}
     aria-label={$_('search_placeholder')}
     aria-keyshortcuts={focusShortcut}
-    --input-label-align="center"
+    --sui-input-label-align="center"
     on:input={({ target }) => {
       // @todo Implement quick search dropdown.
       navigate(/** @type {HTMLInputElement} */ (target).value.trim());
diff --git a/src/lib/components/prefs/prefs-dialog.svelte b/src/lib/components/prefs/prefs-dialog.svelte
index 16406f9a..8e177914 100644
--- a/src/lib/components/prefs/prefs-dialog.svelte
+++ b/src/lib/components/prefs/prefs-dialog.svelte
@@ -71,8 +71,8 @@
 
         & ~ :global(p) {
           margin: 8px 0 0;
-          color: var(--secondary-foreground-color);
-          font-size: var(--font-size--small);
+          color: var(--sui-secondary-foreground-color);
+          font-size: var(--sui-font-size-small);
         }
       }
     }
diff --git a/src/lib/components/search/search-results.svelte b/src/lib/components/search/search-results.svelte
index 1ae1142c..8ceda28a 100644
--- a/src/lib/components/search/search-results.svelte
+++ b/src/lib/components/search/search-results.svelte
@@ -121,7 +121,7 @@
     h3 {
       flex: none;
       margin: 0 0 8px;
-      color: var(--secondary-foreground-color);
+      color: var(--sui-secondary-foreground-color);
 
       & + div {
         overflow: auto;
diff --git a/src/lib/components/workflow/workflow-page.svelte b/src/lib/components/workflow/workflow-page.svelte
index 184c1ae2..5b5eb3a0 100644
--- a/src/lib/components/workflow/workflow-page.svelte
+++ b/src/lib/components/workflow/workflow-page.svelte
@@ -36,17 +36,17 @@
 
       &:not(:last-child) {
         border-width: 0 1px 0 0;
-        border-color: var(--primary-border-color);
+        border-color: var(--sui-primary-border-color);
       }
 
       header {
         display: flex;
         align-items: center;
         border-width: 0 0 1px 0;
-        border-color: var(--primary-border-color);
+        border-color: var(--sui-primary-border-color);
         padding: 0 16px;
         height: 40px;
-        background-color: var(--tertiary-background-color);
+        background-color: var(--sui-tertiary-background-color);
       }
     }
   }