Merge branch 'profileEditA11y' of https://github.com/SolidOS/mashlib into profileEditA11y

Author: timea-solid

src/styles/themes/dark.css

@@ -25,6 +25,7 @@ html[data-theme="dark"] {
   --color-border-darker: #333;
   --color-border-light: #666;
   --color-border-pale: #555;
+  --color-border-accent: #9999dd;
 
   /* Status Colors */
   --color-selected-bg: #4a6e3a;
@@ -133,16 +134,23 @@ html[data-theme="dark"] {
   /* 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;
+  --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;
@@ -165,6 +173,12 @@ html[data-theme="dark"] {
   /* Shadows */
   --box-shadow: 0 2px 8px rgba(0,0,0,0.3);
   --box-shadow-sm: 0 1px 4px rgba(0,0,0,0.2);
+  --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.3);
+  --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.35);
+  --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.3);
+  --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.5);
+  --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.4);
+  --box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.4);
 
   /* Accessibility */
   --min-touch-target: 44px;
@@ -178,15 +192,18 @@ html[data-theme="dark"] {
 
   /* Overlay and Modal */
   --overlay-bg: rgba(0, 0, 0, 0.7);
+  --overlay-bg-muted: rgba(0, 0, 0, 0.5);
   --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;

src/styles/themes/light.css

@@ -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;
@@ -156,6 +158,13 @@
   --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);