joakim/insertr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify CSS variables by removing 10 unused/redundant variables

Browse Source 
- Remove 6 unused z-index variables (dropdown, sticky, fixed, popover)
- Remove unused font-size-lg and bg-dark variables
- Remove 4 overly-specific input variables, use existing spacing/color vars
- Consolidate form styling to use core variables for consistency
- Add internal CSS file to gitignore to prevent auto-generation conflicts
- Reduces variable count from 38→28 (26% reduction) for easier maintenance
This commit is contained in:
Joakim
2025-09-20 22:03:08 +02:00
parent eb812fa78a
commit 4ef032cad6
2 changed files with 6 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -91,6 +91,7 @@ demo-site/insertr.js
demo-site/insertr.min.js demo-site/insertr.min.js
internal/content/assets/insertr.js internal/content/assets/insertr.js
internal/content/assets/insertr.min.js internal/content/assets/insertr.min.js
internal/content/assets/insertr.css
# Test and build output directories # Test and build output directories
test-output/ test-output/

20
lib/src/styles/insertr.css
View File

@@ -36,7 +36,6 @@
/* Background colors */ /* Background colors */
--insertr-bg-primary: #ffffff; --insertr-bg-primary: #ffffff;
--insertr-bg-secondary: #f8f9fa; --insertr-bg-secondary: #f8f9fa;
--insertr-bg-dark: #343a40;
--insertr-bg-overlay: rgba(0, 0, 0, 0.5); --insertr-bg-overlay: rgba(0, 0, 0, 0.5);
/* Border and spacing */ /* Border and spacing */
@@ -48,12 +47,8 @@
--insertr-spacing-lg: 24px; --insertr-spacing-lg: 24px;
/* Z-index management */ /* Z-index management */
--insertr-z-dropdown: 1000;
--insertr-z-sticky: 1020;
--insertr-z-fixed: 1030;
--insertr-z-modal-backdrop: 1040; --insertr-z-modal-backdrop: 1040;
--insertr-z-modal: 1050; --insertr-z-modal: 1050;
--insertr-z-popover: 1060;
--insertr-z-tooltip: 1070; --insertr-z-tooltip: 1070;
--insertr-z-overlay: 999999; --insertr-z-overlay: 999999;
@@ -61,14 +56,9 @@
--insertr-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --insertr-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--insertr-font-size-sm: 12px; --insertr-font-size-sm: 12px;
--insertr-font-size-base: 14px; --insertr-font-size-base: 14px;
--insertr-font-size-lg: 16px;
--insertr-line-height: 1.4; --insertr-line-height: 1.4;
/* Form elements */ /* Form elements - using existing variables */
--insertr-input-padding: 0.75rem;
--insertr-input-border: 1px solid var(--insertr-border-color);
--insertr-input-border-focus: 1px solid var(--insertr-primary);
--insertr-input-bg: #ffffff;
/* Animation */ /* Animation */
--insertr-transition: all 0.2s ease-in-out; --insertr-transition: all 0.2s ease-in-out;
@@ -435,14 +425,14 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
.insertr-rich-editor, .insertr-rich-editor,
.insertr-fallback-textarea { .insertr-fallback-textarea {
width: 100%; width: 100%;
border: var(--insertr-input-border); border: 1px solid var(--insertr-border-color);
border-radius: var(--insertr-border-radius); border-radius: var(--insertr-border-radius);
padding: var(--insertr-input-padding); padding: var(--insertr-spacing-md);
font-size: var(--insertr-font-size-base); font-size: var(--insertr-font-size-base);
line-height: var(--insertr-line-height); line-height: var(--insertr-line-height);
font-family: var(--insertr-font-family); font-family: var(--insertr-font-family);
color: var(--insertr-text-primary); color: var(--insertr-text-primary);
background: var(--insertr-input-bg); background: var(--insertr-bg-primary);
margin-bottom: var(--insertr-spacing-md); margin-bottom: var(--insertr-spacing-md);
transition: var(--insertr-transition); transition: var(--insertr-transition);
box-sizing: border-box; box-sizing: border-box;
@@ -452,7 +442,7 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
.insertr-rich-editor:focus, .insertr-rich-editor:focus,
.insertr-fallback-textarea:focus { .insertr-fallback-textarea:focus {
outline: none; outline: none;
border: var(--insertr-input-border-focus); border: 1px solid var(--insertr-primary);
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
} }