diff --git a/apps/frontend/src/app/features/projects/furniture-section.component.scss b/apps/frontend/src/app/features/projects/furniture-section.component.scss index b916938..b10bddb 100644 --- a/apps/frontend/src/app/features/projects/furniture-section.component.scss +++ b/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-radius: var(--radius-lg); + border: 1px solid var(--color-border); + 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); - padding: var(--space-5); + gap: var(--space-6); + 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); - padding-block-start: var(--space-4); + border: 1px solid var(--color-border); + 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); - padding: var(--space-3); + border-radius: var(--radius-xl); + 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 { diff --git a/apps/frontend/src/styles/_tokens.scss b/apps/frontend/src/styles/_tokens.scss index cd2680e..4c70ce4 100644 --- a/apps/frontend/src/styles/_tokens.scss +++ b/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;