Skip to content

Commit 89f05ce

Browse files
webstackdevwebstackdev
committed
Refactor border-border CSS classes to border-trim
1 parent 109c9e1 commit 89f05ce

36 files changed

Lines changed: 125 additions & 93 deletions

File tree

‎_TODO.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,3 +203,35 @@ Error Context: .cache/playwright/output/01-smoke-dynamic-pages-Dyn-8a015-ages-ha
203203
[webkit] › test/e2e/specs/01-smoke/dynamic-pages.spec.ts:171:3 › Dynamic Pages @smoke › @ready dynamic pages have no console errors
204204
[mobile-safari] › test/e2e/specs/01-smoke/dynamic-pages.spec.ts:171:3 › Dynamic Pages @smoke › @ready dynamic pages have no console errors
205205
```
206+
207+
Undefined var(--color-…) Tokens (definitely not in theme-inline.css)
208+
209+
--color-text (9): index.astro:47, button.module.css:56
210+
--color-bg-offset (4): index.astro:36, button.module.css:150
211+
--color-danger-bg (4): index.astro:33, index.module.css:12
212+
--color-success-bg (3): index.astro:38, index.astro:198
213+
--color-twitter (3): button.module.css:93
214+
--color-border (2): themePicker.module.css:51, index.ts:461
215+
--color-gray-500 (2): uppy-dashboard.css:3292
216+
--color-link-shadow (2): index.ts:30
217+
Singles: --color-error, --color-error-bg, --color-error-border, --color-error-text (all in index.astro:205); --color-gray-100 (uppy-dashboard.css:3112); --color-info-bg (index.astro:35); --color-success-border, --color-success-text (index.astro:199); --color-theme-sprites (ADDING_ICONS.md:50)
218+
219+
Tailwind Color Utilities Not Backed By Theme Tokens (quoted class strings)
220+
High-frequency / likely broken given the @theme contract:
221+
222+
border-trim (91): e.g. index.astro:23, index.astro:22
223+
Theme has --color-trim for borders, not --color-border.
224+
bg-content-inverse-offset (52): e.g. index.astro:134, index.astro:14
225+
text-content-muted (47): e.g. index.astro:20
226+
text-offset (13): e.g. index.astro:39
227+
bg-primary-bg (7): e.g. index.astro:67
228+
stroke-text (not a theme token) (seen in class attrs): e.g. index.astro:94
229+
bg-text (2): index.astro:111, index.spec.ts:299
230+
231+
Default-palette style utilities that don’t exist in theme-inline.css (so likely broken now unless reintroduced elsewhere):
232+
233+
bg-gray-100 (4): e.g. index.astro:166
234+
text-blue-400 (16): e.g. index.astro:205
235+
bg-blue-50 (5): e.g. index.astro:147
236+
border-blue-200 (3): e.g. index.astro:826
237+
Similar one-offs: bg-purple-100, text-purple-600, border-blue-500, bg-orange-100, etc. (all in the scan output)

‎src/components/Animations/Computers/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import Icon from '@components/Icon/index.astro'
99
<div class="relative w-full max-w-lg mx-auto">
1010
<button
1111
type="button"
12-
class="absolute bottom-1 right-1 z-10 flex items-center justify-center rounded-full border border-border bg-content-inverse p-1 shadow-lg transition-colors hover:bg-content-inverse-offset"
12+
class="absolute bottom-1 right-1 z-10 flex items-center justify-center rounded-full border border-trim bg-content-inverse p-1 shadow-lg transition-colors hover:bg-content-inverse-offset"
1313
data-animation-toggle
1414
aria-label="Pause animation"
1515
aria-pressed="false"

‎src/components/BugReporter/index.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const {
2929
<dialog
3030
id={dialogId}
3131
aria-label="Report a bug"
32-
class="bg-content-inverse border border-border rounded-md p-4 max-w-xl w-[min(42rem,90vw)]"
32+
class="bg-content-inverse border border-trim rounded-md p-4 max-w-xl w-[min(42rem,90vw)]"
3333
>
3434
<div class="flex items-start justify-between gap-4">
3535
<h2 class="text-xl font-bold">Report a bug</h2>
@@ -52,7 +52,7 @@ const {
5252
<input
5353
name="name"
5454
autocomplete="name"
55-
class="mt-1 w-full rounded-md border border-border bg-content-inverse-offset p-2"
55+
class="mt-1 w-full rounded-md border border-trim bg-content-inverse-offset p-2"
5656
placeholder="Your name"
5757
/>
5858
</label>
@@ -63,7 +63,7 @@ const {
6363
name="email"
6464
type="email"
6565
autocomplete="email"
66-
class="mt-1 w-full rounded-md border border-border bg-content-inverse-offset p-2"
66+
class="mt-1 w-full rounded-md border border-trim bg-content-inverse-offset p-2"
6767
placeholder="your.email@example.org"
6868
/>
6969
</label>
@@ -74,7 +74,7 @@ const {
7474
name="message"
7575
required
7676
rows="5"
77-
class="mt-1 w-full rounded-md border border-border bg-content-inverse-offset p-2"
77+
class="mt-1 w-full rounded-md border border-trim bg-content-inverse-offset p-2"
7878
placeholder="What's the bug? What did you expect?"
7979
></textarea>
8080
</label>

‎src/components/Calendar/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const { ...rest } = Astro.props
1919

2020
<div
2121
data-calendar-menu
22-
class="hidden mt-2 border border-border rounded-md bg-content-inverse text-content p-3 w-[min(22rem,90vw)]"
22+
class="hidden mt-2 border border-trim rounded-md bg-content-inverse text-content p-3 w-[min(22rem,90vw)]"
2323
role="menu"
2424
aria-label="Add this event to your calendar"
2525
>

‎src/components/CallToAction/Newsletter/index.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const {
3333
<section class="py-12 md:py-16 bg-content-inverse-offset">
3434
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
3535
<div class="max-w-4xl mx-auto">
36-
<div class="bg-content-inverse rounded-2xl shadow-lg p-8 md:p-12 border border-border">
36+
<div class="bg-content-inverse rounded-2xl shadow-lg p-8 md:p-12 border border-trim">
3737
<div class="text-center mb-8">
3838
<div
3939
class="inline-flex items-center justify-center w-16 h-16 bg-linear-to-br from-primary to-accent rounded-full mb-6"
@@ -79,7 +79,7 @@ const {
7979
id="newsletter-email"
8080
name="email"
8181
placeholder={placeholder}
82-
class="w-full px-6 py-4 border-2 border-border rounded-xl bg-content-inverse placeholder:text-content-active focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
82+
class="w-full px-6 py-4 border-2 border-trim rounded-xl bg-content-inverse placeholder:text-content-active focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
8383
required
8484
aria-describedby="newsletter-message"
8585
/>

‎src/components/Carousel/index.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug}`
5353
<article class="group h-full">
5454
<a
5555
href={`/${type}/${item.id}`}
56-
class="block h-full bg-content-inverse rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-border hover:border-primary transform hover:-translate-y-2"
56+
class="block h-full bg-content-inverse rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-trim hover:border-primary transform hover:-translate-y-2"
5757
>
5858
{item.data.cover && (
5959
<div class="relative aspect-video overflow-hidden">
@@ -106,7 +106,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug}`
106106
{/* Navigation Buttons */}
107107
<button
108108
type="button"
109-
class="embla__button embla__button--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-border shadow-lg hover:bg-spotlight hover:border-primary transition-all duration-300 flex items-center justify-center z-10 disabled:opacity-30 disabled:cursor-not-allowed"
109+
class="embla__button embla__button--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-spotlight hover:border-primary transition-all duration-300 flex items-center justify-center z-10 disabled:opacity-30 disabled:cursor-not-allowed"
110110
aria-label="Previous slide"
111111
data-carousel-prev
112112
>
@@ -129,7 +129,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug}`
129129

130130
<button
131131
type="button"
132-
class="embla__button embla__button--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-border shadow-lg hover:bg-spotlight hover:border-primary transition-all duration-300 flex items-center justify-center z-10 disabled:opacity-30 disabled:cursor-not-allowed"
132+
class="embla__button embla__button--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-spotlight hover:border-primary transition-all duration-300 flex items-center justify-center z-10 disabled:opacity-30 disabled:cursor-not-allowed"
133133
aria-label="Next slide"
134134
data-carousel-next
135135
>

‎src/components/Consent/Checkbox/index.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const {
2929

3030
<consent-checkbox data-purpose={purpose} data-form-id={formId ?? undefined}>
3131
<div
32-
class="bg-content-inverse-offset border border-border rounded-lg my-6 p-4"
32+
class="bg-content-inverse-offset border border-trim rounded-lg my-6 p-4"
3333
id={`${id}-container`}
3434
data-component="gdpr-consent"
3535
data-purpose={purpose}
@@ -44,7 +44,7 @@ const {
4444
aria-labelledby={`${id}-label`}
4545
aria-describedby={`${id}-description`}
4646
aria-invalid="false"
47-
class="border-2 border-border rounded mt-0.5 h-5 w-5 shrink-0 cursor-pointer focus:outline-2 focus:outline-offset-2 focus:outline-primary checked:bg-spotlight checked:border-primary"
47+
class="border-2 border-trim rounded mt-0.5 h-5 w-5 shrink-0 cursor-pointer focus:outline-2 focus:outline-offset-2 focus:outline-primary checked:bg-spotlight checked:border-primary"
4848
/>
4949
<span id={`${id}-label`} class="sr-only">Consent to data processing</span>
5050
<span id={`${id}-description`} class="flex-1 text-sm leading-relaxed">

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import './uppy-webcam.css'
3030
</div>
3131

3232
<!-- Personal Information -->
33-
<div class="pb-6 border-b border-border">
33+
<div class="pb-6 border-b border-trim">
3434
<h3 class="flex items-center text-xl font-semibold mb-6">
3535
<div class="w-1 h-5 bg-spotlight rounded-full mr-3"></div>
3636
Contact Information
@@ -45,7 +45,7 @@ import './uppy-webcam.css'
4545
type="text"
4646
id="name"
4747
name="name"
48-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
48+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
4949
required
5050
placeholder="Your full name"
5151
minlength="2"
@@ -70,7 +70,7 @@ import './uppy-webcam.css'
7070
type="email"
7171
id="email"
7272
name="email"
73-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
73+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
7474
required
7575
placeholder="your.email@example.com"
7676
aria-invalid="false"
@@ -95,7 +95,7 @@ import './uppy-webcam.css'
9595
type="text"
9696
id="company"
9797
name="company"
98-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
98+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
9999
placeholder="Your company name"
100100
maxlength="100"
101101
/>
@@ -109,15 +109,15 @@ import './uppy-webcam.css'
109109
type="tel"
110110
id="phone"
111111
name="phone"
112-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
112+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
113113
placeholder="+1 (555) 123-4567"
114114
/>
115115
</div>
116116
</div>
117117
</div>
118118

119119
<!-- Project Information -->
120-
<div class="pb-6 border-b border-border">
120+
<div class="pb-6 border-b border-trim">
121121
<h3 class="flex items-center text-xl font-semibold mb-6">
122122
<div class="w-1 h-5 bg-spotlight rounded-full mr-3"></div>
123123
Project Details
@@ -131,7 +131,7 @@ import './uppy-webcam.css'
131131
<select
132132
id="project_type"
133133
name="project_type"
134-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 cursor-pointer"
134+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 cursor-pointer"
135135
>
136136
<option value="">Select project type</option>
137137
<option value="website">New Website</option>
@@ -154,7 +154,7 @@ import './uppy-webcam.css'
154154
id="budget"
155155
name="budget"
156156
required
157-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 cursor-pointer"
157+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 cursor-pointer"
158158
>
159159
<option value="">Select budget range</option>
160160
<option value="5k-10k">$5,000 - $10,000</option>
@@ -172,7 +172,7 @@ import './uppy-webcam.css'
172172
<select
173173
id="timeline"
174174
name="timeline"
175-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 cursor-pointer"
175+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 cursor-pointer"
176176
>
177177
<option value="">Select timeline</option>
178178
<option value="asap">ASAP</option>
@@ -191,7 +191,7 @@ import './uppy-webcam.css'
191191
<textarea
192192
id="message"
193193
name="message"
194-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 resize-vertical min-h-30"
194+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 resize-vertical min-h-30"
195195
rows="6"
196196
required
197197
placeholder="Describe your project, goals, target audience, and any specific requirements..."
@@ -224,7 +224,7 @@ import './uppy-webcam.css'
224224
</p>
225225

226226
<div
227-
class="border-2 border-dashed border-border rounded-xl p-8 text-center bg-content-inverse-offset hover:border-primary-hover transition-colors duration-200"
227+
class="border-2 border-dashed border-trim rounded-xl p-8 text-center bg-content-inverse-offset hover:border-primary-hover transition-colors duration-200"
228228
>
229229
<div id="uppyContainer" hidden>
230230
<div id="uppyDashboard"></div>
@@ -250,7 +250,7 @@ import './uppy-webcam.css'
250250

251251
<!-- Data Retention Notice -->
252252
<div
253-
class="text-sm text-content-active space-y-2 bg-content-inverse-offset p-4 rounded-lg border border-border"
253+
class="text-sm text-content-active space-y-2 bg-content-inverse-offset p-4 rounded-lg border border-trim"
254254
>
255255
<p>
256256
<strong>Data Retention:</strong> Your contact information will be stored for 90 days to respond

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const downloadUrl = `/downloads/${fileName}`
1717
---
1818

1919
<download-form class={`download-form-wrapper mx-auto max-w-2xl ${className}`.trim()}>
20-
<div class="bg-content-inverse p-6 md:p-8 rounded-2xl shadow-lg border border-border">
20+
<div class="bg-content-inverse p-6 md:p-8 rounded-2xl shadow-lg border border-trim">
2121
<div class="mb-6">
2222
<h3 class="text-xl md:text-2xl font-semibold mb-2">
2323
Download {title}
@@ -39,7 +39,7 @@ const downloadUrl = `/downloads/${fileName}`
3939
id="firstName"
4040
name="firstName"
4141
autocomplete="given-name"
42-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
42+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
4343
required
4444
placeholder="John"
4545
minlength="2"
@@ -57,7 +57,7 @@ const downloadUrl = `/downloads/${fileName}`
5757
id="lastName"
5858
name="lastName"
5959
autocomplete="family-name"
60-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
60+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
6161
required
6262
placeholder="Doe"
6363
minlength="2"
@@ -76,7 +76,7 @@ const downloadUrl = `/downloads/${fileName}`
7676
id="workEmail"
7777
name="workEmail"
7878
autocomplete="email"
79-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
79+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
8080
required
8181
placeholder="john.doe@company.com"
8282
/>
@@ -93,7 +93,7 @@ const downloadUrl = `/downloads/${fileName}`
9393
id="jobTitle"
9494
name="jobTitle"
9595
autocomplete="organization-title"
96-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
96+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
9797
required
9898
placeholder="Software Engineer"
9999
maxlength="100"
@@ -110,7 +110,7 @@ const downloadUrl = `/downloads/${fileName}`
110110
id="companyName"
111111
name="companyName"
112112
autocomplete="organization"
113-
class="w-full px-4 py-3 border-2 border-border rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
113+
class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
114114
required
115115
placeholder="Acme Corporation"
116116
maxlength="100"
@@ -126,7 +126,7 @@ const downloadUrl = `/downloads/${fileName}`
126126
/>
127127

128128
<!-- Privacy Notice -->
129-
<div class="pt-4 border-t border-border">
129+
<div class="pt-4 border-t border-trim">
130130
<p class="text-xs text-content-active leading-relaxed">
131131
By submitting this form, you agree to receive marketing communications from Webstack
132132
Builders. You can unsubscribe at any time. View our

0 commit comments

Comments
 (0)