init

frontend-ui/src/components/ui/dialog/UiDialogContent.vue

@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'ui-dialog-content fixed left-1/2 top-1/2 z-50 grid w-[min(92vw,620px)] -translate-x-1/2 -translate-y-1/2 outline-none data-[state=closed]:animate-[dialog-out_120ms_ease-in] data-[state=open]:animate-[dialog-in_160ms_ease-out]',
+        'ui-dialog-content fixed left-1/2 top-1/2 z-50 grid -translate-x-1/2 -translate-y-1/2 outline-none data-[state=closed]:animate-[dialog-out_120ms_ease-in] data-[state=open]:animate-[dialog-in_160ms_ease-out]',
         props.class,
       )
     "
@@ -35,13 +35,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 <style scoped>
 .ui-dialog-content {
+  width: min(var(--ui-dialog-viewport-inline-size), var(--ui-dialog-max-inline-size));
   overflow: hidden;
-  border: 1px solid #6c5a37;
+  border: 1px solid var(--ui-dialog-border);
   border-radius: 0;
-  background: #050606;
+  background: var(--ui-dialog-background);
   box-shadow:
-    0 18px 38px rgb(0 0 0 / 80%),
-    inset 0 0 0 1px #0e1418;
+    0 18px 38px var(--ui-dialog-shadow),
+    inset 0 0 0 1px var(--ui-dialog-inset);
   color: var(--ui-surface-foreground);
 }
 </style>

frontend-ui/src/components/ui/dialog/UiDialogFooter.vue

@@ -7,12 +7,12 @@
 <style scoped>
 .ui-dialog-footer {
   display: flex;
-  min-height: 38px;
+  min-height: var(--ui-dialog-footer-min-block-size);
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
   padding: 4px 8px;
-  border-top: 1px solid #332c22;
-  background: linear-gradient(#20201d, #11110f);
+  border-top: 1px solid var(--ui-dialog-footer-border);
+  background: var(--ui-dialog-footer-background);
 }
 </style>

frontend-ui/src/components/ui/dialog/UiDialogHeader.vue

@@ -52,19 +52,19 @@ onBeforeUnmount(() => clearInterval(timer))
   isolation: isolate;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
-  height: 28px;
+  height: var(--ui-dialog-header-block-size);
   align-items: center;
   padding: 0 8px;
   overflow: hidden;
-  border-bottom: 1px solid #1d2735;
-  background: linear-gradient(#303b50, #263247 56%, #1d2839);
+  border-bottom: 1px solid var(--ui-dialog-titlebar-border);
+  background: var(--ui-dialog-titlebar-background);
   color: var(--ui-titlebar-foreground);
-  text-shadow: 0 1px 1px #000;
+  text-shadow: 0 1px 1px var(--ui-dialog-titlebar-text-shadow);
 }
 
 .ui-dialog-header.is-focused {
-  background: linear-gradient(#6079a5, #435a80 55%, #30425f);
-  color: #f4f6f2;
+  background: var(--ui-dialog-titlebar-focused-background);
+  color: var(--ui-dialog-titlebar-focused-foreground);
 }
 
 .ui-dialog-header__effect {
@@ -72,7 +72,7 @@ onBeforeUnmount(() => clearInterval(timer))
   z-index: 1;
   top: 0;
   left: 50%;
-  width: 1100px;
+  width: var(--ui-dialog-effect-inline-size);
   height: 100%;
   max-width: none;
   object-fit: fill;
@@ -101,8 +101,8 @@ onBeforeUnmount(() => clearInterval(timer))
 
 .ui-dialog-header__close {
   appearance: none;
-  width: 20px;
-  height: 20px;
+  width: var(--ui-dialog-close-size);
+  height: var(--ui-dialog-close-size);
   padding: 0;
   display: inline-flex;
   align-items: center;
@@ -114,8 +114,8 @@ onBeforeUnmount(() => clearInterval(timer))
 }
 
 .ui-dialog-header__close img {
-  width: 10px;
-  height: 9px;
+  width: var(--ui-dialog-close-glyph-inline-size);
+  height: var(--ui-dialog-close-glyph-block-size);
   filter: brightness(1);
 }
 
@@ -124,7 +124,7 @@ onBeforeUnmount(() => clearInterval(timer))
   filter: brightness(1.28);
 }
 .ui-dialog-header__close:focus-visible {
-  outline: 1px solid rgb(225 204 135 / 72%);
+  outline: 1px solid var(--ui-dialog-close-ring);
   outline-offset: -2px;
 }
 .ui-dialog-header__close:active img {

frontend-ui/src/components/ui/dialog/UiDialogTitle.vue

@@ -11,10 +11,16 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <DialogTitle
-    v-bind="delegatedProps"
-    :class="cn('text-[13px] font-normal text-[#f0f2ef]', props.class)"
-  >
+  <DialogTitle v-bind="delegatedProps" :class="cn('ui-dialog-title', props.class)">
     <slot />
   </DialogTitle>
 </template>
+
+<style scoped>
+.ui-dialog-title {
+  color: var(--ui-titlebar-foreground);
+  font-size: var(--ui-control-font-size-default);
+  font-weight: 400;
+  line-height: var(--ui-control-line-height);
+}
+</style>