From 887a2bc978ba8eea701fc7ae82a9fb2953a22538 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 22 Jan 2026 15:42:28 +0000 Subject: [PATCH] fix: Standardize CSS variable naming conventions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Standardized CSS custom property naming across all components: - Changed 'background' to 'bg' (--sidebar-background → --sidebar-bg) - Changed American 'color' to British 'colour' (--form-error-color → --form-error-colour) - Changed generic 'text' to 'colour' (--form-input-text → --form-input-colour) Updated files: - Sidebar.svelte: background → bg - PayloadForm.svelte: color → colour, text → colour - README.md: Updated documentation examples This ensures consistent naming patterns across the codebase: - Use 'bg' for all background variables - Use 'colour' (British spelling) for all color variables --- packages/sveltekit-helper/README.md | 14 +++++++------- .../src/components/Sidebar.svelte | 10 +++++----- .../src/components/payload/PayloadForm.svelte | 16 ++++++++-------- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/sveltekit-helper/README.md b/packages/sveltekit-helper/README.md index 668c50c0..d0c4c9fa 100644 --- a/packages/sveltekit-helper/README.md +++ b/packages/sveltekit-helper/README.md @@ -219,13 +219,13 @@ Override CSS variables globally from `:root`: :root { --sidebar-width: 400px; --sidebar-min-width: 300px; - --sidebar-background: #1a1a1a; + --sidebar-bg: #1a1a1a; --sidebar-border-colour: rgba(255, 255, 255, 0.2); --sidebar-overlay-colour: #000; --sidebar-overlay-opacity: 0.5; /* Toggle button */ - --sidebar-toggle-background: #2a2a2a; + --sidebar-toggle-bg: #2a2a2a; --sidebar-toggle-colour: #fff; --sidebar-toggle-padding: 0.5rem 1.5rem; --sidebar-toggle-radius: 8px; @@ -239,7 +239,7 @@ Override CSS variables globally from `:root`: Or use inline styles: ```svelte - + ``` @@ -359,13 +359,13 @@ Override CSS variables globally: --form-input-border: 1px solid #e5e7eb; --form-input-border-radius: 0.5rem; --form-input-bg: #ffffff; - --form-input-text: #111827; - --form-error-color: #ef4444; + --form-input-colour: #111827; + --form-error-colour: #ef4444; --form-error-bg: #fee2e2; - --form-success-color: #10b981; + --form-success-colour: #10b981; --form-success-bg: #d1fae5; --form-button-bg: #3b82f6; - --form-button-text: #ffffff; + --form-button-colour: #ffffff; --form-button-hover-bg: #2563eb; --form-button-disabled-bg: #9ca3af; } diff --git a/packages/sveltekit-helper/src/components/Sidebar.svelte b/packages/sveltekit-helper/src/components/Sidebar.svelte index 5baf6819..1b9879ba 100644 --- a/packages/sveltekit-helper/src/components/Sidebar.svelte +++ b/packages/sveltekit-helper/src/components/Sidebar.svelte @@ -141,11 +141,11 @@ export type SidebarProps = { - `--sidebar-min-width`: Minimum sidebar width (default: 270px) - `--sidebar-top`: Desktop sticky position from top (default: 160px) - `--sidebar-overlay-opacity`: Overlay opacity when open (default: 0.3) - - `--sidebar-background`: Sidebar background color (default: var(--colour-base-black)) + - `--sidebar-bg`: Sidebar background color (default: var(--colour-base-black)) - `--sidebar-border-colour`: Border color (default: rgba(255, 255, 255, 0.1)) - `--sidebar-overlay-colour`: Overlay background color (default: var(--colour-grey-900)) - `--sidebar-inner-padding`: Content padding (default: 2rem 1.8rem 0 1.8rem) - - `--sidebar-toggle-background`: Toggle button background (default: var(--colour-base-black)) + - `--sidebar-toggle-bg`: Toggle button background (default: var(--colour-base-black)) - `--sidebar-toggle-colour`: Toggle button text color (default: var(--colour-base-light)) - `--sidebar-toggle-padding`: Toggle button padding (default: 0.25rem 1.5rem) - `--sidebar-toggle-radius`: Toggle button border radius (default: 0.375rem) @@ -190,7 +190,7 @@ export type SidebarProps = { display: none; bottom: 0; right: 1px; - background-color: var(--sidebar-toggle-background, var(--colour-base-black)); + background-color: var(--sidebar-toggle-bg, var(--colour-base-black)); color: var(--sidebar-toggle-colour, var(--colour-base-light)); padding: var(--sidebar-toggle-padding, 0.25rem 1.5rem); border-top-right-radius: var(--sidebar-toggle-radius, 0.375rem); @@ -210,7 +210,7 @@ export type SidebarProps = { left: 1px; width: calc(100% - 2px); height: 10%; - background: var(--sidebar-toggle-background, var(--colour-base-black)); + background: var(--sidebar-toggle-bg, var(--colour-base-black)); } } @@ -261,7 +261,7 @@ export type SidebarProps = { height: 100%; width: var(--sidebar-width, 50vw); min-width: var(--sidebar-min-width, 270px); - background-color: var(--sidebar-background, var(--colour-base-black)); + background-color: var(--sidebar-bg, var(--colour-base-black)); border-color: var(--sidebar-border-colour, rgba(255, 255, 255, 0.1)); z-index: 1000; transition: translate 600ms cubic-bezier(0.1, 0.7, 0.1, 1); diff --git a/packages/sveltekit-helper/src/components/payload/PayloadForm.svelte b/packages/sveltekit-helper/src/components/payload/PayloadForm.svelte index eda02c41..1b0fb9bb 100644 --- a/packages/sveltekit-helper/src/components/payload/PayloadForm.svelte +++ b/packages/sveltekit-helper/src/components/payload/PayloadForm.svelte @@ -202,7 +202,7 @@ async function handleSubmit(event: SubmitEvent) { &__label { font-size: 0.875rem; font-weight: 500; - color: var(--form-input-text, #111827); + color: var(--form-input-colour, #111827); &--checkbox { font-weight: 400; @@ -211,7 +211,7 @@ async function handleSubmit(event: SubmitEvent) { } &__required { - color: var(--form-error-color, #ef4444); + color: var(--form-error-colour, #ef4444); margin-left: 0.25rem; } @@ -221,7 +221,7 @@ async function handleSubmit(event: SubmitEvent) { border: var(--form-input-border, 1px solid #d1d5db); border-radius: var(--form-input-border-radius, 0.375rem); background: var(--form-input-bg, #ffffff); - color: var(--form-input-text, #111827); + color: var(--form-input-colour, #111827); font-size: 1rem; font-family: inherit; @@ -231,7 +231,7 @@ async function handleSubmit(event: SubmitEvent) { } &--error { - border-color: var(--form-error-color, #ef4444); + border-color: var(--form-error-colour, #ef4444); } } @@ -255,13 +255,13 @@ async function handleSubmit(event: SubmitEvent) { &__error { font-size: 0.875rem; - color: var(--form-error-color, #ef4444); + color: var(--form-error-colour, #ef4444); } &__success { padding: 1rem; background-color: var(--form-success-bg, #d1fae5); - color: var(--form-success-color, #10b981); + color: var(--form-success-colour, #10b981); border-radius: var(--form-input-border-radius, 0.375rem); font-weight: 500; } @@ -269,7 +269,7 @@ async function handleSubmit(event: SubmitEvent) { &__alert { padding: 1rem; background-color: var(--form-error-bg, #fee2e2); - color: var(--form-error-color, #ef4444); + color: var(--form-error-colour, #ef4444); border-radius: var(--form-input-border-radius, 0.375rem); font-weight: 500; } @@ -277,7 +277,7 @@ async function handleSubmit(event: SubmitEvent) { &__submit { padding: var(--form-input-padding, 0.75rem) 1.5rem; background-color: var(--form-button-bg, #3b82f6); - color: var(--form-button-text, #ffffff); + color: var(--form-button-colour, #ffffff); border: none; border-radius: var(--form-input-border-radius, 0.375rem); font-size: 1rem;