Skip to content

Commit 1b61820

Browse files
webstackdevwebstackdev
committed
Refactor text-content-active classes on form elements to use CSS cascade
1 parent 800e7fc commit 1b61820

7 files changed

Lines changed: 47 additions & 20 deletions

File tree

‎src/components/Forms/Contact/client/validation.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,6 @@ const showGenericError = (field: GenericField, message: string): void => {
144144
const errorDiv = document.createElement('div')
145145
errorDiv.className = 'field-error'
146146
errorDiv.textContent = message
147-
errorDiv.style.cssText = 'color: var(--color-danger); font-size: 0.85rem; margin-top: 0.25rem;'
148147
errorDiv.setAttribute('aria-live', 'polite')
149148

150149
if (field.id) {

‎src/components/Forms/Contact/index.astro‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
---
22
import GDPRConsent from '@components/Consent/Checkbox/index.astro'
33
import Confetti from '@components/Animations/Confetti/index.astro'
4+
import styles from '../forms.module.css'
45
import './uppy-audio.css'
56
import './uppy-core.css'
67
import './uppy-dashboard.css'
78
import './uppy-webcam.css'
9+
import './validation.css'
810
---
911

1012
<contact-form>
@@ -14,7 +16,7 @@ import './uppy-webcam.css'
1416
<slot name="contact-form-header" />
1517

1618
<form
17-
class="space-y-8"
19+
class:list={[styles.formScope, 'space-y-8']}
1820
id="contactForm"
1921
method="post"
2022
enctype="multipart/form-data"
@@ -38,7 +40,7 @@ import './uppy-webcam.css'
3840

3941
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
4042
<div class="space-y-2">
41-
<label for="name" class="block text-sm font-medium text-content-active"
43+
<label for="name" class="block"
4244
>Full Name *</label
4345
>
4446
<input
@@ -63,7 +65,7 @@ import './uppy-webcam.css'
6365
</div>
6466

6567
<div class="space-y-2">
66-
<label for="email" class="block text-sm font-medium text-content-active"
68+
<label for="email" class="block"
6769
>Email Address *</label
6870
>
6971
<input
@@ -88,7 +90,7 @@ import './uppy-webcam.css'
8890

8991
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
9092
<div class="space-y-2">
91-
<label for="company" class="block text-sm font-medium text-content-active"
93+
<label for="company" class="block"
9294
>Company Name</label
9395
>
9496
<input
@@ -102,7 +104,7 @@ import './uppy-webcam.css'
102104
</div>
103105

104106
<div class="space-y-2">
105-
<label for="phone" class="block text-sm font-medium text-content-active"
107+
<label for="phone" class="block"
106108
>Phone Number</label
107109
>
108110
<input
@@ -125,7 +127,7 @@ import './uppy-webcam.css'
125127

126128
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
127129
<div class="space-y-2">
128-
<label for="project_type" class="block text-sm font-medium text-content-active"
130+
<label for="project_type" class="block"
129131
>Project Type</label
130132
>
131133
<select
@@ -147,7 +149,7 @@ import './uppy-webcam.css'
147149
</div>
148150

149151
<div class="space-y-2">
150-
<label for="budget" class="block text-sm font-medium text-content-active"
152+
<label for="budget" class="block"
151153
>Budget Range *</label
152154
>
153155
<select
@@ -166,7 +168,7 @@ import './uppy-webcam.css'
166168
</div>
167169

168170
<div class="space-y-2">
169-
<label for="timeline" class="block text-sm font-medium text-content-active"
171+
<label for="timeline" class="block"
170172
>Project Timeline *</label
171173
>
172174
<select
@@ -185,7 +187,7 @@ import './uppy-webcam.css'
185187
</div>
186188

187189
<div class="space-y-2">
188-
<label for="message" class="block text-sm font-medium text-content-active"
190+
<label for="message" class="block"
189191
>Project Description *</label
190192
>
191193
<textarea

‎src/components/Forms/Contact/validation.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@layer components {
2+
.field-error {
3+
color: var(--color-danger);
4+
font-size: var(--font-size-sm);
5+
margin-top: 0.25rem;
6+
}
7+
}

‎src/components/Forms/Download/index.astro‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// DownloadForm.astro - Gated form for download resources
33
import Confetti from '@components/Animations/Confetti/index.astro'
44
import GDPRConsent from '@components/Consent/Checkbox/index.astro'
5+
import styles from '../forms.module.css'
56
67
export interface Props {
78
title: string
@@ -27,11 +28,16 @@ const downloadUrl = `/downloads/${fileName}`
2728
</p>
2829
</div>
2930

30-
<form class="space-y-4" id="downloadForm" method="post" data-download-url={downloadUrl}>
31+
<form
32+
class:list={[styles.formScope, 'space-y-4']}
33+
id="downloadForm"
34+
method="post"
35+
data-download-url={downloadUrl}
36+
>
3137
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
3238
<!-- First Name -->
3339
<div class="space-y-2">
34-
<label for="firstName" class="block text-sm font-medium text-content-active">
40+
<label for="firstName" class="block">
3541
First Name <span class="text-red-500">*</span>
3642
</label>
3743
<input
@@ -49,7 +55,7 @@ const downloadUrl = `/downloads/${fileName}`
4955

5056
<!-- Last Name -->
5157
<div class="space-y-2">
52-
<label for="lastName" class="block text-sm font-medium text-content-active">
58+
<label for="lastName" class="block">
5359
Last Name <span class="text-red-500">*</span>
5460
</label>
5561
<input
@@ -68,7 +74,7 @@ const downloadUrl = `/downloads/${fileName}`
6874

6975
<!-- Work Email -->
7076
<div class="space-y-2">
71-
<label for="workEmail" class="block text-sm font-medium text-content-active">
77+
<label for="workEmail" class="block">
7278
Work Email <span class="text-red-500">*</span>
7379
</label>
7480
<input
@@ -85,7 +91,7 @@ const downloadUrl = `/downloads/${fileName}`
8591
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
8692
<!-- Job Title -->
8793
<div class="space-y-2">
88-
<label for="jobTitle" class="block text-sm font-medium text-content-active">
94+
<label for="jobTitle" class="block">
8995
Job Title <span class="text-red-500">*</span>
9096
</label>
9197
<input
@@ -102,7 +108,7 @@ const downloadUrl = `/downloads/${fileName}`
102108

103109
<!-- Company Name -->
104110
<div class="space-y-2">
105-
<label for="companyName" class="block text-sm font-medium text-content-active">
111+
<label for="companyName" class="block">
106112
Company Name <span class="text-red-500">*</span>
107113
</label>
108114
<input

‎src/components/Forms/Privacy/index.astro‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import { statusMessages } from '@components/Forms/Privacy/server'
3+
import styles from '../forms.module.css'
34
45
export interface Props {
56
status?: string | null
@@ -54,9 +55,9 @@ const statusMessage = status ? statusMessages[status] : undefined
5455
Request a copy of personal data we have about you, including consent records and newsletter subscriptions.
5556
</p>
5657

57-
<form id="access-form" class="mt-6 space-y-4" novalidate>
58+
<form id="access-form" class:list={[styles.formScope, 'mt-6 space-y-4']} novalidate>
5859
<div class="space-y-2">
59-
<label for="access-email" class="block text-sm font-semibold">Email Address</label>
60+
<label for="access-email" class="block">Email Address</label>
6061
<input
6162
type="email"
6263
id="access-email"
@@ -95,9 +96,9 @@ const statusMessage = status ? statusMessages[status] : undefined
9596
This action cannot be undone.
9697
</div>
9798

98-
<form id="delete-form" class="mt-6 space-y-4" novalidate>
99+
<form id="delete-form" class:list={[styles.formScope, 'mt-6 space-y-4']} novalidate>
99100
<div class="space-y-2">
100-
<label for="delete-email" class="block text-sm font-semibold">Email Address</label>
101+
<label for="delete-email" class="block">Email Address</label>
101102
<input
102103
type="email"
103104
id="delete-email"

‎src/components/Forms/forms.module.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@layer components {
2+
.formScope :global(label.block) {
3+
color: var(--color-content-active);
4+
font-size: var(--font-size-sm);
5+
font-weight: var(--font-weight-medium);
6+
}
7+
}

‎src/components/Forms/forms.module.css.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare const styles: {
2+
readonly formScope: string
3+
}
4+
5+
export default styles

0 commit comments

Comments
 (0)