bvandeusen/FabledScribe
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases 53 Wiki Activity

refactor(frontend): CSS pay-down, derive batch (milestone 302 step 4) — page-header, error-msg/state-msg/empty-msg, empty-title/empty-sub, required, field-hint recipes into components.css; form-buttons into rules-shared.css; scoped copies trimmed to remainders/overrides; the three views' .input becomes fs-input + width/box-sizing remainder (canon #2336)
CI & Build / TypeScript typecheck (push) Failing after 2s
Details
CI & Build / Python lint (push) Successful in 3s
Details
CI & Build / Plugin hooks (push) Successful in 8s
Details
CI & Build / integration (push) Successful in 24s
Details
CI & Build / Python tests (push) Successful in 1m2s
Details
CI & Build / Build & push image (push) Skipped
Details

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
bvandeusen
2026-08-23 17:30:43 -04:00
co-authored by Claude Fable 5
parent c28c87c39e
commit 6fb0cb38a5
10 changed files with 93 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/DesignSystemsView.vue
+16 -16
View File
@@ -557,14 +557,14 @@ function isSelfContainedColour(value: string): boolean {
<div class="field">
<label class="field-label" for="first-title">Title</label>
<input
id="first-title" v-model="newTitle" class="input" type="text"
id="first-title" v-model="newTitle" class="fs-input input" type="text"
placeholder="Your house style" @keyup.enter="submitCreate"
/>
</div>
<div class="field">
<label class="field-label" for="first-desc">Description</label>
<input
id="first-desc" v-model="newDescription" class="input" type="text"
id="first-desc" v-model="newDescription" class="fs-input input" type="text"
placeholder="What it covers"
/>
</div>
@@ -612,20 +612,20 @@ function isSelfContainedColour(value: string): boolean {
<div class="field">
<label class="field-label" for="new-title">Title</label>
<input
id="new-title" v-model="newTitle" class="input" type="text"
id="new-title" v-model="newTitle" class="fs-input input" type="text"
placeholder="A house style, or one app in it" @keyup.enter="submitCreate"
/>
</div>
<div class="field">
<label class="field-label" for="new-desc">Description</label>
<input
id="new-desc" v-model="newDescription" class="input" type="text"
id="new-desc" v-model="newDescription" class="fs-input input" type="text"
placeholder="What it covers"
/>
</div>
<div class="field">
<label class="field-label" for="new-parent">Inherits from</label>
<select id="new-parent" v-model="newParentId" class="input">
<select id="new-parent" v-model="newParentId" class="fs-input input">
<option :value="null">Nothing — this is a family system</option>
<option v-for="s in systems" :key="s.id" :value="s.id">{{ s.title }}</option>
</select>
@@ -659,16 +659,16 @@ function isSelfContainedColour(value: string): boolean {
<div class="field">
<label class="field-label" for="edit-title">Title</label>
<input id="edit-title" v-model="editTitle" class="input" type="text" />
<input id="edit-title" v-model="editTitle" class="fs-input input" type="text" />
</div>
<div class="field">
<label class="field-label" for="edit-desc">Description</label>
<input id="edit-desc" v-model="editDescription" class="input" type="text" />
<input id="edit-desc" v-model="editDescription" class="fs-input input" type="text" />
</div>
<div class="field">
<label class="field-label" for="edit-guidance">Guidance</label>
<textarea
id="edit-guidance" v-model="editGuidance" class="input" rows="5"
id="edit-guidance" v-model="editGuidance" class="fs-input input" rows="5"
placeholder="Aesthetic, voice and tone, what's deliberately out of scope…"
></textarea>
<p class="field-hint">
@@ -678,7 +678,7 @@ function isSelfContainedColour(value: string): boolean {
</div>
<div class="field">
<label class="field-label" for="edit-parent">Inherits from</label>
<select id="edit-parent" v-model="editParentId" class="input">
<select id="edit-parent" v-model="editParentId" class="fs-input input">
<option :value="null">Nothing — this is a family system</option>
<option v-for="s in parentOptions" :key="s.id" :value="s.id">{{ s.title }}</option>
</select>
@@ -887,19 +887,19 @@ function isSelfContainedColour(value: string): boolean {
<div class="field">
<label class="field-label" for="token-name">Name</label>
<input
id="token-name" v-model="tokenName" class="input mono" type="text"
id="token-name" v-model="tokenName" class="fs-input input mono" type="text"
placeholder="--surface-page"
/>
</div>
<div class="field-row">
<div class="field">
<label class="field-label" for="token-group">Group</label>
<input id="token-group" v-model="tokenGroup" class="input" type="text" placeholder="surface" />
<input id="token-group" v-model="tokenGroup" class="fs-input input" type="text" placeholder="surface" />
</div>
<div class="field">
<label class="field-label" for="token-purpose">Purpose</label>
<input
id="token-purpose" v-model="tokenPurpose" class="input" type="text"
id="token-purpose" v-model="tokenPurpose" class="fs-input input" type="text"
placeholder="page background, deepest surface"
/>
</div>
@@ -908,7 +908,7 @@ function isSelfContainedColour(value: string): boolean {
<div class="field">
<label class="field-label" for="token-rationale">Why this value</label>
<input
id="token-rationale" v-model="tokenRationale" class="input" type="text"
id="token-rationale" v-model="tokenRationale" class="fs-input input" type="text"
placeholder="Matches the primary action colour, deliberately"
/>
<p class="field-hint">
@@ -920,7 +920,7 @@ function isSelfContainedColour(value: string): boolean {
<div class="field">
<label class="field-label" for="token-supersedes">Use instead of</label>
<input
id="token-supersedes" v-model="tokenSupersedes" class="input mono" type="text"
id="token-supersedes" v-model="tokenSupersedes" class="fs-input input mono" type="text"
placeholder="#fff, #ffffff"
/>
<p class="field-hint">
@@ -941,8 +941,8 @@ function isSelfContainedColour(value: string): boolean {
</template>
</p>
<div v-for="(row, i) in tokenModes" :key="i" class="mode-row">
<input v-model="row.mode" class="input mono mode-key" type="text" placeholder="base" />
<input v-model="row.value" class="input mono" type="text" placeholder="#14171a" />
<input v-model="row.mode" class="fs-input input mono mode-key" type="text" placeholder="base" />
<input v-model="row.value" class="fs-input input mono" type="text" placeholder="#14171a" />
<span
v-if="isSelfContainedColour(row.value)" class="swatch"
:style="{ background: row.value }" aria-hidden="true"