Skip to content

updated css var #342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bourgeoa merged 15 commits into from
Mar 28, 2026
Merged

updated css var #342

Changes from 8 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
88d3011
added icon base size
SharonStrats Mar 16, 2026
ccd1e51
small icon
SharonStrats Mar 16, 2026
ba3436f
background row colors
SharonStrats Mar 16, 2026
b0788fb
xs icon size
SharonStrats Mar 16, 2026
da22f87
xl icon size
SharonStrats Mar 16, 2026
19eef55
xxs icon size
SharonStrats Mar 16, 2026
d01ee7f
updated css var
timea-solid Mar 23, 2026
270b14f
Merge pull request #343 from SolidOS/refactor/styles-separateCSS
timea-solid Mar 23, 2026
85f0bd5
Initial plan
Copilot Mar 23, 2026
d6d4911
Add missing dark theme CSS custom properties to dark.css
Copilot Mar 23, 2026
2032e76
Merge pull request #344 from SolidOS/copilot/sub-pr-342
timea-solid Mar 23, 2026
4c43118
Merge branch 'main' into profileEditA11y
timea-solid Mar 23, 2026
d400aa8
Merge branch 'profileEditA11y' of https://github.com/SolidOS/mashlib …
timea-solid Mar 23, 2026
bf7377e
removed not in use dump function
timea-solid Mar 23, 2026
58f4819
Merge branch 'main' into profileEditA11y
Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions src/styles/themes/light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
:root {
/* Background and Text */
--color-background: white;
--color-background-row-default: white;
--color-background-row-alternate: #f0f0f0;
--color-text: #1A1A1A;
--color-text-secondary: #666;
--color-text-light: #aaa;
Expand All @@ -25,6 +27,7 @@
--color-border-darker: #444;
--color-border-light: #aaa;
--color-border-pale: #eee;
Comment on lines 22 to 29
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These new theme tokens (e.g., --color-border-accent) are only defined in the light theme. src/styles/themes/dark.css does not currently define them, so if/when dark mode is enabled they will fall back to the light values and can cause inconsistent/low-contrast UI. Add matching variables (with dark-appropriate values) to dark.css to keep the theme contract consistent.

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Member Author

@timea-solid timea-solid Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot open a new pull request to apply changes based on this feedback

--color-border-accent: #88c;

/* Status Colors */
--color-selected-bg: #8F3;
Expand Down Expand Up @@ -134,20 +137,34 @@
/* Spacing and Sizing */
--spacing-tiny: 0.05em;
--spacing-small: 0.1em;
--spacing-xxxs: 0.2em;
--spacing-xxs: 0.3em;
--spacing-xs: 0.5rem;
--spacing-sm: 0.75em;
Comment thread
timea-solid marked this conversation as resolved.
--spacing-btn: 0.7em;
--spacing-base: 0.5em;
--spacing-md: 1em;
--spacing-lg: 1.5em;
--spacing-xl: 2em;
--spacing-2xl: 3em;
--border-width-xthin: 0.05em;
--border-width-sm: 0.1em;
--border-width-thin: 1px;
--border-width-medium: 2px;
--border-width-bold: 5px;
--border-radius-xs: 0.1em;
--border-radius-sm: 0.2em;
--border-radius-base: 0.5em;
--border-radius-lg: 0.75em;
--border-radius-full: 1em;

/* icons */
--icon-xxs: 1em;
--icon-xs: 1.5em;
--icon-sm: 1.8em;
--icon-base: 2em;
--icon-xl: 3.1em;

/* Primary/Accent Colors */
--color-primary: #7C4DFF;
--color-primary-alpha: rgba(124, 77, 255, 0.25);
Expand All @@ -166,6 +183,12 @@
/* Shadows */
--box-shadow: 0 2px 8px rgba(124,77,255,0.08);
--box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12);
--box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);
--box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);
--box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);
--box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);
--box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);
--box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.2);

/* Accessibility */
--min-touch-target: 44px;
Expand All @@ -179,15 +202,18 @@

/* Overlay and Modal */
--overlay-bg: rgba(0, 0, 0, 0.5);
--overlay-bg-muted: rgba(0, 0, 0, 0.3);
--z-index-modal: 9999;
--z-index-skip-links: 1000;

/* Opacity */
--opacity-disabled: 0.6;
--opacity-input-disabled: 0.75;

/* Layout Values */
--max-width-readable: 65ch;
--max-width-readable-wide: 70ch;
--grid-min-column: 30em;

/* Outline Offsets */
--outline-offset-sm: 2px;
Expand Down
Loading