design

apps/frontend/src/app/features/projects/furniture-section.component.scss

@@ -83,12 +83,13 @@ p {
   width: min(42rem, calc(100vw - 2 * var(--space-3)));
   max-width: none;
   max-height: calc(100dvh - 2 * var(--space-3));
-  border: 0;
+  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
+  border-top: 0.25rem solid var(--color-primary);
+  border-radius: var(--radius-2xl);
   padding: 0;
   color: var(--color-text-primary);
   background: var(--color-surface);
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-lg);
 }
 
 .editor-dialog--wide {
@@ -100,18 +101,26 @@ p {
 }
 
 .editor-dialog::backdrop {
-  background: color-mix(in srgb, var(--color-text-primary) 52%, transparent);
+  background: color-mix(in srgb, var(--color-text-primary) 48%, transparent);
+  backdrop-filter: blur(0.2rem);
 }
 
 .editor-dialog form {
   display: grid;
-  gap: var(--space-5);
+  gap: var(--space-6);
-  padding: var(--space-5);
+  padding: var(--space-6);
 }
 
 .editor-dialog header {
   display: grid;
   gap: var(--space-2);
+  padding-block-end: var(--space-5);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.editor-dialog header h3 {
+  font-size: var(--font-size-xl);
+  letter-spacing: -0.015em;
 }
 
 .editor-dialog header p {
@@ -127,7 +136,7 @@ p {
 label {
   display: grid;
   gap: var(--space-2);
-  color: var(--color-text-secondary);
+  color: var(--color-text-primary);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
 }
@@ -144,9 +153,62 @@ textarea {
   width: 100%;
 }
 
+.editor-dialog input:not([type='checkbox'], [type='radio']),
+.editor-dialog select,
+.editor-dialog textarea {
+  min-height: 3rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius-xl);
+  padding-inline: var(--space-4);
+  color: var(--color-text-primary);
+  background: var(--color-neutral-subtle);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 70%, transparent);
+  transition:
+    background-color var(--transition-fast) ease,
+    border-color var(--transition-fast) ease,
+    box-shadow var(--transition-fast) ease;
+}
+
+.editor-dialog textarea {
+  min-height: 7rem;
+  padding-block: var(--space-4);
+  resize: vertical;
+}
+
+.editor-dialog input:not([type='checkbox'], [type='radio']):hover,
+.editor-dialog select:hover,
+.editor-dialog textarea:hover {
+  border-color: var(--color-border-strong);
+  background: var(--color-surface);
+}
+
+.editor-dialog input:not([type='checkbox'], [type='radio']):focus,
+.editor-dialog select:focus,
+.editor-dialog textarea:focus {
+  border-color: var(--color-focus);
+  outline: 0;
+  background: var(--color-surface);
+  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-focus) 20%, transparent);
+}
+
+.editor-dialog input::placeholder,
+.editor-dialog textarea::placeholder {
+  color: var(--color-text-muted);
+}
+
+.editor-dialog input[type='checkbox'],
+.editor-dialog input[type='radio'] {
+  width: 1.2rem;
+  height: 1.2rem;
+  flex: 0 0 auto;
+  accent-color: var(--color-primary);
+}
+
 details {
-  border-top: 1px solid var(--color-border);
+  border: 1px solid var(--color-border);
-  padding-block-start: var(--space-4);
+  border-radius: var(--radius-xl);
+  padding: var(--space-4);
+  background: color-mix(in srgb, var(--color-neutral-subtle) 55%, var(--color-surface));
 }
 
 summary {
@@ -165,7 +227,8 @@ summary {
   align-items: center;
   color: var(--color-text-secondary);
   background: var(--color-primary-subtle);
-  border-radius: var(--radius-md);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
+  border-radius: var(--radius-xl);
   padding: var(--space-4);
 }
 
@@ -189,8 +252,24 @@ fieldset {
   display: flex;
   align-items: center;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-xl);
-  padding: var(--space-3);
+  padding: var(--space-4);
+  background: var(--color-surface);
+  transition:
+    border-color var(--transition-fast) ease,
+    background-color var(--transition-fast) ease,
+    box-shadow var(--transition-fast) ease;
+}
+
+.option-choice:hover {
+  border-color: var(--color-primary);
+  background: var(--color-primary-subtle);
+}
+
+.option-choice:has(input:checked) {
+  border-color: var(--color-primary);
+  background: var(--color-primary-subtle);
+  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--color-primary) 16%, transparent);
 }
 
 .option-choice input {
@@ -212,7 +291,11 @@ fieldset {
   gap: var(--space-3);
   border-top: 1px solid var(--color-border);
   background: var(--color-surface);
-  padding-block-start: var(--space-4);
+  margin-inline: calc(-1 * var(--space-6));
+  margin-block-end: calc(-1 * var(--space-6));
+  padding: var(--space-4) var(--space-6);
+  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
+  box-shadow: 0 -0.25rem 1rem color-mix(in srgb, var(--color-text-primary) 5%, transparent);
 }
 
 @media (min-width: 36rem) {
@@ -238,12 +321,28 @@ fieldset {
 }
 
 @media (max-width: 35.99rem) {
+  .editor-dialog,
+  .editor-dialog--wide,
+  .editor-dialog--small {
+    inset: auto 0 0;
+    width: 100%;
+    max-height: 92dvh;
+    margin: 0;
+    border-inline: 0;
+    border-bottom: 0;
+    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+  }
+
   .editor-dialog form {
     padding: var(--space-4);
   }
 
   .editor-dialog footer {
     flex-direction: column-reverse;
+    margin-inline: calc(-1 * var(--space-4));
+    margin-block-end: calc(-1 * var(--space-4));
+    padding: var(--space-4);
+    border-radius: 0;
   }
 
   .editor-dialog footer .ui-button {

apps/frontend/src/styles/_tokens.scss

@@ -53,9 +53,12 @@
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
+  --radius-xl: 0.875rem;
+  --radius-2xl: 1.25rem;
   --radius-pill: 999px;
   --shadow-sm: 0 1px 2px rgb(24 35 49 / 8%);
   --shadow-md: 0 8px 24px rgb(24 35 49 / 12%);
+  --shadow-lg: 0 20px 60px rgb(24 35 49 / 20%);
   --z-header: 20;
   --z-drawer: 30;
   --z-overlay: 40;