Justin Edmund
a31291d69f
- Replace 802 instances of $grey- variables with $gray- across 106 files - Remove legacy color aliases from variables.scss - Maintain consistent naming convention throughout codebase This completes the migration to the new color scale system. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
70 lines
1.3 KiB
Svelte
70 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import Input from './Input.svelte'
|
|
import type { ProjectFormData } from '$lib/types/project'
|
|
|
|
interface Props {
|
|
formData: ProjectFormData
|
|
validationErrors: Record<string, string>
|
|
}
|
|
|
|
let { formData = $bindable(), validationErrors }: Props = $props()
|
|
</script>
|
|
|
|
<div class="form-section">
|
|
<h2>Styling</h2>
|
|
|
|
<div class="form-row">
|
|
<Input
|
|
type="text"
|
|
bind:value={formData.backgroundColor}
|
|
label="Background Color"
|
|
helpText="Hex color for project card"
|
|
error={validationErrors.backgroundColor}
|
|
placeholder="#FFFFFF"
|
|
pattern="^#[0-9A-Fa-f]{6}$"
|
|
colorSwatch={true}
|
|
/>
|
|
|
|
<Input
|
|
type="text"
|
|
bind:value={formData.highlightColor}
|
|
label="Highlight Color"
|
|
helpText="Accent color for the project"
|
|
error={validationErrors.highlightColor}
|
|
placeholder="#000000"
|
|
pattern="^#[0-9A-Fa-f]{6}$"
|
|
colorSwatch={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.form-section {
|
|
margin-bottom: $unit-6x;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin: 0 0 $unit-3x;
|
|
color: $gray-10;
|
|
}
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: $unit-2x;
|
|
|
|
@include breakpoint('phone') {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
:global(.input-wrapper) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
</style>
|