jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(visual-fidelity): components — batches B,E,G,H

Browse source 
- B: token-equivalent rgba → color-mix in SignupFlowOverlay, OnboardingWidget
- E: drop text-white Tailwind utility from ImageUpload remove-button (now color: var(--parch-text) inline)
- G: typography off-scale snaps (9→10, 14→13, 15→16, 19→18 px)
- H: padding off-scale snaps in BoardPostCard/Form, CirclePicker, FilterBar, LoginModal
This commit is contained in:
Jennie Robinson Faber 2026-04-30 00:13:13 +01:00
parent cb93f14160
commit d6cdf45838
9 changed files with 18 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/components/BoardPostCard.vue
View file

@ -158,7 +158,7 @@ const slackLinks = computed(() => {
<style scoped>
.board-post {
border: 1px dashed var(--border);
padding: 18px 22px;
padding: 20px 24px;
background: var(--surface);
break-inside: avoid;
-webkit-column-break-inside: avoid;
@ -219,7 +219,7 @@ const slackLinks = computed(() => {
.post-title {
font-family: "Brygada 1918", serif;
font-size: 19px;
font-size: 18px;
font-weight: 500;
color: var(--text-bright);
margin: 0 0 12px;

6
app/components/BoardPostForm.vue
View file

@ -138,7 +138,7 @@ function handleSubmit() {
<style scoped>
.post-form {
border: 1px dashed var(--border);
padding: 14px 16px;
padding: 16px 16px;
background: transparent;
}
@ -147,7 +147,7 @@ function handleSubmit() {
}
.form-title {
font-family: "Brygada 1918", serif;
font-size: 15px;
font-size: 16px;
font-weight: 500;
color: var(--text-bright);
}
@ -183,7 +183,7 @@ function handleSubmit() {
color: var(--text-faint);
text-transform: none;
letter-spacing: 0;
font-size: 9px;
font-size: 10px;
margin-left: 4px;
opacity: 0.7;
}

4
app/components/CirclePicker.vue
View file

@ -48,7 +48,7 @@ defineEmits(['update:modelValue'])
.circle-option {
border: 1px dashed var(--border);
padding: 14px 12px;
padding: 12px 12px;
background: var(--bg);
cursor: pointer;
transition: all 0.15s;
@ -83,7 +83,7 @@ defineEmits(['update:modelValue'])
}
.circle-tag {
font-size: 9px;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 6px;

2
app/components/EventsMiniSidebar.vue
View file

@ -104,7 +104,7 @@ const formatDate = (dateStr) => {
}
.em-circle {
font-size: 9px;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 2px;

2
app/components/FilterBar.vue
View file

@ -22,7 +22,7 @@ defineEmits(['update:modelValue'])
<style scoped>
.filter-bar {
padding: 14px 32px;
padding: 16px 28px;
border-bottom: 1px dashed var(--border);
display: flex;
align-items: center;

4
app/components/ImageUpload.vue
View file

@ -12,8 +12,8 @@
>
<button
type="button"
class="absolute top-2 right-2 p-1 text-white rounded-full transition-colors"
style="background: var(--ember)"
class="absolute top-2 right-2 p-1 rounded-full transition-colors"
style="background: var(--ember); color: var(--parch-text)"
@click="removeImage"
>
<Icon name="heroicons:x-mark" class="w-4 h-4" />

6
app/components/LoginModal.vue
View file

@ -40,7 +40,7 @@
type="email"
placeholder="your.email@example.com"
required
/>
>
</div>
<div class="info-box">
@ -182,7 +182,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
.modal-overline {
font-family: 'Brygada 1918', serif;
font-size: 14px;
font-size: 13px;
font-weight: 600;
color: var(--candle);
margin-bottom: 12px;
@ -218,7 +218,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
.info-box {
font-size: 11px;
color: var(--text-faint);
padding: 10px 14px;
padding: 12px 16px;
border: 1px dashed var(--border);
margin-bottom: 16px;
line-height: 1.6;

6
app/components/OnboardingWidget.vue
View file

@ -118,7 +118,7 @@ const barEmpty = computed(() => '-'.repeat((4 - completedCount.value) * 2) + ']'
display: inline-block;
margin-top: 8px;
padding: 4px 12px;
border: 1px dashed rgba(237, 228, 208, 0.25);
border: 1px dashed color-mix(in srgb, var(--parch-text) 25%, transparent);
color: var(--parch-accent);
font-size: 11px;
text-decoration: none;
@ -134,7 +134,7 @@ const barEmpty = computed(() => '-'.repeat((4 - completedCount.value) * 2) + ']'
.ow-progress {
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed rgba(237, 228, 208, 0.12);
border-top: 1px dashed color-mix(in srgb, var(--parch-text) 12%, transparent);
font-size: 11px;
color: var(--parch-text-dim);
display: flex;
@ -153,7 +153,7 @@ const barEmpty = computed(() => '-'.repeat((4 - completedCount.value) * 2) + ']'
}
.ow-bar-empty {
color: rgba(237, 228, 208, 0.2);
color: color-mix(in srgb, var(--parch-text) 20%, transparent);
}
.ow-skip {

2
app/components/SignupFlowOverlay.vue
View file

@ -108,7 +108,7 @@ const stepLabel = computed(() => {
position: fixed;
inset: 0;
z-index: 50;
background: rgba(42, 32, 21, 0.72);
background: color-mix(in srgb, var(--parch) 72%, transparent);
backdrop-filter: blur(4px);
display: flex;
align-items: center;