Skip to content

Commit 5241082

Browse files
webstackdevwebstackdev
committed
fill-* and decoration-* CSS class refactors
1 parent 97879da commit 5241082

8 files changed

Lines changed: 48 additions & 38 deletions

File tree

‎src/components/BugReporter/index.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const {
3636
<button
3737
id={closeButtonId}
3838
type="button"
39-
class="text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
39+
class="text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
4040
>
4141
Close
4242
</button>
@@ -92,7 +92,7 @@ const {
9292
<button
9393
id={cancelButtonId}
9494
type="button"
95-
class="text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
95+
class="text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
9696
>
9797
Cancel
9898
</button>

‎src/components/Calendar/index.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const { ...rest } = Astro.props
99
type="button"
1010
data-calendar-trigger
1111
aria-expanded="false"
12-
class="inline-flex items-center text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
12+
class="inline-flex items-center text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
1313
>
1414
<span class="[&_.icon]:h-5 [&_.icon]:w-5">
1515
<Icon name="calendar-generic-ical" variant="inherit" />
@@ -28,7 +28,7 @@ const { ...rest } = Astro.props
2828
data-calendar-link="google"
2929
href="https://calendar.google.com/calendar/render"
3030
rel="noopener"
31-
class="flex items-center text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
31+
class="flex items-center text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
3232
>
3333
<span class="[&_.icon]:h-5 [&_.icon]:w-5">
3434
<Icon name="calendar-google" variant="inherit" />
@@ -40,7 +40,7 @@ const { ...rest } = Astro.props
4040
data-calendar-link="outlook"
4141
href="https://outlook.office.com/calendar/0/deeplink/compose"
4242
rel="noopener"
43-
class="flex items-center text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
43+
class="flex items-center text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
4444
>
4545
<span class="[&_.icon]:h-5 [&_.icon]:w-5">
4646
<Icon name="calendar-outlook" variant="inherit" />
@@ -51,7 +51,7 @@ const { ...rest } = Astro.props
5151
<button
5252
type="button"
5353
data-calendar-download-ics
54-
class="flex items-center text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
54+
class="flex items-center text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
5555
>
5656
<span class="[&_.icon]:h-5 [&_.icon]:w-5">
5757
<Icon name="calendar_apple" variant="inherit" />

‎src/components/Copy/index.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ const floatButtonClass =
4444
: ''
4545
4646
const iconButtonColorClass = [
47-
'text-content fill-text',
48-
'hover:text-text-offset hover:fill-text-offset',
49-
'focus-visible:text-text-offset focus-visible:fill-text-offset',
47+
'text-content fill-content',
48+
'hover:text-text-offset hover:fill-content-active',
49+
'focus-visible:text-text-offset focus-visible:fill-content-active',
5050
'cursor-pointer',
5151
].join(' ')
5252
---

‎src/components/Footer/index.astro‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const year = new Date().getFullYear()
4040
<p class="hyphens-none">
4141
<a
4242
href={`mailto:${contactData.company.email}`}
43-
class="text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
43+
class="text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
4444
>
4545
{contactData.company.email}
4646
</a>
@@ -49,7 +49,7 @@ const year = new Date().getFullYear()
4949
<a
5050
href={`tel:${contactData.company.telephoneTollFree}`}
5151
rel="nofollow"
52-
class="text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
52+
class="text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
5353
>
5454
Toll Free {formatPhoneNumber(contactData.company.telephoneTollFree)}
5555
</a>
@@ -58,7 +58,7 @@ const year = new Date().getFullYear()
5858
<a
5959
href={`tel:${contactData.company.telephoneLocal}`}
6060
rel="nofollow"
61-
class="text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
61+
class="text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
6262
>
6363
Local {formatPhoneNumber(contactData.company.telephoneLocal)}
6464
</a>
@@ -72,7 +72,7 @@ const year = new Date().getFullYear()
7272
id="page-footer__hire-me-anchor"
7373
class:list={[
7474
styles.footerHireMeAnchor,
75-
"hidden uppercase text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none after:content-['>']",
75+
"hidden uppercase text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none after:content-['>']",
7676
]}
7777
aria-label="Available Now. Hire Me"
7878
>
@@ -91,7 +91,7 @@ const year = new Date().getFullYear()
9191
href={social.url}
9292
title={social.displayName}
9393
rel="me"
94-
class="flex items-baseline uppercase text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
94+
class="flex items-baseline uppercase text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
9595
>
9696
<span class="[&_.icon]:h-4 [&_.icon]:w-4">
9797
<Icon name={social.iconName} variant="inherit" />
@@ -114,7 +114,7 @@ const year = new Date().getFullYear()
114114
<span class="flex flex-col justify-center lg:pt-3">
115115
<a
116116
href="/#newsletter"
117-
class="text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
117+
class="text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
118118
>
119119
<div class="lg:hidden">Subscribe to</div>
120120
<span class="lg:font-bold lg:uppercase">Mailing List</span>
@@ -128,7 +128,7 @@ const year = new Date().getFullYear()
128128
<span>
129129
<a
130130
href="/consent"
131-
class="text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
131+
class="text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
132132
>
133133
<span class="lg:font-bold lg:uppercase">Consent</span>
134134
<span class="hidden lg:block text-text">
@@ -139,7 +139,7 @@ const year = new Date().getFullYear()
139139
<span>
140140
<a
141141
href="/privacy"
142-
class="text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
142+
class="text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
143143
>
144144
<span class="lg:font-bold lg:uppercase">Privacy Policy</span>
145145
<span class="hidden lg:block text-text">
@@ -153,7 +153,7 @@ const year = new Date().getFullYear()
153153
<a
154154
href={`${getSiteUrl()}/rss.xml`}
155155
title="RSS Feed"
156-
class="text-content [&_.icon]:fill-text! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
156+
class="text-content [&_.icon]:fill-content! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
157157
>
158158
<span class="sr-only">RSS Feed</span>
159159
<span><Icon name="feed" variant="inherit" /></span>
@@ -169,7 +169,7 @@ const year = new Date().getFullYear()
169169
<a
170170
rel="me"
171171
href={getSiteUrl()}
172-
class="text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
172+
class="text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
173173
>
174174
{contactData.company.name}
175175
</a>
@@ -180,7 +180,7 @@ const year = new Date().getFullYear()
180180
<a
181181
href={`${getSiteUrl()}/rss.xml`}
182182
title="RSS Feed"
183-
class="text-content [&_.icon]:fill-text! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
183+
class="text-content [&_.icon]:fill-content! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
184184
>
185185
<span class="sr-only">RSS Feed</span>
186186
<span><Icon name="feed" variant="inherit" /></span>
@@ -193,7 +193,7 @@ const year = new Date().getFullYear()
193193
id="bugReporterTrigger"
194194
type="button"
195195
title="Report a bug"
196-
class="text-content [&_.icon]:fill-text! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
196+
class="text-content [&_.icon]:fill-content! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
197197
>
198198
<span class="sr-only">Report a bug</span>
199199
<span><Icon name="bug" variant="inherit" /></span>

‎src/components/Icon/constants.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const colorClasses = {
2-
default: 'text-content fill-text',
3-
muted: 'text-text-offset fill-text-offset',
2+
default: 'text-content fill-content',
3+
muted: 'text-text-offset fill-content-active',
44
primary: 'text-primary fill-primary',
55
accent: 'text-accent fill-accent',
66
info: 'text-info fill-info',

‎src/components/Social/common/platforms.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ export interface ShareData {
3333
*/
3434
export const platforms: SharePlatform[] = [
3535
{
36-
name: 'X (Twitter)',
37-
id: 'twitter',
36+
name: 'X',
37+
id: 'x',
3838
getShareUrl: ({ text, url }) =>
3939
`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`,
40-
ariaLabel: 'Share on X (Twitter)',
41-
icon: 'twitter',
42-
colorClasses: 'bg-[#1DA1F2] hover:bg-[#1a91da] text-white',
40+
ariaLabel: 'Share on X',
41+
icon: 'x',
42+
colorClasses: 'bg-x hover:bg-x-active text-white',
4343
},
4444
{
4545
name: 'LinkedIn',
@@ -48,7 +48,7 @@ export const platforms: SharePlatform[] = [
4848
`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`,
4949
ariaLabel: 'Share on LinkedIn',
5050
icon: 'linkedin',
51-
colorClasses: 'bg-[#0077b5] hover:bg-[#005885] text-white',
51+
colorClasses: 'bg-linkedin hover:bg-linkedin-active text-white',
5252
},
5353
{
5454
name: 'Bluesky',
@@ -57,7 +57,7 @@ export const platforms: SharePlatform[] = [
5757
`https://bsky.app/intent/compose?text=${encodeURIComponent(`${text} ${url}`)}`,
5858
ariaLabel: 'Share on Bluesky',
5959
icon: 'bluesky',
60-
colorClasses: 'bg-[#00A8E8] hover:bg-[#0087bd] text-white',
60+
colorClasses: 'bg-bluesky hover:bg-bluesky-active text-white',
6161
},
6262
{
6363
name: 'Reddit',
@@ -66,15 +66,15 @@ export const platforms: SharePlatform[] = [
6666
`https://reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`,
6767
ariaLabel: 'Share on Reddit',
6868
icon: 'reddit',
69-
colorClasses: 'bg-[#FF4500] hover:bg-[#e03d00] text-white',
69+
colorClasses: 'bg-reddit hover:bg-reddit-active text-white',
7070
},
7171
{
7272
name: 'Mastodon',
7373
id: 'mastodon',
7474
getShareUrl: () => '', // Modal handles URL generation
7575
ariaLabel: 'Share on Mastodon',
7676
icon: 'mastodon',
77-
colorClasses: 'bg-[#6364FF] hover:bg-[#5557e6] text-white',
77+
colorClasses: 'bg-mastodon hover:bg-mastodon-active text-white',
7878
useModal: true,
7979
},
8080
]

‎src/styles/COLOR_INVENTORY.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
background: var(--color-bg-page-base-offset);
2-
bg-[#1DA1F2]
32

4-
fill-text
5-
fill-text-offset
3+
fill-content
4+
fill-content-active

‎src/styles/theme-inline.css‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -140,12 +140,15 @@
140140
* Palette colors
141141
* =============================================================================
142142
*/
143-
--color-black: #000000;
143+
--color-black: #000;
144+
--color-white: #fff;
144145

146+
/** Blues */
145147
--color-blue-100: #dbeafe;
146148
--color-blue-600: #2563eb;
147149
--color-blue-900: #1e3a8a;
148150

151+
/** Grays */
149152
--color-gray-50: #f9fafb;
150153
--color-gray-200: #e5e7eb;
151154
--color-gray-300: #d1d5db;
@@ -154,20 +157,28 @@
154157
--color-gray-800: #1f2937;
155158
--color-gray-offset: #9ca3af;
156159

160+
/** Greens */
157161
--color-green-100: #d1fae5;
158162
--color-green-900: #14532d;
159163

160-
--color-white: #ffffff;
161-
162164
/**
163165
* =============================================================================
164166
* Vendor colors
165167
* =============================================================================
166168
*/
167169

170+
--color-bluesky: #00A8E8;
171+
--color-bluesky-active: #0087bd;
168172
--color-codepen: #000;
173+
--color-codepen-active: #1a1a1a;
169174
--color-github: #211F1F;
175+
--color-github-active: #333131;
170176
--color-linkedin: #0a66c2;
177+
--color-linkedin-active: #084c9e;
171178
--color-mastodon: #6364FF;
179+
--color-mastodon-active: #5557e6;
180+
--color-reddit: #FF4500;
181+
--color-reddit-active: #e03d00;
172182
--color-x: #000;
183+
--color-x-active: #1a1a1a;
173184
}

0 commit comments

Comments
 (0)